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,93 @@
+import React from 'react';
+import Link from 'next/link';
+
+import { cn } from '@/lib/utils';
+import { PiggyBank, FileText, CheckCircle2 } from 'lucide-react';
+
+export const FundingSection = () => {
+  return (
+    <section className="py-16 bg-accent-light text-primary">
+      <div className="container mx-auto px-4 md:px-8 max-w-6xl relative">
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
+          <div>
+            <div className="inline-flex items-center gap-2 px-3 py-1 bg-white/50 backdrop-blur-sm rounded-full text-sm font-semibold mb-6">
+              <PiggyBank className="w-4 h-4 text-accent" />
+              Dotacje i dofinansowania
+            </div>
+            
+            <h2 className="text-3xl md:text-4xl font-bold mb-6">
+              Odbierz nawet do 35 200 zł dotacji na pompę ciepła
+            </h2>
+            
+            <p className="text-primary/80 text-lg mb-8">
+              [PLACEHOLDER - DO AKTUALIZACJI] Obecnie trwają programy rządowe &quot;Czyste Powietrze&quot; oraz &quot;Mój Prąd&quot;, które pozwalają na zwrot znacznej części kosztów inwestycji. Pomożemy Ci przejść przez cały proces formalny i przygotować niezbędne wnioski.
+            </p>
+
+            <ul className="space-y-4 mb-10">
+              <li className="flex items-start gap-3">
+                <CheckCircle2 className="w-6 h-6 text-accent shrink-0" />
+                <span className="font-medium">Bezpłatny audyt możliwości dofinansowania</span>
+              </li>
+              <li className="flex items-start gap-3">
+                <CheckCircle2 className="w-6 h-6 text-accent shrink-0" />
+                <span className="font-medium">Pomoc w wypełnieniu dokumentacji</span>
+              </li>
+              <li className="flex items-start gap-3">
+                <CheckCircle2 className="w-6 h-6 text-accent shrink-0" />
+                <span className="font-medium">Możliwość prefinansowania inwestycji</span>
+              </li>
+            </ul>
+
+            <Link 
+              href="/dofinansowania"
+              className={cn("btn btn-primary group")}
+            >
+              Dowiedz się więcej o dotacjach
+            </Link>
+            <p className="text-xs text-primary/60 mt-4 max-w-sm">
+              * Wysokość dotacji uzależniona jest od progu dochodowego i zakresu termomodernizacji. Skontaktuj się z nami w celu dokładnej wyceny.
+            </p>
+          </div>
+
+          <div className="relative">
+            {/* Dekoracyjna karta */}
+            <div className="bg-white rounded-3xl p-8 shadow-xl relative z-10 border border-white/50">
+              <div className="flex justify-between items-start mb-8">
+                <div>
+                  <p className="text-sm text-gray-500 font-semibold mb-1">Twój kosztorys z dotacją</p>
+                  <h3 className="text-xl font-bold text-primary">Przykładowa kalkulacja</h3>
+                </div>
+                <div className="w-12 h-12 bg-accent/10 rounded-full flex items-center justify-center">
+                  <FileText className="w-6 h-6 text-accent" />
+                </div>
+              </div>
+
+              <div className="space-y-4 text-sm">
+                <div className="flex justify-between pb-4 border-b border-gray-100">
+                  <span className="text-gray-600">Wartość inwestycji</span>
+                  <span className="font-semibold text-gray-900">45 000 zł</span>
+                </div>
+                <div className="flex justify-between pb-4 border-b border-gray-100 text-green-600 font-medium">
+                  <span>Dotacja &quot;Czyste Powietrze&quot;</span>
+                  <span>- 20 500 zł</span>
+                </div>
+                <div className="flex justify-between pb-4 border-b border-gray-100 text-green-600 font-medium">
+                  <span>Ulga termomodernizacyjna</span>
+                  <span>- 4 600 zł</span>
+                </div>
+                <div className="flex justify-between pt-2">
+                  <span className="text-gray-900 font-bold">Ostateczny koszt inwestora</span>
+                  <span className="font-bold text-2xl text-primary">19 900 zł</span>
+                </div>
+              </div>
+            </div>
+
+            {/* Background elements */}
+            <div className="absolute -top-6 -right-6 w-full h-full bg-accent/20 rounded-3xl -z-10 blur-sm"></div>
+            <div className="absolute -bottom-8 -left-8 w-32 h-32 bg-white/40 rounded-full -z-10 blur-xl"></div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};