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

style: standardize alignment/spacing and add rich imagery to blocks

Browse Source
This commit is contained in:
MichalC
2026-09-01 23:44:10 +02:00
parent 19caeca637
commit d2592ffeca
9 changed files with 140 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/blocks/Process/Component.tsx
+48 -39
View File
@@ -10,59 +10,68 @@ export const ProcessBlock: React.FC<Props> = ({ title, steps, ctaText }) => {
return (
<section className="py-20 md:py-32 bg-background text-foreground overflow-hidden">
<div className="container-premium">
<div className="max-w-2xl mb-16 md:mb-24">
<div className="max-w-3xl mb-16 md:mb-24">
<div className="font-mono text-sm md:text-base font-bold text-accent tracking-widest uppercase mb-4">
// Proces
</div>
<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-lg md:text-xl font-light">
<p className="text-foreground/75 text-lg md:text-xl font-light leading-relaxed">
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-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" />
<div className="grid grid-cols-1 lg:grid-cols-2 gap-16 lg:gap-24 items-center">
<div className="flex flex-col gap-16">
{steps?.map((step: NonNullable<Props['steps']>[0], index: number) => {
const stepNumber = String(index + 1).padStart(2, '0')
{steps?.map((step: NonNullable<Props['steps']>[0], index: number) => {
const stepNumber = String(index + 1).padStart(2, '0')
return (
<div
key={step.id || index}
className="relative flex flex-col group"
>
<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-lg font-light leading-relaxed">
{step.description}
</p>
return (
<div
key={step.id || index}
className="relative flex flex-col sm:flex-row gap-6 group"
>
<div className="font-heading text-6xl md:text-7xl font-black text-foreground/5 tracking-tighter leading-none sm:-mt-2 group-hover:text-accent/10 transition-colors shrink-0">
{stepNumber}
</div>
<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">
{step.title}
</h3>
<p className="text-foreground/75 text-lg font-light leading-relaxed">
{step.description}
</p>
</div>
</div>
)
})}
{ctaText && (
<div className="mt-4">
<Link
href="/jak-sie-umowic"
className="inline-flex items-center gap-4 text-foreground font-semibold text-lg hover:text-accent transition-colors group"
>
<span>{ctaText}</span>
<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>
)
})}
</div>
{ctaText && (
<div>
<Link
href="/jak-sie-umowic"
className="inline-flex items-center gap-4 text-foreground font-semibold text-lg hover:text-accent transition-colors group"
>
<span>{ctaText}</span>
<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>
)}
<div className="relative aspect-[4/5] w-full bg-card rounded-none overflow-hidden">
{/* PLACEHOLDER - do podmiany na realne zdjęcia klienta */}
<img
src="https://images.unsplash.com/photo-1611162617474-5b21e879e113?auto=format&fit=crop&w=1200&q=80"
alt="Osoba pisząca wiadomość na smartfonie, kontakt WhatsApp"
className="object-cover w-full h-full grayscale hover:grayscale-0 transition-all duration-700"
/>
<div className="absolute inset-0 bg-gradient-to-t from-background/80 to-transparent mix-blend-multiply pointer-events-none" />
</div>
</div>
</div>
</section>
)