vula-projects/vula-e994460c
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Deploy

Browse Source
This commit is contained in:
Vula Builder
2026-07-29 19:04:17 +00:00
parent 76aae7ede1
commit a093919134
1 changed files with 33 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/sections/HeroSection.tsx
+33
View File
@@ -0,0 +1,33 @@
import Image from "next/image"
import Link from "next/link"
export default function HeroSection() {
const imageUrl = "https://images.pexels.com/photos/29681464/pexels-photo-29681464.jpeg?auto=compress&cs=tinysrgb&h=650&w=940"
return (
<section data-vula-section="hero" id="hero" className="relative" style={{ backgroundColor: "#0077BE" }}>
<div className="hidden md:block min-h-[82vh] relative text-white">
<div className="absolute inset-0" style={{ clipPath: "polygon(0 0, 85% 0, 65% 100%, 0 100%)" }}>
{imageUrl && <Image src={imageUrl} alt="Diva" fill className="object-cover" sizes="100vw" priority />}
</div>
<div className="absolute right-0 top-0 h-full w-[45%] flex flex-col justify-center px-10 lg:px-16">
<p className="uppercase tracking-[0.24em] text-[12px] font-bold mb-4">{"Diva"}</p>
<h1 className="text-4xl lg:text-5xl font-black uppercase tracking-[-0.01em] leading-[0.95] mb-6 max-w-4xl">{"Curated bold modern fashion for ambitious young South African women, bridging "}<span className="text-transparent" style={{ WebkitTextStroke: "2px currentColor" }}>{"Cape Town."}</span></h1>
<p className="text-base lg:text-lg text-white/75 mb-8 max-w-sm">{"Professional online fashion boutique in South Africa."}</p>
<div className="w-fit"><Link href="/products" className="inline-block border-[3px] border-current px-7 py-3.5 text-[14px] font-bold uppercase tracking-[0.06em] hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-[4px_4px_0_0_#FFD700] transition-all duration-150">Shop now</Link></div>
</div>
</div>
<div className="flex flex-col md:hidden text-white">
<div className="relative h-72 w-full">
{imageUrl && <Image src={imageUrl} alt="Diva" fill className="object-cover" sizes="100vw" priority />}
</div>
<div className="px-8 py-10" style={{ backgroundColor: "#0077BE" }}>
<p className="uppercase tracking-[0.24em] text-[12px] font-bold mb-4">{"Diva"}</p>
<h1 className="text-3xl font-black uppercase tracking-[-0.01em] leading-[0.95] mb-6 max-w-4xl">{"Curated bold modern fashion for ambitious young South African women, bridging "}<span className="text-transparent" style={{ WebkitTextStroke: "2px currentColor" }}>{"Cape Town."}</span></h1>
<p className="text-base text-white/75 mb-6">{"Professional online fashion boutique in South Africa."}</p>
<Link href="/products" className="inline-block border-[3px] border-current px-7 py-3.5 text-[14px] font-bold uppercase tracking-[0.06em] hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-[4px_4px_0_0_#FFD700] transition-all duration-150">Shop now</Link>
</div>
</div>
</section>
)
}