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,31 @@
|
||||
import { ArrowRight } from '@phosphor-icons/react';
|
||||
|
||||
const PAIRS = [
|
||||
['heic', 'jpg'],
|
||||
['png', 'webp'],
|
||||
['docx', 'pdf'],
|
||||
['ttf', 'woff'],
|
||||
['epub', 'mobi'],
|
||||
];
|
||||
|
||||
function Pill({ from, to }) {
|
||||
return (
|
||||
<span className="format-pill">
|
||||
<span>{from.toUpperCase()}</span>
|
||||
<ArrowRight size={12} weight="bold" />
|
||||
<span>{to.toUpperCase()}</span>
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
export function FormatMarquee() {
|
||||
return (
|
||||
<div className="format-marquee" aria-hidden="true">
|
||||
<div className="format-marquee-track">
|
||||
{[...PAIRS, ...PAIRS].map(([from, to], index) => (
|
||||
<Pill key={`${from}-${to}-${index}`} from={from} to={to} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user