Spaces:
Paused
Paused
File size: 3,219 Bytes
56c7b6d | 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 | import React from 'react';
import { motion } from 'framer-motion';
import { Github, Twitter, Mail } from 'lucide-react';
const Footer: React.FC = () => {
const currentYear = new Date().getFullYear();
return (
<motion.footer className="border-t border-slate-700 bg-slate-900 mt-16">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
<div className="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
{/* Brand */}
<div>
<h3 className="font-bold text-white mb-4">Job Apply AI</h3>
<p className="text-slate-400 text-sm">
Automate your job applications with intelligent AI-powered CV tailoring.
</p>
</div>
{/* Links */}
<div>
<h4 className="font-semibold text-white mb-4">Features</h4>
<ul className="space-y-2">
{['Job Scraping', 'CV Tailoring', 'Batch Processing'].map((item) => (
<li key={item}>
<a href="#" className="text-slate-400 hover:text-emerald-400 text-sm transition-colors">
{item}
</a>
</li>
))}
</ul>
</div>
{/* Documentation */}
<div>
<h4 className="font-semibold text-white mb-4">Resources</h4>
<ul className="space-y-2">
{['Documentation', 'GitHub', 'Support'].map((item) => (
<li key={item}>
<a href="#" className="text-slate-400 hover:text-emerald-400 text-sm transition-colors">
{item}
</a>
</li>
))}
</ul>
</div>
{/* Social */}
<div>
<h4 className="font-semibold text-white mb-4">Follow</h4>
<div className="flex gap-4">
{[
{ icon: Github, href: '#' },
{ icon: Twitter, href: '#' },
{ icon: Mail, href: '#' },
].map((social, idx) => (
<motion.a
key={idx}
href={social.href}
whileHover={{ scale: 1.1, y: -2 }}
className="w-10 h-10 bg-slate-800 rounded-lg flex items-center justify-center text-slate-300 hover:text-emerald-400 hover:bg-emerald-500/10 transition-all"
>
<social.icon className="w-5 h-5" />
</motion.a>
))}
</div>
</div>
</div>
{/* Bottom */}
<div className="border-t border-slate-700 pt-8 flex flex-col md:flex-row items-center justify-between">
<p className="text-slate-400 text-sm">
© {currentYear} Job Apply AI. All rights reserved.
</p>
<div className="flex gap-6 mt-4 md:mt-0">
<a href="#" className="text-slate-400 hover:text-white text-sm transition-colors">
Privacy
</a>
<a href="#" className="text-slate-400 hover:text-white text-sm transition-colors">
Terms
</a>
</div>
</div>
</div>
</motion.footer>
);
};
export default Footer;
|