import React from 'react';
import { Link } from 'react-router-dom';
import { Video, Heart, ExternalLink, Mail, Twitter, Linkedin, Github } from 'lucide-react';
const Footer: React.FC = () => {
const currentYear = new Date().getFullYear();
const footerLinks = {
product: [
{ name: 'Features', href: '/features' },
{ name: 'Pricing', href: '/pricing' },
{ name: 'Documentation', href: '/documentation' },
{ name: 'API', href: '/api' }
],
company: [
{ name: 'About', href: '/about' },
{ name: 'Blog', href: '/blog' },
{ name: 'Careers', href: '/careers' },
{ name: 'Contact', href: '/contact' }
],
support: [
{ name: 'Help Center', href: '/help-center' },
{ name: 'Contact Support', href: '/contact-support' },
{ name: 'Status', href: '/status' },
{ name: 'Privacy Policy', href: '/privacy-policy' }
],
legal: [
{ name: 'Terms of Service', href: '/terms-of-service' }
]
};
const socialLinks = [
{ name: 'Twitter', href: 'https://twitter.com/micromentor', icon: Twitter },
{ name: 'LinkedIn', href: 'https://linkedin.com/company/micromentor', icon: Linkedin },
{ name: 'GitHub', href: 'https://github.com/micromentor', icon: Github }
];
return (
<footer className="bg-gray-900 text-white">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
{/* Main Footer Content */}
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-8">
{/* Brand Section */}
<div className="lg:col-span-1">
<Link to="/" className="flex items-center space-x-2 mb-4">
<div className="bg-gradient-to-r from-primary-500 to-secondary-500 p-2 rounded-lg">
<Video className="h-6 w-6 text-white" />
</div>
<span className="text-xl font-bold">Micro-Mentor</span>
</Link>
<p className="text-gray-400 text-sm mb-4">
Get expert advice in just 5 minutes. Connect with industry professionals for quick, focused mentoring sessions.
</p>
<div className="flex space-x-4">
{socialLinks.map((social) => (
<a
key={social.name}
href={social.href}
target="_blank"
rel="noopener noreferrer"
className="text-gray-400 hover:text-white transition-colors duration-200"
aria-label={social.name}
>
<social.icon className="h-5 w-5" />
</a>
))}
</div>
</div>
{/* Product Links */}
<div>
<h3 className="text-sm font-semibold text-gray-300 uppercase tracking-wider mb-4">
Product
</h3>
<ul className="space-y-3">
{footerLinks.product.map((link) => (
<li key={link.name}>
<Link
to={link.href}
className="text-gray-400 hover:text-white transition-colors duration-200 text-sm"
>
{link.name}
</Link>
</li>
))}
</ul>
</div>
{/* Company Links */}
<div>
<h3 className="text-sm font-semibold text-gray-300 uppercase tracking-wider mb-4">
Company
</h3>
<ul className="space-y-3">
{footerLinks.company.map((link) => (
<li key={link.name}>
<Link
to={link.href}
className="text-gray-400 hover:text-white transition-colors duration-200 text-sm"
>
{link.name}
</Link>
</li>
))}
</ul>
</div>
{/* Support Links */}
<div>
<h3 className="text-sm font-semibold text-gray-300 uppercase tracking-wider mb-4">
Support
</h3>
<ul className="space-y-3">
{footerLinks.support.map((link) => (
<li key={link.name}>
<Link
to={link.href}
className="text-gray-400 hover:text-white transition-colors duration-200 text-sm"
>
{link.name}
</Link>
</li>
))}
</ul>
</div>
{/* Legal Links */}
<div>
<h3 className="text-sm font-semibold text-gray-300 uppercase tracking-wider mb-4">
Legal
</h3>
<ul className="space-y-3">
{footerLinks.legal.map((link) => (
<li key={link.name}>
<Link
to={link.href}
className="text-gray-400 hover:text-white transition-colors duration-200 text-sm"
>
{link.name}
</Link>
</li>
))}
</ul>
</div>
</div>
{/* Newsletter Signup */}
<div className="mt-12 pt-8 border-t border-gray-800">
<div className="max-w-md">
<h3 className="text-lg font-semibold mb-2">Stay Updated</h3>
<p className="text-gray-400 text-sm mb-4">
Get the latest updates on new features and expert mentors.
</p>
<div className="flex space-x-3">
<input
type="email"
placeholder="Enter your email"
className="flex-1 px-4 py-2 bg-gray-800 border border-gray-700 rounded-lg text-white placeholder-gray-400 focus:ring-2 focus:ring-primary-500 focus:border-transparent"
/>
<button className="bg-gradient-to-r from-primary-500 to-secondary-500 text-white px-6 py-2 rounded-lg hover:from-primary-600 hover:to-secondary-600 transition-all duration-200 font-medium">
Subscribe
</button>
</div>
</div>
</div>
{/* Bottom Section */}
<div className="mt-12 pt-8 border-t border-gray-800 flex flex-col md:flex-row justify-between items-center">
<div className="flex items-center space-x-4 text-sm text-gray-400">
<span>Ā© {currentYear} Micro-Mentor. All rights reserved.</span>
<span>ā¢</span>
<a
href="mailto:hello@micro-mentor.app"
className="hover:text-white transition-colors duration-200 flex items-center space-x-1"
>
<Mail className="h-4 w-4" />
<span>hello@micro-mentor.app</span>
</a>
</div>
{/* Built with Bolt.new Badge */}
<div className="mt-4 md:mt-0">
<a
href="https://bolt.new"
target="_blank"
rel="noopener noreferrer"
className="inline-flex items-center space-x-2 px-4 py-2 bg-gradient-to-r from-yellow-400 to-orange-500 text-black rounded-lg hover:from-yellow-500 hover:to-orange-600 transition-all duration-200 font-medium text-sm shadow-lg hover:shadow-xl transform hover:-translate-y-0.5"
>
<Heart className="h-4 w-4" />
<span>Built with Bolt.new</span>
<ExternalLink className="h-3 w-3" />
</a>
</div>
</div>
</div>
</footer>
);
};
export default Footer;