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/Affiliation/Component.tsx
+31 -16
View File
@@ -8,28 +8,43 @@ type Props = Extract<NonNullable<Page['layout']>[0], { blockType: 'affiliation'
export const AffiliationBlock: React.FC<Props> = ({ title, description, logo, linkText }) => {
return (
<section className="py-20 md:py-24 bg-background border-t border-border">
<div className="container mx-auto px-4 max-w-4xl">
<div className="flex flex-col md:flex-row items-center gap-12 lg:gap-20">
<div className="flex-1 text-center md:text-left">
<section className="py-20 md:py-32 bg-background border-t border-border overflow-hidden">
<div className="container-premium">
<div className="grid grid-cols-1 lg:grid-cols-2 gap-16 lg:gap-24 items-center">
<div className="max-w-3xl">
<div className="font-mono text-sm md:text-base font-bold text-accent tracking-widest uppercase mb-4">
// Zaufanie
</div>
<h2 className="font-heading text-3xl sm:text-4xl md:text-5xl font-extrabold tracking-tight text-foreground mb-6 text-balance">
<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/75 text-lg font-light leading-relaxed mb-8">{description}</p>
{linkText && (
<Link href="/stowarzyszenie" className="text-accent font-semibold hover:text-accent-hover underline underline-offset-4">
{linkText}
</Link>
)}
</div>
{logo && typeof logo === 'object' && logo.url && (
<div className="w-48 shrink-0 flex items-center justify-center">
<img src={logo.url} alt={logo.alt || "Logo stowarzyszenia"} className="max-w-full h-auto grayscale hover:grayscale-0 transition-all duration-300" />
<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>
<div className="relative aspect-[4/3] lg:aspect-square w-full bg-card overflow-hidden">
{/* PLACEHOLDER - do podmiany na realne zdjęcia klienta */}
<img
src="https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?auto=format&fit=crop&w=1200&q=80"
alt="Budynek urzędu, formalna architektura"
className="object-cover w-full h-full grayscale opacity-80 hover:grayscale-0 hover:opacity-100 transition-all duration-700"
/>
<div className="absolute inset-0 bg-gradient-to-t from-background via-background/40 to-transparent pointer-events-none" />
</div>
</div>
</div>
</section>