100 lines
3.7 KiB
TypeScript
100 lines
3.7 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import { SectionHeading } from "../common/SectionHeading";
|
|
import { services as defaultServices } from "@/content/services";
|
|
import Link from "next/link";
|
|
import Image from "next/image";
|
|
import { buttonClasses } from "@/components/ui/Button";
|
|
import { ArrowRight } from "lucide-react";
|
|
|
|
interface ServicesGridProps {
|
|
services?: {
|
|
title: string;
|
|
description: string;
|
|
icon: string;
|
|
href?: string;
|
|
}[];
|
|
title?: string;
|
|
subtitle?: string;
|
|
eyebrow?: string;
|
|
}
|
|
|
|
export function ServicesGrid({
|
|
services = defaultServices,
|
|
title = "Rozwiązania dla Twojego domu i biznesu",
|
|
subtitle = "Wybierz kategorię usług, aby poznać szczegóły. Oferujemy kompleksowe doradztwo, montaż oraz serwis.",
|
|
eyebrow = "Nasze Usługi"
|
|
}: ServicesGridProps) {
|
|
const [activeTab, setActiveTab] = useState(0);
|
|
|
|
return (
|
|
<section className="py-16 md:py-24 bg-white border-b border-border">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<SectionHeading
|
|
eyebrow={eyebrow}
|
|
title={title}
|
|
subtitle={subtitle}
|
|
align="center"
|
|
/>
|
|
|
|
<div className="mt-12 flex flex-col items-center">
|
|
{/* Zakładki */}
|
|
<div className="flex flex-wrap justify-center gap-2 md:gap-4 mb-10 bg-slate-50 p-2 rounded-2xl border border-border">
|
|
{services.map((service, idx) => (
|
|
<button
|
|
key={idx}
|
|
onClick={() => setActiveTab(idx)}
|
|
className={`px-4 py-2.5 md:px-6 md:py-3 rounded-xl text-sm md:text-base font-bold transition-all ${
|
|
activeTab === idx
|
|
? "bg-white text-primary shadow-sm border border-border"
|
|
: "text-text-muted hover:text-primary hover:bg-slate-100"
|
|
}`}
|
|
>
|
|
{service.title}
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
{/* Zawartość aktywnej zakładki */}
|
|
<div className="w-full max-w-4xl bg-slate-50 rounded-3xl p-8 md:p-12 border border-border shadow-sm">
|
|
{services.map((service, idx) => {
|
|
if (idx !== activeTab) return null;
|
|
|
|
return (
|
|
<div key={idx} className="flex flex-col md:grid md:grid-cols-[2fr_3fr] gap-8 lg:gap-12 items-center animate-fade-in-up">
|
|
|
|
{/* Zastąpiono sztuczną ikonę w kółku realnym zdjęciem */}
|
|
<div className="w-full aspect-[4/3] relative rounded-xl overflow-hidden border border-border shadow-sm">
|
|
<Image
|
|
src={`/images/services/montaz.webp`} // Placeholder obrazka z usług (można podpiąć z contentu jeśli jest)
|
|
alt={service.title}
|
|
fill
|
|
className="object-cover"
|
|
/>
|
|
</div>
|
|
|
|
<div className="flex-1">
|
|
<h3 className="text-2xl md:text-3xl font-bold text-primary font-heading mb-4">
|
|
{service.title}
|
|
</h3>
|
|
<p className="text-base md:text-lg text-text-muted leading-relaxed mb-6">
|
|
{service.description}
|
|
</p>
|
|
|
|
{service.href && (
|
|
<Link href={service.href} className={buttonClasses({ variant: 'outline', size: 'sm' })}>
|
|
Więcej szczegółów <ArrowRight className="size-4" />
|
|
</Link>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|