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,49 @@
+import React from 'react';
+import { Clock, Banknote, MapPin } from 'lucide-react';
+
+interface InfoHighlightsProps {
+  description: string;
+  highlights: {
+    icon: 'clock' | 'price' | 'map';
+    title: string;
+    description: string;
+  }[];
+}
+
+const iconMap = {
+  clock: Clock,
+  price: Banknote,
+  map: MapPin,
+};
+
+export const InfoHighlights = ({ description, highlights }: InfoHighlightsProps) => {
+  return (
+    <section className="py-16 bg-white">
+      <div className="container mx-auto px-4 md:px-8 max-w-7xl">
+        <div className="grid grid-cols-1 lg:grid-cols-12 gap-12 items-center">
+          <div className="lg:col-span-5">
+            <h2 className="text-3xl font-bold text-primary mb-6">Szybki montaż, jasne zasady</h2>
+            <p className="text-gray-600 text-lg leading-relaxed">
+              {description}
+            </p>
+          </div>
+          
+          <div className="lg:col-span-7 grid grid-cols-1 sm:grid-cols-3 gap-6">
+            {highlights.map((item, idx) => {
+              const Icon = iconMap[item.icon];
+              return (
+                <div key={idx} className="bg-gray-50 p-6 rounded-xl border border-gray-100 flex flex-col items-center text-center">
+                  <div className="w-12 h-12 bg-accent/10 rounded-full flex items-center justify-center mb-4 text-accent">
+                    <Icon className="w-6 h-6" />
+                  </div>
+                  <h3 className="font-semibold text-primary mb-2">{item.title}</h3>
+                  <p className="text-sm text-gray-500">{item.description}</p>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};