77 lines
3.2 KiB
TypeScript
77 lines
3.2 KiB
TypeScript
'use client'
|
|
import React from 'react'
|
|
import type { Page, Media } from '../../payload-types'
|
|
import Image from 'next/image'
|
|
import { ArrowLink } from '../../components/ArrowLink'
|
|
|
|
type Props = Extract<NonNullable<Page['layout']>[0], { blockType: 'process' }>
|
|
|
|
export const ProcessBlock: React.FC<Props> = ({ subtitle, title, steps, ctaText, ctaUrl, image }) => {
|
|
const processMedia = typeof image === 'object' && image !== null ? (image as Media) : null;
|
|
const imageUrl = processMedia?.url || 'https://images.unsplash.com/photo-1611162617474-5b21e879e113?auto=format&fit=crop&w=1200&q=80';
|
|
const imageAlt = processMedia?.alt || 'Proces współpracy';
|
|
|
|
return (
|
|
<section id="jak-to-dziala" className="py-20 md:py-32 bg-background text-foreground overflow-hidden">
|
|
<div className="container-premium">
|
|
<div className="max-w-3xl mb-16 md:mb-24">
|
|
<h2 className="font-heading text-3xl sm:text-4xl md:text-5xl font-extrabold tracking-tight text-foreground mb-6 text-balance">
|
|
{title}
|
|
</h2>
|
|
{subtitle && (
|
|
<p className="text-foreground/75 text-lg md:text-xl font-light leading-relaxed">
|
|
{subtitle}
|
|
</p>
|
|
)}
|
|
</div>
|
|
|
|
<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')
|
|
|
|
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-xl sm:text-2xl 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">
|
|
<ArrowLink href={ctaUrl || '#'}>
|
|
{ctaText}
|
|
</ArrowLink>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div className="relative aspect-[4/5] w-full bg-card rounded-none overflow-hidden">
|
|
<Image
|
|
src={imageUrl}
|
|
alt={imageAlt}
|
|
fill
|
|
sizes="(max-width: 1024px) 100vw, 50vw"
|
|
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>
|
|
)
|
|
}
|