From afdec23a840e7fe392c2c42d14aee7c1d9170706 Mon Sep 17 00:00:00 2001 From: Michele Date: Sun, 1 Feb 2026 16:27:23 +0100 Subject: [PATCH] Redesign: Editorial Fresh design system Complete visual overhaul with distinctive editorial aesthetic: Design System: - New fonts: Fraunces (display) + DM Sans (body) - Color palette: Cream background, ink text, coral accents - Custom CSS variables and utility classes - Sharp edges (no rounded corners) for editorial feel Components: - Updated Button with new variants and colors - Updated Input with editorial styling - New card-editorial class with accent bar Pages: - Homepage: Full redesign with hero, features, CTA - Auth layout: Split screen with branding side - Login/Register: Editorial styling with tags - Dashboard: Cards with accent bars - Subscription: Clean feature comparison table Typography: - Fraunces for all headings (serif, characterful) - DM Sans for body text (clean, readable) - Editorial tags (uppercase, accent color) Co-Authored-By: Claude Opus 4.5 --- src/app/(auth)/layout.tsx | 55 ++++- src/app/(auth)/login/page.tsx | 56 +++-- src/app/(auth)/register/page.tsx | 58 +++-- src/app/(dashboard)/dashboard/page.tsx | 158 ++++++++------ src/app/(dashboard)/layout.tsx | 22 +- src/app/(dashboard)/subscription/page.tsx | 64 +++--- src/app/globals.css | 244 ++++++++++++++++++++-- src/app/layout.tsx | 16 +- src/app/page.tsx | 209 +++++++++++++++--- src/components/auth/google-button.tsx | 4 +- src/components/auth/login-form.tsx | 23 +- src/components/auth/register-form.tsx | 40 ++-- src/components/layout/user-nav.tsx | 25 ++- src/components/subscription/plan-card.tsx | 62 +++--- src/components/ui/button.tsx | 25 ++- src/components/ui/input.tsx | 9 +- 16 files changed, 785 insertions(+), 285 deletions(-) diff --git a/src/app/(auth)/layout.tsx b/src/app/(auth)/layout.tsx index 23c815b..59343bd 100644 --- a/src/app/(auth)/layout.tsx +++ b/src/app/(auth)/layout.tsx @@ -1,12 +1,61 @@ +import Link from 'next/link' + export default function AuthLayout({ children, }: { children: React.ReactNode }) { return ( -
-
- {children} +
+ {/* Left side - Branding */} +
+ {/* Decorative elements */} +
+
+ + {/* Logo */} + + Leopost + + + {/* Quote */} +
+
+
+ "Finalmente un assistente che capisce il mio brand e mi fa risparmiare ore ogni settimana." +
+
+
+ MR +
+
+

Marco Rossi

+

Social Media Manager

+
+
+
+ + {/* Footer */} +

+ © 2026 Leopost +

+
+ + {/* Right side - Form */} +
+ {/* Mobile header */} +
+ + Leopost + +
+ + {/* Form container */} +
+
+ {children} +
+
) diff --git a/src/app/(auth)/login/page.tsx b/src/app/(auth)/login/page.tsx index 676ba9d..a7a2bec 100644 --- a/src/app/(auth)/login/page.tsx +++ b/src/app/(auth)/login/page.tsx @@ -1,30 +1,48 @@ -import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card' import { LoginForm } from '@/components/auth/login-form' import { GoogleSignInButton } from '@/components/auth/google-button' +import Link from 'next/link' export default function LoginPage() { return ( - - - Accedi a Leopost - +
+ {/* Header */} +
+ Bentornato +

+ Accedi a Leopost +

+

Inserisci le tue credenziali per continuare - - - - +

+
-
-
- -
-
- oppure -
+ {/* Google Sign In */} + + + {/* Divider */} +
+
+
+
+ + oppure + +
+
- - - + {/* Email/Password Form */} + + + {/* Footer links */} +
+

+ Non hai un account?{' '} + + Registrati gratis + +

+
+
) } diff --git a/src/app/(auth)/register/page.tsx b/src/app/(auth)/register/page.tsx index 2e2bc7c..1ea25fd 100644 --- a/src/app/(auth)/register/page.tsx +++ b/src/app/(auth)/register/page.tsx @@ -1,30 +1,48 @@ -import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card' import { RegisterForm } from '@/components/auth/register-form' import { GoogleSignInButton } from '@/components/auth/google-button' +import Link from 'next/link' export default function RegisterPage() { return ( - - - Crea il tuo account - - Inizia a usare Leopost gratuitamente - - - - +
+ {/* Header */} +
+ Inizia gratis +

