46 lines
1.6 KiB
TypeScript
46 lines
1.6 KiB
TypeScript
import { Link } from "wouter";
|
|
import FadiaHeroImage from "../../assets/Fadia-15.jpg";
|
|
|
|
export function HeroSection() {
|
|
return (
|
|
<section className="relative">
|
|
<div className="bg-cover bg-center h-[90vh] flex items-center justify-center"
|
|
style={{
|
|
backgroundImage: `url(${FadiaHeroImage})`,
|
|
backgroundPosition: "center"
|
|
}}>
|
|
<div className="absolute inset-0 bg-black bg-opacity-20"></div>
|
|
|
|
<div className="relative text-center px-4 sm:px-6 lg:px-8 max-w-3xl mx-auto">
|
|
<h1 className="text-5xl md:text-6xl font-playfair font-bold text-white leading-tight mb-8">
|
|
Moving from a place of connection
|
|
</h1>
|
|
|
|
<Link
|
|
href="/classes"
|
|
className="inline-block bg-teal text-white font-medium py-3 px-10 rounded-full hover:bg-opacity-90 transition duration-300"
|
|
style={{
|
|
boxShadow: "0 4px 6px rgba(0, 0, 0, 0.2), 0 1px 3px rgba(0, 0, 0, 0.08)",
|
|
textShadow: "0 1px 2px rgba(0, 0, 0, 0.1)",
|
|
transform: "translateY(-1px)"
|
|
}}
|
|
>
|
|
Try a Free Class
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="py-16 text-center">
|
|
<div className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<h2 className="text-3xl md:text-4xl font-playfair font-semibold text-gray-900 mb-4">
|
|
Welcome to Pilates with Fadia
|
|
</h2>
|
|
<p className="text-lg text-gray-600">
|
|
where progress feels natural and consistency is effortless
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|