style: standardize alignment/spacing and add rich imagery to blocks
This commit is contained in:
MichalC
@@ -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>
|
||||
|
||||
@@ -8,13 +8,13 @@ type Props = Extract<NonNullable<Page['layout']>[0], { blockType: 'faqTeaser' }>
|
||||
|
||||
export const FAQTeaserBlock: React.FC<Props> = ({ title, questions, linkText }) => {
|
||||
return (
|
||||
<section className="py-20 md:py-24 bg-card/40 border-t border-border">
|
||||
<div className="container-premium max-w-4xl mx-auto">
|
||||
<div className="mb-12 text-center">
|
||||
<section className="py-20 md:py-32 bg-card/40 border-t border-border">
|
||||
<div className="container-premium">
|
||||
<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">
|
||||
// FAQ
|
||||
</div>
|
||||
<h2 className="font-heading text-3xl md:text-5xl font-extrabold text-foreground tracking-tight">
|
||||
<h2 className="font-heading text-4xl sm:text-5xl md:text-6xl font-extrabold text-foreground tracking-tight text-balance">
|
||||
{title}
|
||||
</h2>
|
||||
</div>
|
||||
@@ -32,7 +32,7 @@ export const FAQTeaserBlock: React.FC<Props> = ({ title, questions, linkText })
|
||||
</div>
|
||||
|
||||
{linkText && (
|
||||
<div className="text-center">
|
||||
<div className="mt-12">
|
||||
<Link href="/faq" className="inline-block text-accent font-semibold hover:text-accent-hover underline underline-offset-4">
|
||||
{linkText}
|
||||
</Link>
|
||||
|
||||
@@ -7,21 +7,22 @@ type Props = Extract<NonNullable<Page['layout']>[0], { blockType: 'finalCta' }>
|
||||
|
||||
export const FinalCTABlock: React.FC<Props> = ({ title, subtitle, buttonText }) => {
|
||||
return (
|
||||
<section className="py-20 md:py-28 bg-card border-y border-border text-center">
|
||||
<div className="container-premium max-w-3xl mx-auto">
|
||||
<div className="font-mono text-sm md:text-base font-bold text-accent tracking-widest uppercase mb-4">
|
||||
// Kontakt
|
||||
</div>
|
||||
<section className="py-20 md:py-32 bg-card border-y border-border text-left">
|
||||
<div className="container-premium">
|
||||
<div className="max-w-3xl">
|
||||
<div className="font-mono text-sm md:text-base font-bold text-accent tracking-widest uppercase mb-4">
|
||||
// Kontakt
|
||||
</div>
|
||||
|
||||
<h2 className="font-heading text-3xl sm:text-4xl md:text-5xl font-extrabold text-foreground tracking-tight mb-4 leading-tight">
|
||||
{title}
|
||||
</h2>
|
||||
<h2 className="font-heading text-4xl sm:text-5xl md:text-6xl font-extrabold text-foreground tracking-tight mb-6 text-balance">
|
||||
{title}
|
||||
</h2>
|
||||
|
||||
{subtitle && (
|
||||
<p className="text-base sm:text-lg md:text-xl text-foreground/75 mb-10 max-w-2xl mx-auto leading-relaxed">
|
||||
{subtitle}
|
||||
</p>
|
||||
)}
|
||||
{subtitle && (
|
||||
<p className="text-lg md:text-xl font-light text-foreground/75 mb-12 leading-relaxed">
|
||||
{subtitle}
|
||||
</p>
|
||||
)}
|
||||
|
||||
<div>
|
||||
<a
|
||||
@@ -34,6 +35,7 @@ export const FinalCTABlock: React.FC<Props> = ({ title, subtitle, buttonText })
|
||||
<span>{buttonText}</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
|
||||
@@ -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}
|
||||
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>
|
||||
<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>
|
||||
</div>
|
||||
</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" />
|
||||
{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>
|
||||
</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>
|
||||
)
|
||||
|
||||
@@ -10,7 +10,7 @@ export const ServicesListBlock: React.FC<Props> = ({ title, services }) => {
|
||||
return (
|
||||
<section className="py-20 md:py-32 bg-background text-foreground">
|
||||
<div className="container-premium">
|
||||
<div className="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">
|
||||
// Usługi
|
||||
</div>
|
||||
|
||||
@@ -19,17 +19,17 @@ export const StatsBlock: React.FC<StatsProps> = ({ title, subtitle, items }) =>
|
||||
<section className="py-20 md:py-32 bg-background border-y border-border">
|
||||
<div className="container-premium">
|
||||
{(title || subtitle) && (
|
||||
<div className="max-w-2xl mb-16">
|
||||
<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">
|
||||
// Statystyki
|
||||
</div>
|
||||
{title && (
|
||||
<h2 className="font-heading text-3xl sm:text-4xl md:text-5xl font-extrabold text-foreground mb-4 tracking-tight">
|
||||
<h2 className="font-heading text-4xl sm:text-5xl md:text-6xl font-extrabold text-foreground mb-6 tracking-tight text-balance">
|
||||
{title}
|
||||
</h2>
|
||||
)}
|
||||
{subtitle && (
|
||||
<p className="text-foreground/70 text-lg sm:text-xl leading-relaxed font-light">
|
||||
<p className="text-foreground/75 text-lg md:text-xl font-light leading-relaxed">
|
||||
{subtitle}
|
||||
</p>
|
||||
)}
|
||||
|
||||
@@ -20,37 +20,51 @@ export const TestimonialsBlock: React.FC<Props> = ({ title, testimonials }) => {
|
||||
if (!testimonials || testimonials.length === 0) return null
|
||||
|
||||
return (
|
||||
<section className="py-24 md:py-40 bg-background border-y border-border overflow-hidden">
|
||||
<div className="container-premium max-w-4xl mx-auto text-center relative">
|
||||
<h2 className="font-mono text-sm md:text-base font-bold text-accent tracking-widest uppercase mb-12">
|
||||
// {title}
|
||||
</h2>
|
||||
<section className="relative py-24 md:py-40 bg-background border-y border-border overflow-hidden">
|
||||
{/* Background Image */}
|
||||
<div className="absolute inset-0 z-0">
|
||||
<img
|
||||
src="https://images.unsplash.com/photo-1577415124269-fc1140a69e91?auto=format&fit=crop&w=2000&q=80"
|
||||
alt="Biuro, abstrakcyjne tło"
|
||||
className="object-cover w-full h-full grayscale opacity-20"
|
||||
/>
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-background via-background/90 to-background/40" />
|
||||
</div>
|
||||
|
||||
<div className="relative min-h-[300px] sm:min-h-[240px] flex items-center justify-center">
|
||||
<div className="container-premium relative z-10">
|
||||
<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">
|
||||
// {title}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="relative min-h-[300px] sm:min-h-[240px]">
|
||||
{testimonials.map((t: NonNullable<Props['testimonials']>[0], index: number) => (
|
||||
<div
|
||||
key={t.id || index}
|
||||
className={`absolute inset-0 flex flex-col items-center justify-center transition-opacity duration-1000 ease-in-out ${
|
||||
className={`absolute inset-0 flex flex-col items-start justify-start transition-opacity duration-1000 ease-in-out ${
|
||||
index === currentIndex ? 'opacity-100 z-10' : 'opacity-0 z-0 pointer-events-none'
|
||||
}`}
|
||||
>
|
||||
<p className="font-heading text-3xl sm:text-4xl md:text-5xl font-extrabold text-foreground leading-[1.2] mb-10 text-balance tracking-tight">
|
||||
"{t.quote}"
|
||||
<div className="font-heading text-8xl md:text-9xl text-accent/20 leading-none absolute -top-12 -left-6 md:-top-16 md:-left-10 select-none">
|
||||
"
|
||||
</div>
|
||||
<p className="relative z-10 font-heading text-3xl sm:text-4xl md:text-5xl font-extrabold text-foreground leading-[1.2] mb-10 text-balance tracking-tight max-w-4xl">
|
||||
{t.quote}
|
||||
</p>
|
||||
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="w-12 h-px bg-accent/40" />
|
||||
<div className="w-12 h-px bg-accent/60" />
|
||||
<p className="font-heading font-bold text-lg sm:text-xl text-foreground/80 uppercase tracking-wide">
|
||||
{t.author}
|
||||
</p>
|
||||
<div className="w-12 h-px bg-accent/40" />
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{testimonials.length > 1 && (
|
||||
<div className="flex items-center justify-center gap-3 mt-12">
|
||||
<div className="flex items-center gap-3 mt-16 md:mt-24">
|
||||
{testimonials.map((_, index) => (
|
||||
<button
|
||||
key={index}
|
||||
|
||||
@@ -18,7 +18,7 @@ export const TrustBarBlock: React.FC<Props> = ({ items }) => {
|
||||
|
||||
return (
|
||||
<section className="bg-background py-8 border-b border-border">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="container-premium">
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-6 text-center">
|
||||
{items.map((item: NonNullable<Props['items']>[0], index: number) => {
|
||||
const Icon = item.icon ? iconMap[item.icon as keyof typeof iconMap] : CheckCircle
|
||||
|
||||
@@ -8,39 +8,38 @@ type Props = Extract<NonNullable<Page['layout']>[0], { blockType: 'uniqueValue'
|
||||
|
||||
export const UniqueValueBlock: React.FC<Props> = ({ title, description }) => {
|
||||
return (
|
||||
<section className="py-16 md:py-24 bg-card/60 border-y border-border">
|
||||
<section className="py-20 md:py-32 bg-card/60 border-y border-border">
|
||||
<div className="container-premium">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-12 gap-10 lg:gap-16 items-center">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-12 gap-16 lg:gap-24 items-center">
|
||||
{/* Kolumna ze zdjęciem */}
|
||||
<div className="lg:col-span-5 order-2 lg:order-1">
|
||||
<div className="relative aspect-[4/3] rounded-2xl overflow-hidden border border-border shadow-sm bg-card">
|
||||
<div className="relative aspect-[4/5] overflow-hidden border border-border">
|
||||
{/* PLACEHOLDER - do podmiany na realne zdjęcia klienta */}
|
||||
<Image
|
||||
src="https://images.unsplash.com/photo-1450133064473-71024230f91b?auto=format&fit=crop&w=1000&q=80"
|
||||
alt="Dokumenty i profesjonalne doradztwo podatkowe"
|
||||
fill
|
||||
sizes="(max-width: 1024px) 100vw, 40vw"
|
||||
className="object-cover"
|
||||
className="object-cover grayscale hover:grayscale-0 transition-all duration-700"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Kolumna tekstowa */}
|
||||
<div className="lg:col-span-7 order-1 lg:order-2 flex flex-col items-start">
|
||||
<div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-accent/10 text-accent text-xs font-semibold uppercase tracking-wider mb-4">
|
||||
<CheckCircle size={15} />
|
||||
<span>Komfort i pewność</span>
|
||||
<div className="lg:col-span-7 order-1 lg:order-2 flex flex-col items-start max-w-3xl">
|
||||
<div className="font-mono text-sm md:text-base font-bold text-accent tracking-widest uppercase mb-4">
|
||||
// Wartość
|
||||
</div>
|
||||
|
||||
<h2 className="font-heading text-2xl sm:text-3xl md:text-4xl font-bold text-foreground tracking-tight mb-5 leading-snug">
|
||||
<h2 className="font-heading text-4xl sm:text-5xl md:text-6xl font-extrabold text-foreground tracking-tight mb-6 text-balance">
|
||||
{title}
|
||||
</h2>
|
||||
|
||||
<p className="text-foreground/80 text-base sm:text-lg leading-relaxed mb-6">
|
||||
<p className="text-foreground/75 text-lg md:text-xl font-light leading-relaxed mb-12">
|
||||
{description}
|
||||
</p>
|
||||
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4 w-full pt-4 border-t border-border/60 text-sm">
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-6 w-full pt-6 border-t border-border/60 text-base">
|
||||
<div className="flex items-center gap-2.5 text-foreground/80 font-medium">
|
||||
<span className="w-2 h-2 rounded-full bg-accent" />
|
||||
<span>Bez barier językowych</span>
|
||||
|
||||
Reference in New Issue
Block a user