feat: Fix product tables and responsive fonts

- Add product detail page ([slug].astro) with table rendering - Display productTables from site-config.ts on product pages - Add responsive font scaling for large screens (1280px+) - Base font scales from 16px to 24px on 4K displays - All text elements use responsive sizing (md/lg/xl breakpoints) - Tables styled with green headers and alternating rows - Add comprehensive documentation (FIXES_SUMMARY.md) Fixes: - Product specification tables now visible on product pages - Font too small on large screens - now responsive
2026-03-02 12:22:13 +07:00
parent 6b453a8b86
commit ede8e32591
179 changed files with 35057 additions and 0 deletions
--- a/dealplustech-astro/src/components/BlogCard.astro
+++ b/dealplustech-astro/src/components/BlogCard.astro
@@ -0,0 +1,51 @@
+---
+import type { CollectionEntry } from 'astro:content';
+
+interface Props {
+  post: CollectionEntry<'blog'>;
+}
+
+const { post } = Astro.props;
+const { title, excerpt, date, author, category, categories, image, featuredImage } = post.data;
+
+// Support both 'category' and 'categories' field names
+const postCategory = category || (Array.isArray(categories) ? categories[0] : 'ทั่วไป');
+// Support both 'image' and 'featuredImage' field names
+const postImage = image || featuredImage || '/images/2021/03/ppr-pipe_000C.jpg';
+---
+
+<a href={`/blog/${post.slug}`} class="card group">
+  <div class="relative aspect-video bg-secondary-100 overflow-hidden">
+    <img
+      src={postImage}
+      alt={title}
+      class="object-cover w-full h-48 group-hover:scale-105 transition-transform duration-300"
+      loading="lazy"
+    />
+    <div class="absolute top-4 left-4">
+      <span class="industrial-badge">{postCategory}</span>
+    </div>
+  </div>
+  <div class="p-6">
+    <time class="text-sm text-secondary-500">
+      {new Date(date).toLocaleDateString('th-TH', { year: 'numeric', month: 'long', day: 'numeric' })}
+    </time>
+    
+    <h3 class="mt-2 text-xl font-bold text-secondary-900 group-hover:text-primary-600 transition-colors line-clamp-2">
+      {title}
+    </h3>
+    
+    {excerpt && (
+      <p class="mt-3 text-secondary-600 text-sm line-clamp-3">
+        {excerpt}
+      </p>
+    )}
+    
+    <div class="mt-4 flex items-center text-primary-600 font-medium">
+      <span>อ่านต่อ</span>
+      <svg class="w-4 h-4 ml-2 group-hover:translate-x-1 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width={2} d="M9 5l7 7-7 7" />
+      </svg>
+    </div>
+  </div>
+</a>
--- a/dealplustech-astro/src/components/FloatingContact.astro
+++ b/dealplustech-astro/src/components/FloatingContact.astro
@@ -0,0 +1,29 @@
+---
+import { siteConfig } from '../data/site-config';
+---
+
+<div class="fixed bottom-6 right-6 z-40 flex flex-col gap-3">
+  <!-- LINE -->
+  <a
+    href={`https://line.me/ti/p/${siteConfig.lineId}`}
+    target="_blank"
+    rel="noopener noreferrer"
+    class="w-14 h-14 bg-[#00B900] rounded-full flex items-center justify-center shadow-lg hover:scale-110 transition-transform"
+    aria-label="ติดต่อผ่าน LINE"
+  >
+    <svg class="w-7 h-7 text-white" viewBox="0 0 24 24" fill="currentColor">
+      <path d="M19.365 9.863c.349 0 .63.285.63.631 0 .345-.281.63-.63.63H17.61v1.125h1.755c.349 0 .63.283.63.63 0 .344-.281.629-.63.629h-2.386c-.345 0-.627-.285-.627-.629V8.108c0-.345.282-.63.63-.63h2.386c.346 0 .627.285.627.63 0 .349-.281.63-.63.63H17.61v1.125h1.755zm-3.855 3.016c0 .27-.174.51-.432.596-.064.021-.133.031-.199.031-.211 0-.391-.09-.51-.25l-2.443-3.317v2.94c0 .344-.279.629-.631.629-.346 0-.626-.285-.626-.629V8.108c0-.27.173-.51.43-.595.06-.023.136-.033.194-.033.195 0 .375.104.495.254l2.462 3.33V8.108c0-.345.282-.63.63-.63.345 0 .63.285.63.63v4.771zm-5.741 0c0 .344-.282.629-.631.629-.345 0-.627-.285-.627-.629V8.108c0-.345.282-.63.63-.63.346 0 .628.285.628.63v4.771zm-2.466.629H4.917c-.345 0-.63-.285-.63-.629V8.108c0-.345.285-.63.63-.63.348 0 .63.285.63.63v4.141h1.756c.348 0 .629.283.629.63 0 .344-.282.629-.629.629M24 10.314C24 4.943 18.615.572 12 .572S0 4.943 0 10.314c0 4.811 4.27 8.842 10.035 9.608.391.082.923.258 1.058.59.12.301.079.766.038 1.08l-.164 1.02c-.045.301-.24 1.186 1.049.645 1.291-.539 6.916-4.078 9.436-6.975C23.176 14.393 24 12.458 24 10.314"/>
+    </svg>
+  </a>
+
+  <!-- Phone -->
+  <a
+    href={`tel:${siteConfig.phone}`}
+    class="w-14 h-14 bg-primary-600 rounded-full flex items-center justify-center shadow-lg hover:scale-110 transition-transform"
+    aria-label="โทรหาเรา"
+  >
+    <svg class="w-7 h-7 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+      <path stroke-linecap="round" stroke-linejoin="round" stroke-width={2} d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
+    </svg>
+  </a>
+</div>
--- a/dealplustech-astro/src/components/Footer.astro
+++ b/dealplustech-astro/src/components/Footer.astro
@@ -0,0 +1,114 @@
+---
+import { siteConfig, workHours, mainNavigation } from '../data/site-config';
+---
+
+<footer class="bg-secondary-50 text-secondary-900">
+  <!-- Main Footer -->
+  <div class="container mx-auto px-4 py-12">
+    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
+      <!-- Company Info -->
+      <div>
+        <img
+          src="/images/2021/02/13523630950840.png"
+          alt="Deal Plus Tech"
+          class="h-10 w-auto mb-4"
+        />
+        <p class="text-secondary-600 text-sm mb-4">
+          {siteConfig.description}
+        </p>
+        <div class="flex gap-3">
+          <a
+            href={siteConfig.facebookUrl}
+            target="_blank"
+            rel="noopener noreferrer"
+            class="w-10 h-10 bg-secondary-200 rounded-lg flex items-center justify-center text-secondary-700 hover:bg-primary-600 hover:text-white transition-colors"
+            aria-label="Facebook"
+          >
+            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
+              <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
+            </svg>
+          </a>
+          <a
+            href={`https://line.me/ti/p/${siteConfig.lineId}`}
+            target="_blank"
+            rel="noopener noreferrer"
+            class="w-10 h-10 bg-secondary-200 rounded-lg flex items-center justify-center text-secondary-700 hover:bg-primary-600 hover:text-white transition-colors"
+            aria-label="LINE"
+          >
+            <svg class="w-5 h-5" viewBox="0 0 24 24" fill="currentColor">
+              <path d="M19.365 9.863c.349 0 .63.285.63.631 0 .345-.281.63-.63.63H17.61v1.125h1.755c.349 0 .63.283.63.63 0 .344-.281.629-.63.629h-2.386c-.345 0-.627-.285-.627-.629V8.108c0-.345.282-.63.63-.63h2.386c.346 0 .627.285.627.63 0 .349-.281.63-.63.63H17.61v1.125h1.755zm-3.855 3.016c0 .27-.174.51-.432.596-.064.021-.133.031-.199.031-.211 0-.391-.09-.51-.25l-2.443-3.317v2.94c0 .344-.279.629-.631.629-.346 0-.626-.285-.626-.629V8.108c0-.27.173-.51.43-.595.06-.023.136-.033.194-.033.195 0 .375.104.495.254l2.462 3.33V8.108c0-.345.282-.63.63-.63.345 0 .63.285.63.63v4.771zm-5.741 0c0 .344-.282.629-.631.629-.345 0-.627-.285-.627-.629V8.108c0-.345.282-.63.63-.63.346 0 .628.285.628.63v4.771zm-2.466.629H4.917c-.345 0-.63-.285-.63-.629V8.108c0-.345.285-.63.63-.63.348 0 .63.285.63.63v4.141h1.756c.348 0 .629.283.629.63 0 .344-.282.629-.629.629M24 10.314C24 4.943 18.615.572 12 .572S0 4.943 0 10.314c0 4.811 4.27 8.842 10.035 9.608.391.082.923.258 1.058.59.12.301.079.766.038 1.08l-.164 1.02c-.045.301-.24 1.186 1.049.645 1.291-.539 6.916-4.078 9.436-6.975C23.176 14.393 24 12.458 24 10.314"/>
+            </svg>
+          </a>
+        </div>
+      </div>
+
+      <!-- Quick Links -->
+      <div>
+        <h3 class="text-lg font-bold mb-4 text-primary-600">ลิงก์ด่วน</h3>
+        <ul class="space-y-2">
+          {mainNavigation.slice(0, 5).map((item) => (
+            <li>
+              <a href={item.href} class="text-secondary-600 hover:text-primary-600 transition-colors">
+                {item.label}
+              </a>
+            </li>
+          ))}
+        </ul>
+      </div>
+
+      <!-- Contact Info -->
+      <div>
+        <h3 class="text-lg font-bold mb-4 text-primary-600">ติดต่อเรา</h3>
+        <ul class="space-y-3">
+          <li class="flex items-start gap-3">
+            <svg class="w-5 h-5 text-primary-500 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width={2} d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width={2} d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
+            </svg>
+            <span class="text-secondary-600 text-sm">{siteConfig.address}</span>
+          </li>
+          <li class="flex items-center gap-3">
+            <svg class="w-5 h-5 text-primary-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width={2} d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
+            </svg>
+            <a href={`tel:${siteConfig.phone}`} class="text-secondary-600 hover:text-primary-600 text-sm">
+              {siteConfig.phone}
+            </a>
+          </li>
+          <li class="flex items-center gap-3">
+            <svg class="w-5 h-5 text-primary-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width={2} d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
+            </svg>
+            <a href={`mailto:${siteConfig.email}`} class="text-secondary-600 hover:text-primary-600 text-sm">
+              {siteConfig.email}
+            </a>
+          </li>
+        </ul>
+      </div>
+
+      <!-- Business Hours -->
+      <div>
+        <h3 class="text-lg font-bold mb-4 text-primary-600">เวลาทำการ</h3>
+        <ul class="space-y-2">
+          {workHours.map((item) => (
+            <li class="flex justify-between text-sm">
+              <span class="text-secondary-600">{item.day}</span>
+              <span class={item.isClosed ? 'text-red-500' : 'text-secondary-900 font-medium'}>
+                {item.hours}
+              </span>
+            </li>
+          ))}
+        </ul>
+      </div>
+    </div>
+  </div>
+
+  <!-- Bottom Bar -->
+  <div class="border-t border-secondary-200">
+    <div class="container mx-auto px-4 py-4">
+      <p class="text-center text-secondary-500 text-sm">
+        © {new Date().getFullYear()} {siteConfig.name}. สงวนลิขสิทธิ์.
+      </p>
+    </div>
+  </div>
+</footer>
--- a/dealplustech-astro/src/components/Header.astro
+++ b/dealplustech-astro/src/components/Header.astro
@@ -0,0 +1,222 @@
+---
+import { siteConfig, mainNavigation } from '../data/site-config';
+import { cn } from '../lib/utils';
+
+interface NavItemWithChildren {
+  label: string;
+  href: string;
+  children?: Array<{
+    label: string;
+    href: string;
+    children?: Array<{ label: string; href: string }>;
+  }>;
+}
+
+const navItems = mainNavigation as NavItemWithChildren[];
+---
+
+<header class="fixed top-0 left-0 right-0 z-50 bg-white shadow-md">
+  <!-- Top Bar -->
+  <div class="bg-primary-600 py-2">
+    <div class="container mx-auto px-4 flex justify-between items-center text-sm">
+      <div class="flex items-center gap-6 text-white">
+        <a href={`tel:${siteConfig.phone}`} class="flex items-center gap-2 hover:text-primary-100">
+          <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width={2} d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
+          </svg>
+          {siteConfig.phone}
+        </a>
+        <a href={`mailto:${siteConfig.email}`} class="flex items-center gap-2 hover:text-primary-100">
+          <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width={2} d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
+          </svg>
+          {siteConfig.email}
+        </a>
+      </div>
+      <div class="hidden md:flex items-center gap-4">
+        <a href={`https://line.me/ti/p/${siteConfig.lineId}`} class="flex items-center gap-1 text-white hover:text-primary-100">
+          <svg class="w-4 h-4" viewBox="0 0 24 24" fill="currentColor">
+            <path d="M19.365 9.863c.349 0 .63.285.63.631 0 .345-.281.63-.63.63H17.61v1.125h1.755c.349 0 .63.283.63.63 0 .344-.281.629-.63.629h-2.386c-.345 0-.627-.285-.627-.629V8.108c0-.345.282-.63.63-.63h2.386c.346 0 .627.285.627.63 0 .349-.281.63-.63.63H17.61v1.125h1.755zm-3.855 3.016c0 .27-.174.51-.432.596-.064.021-.133.031-.199.031-.211 0-.391-.09-.51-.25l-2.443-3.317v2.94c0 .344-.279.629-.631.629-.346 0-.626-.285-.626-.629V8.108c0-.27.173-.51.43-.595.06-.023.136-.033.194-.033.195 0 .375.104.495.254l2.462 3.33V8.108c0-.345.282-.63.63-.63.345 0 .63.285.63.63v4.771zm-5.741 0c0 .344-.282.629-.631.629-.345 0-.627-.285-.627-.629V8.108c0-.345.282-.63.63-.63.346 0 .628.285.628.63v4.771zm-2.466.629H4.917c-.345 0-.63-.285-.63-.629V8.108c0-.345.285-.63.63-.63.348 0 .63.285.63.63v4.141h1.756c.348 0 .629.283.629.63 0 .344-.282.629-.629.629M24 10.314C24 4.943 18.615.572 12 .572S0 4.943 0 10.314c0 4.811 4.27 8.842 10.035 9.608.391.082.923.258 1.058.59.12.301.079.766.038 1.08l-.164 1.02c-.045.301-.24 1.186 1.049.645 1.291-.539 6.916-4.078 9.436-6.975C23.176 14.393 24 12.458 24 10.314"/>
+          </svg>
+          LINE
+        </a>
+      </div>
+    </div>
+  </div>
+
+  <!-- Main Navigation -->
+  <nav class="container mx-auto px-4">
+    <div class="flex items-center justify-between h-16">
+      <!-- Logo -->
+      <a href="/" class="flex items-center gap-3">
+        <img
+          src="/images/2021/02/13523630950840.png"
+          alt="Deal Plus Tech"
+          class="h-12 w-auto"
+          loading="priority"
+        />
+      </a>
+
+      <!-- Desktop Navigation -->
+      <div class="hidden lg:flex items-center gap-1">
+        {navItems.map((item) => (
+          <div class="relative group">
+            <a
+              href={item.href}
+              class:list={[
+                "px-4 py-2 text-secondary-700 font-medium hover:text-primary-600 transition-colors flex items-center gap-1",
+                item.children && "pr-2"
+              ]}
+            >
+              {item.label}
+              {item.children && (
+                <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width={2} d="M19 9l-7 7-7-7" />
+                </svg>
+              )}
+            </a>
+            
+            <!-- Dropdown -->
+            {item.children && (
+              <div class="absolute top-full left-0 pt-2 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50">
+                <div class="absolute -top-2 left-0 right-0 h-2" />
+                <div class="min-w-[600px] bg-white shadow-xl rounded-lg py-4 border border-secondary-100">
+                  <div class="grid grid-cols-2 gap-1 px-4">
+                    {item.children.map((child) => (
+                      <div class="relative group/sub">
+                        <a
+                          href={child.href}
+                          class="block px-3 py-2 text-secondary-700 hover:bg-primary-50 hover:text-primary-700 transition-colors rounded font-medium"
+                        >
+                          {child.label}
+                        </a>
+                        {child.children && (
+                          <div class="hidden group-hover/sub:block absolute left-full top-0 w-56 !bg-white shadow-xl rounded-lg py-2 border border-secondary-100 max-h-96 overflow-y-auto z-50">
+                            <div class="absolute -top-2 -bottom-2 -left-2 w-2" />
+                            {child.children.map((subChild) => (
+                              <a
+                                href={subChild.href}
+                                class="block px-4 py-2 text-secondary-600 hover:bg-primary-50 hover:text-primary-700 text-sm"
+                              >
+                                {subChild.label}
+                              </a>
+                            ))}
+                          </div>
+                        )}
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              </div>
+            )}
+          </div>
+        ))}
+        <a href="/contact-us" class="btn-primary ml-4">
+          ติดต่อเรา
+        </a>
+      </div>
+
+      <!-- Mobile Menu Button -->
+      <button
+        id="mobile-menu-button"
+        class="lg:hidden text-secondary-900 p-2"
+        aria-label="Toggle menu"
+      >
+        <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width={2} d="M4 6h16M4 12h16M4 18h16" />
+        </svg>
+      </button>
+    </div>
+
+    <!-- Mobile Menu -->
+    <div id="mobile-menu" class="lg:hidden py-4 border-t border-secondary-200 max-h-[80vh] overflow-y-auto hidden">
+      {navItems.map((item) => (
+        item.children ? (
+          <div class="border-b border-secondary-100">
+            <div class="px-4 py-3 font-semibold text-secondary-900 bg-secondary-50">
+              {item.label}
+            </div>
+            <div class="pl-4">
+              {item.children.map((child) => (
+                <div>
+                  <a
+                    href={child.href}
+                    class="block px-4 py-2 text-secondary-700 hover:text-primary-600 hover:bg-primary-50 mobile-link"
+                  >
+                    {child.label}
+                  </a>
+                  {child.children && (
+                    <div class="pl-4 bg-secondary-50">
+                      {child.children.map((subChild) => (
+                        <a
+                          href={subChild.href}
+                          class="block px-4 py-2 text-secondary-600 hover:text-primary-600 text-sm mobile-link"
+                        >
+                          {subChild.label}
+                        </a>
+                      ))}
+                    </div>
+                  )}
+                </div>
+              ))}
+            </div>
+          </div>
+        ) : (
+          <a
+            href={item.href}
+            class="block px-4 py-3 text-secondary-700 hover:text-primary-600 font-medium mobile-link"
+          >
+            {item.label}
+          </a>
+        )
+      ))}
+      <div class="p-4">
+        <a
+          href="/contact-us"
+          class="btn-primary block text-center mobile-link"
+        >
+          ติดต่อเรา
+        </a>
+      </div>
+    </div>
+  </nav>
+</header>
+
+<script>
+  // Mobile menu toggle
+  const mobileMenuButton = document.getElementById('mobile-menu-button');
+  const mobileMenu = document.getElementById('mobile-menu');
+  let mobileMenuOpen = false;
+
+  mobileMenuButton?.addEventListener('click', () => {
+    mobileMenuOpen = !mobileMenuOpen;
+    if (mobileMenuOpen) {
+      mobileMenu?.classList.remove('hidden');
+      mobileMenuButton.innerHTML = `
+        <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width={2} d="M6 18L18 6M6 6l12 12" />
+        </svg>
+      `;
+    } else {
+      mobileMenu?.classList.add('hidden');
+      mobileMenuButton.innerHTML = `
+        <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width={2} d="M4 6h16M4 12h16M4 18h16" />
+        </svg>
+      `;
+    }
+  });
+
+  // Close mobile menu when clicking links
+  document.querySelectorAll('.mobile-link').forEach(link => {
+    link.addEventListener('click', () => {
+      mobileMenuOpen = false;
+      mobileMenu?.classList.add('hidden');
+      mobileMenuButton.innerHTML = `
+        <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width={2} d="M4 6h16M4 12h16M4 18h16" />
+        </svg>
+      `;
+    });
+  });
+</script>
--- a/dealplustech-astro/src/components/ProductCard.astro
+++ b/dealplustech-astro/src/components/ProductCard.astro
@@ -0,0 +1,37 @@
+---
+import type { CollectionEntry } from 'astro:content';
+
+interface Props {
+  product: CollectionEntry<'products'>;
+}
+
+const { product } = Astro.props;
+const { name, shortDescription, image } = product.data;
+---
+
+<a href={`/products/${product.data.slug}`} class="card group">
+  <div class="aspect-w-16 aspect-h-9 overflow-hidden bg-secondary-100">
+    <img
+      src={image || '/placeholder.jpg'}
+      alt={name}
+      class="object-cover w-full h-48 group-hover:scale-105 transition-transform duration-300"
+      loading="lazy"
+    />
+  </div>
+  <div class="p-6">
+    <h3 class="text-lg font-bold text-secondary-900 group-hover:text-primary-600 transition-colors">
+      {name}
+    </h3>
+    {shortDescription && (
+      <p class="mt-2 text-sm text-secondary-600 line-clamp-2">
+        {shortDescription}
+      </p>
+    )}
+    <div class="mt-4 flex items-center text-primary-600 font-medium">
+      <span>ดูรายละเอียด</span>
+      <svg class="w-4 h-4 ml-2 group-hover:translate-x-1 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width={2} d="M9 5l7 7-7 7" />
+      </svg>
+    </div>
+  </div>
+</a>
--- a/dealplustech-astro/src/content.config.ts
+++ b/dealplustech-astro/src/content.config.ts
@@ -0,0 +1,71 @@
+import { defineCollection } from 'astro:content';
+import { glob } from 'astro/loaders';
+import { z } from 'astro/zod';
+
+// Product specification schema
+const productSpecificationSchema = z.object({
+  label: z.string(),
+  value: z.string(),
+  unit: z.string().optional(),
+});
+
+// FAQ item schema
+const faqItemSchema = z.object({
+  question: z.string(),
+  answer: z.string(),
+});
+
+// Product table schema (for specification tables)
+const productTableSchema = z.object({
+  tableName: z.string(),
+  headers: z.array(z.string()),
+  rows: z.array(z.array(z.string())),
+});
+
+// Product collection schema
+const products = defineCollection({
+  loader: glob({ pattern: '**/*.md', base: './src/content/products' }),
+  schema: z.object({
+    // Basic info
+    id: z.string(),
+    name: z.string(),
+    nameEn: z.string(),
+    slug: z.string(),
+    
+    // SEO
+    description: z.string(),
+    shortDescription: z.string().optional(),
+    keywords: z.array(z.string()).optional(),
+    seoContent: z.string().optional(),
+    
+    // Images
+    image: z.string(),
+    
+    // Product details
+    specifications: z.array(productSpecificationSchema).optional(),
+    features: z.array(z.string()).optional(),
+    applications: z.array(z.string()).optional(),
+    certifications: z.array(z.string()).optional(),
+    
+    // Tables
+    productTables: z.array(productTableSchema).optional(),
+    
+    // FAQ
+    faq: z.array(faqItemSchema).optional(),
+    
+    // Relations
+    relatedProductIds: z.array(z.string()).optional(),
+    
+    // Schema.org data
+    schemaData: z.object({
+      brand: z.string().optional(),
+      manufacturer: z.string().optional(),
+      material: z.string().optional(),
+      category: z.string().optional(),
+    }).optional(),
+  }),
+});
+
+export const collections = {
+  products: products,
+};
--- a/dealplustech-astro/src/content/blog/ข้อดี-ท่อ-hdpe.md
+++ b/dealplustech-astro/src/content/blog/ข้อดี-ท่อ-hdpe.md
@@ -0,0 +1,104 @@
+---
+id: hdpe-pipe-advantages
+title: "ข้อดีของท่อ HDPE ในงานระบบน้ำ ทำไมถึงเป็นตัวเลือกยอดนิยม"
+excerpt: "ท่อ HDPE (High Density Polyethylene) เป็นท่อที่ได้รับความนิยมสูงในงานระบบน้ำ เนื่องจากความทนทานและความยืดหยุ่นที่เหนือกว่าท่อชนิดอื่น"
+date: "2024-01-10"
+author: "Deal Plus Tech"
+categories: ["ท่อ HDPE", "ความรู้"]
+featuredImage: "/images/2021/03/hdpe-pipe_000C.jpg"
+---
+
+## ท่อ HDPE คืออะไร?
+
+ท่อ HDPE (High Density Polyethylene) หรือท่อเอชดีพีอี เป็นท่อที่ผลิตจากโพลิเอทิลีนความหนาแน่นสูง เป็นวัสดุพลาสติกที่มีความแข็งแรงและทนทานเป็นอย่างมาก
+
+## ข้อดีของท่อ HDPE
+
+### 1. ความยืดหยุ่นสูง
+ท่อ HDPE สามารถโค้งงอได้ถึง 45 องศา ทำให้เหมาะสำหรับพื้นที่ติดตั้งจำกัด และสามารถรองรับการเคลื่อนไหวของดินได้ดี
+
+### 2. ทนทานต่อสารเคมี
+ท่อ HDPE ทนทานต่อการกัดกร่อนของสารเคมี กรด และด่าง ทำให้เหมาะสำหรับงานอุตสาหกรรม
+
+### 3. อายุการใช้งานยาวนาน
+ท่อ HDPE มีอายุการใช้งานมากกว่า 50 ปี เมื่อติดตั้งและใช้งานอย่างถูกต้อง
+
+### 4. น้ำหนักเบา
+ท่อ HDPE มีน้ำหนักเบากว่าท่อโลหะ ทำให้ง่ายต่อการขนส่งและติดตั้ง
+
+### 5. การเชื่อมต่อที่แน่นหนา
+การเชื่อมท่อ HDPE ด้วยวิธี Butt Fusion ทำให้ท่อเชื่อมต่อกันเป็นเนื้อเดียว ไม่มีรอยต่อ ป้องกันการรั่วซึม
+
+### 6. ปลอดภัยต่อสุขภาพ
+ท่อ HDPE ไม่เป็นสนิม ไม่ปล่อยสารพิษ ปลอดภัยสำหรับน้ำดื่ม
+
+## การใช้งานท่อ HDPE
+
+### งานประปา
+- ท่อส่งน้ำประปา
+- ระบบประปาในบ้านเรือน
+- ระบบประปาในอาคาร
+
+### งานเกษตร
+- ระบบน้ำหยด
+- ระบบสปริงเกลอร์
+- ระบบน้ำเพื่อการเกษตร
+
+### งานอุตสาหกรรม
+- ท่อส่งสารเคมี
+- ระบบบำบัดน้ำเสีย
+- งานโรงงานอุตสาหกรรม
+
+### งานโครงสร้างพื้นฐาน
+- งานท่อใต้ดิน
+- ท่อร้อยสายไฟ
+- งานสาธารณูปโภค
+
+## ขนาดท่อ HDPE ที่นิยมใช้
+
+| ขนาด (มม.) | การใช้งาน |
+|------------|-----------|
+| 16-32 | งานประปาภายในบ้าน |
+| 40-63 | งานประปาอาคารขนาดเล็ก |
+| 75-110 | งานประปาอาคารขนาดใหญ่ |
+| 125-315 | งานท่อส่งน้ำหลัก |
+| 355-1200 | งานโครงสร้างพื้นฐาน |
+
+## เกรดของท่อ HDPE
+
+### PE80
+- เหมาะสำหรับงานทั่วไป
+- ทนแรงดันสูงสุด 8 MPa
+
+### PE100
+- เหมาะสำหรับงานที่ต้องการความแข็งแรงสูง
+- ทนแรงดันสูงสุด 10 MPa
+- เป็นเกรดที่นิยมใช้ในปัจจุบัน
+
+## การติดตั้งท่อ HDPE
+
+### วิธี Butt Fusion
+1. ตัดท่อให้ตรง
+2. ทำความสะอาดผิวท่อ
+3. ใช้เครื่องเชื่อมท่อ HDPE
+4. ให้ความร้อนจนผิวท่อละลาย
+5. กดท่อเข้าด้วยกัน
+6. รอให้เย็นตัวลง
+
+### วิธี Electrofusion
+1. ใช้ข้อต่อแบบ Electrofusion
+2. เสียบปลั๊กไฟเข้ากับข้อต่อ
+3. รอจนกระบวนการเชื่อมเสร็จสิ้น
+
+## สรุป
+
+ท่อ HDPE เป็นตัวเลือกที่ยอดเยี่ยมสำหรับงานระบบน้ำ เนื่องจากมีความทนทาน ความยืดหยุ่น และอายุการใช้งานที่ยาวนาน ไม่ว่าจะเป็นงานประปา งานเกษตร หรืองานอุตสาหกรรม ท่อ HDPE สามารถตอบโจทย์ได้ทุกการใช้งาน
+
+---
+
+**สนใจสินค้าท่อ HDPE?**
+ติดต่อเราได้ที่:
+- โทร: 090-555-1415
+- LINE: jppselection
+
+[ดูสินค้าท่อ HDPE ทั้งหมด](/ท่อhdpe)
--- a/dealplustech-astro/src/content/blog/ท่อ-ppr-คืออะไร.md
+++ b/dealplustech-astro/src/content/blog/ท่อ-ppr-คืออะไร.md
@@ -0,0 +1,80 @@
+---
+id: ppr-pipe-guide
+title: "ท่อ PPR คืออะไร? คู่มือฉบับสมบูรณ์สำหรับการเลือกใช้งาน"
+excerpt: "ท่อ PPR (Polypropylene Random Copolymer) เป็นท่อพลาสติกที่ได้รับความนิยมสูงในการใช้งานระบบประปา บทความนี้จะอธิบายทุกสิ่งที่คุณต้องรู้เกี่ยวกับท่อ PPR"
+date: "2024-01-15"
+author: "Deal Plus Tech"
+categories: ["ท่อ PPR", "ความรู้", "คู่มือ"]
+featuredImage: "/images/2021/03/ppr-pipe_000C.jpg"
+---
+
+## ท่อ PPR คืออะไร?
+
+ท่อ PPR (Polypropylene Random Copolymer) หรือท่อพีพีอาร์ เป็นท่อพลาสติกที่ผลิตจากเม็ดพลาสติก PP-R 80 (Polypropylene Random Copolymer 80) ซึ่งเป็นวัสดุพลาสติกคุณภาพสูงที่มีความแข็งแรงและทนทานเป็นอย่างดี
+
+## ข้อดีของท่อ PPR
+
+### 1. ทนแรงดันและอุณหภูมิสูง
+ท่อ PPR สามารถทนแรงดันได้สูงถึง 20 บาร์ และทนต่ออุณหภูมิได้สูงถึง 95°C ทำให้เหมาะสำหรับใช้งานทั้งระบบน้ำเย็นและน้ำร้อน
+
+### 2. สะอาดและปลอดภัย
+ท่อ PPR ไม่เป็นสนิม ปราศจากโลหะหนักและสิ่งปนเปื้อน ทำให้น้ำที่ไหลผ่านสะอาดและปลอดภัยต่อการบริโภค
+
+### 3. อายุการใช้งานยาวนาน
+ด้วยคุณสมบัติที่ทนทาน ท่อ PPR มีอายุการใช้งานยาวนานกว่า 50 ปี
+
+### 4. ติดตั้งง่าย
+การเชื่อมต่อท่อ PPR ใช้วิธีเชื่อมด้วยความร้อน ทำให้ท่อและข้อต่อเป็นเนื้อเดียวกัน ไม่มีปัญหารั่วซึม
+
+### 5. ประหยัดพลังงาน
+ท่อ PPR เป็นฉนวนกันความร้อนที่ดี ช่วยรักษาอุณหภูมิของน้ำได้ดีกว่าท่อโลหะ
+
+## การเลือกท่อ PPR ที่เหมาะสม
+
+### ขนาดท่อ
+เลือกขนาดท่อให้เหมาะสมกับปริมาณน้ำที่ต้องการใช้งาน:
+- ท่อขนาด 20-25 มม. เหมาะสำหรับบ้านเรือนทั่วไป
+- ท่อขนาด 32-63 มม. เหมาะสำหรับอาคารขนาดใหญ่
+
+### เกรดของท่อ
+- **PN10** - สำหรับน้ำเย็น ทนแรงดัน 10 บาร์
+- **PN16** - สำหรับน้ำอุ่น ทนแรงดัน 16 บาร์
+- **PN20** - สำหรับน้ำร้อน ทนแรงดัน 20 บาร์
+
+## การติดตั้งท่อ PPR
+
+### ขั้นตอนการเชื่อมท่อ
+1. ตัดท่อให้ตรงและเรียบ
+2. ทำความสะอาดผิวท่อและข้อต่อ
+3. ใช้เครื่องเชื่อมท่ออุณหภูมิ 260°C
+4. สอดท่อและข้อต่อเข้าด้วยกัน
+5. รอให้เย็นตัวลงประมาณ 2-3 นาที
+
+### ข้อควรระวัง
+- หลีกเลี่ยงการติดตั้งในพื้นที่ที่มีแสงแดดโดยตรง
+- ควรทิ้งระยะห่างสำหรับการขยายตัวของท่อ
+- ตรวจสอบความร้อนของเครื่องเชื่อมก่อนใช้งาน
+
+## ท่อ PPR ตราช้าง
+
+ท่อ PPR ตราช้าง เป็นท่อ PPR คุณภาพสูงที่ผลิตจากเม็ดพลาสติก PP-R 80 วัตถุดิบคุณภาพสูงมาตรฐานยุโรปจาก lyondellbasell
+
+**คุณสมบัติเด่น:**
+- ทนแรงดันได้สูงสุด 20 บาร์
+- ทนต่ออุณหภูมิได้สูงถึง 95°C
+- ผลิตตามมาตรฐาน DIN8077 และ DIN8078 ของประเทศเยอรมัน
+- รับประกันคุณภาพ
+
+## สรุป
+
+ท่อ PPR เป็นตัวเลือกที่ดีสำหรับระบบประปาในปัจจุบัน เนื่องจากมีความทนทานสูง ติดตั้งง่าย และมีอายุการใช้งานยาวนาน หากคุณกำลังมองหาท่อสำหรับงานระบบน้ำ ท่อ PPR เป็นตัวเลือกที่คุ้มค่าและเหมาะสม
+
+---
+
+**สนใจสินค้าท่อ PPR?**
+ติดต่อเราได้ที่:
+- โทร: 090-555-1415
+- LINE: jppselection
+- อีเมล: dealplustech@gmail.com
+
+[ดูสินค้าท่อ PPR ทั้งหมด](/ท่อพีพีอาร์ตราช้าง)
--- a/dealplustech-astro/src/content/blog/บำรุงรักษาปั๊มน้ำ.md
+++ b/dealplustech-astro/src/content/blog/บำรุงรักษาปั๊มน้ำ.md
@@ -0,0 +1,126 @@
+---
+id: water-pump-maintenance
+title: "การบำรุงรักษาปั๊มน้ำให้มีอายุการใช้งานยาวนาน"
+excerpt: "ปั๊มน้ำเป็นอุปกรณ์สำคัญในระบบน้ำทุกบ้าน การบำรุงรักษาที่ถูกต้องจะช่วยยืดอายุการใช้งานและประหยัดค่าไฟฟ้า"
+date: "2024-01-05"
+author: "Deal Plus Tech"
+categories: ["ปั๊มน้ำ", "บำรุงรักษา", "เคล็ดลับ"]
+featuredImage: "/images/2021/02/Water-Pump1.jpg"
+---
+
+## ความสำคัญของการบำรุงรักษาปั๊มน้ำ
+
+ปั๊มน้ำเป็นหัวใจของระบบน้ำในบ้าน การบำรุงรักษาอย่างสม่ำเสมอจะช่วย:
+- ยืดอายุการใช้งานของปั๊มน้ำ
+- ลดปัญหาการเสีย
+- ประหยัดค่าไฟฟ้า
+- ป้องกันอุบัติเหตุจากการรั่วซึม
+
+## การบำรุงรักษาปั๊มน้ำแบบทำเอง
+
+### 1. ตรวจสอบสายไฟและสวิตช์
+- ตรวจสอบสายไฟว่ามีรอยชำรุดหรือไม่
+- ตรวจสอบสวิตช์ว่าทำงานปกติหรือไม่
+- หากพบความผิดปกติควรเรียกช่าง
+
+### 2. ทำความสะอาดตัวกรอง
+- ปิดวาล์วน้ำเข้าก่อนทำความสะอาด
+- ถอดตัวกรองออกมาล้าง
+- ตรวจสอบว่ามีสิ่งปนเปื้อนหรือไม่
+- ติดตั้งกลับเข้าที่เดิม
+
+### 3. ตรวจสอบแรงดันน้ำ
+- สังเกตแรงดันน้ำว่าลดลงหรือไม่
+- ตรวจสอบว่ามีเสียงผิดปกติหรือไม่
+- หากแรงดันลดลงอาจมีการรั่วซึม
+
+### 4. ตรวจสอบถังแรงดัน (Pressure Tank)
+- ตรวจสอบว่าถังมีอากาศเพียงพอหรือไม่
+- หากปั๊มเปิด-ปิดบ่อยผิดปกติ อาจต้องเติมอากาศ
+- ควรตรวจสอบทุก 6 เดือน
+
+## ปัญหาที่พบบ่อยและวิธีแก้ไข
+
+### ปั๊มไม่ทำงาน
+**สาเหตุ:**
+- ไฟดับหรือสายไฟขาด
+- สวิตช์เสีย
+- มอเตอร์เสีย
+
+**วิธีแก้:**
+- ตรวจสอบไฟและสายไฟ
+- เปลี่ยนสวิตช์
+- เรียกช่างซ่อมมอเตอร์
+
+### แรงดันน้ำต่ำ
+**สาเหตุ:**
+- ตัวกรองอุดตัน
+- ท่อรั่ว
+- ใบพัดสึกหรอ
+
+**วิธีแก้:**
+- ทำความสะอาดตัวกรอง
+- ตรวจสอบและซ่อมท่อ
+- เปลี่ยนใบพัด
+
+### ปั๊มเปิด-ปิดบ่อย
+**สาเหตุ:**
+- ถังแรงดันอากาศรั่ว
+- แผ่นไดอะแฟรมแตก
+- วาล์วตรวจสอบแรงดันเสีย
+
+**วิธีแก้:**
+- เติมอากาศในถัง
+- เปลี่ยนแผ่นไดอะแฟรม
+- เปลี่ยนวาล์ว
+
+### ปั๊มมีเสียงดังผิดปกติ
+**สาเหตุ:**
+- ลูกปืนเสีย
+- ใบพัดชำรุด
+- การติดตั้งไม่แน่นหนา
+
+**วิธีแก้:**
+- เปลี่ยนลูกปืน
+- เปลี่ยนใบพัด
+- ตรวจสอบการยึดแน่น
+
+## ตารางการบำรุงรักษา
+
+| รายการ | ความถี่ | หมายเหตุ |
+|--------|---------|----------|
+| ตรวจสอบสายไฟ | ทุกเดือน | มองหารอยชำรุด |
+| ทำความสะอาดตัวกรอง | ทุก 3 เดือน | หรือเมื่อแรงดันลด |
+| ตรวจสอบถังแรงดัน | ทุก 6 เดือน | เติมอากาศหากจำเป็น |
+| ตรวจสอบสวิตช์ | ทุกปี | เปลี่ยนหากเสีย |
+| ตรวจสอบใบพัด | ทุก 2 ปี | โดยช่างผู้เชี่ยวชาญ |
+
+## เคล็ดลับการใช้งานปั๊มน้ำ
+
+### ประหยัดไฟฟ้า
+- เลือกขนาดปั๊มที่เหมาะสมกับการใช้งาน
+- ติดตั้งถังแรงดันขนาดเหมาะสม
+- หลีกเลี่ยงการเปิด-ปิดปั๊มบ่อย
+
+### ป้องกันปัญหา
+- อย่าให้ปั๊มแห้ง (ทำงานโดยไม่มีน้ำ)
+- ตรวจสอบรอยรั่วอย่างสม่ำเสมอ
+- ใช้ตัวกรองเพื่อป้องกันสิ่งสกปรก
+
+### เมื่อต้องเปลี่ยนปั๊ม
+- เลือกปั๊มที่มีคุณภาพ
+- พิจารณาขนาดและกำลังที่เหมาะสม
+- ติดตั้งโดยช่างผู้เชี่ยวชาญ
+
+## สรุป
+
+การบำรุงรักษาปั๊มน้ำอย่างสม่ำเสมอจะช่วยยืดอายุการใช้งาน ลดปัญหาการเสีย และประหยัดค่าใช้จ่ายในระยะยาว ควรตรวจสอบและบำรุงรักษาตามตารางที่กำหนด และหากพบปัญหาที่ไม่สามารถแก้ไขได้เอง ควรติดต่อช่างผู้เชี่ยวชาญ
+
+---
+
+**ต้องการซื้อปั๊มน้ำหรืออุปกรณ์เสริม?**
+ติดต่อเราได้ที่:
+- โทร: 090-555-1415
+- LINE: jppselection
+
+[ดูสินค้าปั๊มน้ำทั้งหมด](/ปั๊มน้ำ-pump)
--- a/dealplustech-astro/src/content/products/hdpe.md
+++ b/dealplustech-astro/src/content/products/hdpe.md
@@ -0,0 +1,190 @@
+---
+id: hdpe
+name: ท่อ HDPE
+nameEn: HDPE Pipe
+slug: ท่อhdpe
+description: 'ท่อ HDPE PE80/PE100 ทนแรงดัน PN25 อายุการใช้งาน 50 ปี มอก. สำหรับประปาและชลประทาน'
+shortDescription: 'ท่อเอชดีพีอี PE80/PE100 มาตรฐาน มอก.'
+image: /images/2021/03/hdpe-pipe_000C.jpg
+keywords:
+  - ท่อ HDPE
+  - ท่อเอชดีพีอี
+  - ท่อ PE
+  - ท่อน้ำ HDPE
+  - PE80
+  - PE100
+  - ท่อ PE100
+  - ท่อ PE80
+  - ท่อพีอี
+  - High Density Polyethylene
+  - ท่อชลประทาน
+  - ท่อประปา HDPE
+  - ท่อดำ PE
+  - ท่อน้ำดำ
+  - SDR pipe
+seoContent: 'ท่อ HDPE (High Density Polyethylene) หรือท่อเอชดีพีอี เป็นท่อพลาสติกคุณภาพสูงที่มีความทนทานและยืดหยุ่นสูง ผลิตจากเม็ดพลาสติก HDPE เกรด PE80 และ PE100 ท่อ HDPE สามารถทนแรงดันได้สูงถึง PN25 บาร์'
+specifications:
+  - label: วัสดุ
+    value: HDPE (High Density Polyethylene)
+  - label: เกรด
+    value: PE80, PE100
+  - label: มาตรฐาน
+    value: มอก. 827-2547, ISO 4427
+  - label: แรงดันทนทาน
+    value: PN4 - PN25
+    unit: bar
+  - label: SDR
+    value: SDR 9, 11, 13.6, 17, 21, 26
+  - label: อุณหภูมิทนทาน
+    value: '-40 ถึง 60'
+    unit: °C
+  - label: ขนาดท่อ
+    value: '20, 32, 50, 63, 75, 90, 110, 160, 200, 250, 315, 400, 500, 630'
+    unit: mm
+  - label: สี
+    value: ดำ, น้ำเงิน (Blue Stripe)
+  - label: ความหนาแน่น
+    value: '0.941-0.965'
+    unit: g/cm³
+  - label: อายุการใช้งาน
+    value: '50'
+    unit: ปี
+features:
+  - ทนแรงดันสูงถึง PN25 บาร์
+  - ทนทานต่อแรงกระแทกและการกัดกร่อน
+  - ยืดหยุ่นสูง ทนต่อการเคลื่อนไหวของดิน
+  - ไม่เกิดสนิม ไม่เปรอะเปื้อน
+  - น้ำหนักเบา ขนส่งและติดตั้งง่าย
+  - รอยต่อแน่นหนาด้วย Butt Fusion
+  - ทนทานต่อสารเคมีและกรดด่าง
+  - อายุการใช้งานยาวนาน 50 ปี
+  - ผ่านมาตรฐาน มอก. 827-2547
+  - เหมาะสำหรับงานฝังดิน
+applications:
+  - ระบบประปา
+  - ระบบชลประทาน
+  - ระบบน้ำเสีย
+  - ท่อส่งก๊าซ
+  - งานอุตสาหกรรม
+  - ท่อส่งสารเคมี
+  - ระบบระบายน้ำ
+  - งานเหมืองแร่
+certifications:
+  - มอก. 827-2547
+  - ISO 4427
+  - ISO 9001
+faq:
+  - question: ท่อ HDPE PE80 กับ PE100 ต่างกันอย่างไร?
+    answer: 'ท่อ HDPE PE100 มีความทนทานต่อแรงดันสูงกว่า PE80 โดย PE100 มี MRS (Minimum Required Strength) 10 MPa ส่วน PE80 มี MRS 8 MPa ทำให้ PE100 สามารถทนแรงดันสูงกว่าในขนาดผนังที่เท่ากัน'
+  - question: ท่อ HDPE มีอายุการใช้งานกี่ปี?
+    answer: ท่อ HDPE มีอายุการใช้งานยาวนานกว่า 50 ปี ภายใต้การใช้งานตามมาตรฐาน
+  - question: วิธีติดตั้งท่อ HDPE ทำอย่างไร?
+    answer: ท่อ HDPE ติดตั้งโดยใช้วิธี Butt Fusion (เชื่อมปลายต่อ) หรือ Electrofusion (เชื่อมด้วยไฟฟ้า) โดยใช้อุปกรณ์เชื่อมท่อ HDPE เฉพาะทาง
+  - question: SDR ในท่อ HDPE คืออะไร?
+    answer: 'SDR (Standard Dimension Ratio) คืออัตราส่วนระหว่างเส้นผ่านศูนย์กลางภายนอกกับความหนาผนังท่อ ค่า SDR ที่น้อยกว่าหมายถึงผนังท่อหนากว่า ทนแรงดันได้สูงกว่า'
+relatedProductIds:
+  - hdpe-welder
+  - ppr-elephant
+schemaData:
+  brand: Thai HDPE
+  material: High Density Polyethylene (HDPE)
+  category: Water Pipe - HDPE
+---
+
+# ท่อ HDPE (High Density Polyethylene)
+
+## ภาพรวม
+
+ท่อ HDPE (High Density Polyethylene) หรือ **ท่อเอชดีพีอี** เป็นท่อพลาสติกคุณภาพสูงที่มีความ **ทนทานและยืดหยุ่นสูง** ผลิตจากเม็ดพลาสติก HDPE เกรด **PE80 และ PE100**
+
+## คุณสมบัติเด่น
+
+ท่อ HDPE สามารถทนแรงดันได้สูงถึง **PN25 บาร์** ทนทานต่อแรงกระแทกและการกัดกร่อน ไม่เกิดสนิม อายุการใช้งานยาวนานกว่า **50 ปี**
+
+### ข้อดีของท่อ HDPE
+
+1. **ทนแรงดันสูง** - สูงถึง PN25 บาร์
+2. **ทนแรงกระแทก** - ยืดหยุ่นสูง ทนต่อการเคลื่อนไหวของดิน
+3. **ไม่เกิดสนิม** - ทนสารเคมีและกรดด่าง
+4. **น้ำหนักเบา** - ขนส่งและติดตั้งง่าย
+5. **รอยต่อแน่นหนา** - ระบบ Butt Fusion ไม่รั่วซึม
+6. **อายุการใช้งานยาว** - มากกว่า 50 ปี
+7. **มาตรฐาน มอก.** - รับรองคุณภาพ
+
+## การใช้งาน
+
+### เหมาะสำหรับ
+
+- **ระบบประปา** - งานผลิตน้ำประปา
+- **ระบบชลประทาน** - ส่งน้ำทางการเกษตร
+- **ระบบน้ำเสีย** - ท่อระบายน้ำ
+- **ท่อส่งก๊าซ** - ท่อส่งก๊าซธรรมชาติ
+- **งานอุตสาหกรรม** - ท่อส่งสารเคมี
+- **ระบบระบายน้ำ** - งานเทศบาลและเมือง
+
+## มาตรฐานและรับรอง
+
+ท่อ HDPE ผ่านมาตรฐาน:
+
+- ✅ **มอก. 827-2547** - มาตรฐานผลิตภัณฑ์อุตสาหกรรม
+- ✅ **ISO 4427** - มาตรฐานสากล
+- ✅ **ISO 9001** - ระบบบริหารคุณภาพ
+
+## เกรดของท่อ HDPE
+
+### PE80 vs PE100
+
+| คุณสมบัติ | PE80 | PE100 |
+|-----------|------|-------|
+| **MRS** | 8 MPa | 10 MPa |
+| **ทนแรงดัน** | สูง | สูงกว่า |
+| **ราคา** | ประหยัด | สูงกว่า |
+| **การใช้งาน** | ทั่วไป | แรงดันสูง |
+
+## SDR (Standard Dimension Ratio)
+
+**SDR** คืออัตราส่วนระหว่างเส้นผ่านศูนย์กลางภายนอกกับความหนาผนังท่อ
+
+- **SDR น้อย** = ผนังหนา = ทนแรงดันสูง
+- **SDR มาก** = ผนังบาง = ทนแรงดันต่ำ
+
+ตัวอย่าง:
+- SDR 9 = ทนแรงดันสูงสุด
+- SDR 11 = ทนแรงดันสูง
+- SDR 17 = ทนแรงดันปานกลาง
+- SDR 26 = ทนแรงดันต่ำ
+
+## การติดตั้ง
+
+### วิธี Butt Fusion
+- เหมาะสำหรับท่อ **63-1200 mm**
+- ใช้ความร้อนหลอมปลายท่อ
+- กดต่อกันจนเป็นชิ้นเดียว
+
+### วิธี Electrofusion
+- เหมาะสำหรับท่อ **20-630 mm**
+- ใช้ข้อต่อที่มีขดลวดความร้อน
+- สะดวกในพื้นที่จำกัด
+
+## คำถามที่พบบ่อย
+
+### ท่อ HDPE PE80 กับ PE100 ต่างกันอย่างไร?
+
+ท่อ HDPE PE100 มีความทนทานต่อแรงดันสูงกว่า PE80 โดย PE100 มี MRS (Minimum Required Strength) 10 MPa ส่วน PE80 มี MRS 8 MPa
+
+### ท่อ HDPE มีอายุการใช้งานกี่ปี?
+
+ท่อ HDPE มีอายุการใช้งานยาวนานกว่า **50 ปี** ภายใต้การใช้งานตามมาตรฐาน
+
+### วิธีติดตั้งท่อ HDPE ทำอย่างไร?
+
+ท่อ HDPE ติดตั้งโดยใช้วิธี **Butt Fusion** (เชื่อมปลายต่อ) หรือ **Electrofusion** (เชื่อมด้วยไฟฟ้า)
+
+### SDR ในท่อ HDPE คืออะไร?
+
+SDR (Standard Dimension Ratio) คืออัตราส่วนระหว่างเส้นผ่านศูนย์กลางภายนอกกับความหนาผนังท่อ ค่า SDR ที่น้อยกว่าหมายถึงผนังท่อหนากว่า
+
+## สินค้าที่เกี่ยวข้อง
+
+- [เครื่องเชื่อม HDPE](/เครื่องเชื่อม-hdpe/)
+- [ท่อพีพีอาร์ตราช้าง](/ท่อพีพีอาร์ตราช้าง/)
--- a/dealplustech-astro/src/content/products/poloplast.md
+++ b/dealplustech-astro/src/content/products/poloplast.md
@@ -0,0 +1,154 @@
+---
+id: poloplast
+name: ท่อ PP-R/PP-RCT POLOPLAST
+nameEn: POLOPLAST PP-R Pipe
+slug: pp-r-pp-rct-poloplast
+description: 'ท่อพีพีอาร์ POLOPLAST จากเยอรมนี มาตรฐาน DVGW และ SKZ ทนอุณหภูมิ 95°C รับประกัน 10 ปี'
+shortDescription: 'ท่อ PP-R/PP-RCT POLOPLAST คุณภาพเยอรมัน'
+image: /images/2021/03/poloplast_000C.jpg
+keywords:
+  - POLOPLAST
+  - ท่อเยอรมัน
+  - PP-RCT
+  - ท่อพีพีอาร์เกรดสูง
+  - ท่อ POLOPLAST
+  - ท่อ PP-R เยอรมัน
+  - ท่อน้ำร้อนเยอรมัน
+  - DVGW
+  - SKZ
+  - ท่อ PP-RCT
+  - Poloplast Thailand
+seoContent: 'ท่อพีพีอาร์ POLOPLAST เป็นผลิตภัณฑ์ระดับพรีเมียมจากเยอรมนี มีทั้งรุ่น PP-R และ PP-RCT ที่ได้รับการพัฒนาด้วยเทคโนโลยีล้ำสมัย ท่อ POLOPLAST ผ่านมาตรฐาน DVGW และ SKZ ระดับสากล มีความทนทานสูงสุด ทนอุณหภูมิได้ถึง 95°C และทนแรงดันสูง รับประกันคุณภาพ 10 ปี'
+specifications:
+  - label: วัสดุ
+    value: PP-R / PP-RCT (Polypropylene Random Copolymer)
+  - label: มาตรฐาน
+    value: DIN 8077/8078, ISO 15874, DVGW, SKZ
+  - label: แรงดันทนทาน
+    value: 'PN10, PN16, PN20, PN25'
+    unit: bar
+  - label: อุณหภูมิทนทาน
+    value: '-20 ถึง 95'
+    unit: °C
+  - label: ขนาดท่อ
+    value: '20, 25, 32, 40, 50, 63, 75, 90, 110, 125, 160'
+    unit: mm
+  - label: ค่าสัมประสิทธิ์การนำความร้อน
+    value: '0.15'
+    unit: W/mK
+  - label: สี
+    value: ขาว, เขียว, ส้ม
+  - label: อายุการใช้งาน
+    value: '50'
+    unit: ปี
+  - label: รับประกัน
+    value: '10'
+    unit: ปี
+features:
+  - ผลิตในเยอรมนี คุณภาพระดับพรีเมียม
+  - มาตรฐาน DVGW และ SKZ ระดับสากล
+  - ทนอุณหภูมิสูงสุด 95°C
+  - ทนแรงดันสูงถึง PN25
+  - ค่านำความร้อนต่ำ 0.15 W/mK
+  - ฉนวนความร้อนยอดเยี่ยม
+  - ไม่เกิดสนิมและการกัดกร่อน
+  - อายุการใช้งาน 50 ปี
+  - รับประกัน 10 ปี
+  - เหมาะสำหรับงานที่ต้องการคุณภาพสูงสุด
+applications:
+  - ระบบประปาน้ำร้อนอุณหภูมิสูง
+  - ระบบทำความร้อน (Heating)
+  - ระบบแอร์แช่ (Chilled Water)
+  - โรงแรม 5 ดาว
+  - โรงพยาบาลและศูนย์การแพทย์
+  - โครงการระดับพรีเมียม
+  - โรงงานอุตสาหกรรม
+certifications:
+  - DIN 8077/8078
+  - ISO 15874
+  - DVGW
+  - SKZ
+  - Hygienic Certificate
+faq:
+  - question: ท่อ POLOPLAST กับท่อ PPR ทั่วไปต่างกันอย่างไร?
+    answer: ท่อ POLOPLAST ผลิตในเยอรมนี มีมาตรฐาน DVGW และ SKZ ทนแรงดันสูงถึง PN25 มีค่านำความร้อนต่ำกว่า และรับประกัน 10 ปี ซึ่งดีกว่าท่อ PPR ทั่วไป
+  - question: PP-RCT คืออะไร?
+    answer: 'PP-RCT (Polypropylene Random Copolymer with modified Crystallinity and Temperature resistance) เป็นวัสดุพัฒนาต่อจาก PP-R มีความทนทานต่อแรงดันและอุณหภูมิสูงกว่า สามารถทนแรงดันได้สูงถึง PN25'
+  - question: ท่อ POLOPLAST รับประกันกี่ปี?
+    answer: ท่อ POLOPLAST มีการรับประกันคุณภาพ 10 ปี สะท้อนถึงความมั่นใจในคุณภาพของผลิตภัณฑ์
+relatedProductIds:
+  - ppr-elephant
+  - thai-ppr
+  - ppr-welder
+schemaData:
+  brand: POLOPLAST
+  manufacturer: POLOPLAST GmbH (Germany)
+  material: PP-R / PP-RCT
+  category: Plumbing Pipe - Premium PPR
+---
+
+# ท่อ PP-R/PP-RCT POLOPLAST
+
+## ภาพรวม
+
+ท่อพีพีอาร์ **POLOPLAST** เป็นผลิตภัณฑ์ **ระดับพรีเมียมจากเยอรมนี** มีทั้งรุ่น PP-R และ PP-RCT ที่ได้รับการพัฒนาด้วยเทคโนโลยีล้ำสมัย ท่อ POLOPLAST ผ่านมาตรฐาน DVGW และ SKZ ระดับสากล
+
+## คุณสมบัติเด่น
+
+มีความทนทานสูงสุด **ทนอุณหภูมิได้ถึง 95°C** และ **ทนแรงดันสูงถึง PN25** รับประกันคุณภาพ **10 ปี**
+
+### ข้อดีของท่อ POLOPLAST
+
+1. **ผลิตในเยอรมนี** - คุณภาพระดับพรีเมียม
+2. **มาตรฐานสูงสุด** - DVGW และ SKZ
+3. **ทนแรงดัน PN25** - สูงที่สุดในตลาด
+4. **ฉนวนความร้อนดีเยี่ยม** - ค่าการนำความร้อน 0.15 W/mK
+5. **ทนอุณหภูมิ 95°C** - เหมาะกับน้ำร้อนอุณหภูมิสูง
+6. **รับประกัน 10 ปี** - มั่นใจในคุณภาพ
+7. **อายุการใช้งาน 50 ปี** - ลงทุนครั้งเดียว
+
+## การใช้งาน
+
+### เหมาะสำหรับ
+
+- ระบบประปาน้ำร้อนอุณหภูมิสูง
+- ระบบทำความร้อน (Heating)
+- ระบบแอร์แช่ (Chilled Water)
+- **โรงแรม 5 ดาว**
+- **โรงพยาบาลและศูนย์การแพทย์**
+- **โครงการระดับพรีเมียม**
+- โรงงานอุตสาหกรรม
+
+## มาตรฐานและรับรอง
+
+ท่อ POLOPLAST ได้รับมาตรฐานสากล:
+
+- ✅ **DIN 8077/8078** - มาตรฐานเยอรมัน
+- ✅ **ISO 15874** - มาตรฐานสากล
+- ✅ **DVGW** - สมาคมเทคนิคและวิทยาศาสตร์ก๊าซและน้ำเยอรมัน
+- ✅ **SKZ** - ศูนย์เซาท์เยอรมันพลาสติก
+- ✅ **Hygienic Certificate** - รับรองความปลอดภัยน้ำดื่ม
+
+## PP-RCT Technology
+
+**PP-RCT** (Polypropylene Random Copolymer with modified Crystallinity and Temperature resistance) เป็นวัสดุพัฒนาต่อจาก PP-R มีความทนทานต่อแรงดันและอุณหภูมิสูงกว่า สามารถทนแรงดันได้สูงถึง **PN25**
+
+## คำถามที่พบบ่อย
+
+### ท่อ POLOPLAST กับท่อ PPR ทั่วไปต่างกันอย่างไร?
+
+ท่อ POLOPLAST ผลิตในเยอรมนี มีมาตรฐาน DVGW และ SKZ ทนแรงดันสูงถึง PN25 มีค่านำความร้อนต่ำกว่า และรับประกัน 10 ปี ซึ่งดีกว่าท่อ PPR ทั่วไป
+
+### PP-RCT คืออะไร?
+
+PP-RCT (Polypropylene Random Copolymer with modified Crystallinity and Temperature resistance) เป็นวัสดุพัฒนาต่อจาก PP-R มีความทนทานต่อแรงดันและอุณหภูมิสูงกว่า สามารถทนแรงดันได้สูงถึง PN25
+
+### ท่อ POLOPLAST รับประกันกี่ปี?
+
+ท่อ POLOPLAST มีการรับประกันคุณภาพ **10 ปี** สะท้อนถึงความมั่นใจในคุณภาพของผลิตภัณฑ์
+
+## สินค้าที่เกี่ยวข้อง
+
+- [ท่อพีพีอาร์ตราช้าง](/ท่อพีพีอาร์ตราช้าง/)
+- [ท่อ PPR Thai PPR](/ท่อppr-thaippr/)
+- [เครื่องเชื่อมท่อพีพีอาร์](/เครื่องเชื่อมท่อพีพีอาร์/)
--- a/dealplustech-astro/src/content/products/ppr-elephant.md
+++ b/dealplustech-astro/src/content/products/ppr-elephant.md
@@ -0,0 +1,160 @@
+---
+id: ppr-elephant
+name: ท่อพีพีอาร์ตราช้าง
+nameEn: PPR Elephant Pipe
+slug: ท่อพีพีอาร์ตราช้าง
+description: 'ท่อพีพีอาร์ตราช้าง (SCG) คุณภาพระดับสากล ทนอุณหภูมิสูง 95°C ทนความดัน 20 บาร์ อายุการใช้งาน 50 ปี'
+shortDescription: 'ท่อพีพีอาร์ตราช้าง SCG มาตรฐาน DIN 8077/8078'
+image: /images/2021/03/ppr-pipe_000C.jpg
+seoContent: 'ท่อพีพีอาร์ตราช้าง (PPR Elephant) ผลิตโดย SCG บริษัทชั้นนำของไทย เป็นท่อพลาสติกประเภท Polypropylene Random Copolymer (PP-R) ที่มีคุณภาพสูง ได้รับมาตรฐาน DIN 8077/8078 จากเยอรมนี และมาตรฐาน ISO 15874 ระดับสากล'
+keywords:
+  - ท่อ PPR
+  - ท่อพีพีอาร์
+  - ท่อน้ำ PPR
+  - ท่อประปา PPR
+  - ราคาท่อ PPR
+  - ท่อตราช้าง
+  - SCG PPR
+  - ท่อ PPR SCG
+specifications:
+  - label: วัสดุ
+    value: PP-R (Polypropylene Random Copolymer)
+  - label: มาตรฐาน
+    value: DIN 8077/8078, ISO 15874
+  - label: แรงดันทนทาน
+    value: 'PN10, PN16, PN20'
+    unit: bar
+  - label: อุณหภูมิทนทาน
+    value: '-20 ถึง 95'
+    unit: °C
+  - label: ขนาดท่อ
+    value: '20, 25, 32, 40, 50, 63, 75, 90, 110'
+    unit: mm
+  - label: ความหนาผนัง
+    value: SDR 7.4, 11, 17.6
+  - label: สี
+    value: ขาว, เขียว
+  - label: อายุการใช้งาน
+    value: '50'
+    unit: ปี
+features:
+  - ทนอุณหภูมิสูงสุด 95°C เหมาะกับน้ำร้อน
+  - ทนความดัน PN20 (20 บาร์)
+  - ไม่เกิดสนิมและการกัดกร่อน
+  - ผิวภายในเรียบลดการสะสมของตะกรัน
+  - ติดตั้งด้วยการเชื่อมความร้อน ไม่ต้องใช้กาว
+  - ปลอดภัยสำหรับน้ำดื่ม ไม่ปนเปื้อนสารพิษ
+  - ฉนวนความร้อนดี ลดการสูญเสียความร้อน
+  - อายุการใช้งานยาวนาน 50 ปี
+  - บำรุงรักษาต่ำ ไม่ต้องทาสี
+  - น้ำหนักเบา ติดตั้งง่าย
+applications:
+  - ระบบประปาน้ำร้อน
+  - ระบบประปาน้ำเย็น
+  - ระบบทำความร้อน (Heating)
+  - ระบบน้ำแรงดันสูง
+  - โรงแรมและรีสอร์ท
+  - โรงพยาบาลและสถานพยาบาล
+  - อาคารพาณิชย์และสำนักงาน
+  - โครงการบ้านจัดสรร
+  - โรงงานอุตสาหกรรม
+certifications:
+  - DIN 8077/8078
+  - ISO 15874
+  - มอก. 248-2549
+  - SCG Quality Certified
+faq:
+  - question: ท่อ PPR ตราช้างทนอุณหภูมิสูงสุดเท่าไร?
+    answer: ท่อ PPR ตราช้างทนอุณหภูมิสูงสุด 95°C ทำให้เหมาะสำหรับใช้กับระบบน้ำร้อนและระบบทำความร้อน
+  - question: ท่อ PPR ตราช้างอายุการใช้งานกี่ปี?
+    answer: ท่อ PPR ตราช้างมีอายุการใช้งานยาวนานถึง 50 ปี ภายใต้การใช้งานตามมาตรฐาน
+  - question: ท่อ PPR แตกต่างจากท่อ PVC อย่างไร?
+    answer: ท่อ PPR ทนอุณหภูมิสูงกว่า (95°C vs 60°C) ทนแรงดันสูงกว่า ติดตั้งด้วยการเชื่อมความร้อนไม่ต้องใช้กาว และมีอายุการใช้งานยาวนานกว่า
+  - question: วิธีติดตั้งท่อ PPR ตราช้างทำอย่างไร?
+    answer: ติดตั้งโดยใช้เครื่องเชื่อมท่อ PPR อุณหภูมิ 260°C โดยเชื่อมท่อกับข้อต่อด้วยความร้อนจนกลายเป็นชิ้นเดียวกัน
+  - question: ท่อ PPR ตราช้างใช้กับน้ำดื่มได้หรือไม่?
+    answer: ได้ ท่อ PPR ตราช้างได้รับมาตรฐานสำหรับน้ำดื่ม ไม่ปล่อยสารพิษ และไม่เปลี่ยนแปลงรสชาติน้ำ
+relatedProductIds:
+  - thai-ppr
+  - poloplast
+  - ppr-welder
+schemaData:
+  brand: SCG Elephant
+  manufacturer: SCG Chemicals
+  material: Polypropylene Random Copolymer (PP-R)
+  category: Plumbing Pipe - PPR
+---
+
+# ท่อพีพีอาร์ตราช้าง (PPR Elephant Pipe)
+
+## ภาพรวม
+
+ท่อพีพีอาร์ตราช้าง (PPR Elephant) ผลิตโดย SCG บริษัทชั้นนำของไทย เป็นท่อพลาสติกประเภท **Polypropylene Random Copolymer (PP-R)** ที่มีคุณภาพสูง ได้รับมาตรฐาน DIN 8077/8078 จากเยอรมนี และมาตรฐาน ISO 15874 ระดับสากล
+
+## คุณสมบัติเด่น
+
+ท่อ PPR ตราช้างมีความทนทานต่ออุณหภูมิสูงสุด **95°C** และทนความดันได้ถึง **20 บาร์ (PN20)** เหมาะสำหรับงานระบบประปาน้ำร้อน น้ำเย็น และระบบทำความร้อน
+
+### ข้อดีของท่อ PPR ตราช้าง
+
+1. **ทนความร้อนสูง** - ใช้งานกับน้ำร้อนได้ถึง 95°C
+2. **ทนแรงดัน** - รับแรงดันได้สูงสุด 20 บาร์
+3. **ไม่เกิดสนิม** - ไม่มีการกัดกร่อนจากสารเคมี
+4. **ผิวเรียบ** - ลดการสะสมของตะกรันในท่อ
+5. **ติดตั้งง่าย** - เชื่อมด้วยความร้อน ไม่ต้องใช้กาว
+6. **ปลอดภัย** - ใช้กับน้ำดื่มได้ ไม่ปนเปื้อนสารพิษ
+7. **อายุยาวนาน** - ใช้งานได้นาน 50 ปี
+
+## การใช้งาน
+
+### เหมาะสำหรัก
+
+- ระบบประปาน้ำร้อนในโรงแรมและรีสอร์ท
+- ระบบน้ำเย็นในอาคารพาณิชย์
+- ระบบทำความร้อน (Heating System)
+- ระบบน้ำแรงดันสูงในโรงงาน
+- โรงพยาบาลและสถานพยาบาล
+- โครงการบ้านจัดสรร
+
+## มาตรฐานและรับรอง
+
+ท่อพีพีอาร์ตราช้างได้รับมาตรฐานสากล:
+
+- ✅ **DIN 8077/8078** - มาตรฐานเยอรมัน
+- ✅ **ISO 15874** - มาตรฐานสากล
+- ✅ **มอก. 248-2549** - มาตรฐานผลิตภัณฑ์อุตสาหกรรมไทย
+- ✅ **SCG Quality Certified** - รับรองคุณภาพโดย SCG
+
+## วิธีการติดตั้ง
+
+การติดตั้งท่อ PPR ตราช้างใช้ระบบ **เชื่อมความร้อน (Heat Fusion)**:
+
+1. ตั้งเครื่องเชื่อมที่อุณหภูมิ **260°C**
+2. เสียบท่อและข้อต่อเข้าในแม่พิมพ์
+3. รอให้พลาสติกหลอมตัว (เวลาตามขนาดท่อ)
+4. ดึงออกและเชื่อมท่อกับข้อต่อทันที
+5. รอให้เย็นตัว (ประมาณ 2-3 นาที)
+
+## คำถามที่พบบ่อย
+
+### ท่อ PPR ตราช้างทนอุณหภูมิสูงสุดเท่าไร?
+
+ท่อ PPR ตราช้างทนอุณหภูมิสูงสุด **95°C** ทำให้เหมาะสำหรับใช้กับระบบน้ำร้อนและระบบทำความร้อน
+
+### ท่อ PPR ตราช้างอายุการใช้งานกี่ปี?
+
+ท่อ PPR ตราช้างมีอายุการใช้งานยาวนานถึง **50 ปี** ภายใต้การใช้งานตามมาตรฐาน
+
+### ท่อ PPR แตกต่างจากท่อ PVC อย่างไร?
+
+ท่อ PPR ทนอุณหภูมิสูงกว่า (95°C vs 60°C) ทนแรงดันสูงกว่า ติดตั้งด้วยการเชื่อมความร้อนไม่ต้องใช้กาว และมีอายุการใช้งานยาวนานกว่า
+
+### ท่อ PPR ตราช้างใช้กับน้ำดื่มได้หรือไม่?
+
+**ได้** ท่อ PPR ตราช้างได้รับมาตรฐานสำหรับน้ำดื่ม ไม่ปล่อยสารพิษ และไม่เปลี่ยนแปลงรสชาติน้ำ
+
+## สินค้าที่เกี่ยวข้อง
+
+- [ท่อ PPR Thai PPR](/ท่อppr-thaippr/)
+- [ท่อ PP-R/PP-RCT POLOPLAST](/pp-r-pp-rct-poloplast/)
+- [เครื่องเชื่อมท่อพีพีอาร์](/เครื่องเชื่อมท่อพีพีอาร์/)
--- a/dealplustech-astro/src/content/products/syler.md
+++ b/dealplustech-astro/src/content/products/syler.md
@@ -0,0 +1,130 @@
+---
+id: syler
+name: ท่อไซเลอร์
+nameEn: Syler Pipe
+slug: ท่อไซเลอร์
+description: 'ท่อไซเลอร์ ท่อเหล็กบุ PE ทนแรงดัน 50 bar มาตรฐาน BS1387 FM APPROVED สำหรับระบบดับเพลิง'
+shortDescription: 'ท่อเหล็กบุ PE BS1387 FM APPROVED'
+image: /images/2021/03/syler_000C.jpg
+keywords:
+  - ท่อไซเลอร์
+  - Syler Pipe
+  - ท่อเหล็กบุ PE
+  - FM APPROVED
+  - ท่อดับเพลิง
+  - ท่อสปริงเกลอร์
+  - BS1387
+  - ท่อเหล็กชุบ PE
+  - fire protection pipe
+  - ท่อน้ำดับเพลิง
+seoContent: 'ท่อไซเลอร์ (Syler Pipe) เป็นท่อเหล็กบุ PE (Polyethylene) ที่ออกแบบมาเฉพาะสำหรับระบบดับเพลิงและสปริงเกลอร์ ท่อมีความทนทานสูง ทนแรงดันได้ถึง 50 บาร์ ผ่านมาตรฐาน BS1387 จากอังกฤษและ FM APPROVED จาก Factory Mutual'
+specifications:
+  - label: วัสดุ
+    value: เหล็กบุ PE (Steel with PE lining)
+  - label: มาตรฐาน
+    value: BS1387, FM APPROVED
+  - label: แรงดันทนทาน
+    value: '50'
+    unit: bar
+  - label: ขนาดท่อ
+    value: '25, 32, 40, 50, 65, 80, 100, 150, 200'
+    unit: mm
+  - label: ความหนาผนัง
+    value: Schedule 40, 80
+  - label: ความยาว
+    value: '6'
+    unit: เมตร
+  - label: สี
+    value: แดง (Red) - Fire Protection
+features:
+  - ทนแรงดันสูง 50 บาร์
+  - ผ่านมาตรฐาน BS1387 และ FM APPROVED
+  - บุ PE ป้องกันสนิมและการกัดกร่อน
+  - อายุการใช้งานยาวนาน
+  - เหมาะสำหรับระบบดับเพลิง
+  - ติดตั้งด้วย Groove Coupling
+  - ทนทานต่อความร้อน
+applications:
+  - ระบบสปริงเกลอร์
+  - ระบบดับเพลิง
+  - โรงงานอุตสาหกรรม
+  - อาคารพาณิชย์สูง
+  - โรงแรมและโรงพยาบาล
+certifications:
+  - BS1387
+  - FM APPROVED
+  - UL Listed
+faq:
+  - question: ท่อไซเลอร์เหมาะกับงานอะไร?
+    answer: ท่อไซเลอร์ออกแบบมาเฉพาะสำหรับระบบดับเพลิงและสปริงเกลอร์ ผ่านมาตรฐาน FM APPROVED จึงมั่นใจได้ในความปลอดภัย
+  - question: ท่อไซเลอร์ต่างจากท่อเหล็กทั่วไปอย่างไร?
+    answer: ท่อไซเลอร์มีการบุ PE ภายในท่อ ป้องกันการเกิดสนิมและการกัดกร่อน ทำให้มีอายุการใช้งานยาวนานกว่าท่อเหล็กทั่วไป
+relatedProductIds:
+  - realflex
+  - groove-coupling
+schemaData:
+  brand: Syler
+  material: Steel with PE Lining
+  category: Fire Protection Pipe
+---
+
+# ท่อไซเลอร์ (Syler Pipe)
+
+## ภาพรวม
+
+ท่อไซเลอร์ (**Syler Pipe**) เป็นท่อเหล็กบุ PE (Polyethylene) ที่ออกแบบมาเฉพาะสำหรับ **ระบบดับเพลิงและสปริงเกลอร์** ท่อมีความทนทานสูง ทนแรงดันได้ถึง **50 บาร์**
+
+## คุณสมบัติเด่น
+
+ผ่านมาตรฐาน **BS1387** จากอังกฤษและ **FM APPROVED** จาก Factory Mutual ท่อไซเลอร์มีการบุ PE ภายในเพื่อป้องกันการกัดกร่อนและสนิม
+
+### ข้อดีของท่อไซเลอร์
+
+1. **ทนแรงดันสูง** - สูงถึง 50 บาร์
+2. **มาตรฐานสากล** - BS1387, FM APPROVED, UL Listed
+3. **บุ PE** - ป้องกันสนิมและการกัดกร่อน
+4. **เหมาะสำหรับดับเพลิง** - ออกแบบมาเฉพาะงานนี้
+5. **ติดตั้งง่าย** - ใช้ Groove Coupling
+6. **ทนความร้อน** - เหมาะกับระบบสปริงเกลอร์
+7. **อายุการใช้งานยาว** - ทนทานในระยะยาว
+
+## การใช้งาน
+
+### เหมาะสำหรับ
+
+- **ระบบสปริงเกลอร์** - งานดับเพลิงอัตโนมัติ
+- **ระบบดับเพลิง** - งานป้องกันอัคคีภัย
+- **โรงงานอุตสาหกรรม** - ระบบความปลอดภัย
+- **อาคารพาณิชย์สูง** - อาคารสูง คอนโด
+- **โรงแรมและโรงพยาบาล** - สถานที่สาธารณะ
+
+## มาตรฐานและรับรอง
+
+ท่อไซเลอร์ผ่านมาตรฐาน:
+
+- ✅ **BS1387** - มาตรฐานอังกฤษสำหรับท่อเหล็ก
+- ✅ **FM APPROVED** - Factory Mutual รับรองสำหรับระบบดับเพลิง
+- ✅ **UL Listed** - รับรองความปลอดภัย
+
+## การติดตั้ง
+
+ท่อไซเลอร์ติดตั้งโดยใช้ **Groove Coupling** ซึ่งเป็นระบบต่อท่อที่:
+- ติดตั้งรวดเร็ว
+- ไม่ต้องใช้เครื่องเชื่อม
+- รองรับแรงดันสูง
+- ถอดประกอบได้สะดวก
+
+## คำถามที่พบบ่อย
+
+### ท่อไซเลอร์เหมาะกับงานอะไร?
+
+ท่อไซเลอร์ออกแบบมาเฉพาะสำหรับ **ระบบดับเพลิงและสปริงเกลอร์** ผ่านมาตรฐาน FM APPROVED จึงมั่นใจได้ในความปลอดภัย
+
+### ท่อไซเลอร์ต่างจากท่อเหล็กทั่วไปอย่างไร?
+
+ท่อไซเลอร์มีการ **บุ PE ภายในท่อ** ป้องกันการเกิดสนิมและการกัดกร่อน ทำให้มีอายุการใช้งานยาวนานกว่าท่อเหล็กทั่วไป
+
+## สินค้าที่เกี่ยวข้อง
+
+- [Realflex](/realflex/)
+- [ท่อและข้อต่อ Groove](/อุปกรณ์ท่อกรูฟ/)
--- a/dealplustech-astro/src/content/products/thai-ppr.md
+++ b/dealplustech-astro/src/content/products/thai-ppr.md
@@ -0,0 +1,121 @@
+---
+id: thai-ppr
+name: ท่อ PPR Thai PPR
+nameEn: Thai PPR Pipe
+slug: ท่อppr-thaippr
+description: 'ท่อ PPR Thai PPR คุณภาพสูง มาตรฐาน มอก. เหมาะสำหรับงานประปาและระบบน้ำ'
+shortDescription: 'ท่อ PPR Thai PPR มาตรฐาน มอก.'
+image: /images/2021/03/ppr-pipe_000C.jpg
+keywords:
+  - ท่อ PPR
+  - Thai PPR
+  - ท่อพีพีอาร์ไทย
+  - ท่อ PPR ไทย
+  - ท่อน้ำ PPR
+  - ท่อประปา PPR
+  - ราคาท่อ PPR ไทย
+  - ท่อพีพีอาร์มาตรฐาน มอก.
+  - ท่อ PPR ราคาถูก
+seoContent: 'ท่อ PPR Thai PPR เป็นท่อพลาสติกพีพีอาร์ผลิตในประเทศไทย ผ่านมาตรฐาน มอก. สำหรับใช้ในงานระบบประปาและระบบน้ำ ท่อ Thai PPR มีคุณสมบัติทนทานต่อความร้อนและความดัน เหมาะสำหรับงานประปาน้ำเย็นและน้ำร้อน ด้วยราคาที่เป็นมิตรกับงบประมาณ ท่อ PPR Thai PPR เป็นทางเลือกที่คุ้มค่าสำหรับโครงการก่อสร้างทุกขนาด'
+specifications:
+  - label: วัสดุ
+    value: PP-R (Polypropylene Random Copolymer)
+  - label: มาตรฐาน
+    value: มอก. 248-2549
+  - label: แรงดันทนทาน
+    value: 'PN10, PN16, PN20'
+    unit: bar
+  - label: อุณหภูมิทนทาน
+    value: '0-70'
+    unit: °C
+  - label: ขนาดท่อ
+    value: '20, 25, 32, 40, 50, 63, 75, 90, 110'
+    unit: mm
+  - label: สี
+    value: ขาว, เขียว, เทา
+  - label: อายุการใช้งาน
+    value: '30-50'
+    unit: ปี
+features:
+  - ผลิตในประเทศไทย ราคาประหยัด
+  - ผ่านมาตรฐาน มอก. สามารถตรวจสอบได้
+  - ทนอุณหภูมิสูงสุด 70°C
+  - ไม่เกิดสนิมและการกัดกร่อน
+  - ติดตั้งด้วยการเชื่อมความร้อน
+  - ปลอดภัยสำหรับน้ำดื่ม
+  - น้ำหนักเบา ขนส่งง่าย
+applications:
+  - ระบบประปาภายในอาคาร
+  - ระบบน้ำเย็น
+  - งานก่อสร้างที่อยู่อาศัย
+  - โครงการจัดสรร
+  - งานประปาขนาดเล็กและกลาง
+certifications:
+  - มอก. 248-2549
+faq:
+  - question: ท่อ Thai PPR ต่างจากท่อ PPR ตราช้างอย่างไร?
+    answer: ท่อ Thai PPR เป็นผลิตภัณฑ์ที่ผลิตในประเทศไทย ราคาประหยัดกว่า ในขณะที่ท่อ PPR ตราช้างเป็นผลิตภัณฑ์จาก SCG มีมาตรฐานสากลที่หลากหลายกว่า
+  - question: ท่อ Thai PPR รับประกันคุณภาพหรือไม่?
+    answer: ได้ ท่อ Thai PPR ผ่านมาตรฐาน มอก. 248-2549 สามารถตรวจสอบคุณภาพได้
+relatedProductIds:
+  - ppr-elephant
+  - poloplast
+  - ppr-welder
+schemaData:
+  brand: Thai PPR
+  manufacturer: Thai PPR
+  material: Polypropylene Random Copolymer (PP-R)
+  category: Plumbing Pipe - PPR
+---
+
+# ท่อ PPR Thai PPR
+
+## ภาพรวม
+
+ท่อ PPR Thai PPR เป็นท่อพลาสติกพีพีอาร์ **ผลิตในประเทศไทย** ผ่านมาตรฐาน มอก. สำหรับใช้ในงานระบบประปาและระบบน้ำ ท่อ Thai PPR มีคุณสมบัติทนทานต่อความร้อนและความดัน เหมาะสำหรับงานประปาน้ำเย็นและน้ำร้อน
+
+## คุณสมบัติเด่น
+
+ด้วยราคาที่เป็นมิตรกับงบประมาณ ท่อ PPR Thai PPR เป็นทางเลือกที่คุ้มค่าสำหรับโครงการก่อสร้างทุกขนาด
+
+### ข้อดีของท่อ Thai PPR
+
+1. **ผลิตในไทย** - ราคาประหยัด สนับสนุนสินค้าไทย
+2. **มาตรฐาน มอก.** - รับรองคุณภาพ ตรวจสอบได้
+3. **ทนความร้อน** - ใช้งานได้สูงถึง 70°C
+4. **ไม่เกิดสนิม** - ไม่มีการกัดกร่อนจากสารเคมี
+5. **ติดตั้งง่าย** - เชื่อมด้วยความร้อน ไม่ต้องใช้กาว
+6. **ปลอดภัย** - ใช้กับน้ำดื่มได้
+7. **น้ำหนักเบา** - ขนส่งและติดตั้งสะดวก
+
+## การใช้งาน
+
+### เหมาะสำหรับ
+
+- ระบบประปาภายในอาคาร
+- ระบบน้ำเย็น
+- งานก่อสร้างที่อยู่อาศัย
+- โครงการจัดสรร
+- งานประปาขนาดเล็กและกลาง
+
+## มาตรฐานและรับรอง
+
+ท่อ PPR Thai PPR ผ่านมาตรฐาน:
+
+- ✅ **มอก. 248-2549** - มาตรฐานผลิตภัณฑ์อุตสาหกรรม
+
+## คำถามที่พบบ่อย
+
+### ท่อ Thai PPR ต่างจากท่อ PPR ตราช้างอย่างไร?
+
+ท่อ Thai PPR เป็นผลิตภัณฑ์ที่ผลิตในประเทศไทย ราคาประหยัดกว่า ในขณะที่ท่อ PPR ตราช้างเป็นผลิตภัณฑ์จาก SCG มีมาตรฐานสากลที่หลากหลายกว่า
+
+### ท่อ Thai PPR รับประกันคุณภาพหรือไม่?
+
+ได้ ท่อ Thai PPR ผ่านมาตรฐาน มอก. 248-2549 สามารถตรวจสอบคุณภาพได้
+
+## สินค้าที่เกี่ยวข้อง
+
+- [ท่อพีพีอาร์ตราช้าง](/ท่อพีพีอาร์ตราช้าง/)
+- [ท่อ PP-R/PP-RCT POLOPLAST](/pp-r-pp-rct-poloplast/)
+- [เครื่องเชื่อมท่อพีพีอาร์](/เครื่องเชื่อมท่อพีพีอาร์/)
--- a/dealplustech-astro/src/content/products/xylent.md
+++ b/dealplustech-astro/src/content/products/xylent.md
@@ -0,0 +1,146 @@
+---
+id: xylent
+name: ท่อระบายน้ำ 3 ชั้น ไซเลนท์
+nameEn: XYLENT Silent Pipe
+slug: ท่อระบายน้ำ-3-ชั้น-ไซเลนท
+description: 'ท่อระบายน้ำ XYLENT 3 ชั้น ลดเสียง 22dB ระบบ Push Fit ติดตั้งง่าย จาก Poloplast ยุโรป'
+shortDescription: 'ท่อระบายน้ำไซเลนท์ 22dB Push Fit'
+image: /images/2021/03/xylent_000C.jpg
+keywords:
+  - ท่อ XYLENT
+  - 22 dB
+  - ท่อระบายน้ำ 3 ชั้น
+  - ท่อไซเลนท์
+  - silent pipe
+  - ท่อลดเสียง
+  - Push Fit pipe
+  - ท่อระบายน้ำไซเลนท์
+  - Poloplast
+  - ท่อ PP
+  - ท่อระบายน้ำอาคาร
+seoContent: 'ท่อระบายน้ำ XYLENT เป็นท่อระบายน้ำระดับพรีเมียมจาก Poloplast ประเทศออสเตรีย มีโครงสร้าง 3 ชั้น (Triple Layer) ช่วยลดเสียงรบกวนจากการไหลของน้ำได้ถึง 22 เดซิเบล ระบบ Push Fit ช่วยให้ติดตั้งง่าย ไม่ต้องใช้กาวหรือเครื่องมือพิเศษ'
+specifications:
+  - label: วัสดุ
+    value: PP (Polypropylene) 3 ชั้น
+  - label: มาตรฐาน
+    value: EN 1451, DIN 19560
+  - label: การลดเสียง
+    value: '22'
+    unit: dB
+  - label: อุณหภูมิทนทาน
+    value: '-20 ถึง 95'
+    unit: °C
+  - label: ขนาดท่อ
+    value: '32, 40, 50, 75, 90, 110, 125, 160'
+    unit: mm
+  - label: ระบบติดตั้ง
+    value: Push Fit (Push-Fit)
+  - label: สี
+    value: เทาอ่อน
+  - label: อายุการใช้งาน
+    value: '50'
+    unit: ปี
+features:
+  - ลดเสียงรบกวน 22 dB
+  - โครงสร้าง 3 ชั้น (Triple Layer)
+  - ระบบ Push Fit ติดตั้งง่าย
+  - ไม่ต้องใช้กาวหรือเครื่องมือพิเศษ
+  - ผลิตในออสเตรีย คุณภาพยุโรป
+  - ทนอุณหภูมิสูง 95°C
+  - ไม่แตกหักง่าย
+  - อายุการใช้งาน 50 ปี
+applications:
+  - ระบบระบายน้ำอาคาร
+  - โรงแรมและรีสอร์ท
+  - โรงพยาบาล
+  - อาคารพักอาศัยระดับสูง
+  - อาคารสำนักงาน
+certifications:
+  - EN 1451
+  - DIN 19560
+  - DIBt Approved
+faq:
+  - question: ท่อ XYLENT ลดเสียงได้กี่เดซิเบล?
+    answer: ท่อ XYLENT สามารถลดเสียงรบกวนจากการไหลของน้ำได้ถึง 22 เดซิเบล ทำให้เหมาะสำหรับอาคารที่ต้องการความเงียบ
+  - question: ระบบ Push Fit คืออะไร?
+    answer: ระบบ Push Fit เป็นระบบติดตั้งที่ไม่ต้องใช้กาวหรือเครื่องมือพิเศษ เพียงสองท่อเข้าหากันก็ติดตั้งเสร็จ สะดวกและรวดเร็ว
+relatedProductIds:
+  - poloplast
+  - upvc
+schemaData:
+  brand: XYLENT by Poloplast
+  manufacturer: Poloplast (Austria)
+  material: Polypropylene (PP) - Triple Layer
+  category: Drainage Pipe - Silent
+---
+
+# ท่อระบายน้ำ 3 ชั้น XYLENT (Silent Pipe)
+
+## ภาพรวม
+
+ท่อระบายน้ำ **XYLENT** เป็นท่อระบายน้ำระดับพรีเมียมจาก **Poloplast ประเทศออสเตรีย** มีโครงสร้าง **3 ชั้น (Triple Layer)** ช่วยลดเสียงรบกวนจากการไหลของน้ำได้ถึง **22 เดซิเบล**
+
+## คุณสมบัติเด่น
+
+ระบบ **Push Fit** ช่วยให้ติดตั้งง่าย ไม่ต้องใช้กาวหรือเครื่องมือพิเศษ ท่อ XYLENT เหมาะสำหรับอาคารที่ต้องการความเงียบ
+
+### ข้อดีของท่อ XYLENT
+
+1. **ลดเสียง 22 dB** - เงียบกว่าท่อทั่วไป
+2. **3 ชั้น** - Triple Layer Structure
+3. **Push Fit** - ติดตั้งง่าย ไม่ต้องใช้กาว
+4. **คุณภาพยุโรป** - ผลิตในออสเตรีย
+5. **ทนอุณหภูมิ** - สูงถึง 95°C
+6. **ไม่แตกหัก** - PP เกรดสูง
+7. **อายุ 50 ปี** - ทนทานยาวนาน
+
+## การใช้งาน
+
+### เหมาะสำหรับ
+
+- **ระบบระบายน้ำอาคาร** - ท่อระบายน้ำทิ้ง
+- **โรงแรมและรีสอร์ท** - ต้องการความเงียบ
+- **โรงพยาบาล** - สถานที่ต้องการความสงบ
+- **อาคารพักอาศัยระดับสูง** - คอนโดระดับพรีเมียม
+- **อาคารสำนักงาน** - สำนักงานเกรด A
+
+## มาตรฐานและรับรอง
+
+ท่อ XYLENT ผ่านมาตรฐาน:
+
+- ✅ **EN 1451** - มาตรฐานยุโรปสำหรับท่อระบายน้ำ
+- ✅ **DIN 19560** - มาตรฐานเยอรมัน
+- ✅ **DIBt Approved** - รับรองโดยสถาบันก่อสร้างเยอรมัน
+
+## โครงสร้าง 3 ชั้น
+
+ท่อ XYLENT มีโครงสร้าง **Triple Layer**:
+
+1. **ชั้นใน** - PP เรียบ ลดแรงเสียดทาน
+2. **ชั้นกลาง** - PP แร่ เพิ่มความแข็งแรง
+3. **ชั้นนอก** - PP เรียบ ป้องกันรอยขีดข่วน
+
+โครงสร้างนี้ช่วย **ลดเสียงรบกวน** ได้ถึง **22 dB**
+
+## ระบบ Push Fit
+
+**Push Fit** คือระบบติดตั้งที่:
+- ไม่ต้องใช้กาว
+- ไม่ต้องใช้เครื่องมือพิเศษ
+- แค่ดันท่อเข้ากันก็ติดตั้งเสร็จ
+- ประหยัดเวลาและค่าแรง
+
+## คำถามที่พบบ่อย
+
+### ท่อ XYLENT ลดเสียงได้กี่เดซิเบล?
+
+ท่อ XYLENT สามารถลดเสียงรบกวนจากการไหลของน้ำได้ถึง **22 เดซิเบล** ทำให้เหมาะสำหรับอาคารที่ต้องการความเงียบ
+
+### ระบบ Push Fit คืออะไร?
+
+ระบบ Push Fit เป็นระบบติดตั้งที่ **ไม่ต้องใช้กาวหรือเครื่องมือพิเศษ** เพียงสองท่อเข้าหากันก็ติดตั้งเสร็จ สะดวกและรวดเร็ว
+
+## สินค้าที่เกี่ยวข้อง
+
+- [ท่อ PP-R/PP-RCT POLOPLAST](/pp-r-pp-rct-poloplast/)
+- [ท่อ uPVC](/ท่อupvc/)
--- a/dealplustech-astro/src/data/site-config.ts
+++ b/dealplustech-astro/src/data/site-config.ts
--- a/dealplustech-astro/src/layouts/BaseLayout.astro
+++ b/dealplustech-astro/src/layouts/BaseLayout.astro
@@ -0,0 +1,45 @@
+---
+export interface Props {
+  title: string;
+  description?: string;
+  image?: string;
+}
+
+const { title, description, image } = Astro.props;
+---
+
+<!doctype html>
+<html lang="th">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="generator" content={Astro.generator} />
+    <meta name="description" content={description || 'บริษัท ดีล พลัส เทค จำกัด - ผู้เชี่ยวชาญด้านระบบน้ำ ท่อ PPR ตราช้าง ท่อพีพีอาร์ ท่อ HDPE'} />
+    
+    <!-- Favicon -->
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    
+    <!-- Google Fonts: Kanit for Thai -->
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link href="https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;500;600;700&display=swap" rel="stylesheet" />
+    
+    <!-- SEO -->
+    <meta property="og:title" content={title} />
+    <meta property="og:description" content={description || 'Deal Plus Tech - ผู้เชี่ยวชาญด้านระบบน้ำ'} />
+    <meta property="og:image" content={image || '/og-image.jpg'} />
+    <meta property="og:type" content="website" />
+    <meta name="twitter:card" content="summary_large_image" />
+    
+    <title>{title} | ดีล พลัส เทค</title>
+  </head>
+  <body class="flex flex-col min-h-screen">
+    <slot />
+  </body>
+</html>
+
+<style is:global>
+  html {
+    font-family: 'Kanit', system-ui, sans-serif;
+  }
+</style>
--- a/dealplustech-astro/src/lib/utils.ts
+++ b/dealplustech-astro/src/lib/utils.ts
@@ -0,0 +1,42 @@
+// Utility functions migrated from Next.js
+
+/**
+ * Combines class names conditionally (like clsx + tailwind-merge)
+ */
+export function cn(...classes: Array<string | false | null | undefined>): string {
+  return classes.filter(Boolean).join(' ');
+}
+
+/**
+ * Format price in Thai Baht
+ */
+export function formatPrice(price: number): string {
+  return new Intl.NumberFormat('th-TH', {
+    style: 'currency',
+    currency: 'THB',
+  }).format(price);
+}
+
+/**
+ * Format date to Thai locale
+ */
+export function formatDateThai(date: Date | string): string {
+  return new Intl.DateTimeFormat('th-TH', {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+  }).format(new Date(date));
+}
+
+/**
+ * Generate slug from Thai text
+ */
+export function generateSlug(text: string): string {
+  return text
+    .toLowerCase()
+    .replace(/\s+/g, '-')
+    .replace(/[^\w-]+/g, '')
+    .replace(/--+/g, '-')
+    .replace(/^-+/, '')
+    .replace(/-+$/, '');
+}
--- a/dealplustech-astro/src/pages/blog/[slug].astro
+++ b/dealplustech-astro/src/pages/blog/[slug].astro
@@ -0,0 +1,75 @@
+---
+import { getCollection, render } from 'astro:content';
+import BaseLayout from '../../layouts/BaseLayout.astro';
+
+export async function getStaticPaths() {
+  const posts = await getCollection('blog');
+  return posts.map((post) => ({
+    params: { slug: post.id },
+    props: { post },
+  }));
+}
+
+interface Props {
+  post: CollectionEntry<'blog'>;
+}
+
+const { post } = Astro.props;
+const { Content } = await render(post);
+const { title, date, author, category, categories, image, featuredImage } = post.data;
+
+// Support both 'category' and 'categories'
+const postCategory = category || (Array.isArray(categories) ? categories[0] : 'ทั่วไป');
+const postImage = image || featuredImage || '/images/2021/03/ppr-pipe_000C.jpg';
+---
+
+<BaseLayout title={title} description={post.data.excerpt}>
+  <main class="pt-32 pb-16">
+    <article class="container mx-auto px-4 max-w-4xl">
+      <!-- Header -->
+      <header class="mb-8">
+        <div class="flex items-center gap-4 mb-4">
+          <span class="industrial-badge">{postCategory}</span>
+          <time class="text-secondary-500">
+            {new Date(date).toLocaleDateString('th-TH', {
+              year: 'numeric',
+              month: 'long',
+              day: 'numeric',
+            })}
+          </time>
+          <span class="text-secondary-500">•</span>
+          <span class="text-secondary-500">{author}</span>
+        </div>
+        
+        <h1 class="text-4xl md:text-5xl font-bold text-secondary-900 mb-4">
+          {title}
+        </h1>
+      </header>
+
+      <!-- Featured Image -->
+      <div class="relative aspect-video bg-secondary-100 rounded-xl overflow-hidden mb-8">
+        <img
+          src={postImage}
+          alt={title}
+          class="object-cover w-full h-full"
+          loading="lazy"
+        />
+      </div>
+
+      <!-- Content -->
+      <div class="prose prose-lg max-w-none prose-headings:font-bold prose-a:text-primary-600 hover:prose-a:text-primary-700 prose-img:rounded-xl">
+        <Content />
+      </div>
+
+      <!-- Back to Blog -->
+      <div class="mt-12 pt-8 border-t border-secondary-200">
+        <a href="/blog/" class="inline-flex items-center text-primary-600 font-medium hover:text-primary-700 transition-colors">
+          <svg class="w-5 h-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width={2} d="M10 19l-7-7m0 0l7-7m-7 7h18" />
+          </svg>
+          กลับสู่หน้าบทความ
+        </a>
+      </div>
+    </article>
+  </main>
+</BaseLayout>
--- a/dealplustech-astro/src/pages/blog/index.astro
+++ b/dealplustech-astro/src/pages/blog/index.astro
@@ -0,0 +1,37 @@
+---
+import { getCollection } from 'astro:content';
+import BlogCard from '../../components/BlogCard.astro';
+import BaseLayout from '../../layouts/BaseLayout.astro';
+
+const posts = await getCollection('blog');
+
+export const metadata = {
+  title: 'บทความความรู้',
+  description: 'บทความความรู้เกี่ยวกับวัสดุท่อ อุปกรณ์ระบบท่อ และเทคนิคการติดตั้ง',
+};
+
+export const prerender = true;
+---
+
+<BaseLayout title={metadata.title} description={metadata.description}>
+  <main class="pt-32 pb-16">
+    <div class="container mx-auto px-4">
+      <!-- Hero -->
+      <div class="text-center mb-12">
+        <h1 class="text-4xl md:text-5xl font-bold text-secondary-900 mb-4">
+          บทความ<span class="text-primary-600">ความรู้</span>
+        </h1>
+        <p class="text-xl text-secondary-600 max-w-2xl mx-auto">
+          บทความความรู้เกี่ยวกับวัสดุท่อ อุปกรณ์ระบบท่อ และเทคนิคการติดตั้ง
+        </p>
+      </div>
+
+      <!-- Blog Grid -->
+      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+        {posts.map((post) => (
+          <BlogCard post={post} />
+        ))}
+      </div>
+    </div>
+  </main>
+</BaseLayout>
--- a/dealplustech-astro/src/pages/index.astro
+++ b/dealplustech-astro/src/pages/index.astro
@@ -0,0 +1,186 @@
+---
+import BaseLayout from '../layouts/BaseLayout.astro';
+import FloatingContact from '../components/FloatingContact.astro';
+import { productCategories } from '../data/site-config';
+
+// Featured products - key products for homepage
+const featuredProducts = productCategories.filter(p => 
+  ['ppr-elephant', 'hdpe', 'poloplast', 'syler', 'xylent'].includes(p.id)
+).slice(0, 6);
+---
+
+<BaseLayout title="หน้าแรก" description="บริษัท ดีล พลัส เทค จำกัด - ผู้เชี่ยวชาญด้านระบบท่อและ HVAC">
+  <main>
+    <!-- Hero Section -->
+    <section class="relative h-[70vh] min-h-[500px] bg-secondary-900">
+      <div class="absolute inset-0 bg-gradient-to-r from-secondary-900 via-secondary-900/90 to-secondary-900/60 z-10" />
+      <img
+        src="/images/2021/03/ppr-pipe_000C.jpg"
+        alt="ท่อพีพีอาร์คุณภาพสูง"
+        class="absolute inset-0 w-full h-full object-cover opacity-50"
+        loading="eager"
+      />
+      <div class="relative z-20 container mx-auto px-4 h-full flex items-center">
+        <div class="max-w-2xl">
+          <span class="inline-block px-4 py-2 bg-primary-600 text-white font-semibold mb-4 rounded">
+            ผู้เชี่ยวชาญด้านระบบท่อและ HVAC
+          </span>
+          <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold text-white mb-6 leading-tight">
+            วัสดุท่อ อุปกรณ์ HVAC
+            <span class="text-primary-400 block">และฉนวนหุ้มท่อ</span>
+          </h1>
+          <p class="text-lg md:text-xl text-secondary-200 mb-8">
+            จำหน่ายและติดตั้งท่อ PPR, ท่อ HDPE, กริลแอร์, เทอร์โมเบรค และอุปกรณ์ระบบท่อครบวงจร พร้อมบริการให้คำปรึกษาจากทีมมืออาชีพ
+          </p>
+          <div class="flex flex-wrap gap-4">
+            <a href="/products/" class="btn-primary">
+              ดูสินค้าทั้งหมด
+            </a>
+            <a href="/contact-us/" class="btn-outline border-white text-white hover:bg-white hover:text-secondary-900">
+              ขอใบเสนอราคา
+            </a>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- Features Section -->
+    <section class="py-16 bg-secondary-800">
+      <div class="container mx-auto px-4">
+        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+          <div class="text-center p-6">
+            <div class="w-16 h-16 bg-primary-600 rounded-lg flex items-center justify-center mx-auto mb-4">
+              <svg class="w-8 h-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width={2} d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z" />
+              </svg>
+            </div>
+            <h3 class="text-xl font-bold text-white mb-2">สินค้าคุณภาพ</h3>
+            <p class="text-secondary-300">
+              สินค้าทุกชิ้นผ่านมาตรฐานคุณภาพ พร้อมรับประกัน
+            </p>
+          </div>
+          <div class="text-center p-6">
+            <div class="w-16 h-16 bg-primary-600 rounded-lg flex items-center justify-center mx-auto mb-4">
+              <svg class="w-8 h-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
+              </svg>
+            </div>
+            <h3 class="text-xl font-bold text-white mb-2">จัดส่งรวดเร็ว</h3>
+            <p class="text-secondary-300">
+              จัดส่งสินค้าทั่วประเทศ รวดเร็วและปลอดภัย
+            </p>
+          </div>
+          <div class="text-center p-6">
+            <div class="w-16 h-16 bg-primary-600 rounded-lg flex items-center justify-center mx-auto mb-4">
+              <svg class="w-8 h-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width={2} d="M18.364 5.636l-3.536 3.536m0 5.656l3.536 3.536M9.172 9.172L5.636 5.636m3.536 9.192l-3.536 3.536M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-5 0a4 4 0 11-8 0 4 4 0 018 0z" />
+              </svg>
+            </div>
+            <h3 class="text-xl font-bold text-white mb-2">บริการหลังการขาย</h3>
+            <p class="text-secondary-300">
+              ทีมงานพร้อมให้คำปรึกษาและดูแลอย่างต่อเนื่อง
+            </p>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- Featured Products -->
+    <section class="py-16 bg-secondary-50">
+      <div class="container mx-auto px-4">
+        <div class="text-center mb-12">
+          <h2 class="text-3xl md:text-4xl font-bold text-secondary-900 mb-4">
+            สินค้า<span class="text-primary-600">เด่น</span>
+          </h2>
+          <p class="text-secondary-600 text-lg">ผลิตภัณฑ์คุณภาพสูงที่ได้รับความนิยม</p>
+        </div>
+        
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+          {featuredProducts.map((product) => (
+            <a href={product.href} class="card group">
+              <div class="relative aspect-video bg-secondary-100 overflow-hidden">
+                <img
+                  src={product.image}
+                  alt={product.name}
+                  class="object-cover w-full h-48 group-hover:scale-105 transition-transform duration-300"
+                  loading="lazy"
+                />
+              </div>
+              <div class="p-6">
+                <h3 class="text-lg font-bold text-secondary-900 group-hover:text-primary-600 transition-colors">
+                  {product.name}
+                </h3>
+                <p class="mt-2 text-sm text-secondary-600 line-clamp-2">
+                  {product.shortDescription || product.description}
+                </p>
+                <div class="mt-4 flex items-center text-primary-600 font-medium">
+                  <span>ดูรายละเอียด</span>
+                  <svg class="w-4 h-4 ml-2 group-hover:translate-x-1 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width={2} d="M9 5l7 7-7 7" />
+                  </svg>
+                </div>
+              </div>
+            </a>
+          ))}
+        </div>
+        
+        <div class="text-center mt-12">
+          <a href="/products/" class="btn-primary">
+            ดูสินค้าทั้งหมด
+          </a>
+        </div>
+      </div>
+    </section>
+
+    <!-- About Preview -->
+    <section class="py-16 bg-white">
+      <div class="container mx-auto px-4">
+        <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
+          <div>
+            <h2 class="text-3xl md:text-4xl font-bold text-secondary-900 mb-6">
+              เกี่ยวกับ<span class="text-primary-600">เรา</span>
+            </h2>
+            <p class="text-lg text-secondary-600 mb-6">
+              บริษัท ดีล พลัส เทค จำกัด เราเป็นผู้เชียวชาญด้านระบบน้ำ ให้คำแนะนำและจำหน่ายท่อ PPR ตราช้าง ท่อพีพีอาร์ ท่อ PPR ท่อ HDPE Thai PPR คุณภาพสูง ราคาถูก
+            </p>
+            <p class="text-secondary-700 mb-8">
+              ด้วยประสบการณ์ยาวนาน เราพร้อมให้บริการสินค้าคุณภาพและคำแนะนำจากผู้เชี่ยวชาญ เพื่อให้งานระบบของคุณมีประสิทธิภาพสูงสุด
+            </p>
+            <a href="/about-us/" class="btn-secondary">
+              อ่านเพิ่มเติม
+            </a>
+          </div>
+          <div class="relative aspect-video bg-secondary-100 rounded-xl overflow-hidden">
+            <img
+              src="/images/2021/03/ppr-pipe_000C.jpg"
+              alt="เกี่ยวกับดีลพลัสเทค"
+              class="object-cover w-full h-full"
+              loading="lazy"
+            />
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- CTA Section -->
+    <section class="py-16 bg-primary-600">
+      <div class="container mx-auto px-4 text-center">
+        <h2 class="text-3xl md:text-4xl font-bold text-white mb-4">
+          สนใจสินค้าหรือต้องการคำปรึกษา?
+        </h2>
+        <p class="text-xl text-primary-100 mb-8 max-w-2xl mx-auto">
+          ทีมงานของเราพร้อมให้คำแนะนำและช่วยคุณเลือกสินค้าที่เหมาะสมที่สุด
+        </p>
+        <div class="flex flex-wrap justify-center gap-4">
+          <a href="tel:090-555-1415" class="btn-secondary bg-white text-primary-600 hover:bg-primary-50">
+            โทร: 090-555-1415
+          </a>
+          <a href="https://line.me/ti/p/@dealplustech" target="_blank" rel="noopener" class="btn-outline border-white text-white hover:bg-white hover:text-primary-600">
+            เพิ่มเพื่อน LINE
+          </a>
+        </div>
+      </div>
+    </section>
+  </main>
+  <FloatingContact />
+</BaseLayout>
--- a/dealplustech-astro/src/pages/products/[slug].astro
+++ b/dealplustech-astro/src/pages/products/[slug].astro
@@ -0,0 +1,155 @@
+---
+import { getCollection, render } from 'astro:content';
+import BaseLayout from '../../layouts/BaseLayout.astro';
+import { productCategories } from '../../data/site-config';
+
+export async function getStaticPaths() {
+  const products = await getCollection('products');
+  return products.map((product) => ({
+    params: { slug: product.data.slug },
+    props: { product },
+  }));
+}
+
+interface Props {
+  product: CollectionEntry<'products'>;
+}
+
+const { product } = Astro.props;
+const { Content } = await render(product);
+
+// Get product tables from site-config
+const productData = productCategories.find(p => p.id === product.data.id);
+const productTables = productData?.productTables || [];
+---
+
+<BaseLayout title={product.data.name} description={product.data.shortDescription || product.data.description}>
+  <main class="py-12">
+    <article class="container mx-auto px-4 max-w-7xl">
+      <!-- Product Header -->
+      <header class="mb-12">
+        <h1 class="text-4xl md:text-5xl lg:text-6xl xl:text-7xl font-bold text-secondary-900 mb-6">
+          {product.data.name}
+        </h1>
+        <p class="text-lg md:text-xl lg:text-2xl xl:text-3xl text-secondary-600 max-w-4xl">
+          {product.data.description}
+        </p>
+      </header>
+
+      <!-- Content from Markdown -->
+      <div class="prose prose-lg md:prose-xl lg:prose-2xl max-w-none mb-12">
+        <Content />
+      </div>
+
+      <!-- Product Tables Section -->
+      {productTables.length > 0 && (
+        <section class="mb-12">
+          <h2 class="text-3xl md:text-4xl lg:text-5xl font-bold text-secondary-900 mb-8 flex items-center gap-3">
+            <svg class="w-8 h-8 md:w-10 md:h-10 lg:w-12 lg:h-12 text-primary-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width={2} d="M3 10h18M3 14h18m-9-4v8m-7 0h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z" />
+            </svg>
+            ตารางข้อมูลผลิตภัณฑ์
+          </h2>
+          <div class="space-y-10">
+            {productTables.map((table, tableIndex) => (
+              <div class="bg-white rounded-2xl border-2 border-secondary-200 overflow-hidden shadow-lg">
+                <h3 class="text-xl md:text-2xl lg:text-3xl font-semibold text-secondary-800 p-5 md:p-6 bg-secondary-50 border-b-2 border-secondary-200">
+                  {table.tableName}
+                </h3>
+                <div class="overflow-x-auto">
+                  <table class="w-full min-w-[700px]">
+                    <thead>
+                      <tr class="bg-primary-100">
+                        {table.headers.map((header, headerIndex) => (
+                          <th class="px-5 py-4 md:px-6 md:py-5 text-left text-base md:text-lg lg:text-xl font-bold text-primary-800 border-b-2 border-primary-300">
+                            {header}
+                          </th>
+                        ))}
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {table.rows.map((row, rowIndex) => (
+                        <tr class={rowIndex % 2 === 0 ? 'bg-white' : 'bg-secondary-50'}>
+                          {row.map((cell, cellIndex) => (
+                            <td class="px-5 py-4 md:px-6 md:py-5 text-base md:text-lg lg:text-xl text-secondary-700 border-b border-secondary-100">
+                              {cell}
+                            </td>
+                          ))}
+                        </tr>
+                      ))}
+                    </tbody>
+                  </table>
+                </div>
+              </div>
+            ))}
+          </div>
+        </section>
+      )}
+
+      <!-- Specifications -->
+      {product.data.specifications && product.data.specifications.length > 0 && (
+        <section class="mb-12">
+          <h2 class="text-3xl md:text-4xl lg:text-5xl font-bold text-secondary-900 mb-8">ข้อมูลจำเพาะ</h2>
+          <div class="bg-white rounded-2xl border-2 border-secondary-200 p-6 md:p-8 shadow-lg">
+            <dl class="grid grid-cols-1 md:grid-cols-2 gap-6">
+              {product.data.specifications.map((spec, index) => (
+                <div class="flex flex-col md:flex-row md:justify-between border-b border-secondary-100 pb-4">
+                  <dt class="text-base md:text-lg lg:text-xl font-semibold text-secondary-700 mb-2 md:mb-0 md:mr-4">{spec.label}</dt>
+                  <dd class="text-base md:text-lg lg:text-xl text-secondary-900">
+                    {spec.value}
+                    {spec.unit && <span class="text-secondary-500 ml-2">{spec.unit}</span>}
+                  </dd>
+                </div>
+              ))}
+            </dl>
+          </div>
+        </section>
+      )}
+
+      <!-- Features -->
+      {product.data.features && product.data.features.length > 0 && (
+        <section class="mb-12">
+          <h2 class="text-3xl md:text-4xl lg:text-5xl font-bold text-secondary-900 mb-8">คุณสมบัติเด่น</h2>
+          <ul class="grid grid-cols-1 md:grid-cols-2 gap-6">
+            {product.data.features.map((feature, index) => (
+              <li class="flex items-start gap-4 bg-white p-6 rounded-xl border border-secondary-200 shadow">
+                <span class="text-2xl md:text-3xl text-primary-600 flex-shrink-0">✓</span>
+                <span class="text-base md:text-lg lg:text-xl text-secondary-700">{feature}</span>
+              </li>
+            ))}
+          </ul>
+        </section>
+      )}
+
+      <!-- FAQ -->
+      {product.data.faq && product.data.faq.length > 0 && (
+        <section class="mb-12">
+          <h2 class="text-3xl md:text-4xl lg:text-5xl font-bold text-secondary-900 mb-8">คำถามที่พบบ่อย</h2>
+          <div class="space-y-6">
+            {product.data.faq.map((item, index) => (
+              <div class="bg-white rounded-2xl p-6 md:p-8 border-2 border-secondary-200 shadow">
+                <h3 class="text-xl md:text-2xl lg:text-3xl font-bold text-secondary-900 mb-4">{item.question}</h3>
+                <p class="text-base md:text-lg lg:text-xl text-secondary-700 leading-relaxed">{item.answer}</p>
+              </div>
+            ))}
+          </div>
+        </section>
+      )}
+    </article>
+  </main>
+</BaseLayout>
+
+<style>
+  /* Responsive typography for large screens */
+  @media (min-width: 1280px) {
+    html {
+      font-size: 18px;
+    }
+  }
+  
+  @media (min-width: 1536px) {
+    html {
+      font-size: 20px;
+    }
+  }
+</style>
--- a/dealplustech-astro/src/pages/products/index.astro
+++ b/dealplustech-astro/src/pages/products/index.astro
@@ -0,0 +1,21 @@
+---
+import { getCollection } from 'astro:content';
+import ProductCard from '../../components/ProductCard.astro';
+import BaseLayout from '../../layouts/BaseLayout.astro';
+
+const products = await getCollection('products');
+---
+
+<BaseLayout title="สินค้าทั้งหมด" description="รายการสินค้าทั้งหมดจาก Deal Plus Tech">
+  <main class="py-12">
+    <div class="container mx-auto px-4 max-w-6xl">
+      <h1 class="section-title mb-8">สินค้าทั้งหมด</h1>
+      
+      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+        {products.map((product) => (
+          <ProductCard product={product} />
+        ))}
+      </div>
+    </div>
+  </main>
+</BaseLayout>
--- a/dealplustech-astro/src/styles/global.css
+++ b/dealplustech-astro/src/styles/global.css
@@ -0,0 +1,157 @@
+@import "tailwindcss";
+
+/* Deal Plus Tech - Industrial Theme */
+@theme {
+  /* Primary Colors - Green for trust and growth */
+  --color-primary-50: #f0fdf4;
+  --color-primary-100: #dcfce7;
+  --color-primary-200: #bbf7d0;
+  --color-primary-300: #86efac;
+  --color-primary-400: #4ade80;
+  --color-primary-500: #22c55e;
+  --color-primary-600: #16a34a;
+  --color-primary-700: #15803d;
+  --color-primary-800: #166534;
+  --color-primary-900: #14532d;
+  
+  /* Secondary Colors - Slate grays for industrial look */
+  --color-secondary-50: #f8fafc;
+  --color-secondary-100: #f1f5f9;
+  --color-secondary-200: #e2e8f0;
+  --color-secondary-300: #cbd5e1;
+  --color-secondary-400: #94a3b8;
+  --color-secondary-500: #64748b;
+  --color-secondary-600: #475569;
+  --color-secondary-700: #334155;
+  --color-secondary-800: #1e293b;
+  --color-secondary-900: #0f172a;
+  
+  /* Accent Colors - Yellow for highlights */
+  --color-accent-400: #facc15;
+  --color-accent-500: #eab308;
+  --color-accent-600: #ca8a04;
+  
+  /* Industrial custom colors */
+  --color-industrial-dark: #1a1a1a;
+  --color-industrial-light: #f5f5f5;
+  
+  /* Font - Kanit for Thai support */
+  --font-sans: 'Kanit', system-ui, sans-serif;
+  --font-mono: ui-monospace, monospace;
+  
+  /* Shadows */
+  --shadow-card: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --shadow-industrial: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+  --shadow-bold: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+}
+
+@layer base {
+  html {
+    scroll-behavior: smooth;
+    /* Base font size */
+    font-size: 16px;
+  }
+  
+  /* Responsive font sizes for larger screens */
+  @media (min-width: 1280px) {
+    html {
+      font-size: 18px;
+    }
+  }
+  
+  @media (min-width: 1536px) {
+    html {
+      font-size: 20px;
+    }
+  }
+  
+  @media (min-width: 1920px) {
+    html {
+      font-size: 22px;
+    }
+  }
+  
+  @media (min-width: 2560px) {
+    html {
+      font-size: 24px;
+    }
+  }
+  
+  body {
+    @apply bg-white text-secondary-900 antialiased;
+  }
+  
+  h1, h2, h3, h4, h5, h6 {
+    @apply font-bold tracking-tight;
+  }
+}
+
+@layer components {
+  .btn-primary {
+    @apply inline-flex items-center justify-center px-6 py-3 md:px-8 md:py-4 bg-primary-600 text-white font-semibold rounded-lg
+           hover:bg-primary-700 transition-all duration-200 shadow-bold hover:shadow-industrial
+           active:translate-y-0.5 text-base md:text-lg;
+  }
+  
+  .btn-secondary {
+    @apply inline-flex items-center justify-center px-6 py-3 md:px-8 md:py-4 bg-secondary-800 text-white font-semibold rounded-lg
+           hover:bg-secondary-900 transition-all duration-200 text-base md:text-lg;
+  }
+  
+  .btn-outline {
+    @apply inline-flex items-center justify-center px-6 py-3 md:px-8 md:py-4 border-2 border-primary-600 text-primary-600 font-semibold rounded-lg
+           hover:bg-primary-600 hover:text-white transition-all duration-200 text-base md:text-lg;
+  }
+  
+  .section-title {
+    @apply text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-bold text-secondary-900;
+  }
+  
+  .section-subtitle {
+    @apply text-lg md:text-xl lg:text-2xl xl:text-3xl text-secondary-600 mt-4;
+  }
+  
+  .card {
+    @apply bg-white rounded-xl shadow-card overflow-hidden transition-all duration-300 
+           hover:shadow-industrial hover:-translate-y-1;
+  }
+  
+  .card-industrial {
+    @apply bg-secondary-800 text-white rounded-xl p-6 border-l-4 border-primary-500;
+  }
+  
+  .gradient-overlay {
+    @apply absolute inset-0 bg-gradient-to-r from-industrial-dark/90 to-industrial-dark/70;
+  }
+  
+  .industrial-badge {
+    @apply inline-flex items-center px-3 py-1 md:px-4 md:py-2 bg-primary-600 text-white text-sm md:text-base font-semibold rounded;
+  }
+}
+
+@layer utilities {
+  .text-balance {
+    text-wrap: balance;
+  }
+  
+  .text-gradient {
+    @apply bg-clip-text text-transparent bg-gradient-to-r from-primary-500 to-primary-700;
+  }
+  
+  /* Responsive text utilities */
+  .text-responsive-sm {
+    @apply text-sm md:text-base lg:text-lg xl:text-xl;
+  }
+  
+  .text-responsive-base {
+    @apply text-base md:text-lg lg:text-xl xl:text-2xl;
+  }
+  
+  .text-responsive-lg {
+    @apply text-lg md:text-xl lg:text-2xl xl:text-3xl;
+  }
+  
+  .text-responsive-xl {
+    @apply text-xl md:text-2xl lg:text-3xl xl:text-4xl;
+  }
+}