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,54 @@
+import React from 'react';
+import Image from 'next/image';
+import { projectsData, Project } from '@/content/projects';
+
+interface ProjectsGalleryProps {
+  category: Project['category'];
+  title?: string;
+  description?: string;
+}
+
+export const ProjectsGallery = ({ 
+  category, 
+  title = "Nasze realizacje", 
+  description = "Zobacz przykłady prac wykonanych przez naszych certyfikowanych instalatorów." 
+}: ProjectsGalleryProps) => {
+  const projects = projectsData.filter((project) => project.category === category);
+
+  if (projects.length === 0) return null;
+
+  return (
+    <section className="py-16 bg-white">
+      <div className="container mx-auto px-4 md:px-8 max-w-7xl">
+        <div className="text-center max-w-2xl mx-auto mb-12">
+          <h2 className="text-3xl font-bold text-primary mb-4">{title}</h2>
+          <p className="text-gray-600">{description}</p>
+        </div>
+
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+          {projects.map((project) => (
+            <div key={project.id} className="group rounded-2xl overflow-hidden border border-gray-100 shadow-sm hover:shadow-lg transition-all duration-300 bg-white flex flex-col h-full">
+              <div className="relative h-64 overflow-hidden bg-gray-100">
+                <Image
+                  src={project.imageUrl}
+                  alt={project.title}
+                  fill
+                  className="object-cover group-hover:scale-105 transition-transform duration-500"
+                  sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
+                />
+              </div>
+              <div className="p-6 flex-grow flex flex-col">
+                <h3 className="font-bold text-lg text-primary mb-2 group-hover:text-accent transition-colors">
+                  {project.title}
+                </h3>
+                <p className="text-gray-600 text-sm mb-4 flex-grow">
+                  {project.description}
+                </p>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};