Add product pages, real logo, and update phone number

src/app/[...slug]/page.tsx

@@ -0,0 +1,162 @@
+import { notFound } from 'next/navigation';
+import Image from 'next/image';
+import Link from 'next/link';
+import { productCategories } from '@/data/site-config';
+
+interface Props {
+  params: { slug: string[] };
+}
+
+// Generate all possible paths from product categories
+export async function generateStaticParams() {
+  const paths: { slug: string[] }[] = [];
+  
+  productCategories.forEach((product) => {
+    // Remove leading slash and split the href
+    const pathParts = product.href.replace(/^\//, '').split('/');
+    paths.push({ slug: pathParts });
+  });
+  
+  return paths;
+}
+
+function findProductBySlug(slug: string[]) {
+  const fullPath = '/' + slug.join('/');
+  return productCategories.find((p) => p.href === fullPath);
+}
+
+export async function generateMetadata({ params }: Props) {
+  const product = findProductBySlug(params.slug);
+  
+  if (!product) {
+    return { title: 'ไม่พบหน้า' };
+  }
+  
+  return {
+    title: `${product.name} - ${product.nameEn}`,
+    description: product.description,
+    keywords: product.keywords,
+  };
+}
+
+export default function ProductDetailPage({ params }: Props) {
+  const product = findProductBySlug(params.slug);
+  
+  if (!product) {
+    notFound();
+  }
+
+  // Find related products in same category
+  const relatedProducts = productCategories
+    .filter((p) => p.slug === product.slug && p.id !== product.id)
+    .slice(0, 4);
+
+  return (
+    <div className="pt-32 pb-16">
+      <div className="container mx-auto px-4">
+        {/* Breadcrumb */}
+        <nav className="mb-6">
+          <ol className="flex items-center gap-2 text-sm">
+            <li>
+              <Link href="/" className="text-secondary-500 hover:text-primary-600">
+                หน้าแรก
+              </Link>
+            </li>
+            <li className="text-secondary-400">/</li>
+            <li>
+              <Link href="/product" className="text-secondary-500 hover:text-primary-600">
+                สินค้า
+              </Link>
+            </li>
+            <li className="text-secondary-400">/</li>
+            <li className="text-primary-600 font-medium">{product.name}</li>
+          </ol>
+        </nav>
+
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
+          {/* Product Image */}
+          <div className="relative aspect-video bg-secondary-100 rounded-xl overflow-hidden">
+            <Image
+              src={product.image}
+              alt={product.name}
+              fill
+              className="object-cover"
+              priority
+            />
+          </div>
+
+          {/* Product Info */}
+          <div>
+            <span className="text-primary-600 font-semibold">{product.nameEn}</span>
+            <h1 className="text-3xl md:text-4xl font-bold text-secondary-900 mt-2 mb-4">
+              {product.name}
+            </h1>
+            <p className="text-secondary-600 text-lg mb-6">
+              {product.description}
+            </p>
+            
+            {/* CTA */}
+            <div className="flex flex-wrap gap-4">
+              <Link href="/contact-us" className="btn-primary">
+                ขอใบเสนอราคา
+              </Link>
+              <a
+                href="tel:090-555-1415"
+                className="btn-outline"
+              >
+                โทรสอบถาม
+              </a>
+            </div>
+          </div>
+        </div>
+
+        {/* SEO Content */}
+        {product.seoContent && (
+          <div className="mt-12">
+            <div className="bg-white rounded-xl p-8 shadow-card">
+              <div
+                className="prose prose-lg max-w-none prose-headings:font-bold prose-headings:text-secondary-900 prose-p:text-secondary-600 prose-a:text-primary-600 prose-strong:text-secondary-900 prose-ul:text-secondary-600 prose-li:text-secondary-600"
+                dangerouslySetInnerHTML={{ __html: product.seoContent }}
+              />
+            </div>
+          </div>
+        )}
+
+        {/* Related Products */}
+        {relatedProducts.length > 0 && (
+          <div className="mt-16">
+            <h2 className="text-2xl font-bold text-secondary-900 mb-6">
+              สินค้าที่เกี่ยวข้อง
+            </h2>
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+              {relatedProducts.map((related) => (
+                <Link
+                  key={related.id}
+                  href={related.href}
+                  className="card group"
+                >
+                  <div className="relative aspect-video bg-secondary-100">
+                    <Image
+                      src={related.image}
+                      alt={related.name}
+                      fill
+                      className="object-cover group-hover:scale-105 transition-transform duration-300"
+                    />
+                  </div>
+                  <div className="p-4">
+                    <span className="text-xs text-primary-600 font-semibold">
+                      {related.nameEn}
+                    </span>
+                    <h3 className="text-lg font-bold text-secondary-900 mt-1 group-hover:text-primary-600 transition-colors">
+                      {related.name}
+                    </h3>
+                  </div>
+                </Link>
+              ))}
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

src/components/layout/Footer.tsx

@@ -1,3 +1,4 @@
+import Image from 'next/image';
 import Link from 'next/link';
 import { siteConfig, workHours, mainNavigation } from '@/data/site-config';
 
@@ -9,15 +10,13 @@ export default function Footer() {
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
           {/* Company Info */}
           <div>
-            <div className="flex items-center gap-3 mb-4">
+            <Image
-              <div className="w-10 h-10 bg-primary-600 rounded-lg flex items-center justify-center">
+              src="/images/2021/02/13523630950840.png"
-                <span className="text-white font-bold text-xl">D</span>
+              alt="Deal Plus Tech"
-              </div>
+              width={150}
-              <div>
+              height={50}
-                <span className="font-bold text-lg">{siteConfig.name}</span>
+              className="h-10 w-auto mb-4"
-                <span className="block text-primary-400 text-xs">{siteConfig.nameTh}</span>
+            />
-              </div>
-            </div>
             <p className="text-secondary-300 text-sm mb-4">
               {siteConfig.description}
             </p>

src/components/layout/Header.tsx

@@ -45,13 +45,14 @@ export default function Header() {
         <div className="flex items-center justify-between h-16">
           {/* Logo */}
           <Link href="/" className="flex items-center gap-3">
-            <div className="w-10 h-10 bg-primary-600 rounded-lg flex items-center justify-center">
+            <Image
-              <span className="text-white font-bold text-xl">D</span>
+              src="/images/2021/02/13523630950840.png"
-            </div>
+              alt="Deal Plus Tech"
-            <div>
+              width={150}
-              <span className="text-white font-bold text-lg">{siteConfig.name}</span>
+              height={50}
-              <span className="block text-primary-400 text-xs">{siteConfig.nameTh}</span>
+              className="h-12 w-auto"
-            </div>
+              priority
+            />
           </Link>
 
           {/* Desktop Navigation */}

src/data/site-config.ts

@@ -5,7 +5,7 @@ export const siteConfig: SiteConfig = {
   nameTh: 'ดีลพลัสเทค',
   url: 'https://dealplustech.co.th',
   description: 'ดีลพลัสเทค - ผู้เชี่ยวชาญด้านวัสดุท่อและอุปกรณ์ระบบท่อ ท่อพีพีอาร์ ท่อ HDPE ท่อ PVC วาล์ว และอุปกรณ์ต่อท่อครบวงจร',
-  phone: '02-xxx-xxxx',
+  phone: '090-555-1415',
   email: 'info@dealplustech.co.th',
   lineId: '@dealplustech',
   facebookUrl: 'https://facebook.com/dealplustech',