61 lines
1.8 KiB
TypeScript
61 lines
1.8 KiB
TypeScript
import { ExternalLink } from "lucide-react";
|
|
|
|
import { Button } from "@/components/ui/button";
|
|
import Link from "next/link";
|
|
import { API_URL, SITE_NAME } from "@/lib/constants";
|
|
import Image from "next/image";
|
|
import Logo from "./logo";
|
|
|
|
const Hero: React.FC<{ background: string }> = ({ background }) => {
|
|
return (
|
|
<section className="relative flex h-[calc(100vh-68px)] items-center justify-center overflow-hidden py-32">
|
|
<div className="">
|
|
<Image
|
|
src={background}
|
|
layout="fill"
|
|
// objectFit="cover"
|
|
priority
|
|
alt="Hero image"
|
|
unoptimized
|
|
className="grayscale object-cover "
|
|
/>
|
|
{/* Gradient and Blur Overlay */}
|
|
<div className="absolute inset-0 bg-gradient-to-r from-transparent via-transparent to-transparent bg-opacity-30 backdrop-blur-sm"></div>
|
|
<div className="mx-auto flex max-w-5xl flex-col items-center">
|
|
<div className="z-10 flex flex-col items-center gap-6 text-center">
|
|
<Logo className="min-w-16 min-h-16 max-h-44 max-w-44 text-white" />
|
|
<div>
|
|
<h1 className="mb-6 text-pretty text-2xl font-bold text-primary lg:text-5xl font-times">
|
|
Trouvez votre <em>équilibre</em> avec
|
|
<br />
|
|
<span className="font-extrabold text-3xl lg:text-6xl">
|
|
{SITE_NAME}
|
|
</span>
|
|
</h1>
|
|
<p className="text-muted-foreground lg:text-xl">
|
|
Une évolution des arts martiaux Philippins
|
|
</p>
|
|
</div>
|
|
<div className="mt-4 flex justify-center gap-2">
|
|
<Button>
|
|
<Link href="/contact">Nous contacter</Link>
|
|
</Button>
|
|
<Button variant="outline">
|
|
<Link
|
|
href="/about"
|
|
className="flex items-center"
|
|
>
|
|
À propos
|
|
<ExternalLink className="ml-2 h-4" />
|
|
</Link>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default Hero;
|