style: standardize typography scale (H1-H3), update eyebrow labels to mono, and unify CTA padding

This commit is contained in:
MichalC
2026-09-01 23:54:31 +02:00
parent ae10f45a7e
commit a24c239ae1
11 changed files with 25 additions and 23 deletions
+1 -1
View File
@@ -15,7 +15,7 @@ export const AffiliationBlock: React.FC<Props> = ({ title, description, logo, li
<div className="font-mono text-sm md:text-base font-bold text-accent tracking-widest uppercase mb-4"> <div className="font-mono text-sm md:text-base font-bold text-accent tracking-widest uppercase mb-4">
// Zaufanie // Zaufanie
</div> </div>
<h2 className="font-heading text-4xl sm:text-5xl md:text-6xl font-extrabold tracking-tight text-foreground mb-6 text-balance"> <h2 className="font-heading text-3xl sm:text-4xl md:text-5xl font-extrabold tracking-tight text-foreground mb-6 text-balance">
{title} {title}
</h2> </h2>
<p className="text-foreground/75 text-lg md:text-xl font-light leading-relaxed mb-12 max-w-xl"> <p className="text-foreground/75 text-lg md:text-xl font-light leading-relaxed mb-12 max-w-xl">
+6 -7
View File
@@ -28,11 +28,10 @@ export const EligibilityBlock: React.FC<EligibilityProps> = ({
<section className="py-12 md:py-20 bg-card/60 border-y border-border"> <section className="py-12 md:py-20 bg-card/60 border-y border-border">
<div className="container-premium"> <div className="container-premium">
<div className="max-w-3xl mb-12 text-center md:text-left"> <div className="max-w-3xl mb-12 text-center md:text-left">
<div className="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-accent/10 text-accent text-xs font-semibold uppercase tracking-wider mb-4"> <div className="font-mono text-sm md:text-base font-bold text-accent tracking-widest uppercase mb-4">
<ShieldAlert size={16} /> // Zakres uprawnień doradczych
<span>Zakres uprawnień doradczych</span>
</div> </div>
<h2 className="font-heading text-2xl sm:text-3xl md:text-4xl font-bold text-foreground tracking-tight"> <h2 className="font-heading text-3xl sm:text-4xl md:text-5xl font-extrabold text-foreground tracking-tight">
{title} {title}
</h2> </h2>
{subtitle && ( {subtitle && (
@@ -49,7 +48,7 @@ export const EligibilityBlock: React.FC<EligibilityProps> = ({
<div className="w-10 h-10 rounded-xl bg-accent/10 text-accent flex items-center justify-center shrink-0"> <div className="w-10 h-10 rounded-xl bg-accent/10 text-accent flex items-center justify-center shrink-0">
<CheckCircle2 size={24} /> <CheckCircle2 size={24} />
</div> </div>
<h3 className="font-heading text-xl font-bold text-foreground"> <h3 className="font-heading text-xl sm:text-2xl font-bold text-foreground">
{eligibleTitle} {eligibleTitle}
</h3> </h3>
</div> </div>
@@ -77,7 +76,7 @@ export const EligibilityBlock: React.FC<EligibilityProps> = ({
<div className="w-10 h-10 rounded-xl bg-amber-500/10 text-amber-500 flex items-center justify-center shrink-0"> <div className="w-10 h-10 rounded-xl bg-amber-500/10 text-amber-500 flex items-center justify-center shrink-0">
<AlertTriangle size={22} /> <AlertTriangle size={22} />
</div> </div>
<h3 className="font-heading text-lg font-bold text-foreground"> <h3 className="font-heading text-xl sm:text-2xl font-bold text-foreground">
{limitationsTitle} {limitationsTitle}
</h3> </h3>
</div> </div>
@@ -93,7 +92,7 @@ export const EligibilityBlock: React.FC<EligibilityProps> = ({
<div className="w-10 h-10 rounded-xl bg-red-500/15 text-red-600 flex items-center justify-center shrink-0"> <div className="w-10 h-10 rounded-xl bg-red-500/15 text-red-600 flex items-center justify-center shrink-0">
<XCircle size={22} /> <XCircle size={22} />
</div> </div>
<h3 className="font-heading text-lg font-bold text-red-950 dark:text-red-200"> <h3 className="font-heading text-xl sm:text-2xl font-bold text-red-950 dark:text-red-200">
{excludedTitle} {excludedTitle}
</h3> </h3>
</div> </div>
+2 -2
View File
@@ -14,7 +14,7 @@ export const FAQTeaserBlock: React.FC<Props> = ({ title, questions, linkText })
<div className="font-mono text-sm md:text-base font-bold text-accent tracking-widest uppercase mb-4"> <div className="font-mono text-sm md:text-base font-bold text-accent tracking-widest uppercase mb-4">
// FAQ // FAQ
</div> </div>
<h2 className="font-heading text-4xl sm:text-5xl md:text-6xl font-extrabold text-foreground tracking-tight text-balance"> <h2 className="font-heading text-3xl sm:text-4xl md:text-5xl font-extrabold text-foreground tracking-tight text-balance">
{title} {title}
</h2> </h2>
</div> </div>
@@ -25,7 +25,7 @@ export const FAQTeaserBlock: React.FC<Props> = ({ title, questions, linkText })
key={q.id || index} key={q.id || index}
className="py-6 border-b border-border/50 first:border-t" className="py-6 border-b border-border/50 first:border-t"
> >
<h3 className="font-heading text-xl font-bold text-foreground mb-3">{q.question}</h3> <h3 className="font-heading text-xl sm:text-2xl font-bold text-foreground mb-3">{q.question}</h3>
<p className="text-foreground/75 leading-relaxed">{q.answer}</p> <p className="text-foreground/75 leading-relaxed">{q.answer}</p>
</div> </div>
))} ))}
+1 -1
View File
@@ -14,7 +14,7 @@ export const FinalCTABlock: React.FC<Props> = ({ title, subtitle, buttonText })
// Kontakt // Kontakt
</div> </div>
<h2 className="font-heading text-4xl sm:text-5xl md:text-6xl font-extrabold text-foreground tracking-tight mb-6 text-balance"> <h2 className="font-heading text-3xl sm:text-4xl md:text-5xl font-extrabold text-foreground tracking-tight mb-6 text-balance">
{title} {title}
</h2> </h2>
+3 -3
View File
@@ -63,8 +63,8 @@ export const HeroBlock: React.FC<Props> = ({ title, subtitle, primaryCta, second
<div className="container-premium relative z-10"> <div className="container-premium relative z-10">
<div className="max-w-4xl"> <div className="max-w-4xl">
{yearsOfExperience && ( {yearsOfExperience && (
<div className="text-accent/90 text-sm md:text-base font-bold tracking-[0.2em] uppercase mb-8"> <div className="font-mono text-sm md:text-base font-bold text-accent tracking-widest uppercase mb-4">
{yearsOfExperience} // {yearsOfExperience}
</div> </div>
)} )}
@@ -81,7 +81,7 @@ export const HeroBlock: React.FC<Props> = ({ title, subtitle, primaryCta, second
href={process.env.NEXT_PUBLIC_WHATSAPP_LINK || '#'} href={process.env.NEXT_PUBLIC_WHATSAPP_LINK || '#'}
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
className="px-10 py-5 bg-accent hover:bg-accent/90 text-background font-bold text-lg transition-colors flex items-center justify-center rounded-[var(--radius-button)]" className="px-8 py-4 bg-accent hover:bg-accent/90 text-background font-bold text-base sm:text-lg transition-colors flex items-center justify-center rounded-[var(--radius-button)]"
> >
{primaryCta} {primaryCta}
</a> </a>
+1 -1
View File
@@ -9,7 +9,7 @@ export const PageHeaderBlock: React.FC<PageHeaderProps> = ({ title, subtitle })
return ( return (
<section className="bg-card border-b border-border py-16 md:py-20 mb-12"> <section className="bg-card border-b border-border py-16 md:py-20 mb-12">
<div className="container-premium text-center max-w-4xl mx-auto"> <div className="container-premium text-center max-w-4xl mx-auto">
<h1 className="font-heading text-3xl sm:text-4xl md:text-5xl font-extrabold text-foreground tracking-tight leading-tight"> <h1 className="font-heading text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-extrabold text-foreground tracking-tight leading-tight text-balance">
{title} {title}
</h1> </h1>
{subtitle && ( {subtitle && (
+2 -2
View File
@@ -14,7 +14,7 @@ export const ProcessBlock: React.FC<Props> = ({ title, steps, ctaText }) => {
<div className="font-mono text-sm md:text-base font-bold text-accent tracking-widest uppercase mb-4"> <div className="font-mono text-sm md:text-base font-bold text-accent tracking-widest uppercase mb-4">
// Proces // Proces
</div> </div>
<h2 className="font-heading text-4xl sm:text-5xl md:text-6xl font-extrabold tracking-tight text-foreground mb-6 text-balance"> <h2 className="font-heading text-3xl sm:text-4xl md:text-5xl font-extrabold tracking-tight text-foreground mb-6 text-balance">
{title} {title}
</h2> </h2>
<p className="text-foreground/75 text-lg md:text-xl font-light leading-relaxed"> <p className="text-foreground/75 text-lg md:text-xl font-light leading-relaxed">
@@ -36,7 +36,7 @@ export const ProcessBlock: React.FC<Props> = ({ title, steps, ctaText }) => {
{stepNumber} {stepNumber}
</div> </div>
<div className="relative z-10 pt-2 border-t-2 border-transparent group-hover:border-accent transition-colors flex-1"> <div className="relative z-10 pt-2 border-t-2 border-transparent group-hover:border-accent transition-colors flex-1">
<h3 className="font-heading text-2xl md:text-3xl font-bold text-foreground mb-4"> <h3 className="font-heading text-xl sm:text-2xl font-bold text-foreground mb-4">
{step.title} {step.title}
</h3> </h3>
<p className="text-foreground/75 text-lg font-light leading-relaxed"> <p className="text-foreground/75 text-lg font-light leading-relaxed">
+5 -2
View File
@@ -40,7 +40,10 @@ export const ServicesDetailedBlock: React.FC<ServicesDetailedProps> = ({
<section className="py-12 md:py-16"> <section className="py-12 md:py-16">
<div className="container-premium"> <div className="container-premium">
<div className="max-w-3xl mb-12"> <div className="max-w-3xl mb-12">
<h2 className="font-heading text-2xl sm:text-3xl md:text-4xl font-bold text-foreground tracking-tight"> <div className="font-mono text-sm md:text-base font-bold text-accent tracking-widest uppercase mb-4">
// Usługi
</div>
<h2 className="font-heading text-3xl sm:text-4xl md:text-5xl font-extrabold text-foreground tracking-tight text-balance">
{title} {title}
</h2> </h2>
{subtitle && ( {subtitle && (
@@ -63,7 +66,7 @@ export const ServicesDetailedBlock: React.FC<ServicesDetailedProps> = ({
<div className="w-12 h-12 rounded-xl bg-accent/10 text-accent flex items-center justify-center mb-6"> <div className="w-12 h-12 rounded-xl bg-accent/10 text-accent flex items-center justify-center mb-6">
<Icon size={24} /> <Icon size={24} />
</div> </div>
<h3 className="font-heading text-xl font-bold text-foreground mb-3 leading-snug"> <h3 className="font-heading text-xl sm:text-2xl font-bold text-foreground mb-3 leading-snug">
{service.title} {service.title}
</h3> </h3>
<p className="text-foreground/75 text-sm sm:text-base leading-relaxed"> <p className="text-foreground/75 text-sm sm:text-base leading-relaxed">
+2 -2
View File
@@ -14,7 +14,7 @@ export const ServicesListBlock: React.FC<Props> = ({ title, services }) => {
<div className="font-mono text-sm md:text-base font-bold text-accent tracking-widest uppercase mb-4"> <div className="font-mono text-sm md:text-base font-bold text-accent tracking-widest uppercase mb-4">
// Usługi // Usługi
</div> </div>
<h2 className="font-heading text-4xl sm:text-5xl md:text-6xl font-extrabold text-foreground tracking-tight max-w-2xl text-balance"> <h2 className="font-heading text-3xl sm:text-4xl md:text-5xl font-extrabold text-foreground tracking-tight max-w-2xl text-balance">
{title} {title}
</h2> </h2>
</div> </div>
@@ -26,7 +26,7 @@ export const ServicesListBlock: React.FC<Props> = ({ title, services }) => {
className="group border-b border-border py-8 md:py-12 flex flex-col md:flex-row gap-6 md:gap-12 lg:gap-24 items-start md:items-center hover:bg-foreground/[0.02] transition-colors" className="group border-b border-border py-8 md:py-12 flex flex-col md:flex-row gap-6 md:gap-12 lg:gap-24 items-start md:items-center hover:bg-foreground/[0.02] transition-colors"
> >
<div className="md:w-1/3 shrink-0"> <div className="md:w-1/3 shrink-0">
<h3 className="font-heading text-2xl md:text-3xl font-bold text-foreground group-hover:text-accent transition-colors"> <h3 className="font-heading text-xl sm:text-2xl font-bold text-foreground group-hover:text-accent transition-colors">
{service.title} {service.title}
</h3> </h3>
</div> </div>
+1 -1
View File
@@ -24,7 +24,7 @@ export const StatsBlock: React.FC<StatsProps> = ({ title, subtitle, items }) =>
// Statystyki // Statystyki
</div> </div>
{title && ( {title && (
<h2 className="font-heading text-4xl sm:text-5xl md:text-6xl font-extrabold text-foreground mb-6 tracking-tight text-balance"> <h2 className="font-heading text-3xl sm:text-4xl md:text-5xl font-extrabold text-foreground mb-6 tracking-tight text-balance">
{title} {title}
</h2> </h2>
)} )}
+1 -1
View File
@@ -31,7 +31,7 @@ export const UniqueValueBlock: React.FC<Props> = ({ title, description }) => {
// Wartość // Wartość
</div> </div>
<h2 className="font-heading text-4xl sm:text-5xl md:text-6xl font-extrabold text-foreground tracking-tight mb-6 text-balance"> <h2 className="font-heading text-3xl sm:text-4xl md:text-5xl font-extrabold text-foreground tracking-tight mb-6 text-balance">
{title} {title}
</h2> </h2>