6b1a5c281a
- src/app/layout.tsx: load Space_Grotesk via next/font/google as --font-display (weights 500/600/700, self-hosted, display:swap). - src/components/AnimatedLogo.tsx: standalone animated brand mark. Single-A monogram in #2563EB->#1E3A8A tile, Space Grotesk 700 wordmark, Inter tagline with accent rule. Stroke-draw + cyan signal pulse + sheen sweep + text fade. Pure SVG/CSS, no animation libs. Respects prefers-reduced-motion. Variants: onLight | onDark. - src/app/preview/animated-logo/page.tsx: preview route at /preview/animated-logo (noindex). Existing AvBeatLogo untouched — Header/Footer wiring unchanged. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
62 lines
2.9 KiB
TypeScript
62 lines
2.9 KiB
TypeScript
import AnimatedLogo from '@/components/AnimatedLogo';
|
|
|
|
export const dynamic = 'force-static';
|
|
|
|
export const metadata = {
|
|
title: 'AnimatedLogo preview — AV Beat',
|
|
robots: { index: false, follow: false },
|
|
};
|
|
|
|
/**
|
|
* Standalone preview for /preview/animated-logo. Renders the new
|
|
* AnimatedLogo component in both light and dark variants at several
|
|
* sizes so you can eyeball the animation before any wiring decisions.
|
|
*/
|
|
export default function AnimatedLogoPreviewPage() {
|
|
return (
|
|
<div style={{ minHeight: '100vh', background: '#F8FAFC', padding: '48px 32px', fontFamily: 'var(--font-sans)' }}>
|
|
<h1 style={{ fontSize: 32, fontWeight: 800, color: '#0F172A', marginBottom: 8 }}>AnimatedLogo preview</h1>
|
|
<p style={{ fontSize: 14, color: '#475569', marginBottom: 40 }}>
|
|
Standalone — not wired into Header or Footer. Reload the page to replay the mount animation.
|
|
</p>
|
|
|
|
<section style={{ display: 'flex', flexDirection: 'column', gap: 40 }}>
|
|
<div style={{ background: '#FFFFFF', border: '1px solid #DCE6F2', borderRadius: 8, padding: 32 }}>
|
|
<h2 style={{ fontSize: 12, fontWeight: 700, letterSpacing: '0.18em', textTransform: 'uppercase', color: '#475569', marginBottom: 24 }}>
|
|
onLight · default sizes
|
|
</h2>
|
|
<div style={{ display: 'flex', flexDirection: 'column', gap: 28 }}>
|
|
<AnimatedLogo size={48} variant="onLight" />
|
|
<AnimatedLogo size={64} variant="onLight" />
|
|
<AnimatedLogo size={96} variant="onLight" />
|
|
<AnimatedLogo size={128} variant="onLight" />
|
|
</div>
|
|
</div>
|
|
|
|
<div style={{ background: '#0F172A', border: '1px solid #1E293B', borderRadius: 8, padding: 32 }}>
|
|
<h2 style={{ fontSize: 12, fontWeight: 700, letterSpacing: '0.18em', textTransform: 'uppercase', color: '#94A3B8', marginBottom: 24 }}>
|
|
onDark · default sizes
|
|
</h2>
|
|
<div style={{ display: 'flex', flexDirection: 'column', gap: 28 }}>
|
|
<AnimatedLogo size={48} variant="onDark" />
|
|
<AnimatedLogo size={64} variant="onDark" />
|
|
<AnimatedLogo size={96} variant="onDark" />
|
|
<AnimatedLogo size={128} variant="onDark" />
|
|
</div>
|
|
</div>
|
|
|
|
<div style={{ background: '#FFFFFF', border: '1px solid #DCE6F2', borderRadius: 8, padding: 32 }}>
|
|
<h2 style={{ fontSize: 12, fontWeight: 700, letterSpacing: '0.18em', textTransform: 'uppercase', color: '#475569', marginBottom: 24 }}>
|
|
no tagline · favicon-style
|
|
</h2>
|
|
<div style={{ display: 'flex', alignItems: 'center', gap: 32 }}>
|
|
<AnimatedLogo size={48} variant="onLight" showTagline={false} />
|
|
<AnimatedLogo size={64} variant="onLight" showTagline={false} />
|
|
<AnimatedLogo size={96} variant="onLight" showTagline={false} />
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
);
|
|
}
|