+ Crea il tuo account +

+

+ Inizia a gestire i tuoi social in modo intelligente +

+
-
-
- -
-
- oppure -
+ {/* Google Sign In */} + + + {/* Divider */} +
+
+
+
+ + oppure + +
+
- - - + {/* Email/Password Form */} + + + {/* Footer links */} +
+

+ Hai già un account?{' '} + + Accedi + +

+
+
) } diff --git a/src/app/(dashboard)/dashboard/page.tsx b/src/app/(dashboard)/dashboard/page.tsx index 7695cb9..e97c460 100644 --- a/src/app/(dashboard)/dashboard/page.tsx +++ b/src/app/(dashboard)/dashboard/page.tsx @@ -1,6 +1,6 @@ import { createClient } from '@/lib/supabase/server' import { redirect } from 'next/navigation' -import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card' +import Link from 'next/link' export default async function DashboardPage() { const supabase = await createClient() @@ -32,81 +32,103 @@ export default async function DashboardPage() { } | null return ( -
+
+ {/* Header */}
-

Dashboard

-

Benvenuto in Leopost

+ Dashboard +

+ Bentornato in Leopost +

+

+ Gestisci i tuoi contenuti social da qui. +

+ {/* Cards Grid */}
- - - Il tuo piano - + {/* Plan Card */} +
+
+

Il tuo piano

+ {profile?.plans?.display_name_it || 'Gratuito'} - - - -
    -
  • - {features?.posts_per_month || 10} post/mese -
    • -
  • - {features?.social_accounts || 1} account social -
    • -
  • - {features?.ai_models?.length || 1} modelli AI -
    • -
- - + +
+
    +
  • + Post al mese + {features?.posts_per_month || 10} +
    • +
  • + Account social + {features?.social_accounts || 1} +
    • +
  • + Modelli AI + {features?.ai_models?.length || 1} +
    • +
+
+ + Cambia piano → + +
+
- - - Prossimi passi - - Completa la configurazione - - - -
    -
  • - - ✓ - - Account creato -
    • -
  • - - 2 - - Collega social (Phase 2) -
    • -
  • - - 3 - - Configura brand (Phase 3) -
    • -
- - + {/* Onboarding Card */} +
+

Prossimi passi

+
    +
  • + + ✓ + +
    +

    Account creato

    +

    Completo

    +
    +
    • +
  • + + 2 + +
    +

    Collega social

    +

    Prossimamente

    +
    +
    • +
  • + + 3 + +
    +

    Configura brand

    +

    Prossimamente

    +
    +
    • +
+
- - - Attivita - - Le tue statistiche - - - -
- Nessuna attivita ancora. -
- Inizia collegando un account social! + {/* Activity Card */} +
+

Attività

+
+
+ + +
- - +

+ Nessuna attività ancora. +

+

+ Collega un account social per iniziare! +

