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 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 | 1x 7x 7x 7x 7x 7x 28x 21x 14x 14x | import React from 'react';
import { Link } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import { Twitter, Linkedin, Github, Youtube } from 'lucide-react';
import SmoothScheduleLogo from '../SmoothScheduleLogo';
const Footer: React.FC = () => {
const { t } = useTranslation();
const currentYear = new Date().getFullYear();
const footerLinks = {
product: [
{ to: '/features', label: t('marketing.nav.features') },
{ to: '/pricing', label: t('marketing.nav.pricing') },
{ to: '/signup', label: t('marketing.nav.getStarted') },
],
company: [
{ to: '/about', label: t('marketing.nav.about') },
{ to: '/contact', label: t('marketing.nav.contact') },
],
legal: [
{ to: '/privacy', label: t('marketing.footer.legal.privacy') },
{ to: '/terms', label: t('marketing.footer.legal.terms') },
],
};
const socialLinks = [
{ href: 'https://twitter.com/smoothschedule', icon: Twitter, label: 'Twitter' },
{ href: 'https://linkedin.com/company/smoothschedule', icon: Linkedin, label: 'LinkedIn' },
{ href: 'https://github.com/smoothschedule', icon: Github, label: 'GitHub' },
{ href: 'https://youtube.com/@smoothschedule', icon: Youtube, label: 'YouTube' },
];
return (
<footer className="bg-gray-50 dark:bg-gray-900 border-t border-gray-200 dark:border-gray-800">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 lg:py-16">
{/* Main Footer Content */}
<div className="grid grid-cols-2 md:grid-cols-4 gap-8 lg:gap-12">
{/* Brand Column */}
<div className="col-span-2 md:col-span-1">
<Link to="/" className="flex items-center gap-2 mb-4 group">
<SmoothScheduleLogo className="h-12 w-12 text-gray-900 dark:text-white group-hover:text-brand-600 dark:group-hover:text-brand-400 transition-colors" />
<span className="text-lg font-bold text-gray-900 dark:text-white">
{t('marketing.footer.brandName')}
</span>
</Link>
<p className="text-sm text-gray-600 dark:text-gray-400 mb-6">
{t('marketing.description')}
</p>
{/* Social Links */}
<div className="flex items-center gap-4">
{socialLinks.map((social) => (
<a
key={social.label}
href={social.href}
target="_blank"
rel="noopener noreferrer"
className="p-2 rounded-lg text-gray-500 hover:text-brand-600 dark:text-gray-400 dark:hover:text-brand-400 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
aria-label={social.label}
>
<social.icon className="h-5 w-5" />
</a>
))}
</div>
</div>
{/* Product Links */}
<div>
<h3 className="text-sm font-semibold text-gray-900 dark:text-white uppercase tracking-wider mb-4">
{t('marketing.footer.product.title')}
</h3>
<ul className="space-y-3">
{footerLinks.product.map((link) => (
<li key={link.to}>
<Link
to={link.to}
className="text-sm text-gray-600 dark:text-gray-400 hover:text-brand-600 dark:hover:text-brand-400 transition-colors"
>
{link.label}
</Link>
</li>
))}
</ul>
</div>
{/* Company Links */}
<div>
<h3 className="text-sm font-semibold text-gray-900 dark:text-white uppercase tracking-wider mb-4">
{t('marketing.footer.company.title')}
</h3>
<ul className="space-y-3">
{footerLinks.company.map((link) => (
<li key={link.to}>
<Link
to={link.to}
className="text-sm text-gray-600 dark:text-gray-400 hover:text-brand-600 dark:hover:text-brand-400 transition-colors"
>
{link.label}
</Link>
</li>
))}
</ul>
</div>
{/* Legal Links */}
<div>
<h3 className="text-sm font-semibold text-gray-900 dark:text-white uppercase tracking-wider mb-4">
{t('marketing.footer.legal.title')}
</h3>
<ul className="space-y-3">
{footerLinks.legal.map((link) => (
<li key={link.to}>
<Link
to={link.to}
className="text-sm text-gray-600 dark:text-gray-400 hover:text-brand-600 dark:hover:text-brand-400 transition-colors"
>
{link.label}
</Link>
</li>
))}
</ul>
</div>
</div>
{/* Bottom Bar */}
<div className="mt-12 pt-8 border-t border-gray-200 dark:border-gray-800">
<p className="text-sm text-center text-gray-500 dark:text-gray-400">
© {currentYear} {t('marketing.footer.copyright')}
</p>
</div>
</div>
</footer>
);
};
export default Footer;
|