Sebastian Krüger
649cd3cd7b
Mobile optimizations: - **Header**: Reduced padding on mobile (px-3), smaller text sizes - **Main content**: Optimized padding (px-3 sm:px-4) and spacing - **Format selector**: Added downward arrow for mobile flow - **Conversion progress**: Time indicators stack vertically on mobile - **Page layout**: Responsive spacing throughout (space-y-6 sm:space-y-8) - **Footer**: Smaller text and reduced margins on mobile Key improvements: - Better use of screen space on small devices - Improved touch targets and readability - Consistent responsive breakpoints (sm:, md:) - Vertical arrow (↓) on mobile, horizontal (→) on desktop - All text scales appropriately for mobile screens Tested on: - Mobile viewport (< 640px) - Tablet viewport (640px - 768px) - Desktop viewport (> 768px) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
74 lines
2.5 KiB
TypeScript
74 lines
2.5 KiB
TypeScript
'use client';
|
|
|
|
import { FileConverter } from '@/components/converter/FileConverter';
|
|
import { ConversionHistory } from '@/components/converter/ConversionHistory';
|
|
import { ThemeToggle } from '@/components/layout/ThemeToggle';
|
|
import { ToastProvider } from '@/components/ui/Toast';
|
|
|
|
export default function Home() {
|
|
return (
|
|
<ToastProvider>
|
|
<div className="min-h-screen bg-background">
|
|
{/* Header */}
|
|
<header className="border-b border-border">
|
|
<div className="container mx-auto px-3 sm:px-4 py-3 sm:py-4 flex items-center justify-between gap-2">
|
|
<div className="min-w-0">
|
|
<h1 className="text-xl sm:text-2xl font-bold text-foreground">Convert UI</h1>
|
|
<p className="text-xs sm:text-sm text-muted-foreground">
|
|
File conversion in your browser
|
|
</p>
|
|
</div>
|
|
<ThemeToggle />
|
|
</div>
|
|
</header>
|
|
|
|
{/* Main content */}
|
|
<main className="container mx-auto px-3 sm:px-4 py-6 sm:py-8 md:py-16">
|
|
<div className="space-y-6 sm:space-y-8">
|
|
<FileConverter />
|
|
<ConversionHistory />
|
|
</div>
|
|
</main>
|
|
|
|
{/* Footer */}
|
|
<footer className="border-t border-border mt-8 sm:mt-12 md:mt-16">
|
|
<div className="container mx-auto px-3 sm:px-4 py-6 text-center text-xs sm:text-sm text-muted-foreground">
|
|
<p>
|
|
Powered by{' '}
|
|
<a
|
|
href="https://github.com/ffmpegwasm/ffmpeg.wasm"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="text-primary hover:underline"
|
|
>
|
|
FFmpeg.wasm
|
|
</a>
|
|
,{' '}
|
|
<a
|
|
href="https://github.com/dlemstra/magick-wasm"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="text-primary hover:underline"
|
|
>
|
|
ImageMagick WASM
|
|
</a>
|
|
{' '}&{' '}
|
|
<a
|
|
href="https://nextjs.org"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="text-primary hover:underline"
|
|
>
|
|
Next.js 16
|
|
</a>
|
|
</p>
|
|
<p className="mt-2">
|
|
All conversions happen locally in your browser. No files are uploaded to any server.
|
|
</p>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
</ToastProvider>
|
|
);
|
|
}
|