moreminimore-astroreal/src/pages/terms.astro

---
import Base from '../layouts/Base.astro';
import Navigation from '../components/Navigation.astro';
import Footer from '../components/Footer.astro';
import PageHero from '../components/PageHero.astro';
import BentoGrid from '../components/BentoGrid.astro';
import BentoTile from '../components/BentoTile.astro';
import DecoOrb from '../components/DecoOrb.astro';
---

<Base title="เงื่อนไขการให้บริการ | MoreminiMore - รับทำเว็บไซต์ SEO AI Chatbot">
  <Navigation />

  <PageHero
    badge="กฎหมาย"
    title="เงื่อนไขการให้บริการ"
    subtitle="มีผลบังคับใช้วันที่ 5 พฤษภาคม 2569"
  />

  <section class="section section-bento legal-section">
    <DecoOrb color="yellow" size="450px" speed={0.3} position={{ top: '-100px', right: '-150px' }} opacity={0.25} blur="80px" />
    <DecoOrb color="soft" size="400px" speed={0.3} position={{ bottom: '-150px', left: '-100px' }} opacity={0.4} blur="80px" />
    <div class="container" style="position: relative; z-index: 1;">
      <BentoGrid>
        <BentoTile span={8} surface="white" eyebrow="กฎหมาย" title="เงื่อนไขการให้บริการ">
          <div class="legal-body">
            <p class="legal-intro">ชื่อเว็บไซต์: MoreminiMore | เว็บไซต์: https://www.moreminimore.com | บริษัท: MoreminiMore Co.,Ltd.</p>

            <div class="legal-block">
              <h2>1. การยอมรับเงื่อนไข</h2>
              <p>ด้วยการเข้าถึงและใช้งานเว็บไซต์ของบริษัท มอร์มินิมอร์ จำกัด ท่านยอมรับและตกลงที่จะถูกผูกมัดด้วยเงื่อนไขการให้บริการฉบับนี้</p>
            </div>

            <div class="legal-block">
              <h2>2. การแก้ไขเงื่อนไข</h2>
              <p>เราขอสงวนสิทธิในการแก้ไขเงื่อนไขนี้เมื่อใดก็ได้ การแก้ไขจะมีผลทันทีเมื่อโพสต์บนเว็บไซต์ ท่านควรตรวจสอบเงื่อนไขนี้เป็นประจำ</p>
            </div>

            <div class="legal-block">
              <h2>3. บริการของเรา</h2>
              <p>เราให้บริการพัฒนาเว็บไซต์ AI Automation และ Marketing Automation สำหรับธุรกิจไทย โดยมีรายละเอียดและขอบเขตงานตามที่ตกลงกันในสัญญา</p>
            </div>

            <div class="legal-block">
              <h2>4. การชำระเงิน</h2>
              <p>การชำระเงินจะเป็นไปตามเงื่อนไขที่กำหนดในใบเสนอราคาและสัญญา ลูกค้าตกลงชำระตามกำหนดเวลาที่ระบุ</p>
            </div>

            <div class="legal-block">
              <h2>5. การรับประกัน</h2>
              <p>เรารับประกันคุณภาพงานตามที่ระบุในสัญญา หากไม่พอใจในงาน เราพร้อมแก้ไขจนกว่าจะถูกใจตามเงื่อนไขที่กำหนด</p>
            </div>

            <div class="legal-block">
              <h2>6. ข้อจำกัดความรับผิด</h2>
              <p>ความรับผิดของบริษัทจะจำกัดอยู่ที่มูลค่าของงานที่ให้บริการตามที่ระบุในสัญญา</p>
            </div>

            <div class="legal-block">
              <h2>7. ติดต่อเรา</h2>
              <p>หากมีคำถามเกี่ยวกับเงื่อนไขการให้บริการ กรุณาติดต่อเราที่ contact@moreminimore.com หรือ 080-995-5945</p>
            </div>
          </div>
        </BentoTile>

        <BentoTile span={4} surface="yellow" eyebrow="ข้อมูลเอกสาร" title="สรุปฉบับย่อ">
          <div class="aside-body">
            <p><strong>ชื่อเอกสาร:</strong> เงื่อนไขการให้บริการ</p>
            <p><strong>มีผลบังคับใช้:</strong> 5 พฤษภาคม 2569</p>
            <p><strong>จัดการโดย:</strong> MoreminiMore Co.,Ltd.</p>
            <p style="margin-top: 20px;"><strong>หัวข้อทั้งหมด 7 ข้อ:</strong></p>
            <ol class="toc-list">
              <li>การยอมรับเงื่อนไข</li>
              <li>การแก้ไขเงื่อนไข</li>
              <li>บริการของเรา</li>
              <li>การชำระเงิน</li>
              <li>การรับประกัน</li>
              <li>ข้อจำกัดความรับผิด</li>
              <li>ติดต่อเรา</li>
            </ol>
          </div>
        </BentoTile>
      </BentoGrid>
    </div>
  </section>

  <Footer />
</Base>

<style>
  .legal-section { background: var(--color-white); }
  .section-bento { position: relative; overflow: hidden; }

  /* Body typography inside the prose tile */
  .legal-body { font-size: 16px; line-height: 1.8; color: var(--color-gray-700); }
  .legal-intro {
    font-size: 17px;
    color: var(--color-gray-700);
    margin-bottom: 36px;
    line-height: 1.7;
    padding-bottom: 28px;
    border-bottom: 1px solid var(--color-gray-200);
  }
  .legal-block { margin-bottom: 36px; }
  .legal-block:last-child { margin-bottom: 0; }
  .legal-block h2 {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 800;
    margin-bottom: 14px;
    color: var(--color-black);
  }
  .legal-block p {
    font-size: 16px;
    color: var(--color-gray-700);
    line-height: 1.8;
    margin-bottom: 12px;
  }

  /* Aside (yellow tile) */
  .aside-body {
    font-size: 15px;
    line-height: 1.7;
    color: var(--color-black);
  }
  .aside-body p { margin-bottom: 10px; }
  .aside-body strong { font-weight: 800; }
  .toc-list {
    list-style: none;
    padding: 0;
    margin: 12px 0 0;
    counter-reset: toc;
  }
  .toc-list li {
    counter-increment: toc;
    padding: 10px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
    font-weight: 600;
    position: relative;
    padding-left: 36px;
  }
  .toc-list li::before {
    content: counter(toc, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: 10px;
    font-family: var(--font-display);
    font-weight: 900;
    opacity: 0.6;
  }
  .toc-list li:last-child { border-bottom: none; }

  @media (max-width: 640px) {
    .legal-intro { font-size: 16px; }
    .legal-block h2 { font-size: 20px; }
  }
</style>

<script>
  // Parallax orbs (use data-parallax-speed from DecoOrb)
  const parallaxEls = document.querySelectorAll('[data-parallax-speed]');
  function updateParallax() {
    const scrolled = window.scrollY;
    parallaxEls.forEach(el => {
      const speed = parseFloat(el.getAttribute('data-parallax-speed') || '0.4');
      const ty = scrolled * speed * -0.3;
      el.style.transform = `translate3d(0, ${ty}px, 0)`;
    });
  }
  window.addEventListener('scroll', () => requestAnimationFrame(updateParallax), { passive: true });
</script>