michal.cukrowski/j_kedzierski
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files
src/blocks/Process/Component.tsx
+20 -15
View File
@@ -8,34 +8,37 @@ type Props = Extract<NonNullable<Page['layout']>[0], { blockType: 'process' }>
export const ProcessBlock: React.FC<Props> = ({ title, steps, ctaText }) => {
return (
<section className="py-20 md:py-28 bg-background text-foreground border-t border-border">
<section className="py-20 md:py-32 bg-background text-foreground overflow-hidden">
<div className="container-premium">
<div className="max-w-2xl mx-auto text-center mb-16">
<h2 className="font-heading text-3xl sm:text-4xl md:text-5xl font-bold tracking-tight text-foreground mb-4">
<div className="max-w-2xl mb-16 md:mb-24">
<h2 className="font-heading text-4xl sm:text-5xl md:text-6xl font-extrabold tracking-tight text-foreground mb-6 text-balance">
{title}
</h2>
<p className="text-foreground/70 text-base sm:text-lg">
<p className="text-foreground/70 text-lg md:text-xl font-light">
Prosty i przejrzysty proces rozliczenia w 3 krokach — bez zbędnych formalności.
</p>
</div>
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 md:gap-8 mb-12">
<div className="grid grid-cols-1 md:grid-cols-3 gap-16 md:gap-8 mb-20 relative">
{/* Opcjonalna pozioma linia łącząca na desktopie (bardzo subtelna) */}
<div className="hidden md:block absolute top-[4.5rem] left-0 right-0 h-px bg-border/40 -z-10" />
{steps?.map((step: NonNullable<Props['steps']>[0], index: number) => {
const stepNumber = String(index + 1).padStart(2, '0')
return (
<div
key={step.id || index}
className="bg-card border border-border rounded-2xl p-6 sm:p-8 shadow-xs flex flex-col justify-between hover:border-accent/40 transition-colors"
className="relative flex flex-col group"
>
<div>
<div className="font-heading text-3xl font-extrabold text-accent/80 mb-4">
{stepNumber}
</div>
<h3 className="font-heading text-xl font-bold text-foreground mb-3 leading-snug">
<div className="font-heading text-7xl md:text-8xl lg:text-[10rem] font-black text-foreground/5 tracking-tighter leading-none mb-4 -ml-2 group-hover:text-accent/10 transition-colors">
{stepNumber}
</div>
<div className="relative z-10 pt-4 border-t-2 border-transparent group-hover:border-accent transition-colors">
<h3 className="font-heading text-2xl md:text-3xl font-bold text-foreground mb-4">
{step.title}
</h3>
<p className="text-foreground/75 text-sm sm:text-base leading-relaxed">
<p className="text-foreground/75 text-lg font-light leading-relaxed">
{step.description}
</p>
</div>
@@ -45,13 +48,15 @@ export const ProcessBlock: React.FC<Props> = ({ title, steps, ctaText }) => {
</div>
{ctaText && (
<div className="text-center">
<div>
<Link
href="/jak-sie-umowic"
className="inline-flex items-center gap-2 px-8 py-4 bg-card hover:bg-accent/5 border border-border hover:border-foreground/40 rounded-xl text-foreground font-semibold text-base transition-colors"
className="inline-flex items-center gap-4 text-foreground font-semibold text-lg hover:text-accent transition-colors group"
>
<span>{ctaText}</span>
<ArrowRight size={18} />
<div className="w-10 h-10 rounded-full border border-border flex items-center justify-center group-hover:border-accent transition-colors">
<ArrowRight className="w-4 h-4 group-hover:translate-x-0.5 transition-transform" />
</div>
</Link>
</div>
)}