Stacked Circular Footer

1import { Icons } from "@/components/icon";
2import { Button } from "@/components/ui/button";
3import { Input } from "@/components/ui/input";
4import { Label } from "@/components/ui/label";
5import { Facebook, Instagram, Linkedin, Twitter } from "lucide-react";
6 
7export default function StackedCircularFooter() {
8  return (
9    <footer className="bg-background py-12">
10      <div className="container mx-auto px-4 md:px-6">
11        <div className="flex flex-col items-center">
12          <div className="mb-8 rounded-full bg-primary/10 p-8">
13            <Icons.logo className="icon-class w-2" />
14          </div>
15          <nav className="mb-8 flex flex-wrap justify-center gap-6">
16            <a href="#" className="hover:text-primary">
17              Home
18            </a>
19            <a href="#" className="hover:text-primary">
20              About
21            </a>
22            <a href="#" className="hover:text-primary">
23              Services
24            </a>
25            <a href="#" className="hover:text-primary">
26              Products
27            </a>
28            <a href="#" className="hover:text-primary">
29              Contact
30            </a>
31          </nav>
32          <div className="mb-8 flex space-x-4">
33            <Button variant="outline" size="icon" className="rounded-full">
34              <Facebook className="h-4 w-4" />
35              <span className="sr-only">Facebook</span>
36            </Button>
37            <Button variant="outline" size="icon" className="rounded-full">
38              <Twitter className="h-4 w-4" />
39              <span className="sr-only">Twitter</span>
40            </Button>
41            <Button variant="outline" size="icon" className="rounded-full">
42              <Instagram className="h-4 w-4" />
43              <span className="sr-only">Instagram</span>
44            </Button>
45            <Button variant="outline" size="icon" className="rounded-full">
46              <Linkedin className="h-4 w-4" />
47              <span className="sr-only">LinkedIn</span>
48            </Button>
49          </div>
50          <div className="mb-8 w-full max-w-md">
51            <form className="flex space-x-2">
52              <div className="grow">
53                <Label htmlFor="email" className="sr-only">
54                  Email
55                </Label>
56                <Input
57                  id="email"
58                  placeholder="Enter your email"
59                  type="email"
60                  className="rounded-full"
61                />
62              </div>
63// … truncated