Initial commit: New industrial design with green theme

src/app/about-us/page.tsx

@@ -0,0 +1,119 @@
+import Image from 'next/image';
+import { siteConfig } from '@/data/site-config';
+
+export const metadata = {
+  title: 'เกี่ยวกับเรา',
+  description: 'เรียนรู้เพิ่มเติมเกี่ยวกับดีลพลัสเทค ผู้เชี่ยวชาญด้านวัสดุท่อและอุปกรณ์ระบบท่อ',
+};
+
+export default function AboutPage() {
+  return (
+    <div className="pt-32 pb-16">
+      <div className="container mx-auto px-4">
+        {/* Hero */}
+        <div className="relative h-[400px] -mt-32 mb-12 rounded-b-3xl overflow-hidden">
+          <div className="absolute inset-0 bg-gradient-to-r from-secondary-900 via-secondary-800 to-secondary-900" />
+          <div className="absolute inset-0 flex items-center justify-center">
+            <div className="text-center">
+              <h1 className="text-4xl md:text-5xl font-bold text-white mb-4">
+                เกี่ยวกับ<span className="text-primary-400">{siteConfig.name}</span>
+              </h1>
+              <p className="text-xl text-secondary-200">
+                ผู้เชี่ยวชาญด้านวัสดุท่อและอุปกรณ์ระบบท่อ
+              </p>
+            </div>
+          </div>
+        </div>
+
+        {/* Company Story */}
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 mb-16">
+          <div>
+            <h2 className="text-3xl font-bold text-secondary-900 mb-6">เรื่องราวของเรา</h2>
+            <div className="space-y-4 text-secondary-600">
+              <p>
+                {siteConfig.nameTh} ก่อตั้งขึ้นด้วยความมุ่งมั่นที่จะเป็นผู้นำด้านการจัดหาวัสดุท่อ
+                และอุปกรณ์ระบบท่อคุณภาพสูงให้กับลูกค้าในประเทศไทย
+              </p>
+              <p>
+                ด้วยประสบการณ์มากกว่า 10 ปีในอุตสาหกรรม เราได้สั่งสมความเชี่ยวชาญ
+                และสร้างเครือข่ายความร่วมมือกับผู้ผลิตชั้นนำทั้งในและต่างประเทศ
+              </p>
+              <p>
+                เรามุ่งมั่นให้บริการสินค้าที่ผ่านมาตรฐานคุณภาพ พร้อมคำแนะนำจากทีมงานมืออาชีพ
+                เพื่อให้ลูกค้าได้รับสินค้าที่เหมาะสมกับความต้องการ
+              </p>
+            </div>
+          </div>
+          <div className="relative aspect-video bg-secondary-100 rounded-xl overflow-hidden">
+            <Image
+              src="/images/2021/03/hdpe-pipe_000C.jpg"
+              alt="เกี่ยวกับดีลพลัสเทค"
+              fill
+              className="object-cover"
+            />
+          </div>
+        </div>
+
+        {/* Vision & Mission */}
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-8 mb-16">
+          <div className="card-industrial">
+            <h3 className="text-2xl font-bold text-primary-400 mb-4">วิสัยทัศน์</h3>
+            <p className="text-secondary-200">
+              เป็นผู้นำตลาดวัสดุท่อและอุปกรณ์ระบบท่อในประเทศไทย
+              ที่ลูกค้าไว้วางใจในคุณภาพและการบริการ
+            </p>
+          </div>
+          <div className="card-industrial">
+            <h3 className="text-2xl font-bold text-primary-400 mb-4">พันธกิจ</h3>
+            <p className="text-secondary-200">
+              จัดหาสินค้าคุณภาพสูง ให้บริการที่เป็นเลิศ และสร้างความพึงพอใจสูงสุดให้ลูกค้า
+            </p>
+          </div>
+        </div>
+
+        {/* Core Values */}
+        <div className="text-center mb-12">
+          <h2 className="text-3xl font-bold text-secondary-900 mb-8">ค่านิยมหลัก</h2>
+          <div className="grid grid-cols-1 md:grid-cols-4 gap-6">
+            <div className="p-6 bg-primary-50 rounded-xl">
+              <div className="w-12 h-12 bg-primary-600 rounded-lg flex items-center justify-center mx-auto mb-4">
+                <svg className="w-6 h-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+                </svg>
+              </div>
+              <h4 className="font-bold text-secondary-900 mb-2">คุณภาพ</h4>
+              <p className="text-secondary-600 text-sm">สินค้าผ่านมาตรฐาน</p>
+            </div>
+            <div className="p-6 bg-primary-50 rounded-xl">
+              <div className="w-12 h-12 bg-primary-600 rounded-lg flex items-center justify-center mx-auto mb-4">
+                <svg className="w-6 h-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
+                </svg>
+              </div>
+              <h4 className="font-bold text-secondary-900 mb-2">รวดเร็ว</h4>
+              <p className="text-secondary-600 text-sm">จัดส่งรวดเร็วทันใจ</p>
+            </div>
+            <div className="p-6 bg-primary-50 rounded-xl">
+              <div className="w-12 h-12 bg-primary-600 rounded-lg flex items-center justify-center mx-auto mb-4">
+                <svg className="w-6 h-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
+                </svg>
+              </div>
+              <h4 className="font-bold text-secondary-900 mb-2">บริการ</h4>
+              <p className="text-secondary-600 text-sm">ทีมงานมืออาชีพ</p>
+            </div>
+            <div className="p-6 bg-primary-50 rounded-xl">
+              <div className="w-12 h-12 bg-primary-600 rounded-lg flex items-center justify-center mx-auto mb-4">
+                <svg className="w-6 h-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
+                </svg>
+              </div>
+              <h4 className="font-bold text-secondary-900 mb-2">ไว้ใจ</h4>
+              <p className="text-secondary-600 text-sm">ซื่อสัตย์ต่อลูกค้า</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,133 @@
+import { notFound } from 'next/navigation';
+import Image from 'next/image';
+import Link from 'next/link';
+import fs from 'fs';
+import path from 'path';
+import matter from 'gray-matter';
+import { remark } from 'remark';
+import html from 'remark-html';
+
+interface Props {
+  params: { slug: string };
+}
+
+async function getPost(slug: string) {
+  const blogDir = path.join(process.cwd(), 'src/content/blog');
+  const filePath = path.join(blogDir, `${slug}.md`);
+  
+  if (!fs.existsSync(filePath)) {
+    return null;
+  }
+  
+  const fileContent = fs.readFileSync(filePath, 'utf-8');
+  const { data, content } = matter(fileContent);
+  
+  const processedContent = await remark()
+    .use(html, { sanitize: false })
+    .process(content);
+  const contentHtml = processedContent.toString();
+  
+  return {
+    slug,
+    title: data.title || 'ไม่มีชื่อ',
+    excerpt: data.excerpt || '',
+    date: data.date || new Date().toISOString(),
+    author: data.author || 'ดีลพลัสเทค',
+    category: data.category || 'ทั่วไป',
+    image: data.image || '/images/2021/03/ppr-pipe_000C.jpg',
+    content: contentHtml,
+  };
+}
+
+export async function generateMetadata({ params }: Props) {
+  const post = await getPost(params.slug);
+  if (!post) return { title: 'ไม่พบบทความ' };
+  
+  return {
+    title: post.title,
+    description: post.excerpt,
+  };
+}
+
+export async function generateStaticParams() {
+  const blogDir = path.join(process.cwd(), 'src/content/blog');
+  const files = fs.readdirSync(blogDir).filter(f => f.endsWith('.md'));
+  
+  return files.map(filename => ({
+    slug: filename.replace('.md', ''),
+  }));
+}
+
+export default async function BlogPostPage({ params }: Props) {
+  const post = await getPost(params.slug);
+  
+  if (!post) {
+    notFound();
+  }
+
+  return (
+    <div className="pt-32 pb-16">
+      <article className="container mx-auto px-4">
+        {/* Header */}
+        <header className="max-w-3xl mx-auto mb-8">
+          <Link
+            href="/blog"
+            className="inline-flex items-center text-primary-600 hover:text-primary-700 mb-4"
+          >
+            <svg className="w-4 h-4 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
+            </svg>
+            กลับไปหน้าบทความ
+          </Link>
+          
+          <span className="industrial-badge">{post.category}</span>
+          
+          <h1 className="text-3xl md:text-4xl lg:text-5xl font-bold text-secondary-900 mt-4 mb-4">
+            {post.title}
+          </h1>
+          
+          <div className="flex items-center gap-4 text-secondary-600">
+            <span>{post.author}</span>
+            <span>•</span>
+            <time>
+              {new Date(post.date).toLocaleDateString('th-TH', {
+                year: 'numeric',
+                month: 'long',
+                day: 'numeric',
+              })}
+            </time>
+          </div>
+        </header>
+
+        {/* Featured Image */}
+        <div className="relative aspect-video max-w-4xl mx-auto rounded-xl overflow-hidden mb-8">
+          <Image
+            src={post.image}
+            alt={post.title}
+            fill
+            className="object-cover"
+          />
+        </div>
+
+        {/* Content */}
+        <div
+          className="max-w-3xl mx-auto prose prose-lg prose-headings:font-bold prose-headings:text-secondary-900 prose-p:text-secondary-600 prose-a:text-primary-600 prose-strong:text-secondary-900"
+          dangerouslySetInnerHTML={{ __html: post.content }}
+        />
+
+        {/* CTA */}
+        <div className="max-w-3xl mx-auto mt-12 bg-secondary-800 rounded-2xl p-8 text-center">
+          <h2 className="text-2xl font-bold text-white mb-4">
+            สนใจสินค้าหรือบริการ?
+          </h2>
+          <p className="text-secondary-300 mb-6">
+            ติดต่อเราเพื่อรับคำปรึกษาและใบเสนอราคาฟรี
+          </p>
+          <Link href="/contact-us" className="btn-primary">
+            ติดต่อเรา
+          </Link>
+        </div>
+      </article>
+    </div>
+  );
+}

src/app/blog/page.tsx

@@ -0,0 +1,101 @@
+import Link from 'next/link';
+import Image from 'next/image';
+import fs from 'fs';
+import path from 'path';
+import matter from 'gray-matter';
+
+export const metadata = {
+  title: 'บทความ',
+  description: 'บทความความรู้เกี่ยวกับวัสดุท่อ อุปกรณ์ระบบท่อ และเทคนิคการติดตั้ง',
+};
+
+function getBlogPosts() {
+  const blogDir = path.join(process.cwd(), 'src/content/blog');
+  const files = fs.readdirSync(blogDir).filter(f => f.endsWith('.md'));
+  
+  return files.map(filename => {
+    const filePath = path.join(blogDir, filename);
+    const fileContent = fs.readFileSync(filePath, 'utf-8');
+    const { data } = matter(fileContent);
+    
+    return {
+      slug: filename.replace('.md', ''),
+      title: data.title || 'ไม่มีชื่อ',
+      excerpt: data.excerpt || '',
+      date: data.date || new Date().toISOString(),
+      author: data.author || 'ดีลพลัสเทค',
+      category: data.category || 'ทั่วไป',
+      image: data.image || '/images/2021/03/ppr-pipe_000C.jpg',
+    };
+  }).sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime());
+}
+
+export default function BlogPage() {
+  const posts = getBlogPosts();
+
+  return (
+    <div className="pt-32 pb-16">
+      <div className="container mx-auto px-4">
+        {/* Hero */}
+        <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>
+
+        {/* Blog Grid */}
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+          {posts.map((post) => (
+            <Link
+              key={post.slug}
+              href={`/blog/${post.slug}`}
+              className="card group"
+            >
+              <div className="relative aspect-video bg-secondary-100">
+                <Image
+                  src={post.image}
+                  alt={post.title}
+                  fill
+                  className="object-cover group-hover:scale-105 transition-transform duration-300"
+                />
+                <div className="absolute top-4 left-4">
+                  <span className="industrial-badge">{post.category}</span>
+                </div>
+              </div>
+              <div className="p-6">
+                <time className="text-sm text-secondary-500">
+                  {new Date(post.date).toLocaleDateString('th-TH', {
+                    year: 'numeric',
+                    month: 'long',
+                    day: 'numeric',
+                  })}
+                </time>
+                <h3 className="text-xl font-bold text-secondary-900 mt-2 group-hover:text-primary-600 transition-colors">
+                  {post.title}
+                </h3>
+                <p className="text-secondary-600 text-sm mt-2 line-clamp-2">
+                  {post.excerpt}
+                </p>
+                <span className="text-primary-600 font-semibold flex items-center gap-2 mt-4">
+                  อ่านเพิ่มเติม
+                  <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+                  </svg>
+                </span>
+              </div>
+            </Link>
+          ))}
+        </div>
+
+        {posts.length === 0 && (
+          <div className="text-center py-12">
+            <p className="text-secondary-600">ยังไม่มีบทความในขณะนี้</p>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

src/app/contact-us/page.tsx

@@ -0,0 +1,181 @@
+import { siteConfig, workHours } from '@/data/site-config';
+
+export const metadata = {
+  title: 'ติดต่อเรา',
+  description: 'ติดต่อดีลพลัสเทค สอบถามข้อมูลสินค้า ขอใบเสนอราคา หรือติดต่อทีมงาน',
+};
+
+export default function ContactPage() {
+  return (
+    <div className="pt-32 pb-16">
+      <div className="container mx-auto px-4">
+        {/* Hero */}
+        <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>
+
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
+          {/* Contact Info */}
+          <div>
+            <div className="bg-secondary-800 rounded-2xl p-8 mb-8">
+              <h2 className="text-2xl font-bold text-white mb-6">ข้อมูลติดต่อ</h2>
+              
+              <div className="space-y-6">
+                <div className="flex items-start gap-4">
+                  <div className="w-12 h-12 bg-primary-600 rounded-lg flex items-center justify-center flex-shrink-0">
+                    <svg className="w-6 h-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={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 strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
+                    </svg>
+                  </div>
+                  <div>
+                    <h3 className="font-bold text-white">ที่อยู่</h3>
+                    <p className="text-secondary-300">{siteConfig.address}</p>
+                  </div>
+                </div>
+
+                <div className="flex items-start gap-4">
+                  <div className="w-12 h-12 bg-primary-600 rounded-lg flex items-center justify-center flex-shrink-0">
+                    <svg className="w-6 h-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={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>
+                  </div>
+                  <div>
+                    <h3 className="font-bold text-white">โทรศัพท์</h3>
+                    <a href={`tel:${siteConfig.phone}`} className="text-primary-400 hover:text-primary-300">
+                      {siteConfig.phone}
+                    </a>
+                  </div>
+                </div>
+
+                <div className="flex items-start gap-4">
+                  <div className="w-12 h-12 bg-primary-600 rounded-lg flex items-center justify-center flex-shrink-0">
+                    <svg className="w-6 h-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={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>
+                  </div>
+                  <div>
+                    <h3 className="font-bold text-white">อีเมล</h3>
+                    <a href={`mailto:${siteConfig.email}`} className="text-primary-400 hover:text-primary-300">
+                      {siteConfig.email}
+                    </a>
+                  </div>
+                </div>
+
+                <div className="flex items-start gap-4">
+                  <div className="w-12 h-12 bg-[#00B900] rounded-lg flex items-center justify-center flex-shrink-0">
+                    <svg className="w-6 h-6 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>
+                  </div>
+                  <div>
+                    <h3 className="font-bold text-white">LINE Official</h3>
+                    <a
+                      href={`https://line.me/ti/p/${siteConfig.lineId}`}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="text-primary-400 hover:text-primary-300"
+                    >
+                      {siteConfig.lineId}
+                    </a>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            {/* Business Hours */}
+            <div className="bg-primary-600 rounded-2xl p-8">
+              <h2 className="text-2xl font-bold text-white mb-6">เวลาทำการ</h2>
+              <ul className="space-y-3">
+                {workHours.map((item) => (
+                  <li key={item.day} className="flex justify-between">
+                    <span className="text-primary-100">{item.day}</span>
+                    <span className={`font-semibold ${item.isClosed ? 'text-red-200' : 'text-white'}`}>
+                      {item.hours}
+                    </span>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          </div>
+
+          {/* Contact Form */}
+          <div>
+            <div className="bg-white rounded-2xl shadow-card p-8">
+              <h2 className="text-2xl font-bold text-secondary-900 mb-6">ส่งข้อความถึงเรา</h2>
+              
+              <form className="space-y-6">
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                  <div>
+                    <label className="block text-sm font-medium text-secondary-700 mb-2">
+                      ชื่อ-นามสกุล *
+                    </label>
+                    <input
+                      type="text"
+                      className="w-full px-4 py-3 rounded-lg border border-secondary-200 focus:border-primary-500 focus:ring-2 focus:ring-primary-500/20 outline-none transition-colors"
+                      placeholder="ชื่อของคุณ"
+                    />
+                  </div>
+                  <div>
+                    <label className="block text-sm font-medium text-secondary-700 mb-2">
+                      เบอร์โทรศัพท์ *
+                    </label>
+                    <input
+                      type="tel"
+                      className="w-full px-4 py-3 rounded-lg border border-secondary-200 focus:border-primary-500 focus:ring-2 focus:ring-primary-500/20 outline-none transition-colors"
+                      placeholder="08x-xxx-xxxx"
+                    />
+                  </div>
+                </div>
+
+                <div>
+                  <label className="block text-sm font-medium text-secondary-700 mb-2">
+                    อีเมล
+                  </label>
+                  <input
+                    type="email"
+                    className="w-full px-4 py-3 rounded-lg border border-secondary-200 focus:border-primary-500 focus:ring-2 focus:ring-primary-500/20 outline-none transition-colors"
+                    placeholder="email@example.com"
+                  />
+                </div>
+
+                <div>
+                  <label className="block text-sm font-medium text-secondary-700 mb-2">
+                    หัวข้อ *
+                  </label>
+                  <select className="w-full px-4 py-3 rounded-lg border border-secondary-200 focus:border-primary-500 focus:ring-2 focus:ring-primary-500/20 outline-none transition-colors">
+                    <option value="">เลือกหัวข้อ</option>
+                    <option value="quote">ขอใบเสนอราคา</option>
+                    <option value="product">สอบถามสินค้า</option>
+                    <option value="service">สอบถามบริการ</option>
+                    <option value="other">อื่นๆ</option>
+                  </select>
+                </div>
+
+                <div>
+                  <label className="block text-sm font-medium text-secondary-700 mb-2">
+                    ข้อความ *
+                  </label>
+                  <textarea
+                    rows={5}
+                    className="w-full px-4 py-3 rounded-lg border border-secondary-200 focus:border-primary-500 focus:ring-2 focus:ring-primary-500/20 outline-none transition-colors resize-none"
+                    placeholder="รายละเอียดที่ต้องการสอบถาม..."
+                  />
+                </div>
+
+                <button type="submit" className="btn-primary w-full">
+                  ส่งข้อความ
+                </button>
+              </form>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

src/app/layout.tsx

@@ -0,0 +1,48 @@
+import type { Metadata } from 'next';
+import { Kanit } from 'next/font/google';
+import '@/styles/globals.css';
+import Header from '@/components/layout/Header';
+import Footer from '@/components/layout/Footer';
+import FloatingContact from '@/components/layout/FloatingContact';
+
+const kanit = Kanit({
+  subsets: ['latin', 'thai'],
+  weight: ['300', '400', '500', '600', '700'],
+  variable: '--font-kanit',
+  display: 'swap',
+});
+
+export const metadata: Metadata = {
+  title: {
+    default: 'ดีลพลัสเทค - ผู้เชี่ยวชาญด้านวัสดุท่อและอุปกรณ์ระบบท่อ',
+    template: '%s | ดีลพลัสเทค',
+  },
+  description: 'ดีลพลัสเทค - ผู้เชี่ยวชาญด้านวัสดุท่อและอุปกรณ์ระบบท่อ ท่อพีพีอาร์ ท่อ HDPE ท่อ PVC วาล์ว และอุปกรณ์ต่อท่อครบวงจร',
+  keywords: ['ท่อพีพีอาร์', 'ท่อ HDPE', 'ท่อ PVC', 'วาล์ว', 'อุปกรณ์ท่อ', 'ดีลพลัสเทค'],
+  authors: [{ name: 'Deal Plus Tech' }],
+  openGraph: {
+    type: 'website',
+    locale: 'th_TH',
+    url: 'https://dealplustech.co.th',
+    siteName: 'ดีลพลัสเทค',
+    title: 'ดีลพลัสเทค - ผู้เชี่ยวชาญด้านวัสดุท่อและอุปกรณ์ระบบท่อ',
+    description: 'ดีลพลัสเทค - ผู้เชี่ยวชาญด้านวัสดุท่อและอุปกรณ์ระบบท่อ ท่อพีพีอาร์ ท่อ HDPE ท่อ PVC วาล์ว และอุปกรณ์ต่อท่อครบวงจร',
+  },
+};
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="th" className={kanit.variable}>
+      <body className="font-sans">
+        <Header />
+        <main className="min-h-screen">{children}</main>
+        <Footer />
+        <FloatingContact />
+      </body>
+    </html>
+  );
+}

src/app/not-found.tsx

@@ -0,0 +1,20 @@
+import Link from 'next/link';
+
+export default function NotFound() {
+  return (
+    <div className="min-h-[60vh] flex items-center justify-center">
+      <div className="text-center px-4">
+        <h1 className="text-6xl font-bold text-secondary-900 mb-4">404</h1>
+        <h2 className="text-2xl font-bold text-secondary-700 mb-4">
+          ไม่พบหน้าที่คุณต้องการ
+        </h2>
+        <p className="text-secondary-600 mb-8">
+          หน้าที่คุณกำลังค้นหาไม่มีอยู่หรือถูกย้ายแล้ว
+        </p>
+        <Link href="/" className="btn-primary">
+          กลับหน้าแรก
+        </Link>
+      </div>
+    </div>
+  );
+}

src/app/page.tsx

@@ -0,0 +1,198 @@
+import Image from 'next/image';
+import Link from 'next/link';
+import { productCategories, siteConfig } from '@/data/site-config';
+
+export default function HomePage() {
+  const featuredProducts = productCategories.slice(0, 6);
+
+  return (
+    <>
+      {/* Hero Section */}
+      <section className="relative h-[80vh] min-h-[600px] bg-secondary-900">
+        <div className="absolute inset-0 bg-gradient-to-r from-secondary-900 via-secondary-900/80 to-secondary-900/40 z-10" />
+        <Image
+          src="/images/2021/03/ppr-pipe_000C.jpg"
+          alt="ท่อพีพีอาร์คุณภาพสูง"
+          fill
+          className="object-cover opacity-60"
+          priority
+        />
+        <div className="relative z-20 container mx-auto px-4 h-full flex items-center">
+          <div className="max-w-2xl">
+            <span className="inline-block px-4 py-2 bg-primary-600 text-white font-semibold mb-4">
+              ผู้เชี่ยวชาญด้านระบบท่อ
+            </span>
+            <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold text-white mb-6">
+              วัสดุท่อและอุปกรณ์
+              <span className="text-primary-400">คุณภาพสูง</span>
+            </h1>
+            <p className="text-xl text-secondary-200 mb-8">
+              {siteConfig.description}
+            </p>
+            <div className="flex flex-wrap gap-4">
+              <Link href="/product" className="btn-primary">
+                ดูสินค้าทั้งหมด
+              </Link>
+              <Link href="/contact-us" className="btn-outline border-white text-white hover:bg-white hover:text-secondary-900">
+                ติดต่อเรา
+              </Link>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Features Section */}
+      <section className="py-16 bg-secondary-800">
+        <div className="container mx-auto px-4">
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+            <div className="text-center p-6">
+              <div className="w-16 h-16 bg-primary-600 rounded-lg flex items-center justify-center mx-auto mb-4">
+                <svg className="w-8 h-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={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 className="text-xl font-bold text-white mb-2">สินค้าคุณภาพ</h3>
+              <p className="text-secondary-300">
+                สินค้าทุกชิ้นผ่านมาตรฐานคุณภาพ พร้อมรับประกัน
+              </p>
+            </div>
+            <div className="text-center p-6">
+              <div className="w-16 h-16 bg-primary-600 rounded-lg flex items-center justify-center mx-auto mb-4">
+                <svg className="w-8 h-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
+                </svg>
+              </div>
+              <h3 className="text-xl font-bold text-white mb-2">จัดส่งรวดเร็ว</h3>
+              <p className="text-secondary-300">
+                จัดส่งสินค้าทั่วประเทศ รวดเร็วและปลอดภัย
+              </p>
+            </div>
+            <div className="text-center p-6">
+              <div className="w-16 h-16 bg-primary-600 rounded-lg flex items-center justify-center mx-auto mb-4">
+                <svg className="w-8 h-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={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 className="text-xl font-bold text-white mb-2">บริการหลังการขาย</h3>
+              <p className="text-secondary-300">
+                ทีมงานพร้อมให้คำปรึกษาและดูแลอย่างต่อเนื่อง
+              </p>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Featured Products Section */}
+      <section className="py-16">
+        <div className="container mx-auto px-4">
+          <div className="text-center mb-12">
+            <h2 className="section-title">
+              สินค้า<span className="text-primary-600">แนะนำ</span>
+            </h2>
+            <p className="section-subtitle">
+              ผลิตภัณฑ์คุณภาพสูงที่ได้รับความนิยมจากลูกค้า
+            </p>
+          </div>
+
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+            {featuredProducts.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 className="absolute top-4 left-4">
+                    <span className="industrial-badge">{product.nameEn}</span>
+                  </div>
+                </div>
+                <div className="p-6">
+                  <h3 className="text-xl font-bold text-secondary-900 mb-2 group-hover:text-primary-600 transition-colors">
+                    {product.name}
+                  </h3>
+                  <p className="text-secondary-600 text-sm mb-4">
+                    {product.shortDescription || product.description.slice(0, 100) + '...'}
+                  </p>
+                  <span className="text-primary-600 font-semibold flex items-center gap-2">
+                    ดูรายละเอียด
+                    <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+                    </svg>
+                  </span>
+                </div>
+              </Link>
+            ))}
+          </div>
+
+          <div className="text-center mt-12">
+            <Link href="/product" className="btn-secondary">
+              ดูสินค้าทั้งหมด
+            </Link>
+          </div>
+        </div>
+      </section>
+
+      {/* CTA Section */}
+      <section className="py-16 bg-primary-600">
+        <div className="container mx-auto px-4 text-center">
+          <h2 className="text-3xl md:text-4xl font-bold text-white mb-4">
+            พร้อมเริ่มโครงการของคุณ?
+          </h2>
+          <p className="text-primary-100 text-lg mb-8 max-w-2xl mx-auto">
+            ติดต่อเราวันนี้เพื่อรับคำปรึกษาและใบเสนอราคาฟรี
+          </p>
+          <div className="flex flex-wrap justify-center gap-4">
+            <a
+              href={`tel:${siteConfig.phone}`}
+              className="btn-secondary bg-white text-primary-600 hover:bg-primary-50"
+            >
+              โทรหาเรา: {siteConfig.phone}
+            </a>
+            <Link href="/contact-us" className="btn-outline border-white text-white hover:bg-white hover:text-primary-600">
+              ส่งข้อความ
+            </Link>
+          </div>
+        </div>
+      </section>
+
+      {/* About Section */}
+      <section className="py-16">
+        <div className="container mx-auto px-4">
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
+            <div>
+              <h2 className="section-title mb-6">
+                เกี่ยวกับ<span className="text-primary-600">{siteConfig.name}</span>
+              </h2>
+              <p className="text-secondary-600 mb-4">
+                {siteConfig.nameTh} เป็นผู้เชี่ยวชาญด้านวัสดุท่อและอุปกรณ์ระบบท่อครบวงจร 
+                ด้วยประสบการณ์มากกว่า 10 ปี เรามุ่งมั่นให้บริการสินค้าคุณภาพสูง 
+                พร้อมคำแนะนำจากทีมงานมืออาชีพ
+              </p>
+              <p className="text-secondary-600 mb-6">
+                เราจำหน่ายท่อพีพีอาร์ ท่อ HDPE ท่อ PVC วาล์ว และอุปกรณ์ต่อท่อหลากหลายประเภท
+                รวมถึงอุปกรณ์แขวนท่อและอุปกรณ์ปรับอากาศ
+              </p>
+              <Link href="/about-us" className="btn-primary">
+                เรียนรู้เพิ่มเติม
+              </Link>
+            </div>
+            <div className="relative aspect-video bg-secondary-100 rounded-xl overflow-hidden">
+              <Image
+                src="/images/2021/03/hdpe-pipe_000C.jpg"
+                alt="เกี่ยวกับดีลพลัสเทค"
+                fill
+                className="object-cover"
+              />
+            </div>
+          </div>
+        </div>
+      </section>
+    </>
+  );
+}

src/app/portfolio/page.tsx

@@ -0,0 +1,82 @@
+import Image from 'next/image';
+
+export const metadata = {
+  title: 'ผลงานของเรา',
+  description: 'ผลงานโครงการต่างๆ ที่ดีลพลัสเทคได้ร่วมเป็นส่วนหนึ่ง',
+};
+
+const portfolioItems = [
+  {
+    title: 'โครงการอาคารสำนักงาน',
+    category: 'อาคารพาณิชย์',
+    image: '/images/2021/03/hdpe-pipe_000C.jpg',
+  },
+  {
+    title: 'โครงการโรงงานอุตสาหกรรม',
+    category: 'อุตสาหกรรม',
+    image: '/images/2021/03/ppr-pipe_000C.jpg',
+  },
+  {
+    title: 'โครงการบ้านพักอาศัย',
+    category: 'ที่อยู่อาศัย',
+    image: '/images/2021/03/pvc-pipe_000C.jpg',
+  },
+  {
+    title: 'โครงการระบบดับเพลิง',
+    category: 'ระบบดับเพลิง',
+    image: '/images/2021/03/realflex_000C.jpg',
+  },
+  {
+    title: 'โครงการระบบปรับอากาศ',
+    category: 'HVAC',
+    image: '/images/2021/03/grilles_000C.jpg',
+  },
+  {
+    title: 'โครงการระบบประปา',
+    category: 'ระบบประปา',
+    image: '/images/2021/03/upvc-pipe_000C.jpg',
+  },
+];
+
+export default function PortfolioPage() {
+  return (
+    <div className="pt-32 pb-16">
+      <div className="container mx-auto px-4">
+        {/* Hero */}
+        <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>
+
+        {/* Portfolio Grid */}
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+          {portfolioItems.map((item, index) => (
+            <div key={index} className="card group cursor-pointer">
+              <div className="relative aspect-video bg-secondary-100">
+                <Image
+                  src={item.image}
+                  alt={item.title}
+                  fill
+                  className="object-cover group-hover:scale-105 transition-transform duration-300"
+                />
+                <div className="absolute inset-0 bg-gradient-to-t from-secondary-900/80 to-transparent opacity-0 group-hover:opacity-100 transition-opacity" />
+                <div className="absolute bottom-0 left-0 right-0 p-4 translate-y-full group-hover:translate-y-0 transition-transform">
+                  <span className="text-primary-400 text-sm">{item.category}</span>
+                  <h3 className="text-white font-bold">{item.title}</h3>
+                </div>
+              </div>
+              <div className="p-4 group-hover:hidden">
+                <span className="text-xs text-primary-600 font-semibold">{item.category}</span>
+                <h3 className="text-lg font-bold text-secondary-900 mt-1">{item.title}</h3>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}

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>
+  );
+}

src/app/services/page.tsx

@@ -0,0 +1,83 @@
+import Image from 'next/image';
+
+export const metadata = {
+  title: 'บริการของเรา',
+  description: 'บริการครบวงจร จำหน่ายวัสดุท่อ ให้คำปรึกษา ออกแบบระบบ และติดตั้ง',
+};
+
+const services = [
+  {
+    title: 'จำหน่ายวัสดุท่อ',
+    description: 'จำหน่ายท่อพีพีอาร์ ท่อ HDPE ท่อ PVC วาล์ว และอุปกรณ์ต่อท่อครบวงจร สินค้าคุณภาพ ราคาแข่งขันได้',
+    image: '/images/2021/03/ppr-pipe_000C.jpg',
+  },
+  {
+    title: 'ให้คำปรึกษา',
+    description: 'ทีมงานมืออาชีพพร้อมให้คำปรึกษาเกี่ยวกับการเลือกวัสดุท่อที่เหมาะสมกับโครงการของคุณ',
+    image: '/images/2021/03/hdpe-pipe_000C.jpg',
+  },
+  {
+    title: 'ออกแบบระบบ',
+    description: 'บริการออกแบบระบบท่อน้ำ ระบบดับเพลิง และระบบปรับอากาศ โดยวิศวกรผู้เชี่ยวชาญ',
+    image: '/images/2021/03/valve_000C.jpg',
+  },
+  {
+    title: 'จัดส่งสินค้า',
+    description: 'บริการจัดส่งสินค้าทั่วประเทศ รวดเร็ว ปลอดภัย มีประกันความเสียหาย',
+    image: '/images/2021/03/hdpe-welding_000C-1.jpg',
+  },
+];
+
+export default function ServicesPage() {
+  return (
+    <div className="pt-32 pb-16">
+      <div className="container mx-auto px-4">
+        {/* Hero */}
+        <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>
+
+        {/* Services Grid */}
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+          {services.map((service, index) => (
+            <div key={index} className="card overflow-hidden group">
+              <div className="relative h-64 bg-secondary-100">
+                <Image
+                  src={service.image}
+                  alt={service.title}
+                  fill
+                  className="object-cover group-hover:scale-105 transition-transform duration-300"
+                />
+                <div className="absolute inset-0 bg-gradient-to-t from-secondary-900/80 to-transparent" />
+                <div className="absolute bottom-0 left-0 right-0 p-6">
+                  <h3 className="text-2xl font-bold text-white">{service.title}</h3>
+                </div>
+              </div>
+              <div className="p-6">
+                <p className="text-secondary-600">{service.description}</p>
+              </div>
+            </div>
+          ))}
+        </div>
+
+        {/* CTA */}
+        <div className="mt-16 bg-secondary-800 rounded-2xl p-8 md:p-12 text-center">
+          <h2 className="text-3xl font-bold text-white mb-4">
+            พร้อมเริ่มโครงการของคุณ?
+          </h2>
+          <p className="text-secondary-300 mb-6 max-w-xl mx-auto">
+            ติดต่อเราวันนี้เพื่อรับคำปรึกษาและใบเสนอราคาฟรี
+          </p>
+          <a href="/contact-us" className="btn-primary">
+            ติดต่อเรา
+          </a>
+        </div>
+      </div>
+    </div>
+  );
+}