Deploy

src/components/sections/AuthoritativeDefenseHeroSection.tsx

@@ -0,0 +1,41 @@
+import Image from "next/image"
+import Link from "next/link"
+import Button from "@/components/ui/Button"
+
+export default function AuthoritativeDefenseHeroSection() {
+  return (
+    <section data-vula-section="authoritativedefensehero" id="hero" className="relative min-h-screen flex items-center justify-center overflow-hidden">
+      <div className="absolute inset-0">
+        <Image
+          src="https://images.pexels.com/photos/37726678/pexels-photo-37726678.jpeg?auto=compress&cs=tinysrgb&h=650&w=940"
+          alt="Senior partners at a Johannesburg courtroom entrance"
+          fill
+          sizes="100vw"
+          className="object-cover"
+          priority
+        />
+        <div className="absolute inset-0 bg-gradient-to-r from-[#000080]/80 to-[#000080]/40" />
+      </div>
+      <div className="relative z-10 container mx-auto px-4 text-center text-white max-w-4xl">
+        <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold mb-4 leading-tight">
+          Mashobane &amp; Associates
+        </h1>
+        <p className="text-xl md:text-2xl font-semibold text-[#d4af37] mb-6">
+          32 Years of Fearless Criminal Defense
+        </p>
+        <p className="text-lg md:text-xl mb-8 text-white/90 max-w-2xl mx-auto">
+          Defending your rights in Gauteng&#39;s courts with integrity, compassion, and relentless resolve.
+        </p>
+        <Link href="/services">
+          <Button
+            variant="default"
+            size="lg"
+            className="bg-[#d4af37] text-[#000080] hover:bg-[#c5a031] border-none font-bold px-8 py-4 text-lg"
+          >
+            Schedule a Confidential Consultation
+          </Button>
+        </Link>
+      </div>
+    </section>
+  )
+}