feat: radical premium redesign removing AI slop (full bleed hero, open layouts, editorial typography)
This commit is contained in:
MichalC
@@ -3,22 +3,22 @@ import React, { useState, useEffect } from 'react'
|
||||
import type { Page } from '../../payload-types'
|
||||
import Link from 'next/link'
|
||||
import Image from 'next/image'
|
||||
import { Shield, MessageCircle } from 'lucide-react'
|
||||
import { ArrowRight } from 'lucide-react'
|
||||
|
||||
type Props = Extract<NonNullable<Page['layout']>[0], { blockType: 'hero' }>
|
||||
|
||||
/* PLACEHOLDER - do podmiany na realne zdjęcia klienta */
|
||||
const heroImages = [
|
||||
{
|
||||
url: 'https://images.unsplash.com/photo-1554224155-8d04cb21cd6c?auto=format&fit=crop&w=1200&q=80',
|
||||
url: 'https://images.unsplash.com/photo-1554224155-8d04cb21cd6c?auto=format&fit=crop&w=2000&q=80',
|
||||
alt: 'Dokumenty podatkowe i praca biurowa',
|
||||
},
|
||||
{
|
||||
url: 'https://images.unsplash.com/photo-1497366216548-37526070297c?auto=format&fit=crop&w=1200&q=80',
|
||||
url: 'https://images.unsplash.com/photo-1497366216548-37526070297c?auto=format&fit=crop&w=2000&q=80',
|
||||
alt: 'Profesjonalne biuro doradztwa podatkowego',
|
||||
},
|
||||
{
|
||||
url: 'https://images.unsplash.com/photo-1486312338219-ce68d2c6f44d?auto=format&fit=crop&w=1200&q=80',
|
||||
url: 'https://images.unsplash.com/photo-1486312338219-ce68d2c6f44d?auto=format&fit=crop&w=2000&q=80',
|
||||
alt: 'Praca z rozliczeniami podatkowymi',
|
||||
},
|
||||
]
|
||||
@@ -29,101 +29,71 @@ export const HeroBlock: React.FC<Props> = ({ title, subtitle, primaryCta, second
|
||||
useEffect(() => {
|
||||
const timer = setInterval(() => {
|
||||
setCurrentSlide((prev) => (prev + 1) % heroImages.length)
|
||||
}, 5000)
|
||||
}, 6000)
|
||||
return () => clearInterval(timer)
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<section className="relative bg-background text-foreground py-16 md:py-24 border-b border-border/60">
|
||||
<div className="container-premium">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-12 gap-12 lg:gap-8 items-center">
|
||||
{/* Kolumna tekstowa */}
|
||||
<div className="lg:col-span-7 flex flex-col items-start text-left">
|
||||
{yearsOfExperience && (
|
||||
<div className="inline-flex items-center gap-2 px-3.5 py-1.5 rounded-full bg-accent/10 border border-accent/20 text-accent text-xs sm:text-sm font-semibold tracking-wide mb-6">
|
||||
<Shield size={16} />
|
||||
<span>{yearsOfExperience}</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<h1 className="font-heading text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-extrabold tracking-tight leading-[1.15] text-foreground mb-6">
|
||||
{title}
|
||||
</h1>
|
||||
|
||||
<p className="text-lg sm:text-xl text-foreground/75 mb-8 leading-relaxed max-w-2xl">
|
||||
{subtitle}
|
||||
</p>
|
||||
|
||||
<div className="flex flex-col sm:flex-row gap-4 w-full sm:w-auto">
|
||||
<a
|
||||
href={process.env.NEXT_PUBLIC_WHATSAPP_LINK || '#'}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="px-8 py-4 bg-green-500 hover:bg-green-600 text-white font-bold rounded-xl transition-all flex items-center justify-center gap-2.5 shadow-sm text-base"
|
||||
>
|
||||
<MessageCircle size={20} />
|
||||
<span>{primaryCta}</span>
|
||||
</a>
|
||||
{secondaryCta?.text && secondaryCta?.url && (
|
||||
<Link
|
||||
href={secondaryCta.url}
|
||||
className="px-8 py-4 bg-card hover:bg-accent/5 border border-border text-foreground font-semibold rounded-xl transition-colors text-center text-base"
|
||||
>
|
||||
{secondaryCta.text}
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
<section className="relative w-full min-h-[90vh] flex items-end bg-background text-foreground pb-20 md:pb-32 pt-40">
|
||||
{/* Pełnoekranowe tło ze sliderem */}
|
||||
<div className="absolute inset-0 z-0 overflow-hidden">
|
||||
{heroImages.map((img, idx) => (
|
||||
<div
|
||||
key={idx}
|
||||
className={`absolute inset-0 transition-opacity duration-1000 ease-in-out ${
|
||||
idx === currentSlide ? 'opacity-100' : 'opacity-0 pointer-events-none'
|
||||
}`}
|
||||
>
|
||||
{/* PLACEHOLDER - do podmiany na realne zdjęcia klienta */}
|
||||
<Image
|
||||
src={img.url}
|
||||
alt={img.alt}
|
||||
fill
|
||||
priority={idx === 0}
|
||||
sizes="100vw"
|
||||
className="object-cover object-center"
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
{/* Potężny, gładki overlay z koloru tła aplikacji od dołu i od lewej, dla idealnej czytelności */}
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-background via-background/80 to-transparent" />
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-background via-background/40 to-transparent" />
|
||||
</div>
|
||||
|
||||
{/* Kolumna ze sliderem zdjęć */}
|
||||
<div className="lg:col-span-5 relative">
|
||||
<div className="relative mx-auto max-w-md lg:max-w-none">
|
||||
<div className="relative aspect-[4/3] sm:aspect-[5/4] rounded-2xl overflow-hidden border border-border shadow-md bg-card">
|
||||
{heroImages.map((img, idx) => (
|
||||
<div
|
||||
key={idx}
|
||||
className={`absolute inset-0 transition-opacity duration-700 ease-in-out ${
|
||||
idx === currentSlide ? 'opacity-100 z-10' : 'opacity-0 z-0 pointer-events-none'
|
||||
}`}
|
||||
>
|
||||
{/* PLACEHOLDER - do podmiany na realne zdjęcia klienta */}
|
||||
<Image
|
||||
src={img.url}
|
||||
alt={img.alt}
|
||||
fill
|
||||
priority={idx === 0}
|
||||
sizes="(max-width: 1024px) 100vw, 50vw"
|
||||
className="object-cover"
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
|
||||
{/* Kropki nawigacji slidera */}
|
||||
<div className="absolute bottom-3 right-3 z-20 flex items-center gap-1.5 bg-background/80 backdrop-blur-md px-2.5 py-1 rounded-full border border-border/80">
|
||||
{heroImages.map((_, idx) => (
|
||||
<button
|
||||
key={idx}
|
||||
onClick={() => setCurrentSlide(idx)}
|
||||
className={`w-2 h-2 rounded-full transition-all ${
|
||||
idx === currentSlide ? 'bg-accent w-4' : 'bg-foreground/30 hover:bg-foreground/60'
|
||||
}`}
|
||||
aria-label={`Przejdź do zdjęcia ${idx + 1}`}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Subtelna plakietka informacyjna */}
|
||||
<div className="absolute -bottom-5 -left-4 sm:left-6 bg-card/95 backdrop-blur-sm border border-border rounded-xl p-4 shadow-lg flex items-center gap-3.5 max-w-xs z-30">
|
||||
<div className="w-10 h-10 rounded-lg bg-accent text-white font-bold font-heading flex items-center justify-center shrink-0">
|
||||
JK
|
||||
</div>
|
||||
<div className="text-xs">
|
||||
<p className="font-bold text-foreground">Punkt Doradczy b.b.h.</p>
|
||||
<p className="text-foreground/60">Lohnsteuerhilfeverein e.V.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="container-premium relative z-10">
|
||||
<div className="max-w-4xl">
|
||||
{yearsOfExperience && (
|
||||
<div className="text-accent/90 text-sm md:text-base font-bold tracking-[0.2em] uppercase mb-8">
|
||||
{yearsOfExperience}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<h1 className="font-heading text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-extrabold tracking-tight leading-[1.05] text-foreground mb-8 text-balance">
|
||||
{title}
|
||||
</h1>
|
||||
|
||||
<p className="text-xl sm:text-2xl text-foreground/80 mb-12 leading-relaxed max-w-2xl font-light">
|
||||
{subtitle}
|
||||
</p>
|
||||
|
||||
<div className="flex flex-col sm:flex-row items-start sm:items-center gap-8">
|
||||
<a
|
||||
href={process.env.NEXT_PUBLIC_WHATSAPP_LINK || '#'}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="px-10 py-5 bg-accent hover:bg-accent/90 text-background font-bold text-lg transition-colors flex items-center justify-center"
|
||||
>
|
||||
{primaryCta}
|
||||
</a>
|
||||
{secondaryCta?.text && secondaryCta?.url && (
|
||||
<Link
|
||||
href={secondaryCta.url}
|
||||
className="group flex items-center gap-3 text-foreground font-semibold text-lg hover:text-accent transition-colors"
|
||||
>
|
||||
<span>{secondaryCta.text}</span>
|
||||
<ArrowRight className="w-5 h-5 group-hover:translate-x-1 transition-transform" />
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user