changes

components/sections/HeroSection.tsx

@@ -1,7 +1,8 @@
 import Link from "next/link";
 import Image from "next/image";
-import { ArrowRight, Star } from "lucide-react";
-import { buttonClasses } from "@/components/ui/Button";
+import { Outfit } from "next/font/google";
+
+const outfit = Outfit({ subsets: ["latin"], weight: ["500", "700", "800"] });
 
 export interface HeroSectionProps {
   title?: React.ReactNode;
@@ -10,73 +11,88 @@ export interface HeroSectionProps {
   ctaLink?: string;
   secondaryCtaText?: string;
   secondaryCtaLink?: string;
-  backgroundImage?: string;
-  features?: string[];
 }
 
 export function HeroSection({
   title = (
     <>
-      <span className="text-white">Klimatyzacja</span><br />
+      <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.",
+  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",
-  backgroundImage = "/images/hero/home_page_hero.webp",
-  features
+  secondaryCtaLink = "/sklep"
 }: 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"
-      />
-      <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">
-          <h1 className="text-3xl md:text-5xl lg:text-6xl font-extrabold tracking-tight font-heading leading-[1.1] text-white">
-            {title}
-          </h1>
-          <p className="mt-6 text-base md:text-lg lg:text-xl text-white/90 max-w-2xl leading-relaxed">
-            {subtitle}
-          </p>
-          {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>
+    <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 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>
+
+        {/* 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>
   );
 }