feat: complete website implementation

2026-06-21 21:53:15 +02:00
parent b147112bdc
commit dfd3888517
110 changed files with 18276 additions and 217 deletions
@@ -0,0 +1,117 @@
+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 = "HVAC & Usługi Wykończeniowe",
+  title = (
+    <>
+      Klimatyzacja, pompy ciepła<br className="hidden sm:inline" />
+      <span className="text-accent"> i usługi domowe</span>
+    </>
+  ),
+  subtitle = "Oferujemy profesjonalny dobór, czysty montaż i sprawny serwis. Wykończymy Twoje wnętrza i naprawimy instalacje. Solidnie i z polecenia.",
+  ctaText = "Darmowa wycena",
+  ctaLink = "/kontakt",
+  secondaryCtaText = "Zobacz ofertę",
+  secondaryCtaLink = "/uslugi-domowe",
+  backgroundImage = "/hero.jpg",
+  features
+}: HeroSectionProps = {}) {
+  return (
+    <section className="relative bg-primary min-h-[480px] md:min-h-[600px] flex items-center overflow-hidden">
+      {/* 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-accent fill-accent" />
+                  {feature}
+                </li>
+              ))}
+            </ul>
+          )}
+
+          {/* CTA Buttons */}
+          <div className="mt-10 flex flex-col sm:flex-row items-center gap-4 w-full sm:w-auto">
+            {ctaText && ctaLink && (
+              <Link href={ctaLink} className="w-full sm:w-auto group">
+                <button className="btn btn-primary text-white font-bold w-full sm:w-auto">
+                  <span>{ctaText}</span>
+                  <ArrowRight className="size-5 group-hover:translate-x-1 transition-transform" />
+                </button>
+              </Link>
+            )}
+            {secondaryCtaText && secondaryCtaLink && (
+              <Link href={secondaryCtaLink} className="w-full sm:w-auto">
+                <button className="btn btn-outline btn-primary bg-white font-bold w-full sm:w-auto">
+                  {secondaryCtaText}
+                </button>
+              </Link>
+            )}
+          </div>
+
+          {/* Trust Bar (Hero specific) */}
+          <div className="mt-8 flex items-center gap-3 text-sm font-medium text-white/80">
+            <div className="flex items-center text-cta">
+              <Star className="size-4 fill-current" />
+              <Star className="size-4 fill-current" />
+              <Star className="size-4 fill-current" />
+              <Star className="size-4 fill-current" />
+              <Star className="size-4 fill-current" />
+            </div>
+            <span>
+              {/* MOCK: do podmiany */}
+              4,9/5 w Google · 500+ realizacji · 12 lat na rynku
+            </span>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}