feat(frontend): redesign homepage and file config form with aurora palette
Rebuild the visual identity from the actual Ombrora mark (violet/cyan aurora blobs) instead of the generic blue/amber scheme, add Bricolage Grotesque and IBM Plex Mono for display and code-like text, and give the hero an animated aurora backdrop, gradient headline, and a format-pair marquee driven by the real registered converters. Rework the file config form: target format and icon size are both chip groups now instead of a native select, and quality/compression sliders get a gradient-filled track, custom thumb, and a mono value pill to match. File type icons are color-coded by family (images/documents/fonts/ebooks) and reused across FileConfigCard, FileCard, and FormatsGrid. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,22 @@
|
||||
import { Image, FileText, TextAa, BookOpen, File as FileIcon } from '@phosphor-icons/react';
|
||||
import { FORMAT_FAMILIES } from '../data/formats.js';
|
||||
|
||||
const FAMILY_ICONS = {
|
||||
images: Image,
|
||||
documents: FileText,
|
||||
fonts: TextAa,
|
||||
ebooks: BookOpen,
|
||||
};
|
||||
|
||||
export function familyForExtension(extension) {
|
||||
const ext = extension?.toLowerCase();
|
||||
return FORMAT_FAMILIES.find((family) => family.formats.includes(ext))?.key ?? null;
|
||||
}
|
||||
|
||||
export function fileTypeMeta(extension) {
|
||||
const family = familyForExtension(extension);
|
||||
return {
|
||||
Icon: FAMILY_ICONS[family] ?? FileIcon,
|
||||
colorVar: family ? `--color-family-${family}` : '--color-primary',
|
||||
};
|
||||
}
|
||||
Reference in New Issue
Block a user