モダンフッター

1import Link from "next/link";
2
3export function FooterModern001() {
4  const footerLinks = {
5    product: [
6      { label: "Features", href: "#" },
7      { label: "Pricing", href: "#" },
8      { label: "Security", href: "#" },
9      { label: "Roadmap", href: "#" },
10    ],
11    company: [
12      { label: "About", href: "#" },
13      { label: "Blog", href: "#" },
14      { label: "Careers", href: "#" },
15      { label: "Press", href: "#" },
16    ],
17    resources: [
18      { label: "Documentation", href: "#" },
19      { label: "Help Center", href: "#" },
20      { label: "API Reference", href: "#" },
21      { label: "Community", href: "#" },
22    ],
23    legal: [
24      { label: "Privacy", href: "#" },
25      { label: "Terms", href: "#" },
26      { label: "Cookie Policy", href: "#" },
27    ],
28  };
29
30  const socialLinks = [
31    {
32      label: "Twitter",
33      href: "#",
34      icon: (
35        <svg className="h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
36          <path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84" />
37        </svg>
38      ),
39    },
40    {
41      label: "GitHub",
42      href: "#",
43      icon: (
44        <svg className="h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
45          <path
46            fillRule="evenodd"
47            d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
48            clipRule="evenodd"
49          />
50        </svg>
51      ),
52    },
53    {
54      label: "LinkedIn",
55      href: "#",
56      icon: (
57        <svg className="h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
58          <path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z" />
59        </svg>
60      ),
61    },
62  ];
63
64  return (
65    <footer className="bg-zinc-950 border-t border-zinc-800/50">
66      <div className="mx-auto max-w-7xl px-4 py-16 sm:px-6 lg:px-8 lg:py-20">
67        <div className="xl:grid xl:grid-cols-3 xl:gap-12">
68          {/* Brand */}
69          <div className="space-y-8 xl:col-span-1">
70            <Link href="#" className="flex items-center gap-3">
71              <div className="flex h-9 w-9 items-center justify-center rounded-lg border border-zinc-700 bg-zinc-900">
72                <span className="text-sm font-bold tracking-wider text-white">L</span>
73              </div>
74              <span className="text-xl font-semibold tracking-wide text-white">
75                Logo
76              </span>
77            </Link>
78            <p className="text-sm leading-relaxed tracking-wide text-zinc-400">
79              Making the world a better place through constructing elegant
80              hierarchies.
81            </p>
82            {/* Social Links */}
83            <div className="flex gap-5">
84              {socialLinks.map((social) => (
85                <Link
86                  key={social.label}
87                  href={social.href}
88                  className="text-zinc-500 transition-colors duration-200 hover:text-white"
89                >
90                  <span className="sr-only">{social.label}</span>
91                  {social.icon}
92                </Link>
93              ))}
94            </div>
95          </div>
96
97          {/* Links */}
98          <div className="mt-16 grid grid-cols-1 gap-8 sm:grid-cols-2 xl:col-span-2 xl:mt-0">
99            <div className="md:grid md:grid-cols-2 md:gap-8">
100              <div>
101                <h3 className="text-xs font-semibold uppercase tracking-widest text-zinc-400">
102                  Product
103                </h3>
104                <ul className="mt-6 space-y-4">
105                  {footerLinks.product.map((link) => (
106                    <li key={link.label}>
107                      <Link
108                        href={link.href}
109                        className="text-sm tracking-wide text-zinc-500 transition-colors duration-200 hover:text-white"
110                      >
111                        {link.label}
112                      </Link>
113                    </li>
114                  ))}
115                </ul>
116              </div>
117              <div className="mt-12 md:mt-0">
118                <h3 className="text-xs font-semibold uppercase tracking-widest text-zinc-400">
119                  Company
120                </h3>
121                <ul className="mt-6 space-y-4">
122                  {footerLinks.company.map((link) => (
123                    <li key={link.label}>
124                      <Link
125                        href={link.href}
126                        className="text-sm tracking-wide text-zinc-500 transition-colors duration-200 hover:text-white"
127                      >
128                        {link.label}
129                      </Link>
130                    </li>
131                  ))}
132                </ul>
133              </div>
134            </div>
135            <div className="md:grid md:grid-cols-2 md:gap-8">
136              <div>
137                <h3 className="text-xs font-semibold uppercase tracking-widest text-zinc-400">
138                  Resources
139                </h3>
140                <ul className="mt-6 space-y-4">
141                  {footerLinks.resources.map((link) => (
142                    <li key={link.label}>
143                      <Link
144                        href={link.href}
145                        className="text-sm tracking-wide text-zinc-500 transition-colors duration-200 hover:text-white"
146                      >
147                        {link.label}
148                      </Link>
149                    </li>
150                  ))}
151                </ul>
152              </div>
153              <div className="mt-12 md:mt-0">
154                <h3 className="text-xs font-semibold uppercase tracking-widest text-zinc-400">
155                  Legal
156                </h3>
157                <ul className="mt-6 space-y-4">
158                  {footerLinks.legal.map((link) => (
159                    <li key={link.label}>
160                      <Link
161                        href={link.href}
162                        className="text-sm tracking-wide text-zinc-500 transition-colors duration-200 hover:text-white"
163                      >
164                        {link.label}
165                      </Link>
166                    </li>
167                  ))}
168                </ul>
169              </div>
170            </div>
171          </div>
172        </div>
173
174        {/* Bottom */}
175        <div className="mt-16 border-t border-zinc-800/50 pt-8">
176          <p className="text-center text-xs tracking-widest text-zinc-600">
177            &copy; {new Date().getFullYear()} Your Company. All rights reserved.
178          </p>
179        </div>
180      </div>
181    </footer>
182  );
183}