Deploy

src/components/sections/TeamBannerSection.tsx

@@ -0,0 +1,42 @@
+import Image from "next/image"
+
+export default function TeamBannerSection() {
+  return (
+    <section
+      id="team-banner"
+      className="bg-[#F0F8FF] px-6 overflow-hidden"
+    >
+      <div className="mx-auto max-w-7xl flex flex-col md:flex-row md:h-[400px]">
+        {/* Text column */}
+        <div className="flex-1 flex flex-col justify-center py-10 md:py-0 text-left">
+          <p className="text-xs uppercase tracking-[0.14em] text-primary mb-3">
+            Durban, KwaZulu-Natal
+          </p>
+          <h2 className="font-serif text-4xl md:text-5xl font-bold text-foreground leading-tight">
+            Our <em className="italic text-primary">Team</em>
+          </h2>
+          <p className="mt-4 text-base text-foreground/70 leading-relaxed max-w-lg">
+            Our team of seasoned legal professionals combines decades of expertise in
+            corporate law, property transactions, and litigation to provide clear,
+            strategic advice. We serve businesses and individuals across KwaZulu-Natal
+            with the commitment and care that defines true partnership.
+          </p>
+        </div>
+
+        {/* Hairline vertical rule – desktop only */}
+        <div className="hidden md:block w-px bg-border/30 self-stretch flex-shrink-0" />
+
+        {/* Image column */}
+        <div className="relative h-48 md:h-full w-full md:w-[30%] flex-shrink-0">
+          <Image
+            src="https://images.pexels.com/photos/20752572/pexels-photo-20752572.jpeg?auto=compress&cs=tinysrgb&h=650&w=940"
+            alt="Gumede & Partners team discussing a case in their Durban office"
+            fill
+            className="object-cover"
+            sizes="(max-width: 768px) 100vw, 30vw"
+          />
+        </div>
+      </div>
+    </section>
+  )
+}