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,95 @@
+"use client";
+
+import React, { useState } from 'react';
+import Image from 'next/image';
+
+import { projectsData, Project } from '@/content/projects';
+import { cn } from '@/lib/utils';
+import { MapPin } from 'lucide-react';
+
+type Category = 'wszystkie' | Project['category'];
+
+const categories: { id: Category; label: string }[] = [
+  { id: 'wszystkie', label: 'Wszystkie' },
+  { id: 'klimatyzacja', label: 'Klimatyzacja' },
+  
+];
+
+export function ProjectsGrid() {
+  const [activeCategory, setActiveCategory] = useState<Category>('wszystkie');
+
+  const filteredProjects = projectsData.filter(
+    (project) => activeCategory === 'wszystkie' || project.category === activeCategory
+  );
+
+  return (
+    <section className="py-16 md:py-24 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+      {/* Filtry */}
+      <div className="flex flex-wrap items-center justify-center gap-3 mb-12">
+        {categories.map((category) => (
+          <button
+            key={category.id}
+            onClick={() => setActiveCategory(category.id)}
+            className={cn(
+              "px-5 py-2.5 rounded-full text-sm font-semibold transition-all duration-300 border",
+              activeCategory === category.id
+                ? "bg-primary text-white border-primary shadow-md"
+                : "bg-white text-text-muted border-border hover:border-primary/30 hover:text-primary"
+            )}
+          >
+            {category.label}
+          </button>
+        ))}
+      </div>
+
+      {/* Siatka */}
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+        {filteredProjects.map((project) => (
+          <div 
+            key={project.id} 
+            className="group relative rounded-2xl overflow-hidden bg-slate-100 aspect-[4/3]"
+          >
+            <Image
+              src={project.imageUrl}
+              alt={project.title}
+              fill
+              className="object-cover transition-transform duration-700 group-hover:scale-105"
+            />
+            
+            {/* Nakładka gradientowa */}
+            <div className="absolute inset-0 bg-gradient-to-t from-primary/90 via-primary/40 to-transparent opacity-80 group-hover:opacity-90 transition-opacity duration-300" />
+
+            {/* Treść (Zawsze widoczna lokalizacja i kategoria, pojawiający się opis) */}
+            <div className="absolute inset-0 p-6 flex flex-col justify-end">
+              <div className="transform translate-y-4 group-hover:translate-y-0 transition-transform duration-300">
+                <div className="flex items-center gap-3 mb-3">
+                  <span className="px-3 py-1 bg-accent text-white text-xs font-bold rounded-full uppercase tracking-wider">
+                    {categories.find(c => c.id === project.category)?.label}
+                  </span>
+                  <div className="flex items-center gap-1 text-white/80 text-sm font-medium">
+                    <MapPin className="w-3.5 h-3.5" />
+                    <span>{project.location}</span>
+                  </div>
+                </div>
+                
+                <h3 className="text-xl font-bold text-white mb-2 font-heading">
+                  {project.title}
+                </h3>
+                
+                <p className="text-white/80 text-sm line-clamp-2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 delay-100">
+                  {project.description}
+                </p>
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+
+      {filteredProjects.length === 0 && (
+        <div className="text-center py-20 text-text-muted">
+          <p className="text-lg">Brak realizacji w tej kategorii.</p>
+        </div>
+      )}
+    </section>
+  );
+}