vula-projects/vula-9ad325dd
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-08-03 11:42:11 +00:00
parent 9e742516fc
commit bcb9418a4c
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/7195805/pexels-photo-7195805.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="Zama Salon" 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.12em] text-[12px] text-white/70 mb-4">{"Zama Salon"}</p>
<h1 className="text-4xl lg:text-5xl font-semibold tracking-[-0.02em] leading-[1.12] mb-6 max-w-4xl">{"A full-service Johannesburg salon that combines modern colouring, keratin "}<span className="text-[#FFD700]">{"and perm."}</span></h1>
<p className="text-base lg:text-lg text-white/75 mb-8 max-w-sm">{"Professional hair salon in South Africa."}</p>
<div className="w-fit"><Link href="#contact" className="inline-block bg-[#0077BE] text-white px-9 py-4 text-[15px] font-semibold rounded-full shadow-xl hover:-translate-y-0.5 transition-all duration-200">Book an appointment</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="Zama Salon" fill className="object-cover" sizes="100vw" priority />}
</div>
<div className="px-8 py-10" style={{ backgroundColor: "#0077BE" }}>
<p className="uppercase tracking-[0.12em] text-[12px] text-white/70 mb-4">{"Zama Salon"}</p>
<h1 className="text-3xl font-semibold tracking-[-0.02em] leading-[1.12] mb-6 max-w-4xl">{"A full-service Johannesburg salon that combines modern colouring, keratin "}<span className="text-[#FFD700]">{"and perm."}</span></h1>
<p className="text-base text-white/75 mb-6">{"Professional hair salon in South Africa."}</p>
<Link href="#contact" className="inline-block bg-[#0077BE] text-white px-9 py-4 text-[15px] font-semibold rounded-full shadow-xl hover:-translate-y-0.5 transition-all duration-200">Book an appointment</Link>
</div>
</div>
</section>
)
}