feat(ui): editorial off-grid restyling — landing + tutte le pagine app
Direzione visiva "asimmetrico/off-grid" applicata in modo coerente:
titoli mega che sbordano dal viewport (bleed-left), chapter markers
giganti in stroke trasparente come art di sfondo, eyebrow verticale
sul bordo destro, mesh-blob fluttuanti, cursor-glow che segue il mouse.
- Landing marketing rifatta da zero: hero cinema con mockup ruotato in
absolute, marquee infinito di keyword, stats sparse a quote diverse,
bento di feature ruotate, mockup browser 3D che sborda a destra,
CTA finale dark con "?" gigante.
- Dashboard loggata: greeting bleed-left, hero card "/plan" ruotata,
nav asimmetrica con chapter markers per ogni voce.
- /plan, /onboarding, /profile, /tracking, /fasting, /shopping: stesso
trattamento chrome (titolo bleed, chapter marker, atmosfera mesh-blob),
contenuti funzionali invariati.
Componenti nuovi:
- CursorGlow (client) — alone radiale che segue il mouse, easing morbido
- EditorialHeader (server) — header riusabile con chapter+eyebrow+title
- EditorialAtmosphere (server) — preset di mesh-blob per pagina
CSS utilities: text-mega, text-chapter, text-stroke, bleed-left/right,
btn-gradient, glow-ring, tilt-3d, animate-marquee, animate-float-{x,y,z},
animate-ring-trace. Tutte rispettano prefers-reduced-motion.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
lucianoandClaude Opus 4.7 committed
1 parent
d17c5ef869
commit
d467e212cb
12 files changed
+1855
-316
No files matched your search
@@ -3,6 +3,7 @@ import { redirect } from 'next/navigation';
|
||||
import { useTranslations } from 'next-intl';
|
||||
import { setRequestLocale } from 'next-intl/server';
|
||||
|
||||
import { CursorGlow } from '@/components/cursor-glow';
|
||||
import { Masthead } from '@/components/masthead';
|
||||
import { getServerSession } from '@/lib/auth';
|
||||
|
||||
@@ -63,59 +64,86 @@ function TrackingPageContent({
|
||||
const alertActive = alertKg != null && latest != null && latest.weightKg >= alertKg;
|
||||
|
||||
return (
|
||||
<div className="mx-auto min-h-screen max-w-5xl px-6 sm:px-10">
|
||||
<Masthead issueLabel="N. 06 — Tracking" />
|
||||
<main className="py-12 sm:py-16">
|
||||
<p className="editorial-eyebrow animate-fade-up">Capitolo VI</p>
|
||||
<h1 className="font-display text-display text-ink animate-fade-up mt-3 font-medium leading-[0.95] tracking-tight [animation-delay:120ms]">
|
||||
{t('title')}
|
||||
<span className="text-pomodoro">.</span>
|
||||
</h1>
|
||||
<p className="font-display text-ink-soft animate-fade-up mt-6 max-w-2xl text-xl italic leading-snug [animation-delay:240ms]">
|
||||
{t('subtitle')}
|
||||
</p>
|
||||
|
||||
<p className="animate-fade-up mt-4 [animation-delay:300ms]">
|
||||
<a
|
||||
href="/api/tracking-export"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-ink-soft decoration-pomodoro hover:text-ink font-mono text-[11px] uppercase tracking-widest underline decoration-[1.5px] underline-offset-[5px] transition-colors"
|
||||
<div className="relative">
|
||||
<div className="mx-auto min-h-screen max-w-7xl px-6 sm:px-10">
|
||||
<Masthead issueLabel="N. 06 — Tracking" />
|
||||
<main className="relative overflow-hidden pb-24 pt-10 sm:pt-12">
|
||||
<CursorGlow color="hsl(var(--oro))" size={520} />
|
||||
<div
|
||||
aria-hidden
|
||||
className="mesh-blob mesh-blob--oro animate-float-y -right-32 top-12 h-[28rem] w-[28rem] opacity-50"
|
||||
/>
|
||||
<div
|
||||
aria-hidden
|
||||
className="mesh-blob mesh-blob--oliva animate-float-x -left-24 top-72 h-72 w-72 opacity-40"
|
||||
/>
|
||||
<span
|
||||
aria-hidden
|
||||
className="font-display text-stroke-thin text-chapter pointer-events-none absolute -right-4 -top-12 select-none italic"
|
||||
>
|
||||
{t('exportPdf')} ↗
|
||||
</a>
|
||||
</p>
|
||||
|
||||
<div className="rule animate-rule-in my-10 [animation-delay:360ms]" />
|
||||
|
||||
<DailyCheckIn initial={todayCheckIn} />
|
||||
|
||||
{alertActive && alertKg != null && latest != null ? (
|
||||
<aside className="border-pomodoro/40 bg-pomodoro/5 mb-10 border-2 border-dashed p-5">
|
||||
<p className="editorial-eyebrow">{t('alertEyebrow')}</p>
|
||||
<p className="font-display text-ink mt-3 text-base leading-snug">
|
||||
{t('alertMessage', {
|
||||
current: latest.weightKg.toFixed(1),
|
||||
threshold: alertKg.toFixed(1),
|
||||
})}
|
||||
VI
|
||||
</span>
|
||||
<div
|
||||
aria-hidden
|
||||
className="pointer-events-none absolute right-0 top-32 hidden md:block"
|
||||
style={{ writingMode: 'vertical-rl' }}
|
||||
>
|
||||
<p className="text-ink-soft font-mono text-xs uppercase tracking-[0.4em]">
|
||||
Capitolo VI — Tracking
|
||||
</p>
|
||||
<p className="font-display text-ink-soft mt-2 text-sm italic leading-snug">
|
||||
{t('alertHint')}
|
||||
</p>
|
||||
</aside>
|
||||
) : null}
|
||||
</div>
|
||||
<h1 className="font-display text-mega bleed-left animate-fade-up relative mt-8 font-medium [animation-delay:120ms]">
|
||||
<span className="text-ink block">
|
||||
{t('title')}
|
||||
<span className="text-pomodoro">.</span>
|
||||
</span>
|
||||
</h1>
|
||||
<p className="font-display text-ink-soft animate-fade-up relative mt-10 max-w-2xl text-2xl italic leading-snug [animation-delay:240ms] md:ml-[16.66%]">
|
||||
{t('subtitle')}
|
||||
</p>
|
||||
|
||||
<div className="grid gap-12 md:grid-cols-12">
|
||||
<section className="animate-fade-up [animation-delay:300ms] md:col-span-7">
|
||||
<p className="editorial-eyebrow mb-6">{t('newEntry')}</p>
|
||||
<WeightEntryForm latest={latest} />
|
||||
</section>
|
||||
<aside className="md:border-ink/15 animate-fade-up [animation-delay:420ms] md:col-span-5 md:border-l md:pl-10">
|
||||
<p className="editorial-eyebrow mb-6">{t('history')}</p>
|
||||
<WeightHistory entries={entries} goalKg={goalKg} startKg={startKg} />
|
||||
</aside>
|
||||
</div>
|
||||
</main>
|
||||
<p className="animate-fade-up relative mt-6 [animation-delay:300ms] md:ml-[16.66%]">
|
||||
<a
|
||||
href="/api/tracking-export"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-ink-soft decoration-pomodoro hover:text-ink font-mono text-[11px] uppercase tracking-widest underline decoration-[1.5px] underline-offset-[5px] transition-colors"
|
||||
>
|
||||
{t('exportPdf')} ↗
|
||||
</a>
|
||||
</p>
|
||||
|
||||
<div className="rule animate-rule-in relative my-12 [animation-delay:360ms]" />
|
||||
|
||||
<DailyCheckIn initial={todayCheckIn} />
|
||||
|
||||
{alertActive && alertKg != null && latest != null ? (
|
||||
<aside className="border-pomodoro/40 bg-pomodoro/5 mb-10 border-2 border-dashed p-5">
|
||||
<p className="editorial-eyebrow">{t('alertEyebrow')}</p>
|
||||
<p className="font-display text-ink mt-3 text-base leading-snug">
|
||||
{t('alertMessage', {
|
||||
current: latest.weightKg.toFixed(1),
|
||||
threshold: alertKg.toFixed(1),
|
||||
})}
|
||||
</p>
|
||||
<p className="font-display text-ink-soft mt-2 text-sm italic leading-snug">
|
||||
{t('alertHint')}
|
||||
</p>
|
||||
</aside>
|
||||
) : null}
|
||||
|
||||
<div className="relative grid gap-12 md:grid-cols-12">
|
||||
<section className="animate-fade-up [animation-delay:300ms] md:col-span-7">
|
||||
<p className="editorial-eyebrow mb-6">{t('newEntry')}</p>
|
||||
<WeightEntryForm latest={latest} />
|
||||
</section>
|
||||
<aside className="md:border-ink/15 animate-fade-up [animation-delay:420ms] md:col-span-5 md:border-l md:pl-10">
|
||||
<p className="editorial-eyebrow mb-6">{t('history')}</p>
|
||||
<WeightHistory entries={entries} goalKg={goalKg} startKg={startKg} />
|
||||
</aside>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user