moreminimore-website/src/pages/index.astro

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

<Layout title="มอร์มินิมอร์ | IT Services สำหรับ SMEs ไทย">
  <!-- Hero Section -->
  <section class="relative py-32 gradient-hero text-white overflow-hidden">
    <div class="container mx-auto px-4 relative z-10">
      <div class="max-w-5xl mx-auto text-center">
        <h1 class="text-5xl md:text-7xl font-bold mb-8 leading-tight">
          IT Solutions เพื่อ SMEs ไทย
          <br />
          <span class="text-primary">รวดเร็ว คุ้มค่า ด้วยพลัง AI</span>
        </h1>
        <p class="text-2xl md:text-3xl mb-10 max-w-3xl mx-auto text-gray-100">
          moreminimore มอบบริการ IT Solutions ครบวงจร ตั้งแต่เว็บไซต์ ระบบอัตโนมัติ 
          จนถึงการปรึกษา AI ด้วยทีมงานผู้เชี่ยวชาญและเทคโนโลยีล่าสุด
        </p>
        <div class="flex flex-col sm:flex-row gap-5 justify-center">
          <a href="/contact-us" class="btn-accent text-xl shadow-xl">📞 ติดต่อเรา</a>
          <a href="/services" class="bg-white text-secondary px-8 py-4 rounded-full font-bold text-xl hover:bg-gray-100 transition shadow-xl">ดูบริการทั้งหมด</a>
        </div>
      </div>
    </div>
  </section>

  <!-- Services Section -->
  <section id="services" class="py-20 bg-white">
    <div class="container mx-auto px-4">
      <div class="text-center mb-16">
        <h2 class="text-4xl md:text-5xl font-bold mb-4">บริการของเรา</h2>
        <p class="text-xl text-gray-600 max-w-3xl mx-auto">ครบทุกความต้องการด้าน IT ของธุรกิจคุณ</p>
      </div>
      
      <div class="grid md:grid-cols-3 gap-8 max-w-6xl mx-auto">
        <!-- Service 1 -->
        <div class="service-card">
          <div class="text-6xl mb-4">🌐</div>
          <h3 class="text-2xl font-bold mb-3">Web Development</h3>
          <p class="text-gray-600 mb-4">รับทำเว็บไซต์ WordPress มืออาชีพ ออกแบบทันสมัย รองรับทุกอุปกรณ์ SEO-ready</p>
          <a href="/website-development" class="text-secondary font-medium hover:underline flex items-center gap-2">ดูรายละเอียด →</a>
        </div>

        <!-- Service 2 -->
        <div class="service-card">
          <div class="text-6xl mb-4">🤖</div>
          <h3 class="text-2xl font-bold mb-3">AI Automation Setup</h3>
          <p class="text-gray-600 mb-4">ตั้งค่าระบบอัตโนมัติลดงานซ้ำซ้อน ประหยัดเวลาทีม เพิ่มประสิทธิภาพ</p>
          <a href="/ai-automation" class="text-secondary font-medium hover:underline flex items-center gap-2">ดูรายละเอียด →</a>
        </div>

        <!-- Service 3 -->
        <div class="service-card">
          <div class="text-6xl mb-4">💡</div>
          <h3 class="text-2xl font-bold mb-3">AI Consult & Implementation</h3>
          <p class="text-gray-600 mb-4">ที่ปรึกษา AI ช่วยคุณนำเทคโนโลยีไปใช้จริง ได้ผลลัพธ์จับต้องได้</p>
          <a href="/ai-consult" class="text-secondary font-medium hover:underline flex items-center gap-2">ดูรายละเอียด →</a>
        </div>
      </div>
      
      <div class="text-center mt-12">
        <a href="/services" class="btn-secondary text-xl">ดูบริการทั้งหมด</a>
      </div>
    </div>
  </section>

  <!-- Why Choose Us -->
  <section class="py-20 bg-secondary text-white">
    <div class="container mx-auto px-4">
      <div class="text-center mb-16">
        <h2 class="text-4xl md:text-5xl font-bold mb-4">ทำไมต้อง moreminimore?</h2>
        <p class="text-xl text-gray-200 max-w-3xl mx-auto">เพราะเราเข้าใจว่า SMEs ไทยมีงบจำกัด แต่ต้องการเทคโนโลยีคุณภาพ</p>
      </div>
      
      <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8 max-w-6xl mx-auto">
        <div class="text-center p-8 bg-white/10 backdrop-blur rounded-2xl">
          <div class="text-5xl mb-4">⚡</div>
          <h3 class="text-xl font-bold mb-3">รวดเร็ว</h3>
          <p class="text-gray-200">ใช้ AI Agents ช่วยทำงานเร็ว 10 เท่า</p>
        </div>
        <div class="text-center p-8 bg-white/10 backdrop-blur rounded-2xl">
          <div class="text-5xl mb-4">💰</div>
          <h3 class="text-xl font-bold mb-3">คุ้มค่า</h3>
          <p class="text-gray-200">ราคาเข้าถึงได้ ไม่มีต้นทุนแฝง</p>
        </div>
        <div class="text-center p-8 bg-white/10 backdrop-blur rounded-2xl">
          <div class="text-5xl mb-4">🚀</div>
          <h3 class="text-xl font-bold mb-3">พร้อมอนาคต</h3>
          <p class="text-gray-200">ระบบออกแบบมาให้ต่อยอด AI ได้</p>
        </div>
        <div class="text-center p-8 bg-white/10 backdrop-blur rounded-2xl">
          <div class="text-5xl mb-4">🤝</div>
          <h3 class="text-xl font-bold mb-3">เข้าใจ SMEs</h3>
          <p class="text-gray-200">เราคือ SMEs เหมือนกัน</p>
        </div>
      </div>
    </div>
  </section>

  <!-- Process Preview -->
  <section id="process" class="py-20 bg-gray-light">
    <div class="container mx-auto px-4">
      <div class="text-center mb-16">
        <h2 class="text-4xl md:text-5xl font-bold mb-4">ขั้นตอนการทำงาน</h2>
        <p class="text-xl text-gray-600 max-w-3xl mx-auto">3 ขั้นตอนง่ายๆ ได้งานพร้อมใช้</p>
      </div>
      
      <div class="grid md:grid-cols-3 gap-8 max-w-6xl mx-auto">
        <div class="process-step-card">
          <div class="w-20 h-20 mx-auto mb-6 rounded-full gradient-secondary flex items-center justify-center text-4xl font-bold text-white">1</div>
          <h3 class="text-2xl font-bold mb-3">ปรึกษาฟรี</h3>
          <p class="text-gray-600">บอกความต้องการ เราแนะนำโซลูชัน</p>
        </div>
        <div class="process-step-card">
          <div class="w-20 h-20 mx-auto mb-6 rounded-full gradient-primary flex items-center justify-center text-4xl font-bold text-white">2</div>
          <h3 class="text-2xl font-bold mb-3">พัฒนา</h3>
          <p class="text-gray-600">ทีมงาน + AI สร้างงานให้รวดเร็ว</p>
        </div>
        <div class="process-step-card">
          <div class="w-20 h-20 mx-auto mb-6 rounded-full bg-accent-green flex items-center justify-center text-4xl font-bold text-white">3</div>
          <h3 class="text-2xl font-bold mb-3">ใช้งานจริง</h3>
          <p class="text-gray-600">พร้อมขาย พร้อมเติบโต</p>
        </div>
      </div>
      
      <div class="text-center mt-12">
        <a href="/process" class="text-secondary font-medium hover:underline text-lg">ดูขั้นตอนการทำงานโดยละเอียด →</a>
      </div>
    </div>
  </section>

  <!-- About Preview -->
  <section class="py-20 bg-white">
    <div class="container mx-auto px-4">
      <div class="grid md:grid-cols-2 gap-12 items-center max-w-6xl mx-auto">
        <div>
          <h2 class="text-4xl md:text-5xl font-bold mb-6">เกี่ยวกับ moreminimore</h2>
          <p class="text-lg text-gray-600 mb-8">
            moreminimore เกิดขึ้นจากความตั้งใจที่จะลดช่องว่างระหว่างธุรกิจใหญ่และ SMEs ด้านเทคโนโลยี
            เราเชื่อว่าธุรกิจทุกขนาดควรมีโอกาสใช้เทคโนโลยีคุณภาพ
          </p>
          <a href="/about-us" class="text-secondary font-medium hover:underline text-lg">อ่านเกี่ยวกับเรา →</a>
        </div>
        <div class="bg-gray-light p-8 rounded-2xl">
          <div class="grid grid-cols-2 gap-6">
            <div class="text-center">
              <div class="text-5xl font-bold text-secondary mb-2">50+</div>
              <div class="text-gray-600">ธุรกิจที่ไว้ใจเรา</div>
            </div>
            <div class="text-center">
              <div class="text-5xl font-bold text-secondary mb-2">10x</div>
              <div class="text-gray-600">เร็วขึ้นด้วย AI</div>
            </div>
            <div class="text-center">
              <div class="text-5xl font-bold text-secondary mb-2">100%</div>
              <div class="text-gray-600">มุ่งมั่นเพื่อลูกค้า</div>
            </div>
            <div class="text-center">
              <div class="text-5xl font-bold text-secondary mb-2">24/7</div>
              <div class="text-gray-600">Support พร้อมช่วย</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- CTA Section -->
  <section class="py-20 gradient-cta text-white">
    <div class="container mx-auto px-4 text-center">
      <h2 class="text-4xl md:text-6xl font-bold mb-6">พร้อมเริ่มโปรเจกต์หรือยัง?</h2>
      <p class="text-2xl text-gray-100 mb-10 max-w-3xl mx-auto">
        ปรึกษาฟรี ไม่มีค่าใช้จ่ายใดๆ ทั้งสิ้น
        <br />เราพร้อมช่วยธุรกิจคุณเติบโตด้วยเทคโนโลยี
      </p>
      <div class="flex flex-col sm:flex-row gap-5 justify-center">
        <a href="https://line.me/" class="bg-[#06C755] text-white px-8 py-4 rounded-full font-bold text-xl hover:bg-green-600 transition shadow-xl inline-flex items-center justify-center gap-2">💬 ทัก Line</a>
        <a href="tel:0809955945" class="bg-white text-secondary px-8 py-4 rounded-full font-bold text-xl hover:bg-gray-100 transition shadow-xl inline-flex items-center justify-center gap-2">📞 โทรเลย</a>
      </div>
    </div>
  </section>
</Layout>