100 lines
3.4 KiB
TypeScript
100 lines
3.4 KiB
TypeScript
"use client";
|
||
|
||
import Balancer from "react-wrap-balancer";
|
||
import { Button } from "./ui/button";
|
||
import { HiArrowRight } from "react-icons/hi2";
|
||
import { Badge } from "./badge";
|
||
import { motion } from "framer-motion";
|
||
|
||
import Image from "next/image";
|
||
import { useRouter } from "next/navigation";
|
||
import Link from "next/link";
|
||
|
||
export const Hero = () => {
|
||
const router = useRouter();
|
||
return (
|
||
<div className="flex flex-col min-h-screen pt-20 md:pt-40 relative overflow-hidden">
|
||
|
||
<motion.h1
|
||
initial={{
|
||
y: 40,
|
||
opacity: 0,
|
||
}}
|
||
animate={{
|
||
y: 0,
|
||
opacity: 1,
|
||
}}
|
||
transition={{
|
||
ease: "easeOut",
|
||
duration: 0.5,
|
||
}}
|
||
className="text-2xl md:text-4xl lg:text-8xl font-semibold max-w-6xl mx-auto text-center mt-6 relative z-10 text-black dark:text-white"
|
||
>
|
||
<Balancer>Un kebab généreux, où que vous soyez</Balancer>
|
||
</motion.h1>
|
||
<motion.p
|
||
initial={{
|
||
y: 40,
|
||
opacity: 0,
|
||
}}
|
||
animate={{
|
||
y: 0,
|
||
opacity: 1,
|
||
}}
|
||
transition={{
|
||
ease: "easeOut",
|
||
duration: 0.5,
|
||
delay: 0.2,
|
||
}}
|
||
className="text-center mt-6 text-base md:text-xl text-muted dark:text-muted-dark max-w-3xl mx-auto relative z-10"
|
||
>
|
||
<Balancer>
|
||
BG Kebab est un concept de kebab en test, pensé pour être lancé n’importe où, avec des recettes simples, efficaces et généreuses.
|
||
</Balancer>
|
||
</motion.p>
|
||
<motion.div
|
||
initial={{
|
||
y: 80,
|
||
opacity: 0,
|
||
}}
|
||
animate={{
|
||
y: 0,
|
||
opacity: 1,
|
||
}}
|
||
transition={{
|
||
ease: "easeOut",
|
||
duration: 0.5,
|
||
delay: 0.4,
|
||
}}
|
||
className="flex items-center gap-4 justify-center mt-6 relative z-10"
|
||
>
|
||
<Button className="bg-black dark:bg-white text-white dark:text-black hover:bg-gray-800 dark:hover:bg-gray-200">
|
||
Voir le menu
|
||
</Button>
|
||
<Button
|
||
variant="ghost"
|
||
asChild
|
||
className="text-black dark:text-white hover:bg-gray-100 dark:hover:bg-gray-800"
|
||
>
|
||
<Link href="/contact" className="flex space-x-2 items-center group">
|
||
<span>Nous contacter</span>
|
||
<HiArrowRight className="text-muted group-hover:translate-x-1 stroke-[1px] h-3 w-3 transition-transform duration-200 dark:text-muted-dark" />
|
||
</Link>
|
||
</Button>
|
||
</motion.div>
|
||
<div className="p-4 border border-neutral-200 bg-neutral-100 dark:bg-neutral-800 dark:border-neutral-700 rounded-[32px] mt-20 relative">
|
||
<div className="absolute inset-x-0 bottom-0 h-40 w-full bg-gradient-to-b from-transparent via-white to-white dark:via-black/50 dark:to-black scale-[1.1] pointer-events-none" />
|
||
<div className="p-2 bg-white dark:bg-black dark:border-neutral-700 border border-neutral-200 rounded-[24px]">
|
||
<Image
|
||
src="https://images.unsplash.com/photo-1616607364648-5b0885a8b8aa?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wyOTY1MDl8MHwxfHNlYXJjaHwxfHxrZWJhYiUyMGZvb2QlMjBzdHJlZXR8ZW58MHx8fHwxNzY3NDEwNTc1fDA&ixlib=rb-4.1.0&q=80&w=1080"
|
||
alt="Délicieux kebab street food"
|
||
width={1920}
|
||
height={1080}
|
||
className="rounded-[20px] object-cover"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|