feat: complete website implementation

2026-06-21 21:53:15 +02:00
parent b147112bdc
commit dfd3888517
110 changed files with 18276 additions and 217 deletions
@@ -0,0 +1,82 @@
+import React from 'react';
+import Link from 'next/link';
+import Image from 'next/image';
+import { Product } from '@/types/types';
+import { Heart, Wrench } from 'lucide-react';
+import { formatCurrency } from '@/lib/utils';
+
+interface ProductCardProps {
+  product: Product;
+}
+
+export function ProductCard({ product }: ProductCardProps) {
+  // Jeśli ma warianty, przycisk prowadzi do karty z wariantami
+  const hasVariants = product.variants && product.variants.length > 0;
+  
+  return (
+    <div className="group flex flex-col bg-white rounded-2xl border border-border overflow-hidden hover:shadow-xl transition-all duration-300">
+      {/* Obraz */}
+      <Link href={`/sklep/${product.slug}`} className="relative aspect-square p-6 bg-slate-50 flex items-center justify-center overflow-hidden">
+        {/* Placeholder tagów */}
+        <div className="absolute top-4 left-4 z-10 flex flex-col gap-2">
+          {product.features?.slice(0, 2).map((feat, idx) => (
+             <span key={idx} className="bg-white/90 backdrop-blur-sm text-primary text-[10px] font-bold px-2 py-1 rounded shadow-sm border border-border/50 uppercase">
+               {feat}
+             </span>
+          ))}
+        </div>
+
+        {/* Serce */}
+        <button className="absolute top-4 right-4 z-10 p-2 bg-white/90 backdrop-blur-sm rounded-full text-text-muted hover:text-red-500 hover:bg-white transition-colors shadow-sm">
+          <Heart className="w-5 h-5" />
+        </button>
+
+        <Image
+          src={product.image || 'https://images.unsplash.com/photo-1581094794329-c8112a89af12?w=800&q=80'}
+          alt={product.name}
+          width={400}
+          height={400}
+          className="object-contain w-full h-full transition-transform duration-500 group-hover:scale-105"
+        />
+      </Link>
+
+      {/* Treść */}
+      <div className="flex flex-col flex-grow p-6">
+        <div className="text-xs font-bold text-text-muted uppercase tracking-wider mb-1">
+          {product.brand}
+        </div>
+        <h3 className="text-xl font-bold text-primary font-heading leading-tight mb-2 group-hover:text-accent transition-colors">
+          <Link href={`/sklep/${product.slug}`}>
+            {product.name}
+          </Link>
+        </h3>
+        
+        {/* Informacja o mocy */}
+        <div className="text-sm font-medium text-text-muted mb-4">
+          Moc chłodnicza: <span className="text-primary">{product.power} kW</span>
+        </div>
+
+        {/* Ceny */}
+        <div className="mt-auto space-y-3">
+          <div className="flex flex-col gap-1">
+             <div className="text-2xl font-extrabold text-primary font-heading">
+               {formatCurrency(product.price)} <span className="text-sm text-text-muted font-normal">samo urządzenie</span>
+             </div>
+             {product.priceWithInstall && (
+               <div className="flex items-center gap-1.5 text-sm font-bold text-green-600 bg-green-50 px-2 py-1 rounded w-fit">
+                 <Wrench className="w-3.5 h-3.5" />
+                 od {formatCurrency(product.priceWithInstall)} z montażem
+               </div>
+             )}
+          </div>
+
+          <Link href={`/sklep/${product.slug}`} className="block mt-4">
+            <button className="btn btn-outline btn-primary bg-white w-full font-semibold">
+              {hasVariants ? 'Wybierz wariant' : 'Zobacz szczegóły'}
+            </button>
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+}