feat: radical premium redesign removing AI slop (full bleed hero, open layouts, editorial typography)
This commit is contained in:
@@ -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>
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user