feat: radical premium redesign removing AI slop (full bleed hero, open layouts, editorial typography)

This commit is contained in:
MichalC
2026-09-01 23:33:43 +02:00
parent 441ae8f272
commit afc27b0183
5 changed files with 180 additions and 197 deletions
+10 -9
View File
@@ -1,3 +1,4 @@
'use client'
import React from 'react'
export interface StatsProps {
@@ -15,37 +16,37 @@ export const StatsBlock: React.FC<StatsProps> = ({ title, subtitle, items }) =>
if (!items || items.length === 0) return null
return (
<section className="py-16 md:py-20 bg-card border-y border-border">
<section className="py-20 md:py-32 bg-background border-y border-border">
<div className="container-premium">
{(title || subtitle) && (
<div className="max-w-2xl mx-auto text-center mb-12">
<div className="max-w-2xl mb-16">
{title && (
<h2 className="font-heading text-2xl sm:text-3xl font-bold text-foreground mb-3">
<h2 className="font-heading text-3xl sm:text-4xl md:text-5xl font-extrabold text-foreground mb-4 tracking-tight">
{title}
</h2>
)}
{subtitle && (
<p className="text-foreground/70 text-sm sm:text-base leading-relaxed">
<p className="text-foreground/70 text-lg sm:text-xl leading-relaxed font-light">
{subtitle}
</p>
)}
</div>
)}
<div className="grid grid-cols-1 md:grid-cols-3 gap-8 md:gap-12">
<div className="grid grid-cols-1 md:grid-cols-3 border-t border-l border-border mt-12">
{items.map((item, index) => (
<div
key={item.id || index}
className="flex flex-col items-center text-center p-6 rounded-2xl bg-background/50 border border-border/80 shadow-xs"
className="flex flex-col p-8 sm:p-12 border-b border-r border-border hover:bg-foreground/[0.02] transition-colors"
>
<div className="font-heading text-4xl sm:text-5xl lg:text-6xl font-extrabold text-accent mb-2 tracking-tight">
<div className="font-heading text-5xl lg:text-7xl font-extrabold text-accent mb-4 tracking-tighter">
{item.stat}
</div>
<div className="font-heading text-lg sm:text-xl font-bold text-foreground mb-1.5">
<div className="font-heading text-xl font-bold text-foreground mb-2">
{item.label}
</div>
{item.description && (
<p className="text-sm text-foreground/70 leading-relaxed max-w-xs">
<p className="text-base text-foreground/70 leading-relaxed font-light">
{item.description}
</p>
)}