footer-5

1"use client";
2 
3import { AppleIcon } from "@/components/icons/apple-icon";
4import { FacebookIcon } from "@/components/icons/facebook-icon";
5import { GooglePlayIcon } from "@/components/icons/google-play-icon";
6import { InstagramIcon } from "@/components/icons/instagram-icon";
7import { LinkedinIcon } from "@/components/icons/linkedin-icon";
8import { XIcon } from "@/components/icons/x-icon";
9import { Button } from "@/components/ui/button";
10 
11export function Footer() {
12	return (
13		<footer className="border-t">
14			<div className="mx-auto max-w-6xl px-4 lg:px-6">
15				{/* Grid container with headings and links */}
16				<div className="grid grid-cols-2 gap-8 py-8 md:grid-cols-4">
17					{footerLinks.map((item) => (
18						<div key={item.title}>
19							<h3 className="mb-4 text-xs">{item.title}</h3>
20							<ul className="space-y-2 text-muted-foreground text-sm">
21								{item.links.map((link) => (
22									<li key={link.label}>
23										<a className="hover:text-foreground" href={link.href}>
24											{link.label}
25										</a>
26									</li>
27								))}
28							</ul>
29						</div>
30					))}
31				</div>
32				<div className="h-px bg-border" />
33				{/* Social Buttons + App Links */}
34				<div className="flex flex-wrap items-center justify-between gap-4 py-5">
35					<div className="flex items-center gap-2">
36						{socialLinks.map(({ icon, href }, index) => (
37							<Button
38								asChild
39								key={`social-${href}-${index}`} // More descriptive prefix
40								size="icon"
41								variant="outline"
42							>
43								<a href={href}>{icon}</a>
44							</Button>
45						))}
46					</div>
47 
48					<div className="flex gap-4">
49						<Button asChild className="h-11">
50							<a href="#">
51								<GooglePlayIcon className="size-5" />
52								<div className="flex flex-col items-start justify-center pr-2 text-left">
53									<span className="font-light text-[10px] leading-none tracking-tighter">
54										GET IT ON
55									</span>
56									<p className="font-bold text-base leading-none">
57										Google Play
58									</p>
59								</div>
60							</a>
61						</Button>
62 
63						<Button asChild className="h-11">
64							<a href="#">
65								<AppleIcon className="size-5" />
66								<div className="flex flex-col items-start justify-center pr-2 text-left">
67									<span className="text-[10px] leading-none tracking-tighter">
68										Download on the
69									</span>
70									<p className="font-bold text-base leading-none">App Store</p>
71								</div>
72							</a>
73						</Button>
74					</div>
75				</div>
76// … truncated