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,89 @@
+import Link from "next/link";
+import { Phone, ArrowRight } from "lucide-react";
+import { companyDetails } from "@/content/company";
+import { cn } from "@/lib/utils";
+
+interface CtaBannerProps {
+  title?: string;
+  subtitle?: string;
+  ctaText?: string;
+  ctaLink?: string;
+  bgVariant?: "primary" | "accent-light";
+}
+
+export function CtaBanner({
+  title = "Masz pytania? Umów darmową konsultację",
+  subtitle = "Skontaktuj się z nami! Doradzimy najlepsze rozwiązania, dobierzemy moc urządzeń i przygotujemy bezpłatną wycenę.",
+  ctaText = "Zamów bezpłatną konsultację",
+  ctaLink = "/kontakt",
+  bgVariant = "primary",
+}: CtaBannerProps) {
+  const isPrimary = bgVariant === "primary";
+
+  return (
+    <section className="relative overflow-hidden py-16 md:py-20">
+      {/* Background and overlays */}
+      <div
+        className={cn(
+          "absolute inset-0 z-0",
+          isPrimary
+            ? "bg-[#0F2A47] text-white"
+            : "bg-accent-light text-primary"
+        )}
+      />
+
+      {isPrimary && (
+        <div className="absolute inset-0 bg-[radial-gradient(circle_at_bottom_left,rgba(43,168,224,0.12),transparent_40%)] z-0" />
+      )}
+
+      <div className="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="flex flex-col lg:flex-row items-center justify-between gap-10">
+          {/* Text Area */}
+          <div className="max-w-2xl text-center lg:text-left flex flex-col gap-3">
+            <h2
+              className={cn(
+                "text-2xl sm:text-3xl md:text-4xl font-extrabold font-heading leading-tight",
+                isPrimary ? "text-white" : "text-primary"
+              )}
+            >
+              {title}
+            </h2>
+            <p
+              className={cn(
+                "text-sm sm:text-base leading-relaxed max-w-xl",
+                isPrimary ? "text-slate-300" : "text-text-muted"
+              )}
+            >
+              {subtitle}
+            </p>
+          </div>
+
+          {/* Action buttons */}
+          <div className="flex flex-col sm:flex-row items-center gap-4 mt-8 w-full sm:w-auto shrink-0 justify-center">
+            <Link href={ctaLink} className="w-fit sm:w-auto btn btn-primary font-bold text-white px-6">
+              <span>{ctaText}</span>
+              <ArrowRight className="size-5" />
+            </Link>
+
+            <a
+              href={`tel:${companyDetails.phoneRaw}`}
+              className="w-fit sm:w-auto"
+            >
+              <button
+                className={cn(
+                  "btn btn-outline btn-primary bg-white w-fit sm:w-auto font-bold flex items-center gap-2 px-6",
+                  isPrimary
+                    ? "text-white hover:bg-white/20 hover:text-white border-white/30"
+                    : "text-primary hover:bg-primary/10 border-primary/20"
+                )}
+              >
+                <Phone className="size-5" />
+                <span>{companyDetails.phone}</span>
+              </button>
+            </a>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}