126 lines
5.5 KiB
TypeScript
126 lines
5.5 KiB
TypeScript
import Link from 'next/link';
|
||
import styles from './Footer.module.css';
|
||
|
||
export default function Footer() {
|
||
const currentYear = new Date().getFullYear();
|
||
|
||
const footerLinks = {
|
||
product: [
|
||
{ label: 'Features', href: '/features' },
|
||
{ label: 'Pricing', href: '/pricing' },
|
||
{ label: 'Documentation', href: '/docs' },
|
||
{ label: 'API', href: '/docs/api' },
|
||
],
|
||
company: [
|
||
{ label: 'About Us', href: '/about' },
|
||
{ label: 'Blog', href: '/blog' },
|
||
{ label: 'Careers', href: '/careers' },
|
||
{ label: 'Contact', href: '/contact' },
|
||
],
|
||
resources: [
|
||
{ label: 'Help Center', href: '/help' },
|
||
{ label: 'Community', href: '/community' },
|
||
{ label: 'Tutorials', href: '/tutorials' },
|
||
{ label: 'Status', href: '/status' },
|
||
],
|
||
legal: [
|
||
{ label: 'Privacy Policy', href: '/privacy' },
|
||
{ label: 'Terms of Service', href: '/terms' },
|
||
{ label: 'Cookie Policy', href: '/cookies' },
|
||
{ label: 'GDPR', href: '/gdpr' },
|
||
],
|
||
};
|
||
|
||
const socialLinks = [
|
||
{ icon: '𝕏', href: 'https://twitter.com', label: 'Twitter' },
|
||
{ icon: '📘', href: 'https://facebook.com', label: 'Facebook' },
|
||
{ icon: '📷', href: 'https://instagram.com', label: 'Instagram' },
|
||
{ icon: '💼', href: 'https://linkedin.com', label: 'LinkedIn' },
|
||
{ icon: '📺', href: 'https://youtube.com', label: 'YouTube' },
|
||
];
|
||
|
||
return (
|
||
<footer className={styles.footer}>
|
||
<div className="container">
|
||
<div className={styles.footerContent}>
|
||
{/* Brand Section */}
|
||
<div className={styles.brandSection}>
|
||
<Link href="/" className={styles.logo}>
|
||
<span className={styles.logoIcon}>🚀</span>
|
||
<span className={styles.logoText}>Social<span className="gradient-text">Buddy</span></span>
|
||
</Link>
|
||
<p className={styles.brandDescription}>
|
||
Empowering businesses to manage their social media presence with powerful tools and analytics.
|
||
</p>
|
||
<div className={styles.socialLinks}>
|
||
{socialLinks.map((social) => (
|
||
<a
|
||
key={social.label}
|
||
href={social.href}
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
className={styles.socialLink}
|
||
aria-label={social.label}
|
||
>
|
||
{social.icon}
|
||
</a>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Links Sections */}
|
||
<div className={styles.linksGrid}>
|
||
<div className={styles.linkColumn}>
|
||
<h4 className={styles.columnTitle}>Product</h4>
|
||
{footerLinks.product.map((link) => (
|
||
<Link key={link.label} href={link.href} className={styles.footerLink}>
|
||
{link.label}
|
||
</Link>
|
||
))}
|
||
</div>
|
||
|
||
<div className={styles.linkColumn}>
|
||
<h4 className={styles.columnTitle}>Company</h4>
|
||
{footerLinks.company.map((link) => (
|
||
<Link key={link.label} href={link.href} className={styles.footerLink}>
|
||
{link.label}
|
||
</Link>
|
||
))}
|
||
</div>
|
||
|
||
<div className={styles.linkColumn}>
|
||
<h4 className={styles.columnTitle}>Resources</h4>
|
||
{footerLinks.resources.map((link) => (
|
||
<Link key={link.label} href={link.href} className={styles.footerLink}>
|
||
{link.label}
|
||
</Link>
|
||
))}
|
||
</div>
|
||
|
||
<div className={styles.linkColumn}>
|
||
<h4 className={styles.columnTitle}>Legal</h4>
|
||
{footerLinks.legal.map((link) => (
|
||
<Link key={link.label} href={link.href} className={styles.footerLink}>
|
||
{link.label}
|
||
</Link>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Bottom Bar */}
|
||
<div className={styles.bottomBar}>
|
||
<p className={styles.copyright}>
|
||
© {currentYear} SocialBuddy. All rights reserved.
|
||
</p>
|
||
<div className={styles.badges}>
|
||
<span className={styles.badge}>🔒 Secure</span>
|
||
<span className={styles.badge}>⚡ Fast</span>
|
||
<span className={styles.badge}>🌍 Global</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
);
|
||
}
|