From b472dcd4b7c161d4b688d90f37077e43b8055248 Mon Sep 17 00:00:00 2001 From: sepehr Date: Sat, 30 May 2026 13:45:44 +0200 Subject: [PATCH] style: apply Inter + Playfair Display fonts matching reference landing page - Add Playfair Display as serif font via next/font/google - Hero headings: font-serif font-medium tracking-tight (was font-extrabold uppercase) - Body text: font-light (was font-medium) - Section headings: font-serif tracking-tight (was heavy sans-serif) - Pricing titles: font-serif font-medium (was font-black uppercase) - CTA button: rounded-[32px] larger pill style - Overall softer, more editorial feel matching architectural-grid reference Co-Authored-By: Claude Opus 4.8 --- frontend/src/app/globals.css | 9 +-- frontend/src/app/layout.tsx | 10 +++- .../src/components/landing/landing-page.tsx | 58 +++++++++---------- 3 files changed, 42 insertions(+), 35 deletions(-) diff --git a/frontend/src/app/globals.css b/frontend/src/app/globals.css index d3708af..dcdcc31 100644 --- a/frontend/src/app/globals.css +++ b/frontend/src/app/globals.css @@ -7,6 +7,7 @@ --color-background: var(--background); --color-foreground: var(--foreground); --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif; + --font-serif: 'Playfair Display', Georgia, serif; --font-mono: 'JetBrains Mono', monospace; /* Brand Colors */ @@ -144,8 +145,8 @@ h1, h2, h3, h4, h5, h6 { font-family: 'Inter', ui-sans-serif, system-ui, sans-serif; - font-weight: 800; - letter-spacing: -0.025em; + font-weight: 700; + letter-spacing: -0.02em; line-height: 1.1; } @@ -181,7 +182,7 @@ } .premium-button { - @apply bg-brand-dark text-white px-8 py-3.5 rounded-xl font-black text-sm transition-all hover:scale-[1.02] active:scale-95; + @apply bg-brand-dark text-white px-8 py-3.5 rounded-xl font-bold text-sm transition-all hover:scale-[1.02] active:scale-95; box-shadow: 0 4px 14px rgba(26, 26, 26, 0.2); } .premium-button:hover { @@ -193,7 +194,7 @@ } .accent-pill { - @apply px-4 py-1.5 rounded-full border border-brand-accent/30 text-brand-accent text-[11px] font-black uppercase tracking-widest bg-brand-accent/5; + @apply px-4 py-1.5 rounded-full border border-brand-accent/30 text-brand-accent text-[11px] font-bold uppercase tracking-widest bg-brand-accent/5; } .dark .accent-pill { @apply border-brand-accent/20; diff --git a/frontend/src/app/layout.tsx b/frontend/src/app/layout.tsx index 59c77ba..7520941 100644 --- a/frontend/src/app/layout.tsx +++ b/frontend/src/app/layout.tsx @@ -1,5 +1,5 @@ import type { Metadata } from "next"; -import { Inter } from "next/font/google"; +import { Inter, Playfair_Display } from "next/font/google"; import "./globals.css"; import { QueryProvider } from "@/providers/QueryProvider"; import { ThemeProvider } from "@/providers/ThemeProvider"; @@ -13,6 +13,12 @@ export const dynamic = 'force-dynamic'; const inter = Inter({ subsets: ["latin"], + variable: "--font-sans", +}); + +const playfair = Playfair_Display({ + subsets: ["latin"], + variable: "--font-serif", }); export const metadata: Metadata = { @@ -27,7 +33,7 @@ export default function RootLayout({ }>) { return ( - + diff --git a/frontend/src/components/landing/landing-page.tsx b/frontend/src/components/landing/landing-page.tsx index 3c0b631..3a9e11e 100644 --- a/frontend/src/components/landing/landing-page.tsx +++ b/frontend/src/components/landing/landing-page.tsx @@ -109,11 +109,11 @@ const Hero = () => {
{t('landing.hero.tag')}
-

+

{t('landing.hero.titleLine1')}
- {t('landing.hero.titleLine2')} + {t('landing.hero.titleLine2')}

-

+

{t('landing.hero.description')}

@@ -186,8 +186,8 @@ const Steps = () => {
{t('landing.steps.process')} -

{t('landing.steps.title')}

-

{t('landing.steps.subtitle')}

+

{t('landing.steps.title')}

+

{t('landing.steps.subtitle')}

@@ -196,8 +196,8 @@ const Steps = () => {
{st.icon}
-

{st.title}

-

{st.desc}

+

{st.title}

+

{st.desc}

))}
@@ -214,7 +214,7 @@ const FeaturesContext = () => {
{t('landing.features.tag')} -

+

{t('landing.features.title')}

@@ -231,8 +231,8 @@ const FeaturesContext = () => { {item.icon}
-

{item.title}

-

{item.desc}

+

{item.title}

+

{item.desc}

))} @@ -257,10 +257,10 @@ const LayoutFeatures = () => {
-

- {t('landing.layout.title')}
{t('landing.layout.title2')} +

+ {t('landing.layout.title')}
{t('landing.layout.title2')}

-

+

{t('landing.layout.subtitle')}

@@ -270,8 +270,8 @@ const LayoutFeatures = () => {
{p.icon}
-

{p.title}

-

{p.desc}

+

{p.title}

+

{p.desc}

))} @@ -294,8 +294,8 @@ const FormatsSection = () => {
COMPATIBILITÉ -

{t('landing.formats.title')} {t('landing.formats.title2')}

-

{t('landing.formats.subtitle')}

+

{t('landing.formats.title')} {t('landing.formats.title2')}

+

{t('landing.formats.subtitle')}

{formats.map((f, i) => ( @@ -306,7 +306,7 @@ const FormatsSection = () => {
{f.id}
-

{f.name}

+

{f.name}

    {f.items.map((item, j) => (
  • @@ -336,8 +336,8 @@ const PricingSection = () => {
    -

    {t('landing.pricing.title')}

    -

    {t('landing.pricing.subtitle')}

    +

    {t('landing.pricing.title')}

    +

    {t('landing.pricing.subtitle')}

    @@ -355,25 +355,25 @@ const PricingSection = () => {
    {plans.map((p, i) => (
    -

    {p.name}

    -

    {p.desc}

    +

    {p.name}

    +

    {p.desc}

    - €{isAnnual ? p.annualPrice : p.monthlyPrice} - / {t('landing.pricing.month')} + €{isAnnual ? p.annualPrice : p.monthlyPrice} + / {t('landing.pricing.month')}
      {p.features.map((f, j) => (
    • -
      {f} +
      {f}
      • ))}
    {p.cta} @@ -392,14 +392,14 @@ const CTASection = () => { return (
    -

    +

    {t('landing.cta.title')}

    -

    +

    {t('landing.cta.subtitle')}

    - + {t('landing.cta.button')}