Update src/app/page.tsx

Merge version_12 into main

src/app/elektrikli-forklift/[modelName]/page.tsx

@@ -0,0 +1,251 @@
+"use client";
+
+import { useState } from "react";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
+import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";
+import { Phone, MessageCircle, ChevronRight } from "lucide-react";
+import Image from "next/image";
+
+interface ProductDetailPageProps {
+  params: {
+    modelName: string;
+  };
+}
+
+export default function ProductDetailPage({ params }: ProductDetailPageProps) {
+  const modelName = decodeURIComponent(params.modelName);
+  const [selectedImage, setSelectedImage] = useState(0);
+
+  const navItems = [
+    { name: "Hizmetler", id: "services" },
+    { name: "Araçlarımız", id: "products" },
+    { name: "Neden Biz", id: "metrics" },
+    { name: "SSS", id: "faq" },
+    { name: "İletişim", id: "contact" },
+  ];
+
+  const footerColumns = [
+    {
+      items: [
+        { label: "Ana Sayfa", href: "/" },
+        { label: "Hakkımızda", href: "/hakkimizda" },
+        { label: "Hizmetler", href: "/hizmetler" },
+        { label: "Ürünler", href: "/urunler" },
+      ],
+    },
+    {
+      items: [
+        { label: "Kiralama", href: "/hizmetler" },
+        { label: "Satış", href: "/urunler" },
+        { label: "Servis", href: "/hizmetler" },
+        { label: "Bakım", href: "/hizmetler" },
+      ],
+    },
+    {
+      items: [
+        { label: "Sık Sorulan Sorular", href: "#faq" },
+        { label: "İletişim", href: "/iletisim" },
+        { label: "Gizlilik Politikası", href: "#" },
+        { label: "Kullanım Şartları", href: "#" },
+      ],
+    },
+    {
+      items: [
+        { label: "Bize Yazın", href: "mailto:info@timforklift.com.tr" },
+        { label: "Çağrı Merkezi: 0532 402 1146", href: "tel:+905324021146" },
+        { label: "Tel: 0216 537 1439", href: "tel:+902165371439" },
+        { label: "WhatsApp Destek", href: "https://wa.me/905324021146" },
+      ],
+    },
+  ];
+
+  const productImages = [
+    "http://img.b2bpic.net/free-photo/factory-worker-protective-suit-with-hardhat-driving-forklift_342744-43.jpg",    "http://img.b2bpic.net/free-photo/forklift-operator-loading-cargo-while-working-warehouse-his-colleagues-are-background_637285-4210.jpg",    "http://img.b2bpic.net/free-photo/car-mechanic-repairs-blue-car-garage-with-tools_1157-46532.jpg"];
+
+  const specifications = [
+    { label: "Model Adı", value: modelName },
+    { label: "Seri", value: "E-Pro 3000 Series" },
+    { label: "Taşıma Kapasitesi", value: "3.000 kg" },
+    { label: "Kaldırma Yüksekliği", value: "4.800 mm" },
+    { label: "Çatal Uzunluğu", value: "1.200 mm" },
+    { label: "Motor Türü", value: "AC Elektrik Motor" },
+    { label: "Motor Gücü", value: "48 kW" },
+    { label: "Batarya Türü", value: "Lityum-İon (LiFePO4)" },
+    { label: "Batarya Voltajı", value: "48V / 100Ah" },
+    { label: "Dönüş Yarıçapı", value: "2.200 mm" },
+    { label: "Makine Ağırlığı", value: "4.500 kg" },
+    { label: "Lastik Türü", value: "Pneumatik", value2: "Rulmanlı" },
+    { label: "Direksiyon Sistemi", value: "Hidrolik Elektrik Geçişli" },
+    { label: "Hidrolik Sistem", value: "Kuvvetlendirilmiş Körüklü Sistem" },
+    { label: "Fren Sistemi", value: "Elektrik Rejeneratif + Mekanik" },
+    { label: "Güvenlik Sensörleri", value: "Çarpışma + Kötü Kullanım Algılama" },
+    { label: "Kabin Özellikleri", value: "Işıklandırmalı LCD Ekran" },
+    { label: "Operatör Konfor Özellikleri", value: "Ergonomik Koltuk + Titreşim Damping" },
+    { label: "Eğimlilik Yüzdesi", value: "%15" },
+    { label: "Enerji Tüketimi", value: "8 kWh / 100 saat çalışma" },
+    { label: "Çalışma Süresi", value: "8 saat sürekli" },
+    { label: "Şarj Süresi", value: "4 saat (80% kapasiteye)" },
+    { label: "İsteğe Bağlı Ataşmanlar", value: "Klasör, Fınca, Döner Kopya, Kova" },
+    { label: "CE Sertifikasyonu", value: "Evet - 2006/42/EC Direktifi" },
+    { label: "Garanti Süresi", value: "2 yıl veya 2.000 çalışma saati" },
+    { label: "Bakım Planı", value: "Her 250 saat veya 3 ay" },
+    { label: "Satış Sonrası Hizmet", value: "Türkiye Geneli 2 Saat Müdahale" },
+  ];
+
+  const otherModels = [
+    { name: "E-Pro 2000", image: "http://img.b2bpic.net/free-photo/factory-worker-protective-suit-with-hardhat-driving-forklift_342744-43.jpg" },
+    { name: "E-Pro 2500", image: "http://img.b2bpic.net/free-photo/forklift-operator-loading-cargo-while-working-warehouse-his-colleagues-are-background_637285-4210.jpg" },
+    { name: "E-Pro 3500", image: "http://img.b2bpic.net/free-photo/car-mechanic-repairs-blue-car-garage-with-tools_1157-46532.jpg" },
+  ];
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="icon-arrow"
+      defaultTextAnimation="reveal-blur"
+      borderRadius="pill"
+      contentWidth="compact"
+      sizing="medium"
+      background="blurBottom"
+      cardStyle="glass-depth"
+      primaryButtonStyle="double-inset"
+      secondaryButtonStyle="glass"
+      headingFontWeight="extrabold"
+    >
+      <div className="min-h-screen flex flex-col">
+        {/* Navbar */}
+        <div id="nav" data-section="nav">
+          <NavbarStyleApple brandName="Tim Forklift" navItems={navItems} />
+        </div>
+
+        {/* Main Content */}
+        <div className="flex-1 w-full py-12 px-4 md:px-8 lg:px-16">
+          <div className="max-w-6xl mx-auto">
+            {/* Breadcrumb */}
+            <div className="flex items-center gap-2 text-sm text-gray-600 mb-8">
+              <a href="/" className="hover:text-red-600">
+                Ana Sayfa
+              </a>
+              <ChevronRight size={16} />
+              <a href="/#products" className="hover:text-red-600">
+                Ürünler
+              </a>
+              <ChevronRight size={16} />
+              <span className="text-red-600 font-semibold">{modelName}</span>
+            </div>
+
+            <div className="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-12">
+              {/* Product Image Section */}
+              <div className="lg:col-span-2">
+                <div className="bg-white rounded-lg p-6 mb-6 flex items-center justify-center">
+                  <img
+                    src={productImages[selectedImage]}
+                    alt={modelName}
+                    className="w-full h-auto max-h-96 object-contain"
+                  />
+                </div>
+                <div className="flex gap-4 overflow-x-auto">
+                  {productImages.map((img, idx) => (
+                    <button
+                      key={idx}
+                      onClick={() => setSelectedImage(idx)}
+                      className={`flex-shrink-0 w-24 h-24 rounded-lg border-2 overflow-hidden ${
+                        selectedImage === idx ? "border-red-600" : "border-gray-300"
+                      }`}
+                    >
+                      <img src={img} alt="thumbnail" className="w-full h-full object-cover" />
+                    </button>
+                  ))}
+                </div>
+              </div>
+
+              {/* CTA Box */}
+              <div className="bg-red-600 text-white rounded-lg p-6 h-fit">
+                <h3 className="text-2xl font-bold mb-6">Detaylı Bilgi</h3>
+                <p className="text-sm mb-6 text-red-100">
+                  Bu model hakkında detaylı fiyat ve kiralama seçenekleri için bize ulaşın. Türkiye genelinde hızlı teslimat ve kurulum hizmeti sağlarız.
+                </p>
+
+                <div className="space-y-4 mb-6">
+                  <a
+                    href="tel:+902165371439"
+                    className="flex items-center justify-center gap-2 bg-white text-red-600 font-semibold py-3 px-4 rounded-lg hover:bg-red-50 transition-colors"
+                  >
+                    <Phone size={20} />
+                    0216 537 14 39
+                  </a>
+                  <a
+                    href="https://wa.me/905324021146"
+                    className="flex items-center justify-center gap-2 bg-white text-red-600 font-semibold py-3 px-4 rounded-lg hover:bg-red-50 transition-colors"
+                  >
+                    <MessageCircle size={20} />
+                    WhatsApp Temas
+                  </a>
+                </div>
+
+                <div className="border-t border-red-500 pt-4">
+                  <p className="text-xs text-red-100 mb-2">📍 Türkiye Geneli Servis</p>
+                  <p className="text-xs text-red-100">⏱️ 2 Saat Müdahale Garantisi</p>
+                </div>
+              </div>
+            </div>
+
+            {/* Specifications Table */}
+            <div className="mb-12">
+              <h2 className="text-3xl font-bold mb-6 text-gray-800">Teknik Özellikleri</h2>
+              <div className="overflow-x-auto">
+                <table className="w-full border-collapse">
+                  <tbody>
+                    {specifications.map((spec, idx) => (
+                      <tr key={idx} className={idx % 2 === 0 ? "bg-gray-50" : "bg-white"}>
+                        <td className="border border-gray-200 px-4 py-3 font-semibold text-gray-700 w-1/3">
+                          {spec.label}
+                        </td>
+                        <td className="border border-gray-200 px-4 py-3 text-gray-600">
+                          {spec.value}
+                        </td>
+                        {spec.value2 && (
+                          <td className="border border-gray-200 px-4 py-3 text-gray-600">
+                            {spec.value2}
+                          </td>
+                        )}
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+            </div>
+
+            {/* Other Models Carousel */}
+            <div className="mb-12">
+              <h2 className="text-3xl font-bold mb-6 text-gray-800">Diğer Elektrikli Forklift Modelleri</h2>
+              <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+                {otherModels.map((model, idx) => (
+                  <a
+                    key={idx}
+                    href={`/elektrikli-forklift/${encodeURIComponent(model.name)}`}
+                    className="bg-white rounded-lg overflow-hidden hover:shadow-lg transition-shadow"
+                  >
+                    <img src={model.image} alt={model.name} className="w-full h-48 object-cover" />
+                    <div className="p-4">
+                      <h3 className="font-semibold text-gray-800 mb-2">{model.name}</h3>
+                      <div className="flex items-center text-red-600 hover:text-red-700">
+                        Detaylı Bilgi
+                        <ChevronRight size={16} className="ml-1" />
+                      </div>
+                    </div>
+                  </a>
+                ))}
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Footer */}
+        <div id="footer" data-section="footer">
+          <FooterLogoEmphasis logoText="Tim Forklift A.Ş." columns={footerColumns} />
+        </div>
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/page.tsx

@@ -185,25 +185,35 @@ export default function HomePage() {
           tagIcon={Leaf}
           products={[
             {
-              id: "1",              name: "Transpalet Modelleri",              price: "Detaylı Bilgi",              imageSrc: "http://img.b2bpic.net/free-photo/factory-worker-protective-suit-with-hardhat-driving-forklift_342744-43.jpg?_wi=2",              imageAlt: "Transpalet Modelleri"},
+              id: "1",              name: "Transpalet Modelleri",              price: "Detaylı Bilgi İçin: 0216 537 14 39",              imageSrc: "http://img.b2bpic.net/free-photo/factory-worker-protective-suit-with-hardhat-driving-forklift_342744-43.jpg?_wi=2",              imageAlt: "Transpalet Modelleri",              onProductClick: () => (window.location.href = "/transpalet-modelleri"),
+            },
             {
-              id: "2",              name: "İstif Makinesi",              price: "Detaylı Bilgi",              imageSrc: "http://img.b2bpic.net/free-photo/factory-worker-protective-suit-with-hardhat-driving-forklift_342744-43.jpg?_wi=3",              imageAlt: "İstif Makinesi"},
+              id: "2",              name: "İstif Makineleri",              price: "Detaylı Bilgi İçin: 0216 537 14 39",              imageSrc: "http://img.b2bpic.net/free-photo/factory-worker-protective-suit-with-hardhat-driving-forklift_342744-43.jpg?_wi=3",              imageAlt: "İstif Makineleri",              onProductClick: () => (window.location.href = "/istif-makineleri"),
+            },
             {
-              id: "3",              name: "Elektrikli Forklift",              price: "Detaylı Bilgi",              imageSrc: "http://img.b2bpic.net/free-photo/factory-worker-protective-suit-with-hardhat-driving-forklift_342744-43.jpg?_wi=4",              imageAlt: "Elektrikli Forklift"},
+              id: "3",              name: "Elektrikli Forklift",              price: "Detaylı Bilgi İçin: 0216 537 14 39",              imageSrc: "http://img.b2bpic.net/free-photo/factory-worker-protective-suit-with-hardhat-driving-forklift_342744-43.jpg?_wi=4",              imageAlt: "Elektrikli Forklift",              onProductClick: () => (window.location.href = "/elektrikli-forklift"),
+            },
             {
-              id: "4",              name: "Dizel Forklift",              price: "Detaylı Bilgi",              imageSrc: "http://img.b2bpic.net/free-photo/factory-worker-protective-suit-with-hardhat-driving-forklift_342744-43.jpg?_wi=5",              imageAlt: "Dizel Forklift"},
+              id: "4",              name: "Dizel Forklift",              price: "Detaylı Bilgi İçin: 0216 537 14 39",              imageSrc: "http://img.b2bpic.net/free-photo/factory-worker-protective-suit-with-hardhat-driving-forklift_342744-43.jpg?_wi=5",              imageAlt: "Dizel Forklift",              onProductClick: () => (window.location.href = "/dizel-forklift"),
+            },
             {
-              id: "5",              name: "Reach Truck",              price: "Detaylı Bilgi",              imageSrc: "http://img.b2bpic.net/free-photo/factory-worker-protective-suit-with-hardhat-driving-forklift_342744-43.jpg?_wi=6",              imageAlt: "Reach Truck"},
+              id: "5",              name: "Reach Truck",              price: "Detaylı Bilgi İçin: 0216 537 14 39",              imageSrc: "http://img.b2bpic.net/free-photo/factory-worker-protective-suit-with-hardhat-driving-forklift_342744-43.jpg?_wi=6",              imageAlt: "Reach Truck",              onProductClick: () => (window.location.href = "/reach-truck"),
+            },
             {
-              id: "6",              name: "Sipariş Toplayıcılar",              price: "Detaylı Bilgi",              imageSrc: "http://img.b2bpic.net/free-photo/factory-worker-protective-suit-with-hardhat-driving-forklift_342744-43.jpg?_wi=7",              imageAlt: "Sipariş Toplayıcılar"},
+              id: "6",              name: "Sipariş Toplayıcılar",              price: "Detaylı Bilgi İçin: 0216 537 14 39",              imageSrc: "http://img.b2bpic.net/free-photo/factory-worker-protective-suit-with-hardhat-driving-forklift_342744-43.jpg?_wi=7",              imageAlt: "Sipariş Toplayıcılar",              onProductClick: () => (window.location.href = "/siparis-toplayicilari"),
+            },
             {
-              id: "7",              name: "Elektrikli Çekiciler",              price: "Detaylı Bilgi",              imageSrc: "http://img.b2bpic.net/free-photo/factory-worker-protective-suit-with-hardhat-driving-forklift_342744-43.jpg?_wi=8",              imageAlt: "Elektrikli Çekiciler"},
+              id: "7",              name: "Elektrikli Çekiciler",              price: "Detaylı Bilgi İçin: 0216 537 14 39",              imageSrc: "http://img.b2bpic.net/free-photo/factory-worker-protective-suit-with-hardhat-driving-forklift_342744-43.jpg?_wi=8",              imageAlt: "Elektrikli Çekiciler",              onProductClick: () => (window.location.href = "/elektrikli-cekiciler"),
+            },
             {
-              id: "8",              name: "Dar Koridor Makinesi",              price: "Detaylı Bilgi",              imageSrc: "http://img.b2bpic.net/free-photo/factory-worker-protective-suit-with-hardhat-driving-forklift_342744-43.jpg?_wi=9",              imageAlt: "Dar Koridor Makinesi"},
+              id: "8",              name: "Dar Koridor Makineleri",              price: "Detaylı Bilgi İçin: 0216 537 14 39",              imageSrc: "http://img.b2bpic.net/free-photo/factory-worker-protective-suit-with-hardhat-driving-forklift_342744-43.jpg?_wi=9",              imageAlt: "Dar Koridor Makineleri",              onProductClick: () => (window.location.href = "/dar-koridor-makineleri"),
+            },
             {
-              id: "9",              name: "Forklift Aksamları",              price: "Detaylı Bilgi",              imageSrc: "http://img.b2bpic.net/free-photo/factory-worker-protective-suit-with-hardhat-driving-forklift_342744-43.jpg?_wi=10",              imageAlt: "Forklift Aksamları"},
+              id: "9",              name: "Forklift Ataşmanları",              price: "Detaylı Bilgi İçin: 0216 537 14 39",              imageSrc: "http://img.b2bpic.net/free-photo/factory-worker-protective-suit-with-hardhat-driving-forklift_342744-43.jpg?_wi=10",              imageAlt: "Forklift Ataşmanları",              onProductClick: () => (window.location.href = "/forklift-atashmanları"),
+            },
             {
-              id: "10",              name: "Makas Platform",              price: "Detaylı Bilgi",              imageSrc: "http://img.b2bpic.net/free-photo/factory-worker-protective-suit-with-hardhat-driving-forklift_342744-43.jpg?_wi=11",              imageAlt: "Makas Platform"},
+              id: "10",              name: "Makaslı Platform",              price: "Detaylı Bilgi İçin: 0216 537 14 39",              imageSrc: "http://img.b2bpic.net/free-photo/factory-worker-protective-suit-with-hardhat-driving-forklift_342744-43.jpg?_wi=11",              imageAlt: "Makaslı Platform",              onProductClick: () => (window.location.href = "/makasli-platform"),
+            },
           ]}
           gridVariant="bento-grid"
           animationType="slide-up"