38 lines
1.7 KiB
TypeScript
38 lines
1.7 KiB
TypeScript
'use client'
|
|
|
|
import Image from 'next/image'
|
|
import Button from '@/components/ui/Button'
|
|
|
|
export default function BrandAnthemSection() {
|
|
return (
|
|
<section data-vula-section="brandanthem" id="brand-anthem" className="relative min-h-screen flex items-center justify-center bg-[#18181b] text-white overflow-hidden">
|
|
<div className="absolute inset-0">
|
|
<Image
|
|
src="https://images.pexels.com/photos/2259131/pexels-photo-2259131.jpeg?auto=compress&cs=tinysrgb&h=650&w=940"
|
|
alt="Urban streetwear style"
|
|
fill
|
|
sizes="100vw"
|
|
className="object-cover opacity-50"
|
|
priority
|
|
/>
|
|
</div>
|
|
<div className="relative z-10 max-w-4xl mx-auto px-6 text-center">
|
|
<h1 className="text-6xl md:text-8xl font-black tracking-tight uppercase mb-6">S.A.W</h1>
|
|
<p className="text-2xl md:text-3xl font-light mb-4">South African Youth Streetwear</p>
|
|
<p className="text-xl md:text-2xl font-medium text-gray-300 mb-8">
|
|
Born in 2024. 19-year-old founder. Black & white. No cap.
|
|
</p>
|
|
<p className="text-lg text-gray-400 mb-12 max-w-2xl mx-auto">
|
|
This is Smiso Khumalo's vision — quality T-shirts that speak your language.
|
|
From the townships to the city, we dress the movement.
|
|
</p>
|
|
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
|
<Button variant="default" size="lg">Join the Movement</Button>
|
|
<Button variant="secondary" size="lg" className="border-white text-white hover:bg-white hover:text-[#18181b]">
|
|
Check the Tees
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)
|
|
} |