Spaces:
Sleeping
Sleeping
| import { Link, Github, Twitter, Heart } from 'lucide-react' | |
| export default function Footer() { | |
| return ( | |
| <footer className="relative border-t border-slate-800/50 bg-slate-950"> | |
| <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12"> | |
| <div className="grid md:grid-cols-4 gap-8 mb-8"> | |
| <div className="md:col-span-2"> | |
| <div className="flex items-center gap-2.5 mb-4"> | |
| <div className="w-8 h-8 rounded-lg bg-gradient-to-br from-emerald-500 to-teal-600 flex items-center justify-center"> | |
| <Link className="w-4 h-4 text-white" /> | |
| </div> | |
| <span className="text-lg font-bold"> | |
| sh0rtl<span className="text-emerald-400">.ink</span> | |
| </span> | |
| </div> | |
| <p className="text-sm text-slate-500 max-w-sm leading-relaxed"> | |
| The modern URL shortener built for speed, security, and insights. | |
| Create powerful short links with advanced tracking and protection. | |
| </p> | |
| </div> | |
| <div> | |
| <h4 className="text-sm font-semibold text-slate-200 mb-4">Product</h4> | |
| <ul className="space-y-3"> | |
| <li><a href="#shorten" className="text-sm text-slate-500 hover:text-emerald-400 transition-colors">Shortener</a></li> | |
| <li><a href="#features" className="text-sm text-slate-500 hover:text-emerald-400 transition-colors">Features</a></li> | |
| <li><a href="#analytics" className="text-sm text-slate-500 hover:text-emerald-400 transition-colors">Analytics</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 className="text-sm font-semibold text-slate-200 mb-4">Company</h4> | |
| <ul className="space-y-3"> | |
| <li><a href="/about" className="text-sm text-slate-500 hover:text-emerald-400 transition-colors">About</a></li> | |
| <li><a href="/contact" className="text-sm text-slate-500 hover:text-emerald-400 transition-colors">Contact</a></li> | |
| <li><a href="/privacy" className="text-sm text-slate-500 hover:text-emerald-400 transition-colors">Privacy</a></li> | |
| <li><a href="/terms" className="text-sm text-slate-500 hover:text-emerald-400 transition-colors">Terms</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 className="text-sm font-semibold text-slate-200 mb-4">Follow Us</h4> | |
| <ul className="space-y-3"> | |
| <li><a href="https://github.com/sh0rtl-ink" className="text-sm text-slate-500 hover:text-emerald-400 transition-colors">GitHub</a></li> | |
| <li><a href="https://twitter.com/sh0rtl-ink" className="text-sm text-slate-500 hover:text-emerald-400 transition-colors">Twitter</a></li> | |
| <li><a href="https://instagram.com/sh0rtl-ink" className="text-sm text-slate-500 hover:text-emerald-400 transition-colors">Instagram</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div className="border-t border-slate-800/50 pt-8"> | |
| <p className="text-sm text-slate-500">© {new Date().getFullYear()} sh0rtl.ink. All rights reserved.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| ) | |
| } |