Footer Exemple 1

1"use client";
2 
3import Link from "next/link";
4import Image from "next/image";
5import {
6    FaXTwitter,    // X
7    FaInstagram,   // Instagram
8    FaLinkedin,    // LinkedIn
9    FaGithub,      // GitHub
10    FaYoutube,     // YouTube
11    FaThreads,     // Threads
12    FaWhatsapp     // WhatsApp
13} from "react-icons/fa6";
14 
15const FOOTER_PRODUCT = [
16    { label: "Blocks",     href: "/blocks" },
17    { label: "Templates",  href: "/templates" },
18    { label: "Pricing",    href: "/pricing" },
19    { label: "Docs",       href: "/docs" },
20    { label: "Changelog",  href: "/changelog" },
21];
22 
23const FOOTER_MORE  = [
24    { label: "FAQ", href: "/#faq" },
25    { label: "Login", href: "/login" }
26];
27 
28const FOOTER_LEGAL = [
29    { label: "License", href: "/license" },
30    { label: "Privacy", href: "/privacy" },
31    { label: "Terms",   href: "/terms" },
32    { label: "Contact", href: "mailto:anelka.bag@gmail.com" },
33];
34 
35const SOCIAL_LINKS = [
36    {
37        label: "X",
38        href: "https://x.com/anelkabag",
39        Icon: FaXTwitter,
40    },
41    {
42        label: "Instagram",
43        href: "https://instagram.com/anelka.bag",
44        Icon: FaInstagram,
45    },
46    {
47        label: "LinkedIn",
48        href: "https://linkedin.com/in/anelkabag",
49        Icon: FaLinkedin,
50    },
51    {
52        label: "GitHub",
53        href: "https://github.com/anelkabag",
54        Icon: FaGithub,
55    },
56    {
57        label: "YouTube",
58        href: "https://youtube.com/@anelkabag",
59        Icon: FaYoutube,
60    },
61    {
62        label: "Threads",
63        href: "https://www.threads.com/@anelka.bag",
64        Icon: FaThreads,
65    },
66    {
67        label: "WhatsApp",
68        href: "https://whatsapp.com/channel/0029Vb7dYvr3mFYBKj9Dew25",
69        Icon: FaWhatsapp,
70    },
71];
72 
73export function Footer1() {
74    return (
75        <footer className="border-t border-gray-100 mt-24 py-16 px-6">
76            <div className="max-w-7xl mx-auto px-6 pt-10s">
77                <div className="grid grid-cols-2 md:grid-cols-4 gap-10 mb-14">
78                    <div className="col-span-2 md:col-span-1">
79                        <div className="flex items-center gap-2 mb-3">
80                            <Image src="/logo.png" alt="BagUI" width={16} height={16} />
81                            <span className="text-black font-semibold text-sm">Bag\Ui</span>
82                        </div>
83                        <p className="text-gray-400 text-xs leading-relaxed max-w-[180px]">
84// … truncated