+
+
) diff --git a/src/app/(dashboard)/layout.tsx b/src/app/(dashboard)/layout.tsx index fe8252d..4975fe8 100644 --- a/src/app/(dashboard)/layout.tsx +++ b/src/app/(dashboard)/layout.tsx @@ -31,25 +31,25 @@ export default async function DashboardLayout({ .single() return ( -
+
{/* Header */} -
-
+
+
-
- +
+ Leopost -
{/* Main content */} -
+
{children}
diff --git a/src/app/(dashboard)/subscription/page.tsx b/src/app/(dashboard)/subscription/page.tsx index 5dcb0da..50e309a 100644 --- a/src/app/(dashboard)/subscription/page.tsx +++ b/src/app/(dashboard)/subscription/page.tsx @@ -29,7 +29,7 @@ export default async function SubscriptionPage() { if (plansError || !plans) { return (
-

Errore nel caricamento dei piani

+

Errore nel caricamento dei piani

) } @@ -41,19 +41,23 @@ export default async function SubscriptionPage() { }) return ( -
+
+ {/* Header */}
-

Il tuo abbonamento

-

- Scegli il piano piu adatto alle tue esigenze + Abbonamento +

+ Scegli il tuo piano +

+

+ Trova il piano più adatto alle tue esigenze

{/* Info banner */} -
-

- Nota: Il pagamento verra implementato nelle prossime versioni. - Per ora puoi passare liberamente tra i piani per testare le funzionalita. +

+

+ Nota: Il pagamento verrà implementato nelle prossime versioni. + Per ora puoi passare liberamente tra i piani per testare le funzionalità.

@@ -69,19 +73,19 @@ export default async function SubscriptionPage() {
{/* Feature comparison */} -
-

- Confronto funzionalita +
+

+ Confronto funzionalità

- +
- - + {sortedPlans.map((plan) => ( - ))} @@ -106,17 +110,17 @@ export default async function SubscriptionPage() { (p.features as PlanFeatures).image_generation ? '\u2713' : '\u2014'} + getValue={(p) => (p.features as PlanFeatures).image_generation ? '✓' : '—'} /> { const auto = (p.features as PlanFeatures).automation - if (auto === false) return '\u2014' + if (auto === false) return '—' if (auto === 'manual') return 'Manuale' if (auto === 'full') return 'Completa' - return '\u2014' + return '—' }} /> @@ -125,14 +129,14 @@ export default async function SubscriptionPage() { {/* FAQ */} -
-

+
+

Domande frequenti

@@ -158,10 +162,10 @@ function FeatureRow({ getValue: (plan: Plan) => string }) { return ( -

- + + {plans.map((plan) => ( - ))} @@ -171,9 +175,9 @@ function FeatureRow({ function FaqItem({ question, answer }: { question: string; answer: string }) { return ( -
-

{question}

-

{answer}

+
+

{question}

+

{answer}

) } diff --git a/src/app/globals.css b/src/app/globals.css index a2dc41e..049d95a 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -1,26 +1,238 @@ @import "tailwindcss"; -:root { - --background: #ffffff; - --foreground: #171717; -} +/* ========================================================================== + LEOPOST DESIGN SYSTEM - "Editorial Fresh" + ========================================================================== */ @theme inline { - --color-background: var(--background); - --color-foreground: var(--foreground); - --font-sans: var(--font-geist-sans); - --font-mono: var(--font-geist-mono); + /* Typography */ + --font-body: var(--font-body), system-ui, sans-serif; + --font-display: var(--font-display), Georgia, serif; + + /* Color Palette */ + --color-cream: #FFFBF5; + --color-cream-dark: #F5F0E8; + --color-ink: #1A1A1A; + --color-ink-light: #4A4A4A; + --color-ink-muted: #7A7A7A; + + /* Accent - Coral Red */ + --color-accent: #E85A4F; + --color-accent-hover: #D14940; + --color-accent-light: #FFF0EE; + + /* Semantic */ + --color-background: var(--color-cream); + --color-foreground: var(--color-ink); + --color-muted: var(--color-ink-muted); + --color-border: #E5E0D8; + --color-border-strong: #D0C9BD; + + /* Success/Error */ + --color-success: #2D7A4F; + --color-success-light: #E8F5ED; + --color-error: #C53030; + --color-error-light: #FEE2E2; } -@media (prefers-color-scheme: dark) { - :root { - --background: #0a0a0a; - --foreground: #ededed; +/* ========================================================================== + BASE STYLES + ========================================================================== */ + +body { + background-color: var(--color-cream); + color: var(--color-ink); + font-family: var(--font-body); + font-size: 16px; + line-height: 1.6; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +/* Display Typography */ +.font-display { + font-family: var(--font-display); + font-optical-sizing: auto; +} + +.font-body { + font-family: var(--font-body); +} + +/* Heading Styles */ +h1, h2, h3, h4, h5, h6, +.heading { + font-family: var(--font-display); + font-weight: 600; + line-height: 1.2; + color: var(--color-ink); + letter-spacing: -0.02em; +} + +/* ========================================================================== + EDITORIAL ELEMENTS + ========================================================================== */ + +/* Decorative line */ +.editorial-line { + width: 60px; + height: 3px; + background-color: var(--color-accent); +} + +/* Pull quote style */ +.pull-quote { + font-family: var(--font-display); + font-size: 1.5rem; + font-style: italic; + color: var(--color-ink-light); + border-left: 3px solid var(--color-accent); + padding-left: 1.5rem; +} + +/* Label/Tag style */ +.editorial-tag { + font-size: 0.75rem; + font-weight: 600; + letter-spacing: 0.1em; + text-transform: uppercase; + color: var(--color-accent); +} + +/* ========================================================================== + COMPONENT OVERRIDES + ========================================================================== */ + +/* Buttons - Primary */ +.btn-primary { + background-color: var(--color-ink); + color: var(--color-cream); + font-weight: 500; + padding: 0.75rem 1.5rem; + border-radius: 0; + transition: all 0.2s ease; +} + +.btn-primary:hover { + background-color: var(--color-accent); + transform: translateY(-1px); +} + +/* Buttons - Secondary */ +.btn-secondary { + background-color: transparent; + color: var(--color-ink); + font-weight: 500; + padding: 0.75rem 1.5rem; + border: 2px solid var(--color-ink); + border-radius: 0; + transition: all 0.2s ease; +} + +.btn-secondary:hover { + background-color: var(--color-ink); + color: var(--color-cream); +} + +/* Cards */ +.card-editorial { + background-color: white; + border: 1px solid var(--color-border); + padding: 2rem; + position: relative; +} + +.card-editorial::before { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 4px; + background-color: var(--color-accent); +} + +/* Input fields */ +input[type="text"], +input[type="email"], +input[type="password"], +textarea { + border: 1px solid var(--color-border); + border-radius: 0; + background-color: white; + padding: 0.75rem 1rem; + font-family: var(--font-body); + transition: border-color 0.2s ease; +} + +input:focus, +textarea:focus { + outline: none; + border-color: var(--color-ink); +} + +/* ========================================================================== + UTILITIES + ========================================================================== */ + +/* Text colors */ +.text-accent { color: var(--color-accent); } +.text-muted { color: var(--color-ink-muted); } +.text-ink { color: var(--color-ink); } +.text-ink-light { color: var(--color-ink-light); } + +/* Background colors */ +.bg-cream { background-color: var(--color-cream); } +.bg-cream-dark { background-color: var(--color-cream-dark); } +.bg-accent-light { background-color: var(--color-accent-light); } + +/* Border colors */ +.border-editorial { border-color: var(--color-border); } + +/* ========================================================================== + ANIMATIONS + ========================================================================== */ + +@keyframes fade-up { + from { + opacity: 0; + transform: translateY(20px); + } + to { + opacity: 1; + transform: translateY(0); } } -body { - background: var(--background); - color: var(--foreground); - font-family: Arial, Helvetica, sans-serif; +@keyframes fade-in { + from { opacity: 0; } + to { opacity: 1; } +} + +.animate-fade-up { + animation: fade-up 0.6s ease-out forwards; +} + +.animate-fade-in { + animation: fade-in 0.4s ease-out forwards; +} + +/* Staggered animations */ +.stagger-1 { animation-delay: 0.1s; } +.stagger-2 { animation-delay: 0.2s; } +.stagger-3 { animation-delay: 0.3s; } +.stagger-4 { animation-delay: 0.4s; } + +/* ========================================================================== + SELECTION & FOCUS + ========================================================================== */ + +::selection { + background-color: var(--color-accent); + color: white; +} + +:focus-visible { + outline: 2px solid var(--color-accent); + outline-offset: 2px; } diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 588139f..a254806 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -1,15 +1,17 @@ import type { Metadata } from "next"; -import { Geist, Geist_Mono } from "next/font/google"; +import { DM_Sans, Fraunces } from "next/font/google"; import "./globals.css"; -const geistSans = Geist({ - variable: "--font-geist-sans", +const dmSans = DM_Sans({ + variable: "--font-body", subsets: ["latin"], + display: "swap", }); -const geistMono = Geist_Mono({ - variable: "--font-geist-mono", +const fraunces = Fraunces({ + variable: "--font-display", subsets: ["latin"], + display: "swap", }); export const metadata: Metadata = { @@ -27,9 +29,7 @@ export default function RootLayout({ }>) { return ( - + {children} diff --git a/src/app/page.tsx b/src/app/page.tsx index 221289f..d89e033 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,37 +1,194 @@ import Link from 'next/link' -import { Button } from '@/components/ui/button' export default function Home() { - // Simple static landing page - no Supabase for now return ( -
-
-

- Leopost -

-

- Il tuo social media manager potenziato dall'AI. -
- Minimo sforzo, massima resa. -

- -
- - +
+ {/* Header */} +
+
+ + Leopost - - - + + + Inizia gratis + +
+
-

- Nessuna carta richiesta. Piano gratuito disponibile. -

-
+ {/* Hero Section */} +
+
+
+ {/* Left Column - Text */} +
+ Social Media Manager + +

+ Il tuo assistente +
+ editoriale +
+ potenziato dall'AI +

+ +
+ +

+ Crea, programma e pubblica contenuti su tutti i tuoi canali social. + Minimo sforzo, massima resa. +

+ +
+ + Inizia gratis + + + Ho già un account + +
+ +

+ Nessuna carta richiesta · Piano gratuito per sempre +

+
+ + {/* Right Column - Visual */} +
+
+ {/* Decorative background */} +
+ + {/* Main card */} +
+
+ {/* Fake chat message */} +
+
+ L +
+
+

Leopost AI

+

+ Ho preparato 3 post per la tua pagina Instagram. + Vuoi che li programmi per la prossima settimana? +

+
+
+ + {/* Divider */} +
+ + {/* Post preview cards */} +
+
+ 📸 +
+
+ ✨ +
+
+ 🎯 +
+
+ + {/* Action buttons */} +
+ + +
+
+
+
+
+
+
+
+ + {/* Features Section */} +
+
+
+ Come funziona +

+ Tre passi verso la libertà editoriale +

+
+ +
+ {/* Feature 1 */} +
+
01
+

Connetti i tuoi canali

+

+ Collega Facebook, Instagram e gli altri social in pochi click. +

+
+ + {/* Feature 2 */} +
+
02
+

Chatta con l'AI

+

+ Descrivi cosa vuoi comunicare. L'AI crea contenuti su misura per te. +

+
+ + {/* Feature 3 */} +
+
03
+

Rilassati

+

+ Leopost pubblica automaticamente. Tu pensa al tuo business. +

+
+
+
+
+ + {/* CTA Section */} +
+
+

+ Pronto a trasformare +
+ la tua presenza social? +

+
+

+ Inizia oggi con il piano gratuito. Nessun vincolo. +

+
+ + Crea il tuo account + +
+
+
+ + {/* Footer */} +
+
+
Leopost
+

+ © 2026 Leopost. Tutti i diritti riservati. +

+
+
) } diff --git a/src/components/auth/google-button.tsx b/src/components/auth/google-button.tsx index b0cb796..65b8f08 100644 --- a/src/components/auth/google-button.tsx +++ b/src/components/auth/google-button.tsx @@ -62,10 +62,10 @@ export function GoogleSignInButton() { variant="outline" onClick={handleGoogleSignIn} disabled={loading} - className="w-full flex items-center justify-center gap-2" + className="w-full flex items-center justify-center gap-3 h-12 text-base" > - {loading ? 'Reindirizzamento...' : 'Accedi con Google'} + {loading ? 'Reindirizzamento...' : 'Continua con Google'} ) } diff --git a/src/components/auth/login-form.tsx b/src/components/auth/login-form.tsx index 12bc0ee..9a36bdd 100644 --- a/src/components/auth/login-form.tsx +++ b/src/components/auth/login-form.tsx @@ -43,15 +43,15 @@ export function LoginForm() { } return ( -
+ {error && ( -
-

{error}

+
+

{error}

)}
-
- Funzionalita +
+ Funzionalità + {plan.display_name_it}
{feature}
{feature} + {getValue(plan)}