Deploy

src/components/sections/DefenseLeadershipHeroSection.tsx

@@ -0,0 +1,66 @@
+import Link from 'next/link'
+import Image from 'next/image'
+import Button from '@/components/ui/Button'
+
+export default function DefenseLeadershipHeroSection() {
+  return (
+    <section data-vula-section="defenseleadershiphero" id="hero" className="relative min-h-screen flex items-center overflow-hidden bg-gradient-to-b from-[#000080] via-[#000080]/90 to-[#36454F]">
+      <div className="absolute inset-0 opacity-20">
+        <div className="relative w-full h-full">
+          <Image
+            src="https://images.pexels.com/photos/8111866/pexels-photo-8111866.jpeg?auto=compress&cs=tinysrgb&h=650&w=940"
+            alt="Durban cityscape with courtroom"
+            fill
+            className="object-cover"
+            sizes="100vw"
+            priority
+          />
+        </div>
+      </div>
+      <div className="container mx-auto px-4 relative z-10 text-center">
+        <div className="flex justify-center mb-6">
+          <span className="inline-flex items-center gap-2 px-4 py-2 rounded-full border border-[#d4af37] text-[#d4af37] text-sm font-semibold tracking-wider">
+            <span className="w-2 h-2 bg-[#d4af37] rounded-full"></span>
+            32 Years of Trusted Criminal Defense
+          </span>
+        </div>
+        <h1 className="text-4xl md:text-6xl lg:text-7xl font-bold text-white leading-tight mb-6">
+          Mashobane & <span className="text-[#d4af37]">Associate</span>
+        </h1>
+        <p className="text-lg md:text-xl text-gray-200 max-w-2xl mx-auto mb-8">
+          Over three decades of fearless criminal defense in KwaZulu-Natal — standing with you from the arrest to the acquittal.
+        </p>
+        <div className="flex flex-wrap justify-center gap-4">
+          <Link href="/booking">
+            <Button variant="default" size="lg" className="bg-[#d4af37] text-[#000080] hover:bg-[#d4af37]/90 font-bold text-lg shadow-[var(--shadow-lifted)]">
+              Book Your Consultation
+            </Button>
+          </Link>
+        </div>
+        <div className="mt-10 flex flex-wrap justify-center gap-6">
+          <div className="flex items-center gap-2 px-4 py-2 rounded-lg bg-white/10 backdrop-blur-sm border border-[#d4af37]/40">
+            <span className="text-[#d4af37] font-bold text-2xl">32+</span>
+            <span className="text-gray-200 text-sm">Years of<br/>Experience</span>
+          </div>
+          <div className="flex items-center gap-2 px-4 py-2 rounded-lg bg-white/10 backdrop-blur-sm border border-[#d4af37]/40">
+            <svg className="w-8 h-8 text-[#d4af37]" viewBox="0 0 24 24" fill="currentColor">
+              <path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z"/>
+            </svg>
+            <span className="text-gray-200 text-sm">Trusted<br/>Firm</span>
+          </div>
+          <div className="flex items-center gap-2 px-4 py-2 rounded-lg bg-white/10 backdrop-blur-sm border border-[#d4af37]/40">
+            <span className="w-8 h-6">
+              <svg viewBox="0 0 24 16" className="w-full h-full">
+                <rect width="24" height="16" fill="#DE3831"/>
+                <rect x="8" width="8" height="16" fill="#007A4D"/>
+                <rect y="6" width="24" height="4" fill="#FFB612"/>
+                <circle cx="12" cy="8" r="4" fill="#007A4D" stroke="#FFB612" strokeWidth="1"/>
+              </svg>
+            </span>
+            <span className="text-gray-200 text-sm">South African<br/>Law Firm</span>
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}