Fix FAQFull: Use isDraft boolean for draft filtering, fix Kontakt ID override
This commit is contained in:
MichalC
@@ -4,8 +4,10 @@ import { motion } from 'framer-motion'
|
||||
import type { Page, Media } from '../../payload-types'
|
||||
import Link from 'next/link'
|
||||
import Image from 'next/image'
|
||||
import { ImageIcon } from 'lucide-react'
|
||||
|
||||
type Props = Extract<NonNullable<Page['layout']>[0], { blockType: 'hero' }>
|
||||
type BaseProps = Extract<NonNullable<Page['layout']>[0], { blockType: 'hero' }>
|
||||
type Props = BaseProps & { whatsappNumber?: string | null }
|
||||
|
||||
const customEase = [0.22, 1, 0.36, 1] as const
|
||||
|
||||
@@ -90,10 +92,14 @@ export const HeroBlock: React.FC<Props> = ({
|
||||
image,
|
||||
imageSecondary,
|
||||
floatingStat,
|
||||
whatsappNumber,
|
||||
}) => {
|
||||
const [imagesLoaded, setImagesLoaded] = useState(false)
|
||||
const whatsappLink = whatsappNumber ? `https://wa.me/${whatsappNumber}` : '#'
|
||||
|
||||
const heroMedia = typeof image === 'object' && image !== null ? (image as Media) : null
|
||||
const imageUrl = heroMedia?.url || 'https://images.unsplash.com/photo-1554224155-8d04cb21cd6c?auto=format&fit=crop&w=1200&q=80'
|
||||
const imageAlt = heroMedia?.alt || 'Doradztwo podatkowe - biuro'
|
||||
const imageUrl = heroMedia?.url
|
||||
const imageAlt = heroMedia?.alt || ''
|
||||
|
||||
const secondaryMedia = typeof imageSecondary === 'object' && imageSecondary !== null ? (imageSecondary as Media) : null
|
||||
const secondaryUrl = secondaryMedia?.url
|
||||
@@ -109,7 +115,7 @@ export const HeroBlock: React.FC<Props> = ({
|
||||
initial="hidden"
|
||||
animate="visible"
|
||||
variants={containerVariants}
|
||||
className="w-full bg-background text-foreground min-h-[calc(100svh-6rem)] flex items-center py-12 lg:py-0 overflow-hidden"
|
||||
className="w-full bg-paper-noise text-foreground min-h-[calc(100svh-6rem)] flex items-center py-12 lg:py-0 overflow-hidden"
|
||||
>
|
||||
<div className="container-premium w-full">
|
||||
<div className="flex flex-col-reverse lg:flex-row items-center justify-between gap-14 lg:gap-20">
|
||||
@@ -118,15 +124,21 @@ export const HeroBlock: React.FC<Props> = ({
|
||||
<div className="w-full lg:w-1/2 max-w-xl flex flex-col">
|
||||
<motion.h1
|
||||
variants={itemVariants}
|
||||
className="font-heading text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-bold leading-[1.05] mb-8 text-balance"
|
||||
className="font-heading text-4xl sm:text-5xl md:text-6xl font-bold leading-tight mb-8 text-balance"
|
||||
>
|
||||
<span className="block text-foreground">{title}</span>
|
||||
{titleAccent && <span className="block text-accent">{titleAccent}</span>}
|
||||
{titleAccent && (
|
||||
<span className="block text-accent">
|
||||
{titleAccent.split(/(po polsku)/i).map((part, i) =>
|
||||
part.toLowerCase() === 'po polsku' ? <i key={i} className="italic font-medium">{part}</i> : part
|
||||
)}
|
||||
</span>
|
||||
)}
|
||||
</motion.h1>
|
||||
|
||||
<motion.p
|
||||
variants={itemVariants}
|
||||
className="text-xl sm:text-2xl text-foreground/80 mb-12 leading-relaxed font-light"
|
||||
className="text-xl sm:text-2xl text-foreground/80 mb-12 leading-relaxed font-light max-w-[65ch]"
|
||||
>
|
||||
{subtitle}
|
||||
</motion.p>
|
||||
@@ -135,14 +147,16 @@ export const HeroBlock: React.FC<Props> = ({
|
||||
variants={itemVariants}
|
||||
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-8 py-4 bg-green-500 hover:bg-green-600 text-white font-bold text-base sm:text-lg transition-colors flex items-center justify-center rounded-none shadow-sm cursor-pointer"
|
||||
>
|
||||
{primaryCta}
|
||||
</a>
|
||||
{whatsappNumber && (
|
||||
<a
|
||||
href={whatsappLink}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="px-8 py-4 bg-[#25D366] hover:bg-[#20bd5a] text-[#1C1B1A] font-bold text-base sm:text-lg transition-colors flex items-center justify-center rounded-none shadow-sm cursor-pointer"
|
||||
>
|
||||
{primaryCta}
|
||||
</a>
|
||||
)}
|
||||
{secondaryCta?.text && secondaryCta?.url && (
|
||||
secondaryCta.url.startsWith('#') ? (
|
||||
<a
|
||||
@@ -191,40 +205,55 @@ export const HeroBlock: React.FC<Props> = ({
|
||||
/* Układ kolażu dwóch nachodzących na siebie zdjęć */
|
||||
<div className="relative w-full aspect-[4/5] sm:aspect-[1/1] pt-6 pl-4">
|
||||
{/* Zdjęcie 1 (mniejsze, przesunięte w lewo-górę) */}
|
||||
<div className="absolute top-2 left-0 w-[62%] aspect-[4/5] border border-border shadow-sm overflow-hidden z-10">
|
||||
<Image
|
||||
src={imageUrl}
|
||||
alt={imageAlt}
|
||||
fill
|
||||
priority
|
||||
sizes="(max-width: 1024px) 55vw, 25vw"
|
||||
className="object-cover object-center grayscale hover:grayscale-0 transition-all duration-700"
|
||||
/>
|
||||
<div className="absolute top-2 left-0 w-[62%] aspect-[4/5] border border-border shadow-sm overflow-hidden z-10 bg-card">
|
||||
{imageUrl ? (
|
||||
<Image
|
||||
src={imageUrl}
|
||||
alt={imageAlt}
|
||||
fill
|
||||
priority
|
||||
sizes="(max-width: 1024px) 55vw, 25vw"
|
||||
onLoad={() => setImagesLoaded(true)}
|
||||
className={`object-cover object-center grayscale hover:grayscale-0 transition-all duration-700 ease-out ${imagesLoaded ? 'opacity-100 scale-100' : 'opacity-0 scale-105'}`}
|
||||
/>
|
||||
) : (
|
||||
<div className="w-full h-full flex items-center justify-center text-border border border-border">
|
||||
<ImageIcon size={32} strokeWidth={1} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Zdjęcie 2 (większe, przesunięte w prawo-dół, nachodzące na pierwsze o ok. 18%) */}
|
||||
<div className="absolute bottom-0 right-0 w-[74%] aspect-[4/5] border border-border shadow-md overflow-hidden z-20">
|
||||
<div className="absolute bottom-0 right-0 w-[74%] aspect-[4/5] border border-border shadow-md overflow-hidden z-20 bg-border/20">
|
||||
<Image
|
||||
src={secondaryUrl}
|
||||
alt={secondaryAlt}
|
||||
fill
|
||||
priority
|
||||
sizes="(max-width: 1024px) 65vw, 32vw"
|
||||
className="object-cover object-center grayscale hover:grayscale-0 transition-all duration-700"
|
||||
className={`object-cover object-center grayscale hover:grayscale-0 transition-all duration-700 ease-out ${imagesLoaded ? 'opacity-100 scale-100' : 'opacity-0 scale-105'}`}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
/* Pojedyncze zdjęcie jeśli imageSecondary jest puste */
|
||||
<div className="relative w-full aspect-[4/5] border border-border shadow-sm overflow-hidden">
|
||||
<Image
|
||||
src={imageUrl}
|
||||
alt={imageAlt}
|
||||
fill
|
||||
priority
|
||||
sizes="(max-width: 768px) 100vw, 50vw"
|
||||
className="object-cover object-center grayscale hover:grayscale-0 transition-all duration-700"
|
||||
/>
|
||||
<div className="relative w-full aspect-[4/5] border border-border shadow-sm overflow-hidden bg-card">
|
||||
{imageUrl ? (
|
||||
<Image
|
||||
src={imageUrl}
|
||||
alt={imageAlt}
|
||||
fill
|
||||
priority
|
||||
sizes="(max-width: 768px) 100vw, 50vw"
|
||||
onLoad={() => setImagesLoaded(true)}
|
||||
className={`object-cover object-center grayscale hover:grayscale-0 transition-all duration-700 ease-out ${imagesLoaded ? 'opacity-100 scale-100' : 'opacity-0 scale-105'}`}
|
||||
/>
|
||||
) : (
|
||||
<div className="w-full h-full flex flex-col items-center justify-center text-border gap-4 p-8 text-center border border-border">
|
||||
<ImageIcon size={64} strokeWidth={1} />
|
||||
<span className="text-xs tracking-widest uppercase font-semibold text-foreground/40">ZDJĘCIE GŁÓWNE</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user