88 lines
3.2 KiB
TypeScript
88 lines
3.2 KiB
TypeScript
|
"use client";
|
||
|
|
|
||
|
|
import GlowButton from "@/component/ui/GlowButton";
|
||
|
|
import { motion, useInView } from "framer-motion";
|
||
|
|
import { useRef } from "react";
|
||
|
|
|
||
|
|
export default function Hero() {
|
||
|
|
const ref = useRef<HTMLElement>(null);
|
||
|
|
const isInView = useInView(ref, { amount: 0.3 });
|
||
|
|
|
||
|
|
return (
|
||
|
|
<section
|
||
|
|
id="home"
|
||
|
|
ref={ref}
|
||
|
|
className="min-h-screen flex items-center justify-center relative bg-slate-900"
|
||
|
|
>
|
||
|
|
{/* Grid Background animée */}
|
||
|
|
<motion.div
|
||
|
|
className="absolute inset-0"
|
||
|
|
initial={{ opacity: 0 }}
|
||
|
|
animate={{ opacity: isInView ? 1 : 0 }}
|
||
|
|
transition={{ duration: 1 }}
|
||
|
|
style={{
|
||
|
|
backgroundImage:
|
||
|
|
"linear-gradient(to right, #1e293b 1px, transparent 1px), linear-gradient(to bottom, #1e293b 1px, transparent 1px)",
|
||
|
|
backgroundSize: "100px 100px",
|
||
|
|
}}
|
||
|
|
></motion.div>
|
||
|
|
|
||
|
|
{/* Content */}
|
||
|
|
<motion.div
|
||
|
|
className="container mx-auto px-4 text-center relative z-10"
|
||
|
|
initial={{ opacity: 0, y: 30 }}
|
||
|
|
animate={{
|
||
|
|
opacity: isInView ? 1 : 0,
|
||
|
|
y: isInView ? 0 : 30,
|
||
|
|
}}
|
||
|
|
transition={{ duration: 0.8, delay: 0.2 }}
|
||
|
|
>
|
||
|
|
<motion.h1
|
||
|
|
className="text-5xl md:text-7xl font-bold text-white mb-6"
|
||
|
|
initial={{ opacity: 0, y: 20 }}
|
||
|
|
animate={{
|
||
|
|
opacity: isInView ? 1 : 0,
|
||
|
|
y: isInView ? 0 : 20,
|
||
|
|
}}
|
||
|
|
transition={{ duration: 0.8, delay: 0.4 }}
|
||
|
|
>
|
||
|
|
Bonjour👋, je suis{" "}
|
||
|
|
<span className="text-transparent bg-clip-text bg-linear-to-r from-blue-400 to-purple-600">
|
||
|
|
Jessy
|
||
|
|
</span>
|
||
|
|
</motion.h1>
|
||
|
|
|
||
|
|
<motion.p
|
||
|
|
className="text-xl md:text-2xl text-slate-300 mb-8"
|
||
|
|
initial={{ opacity: 0, y: 20 }}
|
||
|
|
animate={{
|
||
|
|
opacity: isInView ? 1 : 0,
|
||
|
|
y: isInView ? 0 : 20,
|
||
|
|
}}
|
||
|
|
transition={{ duration: 0.8, delay: 0.6 }}
|
||
|
|
>
|
||
|
|
Développeur Full Stack | Créateur d'expériences web
|
||
|
|
</motion.p>
|
||
|
|
|
||
|
|
<motion.div
|
||
|
|
className="flex gap-4 justify-center flex-wrap"
|
||
|
|
initial={{ opacity: 0, y: 20 }}
|
||
|
|
animate={{
|
||
|
|
opacity: isInView ? 1 : 0,
|
||
|
|
y: isInView ? 0 : 20,
|
||
|
|
}}
|
||
|
|
transition={{ duration: 0.8, delay: 0.8 }}
|
||
|
|
>
|
||
|
|
<GlowButton href="#projects" variant="secondary">
|
||
|
|
Voir mes projets
|
||
|
|
</GlowButton>
|
||
|
|
|
||
|
|
<GlowButton href="#contact" variant="primary">
|
||
|
|
Me contacter
|
||
|
|
</GlowButton>
|
||
|
|
</motion.div>
|
||
|
|
</motion.div>
|
||
|
|
</section>
|
||
|
|
);
|
||
|
|
}
|