Initial commit: New industrial design with green theme

src/app/product/page.tsx

@@ -0,0 +1,65 @@
+import Image from 'next/image';
+import Link from 'next/link';
+import { productCategories } from '@/data/site-config';
+
+export const metadata = {
+  title: 'สินค้า - ท่อพีพีอาร์ ท่อ HDPE ท่อ PVC วาล์ว อุปกรณ์ท่อ',
+  description: 'สินค้าครบวงจร ท่อพีพีอาร์ ท่อ HDPE ท่อ PVC วาล์ว อุปกรณ์แขวนท่อ อุปกรณ์ปรับอากาศ และอุปกรณ์ดับเพลิง',
+};
+
+export default function ProductPage() {
+  // Group products by category
+  const categories = productCategories.reduce((acc, product) => {
+    const cat = product.slug;
+    if (!acc[cat]) {
+      acc[cat] = [];
+    }
+    acc[cat].push(product);
+    return acc;
+  }, {} as Record<string, typeof productCategories>);
+
+  return (
+    <div className="pt-32 pb-16">
+      <div className="container mx-auto px-4">
+        {/* Page Header */}
+        <div className="text-center mb-12">
+          <h1 className="text-4xl md:text-5xl font-bold text-secondary-900 mb-4">
+            สินค้า<span className="text-primary-600">ทั้งหมด</span>
+          </h1>
+          <p className="text-xl text-secondary-600 max-w-2xl mx-auto">
+            วัสดุท่อและอุปกรณ์ระบบท่อคุณภาพสูงครบวงจร
+          </p>
+        </div>
+
+        {/* Products Grid */}
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
+          {productCategories.map((product) => (
+            <Link
+              key={product.id}
+              href={product.href}
+              className="card group"
+            >
+              <div className="relative aspect-video bg-secondary-100">
+                <Image
+                  src={product.image}
+                  alt={product.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">{product.nameEn}</span>
+                <h3 className="text-lg font-bold text-secondary-900 mt-1 group-hover:text-primary-600 transition-colors">
+                  {product.name}
+                </h3>
+                <p className="text-secondary-600 text-sm mt-2 line-clamp-2">
+                  {product.shortDescription || product.description}
+                </p>
+              </div>
+            </Link>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}