62 lines
2.5 KiB
TypeScript
62 lines
2.5 KiB
TypeScript
'use client'
|
|
import React from 'react'
|
|
|
|
import { Landmark, Scale, ShieldCheck } from 'lucide-react'
|
|
import Link from 'next/link'
|
|
import type { Page } from '../../payload-types'
|
|
|
|
type Props = Extract<NonNullable<Page['layout']>[0], { blockType: 'affiliation' }>
|
|
|
|
const iconMap = {
|
|
shield: ShieldCheck,
|
|
scale: Scale,
|
|
landmark: Landmark,
|
|
}
|
|
|
|
export const AffiliationBlock: React.FC<Props> = ({ eyebrow, title, description, logo, linkText, trustPoints }) => {
|
|
return (
|
|
<section className="py-20 md:py-32 bg-background border-t border-border overflow-hidden">
|
|
<div className="container-premium">
|
|
<div className="flex flex-col gap-16 lg:gap-24">
|
|
<div className="max-w-3xl">
|
|
<h2 className="font-heading text-3xl sm:text-4xl md:text-5xl font-extrabold tracking-tight text-foreground mb-6 text-balance">
|
|
{title}
|
|
</h2>
|
|
<p className="text-foreground/75 text-lg md:text-xl font-light leading-relaxed mb-12 max-w-xl">
|
|
{description}
|
|
</p>
|
|
|
|
<div className="flex flex-col sm:flex-row items-start sm:items-center gap-8">
|
|
{logo && typeof logo === 'object' && logo.url && (
|
|
<div className="w-40 shrink-0">
|
|
<img src={logo.url} alt={logo.alt || "Logo stowarzyszenia"} className="max-w-full h-auto grayscale hover:grayscale-0 transition-all duration-300" />
|
|
</div>
|
|
)}
|
|
{linkText && (
|
|
<Link href="/stowarzyszenie" className="text-accent font-semibold text-lg hover:text-accent-hover underline underline-offset-4">
|
|
{linkText}
|
|
</Link>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{trustPoints && trustPoints.length > 0 && (
|
|
<div className="grid grid-cols-1 sm:grid-cols-3 gap-6">
|
|
{trustPoints.map((point: any, index: number) => {
|
|
const Icon = (point.icon && iconMap[point.icon as keyof typeof iconMap]) || ShieldCheck
|
|
return (
|
|
<div key={point.id || index} className="bg-card border border-border p-6 md:p-8 flex flex-col gap-4">
|
|
<Icon size={28} className="text-accent" />
|
|
<h3 className="font-heading text-xl font-bold text-foreground">{point.title}</h3>
|
|
<p className="text-sm text-foreground/70 leading-relaxed">{point.description}</p>
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|