From a1e64225d5afc97027b70b45a98726fbc41e5c58 Mon Sep 17 00:00:00 2001 From: noah Date: Mon, 9 Mar 2026 21:08:11 +0100 Subject: [PATCH] feat: replace bento grid with format cloud / tag wall in features section All 70+ formats displayed as color-coded badges in a flowing cloud layout. Popular formats are larger, all badges animate in with staggered entrance. Category legend at top with colored dots. Hover effects on each badge. --- src/app/page.tsx | 238 ++++++++++++++++++++++++----------------------- 1 file changed, 123 insertions(+), 115 deletions(-) diff --git a/src/app/page.tsx b/src/app/page.tsx index 8917a6a..da4ca9b 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -51,55 +51,68 @@ const flowSteps = [ { inputIcon: '\u{1F3B5}', inputLabel: '.FLAC', outputIcon: '\u{1F3A7}', outputLabel: '.MP3' }, ]; -/* ─── Bento Features ─── */ +/* ─── Format Cloud Data ─── */ -const bentoFeatures = [ - { - icon: '\u{1F5BC}', - title: 'Images', - desc: 'Convert between any image format with zero quality loss.', - accent: '#f472b6', - accentLight: 'rgba(244,114,182,0.08)', - formats: ['PNG', 'JPG', 'WebP', 'GIF', 'AVIF', 'SVG', 'PSD', 'HEIC', 'BMP', 'TIFF', 'ICO'], - // Bento: tall left column - gridArea: 'images', - }, - { - icon: '\u{1F4C4}', - title: 'Documents', - desc: 'Full formatting preservation across office and web formats.', - accent: '#60a5fa', - accentLight: 'rgba(96,165,250,0.08)', - formats: ['DOCX', 'PDF', 'MD', 'HTML', 'TXT', 'RTF', 'PPTX', 'EPUB'], - gridArea: 'docs', - }, - { - icon: '\u{1F3B5}', - title: 'Audio', - desc: 'FFmpeg WebAssembly powered.', - accent: '#a78bfa', - accentLight: 'rgba(167,139,250,0.08)', - formats: ['MP3', 'WAV', 'OGG', 'FLAC', 'AAC', 'M4A'], - gridArea: 'audio', - }, - { - icon: '\u{1F3AC}', - title: 'Video', - desc: 'Full transcoding in your browser.', - accent: '#fb923c', - accentLight: 'rgba(251,146,60,0.08)', - formats: ['MP4', 'WebM', 'AVI', 'MOV', 'MKV'], - gridArea: 'video', - }, - { - icon: '\u{1F4CA}', - title: 'Data & Fonts', - desc: 'Smart structure preservation for structured data and typography.', - accent: '#34d399', - accentLight: 'rgba(52,211,153,0.08)', - formats: ['CSV', 'JSON', 'XML', 'YAML', 'XLSX', 'TSV', 'TOML', 'TTF', 'OTF', 'WOFF2'], - gridArea: 'data', - }, +type FormatCategory = 'image' | 'document' | 'audio' | 'video' | 'data'; + +const categoryMeta: Record = { + image: { label: 'Images', color: '#f472b6', colorLight: 'rgba(244,114,182,0.10)' }, + document: { label: 'Documents', color: '#60a5fa', colorLight: 'rgba(96,165,250,0.10)' }, + audio: { label: 'Audio', color: '#a78bfa', colorLight: 'rgba(167,139,250,0.10)' }, + video: { label: 'Video', color: '#fb923c', colorLight: 'rgba(251,146,60,0.10)' }, + data: { label: 'Data & Fonts', color: '#34d399', colorLight: 'rgba(52,211,153,0.10)' }, +}; + +const allFormats: { name: string; cat: FormatCategory; popular?: boolean }[] = [ + // Images + { name: 'PNG', cat: 'image', popular: true }, + { name: 'JPG', cat: 'image', popular: true }, + { name: 'WebP', cat: 'image', popular: true }, + { name: 'GIF', cat: 'image' }, + { name: 'AVIF', cat: 'image' }, + { name: 'SVG', cat: 'image', popular: true }, + { name: 'PSD', cat: 'image' }, + { name: 'HEIC', cat: 'image', popular: true }, + { name: 'BMP', cat: 'image' }, + { name: 'TIFF', cat: 'image' }, + { name: 'ICO', cat: 'image' }, + // Documents + { name: 'PDF', cat: 'document', popular: true }, + { name: 'DOCX', cat: 'document', popular: true }, + { name: 'MD', cat: 'document' }, + { name: 'HTML', cat: 'document', popular: true }, + { name: 'TXT', cat: 'document' }, + { name: 'RTF', cat: 'document' }, + { name: 'PPTX', cat: 'document', popular: true }, + { name: 'EPUB', cat: 'document' }, + // Audio + { name: 'MP3', cat: 'audio', popular: true }, + { name: 'WAV', cat: 'audio', popular: true }, + { name: 'OGG', cat: 'audio' }, + { name: 'FLAC', cat: 'audio', popular: true }, + { name: 'AAC', cat: 'audio' }, + { name: 'M4A', cat: 'audio' }, + // Video + { name: 'MP4', cat: 'video', popular: true }, + { name: 'WebM', cat: 'video' }, + { name: 'AVI', cat: 'video' }, + { name: 'MOV', cat: 'video', popular: true }, + { name: 'MKV', cat: 'video', popular: true }, + // Data & Fonts + { name: 'CSV', cat: 'data', popular: true }, + { name: 'JSON', cat: 'data', popular: true }, + { name: 'XML', cat: 'data' }, + { name: 'YAML', cat: 'data', popular: true }, + { name: 'XLSX', cat: 'data', popular: true }, + { name: 'TSV', cat: 'data' }, + { name: 'TOML', cat: 'data' }, + { name: 'INI', cat: 'data' }, + { name: 'NDJSON', cat: 'data' }, + { name: 'SQL', cat: 'data' }, + { name: 'TTF', cat: 'data' }, + { name: 'OTF', cat: 'data' }, + { name: 'WOFF', cat: 'data' }, + { name: 'WOFF2', cat: 'data' }, ]; /* ─── Animation Variants ─── */ @@ -454,7 +467,7 @@ export default function LandingPage() { - {/* ──── FEATURES — BENTO GRID ──── */} + {/* ──── FEATURES — FORMAT CLOUD ──── */}

- 70+ file formats across 5 categories, all converted instantly with zero quality loss. + 70+ file formats across 5 categories, all converted instantly in your browser.

- {/* Bento Grid — asymmetric masonry layout */} -
+ {(Object.entries(categoryMeta) as [FormatCategory, typeof categoryMeta[FormatCategory]][]).map(([key, meta]) => ( +
+
+ {meta.label} +
+ ))} + + + {/* Format cloud */} + - {bentoFeatures.map((feat, i) => ( - - {/* Top accent bar */} -
- -
- {/* Header row */} -
-
- {feat.icon} -
-
-

{feat.title}

-

{feat.desc}

-
-
- - {/* Format badges — grow to fill space */} -
- {feat.formats.map((f) => ( - - .{f} - - ))} -
-
- - ))} -
+ {allFormats.map((fmt) => { + const meta = categoryMeta[fmt.cat]; + return ( + + .{fmt.name} + + ); + })} + {/* Total count callout */}