Zastosowanie wszystkich poprawek UI i logiki kalkulatora
This commit is contained in:
AI Assistant
@@ -0,0 +1,181 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import Link from 'next/link';
|
||||
import { useConsentStore } from '@/lib/consent-store';
|
||||
|
||||
interface CookiePreferences {
|
||||
necessary: boolean;
|
||||
analytics: boolean;
|
||||
marketing: boolean;
|
||||
advertising: boolean;
|
||||
}
|
||||
|
||||
export default function CookieBanner() {
|
||||
const {
|
||||
isInitialized,
|
||||
isOpen,
|
||||
analytics,
|
||||
marketing,
|
||||
advertising,
|
||||
setConsent,
|
||||
acceptAll: storeAcceptAll,
|
||||
rejectOptional: storeRejectOptional
|
||||
} = useConsentStore();
|
||||
|
||||
const [showDetails, setShowDetails] = useState(false);
|
||||
const [prefs, setPrefs] = useState<CookiePreferences>({
|
||||
necessary: true,
|
||||
analytics: true,
|
||||
marketing: true,
|
||||
advertising: true,
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
useConsentStore.getState().initialize();
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (isOpen) {
|
||||
const timer = setTimeout(() => {
|
||||
setPrefs({
|
||||
necessary: true,
|
||||
analytics: analytics,
|
||||
marketing: marketing,
|
||||
advertising: advertising,
|
||||
});
|
||||
setShowDetails(false);
|
||||
}, 0);
|
||||
return () => clearTimeout(timer);
|
||||
}
|
||||
}, [isOpen, analytics, marketing, advertising]);
|
||||
|
||||
const saveSelected = () => {
|
||||
setConsent(prefs.analytics, prefs.marketing, prefs.advertising);
|
||||
};
|
||||
|
||||
if (!isInitialized || !isOpen) return null;
|
||||
|
||||
return (
|
||||
<div className="fixed bottom-0 left-0 right-0 z-[100] p-0 sm:p-6">
|
||||
<div className="max-w-4xl mx-auto bg-white sm:rounded-2xl shadow-[0_-4px_20px_rgba(0,0,0,0.1)] sm:shadow-2xl border-t sm:border border-border overflow-hidden pb-safe sm:pb-0">
|
||||
<div className="p-4 sm:p-6">
|
||||
<div className="flex items-start gap-3 mb-3 sm:mb-4">
|
||||
<span className="hidden sm:block text-2xl shrink-0">🍪</span>
|
||||
<div>
|
||||
<h2 className="text-sm sm:text-base font-extrabold text-primary font-heading mb-1">
|
||||
Ta strona używa plików cookie
|
||||
</h2>
|
||||
<p className="text-xs sm:text-sm text-text-muted leading-relaxed">
|
||||
Używamy plików cookie, aby zapewnić prawidłowe działanie strony, analizować ruch
|
||||
i dostosowywać treści. Możesz wybrać które kategorie akceptujesz.{' '}
|
||||
<Link href="/polityka-prywatnosci" className="text-accent underline hover:no-underline">
|
||||
Polityka prywatności
|
||||
</Link>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{showDetails && (
|
||||
<div className="flex flex-col gap-3 mb-5 p-4 bg-slate-50 rounded-xl">
|
||||
<div className="flex items-start justify-between gap-4">
|
||||
<div>
|
||||
<p className="text-sm font-semibold text-primary">Niezbędne</p>
|
||||
<p className="text-xs text-text-muted mt-0.5">
|
||||
Wymagane do prawidłowego działania strony. Nie można wyłączyć.
|
||||
</p>
|
||||
</div>
|
||||
<div className="shrink-0">
|
||||
<div className="w-11 h-6 bg-accent rounded-full relative cursor-not-allowed opacity-60">
|
||||
<div className="absolute right-1 top-1 size-4 bg-white rounded-full" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start justify-between gap-4 border-t border-border pt-3">
|
||||
<div>
|
||||
<p className="text-sm font-semibold text-primary">Analityczne</p>
|
||||
<p className="text-xs text-text-muted mt-0.5">
|
||||
Google Analytics — pomagają nam zrozumieć jak użytkownicy korzystają ze strony. Dane są anonimowe.
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setPrefs(p => ({ ...p, analytics: !p.analytics }))}
|
||||
className="shrink-0"
|
||||
>
|
||||
<div className={`w-11 h-6 rounded-full relative transition-colors ${prefs.analytics ? 'bg-accent' : 'bg-slate-300'}`}>
|
||||
<div className={`absolute top-1 size-4 bg-white rounded-full transition-all ${prefs.analytics ? 'right-1' : 'left-1'}`} />
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start justify-between gap-4 border-t border-border pt-3">
|
||||
<div>
|
||||
<p className="text-sm font-semibold text-primary">Marketingowe</p>
|
||||
<p className="text-xs text-text-muted mt-0.5">
|
||||
Google Ads, Facebook Ads — pozwalają mierzyć skuteczność kampanii i docierać do odpowiednich odbiorców.
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setPrefs(p => ({ ...p, marketing: !p.marketing }))}
|
||||
className="shrink-0"
|
||||
>
|
||||
<div className={`w-11 h-6 rounded-full relative transition-colors ${prefs.marketing ? 'bg-accent' : 'bg-slate-300'}`}>
|
||||
<div className={`absolute top-1 size-4 bg-white rounded-full transition-all ${prefs.marketing ? 'right-1' : 'left-1'}`} />
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start justify-between gap-4 border-t border-border pt-3">
|
||||
<div>
|
||||
<p className="text-sm font-semibold text-primary">Reklamowe</p>
|
||||
<p className="text-xs text-text-muted mt-0.5">
|
||||
Meta Pixel, Google Ads — umożliwiają wyświetlanie spersonalizowanych reklam na platformach takich jak Facebook, Instagram i Google.
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setPrefs(p => ({ ...p, advertising: !p.advertising }))}
|
||||
className="shrink-0"
|
||||
>
|
||||
<div className={`w-11 h-6 rounded-full relative transition-colors ${prefs.advertising ? 'bg-accent' : 'bg-slate-300'}`}>
|
||||
<div className={`absolute top-1 size-4 bg-white rounded-full transition-all ${prefs.advertising ? 'right-1' : 'left-1'}`} />
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="grid grid-cols-2 sm:flex sm:flex-row items-stretch sm:items-center gap-2">
|
||||
<button
|
||||
onClick={storeAcceptAll}
|
||||
className="col-span-2 sm:col-span-1 flex-1 sm:flex-none px-4 py-2 sm:px-5 sm:py-2.5 bg-accent text-white font-bold rounded-xl text-xs sm:text-sm hover:bg-accent/90 transition-colors min-h-[44px]"
|
||||
>
|
||||
Akceptuj wszystkie
|
||||
</button>
|
||||
<button
|
||||
onClick={storeRejectOptional}
|
||||
className="col-span-1 flex-1 sm:flex-none px-4 py-2 sm:px-5 sm:py-2.5 bg-slate-100 text-primary font-bold rounded-xl text-xs sm:text-sm hover:bg-slate-200 transition-colors min-h-[44px]"
|
||||
>
|
||||
Odrzuć
|
||||
</button>
|
||||
{showDetails ? (
|
||||
<button
|
||||
onClick={saveSelected}
|
||||
className="col-span-1 flex-1 sm:flex-none px-4 py-2 sm:px-5 sm:py-2.5 bg-white border border-border text-primary font-bold rounded-xl text-xs sm:text-sm hover:border-accent transition-colors min-h-[44px]"
|
||||
>
|
||||
Zapisz
|
||||
</button>
|
||||
) : (
|
||||
<button
|
||||
onClick={() => setShowDetails(true)}
|
||||
className="col-span-1 flex-1 sm:flex-none px-4 py-2 sm:px-5 sm:py-2.5 bg-white border border-border text-primary font-bold rounded-xl text-xs sm:text-sm hover:border-accent transition-colors min-h-[44px]"
|
||||
>
|
||||
Dostosuj
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,79 @@
|
||||
import Link from "next/link";
|
||||
import {
|
||||
Wind, Wrench, ThermometerSun, Paintbrush, Droplet, Tv, HelpCircle, ArrowRight,
|
||||
PaintBucket, Refrigerator, Hammer, Key, Bath, PaintRoller, Grid, Layers,
|
||||
AlertTriangle, Waves, Droplets, WashingMachine, Snowflake, Store, ScanLine, Settings
|
||||
} from "lucide-react";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
interface IconCardProps {
|
||||
title: string;
|
||||
description: string;
|
||||
iconName: string;
|
||||
href?: string;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
const iconMap: Record<string, React.ComponentType<{ className?: string }>> = {
|
||||
Wind,
|
||||
Wrench,
|
||||
ThermometerSun,
|
||||
Paintbrush,
|
||||
Droplet,
|
||||
Tv,
|
||||
PaintBucket,
|
||||
Refrigerator,
|
||||
Hammer,
|
||||
Key,
|
||||
Bath,
|
||||
PaintRoller,
|
||||
Grid,
|
||||
Layers,
|
||||
AlertTriangle,
|
||||
Waves,
|
||||
Droplets,
|
||||
WashingMachine,
|
||||
Snowflake,
|
||||
Store,
|
||||
ScanLine,
|
||||
Settings,
|
||||
};
|
||||
|
||||
export function IconCard({ title, description, iconName, href, className }: IconCardProps) {
|
||||
const Icon = iconMap[iconName] || HelpCircle;
|
||||
|
||||
const cardContent = (
|
||||
<>
|
||||
<div className="p-3 rounded-lg bg-slate-100 text-primary w-fit group-hover:bg-accent-light group-hover:text-accent transition-colors duration-300">
|
||||
<Icon className="size-6" />
|
||||
</div>
|
||||
<h3 className="text-lg font-semibold text-primary font-heading mt-4 group-hover:text-accent transition-colors">
|
||||
{title}
|
||||
</h3>
|
||||
<p className="text-sm text-text-muted mt-2 leading-relaxed flex-grow">
|
||||
{description}
|
||||
</p>
|
||||
{href && (
|
||||
<div className="flex items-center gap-1 text-xs font-semibold text-primary group-hover:text-accent mt-4 transition-colors">
|
||||
<span>Dowiedz się więcej</span>
|
||||
<ArrowRight className="size-3.5 group-hover:translate-x-1 transition-transform" />
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
|
||||
const cardClasses = cn(
|
||||
"group border border-border rounded-xl p-6 bg-white hover:shadow-md transition-all duration-300 flex flex-col justify-between h-full",
|
||||
className
|
||||
);
|
||||
|
||||
if (href) {
|
||||
return (
|
||||
<Link href={href} className={cardClasses}>
|
||||
{cardContent}
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
|
||||
return <div className={cardClasses}>{cardContent}</div>;
|
||||
}
|
||||
@@ -0,0 +1,35 @@
|
||||
import { Image as ImageIcon } from "lucide-react";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
interface PlaceholderProps {
|
||||
text: string;
|
||||
className?: string;
|
||||
aspect?: "video" | "square" | "portrait" | "auto" | "banner";
|
||||
}
|
||||
|
||||
export function Placeholder({ text, className, aspect = "video" }: PlaceholderProps) {
|
||||
const aspectClasses = {
|
||||
video: "aspect-video",
|
||||
square: "aspect-square",
|
||||
portrait: "aspect-[3/4]",
|
||||
banner: "aspect-[21/9] min-h-[300px]",
|
||||
auto: "h-full w-full",
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
"relative w-full bg-slate-100 dark:bg-slate-800 border-2 border-dashed border-slate-200 dark:border-slate-700 rounded-xl flex flex-col items-center justify-center text-center p-6 text-slate-400 dark:text-slate-500 overflow-hidden group hover:bg-slate-150 transition-colors duration-250",
|
||||
aspectClasses[aspect],
|
||||
className
|
||||
)}
|
||||
>
|
||||
{/* TODO: docelowe zdjęcie — {text} */}
|
||||
<ImageIcon className="size-10 mb-3 group-hover:scale-110 transition-transform duration-300" />
|
||||
<span className="text-sm font-medium px-4 leading-normal">{text}</span>
|
||||
<span className="text-[10px] text-slate-400 mt-2 uppercase tracking-widest font-semibold font-heading opacity-70">
|
||||
Placeholder Zdjęcia
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,58 @@
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
interface SectionHeadingProps {
|
||||
title: string;
|
||||
subtitle?: string;
|
||||
eyebrow?: string;
|
||||
align?: "left" | "center";
|
||||
dark?: boolean;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export function SectionHeading({
|
||||
title,
|
||||
subtitle,
|
||||
eyebrow,
|
||||
align = "center",
|
||||
dark = false,
|
||||
className,
|
||||
}: SectionHeadingProps) {
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
"flex flex-col gap-2 mb-10 md:mb-14",
|
||||
align === "center" ? "items-center text-center" : "items-start text-left",
|
||||
className
|
||||
)}
|
||||
>
|
||||
{eyebrow && (
|
||||
<span
|
||||
className={cn(
|
||||
"text-xs md:text-sm font-semibold uppercase tracking-wider font-heading",
|
||||
"text-accent"
|
||||
)}
|
||||
>
|
||||
{eyebrow}
|
||||
</span>
|
||||
)}
|
||||
<h2
|
||||
className={cn(
|
||||
"text-3xl md:text-4xl font-bold leading-tight font-heading max-w-3xl",
|
||||
dark ? "text-white" : "text-primary"
|
||||
)}
|
||||
>
|
||||
{title}
|
||||
</h2>
|
||||
{subtitle && (
|
||||
<p
|
||||
className={cn(
|
||||
"text-base md:text-lg max-w-2xl leading-relaxed mt-1",
|
||||
dark ? "text-slate-300" : "text-text-muted"
|
||||
)}
|
||||
>
|
||||
{subtitle}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,317 @@
|
||||
"use client";
|
||||
|
||||
import React, { useState } from 'react';
|
||||
import { useForm } from 'react-hook-form';
|
||||
import { zodResolver } from '@hookform/resolvers/zod';
|
||||
import { z } from 'zod';
|
||||
import { Loader2, CheckCircle2, AlertCircle, Check } from 'lucide-react';
|
||||
import { submitContactForm } from '@/app/kontakt/actions';
|
||||
import { getRecaptchaToken } from '@/lib/getRecaptchaToken';
|
||||
|
||||
const contactFormSchema = z.object({
|
||||
name: z.string().min(2, "Imię musi mieć min. 2 znaki"),
|
||||
phone: z.string().min(9, "Wprowadź poprawny numer telefonu"),
|
||||
email: z.union([z.literal(''), z.string().email("Niepoprawny adres e-mail")]).optional(),
|
||||
city: z.string().min(1, "Wybierz miasto"),
|
||||
subject: z.string().optional(),
|
||||
message: z.string().optional(),
|
||||
brand: z.string().optional(),
|
||||
age: z.string().optional(),
|
||||
});
|
||||
|
||||
type ContactFormValues = z.infer<typeof contactFormSchema>;
|
||||
|
||||
export function ContactForm() {
|
||||
const [serverState, setServerState] = useState<{ success?: boolean; message?: string } | null>(null);
|
||||
const [consent, setConsent] = useState(false);
|
||||
const [files, setFiles] = useState<File[]>([]);
|
||||
|
||||
const {
|
||||
register,
|
||||
handleSubmit: hookFormSubmit,
|
||||
formState: { errors, isSubmitting },
|
||||
reset,
|
||||
watch
|
||||
} = useForm<ContactFormValues>({
|
||||
resolver: zodResolver(contactFormSchema),
|
||||
defaultValues: {
|
||||
name: '',
|
||||
phone: '',
|
||||
email: '',
|
||||
city: '',
|
||||
subject: '',
|
||||
message: '',
|
||||
brand: '',
|
||||
age: '',
|
||||
}
|
||||
});
|
||||
|
||||
const onSubmit = async (data: ContactFormValues) => {
|
||||
setServerState(null);
|
||||
|
||||
const formData = new FormData();
|
||||
Object.entries(data).forEach(([key, value]) => {
|
||||
if (value !== undefined) formData.append(key, value.toString());
|
||||
});
|
||||
formData.append("consent", consent ? 'true' : 'false');
|
||||
|
||||
const token = await getRecaptchaToken('submit');
|
||||
if (token) {
|
||||
formData.append('recaptchaToken', token);
|
||||
}
|
||||
|
||||
const response = await submitContactForm(null, formData);
|
||||
|
||||
setServerState({
|
||||
success: response.success,
|
||||
message: response.message
|
||||
});
|
||||
|
||||
if (response.success) {
|
||||
reset();
|
||||
setConsent(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
|
||||
if (!consent) {
|
||||
e.preventDefault();
|
||||
alert('Proszę zaznaczyć zgodę na przetwarzanie danych.');
|
||||
return;
|
||||
}
|
||||
hookFormSubmit(onSubmit)(e);
|
||||
};
|
||||
|
||||
if (serverState?.success) {
|
||||
return (
|
||||
<div className="bg-green-50 text-green-800 p-8 rounded-2xl border border-green-200 flex flex-col items-center text-center">
|
||||
<CheckCircle2 className="w-16 h-16 text-green-500 mb-4" />
|
||||
<h3 className="text-2xl font-bold font-heading mb-2">Wiadomość wysłana!</h3>
|
||||
<p className="text-green-700">{serverState.message}</p>
|
||||
<button
|
||||
onClick={() => setServerState(null)}
|
||||
className="mt-6 px-6 py-2 bg-green-600 text-white rounded-lg font-semibold hover:bg-green-700 transition-colors"
|
||||
>
|
||||
Wyślij kolejną wiadomość
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit} className="space-y-6 bg-white p-6 md:p-8 rounded-2xl border border-border shadow-sm">
|
||||
{serverState && !serverState.success && (
|
||||
<div className="bg-red-50 text-red-800 p-4 rounded-xl border border-red-200 flex items-start gap-3">
|
||||
<AlertCircle className="w-5 h-5 shrink-0 mt-0.5" />
|
||||
<p className="text-sm font-medium">{serverState.message}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
|
||||
{/* Imię */}
|
||||
<div className="space-y-2">
|
||||
<label htmlFor="name" className="text-sm font-semibold text-primary">Imię i nazwisko <span className="text-red-500">*</span></label>
|
||||
<input
|
||||
{...register("name")}
|
||||
id="name"
|
||||
required
|
||||
className={`w-full px-4 py-3 rounded-xl border ${errors.name ? 'border-red-500 focus:ring-red-500' : 'border-border focus:border-primary focus:ring-primary/20'} outline-none focus:ring-2 transition-all bg-slate-50`}
|
||||
placeholder="Jan Kowalski"
|
||||
aria-invalid={errors.name ? "true" : "false"}
|
||||
/>
|
||||
{errors.name && <p className="text-red-500 text-xs font-medium">{errors.name.message}</p>}
|
||||
</div>
|
||||
|
||||
{/* Telefon */}
|
||||
<div className="space-y-2">
|
||||
<label htmlFor="phone" className="text-sm font-semibold text-primary">Telefon <span className="text-red-500">*</span></label>
|
||||
<input
|
||||
{...register("phone")}
|
||||
id="phone"
|
||||
type="tel"
|
||||
required
|
||||
className={`w-full px-4 py-3 rounded-xl border ${errors.phone ? 'border-red-500 focus:ring-red-500' : 'border-border focus:border-primary focus:ring-primary/20'} outline-none focus:ring-2 transition-all bg-slate-50`}
|
||||
placeholder="+48 123 456 789"
|
||||
/>
|
||||
{errors.phone && <p className="text-red-500 text-xs font-medium">{errors.phone.message}</p>}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
|
||||
{/* Email */}
|
||||
<div className="space-y-2">
|
||||
<label htmlFor="email" className="text-sm font-semibold text-primary">Adres e-mail</label>
|
||||
<input
|
||||
{...register("email")}
|
||||
id="email"
|
||||
type="email"
|
||||
className={`w-full px-4 py-3 rounded-xl border ${errors.email ? 'border-red-500 focus:ring-red-500' : 'border-border focus:border-primary focus:ring-primary/20'} outline-none focus:ring-2 transition-all bg-slate-50`}
|
||||
placeholder="[email protected]"
|
||||
/>
|
||||
{errors.email && <p className="text-red-500 text-xs font-medium">{errors.email.message}</p>}
|
||||
</div>
|
||||
|
||||
{/* Miasto */}
|
||||
<div className="space-y-2">
|
||||
<label htmlFor="city" className="text-sm font-semibold text-primary">Miasto <span className="text-red-500">*</span></label>
|
||||
<select
|
||||
{...register("city")}
|
||||
id="city"
|
||||
required
|
||||
className={`w-full px-4 py-3 rounded-xl border ${errors.city ? 'border-red-500 focus:ring-red-500' : 'border-border focus:border-primary focus:ring-primary/20'} outline-none focus:ring-2 transition-all bg-slate-50 appearance-none`}
|
||||
>
|
||||
<option value="">Wybierz miasto...</option>
|
||||
<option value="Wrocław">Wrocław</option>
|
||||
<option value="Legnica">Legnica</option>
|
||||
<option value="Wałbrzych">Wałbrzych</option>
|
||||
<option value="Jelenia Góra">Jelenia Góra</option>
|
||||
<option value="Lubin">Lubin</option>
|
||||
<option value="Głogów">Głogów</option>
|
||||
<option value="Świdnica">Świdnica</option>
|
||||
<option value="Dzierżoniów">Dzierżoniów</option>
|
||||
<option value="Oleśnica">Oleśnica</option>
|
||||
<option value="Oława">Oława</option>
|
||||
<option value="Trzebnica">Trzebnica</option>
|
||||
<option value="Środa Śląska">Środa Śląska</option>
|
||||
<option value="Inne">Inne miasto</option>
|
||||
</select>
|
||||
{errors.city && <p className="text-red-500 text-xs font-medium">{errors.city.message}</p>}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Temat */}
|
||||
<div className="space-y-2">
|
||||
<label htmlFor="subject" className="text-sm font-semibold text-primary">Temat rozmowy</label>
|
||||
<select
|
||||
{...register("subject")}
|
||||
id="subject"
|
||||
className={`w-full px-4 py-3 rounded-xl border ${errors.subject ? 'border-red-500 focus:ring-red-500' : 'border-border focus:border-primary focus:ring-primary/20'} outline-none focus:ring-2 transition-all bg-slate-50 appearance-none`}
|
||||
>
|
||||
<option value="">Wybierz temat...</option>
|
||||
<option value="klimatyzacja">Klimatyzacja</option>
|
||||
|
||||
<option value="serwis">Serwis</option>
|
||||
<option value="inne">Inne zapytanie</option>
|
||||
</select>
|
||||
{errors.subject && <p className="text-red-500 text-xs font-medium">{errors.subject.message}</p>}
|
||||
</div>
|
||||
|
||||
{/* Warunkowe pola dla serwisu */}
|
||||
{watch('subject') === 'serwis' && (
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
|
||||
<div className="space-y-2">
|
||||
<label htmlFor="brand" className="text-sm font-semibold text-primary">Marka klimatyzatora</label>
|
||||
<select
|
||||
{...register("brand")}
|
||||
id="brand"
|
||||
className={`w-full px-4 py-3 rounded-xl border ${errors.brand ? 'border-red-500 focus:ring-red-500' : 'border-border focus:border-primary focus:ring-primary/20'} outline-none focus:ring-2 transition-all bg-slate-50 appearance-none`}
|
||||
>
|
||||
<option value="">Wybierz markę...</option>
|
||||
<option value="Daikin">Daikin</option>
|
||||
<option value="Mitsubishi">Mitsubishi</option>
|
||||
<option value="LG">LG</option>
|
||||
<option value="Samsung">Samsung</option>
|
||||
<option value="Gree">Gree</option>
|
||||
<option value="Rotenso">Rotenso</option>
|
||||
<option value="Haier">Haier</option>
|
||||
<option value="Aux">Aux</option>
|
||||
<option value="Fuji Electric">Fuji Electric</option>
|
||||
<option value="Toshiba">Toshiba</option>
|
||||
<option value="Inna">Inna / Nie wiem</option>
|
||||
</select>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label htmlFor="age" className="text-sm font-semibold text-primary">Wiek urządzenia</label>
|
||||
<select
|
||||
{...register("age")}
|
||||
id="age"
|
||||
className={`w-full px-4 py-3 rounded-xl border ${errors.age ? 'border-red-500 focus:ring-red-500' : 'border-border focus:border-primary focus:ring-primary/20'} outline-none focus:ring-2 transition-all bg-slate-50 appearance-none`}
|
||||
>
|
||||
<option value="">Jak długo masz klimatyzator?</option>
|
||||
<option value="Mniej niż rok">Mniej niż rok (na gwarancji)</option>
|
||||
<option value="1-3 lata">1 - 3 lata</option>
|
||||
<option value="Ponad 3 lata">Ponad 3 lata</option>
|
||||
<option value="Nie wiem">Nie wiem</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Wiadomość */}
|
||||
<div className="space-y-2">
|
||||
<label htmlFor="message" className="text-sm font-semibold text-primary">Wiadomość</label>
|
||||
<textarea
|
||||
{...register("message")}
|
||||
id="message"
|
||||
rows={5}
|
||||
className={`w-full px-4 py-3 rounded-xl border ${errors.message ? 'border-red-500 focus:ring-red-500' : 'border-border focus:border-primary focus:ring-primary/20'} outline-none focus:ring-2 transition-all bg-slate-50 resize-y`}
|
||||
placeholder="Opisz krótko, w czym możemy Ci pomóc..."
|
||||
/>
|
||||
{errors.message && <p className="text-red-500 text-xs font-medium">{errors.message.message}</p>}
|
||||
</div>
|
||||
|
||||
{/* Załączniki */}
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<label className="text-sm font-medium text-primary">
|
||||
Załącz zdjęcia <span className="text-text-muted font-normal">(opcjonalnie)</span>
|
||||
</label>
|
||||
<label className="flex flex-col items-center justify-center gap-2 border-2 border-dashed border-border rounded-xl p-6 cursor-pointer hover:border-accent hover:bg-accent/5 transition-colors">
|
||||
<input
|
||||
type="file"
|
||||
multiple
|
||||
accept="image/*,.pdf"
|
||||
className="sr-only"
|
||||
onChange={(e) => setFiles(Array.from(e.target.files || []))}
|
||||
/>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" className="size-8 text-text-muted" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 00-2 2z" />
|
||||
</svg>
|
||||
<span className="text-sm text-text-muted text-center">
|
||||
Kliknij aby wybrać zdjęcia lub przeciągnij tutaj<br />
|
||||
<span className="text-xs">JPG, PNG, WEBP, PDF — maks. 10 MB każdy</span>
|
||||
</span>
|
||||
{files.length > 0 && (
|
||||
<div className="flex flex-wrap gap-2 mt-2">
|
||||
{files.map((f, i) => (
|
||||
<span key={i} className="text-xs bg-accent/10 text-accent px-2 py-1 rounded-md font-medium">
|
||||
{f.name}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</label>
|
||||
<p className="text-xs text-text-muted">Zdjęcia miejsca montażu znacznie przyspieszają wycenę.</p>
|
||||
</div>
|
||||
|
||||
{/* RODO */}
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-start gap-3 cursor-pointer" onClick={() => setConsent(!consent)}>
|
||||
<div className={`size-5 rounded border-2 shrink-0 mt-0.5 flex items-center justify-center transition-colors ${
|
||||
consent ? 'bg-accent border-accent' : 'bg-white border-slate-300'
|
||||
}`}>
|
||||
{consent && <Check className="size-3 text-white" />}
|
||||
</div>
|
||||
<input type="hidden" name="consent" value={consent ? 'true' : ''} />
|
||||
<span className="text-sm text-text-muted leading-relaxed select-none">
|
||||
Wyrażam zgodę na przetwarzanie moich danych osobowych podanych w formularzu w celu obsługi zapytania przez firmę ThermCool. Zapoznałem/am się z Polityką Prywatności. *
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isSubmitting}
|
||||
className="btn btn-primary w-full text-white font-bold py-4 h-auto rounded-xl flex items-center justify-center gap-2 shadow-md"
|
||||
>
|
||||
{isSubmitting ? (
|
||||
<>
|
||||
<Loader2 className="w-5 h-5 animate-spin" />
|
||||
<span>Wysyłanie...</span>
|
||||
</>
|
||||
) : (
|
||||
<span>Wyślij zapytanie</span>
|
||||
)}
|
||||
</button>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,613 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect, useMemo } from 'react';
|
||||
import Link from 'next/link';
|
||||
|
||||
import { ArrowRight, ArrowLeft, Check, Home, Zap, ShoppingCart, Phone } from 'lucide-react';
|
||||
import { Product } from '@/content/products';
|
||||
import { companyDetails } from '@/content/company';
|
||||
|
||||
|
||||
interface Props {
|
||||
products: Product[];
|
||||
}
|
||||
|
||||
// Hook do zapisywania stanu w sessionStorage
|
||||
function useSessionState<T>(key: string, initialValue: T) {
|
||||
const [state, setState] = useState<T>(initialValue);
|
||||
|
||||
useEffect(() => {
|
||||
try {
|
||||
const item = window.sessionStorage.getItem(key);
|
||||
if (item) {
|
||||
const timer = setTimeout(() => setState(JSON.parse(item)), 0);
|
||||
return () => clearTimeout(timer);
|
||||
}
|
||||
} catch {}
|
||||
}, [key]);
|
||||
|
||||
const setValue = (value: T | ((val: T) => T)) => {
|
||||
try {
|
||||
const valueToStore = value instanceof Function ? value(state) : value;
|
||||
setState(valueToStore);
|
||||
if (typeof window !== 'undefined') {
|
||||
window.sessionStorage.setItem(key, JSON.stringify(valueToStore));
|
||||
}
|
||||
} catch {}
|
||||
};
|
||||
|
||||
return [state, setValue] as const;
|
||||
}
|
||||
|
||||
// Oblicz wymaganą moc chłodniczą w kW
|
||||
function calculatePower(m2: number, floor: string, sun: string, building: string): number {
|
||||
let power = m2 * 0.1; // baza: 1 kW na 10 m²
|
||||
|
||||
// Korekta typu budynku i piętra
|
||||
if (building === 'apartment') {
|
||||
if (floor === 'top') power *= 1.2; // ostatnie piętro - więcej ciepła z dachu
|
||||
if (floor === 'ground') power *= 0.95;
|
||||
} else if (building === 'house') {
|
||||
if (floor === 'top') power *= 1.1; // poddasze - dodatkowe nagrzewanie
|
||||
}
|
||||
|
||||
// Korekta nasłonecznienia
|
||||
if (sun === 'south') power *= 1.15; // południe - duże nasłonecznienie
|
||||
if (sun === 'west') power *= 1.1;
|
||||
if (sun === 'north') power *= 0.9;
|
||||
|
||||
return Math.round(power * 10) / 10;
|
||||
}
|
||||
|
||||
// Szacunkowy koszt montażu
|
||||
function estimateInstall(pipes: string, rooms: number, installMethod: string): { min: number; max: number } {
|
||||
const base = rooms === 1 ? 1400 : rooms === 2 ? 2400 : rooms === 3 ? 3200 : 3800;
|
||||
// Przybliżona liczba dodatkowych metrów (powyżej 3m)
|
||||
const extraMeters = pipes === 'short' ? 0 : pipes === 'medium' ? 3 : pipes === 'long' ? 7 : 15;
|
||||
const methodPrice = installMethod === 'bruzda' ? 90 : 80; // zł za metr
|
||||
// Zostawmy bazowe koszty rur miedzianych (np. miedź, kable) i dodajmy koszt bruzdy/korytka
|
||||
const pipeBaseCost = pipes === 'short' ? 0 : pipes === 'medium' ? 200 : pipes === 'long' ? 500 : 1000;
|
||||
|
||||
const pipeExtra = pipeBaseCost + (extraMeters * methodPrice);
|
||||
return { min: base + pipeExtra, max: base + pipeExtra + 600 };
|
||||
}
|
||||
const STEPS = ['Pomieszczenie', 'Instalacja', 'Budżet'] as const;
|
||||
export function KalkulatorClient({ products }: Props) {
|
||||
const [showWidthWarning, setShowWidthWarning] = useState(false);
|
||||
const [maxWidth, setMaxWidth] = useState(80);
|
||||
const [step, setStep] = useSessionState('calc_step', 0);
|
||||
const [building, setBuilding] = useSessionState('calc_building', 'apartment');
|
||||
const [pomieszczenia, setPomieszczenia] = useSessionState<{ nazwa: string; m2: number }[]>('calc_pomieszczenia', [
|
||||
{ nazwa: 'Pokój 1', m2: 20 }
|
||||
]);
|
||||
const [floor, setFloor] = useSessionState('calc_floor', 'middle'); // ground | middle | top
|
||||
const [sun, setSun] = useSessionState('calc_sun', 'south'); // north | east | south | west
|
||||
|
||||
const addRoom = () => {
|
||||
if (pomieszczenia.length < 5) {
|
||||
setPomieszczenia(prev => [...prev, { nazwa: `Pokój ${prev.length + 1}`, m2: 15 }]);
|
||||
}
|
||||
};
|
||||
|
||||
const removeRoom = (i: number) => {
|
||||
if (pomieszczenia.length > 1) {
|
||||
setPomieszczenia(prev => prev.filter((_, idx) => idx !== i));
|
||||
}
|
||||
};
|
||||
|
||||
const updateRoom = (i: number, m2: number) => {
|
||||
setPomieszczenia(prev => prev.map((r, idx) => idx === i ? { ...r, m2 } : r));
|
||||
};
|
||||
const [pipes, setPipes] = useSessionState('calc_pipes', 'medium'); // short(<3m) | medium(3-6m) | long(6-10m) | verylong(>10m)
|
||||
const [installMethod, setInstallMethod] = useSessionState<'korytko' | 'bruzda'>('calc_installMethod', 'korytko');
|
||||
|
||||
const [budget, setBudget] = useSessionState('calc_budget', 8000);
|
||||
const [preferredBrand, setPreferredBrand] = useSessionState('calc_brand', '');
|
||||
const [energyClass, setEnergyClass] = useSessionState('calc_energy', '');
|
||||
|
||||
const [page, setPage] = useSessionState('calc_page', 1);
|
||||
|
||||
const totalM2 = pomieszczenia.reduce((sum, p) => sum + p.m2, 0);
|
||||
const rooms = pomieszczenia.length;
|
||||
const requiredPower = useMemo(() =>
|
||||
pomieszczenia.reduce((sum, p) => sum + calculatePower(p.m2, floor, sun, building), 0),
|
||||
[pomieszczenia, floor, sun, building]
|
||||
);
|
||||
const requiredPowerRounded = Math.round(requiredPower * 10) / 10;
|
||||
const installCost = useMemo(() => estimateInstall(pipes, rooms, installMethod), [pipes, rooms, installMethod]);
|
||||
|
||||
const category = rooms === 1 ? 'scienne' : 'multisplit';
|
||||
|
||||
|
||||
const handleNext = () => {
|
||||
setStep(s => s + 1);
|
||||
setPage(1);
|
||||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||||
};
|
||||
|
||||
|
||||
return (
|
||||
<main className="bg-slate-50 min-h-screen py-12">
|
||||
<div className={`mx-auto px-4 sm:px-6 transition-all duration-500 ${step === 3 ? 'max-w-5xl' : 'max-w-2xl'}`}>
|
||||
{/* Header */}
|
||||
<div className="text-center mb-8">
|
||||
<h1 className="text-3xl font-extrabold text-primary font-heading mb-2">
|
||||
Dobierz urządzenie
|
||||
</h1>
|
||||
<p className="text-text-muted">Odpowiedz na {STEPS.length} krótkich pytań — pokażemy Ci najlepsze opcje z naszej oferty</p>
|
||||
</div>
|
||||
|
||||
{/* Pasek postępu */}
|
||||
<div className="flex items-center mb-8">
|
||||
{STEPS.map((s, i) => (
|
||||
<div key={s} className="flex items-start flex-1 last:flex-none">
|
||||
<div className="flex flex-col items-center gap-1">
|
||||
<div className={`size-7 rounded-full flex items-center justify-center text-xs font-bold shrink-0 transition-all ${
|
||||
i < step ? 'bg-green-500 text-white' : i === step ? 'bg-accent text-white' : 'bg-slate-200 text-text-muted'
|
||||
}`}>
|
||||
{i < step ? <Check className="size-3.5" /> : i + 1}
|
||||
</div>
|
||||
<span className={`text-xs font-medium hidden sm:block whitespace-nowrap ${i === step ? 'text-accent' : 'text-text-muted'}`}>{s}</span>
|
||||
</div>
|
||||
{i < STEPS.length - 1 && (
|
||||
<div className={`flex-1 h-0.5 mx-2 mt-[13px] ${i < step ? 'bg-green-500' : 'bg-slate-200'}`} />
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Karty kroków */}
|
||||
<div className="bg-white rounded-2xl border border-border p-6 md:p-8">
|
||||
|
||||
{/* Krok 0: Pomieszczenie */}
|
||||
{step === 0 && (
|
||||
<div className="flex flex-col gap-6">
|
||||
<div className="flex items-center gap-3 mb-2">
|
||||
<div className="size-10 rounded-xl bg-blue-50 flex items-center justify-center">
|
||||
<Home className="size-5 text-blue-600" />
|
||||
</div>
|
||||
<div>
|
||||
<h2 className="text-lg font-bold text-primary font-heading">Pomieszczenie</h2>
|
||||
<p className="text-xs text-text-muted">Metraż i warunki</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Lista pomieszczeń */}
|
||||
<div className="flex flex-col gap-3">
|
||||
{pomieszczenia.map((p, i) => (
|
||||
<div key={i} className="bg-slate-50 rounded-xl border border-border p-4">
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<span className="text-sm font-semibold text-primary">{p.nazwa}</span>
|
||||
{pomieszczenia.length > 1 && (
|
||||
<button
|
||||
onClick={() => removeRoom(i)}
|
||||
className="text-xs text-red-400 hover:text-red-600 transition-colors"
|
||||
>
|
||||
Usuń
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-xs text-text-muted">Powierzchnia</span>
|
||||
<span className="text-xs font-bold text-primary bg-accent/10 px-2 py-0.5 rounded-md">{p.m2} m²</span>
|
||||
</div>
|
||||
<input
|
||||
type="range" min={5} max={100} step={5} value={p.m2}
|
||||
onChange={e => updateRoom(i, Number(e.target.value))}
|
||||
className="range range-xs range-accent w-full"
|
||||
/>
|
||||
<div className="flex justify-between text-xs text-text-muted">
|
||||
<span>5 m²</span>
|
||||
<span>100 m²</span>
|
||||
</div>
|
||||
{(() => {
|
||||
const mocPokoju = Math.round(calculatePower(p.m2, floor, sun, building) * 10) / 10;
|
||||
const dostepneMoce = [2.5, 3.5, 5.0, 7.0];
|
||||
const zalecana = dostepneMoce.reduce((prev, curr) =>
|
||||
Math.abs(curr - mocPokoju) < Math.abs(prev - mocPokoju) ? curr : prev
|
||||
);
|
||||
return (
|
||||
<div className="mt-2 flex items-center justify-between bg-white border border-border rounded-lg px-3 py-2">
|
||||
<span className="text-xs text-text-muted">Zalecana moc jednostki</span>
|
||||
<span className="text-sm font-bold text-accent">{zalecana} kW</span>
|
||||
</div>
|
||||
);
|
||||
})()}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{pomieszczenia.length < 5 && (
|
||||
<button
|
||||
onClick={addRoom}
|
||||
className="flex items-center gap-2 text-sm text-accent font-semibold hover:text-accent/80 transition-colors border border-dashed border-accent/40 rounded-xl px-4 py-3 w-full justify-center"
|
||||
>
|
||||
+ Dodaj kolejne pomieszczenie
|
||||
</button>
|
||||
)}
|
||||
|
||||
{/* Ograniczenie szerokości */}
|
||||
<div className="bg-slate-50 border border-border rounded-xl p-4">
|
||||
<div className="flex items-start justify-between gap-3 mb-2">
|
||||
<div>
|
||||
<p className="text-sm font-semibold text-primary">Ograniczenie szerokości jednostki?</p>
|
||||
<p className="text-xs text-text-muted mt-0.5">Np. wąska ściana, wnęka, szafa</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setShowWidthWarning(prev => !prev)}
|
||||
className={`shrink-0 text-xs font-bold px-3 py-1.5 rounded-lg transition-colors ${
|
||||
showWidthWarning ? 'bg-amber-100 text-amber-700' : 'bg-slate-200 text-slate-600 hover:bg-slate-300'
|
||||
}`}
|
||||
>
|
||||
{showWidthWarning ? 'Tak, mam ograniczenie' : 'Nie dotyczy'}
|
||||
</button>
|
||||
</div>
|
||||
{showWidthWarning && (
|
||||
<div className="mt-3">
|
||||
<div className="flex items-center justify-between mb-1.5">
|
||||
<span className="text-xs text-text-muted">Maksymalna szerokość jednostki</span>
|
||||
<span className="text-xs font-bold text-amber-700 bg-amber-100 px-2 py-0.5 rounded-md">{maxWidth} cm</span>
|
||||
</div>
|
||||
<div className="relative h-5 flex items-center">
|
||||
<div className="absolute w-full h-1.5 bg-slate-200 rounded-full" />
|
||||
<div
|
||||
className="absolute h-1.5 bg-amber-400 rounded-full"
|
||||
style={{ width: `${((maxWidth - 40) / 80) * 100}%` }}
|
||||
/>
|
||||
<input
|
||||
type="range" min={40} max={120} step={5} value={maxWidth}
|
||||
onChange={e => setMaxWidth(Number(e.target.value))}
|
||||
className="absolute w-full h-1.5 opacity-0 cursor-pointer z-10"
|
||||
/>
|
||||
<div
|
||||
className="absolute size-4 bg-white border-2 border-amber-400 rounded-full shadow-md pointer-events-none"
|
||||
style={{ left: `calc(${((maxWidth - 40) / 80) * 100}% - 8px)` }}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex justify-between text-xs text-text-muted mt-1">
|
||||
<span>40 cm</span>
|
||||
<span>120 cm</span>
|
||||
</div>
|
||||
<div className="mt-3 flex items-start gap-2 p-3 bg-amber-50 border border-amber-200 rounded-xl">
|
||||
<span className="text-amber-500 text-base shrink-0">⚠️</span>
|
||||
<p className="text-xs text-amber-800 leading-relaxed">
|
||||
Standardowe jednostki split mają <strong>70–110 cm szerokości</strong>.
|
||||
{maxWidth < 70 && ' Przy tak małej przestrzeni wybór jest bardzo ograniczony — '}
|
||||
{maxWidth >= 70 && maxWidth < 85 && ' Przy tej szerokości dostępne są kompaktowe modele — '}
|
||||
{maxWidth >= 85 && ' Większość modeli powinna się zmieścić — '}
|
||||
skonsultuj wymiary konkretnego modelu przed zakupem.
|
||||
<a href="/kontakt" className="ml-1 font-bold text-amber-700 underline">Zapytaj nas →</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="p-3 bg-accent/10 rounded-xl">
|
||||
<p className="text-sm text-accent font-semibold">
|
||||
Łączna wymagana moc: ok. <strong>{requiredPowerRounded} kW</strong>
|
||||
<span className="text-xs font-normal text-text-muted ml-2">
|
||||
({pomieszczenia.length === 1 ? 'klimatyzator split' : `multisplit ${pomieszczenia.length}+1`}, łącznie {totalM2} m²)
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="text-sm font-semibold text-primary mb-3 block">Typ budynku</label>
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
{[
|
||||
{ value: 'apartment', label: '🏢 Mieszkanie w bloku', sub: 'Kamienica, wieżowiec, blok' },
|
||||
{ value: 'house', label: '🏠 Dom jednorodzinny', sub: 'Wolnostojący, szeregowiec, bliźniak' },
|
||||
].map(o => (
|
||||
<button key={o.value} onClick={() => setBuilding(o.value)}
|
||||
className={`p-4 rounded-xl border-2 text-left transition-all ${building === o.value ? 'border-accent bg-accent/5' : 'border-border hover:border-accent'}`}>
|
||||
<p className="text-sm font-bold text-primary">{o.label}</p>
|
||||
<p className="text-xs text-text-muted">{o.sub}</p>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{building === 'house' && (
|
||||
<div>
|
||||
<label className="text-sm font-semibold text-primary mb-3 block">Typ przestrzeni</label>
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
{[
|
||||
{ value: 'ground', label: '🏠 Parter' },
|
||||
{ value: 'top', label: '🏠 Piętro / poddasze' },
|
||||
].map(o => (
|
||||
<button key={o.value} onClick={() => setFloor(o.value)}
|
||||
className={`py-2.5 px-3 rounded-xl text-sm font-semibold border-2 transition-all ${floor === o.value ? 'border-accent bg-accent text-white' : 'border-border bg-white text-primary hover:border-accent'}`}>
|
||||
{o.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{building === 'apartment' && (
|
||||
<div>
|
||||
<label className="text-sm font-semibold text-primary mb-3 block">Piętro</label>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{[
|
||||
{ value: 'ground', label: 'Parter' },
|
||||
{ value: 'low', label: '1-3 piętro' },
|
||||
{ value: 'middle', label: '4-8 piętro' },
|
||||
{ value: 'high', label: '9+ piętro' },
|
||||
{ value: 'top', label: 'Ostatnie' },
|
||||
].map(o => (
|
||||
<button key={o.value} onClick={() => setFloor(o.value)}
|
||||
className={`py-2 px-4 rounded-xl text-sm font-semibold border-2 transition-all ${floor === o.value ? 'border-accent bg-accent text-white' : 'border-border bg-white text-primary hover:border-accent'}`}>
|
||||
{o.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div>
|
||||
<label className="text-sm font-semibold text-primary mb-3 block">Ekspozycja okien</label>
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
{[
|
||||
{ value: 'north', label: '🧭 Północ (chłodna)' },
|
||||
{ value: 'east', label: '🧭 Wschód' },
|
||||
{ value: 'west', label: '🧭 Zachód' },
|
||||
{ value: 'south', label: '🧭 Południe (mocne słońce)' },
|
||||
].map(o => (
|
||||
<button key={o.value} onClick={() => setSun(o.value)}
|
||||
className={`py-2.5 px-3 rounded-xl text-sm font-semibold border-2 transition-all ${sun === o.value ? 'border-accent bg-accent text-white' : 'border-border bg-white text-primary hover:border-accent'}`}>
|
||||
{o.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Krok 2: Instalacja */}
|
||||
{step === 1 && (
|
||||
<div className="flex flex-col gap-6">
|
||||
<div className="flex items-center gap-3 mb-2">
|
||||
<div className="size-10 rounded-xl bg-orange-50 flex items-center justify-center">
|
||||
<Zap className="size-5 text-orange-600" />
|
||||
</div>
|
||||
<div>
|
||||
<h2 className="text-lg font-bold text-primary font-heading">Długość instalacji</h2>
|
||||
<p className="text-xs text-text-muted">Rury i kable między jednostkami</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-3">
|
||||
{[
|
||||
{ value: 'short', label: 'Do 3 metrów', sub: 'Jednostka zewnętrzna tuż obok (balkon, taras)' },
|
||||
{ value: 'medium', label: '3–6 metrów', sub: 'Typowa instalacja w bloku lub domu' },
|
||||
{ value: 'long', label: '6–10 metrów', sub: 'Dłuższa trasa, np. przez kilka pomieszczeń' },
|
||||
{ value: 'verylong', label: 'Powyżej 10 metrów', sub: 'Bardzo długa trasa, wymaga dodatkowych materiałów' },
|
||||
].map(o => (
|
||||
<button key={o.value} onClick={() => setPipes(o.value)}
|
||||
className={`p-4 rounded-xl border-2 text-left transition-all ${pipes === o.value ? 'border-accent bg-accent/5' : 'border-border hover:border-accent'}`}>
|
||||
<p className="text-sm font-bold text-primary">{o.label}</p>
|
||||
<p className="text-xs text-text-muted">{o.sub}</p>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="text-sm font-semibold text-primary mb-3 block">Sposób prowadzenia instalacji (powyżej 3m)</label>
|
||||
<div className="flex flex-col gap-3">
|
||||
{[
|
||||
{ value: 'korytko', label: 'Korytko PCV', sub: 'Rury schowane w białym korytku (80 zł/mb)' },
|
||||
{ value: 'bruzda', label: 'Bruzda w ścianie', sub: 'Rury ukryte w wykutej bruzdzie (90 zł/mb)' },
|
||||
].map(o => (
|
||||
<button key={o.value} onClick={() => setInstallMethod(o.value as 'korytko' | 'bruzda')}
|
||||
className={`p-4 rounded-xl border-2 text-left transition-all ${installMethod === o.value ? 'border-accent bg-accent/5' : 'border-border hover:border-accent'}`}>
|
||||
<p className="text-sm font-bold text-primary">{o.label}</p>
|
||||
<p className="text-xs text-text-muted">{o.sub}</p>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="p-3 bg-orange-50 rounded-xl text-xs text-orange-700">
|
||||
Szacowany koszt montażu dla Twojej konfiguracji:
|
||||
<strong className="ml-1">{installCost.min.toLocaleString('pl-PL')}–{installCost.max.toLocaleString('pl-PL')} zł</strong>
|
||||
</div>
|
||||
|
||||
<div className="mt-3 p-4 bg-blue-50 border border-blue-200 rounded-xl">
|
||||
<p className="text-sm font-semibold text-blue-900 mb-1">📐 Chcesz dokładną wycenę?</p>
|
||||
<p className="text-xs text-blue-800 leading-relaxed">
|
||||
Skontaktuj się z nami — wycena jest <strong>bezpłatna i niezobowiązująca</strong>.
|
||||
Aby przyspieszyć wycenę, wyślij nam zdjęcia:
|
||||
</p>
|
||||
<ul className="mt-2 flex flex-col gap-1">
|
||||
{[
|
||||
'Miejsca gdzie ma wisieć jednostka wewnętrzna',
|
||||
'Ściany przez które przejdzie instalacja',
|
||||
'Miejsca gdzie stanie jednostka zewnętrzna',
|
||||
'Skrzynki elektrycznej (bezpieczniki)',
|
||||
].map((item, i) => (
|
||||
<li key={i} className="flex items-start gap-2 text-xs text-blue-800">
|
||||
<span className="text-blue-500 shrink-0">→</span>
|
||||
{item}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<a href="/kontakt" className="mt-3 inline-flex items-center gap-1.5 text-xs font-bold text-white bg-accent px-3 py-1.5 rounded-lg hover:bg-accent/90 transition-colors">
|
||||
Wyślij zdjęcia i zapytaj o wycenę →
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Krok 3: Budżet */}
|
||||
{step === 2 && (
|
||||
<div className="flex flex-col gap-6">
|
||||
<div className="flex items-center gap-3 mb-2">
|
||||
<div className="size-10 rounded-xl bg-green-50 flex items-center justify-center">
|
||||
<ShoppingCart className="size-5 text-green-600" />
|
||||
</div>
|
||||
<div>
|
||||
<h2 className="text-lg font-bold text-primary font-heading">Całkowity budżet</h2>
|
||||
<p className="text-xs text-text-muted">Urządzenie + montaż łącznie</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-xs text-text-muted">Budżet</span>
|
||||
<span className="text-xs font-bold text-primary bg-accent/10 px-2 py-0.5 rounded-md">{budget.toLocaleString('pl-PL')} zł</span>
|
||||
</div>
|
||||
<input
|
||||
type="range" min={3000} max={25000} step={500} value={budget}
|
||||
onChange={e => setBudget(Number(e.target.value))}
|
||||
className="range range-xs range-accent w-full"
|
||||
/>
|
||||
<div className="flex justify-between text-xs text-text-muted">
|
||||
<span>3 000 zł</span>
|
||||
<span>25 000 zł</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div className="bg-slate-50 rounded-xl p-3">
|
||||
<p className="text-xs text-text-muted mb-1">Na urządzenie zostaje</p>
|
||||
<p className="text-base font-bold text-primary font-heading">
|
||||
ok. {(budget * 0.75).toLocaleString('pl-PL')} zł
|
||||
</p>
|
||||
</div>
|
||||
<div className="bg-orange-50 rounded-xl p-3">
|
||||
<p className="text-xs text-orange-700 mb-1">Szac. koszt montażu</p>
|
||||
<p className="text-base font-bold text-orange-700 font-heading">
|
||||
{installCost.min.toLocaleString('pl-PL')}–{installCost.max.toLocaleString('pl-PL')} zł
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="p-3 bg-blue-50 rounded-xl text-xs text-blue-700">
|
||||
💡 Podsumowanie: szukamy klimatyzatora <strong>{category === 'scienne' ? 'split ściennego' : 'multisplit'}</strong> o mocy ok. <strong>{requiredPowerRounded} kW</strong> w cenie do <strong>{(budget * 0.75).toLocaleString('pl-PL')} zł</strong>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="text-sm font-semibold text-primary mb-3 block">
|
||||
Preferowana marka (opcjonalnie)
|
||||
</label>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{['Bez preferencji', 'Gree', 'Rotenso', 'Daikin', 'Haier', 'LG', 'Samsung', 'Mitsubishi Electric', 'Toshiba', 'Fuji Electric'].map(b => (
|
||||
<button
|
||||
key={b}
|
||||
onClick={() => setPreferredBrand(b === 'Bez preferencji' ? '' : b)}
|
||||
className={`px-3 py-1.5 rounded-xl text-xs font-semibold border-2 transition-all ${
|
||||
(b === 'Bez preferencji' && preferredBrand === '') || preferredBrand === b
|
||||
? 'border-accent bg-accent text-white'
|
||||
: 'border-border bg-white text-primary hover:border-accent'
|
||||
}`}
|
||||
>
|
||||
{b}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="text-sm font-semibold text-primary mb-3 block">
|
||||
Klasa energetyczna (opcjonalnie)
|
||||
</label>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{['Bez preferencji', 'A+++', 'A++', 'A+'].map(c => (
|
||||
<button
|
||||
key={c}
|
||||
onClick={() => setEnergyClass(c === 'Bez preferencji' ? '' : c)}
|
||||
className={`px-3 py-1.5 rounded-xl text-xs font-semibold border-2 transition-all ${
|
||||
(c === 'Bez preferencji' && energyClass === '') || energyClass === c
|
||||
? 'border-accent bg-accent text-white'
|
||||
: 'border-border bg-white text-primary hover:border-accent'
|
||||
}`}
|
||||
>
|
||||
{c}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
||||
|
||||
{step === 2 && (
|
||||
<div className="flex flex-col gap-6">
|
||||
{/* Podsumowanie */}
|
||||
<div className="bg-slate-50 rounded-2xl border border-border p-5">
|
||||
<h2 className="text-lg font-bold text-primary font-heading mb-4">
|
||||
Dopasowane klimatyzatory
|
||||
</h2>
|
||||
<div className="grid grid-cols-2 md:grid-cols-3 gap-3">
|
||||
{[
|
||||
{ label: 'Wymagana moc', value: `${requiredPowerRounded} kW` },
|
||||
{ label: 'Powierzchnia', value: `${totalM2} m²` },
|
||||
{ label: 'Typ instalacji', value: category === 'scienne' ? 'Split (1 pokój)' : `Multisplit (${rooms} pokoje)` },
|
||||
{ label: 'Szac. montaż', value: `${installCost.min.toLocaleString('pl-PL')}–${installCost.max.toLocaleString('pl-PL')} zł` },
|
||||
...(energyClass ? [{ label: 'Klasa energetyczna', value: energyClass }] : []),
|
||||
|
||||
].map((s, i) => (
|
||||
<div key={i} className="bg-white rounded-xl p-3 border border-border">
|
||||
<p className="text-xs text-text-muted mb-1">{s.label}</p>
|
||||
<p className="text-sm font-bold text-primary font-heading">{s.value}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="p-4 bg-amber-50 border border-amber-200 rounded-xl mt-2">
|
||||
<p className="text-xs font-bold text-amber-800 mb-1">⚠️ Ceny mają charakter orientacyjny</p>
|
||||
<p className="text-xs text-amber-700 mb-3">
|
||||
Podane ceny urządzeń są cenami brutto (23% VAT). Koszt montażu jest szacunkowy. Zachęcamy do darmowej wyceny.
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row gap-2">
|
||||
<a href={`tel:${companyDetails.phoneRaw}`}>
|
||||
<button className="flex items-center gap-2 px-4 py-2 bg-accent text-white rounded-xl text-xs font-bold hover:bg-accent/90 transition-colors">
|
||||
<Phone className="size-3.5" /> Bezpłatna wycena
|
||||
</button>
|
||||
</a>
|
||||
<Link href="/kontakt" className="flex items-center gap-2 px-4 py-2 bg-amber-100 text-amber-800 rounded-xl text-xs font-bold hover:bg-amber-200 transition-colors border border-amber-300">
|
||||
|
||||
Prześlij zdjęcia
|
||||
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Nawigacja */}
|
||||
<div className="flex justify-between mt-8 pt-6 border-t border-border">
|
||||
{step > 0 ? (
|
||||
<button onClick={() => setStep(s => s - 1)}
|
||||
className="flex items-center gap-2 px-4 py-2.5 border border-border rounded-xl text-sm font-semibold text-primary hover:border-accent transition-colors">
|
||||
<ArrowLeft className="size-4" /> Wstecz
|
||||
</button>
|
||||
) : <div />}
|
||||
|
||||
{step < STEPS.length - 1 ? (
|
||||
<button onClick={handleNext}
|
||||
className="flex items-center gap-2 px-6 py-2.5 bg-accent text-white rounded-xl text-sm font-bold hover:bg-accent/90 transition-colors">
|
||||
Dalej <ArrowRight className="size-4" />
|
||||
</button>
|
||||
) : (
|
||||
<Link href="/sklep" className="flex items-center gap-2 px-6 py-2.5 bg-accent text-white rounded-xl text-sm font-bold hover:bg-accent/90 transition-colors">
|
||||
|
||||
Przejdź do sklepu <ArrowRight className="size-4" />
|
||||
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,181 @@
|
||||
import Link from "next/link";
|
||||
import { Phone, Mail, MapPin, Clock, Facebook, Instagram, ShieldCheck } from "lucide-react";
|
||||
import { companyDetails } from "@/content/company";
|
||||
import { CookieSettingsTrigger } from "@/components/ui/CookieSettingsTrigger";
|
||||
|
||||
export function Footer() {
|
||||
const currentYear = new Date().getFullYear();
|
||||
|
||||
return (
|
||||
<footer className="bg-[#00188D] text-primary-foreground">
|
||||
{/* Main Footer Content */}
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12">
|
||||
{/* Column 1: Company details */}
|
||||
<div className="flex flex-col gap-4">
|
||||
<Link href="/" className="inline-block">
|
||||
<span className="text-2xl font-bold font-heading text-white">
|
||||
{companyDetails.shortName}
|
||||
<span className="text-white">.</span>
|
||||
</span>
|
||||
</Link>
|
||||
<p className="text-sm text-slate-300 max-w-xs leading-relaxed">
|
||||
Profesjonalne usługi w zakresie klimatyzacji i pomp ciepła dla domów, mieszkań i firm.
|
||||
</p>
|
||||
<div className="flex flex-col gap-3 mt-2 text-sm text-slate-300">
|
||||
<a
|
||||
href={`tel:${companyDetails.phoneRaw}`}
|
||||
className="flex items-center gap-2.5 hover:text-white transition-colors"
|
||||
>
|
||||
<Phone className="size-4 shrink-0 text-white" />
|
||||
<span>{companyDetails.phone}</span>
|
||||
</a>
|
||||
<a
|
||||
href={`mailto:${companyDetails.email}`}
|
||||
className="flex items-center gap-2.5 hover:text-white transition-colors"
|
||||
>
|
||||
<Mail className="size-4 shrink-0 text-white" />
|
||||
<span>{companyDetails.email}</span>
|
||||
</a>
|
||||
<div className="flex items-start gap-2.5">
|
||||
<MapPin className="size-4 shrink-0 mt-0.5 text-white" />
|
||||
<span>
|
||||
{companyDetails.address.street},<br />
|
||||
{companyDetails.address.zipCode} {companyDetails.address.city}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-start gap-2.5">
|
||||
<Clock className="size-4 shrink-0 mt-0.5 text-white" />
|
||||
<span>{companyDetails.hours}</span>
|
||||
</div>
|
||||
<div className="text-xs text-slate-400 mt-1">
|
||||
NIP: {companyDetails.nip}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Column 2: Services */}
|
||||
<div>
|
||||
<h3 className="text-base font-semibold font-heading text-white mb-6 uppercase tracking-wider">
|
||||
Usługi
|
||||
</h3>
|
||||
<ul className="flex flex-col gap-3 text-sm text-slate-300">
|
||||
<li>
|
||||
<Link href="/klimatyzacja" className="hover:text-white transition-colors">
|
||||
Klimatyzacja i Montaż
|
||||
</Link>
|
||||
</li>
|
||||
|
||||
|
||||
<li>
|
||||
<Link href="/sklep" className="hover:text-white transition-colors">
|
||||
Sklep online
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Column 3: Information */}
|
||||
<div>
|
||||
<h3 className="text-base font-semibold font-heading text-white mb-6 uppercase tracking-wider">
|
||||
Informacje
|
||||
</h3>
|
||||
<ul className="flex flex-col gap-3 text-sm text-slate-300">
|
||||
{/* <li>
|
||||
<Link href="/o-nas" className="hover:text-white transition-colors">
|
||||
O nas
|
||||
</Link>
|
||||
</li> */}
|
||||
<li>
|
||||
<Link href="/realizacje" className="hover:text-white transition-colors">
|
||||
Realizacje (Portfolio)
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="/blog" className="hover:text-white transition-colors">
|
||||
Blog i Poradniki
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="/regulamin" className="hover:text-white transition-colors">
|
||||
Regulamin
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="/polityka-prywatnosci" className="hover:text-white transition-colors">
|
||||
Polityka prywatności
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="/reklamacje" className="hover:text-white transition-colors">
|
||||
Reklamacje
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="/kontakt" className="hover:text-white transition-colors">
|
||||
Kontakt
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Column 4: Obsługa Klienta */}
|
||||
<div>
|
||||
<h3 className="text-base font-semibold font-heading text-white mb-6 uppercase tracking-wider">
|
||||
Obsługa Klienta
|
||||
</h3>
|
||||
<ul className="flex flex-col gap-3 text-sm text-slate-300">
|
||||
<li>
|
||||
<Link href="/sklep" className="hover:text-white transition-colors">
|
||||
Sklep online
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Bottom Bar */}
|
||||
<div className="border-t border-slate-800 bg-slate-950/40 py-6">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex flex-col sm:flex-row justify-between items-center gap-4">
|
||||
<div className="flex flex-col gap-2">
|
||||
<p className="text-xs text-slate-400 text-center sm:text-left">
|
||||
© {currentYear} {companyDetails.name}. Wszelkie prawa zastrzeżone. Projekt strony i wdrożenie ThermCool.
|
||||
</p>
|
||||
<CookieSettingsTrigger />
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-6">
|
||||
{/* Social Icons */}
|
||||
<div className="flex gap-4">
|
||||
<a
|
||||
href={companyDetails.socials.facebook}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-slate-400 hover:text-white transition-colors"
|
||||
aria-label="Odwiedź nasz profil na Facebooku"
|
||||
>
|
||||
<Facebook className="size-4" />
|
||||
</a>
|
||||
<a
|
||||
href={companyDetails.socials.instagram}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-slate-400 hover:text-white transition-colors"
|
||||
aria-label="Odwiedź nasz profil na Instagramie"
|
||||
>
|
||||
<Instagram className="size-4" />
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{/* Trust Symbol */}
|
||||
<div className="flex items-center gap-1.5 text-xs text-slate-400 border-l border-slate-800 pl-6">
|
||||
<ShieldCheck className="size-4 text-white" />
|
||||
<span>Bezpieczne płatności SSL</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,249 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect } from "react";
|
||||
import Link from "next/link";
|
||||
import { ShoppingBag, Menu, Phone, Wrench } from "lucide-react";
|
||||
import { NavDropdown } from "./NavDropdown";
|
||||
import { MobileMenu } from "./MobileMenu";
|
||||
import { useCartStore } from "@/lib/cart-store";
|
||||
import { companyDetails } from "@/content/company";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { buttonClasses } from '@/components/ui/Button';
|
||||
|
||||
|
||||
export function Header() {
|
||||
const [isScrolled, setIsScrolled] = useState(false);
|
||||
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
|
||||
const [mounted, setMounted] = useState(false);
|
||||
|
||||
const cartItems = useCartStore((state) => state.items);
|
||||
|
||||
useEffect(() => {
|
||||
const t = setTimeout(() => setMounted(true), 0);
|
||||
const handleScroll = () => {
|
||||
if (window.scrollY > 40) {
|
||||
setIsScrolled(true);
|
||||
} else {
|
||||
setIsScrolled(false);
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener("scroll", handleScroll);
|
||||
return () => {
|
||||
window.removeEventListener("scroll", handleScroll);
|
||||
clearTimeout(t);
|
||||
};
|
||||
}, []);
|
||||
|
||||
const cartCount = mounted
|
||||
? cartItems.reduce((total, item) => total + item.quantity, 0)
|
||||
: 0;
|
||||
|
||||
const acSections = [
|
||||
{
|
||||
title: "Klimatyzatory",
|
||||
items: [
|
||||
{
|
||||
label: "Ścienne split",
|
||||
href: "/sklep?category=scienne",
|
||||
description: "Klasyczne jednostki ścienne do mieszkań",
|
||||
},
|
||||
{
|
||||
label: "Multisplit",
|
||||
href: "/sklep?category=multisplit",
|
||||
description: "Systemy wielopokojowe (2-5 pomieszczeń)",
|
||||
},
|
||||
/* {
|
||||
label: "Kasetonowe i konsolowe",
|
||||
href: "/sklep?category=kasetonowe",
|
||||
description: "Modele biurowe i przypodłogowe",
|
||||
}, */
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Usługi HVAC",
|
||||
items: [
|
||||
{
|
||||
label: "Montaż klimatyzacji",
|
||||
href: "/montaz-klimatyzacji",
|
||||
description: "Kompleksowy dobór, audyt i montaż",
|
||||
},
|
||||
{
|
||||
label: "Serwis i czyszczenie",
|
||||
href: "/serwis-klimatyzacji",
|
||||
description: "Odgrzybianie, naprawy i przeglądy",
|
||||
},
|
||||
{
|
||||
label: "Cennik montażu",
|
||||
href: "/cennik-montazu",
|
||||
description: "Przejrzyste ceny — split, multisplit, bruzda",
|
||||
},
|
||||
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* ----------------- DESKTOP: TOP BAR ----------------- */}
|
||||
<div className="hidden lg:block bg-muted py-2 border-b border-border/50">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between">
|
||||
{/* Top Bar Left: Logo */}
|
||||
<Link href="/" className="shrink-0 flex items-center gap-3">
|
||||
<span className="text-2xl font-bold font-heading text-primary">
|
||||
{companyDetails.shortName}
|
||||
<span className="text-accent">.</span>
|
||||
</span>
|
||||
<span className="text-xs text-muted-foreground font-medium border-l border-border pl-3">
|
||||
Klimatyzacja na Dolnym Śląsku
|
||||
</span>
|
||||
</Link>
|
||||
|
||||
{/* Top Bar Right: Phone & Icons */}
|
||||
<div className="flex items-center gap-6">
|
||||
<a
|
||||
href={`tel:${companyDetails.phoneRaw}`}
|
||||
className="flex items-center gap-2 text-sm font-semibold text-primary hover:text-accent transition-colors whitespace-nowrap"
|
||||
>
|
||||
<Phone className="size-4 text-accent" />
|
||||
<span>{companyDetails.phone}</span>
|
||||
</a>
|
||||
|
||||
<div className="flex items-center gap-1">
|
||||
<Link href="/koszyk" className="p-2 text-primary hover:text-accent hover:bg-background rounded-lg transition-colors relative outline-none" aria-label="Koszyk">
|
||||
<ShoppingBag className="size-5" />
|
||||
{cartCount > 0 && (
|
||||
<span className="absolute top-0 right-0 bg-accent text-white text-[10px] font-bold size-4 rounded-full flex items-center justify-center translate-x-0.5 -translate-y-0.5">
|
||||
{cartCount}
|
||||
</span>
|
||||
)}
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ----------------- DESKTOP: NAV BAR (STICKY) ----------------- */}
|
||||
<header
|
||||
className={cn(
|
||||
"hidden lg:block sticky top-0 z-40 bg-background transition-all duration-300 border-b border-border",
|
||||
isScrolled ? "shadow-md py-2" : "py-4"
|
||||
)}
|
||||
>
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between">
|
||||
{/* Main Navigation */}
|
||||
<nav className="flex items-center gap-8">
|
||||
{isScrolled && (
|
||||
<Link href="/" className="shrink-0 flex items-center mr-2">
|
||||
<span className="text-xl font-bold font-heading text-primary">
|
||||
{companyDetails.shortName}
|
||||
<span className="text-accent">.</span>
|
||||
</span>
|
||||
</Link>
|
||||
)}
|
||||
|
||||
<NavDropdown
|
||||
label="Klimatyzacja"
|
||||
triggerHref="/klimatyzacja"
|
||||
sections={acSections}
|
||||
align="left"
|
||||
/>
|
||||
|
||||
<NavDropdown
|
||||
label="Sklep"
|
||||
triggerHref="/sklep"
|
||||
sections={[
|
||||
{
|
||||
title: "Kategorie produktów",
|
||||
items: [
|
||||
{ label: "Klimatyzatory ścienne", href: "/sklep?category=scienne", description: "Jednostki do domu i biura" },
|
||||
{ label: "Klimatyzatory multisplit", href: "/sklep?category=multisplit", description: "Systemy na kilka pomieszczeń" },
|
||||
]
|
||||
}
|
||||
]}
|
||||
align="left"
|
||||
/>
|
||||
<Link
|
||||
href="/kalkulator"
|
||||
className="text-sm font-medium text-primary hover:text-accent transition-colors"
|
||||
>
|
||||
Dobór urządzenia
|
||||
</Link>
|
||||
|
||||
<Link
|
||||
href="/blog"
|
||||
className="text-sm font-medium text-primary hover:text-accent transition-colors"
|
||||
>
|
||||
Blog
|
||||
</Link>
|
||||
{/* <Link
|
||||
href="/o-nas"
|
||||
className="text-sm font-medium text-primary hover:text-accent transition-colors"
|
||||
>
|
||||
O nas
|
||||
</Link> */}
|
||||
<Link
|
||||
href="/kontakt"
|
||||
className="text-sm font-medium text-primary hover:text-accent transition-colors"
|
||||
>
|
||||
Kontakt
|
||||
</Link>
|
||||
</nav>
|
||||
|
||||
{/* CTA Button */}
|
||||
<div className="hidden lg:flex items-center gap-3">
|
||||
<Link href="/kontakt" className={buttonClasses({ variant: 'primary', size: 'sm' })}>
|
||||
|
||||
Darmowa wycena
|
||||
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* ----------------- MOBILE: HEADER (STICKY) ----------------- */}
|
||||
<header
|
||||
className={cn(
|
||||
"lg:hidden sticky top-0 z-40 bg-background border-b border-border transition-all duration-300",
|
||||
isScrolled ? "shadow-md py-3" : "py-4"
|
||||
)}
|
||||
>
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 flex items-center justify-between">
|
||||
{/* Mobile Logo */}
|
||||
<Link href="/" className="shrink-0 flex items-center">
|
||||
<span className="text-xl font-bold font-heading text-primary">
|
||||
{companyDetails.shortName}
|
||||
<span className="text-accent">.</span>
|
||||
</span>
|
||||
</Link>
|
||||
|
||||
{/* Mobile Icons (Cart + Hamburger) */}
|
||||
<div className="flex items-center gap-3">
|
||||
<Link href="/koszyk" className="p-2 text-primary hover:text-accent hover:bg-muted transition-colors rounded-lg relative outline-none" aria-label="Koszyk">
|
||||
<ShoppingBag className="size-5" />
|
||||
{cartCount > 0 && (
|
||||
<span className="absolute top-0 right-0 bg-accent text-white text-[10px] font-bold size-4 rounded-full flex items-center justify-center translate-x-0.5 -translate-y-0.5">
|
||||
{cartCount}
|
||||
</span>
|
||||
)}
|
||||
</Link>
|
||||
|
||||
<button
|
||||
onClick={() => setIsMobileMenuOpen(true)}
|
||||
className="p-2 text-primary hover:text-accent hover:bg-muted transition-colors rounded-lg outline-none"
|
||||
aria-label="Otwórz menu"
|
||||
>
|
||||
<Menu className="size-6" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* ----------------- MOBILE MENU DRAWER ----------------- */}
|
||||
<MobileMenu
|
||||
isOpen={isMobileMenuOpen}
|
||||
onClose={() => setIsMobileMenuOpen(false)}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,222 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect } from "react";
|
||||
import Link from "next/link";
|
||||
import { X, Phone, ChevronRight } from "lucide-react";
|
||||
import { companyDetails } from "@/content/company";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
interface MobileMenuProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
export function MobileMenu({ isOpen, onClose }: MobileMenuProps) {
|
||||
// Prevent body scrolling when menu is open
|
||||
useEffect(() => {
|
||||
if (isOpen) {
|
||||
document.body.style.overflow = "hidden";
|
||||
} else {
|
||||
document.body.style.overflow = "";
|
||||
}
|
||||
return () => {
|
||||
document.body.style.overflow = "";
|
||||
};
|
||||
}, [isOpen]);
|
||||
|
||||
const hvacSections = [
|
||||
{ label: 'Ofertowana klimatyzacja', href: '/klimatyzacja' },
|
||||
{ label: 'Klimatyzatory ścienne', href: '/sklep?category=scienne' },
|
||||
{ label: 'Klimatyzatory multisplit', href: '/sklep?category=multisplit' },
|
||||
/* { label: 'Klimatyzatory kasetonowe', href: '/sklep?category=kasetonowe' },
|
||||
{ label: 'Klimatyzatory konsolowe', href: '/sklep?category=konsolowe' }, */
|
||||
];
|
||||
|
||||
const serwisSections = [
|
||||
{ label: 'Montaż klimatyzacji', href: '/montaz-klimatyzacji' },
|
||||
{ label: 'Serwis i czyszczenie', href: '/serwis-klimatyzacji' },
|
||||
{ label: 'Cennik montażu', href: '/cennik-montazu' },
|
||||
|
||||
];
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
"fixed inset-0 z-50 lg:hidden transition-all duration-300",
|
||||
isOpen ? "pointer-events-auto" : "pointer-events-none"
|
||||
)}
|
||||
>
|
||||
<div
|
||||
className={cn(
|
||||
"absolute inset-0 bg-black/60 transition-opacity duration-300",
|
||||
isOpen ? "opacity-100" : "opacity-0"
|
||||
)}
|
||||
onClick={onClose}
|
||||
/>
|
||||
|
||||
<div
|
||||
className={cn(
|
||||
"absolute top-0 right-0 bottom-0 w-full max-w-sm bg-white shadow-xl flex flex-col transition-transform duration-300 ease-in-out",
|
||||
isOpen ? "translate-x-0" : "translate-x-full"
|
||||
)}
|
||||
>
|
||||
<div className="flex justify-between items-center px-6 py-4 border-b border-border">
|
||||
<span className="text-xl font-bold font-heading text-primary">
|
||||
Menu<span className="text-accent">.</span>
|
||||
</span>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="p-1 rounded-lg hover:bg-muted text-primary transition-colors focus:ring-2 focus:ring-accent outline-none"
|
||||
aria-label="Zamknij menu"
|
||||
>
|
||||
<X className="size-6" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 overflow-y-auto px-6 py-4">
|
||||
<div className="w-full">
|
||||
{/* 1. Klimatyzacja */}
|
||||
<details className="collapse collapse-arrow border-b border-border rounded-none">
|
||||
<summary className="collapse-title text-sm font-medium text-primary hover:text-accent py-3 px-0 min-h-0">
|
||||
Klimatyzacja
|
||||
</summary>
|
||||
<div className="collapse-content px-0 pb-2">
|
||||
<ul className="flex flex-col gap-2.5 pl-4 pb-2">
|
||||
{hvacSections.map((item, idx) => (
|
||||
<li key={idx}>
|
||||
<Link
|
||||
href={item.href}
|
||||
onClick={onClose}
|
||||
className="text-sm text-text-muted hover:text-accent transition-colors flex items-center justify-between py-1"
|
||||
>
|
||||
<span>{item.label}</span>
|
||||
<ChevronRight className="size-3.5 opacity-60" />
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
{/* Usługi i serwis */}
|
||||
<details className="collapse collapse-arrow border-b border-border rounded-none">
|
||||
<summary className="collapse-title text-sm font-medium text-primary hover:text-accent py-3 px-0 min-h-0">
|
||||
Usługi i serwis
|
||||
</summary>
|
||||
<div className="collapse-content px-0 pb-2">
|
||||
<ul className="flex flex-col gap-2.5 pl-4 pb-2">
|
||||
{serwisSections.map((item, idx) => (
|
||||
<li key={idx}>
|
||||
<Link
|
||||
href={item.href}
|
||||
onClick={onClose}
|
||||
className="text-sm text-text-muted hover:text-accent transition-colors flex items-center justify-between py-1"
|
||||
>
|
||||
<span>{item.label}</span>
|
||||
<ChevronRight className="size-3.5 opacity-60" />
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
{/* 2. Pompy Ciepła */}
|
||||
|
||||
|
||||
{/* Sklep */}
|
||||
<details className="collapse collapse-arrow border-b border-border rounded-none">
|
||||
<summary className="collapse-title text-sm font-medium text-primary hover:text-accent py-3 px-0 min-h-0">
|
||||
Sklep
|
||||
</summary>
|
||||
<div className="collapse-content px-0 pb-2">
|
||||
<ul className="flex flex-col gap-2.5 pl-4 pb-2">
|
||||
{[
|
||||
{ label: "Klimatyzatory ścienne", href: "/sklep?category=scienne" },
|
||||
{ label: "Klimatyzatory multisplit", href: "/sklep?category=multisplit" },
|
||||
].map((item, idx) => (
|
||||
<li key={idx}>
|
||||
<Link
|
||||
href={item.href}
|
||||
onClick={onClose}
|
||||
className="text-sm text-text-muted hover:text-accent transition-colors flex items-center justify-between py-1"
|
||||
>
|
||||
<span>{item.label}</span>
|
||||
<ChevronRight className="size-3.5 opacity-60" />
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
{/* 3. Dobór urządzenia */}
|
||||
<div className="border-b border-border py-3">
|
||||
<Link
|
||||
href="/kalkulator"
|
||||
onClick={onClose}
|
||||
className="text-sm font-medium text-primary hover:text-accent block"
|
||||
>
|
||||
Dobór urządzenia
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
{/* 5. Blog */}
|
||||
<div className="border-b border-border py-3">
|
||||
<Link
|
||||
href="/blog"
|
||||
onClick={onClose}
|
||||
className="text-sm font-medium text-primary hover:text-accent block"
|
||||
>
|
||||
Blog
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{/* 6. O Nas */}
|
||||
{/* <div className="border-b border-border py-3">
|
||||
<Link
|
||||
href="/o-nas"
|
||||
onClick={onClose}
|
||||
className="text-sm font-medium text-primary hover:text-accent block"
|
||||
>
|
||||
O nas
|
||||
</Link>
|
||||
</div> */}
|
||||
|
||||
{/* 7. Kontakt */}
|
||||
<div className="border-b border-border py-3">
|
||||
<Link
|
||||
href="/kontakt"
|
||||
onClick={onClose}
|
||||
className="text-sm font-medium text-primary hover:text-accent block"
|
||||
>
|
||||
Kontakt
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Drawer Footer */}
|
||||
<div className="border-t border-border p-6 bg-slate-50 flex flex-col gap-4">
|
||||
<a
|
||||
href={`tel:${companyDetails.phoneRaw}`}
|
||||
className="flex items-center justify-center gap-2 p-3 bg-white border border-border rounded-xl text-primary font-semibold hover:text-accent transition-colors shadow-sm"
|
||||
>
|
||||
<Phone className="size-4 text-accent" />
|
||||
<span>Zadzwoń: {companyDetails.phone}</span>
|
||||
</a>
|
||||
<Link href="/kontakt" onClick={onClose} className="btn btn-primary w-full font-bold">
|
||||
|
||||
Darmowa konsultacja
|
||||
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,81 @@
|
||||
"use client";
|
||||
|
||||
import React, { useState } from "react";
|
||||
import Link from "next/link";
|
||||
import { ChevronDown } from "lucide-react";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
interface SectionItem {
|
||||
label: string;
|
||||
href: string;
|
||||
description?: string;
|
||||
}
|
||||
|
||||
interface NavSection {
|
||||
title: string;
|
||||
items: SectionItem[];
|
||||
}
|
||||
|
||||
interface NavDropdownProps {
|
||||
label: string;
|
||||
triggerHref?: string;
|
||||
sections: NavSection[];
|
||||
align?: "left" | "right";
|
||||
}
|
||||
|
||||
export function NavDropdown({ label, triggerHref, sections, align = "left" }: NavDropdownProps) {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
|
||||
return (
|
||||
<div
|
||||
className="relative group"
|
||||
onMouseEnter={() => setIsOpen(true)}
|
||||
onMouseLeave={() => setIsOpen(false)}
|
||||
>
|
||||
<div className="flex items-center gap-1 text-sm font-medium text-primary hover:text-accent transition-colors py-2 cursor-pointer">
|
||||
{triggerHref ? (
|
||||
<Link href={triggerHref}>{label}</Link>
|
||||
) : (
|
||||
<span>{label}</span>
|
||||
)}
|
||||
<ChevronDown className={cn("size-4 transition-transform", isOpen && "rotate-180")} />
|
||||
</div>
|
||||
|
||||
<div
|
||||
className={cn(
|
||||
"absolute top-full z-50 pt-2 transition-all duration-200",
|
||||
isOpen ? "opacity-100 translate-y-0 visible" : "opacity-0 translate-y-2 invisible",
|
||||
align === "left" ? "left-0" : "right-0"
|
||||
)}
|
||||
>
|
||||
<div className="bg-white border border-border shadow-xl rounded-xl p-4 min-w-[400px] flex gap-6">
|
||||
{sections.map((section, sIdx) => (
|
||||
<div key={sIdx} className="flex-1 min-w-[200px]">
|
||||
<h4 className="text-sm font-bold text-primary mb-3 font-heading uppercase tracking-wider">{section.title}</h4>
|
||||
<ul className="flex flex-col gap-2">
|
||||
{section.items.map((item, iIdx) => (
|
||||
<li key={iIdx}>
|
||||
<Link
|
||||
href={item.href}
|
||||
className="block group/item"
|
||||
onClick={() => setIsOpen(false)}
|
||||
>
|
||||
<div className="text-sm font-medium text-primary group-hover/item:text-accent transition-colors">
|
||||
{item.label}
|
||||
</div>
|
||||
{item.description && (
|
||||
<div className="text-xs text-text-muted mt-0.5 group-hover/item:text-text-muted/80">
|
||||
{item.description}
|
||||
</div>
|
||||
)}
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,56 @@
|
||||
import { Wrench, CheckCircle, Clock, Star } from "lucide-react";
|
||||
|
||||
export function TrustBar() {
|
||||
const items = [
|
||||
{
|
||||
icon: Wrench,
|
||||
title: "Doświadczeni monterzy",
|
||||
description: "Certyfikat F-Gaz, fachowy montaż",
|
||||
},
|
||||
{
|
||||
icon: CheckCircle,
|
||||
title: "Kompleksowa usługa",
|
||||
description: "Montaż, serwis i doradztwo",
|
||||
},
|
||||
{
|
||||
icon: Clock,
|
||||
title: "Bezpłatna wycena",
|
||||
description: "Odpowiadamy w ciągu 24h",
|
||||
},
|
||||
{
|
||||
icon: Star,
|
||||
title: "Estetyczny montaż",
|
||||
description: "Schludna instalacja, bez bałaganu",
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<section className="bg-muted border-t border-b border-border py-8">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-6 text-center lg:text-left">
|
||||
{items.map((item, idx) => {
|
||||
const Icon = item.icon;
|
||||
return (
|
||||
<div
|
||||
key={idx}
|
||||
className="flex flex-col lg:flex-row items-center lg:items-start gap-3 hover:translate-y-[-2px] transition-transform duration-200"
|
||||
>
|
||||
<div className="p-2 rounded-lg bg-accent-light text-accent shrink-0">
|
||||
<Icon className="size-6" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-sm font-semibold text-primary font-heading">
|
||||
{item.title}
|
||||
</h3>
|
||||
<p className="text-xs text-text-muted mt-0.5">
|
||||
{item.description}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,71 @@
|
||||
import React from 'react';
|
||||
import Image from 'next/image';
|
||||
import { SectionHeading } from '../common/SectionHeading';
|
||||
import { CheckCircle2 } from 'lucide-react';
|
||||
import { companyDetails } from '@/content/company';
|
||||
|
||||
export function AboutStory() {
|
||||
return (
|
||||
<section className="py-16 md:py-24 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-20 items-center">
|
||||
{/* Lewa: Obraz */}
|
||||
<div className="relative">
|
||||
<div className="relative aspect-[4/5] rounded-3xl overflow-hidden shadow-2xl">
|
||||
<Image
|
||||
src="/images/about/about-story.webp"
|
||||
alt="Zespół firmy w trakcie pracy"
|
||||
fill
|
||||
className="object-cover"
|
||||
/>
|
||||
</div>
|
||||
{/* Ozdobny element zaufania */}
|
||||
<div className="absolute -bottom-8 -right-8 bg-white p-6 rounded-2xl shadow-xl hidden md:block">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="flex-shrink-0 w-16 h-16 bg-accent/10 rounded-full flex items-center justify-center">
|
||||
<span className="text-2xl font-extrabold text-accent font-heading">
|
||||
{companyDetails.stats.find(s => s.label.includes("doświadczenia"))?.value || "15+"}
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<p className="font-bold text-primary font-heading text-lg leading-none mb-1">Lat na rynku</p>
|
||||
<p className="text-sm text-text-muted">Doświadczenie i zaufanie</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Prawa: Tekst */}
|
||||
<div>
|
||||
<SectionHeading
|
||||
eyebrow="Nasza Historia"
|
||||
title="Budujemy komfort od fundamentów aż po dach"
|
||||
align="left"
|
||||
/>
|
||||
|
||||
<div className="prose prose-lg text-text-muted mt-8 mb-10">
|
||||
<p>
|
||||
Firma {companyDetails.name} powstała z pasji do nowoczesnych technologii oraz chęci dostarczania kompleksowych usług dla domów i firm. Zaczynaliśmy jako niewielka, dwuosobowa ekipa specjalizująca się w instalacjach HVAC. Dziś jesteśmy liderem w regionie, realizując setki zaawansowanych projektów instalacyjnych rocznie.
|
||||
</p>
|
||||
<p>
|
||||
Naszym celem jest upraszczanie życia naszym klientom. Zamiast szukać oddzielnych fachowców od hydrauliki, klimatyzacji i wykończeń, u nas otrzymujesz całościowe wsparcie z gwarancją jakości.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<ul className="space-y-4">
|
||||
{[
|
||||
"Certyfikowani instalatorzy z uprawnieniami F-Gaz",
|
||||
"Dbałość o czystość podczas prac montażowych",
|
||||
"Gwarancja i szybki serwis na terenie miasta i okolic",
|
||||
"Pomoc w uzyskiwaniu dofinansowań"
|
||||
].map((point, idx) => (
|
||||
<li key={idx} className="flex items-start gap-3">
|
||||
<CheckCircle2 className="w-6 h-6 text-accent shrink-0" />
|
||||
<span className="text-primary font-medium">{point}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,85 @@
|
||||
import React from 'react';
|
||||
import Link from 'next/link';
|
||||
import Image from 'next/image';
|
||||
import { Wind, LayoutGrid, ArrowRight } from 'lucide-react';
|
||||
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
const acTypes = [
|
||||
{
|
||||
title: 'Klimatyzatory SPLIT',
|
||||
image: '/images/services/split.webp',
|
||||
description: 'Najpopularniejsze rozwiązanie do jednego pomieszczenia. Składa się z jednej jednostki wewnętrznej i jednej zewnętrznej.',
|
||||
icon: Wind,
|
||||
subtypes: ['Ścienne', 'Konsolowe', 'Kanałowe'],
|
||||
link: '/sklep?category=scienne',
|
||||
},
|
||||
{
|
||||
title: 'Systemy MULTISPLIT',
|
||||
image: '/images/services/split.webp',
|
||||
description: 'Idealne do chłodzenia całego domu. Do jednej jednostki zewnętrznej można podłączyć od 2 do 5 jednostek wewnętrznych.',
|
||||
icon: LayoutGrid,
|
||||
subtypes: ['Dla 2 pomieszczeń', 'Dla 3 pomieszczeń', 'Dla 4-5 pomieszczeń', 'Mieszane typy jednostek'],
|
||||
link: '/sklep?category=multisplit',
|
||||
},
|
||||
/* {
|
||||
title: 'Pozostałe rozwiązania',
|
||||
image: '/images/services/kasetonowe.webp',
|
||||
description: 'Specjalistyczne urządzenia łączące funkcje chłodzenia z zaawansowanym grzaniem lub oczyszczaniem powietrza.',
|
||||
icon: Sparkles,
|
||||
subtypes: ['Z funkcją ogrzewania (do -25°C)', 'Z zaawansowanym oczyszczaczem', 'Klimatyzatory przenośne', 'Klimatyzatory bez jednostki zewn.'],
|
||||
link: '/sklep',
|
||||
}, */
|
||||
];
|
||||
|
||||
export const AcTypesSection = () => {
|
||||
return (
|
||||
<section className="py-16 bg-gray-50">
|
||||
<div className="container mx-auto px-4 md:px-8 max-w-7xl">
|
||||
<div className="text-center max-w-2xl mx-auto mb-12">
|
||||
<h2 className="text-3xl font-bold text-primary mb-4">Rodzaje klimatyzatorów</h2>
|
||||
<p className="text-gray-600">
|
||||
Dobierzemy rozwiązanie idealnie dopasowane do Twoich potrzeb, niezależnie od tego czy chłodzisz jedno pomieszczenie, czy cały dom.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||
{acTypes.map((type, idx) => {
|
||||
const Icon = type.icon;
|
||||
return (
|
||||
<div key={idx} className="bg-white rounded-xl shadow-sm border border-gray-100 p-8 flex flex-col h-full hover:shadow-md transition-shadow">
|
||||
<div className="relative w-full h-44 rounded-xl overflow-hidden mb-4">
|
||||
<Image src={type.image} alt={type.title} fill className="object-cover" />
|
||||
</div>
|
||||
<div className="w-14 h-14 bg-accent/10 rounded-xl flex items-center justify-center mb-6 text-accent">
|
||||
<Icon className="w-7 h-7" />
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-primary mb-3">{type.title}</h3>
|
||||
<p className="text-gray-600 mb-6 text-sm flex-grow">
|
||||
{type.description}
|
||||
</p>
|
||||
|
||||
<ul className="space-y-2 mb-8">
|
||||
{type.subtypes.map((subtype, sIdx) => (
|
||||
<li key={sIdx} className="flex items-center text-sm text-gray-700">
|
||||
<div className="w-1.5 h-1.5 rounded-full bg-accent mr-3"></div>
|
||||
{subtype}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
|
||||
<Link
|
||||
href={type.link}
|
||||
className={cn("btn btn-outline btn-primary bg-white w-full justify-between group mt-auto")}
|
||||
>
|
||||
Sprawdź modele
|
||||
<ArrowRight className="w-4 h-4 ml-2 group-hover:translate-x-1 transition-transform" />
|
||||
</Link>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,26 @@
|
||||
import { CheckCircle2, Zap, ShieldCheck } from "lucide-react";
|
||||
|
||||
export function AdvantagesBar() {
|
||||
const advantages = [
|
||||
{ icon: Zap, text: "Certyfikat F-Gaz" },
|
||||
{ icon: ShieldCheck, text: "Gwarancja na sprzęt i montaż" },
|
||||
{ icon: CheckCircle2, text: "Bezpłatna wycena w 24h" },
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="bg-primary text-primary-foreground py-6 border-y border-border/10">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 md:gap-6">
|
||||
{advantages.map((adv, idx) => (
|
||||
<div key={idx} className="flex items-center justify-center md:justify-start gap-3">
|
||||
<adv.icon className="size-5 text-accent shrink-0" />
|
||||
<span className="text-sm font-medium leading-tight">
|
||||
{adv.text}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,57 @@
|
||||
import React from 'react';
|
||||
import { TrendingDown, Leaf, ThermometerSun, Wallet } from 'lucide-react';
|
||||
|
||||
const benefits = [
|
||||
{
|
||||
title: 'Znaczne oszczędności',
|
||||
description: 'Nawet 70% niższe koszty ogrzewania w porównaniu do tradycyjnych źródeł ciepła, takich jak węgiel, olej czy gaz.',
|
||||
icon: TrendingDown,
|
||||
},
|
||||
{
|
||||
title: 'Ekologiczne ciepło',
|
||||
description: 'Brak emisji spalin i zanieczyszczeń w miejscu działania. Pompa w 75% korzysta z odnawialnej energii z otoczenia.',
|
||||
icon: Leaf,
|
||||
},
|
||||
{
|
||||
title: 'Komfort całoroczny',
|
||||
description: 'Bezobsługowy system zapewniający przyjemne ciepło zimą oraz chłodzenie i produkcję ciepłej wody użytkowej latem.',
|
||||
icon: ThermometerSun,
|
||||
},
|
||||
{
|
||||
title: 'Dotacje i ulgi',
|
||||
description: 'Możliwość odliczenia od podatku oraz skorzystania z programów Czyste Powietrze lub Mój Prąd na pokrycie części kosztów.',
|
||||
icon: Wallet,
|
||||
},
|
||||
];
|
||||
|
||||
export const BenefitsGrid = () => {
|
||||
return (
|
||||
<section className="py-16 bg-white">
|
||||
<div className="container mx-auto px-4 md:px-8 max-w-7xl">
|
||||
<div className="text-center max-w-2xl mx-auto mb-12">
|
||||
<h2 className="text-3xl font-bold text-primary mb-4">Dlaczego warto wybrać pompę ciepła?</h2>
|
||||
<p className="text-gray-600">
|
||||
Pompa ciepła to obecnie najbardziej efektywne i przyszłościowe rozwiązanie do ogrzewania budynków.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
|
||||
{benefits.map((item, idx) => {
|
||||
const Icon = item.icon;
|
||||
return (
|
||||
<div key={idx} className="bg-gray-50 border border-gray-100 rounded-2xl p-8 hover:shadow-lg transition-shadow">
|
||||
<div className="w-14 h-14 bg-accent/10 rounded-2xl flex items-center justify-center mb-6 text-accent">
|
||||
<Icon className="w-7 h-7" />
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-primary mb-3">{item.title}</h3>
|
||||
<p className="text-gray-600 text-sm leading-relaxed">
|
||||
{item.description}
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,108 @@
|
||||
import Link from "next/link";
|
||||
import Image from "next/image";
|
||||
import { ArrowRight, Calendar } from "lucide-react";
|
||||
import { SectionHeading } from "../common/SectionHeading";
|
||||
import { getLatestPosts } from "@/content/posts";
|
||||
|
||||
export function BlogPreview() {
|
||||
const latestPosts = getLatestPosts(3);
|
||||
|
||||
const formatDate = (dateStr: string) => {
|
||||
const d = new Date(dateStr);
|
||||
return d.toLocaleDateString("pl-PL", {
|
||||
year: "numeric",
|
||||
month: "long",
|
||||
day: "numeric",
|
||||
});
|
||||
};
|
||||
|
||||
const getCategoryLabel = (cat: string) => {
|
||||
const labels: Record<string, string> = {
|
||||
klimatyzacja: "Klimatyzacja",
|
||||
|
||||
porady: "Porady ogólne",
|
||||
};
|
||||
return labels[cat] || cat;
|
||||
};
|
||||
|
||||
return (
|
||||
<section className="py-16 md:py-24 bg-white">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<SectionHeading
|
||||
eyebrow="Aktualności"
|
||||
title="Najnowsze poradniki i artykuły"
|
||||
subtitle="Dzielimy się wiedzą i doświadczeniem. Zobacz nasze wpisy dotyczące klimatyzacji i pomp ciepła oraz oszczędzania energii."
|
||||
align="center"
|
||||
/>
|
||||
|
||||
{/* Blog Posts Grid */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
{latestPosts.map((post) => (
|
||||
<article
|
||||
key={post.slug}
|
||||
className="group flex flex-col justify-between border border-border rounded-xl overflow-hidden hover:shadow-md transition-shadow h-full"
|
||||
>
|
||||
<div>
|
||||
{/* Thumbnail */}
|
||||
<div className="relative aspect-video bg-slate-50 border-b border-border">
|
||||
<Image
|
||||
src={post.image}
|
||||
alt={post.title}
|
||||
fill
|
||||
className="object-cover"
|
||||
sizes="(max-width: 768px) 100vw, 33vw"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="p-6">
|
||||
{/* Category & Date */}
|
||||
<div className="flex items-center gap-4 text-xs text-text-muted mb-3">
|
||||
<span className="font-semibold uppercase tracking-wider text-accent">
|
||||
{getCategoryLabel(post.category)}
|
||||
</span>
|
||||
<span className="flex items-center gap-1">
|
||||
<Calendar className="size-3.5" />
|
||||
<span>{formatDate(post.date)}</span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Title */}
|
||||
<h3 className="text-lg font-bold text-primary font-heading line-clamp-2 leading-snug group-hover:text-accent transition-colors">
|
||||
<Link href={`/blog/${post.slug}`}>{post.title}</Link>
|
||||
</h3>
|
||||
|
||||
{/* Excerpt */}
|
||||
<p className="text-sm text-text-muted mt-3 line-clamp-2 leading-relaxed">
|
||||
{post.excerpt}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Read More Link */}
|
||||
<div className="p-6 pt-0 mt-auto">
|
||||
<Link
|
||||
href={`/blog/${post.slug}`}
|
||||
className="inline-flex items-center gap-1.5 text-sm font-semibold text-primary group-hover:text-accent transition-colors"
|
||||
>
|
||||
<span>Czytaj więcej</span>
|
||||
<ArrowRight className="size-4 group-hover:translate-x-1 transition-transform" />
|
||||
</Link>
|
||||
</div>
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Blog Catalog Button */}
|
||||
<div className="flex justify-center mt-12">
|
||||
<Link href="/blog" className="btn btn-outline btn-primary bg-white font-bold flex items-center gap-2 group">
|
||||
|
||||
<span>Przejdź do bloga</span>
|
||||
<ArrowRight className="size-4 group-hover:translate-x-1 transition-transform" />
|
||||
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,41 @@
|
||||
import React from 'react';
|
||||
|
||||
import Link from 'next/link';
|
||||
|
||||
const brands = [
|
||||
{ name: 'Daikin', logo: '/brands/daikin.webp' },
|
||||
{ name: 'Mitsubishi Electric', logo: '/brands/mitsubishi.webp' },
|
||||
{ name: 'Gree', logo: '/brands/gree.webp' },
|
||||
{ name: 'Rotenso', logo: '/brands/rotenso.webp' },
|
||||
{ name: 'LG', logo: '/brands/lg.webp' },
|
||||
{ name: 'Samsung', logo: '/brands/samsung.webp' },
|
||||
{ name: 'Haier', logo: '/brands/haier.webp' },
|
||||
{ name: 'CHV', logo: '/brands/chv.webp' },
|
||||
{ name: 'Toshiba', logo: '/brands/toshiba.webp' },
|
||||
{ name: 'Fuji Electric', logo: '/brands/fuji.webp' },
|
||||
];
|
||||
|
||||
export const BrandsGrid = () => {
|
||||
return (
|
||||
<section className="py-16 bg-white border-t border-border">
|
||||
<div className="container mx-auto px-4 md:px-8 max-w-5xl text-center">
|
||||
<h3 className="text-xl font-semibold text-text-muted mb-8 uppercase tracking-wider text-sm">
|
||||
Autoryzowany partner czołowych producentów
|
||||
</h3>
|
||||
|
||||
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 gap-4 lg:gap-6 items-center">
|
||||
{brands.map((brand, idx) => (
|
||||
<Link
|
||||
key={idx}
|
||||
href={`/sklep?brand=${encodeURIComponent(brand.name)}`}
|
||||
className="group flex justify-center items-center h-16 bg-slate-50 rounded-xl p-3 border border-border hover:border-accent hover:bg-accent/5 hover:shadow-sm transition-all duration-300"
|
||||
>
|
||||
{/* Tutaj docelowo można dać tag Image */}
|
||||
<span className="font-bold text-primary text-sm md:text-base tracking-tight opacity-70 group-hover:opacity-100 group-hover:text-accent transition-all">{brand.name}</span>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,37 @@
|
||||
import React from 'react';
|
||||
|
||||
import { SectionHeading } from '../common/SectionHeading';
|
||||
import { companyDetails } from '@/content/company';
|
||||
|
||||
export function CertificatesSection() {
|
||||
return (
|
||||
<section className="py-16 md:py-24 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<SectionHeading
|
||||
eyebrow="Uprawnienia"
|
||||
title="Nasze certyfikaty"
|
||||
subtitle="Zaufaj wykwalifikowanym specjalistom. Posiadamy wszystkie licencje wymagane do profesjonalnego montażu urządzeń HVAC."
|
||||
align="center"
|
||||
/>
|
||||
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-6 md:gap-10 mt-16">
|
||||
{companyDetails.certificates.map((cert, idx) => (
|
||||
<div
|
||||
key={idx}
|
||||
className="group flex flex-col items-center text-center gap-4 p-6 bg-slate-50 rounded-2xl border border-border hover:border-accent/50 transition-colors"
|
||||
>
|
||||
{/* W rzeczywistości użylibyśmy obrazków. Tutaj dajemy szary prostokąt jako placeholder wg wytycznych */}
|
||||
<div className="relative w-full aspect-[4/3] bg-white rounded-lg border border-border flex items-center justify-center p-4 overflow-hidden group-hover:shadow-md transition-shadow">
|
||||
{/* Jeśli cert.image istnieje realnie, można by użyć Image, na razie tekstowy placeholder */}
|
||||
<div className="text-sm font-bold text-slate-300 font-heading">
|
||||
LOGO / CERTYFIKAT
|
||||
</div>
|
||||
</div>
|
||||
<p className="font-semibold text-primary text-sm leading-tight group-hover:text-accent transition-colors">
|
||||
{cert.name}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,77 @@
|
||||
import React from 'react';
|
||||
import Link from 'next/link';
|
||||
|
||||
import { cn } from '@/lib/utils';
|
||||
import { Settings2, Zap, Palette, Calculator, Lightbulb } from 'lucide-react';
|
||||
|
||||
const steps = [
|
||||
{ icon: Settings2, label: 'Marka i model' },
|
||||
{ icon: Zap, label: 'Moc chłodnicza' },
|
||||
{ icon: Palette, label: 'Design i funkcje' },
|
||||
{ icon: Calculator, label: 'Wycena montażu' },
|
||||
];
|
||||
|
||||
export const ConfiguratorTeaser = () => {
|
||||
return (
|
||||
<section className="py-20 bg-primary text-white relative overflow-hidden">
|
||||
{/* Background decoration */}
|
||||
<div className="absolute top-0 right-0 w-1/2 h-full bg-gradient-to-l from-accent/20 to-transparent pointer-events-none" />
|
||||
<div className="absolute -bottom-24 -left-24 w-64 h-64 bg-accent rounded-full blur-[120px] opacity-20 pointer-events-none" />
|
||||
|
||||
<div className="container mx-auto px-4 md:px-8 max-w-7xl relative z-10">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
|
||||
<div>
|
||||
<h2 className="text-3xl md:text-4xl font-bold mb-6">
|
||||
Skonfiguruj swój idealny zestaw w 4 krokach
|
||||
</h2>
|
||||
<p className="text-gray-300 text-lg mb-8 max-w-xl">
|
||||
Nie wiesz jakie urządzenie wybrać? Nasz prosty konfigurator krok po kroku pomoże Ci dobrać sprzęt i natychmiast sprawdzić szacunkowy koszt wraz z montażem.
|
||||
</p>
|
||||
|
||||
<div className="flex flex-col sm:flex-row gap-4 mb-10 lg:mb-0">
|
||||
<Link
|
||||
href="/kalkulator"
|
||||
className={cn("btn btn-primary text-white group")}
|
||||
>
|
||||
Uruchom konfigurator
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="relative">
|
||||
{/* Visual representation of steps */}
|
||||
<div className="bg-white/10 backdrop-blur-sm border border-white/20 rounded-2xl p-8">
|
||||
<div className="space-y-6 relative before:absolute before:inset-0 before:ml-6 before:-translate-x-px md:before:mx-auto md:before:translate-x-0 before:h-full before:w-0.5 before:bg-gradient-to-b before:from-transparent before:via-white/30 before:to-transparent">
|
||||
{steps.map((step, idx) => {
|
||||
const Icon = step.icon;
|
||||
return (
|
||||
<div key={idx} className="relative flex items-center justify-between md:justify-normal md:odd:flex-row-reverse group">
|
||||
<div className="flex items-center justify-center w-12 h-12 rounded-full border-4 border-primary bg-accent text-white shadow md:order-1 md:group-odd:-translate-x-1/2 md:group-even:translate-x-1/2 z-10">
|
||||
<Icon className="w-5 h-5" />
|
||||
</div>
|
||||
<div className="w-[calc(100%-4rem)] md:w-[calc(50%-3rem)] bg-white/10 border border-white/20 p-4 rounded-xl backdrop-blur-sm group-hover:bg-white/20 transition-colors">
|
||||
<h3 className="font-semibold text-lg">{step.label}</h3>
|
||||
<p className="text-sm text-gray-300">Krok {idx + 1}</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* Pro tip card */}
|
||||
<div className="mt-8 bg-accent/20 border border-accent/40 rounded-xl p-4 flex items-start">
|
||||
<Lightbulb className="w-6 h-6 text-accent shrink-0 mr-3 mt-0.5" />
|
||||
<div>
|
||||
<h4 className="font-semibold text-accent-light mb-1">Porada eksperta</h4>
|
||||
<p className="text-sm text-gray-200">
|
||||
Szybki przelicznik mocy: <strong>10 m² = 1 kW</strong> mocy chłodniczej. Dla pokoju 25 m² szukaj urządzenia o mocy ok. 2.5 kW.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,90 @@
|
||||
import React from 'react';
|
||||
import { companyDetails } from '@/content/company';
|
||||
import { ContactForm } from '../forms/ContactForm';
|
||||
import { MapPin, Phone, Mail, Clock, FileText } from 'lucide-react';
|
||||
|
||||
export function ContactSection() {
|
||||
return (
|
||||
<section className="py-16 md:py-24 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-16 lg:gap-24">
|
||||
{/* Lewa kolumna: Dane kontaktowe */}
|
||||
<div className="flex flex-col">
|
||||
<h2 className="text-3xl md:text-4xl font-extrabold text-primary font-heading mb-6">
|
||||
Porozmawiajmy o Twoim projekcie
|
||||
</h2>
|
||||
<p className="text-text-muted text-lg mb-12">
|
||||
Jesteśmy do Twojej dyspozycji. Zadzwoń, napisz e-mail lub skorzystaj z formularza obok. Odpowiadamy najszybciej jak to możliwe, najczęściej w ciągu kilku godzin.
|
||||
</p>
|
||||
|
||||
<div className="space-y-8 flex-grow">
|
||||
{/* Telefon */}
|
||||
<div className="flex items-start gap-4 group">
|
||||
<div className="w-12 h-12 rounded-xl bg-accent/10 text-accent flex items-center justify-center shrink-0 group-hover:bg-accent group-hover:text-white transition-colors">
|
||||
<Phone className="w-6 h-6" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm font-semibold text-text-muted uppercase tracking-wider mb-1">Zadzwoń do nas</p>
|
||||
<a href={`tel:${companyDetails.phoneRaw}`} className="text-base font-bold text-primary hover:text-accent transition-colors font-heading">
|
||||
{companyDetails.phone}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Email */}
|
||||
<div className="flex items-start gap-4 group">
|
||||
<div className="w-12 h-12 rounded-xl bg-accent/10 text-accent flex items-center justify-center shrink-0 group-hover:bg-accent group-hover:text-white transition-colors">
|
||||
<Mail className="w-6 h-6" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm font-semibold text-text-muted uppercase tracking-wider mb-1">Napisz e-mail</p>
|
||||
<a href={`mailto:${companyDetails.email}`} className="text-base font-bold text-primary hover:text-accent transition-colors font-heading">
|
||||
{companyDetails.email}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Adres */}
|
||||
<div className="flex items-start gap-4 group">
|
||||
<div className="w-12 h-12 rounded-xl bg-accent/10 text-accent flex items-center justify-center shrink-0 group-hover:bg-accent group-hover:text-white transition-colors">
|
||||
<MapPin className="w-6 h-6" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm font-semibold text-text-muted uppercase tracking-wider mb-1">Nasze biuro</p>
|
||||
<div className="text-sm font-medium text-primary">
|
||||
{companyDetails.name}<br />
|
||||
{companyDetails.address.street}<br />
|
||||
{companyDetails.address.zipCode} {companyDetails.address.city}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Godziny i NIP */}
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-8 pt-8 border-t border-border">
|
||||
<div className="flex items-start gap-3">
|
||||
<Clock className="w-5 h-5 text-primary/60 mt-0.5 shrink-0" />
|
||||
<div>
|
||||
<p className="text-sm font-semibold text-text-muted mb-1">Godziny pracy</p>
|
||||
<p className="text-sm text-primary font-medium">{companyDetails.hours}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-start gap-3">
|
||||
<FileText className="w-5 h-5 text-primary/60 mt-0.5 shrink-0" />
|
||||
<div>
|
||||
<p className="text-sm font-semibold text-text-muted mb-1">Dane firmy</p>
|
||||
<p className="text-sm text-primary font-medium">NIP: {companyDetails.nip}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Prawa kolumna: Formularz */}
|
||||
<div className="relative">
|
||||
{/* Tło dekoracyjne */}
|
||||
<div className="absolute inset-0 bg-primary/5 rounded-[2.5rem] transform translate-x-4 translate-y-4 -z-10 hidden sm:block" />
|
||||
<ContactForm />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,89 @@
|
||||
import Link from "next/link";
|
||||
import { Phone, ArrowRight } from "lucide-react";
|
||||
import { companyDetails } from "@/content/company";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
interface CtaBannerProps {
|
||||
title?: string;
|
||||
subtitle?: string;
|
||||
ctaText?: string;
|
||||
ctaLink?: string;
|
||||
bgVariant?: "primary" | "accent-light";
|
||||
}
|
||||
|
||||
export function CtaBanner({
|
||||
title = "Masz pytania? Umów darmową konsultację",
|
||||
subtitle = "Skontaktuj się z nami! Doradzimy najlepsze rozwiązania, dobierzemy moc urządzeń i przygotujemy bezpłatną wycenę.",
|
||||
ctaText = "Zamów bezpłatną konsultację",
|
||||
ctaLink = "/kontakt",
|
||||
bgVariant = "primary",
|
||||
}: CtaBannerProps) {
|
||||
const isPrimary = bgVariant === "primary";
|
||||
|
||||
return (
|
||||
<section className="relative overflow-hidden py-16 md:py-20">
|
||||
{/* Background and overlays */}
|
||||
<div
|
||||
className={cn(
|
||||
"absolute inset-0 z-0",
|
||||
isPrimary
|
||||
? "bg-[#0F2A47] text-white"
|
||||
: "bg-accent-light text-primary"
|
||||
)}
|
||||
/>
|
||||
|
||||
{isPrimary && (
|
||||
<div className="absolute inset-0 bg-[radial-gradient(circle_at_bottom_left,rgba(43,168,224,0.12),transparent_40%)] z-0" />
|
||||
)}
|
||||
|
||||
<div className="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="flex flex-col lg:flex-row items-center justify-between gap-10">
|
||||
{/* Text Area */}
|
||||
<div className="max-w-2xl text-center lg:text-left flex flex-col gap-3">
|
||||
<h2
|
||||
className={cn(
|
||||
"text-2xl sm:text-3xl md:text-4xl font-extrabold font-heading leading-tight",
|
||||
isPrimary ? "text-white" : "text-primary"
|
||||
)}
|
||||
>
|
||||
{title}
|
||||
</h2>
|
||||
<p
|
||||
className={cn(
|
||||
"text-sm sm:text-base leading-relaxed max-w-xl",
|
||||
isPrimary ? "text-slate-300" : "text-text-muted"
|
||||
)}
|
||||
>
|
||||
{subtitle}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Action buttons */}
|
||||
<div className="flex flex-col sm:flex-row items-center gap-4 mt-8 w-full sm:w-auto shrink-0 justify-center">
|
||||
<Link href={ctaLink} className="w-fit sm:w-auto btn btn-primary font-bold text-white px-6">
|
||||
<span>{ctaText}</span>
|
||||
<ArrowRight className="size-5" />
|
||||
</Link>
|
||||
|
||||
<a
|
||||
href={`tel:${companyDetails.phoneRaw}`}
|
||||
className="w-fit sm:w-auto"
|
||||
>
|
||||
<button
|
||||
className={cn(
|
||||
"btn btn-outline btn-primary bg-white w-fit sm:w-auto font-bold flex items-center gap-2 px-6",
|
||||
isPrimary
|
||||
? "text-white hover:bg-white/20 hover:text-white border-white/30"
|
||||
: "text-primary hover:bg-primary/10 border-primary/20"
|
||||
)}
|
||||
>
|
||||
<Phone className="size-5" />
|
||||
<span>{companyDetails.phone}</span>
|
||||
</button>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,49 @@
|
||||
import React from 'react';
|
||||
import { PhoneCall, Clock, ShieldAlert } from 'lucide-react';
|
||||
import { companyDetails } from '@/content/company';
|
||||
|
||||
export const EmergencyBlock = () => {
|
||||
return (
|
||||
<section className="py-12 bg-cta text-white relative overflow-hidden">
|
||||
{/* Dekoracyjne tło */}
|
||||
<div className="absolute top-0 right-0 w-1/2 h-full bg-gradient-to-l from-white/10 to-transparent pointer-events-none" />
|
||||
<div className="absolute -bottom-24 -left-24 w-64 h-64 bg-white/20 rounded-full blur-[100px] pointer-events-none" />
|
||||
|
||||
<div className="container mx-auto px-4 md:px-8 max-w-5xl relative z-10">
|
||||
<div className="flex flex-col md:flex-row items-center justify-between gap-8">
|
||||
|
||||
<div className="flex-1 text-center md:text-left">
|
||||
<div className="inline-flex items-center gap-2 px-3 py-1 bg-white/20 rounded-full text-sm font-semibold mb-4 backdrop-blur-sm border border-white/30">
|
||||
<ShieldAlert className="w-4 h-4" />
|
||||
Pogotowie hydrauliczne
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-4xl font-bold mb-4">
|
||||
Masz awarię? Zadzwoń natychmiast!
|
||||
</h2>
|
||||
<p className="text-white/90 text-lg mb-0 max-w-xl mx-auto md:mx-0">
|
||||
Pęknięta rura, zatkany odpływ lub wyciek? Zapewniamy szybką diagnozę i skuteczną naprawę usterki.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col items-center sm:items-end gap-4 shrink-0">
|
||||
<a
|
||||
href={`tel:${companyDetails.phone.replace(/\s+/g, '')}`}
|
||||
className="group flex items-center gap-4 bg-white text-primary px-8 py-4 rounded-xl font-bold text-2xl hover:bg-gray-50 transition-colors shadow-lg hover:shadow-xl"
|
||||
>
|
||||
<div className="w-12 h-12 bg-cta/10 rounded-full flex items-center justify-center text-cta group-hover:scale-110 transition-transform">
|
||||
<PhoneCall className="w-6 h-6" />
|
||||
</div>
|
||||
{companyDetails.phone}
|
||||
</a>
|
||||
|
||||
<div className="flex items-center gap-2 text-sm font-medium bg-black/10 px-4 py-2 rounded-lg">
|
||||
<Clock className="w-4 h-4 text-white/80" />
|
||||
<span className="text-white/90">Szybki czas reakcji na terenie całego miasta</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,71 @@
|
||||
'use client';
|
||||
|
||||
import React, { useState } from 'react';
|
||||
import { faqData, FaqItem } from '@/content/faq';
|
||||
import { ChevronDown } from 'lucide-react';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
interface FaqAccordionProps {
|
||||
category: FaqItem['category'];
|
||||
}
|
||||
|
||||
export const FaqAccordion = ({ category }: FaqAccordionProps) => {
|
||||
const [openId, setOpenId] = useState<string | null>(null);
|
||||
|
||||
const faqs = faqData.filter(item => item.category === category);
|
||||
|
||||
if (faqs.length === 0) return null;
|
||||
|
||||
return (
|
||||
<section className="py-16 bg-gray-50">
|
||||
<div className="container mx-auto px-4 md:px-8 max-w-3xl">
|
||||
<div className="text-center mb-10">
|
||||
<h2 className="text-3xl font-bold text-primary mb-4">Często zadawane pytania</h2>
|
||||
<p className="text-gray-600">
|
||||
Odpowiedzi na najczęstsze wątpliwości naszych klientów.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
{faqs.map((faq) => {
|
||||
const isOpen = openId === faq.id;
|
||||
return (
|
||||
<div
|
||||
key={faq.id}
|
||||
className={cn(
|
||||
"bg-white border rounded-xl overflow-hidden transition-all duration-200",
|
||||
isOpen ? "border-accent shadow-md" : "border-gray-200 hover:border-gray-300"
|
||||
)}
|
||||
>
|
||||
<button
|
||||
className="w-full px-6 py-4 flex items-center justify-between text-left focus:outline-none"
|
||||
onClick={() => setOpenId(isOpen ? null : faq.id)}
|
||||
aria-expanded={isOpen}
|
||||
>
|
||||
<span className="font-semibold text-primary pr-4">{faq.question}</span>
|
||||
<ChevronDown
|
||||
className={cn(
|
||||
"w-5 h-5 text-gray-400 transition-transform duration-200 shrink-0",
|
||||
isOpen && "rotate-180 text-accent"
|
||||
)}
|
||||
/>
|
||||
</button>
|
||||
|
||||
<div
|
||||
className={cn(
|
||||
"px-6 text-gray-600 leading-relaxed overflow-hidden transition-all duration-300 ease-in-out",
|
||||
isOpen ? "max-h-96 pb-5 opacity-100" : "max-h-0 pb-0 opacity-0"
|
||||
)}
|
||||
>
|
||||
<div className="pt-2 border-t border-gray-100">
|
||||
{faq.answer}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,80 @@
|
||||
import React from 'react';
|
||||
import Link from 'next/link';
|
||||
import Image from 'next/image';
|
||||
import { Post } from '@/types/types';
|
||||
import { Calendar, User, ArrowRight } from 'lucide-react';
|
||||
|
||||
interface FeaturedPostProps {
|
||||
post: Post;
|
||||
}
|
||||
|
||||
export function FeaturedPost({ post }: FeaturedPostProps) {
|
||||
// Formatowanie daty
|
||||
const dateObj = new Date(post.date);
|
||||
const formattedDate = dateObj.toLocaleDateString('pl-PL', {
|
||||
day: 'numeric',
|
||||
month: 'long',
|
||||
year: 'numeric'
|
||||
});
|
||||
|
||||
// Tłumaczenie kategorii
|
||||
const categoryLabels: Record<string, string> = {
|
||||
'klimatyzacja': 'Klimatyzacja',
|
||||
|
||||
'remonty': 'Remonty',
|
||||
'hydraulika': 'Hydraulika',
|
||||
'porady': 'Porady'
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="group relative rounded-2xl overflow-hidden bg-white border border-border shadow-sm hover:shadow-lg transition-all duration-300">
|
||||
<div className="flex flex-col md:flex-row">
|
||||
{/* Obraz */}
|
||||
<div className="relative w-full md:w-3/5 aspect-video md:aspect-auto md:min-h-[400px]">
|
||||
<Image
|
||||
src={post.image || '/images/hero/hero-section-image.webp'}
|
||||
alt={post.title}
|
||||
fill
|
||||
className="object-cover transition-transform duration-700 group-hover:scale-105"
|
||||
/>
|
||||
<div className="absolute top-4 left-4">
|
||||
<span className="px-3 py-1 bg-accent text-white text-xs font-bold rounded-full uppercase tracking-wider shadow-md">
|
||||
{categoryLabels[post.category] || post.category}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Treść */}
|
||||
<div className="p-8 md:p-12 flex flex-col justify-center w-full md:w-2/5">
|
||||
<div className="flex items-center gap-4 text-text-muted text-sm font-medium mb-4">
|
||||
<div className="flex items-center gap-1.5">
|
||||
<Calendar className="w-4 h-4 text-primary/60" />
|
||||
<span>{formattedDate}</span>
|
||||
</div>
|
||||
{post.author && (
|
||||
<div className="flex items-center gap-1.5">
|
||||
<User className="w-4 h-4 text-primary/60" />
|
||||
<span>{post.author}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<h3 className="text-2xl md:text-3xl font-extrabold text-primary font-heading leading-tight mb-4 group-hover:text-accent transition-colors">
|
||||
<Link href={`/blog/${post.slug}`} className="before:absolute before:inset-0">
|
||||
{post.title}
|
||||
</Link>
|
||||
</h3>
|
||||
|
||||
<p className="text-text-muted leading-relaxed mb-8 line-clamp-3">
|
||||
{post.excerpt}
|
||||
</p>
|
||||
|
||||
<div className="flex items-center gap-2 text-primary font-semibold group-hover:text-accent transition-colors mt-auto">
|
||||
<span>Czytaj pełny artykuł</span>
|
||||
<ArrowRight className="w-4 h-4 group-hover:translate-x-1 transition-transform" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,39 @@
|
||||
import Link from "next/link";
|
||||
import { ArrowRight } from "lucide-react";
|
||||
import { SectionHeading } from "../common/SectionHeading";
|
||||
import { ProductCard } from "../shop/ProductCard";
|
||||
import { getFeaturedProducts } from "@/content/products";
|
||||
|
||||
export function FeaturedProducts() {
|
||||
const featured = getFeaturedProducts(4);
|
||||
|
||||
return (
|
||||
<section className="py-16 md:py-24 bg-white">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<SectionHeading
|
||||
eyebrow="Nasz Asortyment"
|
||||
title="Polecane klimatyzatory z montażem"
|
||||
subtitle="Poznaj wybrane modele urządzeń chłodzących i grzewczych od wiodących marek. Zapewniamy kompleksowy montaż."
|
||||
align="center"
|
||||
/>
|
||||
|
||||
{/* Products Grid */}
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 md:gap-8">
|
||||
{featured.map((product) => (
|
||||
<ProductCard key={product.slug} product={product} />
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Catalog Link */}
|
||||
<div className="flex justify-center mt-12">
|
||||
<Link href="/sklep" className="btn btn-outline btn-primary bg-white font-bold flex items-center gap-2 group">
|
||||
|
||||
<span>Zobacz cały sklep</span>
|
||||
<ArrowRight className="size-4 group-hover:translate-x-1 transition-transform" />
|
||||
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,93 @@
|
||||
import React from 'react';
|
||||
import Link from 'next/link';
|
||||
|
||||
import { cn } from '@/lib/utils';
|
||||
import { PiggyBank, FileText, CheckCircle2 } from 'lucide-react';
|
||||
|
||||
export const FundingSection = () => {
|
||||
return (
|
||||
<section className="py-16 bg-accent-light text-primary">
|
||||
<div className="container mx-auto px-4 md:px-8 max-w-6xl relative">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
|
||||
<div>
|
||||
<div className="inline-flex items-center gap-2 px-3 py-1 bg-white/50 backdrop-blur-sm rounded-full text-sm font-semibold mb-6">
|
||||
<PiggyBank className="w-4 h-4 text-accent" />
|
||||
Dotacje i dofinansowania
|
||||
</div>
|
||||
|
||||
<h2 className="text-3xl md:text-4xl font-bold mb-6">
|
||||
Odbierz nawet do 35 200 zł dotacji na pompę ciepła
|
||||
</h2>
|
||||
|
||||
<p className="text-primary/80 text-lg mb-8">
|
||||
[PLACEHOLDER - DO AKTUALIZACJI] Obecnie trwają programy rządowe "Czyste Powietrze" oraz "Mój Prąd", które pozwalają na zwrot znacznej części kosztów inwestycji. Pomożemy Ci przejść przez cały proces formalny i przygotować niezbędne wnioski.
|
||||
</p>
|
||||
|
||||
<ul className="space-y-4 mb-10">
|
||||
<li className="flex items-start gap-3">
|
||||
<CheckCircle2 className="w-6 h-6 text-accent shrink-0" />
|
||||
<span className="font-medium">Bezpłatny audyt możliwości dofinansowania</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-3">
|
||||
<CheckCircle2 className="w-6 h-6 text-accent shrink-0" />
|
||||
<span className="font-medium">Pomoc w wypełnieniu dokumentacji</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-3">
|
||||
<CheckCircle2 className="w-6 h-6 text-accent shrink-0" />
|
||||
<span className="font-medium">Możliwość prefinansowania inwestycji</span>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<Link
|
||||
href="/dofinansowania"
|
||||
className={cn("btn btn-primary group")}
|
||||
>
|
||||
Dowiedz się więcej o dotacjach
|
||||
</Link>
|
||||
<p className="text-xs text-primary/60 mt-4 max-w-sm">
|
||||
* Wysokość dotacji uzależniona jest od progu dochodowego i zakresu termomodernizacji. Skontaktuj się z nami w celu dokładnej wyceny.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="relative">
|
||||
{/* Dekoracyjna karta */}
|
||||
<div className="bg-white rounded-3xl p-8 shadow-xl relative z-10 border border-white/50">
|
||||
<div className="flex justify-between items-start mb-8">
|
||||
<div>
|
||||
<p className="text-sm text-gray-500 font-semibold mb-1">Twój kosztorys z dotacją</p>
|
||||
<h3 className="text-xl font-bold text-primary">Przykładowa kalkulacja</h3>
|
||||
</div>
|
||||
<div className="w-12 h-12 bg-accent/10 rounded-full flex items-center justify-center">
|
||||
<FileText className="w-6 h-6 text-accent" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4 text-sm">
|
||||
<div className="flex justify-between pb-4 border-b border-gray-100">
|
||||
<span className="text-gray-600">Wartość inwestycji</span>
|
||||
<span className="font-semibold text-gray-900">45 000 zł</span>
|
||||
</div>
|
||||
<div className="flex justify-between pb-4 border-b border-gray-100 text-green-600 font-medium">
|
||||
<span>Dotacja "Czyste Powietrze"</span>
|
||||
<span>- 20 500 zł</span>
|
||||
</div>
|
||||
<div className="flex justify-between pb-4 border-b border-gray-100 text-green-600 font-medium">
|
||||
<span>Ulga termomodernizacyjna</span>
|
||||
<span>- 4 600 zł</span>
|
||||
</div>
|
||||
<div className="flex justify-between pt-2">
|
||||
<span className="text-gray-900 font-bold">Ostateczny koszt inwestora</span>
|
||||
<span className="font-bold text-2xl text-primary">19 900 zł</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Background elements */}
|
||||
<div className="absolute -top-6 -right-6 w-full h-full bg-accent/20 rounded-3xl -z-10 blur-sm"></div>
|
||||
<div className="absolute -bottom-8 -left-8 w-32 h-32 bg-white/40 rounded-full -z-10 blur-xl"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,63 @@
|
||||
import React from 'react';
|
||||
import { Wind, Droplets, Mountain } from 'lucide-react';
|
||||
|
||||
const pumpTypes = [
|
||||
{
|
||||
title: 'Powietrze - Woda',
|
||||
description: 'Najpopularniejsze rozwiązanie. Urządzenie pobiera energię z powietrza zewnętrznego i przekazuje ją do wodnej instalacji grzewczej (kaloryfery, podłogówka) oraz podgrzewa wodę użytkową.',
|
||||
forWho: 'Idealne do nowych domów i większości termomodernizacji (wymiana pieca).',
|
||||
icon: Droplets,
|
||||
},
|
||||
{
|
||||
title: 'Powietrze - Powietrze',
|
||||
description: 'Działają na zasadzie klimatyzatorów. Ogrzewają bezpośrednio powietrze w pomieszczeniu, bez udziału instalacji wodnej. Szybko nagrzewają i posiadają funkcję chłodzenia.',
|
||||
forWho: 'Świetne jako dodatkowe źródło ciepła, do domków letniskowych i mniejszych przestrzeni.',
|
||||
icon: Wind,
|
||||
},
|
||||
{
|
||||
title: 'Gruntowe',
|
||||
description: 'Pobierają ciepło z wnętrza ziemi za pomocą kolektorów. Zapewniają najwyższą i najbardziej stabilną wydajność niezależnie od mrozów na zewnątrz.',
|
||||
forWho: 'Dla inwestorów z dużą działką, oczekujących najwyższej niezawodności i gotowych na wyższe koszty początkowe.',
|
||||
icon: Mountain,
|
||||
},
|
||||
];
|
||||
|
||||
export const HeatPumpTypes = () => {
|
||||
return (
|
||||
<section className="py-16 bg-gray-50">
|
||||
<div className="container mx-auto px-4 md:px-8 max-w-7xl">
|
||||
<div className="text-center max-w-2xl mx-auto mb-12">
|
||||
<h2 className="text-3xl font-bold text-primary mb-4">Rodzaje pomp ciepła</h2>
|
||||
<p className="text-gray-600">
|
||||
Wybór odpowiedniej technologii zależy od uwarunkowań Twojego budynku, wielkości działki oraz budżetu.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
{pumpTypes.map((type, idx) => {
|
||||
const Icon = type.icon;
|
||||
return (
|
||||
<div key={idx} className="bg-white rounded-xl shadow-sm border border-gray-100 p-8 flex flex-col h-full hover:shadow-md transition-shadow">
|
||||
<div className="flex items-center gap-4 mb-6">
|
||||
<div className="w-12 h-12 bg-primary/5 rounded-xl flex items-center justify-center text-primary">
|
||||
<Icon className="w-6 h-6" />
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-primary">{type.title}</h3>
|
||||
</div>
|
||||
|
||||
<p className="text-gray-600 mb-6 text-sm flex-grow">
|
||||
{type.description}
|
||||
</p>
|
||||
|
||||
<div className="bg-gray-50 rounded-lg p-4 mt-auto">
|
||||
<h4 className="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2">Dla kogo?</h4>
|
||||
<p className="text-sm text-gray-700 font-medium">{type.forWho}</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,101 @@
|
||||
import Link from "next/link";
|
||||
import Image from "next/image";
|
||||
import { ArrowRight, Star } from "lucide-react";
|
||||
import { buttonClasses } from "@/components/ui/Button";
|
||||
|
||||
export interface HeroSectionProps {
|
||||
eyebrow?: string;
|
||||
title?: React.ReactNode;
|
||||
subtitle?: string;
|
||||
ctaText?: string;
|
||||
ctaLink?: string;
|
||||
secondaryCtaText?: string;
|
||||
secondaryCtaLink?: string;
|
||||
backgroundImage?: string;
|
||||
features?: string[];
|
||||
}
|
||||
|
||||
export function HeroSection({
|
||||
eyebrow = "Wrocław i Dolny Śląsk",
|
||||
title = (
|
||||
<>
|
||||
<span className="text-white">Klimatyzacja</span><br />
|
||||
<span className="text-accent">na Dolnym Śląsku</span>
|
||||
</>
|
||||
),
|
||||
subtitle = "Montaż, serwis i naprawa — przyjeżdżamy do Ciebie. Obsługujemy tam gdzie inni odmawiają, w tym klimatyzatory LG.",
|
||||
ctaText = "Darmowa wycena",
|
||||
ctaLink = "/kontakt",
|
||||
secondaryCtaText = "Zobacz ofertę",
|
||||
secondaryCtaLink = "/sklep",
|
||||
backgroundImage = "/images/hero/home_page_hero.webp",
|
||||
features
|
||||
}: HeroSectionProps = {}) {
|
||||
return (
|
||||
<section className="relative bg-primary min-h-[480px] md:min-h-[600px] flex items-center overflow-hidden w-full">
|
||||
{/* TODO ZDJĘCIE HERO: realne zdjęcie firmy/montażu, format poziomy min. 1920×1080, plik public/hero.jpg */}
|
||||
<Image
|
||||
src={backgroundImage}
|
||||
alt="Montaż klimatyzacji i pomp ciepła"
|
||||
fill
|
||||
priority
|
||||
sizes="100vw"
|
||||
className="object-cover"
|
||||
/>
|
||||
|
||||
{/* NAKŁADKA POD TEKST - jednolita, przyciemniająca */}
|
||||
<div className="absolute inset-0 bg-black/50" />
|
||||
|
||||
<div className="relative z-10 w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 md:py-24">
|
||||
<div className="flex flex-col items-start text-left max-w-3xl">
|
||||
{/* Badge */}
|
||||
{eyebrow && (
|
||||
<div className="inline-flex items-center gap-1.5 px-3.5 py-1.5 rounded-full bg-accent/20 border border-accent/30 text-white text-xs font-semibold uppercase tracking-wider mb-6 font-heading">
|
||||
<span className="size-2 rounded-full bg-accent" />
|
||||
{eyebrow}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Heading */}
|
||||
<h1 className="text-3xl md:text-5xl lg:text-6xl font-extrabold tracking-tight font-heading leading-[1.1] text-white">
|
||||
{title}
|
||||
</h1>
|
||||
|
||||
{/* Subtitle */}
|
||||
<p className="mt-6 text-base md:text-lg lg:text-xl text-white/90 max-w-2xl leading-relaxed">
|
||||
{subtitle}
|
||||
</p>
|
||||
|
||||
{/* Optional Features List */}
|
||||
{features && features.length > 0 && (
|
||||
<ul className="mt-6 grid grid-cols-2 gap-3 text-white/90 font-medium">
|
||||
{features.map((feature, idx) => (
|
||||
<li key={idx} className="flex items-center gap-2">
|
||||
<Star className="size-4 text-yellow-400 fill-yellow-400" />
|
||||
{feature}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
|
||||
{/* CTA Buttons */}
|
||||
<div className="mt-10 flex flex-col sm:flex-row items-start sm:items-center gap-4 w-full sm:w-auto">
|
||||
{ctaText && ctaLink && (
|
||||
<Link href={ctaLink} className={buttonClasses({ variant: 'primary', size: 'md', className: 'w-fit sm:w-auto group' })}>
|
||||
<span>{ctaText}</span>
|
||||
<ArrowRight className="size-5 group-hover:translate-x-1 transition-transform" />
|
||||
</Link>
|
||||
)}
|
||||
{secondaryCtaText && secondaryCtaLink && (
|
||||
<Link href={secondaryCtaLink} className={buttonClasses({ variant: 'outline', size: 'md', className: 'w-fit sm:w-auto' })}>
|
||||
<span>{secondaryCtaText}</span>
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,151 @@
|
||||
import Link from "next/link";
|
||||
import { Wrench, Thermometer, Wind, Zap, Calendar, Phone, Check } from "lucide-react";
|
||||
import { companyDetails } from "@/content/company";
|
||||
import { buttonClasses } from "../ui/Button";
|
||||
|
||||
export function HomeServices() {
|
||||
return (
|
||||
<section className="bg-white py-16 px-4">
|
||||
<div className="bg-slate-50 max-w-7xl mx-auto rounded-[2.5rem] p-6 sm:p-10 lg:p-14">
|
||||
<div className="max-w-7xl mx-auto flex flex-col gap-8">
|
||||
<div className="mb-2">
|
||||
<div className="inline-flex items-center gap-1.5 text-[10px] font-bold text-accent uppercase tracking-widest mb-6 bg-accent/5 border border-accent/20 px-3 py-1.5 rounded-full">
|
||||
<Check className="size-3.5" />
|
||||
Cennik usług
|
||||
</div>
|
||||
<h2 className="text-3xl sm:text-5xl font-extrabold text-primary font-heading leading-tight mb-4">
|
||||
Montaż, serwis i czyszczenie klimatyzacji –<br />już od <span className="underline decoration-accent underline-offset-4">150 zł</span>
|
||||
</h2>
|
||||
<p className="text-text-muted text-sm sm:text-base max-w-2xl leading-relaxed">
|
||||
Profesjonalna obsługa, certyfikowani specjaliści i szybki czas reakcji na terenie całego Wrocławia. Zadbaj o czyste powietrze i wydajność swoich urządzeń.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Cards Grid */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
|
||||
{/* Card 1: Montaż klimatyzacji */}
|
||||
<div className="bg-white p-8 flex flex-col rounded-2xl shadow-sm border border-border">
|
||||
<div className="flex flex-col gap-6 mb-12">
|
||||
<div className="size-12 bg-slate-100 flex items-center justify-center shrink-0 border border-slate-200 rounded-lg">
|
||||
<Wrench className="size-5 text-accent" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-xl font-bold text-primary font-heading mb-3">Montaż klimatyzacji</h3>
|
||||
<p className="text-sm text-text-muted leading-relaxed">Profesjonalny montaż urządzeń split i multisplit. Zapewniamy estetykę wykonania i pełne uruchomienie.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="border-t border-border pt-5 mt-auto">
|
||||
<p className="text-[10px] font-bold uppercase tracking-widest text-text-muted mb-1">Cena usługi</p>
|
||||
<p className="text-xl font-extrabold text-primary">od 1400 zł</p>
|
||||
<p className="text-[10px] text-text-muted mt-1">* cena standardowego montażu do 5m</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Card 2: Czyszczenie */}
|
||||
<div className="bg-white p-8 flex flex-col rounded-2xl shadow-sm border border-border">
|
||||
<div className="flex flex-col gap-6 mb-12">
|
||||
<div className="size-12 bg-slate-100 flex items-center justify-center shrink-0 border border-slate-200 rounded-lg">
|
||||
<Thermometer className="size-5 text-accent" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-xl font-bold text-primary font-heading mb-3">Czyszczenie i odgrzybianie</h3>
|
||||
<p className="text-sm text-text-muted leading-relaxed">Kompleksowe czyszczenie, dezynfekcja chemiczna, odgrzybianie parowe, czyszczenie filtrów.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="border-t border-border pt-5 mt-auto">
|
||||
<p className="text-[10px] font-bold uppercase tracking-widest text-text-muted mb-1">Cena usługi</p>
|
||||
<p className="text-xl font-extrabold text-primary">od 250 zł</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Card 3: Przegląd techniczny */}
|
||||
<div className="bg-white p-8 flex flex-col rounded-2xl shadow-sm border border-border">
|
||||
<div className="flex flex-col gap-6 mb-12">
|
||||
<div className="size-12 bg-slate-100 flex items-center justify-center shrink-0 border border-slate-200 rounded-lg">
|
||||
<Wind className="size-5 text-accent" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-xl font-bold text-primary font-heading mb-3">Przegląd techniczny</h3>
|
||||
<p className="text-sm text-text-muted leading-relaxed">Sprawdzenie parametrów pracy, kontrola szczelności układu, pomiar ciśnień roboczych.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="border-t border-border pt-5 mt-auto">
|
||||
<p className="text-[10px] font-bold uppercase tracking-widest text-text-muted mb-1">Cena usługi</p>
|
||||
<p className="text-xl font-extrabold text-primary">od 150 zł</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Card 4: Uzupełnienie czynnika */}
|
||||
<div className="bg-white p-8 flex flex-col rounded-2xl shadow-sm border border-border">
|
||||
<div className="flex flex-col gap-6 mb-12">
|
||||
<div className="size-12 bg-slate-100 flex items-center justify-center shrink-0 border border-slate-200 rounded-lg">
|
||||
<Zap className="size-5 text-accent" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-xl font-bold text-primary font-heading mb-3">Uzupełnienie czynnika</h3>
|
||||
<p className="text-sm text-text-muted leading-relaxed">Lokalizacja nieszczelności, próba ciśnieniowa azotem, dobicie czynnika chłodniczego.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="border-t border-border pt-5 mt-auto">
|
||||
<p className="text-[10px] font-bold uppercase tracking-widest text-text-muted mb-1">Cena usługi</p>
|
||||
<p className="text-xl font-extrabold text-primary">od 180 zł</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Card 5: Naprawa usterek */}
|
||||
<div className="bg-white p-8 flex flex-col rounded-2xl shadow-sm border border-border">
|
||||
<div className="flex flex-col gap-6 mb-12">
|
||||
<div className="size-12 bg-slate-100 flex items-center justify-center shrink-0 border border-slate-200 rounded-lg">
|
||||
<Wrench className="size-5 text-accent" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-xl font-bold text-primary font-heading mb-3">Naprawa usterek</h3>
|
||||
<p className="text-sm text-text-muted leading-relaxed">Diagnoza awarii, wymiana uszkodzonych podzespołów elektroniki, sprężarek, wentylatorów.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="border-t border-border pt-5 mt-auto">
|
||||
<p className="text-[10px] font-bold uppercase tracking-widest text-text-muted mb-1">Cena usługi</p>
|
||||
<p className="text-sm font-extrabold text-primary">Wycena indywidualna</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Card 6: Serwis sezonowy (Dark card) */}
|
||||
<div className="bg-[#1a2332] p-8 flex flex-col border border-[#1a2332] shadow-sm rounded-2xl">
|
||||
<div className="flex flex-col gap-6 mb-12">
|
||||
<div className="size-12 bg-slate-800 flex items-center justify-center shrink-0 border border-slate-700 rounded-lg">
|
||||
<Calendar className="size-5 text-accent" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-xl font-bold text-white font-heading mb-3">Serwis sezonowy / Abonament</h3>
|
||||
<p className="text-sm text-white/60 leading-relaxed">Regularna opieka nad instalacją przed sezonem letnim i zimowym. Priorytetowy czas reakcji w przypadku awarii.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="border-t border-white/10 pt-5 mt-auto">
|
||||
<p className="text-[10px] font-bold uppercase tracking-widest text-white/60 mb-1">Cena usługi</p>
|
||||
<p className="text-xl font-extrabold text-white">od 199 zł / rok</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Card 6: Gotowy na świeże powietrze? (Full width) */}
|
||||
<div className="bg-white md:col-span-3 p-8 md:p-10 flex flex-col lg:flex-row items-start lg:items-center justify-between gap-8 border-l-[6px] border-accent rounded-2xl shadow-sm">
|
||||
<div className="max-w-2xl">
|
||||
<h3 className="text-2xl font-bold text-primary font-heading mb-3">Gotowy na świeże powietrze?</h3>
|
||||
<p className="text-sm text-text-muted leading-relaxed">Nasi certyfikowani technicy są dostępni od poniedziałku do soboty. Zarezerwuj termin już dziś, aby uniknąć kolejek w sezonie.</p>
|
||||
</div>
|
||||
<div className="flex flex-col sm:flex-row items-center gap-4 shrink-0 w-full lg:w-auto justify-center lg:justify-end">
|
||||
<Link href="/kontakt" className={buttonClasses({ variant: 'primary', size: 'md' }) + ' w-fit sm:w-auto'}>
|
||||
Umów serwis <Calendar className="size-4" />
|
||||
</Link>
|
||||
<Link href={`tel:${companyDetails.phoneRaw}`} className={buttonClasses({ variant: 'outline-light', size: 'md' }) + ' w-fit sm:w-auto'}>
|
||||
<Phone className="size-4" /> Zadzwoń do nas
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,49 @@
|
||||
import React from 'react';
|
||||
import { Clock, Banknote, MapPin } from 'lucide-react';
|
||||
|
||||
interface InfoHighlightsProps {
|
||||
description: string;
|
||||
highlights: {
|
||||
icon: 'clock' | 'price' | 'map';
|
||||
title: string;
|
||||
description: string;
|
||||
}[];
|
||||
}
|
||||
|
||||
const iconMap = {
|
||||
clock: Clock,
|
||||
price: Banknote,
|
||||
map: MapPin,
|
||||
};
|
||||
|
||||
export const InfoHighlights = ({ description, highlights }: InfoHighlightsProps) => {
|
||||
return (
|
||||
<section className="py-16 bg-white">
|
||||
<div className="container mx-auto px-4 md:px-8 max-w-7xl">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-12 gap-12 items-center">
|
||||
<div className="lg:col-span-5">
|
||||
<h2 className="text-3xl font-bold text-primary mb-6">Szybki montaż, jasne zasady</h2>
|
||||
<p className="text-gray-600 text-lg leading-relaxed">
|
||||
{description}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="lg:col-span-7 grid grid-cols-1 sm:grid-cols-3 gap-6">
|
||||
{highlights.map((item, idx) => {
|
||||
const Icon = iconMap[item.icon];
|
||||
return (
|
||||
<div key={idx} className="bg-gray-50 p-6 rounded-xl border border-gray-100 flex flex-col items-center text-center">
|
||||
<div className="w-12 h-12 bg-accent/10 rounded-full flex items-center justify-center mb-4 text-accent">
|
||||
<Icon className="w-6 h-6" />
|
||||
</div>
|
||||
<h3 className="font-semibold text-primary mb-2">{item.title}</h3>
|
||||
<p className="text-sm text-gray-500">{item.description}</p>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,33 @@
|
||||
import React from 'react';
|
||||
|
||||
export function MapEmbed() {
|
||||
return (
|
||||
<section className="w-full h-[400px] md:h-[500px] bg-slate-200 relative overflow-hidden">
|
||||
{/*
|
||||
Docelowo tutaj powinien znaleźć się kod iframe z Google Maps.
|
||||
Przykład:
|
||||
<iframe
|
||||
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2505.465597792618!2d17.031980815754593!3d51.10006297957077!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zNTHCsDA2JzAwLjIiTiAxN8KwMDInMDMuMCJF!5e0!3m2!1spl!2spl!4v1620000000000!5m2!1spl!2spl"
|
||||
width="100%"
|
||||
height="100%"
|
||||
style={{ border: 0 }}
|
||||
allowFullScreen={false}
|
||||
loading="lazy"
|
||||
referrerPolicy="no-referrer-when-downgrade"
|
||||
className="absolute inset-0"
|
||||
></iframe>
|
||||
*/}
|
||||
|
||||
{/* Poniżej znajduje się Placeholder */}
|
||||
<div className="absolute inset-0 flex items-center justify-center bg-slate-200 border-y border-border">
|
||||
<div className="text-center p-6 bg-white/80 backdrop-blur-sm rounded-xl border border-white/50 shadow-sm max-w-sm mx-4">
|
||||
<svg className="w-12 h-12 text-primary/40 mx-auto mb-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7" />
|
||||
</svg>
|
||||
<p className="font-semibold text-primary font-heading">Mapa Lokalizacji</p>
|
||||
<p className="text-sm text-text-muted mt-1">Tutaj zostanie osadzona interaktywna mapa Google (iframe).</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,66 @@
|
||||
import Link from "next/link";
|
||||
import { ThermometerSun, Home, ChevronRight, ArrowRight } from "lucide-react";
|
||||
|
||||
export function PillarsSection() {
|
||||
return (
|
||||
<section className="py-16 md:py-24 bg-white">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
|
||||
{/* Pillar 1: Chłód i Ogrzewanie */}
|
||||
<div className="group relative rounded-2xl border border-border p-8 md:p-12 bg-slate-50 hover:bg-white hover:border-accent hover:shadow-xl transition-all duration-300 flex flex-col justify-between overflow-hidden">
|
||||
{/* Visual background gradient glow on hover */}
|
||||
<div className="absolute right-0 top-0 size-48 rounded-full bg-accent/5 filter blur-3xl opacity-0 group-hover:opacity-100 transition-opacity" />
|
||||
|
||||
<div>
|
||||
<div className="inline-flex p-4 rounded-xl bg-accent-light text-accent mb-6 group-hover:scale-110 transition-transform duration-300">
|
||||
<ThermometerSun className="size-8" />
|
||||
</div>
|
||||
<h3 className="text-2xl md:text-3xl font-bold text-primary font-heading mb-4">
|
||||
Chłód i Ogrzewanie
|
||||
</h3>
|
||||
<p className="text-text-muted text-base leading-relaxed mb-8 max-w-md">
|
||||
Klimatyzacja dla Twojego domu lub biura. Oferujemy profesjonalny audyt, dobór optymalnej mocy, autoryzowany montaż i stałą opiekę serwisową.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Link href="/klimatyzacja" className="btn btn-primary text-white flex items-center gap-2">
|
||||
|
||||
<span>Przejdź do oferty HVAC</span>
|
||||
<ChevronRight className="size-5 group-hover:translate-x-1 transition-transform" />
|
||||
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Pillar 2: Twój Dom */}
|
||||
<div className="group relative rounded-2xl border border-border p-8 md:p-12 bg-slate-50 hover:bg-white hover:border-cta hover:shadow-xl transition-all duration-300 flex flex-col justify-between overflow-hidden">
|
||||
{/* Visual background gradient glow on hover */}
|
||||
<div className="absolute right-0 top-0 size-48 rounded-full bg-cta/5 filter blur-3xl opacity-0 group-hover:opacity-100 transition-opacity" />
|
||||
|
||||
<div>
|
||||
<div className="inline-flex p-4 rounded-xl bg-cta/10 text-cta mb-6 group-hover:scale-110 transition-transform duration-300">
|
||||
<Home className="size-8" />
|
||||
</div>
|
||||
<h3 className="text-2xl md:text-3xl font-bold text-primary font-heading mb-4">
|
||||
Twój Dom
|
||||
</h3>
|
||||
<p className="text-text-muted text-base leading-relaxed mb-8 max-w-md">
|
||||
Instalacje HVAC, prace wykończeniowe, instalacje hydrauliczne oraz kompleksowy serwis sprzętu chłodniczego i AGD.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="mt-12 text-center">
|
||||
<Link href="/uslugi-domowe" className="btn btn-outline btn-primary bg-white font-bold flex items-center gap-2 mx-auto group">
|
||||
|
||||
<span>Pełna oferta usług</span>
|
||||
<ArrowRight className="size-4 group-hover:translate-x-1 transition-transform" />
|
||||
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,187 @@
|
||||
"use client";
|
||||
|
||||
import React, { useState } from 'react';
|
||||
import Link from 'next/link';
|
||||
import Image from 'next/image';
|
||||
import { Post } from '@/types/types';
|
||||
import { cn } from '@/lib/utils';
|
||||
import { Calendar, ArrowRight, ChevronLeft, ChevronRight } from 'lucide-react';
|
||||
import { FeaturedPost } from '@/components/sections/FeaturedPost';
|
||||
|
||||
interface PostsGridProps {
|
||||
posts: Post[];
|
||||
featuredPost?: Post;
|
||||
}
|
||||
|
||||
const POSTS_PER_PAGE = 6;
|
||||
|
||||
const categories = [
|
||||
{ id: 'wszystkie', label: 'Wszystkie' },
|
||||
{ id: 'klimatyzacja', label: 'Klimatyzacja' },
|
||||
|
||||
{ id: 'porady', label: 'Porady' },
|
||||
];
|
||||
|
||||
export function PostsGrid({ posts, featuredPost }: PostsGridProps) {
|
||||
const [activeCategory, setActiveCategory] = useState('wszystkie');
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
|
||||
const filteredPosts = posts.filter(
|
||||
(post) => activeCategory === 'wszystkie' || post.category === activeCategory
|
||||
);
|
||||
|
||||
const totalPages = Math.ceil(filteredPosts.length / POSTS_PER_PAGE);
|
||||
const startIndex = (currentPage - 1) * POSTS_PER_PAGE;
|
||||
const visiblePosts = filteredPosts.slice(startIndex, startIndex + POSTS_PER_PAGE);
|
||||
|
||||
const handleCategoryChange = (categoryId: string) => {
|
||||
setActiveCategory(categoryId);
|
||||
setCurrentPage(1); // Reset paginacji przy zmianie kategorii
|
||||
};
|
||||
|
||||
const categoryLabels: Record<string, string> = {
|
||||
'klimatyzacja': 'Klimatyzacja',
|
||||
|
||||
'porady': 'Porady'
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="py-12">
|
||||
{/* Artykuł Wyróżniony (tylko na 1 stronie) */}
|
||||
{featuredPost && currentPage === 1 && (
|
||||
<div className="mb-16">
|
||||
<h2 className="text-2xl font-bold text-primary font-heading mb-8">Artykuł wyróżniony</h2>
|
||||
<FeaturedPost post={featuredPost} />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Filtry */}
|
||||
<div className="flex flex-wrap items-center gap-3 mb-12">
|
||||
{categories.map((category) => (
|
||||
<button
|
||||
key={category.id}
|
||||
onClick={() => handleCategoryChange(category.id)}
|
||||
className={cn(
|
||||
"px-4 py-2 rounded-full text-sm font-semibold transition-all duration-300 border",
|
||||
activeCategory === category.id
|
||||
? "bg-primary text-white border-primary shadow-md"
|
||||
: "bg-white text-text-muted border-border hover:border-primary/30 hover:text-primary"
|
||||
)}
|
||||
>
|
||||
{category.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Siatka Artykułów */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
{visiblePosts.map((post) => {
|
||||
const dateObj = new Date(post.date);
|
||||
const formattedDate = dateObj.toLocaleDateString('pl-PL', {
|
||||
day: 'numeric', month: 'long', year: 'numeric'
|
||||
});
|
||||
|
||||
return (
|
||||
<article
|
||||
key={post.slug}
|
||||
className="group flex flex-col bg-white rounded-2xl overflow-hidden border border-border hover:shadow-lg transition-all duration-300"
|
||||
>
|
||||
<Link href={`/blog/${post.slug}`} className="relative aspect-[16/10] overflow-hidden">
|
||||
<Image
|
||||
src={post.image || '/images/hero/hero-section-image.webp'}
|
||||
alt={post.title}
|
||||
fill
|
||||
className="object-cover transition-transform duration-700 group-hover:scale-105"
|
||||
/>
|
||||
<div className="absolute top-4 left-4">
|
||||
<span className="px-3 py-1 bg-accent text-white text-[10px] font-bold rounded-full uppercase tracking-wider shadow-sm">
|
||||
{categoryLabels[post.category] || post.category}
|
||||
</span>
|
||||
</div>
|
||||
</Link>
|
||||
|
||||
<div className="flex flex-col flex-grow p-6 md:p-8">
|
||||
<div className="flex items-center gap-2 text-xs font-medium text-text-muted mb-3">
|
||||
<Calendar className="w-3.5 h-3.5 text-primary/50" />
|
||||
<span>{formattedDate}</span>
|
||||
</div>
|
||||
|
||||
<h3 className="text-xl font-bold text-primary font-heading leading-snug mb-3 group-hover:text-accent transition-colors">
|
||||
<Link href={`/blog/${post.slug}`}>
|
||||
{post.title}
|
||||
</Link>
|
||||
</h3>
|
||||
|
||||
<p className="text-sm text-text-muted leading-relaxed line-clamp-3 mb-6 flex-grow">
|
||||
{post.excerpt}
|
||||
</p>
|
||||
|
||||
<div className="mt-auto">
|
||||
<Link
|
||||
href={`/blog/${post.slug}`}
|
||||
className="inline-flex items-center gap-1.5 text-sm font-semibold text-primary group-hover:text-accent transition-colors"
|
||||
>
|
||||
<span>Czytaj więcej</span>
|
||||
<ArrowRight className="w-4 h-4 group-hover:translate-x-1 transition-transform" />
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{visiblePosts.length === 0 && (
|
||||
<div className="text-center py-16 bg-slate-50 rounded-2xl border border-border">
|
||||
<p className="text-lg text-text-muted font-medium">Brak artykułów w tej kategorii.</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Paginacja */}
|
||||
{totalPages > 1 && (
|
||||
<div className="mt-12 flex flex-wrap justify-center items-center gap-2">
|
||||
<button
|
||||
onClick={() => setCurrentPage(p => Math.max(1, p - 1))}
|
||||
disabled={currentPage === 1}
|
||||
className="w-10 h-10 flex items-center justify-center rounded-lg border border-border text-text-muted disabled:opacity-50 disabled:cursor-not-allowed hover:bg-slate-50 transition-colors"
|
||||
aria-label="Poprzednia strona"
|
||||
>
|
||||
<ChevronLeft className="w-5 h-5" />
|
||||
</button>
|
||||
|
||||
{Array.from({ length: totalPages }).map((_, i) => {
|
||||
const pageNum = i + 1;
|
||||
// Prosta logika dla mniejszych ekranów (opcjonalnie można ukrywać strony w środku, ale flex-wrap sobie poradzi)
|
||||
return (
|
||||
<button
|
||||
key={i}
|
||||
onClick={() => {
|
||||
setCurrentPage(pageNum);
|
||||
// Opcjonalnie: skroluj na górę po zmianie strony
|
||||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||||
}}
|
||||
className={cn(
|
||||
"w-10 h-10 flex items-center justify-center rounded-lg border transition-all duration-300 font-semibold",
|
||||
currentPage === pageNum
|
||||
? "bg-primary text-white border-primary shadow-md"
|
||||
: "bg-white text-text-muted border-border hover:border-primary/30 hover:text-primary"
|
||||
)}
|
||||
>
|
||||
{pageNum}
|
||||
</button>
|
||||
)
|
||||
})}
|
||||
|
||||
<button
|
||||
onClick={() => setCurrentPage(p => Math.min(totalPages, p + 1))}
|
||||
disabled={currentPage === totalPages}
|
||||
className="w-10 h-10 flex items-center justify-center rounded-lg border border-border text-text-muted disabled:opacity-50 disabled:cursor-not-allowed hover:bg-slate-50 transition-colors"
|
||||
aria-label="Następna strona"
|
||||
>
|
||||
<ChevronRight className="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,93 @@
|
||||
import React from 'react';
|
||||
import { pricingData, PricingItem } from '@/content/pricing';
|
||||
import { Check, Download } from 'lucide-react';
|
||||
|
||||
export const PricingTable = () => {
|
||||
const splitItems = pricingData.filter((item) => item.category === 'split');
|
||||
const multisplitItems = pricingData.filter((item) => item.category === 'multisplit');
|
||||
const additionalItems = pricingData.filter((item) => item.category === 'additional');
|
||||
|
||||
const renderTableRows = (items: PricingItem[]) => {
|
||||
return items.map((item) => (
|
||||
<tr key={item.id} className="border-b border-gray-100 last:border-0 hover:bg-gray-50/50 transition-colors">
|
||||
<td className="py-4 px-4 text-gray-800 font-medium">{item.name}</td>
|
||||
<td className="py-4 px-4 text-center whitespace-nowrap text-gray-600">{item.priceNet} zł</td>
|
||||
<td className="py-4 px-4 text-center whitespace-nowrap font-semibold text-primary">{item.priceGrossCompany} zł</td>
|
||||
</tr>
|
||||
));
|
||||
};
|
||||
|
||||
return (
|
||||
<section className="py-16 bg-white" id="cennik">
|
||||
<div className="container mx-auto px-4 md:px-8 max-w-5xl">
|
||||
<div className="text-center mb-12">
|
||||
<h2 className="text-3xl font-bold text-primary mb-4">Cennik usług instalacyjnych</h2>
|
||||
<p className="text-gray-600 max-w-2xl mx-auto">
|
||||
Przejrzyste ceny bez ukrytych kosztów. Ostateczna wycena zależy od specyfiki budynku i trudności montażu – dokonywana jest zawsze przed rozpoczęciem prac.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="overflow-x-auto rounded-xl border border-gray-200 shadow-sm mb-8">
|
||||
<table className="w-full text-left border-collapse min-w-[600px]">
|
||||
<thead>
|
||||
<tr className="bg-gray-50 border-b border-gray-200 text-sm uppercase text-gray-500">
|
||||
<th className="py-4 px-4 font-semibold w-1/2">Usługa</th>
|
||||
<th className="py-4 px-4 font-semibold text-center">Cena netto</th>
|
||||
<th className="py-4 px-4 font-semibold text-center">Brutto</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{/* Split */}
|
||||
<tr>
|
||||
<td colSpan={3} className="bg-gray-50/80 py-3 px-4 font-semibold text-primary text-sm uppercase">
|
||||
Montaż układów SPLIT
|
||||
</td>
|
||||
</tr>
|
||||
{renderTableRows(splitItems)}
|
||||
|
||||
{/* Multisplit */}
|
||||
<tr>
|
||||
<td colSpan={3} className="bg-gray-50/80 py-3 px-4 font-semibold text-primary text-sm uppercase">
|
||||
Montaż układów MULTISPLIT
|
||||
</td>
|
||||
</tr>
|
||||
{renderTableRows(multisplitItems)}
|
||||
|
||||
{/* Usługi dodatkowe */}
|
||||
<tr>
|
||||
<td colSpan={3} className="bg-gray-50/80 py-3 px-4 font-semibold text-primary text-sm uppercase">
|
||||
Usługi dodatkowe i serwis
|
||||
</td>
|
||||
</tr>
|
||||
{renderTableRows(additionalItems)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col md:flex-row gap-8 items-start justify-between bg-gray-50 p-6 rounded-xl border border-gray-100">
|
||||
<div className="flex-1">
|
||||
<h3 className="font-semibold text-primary mb-3 flex items-center gap-2">
|
||||
<Check className="w-5 h-5 text-accent" />
|
||||
Co obejmuje montaż podstawowy?
|
||||
</h3>
|
||||
<ul className="grid grid-cols-1 sm:grid-cols-2 gap-2 text-sm text-gray-600">
|
||||
<li className="flex items-start gap-2"><div className="w-1.5 h-1.5 rounded-full bg-accent mt-1.5 shrink-0" /> Wykonanie przewiertu przez ścianę</li>
|
||||
<li className="flex items-start gap-2"><div className="w-1.5 h-1.5 rounded-full bg-accent mt-1.5 shrink-0" /> Instalacja chłodnicza do 3 mb</li>
|
||||
<li className="flex items-start gap-2"><div className="w-1.5 h-1.5 rounded-full bg-accent mt-1.5 shrink-0" /> Podłączenie do gniazdka (kabel 3m)</li>
|
||||
<li className="flex items-start gap-2"><div className="w-1.5 h-1.5 rounded-full bg-accent mt-1.5 shrink-0" /> Grawitacyjne odprowadzenie skroplin</li>
|
||||
<li className="flex items-start gap-2"><div className="w-1.5 h-1.5 rounded-full bg-accent mt-1.5 shrink-0" /> Montaż jednostek do wysokości 3m</li>
|
||||
<li className="flex items-start gap-2"><div className="w-1.5 h-1.5 rounded-full bg-accent mt-1.5 shrink-0" /> Próba szczelności i uruchomienie</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="w-full md:w-64 shrink-0 flex flex-col items-center md:items-stretch gap-4">
|
||||
<a href="/pdf/cennik-thermcool-2026.pdf" target="_blank" rel="noopener noreferrer" className="btn btn-outline btn-primary bg-white w-fit md:w-full justify-between group flex items-center px-6 py-2 border rounded-lg hover:bg-gray-50 text-sm font-semibold text-primary">
|
||||
Pobierz cennik PDF
|
||||
<Download className="w-4 h-4 ml-2 group-hover:-translate-y-1 transition-transform" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,85 @@
|
||||
import {
|
||||
PhoneCall, ClipboardCheck, Cpu, HeartHandshake, HelpCircle,
|
||||
ShieldAlert, Construction, Layers, MonitorDown, Server, Gauge, Zap, BookOpen
|
||||
} from "lucide-react";
|
||||
import { SectionHeading } from "../common/SectionHeading";
|
||||
import { mainProcessSteps } from "@/content/process";
|
||||
import { ProcessStep } from "@/types/types";
|
||||
|
||||
const iconMap: Record<string, React.ComponentType<{ className?: string }>> = {
|
||||
PhoneCall,
|
||||
ClipboardCheck,
|
||||
Cpu,
|
||||
HeartHandshake,
|
||||
ShieldAlert,
|
||||
Construction,
|
||||
Layers,
|
||||
MonitorDown,
|
||||
Server,
|
||||
Gauge,
|
||||
Zap,
|
||||
BookOpen,
|
||||
};
|
||||
|
||||
interface ProcessStepsProps {
|
||||
steps?: ProcessStep[];
|
||||
title?: string;
|
||||
subtitle?: string;
|
||||
eyebrow?: string;
|
||||
}
|
||||
|
||||
export function ProcessSteps({
|
||||
steps = mainProcessSteps,
|
||||
title = "Prosty proces współpracy w 4 krokach",
|
||||
subtitle = "Od momentu kontaktu do pełnego uruchomienia i serwisu — dbamy o każdy detal na każdym etapie.",
|
||||
eyebrow = "Jak Działamy"
|
||||
}: ProcessStepsProps) {
|
||||
return (
|
||||
<section className="py-16 md:py-24 bg-white">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<SectionHeading
|
||||
eyebrow={eyebrow}
|
||||
title={title}
|
||||
subtitle={subtitle}
|
||||
align="center"
|
||||
/>
|
||||
|
||||
{/* Process Steps Timeline */}
|
||||
<div className="relative mt-12">
|
||||
{/* Desktop connecting line (only if few steps, otherwise wrap) */}
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-y-12 gap-x-8 relative z-10">
|
||||
{steps.map((step, idx) => {
|
||||
const Icon = iconMap[step.icon || ""] || HelpCircle;
|
||||
return (
|
||||
<div key={idx} className="flex flex-col items-center text-center group">
|
||||
{/* Circle Badge with Icon & Number */}
|
||||
<div className="relative size-20 rounded-full bg-slate-50 border-2 border-slate-200 flex items-center justify-center text-primary group-hover:border-accent group-hover:bg-accent-light group-hover:text-accent transition-all duration-300 shadow-sm z-10">
|
||||
{/* Step Number */}
|
||||
{step.icon && iconMap[step.icon] && (
|
||||
<span className="absolute -top-1.5 -right-1.5 size-6 rounded-full bg-accent text-white text-xs font-bold flex items-center justify-center font-heading border-2 border-white shadow-sm">
|
||||
{step.number}
|
||||
</span>
|
||||
)}
|
||||
{step.icon && iconMap[step.icon]
|
||||
? <Icon className="size-8 group-hover:scale-110 transition-transform duration-300" />
|
||||
: <span className="text-2xl font-extrabold font-heading text-accent">{step.number}</span>
|
||||
}
|
||||
</div>
|
||||
|
||||
{/* Title & Description */}
|
||||
<h3 className="text-lg font-bold text-primary font-heading mt-6 mb-2">
|
||||
{step.title}
|
||||
</h3>
|
||||
<p className="text-sm text-text-muted leading-relaxed max-w-[240px]">
|
||||
{step.description}
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,54 @@
|
||||
import React from 'react';
|
||||
import Image from 'next/image';
|
||||
import { projectsData, Project } from '@/content/projects';
|
||||
|
||||
interface ProjectsGalleryProps {
|
||||
category: Project['category'];
|
||||
title?: string;
|
||||
description?: string;
|
||||
}
|
||||
|
||||
export const ProjectsGallery = ({
|
||||
category,
|
||||
title = "Nasze realizacje",
|
||||
description = "Zobacz przykłady prac wykonanych przez naszych certyfikowanych instalatorów."
|
||||
}: ProjectsGalleryProps) => {
|
||||
const projects = projectsData.filter((project) => project.category === category);
|
||||
|
||||
if (projects.length === 0) return null;
|
||||
|
||||
return (
|
||||
<section className="py-16 bg-white">
|
||||
<div className="container mx-auto px-4 md:px-8 max-w-7xl">
|
||||
<div className="text-center max-w-2xl mx-auto mb-12">
|
||||
<h2 className="text-3xl font-bold text-primary mb-4">{title}</h2>
|
||||
<p className="text-gray-600">{description}</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
{projects.map((project) => (
|
||||
<div key={project.id} className="group rounded-2xl overflow-hidden border border-gray-100 shadow-sm hover:shadow-lg transition-all duration-300 bg-white flex flex-col h-full">
|
||||
<div className="relative h-64 overflow-hidden bg-gray-100">
|
||||
<Image
|
||||
src={project.imageUrl}
|
||||
alt={project.title}
|
||||
fill
|
||||
className="object-cover group-hover:scale-105 transition-transform duration-500"
|
||||
sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
|
||||
/>
|
||||
</div>
|
||||
<div className="p-6 flex-grow flex flex-col">
|
||||
<h3 className="font-bold text-lg text-primary mb-2 group-hover:text-accent transition-colors">
|
||||
{project.title}
|
||||
</h3>
|
||||
<p className="text-gray-600 text-sm mb-4 flex-grow">
|
||||
{project.description}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,95 @@
|
||||
"use client";
|
||||
|
||||
import React, { useState } from 'react';
|
||||
import Image from 'next/image';
|
||||
|
||||
import { projectsData, Project } from '@/content/projects';
|
||||
import { cn } from '@/lib/utils';
|
||||
import { MapPin } from 'lucide-react';
|
||||
|
||||
type Category = 'wszystkie' | Project['category'];
|
||||
|
||||
const categories: { id: Category; label: string }[] = [
|
||||
{ id: 'wszystkie', label: 'Wszystkie' },
|
||||
{ id: 'klimatyzacja', label: 'Klimatyzacja' },
|
||||
|
||||
];
|
||||
|
||||
export function ProjectsGrid() {
|
||||
const [activeCategory, setActiveCategory] = useState<Category>('wszystkie');
|
||||
|
||||
const filteredProjects = projectsData.filter(
|
||||
(project) => activeCategory === 'wszystkie' || project.category === activeCategory
|
||||
);
|
||||
|
||||
return (
|
||||
<section className="py-16 md:py-24 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
{/* Filtry */}
|
||||
<div className="flex flex-wrap items-center justify-center gap-3 mb-12">
|
||||
{categories.map((category) => (
|
||||
<button
|
||||
key={category.id}
|
||||
onClick={() => setActiveCategory(category.id)}
|
||||
className={cn(
|
||||
"px-5 py-2.5 rounded-full text-sm font-semibold transition-all duration-300 border",
|
||||
activeCategory === category.id
|
||||
? "bg-primary text-white border-primary shadow-md"
|
||||
: "bg-white text-text-muted border-border hover:border-primary/30 hover:text-primary"
|
||||
)}
|
||||
>
|
||||
{category.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Siatka */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
{filteredProjects.map((project) => (
|
||||
<div
|
||||
key={project.id}
|
||||
className="group relative rounded-2xl overflow-hidden bg-slate-100 aspect-[4/3]"
|
||||
>
|
||||
<Image
|
||||
src={project.imageUrl}
|
||||
alt={project.title}
|
||||
fill
|
||||
className="object-cover transition-transform duration-700 group-hover:scale-105"
|
||||
/>
|
||||
|
||||
{/* Nakładka gradientowa */}
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-primary/90 via-primary/40 to-transparent opacity-80 group-hover:opacity-90 transition-opacity duration-300" />
|
||||
|
||||
{/* Treść (Zawsze widoczna lokalizacja i kategoria, pojawiający się opis) */}
|
||||
<div className="absolute inset-0 p-6 flex flex-col justify-end">
|
||||
<div className="transform translate-y-4 group-hover:translate-y-0 transition-transform duration-300">
|
||||
<div className="flex items-center gap-3 mb-3">
|
||||
<span className="px-3 py-1 bg-accent text-white text-xs font-bold rounded-full uppercase tracking-wider">
|
||||
{categories.find(c => c.id === project.category)?.label}
|
||||
</span>
|
||||
<div className="flex items-center gap-1 text-white/80 text-sm font-medium">
|
||||
<MapPin className="w-3.5 h-3.5" />
|
||||
<span>{project.location}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3 className="text-xl font-bold text-white mb-2 font-heading">
|
||||
{project.title}
|
||||
</h3>
|
||||
|
||||
<p className="text-white/80 text-sm line-clamp-2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 delay-100">
|
||||
{project.description}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{filteredProjects.length === 0 && (
|
||||
<div className="text-center py-20 text-text-muted">
|
||||
<p className="text-lg">Brak realizacji w tej kategorii.</p>
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,47 @@
|
||||
import { SectionHeading } from "../common/SectionHeading";
|
||||
import { IconCard } from "../common/IconCard";
|
||||
import { services as defaultServices } from "@/content/services";
|
||||
|
||||
interface ServicesGridProps {
|
||||
services?: {
|
||||
title: string;
|
||||
description: string;
|
||||
icon: string;
|
||||
href?: string;
|
||||
}[];
|
||||
title?: string;
|
||||
subtitle?: string;
|
||||
eyebrow?: string;
|
||||
}
|
||||
|
||||
export function ServicesGrid({
|
||||
services = defaultServices,
|
||||
title = "Kompleksowe usługi dla Twojego domu",
|
||||
subtitle = "Zapewniamy profesjonalne wsparcie w zakresie instalacji sanitarnych, grzewczych, chłodniczych oraz prac wykończeniowych.",
|
||||
eyebrow = "Pełna Oferta"
|
||||
}: ServicesGridProps) {
|
||||
return (
|
||||
<section className="py-16 md:py-24 bg-slate-50 border-t 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={`grid grid-cols-1 sm:grid-cols-2 gap-6 md:gap-8 mt-10 ${services.length === 2 ? 'max-w-4xl mx-auto' : 'lg:grid-cols-3'}`}>
|
||||
{services.map((service, idx) => (
|
||||
<IconCard
|
||||
key={idx}
|
||||
title={service.title}
|
||||
description={service.description}
|
||||
iconName={service.icon}
|
||||
href={service.href}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,23 @@
|
||||
import React from 'react';
|
||||
import { companyDetails } from '@/content/company';
|
||||
|
||||
export function StatsBar() {
|
||||
return (
|
||||
<section className="bg-primary text-white py-12 md:py-16">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-8 md:gap-4 divide-x divide-white/10">
|
||||
{companyDetails.stats.map((stat, idx) => (
|
||||
<div key={idx} className="flex flex-col items-center justify-center text-center px-4">
|
||||
<div className="text-4xl md:text-5xl font-extrabold text-accent mb-2 font-heading">
|
||||
{stat.value}
|
||||
</div>
|
||||
<div className="text-sm md:text-base font-medium text-white/80 uppercase tracking-wider">
|
||||
{stat.label}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,64 @@
|
||||
import React from 'react';
|
||||
import { ThermometerSnowflake, VolumeX, Droplets, Snowflake, PowerOff } from 'lucide-react';
|
||||
|
||||
const symptoms = [
|
||||
{
|
||||
icon: ThermometerSnowflake,
|
||||
title: 'Lodówka nie chłodzi',
|
||||
description: 'Najczęstsza usterka. Może oznaczać problem z termostatem, wyciek czynnika chłodniczego lub uszkodzenie sprężarki.',
|
||||
},
|
||||
{
|
||||
icon: VolumeX,
|
||||
title: 'Głośna praca / Dziwne dźwięki',
|
||||
description: 'Buczenie, stukanie lub piszczenie często wskazuje na zużycie wentylatora, agregatu lub problem z ułożeniem urządzenia.',
|
||||
},
|
||||
{
|
||||
icon: Droplets,
|
||||
title: 'Zbieranie się wody na dnie',
|
||||
description: 'Zazwyczaj spowodowane zatkanym odpływem skroplin w chłodziarce lub problemem z systemem No Frost.',
|
||||
},
|
||||
{
|
||||
icon: Snowflake,
|
||||
title: 'Nadmierne oszranianie',
|
||||
description: 'Brak uszczelnienia drzwi, uszkodzona grzałka odszraniania lub awaria czujnika temperatury.',
|
||||
},
|
||||
{
|
||||
icon: PowerOff,
|
||||
title: 'Urządzenie nie włącza się',
|
||||
description: 'Problemy z zasilaniem, uszkodzony moduł sterujący (płyta główna) lub całkowita awaria agregatu.',
|
||||
},
|
||||
];
|
||||
|
||||
export const SymptomsList = () => {
|
||||
return (
|
||||
<section className="py-16 bg-white">
|
||||
<div className="container mx-auto px-4 md:px-8 max-w-6xl">
|
||||
<div className="text-center max-w-2xl mx-auto mb-12">
|
||||
<h2 className="text-3xl font-bold text-primary mb-4">Typowe usterki — kiedy wezwać serwis?</h2>
|
||||
<p className="text-gray-600">
|
||||
Jeśli zauważysz którykolwiek z poniższych objawów, nie zwlekaj. Szybka reakcja może zapobiec poważniejszej awarii i uchronić żywność przed zepsuciem.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{symptoms.map((symptom, idx) => {
|
||||
const Icon = symptom.icon;
|
||||
return (
|
||||
<div key={idx} className="bg-gray-50 p-6 rounded-xl border border-gray-100 flex gap-4 items-start hover:shadow-md transition-shadow">
|
||||
<div className="w-12 h-12 shrink-0 bg-accent/10 rounded-lg flex items-center justify-center text-accent mt-1">
|
||||
<Icon className="w-6 h-6" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-bold text-primary mb-2">{symptom.title}</h3>
|
||||
<p className="text-gray-600 text-sm leading-relaxed">
|
||||
{symptom.description}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,78 @@
|
||||
'use client';
|
||||
|
||||
import useEmblaCarousel from 'embla-carousel-react';
|
||||
import Autoplay from 'embla-carousel-autoplay';
|
||||
import { Star, ChevronLeft, ChevronRight } from 'lucide-react';
|
||||
import { useCallback } from 'react';
|
||||
|
||||
const testimonials = [
|
||||
{ name: 'Anna Kowalska', city: 'Wrocław', rating: 5, text: 'Montaż przeprowadzony sprawnie i bez bałaganu. Ekipa przybyła punktualnie, wszystko wytłumaczyli i zostawili po sobie idealny porządek. Klimatyzator działa cicho i skutecznie.' },
|
||||
{ name: 'Marek Wiśniewski', city: 'Legnica', rating: 5, text: 'Polecam z całego serca. Fachowa obsługa, dobra cena i bardzo miły kontakt. Klimatyzator dobrali idealnie do mojego salonu 40 m². Już pierwszego lata oszczędności widoczne na rachunkach.' },
|
||||
{ name: 'Katarzyna Nowak', city: 'Wrocław', rating: 5, text: 'Bardzo profesjonalna firma. Zamówiłam klimatyzację do sypialni i biura — dwie jednostki zamontowane w jeden dzień. Instalacja ukryta w brudzie, wygląda świetnie.' },
|
||||
{ name: 'Piotr Zając', city: 'Wałbrzych', rating: 5, text: 'Szybka wycena, konkretne podejście bez owijania w bawełnę. Klimatyzator Gree działa już drugi sezon bez żadnych problemów. Serwis też na wysokim poziomie.' },
|
||||
{ name: 'Monika Dąbrowska', city: 'Jelenia Góra', rating: 5, text: 'Świetna obsługa od pierwszego kontaktu do odbioru prac. Montażyści zadbali o każdy detal, przeprowadzenie rur estetyczne. Klimatyzacja grzeje też zimą — duże zaskoczenie!' },
|
||||
{ name: 'Tomasz Lewandowski', city: 'Wrocław', rating: 5, text: 'Bardzo dobra firma. Mam multisplit na 3 pokoje — wszystko działa bez zarzutu. Cena montażu zgodna z wyceną, bez ukrytych kosztów. Zdecydowanie wrócę przy kolejnej inwestycji.' },
|
||||
{ name: 'Agnieszka Wróbel', city: 'Oleśnica', rating: 5, text: 'Polecam każdemu. Szybko, czysto i profesjonalnie. Klimatyzator marki Rotenso — cichy jak myszka, a chłodzi rewelacyjnie. Wreszcie sypialnia w której można spać latem.' },
|
||||
{ name: 'Krzysztof Jabłoński', city: 'Lubin', rating: 5, text: 'Solidna robota. Montaż kasetonowy w biurze 60 m² — ekipa wiedziała co robi, nie tracili czasu. Urządzenie działa cicho, pracownicy zadowoleni. Na pewno polecę znajomym.' },
|
||||
{ name: 'Ewa Kamińska', city: 'Wrocław', rating: 5, text: 'Doskonały kontakt i profesjonalizm na każdym etapie. Doradca pomógł wybrać odpowiednią moc, montaż odbył się następnego dnia. Klimatyzacja w domu to teraz standard.' },
|
||||
{ name: 'Radosław Szymański', city: 'Świdnica', rating: 5, text: 'Bardzo sprawna realizacja. Zamówiłem w środę, w piątek już miałem zamontowaną klimatyzację. Jakość wykonania na wysokim poziomie, wszystko dokładnie wyjaśnione.' },
|
||||
{ name: 'Marta Kowalczyk', city: 'Oława', rating: 5, text: 'Super firma! Klimatyzator Samsung dobrana idealnie do naszego mieszkania. Montażyści schludni, uprzejmi i szybcy. Instalacja w korytku wygląda bardzo estetycznie.' },
|
||||
{ name: 'Grzegorz Woźniak', city: 'Wrocław', rating: 5, text: 'Drugi raz korzystam z usług ThermCool i znowu jestem w pełni zadowolony. Tym razem pompa ciepła — ekipa poradziła sobie z trudnym miejscem montażu bez problemu.' },
|
||||
{ name: 'Joanna Michalska', city: 'Trzebnica', rating: 5, text: 'Bardzo dobra obsługa i uczciwe ceny. Klimatyzacja Daikin pracuje bezbłędnie od ponad roku. Przy okazji montażu doradca wyjaśnił jak dbać o urządzenie żeby służyło jak najdłużej.' },
|
||||
{ name: 'Bartosz Krawczyk', city: 'Głogów', rating: 5, text: 'Polecam! Montaż multisplit do domu jednorodzinnego — 4 jednostki wewnętrzne zamontowane w dwa dni. Praca czysta, instalacja ukryta w brudzie. Efekt końcowy powyżej oczekiwań.' },
|
||||
{ name: 'Sylwia Pawlak', city: 'Środa Śląska', rating: 5, text: 'Klimatyzator Haier dobrany pod kątem rozmiarów pokoju i budżetu. Bardzo pomocny doradca, bez zbędnego wciskania droższych modeli. Montaż szybki i bez bałaganu. Polecam!' },
|
||||
];
|
||||
|
||||
export function Testimonials() {
|
||||
const [emblaRef, emblaApi] = useEmblaCarousel(
|
||||
{ loop: true, align: 'start', slidesToScroll: 1 },
|
||||
[Autoplay({ delay: 4000, stopOnInteraction: true })]
|
||||
);
|
||||
|
||||
const scrollPrev = useCallback(() => emblaApi?.scrollPrev(), [emblaApi]);
|
||||
const scrollNext = useCallback(() => emblaApi?.scrollNext(), [emblaApi]);
|
||||
|
||||
return (
|
||||
<section className="py-16 bg-slate-50">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="flex items-center justify-between mb-10">
|
||||
<div>
|
||||
<h2 className="text-2xl md:text-3xl font-extrabold text-primary font-heading">
|
||||
Co mówią nasi klienci
|
||||
</h2>
|
||||
<p className="text-text-muted mt-1">Opinie klientów</p>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<button onClick={scrollPrev} aria-label="Poprzednia opinia"
|
||||
className="size-10 rounded-xl border border-border bg-white flex items-center justify-center text-primary hover:border-accent hover:text-accent transition-colors">
|
||||
<ChevronLeft className="size-5" />
|
||||
</button>
|
||||
<button onClick={scrollNext} aria-label="Następna opinia"
|
||||
className="size-10 rounded-xl border border-border bg-white flex items-center justify-center text-primary hover:border-accent hover:text-accent transition-colors">
|
||||
<ChevronRight className="size-5" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="overflow-hidden" ref={emblaRef}>
|
||||
<div className="flex gap-5">
|
||||
{testimonials.map((t, i) => (
|
||||
<div key={i} className="flex-none w-[320px] md:w-[360px] bg-white rounded-2xl border border-border p-6 flex flex-col gap-3">
|
||||
<div className="flex gap-0.5">
|
||||
{Array.from({ length: t.rating }).map((_, j) => (
|
||||
<Star key={j} className="size-4 fill-yellow-400 text-yellow-400" />
|
||||
))}
|
||||
</div>
|
||||
<p className="text-sm text-text-muted leading-relaxed flex-1">"{t.text}"</p>
|
||||
<div className="pt-3 border-t border-border">
|
||||
<p className="text-sm font-bold text-primary">{t.name}</p>
|
||||
<p className="text-xs text-text-muted">{t.city}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,54 @@
|
||||
import React from 'react';
|
||||
import { Home, Zap, Wrench } from 'lucide-react';
|
||||
|
||||
const cases = [
|
||||
{
|
||||
icon: Home,
|
||||
title: 'Nowo budowany dom',
|
||||
description: 'Najlepszy moment na decyzję o pompie ciepła. Pozwala to na uniknięcie budowy komina, przyłącza gazowego i wydzielania kotłowni. Idealnie współpracuje z nowoczesnym ogrzewaniem podłogowym.',
|
||||
},
|
||||
{
|
||||
icon: Wrench,
|
||||
title: 'Wymiana starego kotła (kopciucha)',
|
||||
description: 'Zastąpienie uciążliwego pieca węglowego bezobsługową pompą. Często wymaga dostosowania istniejącej instalacji, ale daje dostęp do najwyższych poziomów dofinansowania z programu Czyste Powietrze.',
|
||||
},
|
||||
{
|
||||
icon: Zap,
|
||||
title: 'Modernizacja i hybryda',
|
||||
description: 'Dołożenie pompy ciepła do istniejącego, wciąż sprawnego kotła gazowego lub olejowego. Pompa przejmuje ogrzewanie przez większość sezonu, a stary kocioł wspomaga system tylko w największe mrozy.',
|
||||
},
|
||||
];
|
||||
|
||||
export const UseCases = () => {
|
||||
return (
|
||||
<section className="py-16 bg-white">
|
||||
<div className="container mx-auto px-4 md:px-8 max-w-5xl">
|
||||
<div className="text-center mb-12">
|
||||
<h2 className="text-3xl font-bold text-primary mb-4">Kiedy warto zainwestować?</h2>
|
||||
<p className="text-gray-600">
|
||||
Pompa ciepła to elastyczne rozwiązanie, które sprawdzi się w różnych scenariuszach życiowych i inwestycyjnych.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-6">
|
||||
{cases.map((useCase, idx) => {
|
||||
const Icon = useCase.icon;
|
||||
return (
|
||||
<div key={idx} className="flex flex-col sm:flex-row gap-6 p-6 md:p-8 rounded-2xl border border-gray-100 hover:border-accent/30 transition-colors bg-gray-50/50 hover:bg-white group">
|
||||
<div className="w-16 h-16 shrink-0 bg-white border border-gray-100 shadow-sm rounded-2xl flex items-center justify-center text-primary group-hover:text-accent group-hover:border-accent/20 transition-all">
|
||||
<Icon className="w-8 h-8" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-xl font-bold text-primary mb-3">{useCase.title}</h3>
|
||||
<p className="text-gray-600 leading-relaxed">
|
||||
{useCase.description}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,56 @@
|
||||
import React from 'react';
|
||||
import { SectionHeading } from '../common/SectionHeading';
|
||||
import { ShieldCheck, Clock, ThumbsUp, HeartHandshake } from 'lucide-react';
|
||||
|
||||
const values = [
|
||||
{
|
||||
title: 'Najwyższa jakość',
|
||||
description: 'Nie idziemy na kompromisy. Stosujemy wyłącznie sprawdzone materiały i urządzenia renomowanych producentów.',
|
||||
icon: ThumbsUp
|
||||
},
|
||||
{
|
||||
title: 'Terminowość',
|
||||
description: 'Szanujemy Twój czas. Każde zlecenie realizujemy zgodnie z ustalonym harmonogramem.',
|
||||
icon: Clock
|
||||
},
|
||||
{
|
||||
title: 'Bezpieczeństwo',
|
||||
description: 'Posiadamy wszystkie niezbędne uprawnienia (m.in. F-Gaz, SEP) oraz pełne ubezpieczenie OC firmy.',
|
||||
icon: ShieldCheck
|
||||
},
|
||||
{
|
||||
title: 'Długofalowe relacje',
|
||||
description: 'Zależy nam na zaufaniu. Po skończonym montażu czy remoncie oferujemy pełną opiekę serwisową.',
|
||||
icon: HeartHandshake
|
||||
}
|
||||
];
|
||||
|
||||
export function ValuesGrid() {
|
||||
return (
|
||||
<section className="py-16 md:py-24 bg-slate-50 border-y border-border">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<SectionHeading
|
||||
eyebrow="Dlaczego my"
|
||||
title="Nasze wartości"
|
||||
subtitle="Zasady, którymi kierujemy się w codziennej pracy z naszymi klientami."
|
||||
align="center"
|
||||
/>
|
||||
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8 mt-16">
|
||||
{values.map((val, idx) => {
|
||||
const Icon = val.icon;
|
||||
return (
|
||||
<div key={idx} className="bg-white p-8 rounded-2xl border border-border text-center hover:shadow-lg transition-shadow duration-300">
|
||||
<div className="mx-auto w-16 h-16 bg-accent/10 text-accent rounded-2xl flex items-center justify-center mb-6 transform -rotate-3 hover:rotate-0 transition-transform">
|
||||
<Icon className="w-8 h-8" />
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-primary font-heading mb-3">{val.title}</h3>
|
||||
<p className="text-text-muted leading-relaxed text-sm">{val.description}</p>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,86 @@
|
||||
import Image from "next/image";
|
||||
import { Award, FileText, ShieldCheck, Sparkles } from "lucide-react";
|
||||
import { companyDetails } from "@/content/company";
|
||||
|
||||
export function WhyUs() {
|
||||
const advantages = [
|
||||
{
|
||||
icon: Award,
|
||||
title: "Doświadczenie i certyfikaty",
|
||||
description: "Posiadamy wszystkie wymagane certyfikaty i autoryzacje. Działamy na rynku od ponad 15 lat.",
|
||||
},
|
||||
{
|
||||
icon: FileText,
|
||||
title: "Jasna wycena bez ukrytych kosztów",
|
||||
description: "Przed montażem otrzymujesz pełny kosztorys. Ceny podane w ofercie są cenami ostatecznymi.",
|
||||
},
|
||||
{
|
||||
icon: ShieldCheck,
|
||||
title: "Gwarancja i wsparcie serwisowe",
|
||||
description: "Zapewniamy pełną opiekę pogwarancyjną oraz coroczne przeglądy zachowujące gwarancję producenta.",
|
||||
},
|
||||
{
|
||||
icon: Sparkles,
|
||||
title: "Czystość i dbałość o detale",
|
||||
description: "Pracujemy z użyciem odkurzaczy przemysłowych. Po montażu zostawiamy pomieszczenia idealnie czyste.",
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<section className="py-16 md:py-24 bg-slate-50 border-t border-b border-border">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-12 gap-12 lg:gap-16 items-center">
|
||||
{/* Left Column: Title, Intro and Statistics */}
|
||||
<div className="lg:col-span-5 flex flex-col gap-6">
|
||||
<div>
|
||||
<span className="text-xs md:text-sm font-semibold uppercase tracking-wider text-accent font-heading">
|
||||
{`Dlaczego ${companyDetails.shortName}`}
|
||||
</span>
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-primary font-heading leading-tight mt-2">
|
||||
Zaufany partner w instalacjach domowych
|
||||
</h2>
|
||||
<p className="text-sm md:text-base text-text-muted mt-4 leading-relaxed">
|
||||
Stawiamy na najwyższą jakość wykonania, terminowość oraz bezkompromisowe bezpieczeństwo. Pomagamy na każdym kroku — od wyboru odpowiedniego urządzenia, poprzez załatwienie dotacji, aż po finalny montaż i regularny serwis.
|
||||
</p>
|
||||
<div className="relative w-full h-64 rounded-2xl overflow-hidden mt-6">
|
||||
<Image
|
||||
src="/images/services/wycena.webp"
|
||||
alt="Bezpłatna wycena klimatyzacji ThermCool"
|
||||
fill
|
||||
className="object-cover"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
{/* Right Column: Advantages Grid */}
|
||||
<div className="lg:col-span-7 grid grid-cols-1 sm:grid-cols-2 gap-6">
|
||||
{advantages.map((adv, idx) => {
|
||||
const Icon = adv.icon;
|
||||
return (
|
||||
<div
|
||||
key={idx}
|
||||
className="p-6 rounded-xl bg-white border border-border hover:shadow-md transition-shadow flex flex-col gap-4"
|
||||
>
|
||||
<div className="size-12 rounded-lg bg-accent-light text-accent flex items-center justify-center shrink-0">
|
||||
<Icon className="size-6" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-base font-bold text-primary font-heading">
|
||||
{adv.title}
|
||||
</h3>
|
||||
<p className="text-xs md:text-sm text-text-muted mt-1.5 leading-relaxed">
|
||||
{adv.description}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,94 @@
|
||||
"use client";
|
||||
|
||||
import React from 'react';
|
||||
import Image from 'next/image';
|
||||
import Link from 'next/link';
|
||||
import { useCartStore } from '@/lib/cart-store';
|
||||
import { formatCurrency } from '@/lib/utils';
|
||||
import { Minus, Plus, Trash2 } from 'lucide-react';
|
||||
|
||||
export function CartItems() {
|
||||
const { items, removeItem, updateQuantity } = useCartStore();
|
||||
|
||||
if (items.length === 0) {
|
||||
return (
|
||||
<div className="bg-white p-12 rounded-2xl border border-border text-center">
|
||||
<div className="w-20 h-20 bg-slate-50 text-slate-300 rounded-full flex items-center justify-center mx-auto mb-6">
|
||||
<Trash2 className="w-10 h-10" />
|
||||
</div>
|
||||
<h2 className="text-2xl font-bold text-primary font-heading mb-4">Twój koszyk jest pusty</h2>
|
||||
<p className="text-text-muted mb-8">Nie dodałeś jeszcze żadnych produktów do koszyka.</p>
|
||||
<Link href="/sklep" className="inline-flex bg-cta hover:bg-cta-hover text-white font-bold py-3 px-8 rounded-xl transition-colors">
|
||||
Przejdź do sklepu
|
||||
</Link>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{items.map((item) => {
|
||||
const itemPrice = item.price;
|
||||
const totalGross = itemPrice * item.quantity;
|
||||
|
||||
return (
|
||||
<div key={item.id} className="bg-white p-6 rounded-2xl border border-border flex flex-col sm:flex-row gap-6 relative">
|
||||
<button
|
||||
onClick={() => removeItem(item.id)}
|
||||
className="absolute top-4 right-4 p-2 text-text-muted hover:text-red-500 hover:bg-red-50 rounded-lg transition-colors"
|
||||
aria-label="Usuń z koszyka"
|
||||
>
|
||||
<Trash2 className="w-5 h-5" />
|
||||
</button>
|
||||
|
||||
<div className="relative w-24 h-24 sm:w-32 sm:h-32 shrink-0 bg-slate-50 rounded-xl p-2 border border-border">
|
||||
<Image
|
||||
src={item.image}
|
||||
alt={item.name}
|
||||
fill
|
||||
className="object-contain"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col flex-grow justify-between">
|
||||
<div>
|
||||
<div className="text-xs font-bold text-text-muted uppercase tracking-wider mb-1">
|
||||
{item.brand}
|
||||
</div>
|
||||
<h3 className="text-lg font-bold text-primary font-heading leading-tight mb-2 pr-10">
|
||||
<Link href={`/sklep/${item.slug}`} className="hover:text-accent transition-colors">
|
||||
{item.name}
|
||||
</Link>
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col sm:flex-row sm:items-center justify-end gap-4 mt-4">
|
||||
<div className="flex items-center gap-6">
|
||||
<div className="flex items-center border border-border rounded-lg bg-slate-50">
|
||||
<button
|
||||
onClick={() => updateQuantity(item.id, item.quantity - 1)}
|
||||
disabled={item.quantity <= 1}
|
||||
className="w-8 h-8 flex items-center justify-center text-text-muted hover:text-primary disabled:opacity-50"
|
||||
>
|
||||
<Minus className="w-4 h-4" />
|
||||
</button>
|
||||
<span className="w-8 text-center text-sm font-bold">{item.quantity}</span>
|
||||
<button
|
||||
onClick={() => updateQuantity(item.id, item.quantity + 1)}
|
||||
className="w-8 h-8 flex items-center justify-center text-text-muted hover:text-primary"
|
||||
>
|
||||
<Plus className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
<div className="text-xl font-extrabold text-primary font-heading w-24 text-right">
|
||||
{formatCurrency(totalGross)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,72 @@
|
||||
"use client";
|
||||
|
||||
import React, { useState } from 'react';
|
||||
import { useCartStore } from '@/lib/cart-store';
|
||||
import { formatCurrency } from '@/lib/utils';
|
||||
import Link from 'next/link';
|
||||
import { ShieldCheck, ArrowRight, Tag } from 'lucide-react';
|
||||
|
||||
export function CartSummary() {
|
||||
const { items, getTotal } = useCartStore();
|
||||
const [promoCode, setPromoCode] = useState('');
|
||||
|
||||
if (items.length === 0) return null;
|
||||
|
||||
const total = getTotal();
|
||||
const subtotal = total / 1.23;
|
||||
const vat = total - subtotal;
|
||||
|
||||
return (
|
||||
<div className="bg-slate-50 p-6 md:p-8 rounded-2xl border border-border sticky top-24">
|
||||
<h3 className="text-xl font-bold text-primary font-heading mb-6">Podsumowanie zamówienia</h3>
|
||||
|
||||
<div className="mb-8">
|
||||
<label htmlFor="promo" className="text-sm font-semibold text-text-muted mb-2 block">Posiadasz kod rabatowy?</label>
|
||||
<div className="flex gap-2">
|
||||
<div className="relative flex-grow">
|
||||
<Tag className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-text-muted" />
|
||||
<input
|
||||
id="promo"
|
||||
type="text"
|
||||
value={promoCode}
|
||||
onChange={(e) => setPromoCode(e.target.value)}
|
||||
placeholder="Wprowadź kod"
|
||||
className="w-full pl-9 pr-4 py-2.5 rounded-xl border border-border focus:border-primary focus:ring-1 focus:ring-primary outline-none transition-all text-sm"
|
||||
/>
|
||||
</div>
|
||||
<button className="btn btn-outline btn-primary bg-white shrink-0">Zastosuj</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4 mb-6 border-b border-border/50 pb-6">
|
||||
<div className="flex justify-between text-sm text-text-muted">
|
||||
<span>Suma netto</span>
|
||||
<span className="font-semibold text-primary">{formatCurrency(subtotal)}</span>
|
||||
</div>
|
||||
<div className="flex justify-between text-sm text-text-muted">
|
||||
<span>Podatek VAT (23%)</span>
|
||||
<span className="font-semibold text-primary">{formatCurrency(vat)}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-between items-end mb-8">
|
||||
<span className="text-lg font-bold text-primary">Do zapłaty brutto</span>
|
||||
<span className="text-3xl font-extrabold text-primary font-heading text-right">{formatCurrency(total)}</span>
|
||||
</div>
|
||||
|
||||
<Link href="/zamowienie" className="block w-full btn btn-primary font-bold group cursor-pointer text-white">
|
||||
|
||||
Przejdź do zamówienia
|
||||
<ArrowRight className="w-5 h-5 ml-2 group-hover:translate-x-1 transition-transform" />
|
||||
|
||||
</Link>
|
||||
|
||||
<div className="mt-6 flex flex-col gap-3">
|
||||
<div className="flex items-center gap-2 text-xs text-text-muted font-medium justify-center">
|
||||
<ShieldCheck className="w-4 h-4 text-green-600" />
|
||||
Bezpieczne zakupy z certyfikatem SSL
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,64 @@
|
||||
'use client';
|
||||
|
||||
import { useCompareStore } from '@/lib/compare-store';
|
||||
import { X, GitCompare } from 'lucide-react';
|
||||
import Image from 'next/image';
|
||||
import Link from 'next/link';
|
||||
|
||||
export function CompareBar() {
|
||||
const { items, removeItem, clearAll } = useCompareStore();
|
||||
|
||||
if (items.length === 0) return null;
|
||||
|
||||
return (
|
||||
<div className="fixed bottom-0 left-0 right-0 z-50 bg-white border-t border-border shadow-lg">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-3">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="flex items-center gap-2 shrink-0">
|
||||
<GitCompare className="size-4 text-accent" />
|
||||
<span className="text-sm font-semibold text-primary hidden sm:block">
|
||||
Porównaj ({items.length}/3)
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-3 flex-1 overflow-x-auto">
|
||||
{items.map((item) => (
|
||||
<div key={item.slug} className="flex items-center gap-2 bg-slate-50 rounded-lg px-3 py-1.5 border border-border shrink-0">
|
||||
<div className="relative size-8 bg-white rounded">
|
||||
<Image src={item.image} alt={item.name} fill className="object-contain p-0.5" unoptimized={item.image.startsWith('http')} />
|
||||
</div>
|
||||
<div className="hidden sm:block">
|
||||
<p className="text-xs font-medium text-primary line-clamp-1 max-w-[140px]">{item.name}</p>
|
||||
{item.price && <p className="text-xs text-accent font-bold">{item.price.toLocaleString('pl-PL')} zł</p>}
|
||||
</div>
|
||||
<button onClick={() => removeItem(item.slug)} className="text-text-muted hover:text-primary transition-colors ml-1">
|
||||
<X className="size-3.5" />
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
|
||||
{/* Puste sloty */}
|
||||
{Array.from({ length: 3 - items.length }).map((_, i) => (
|
||||
<div key={i} className="size-11 rounded-lg border-2 border-dashed border-border flex items-center justify-center text-text-muted shrink-0">
|
||||
<span className="text-lg">+</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2 shrink-0">
|
||||
{items.length >= 2 && (
|
||||
<Link href="/porownaj" className="btn btn-primary text-white font-bold text-sm py-2 px-4">
|
||||
|
||||
Porównaj
|
||||
|
||||
</Link>
|
||||
)}
|
||||
<button onClick={clearAll} className="text-xs text-text-muted hover:text-primary transition-colors">
|
||||
Wyczyść
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,174 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import { Loader2, CheckCircle2 } from 'lucide-react';
|
||||
import { submitMultisplitForm } from '@/app/zapytanie-multisplit/actions';
|
||||
import { getRecaptchaToken } from '@/lib/getRecaptchaToken';
|
||||
|
||||
interface Props {
|
||||
productName: string;
|
||||
productSku: string;
|
||||
}
|
||||
|
||||
export default function MultisplitContactForm({ productName, productSku }: Props) {
|
||||
const [form, setForm] = useState({
|
||||
name: '',
|
||||
phone: '',
|
||||
email: '',
|
||||
city: '',
|
||||
rooms: '2',
|
||||
message: '',
|
||||
consent: false,
|
||||
});
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [sent, setSent] = useState(false);
|
||||
const [error, setError] = useState('');
|
||||
|
||||
const handle = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
|
||||
const { name, value, type } = e.target;
|
||||
setForm(prev => ({
|
||||
...prev,
|
||||
[name]: type === 'checkbox' ? (e.target as HTMLInputElement).checked : value,
|
||||
}));
|
||||
};
|
||||
|
||||
const submit = async () => {
|
||||
if (!form.name || !form.phone || !form.consent) {
|
||||
setError('Wypełnij wymagane pola i zaznacz zgodę.');
|
||||
return;
|
||||
}
|
||||
setLoading(true);
|
||||
setError('');
|
||||
try {
|
||||
const token = await getRecaptchaToken('submit');
|
||||
const recaptchaToken = token || '';
|
||||
|
||||
const res = await submitMultisplitForm({
|
||||
name: form.name,
|
||||
phone: form.phone,
|
||||
email: form.email,
|
||||
city: form.city,
|
||||
rooms: form.rooms,
|
||||
message: form.message,
|
||||
consent: form.consent,
|
||||
productName,
|
||||
productSku,
|
||||
recaptchaToken,
|
||||
});
|
||||
if (res.success) setSent(true);
|
||||
else setError(res.message || 'Błąd wysyłki. Zadzwoń do nas bezpośrednio.');
|
||||
} catch {
|
||||
setError('Błąd połączenia. Spróbuj ponownie.');
|
||||
}
|
||||
setLoading(false);
|
||||
};
|
||||
|
||||
if (sent) {
|
||||
return (
|
||||
<div className="bg-green-50 text-green-800 p-8 rounded-2xl border border-green-200 flex flex-col items-center text-center">
|
||||
<CheckCircle2 className="w-16 h-16 text-green-500 mb-4" />
|
||||
<h3 className="text-2xl font-bold font-heading mb-2">Zapytanie wysłane!</h3>
|
||||
<p className="text-green-700">Oddzwonimy w ciągu 24 godzin z bezpłatną wyceną.</p>
|
||||
<button
|
||||
onClick={() => setSent(false)}
|
||||
className="mt-6 px-6 py-2 bg-green-600 text-white rounded-lg font-semibold hover:bg-green-700 transition-colors"
|
||||
>
|
||||
Wyślij kolejne zapytanie
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-4">
|
||||
{/* Produkt info */}
|
||||
<div className="bg-slate-50 rounded-xl px-4 py-3 text-xs text-text-muted">
|
||||
Zapytanie dotyczy: <span className="font-bold text-primary">{productName}</span>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div className="flex flex-col gap-1">
|
||||
<label className="text-xs font-medium text-primary">Imię i nazwisko *</label>
|
||||
<input name="name" value={form.name} onChange={handle}
|
||||
placeholder="Jan Kowalski"
|
||||
className="h-10 px-3 text-sm border border-border rounded-xl focus:border-accent outline-none" />
|
||||
</div>
|
||||
<div className="flex flex-col gap-1">
|
||||
<label className="text-xs font-medium text-primary">Telefon *</label>
|
||||
<input name="phone" value={form.phone} onChange={handle}
|
||||
placeholder="+48 600 000 000"
|
||||
className="h-10 px-3 text-sm border border-border rounded-xl focus:border-accent outline-none" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div className="flex flex-col gap-1">
|
||||
<label className="text-xs font-medium text-primary">Email</label>
|
||||
<input name="email" value={form.email} onChange={handle}
|
||||
placeholder="[email protected]"
|
||||
className="h-10 px-3 text-sm border border-border rounded-xl focus:border-accent outline-none" />
|
||||
</div>
|
||||
<div className="flex flex-col gap-1">
|
||||
<label className="text-xs font-medium text-primary">Miasto *</label>
|
||||
<input name="city" value={form.city} onChange={handle}
|
||||
placeholder="Wrocław"
|
||||
className="h-10 px-3 text-sm border border-border rounded-xl focus:border-accent outline-none" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-1">
|
||||
<label className="text-xs font-medium text-primary">Ile pomieszczeń do klimatyzacji?</label>
|
||||
<select name="rooms" value={form.rooms} onChange={handle}
|
||||
className="h-10 px-3 text-sm border border-border rounded-xl focus:border-accent outline-none bg-white">
|
||||
<option value="2">2 pomieszczenia</option>
|
||||
<option value="3">3 pomieszczenia</option>
|
||||
<option value="4">4 pomieszczenia</option>
|
||||
<option value="5">5 pomieszczeń</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-1">
|
||||
<label className="text-xs font-medium text-primary">Dodatkowe informacje (opcjonalnie)</label>
|
||||
<textarea name="message" value={form.message} onChange={handle}
|
||||
rows={3}
|
||||
placeholder="Np. metraż pomieszczeń, typ budynku, piętro..."
|
||||
className="px-3 py-2.5 text-sm border border-border rounded-xl focus:border-accent outline-none resize-none" />
|
||||
</div>
|
||||
|
||||
<label className="flex items-start gap-2.5 cursor-pointer">
|
||||
<div className="relative mt-0.5">
|
||||
<input
|
||||
type="checkbox"
|
||||
name="consent"
|
||||
checked={form.consent}
|
||||
onChange={handle}
|
||||
className="sr-only"
|
||||
/>
|
||||
<div className={`size-4 rounded border-2 flex items-center justify-center transition-colors ${
|
||||
form.consent ? 'bg-accent border-accent' : 'bg-white border-slate-300'
|
||||
}`}>
|
||||
{form.consent && (
|
||||
<svg viewBox="0 0 10 8" className="size-2.5" fill="none">
|
||||
<path d="M1 4L3.5 6.5L9 1" stroke="white" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
</svg>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<span className="text-xs text-text-muted leading-relaxed">
|
||||
Wyrażam zgodę na przetwarzanie moich danych osobowych w celu obsługi zapytania przez ThermCool. *
|
||||
</span>
|
||||
</label>
|
||||
|
||||
{error && <p className="text-xs text-red-500">{error}</p>}
|
||||
|
||||
<button
|
||||
onClick={submit}
|
||||
disabled={loading}
|
||||
className="flex items-center justify-center gap-2 h-11 bg-accent text-white font-bold rounded-xl text-sm hover:bg-accent/90 transition-colors disabled:opacity-60"
|
||||
>
|
||||
{loading ? <Loader2 className="size-4 animate-spin" /> : null}
|
||||
{loading ? 'Wysyłanie...' : 'Wyślij zapytanie o wycenę'}
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,203 @@
|
||||
'use client';
|
||||
|
||||
import Link from 'next/link';
|
||||
import Image from 'next/image';
|
||||
import { ShoppingCart, GitCompare, Phone } from 'lucide-react';
|
||||
import { Product } from '@/content/products';
|
||||
import { useCartStore } from '@/lib/cart-store';
|
||||
import { useCompareStore } from '@/lib/compare-store';
|
||||
import { useState } from 'react';
|
||||
|
||||
const brandLogos: Record<string, string> = {
|
||||
'Gree': '/brands/gree.webp',
|
||||
'Rotenso': '/brands/rotenso.webp',
|
||||
'Toshiba': '/brands/toshiba.webp',
|
||||
'Daikin': '/brands/daikin.webp',
|
||||
'CHV': '/brands/chv.webp',
|
||||
'Haier': '/brands/haier.webp',
|
||||
'LG': '/brands/lg.webp',
|
||||
'Samsung': '/brands/samsung.webp',
|
||||
'Mitsubishi Electric': '/brands/mitsubishi.webp',
|
||||
'Fuji Electric': '/brands/fuji.webp',
|
||||
'Aux': '/brands/aux-brand.webp',
|
||||
'AUX': '/brands/aux-brand.webp',
|
||||
};
|
||||
|
||||
interface ProductCardProps {
|
||||
product: Product;
|
||||
}
|
||||
|
||||
export function ProductCard({ product }: ProductCardProps) {
|
||||
const addItem = useCartStore((s) => s.addItem);
|
||||
const { addItem: addCompare, removeItem: removeCompare, isAdded, items: compareItems } = useCompareStore();
|
||||
const [added, setAdded] = useState(false);
|
||||
|
||||
const handleAddToCart = (e: React.MouseEvent) => {
|
||||
e.preventDefault();
|
||||
if (!product.price) return;
|
||||
addItem({
|
||||
slug: product.slug,
|
||||
name: product.name,
|
||||
brand: product.brand,
|
||||
image: product.image,
|
||||
price: product.price,
|
||||
});
|
||||
setAdded(true);
|
||||
};
|
||||
|
||||
const handleCompare = (e: React.MouseEvent) => {
|
||||
e.preventDefault();
|
||||
if (isAdded(product.slug)) {
|
||||
removeCompare(product.slug);
|
||||
} else {
|
||||
addCompare({
|
||||
slug: product.slug,
|
||||
name: product.name,
|
||||
brand: product.brand,
|
||||
price: product.price,
|
||||
image: product.image,
|
||||
specs: product.specs,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const inCompare = isAdded(product.slug);
|
||||
const compareDisabled = compareItems.length >= 3 && !inCompare;
|
||||
|
||||
return (
|
||||
<div className="group relative bg-white rounded-xl border border-border hover:border-accent hover:shadow-md transition-all duration-200 overflow-hidden flex flex-col">
|
||||
<Link href={`/sklep/${product.slug}`} className="block relative aspect-[4/3] bg-slate-50 overflow-hidden">
|
||||
<Image
|
||||
src={product.image}
|
||||
alt={product.name}
|
||||
fill
|
||||
sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw"
|
||||
className="object-contain p-6 group-hover:scale-105 transition-transform duration-300"
|
||||
unoptimized={product.image.startsWith('http')}
|
||||
/>
|
||||
|
||||
<div className="absolute top-3 left-3 z-10 flex flex-col gap-1.5">
|
||||
{brandLogos[product.brand] ? (
|
||||
<div className="bg-white rounded px-1.5 py-1 inline-block shadow-sm">
|
||||
<Image
|
||||
src={brandLogos[product.brand]}
|
||||
alt={product.brand}
|
||||
width={40}
|
||||
height={14}
|
||||
className="object-contain"
|
||||
unoptimized
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<span className="text-xs font-semibold text-primary bg-white/95 px-2 py-1 rounded-md border border-border shadow-sm">
|
||||
{product.brand}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{product.category === 'multisplit' && (
|
||||
<span className="absolute top-2 right-2 px-2 py-1 bg-accent/10 rounded-md text-xs font-semibold text-accent border border-accent/20">
|
||||
Multisplit
|
||||
</span>
|
||||
)}
|
||||
|
||||
{/* Porównywarka - pojawia się na hover */}
|
||||
<button
|
||||
onClick={handleCompare}
|
||||
disabled={compareDisabled}
|
||||
title={inCompare ? 'Usuń z porównywarki' : compareDisabled ? 'Max 3 produkty' : 'Dodaj do porównania'}
|
||||
className={`absolute bottom-2 right-2 p-1.5 rounded-lg border transition-all ${
|
||||
inCompare
|
||||
? 'bg-accent text-white border-accent opacity-100'
|
||||
: 'bg-white/90 text-text-muted border-border opacity-0 group-hover:opacity-100 hover:border-accent hover:text-accent'
|
||||
} ${compareDisabled ? 'opacity-30 cursor-not-allowed' : ''}`}
|
||||
>
|
||||
<GitCompare className="size-3.5" />
|
||||
</button>
|
||||
</Link>
|
||||
|
||||
<div className="p-4 flex flex-col flex-1 gap-2">
|
||||
<Link href={`/sklep/${product.slug}`}>
|
||||
<h3 className="text-sm font-semibold text-primary font-heading leading-snug line-clamp-2 hover:text-accent transition-colors">
|
||||
{product.name}
|
||||
</h3>
|
||||
</Link>
|
||||
|
||||
<div className="flex flex-wrap gap-1.5">
|
||||
{product.specs['Moc chłodnicza'] && (
|
||||
<span className="px-2 py-0.5 bg-slate-50 rounded text-xs text-text-muted border border-border">
|
||||
{product.specs['Moc chłodnicza']} kW
|
||||
</span>
|
||||
)}
|
||||
{product.specs['Klasa energetyczna'] && (
|
||||
<span className="px-2 py-0.5 bg-green-50 rounded text-xs text-green-700 border border-green-100 font-medium">
|
||||
{product.specs['Klasa energetyczna']}
|
||||
</span>
|
||||
)}
|
||||
{product.specs['Czynnik chłodniczy'] && (
|
||||
<span className="px-2 py-0.5 bg-slate-50 rounded text-xs text-text-muted border border-border">
|
||||
{product.specs['Czynnik chłodniczy']}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Cena + CTA */}
|
||||
<div className="mt-auto pt-2 flex items-end justify-between gap-2">
|
||||
{product.category === 'multisplit' ? (
|
||||
<>
|
||||
<div className="flex items-center gap-1 text-accent">
|
||||
<Phone className="size-4" />
|
||||
<span className="text-sm font-semibold">Wycena indywidualna</span>
|
||||
</div>
|
||||
<Link
|
||||
href={`/zapytanie-multisplit/${product.slug}`}
|
||||
onClick={e => e.stopPropagation()}
|
||||
>
|
||||
<button className="flex items-center gap-1.5 px-3 py-2 rounded-lg text-xs font-bold bg-accent text-white hover:bg-accent/90 transition-colors shrink-0">
|
||||
Zapytaj o wycenę
|
||||
</button>
|
||||
</Link>
|
||||
</>
|
||||
) : product.price !== null ? (
|
||||
<>
|
||||
<div>
|
||||
<p className="text-lg font-bold text-primary font-heading leading-none">
|
||||
{product.price.toLocaleString('pl-PL')} zł
|
||||
</p>
|
||||
<p className="text-xs text-text-muted mt-0.5">brutto</p>
|
||||
</div>
|
||||
{added ? (
|
||||
<Link
|
||||
href="/koszyk"
|
||||
className="flex items-center gap-1.5 px-3 py-2 rounded-lg text-xs font-bold bg-green-500 text-white hover:bg-green-600 transition-colors shrink-0"
|
||||
onClick={e => e.stopPropagation()}
|
||||
>
|
||||
<ShoppingCart className="size-3.5" /> Zobacz koszyk
|
||||
</Link>
|
||||
) : (
|
||||
<button
|
||||
onClick={handleAddToCart}
|
||||
className="flex items-center gap-1.5 px-3 py-2 rounded-lg text-xs font-bold bg-accent text-white hover:bg-accent/90 transition-colors shrink-0"
|
||||
>
|
||||
<ShoppingCart className="size-3.5" /> Do koszyka
|
||||
</button>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<div className="flex items-center gap-1 text-accent">
|
||||
<Phone className="size-3.5" />
|
||||
<span className="text-sm font-semibold">Zapytaj o cenę</span>
|
||||
</div>
|
||||
<Link href="/kontakt" onClick={e => e.stopPropagation()}>
|
||||
<button className="flex items-center gap-1.5 px-3 py-2 rounded-lg text-xs font-bold bg-primary text-white hover:bg-primary/90 transition-colors shrink-0">
|
||||
Zapytaj
|
||||
</button>
|
||||
</Link>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,52 @@
|
||||
"use client";
|
||||
|
||||
import React, { useState } from 'react';
|
||||
import Image from 'next/image';
|
||||
|
||||
interface ProductGalleryProps {
|
||||
image: string;
|
||||
name: string;
|
||||
images?: string[]; // opcjonalna dodatkowa galeria z contentu, u nas na razie w mocku mamy 1 image
|
||||
}
|
||||
|
||||
export function ProductGallery({ image, name, images }: ProductGalleryProps) {
|
||||
const [mainImage, setMainImage] = useState(image || '/images/hero/shop-section-image.webp');
|
||||
|
||||
const gallery = images && images.length > 0
|
||||
? images
|
||||
: [image, '/images/hero/shop-section-image.webp'];
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-4">
|
||||
<div className="relative aspect-square w-full bg-slate-50 rounded-2xl border border-border overflow-hidden flex items-center justify-center p-8">
|
||||
<Image
|
||||
src={mainImage}
|
||||
alt={name}
|
||||
width={800}
|
||||
height={800}
|
||||
className="object-contain w-full h-full"
|
||||
priority
|
||||
/>
|
||||
</div>
|
||||
|
||||
{gallery.length > 1 && (
|
||||
<div className="flex gap-4 overflow-x-auto pb-2">
|
||||
{gallery.map((img, idx) => (
|
||||
<button
|
||||
key={idx}
|
||||
onClick={() => setMainImage(img)}
|
||||
className={`relative w-24 h-24 shrink-0 rounded-xl border-2 overflow-hidden bg-slate-50 p-2 transition-all ${mainImage === img ? 'border-primary' : 'border-border hover:border-primary/50'}`}
|
||||
>
|
||||
<Image
|
||||
src={img}
|
||||
alt={`${name} - miniatura ${idx + 1}`}
|
||||
fill
|
||||
className="object-contain"
|
||||
/>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,517 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import Image from 'next/image';
|
||||
import Link from 'next/link';
|
||||
import {
|
||||
Phone, ShoppingCart, GitCompare, Check,
|
||||
Thermometer, Volume2, Zap, Wind, Star, Info, Eye, X, type LucideIcon
|
||||
} from 'lucide-react';
|
||||
import { Product } from '@/content/products';
|
||||
import { useCartStore } from '@/lib/cart-store';
|
||||
import { useCompareStore } from '@/lib/compare-store';
|
||||
import { getProductVariants } from '@/content/product-variants';
|
||||
import { useRecentlyViewedStore } from '@/lib/recently-viewed-store';
|
||||
import { RecentlyViewedProducts } from './RecentlyViewedProducts';
|
||||
import { useEffect } from 'react';
|
||||
|
||||
const brandLogos: Record<string, string> = {
|
||||
'Gree': '/brands/gree.webp',
|
||||
'Rotenso': '/brands/rotenso.webp',
|
||||
'Toshiba': '/brands/toshiba.webp',
|
||||
'Daikin': '/brands/daikin.webp',
|
||||
'CHV': '/brands/chv.webp',
|
||||
'Haier': '/brands/haier.webp',
|
||||
'LG': '/brands/lg.webp',
|
||||
'Samsung': '/brands/samsung.webp',
|
||||
'Mitsubishi Electric': '/brands/mitsubishi.webp',
|
||||
'Fuji Electric': '/brands/fuji.webp',
|
||||
'Aux': '/brands/aux-brand.webp',
|
||||
'AUX': '/brands/aux-brand.webp',
|
||||
};
|
||||
|
||||
interface Props {
|
||||
product: Product;
|
||||
seriesProducts: Product[];
|
||||
companyPhone: string;
|
||||
companyPhoneRaw: string;
|
||||
}
|
||||
|
||||
function estimateSEER(klasa: string): number {
|
||||
if (!klasa) return 5.0;
|
||||
const k = klasa.toUpperCase();
|
||||
if (k.includes('A+++')) return 8.5;
|
||||
if (k.includes('A++')) return 6.1;
|
||||
if (k.includes('A+')) return 4.6;
|
||||
if (k.includes('A')) return 3.6;
|
||||
return 5.0;
|
||||
}
|
||||
|
||||
function parseMoc(val: string): number {
|
||||
if (!val) return 0;
|
||||
const nums = val.replace(',', '.').match(/[\d.]+/g);
|
||||
if (!nums) return 0;
|
||||
if (nums.length === 1) return parseFloat(nums[0]);
|
||||
// zakres: bierz środkową
|
||||
const floats = nums.map(parseFloat);
|
||||
return floats[Math.floor(floats.length / 2)];
|
||||
}
|
||||
|
||||
const TABS = ['Opis', 'Specyfikacja', 'Montaż', 'Opinie'] as const;
|
||||
type Tab = typeof TABS[number];
|
||||
|
||||
function seededViews(slug: string): number {
|
||||
let hash = 0;
|
||||
for (let i = 0; i < slug.length; i++) {
|
||||
hash = (hash * 31 + slug.charCodeAt(i)) >>> 0;
|
||||
}
|
||||
return 18 + (hash % 50);
|
||||
}
|
||||
|
||||
export function ProductPageClient({ product, seriesProducts, companyPhone, companyPhoneRaw }: Props) {
|
||||
const [currentProduct, setCurrentProduct] = useState(product);
|
||||
const [activeTab, setActiveTab] = useState<Tab>('Opis');
|
||||
const [godziny, setGodziny] = useState(8);
|
||||
const [cartState, setCartState] = useState<'idle' | 'added' | 'cart'>('idle');
|
||||
const [showViewsBanner, setShowViewsBanner] = useState(true);
|
||||
const viewsCount = seededViews(currentProduct.slug);
|
||||
|
||||
const variants = getProductVariants(currentProduct.slug);
|
||||
|
||||
const addToCart = useCartStore(s => s.addItem);
|
||||
const { addItem: addCompare, removeItem: removeCompare, isAdded } = useCompareStore();
|
||||
const inCompare = isAdded(currentProduct.slug);
|
||||
|
||||
const addRecentlyViewed = useRecentlyViewedStore((s) => s.addItem);
|
||||
useEffect(() => {
|
||||
addRecentlyViewed(currentProduct);
|
||||
}, [currentProduct, addRecentlyViewed]);
|
||||
|
||||
const handleAddToCart = () => {
|
||||
if (!currentProduct.price) return;
|
||||
addToCart({
|
||||
slug: currentProduct.slug,
|
||||
name: currentProduct.name,
|
||||
brand: currentProduct.brand,
|
||||
image: currentProduct.image,
|
||||
price: currentProduct.price,
|
||||
});
|
||||
setCartState('added');
|
||||
setTimeout(() => setCartState('cart'), 1500);
|
||||
};
|
||||
|
||||
const handleCompare = () => {
|
||||
if (inCompare) removeCompare(currentProduct.slug);
|
||||
else addCompare({ slug: currentProduct.slug, name: currentProduct.name, brand: currentProduct.brand, price: currentProduct.price, image: currentProduct.image, specs: currentProduct.specs });
|
||||
};
|
||||
|
||||
const mocChlodnicza = parseMoc(currentProduct.specs['Moc chłodnicza'] || '');
|
||||
const pobórMocy = parseMoc(currentProduct.specs['Pobór mocy chłodzenie (kW)'] || '') || (mocChlodnicza / estimateSEER(currentProduct.specs['Klasa energetyczna'] || ''));
|
||||
const cenaKwh = 0.75;
|
||||
const kosztGodzina = pobórMocy * cenaKwh;
|
||||
const kosztMiesiac = kosztGodzina * godziny * 30;
|
||||
|
||||
const params = [
|
||||
currentProduct.specs['Klasa energetyczna'] && { icon: Star, label: 'Klasa energetyczna', value: currentProduct.specs['Klasa energetyczna'], color: 'text-green-600 bg-green-50' },
|
||||
currentProduct.specs['Moc chłodnicza'] && { icon: Thermometer, label: 'Moc chłodnicza', value: `${currentProduct.specs['Moc chłodnicza']} kW`, color: 'text-blue-600 bg-blue-50' },
|
||||
currentProduct.specs['Moc grzewcza (kW)'] && { icon: Thermometer, label: 'Moc grzewcza', value: `${currentProduct.specs['Moc grzewcza (kW)']} kW`, color: 'text-orange-600 bg-orange-50' },
|
||||
currentProduct.specs['Hałas wewnątrz (dB)'] && { icon: Volume2, label: 'Hałas wewnątrz', value: `${currentProduct.specs['Hałas wewnątrz (dB)']} dB`, color: 'text-purple-600 bg-purple-50' },
|
||||
currentProduct.specs['Czynnik chłodniczy'] && { icon: Wind, label: 'Czynnik', value: currentProduct.specs['Czynnik chłodniczy'], color: 'text-teal-600 bg-teal-50' },
|
||||
currentProduct.specs['Grzanie do'] && { icon: Zap, label: 'Grzanie do', value: `-${currentProduct.specs['Grzanie do']}°C`, color: 'text-accent bg-accent-light' },
|
||||
].filter(Boolean) as { icon: LucideIcon; label: string; value: string; color: string }[];
|
||||
|
||||
return (
|
||||
<main className="bg-slate-50 min-h-screen pb-16">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
|
||||
|
||||
<nav className="flex items-center gap-1.5 text-xs text-text-muted mb-6">
|
||||
<Link href="/" className="hover:text-accent transition-colors">Strona główna</Link>
|
||||
<span>/</span>
|
||||
<Link href="/sklep" className="hover:text-accent transition-colors">Sklep</Link>
|
||||
<span>/</span>
|
||||
<Link href={`/sklep?brand=${currentProduct.brand}`} className="hover:text-accent transition-colors">{currentProduct.brand}</Link>
|
||||
<span>/</span>
|
||||
<span className="text-primary font-medium truncate max-w-[200px]">{currentProduct.name}</span>
|
||||
</nav>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8 xl:gap-12">
|
||||
|
||||
<div>
|
||||
<div className="relative aspect-[4/3] lg:aspect-auto lg:h-[420px] lg:max-h-[420px] bg-white rounded-2xl border border-border overflow-hidden">
|
||||
<Image
|
||||
src={currentProduct.image}
|
||||
alt={currentProduct.name}
|
||||
fill
|
||||
className="object-contain p-6"
|
||||
priority
|
||||
unoptimized={currentProduct.image.startsWith('http')}
|
||||
/>
|
||||
{currentProduct.specs['Klasa energetyczna'] && (
|
||||
<div className="absolute top-4 left-4 px-2.5 py-1 bg-green-500 text-white text-xs font-bold rounded-lg shadow">
|
||||
{currentProduct.specs['Klasa energetyczna'].split('/')[0]}
|
||||
</div>
|
||||
)}
|
||||
{currentProduct.category === 'multisplit' && (
|
||||
<div className="absolute top-4 right-4 px-2.5 py-1 bg-accent text-white text-xs font-bold rounded-lg shadow">
|
||||
MULTISPLIT
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-3">
|
||||
<div>
|
||||
<div className="mb-2 flex items-center gap-3 flex-wrap">
|
||||
{brandLogos[currentProduct.brand] ? (
|
||||
<div className="bg-white rounded-lg p-1.5 inline-block border border-border">
|
||||
<Image
|
||||
src={brandLogos[currentProduct.brand]}
|
||||
alt={currentProduct.brand}
|
||||
width={80}
|
||||
height={28}
|
||||
className="object-contain object-left"
|
||||
unoptimized
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<span className="text-xs font-bold text-accent uppercase tracking-widest">
|
||||
{currentProduct.brand}
|
||||
</span>
|
||||
)}
|
||||
|
||||
|
||||
</div>
|
||||
<h1 className="text-2xl md:text-3xl font-extrabold text-primary font-heading leading-tight">
|
||||
{currentProduct.name}
|
||||
</h1>
|
||||
<p className="text-xs text-text-muted mt-1.5 mb-4">SKU: {currentProduct.sku}</p>
|
||||
</div>
|
||||
|
||||
{variants && variants.moce.length > 0 && (
|
||||
<div className="mb-3">
|
||||
<p className="text-xs font-semibold text-text-muted uppercase tracking-wider mb-2">
|
||||
Dostępne moce (kW):
|
||||
</p>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{variants.moce.map((v) => (
|
||||
<button
|
||||
key={v.slug}
|
||||
onClick={() => {
|
||||
const p = seriesProducts.find(sp => sp.slug === v.slug);
|
||||
if (p) {
|
||||
setCurrentProduct(p);
|
||||
window.history.pushState(null, '', `/sklep/${v.slug}`);
|
||||
}
|
||||
}}
|
||||
className={`px-3 py-1.5 rounded-xl text-xs font-bold border-2 transition-all ${
|
||||
v.slug === currentProduct.slug
|
||||
? 'border-accent bg-accent text-white shadow-sm'
|
||||
: 'border-border bg-white text-primary hover:border-accent hover:text-accent'
|
||||
}`}
|
||||
>
|
||||
{v.moc} kW
|
||||
{v.slug !== currentProduct.slug && (
|
||||
<span className="block text-[10px] font-normal opacity-70 mt-0.5">
|
||||
{v.cena.toLocaleString('pl-PL')} zł
|
||||
</span>
|
||||
)}
|
||||
{v.slug === currentProduct.slug && (
|
||||
<span className="block text-[10px] font-normal opacity-80 mt-0.5">
|
||||
{v.cena.toLocaleString('pl-PL')} zł
|
||||
</span>
|
||||
)}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{variants && variants.wykończenia.length > 0 && (
|
||||
<div className="mb-3">
|
||||
<p className="text-xs font-semibold text-text-muted uppercase tracking-wider mb-2">
|
||||
Wykończenie:
|
||||
</p>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{variants.wykończenia.map((v) => (
|
||||
<button
|
||||
key={v.slug}
|
||||
onClick={() => {
|
||||
const p = seriesProducts.find(sp => sp.slug === v.slug);
|
||||
if (p) {
|
||||
setCurrentProduct(p);
|
||||
window.history.pushState(null, '', `/sklep/${v.slug}`);
|
||||
}
|
||||
}}
|
||||
className={`px-3 py-1.5 rounded-xl text-xs font-bold border-2 transition-all ${
|
||||
v.slug === currentProduct.slug
|
||||
? 'border-accent bg-accent text-white shadow-sm'
|
||||
: 'border-border bg-white text-primary hover:border-accent hover:text-accent'
|
||||
}`}
|
||||
>
|
||||
{v.wykończenie}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{params.length > 0 && (
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{params.map((p, i) => {
|
||||
const Icon = p.icon;
|
||||
return (
|
||||
<div key={i} className={`flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg ${p.color} border border-current/10`}>
|
||||
<Icon className="size-3.5 shrink-0" />
|
||||
<div className="min-w-0">
|
||||
<p className="text-[9px] font-medium opacity-70 leading-none mb-0.5">{p.label}</p>
|
||||
<p className="text-[11px] font-bold truncate">{p.value}</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="bg-white rounded-2xl border border-border p-4">
|
||||
{currentProduct.price !== null ? (
|
||||
<>
|
||||
<div className="flex items-end gap-3 mb-1">
|
||||
<span className="text-2xl font-extrabold text-primary font-heading">
|
||||
{currentProduct.price.toLocaleString('pl-PL')} zł
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-xs text-text-muted mb-1">cena urządzenia brutto (23% VAT)</p>
|
||||
<p className="text-xs text-text-muted mb-4">Montaż wyceniamy indywidualnie — zadzwoń lub napisz</p>
|
||||
|
||||
<div className="flex flex-col sm:flex-row gap-3">
|
||||
{cartState === 'idle' && (
|
||||
<button
|
||||
onClick={handleAddToCart}
|
||||
className="flex-1 flex items-center justify-center gap-2 py-2.5 px-4 rounded-xl font-bold text-sm bg-accent text-white hover:bg-accent/90 transition-all"
|
||||
>
|
||||
<ShoppingCart className="size-4" /> Do koszyka
|
||||
</button>
|
||||
)}
|
||||
{cartState === 'added' && (
|
||||
<button
|
||||
disabled
|
||||
className="flex-1 flex items-center justify-center gap-2 py-2.5 px-4 rounded-xl font-bold text-sm bg-green-500 text-white"
|
||||
>
|
||||
<Check className="size-4" /> Dodano do koszyka
|
||||
</button>
|
||||
)}
|
||||
{cartState === 'cart' && (
|
||||
<Link href="/koszyk" className="flex-1 w-full flex items-center justify-center gap-2 py-2.5 px-4 rounded-xl font-bold text-sm bg-green-500 text-white hover:bg-green-600 transition-colors">
|
||||
|
||||
<ShoppingCart className="size-4" /> Zobacz koszyk
|
||||
|
||||
</Link>
|
||||
)}
|
||||
<Link href="/kontakt" className="flex-1 w-full flex items-center justify-center gap-2 py-2.5 px-4 rounded-xl font-bold text-sm border-2 border-primary text-primary hover:bg-primary hover:text-white transition-all">
|
||||
|
||||
Zapytaj o montaż
|
||||
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={handleCompare}
|
||||
className={`w-full mt-2 flex items-center justify-center gap-2 py-2 px-4 rounded-xl text-xs font-medium transition-colors ${
|
||||
inCompare ? 'bg-accent/10 text-accent border border-accent' : 'bg-slate-50 text-text-muted border border-border hover:border-accent hover:text-accent'
|
||||
}`}
|
||||
>
|
||||
<GitCompare className="size-3.5" />
|
||||
{inCompare ? 'Usuń z porównania' : 'Dodaj do porównania'}
|
||||
</button>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<p className="text-lg font-bold text-primary font-heading mb-1">Cena na zapytanie</p>
|
||||
<p className="text-sm text-text-muted mb-4">Multisplit — cena zależy od konfiguracji jednostek wewnętrznych.</p>
|
||||
<a href={`tel:${companyPhoneRaw}`} className="flex items-center justify-center gap-2 py-3 px-4 rounded-xl bg-accent text-white font-bold text-sm hover:bg-accent/90 transition-colors">
|
||||
<Phone className="size-4" /> Zadzwoń: {companyPhone}
|
||||
</a>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<a
|
||||
href={`tel:${companyPhoneRaw}`}
|
||||
className="flex items-center justify-between px-5 py-2.5 bg-primary rounded-xl text-white hover:bg-primary/90 transition-colors"
|
||||
>
|
||||
<span className="text-xs font-semibold">Profesjonalna porada</span>
|
||||
<span className="flex items-center gap-2 font-bold">
|
||||
<Phone className="size-4" /> {companyPhone}
|
||||
</span>
|
||||
</a>
|
||||
|
||||
{mocChlodnicza > 0 && (
|
||||
<div className="bg-white rounded-2xl border border-border p-4">
|
||||
<div className="flex items-center gap-2 mb-4">
|
||||
<Zap className="size-4 text-accent" />
|
||||
<h2 className="text-sm font-bold text-primary font-heading">Kalkulator kosztów energii</h2>
|
||||
<div className="group relative ml-auto">
|
||||
<Info className="size-4 text-text-muted cursor-help" />
|
||||
<div className="absolute right-0 bottom-6 w-56 bg-primary text-white text-xs rounded-lg p-2.5 hidden group-hover:block z-10">
|
||||
Szacunek przy cenie prądu {cenaKwh} zł/kWh. Rzeczywiste koszty mogą się różnić.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-4 mb-4">
|
||||
<label className="text-xs text-text-muted shrink-0">Godziny użycia dziennie:</label>
|
||||
<input
|
||||
type="range"
|
||||
min={1}
|
||||
max={24}
|
||||
value={godziny}
|
||||
onChange={e => setGodziny(Number(e.target.value))}
|
||||
className="range range-xs range-accent flex-1"
|
||||
/>
|
||||
<span className="text-sm font-bold text-primary w-8 text-right">{godziny}h</span>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div className="bg-slate-50 rounded-xl p-3 text-center">
|
||||
<p className="text-xs text-text-muted mb-1">Koszt / godzinę</p>
|
||||
<p className="text-lg font-bold text-primary font-heading">
|
||||
{kosztGodzina.toFixed(2)} zł
|
||||
</p>
|
||||
</div>
|
||||
<div className="bg-accent-light rounded-xl p-3 text-center border border-accent/20">
|
||||
<p className="text-xs text-accent mb-1">Koszt miesięczny</p>
|
||||
<p className="text-lg font-bold text-accent font-heading">
|
||||
{kosztMiesiac.toFixed(2)} zł
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-[10px] text-text-muted mt-2 text-center">
|
||||
Szacunek przy {cenaKwh} zł/kWh · {godziny}h/dzień · 30 dni
|
||||
{!currentProduct.specs['Pobór mocy chłodzenie (kW)'] && ' · pobór szacowany z klasy energetycznej'}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-10">
|
||||
<div className="flex gap-1 border-b border-border mb-6 overflow-x-auto [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]">
|
||||
{TABS.map(tab => (
|
||||
<button
|
||||
key={tab}
|
||||
onClick={() => setActiveTab(tab)}
|
||||
className={`px-5 py-3 text-sm font-semibold whitespace-nowrap transition-colors border-b-2 -mb-px ${
|
||||
activeTab === tab
|
||||
? 'border-accent text-accent'
|
||||
: 'border-transparent text-text-muted hover:text-primary'
|
||||
}`}
|
||||
>
|
||||
{tab}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{activeTab === 'Opis' && (
|
||||
<div className="max-w-3xl">
|
||||
{currentProduct.shortDescription ? (
|
||||
<p className="text-text-muted leading-relaxed text-base">{currentProduct.shortDescription}</p>
|
||||
) : (
|
||||
<p className="text-text-muted">Brak opisu produktu.</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{activeTab === 'Specyfikacja' && (
|
||||
<div className="max-w-2xl">
|
||||
{Object.keys(currentProduct.specs).length > 0 ? (
|
||||
<div className="rounded-xl border border-border overflow-hidden">
|
||||
<table className="w-full text-sm">
|
||||
<tbody>
|
||||
{Object.entries(currentProduct.specs).map(([key, val], idx) => (
|
||||
<tr key={key} className={idx % 2 === 0 ? 'bg-white' : 'bg-slate-50'}>
|
||||
<td className="px-5 py-3 text-text-muted font-medium w-1/2 border-r border-border">{key}</td>
|
||||
<td className="px-5 py-3 text-primary font-semibold">{val}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-text-muted">Brak specyfikacji.</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{activeTab === 'Montaż' && (
|
||||
<div className="max-w-2xl space-y-4">
|
||||
<div className="bg-white rounded-xl border border-border p-5">
|
||||
<h3 className="font-bold text-primary font-heading mb-3">Montaż klimatyzacji</h3>
|
||||
<p className="text-sm text-text-muted leading-relaxed mb-4">
|
||||
Oferujemy profesjonalny montaż wszystkich klimatyzatorów z naszego sklepu na terenie Dolnego Śląska.
|
||||
Montaż wykonujemy z uprawnieniami F-Gaz, estetycznie i terminowo.
|
||||
</p>
|
||||
<ul className="space-y-2 text-sm text-text-muted">
|
||||
{['Bezpłatna wycena montażu przed realizacją', 'Uprawnienia F-Gaz — wymóg prawny', 'Próba szczelności i próżnia po montażu', 'Szkolenie z obsługi urządzenia', 'Gwarancja na wykonaną instalację'].map(item => (
|
||||
<li key={item} className="flex items-center gap-2">
|
||||
<Check className="size-4 text-green-500 shrink-0" />
|
||||
{item}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<a href={`tel:${companyPhoneRaw}`} className="mt-4 inline-flex items-center gap-2 btn btn-primary text-white font-bold text-sm">
|
||||
<Phone className="size-4" /> Zapytaj o montaż
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{activeTab === 'Opinie' && (
|
||||
<div className="max-w-3xl space-y-8">
|
||||
<div className="bg-slate-50 p-6 rounded-2xl border border-border">
|
||||
<h3 className="font-bold text-primary font-heading mb-4">Dodaj opinię</h3>
|
||||
<form className="space-y-4" onSubmit={(e) => { e.preventDefault(); alert('Opinia została wysłana i oczekuje na moderację.'); e.currentTarget.reset(); }}>
|
||||
<div className="flex gap-1 mb-2">
|
||||
{[1,2,3,4,5].map(star => (
|
||||
<Star key={star} className="size-6 text-amber-400 cursor-pointer fill-amber-400 hover:scale-110 transition-transform" />
|
||||
))}
|
||||
</div>
|
||||
<div className="space-y-1.5">
|
||||
<label className="text-sm font-semibold text-primary">Imię</label>
|
||||
<input type="text" required className="w-full px-4 py-2.5 rounded-xl border border-border bg-white text-sm focus:outline-none focus:ring-2 focus:ring-accent/50" placeholder="Twoje imię" />
|
||||
</div>
|
||||
<div className="space-y-1.5">
|
||||
<label className="text-sm font-semibold text-primary">Treść opinii</label>
|
||||
<textarea required rows={4} className="w-full px-4 py-2.5 rounded-xl border border-border bg-white text-sm focus:outline-none focus:ring-2 focus:ring-accent/50" placeholder="Podziel się swoimi wrażeniami..."></textarea>
|
||||
</div>
|
||||
<button type="submit" className="btn btn-primary font-bold text-white w-full sm:w-auto">Wyślij opinię</button>
|
||||
</form>
|
||||
</div>
|
||||
<div className="space-y-4">
|
||||
<h3 className="font-bold text-primary font-heading">Opinie klientów (0)</h3>
|
||||
<p className="text-sm text-text-muted">Bądź pierwszą osobą, która oceni ten produkt!</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<RecentlyViewedProducts currentSlug={currentProduct.slug} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{showViewsBanner && (
|
||||
<div className="fixed bottom-24 left-6 z-50 flex items-center gap-3 bg-white border border-amber-200 shadow-lg rounded-xl px-4 py-3 max-w-xs animate-in slide-in-from-left-4 duration-300">
|
||||
<Eye className="size-4 text-amber-500 shrink-0" />
|
||||
<p className="text-sm text-gray-800">
|
||||
W ostatnich 30 dniach interesuje się tym produktem <span className="font-bold">{viewsCount}</span> osób.
|
||||
</p>
|
||||
<button
|
||||
onClick={() => setShowViewsBanner(false)}
|
||||
className="text-gray-400 hover:text-gray-600 transition-colors shrink-0 ml-1"
|
||||
aria-label="Zamknij"
|
||||
>
|
||||
<X className="size-4" />
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</main>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,567 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useMemo, useEffect } from 'react';
|
||||
import { ChevronDown, ChevronUp, Phone, X } from 'lucide-react';
|
||||
import { useSearchParams } from 'next/navigation';
|
||||
import Link from 'next/link';
|
||||
import { Product } from '@/content/products';
|
||||
import { ProductCard } from './ProductCard';
|
||||
import { companyDetails } from '@/content/company';
|
||||
|
||||
interface ProductsGridProps {
|
||||
products: Product[];
|
||||
brands: string[];
|
||||
}
|
||||
|
||||
const PER_PAGE = 24;
|
||||
|
||||
// Parsuj moc chłodniczą — zwróć wartość MAX z zakresu
|
||||
function parseMocMax(val: string): number | null {
|
||||
if (!val) return null;
|
||||
const nums = val.replace(/[^\d,.-]/g, ' ').split(/[\s\/–-]+/).map(s => parseFloat(s.replace(',', '.'))).filter(n => !isNaN(n));
|
||||
return nums.length > 0 ? Math.max(...nums) : null;
|
||||
}
|
||||
|
||||
// Parsuj hałas — zwróć wartość MIN z zakresu
|
||||
function parseHalasMin(val: string): number | null {
|
||||
if (!val) return null;
|
||||
const nums = val.match(/\d+/g);
|
||||
return nums ? Math.min(...nums.map(Number)) : null;
|
||||
}
|
||||
|
||||
// Mapowanie wykończenia na grupy kolorystyczne
|
||||
function mapWykonczenie(val: string): string {
|
||||
const v = val.toLowerCase();
|
||||
if (v.includes('white') || v === 'biały') return 'Biały';
|
||||
if (v.includes('black') || v === 'czarny' || v === 'dark' || v.includes('satin')) return 'Czarny';
|
||||
if (v.includes('silver') || v === 'srebrny') return 'Srebrny';
|
||||
if (v.includes('gold') || v === 'złoty' || v === 'champagne') return 'Złoty';
|
||||
if (v.includes('graphite') || v.includes('grey') || v.includes('gray')) return 'Grafitowy';
|
||||
if (v.includes('wood') || v.includes('fabric') || v.includes('textile') || v.includes('leather') || v.includes('stone') || v.includes('mirror') || v.includes('caramel') || v.includes('navy') || v.includes('miedziany') || v === 'beige stone') return 'Inne';
|
||||
if (v === 'matt' || v === 'shiny') return 'Biały';
|
||||
return 'Inne';
|
||||
}
|
||||
|
||||
const COLOR_GROUPS = ['Biały', 'Czarny', 'Srebrny', 'Złoty', 'Grafitowy', 'Inne'];
|
||||
|
||||
// Buckety wielkości pomieszczenia → zakres mocy kW
|
||||
const ROOM_BUCKETS = [
|
||||
{ label: 'do 20 m²', min: 0, max: 2.5 },
|
||||
{ label: '21–35 m²', min: 2.5, max: 3.5 },
|
||||
{ label: '36–50 m²', min: 3.5, max: 5.0 },
|
||||
{ label: '51–70 m²', min: 5.0, max: 7.0 },
|
||||
{ label: 'powyżej 70 m²', min: 7.0, max: 99 },
|
||||
];
|
||||
|
||||
interface AccordionProps {
|
||||
title: string;
|
||||
children: React.ReactNode;
|
||||
defaultOpen?: boolean;
|
||||
}
|
||||
|
||||
function Accordion({ title, children, defaultOpen = true }: AccordionProps) {
|
||||
const [open, setOpen] = useState(defaultOpen);
|
||||
return (
|
||||
<div className="border-b border-border pb-4 mb-4">
|
||||
<button
|
||||
onClick={() => setOpen(!open)}
|
||||
className="flex items-center justify-between w-full text-left"
|
||||
>
|
||||
<span className="text-sm font-bold text-primary font-heading">{title}</span>
|
||||
{open ? <ChevronUp className="size-4 text-text-muted" /> : <ChevronDown className="size-4 text-text-muted" />}
|
||||
</button>
|
||||
{open && <div className="mt-3">{children}</div>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function ProductsGrid({ products, brands }: ProductsGridProps) {
|
||||
const searchParams = useSearchParams();
|
||||
const urlSearch = searchParams.get('search') || '';
|
||||
const urlBrand = searchParams.get('brand') || '';
|
||||
const urlCategory = searchParams.get('category') || 'all';
|
||||
|
||||
const [category, setCategory] = useState<'all' | 'scienne' | 'multisplit' | 'podlogowe' | 'jednostka-scienna'>(
|
||||
urlCategory as 'all' | 'scienne' | 'multisplit' | 'podlogowe' | 'jednostka-scienna'
|
||||
);
|
||||
const [selectedBrands, setSelectedBrands] = useState<string[]>(urlBrand ? [urlBrand] : []);
|
||||
const [searchQuery, setSearchQuery] = useState(urlSearch);
|
||||
const [priceMin, setPriceMin] = useState('');
|
||||
const [priceMax, setPriceMax] = useState('');
|
||||
const [selectedRooms, setSelectedRooms] = useState<string[]>([]);
|
||||
const [selectedColors, setSelectedColors] = useState<string[]>([]);
|
||||
const [selectedUnitCounts, setSelectedUnitCounts] = useState<number[]>([]);
|
||||
|
||||
const [page, setPage] = useState(1);
|
||||
const [mobileSidebarOpen, setMobileSidebarOpen] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const timer = setTimeout(() => {
|
||||
setSearchQuery(urlSearch);
|
||||
setSelectedBrands(urlBrand ? [urlBrand] : []);
|
||||
if (urlCategory !== 'all') {
|
||||
setCategory(urlCategory as 'scienne' | 'multisplit' | 'podlogowe' | 'jednostka-scienna');
|
||||
} else {
|
||||
setCategory('all');
|
||||
}
|
||||
setPage(1);
|
||||
}, 0);
|
||||
return () => clearTimeout(timer);
|
||||
}, [urlSearch, urlBrand, urlCategory]);
|
||||
|
||||
const toggleBrand = (b: string) => {
|
||||
setSelectedBrands(prev => prev.includes(b) ? prev.filter(x => x !== b) : [...prev, b]);
|
||||
setPage(1);
|
||||
};
|
||||
|
||||
const toggleRoom = (r: string) => {
|
||||
setSelectedRooms(prev => prev.includes(r) ? prev.filter(x => x !== r) : [...prev, r]);
|
||||
setPage(1);
|
||||
};
|
||||
|
||||
const toggleColor = (c: string) => {
|
||||
setSelectedColors(prev => prev.includes(c) ? prev.filter(x => x !== c) : [...prev, c]);
|
||||
setPage(1);
|
||||
};
|
||||
|
||||
const toggleUnitCount = (uc: number) => {
|
||||
setSelectedUnitCounts(prev => prev.includes(uc) ? prev.filter(x => x !== uc) : [...prev, uc]);
|
||||
setPage(1);
|
||||
};
|
||||
|
||||
const filtered = useMemo(() => {
|
||||
return products.filter(p => {
|
||||
// Wyszukiwanie tekstowe
|
||||
if (searchQuery) {
|
||||
const sq = searchQuery.toLowerCase();
|
||||
if (!p.name.toLowerCase().includes(sq) && !p.brand.toLowerCase().includes(sq)) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
if (category !== 'all' && p.category !== category) return false;
|
||||
|
||||
if (selectedBrands.length > 0 && !selectedBrands.includes(p.brand)) return false;
|
||||
|
||||
const pMin = priceMin ? parseInt(priceMin) : null;
|
||||
const pMax = priceMax ? parseInt(priceMax) : null;
|
||||
if (p.price !== null) {
|
||||
if (pMin && p.price < pMin) return false;
|
||||
if (pMax && p.price > pMax) return false;
|
||||
}
|
||||
|
||||
// Wielkość pomieszczenia → moc
|
||||
if (selectedRooms.length > 0) {
|
||||
const moc = parseMocMax(p.specs['Moc chłodnicza'] || '');
|
||||
if (moc === null) return false;
|
||||
const matches = selectedRooms.some(r => {
|
||||
const bucket = ROOM_BUCKETS.find(b => b.label === r);
|
||||
return bucket ? moc >= bucket.min && moc < bucket.max : false;
|
||||
});
|
||||
if (!matches) return false;
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Kolor
|
||||
if (selectedColors.length > 0) {
|
||||
const wyk = p.specs['Wykończenie'] || '';
|
||||
const group = mapWykonczenie(wyk);
|
||||
if (!selectedColors.includes(group)) return false;
|
||||
}
|
||||
|
||||
// Liczba jednostek wewn. (multisplit)
|
||||
if (selectedUnitCounts.length > 0) {
|
||||
const unitsStr = p.specs['Liczba jednostek wewn.'];
|
||||
if (!unitsStr) return false;
|
||||
const units = parseFloat(unitsStr);
|
||||
if (!selectedUnitCounts.includes(units)) return false;
|
||||
}
|
||||
|
||||
return true;
|
||||
});
|
||||
}, [products, category, selectedBrands, priceMin, priceMax, selectedRooms, selectedColors, selectedUnitCounts, searchQuery]);
|
||||
|
||||
const totalPages = Math.ceil(filtered.length / PER_PAGE);
|
||||
const paginated = filtered.slice((page - 1) * PER_PAGE, page * PER_PAGE);
|
||||
|
||||
// Liczniki per brand (dla aktualnych filtrów bez filtra marki)
|
||||
const brandCounts = useMemo(() => {
|
||||
const counts: Record<string, number> = {};
|
||||
products.forEach(p => {
|
||||
if (category !== 'all' && p.category !== category) return;
|
||||
counts[p.brand] = (counts[p.brand] || 0) + 1;
|
||||
});
|
||||
return counts;
|
||||
}, [products, category]);
|
||||
|
||||
// Liczniki per room bucket
|
||||
const roomCounts = useMemo(() => {
|
||||
const counts: Record<string, number> = {};
|
||||
products.forEach(p => {
|
||||
if (category !== 'all' && p.category !== category) return;
|
||||
const moc = parseMocMax(p.specs['Moc chłodnicza'] || '');
|
||||
if (moc === null) return;
|
||||
ROOM_BUCKETS.forEach(b => {
|
||||
if (moc >= b.min && moc < b.max) {
|
||||
counts[b.label] = (counts[b.label] || 0) + 1;
|
||||
}
|
||||
});
|
||||
});
|
||||
return counts;
|
||||
}, [products, category]);
|
||||
|
||||
// Liczniki per liczba jednostek wewn.
|
||||
const unitCountsAgg = useMemo(() => {
|
||||
const counts: Record<number, number> = {};
|
||||
products.forEach(p => {
|
||||
if (category !== 'all' && p.category !== category) return;
|
||||
const unitsStr = p.specs['Liczba jednostek wewn.'];
|
||||
if (unitsStr) {
|
||||
const units = parseFloat(unitsStr);
|
||||
if (!isNaN(units)) {
|
||||
counts[units] = (counts[units] || 0) + 1;
|
||||
}
|
||||
}
|
||||
});
|
||||
return counts;
|
||||
}, [products, category]);
|
||||
|
||||
const resetAll = () => {
|
||||
setCategory('all');
|
||||
setSelectedBrands([]);
|
||||
setSearchQuery('');
|
||||
setPriceMin('');
|
||||
setPriceMax('');
|
||||
setSelectedRooms([]);
|
||||
setSelectedColors([]);
|
||||
setSelectedUnitCounts([]);
|
||||
|
||||
setPage(1);
|
||||
};
|
||||
|
||||
const hasFilters = category !== 'all' || selectedBrands.length > 0 || searchQuery !== '' || priceMin || priceMax || selectedRooms.length > 0 || selectedColors.length > 0 || selectedUnitCounts.length > 0;
|
||||
|
||||
const sidebarContent = (
|
||||
<aside className="w-full">
|
||||
<Accordion title="Klimatyzatory">
|
||||
<ul className="flex flex-col gap-2">
|
||||
{[
|
||||
{ val: 'all', label: 'Wszystkie' },
|
||||
{ val: 'scienne', label: 'Ścienne split' },
|
||||
{ val: 'multisplit', label: 'Multisplit' },
|
||||
|
||||
].map(opt => (
|
||||
<li key={opt.val}>
|
||||
<button
|
||||
onClick={() => { setCategory(opt.val as typeof category); setPage(1); }}
|
||||
className={`flex items-center gap-2.5 text-sm w-full text-left py-0.5 transition-colors ${
|
||||
category === opt.val ? 'text-primary font-semibold' : 'text-text-muted hover:text-primary'
|
||||
}`}
|
||||
>
|
||||
<span className={`size-3 rounded-full border-2 shrink-0 ${
|
||||
category === opt.val ? 'border-accent bg-accent' : 'border-border'
|
||||
}`} />
|
||||
{opt.label}
|
||||
<span className="ml-auto text-xs bg-slate-100 rounded-full px-1.5 py-0.5 text-text-muted">
|
||||
{opt.val === 'all' ? products.length : products.filter(p => p.category === opt.val).length}
|
||||
</span>
|
||||
</button>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</Accordion>
|
||||
|
||||
<Accordion title="Marka">
|
||||
<ul className="flex flex-col gap-2">
|
||||
{brands.map(b => (
|
||||
<li key={b}>
|
||||
<label className="flex items-center gap-2.5 cursor-pointer group">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={selectedBrands.includes(b)}
|
||||
onChange={() => toggleBrand(b)}
|
||||
className="sr-only"
|
||||
/>
|
||||
<span className={`size-4 rounded border-2 shrink-0 flex items-center justify-center transition-colors ${
|
||||
selectedBrands.includes(b)
|
||||
? 'bg-accent border-accent'
|
||||
: 'bg-white border-slate-300 group-hover:border-accent'
|
||||
}`}>
|
||||
{selectedBrands.includes(b) && (
|
||||
<svg viewBox="0 0 10 8" className="size-2.5" fill="none">
|
||||
<path d="M1 4L3.5 6.5L9 1" stroke="white" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
</svg>
|
||||
)}
|
||||
</span>
|
||||
<span className={`text-sm transition-colors ${selectedBrands.includes(b) ? 'text-primary font-medium' : 'text-text-muted group-hover:text-primary'}`}>
|
||||
{b}
|
||||
</span>
|
||||
<span className="ml-auto text-xs text-text-muted">
|
||||
{brandCounts[b] || 0}
|
||||
</span>
|
||||
</label>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</Accordion>
|
||||
|
||||
{/* Ilość jednostek wewnętrznych */}
|
||||
{(category === 'all' || category === 'multisplit') && (
|
||||
<Accordion title="Ilość jednostek wewn.">
|
||||
<ul className="flex flex-col gap-2">
|
||||
{[1, 2, 3, 4, 5, 6, 7, 8, 9].map(uc => {
|
||||
if (unitCountsAgg[uc] === undefined && !selectedUnitCounts.includes(uc)) return null;
|
||||
return (
|
||||
<li key={uc}>
|
||||
<label className="flex items-center gap-2.5 cursor-pointer group">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={selectedUnitCounts.includes(uc)}
|
||||
onChange={() => toggleUnitCount(uc)}
|
||||
className="sr-only"
|
||||
/>
|
||||
<span className={`size-4 rounded border-2 shrink-0 flex items-center justify-center transition-colors ${
|
||||
selectedUnitCounts.includes(uc)
|
||||
? 'bg-accent border-accent'
|
||||
: 'bg-white border-slate-300 group-hover:border-accent'
|
||||
}`}>
|
||||
{selectedUnitCounts.includes(uc) && (
|
||||
<svg viewBox="0 0 10 8" className="size-2.5" fill="none">
|
||||
<path d="M1 4L3.5 6.5L9 1" stroke="white" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
</svg>
|
||||
)}
|
||||
</span>
|
||||
<span className={`text-sm transition-colors ${selectedUnitCounts.includes(uc) ? 'text-primary font-medium' : 'text-text-muted group-hover:text-primary'}`}>
|
||||
{uc} {uc === 1 ? 'jednostka' : uc >= 2 && uc <= 4 ? 'jednostki' : 'jednostek'}
|
||||
</span>
|
||||
<span className="ml-auto text-xs text-text-muted">
|
||||
{unitCountsAgg[uc] || 0}
|
||||
</span>
|
||||
</label>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
</Accordion>
|
||||
)}
|
||||
|
||||
<Accordion title="Cena (zł)">
|
||||
<div className="flex items-center gap-2">
|
||||
<input
|
||||
type="number"
|
||||
placeholder="od"
|
||||
value={priceMin}
|
||||
onChange={e => { setPriceMin(e.target.value); setPage(1); }}
|
||||
className="w-full border border-border rounded-lg px-3 py-2 text-sm text-primary focus:border-accent outline-none"
|
||||
/>
|
||||
<span className="text-text-muted shrink-0">–</span>
|
||||
<input
|
||||
type="number"
|
||||
placeholder="do"
|
||||
value={priceMax}
|
||||
onChange={e => { setPriceMax(e.target.value); setPage(1); }}
|
||||
className="w-full border border-border rounded-lg px-3 py-2 text-sm text-primary focus:border-accent outline-none"
|
||||
/>
|
||||
</div>
|
||||
</Accordion>
|
||||
|
||||
{/* Wielkość pomieszczenia */}
|
||||
<Accordion title="Wielkość pomieszczenia">
|
||||
<ul className="flex flex-col gap-2">
|
||||
{ROOM_BUCKETS.map(b => (
|
||||
<li key={b.label}>
|
||||
<label className="flex items-center gap-2.5 cursor-pointer group">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={selectedRooms.includes(b.label)}
|
||||
onChange={() => toggleRoom(b.label)}
|
||||
className="sr-only"
|
||||
/>
|
||||
<span className={`size-4 rounded border-2 shrink-0 flex items-center justify-center transition-colors ${
|
||||
selectedRooms.includes(b.label)
|
||||
? 'bg-accent border-accent'
|
||||
: 'bg-white border-slate-300 group-hover:border-accent'
|
||||
}`}>
|
||||
{selectedRooms.includes(b.label) && (
|
||||
<svg viewBox="0 0 10 8" className="size-2.5" fill="none">
|
||||
<path d="M1 4L3.5 6.5L9 1" stroke="white" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
</svg>
|
||||
)}
|
||||
</span>
|
||||
<span className={`text-sm transition-colors ${selectedRooms.includes(b.label) ? 'text-primary font-medium' : 'text-text-muted group-hover:text-primary'}`}>
|
||||
{b.label}
|
||||
</span>
|
||||
<span className="ml-auto text-xs text-text-muted">
|
||||
{roomCounts[b.label] || 0}
|
||||
</span>
|
||||
</label>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<p className="text-xs text-text-muted mt-2">Szacunkowo: 10 m² = 1 kW mocy chłodniczej</p>
|
||||
</Accordion>
|
||||
|
||||
|
||||
|
||||
<Accordion title="Kolor dominujący">
|
||||
<ul className="flex flex-col gap-2">
|
||||
{COLOR_GROUPS.map(c => (
|
||||
<li key={c}>
|
||||
<label className="flex items-center gap-2.5 cursor-pointer group">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={selectedColors.includes(c)}
|
||||
onChange={() => toggleColor(c)}
|
||||
className="sr-only"
|
||||
/>
|
||||
<span className={`size-4 rounded border-2 shrink-0 flex items-center justify-center transition-colors ${
|
||||
selectedColors.includes(c)
|
||||
? 'bg-accent border-accent'
|
||||
: 'bg-white border-slate-300 group-hover:border-accent'
|
||||
}`}>
|
||||
{selectedColors.includes(c) && (
|
||||
<svg viewBox="0 0 10 8" className="size-2.5" fill="none">
|
||||
<path d="M1 4L3.5 6.5L9 1" stroke="white" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
</svg>
|
||||
)}
|
||||
</span>
|
||||
<span className={`text-sm transition-colors ${selectedColors.includes(c) ? 'text-primary font-medium' : 'text-text-muted group-hover:text-primary'}`}>
|
||||
{c}
|
||||
</span>
|
||||
</label>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</Accordion>
|
||||
|
||||
<div className="rounded-xl bg-slate-50 border border-border p-4 text-center mt-2">
|
||||
<p className="text-sm font-bold text-primary font-heading mb-3">Potrzebujesz pomocy?</p>
|
||||
<a
|
||||
href={`tel:${companyDetails.phoneRaw}`}
|
||||
className="flex items-center justify-center gap-2 text-primary font-bold text-base hover:text-accent transition-colors"
|
||||
>
|
||||
<Phone className="size-4 text-accent" />
|
||||
{companyDetails.phone}
|
||||
</a>
|
||||
<p className="text-xs text-text-muted mt-1">{companyDetails.hours}</p>
|
||||
<Link href="/kontakt" className="mt-3 w-full btn btn-primary text-white font-bold text-sm py-2">
|
||||
|
||||
Zadaj pytanie
|
||||
|
||||
</Link>
|
||||
</div>
|
||||
</aside>
|
||||
);
|
||||
|
||||
return (
|
||||
<section className="py-8 md:py-12 bg-white">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
|
||||
<div className="lg:hidden mb-4 flex items-center justify-between">
|
||||
<button
|
||||
onClick={() => setMobileSidebarOpen(true)}
|
||||
className="flex items-center gap-2 px-4 py-2 border border-border rounded-lg text-sm font-medium text-primary hover:border-accent hover:text-accent transition-colors"
|
||||
>
|
||||
<ChevronDown className="size-4" />
|
||||
Filtry {hasFilters && <span className="size-2 rounded-full bg-accent inline-block" />}
|
||||
</button>
|
||||
<span className="text-sm text-text-muted">{filtered.length} produktów</span>
|
||||
</div>
|
||||
|
||||
{mobileSidebarOpen && (
|
||||
<div className="fixed inset-0 z-50 lg:hidden">
|
||||
<div className="absolute inset-0 bg-black/50" onClick={() => setMobileSidebarOpen(false)} />
|
||||
<div className="absolute top-0 left-0 bottom-0 w-80 bg-white overflow-y-auto p-6 shadow-xl">
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<span className="font-bold text-primary font-heading">Filtry</span>
|
||||
<button onClick={() => setMobileSidebarOpen(false)}>
|
||||
<X className="size-5 text-text-muted" />
|
||||
</button>
|
||||
</div>
|
||||
{sidebarContent}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex gap-8">
|
||||
<div className="hidden lg:block w-64 shrink-0">
|
||||
<div className="sticky top-24 max-h-[calc(100vh-7rem)] overflow-y-auto pr-2">
|
||||
{hasFilters && (
|
||||
<button
|
||||
onClick={resetAll}
|
||||
className="flex items-center gap-1.5 text-xs text-accent hover:underline mb-4"
|
||||
>
|
||||
<X className="size-3" /> Wyczyść filtry
|
||||
</button>
|
||||
)}
|
||||
{sidebarContent}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<span className="text-sm text-text-muted hidden lg:block">{filtered.length} produktów</span>
|
||||
{hasFilters && (
|
||||
<button onClick={resetAll} className="lg:hidden text-xs text-accent hover:underline flex items-center gap-1">
|
||||
<X className="size-3" /> Wyczyść
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{paginated.length > 0 ? (
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 gap-5">
|
||||
{paginated.map(product => (
|
||||
<ProductCard key={product.slug} product={product} />
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-center py-24">
|
||||
<p className="text-text-muted mb-3">Brak produktów dla wybranych filtrów.</p>
|
||||
<button onClick={resetAll} className="text-accent hover:underline text-sm">
|
||||
Wyczyść filtry
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{totalPages > 1 && (
|
||||
<div className="flex justify-center gap-2 mt-12">
|
||||
<button
|
||||
onClick={() => { setPage(p => Math.max(1, p - 1)); window.scrollTo(0, 0); }}
|
||||
disabled={page === 1}
|
||||
className="px-4 py-2 rounded-lg border border-border text-sm font-medium text-primary hover:border-accent hover:text-accent disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
|
||||
>
|
||||
← Poprzednia
|
||||
</button>
|
||||
{Array.from({ length: Math.min(5, totalPages) }, (_, i) => {
|
||||
const p = page <= 3 ? i + 1 : page - 2 + i;
|
||||
if (p < 1 || p > totalPages) return null;
|
||||
return (
|
||||
<button
|
||||
key={p}
|
||||
onClick={() => { setPage(p); window.scrollTo(0, 0); }}
|
||||
className={`px-3 py-2 rounded-lg text-sm font-medium transition-colors ${
|
||||
p === page
|
||||
? 'bg-accent text-white border border-accent'
|
||||
: 'border border-border text-primary hover:border-accent hover:text-accent'
|
||||
}`}
|
||||
>
|
||||
{p}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
<button
|
||||
onClick={() => { setPage(p => Math.min(totalPages, p + 1)); window.scrollTo(0, 0); }}
|
||||
disabled={page === totalPages}
|
||||
className="px-4 py-2 rounded-lg border border-border text-sm font-medium text-primary hover:border-accent hover:text-accent disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
|
||||
>
|
||||
Następna →
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,34 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useRecentlyViewedStore } from '@/lib/recently-viewed-store';
|
||||
import { ProductCard } from './ProductCard';
|
||||
|
||||
export function RecentlyViewedProducts({ currentSlug }: { currentSlug: string }) {
|
||||
const [mounted, setMounted] = useState(false);
|
||||
const items = useRecentlyViewedStore((state) => state.items);
|
||||
|
||||
useEffect(() => {
|
||||
const t = setTimeout(() => setMounted(true), 0);
|
||||
return () => clearTimeout(t);
|
||||
}, []);
|
||||
|
||||
if (!mounted) return null;
|
||||
|
||||
const displayItems = items.filter(item => item.slug !== currentSlug).slice(0, 4);
|
||||
|
||||
if (displayItems.length === 0) return null;
|
||||
|
||||
return (
|
||||
<div className="mt-16 border-t border-border pt-12">
|
||||
<h2 className="text-2xl font-bold text-primary font-heading mb-6">
|
||||
Ostatnio oglądane przez Ciebie
|
||||
</h2>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
{displayItems.map(product => (
|
||||
<ProductCard key={product.slug} product={product} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,44 @@
|
||||
'use client';
|
||||
|
||||
import Script from 'next/script';
|
||||
import { useConsentStore } from '@/lib/consent-store';
|
||||
|
||||
const GA_ID = 'G-VW3GD6SS7K';
|
||||
const CLARITY_ID = 'xdo6q3i06e';
|
||||
|
||||
export function AnalyticsWrapper() {
|
||||
const { analyticsConsent } = useConsentStore();
|
||||
|
||||
if (!analyticsConsent) return null;
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* GA4 */}
|
||||
<Script
|
||||
src={`https://www.googletagmanager.com/gtag/js?id=${GA_ID}`}
|
||||
strategy="afterInteractive"
|
||||
/>
|
||||
<Script id="ga4-init" strategy="afterInteractive">
|
||||
{`
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
function gtag(){dataLayer.push(arguments);}
|
||||
gtag('js', new Date());
|
||||
gtag('config', '${GA_ID}', {
|
||||
page_path: window.location.pathname,
|
||||
});
|
||||
`}
|
||||
</Script>
|
||||
|
||||
{/* Microsoft Clarity */}
|
||||
<Script id="clarity-init" strategy="afterInteractive">
|
||||
{`
|
||||
(function(c,l,a,r,i,t,y){
|
||||
c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
|
||||
t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
|
||||
y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
|
||||
})(window, document, "clarity", "script", "${CLARITY_ID}");
|
||||
`}
|
||||
</Script>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,55 @@
|
||||
import React from 'react';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
export type ButtonVariant = 'primary' | 'outline' | 'error' | 'outline-light';
|
||||
export type ButtonSize = 'sm' | 'md' | 'lg';
|
||||
|
||||
export interface ButtonClassesProps {
|
||||
variant?: ButtonVariant;
|
||||
size?: ButtonSize;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export function buttonClasses({ variant = 'primary', size = 'md', className }: ButtonClassesProps = {}) {
|
||||
const baseClasses = 'inline-flex items-center justify-center gap-2 whitespace-nowrap transition-colors';
|
||||
|
||||
const variantClasses = {
|
||||
primary: 'btn btn-primary text-white font-bold',
|
||||
outline: 'btn bg-white/10 text-white border border-white/20 hover:bg-white/20 font-bold',
|
||||
'outline-light': 'btn bg-white text-primary border border-border hover:bg-slate-50 font-bold',
|
||||
error: 'btn btn-error text-white font-bold',
|
||||
};
|
||||
|
||||
const sizeClasses = {
|
||||
sm: 'btn-sm text-sm',
|
||||
md: '', // default DaisyUI btn size
|
||||
lg: 'btn-lg text-lg',
|
||||
};
|
||||
|
||||
return cn(
|
||||
baseClasses,
|
||||
variantClasses[variant],
|
||||
sizeClasses[size],
|
||||
className
|
||||
);
|
||||
}
|
||||
|
||||
export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, ButtonClassesProps {
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
|
||||
({ className, variant, size, children, ...props }, ref) => {
|
||||
return (
|
||||
<button
|
||||
ref={ref}
|
||||
className={buttonClasses({ variant, size, className })}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
);
|
||||
|
||||
Button.displayName = 'Button';
|
||||
@@ -0,0 +1,22 @@
|
||||
'use client';
|
||||
|
||||
import { Cookie } from 'lucide-react';
|
||||
import { useConsentStore } from '@/lib/consent-store';
|
||||
|
||||
export function CookieSettingsFloatingIcon() {
|
||||
const { isInitialized, isOpen, openBanner } = useConsentStore();
|
||||
|
||||
// Only show if initialized (user has made a decision or default exists) and the banner is closed
|
||||
if (!isInitialized || isOpen) return null;
|
||||
|
||||
return (
|
||||
<button
|
||||
onClick={openBanner}
|
||||
className="fixed bottom-24 sm:bottom-6 left-4 sm:left-6 z-[90] flex size-12 items-center justify-center rounded-full bg-white text-primary shadow-xl border border-border hover:bg-slate-50 transition-all duration-300 group focus:outline-none focus:ring-2 focus:ring-accent focus:ring-offset-2"
|
||||
aria-label="Ustawienia ciasteczek"
|
||||
title="Zarządzaj plikami cookies"
|
||||
>
|
||||
<Cookie className="size-5 text-slate-500 group-hover:text-accent transition-colors" />
|
||||
</button>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
"use client";
|
||||
|
||||
import { useConsentStore } from "@/lib/consent-store";
|
||||
|
||||
export function CookieSettingsTrigger() {
|
||||
const openBanner = useConsentStore((state) => state.openBanner);
|
||||
|
||||
return (
|
||||
<button
|
||||
onClick={openBanner}
|
||||
className="text-slate-400 hover:text-accent transition-colors text-xs text-center sm:text-left underline underline-offset-2"
|
||||
>
|
||||
Zarządzaj plikami cookies
|
||||
</button>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
export function JsonLd({ data }: { data: Record<string, unknown> }) {
|
||||
return (
|
||||
<script
|
||||
type="application/ld+json"
|
||||
dangerouslySetInnerHTML={{ __html: JSON.stringify(data).replace(/</g, "\\u003c") }}
|
||||
/>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user