---
import Layout from '../layouts/Layout.astro';

const title = "รับทำเว็บไซต์ | MoreMiniMore - พัฒนาเว็บไซต์ รองรับ AI + GEO สำหรับ SME ไทย";
const description = "บริการรับทำเว็บไซต์ ราคาเริ่มต้น 10,000 บาท พร้อม Server จดโดเมน รองรับ AI ช่วยแก้ไขเนื้อหา + GEO ติด AI Search ทำเองได้ง่าย ไม่ต้องพึ่งเรา";
---

<Layout title={title} description={description}>

  <!-- Schema.org Structured Data -->
  <script type="application/ld+json" set:html={JSON.stringify({
    "@context": "https://schema.org",
    "@type": "LocalBusiness",
    "name": "MoreminiMore Co.,Ltd.",
    "description": "บริการรับทำเว็บไซต์สำหรับ SME ไทย",
    "telephone": "+66809955945",
    "email": "contact@moreminimore.com",
    "url": "https://www.moreminimore.com/web-development",
    "address": {
      "@type": "PostalAddress",
      "streetAddress": "53 หมู่ 1 ต.บ้านแพ้ว",
      "addressLocality": "บ้านแพ้ว",
      "addressRegion": "สมุทรสาคร",
      "postalCode": "74120",
      "addressCountry": "TH"
    },
    "geo": {
      "@type": "GeoCoordinates",
      "latitude": 13.5497,
      "longitude": 100.4167
    },
    "openingHours": "Mo-Fr 09:00-18:00",
    "priceRange": "$$",
    "serviceType": ["Web Development", "AI Integration", "SEO Optimization", "GEO Optimization", "Server Hosting"]
  })} />

  <!-- BreadcrumbList Schema -->
  <script type="application/ld+json" set:html={JSON.stringify({
    "@context": "https://schema.org",
    "@type": "BreadcrumbList",
    "itemListElement": [
      {
        "@type": "ListItem",
        "position": 1,
        "name": "หน้าแรก",
        "item": "https://www.moreminimore.com"
      },
      {
        "@type": "ListItem",
        "position": 2,
        "name": "รับทำเว็บไซต์",
        "item": "https://www.moreminimore.com/web-development"
      }
    ]
  })} />

  <!-- HowTo Schema for Process -->
  <script type="application/ld+json" set:html={JSON.stringify({
    "@context": "https://schema.org",
    "@type": "HowTo",
    "name": "ขั้นตอนการพัฒนาเว็บไซต์",
    "description": "กระบวนการพัฒนาเว็บไซต์ตั้งแต่ปรึกษาจนถึงส่งมอบ",
    "step": [
      {
        "@type": "HowToStep",
        "name": "ปรึกษา",
        "text": "คุยรายละเอียดและวิเคราะห์ความต้องการของลูกค้า"
      },
      {
        "@type": "HowToStep",
        "name": "ออกแบบ",
        "text": "สร้าง Mockup ให้ดูก่อนพัฒนา"
      },
      {
        "@type": "HowToStep",
        "name": "พัฒนา",
        "text": "เขียนโค้ดและติดตั้งระบบ"
      },
      {
        "@type": "HowToStep",
        "name": "ส่งมอบ",
        "text": "อบรมการใช้งานและส่งมอบเว็บไซต์พร้อมใช้งาน"
      }
    ]
  })} />

  <!-- GEO FAQ Schema -->
  <script type="application/ld+json" set:html={JSON.stringify({
    "@context": "https://schema.org",
    "@type": "FAQPage",
    "mainEntity": [
      {
        "@type": "Question",
        "name": "แก้ไขเว็บเองยากไหม?",
        "acceptedAnswer": {
          "@type": "Answer",
          "text": "ไม่ยากเลย สำหรับ Astro การแก้ไขเนื้อหาจะเน้นการคุยกับ AI ให้ช่วยสร้างและปรับแต่งเนื้อหา ส่วน WordPress มาพร้อมระบบหลังบ้านที่มีหน้าตาการใช้งานง่าย คุณสามารถเปลี่ยนข้อความ รูปภาพ สินค้า ได้ด้วยตัวเองโดยไม่ต้องมีความรู้ทางเทคนิค"
        }
      },
      {
        "@type": "Question",
        "name": "มีค่าใช้จ่ายอะไรเพิ่มเติมไหม?",
        "acceptedAnswer": {
          "@type": "Answer",
          "text": "ค่าบริการ Server และโดเมนจะฟรีในปีแรก และจะมีค่าใช้จ่ายในปีถัดไป ค่าบริการ Server จะขึ้นอยู่กับความซับซ้อนของเว็บไซต์และจำนวนผู้เข้าชม หากเว็บไซต์มีผู้เข้าชมเกิน 100,000 คนต่อเดือน ค่าบริการ Server จะปรับเพิ่มขึ้น"
        }
      },
      {
        "@type": "Question",
        "name": "Server ดูแลให้ไหม?",
        "acceptedAnswer": {
          "@type": "Answer",
          "text": "เราดูแลเรื่อง Server ให้ครบวงจร รวมถึงการปรับจูนระบบให้มีประสิทธิภาพสูงสุด ลูกค้าจะจ่ายค่า Server เพิ่มเฉพาะกรณีที่มีผู้เข้าเว็บใช้งานสูงมาก ระดับ 100,000 คนต่อเดือนขึ้นไป หรือต้องการติดตั้งแอปพิเศษเพิ่มเติม"
        }
      },
      {
        "@type": "Question",
        "name": "ทำเว็บขายของ (E-commerce) ได้ไหม?",
        "acceptedAnswer": {
          "@type": "Answer",
          "text": "ทำได้แน่นอน เราใช้ WordPress เป็นพื้นฐานในการพัฒนาเว็บไซต์ E-commerce พร้อมระบบตะกร้าสินค้า ชำระเงิน ติดตามสินค้า และระบบหลังบ้านจัดการสินค้าครบวงจร"
        }
      },
      {
        "@type": "Question",
        "name": "ต้องมีความรู้ทางเทคนิคไหม?",
        "acceptedAnswer": {
          "@type": "Answer",
          "text": "ไม่จำเป็นเลย เราดูแลทุกอย่างตั้งแต่ต้นจนจบ ตั้งแต่การออกแบบ พัฒนา ไปจนถึงการติดตั้งและส่งมอบ พร้อมทั้งอบรมการใช้งานให้ทีมของคุณสามารถใช้งานระบบได้อย่างมั่นใจ"
        }
      },
      {
        "@type": "Question",
        "name": "GEO คืออะไร?",
        "acceptedAnswer": {
          "@type": "Answer",
          "text": "GEO (Generative Engine Optimization) คือการปรับแต่งเนื้อหาและโครงสร้างเว็บไซต์ให้ถูกอ้างอิงโดย AI Search Engine เช่น ChatGPT, Perplexity, Google AI Overviews ทำให้ธุรกิจของคุณปรากฏในคำตอบของ AI นอกจากจะติด Google ปกติแล้ว ยังติด AI Search อีกด้วย"
        }
      }
    ]
  })} />

  <!-- Hero Section - Teal Theme -->
  <section class="relative overflow-hidden min-h-[60vh] flex items-center bg-gradient-to-br from-teal-500 via-teal-600 to-teal-700">
    <!-- Animated Background Elements -->
    <div class="absolute inset-0 overflow-hidden pointer-events-none">
      <div class="absolute top-20 left-10 w-72 h-72 bg-white/10 rounded-full blur-3xl animate-float"></div>
      <div class="absolute bottom-20 right-10 w-96 h-96 bg-teal-400/20 rounded-full blur-3xl animate-float" style="animation-delay: 1s;"></div>
      <div class="absolute top-1/3 left-1/4 w-48 h-48 bg-white/5 rounded-full blur-2xl animate-float" style="animation-delay: 2s;"></div>
    </div>

    <div class="container mx-auto px-4 relative z-10 py-20">
      <div class="max-w-4xl mx-auto text-center">
        <!-- Badge -->
        <div class="inline-flex items-center gap-2 bg-white/20 backdrop-blur-sm px-4 py-2 rounded-full mb-6">
          <span class="w-2 h-2 bg-green-400 rounded-full animate-pulse"></span>
          <span class="text-sm font-medium text-white/90">บริการรับทำเว็บไซต์สำหรับ SME ไทย</span>
        </div>

        <!-- Main Headline -->
        <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 text-white leading-tight">
          สร้างเว็บไซต์<br/>
          <span class="text-teal-200">เปลี่ยนแปลงเองได้</span><br/>
          ด้วย AI
        </h1>

        <!-- Subheadline -->
        <p class="text-lg md:text-xl text-white/90 mb-10 max-w-2xl mx-auto leading-relaxed">
          เว็บไซต์ที่คุณแก้ไขเองได้ง่าย ๆ ไม่ต้องรอเราทุกครั้ง<br/>
          พร้อม AI ช่วยสร้างเนื้อหาใหม่ ๆ ให้ทันที<br/>
          <span class="text-yellow-300 font-medium">+ GEO ติด ChatGPT, Perplexity, AI Search</span>
        </p>

        <!-- CTAs -->
        <div class="flex flex-col sm:flex-row gap-4 justify-center items-center">
          <a href="tel:0809955945" class="group bg-white text-teal-700 px-8 py-4 rounded-full font-bold text-lg hover:bg-teal-50 transition-all duration-300 hover:scale-105 shadow-2xl flex items-center gap-3">
            <svg class="w-5 h-5 group-hover:animate-bounce" fill="currentColor" viewBox="0 0 24 24">
              <path d="M20 15.5c-1.25 0-2.45-.2-3.57-.57-.35-.11-.74-.03-1.02.24l-2.2 2.2c-2.83-1.44-5.15-3.75-6.59-6.59l2.2-2.21c.28-.26.36-.65.25-1C8.7 6.45 8.5 5.25 8.5 4c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1 0 9.39 7.61 17 17 17 .55 0 1-.45 1-1v-3.5c0-.55-.45-1-1-1z"/>
            </svg>
            โทรหาเรา
          </a>
          <a href="https://line.me/ti/p/~@539hdlul" target="_blank" rel="noopener noreferrer" class="group bg-teal-800/50 backdrop-blur-sm text-white border-2 border-white/30 px-8 py-4 rounded-full font-bold text-lg hover:bg-white hover:text-teal-700 transition-all duration-300 hover:scale-105 shadow-2xl flex items-center gap-3">
            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
              <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.627-.63h2.386c.349 0 .63.285.63.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.627-.63.349 0 .631.285.631.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>

        <!-- Trust Badges -->
        <div class="mt-10 pt-6 border-t border-white/20">
          <div class="flex flex-wrap justify-center gap-6 text-white/80 text-sm">
            <span class="flex items-center gap-2">
              <svg class="w-4 h-4 text-green-300" fill="currentColor" viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>
              ปรึกษาฟรี
            </span>
            <span class="flex items-center gap-2">
              <svg class="w-4 h-4 text-green-300" fill="currentColor" viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>
              ดูแลหลังขาย
            </span>
            <span class="flex items-center gap-2">
              <svg class="w-4 h-4 text-green-300" fill="currentColor" viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>
              ราคาเหมาะสม
            </span>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- Why Choose Us -->
  <section class="py-20 bg-gradient-to-b from-gray-50 to-white">
    <div class="container mx-auto px-4 max-w-6xl">
      <h2 class="text-3xl md:text-4xl font-bold mb-4 text-center text-gray-900">
        ทำไมต้องเลือกเรา?
      </h2>
      <p class="text-lg text-gray-600 text-center mb-16 max-w-2xl mx-auto">
        เราสร้างเว็บไซต์ให้คุณสามารถจัดการเองได้ ไม่ต้องพึ่งเราทุกครั้ง
      </p>

      <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
        <!-- Benefit 1 -->
        <div class="group bg-white rounded-2xl p-8 shadow-lg hover:shadow-2xl transition-all duration-300 hover:-translate-y-2 border border-gray-100">
          <div class="w-16 h-16 bg-teal-500 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
            <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
            </svg>
          </div>
          <h3 class="text-xl font-bold mb-3 text-gray-900">แก้ไขเองได้ง่าย</h3>
          <p class="text-gray-600">
            ระบบหลังบ้านใช้งานง่าย เปลี่ยนข้อความ รูปภาพ สินค้า ได้ด้วยตัวเอง ไม่ต้องมีความรู้เทคนิค
          </p>
        </div>

        <!-- Benefit 2 -->
        <div class="group bg-white rounded-2xl p-8 shadow-lg hover:shadow-2xl transition-all duration-300 hover:-translate-y-2 border border-gray-100">
          <div class="w-16 h-16 bg-teal-500 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
            <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
            </svg>
          </div>
          <h3 class="text-xl font-bold mb-3 text-gray-900">AI ช่วยสร้างเนื้อหา</h3>
          <p class="text-gray-600">
            สั่ง AI ให้เขียนบทความ แก้ไขเนื้อหา เพิ่มสินค้าใหม่ ได้ทันที ไม่ต้องรอคนช่วย
          </p>
        </div>

        <!-- Benefit 3 - GEO -->
        <div class="group bg-white rounded-2xl p-8 shadow-lg hover:shadow-2xl transition-all duration-300 hover:-translate-y-2 border-2 border-purple-200">
          <div class="w-16 h-16 bg-gradient-to-br from-purple-500 to-indigo-600 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
            <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"></path>
            </svg>
          </div>
          <h3 class="text-xl font-bold mb-3 text-gray-900">GEO ติด AI Search</h3>
          <p class="text-gray-600">
            เว็บไซต์ถูกอ้างอิงโดย ChatGPT, Perplexity, Google AI Overviews นอกจากติด Google ยังติด AI ด้วย
          </p>
        </div>

        <!-- Benefit 4 -->
        <div class="group bg-white rounded-2xl p-8 shadow-lg hover:shadow-2xl transition-all duration-300 hover:-translate-y-2 border border-gray-100">
          <div class="w-16 h-16 bg-teal-500 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
            <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="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"></path>
            </svg>
          </div>
          <h3 class="text-xl font-bold mb-3 text-gray-900">Server คุณภาพสูง</h3>
          <p class="text-gray-600">
            เราดูแล Server ให้ เว็บไซต์โหลดเร็ว ปลอดภัย มีปัญหาน้อย ส่งผลดีต่อ SEO
          </p>
        </div>
      </div>
    </div>
  </section>

  <!-- What's Included -->
  <section class="py-20 bg-white">
    <div class="container mx-auto px-4 max-w-6xl">
      <h2 class="text-3xl md:text-4xl font-bold mb-4 text-center text-gray-900">
        สิ่งที่ได้รับ
      </h2>
      <p class="text-lg text-gray-600 text-center mb-16 max-w-2xl mx-auto">
        ทุกเว็บไซต์มาพร้อมให้ครบ ไม่ต้องจ่ายเพิ่ม
      </p>

      <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
        <div class="bg-gray-50 rounded-xl p-6 text-center">
          <div class="w-12 h-12 bg-teal-500 rounded-full flex items-center justify-center mx-auto mb-4">
            <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0 3-4.03 3-9s-1.343-9-3-9m-9 9a9 9 0 019-9"></path>
            </svg>
          </div>
          <h3 class="font-bold text-gray-900 mb-1">เว็บไซต์</h3>
          <p class="text-sm text-gray-600">พร้อมใช้งาน</p>
        </div>

        <div class="bg-gray-50 rounded-xl p-6 text-center">
          <div class="w-12 h-12 bg-teal-500 rounded-full flex items-center justify-center mx-auto mb-4">
            <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path>
            </svg>
          </div>
          <h3 class="font-bold text-gray-900 mb-1">SSL ฟรี</h3>
          <p class="text-sm text-gray-600">ปลอดภัยทุกการเข้าชม</p>
        </div>

        <div class="bg-gray-50 rounded-xl p-6 text-center">
          <div class="w-12 h-12 bg-teal-500 rounded-full flex items-center justify-center mx-auto mb-4">
            <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0 3-4.03 3-9s-1.343-9-3-9m-9 9a9 9 0 019-9"></path>
            </svg>
          </div>
          <h3 class="font-bold text-gray-900 mb-1">โดเมน</h3>
          <p class="text-sm text-gray-600">จดให้ได้เลย</p>
        </div>

        <div class="bg-gray-50 rounded-xl p-6 text-center">
          <div class="w-12 h-12 bg-teal-500 rounded-full flex items-center justify-center mx-auto mb-4">
            <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
            </svg>
          </div>
          <h3 class="font-bold text-gray-900 mb-1">Analytics</h3>
          <p class="text-sm text-gray-600">ติดตามผู้เข้าชม</p>
        </div>
      </div>
    </div>
  </section>

  <!-- Target Audience -->
  <section class="py-20 bg-white">
    <div class="container mx-auto px-4 max-w-4xl">
      <h2 class="text-3xl md:text-4xl font-bold mb-4 text-center text-gray-900">
        เหมาะกับใคร?
      </h2>
      <p class="text-lg text-gray-600 text-center mb-12 max-w-2xl mx-auto">
        บริการของเราเหมาะสำหรับธุรกิจหลากหลายประเภท
      </p>

      <div class="grid md:grid-cols-3 gap-6">
        <div class="bg-gradient-to-br from-teal-50 to-teal-100 rounded-2xl p-6 text-center border border-teal-200">
          <div class="w-16 h-16 bg-teal-500 rounded-2xl flex items-center justify-center mx-auto mb-4">
            <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path>
            </svg>
          </div>
          <h3 class="text-lg font-bold text-gray-900 mb-2">SME / ธุรกิจขนาดเล็ก</h3>
          <p class="text-sm text-gray-600">ธุรกิจท้องถิ่น ร้านค้าปลีก บริการต่าง ๆ ที่ต้องการเว็บไซต์ในราคาที่เข้าถึงได้</p>
        </div>

        <div class="bg-gradient-to-br from-green-50 to-green-100 rounded-2xl p-6 text-center border border-green-200">
          <div class="w-16 h-16 bg-green-500 rounded-2xl flex items-center justify-center mx-auto mb-4">
            <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"></path>
            </svg>
          </div>
          <h3 class="text-lg font-bold text-gray-900 mb-2">ร้านค้าออนไลน์</h3>
          <p class="text-sm text-gray-600">ธุรกิจ E-commerce ที่ต้องการขายสินค้าออนไลน์ พร้อมระบบตะกร้าและชำระเงินครบวงจร</p>
        </div>

        <div class="bg-gradient-to-br from-blue-50 to-blue-100 rounded-2xl p-6 text-center border border-blue-200">
          <div class="w-16 h-16 bg-blue-500 rounded-2xl flex items-center justify-center mx-auto mb-4">
            <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path>
            </svg>
          </div>
          <h3 class="text-lg font-bold text-gray-900 mb-2">บริษัท / องค์กร</h3>
          <p class="text-sm text-gray-600">บริษัทที่ต้องการเว็บไซต์องค์กร เว็บไซต์แนะนำบริษัท หรือเว็บไซต์ในระบบ Intranet</p>
        </div>
      </div>
    </div>
  </section>

  <!-- Timeline -->
  <section class="py-20 bg-white">
    <div class="container mx-auto px-4 max-w-4xl">
      <h2 class="text-3xl md:text-4xl font-bold mb-4 text-center text-gray-900">
        ระยะเวลาในการพัฒนา
      </h2>
      <p class="text-lg text-gray-600 text-center mb-12 max-w-2xl mx-auto">
        ขึ้นอยู่กับความซับซ้อนของงาน และสื่อที่ลูกค้าให้
      </p>

      <div class="grid md:grid-cols-2 gap-8">
        <!-- Astro Timeline -->
        <div class="bg-gradient-to-br from-teal-50 to-teal-100 rounded-2xl p-8 border border-teal-200">
          <div class="flex items-center gap-3 mb-4">
            <div class="w-12 h-12 bg-gradient-to-br from-teal-600 to-teal-700 rounded-lg flex items-center justify-center">
              <span class="text-white font-bold">A</span>
            </div>
            <div>
              <h3 class="text-xl font-bold text-gray-900">Astro</h3>
              <p class="text-sm text-gray-600">เว็บไซต์ทั่วไป / Corporate / Blog</p>
            </div>
          </div>
          <div class="flex items-center gap-4">
            <div class="text-4xl font-bold text-teal-600">14-30</div>
            <div class="text-gray-600">วัน<br/><span class="text-sm">(ขึ้นอยู่กับความซับซ้อน)</span></div>
          </div>
        </div>

        <!-- WordPress Timeline -->
        <div class="bg-gradient-to-br from-blue-50 to-blue-100 rounded-2xl p-8 border border-blue-200">
          <div class="flex items-center gap-3 mb-4">
            <div class="w-12 h-12 bg-blue-600 rounded-lg flex items-center justify-center">
              <span class="text-white font-bold">WP</span>
            </div>
            <div>
              <h3 class="text-xl font-bold text-gray-900">WordPress</h3>
              <p class="text-sm text-gray-600">เว็บขายของ / E-commerce</p>
            </div>
          </div>
          <div class="flex items-center gap-4">
            <div class="text-4xl font-bold text-blue-600">2-4</div>
            <div class="text-gray-600">เดือน<br/><span class="text-sm">(ขึ้นอยู่กับความซับซ้อน)</span></div>
          </div>
        </div>
      </div>

      <p class="text-center text-gray-500 mt-6 text-sm">
        * ระยะเวลาอาจเปลี่ยนแปลงตามความพร้อมของเนื้อหาและสื่อที่ลูกค้าจัดเตรียมให้
      </p>
    </div>
  </section>

  <!-- Pricing -->
  <section class="py-20 bg-gray-50">
    <div class="container mx-auto px-4 max-w-4xl">
      <h2 class="text-3xl md:text-4xl font-bold mb-4 text-center text-gray-900">
        ราคาค่าบริการ
      </h2>
      <p class="text-lg text-gray-600 text-center mb-12 max-w-2xl mx-auto">
        ชัดเจน ไม่มีค่าใช้จ่ายซ่อนเร้น
      </p>

      <div class="bg-white rounded-2xl shadow-xl overflow-hidden">
        <div class="grid md:grid-cols-2 divide-x divide-gray-100">
          <!-- Development -->
          <div class="p-8">
            <h3 class="text-xl font-bold text-gray-900 mb-6">ค่าพัฒนาเว็บไซต์</h3>
            <div class="space-y-4">
              <div class="flex justify-between items-center py-3 border-b border-gray-100">
                <span class="text-gray-600">เว็บไซต์ Astro (AI Ready)</span>
                <span class="font-bold text-teal-600">เริ่มต้น ฿10,000</span>
              </div>
              <div class="flex justify-between items-center py-3 border-b border-gray-100">
                <span class="text-gray-600">เว็บไซต์ WordPress</span>
                <span class="font-bold text-teal-600">เริ่มต้น ฿15,000</span>
              </div>
              <div class="flex justify-between items-center py-3">
                <span class="text-gray-600">Landing Page</span>
                <span class="font-bold text-teal-600">เริ่มต้น ฿5,000</span>
              </div>
            </div>
          </div>

          <!-- Server & Domain -->
          <div class="p-8">
            <h3 class="text-xl font-bold text-gray-900 mb-6">ค่าบริการต่อปี</h3>
            <div class="space-y-4">
              <div class="flex justify-between items-center py-3 border-b border-gray-100">
                <span class="text-gray-600">Server Hosting</span>
                <span class="font-bold text-teal-600">฿5,000/ปี</span>
              </div>
              <div class="flex justify-between items-center py-3 border-b border-gray-100">
                <span class="text-gray-600">Domain .com</span>
                <span class="font-bold text-teal-600">฿500/ปี</span>
              </div>
              <div class="flex justify-between items-center py-3">
                <span class="text-gray-600">Domain อื่น ๆ</span>
                <span class="font-bold text-teal-600">ตามราคาจด</span>
              </div>
            </div>
          </div>
        </div>

        <div class="bg-teal-50 px-8 py-4 text-center">
          <p class="text-gray-700">
            <strong>รวม:</strong> เว็บไซต์ + Server 1 ปี + Domain .com = เริ่มต้น ฿15,500*
          </p>
          <p class="text-sm text-gray-500 mt-1">*ราคาขึ้นอยู่กับความซับซ้อนของเว็บไซต์</p>
        </div>
      </div>
    </div>
  </section>

  <!-- Technology -->
  <section class="py-20 bg-white">
    <div class="container mx-auto px-4 max-w-4xl">
      <h2 class="text-3xl md:text-4xl font-bold mb-4 text-center text-gray-900">
        เลือกระบบที่เหมาะกับคุณ
      </h2>
      <p class="text-lg text-gray-600 text-center mb-12 max-w-2xl mx-auto">
        เรามีให้เลือก 2 ระบบ ตามความต้องการ
      </p>

      <div class="grid md:grid-cols-2 gap-8">
        <!-- Astro -->
        <div class="border-2 border-gray-200 rounded-2xl p-8 hover:border-teal-500 hover:shadow-xl transition-all">
          <div class="flex items-center gap-3 mb-4">
            <div class="w-12 h-12 bg-gradient-to-br from-teal-600 to-teal-700 rounded-lg flex items-center justify-center">
              <span class="text-white font-bold">A</span>
            </div>
            <h3 class="text-xl font-bold text-gray-900">Astro</h3>
          </div>
          <p class="text-gray-600 mb-4">เหมาะสำหรับ:</p>
          <ul class="space-y-2 mb-6">
            <li class="flex items-start gap-2">
              <svg class="w-5 h-5 text-teal-500 mt-0.5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>
              <span class="text-gray-600">เว็บไซต์ทั่วไป / Corporate</span>
            </li>
            <li class="flex items-start gap-2">
              <svg class="w-5 h-5 text-teal-500 mt-0.5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>
              <span class="text-gray-600">เน้น AI และ SEO</span>
            </li>
            <li class="flex items-start gap-2">
              <svg class="w-5 h-5 text-teal-500 mt-0.5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>
              <span class="text-gray-600">โหลดเร็ว ประสิทธิภาพสูง</span>
            </li>
            <li class="flex items-start gap-2">
              <svg class="w-5 h-5 text-teal-500 mt-0.5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>
              <span class="text-gray-600">บล็อก / เว็บบริษัท</span>
            </li>
          </ul>
        </div>

        <!-- WordPress -->
        <div class="border-2 border-gray-200 rounded-2xl p-8 hover:border-teal-500 hover:shadow-xl transition-all">
          <div class="flex items-center gap-3 mb-4">
            <div class="w-12 h-12 bg-blue-600 rounded-lg flex items-center justify-center">
              <span class="text-white font-bold">WP</span>
            </div>
            <h3 class="text-xl font-bold text-gray-900">WordPress</h3>
          </div>
          <p class="text-gray-600 mb-4">เหมาะสำหรับ:</p>
          <ul class="space-y-2 mb-6">
            <li class="flex items-start gap-2">
              <svg class="w-5 h-5 text-teal-500 mt-0.5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>
              <span class="text-gray-600">เว็บขายของ (E-commerce)</span>
            </li>
            <li class="flex items-start gap-2">
              <svg class="w-5 h-5 text-teal-500 mt-0.5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>
              <span class="text-gray-600">เว็บไซต์ที่ซับซ้อน</span>
            </li>
            <li class="flex items-start gap-2">
              <svg class="w-5 h-5 text-teal-500 mt-0.5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>
              <span class="text-gray-600">มีระบบหลังบ้านซับซ้อน</span>
            </li>
            <li class="flex items-start gap-2">
              <svg class="w-5 h-5 text-teal-500 mt-0.5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>
              <span class="text-gray-600">ต้องการ Plugin เยอะ</span>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </section>

  <!-- FAQ -->
  <section class="py-20 bg-gray-50">
    <div class="container mx-auto px-4 max-w-4xl">
      <h2 class="text-3xl md:text-4xl font-bold mb-4 text-center text-gray-900">
        คำถามที่พบบ่อย
      </h2>
      <p class="text-lg text-gray-600 text-center mb-12 max-w-2xl mx-auto">
        คำถามที่ลูกค้ามักถามเกี่ยวกับบริการเว็บไซต์ของเรา
      </p>

      <div class="space-y-4">
        <!-- FAQ 1 -->
        <div class="bg-white rounded-xl shadow-sm overflow-hidden">
          <details class="group">
            <summary class="flex items-center justify-between p-6 cursor-pointer list-none">
              <span class="font-semibold text-gray-900">แก้ไขเว็บเองยากไหม?</span>
              <span class="transition group-open:rotate-180">
                <svg fill="none" height="24" shape-rendering="geometricPrecision" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 24 24" width="24"><path d="M6 9l6 6 6-6"></path></svg>
              </span>
            </summary>
            <div class="text-gray-600 px-6 pb-6">
              <p>ไม่ยากเลย สำหรับ <strong>Astro</strong> การแก้ไขเนื้อหาจะเน้นการคุยกับ AI ให้ช่วยสร้างและปรับแต่งเนื้อหา ส่วน <strong>WordPress</strong> มาพร้อมระบบหลังบ้านที่มีหน้าตาการใช้งานง่าย คุณสามารถเปลี่ยนข้อความ รูปภาพ สินค้า ได้ด้วยตัวเองโดยไม่ต้องมีความรู้ทางเทคนิค</p>
            </div>
          </details>
        </div>

        <!-- FAQ 2 -->
        <div class="bg-white rounded-xl shadow-sm overflow-hidden">
          <details class="group">
            <summary class="flex items-center justify-between p-6 cursor-pointer list-none">
              <span class="font-semibold text-gray-900">มีค่าใช้จ่ายอะไรเพิ่มเติมไหม?</span>
              <span class="transition group-open:rotate-180">
                <svg fill="none" height="24" shape-rendering="geometricPrecision" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 24 24" width="24"><path d="M6 9l6 6 6-6"></path></svg>
              </span>
            </summary>
            <div class="text-gray-600 px-6 pb-6">
              <p>ค่าบริการ Server และโดเมนจะ<strong>ฟรีในปีแรก</strong> และจะมีค่าใช้จ่ายในปีถัดไป ทั้งนี้ค่าบริการ Server จะขึ้นอยู่กับความซับซ้อนของเว็บไซต์และจำนวนผู้เข้าชม หากเว็บไซต์มีความซับซ้อนสูง หรือมีผู้เข้าชมเกิน <strong>100,000 คนต่อเดือน</strong> ค่าบริการ Server จะปรับเพิ่มขึ้นเพื่อรองรับปริมาณการใช้งาน</p>
            </div>
          </details>
        </div>

        <!-- FAQ 3 -->
        <div class="bg-white rounded-xl shadow-sm overflow-hidden">
          <details class="group">
            <summary class="flex items-center justify-between p-6 cursor-pointer list-none">
              <span class="font-semibold text-gray-900">Server ดูแลให้ไหม?</span>
              <span class="transition group-open:rotate-180">
                <svg fill="none" height="24" shape-rendering="geometricPrecision" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 24 24" width="24"><path d="M6 9l6 6 6-6"></path></svg>
              </span>
            </summary>
            <div class="text-gray-600 px-6 pb-6">
              <p>เราดูแลเรื่อง Server ให้คุณโดยครบวงจร รวมถึงการปรับจูนระบบให้มีประสิทธิภาพสูงสุด ลูกค้าจะจ่ายค่า Server เพิ่มเฉพาะกรณีที่มีผู้เข้าเว็บใช้งานสูงมาก ระดับ <strong>100,000 คนต่อเดือนขึ้นไป</strong> หรือต้องการติดตั้งแอปพิเศษเพิ่มเติม</p>
            </div>
          </details>
        </div>

        <!-- FAQ 4 -->
        <div class="bg-white rounded-xl shadow-sm overflow-hidden">
          <details class="group">
            <summary class="flex items-center justify-between p-6 cursor-pointer list-none">
              <span class="font-semibold text-gray-900">ทำเว็บขายของ (E-commerce) ได้ไหม?</span>
              <span class="transition group-open:rotate-180">
                <svg fill="none" height="24" shape-rendering="geometricPrecision" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 24 24" width="24"><path d="M6 9l6 6 6-6"></path></svg>
              </span>
            </summary>
            <div class="text-gray-600 px-6 pb-6">
              <p>ทำได้แน่นอน เราใช้ <strong>WordPress</strong> เป็นพื้นฐานในการพัฒนาเว็บไซต์ E-commerce พร้อมระบบตะกร้าสินค้า ชำระเงิน ติดตามสินค้า และระบบหลังบ้านจัดการสินค้าครบวงจร</p>
            </div>
          </details>
        </div>

        <!-- FAQ 5 -->
        <div class="bg-white rounded-xl shadow-sm overflow-hidden">
          <details class="group">
            <summary class="flex items-center justify-between p-6 cursor-pointer list-none">
              <span class="font-semibold text-gray-900">Server สามารถติดตั้งแอปอื่นเพิ่มเติมได้ไหม?</span>
              <span class="transition group-open:rotate-180">
                <svg fill="none" height="24" shape-rendering="geometricPrecision" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 24 24" width="24"><path d="M6 9l6 6 6-6"></path></svg>
              </span>
            </summary>
            <div class="text-gray-600 px-6 pb-6">
              <p>ได้เลย หากลูกค้าใช้บริการ Server และจดทะเบียนโดเมนกับเรา สามารถให้เราติดตั้งแอปพิเศษเพิ่มเติมใน Server ได้ตามต้องการ ไม่จำกัดว่าต้องใช้กับเว็บไซต์เท่านั้น ซึ่งเป็น<strong>Value Added</strong> ที่ลูกค้าจะได้รับมากกว่าการใช้บริการจากเจ้าอื่น</p>
            </div>
          </details>
        </div>

        <!-- FAQ 6 -->
        <div class="bg-white rounded-xl shadow-sm overflow-hidden">
          <details class="group">
            <summary class="flex items-center justify-between p-6 cursor-pointer list-none">
              <span class="font-semibold text-gray-900">ต้องมีความรู้ทางเทคนิคไหม?</span>
              <span class="transition group-open:rotate-180">
                <svg fill="none" height="24" shape-rendering="geometricPrecision" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24" width="24"><path d="M6 9l6 6 6-6"></path></svg>
              </span>
            </summary>
            <div class="text-gray-600 px-6 pb-6">
              <p><strong>ไม่จำเป็นเลย!</strong> เราดูแลทุกอย่างตั้งแต่ต้นจนจบ ตั้งแต่การออกแบบ พัฒนา ไปจนถึงการติดตั้งและส่งมอบ พร้อมทั้งอบรมการใช้งานให้ทีมของคุณสามารถใช้งานระบบได้อย่างมั่นใจ</p>
            </div>
          </details>
        </div>

        <!-- FAQ 7 - GEO -->
        <div class="bg-white rounded-xl shadow-sm overflow-hidden border-2 border-purple-100">
          <details class="group">
            <summary class="flex items-center justify-between p-6 cursor-pointer list-none">
              <span class="font-semibold text-gray-900">GEO คืออะไร? ทำไมต้องมี?</span>
              <span class="transition group-open:rotate-180">
                <svg fill="none" height="24" shape-rendering="geometricPrecision" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 24 24" width="24"><path d="M6 9l6 6 6-6"></path></svg>
              </span>
            </summary>
            <div class="text-gray-600 px-6 pb-6">
              <p><strong>GEO (Generative Engine Optimization)</strong> คือการปรับแต่งเนื้อหาและโครงสร้างเว็บไซต์ให้ถูกอ้างอิงโดย AI Search Engine เช่น ChatGPT, Perplexity, Google AI Overviews<br/>
              <strong>ทำไมต้องมี?</strong> เพราะคนจำนวนมากเริ่มใช้ AI ค้นหาข้อมูลแทน Google ถ้าเว็บของคุณถูก AI อ้างอิง จะเป็นการโฆษณาฟรีที่มีประสิทธิภาพสูงมาก เราทำทั้ง SEO (ติด Google) และ GEO (ติด AI Search) คู่กัน</p>
            </div>
          </details>
        </div>
      </div>
    </div>
  </section>

  <!-- Process -->
  <section class="py-20 bg-white">
    <div class="container mx-auto px-4 max-w-4xl">
      <h2 class="text-3xl md:text-4xl font-bold mb-4 text-center text-gray-900">
        ขั้นตอนการทำงาน
      </h2>
      <p class="text-lg text-gray-600 text-center mb-12 max-w-2xl mx-auto">
        กระบวนการทำงานที่ชัดเจน ส่งมอบตรงเวลา
      </p>

      <div class="grid md:grid-cols-4 gap-4">
        <div class="text-center">
          <div class="w-16 h-16 bg-teal-500 rounded-full flex items-center justify-center mx-auto mb-4 text-2xl font-bold text-white">1</div>
          <h3 class="font-bold text-gray-900 mb-2">ปรึกษา</h3>
          <p class="text-sm text-gray-600">คุยรายละเอียด วิเคราะห์ความต้องการ</p>
        </div>
        <div class="text-center">
          <div class="w-16 h-16 bg-teal-500 rounded-full flex items-center justify-center mx-auto mb-4 text-2xl font-bold text-white">2</div>
          <h3 class="font-bold text-gray-900 mb-2">ออกแบบ</h3>
          <p class="text-sm text-gray-600">สร้าง Mockup ให้ดูก่อนพัฒนา</p>
        </div>
        <div class="text-center">
          <div class="w-16 h-16 bg-teal-500 rounded-full flex items-center justify-center mx-auto mb-4 text-2xl font-bold text-white">3</div>
          <h3 class="font-bold text-gray-900 mb-2">พัฒนา</h3>
          <p class="text-sm text-gray-600">เขียนโค้ด ติดตั้งระบบ</p>
        </div>
        <div class="text-center">
          <div class="w-16 h-16 bg-teal-500 rounded-full flex items-center justify-center mx-auto mb-4 text-2xl font-bold text-white">4</div>
          <h3 class="font-bold text-gray-900 mb-2">ส่งมอบ</h3>
          <p class="text-sm text-gray-600">อบรมการใช้งาน พร้อมใช้งาน</p>
        </div>
      </div>
    </div>
  </section>

  <!-- Portfolio Link -->
  <section class="py-20 bg-gray-900">
    <div class="container mx-auto px-4 max-w-4xl text-center">
      <h2 class="text-3xl md:text-4xl font-bold mb-4 text-white">
        ดูผลงานของเรา
      </h2>
      <p class="text-lg text-gray-300 mb-8 max-w-2xl mx-auto">
        ผลงานเว็บไซต์ที่เราได้ส่งมอบให้กับลูกค้าจริง คุณสามารถดูรายละเอียดและเข้าเยี่ยมชมเว็บไซต์ได้โดยตรง
      </p>
      <a href="/portfolio" class="inline-flex items-center gap-3 bg-teal-500 text-white px-8 py-4 rounded-full font-bold text-lg hover:bg-teal-400 transition-all duration-300 hover:scale-105 shadow-2xl">
        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
        </svg>
        ดูผลงานทั้งหมด
      </a>
    </div>
  </section>

  <!-- CTA Section -->
  <section class="py-20 bg-gradient-to-r from-teal-500 to-teal-600">
    <div class="container mx-auto px-4 text-center">
      <h2 class="text-3xl md:text-4xl font-bold mb-6 text-white">
        พร้อมสร้างเว็บไซต์แล้วหรือยัง?
      </h2>
      <p class="text-xl mb-8 max-w-2xl mx-auto text-white/90">
        ติดต่อเราเพื่อคุยกันและให้คำปรึกษาฟรี! เราพร้อมช่วยคุณสร้างเว็บไซต์ที่ตอบโจทย์ธุรกิจ
      </p>
      <div class="flex flex-col sm:flex-row gap-4 justify-center">
        <a href="tel:0809955945" class="group bg-white text-teal-700 px-8 py-4 rounded-full font-bold text-lg hover:bg-teal-50 transition-all duration-300 hover:scale-105 shadow-2xl inline-flex items-center justify-center gap-3">
          <svg class="w-5 h-5 group-hover:animate-bounce" fill="currentColor" viewBox="0 0 24 24">
            <path d="M20 15.5c-1.25 0-2.45-.2-3.57-.57-.35-.11-.74-.03-1.02.24l-2.2 2.2c-2.83-1.44-5.15-3.75-6.59-6.59l2.2-2.21c.28-.26.36-.65.25-1C8.7 6.45 8.5 5.25 8.5 4c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1 0 9.39 7.61 17 17 17 .55 0 1-.45 1-1v-3.5c0-.55-.45-1-1-1z"/>
          </svg>
          080-995-5945
        </a>
        <a href="https://line.me/ti/p/~@539hdlul" target="_blank" rel="noopener noreferrer" class="group bg-teal-800 text-white px-8 py-4 rounded-full font-bold text-lg hover:bg-teal-700 transition-all duration-300 hover:scale-105 shadow-2xl inline-flex items-center justify-center gap-3">
          <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
            <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.627-.63h2.386c.349 0 .63.285.63.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.627-.63.349 0 .631.285.631.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>
  </section>

</Layout>

<style>
  @keyframes float {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    33% { transform: translateY(-20px) rotate(2deg); }
    66% { transform: translateY(-10px) rotate(-1deg); }
  }

  .animate-float {
    animation: float 6s ease-in-out infinite;
  }
</style>
