Hero Exemple 1

1"use client";
2
3import { useRef, useState, useEffect } from "react";
4import Link from "next/link";
5import {
6  motion,
7  useInView,
8  useScroll,
9  useTransform,
10  AnimatePresence,
11} from "framer-motion";
12import { ArrowRight, Calendar, Moon, Sun, Menu, X } from "lucide-react";
13
14export default function Hero1() {
15  const [menuOpen, setMenuOpen] = useState(false);
16  const [scrolled, setScrolled] = useState(false);
17  const [dark, setDark] = useState(false);
18  const heroRef = useRef<HTMLDivElement>(null);
19  const heroInView = useInView(heroRef, { once: true, margin: "-80px 0px" });
20
21  const { scrollY } = useScroll();
22  const y1 = useTransform(scrollY, [0, 500], [0, 120]);
23  const y2 = useTransform(scrollY, [0, 500], [0, -100]);
24
25  const bars = [40, 65, 45, 80, 75, 90];
26  const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun"];
27
28  useEffect(() => {
29    const onScroll = () => setScrolled(window.scrollY > 10);
30    window.addEventListener("scroll", onScroll);
31    return () => window.removeEventListener("scroll", onScroll);
32  }, []);
33
34  useEffect(() => {
35    document.documentElement.classList.toggle("dark", dark);
36  }, [dark]);
37
38  const navLinks = [
39    { href: "/features", label: "Features" },
40    { href: "/pricing", label: "Pricing" },
41    { href: "/about", label: "About" },
42    { href: "/contact", label: "Contact" },
43  ];
44
45  return (
46    <div
47      className="min-h-screen bg-white dark:bg-zinc-950 overflow-hidden"
48      style={{
49        fontFamily: "var(--font-geist-sans, 'Geist', system-ui, sans-serif)",
50      }}
51      ref={heroRef}
52    >
53      <motion.header
54        className={[
55          "fixed top-0 left-0 right-0 z-50 transition-all duration-300",
56          scrolled
57            ? "bg-white/95 dark:bg-zinc-950/95 backdrop-blur-md shadow-[0_1px_0_0_rgba(0,0,0,0.06)] dark:shadow-[0_1px_0_0_rgba(255,255,255,0.06)]"
58            : "bg-transparent",
59        ].join(" ")}
60        initial={{ y: -80, opacity: 0 }}
61        animate={{ y: 0, opacity: 1 }}
62        transition={{ duration: 0.55, ease: [0.16, 1, 0.3, 1] }}
63      >
64        <div className="max-w-7xl mx-auto px-5 sm:px-8">
65          <div className="flex items-center justify-between h-16">
66            <motion.div
67              className="flex items-center gap-8"
68              initial={{ opacity: 0, x: -16 }}
69              animate={{ opacity: 1, x: 0 }}
70              transition={{ delay: 0.15, duration: 0.5 }}
71            >
72// … truncated