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,118 @@
+"use client";
+
+import React, { useState } from 'react';
+import { Product } from '@/types/types';
+import { Star } from 'lucide-react';
+
+interface TabsProps {
+  product: Product;
+}
+
+export function Tabs({ product }: TabsProps) {
+  const [activeTab, setActiveTab] = useState<'opis' | 'dane' | 'opinie'>('opis');
+
+  return (
+    <div className="mt-16 bg-white rounded-3xl border border-border overflow-hidden">
+      {/* Nawigacja */}
+      <div className="flex border-b border-border">
+        {(['opis', 'dane', 'opinie'] as const).map((tab) => (
+          <button
+            key={tab}
+            onClick={() => setActiveTab(tab)}
+            className={`flex-1 py-4 text-sm md:text-base font-bold uppercase tracking-wider transition-colors ${
+              activeTab === tab 
+                ? 'bg-slate-50 text-primary border-b-2 border-primary' 
+                : 'bg-white text-text-muted hover:bg-slate-50 hover:text-primary'
+            }`}
+          >
+            {tab === 'opis' && 'Opis produktu'}
+            {tab === 'dane' && 'Dane techniczne'}
+            {tab === 'opinie' && 'Opinie'}
+          </button>
+        ))}
+      </div>
+
+      {/* Zawartość */}
+      <div className="p-8 md:p-12">
+        {/* Opis */}
+        {activeTab === 'opis' && (
+          <div className="prose prose-slate max-w-none">
+            <h3 className="text-2xl font-bold text-primary font-heading mb-4">Szczegółowe informacje</h3>
+            <p className="text-lg text-text-muted leading-relaxed">
+              {product.description}
+            </p>
+            {product.heating && (
+              <p className="mt-4 font-semibold text-accent">
+                Ten model posiada funkcję efektywnego ogrzewania, dzięki czemu sprawdzi się doskonale jako dodatkowe źródło ciepła w okresach przejściowych lub główny system grzewczy dla wybranych pomieszczeń.
+              </p>
+            )}
+          </div>
+        )}
+
+        {/* Dane techniczne */}
+        {activeTab === 'dane' && (
+          <div>
+            <h3 className="text-2xl font-bold text-primary font-heading mb-6">Specyfikacja techniczna</h3>
+            {product.specs ? (
+              <div className="overflow-x-auto">
+                <table className="w-full text-left border-collapse">
+                  <tbody>
+                    {Object.entries(product.specs).map(([key, value], idx) => (
+                      <tr key={idx} className="border-b border-border hover:bg-slate-50 transition-colors">
+                        <th className="py-4 px-4 font-semibold text-primary w-1/2">{key}</th>
+                        <td className="py-4 px-4 text-text-muted w-1/2">{value as React.ReactNode}</td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+            ) : (
+              <p className="text-text-muted">Brak szczegółowych danych technicznych dla tego modelu.</p>
+            )}
+          </div>
+        )}
+
+        {/* Opinie */}
+        {activeTab === 'opinie' && (
+          <div>
+            <div className="flex items-center gap-4 mb-8">
+              <div className="text-4xl font-extrabold text-primary font-heading">4.9</div>
+              <div className="flex flex-col">
+                <div className="flex text-yellow-400">
+                  <Star className="w-5 h-5 fill-current" />
+                  <Star className="w-5 h-5 fill-current" />
+                  <Star className="w-5 h-5 fill-current" />
+                  <Star className="w-5 h-5 fill-current" />
+                  <Star className="w-5 h-5 fill-current" />
+                </div>
+                <span className="text-sm text-text-muted font-medium mt-1">Na podstawie 12 opinii</span>
+              </div>
+            </div>
+
+            <div className="space-y-6">
+              {/* Przykładowa opinia */}
+              <div className="p-6 bg-slate-50 rounded-2xl border border-border">
+                <div className="flex justify-between items-start mb-3">
+                  <div>
+                    <span className="font-bold text-primary">Janusz z Wrocławia</span>
+                    <span className="text-xs text-text-muted block mt-0.5">Potwierdzony zakup z montażem</span>
+                  </div>
+                  <div className="flex text-yellow-400">
+                    <Star className="w-4 h-4 fill-current" />
+                    <Star className="w-4 h-4 fill-current" />
+                    <Star className="w-4 h-4 fill-current" />
+                    <Star className="w-4 h-4 fill-current" />
+                    <Star className="w-4 h-4 fill-current" />
+                  </div>
+                </div>
+                <p className="text-text-muted text-sm leading-relaxed">
+                  Sprzęt najwyższej klasy. Bardzo cichy, w ogóle go nie słychać w sypialni. Montaż wykonany przez panów z AirProject przebiegł super szybko i czyściutko. Polecam!
+                </p>
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}