Spaces:
Running
Running
File size: 4,058 Bytes
86a3569 | 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 | const Footer = () => {
const currentYear = new Date().getFullYear();
const socialLinks = [
{ icon: "github", url: "#" },
{ icon: "twitter", url: "#" },
{ icon: "instagram", url: "#" },
{ icon: "linkedin", url: "#" }
];
return (
<footer className="bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700 transition-colors duration-300">
<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">
<div className="md:col-span-2">
<div className="flex items-center mb-4">
<i data-feather="zap" className="text-indigo-500 dark:text-pink-500 w-6 h-6"></i>
<span className="ml-2 text-xl font-bold text-gray-900 dark:text-white">
PixelPulse
</span>
</div>
<p className="text-gray-600 dark:text-gray-300 mb-4">
Elevating digital experiences with cutting-edge technology and elegant design.
</p>
<div className="flex space-x-4">
{socialLinks.map((social, index) => (
<a
key={index}
href={social.url}
className="text-gray-500 dark:text-gray-400 hover:text-indigo-500 dark:hover:text-pink-500 transition-colors"
>
<i data-feather={social.icon} className="w-5 h-5"></i>
</a>
))}
</div>
</div>
<div>
<h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">
Quick Links
</h3>
<ul className="space-y-2">
<li><a href="#" className="text-gray-600 dark:text-gray-300 hover:text-indigo-500 dark:hover:text-pink-500 transition-colors">Home</a></li>
<li><a href="#" className="text-gray-600 dark:text-gray-300 hover:text-indigo-500 dark:hover:text-pink-500 transition-colors">Features</a></li>
<li><a href="#" className="text-gray-600 dark:text-gray-300 hover:text-indigo-500 dark:hover:text-pink-500 transition-colors">Pricing</a></li>
<li><a href="#" className="text-gray-600 dark:text-gray-300 hover:text-indigo-500 dark:hover:text-pink-500 transition-colors">Contact</a></li>
</ul>
</div>
<div>
<h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">
Legal
</h3>
<ul className="space-y-2">
<li><a href="#" className="text-gray-600 dark:text-gray-300 hover:text-indigo-500 dark:hover:text-pink-500 transition-colors">Privacy Policy</a></li>
<li><a href="#" className="text-gray-600 dark:text-gray-300 hover:text-indigo-500 dark:hover:text-pink-500 transition-colors">Terms of Service</a></li>
<li><a href="#" className="text-gray-600 dark:text-gray-300 hover:text-indigo-500 dark:hover:text-pink-500 transition-colors">Cookie Policy</a></li>
</ul>
</div>
</div>
<div className="mt-12 pt-8 border-t border-gray-200 dark:border-gray-700">
<p className="text-center text-gray-500 dark:text-gray-400">
© {currentYear} PixelPulse Reactor. All rights reserved.
</p>
</div>
</div>
</footer>
);
} |