Navbar Exemple 1

1"use client";
2 
3import { useState, useEffect } from "react";
4import Link from "next/link";
5import { motion, AnimatePresence } from "framer-motion";
6import Image from "next/image";
7 
8type Theme = "dark" | "light" | "system";
9 
10const NAV_LINKS = [
11    { label: "Services", href: "#services" },
12    { label: "Coverage", href: "#coverage" },
13    { label: "Offers", href: "#offers" },
14    { label: "Price", href: "#price" },
15    { label: "About", href: "#about" },
16    { label: "Contact", href: "#contact" },
17];
18 
19const SunIcon = () => (
20    <svg
21        width="14"
22        height="14"
23        viewBox="0 0 24 24"
24        fill="none"
25        stroke="currentColor"
26        strokeWidth="1.8"
27        strokeLinecap="round"
28        strokeLinejoin="round"
29    >
30        <circle cx="12" cy="12" r="4" />
31        <path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41" />
32    </svg>
33);
34 
35const MoonIcon = () => (
36    <svg
37        width="14"
38        height="14"
39        viewBox="0 0 24 24"
40        fill="none"
41        stroke="currentColor"
42        strokeWidth="1.8"
43        strokeLinecap="round"
44        strokeLinejoin="round"
45    >
46        <path d="M21 12.79A9 9 0 1111.21 3a7 7 0 109.79 9.79z" />
47    </svg>
48);
49 
50const SystemIcon = () => (
51    <svg
52        width="14"
53        height="14"
54        viewBox="0 0 24 24"
55        fill="none"
56        stroke="currentColor"
57        strokeWidth="1.8"
58        strokeLinecap="round"
59        strokeLinejoin="round"
60    >
61        <rect x="2" y="3" width="20" height="14" rx="2" />
62        <path d="M8 21h8M12 17v4" />
63    </svg>
64);
65 
66const UserIcon = () => (
67    <svg
68        width="13"
69        height="13"
70        viewBox="0 0 24 24"
71        fill="none"
72        stroke="currentColor"
73        strokeWidth="1.8"
74        strokeLinecap="round"
75        strokeLinejoin="round"
76    >
77        <path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2" />
78        <circle cx="12" cy="7" r="4" />
79    </svg>
80);
81 
82const PlusIcon = () => (
83    <svg
84        width="12"
85        height="12"
86        viewBox="0 0 24 24"
87        fill="none"
88        stroke="currentColor"
89        strokeWidth="2.2"
90        strokeLinecap="round"
91    >
92        <path d="M12 5v14M5 12h14" />
93    </svg>
94);
95 
96export default function Navbar1() {
97    const [activeLink, setActiveLink] = useState("Services");
98    const [theme, setTheme] = useState<Theme>(() => {
99        if (typeof window === "undefined") return "system";
100// … truncated