99 lines
3.9 KiB
TypeScript
99 lines
3.9 KiB
TypeScript
import Link from "next/link";
|
|
import Image from "next/image";
|
|
import { Outfit } from "next/font/google";
|
|
|
|
const outfit = Outfit({ subsets: ["latin"], weight: ["500", "700", "800"] });
|
|
|
|
export interface HeroSectionProps {
|
|
title?: React.ReactNode;
|
|
subtitle?: string;
|
|
ctaText?: string;
|
|
ctaLink?: string;
|
|
secondaryCtaText?: string;
|
|
secondaryCtaLink?: string;
|
|
}
|
|
|
|
export function HeroSection({
|
|
title = (
|
|
<>
|
|
<span className="text-primary">Klimatyzacja</span><br />
|
|
<span className="text-accent">we Wrocławiu</span>
|
|
</>
|
|
),
|
|
subtitle = "Montaż, serwis i naprawa — przyjeżdżamy do Ciebie. Zapewniamy najwyższą jakość instalacji oraz pełne wsparcie pogwarancyjne.",
|
|
ctaText = "Darmowa wycena",
|
|
ctaLink = "/kontakt",
|
|
secondaryCtaText = "Zobacz ofertę",
|
|
secondaryCtaLink = "/sklep"
|
|
}: HeroSectionProps = {}) {
|
|
return (
|
|
<section className="relative w-full bg-slate-50 flex flex-col lg:flex-row min-h-[85vh] border-b border-border">
|
|
|
|
{/* Lewa kolumna: Typografia i CTA */}
|
|
<div className="w-full lg:w-[55%] flex flex-col justify-center px-6 sm:px-12 lg:px-16 xl:px-24 py-16 lg:py-24 z-10">
|
|
|
|
<h1 className={`${outfit.className} text-5xl sm:text-6xl xl:text-7xl font-extrabold tracking-tight leading-[1.05] uppercase`}>
|
|
{title}
|
|
</h1>
|
|
|
|
<p className="mt-8 text-lg sm:text-xl text-text-muted max-w-xl leading-relaxed">
|
|
{subtitle}
|
|
</p>
|
|
|
|
<div className="mt-12 flex flex-col sm:flex-row gap-4">
|
|
{ctaText && ctaLink && (
|
|
<Link
|
|
href={ctaLink}
|
|
className="inline-flex items-center justify-center bg-primary text-white font-bold uppercase tracking-wider px-10 py-5 rounded-none hover:bg-primary/90 transition-colors border-2 border-primary"
|
|
>
|
|
{ctaText}
|
|
</Link>
|
|
)}
|
|
{secondaryCtaText && secondaryCtaLink && (
|
|
<Link
|
|
href={secondaryCtaLink}
|
|
className="inline-flex items-center justify-center bg-transparent text-primary font-bold uppercase tracking-wider px-10 py-5 rounded-none border-2 border-primary hover:bg-primary/5 transition-colors"
|
|
>
|
|
{secondaryCtaText}
|
|
</Link>
|
|
)}
|
|
</div>
|
|
|
|
{/* Trust Signals: Minimalistyczne dane typograficzne */}
|
|
<div className="mt-16 sm:mt-24 pt-8 border-t border-border flex flex-wrap gap-10">
|
|
<div>
|
|
<p className={`${outfit.className} text-4xl font-extrabold text-primary`}>15+</p>
|
|
<p className="text-xs font-semibold uppercase tracking-widest text-text-muted mt-2">Lat doświadczenia</p>
|
|
</div>
|
|
<div className="hidden sm:block w-px bg-border self-stretch" />
|
|
<div>
|
|
<p className={`${outfit.className} text-4xl font-extrabold text-primary`}>5</p>
|
|
<p className="text-xs font-semibold uppercase tracking-widest text-text-muted mt-2">Lat gwarancji</p>
|
|
</div>
|
|
<div className="hidden sm:block w-px bg-border self-stretch" />
|
|
<div>
|
|
<p className={`${outfit.className} text-4xl font-extrabold text-primary`}>100%</p>
|
|
<p className="text-xs font-semibold uppercase tracking-widest text-text-muted mt-2">Pokrycia w regionie</p>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
{/* Prawa kolumna: Jedno wielkie, surowe zdjęcie */}
|
|
<div className="w-full lg:w-[45%] h-[500px] lg:h-auto relative bg-slate-200">
|
|
<Image
|
|
src="/images/services/montaz.webp"
|
|
alt="Profesjonalny montaż klimatyzacji"
|
|
fill
|
|
priority
|
|
sizes="(max-width: 1024px) 100vw, 45vw"
|
|
className="object-cover object-center"
|
|
/>
|
|
{/* Subtelny overlay dla kontrastu jeśli zajdzie potrzeba (opcjonalnie) */}
|
|
<div className="absolute inset-0 bg-black/5 lg:bg-transparent" />
|
|
</div>
|
|
|
|
</section>
|
|
);
|
|
}
|