Deploy

src/components/sections/HeroSection.tsx

@@ -0,0 +1,37 @@
+import Image from "next/image"
+import Button from "@/components/ui/Button"
+
+export default function HeroSection() {
+  return (
+    <section data-vula-section="hero" id="hero" className="relative min-h-screen flex items-center justify-center overflow-hidden">
+      <Image
+        src="https://images.pexels.com/photos/36869465/pexels-photo-36869465.jpeg?auto=compress&cs=tinysrgb&h=650&w=940"
+        alt="Corporate law office with African art"
+        fill
+        sizes="100vw"
+        className="object-cover"
+        priority
+      />
+      <div className="absolute inset-0 bg-gradient-to-r from-[#000080]/80 to-[#000080]/60" />
+      <div className="relative z-10 max-w-7xl mx-auto px-6 text-center">
+        <span className="inline-block text-sm font-semibold tracking-widest uppercase text-[#d4af37] mb-4">
+          Mtungwa & Partners
+        </span>
+        <h1 className="text-5xl lg:text-7xl font-bold tracking-tight leading-tight text-white mb-6">
+          Corporate Legal Excellence.
+          <br />Rooted in Africa.
+        </h1>
+        <p className="text-xl lg:text-2xl text-white/80 max-w-3xl mx-auto mb-10 leading-relaxed">
+          Guiding South African businesses through complex corporate law, real estate transactions,
+          and high-stakes litigation with integrity and deep local insight.
+        </p>
+        <a
+          href="#contact"
+          className="inline-block bg-[#d4af37] text-[#000080] px-8 py-4 rounded-lg font-semibold text-lg hover:opacity-90 transition-all duration-200 ease-out shadow-[var(--shadow-lifted)]"
+        >
+          Schedule a Consultation
+        </a>
+      </div>
+    </section>
+  )
+}