Files
latosa-escrima/frontend/components/hero.tsx
2025-01-31 17:35:10 +01:00

45 lines
1.3 KiB
TypeScript

import { ExternalLink } from "lucide-react";
import { Button } from "@/components/ui/button";
import Link from "next/link";
const Hero = () => {
return (
<section className="relative flex h-[calc(100vh-68px)] items-center justify-center overflow-hidden py-32">
<div className="">
<div className="magicpattern absolute inset-x-0 top-0 -z-10 flex h-full w-full items-center justify-center bg-blue-50 opacity-100" />
<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">
<img
src="https://shadcnblocks.com/images/block/block-1.svg"
alt="logo"
className="h-16"
/>
<div>
<h1 className="mb-6 text-pretty text-2xl font-bold text-primary lg:text-5xl">
Trouvez votre équilibre
<br />
avec Latosa-Escrima
</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">
À propos
<ExternalLink className="ml-2 h-4" />
</Button>
</div>
</div>
</div>
</div>
</section>
);
};
export default Hero;