210 lines
8.2 KiB
TypeScript
210 lines
8.2 KiB
TypeScript
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-primary 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-accent">.</span>
|
|
</span>
|
|
</Link>
|
|
<p className="text-sm text-slate-300 max-w-xs leading-relaxed">
|
|
Kompleksowe usługi HVAC, klimatyzacji, pomp ciepła oraz prace wykończeniowe i serwisowe dla Twojego domu.
|
|
</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-accent transition-colors"
|
|
>
|
|
<Phone className="size-4 shrink-0 text-accent" />
|
|
<span>{companyDetails.phone}</span>
|
|
</a>
|
|
<a
|
|
href={`mailto:${companyDetails.email}`}
|
|
className="flex items-center gap-2.5 hover:text-accent transition-colors"
|
|
>
|
|
<Mail className="size-4 shrink-0 text-accent" />
|
|
<span>{companyDetails.email}</span>
|
|
</a>
|
|
<div className="flex items-start gap-2.5">
|
|
<MapPin className="size-4 shrink-0 mt-0.5 text-accent" />
|
|
<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-accent" />
|
|
<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-accent transition-colors">
|
|
Klimatyzacja i Montaż
|
|
</Link>
|
|
</li>
|
|
<li>
|
|
<Link href="/pompy-ciepla" className="hover:text-accent transition-colors">
|
|
Pompy Ciepła
|
|
</Link>
|
|
</li>
|
|
<li>
|
|
<Link href="/uslugi-domowe/remonty" className="hover:text-accent transition-colors">
|
|
Remonty i Wykończenia
|
|
</Link>
|
|
</li>
|
|
<li>
|
|
<Link href="/uslugi-domowe/hydraulika" className="hover:text-accent transition-colors">
|
|
Usługi Hydrauliczne
|
|
</Link>
|
|
</li>
|
|
<li>
|
|
<Link href="/uslugi-domowe/serwis-agd" className="hover:text-accent transition-colors">
|
|
Serwis AGD i Lodówek
|
|
</Link>
|
|
</li>
|
|
<li>
|
|
<Link href="/sklep" className="hover:text-accent 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-accent transition-colors">
|
|
O nas
|
|
</Link>
|
|
</li>
|
|
<li>
|
|
<Link href="/realizacje" className="hover:text-accent transition-colors">
|
|
Realizacje (Portfolio)
|
|
</Link>
|
|
</li>
|
|
<li>
|
|
<Link href="/blog" className="hover:text-accent transition-colors">
|
|
Blog i Poradniki
|
|
</Link>
|
|
</li>
|
|
<li>
|
|
<Link href="/regulamin" className="hover:text-accent transition-colors">
|
|
Regulamin
|
|
</Link>
|
|
</li>
|
|
<li>
|
|
<Link href="/polityka-prywatnosci" className="hover:text-accent transition-colors">
|
|
Polityka prywatności
|
|
</Link>
|
|
</li>
|
|
<li>
|
|
<Link href="/reklamacje" className="hover:text-accent transition-colors">
|
|
Reklamacje
|
|
</Link>
|
|
</li>
|
|
<li>
|
|
<Link href="/kontakt" className="hover:text-accent 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="/koszyk" className="hover:text-accent transition-colors">
|
|
Twój Koszyk
|
|
</Link>
|
|
</li>
|
|
<li>
|
|
<Link href="/sklep" className="hover:text-accent transition-colors">
|
|
Zamów urządzenia
|
|
</Link>
|
|
</li>
|
|
<li>
|
|
<Link href="/kontakt" className="hover:text-accent transition-colors">
|
|
Zgłoś awarię / serwis
|
|
</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-accent" />
|
|
<span>Bezpieczne płatności SSL</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
);
|
|
}
|