Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 | 1x 1x 1x 1x 1x | import React from "react";
import Link from "next/link";
import { FooterTitle, FooterLink, SocialLink, ExternalLink } from "@/components";
import { accountLinks, quickLinks, supportLinks } from "@/config/links";
export default function Footer() {
const year = new Date().getFullYear();
return (
<footer role="contentinfo" className="bg-gray-1 dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700">
<div className="max-w-[1170px] mx-auto px-4 sm:px-8 xl:px-0">
{/* Main footer content */}
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-10 lg:gap-8 py-12 lg:py-16">
{/* Brand & Contact Section */}
<div className="sm:col-span-2 lg:col-span-1">
<Link href="/" className="inline-block mb-6">
<span className="text-xl font-bold text-dark dark:text-white">
Elite Events
</span>
</Link>
<p className="text-dark-4 dark:text-gray-400 mb-6 text-sm leading-relaxed">
Premium event supplies for all your special occasions. Making every celebration memorable.
</p>
<div className="flex items-center gap-3">
<SocialLink type="Facebook" />
<SocialLink type="Twitter" />
<SocialLink type="Instagram" />
<SocialLink type="Linkedin" />
</div>
</div>
{/* Quick Links */}
<div>
<FooterTitle label="Quick Links" />
<ul className="flex flex-col gap-3">
{quickLinks.map(({ label, href }) => (
<FooterLink key={label} label={label} href={href} />
))}
</ul>
</div>
{/* Account Links */}
<div>
<FooterTitle label="My Account" />
<ul className="flex flex-col gap-3">
{accountLinks.map(({ label, href }) => (
<FooterLink key={label} label={label} href={href} />
))}
</ul>
</div>
{/* Contact Info */}
<div>
<FooterTitle label="Contact Us" />
<ul className="flex flex-col gap-3">
<ExternalLink type="location" value={supportLinks.location} />
<ExternalLink type="phone" value={supportLinks.phone} />
<ExternalLink type="email" value={supportLinks.email} />
</ul>
</div>
</div>
{/* Copyright Section */}
<div className="border-t border-gray-200 dark:border-gray-700 py-6">
<div className="flex flex-col sm:flex-row items-center justify-between gap-4">
<p className="text-dark-4 dark:text-gray-400 text-sm">
© {year} Elite Events. All rights reserved.
</p>
<div className="flex items-center gap-6 text-sm">
<Link
href="/privacy-policy"
className="text-dark-4 dark:text-gray-400 hover:text-blue dark:hover:text-blue transition-colors"
>
Privacy Policy
</Link>
<Link
href="/terms-of-service"
className="text-dark-4 dark:text-gray-400 hover:text-blue dark:hover:text-blue transition-colors"
>
Terms of Service
</Link>
</div>
</div>
</div>
</div>
</footer>
);
}
|