feat: add Unsplash photo placeholders, remove AI glow effects, and enable browser language detection
This commit is contained in:
MichalC
@@ -3,66 +3,82 @@ import React from 'react'
|
||||
import { motion } from 'framer-motion'
|
||||
import type { Page } from '../../payload-types'
|
||||
import Link from 'next/link'
|
||||
import Image from 'next/image'
|
||||
import { Shield, MessageCircle } from 'lucide-react'
|
||||
|
||||
type Props = Extract<NonNullable<Page['layout']>[0], { blockType: 'hero' }>
|
||||
|
||||
export const HeroBlock: React.FC<Props> = ({ title, subtitle, primaryCta, secondaryCta, yearsOfExperience }) => {
|
||||
return (
|
||||
<section className="relative overflow-hidden bg-background text-foreground py-24 lg:py-32">
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-accent/10 to-background z-0" />
|
||||
<div className="container mx-auto px-4 relative z-10 flex flex-col items-center text-center">
|
||||
<motion.h1
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6 }}
|
||||
className="text-4xl md:text-6xl font-bold mb-6 max-w-4xl"
|
||||
>
|
||||
{title}
|
||||
</motion.h1>
|
||||
|
||||
<motion.p
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6, delay: 0.1 }}
|
||||
className="text-xl md:text-2xl text-foreground/80 mb-10 max-w-2xl"
|
||||
>
|
||||
{subtitle}
|
||||
</motion.p>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6, delay: 0.2 }}
|
||||
className="flex flex-col sm:flex-row gap-4 mb-12"
|
||||
>
|
||||
<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-semibold rounded-lg transition-colors flex items-center justify-center gap-2"
|
||||
>
|
||||
{primaryCta}
|
||||
</a>
|
||||
{secondaryCta?.text && secondaryCta?.url && (
|
||||
<Link
|
||||
href={secondaryCta.url}
|
||||
className="px-8 py-4 bg-transparent border-2 border-border hover:border-foreground text-foreground font-semibold rounded-lg transition-colors"
|
||||
>
|
||||
{secondaryCta.text}
|
||||
</Link>
|
||||
)}
|
||||
</motion.div>
|
||||
<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>
|
||||
)}
|
||||
|
||||
{yearsOfExperience && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ duration: 0.6, delay: 0.4 }}
|
||||
className="text-sm text-foreground/60 uppercase tracking-widest"
|
||||
>
|
||||
{yearsOfExperience}
|
||||
</motion.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>
|
||||
</div>
|
||||
|
||||
{/* Kolumna ze zdjęciem */}
|
||||
<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">
|
||||
{/* PLACEHOLDER - do podmiany na realne zdjęcia klienta */}
|
||||
<Image
|
||||
src="https://images.unsplash.com/photo-1497366216548-37526070297c?auto=format&fit=crop&w=1200&q=80"
|
||||
alt="Biuro doradztwa podatkowego"
|
||||
fill
|
||||
priority
|
||||
sizes="(max-width: 1024px) 100vw, 50vw"
|
||||
className="object-cover"
|
||||
/>
|
||||
</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">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
|
||||
Reference in New Issue
Block a user