Navbar Exemple 2

1"use client";
2 
3import { useState, useRef, useEffect } from "react";
4import Link from "next/link";
5import { AnimatePresence, motion } from "framer-motion";
6import { Check, ChevronDown, Languages, Menu, X } from "lucide-react";
7import {
8  FaXTwitter, // X
9  FaInstagram, // Instagram
10  FaLinkedin, // LinkedIn
11  FaYoutube, // YouTube
12  FaThreads, // Threads
13  FaWhatsapp, // WhatsApp
14} from "react-icons/fa6";
15 
16type MegaColumn = {
17  eyebrow: string;
18  links: { label: string; href: string; active?: boolean; badge?: string }[];
19};
20 
21type MegaMenu = {
22  columns: MegaColumn[];
23  footerLinks?: { label: string; href: string }[];
24  showSocials?: boolean;
25  image: { src: string; alt: string };
26  imageCaption?: string;
27};
28 
29const SOLUTIONS_MENU: MegaMenu = {
30  columns: [
31    {
32      eyebrow: "Our Solutions",
33      links: [
34        { label: "For employees", href: "/solutions/salaries", active: true },
35        { label: "For businesses", href: "/solutions/entreprises" },
36      ],
37    },
38    {
39      eyebrow: "Join us",
40      links: [{ label: "Become a partner", href: "/partenaire" }],
41    },
42  ],
43  footerLinks: [
44    { label: "Legal notice", href: "/mentions-legales" },
45    { label: "Privacy policy", href: "/confidentialite" },
46    { label: "Terms of use", href: "/cgu" },
47  ],
48  showSocials: true,
49  image: {
50    src: "https://picsum.photos/seed/solutions/1200/630",
51    alt: "Solution preview",
52  },
53  imageCaption: "See how teams use Bag\\Ui",
54};
55 
56const PRICING_MENU: MegaMenu = {
57  columns: [
58    {
59      eyebrow: "Plans",
60      links: [
61        { label: "Starter", href: "/pricing/starter" },
62        { label: "Pro", href: "/pricing/pro", active: true, badge: "Popular" },
63        { label: "Enterprise", href: "/pricing/enterprise" },
64      ],
65    },
66    {
67      eyebrow: "Details",
68      links: [
69        { label: "Compare all plans", href: "/pricing/compare" },
70        { label: "Billing FAQ", href: "/pricing/faq" },
71        { label: "Talk to sales", href: "/contact" },
72      ],
73    },
74  ],
75  footerLinks: [
76    { label: "Student & non-profit discounts", href: "/pricing/discounts" },
77  ],
78  image: {
79    src: "https://picsum.photos/seed/pricing/1200/630",
80    alt: "Pricing preview",
81  },
82  imageCaption: "Plans that grow with your team",
83};
84 
85const RESOURCES_MENU: MegaMenu = {
86  columns: [
87    {
88      eyebrow: "Learn",
89      links: [
90        { label: "Blog", href: "/resources/blog" },
91        { label: "Guides", href: "/resources/guides" },
92// … truncated