Fix FAQFull: Use isDraft boolean for draft filtering, fix Kontakt ID override
This commit is contained in:
@@ -1,12 +1,32 @@
|
||||
'use client'
|
||||
import React from 'react'
|
||||
import type { Page } from '../../payload-types'
|
||||
import { motion } from 'framer-motion'
|
||||
import { ArrowRight, CheckCircle } from 'lucide-react'
|
||||
|
||||
const containerVariants = {
|
||||
hidden: {},
|
||||
visible: {
|
||||
transition: {
|
||||
staggerChildren: 0.1,
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const cardVariants = {
|
||||
hidden: { opacity: 0, y: 20 },
|
||||
visible: {
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
transition: { duration: 0.5, ease: [0.22, 1, 0.36, 1] as [number, number, number, number] }
|
||||
}
|
||||
}
|
||||
|
||||
type Props = Extract<NonNullable<Page['layout']>[0], { blockType: 'servicesList' }>
|
||||
|
||||
export const ServicesListBlock: React.FC<Props> = ({ title, services }) => {
|
||||
return (
|
||||
<section className="py-20 md:py-32 bg-background text-foreground">
|
||||
<section className="py-24 md:py-32 relative overflow-hidden" id="uslugi">
|
||||
<div className="container-premium">
|
||||
<div className="max-w-3xl mb-16 md:mb-24">
|
||||
<h2 className="font-heading text-3xl sm:text-4xl md:text-5xl font-extrabold text-foreground tracking-tight max-w-2xl text-balance">
|
||||
@@ -14,25 +34,39 @@ export const ServicesListBlock: React.FC<Props> = ({ title, services }) => {
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div className="border-t border-border">
|
||||
<motion.div
|
||||
initial="hidden"
|
||||
whileInView="visible"
|
||||
viewport={{ once: true, margin: "-50px" }}
|
||||
variants={containerVariants}
|
||||
className="grid grid-cols-1 md:grid-cols-3 gap-8"
|
||||
>
|
||||
{services?.map((service: NonNullable<Props['services']>[0], index: number) => (
|
||||
<div
|
||||
<motion.div
|
||||
key={service.id || index}
|
||||
className="group border-b border-border py-8 md:py-12 flex flex-col md:flex-row gap-6 md:gap-12 lg:gap-24 items-start md:items-center hover:bg-foreground/[0.02] transition-colors"
|
||||
variants={cardVariants}
|
||||
className="group flex flex-col bg-card border border-border p-8 hover:shadow-sm hover:border-border/80 transition-all duration-300"
|
||||
>
|
||||
<div className="md:w-1/3 shrink-0">
|
||||
<h3 className="font-heading text-xl sm:text-2xl font-bold text-foreground group-hover:text-accent transition-colors">
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<CheckCircle className="text-accent w-5 h-5 shrink-0" />
|
||||
<h3 className="font-heading text-xl sm:text-2xl font-bold text-foreground">
|
||||
{service.title}
|
||||
</h3>
|
||||
</div>
|
||||
<div className="md:w-7/12 flex-grow">
|
||||
<p className="text-foreground/75 text-lg md:text-xl font-light leading-relaxed">
|
||||
{service.description}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-foreground/75 text-base md:text-lg font-light leading-relaxed flex-grow">
|
||||
{service.description}
|
||||
</p>
|
||||
|
||||
<a
|
||||
href={service.linkUrl || '#'}
|
||||
className="mt-8 inline-flex items-center gap-2 text-accent font-bold hover:text-accent-hover transition-colors"
|
||||
>
|
||||
{service.linkText || 'Zobacz więcej'}
|
||||
<ArrowRight size={18} />
|
||||
</a>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
|
||||
@@ -13,6 +13,8 @@ export const ServicesList: Block = {
|
||||
fields: [
|
||||
{ name: 'title', type: 'text', required: true },
|
||||
{ name: 'description', type: 'textarea', required: true },
|
||||
{ name: 'linkText', type: 'text' },
|
||||
{ name: 'linkUrl', type: 'text' },
|
||||
],
|
||||
},
|
||||
],
|
||||
|
||||
Reference in New Issue
Block a user