66 lines
2.9 KiB
TypeScript
66 lines
2.9 KiB
TypeScript
import { Link, usePage } from '@inertiajs/react';
|
|
import { ChevronDown } from 'lucide-react';
|
|
import { Button } from '@/components/ui/button';
|
|
import { dashboard, membership } from '@/routes';
|
|
import { type SharedData } from '@/types';
|
|
import illustrationImage from '@/img/utils/lrl-illustration.png';
|
|
import PawsDecoration from '@/components/common/PawsDecoration';
|
|
import { useParallax } from '@/hooks/use-parallax';
|
|
|
|
export function HeroSection() {
|
|
const { auth } = usePage<SharedData>().props;
|
|
const pawsRef = useParallax<HTMLDivElement>(0.12);
|
|
|
|
const scrollToFirstSection = () => {
|
|
document.getElementById('first-section')?.scrollIntoView({ behavior: 'smooth' });
|
|
};
|
|
|
|
return (
|
|
<section
|
|
id="hero"
|
|
className="relative flex flex-col w-full max-w-[335px] lg:max-w-7xl mx-auto min-h-[calc(100vh-80px)] px-4"
|
|
>
|
|
{/* Contenu principal */}
|
|
<div className="flex flex-1 items-center justify-center gap-4 w-full">
|
|
<div className="flex flex-col w-full items-center text-center lg:items-start lg:text-left justify-center gap-4">
|
|
<h1 className="text-5xl text-accent max-w-[450px] mb-5">
|
|
Pour un internet éthique !
|
|
</h1>
|
|
<p className="text-xl mb-5">
|
|
"Dégooglisons"<br />
|
|
nos ordinateurs, nos tablettes et nos smartphones.<br />
|
|
<i>"Le chemin est long, mais la voie est libre"</i>
|
|
</p>
|
|
{auth.user ? (
|
|
<Link href={dashboard()}>
|
|
<Button variant="secondary">Mon espace</Button>
|
|
</Link>
|
|
) : (
|
|
<Link href={membership()}>
|
|
<Button variant="secondary">Adhérer dès maintenant</Button>
|
|
</Link>
|
|
)}
|
|
</div>
|
|
<div className="hidden lg:flex w-full items-center justify-center">
|
|
<img src={illustrationImage} alt="Illustration Le Retzien Libre" className="max-w-md w-full" />
|
|
</div>
|
|
</div>
|
|
|
|
<div ref={pawsRef} className="absolute bottom-12 right-0 pointer-events-none hidden lg:block w-48 opacity-40">
|
|
<PawsDecoration className="w-full h-auto" />
|
|
</div>
|
|
|
|
{/* Flèche vers la première section */}
|
|
<div className="flex justify-center pb-8">
|
|
<button
|
|
onClick={scrollToFirstSection}
|
|
aria-label="Voir nos services"
|
|
className="p-2 rounded-full border-3 border-black animate-bounce hover:animate-none transition"
|
|
>
|
|
<ChevronDown className="size-6" />
|
|
</button>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|