101 lines
3.7 KiB
TypeScript
101 lines
3.7 KiB
TypeScript
import Link from "next/link";
|
||
import Image from "next/image";
|
||
import { ArrowRight, Star } from "lucide-react";
|
||
|
||
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 max-w-[2560px] mx-auto">
|
||
{/* 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="w-fit sm:w-auto group btn btn-primary text-white font-bold px-8">
|
||
<span>{ctaText}</span>
|
||
<ArrowRight className="size-5 group-hover:translate-x-1 transition-transform" />
|
||
</Link>
|
||
)}
|
||
{secondaryCtaText && secondaryCtaLink && (
|
||
<Link href={secondaryCtaLink} className="w-fit sm:w-auto btn btn-outline bg-white/10 text-white border-white/20 hover:bg-white hover:text-primary font-bold px-8">
|
||
<span>{secondaryCtaText}</span>
|
||
</Link>
|
||
)}
|
||
</div>
|
||
|
||
|
||
</div>
|
||
</div>
|
||
</section>
|
||
);
|
||
}
|