Spaces:
Build error
Build error
File size: 3,878 Bytes
24cad77 | 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 | import { Github, Twitter, Linkedin, Mail, MapPin, Phone, ArrowRight } from 'lucide-react';
export default function Footer() {
const links = {
product: ['Features', 'Integrations', 'Pricing', 'API', 'Documentation'],
company: ['About Us', 'Careers', 'Blog', 'Contact', 'Partners'],
resources: ['Community', 'Help Center', 'Status', 'Terms', 'Privacy'],
contact: ['Email', 'Phone', 'Social Media', 'Office Location']
};
return (
<footer className="bg-slate-950 border-t border-slate-800 pt-20 pb-10">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-12 mb-16">
<div className="lg:col-span-1">
<div className="flex items-center gap-2 mb-6">
<div className="w-10 h-10 bg-gradient-to-br from-blue-500 to-purple-600 rounded-xl flex items-center justify-center">
<span className="text-white font-bold text-xl">AI</span>
</div>
<span className="text-xl font-bold text-white">NeuralScroll</span>
</div>
<p className="text-slate-400 mb-6">
Creating the next generation of AI-powered 3D scrolling experiences for the web.
</p>
<div className="flex gap-4">
{[Twitter, Github, Linkedin, Mail].map((Icon, index) => (
<a
key={index}
href="#"
className="w-10 h-10 rounded-full bg-slate-800 flex items-center justify-center text-slate-400 hover:bg-gradient-to-r hover:from-blue-600 hover:to-purple-600 hover:text-white transition-all duration-200"
>
<Icon size={20} />
</a>
))}
</div>
</div>
<div className="lg:col-span-4 grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-8">
{Object.entries(links).map(([category, items], index) => (
<div key={index}>
<h4 className="text-white font-bold mb-4">{category.charAt(0).toUpperCase() + category.slice(1)}</h4>
<ul className="space-y-3">
{items.map((item, itemIndex) => (
<li key={itemIndex}>
<a
href="#"
className="text-slate-400 hover:text-white hover:translate-x-1 transition-all duration-200 flex items-center gap-2 group"
>
<ArrowRight size={16} className="opacity-0 group-hover:opacity-100 transition-opacity duration-200" />
{item}
</a>
</li>
))}
</ul>
</div>
))}
</div>
</div>
<div className="border-t border-slate-800 pt-8 flex flex-col md:flex-row justify-between items-center gap-6">
<div className="text-slate-500 text-sm">
© {new Date().getFullYear()} NeuralScroll. All rights reserved.
</div>
<div className="flex flex-wrap justify-center gap-8">
<a href="#" className="text-slate-500 hover:text-white transition-colors duration-200 text-sm">
Privacy Policy
</a>
<a href="#" className="text-slate-500 hover:text-white transition-colors duration-200 text-sm">
Terms of Service
</a>
<a href="#" className="text-slate-500 hover:text-white transition-colors duration-200 text-sm">
Cookie Policy
</a>
</div>
<div className="flex items-center gap-2 text-sm text-slate-500">
<MapPin size={16} />
<span>San Francisco, CA</span>
</div>
</div>
</div>
</footer>
);
} |