Context7 MCP Clone

'use client'; import Link from 'next/link'; import { Github, Twitter, Linkedin } from 'lucide-react'; export function Footer() { const currentYear = new Date().getFullYear(); return ( <footer className="border-t border-gray-800 bg-black/50"> <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12"> <div className="grid grid-cols-2 md:grid-cols-4 gap-8 mb-8"> {/* Company */} <div> <h3 className="text-white font-semibold mb-4">Product</h3> <ul className="space-y-2"> <li> <Link href="/" className="text-gray-400 hover:text-white transition-colors"> Home </Link> </li> <li> <Link href="#features" className="text-gray-400 hover:text-white transition-colors"> Features </Link> </li> <li> <Link href="#pricing" className="text-gray-400 hover:text-white transition-colors"> Pricing </Link> </li> <li> <Link href="/docs" className="text-gray-400 hover:text-white transition-colors"> Documentation </Link> </li> </ul> </div> {/* Resources */} <div> <h3 className="text-white font-semibold mb-4">Resources</h3> <ul className="space-y-2"> <li> <Link href="/blog" className="text-gray-400 hover:text-white transition-colors"> Blog </Link> </li> <li> <Link href="/api-docs" className="text-gray-400 hover:text-white transition-colors"> API Docs </Link> </li> <li> <Link href="/status" className="text-gray-400 hover:text-white transition-colors"> Status </Link> </li> <li> <a href="https://github.com" target="_blank" rel="noopener noreferrer" className="text-gray-400 hover:text-white transition-colors" > GitHub </a> </li> </ul> </div> {/* Company Info */} <div> <h3 className="text-white font-semibold mb-4">Company</h3> <ul className="space-y-2"> <li> <Link href="/about" className="text-gray-400 hover:text-white transition-colors"> About </Link> </li> <li> <Link href="/contact" className="text-gray-400 hover:text-white transition-colors"> Contact </Link> </li> <li> <Link href="/careers" className="text-gray-400 hover:text-white transition-colors"> Careers </Link> </li> <li> <Link href="/press" className="text-gray-400 hover:text-white transition-colors"> Press </Link> </li> </ul> </div> {/* Legal */} <div> <h3 className="text-white font-semibold mb-4">Legal</h3> <ul className="space-y-2"> <li> <Link href="/privacy" className="text-gray-400 hover:text-white transition-colors"> Privacy </Link> </li> <li> <Link href="/terms" className="text-gray-400 hover:text-white transition-colors"> Terms </Link> </li> <li> <Link href="/security" className="text-gray-400 hover:text-white transition-colors"> Security </Link> </li> <li> <Link href="/cookies" className="text-gray-400 hover:text-white transition-colors"> Cookies </Link> </li> </ul> </div> </div> {/* Divider */} <div className="border-t border-gray-800 pt-8"> {/* Social Links */} <div className="flex justify-between items-center flex-col sm:flex-row gap-4"> <div className="flex items-center gap-2"> <div className="w-8 h-8 rounded-lg bg-gradient-to-br from-purple-500 to-pink-600 flex items-center justify-center"> <span className="text-white font-bold">C7</span> </div> <span className="text-white font-semibold">Context7</span> </div> <div className="flex gap-6"> <a href="https://github.com" target="_blank" rel="noopener noreferrer" className="text-gray-400 hover:text-white transition-colors" > <Github className="w-5 h-5" /> </a> <a href="https://twitter.com" target="_blank" rel="noopener noreferrer" className="text-gray-400 hover:text-white transition-colors" > <Twitter className="w-5 h-5" /> </a> <a href="https://linkedin.com" target="_blank" rel="noopener noreferrer" className="text-gray-400 hover:text-white transition-colors" > <Linkedin className="w-5 h-5" /> </a> </div> </div> {/* Copyright */} <div className="mt-6 text-center text-gray-500 text-sm"> <p>&copy; {currentYear} Context7. All rights reserved. Built with care by Atamai.</p> </div> </div> </div> </footer> ); }