sepehr/office_translator
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: apply Inter + Playfair Display fonts matching reference landing page
All checks were successful
Deploy to Production / Build and Deploy (push) Successful in 2m16s
Details

Browse Source 
- 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:
sepehr
2026-05-30 13:45:44 +02:00
parent 03cf4cd276
commit b472dcd4b7
3 changed files with 42 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
frontend/src/app/globals.css
View File

@@ -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;

10
frontend/src/app/layout.tsx
View File

@@ -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>