Zastosowanie wszystkich poprawek UI i logiki kalkulatora

2026-08-10 23:26:52 +02:00
commit 7324a6f800
218 changed files with 33628 additions and 0 deletions
@@ -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>
+  );
+}