style: apply Inter + Playfair Display fonts matching reference landing page
All checks were successful
Deploy to Production / Build and Deploy (push) Successful in 2m16s
All checks were successful
Deploy to Production / Build and Deploy (push) Successful in 2m16s
- 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 <noreply@anthropic.com>
This commit is contained in:
@@ -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;
|
||||
|
||||
@@ -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 (
|
||||
<html suppressHydrationWarning>
|
||||
<body className={`${inter.className} bg-background text-foreground antialiased`}>
|
||||
<body className={`${inter.variable} ${playfair.variable} bg-background text-foreground antialiased`}>
|
||||
<ThemeProvider attribute="class" defaultTheme="system" enableSystem={true} disableTransitionOnChange={false}>
|
||||
<I18nProvider>
|
||||
<QueryProvider>
|
||||
|
||||
@@ -109,11 +109,11 @@ const Hero = () => {
|
||||
<div className="inline-flex items-center gap-2 px-4 py-1.5 mb-10 text-[10px] font-bold tracking-[0.3em] text-brand-dark/40 dark:text-white/40 uppercase bg-transparent border border-black/10 dark:border-white/10 rounded-full">
|
||||
<Languages size={10} /> {t('landing.hero.tag')}
|
||||
</div>
|
||||
<h1 className="text-7xl lg:text-9xl mb-10 text-brand-dark dark:text-white font-extrabold uppercase">
|
||||
<h1 className="text-6xl md:text-8xl mb-10 text-brand-dark dark:text-white font-serif font-medium tracking-tight leading-[1.1]">
|
||||
{t('landing.hero.titleLine1')}<br />
|
||||
<span className="block mt-4">{t('landing.hero.titleLine2')}</span>
|
||||
<span className="block mt-4 italic">{t('landing.hero.titleLine2')}</span>
|
||||
</h1>
|
||||
<p className="text-lg lg:text-xl text-brand-dark/50 dark:text-white/50 mb-14 max-w-2xl mx-auto leading-relaxed font-medium">
|
||||
<p className="text-lg md:text-xl text-brand-dark/50 dark:text-white/50 mb-14 max-w-2xl mx-auto leading-relaxed font-light">
|
||||
{t('landing.hero.description')}
|
||||
</p>
|
||||
|
||||
@@ -186,8 +186,8 @@ const Steps = () => {
|
||||
<div className="max-w-7xl mx-auto">
|
||||
<div className="mb-24">
|
||||
<span className="accent-pill mb-6 block w-fit">{t('landing.steps.process')}</span>
|
||||
<h2 className="text-5xl lg:text-7xl text-brand-dark dark:text-white mb-6">{t('landing.steps.title')}</h2>
|
||||
<p className="text-brand-dark/40 dark:text-white/40 text-lg max-w-xl font-medium">{t('landing.steps.subtitle')}</p>
|
||||
<h2 className="text-4xl md:text-5xl text-brand-dark dark:text-white font-serif font-medium tracking-tight mb-6">{t('landing.steps.title')}</h2>
|
||||
<p className="text-brand-dark/40 dark:text-white/40 text-lg max-w-xl font-light">{t('landing.steps.subtitle')}</p>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-3 gap-16">
|
||||
@@ -196,8 +196,8 @@ const Steps = () => {
|
||||
<div className="w-12 h-12 rounded-xl bg-brand-muted dark:bg-[#1f1f1f] flex items-center justify-center text-brand-dark dark:text-white mb-8 group-hover:bg-brand-dark dark:group-hover:bg-brand-accent group-hover:text-white dark:group-hover:text-brand-dark transition-all duration-500">
|
||||
{st.icon}
|
||||
</div>
|
||||
<h3 className="text-3xl text-brand-dark dark:text-white mb-4">{st.title}</h3>
|
||||
<p className="text-brand-dark/40 dark:text-white/40 leading-relaxed font-medium">{st.desc}</p>
|
||||
<h3 className="text-xl font-serif font-medium text-brand-dark dark:text-white mb-4">{st.title}</h3>
|
||||
<p className="text-brand-dark/40 dark:text-white/40 leading-relaxed font-light">{st.desc}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
@@ -214,7 +214,7 @@ const FeaturesContext = () => {
|
||||
<div className="grid lg:grid-cols-12 gap-20 items-end mb-24">
|
||||
<div className="lg:col-span-12">
|
||||
<span className="accent-pill mb-6 block w-fit font-bold uppercase tracking-widest">{t('landing.features.tag')}</span>
|
||||
<h2 className="text-6xl lg:text-8xl text-brand-dark dark:text-white leading-none">
|
||||
<h2 className="text-4xl md:text-5xl text-brand-dark dark:text-white font-serif font-medium tracking-tight leading-none">
|
||||
{t('landing.features.title')}
|
||||
</h2>
|
||||
</div>
|
||||
@@ -231,8 +231,8 @@ const FeaturesContext = () => {
|
||||
{item.icon}
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="text-2xl font-bold mb-4 text-brand-dark dark:text-white">{item.title}</h4>
|
||||
<p className="text-brand-dark/40 dark:text-white/40 leading-relaxed font-medium text-sm">{item.desc}</p>
|
||||
<h4 className="text-xl font-serif font-medium mb-4 text-brand-dark dark:text-white">{item.title}</h4>
|
||||
<p className="text-brand-dark/40 dark:text-white/40 leading-relaxed font-light text-sm">{item.desc}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
@@ -257,10 +257,10 @@ const LayoutFeatures = () => {
|
||||
<section className="py-32 px-4 bg-brand-dark dark:bg-[#0a0a0a] text-white">
|
||||
<div className="max-w-7xl mx-auto">
|
||||
<div className="text-center mb-32">
|
||||
<h2 className="text-6xl lg:text-8xl mb-10 leading-tight">
|
||||
{t('landing.layout.title')}<br /> <span>{t('landing.layout.title2')}</span>
|
||||
<h2 className="text-4xl md:text-6xl mb-10 leading-tight font-serif font-medium tracking-tight">
|
||||
{t('landing.layout.title')}<br /> <span className="italic">{t('landing.layout.title2')}</span>
|
||||
</h2>
|
||||
<p className="text-white/40 max-w-2xl mx-auto text-xl font-medium uppercase tracking-widest">
|
||||
<p className="text-white/40 max-w-2xl mx-auto text-xl font-light tracking-widest">
|
||||
{t('landing.layout.subtitle')}
|
||||
</p>
|
||||
</div>
|
||||
@@ -270,8 +270,8 @@ const LayoutFeatures = () => {
|
||||
<div className="w-12 h-12 border border-white/10 rounded-xl flex items-center justify-center text-brand-accent mb-10 group-hover:scale-110 group-hover:border-white/20 transition-all">
|
||||
{p.icon}
|
||||
</div>
|
||||
<h4 className="text-3xl font-bold mb-6 leading-none">{p.title}</h4>
|
||||
<p className="text-white/30 text-base leading-relaxed font-medium">{p.desc}</p>
|
||||
<h4 className="text-xl font-serif font-medium mb-6 leading-none">{p.title}</h4>
|
||||
<p className="text-white/30 text-sm leading-relaxed font-light">{p.desc}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
@@ -294,8 +294,8 @@ const FormatsSection = () => {
|
||||
<div className="max-w-7xl mx-auto">
|
||||
<div className="mb-24">
|
||||
<span className="accent-pill mb-6 block w-fit">COMPATIBILITÉ</span>
|
||||
<h2 className="text-5xl lg:text-7xl text-brand-dark dark:text-white mb-6 leading-tight uppercase font-black">{t('landing.formats.title')} <span>{t('landing.formats.title2')}</span></h2>
|
||||
<p className="text-brand-dark/40 dark:text-white/40 max-w-xl text-lg font-medium">{t('landing.formats.subtitle')}</p>
|
||||
<h2 className="text-4xl md:text-5xl text-brand-dark dark:text-white mb-6 leading-tight font-serif font-medium tracking-tight">{t('landing.formats.title')} <span className="italic">{t('landing.formats.title2')}</span></h2>
|
||||
<p className="text-brand-dark/40 dark:text-white/40 max-w-xl text-lg font-light">{t('landing.formats.subtitle')}</p>
|
||||
</div>
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
|
||||
{formats.map((f, i) => (
|
||||
@@ -306,7 +306,7 @@ const FormatsSection = () => {
|
||||
</div>
|
||||
<span className="text-[9px] font-bold text-brand-dark/20 dark:text-white/20 uppercase tracking-[0.2em]">{f.id}</span>
|
||||
</div>
|
||||
<h3 className="text-2xl font-bold mb-6 text-brand-dark dark:text-white uppercase tracking-tighter">{f.name}</h3>
|
||||
<h3 className="text-xl font-serif font-medium mb-6 text-brand-dark dark:text-white tracking-tight">{f.name}</h3>
|
||||
<ul className="space-y-4">
|
||||
{f.items.map((item, j) => (
|
||||
<li key={j} className="flex items-start gap-3 text-xs text-brand-dark/40 dark:text-white/40 font-medium">
|
||||
@@ -336,8 +336,8 @@ const PricingSection = () => {
|
||||
<section id="pricing" className="py-40 px-4 bg-brand-bg dark:bg-[#0a0a0a]">
|
||||
<div className="max-w-7xl mx-auto">
|
||||
<div className="text-center mb-24">
|
||||
<h2 className="text-7xl lg:text-8xl mb-8 leading-tight text-brand-dark dark:text-white">{t('landing.pricing.title')}</h2>
|
||||
<p className="text-brand-dark/40 dark:text-white/40 text-xl font-bold max-w-2xl mx-auto uppercase tracking-widest">{t('landing.pricing.subtitle')}</p>
|
||||
<h2 className="text-4xl md:text-5xl mb-8 leading-tight text-brand-dark dark:text-white font-serif font-medium tracking-tight">{t('landing.pricing.title')}</h2>
|
||||
<p className="text-brand-dark/40 dark:text-white/40 text-xl font-light max-w-2xl mx-auto">{t('landing.pricing.subtitle')}</p>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-center gap-12 mb-32">
|
||||
@@ -355,25 +355,25 @@ const PricingSection = () => {
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-px bg-black/5 dark:bg-white/5 rounded-[40px] overflow-hidden border border-black/5 dark:border-white/5">
|
||||
{plans.map((p, i) => (
|
||||
<div key={i} className="p-16 bg-white dark:bg-[#141414] flex flex-col text-left transition-all duration-500 hover:z-10 hover:shadow-2xl hover:scale-[1.01]">
|
||||
<h3 className="text-4xl font-black mb-2 text-brand-dark dark:text-white uppercase tracking-tighter">{p.name}</h3>
|
||||
<p className="text-brand-dark/40 dark:text-white/40 text-xs font-bold mb-14 tracking-widest uppercase">{p.desc}</p>
|
||||
<h3 className="text-2xl font-serif font-medium mb-2 text-brand-dark dark:text-white tracking-tight">{p.name}</h3>
|
||||
<p className="text-brand-dark/40 dark:text-white/40 text-xs font-light mb-14 tracking-widest uppercase">{p.desc}</p>
|
||||
|
||||
<div className="mb-14">
|
||||
<span className="text-7xl font-black leading-none text-brand-dark dark:text-white">€{isAnnual ? p.annualPrice : p.monthlyPrice}</span>
|
||||
<span className="text-brand-dark/30 dark:text-white/30 font-bold ml-2 uppercase text-[10px] tracking-[0.2em]">/ {t('landing.pricing.month')}</span>
|
||||
<span className="text-5xl font-serif font-medium leading-none text-brand-dark dark:text-white">€{isAnnual ? p.annualPrice : p.monthlyPrice}</span>
|
||||
<span className="text-brand-dark/30 dark:text-white/30 font-light ml-2 uppercase text-[10px] tracking-[0.2em]">/ {t('landing.pricing.month')}</span>
|
||||
</div>
|
||||
|
||||
<ul className="space-y-6 mb-16 flex-grow">
|
||||
{p.features.map((f, j) => (
|
||||
<li key={j} className="flex items-start gap-4 text-sm text-brand-dark/50 dark:text-white/50 font-medium leading-snug">
|
||||
<div className="w-1 h-1 rounded-full bg-brand-accent mt-2 shrink-0"></div> {f}
|
||||
<div className="w-1 h-1 rounded-full bg-brand-accent mt-2 shrink-0"></div> <span className="font-light">{f}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
|
||||
<Link
|
||||
href={p.popular ? "/auth/register" : `/pricing?plan=${p.name.toLowerCase()}`}
|
||||
className={`w-full py-5 rounded-xl font-bold text-sm transition-all uppercase tracking-widest leading-none text-center block ${p.popular ? 'bg-brand-dark dark:bg-brand-accent text-white dark:text-brand-dark shadow-xl' : 'bg-transparent text-brand-dark dark:text-white border border-black/10 dark:border-white/10 hover:bg-black/5 dark:hover:bg-white/5'}`}
|
||||
className={`w-full py-4 rounded-2xl text-xs font-bold uppercase tracking-widest transition-all leading-none text-center block ${p.popular ? 'bg-brand-dark dark:bg-brand-accent text-white dark:text-brand-dark shadow-xl' : 'bg-transparent text-brand-dark dark:text-white border border-black/10 dark:border-white/10 hover:bg-black/5 dark:hover:bg-white/5'}`}
|
||||
>
|
||||
{p.cta}
|
||||
</Link>
|
||||
@@ -392,14 +392,14 @@ const CTASection = () => {
|
||||
return (
|
||||
<section className="py-40 px-4 text-center">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<h2 className="text-7xl lg:text-9xl text-brand-dark dark:text-white mb-10 leading-none tracking-tighter">
|
||||
<h2 className="text-5xl md:text-7xl text-brand-dark dark:text-white mb-10 leading-tight tracking-tight font-serif font-medium">
|
||||
{t('landing.cta.title')}
|
||||
</h2>
|
||||
<p className="text-2xl text-brand-dark/40 dark:text-white/40 mb-16 font-bold uppercase tracking-[0.2em]">
|
||||
<p className="text-lg text-brand-dark/40 dark:text-white/40 mb-16 font-light">
|
||||
{t('landing.cta.subtitle')}
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row gap-6 justify-center items-center">
|
||||
<Link href="/auth/register" className="premium-button px-14 py-6 text-xl inline-block text-center">
|
||||
<Link href="/auth/register" className="premium-button px-16 py-6 text-lg inline-block text-center rounded-[32px]">
|
||||
{t('landing.cta.button')}
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user