home page

latosa-frontend/components/hero.tsx

@@ -0,0 +1,46 @@
+import { ExternalLink } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+import { Badge } from "@/components/ui/badge";
+import { Button, buttonVariants } from "@/components/ui/button";
+
+const Hero = () => {
+	return (
+		<section
+			style={{ height: "calc(100vh - 68px)" }}
+			className="flex justify-center items-center relative overflow-hidden py-32"
+		>
+			<div className="">
+				<div className="bg-blue-50 magicpattern absolute inset-x-0 top-0 -z-10 flex h-full w-full items-center justify-center 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"
+						/>
+						<Badge variant="outline">Latosa-Escrima</Badge>
+						<div>
+							<h1 className="mb-6 text-pretty text-2xl font-bold lg:text-5xl">
+								Trouvez votre équilibre 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>Nous contacter</Button>
+							<Button variant="outline">
+								À propos
+								<ExternalLink className="ml-2 h-4" />
+							</Button>
+						</div>
+					</div>
+				</div>
+			</div>
+		</section>
+	);
+};
+
+export default Hero;