Deploy

src/components/sections/StreetCultureHeroSection.tsx

@@ -0,0 +1,45 @@
+import Image from "next/image"
+import Link from "next/link"
+
+export default function StreetCultureHeroSection() {
+  return (
+    <section data-vula-section="streetculturehero"
+      id="hero"
+      className="flex min-h-[80vh] flex-col md:flex-row"
+    >
+      {/* Left: Image */}
+      <div className="relative w-full md:w-1/2 h-72 md:h-auto">
+        <Image
+          src="https://images.pexels.com/photos/33693811/pexels-photo-33693811.jpeg?auto=compress&cs=tinysrgb&h=650&w=940"
+          alt="Urban street fashion in Durban"
+          fill
+          className="object-cover"
+          sizes="50vw"
+          priority
+        />
+      </div>
+
+      {/* Right: Content */}
+      <div className="flex w-full md:w-1/2 flex-col justify-center bg-[#121212] px-8 py-12 md:px-12 md:py-0 lg:px-16">
+        <p className="mb-2 text-sm font-semibold uppercase tracking-widest text-[#64B5F6]">
+          S.A.W — Est. 2024
+        </p>
+        <h1 className="text-4xl font-bold text-[#F5F5F5] md:text-5xl lg:text-6xl">
+          Own Your Vibe
+        </h1>
+        <p className="mt-4 max-w-md text-lg text-[#F5F5F5]/70">
+          Bold, quality tees straight out of Durban. Street culture meets premium
+          craftsmanship.
+        </p>
+        <div className="mt-8">
+          <Link
+            href="/products"
+            className="inline-block rounded-lg bg-[#4A9EFF] px-8 py-3 text-base font-semibold text-white transition-all duration-200 ease-out hover:opacity-90"
+          >
+            Explore the New Drop
+          </Link>
+        </div>
+      </div>
+    </section>
+  )
+}