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>
42 lines
1.6 KiB
TypeScript
42 lines
1.6 KiB
TypeScript
import MainConverter from '@/components/converter/MainConverter';
|
|
import { ThemeToggle } from '@/components/ui/ThemeToggle';
|
|
import Footer from '@/components/ui/Footer';
|
|
|
|
export default function Home() {
|
|
return (
|
|
<div className="min-h-screen bg-background flex flex-col">
|
|
{/* Header with theme toggle */}
|
|
<div className="border-b sticky top-0 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 z-40">
|
|
<div className="w-full max-w-7xl mx-auto px-4 py-4 flex justify-between items-center">
|
|
<div className="text-xl font-bold">Units UI</div>
|
|
<ThemeToggle />
|
|
</div>
|
|
</div>
|
|
|
|
<main className="w-full max-w-7xl mx-auto px-4 py-8 flex-1">
|
|
<header className="text-center mb-12">
|
|
<h1 className="text-5xl font-bold mb-4 bg-gradient-to-r from-blue-600 to-indigo-600 dark:from-blue-400 dark:to-indigo-400 bg-clip-text text-transparent">
|
|
Unit Converter
|
|
</h1>
|
|
<p className="text-lg text-muted-foreground">
|
|
Convert between 187 units across 23 measurement categories
|
|
</p>
|
|
<div className="flex items-center justify-center gap-4 mt-3 text-sm text-muted-foreground">
|
|
<span>Press <kbd className="px-2 py-1 bg-muted rounded text-xs">/</kbd> to search</span>
|
|
<span>•</span>
|
|
<span>
|
|
<kbd className="px-2 py-1 bg-muted rounded text-xs">Ctrl</kbd>
|
|
{' + '}
|
|
<kbd className="px-2 py-1 bg-muted rounded text-xs">K</kbd> for commands
|
|
</span>
|
|
</div>
|
|
</header>
|
|
|
|
<MainConverter />
|
|
</main>
|
|
|
|
<Footer />
|
|
</div>
|
|
);
|
|
}
|