// Realistic per-file mock artwork. Each file id maps to a detailed SVG scene
// that resembles its kind: mobile UI mockups, brand spreads, video keyframes,
// icon sheets, etc. Drawn at viewBox 400x300 and stretched to fit any size.
//
// Renders inside the colored gradient backdrop already on the file thumb.
function MockArt({ fileId, variant = 'thumb' }) {
// variant: 'thumb' (small card), 'hero' (preview canvas / share hero)
switch (fileId) {
case 'f1': return ;
case 'f2': return ;
case 'f3': return ;
case 'f4': return ;
case 'f5': return ;
case 'f6': return ;
case 'f7': return ;
case 'f8': return ;
case 'f9': return ;
case 'f10': return ;
case 'p1': return ;
case 'p2': return ;
case 'p3': return ;
case 'p4': return ;
default: return null;
}
}
const SVG = ({ children, style }) => (
);
// ── f1 Aria — Hero Frame ──────────────────────────────────────────────────
// Marketing hero: warm gradient bg, big headline, eyebrow, CTA pill, soft shapes.
function AriaHero({ variant }) {
return (
);
}
// ── f2 Settings — Empty State ─────────────────────────────────────────────
// App settings screen; sidebar + form rows + empty illustration on the right.
function SettingsEmpty() {
return (
);
}
// ── f3 Onboarding — Step 02 ───────────────────────────────────────────────
// Phone mockup with onboarding card, progress dots, illustration.
function OnboardingStep() {
return (
);
}
// ── f4 Brand Guidelines ───────────────────────────────────────────────────
// PDF spread: cover-style layout, color palette, type sample.
function BrandGuidelines() {
return (
);
}
// ── f5 Title Sequence — MP4 ───────────────────────────────────────────────
// Cinematic dark frame with timecode, big condensed title, play overlay.
function TitleSequence() {
return (
);
}
// ── f6 Botanical Pattern ──────────────────────────────────────────────────
// Repeating leaves on a soft pink ground.
function BotanicalPattern() {
const leaves = [];
for (let r = 0; r < 5; r++) {
for (let c = 0; c < 7; c++) {
const x = 30 + c * 56 + (r % 2 ? 28 : 0);
const y = 30 + r * 56;
leaves.push(
);
}
}
return (
);
}
// ── f7 Settings v2 ────────────────────────────────────────────────────────
// Warmer revisited settings: profile card + toggles + accent.
function SettingsV2() {
return (
);
}
// ── f8 Marketing Hero Variant ─────────────────────────────────────────────
// Editorial: image left, copy right.
function MarketingHero() {
return (
);
}
// ── f9 Icon Set — Geometric ───────────────────────────────────────────────
// 4x3 grid of stroked icons on graph paper.
function IconSet() {
const icons = [
(g) => ,
(g) => ,
(g) => ,
(g) => ,
(g) => ,
(g) => ,
(g) => ,
(g) => ,
(g) => ,
(g) => ,
(g) => ,
(g) => ,
];
return (
);
}
// ── f10 Editorial Cover Study ─────────────────────────────────────────────
// Magazine cover: hero photo block, masthead, cover lines.
function EditorialCover() {
return (
);
}
// ── p1 Aria iOS — Search Results ──────────────────────────────────────────
// Mobile search screen: search field + a list of result rows.
function PoolSearchResults() {
return (
);
}
// ── p2 Aria.com — Pricing Section ─────────────────────────────────────────
// Web pricing layout: centered heading + three plan columns.
function PoolPricing() {
return (
);
}
// ── p3 Brand Refresh — Icon Audit ─────────────────────────────────────────
// Audit sheet: header row + a grid of icon glyphs with status ticks.
function PoolIconAudit() {
const glyphs = [
(p) => ,
(p) => ,
(p) => ,
(p) => ,
(p) => ,
(p) => ,
(p) => ,
(p) => ,
(p) => <>,
(p) => ,
];
return (
);
}
// ── p4 Aria iOS — Error States ────────────────────────────────────────────
// Mobile screen with a centered error illustration, message, and retry CTA.
function PoolErrorState() {
return (
);
}
window.MockArt = MockArt;