footer-1

1import {
2  FacebookIcon,
3  GithubIcon,
4  InstagramIcon,
5  LinkedinIcon,
6  TwitterIcon,
7  YoutubeIcon,
8} from "lucide-react";
9import { Logo } from "@/components/logo";
10import { Button } from "@/components/ui/button";
11import { cn } from "@/lib/utils";
12 
13export function Footer() {
14  const company = [
15    {
16      title: "About Us",
17      href: "#",
18    },
19    {
20      title: "Careers",
21      href: "#",
22    },
23    {
24      title: "Brand assets",
25      href: "#",
26    },
27    {
28      title: "Privacy Policy",
29      href: "#",
30    },
31    {
32      title: "Terms of Service",
33      href: "#",
34    },
35  ];
36 
37  const resources = [
38    {
39      title: "Blog",
40      href: "#",
41    },
42    {
43      title: "Help Center",
44      href: "#",
45    },
46    {
47      title: "Contact Support",
48      href: "#",
49    },
50    {
51      title: "Community",
52      href: "#",
53    },
54    {
55      title: "Security",
56      href: "#",
57    },
58  ];
59 
60  const socialLinks = [
61    {
62      icon: FacebookIcon,
63      link: "#",
64    },
65    {
66      icon: GithubIcon,
67      link: "#",
68    },
69    {
70      icon: InstagramIcon,
71      link: "#",
72    },
73    {
74      icon: LinkedinIcon,
75      link: "#",
76    },
77    {
78      icon: TwitterIcon,
79      link: "#",
80    },
81    {
82      icon: YoutubeIcon,
83      link: "#",
84    },
85  ];
86  return (
87    <footer className="relative">
88      <div
89        className={cn(
90          "mx-auto max-w-5xl lg:border-x",
91          "dark:bg-[radial-gradient(35%_80%_at_30%_0%,--theme(--color-foreground/.1),transparent)]"
92        )}
93      >
94        <div className="absolute inset-x-0 h-px w-full bg-border" />
95        <div className="grid max-w-5xl grid-cols-6 gap-6 p-4">
96          <div className="col-span-6 flex flex-col gap-4 pt-5 md:col-span-4">
97            <a className="w-max" href="#">
98              <Logo className="h-5" />
99            </a>
100            <p className="max-w-sm text-balance font-mono text-muted-foreground text-sm">
101              A comprehensive financial technology platform.
102            </p>
103            <div className="flex gap-2">
104              {socialLinks.map((item, index) => (
105                <Button
106                  key={`social-${item.link}-${index}`}
107                  size="icon-sm"
108                  variant="outline"
109                >
110                  <a href={item.link} target="_blank">
111                    <item.icon className="size-3.5" />
112                  </a>
113                </Button>
114              ))}
115            </div>
116          </div>
117// … truncated