Sebastian Krüger
296f78709b
Standardized all layout sections to use consistent max-width: - Changed from inconsistent container/max-w-6xl to unified max-w-7xl - Header: container mx-auto → w-full max-w-7xl mx-auto - Main: container mx-auto → w-full max-w-7xl mx-auto - Footer: container mx-auto → w-full max-w-7xl mx-auto - MainConverter: removed max-w-6xl (inherits from parent) All sections now align perfectly with matching left/right edges for a clean, professional layout. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
95 lines
3.5 KiB
TypeScript
95 lines
3.5 KiB
TypeScript
import { Heart, Github, Code2 } from 'lucide-react';
|
|
|
|
export default function Footer() {
|
|
const currentYear = new Date().getFullYear();
|
|
|
|
return (
|
|
<footer className="border-t mt-16 bg-background">
|
|
<div className="w-full max-w-7xl mx-auto px-4 py-8">
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
|
{/* About */}
|
|
<div>
|
|
<h3 className="font-semibold mb-3">Units UI</h3>
|
|
<p className="text-sm text-muted-foreground">
|
|
A spectacular unit conversion app supporting 23 measurement categories
|
|
with 187 units. Built with Next.js 16, TypeScript, and Tailwind CSS 4.
|
|
</p>
|
|
</div>
|
|
|
|
{/* Features */}
|
|
<div>
|
|
<h3 className="font-semibold mb-3">Features</h3>
|
|
<ul className="space-y-2 text-sm text-muted-foreground">
|
|
<li>• Real-time bidirectional conversion</li>
|
|
<li>• Fuzzy search across all units</li>
|
|
<li>• Dark mode support</li>
|
|
<li>• Conversion history</li>
|
|
<li>• Keyboard shortcuts</li>
|
|
<li>• Copy & favorite units</li>
|
|
</ul>
|
|
</div>
|
|
|
|
{/* Links */}
|
|
<div>
|
|
<h3 className="font-semibold mb-3">Quick Links</h3>
|
|
<ul className="space-y-2 text-sm">
|
|
<li>
|
|
<a
|
|
href="https://github.com/valknarness/units-ui"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="text-muted-foreground hover:text-foreground transition-colors flex items-center gap-2"
|
|
>
|
|
<Github className="h-4 w-4" />
|
|
GitHub Repository
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a
|
|
href="https://github.com/convert-units/convert-units"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="text-muted-foreground hover:text-foreground transition-colors flex items-center gap-2"
|
|
>
|
|
<Code2 className="h-4 w-4" />
|
|
convert-units Library
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
|
|
{/* Keyboard Shortcuts */}
|
|
<div className="mt-4">
|
|
<h4 className="font-semibold text-sm mb-2">Keyboard Shortcuts</h4>
|
|
<ul className="space-y-1 text-xs text-muted-foreground">
|
|
<li>
|
|
<kbd className="px-1.5 py-0.5 bg-muted rounded">/</kbd> Focus search
|
|
</li>
|
|
<li>
|
|
<kbd className="px-1.5 py-0.5 bg-muted rounded">Ctrl</kbd>
|
|
{' + '}
|
|
<kbd className="px-1.5 py-0.5 bg-muted rounded">K</kbd> Command palette
|
|
</li>
|
|
<li>
|
|
<kbd className="px-1.5 py-0.5 bg-muted rounded">ESC</kbd> Close dialogs
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Bottom Bar */}
|
|
<div className="mt-8 pt-8 border-t flex flex-col sm:flex-row justify-between items-center gap-4 text-sm text-muted-foreground">
|
|
<div className="flex items-center gap-1">
|
|
Made with{' '}
|
|
<Heart className="h-4 w-4 text-red-500 fill-red-500" />{' '}
|
|
using Next.js 16 & Tailwind CSS 4
|
|
</div>
|
|
<div>
|
|
© {currentYear} Units UI. All rights reserved.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
);
|
|
}
|