123 lines
4.6 KiB
TypeScript
123 lines
4.6 KiB
TypeScript
import React from 'react'
|
|
import { Check } from 'lucide-react'
|
|
import { AnimateIn } from '@/components/AnimateIn'
|
|
|
|
interface Feature {
|
|
feature: string
|
|
}
|
|
|
|
interface Package {
|
|
name: string
|
|
price: string
|
|
description?: string
|
|
features?: Feature[]
|
|
isPopular?: boolean
|
|
ctaLabel?: string
|
|
ctaUrl?: string
|
|
}
|
|
|
|
interface PricingTableBlockProps {
|
|
badge?: string
|
|
heading: string
|
|
subheading?: string
|
|
disclaimer?: string
|
|
packages?: Package[]
|
|
}
|
|
|
|
export function PricingTableBlockComponent(props: PricingTableBlockProps) {
|
|
const { badge, heading, subheading, disclaimer, packages } = props
|
|
|
|
return (
|
|
<section id="cennik" className="py-24 bg-[#f4f4f4] border-b-2 border-[#1f1f1f] scroll-mt-20">
|
|
<div className="container mx-auto px-4 sm:px-6 lg:px-12 max-w-7xl">
|
|
<AnimateIn direction="up">
|
|
<div className="max-w-3xl mb-14">
|
|
{badge && (
|
|
<div className="inline-block bg-[#1f1f1f] text-[#FFED00] text-xs font-black uppercase tracking-widest px-3 py-1 mb-4">
|
|
{badge}
|
|
</div>
|
|
)}
|
|
<h2 className="text-2xl sm:text-3xl lg:text-4xl font-black uppercase tracking-tight text-[#1f1f1f]">
|
|
{heading}
|
|
</h2>
|
|
{subheading && (
|
|
<p className="mt-4 text-base text-[#666666] leading-relaxed font-medium">
|
|
{subheading}
|
|
</p>
|
|
)}
|
|
</div>
|
|
</AnimateIn>
|
|
|
|
{packages && packages.length > 0 && (
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-8 items-stretch">
|
|
{packages.map((pkg, idx) => (
|
|
<AnimateIn key={idx} delay={idx * 150} direction="up" className="h-full">
|
|
<div
|
|
className={`relative p-8 h-full flex flex-col justify-between bg-white border-2 border-[#1f1f1f] hover-lift transition-all ${
|
|
pkg.isPopular ? 'border-t-8 border-t-[#FFED00] shadow-md' : ''
|
|
}`}
|
|
>
|
|
{pkg.isPopular && (
|
|
<div className="absolute top-0 right-0 bg-[#FFED00] text-[#1f1f1f] border-b-2 border-l-2 border-[#1f1f1f] text-[10px] font-black uppercase tracking-widest px-4 py-1">
|
|
Polecany Pakiet
|
|
</div>
|
|
)}
|
|
|
|
<div>
|
|
<h3 className="text-lg font-black uppercase text-[#1f1f1f]">
|
|
{pkg.name}
|
|
</h3>
|
|
{pkg.description && (
|
|
<p className="mt-2 text-xs text-[#666666] leading-relaxed min-h-[36px]">
|
|
{pkg.description}
|
|
</p>
|
|
)}
|
|
|
|
<div className="mt-6 mb-8 pb-6 border-b-2 border-[#f0f0f0] flex items-baseline gap-2">
|
|
<span className="text-3xl sm:text-4xl font-black text-[#1f1f1f] tracking-tight font-mono">
|
|
{pkg.price}
|
|
</span>
|
|
</div>
|
|
|
|
{pkg.features && pkg.features.length > 0 && (
|
|
<ul className="space-y-3 text-xs sm:text-sm">
|
|
{pkg.features.map((feat, fIdx) => (
|
|
<li key={fIdx} className="flex items-start gap-3 text-[#222222]">
|
|
<Check className="h-4 w-4 text-[#1f1f1f] bg-[#FFED00] p-0.5 shrink-0 mt-0.5 font-bold" />
|
|
<span className="font-semibold">{feat.feature}</span>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
)}
|
|
</div>
|
|
|
|
<div className="mt-10 pt-6 border-t-2 border-[#f0f0f0]">
|
|
<a
|
|
href={pkg.ctaUrl || '#formularz-kontaktowy'}
|
|
className={`w-full inline-flex items-center justify-center py-4 px-6 text-xs font-black uppercase tracking-widest transition-all ${
|
|
pkg.isPopular
|
|
? 'bg-[#FFED00] hover:bg-[#fae100] text-[#1f1f1f] border-2 border-[#1f1f1f] shadow-xs'
|
|
: 'bg-[#1f1f1f] text-white hover:bg-[#333333]'
|
|
}`}
|
|
>
|
|
{pkg.ctaLabel || 'Wybierz pakiet'}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</AnimateIn>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
{disclaimer && (
|
|
<AnimateIn delay={400} direction="none">
|
|
<p className="mt-10 text-xs text-[#666666] font-medium">
|
|
{disclaimer}
|
|
</p>
|
|
</AnimateIn>
|
|
)}
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|