Athena/gso-landingpage
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Typography system: Urbanist headings, 3-tone color palette, fix rounded corners

Browse source 
- Add Urbanist font (Croogla-equivalent) for h1-h4 via next/font/google
- Define strict text color system: #0f172a heads / #475569 body / #94a3b8 muted
- Remove border-image from IconCards (was breaking border-radius) → inset box-shadow
- WeekTimeline: vorlagen text-slate-400, result text-slate-700 (indigo check icon only)
- Coach bio: expert names text-slate-800 (was text-indigo-700)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Athena 2026-04-30 22:45:02 +02:00
parent b2f290af3a
commit 2be3d345e8
4 changed files with 29 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/app/components/WeekTimeline.tsx
View file

@ -145,13 +145,13 @@ function WeekCard({ week, isLeft }: { week: Week; isLeft: boolean }) {
{/* Body */} {/* Body */}
<p className="text-slate-500 text-sm leading-relaxed">{week.body}</p> <p className="text-slate-500 text-sm leading-relaxed">{week.body}</p>
{/* Vorlagen */} {/* Vorlagen */}
<p className="text-xs text-indigo-600 italic border-t border-slate-100 pt-3 flex items-start gap-1.5"> <p className="text-xs text-slate-400 italic border-t border-slate-100 pt-3 flex items-start gap-1.5">
<ClipboardIcon className="w-3.5 h-3.5 flex-shrink-0 mt-0.5" /> <ClipboardIcon className="w-3.5 h-3.5 flex-shrink-0 mt-0.5" />
{week.vorlagen} {week.vorlagen}
</p> </p>
{/* Result */} {/* Result */}
<p className="text-sm font-semibold text-emerald-600 flex items-start gap-1.5"> <p className="text-sm font-semibold text-slate-700 flex items-start gap-1.5">
<CheckIcon className="w-4 h-4 flex-shrink-0 mt-0.5" /> <CheckIcon className="w-4 h-4 flex-shrink-0 mt-0.5 text-indigo-500" />
{week.result} {week.result}
</p> </p>
</div> </div>

18
src/app/globals.css
View file

@ -3,6 +3,12 @@
:root { :root {
--background: #f8f7ff; --background: #f8f7ff;
--foreground: #0f172a; --foreground: #0f172a;
/* ── Typography color system (3 tones only) ── */
--text-head: #0f172a; /* h1–h4, bold labels */
--text-body: #475569; /* all running paragraphs */
--text-muted: #94a3b8; /* meta, dates, secondary */
/* Accent #6366f1 — ONLY badges, icons, CTAs. Never in body copy. */
} }
@theme inline { @theme inline {
@ -14,11 +20,21 @@
body { body {
background: linear-gradient(160deg, #f5f4ff, #f8f7ff 40%, #f4f7fa); background: linear-gradient(160deg, #f5f4ff, #f8f7ff 40%, #f4f7fa);
color: var(--foreground); color: var(--text-body);
font-family: var(--font-geist-sans, Arial, Helvetica, sans-serif); font-family: var(--font-geist-sans, Arial, Helvetica, sans-serif);
min-height: 100vh; min-height: 100vh;
} }
/* ── Heading font: Urbanist (Croogla-equivalent) ── */
h1, h2, h3, h4 {
font-family: var(--font-urbanist, var(--font-geist-sans));
color: var(--text-head);
}
p {
color: var(--text-body);
}
.mc-card { .mc-card {
background: #ffffff; background: #ffffff;
border: 1px solid #eae8f8; border: 1px solid #eae8f8;

9
src/app/layout.tsx
View file

@ -1,8 +1,13 @@
import type { Metadata } from "next"; import type { Metadata } from "next";
import { Geist } from "next/font/google"; import { Geist, Urbanist } from "next/font/google";
import "./globals.css"; import "./globals.css";
const geist = Geist({ variable: "--font-geist-sans", subsets: ["latin"] }); const geist = Geist({ variable: "--font-geist-sans", subsets: ["latin"] });
const urbanist = Urbanist({
variable: "--font-urbanist",
subsets: ["latin"],
weight: ["600", "700", "800", "900"],
});
export const metadata: Metadata = { export const metadata: Metadata = {
title: "Das 8-Wochen Kundengewinnungs-System für Selbstständige | Market Compass", title: "Das 8-Wochen Kundengewinnungs-System für Selbstständige | Market Compass",
@ -11,7 +16,7 @@ export const metadata: Metadata = {
export default function RootLayout({ children }: { children: React.ReactNode }) { export default function RootLayout({ children }: { children: React.ReactNode }) {
return ( return (
<html lang="de" className={`${geist.variable} antialiased`}> <html lang="de" className={`${geist.variable} ${urbanist.variable} antialiased`}>
<body>{children}</body> <body>{children}</body>
</html> </html>
); );

4
src/app/page.tsx
View file

@ -33,7 +33,7 @@ function Pill({ children }: { children: React.ReactNode }) {
function IconCard({ icon, title, sub }: { icon: React.ReactNode; title: string; sub: string }) { function IconCard({ icon, title, sub }: { icon: React.ReactNode; title: string; sub: string }) {
return ( return (
<div className="mc-card p-6 flex flex-col items-center text-center gap-3" style={{ borderTop: "3px solid", borderImageSlice: 1, borderImageSource: "linear-gradient(90deg,#6366f1,#8b5cf6)" }}> <div className="mc-card p-6 flex flex-col items-center text-center gap-3" style={{ boxShadow: "inset 0 3px 0 #6366f1, 0 2px 12px rgba(99,102,241,0.06)" }}>
<div className="w-14 h-14 rounded-2xl bg-gradient-to-br from-indigo-500 to-violet-500 flex items-center justify-center shadow-lg"> <div className="w-14 h-14 rounded-2xl bg-gradient-to-br from-indigo-500 to-violet-500 flex items-center justify-center shadow-lg">
{icon} {icon}
</div> </div>
@ -285,7 +285,7 @@ export default function Home() {
<div key={name} className="flex items-start gap-2 text-sm"> <div key={name} className="flex items-start gap-2 text-sm">
<div className="w-1.5 h-1.5 rounded-full bg-indigo-500 flex-shrink-0 mt-2" /> <div className="w-1.5 h-1.5 rounded-full bg-indigo-500 flex-shrink-0 mt-2" />
<div> <div>
<span className="font-semibold text-indigo-700">{name}</span> <span className="font-semibold text-slate-800">{name}</span>
<span className="text-slate-500"> — {role}</span> <span className="text-slate-500"> — {role}</span>
<span className="text-slate-400 text-xs ml-1">({weeks})</span> <span className="text-slate-400 text-xs ml-1">({weeks})</span>
</div> </div>