1"use client";
2
3import { Button } from "@/components/ui/button";
4import { Input } from "@/components/ui/input";
5import { Separator } from "@/components/ui/separator";
6import { Github, Twitter, Linkedin, Mail, Blocks } from "lucide-react";
7
8export function FooterBlock2() {
9  const footerSections = [
10    {
11      title: "Product",
12      links: [
13        { name: "Features", href: "#" },
14        { name: "Pricing", href: "#" },
15        { name: "Documentation", href: "#" },
16        { name: "API Reference", href: "#" },
17      ],
18    },
19    {
20      title: "Company",
21      links: [
22        { name: "About Us", href: "#" },
23        { name: "Careers", href: "#" },
24        { name: "Blog", href: "#" },
25        { name: "Press Kit", href: "#" },
26      ],
27    },
28    {
29      title: "Support",
30      links: [
31        { name: "Help Center", href: "#" },
32        { name: "Community", href: "#" },
33        { name: "Contact Us", href: "#" },
34        { name: "Status Page", href: "#" },
35      ],
36    },
37  ];
38
39  return (
40    <footer className="w-full border-t bg-background">
41      <div className="container mx-auto px-4 md:px-6 py-16">
42        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-8">
43          {/* Brand Section */}
44          <div className="lg:col-span-2 space-y-4">
45            <div className="flex items-center gap-2">
46              <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-primary text-primary-foreground">
47                <Blocks className="h-4 w-4" />
48              </div>
49              <span className="text-xl font-bold">Your Brand</span>
50            </div>
51            <p className="text-muted-foreground max-w-md">
52              Building the future of web development with modern tools and
53              beautiful design. Join thousands of developers who trust our
54              platform.
55            </p>
56            <div className="flex items-center gap-2">
57              <Button variant="ghost" size="icon" asChild>
58                <a href="#" aria-label="GitHub">
59                  <Github className="h-4 w-4" />
60                </a>
61              </Button>
62              <Button variant="ghost" size="icon" asChild>
63                <a href="#" aria-label="Twitter">
64                  <Twitter className="h-4 w-4" />
65                </a>
66              </Button>
67              <Button variant="ghost" size="icon" asChild>
68                <a href="#" aria-label="LinkedIn">
69                  <Linkedin className="h-4 w-4" />
70                </a>
71              </Button>
72              <Button variant="ghost" size="icon" asChild>
73                <a href="#" aria-label="Email">
74                  <Mail className="h-4 w-4" />
75                </a>
76              </Button>
77            </div>
78          </div>
79
80          {/* Links Sections */}
81          {footerSections.map((section, index) => (
82            <div key={index} className="space-y-4">
83              <h4 className="font-semibold">{section.title}</h4>
84              <ul className="space-y-2">
85                {section.links.map((link, linkIndex) => (
86                  <li key={linkIndex}>
87                    <a
88                      href={link.href}
89                      className="text-muted-foreground hover:text-foreground transition-colors text-sm"
90                    >
91                      {link.name}
92                    </a>
93                  </li>
94                ))}
95              </ul>
96            </div>
97          ))}
98        </div>
99
100        <Separator className="my-8" />
101
102        <div className="flex flex-col sm:flex-row items-center justify-between gap-4">
103          <p className="text-sm text-muted-foreground">
104            © 2024 Your Company. All rights reserved.
105          </p>
106          <div className="flex items-center gap-4 text-sm">
107            <a
108              href="#"
109              className="text-muted-foreground hover:text-foreground transition-colors"
110            >
111              Privacy Policy
112            </a>
113            <a
114              href="#"
115              className="text-muted-foreground hover:text-foreground transition-colors"
116            >
117              Terms of Service
118            </a>
119            <a
120              href="#"
121              className="text-muted-foreground hover:text-foreground transition-colors"
122            >
123              Cookies
124            </a>
125          </div>
126        </div>
127      </div>
128    </footer>
129  );
130}