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,56 @@
+import React from 'react';
+import { SectionHeading } from '../common/SectionHeading';
+import { ShieldCheck, Clock, ThumbsUp, HeartHandshake } from 'lucide-react';
+
+const values = [
+  {
+    title: 'Najwyższa jakość',
+    description: 'Nie idziemy na kompromisy. Stosujemy wyłącznie sprawdzone materiały i urządzenia renomowanych producentów.',
+    icon: ThumbsUp
+  },
+  {
+    title: 'Terminowość',
+    description: 'Szanujemy Twój czas. Każde zlecenie realizujemy zgodnie z ustalonym harmonogramem.',
+    icon: Clock
+  },
+  {
+    title: 'Bezpieczeństwo',
+    description: 'Posiadamy wszystkie niezbędne uprawnienia (m.in. F-Gaz, SEP) oraz pełne ubezpieczenie OC firmy.',
+    icon: ShieldCheck
+  },
+  {
+    title: 'Długofalowe relacje',
+    description: 'Zależy nam na zaufaniu. Po skończonym montażu czy remoncie oferujemy pełną opiekę serwisową.',
+    icon: HeartHandshake
+  }
+];
+
+export function ValuesGrid() {
+  return (
+    <section className="py-16 md:py-24 bg-slate-50 border-y border-border">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <SectionHeading
+          eyebrow="Dlaczego my"
+          title="Nasze wartości"
+          subtitle="Zasady, którymi kierujemy się w codziennej pracy z naszymi klientami."
+          align="center"
+        />
+
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8 mt-16">
+          {values.map((val, idx) => {
+            const Icon = val.icon;
+            return (
+              <div key={idx} className="bg-white p-8 rounded-2xl border border-border text-center hover:shadow-lg transition-shadow duration-300">
+                <div className="mx-auto w-16 h-16 bg-accent/10 text-accent rounded-2xl flex items-center justify-center mb-6 transform -rotate-3 hover:rotate-0 transition-transform">
+                  <Icon className="w-8 h-8" />
+                </div>
+                <h3 className="text-xl font-bold text-primary font-heading mb-3">{val.title}</h3>
+                <p className="text-text-muted leading-relaxed text-sm">{val.description}</p>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    </section>
+  );
+}