From 0f244424c01ba215b3280f4ab2e19974f59d5bd2 Mon Sep 17 00:00:00 2001
From: Kunthawat Greethong <kunthawat@Kunthawats-MacBook-Pro.local>
Date: Wed, 24 Jun 2026 08:24:49 +0700
Subject: [PATCH] feat: hero profit cluster, dark text fix, footer,
 privacy/terms pages
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Replace hero right panel with liquid-glass profit cluster (กำไร + Marketing/AI/Business Knowledge)
- Fix dark-on-dark text visibility in all inverted sections (scene-dark, page-section)
- Add Footer component with liquid-glass design, contact info, legal links
- Add privacy and terms placeholder pages
- Update PageShell to include Footer on all pages
---
 PLAN-REVIEW-LOG.md             |  37 +--
 PLAN.md                        | 418 ++++++---------------------------
 src/components/Footer.astro    |  97 ++++++++
 src/components/PageShell.astro |   3 +
 src/pages/index.astro          |  86 +++++--
 src/pages/privacy.astro        |  25 ++
 src/pages/terms.astro          |  25 ++
 src/styles/global.css          | 318 +++++++++++++++++++++++--
 8 files changed, 599 insertions(+), 410 deletions(-)
 create mode 100644 src/components/Footer.astro
 create mode 100644 src/pages/privacy.astro
 create mode 100644 src/pages/terms.astro

diff --git a/PLAN-REVIEW-LOG.md b/PLAN-REVIEW-LOG.md
index 6694690..6c98564 100644
--- a/PLAN-REVIEW-LOG.md
+++ b/PLAN-REVIEW-LOG.md
@@ -1,21 +1,22 @@
-# Plan Review Log: MoreminiMore Homepage Rebuild
+# Plan Review Log: Footer Component + Remove Yellow Lines from Process Section
+Act 1 (grill) complete — plan locked with the user. MAX_ROUNDS=5.
 
-Act 1 grill complete — plan locked with user.
+## Round 1 — Codex
+พบ 10 issues (3 critical, 3 significant, 4 minor):
+1. 🔴 PageShell layout ignored — ควรแก้ผ่าน PageShell
+2. 🔴 Privacy/Terms pages ไม่มี — dead links
+3. 🔴 Liquid glass markup pattern ไม่ระบุ
+4. 🟡 service-proof-grid yellow accent missed
+5. 🟡 Mobile layout spec ambiguous
+6. 🟡 Step-flow visual cue removed without alternative
+7. 🟡 Missing semantic `<footer>` element
+8. 🟠 LINE URL unspecified
+9. 🟠 Logo dimensions omitted
+10. 🟠 z-index risk unresolved
 
-MAX_ROUNDS=5
+### Claude's response
+แก้ทั้ง 10 ข้อใน PLAN.md revision
 
-## Act 1 Summary
-
-- User clarified credibility priority: SME understanding > measurable business value > modern UX/coding impression.
-- User clarified homepage must be company-site quality, not a one-page landing page.
-- User clarified visual direction: subtle macOS-inspired liquid glass, hybrid light/dark rhythm, abstract business-map parallax, restrained motion.
-- User clarified implementation preference: Astro static + vanilla JS first, Google Apps Script for low-volume lead handling.
-- User clarified CTA wording: use "ปรึกษาฟรี" only, not "ปรึกษาฟรี 30 นาที".
-- User clarified Dealplustech must be included in portfolio using a homepage screenshot.
-- User requested a copy-ready Google Apps Script file plus detailed setup instructions.
-
-## Act 2 Status
-
-Not started.
-
-No implementation has been done from this plan yet.
+## Round 2 — Codex
+All 10 findings addressed. Minor note: footer ควรวางระหว่าง `</main>` กับ floating-cta (ไม่ใช่ inside `<main>`).
+VERDICT: APPROVED (2 rounds)
diff --git a/PLAN.md b/PLAN.md
index 88a5313..a2111a8 100644
--- a/PLAN.md
+++ b/PLAN.md
@@ -1,351 +1,71 @@
-# Plan: MoreminiMore Homepage Rebuild
-
-_Locked via grill — by Codex + Kunthawat_
+# Plan: Footer Component + Remove Yellow Lines from Process Section
+_Locked via grill — by Claude + Kunthawat — Revised Round 1_
 
 ## Goal
-
-Rebuild the MoreminiMore company website from a clean slate, starting with the homepage only. The homepage must make SME owners feel that MoreminiMore is a friendly growth partner who understands real business problems, uses real data before recommending work, and can deliver modern, trustworthy websites and systems. The visual experience should feel modern and a little wow through restrained liquid-glass UI, layered parallax, and polished UX, but never become an effect demo or a tech showcase.
-
-## Core Positioning
-
-Priority of trust:
-
-1. MoreminiMore understands SME businesses and their real problems.
-2. MoreminiMore can help clients choose work that is more efficient, worthwhile, and suitable for their business.
-3. MoreminiMore writes modern code in the UX sense: smooth, beautiful, easy to use, and subtly impressive.
-
-Target customer priority:
-
-1. Businesses that already have a website, ads, or tools, but feel the result is not worth the money or effort.
-2. Businesses that do not yet have a good website or system and want to start correctly.
-3. Businesses growing into AI/automation/workflow needs.
-
-Brand role:
-
-1. Growth partner for SMEs.
-2. Business diagnosis partner.
-3. Team that can implement real working solutions.
-
-Tone:
-
-- Friendly-first.
-- Thai-first copy.
-- English only for service names and necessary terms.
-- No consultant-speak, no overly technical language, no fake metrics.
-
-## Homepage Strategy
-
-Hero strategy:
-
-- Belief-led headline.
-- Pain-led subheadline.
-- Promise-led CTA/context.
-
-Current hero copy direction:
-
-> ธุรกิจไม่ควรเสียเงินกับสิ่งที่ยังไม่รู้ว่าคุ้มไหม
->
-> เราช่วย SME ดูข้อมูลจริงก่อนตัดสินใจทำเว็บ การตลาด AI หรือระบบอัตโนมัติ เพื่อเลือกสิ่งที่ควรทำ อย่างมีประสิทธิภาพ และเหมาะสมกับลูกค้า
-
-The final copy can be polished, especially the phrase "เหมาะสมกับลูกค้า", but the idea should stay intact.
-
-Primary conversion priority:
-
-1. ส่งโจทย์ธุรกิจให้เราดูก่อน
-2. ดูเคส/ผลงานก่อน แล้วค่อยติดต่อ
-3. ปรึกษาฟรี
-
-Do not use "30 นาที" in CTA copy. Use "ปรึกษาฟรี" only.
-
-Homepage v1 must not include a blog section. Blog content can stay preserved for later, but the homepage should focus on trust, diagnosis, proof, service clarity, portfolio quality, and conversion.
-
-## Homepage Sections
-
-Recommended homepage order:
-
-1. Hero
-   - Belief-led headline.
-   - Friendly explanation.
-   - CTA to open problem form.
-   - Light abstract business-map background with subtle liquid glass.
-
-2. Problem framing
-   - Explain that customers do not need to know which service they need.
-   - MoreminiMore will map the problem to the suitable service.
-   - CTA opens the same slide-over form.
-
-3. Dataroot diagnosis story
-   - Dark diagnosis stage.
-   - Split case layout.
-   - Left side: narrative diagnosis.
-   - Right side: metric cards and relevant visual/screenshot.
-   - Use only real Dataroot metrics:
-     - +373% impression
-     - +114.2% click
-     - -28.3% ad spend
-
-4. Outcome-first service cards
-   - Service name is still visible in English.
-   - Card headline should sell the outcome/problem solved, not the service label first.
-   - Desktop hover reveals "เหมาะกับปัญหาแบบไหน".
-   - Mobile shows essential information directly.
-
-5. Portfolio preview
-   - Dark gallery stage.
-   - Featured + grid layout.
-   - Featured 1 should be Jet Industries for credibility.
-   - Featured 2 should be selected from the most visually strong portfolio screenshot after inspecting assets.
-   - Dataroot does not need to be the main portfolio feature because it has the diagnosis story.
-   - Portfolio role is mainly visual website quality, because most clients are website clients.
-
-6. Mini process
-   - Short 4-step process:
-     1. เข้าใจธุรกิจ
-     2. ดูข้อมูล
-     3. เลือกทางที่คุ้ม
-     4. ลงมือและวัดผล
-
-7. Final CTA
-   - Friendly, low-friction.
-   - Reopen form panel.
-   - Reinforce "ส่งโจทย์ให้เราดูก่อน".
-
-## Problem Form
-
-The primary CTA opens a form, not a separate contact page.
-
-Placement and behavior:
-
-- Desktop: glass slide-over panel from the right.
-- Mobile: bottom sheet.
-- Floating/sticky CTA appears after the hero, not immediately on first paint.
-- Navigation also has a CTA.
-
-Problem chips:
-
-1. เว็บมีอยู่แล้ว แต่ไม่ค่อยมีลูกค้าทัก
-2. ยิงแอดอยู่ แต่ยอดขายไม่คุ้ม
-3. มีคนทักมา แต่ไม่ใช่ลูกค้าที่ใช่
-4. ทีมงานทำงานเดิม ๆ แต่ทำงานช้า หรือผิดพลาดบ่อย
-5. อยากใช้ AI แต่ไม่รู้เริ่มตรงไหน
-6. ยังไม่แน่ใจว่าควรแก้อะไรก่อน
-
-Textarea:
-
-- Must include a very short example because customers are assumed to be lazy and may not want to type.
-- Example direction:
-  - "ยิงแอดอยู่ แต่ยอดขายไม่คุ้ม อยากรู้ว่าควรแก้อะไรก่อน"
-  - "มีเว็บแล้ว แต่ลูกค้าไม่ค่อยทัก อยากรู้ว่าควรแก้เว็บหรือยิงแอดก่อน"
-
-Contact fields:
-
-- Name.
-- Phone.
-- Email.
-- Phone or email must be provided, but both are not required.
-- Labels must be explicit because non-technical customers may be confused by a single generic "contact channel" field.
-
-Submission backend:
-
-- Use Google Apps Script first because lead volume is expected to be low.
-- Send notification email to Gmail/Google Workspace.
-- Ideally also store leads in Google Sheet.
-- Sender should be MoreminiMore-owned; customer contact should be used as reply-to where possible.
-- Keep message clean to reduce spam risk.
-- Provide the Google Apps Script as a copy-ready file because the user has not done this setup before.
-- Current script artifact: `google-apps-script/lead-form.gs`.
-- Current setup guide: `google-apps-script/SETUP.md`.
-
-Post-submit UX:
-
-- Stay in the panel.
-- Show success message plus light diagnosis preview.
-- Do not pretend to generate a complete diagnosis.
-- Example direction: "จากปัญหาที่เลือก เราน่าจะเริ่มจากการดูเว็บ/แอด/ขั้นตอนทำงานก่อน แล้วจะติดต่อกลับทางเบอร์หรืออีเมลที่ให้ไว้"
-
-## Navigation
-
-This is a company website, not a one-page landing page.
-
-Navigation should include:
-
-- หน้าแรก
-- บริการ
-- ผลงาน
-- เกี่ยวกับ
-- FAQ and/or บทความ
-- ติดต่อ / ส่งโจทย์ให้เราดู
-
-Services submenu:
-
-- Compact mega menu.
-- Use English service names:
-  - Website Development
-  - Marketing Consult
-  - Automation Workflow
-  - AI Consult
-- Include a short Thai explanation under each service name.
-- Desktop supports hover, click, and keyboard.
-- Mobile uses an accordion/list.
-
-Nav visual behavior:
-
-- Hybrid glass sticky nav.
-- On hero: transparent/light glass.
-- After scroll: compact stronger glass/solid for readability.
-
-## Visual System
-
-Overall mode:
-
-- Hybrid light/dark.
-- Light glass for friendly SME trust.
-- Dark/premium stages for Dataroot diagnosis and portfolio.
-
-Section atmosphere:
-
-- Light hero.
-- Dark Dataroot diagnosis.
-- Light service/process/form context.
-- Dark portfolio gallery.
-
-Brand assets:
-
-- Use existing logo.
-- Use `#fed400` as accent only, not as a full-page wash.
-- Use red `#d4553a` sparingly if useful.
-- Avoid recreating the old yellow-heavy design.
-
-Liquid glass:
-
-- Subtle macOS-inspired.
-- Use in key moments only:
-  - Navigation.
-  - CTA/form slide-over.
-  - Hero card/form/selected elements.
-  - Dataroot diagnosis cards.
-  - Possibly light service cards, but not every surface.
-- Must preserve readability before effect.
-
-Background and parallax:
-
-- Main background concept: abstract business map.
-- Use lines, nodes, soft grids, flow paths, and layered decision-map visuals.
-- Hero should not rely on stock imagery.
-- Portfolio sections can use real portfolio screenshots as the main visual material.
-
-Motion:
-
-- Desktop:
-  - Hero mouse parallax should be noticeable enough to feel dimensional.
-  - Scroll-driven scene changes are allowed.
-  - Use exactly 3 main background scenes:
-    1. Hero / light business map.
-    2. Dataroot / dark diagnosis stage.
-    3. Portfolio / dark gallery stage.
-- Mobile:
-  - No mouse interaction.
-  - Use scroll parallax/reveal only.
-  - Keep performance conservative.
-
-## Portfolio Rules
-
-Portfolio role:
-
-- Show website visual quality and execution.
-- Most clients are website clients, not consulting clients.
-- Consulting-heavy proof is mainly Dataroot.
-- Dealplustech must be included in the website portfolio.
-  - URL: `https://www.dealplustech.co.th`
-  - Capture a homepage screenshot and use it as a portfolio image, matching the treatment of other portfolio clients.
-  - Dealplustech is both website work and consulting-adjacent, but should still appear as a website portfolio item.
-
-Client context:
-
-- Largest client: Jet Industries.
-- Second largest: Dataroot.
-- Most other clients are smaller.
-
-Sorting priority:
-
-1. Visual quality / modern feel.
-2. Professional credibility.
-3. SME relatability.
-
-Featured portfolio:
-
-- Featured 1: Jet Industries.
-- Featured 2: choose visually strongest work after inspecting assets.
-- Other projects in grid.
-
-## Technical Approach
-
-Stack:
-
-- Astro static, rebuilt from scratch.
-- Vanilla JS first.
-- CSS first for liquid glass and layout.
-- Use small vanilla scripts for:
-  - Mouse parallax.
-  - Scroll scene transitions.
-  - Slide-over/bottom sheet form.
-  - Form validation and submission.
-- Do not use React by default.
-- Add React only if a specific interaction becomes too complex for readable vanilla JS.
-
-Implementation scope:
-
-- Homepage-first.
-- Do not build full route details in v1.
-- Navigation may reference future routes, but implementation focus is homepage.
-- Preserve extracted inputs in `redesign-input/`.
-- Old code remains archived in `_archive/pre-redesign-2026-06-21/`.
-
-Suggested initial implementation files after plan approval:
-
-1. Recreate minimal Astro project files at root:
-   - `package.json`
-   - `astro.config.mjs`
-   - `tsconfig.json`
-   - `src/pages/index.astro`
-   - `src/styles/global.css`
-   - `src/scripts/home.js`
-2. Copy required assets from `redesign-input/assets/` into `public/`.
-3. Build homepage components either inline first or split only when repeated:
-   - Navigation
-   - Hero
-   - Problem CTA panel
-   - Dataroot case
-   - Service cards
-   - Portfolio preview
-   - Process
-   - Footer
-4. Add Google Apps Script endpoint configuration as an environment/runtime variable if possible.
-
-## Key Decisions & Tradeoffs
-
-- Problem-first homepage, but service cards still exist because this is a company website.
-- Friendly-first copy, but visual system must remain premium enough for Jet/Dataroot credibility.
-- Use English service names in nav for professionalism, but Thai copy everywhere else for clarity.
-- Use Google Apps Script before heavier transactional email infrastructure because lead volume is expected to be low.
-- Use Astro static + vanilla JS to keep the site light and maintainable.
-- Use effects only in high-impact places to avoid repeating the previous failure mode of design overwhelming the business message.
-
-## Risks / Open Questions
-
-- The exact visual quality of portfolio assets must be inspected before choosing Featured 2.
-- Dealplustech needs a homepage screenshot before implementation can finalize portfolio assets.
-- Google Apps Script deliverability depends on the Google account/domain setup. SPF/DKIM/DMARC should be checked before production.
-- Navigation points to company-site routes, but homepage is the first implementation scope. Decide whether future routes should be placeholders, omitted, or added later.
-- Need final decision on exact final hero copy during implementation polish.
-
-## Out Of Scope For Homepage V1
-
-- Full services pages.
-- Full portfolio detail pages.
-- Blog section on homepage.
-- Full blog redesign.
-- Heavy WebGL/canvas animation.
-- Full React app or SPA rewrite.
-- Invented metrics or testimonials.
-- Reusing old design or old code structure as the main foundation.
+สร้าง Footer component ใหม่ด้วย liquid glass style และลบเส้นสีเหลืองออกจาก How we work section
+
+## Approach
+### 1. ลบเส้นสีเหลืองจาก Process Section (`src/styles/global.css`)
+- ลบ `.process-grid::before` (เส้นแนวนอนสีเหลือง) → `display: none`
+- ลบ `.process-grid article::after` (วงกลม ">" สีเหลืองระหว่าง step) → `display: none`
+- `.process-grid .step-number`: เปลี่ยน `background: var(--yellow)` → `background: rgb(255 255 255 / .5)` + ลบ yellow box-shadow
+- `.service-proof-grid .process-grid .step-number`: override สีเหลืองเหมือนกัน (scope เพิ่ม)
+- **หมายเหตุ:** step numbers (01, 02, 03, 04) ยังคงแสดง sequential flow อยู่แล้ว ไม่ต้องเพิ่ม connector แทน
+
+### 2. สร้าง Footer Component (`src/components/Footer.astro`)
+- ใช้ `<footer>` semantic element
+- ใช้ liquid glass style (ต้องมี 3 child divs):
+  ```html
+  <footer class="site-footer liquid-glass liquidGlass-wrapper">
+    <div class="liquidGlass-effect" aria-hidden="true"></div>
+    <div class="liquidGlass-tint" aria-hidden="true"></div>
+    <div class="liquidGlass-shine" aria-hidden="true"></div>
+    <!-- content -->
+  </footer>
+  ```
+- `position: relative; z-index: auto` (ไม่ทับ lead-panel z-index: 110)
+
+### 3. เนื้อหา Footer
+**ซ้าย:**
+- โลโก้: `/images/logos/logo-long-black.png` (width="205" height="36")
+- คำอธิบาย: "ที่ปรึกษาเว็บไซต์ การตลาด และ AI สำหรับ SME"
+
+**กลาง:**
+- ลิงก์: หน้าแรก / บริการ / ผลงาน / บล็อก / ติดต่อ / นโยบายความเป็นส่วนตัว / เงื่อนไขการใช้งาน
+
+**ขวา:**
+- LINE: @moreminimore (link: https://line.me/ti/p/@moreminimore)
+- Email: contact@moreminimore.com
+
+**ล่าง:**
+- Copyright: © {new Date().getFullYear()} MoreminiMore
+
+### 4. Responsive
+- Desktop (>768px): 3 columns (grid-template-columns: 1fr 1fr 1fr)
+- Mobile (≤768px): vertical stack (flex-direction: column) — เรียง: โลโก้ → ลิงก์ → ติดต่อ → copyright
+
+### 5. Integration Strategy
+- **PageShell pages** (about, services, blog, blog/[slug], contact, faq, portfolio, services/[slug]):
+  เพิ่ม `<Footer />` import + render ใน `src/components/PageShell.astro` ก่อน `</main>` หรือก่อน `</body>`
+- **index.astro** (standalone, ไม่ใช้ PageShell):
+  เพิ่ม `<Footer />` import + render ก่อน `</body>` โดยตรง
+
+### 6. สร้าง Placeholder Pages
+- สร้าง `src/pages/privacy.astro` (placeholder — "นโยบายความเป็นส่วนตัว กำลังอัพเดท")
+- สร้าง `src/pages/terms.astro` (placeholder — "เงื่อนไขการใช้งาน กำลังอัพเดท")
+- ใช้ PageShell layout เหมือนหน้าอื่น
+
+## Key decisions & tradeoffs
+- ใช้ liquid glass style เดียวกับ navbar เพื่อความ cohesive
+- ลบเส้นเหลืองทั้งหมด — step numbers ยังบ่งบอกลำดับอยู่
+- ใช้ dynamic year (`new Date().getFullYear()`) ใน copyright (Astro SSG → build-time inlined)
+- Footer ใน PageShell = แก้จุดเดียว ครอบคลุม 8 หน้า
+- z-index: auto (ไม่ทับ lead-panel)
+
+## Risks / open questions
+- Privacy/Terms pages เป็น placeholder — ต้องเพิ่ม content ทีหลัง
+- Logo อาจต้องเปลี่ยนเป็นสีขาวเมื่ออยู่บนพื้นเข้ม (invert)
+
+## Out of scope
+- ไม่แก้ไขหน้า Privacy/Terms content จริง
+- ไม่เพิ่ม social media icons (Facebook/X/LinkedIn)
diff --git a/src/components/Footer.astro b/src/components/Footer.astro
new file mode 100644
index 0000000..13bbe2a
--- /dev/null
+++ b/src/components/Footer.astro
@@ -0,0 +1,97 @@
+---
+const currentYear = new Date().getFullYear();
+---
+
+<footer class="site-footer liquid-glass liquidGlass-wrapper">
+  <div class="liquidGlass-effect" aria-hidden="true"></div>
+  <div class="liquidGlass-tint" aria-hidden="true"></div>
+  <div class="liquidGlass-shine" aria-hidden="true"></div>
+
+  <div class="footer-row">
+    <a class="footer-brand" href="/" aria-label="MoreminiMore">
+      <img src="/images/logos/logo-long-black.png" width="160" height="28" alt="MoreminiMore" />
+    </a>
+
+    <a class="footer-link" href="https://line.me/ti/p/@moreminimore" target="_blank" rel="noopener">LINE @moreminimore</a>
+    <a class="footer-link" href="mailto:contact@moreminimore.com">contact@moreminimore.com</a>
+    <span class="footer-copy">&copy; {currentYear} MoreminiMore</span>
+  </div>
+
+  <div class="footer-legal">
+    <a href="/privacy/">ความเป็นส่วนตัว</a>
+    <span aria-hidden="true">·</span>
+    <a href="/terms/">เงื่อนไขการใช้งาน</a>
+  </div>
+</footer>
+
+<style>
+  .site-footer {
+    position: relative;
+    z-index: auto;
+    margin-top: 80px;
+    padding: 18px 24px 14px;
+    color: var(--ink);
+  }
+
+  .footer-row {
+    position: relative;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 24px;
+    flex-wrap: wrap;
+    max-width: 1100px;
+    margin: 0 auto;
+    font-size: 0.88rem;
+  }
+
+  .footer-brand img {
+    display: block;
+  }
+
+  .footer-link {
+    color: var(--ink);
+    text-decoration: none;
+    transition: opacity .2s var(--ease);
+  }
+
+  .footer-link:hover {
+    opacity: .6;
+  }
+
+  .footer-copy {
+    color: var(--muted);
+  }
+
+  .footer-legal {
+    position: relative;
+    z-index: 1;
+    text-align: center;
+    margin-top: 8px;
+    font-size: 0.75rem;
+    color: var(--muted);
+  }
+
+  .footer-legal a {
+    color: var(--muted);
+    text-decoration: none;
+    transition: opacity .2s var(--ease);
+  }
+
+  .footer-legal a:hover {
+    opacity: .6;
+  }
+
+  @media (max-width: 640px) {
+    .footer-row {
+      gap: 12px;
+      font-size: 0.8rem;
+    }
+
+    .footer-brand img {
+      width: 130px;
+      height: auto;
+    }
+  }
+</style>
diff --git a/src/components/PageShell.astro b/src/components/PageShell.astro
index f8ba4e4..1fe9a40 100644
--- a/src/components/PageShell.astro
+++ b/src/components/PageShell.astro
@@ -1,5 +1,6 @@
 ---
 import '../styles/global.css';
+import Footer from './Footer.astro';
 import { formEndpoint, problems, services } from '../data/site.js';
 
 const {
@@ -111,6 +112,8 @@ const {
       <slot />
     </main>
 
+    <Footer />
+
     <button class="floating-cta" type="button" data-floating-cta data-open-lead>ส่งโจทย์ให้เราดู</button>
     <div class="panel-backdrop" data-panel-backdrop data-close-lead></div>
     <aside class="lead-panel liquid-glass liquidGlass-wrapper" aria-labelledby="lead-title" aria-hidden="true" data-lead-panel data-endpoint={formEndpoint}>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 6daae8a..6370c4c 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,5 +1,6 @@
 ---
 import '../styles/global.css';
+import Footer from '../components/Footer.astro';
 
 const formEndpoint = '';
 
@@ -219,27 +220,49 @@ const process = [
             </div>
           </div>
 
-          <div class="hero-panel glass-panel liquid-glass liquidGlass-wrapper" data-depth-card>
-            <div class="liquidGlass-effect" aria-hidden="true"></div>
-            <div class="liquidGlass-tint" aria-hidden="true"></div>
-            <div class="liquidGlass-shine" aria-hidden="true"></div>
-            <p class="panel-kicker">Decision snapshot</p>
-            <h2>หลังคุยกัน คุณจะเห็นภาพว่าอะไรควรทำก่อน</h2>
-            <div class="decision-preview" aria-label="ตัวอย่างสรุปหลังดูโจทย์">
-              <article>
-                <span>Do first</span>
-                <strong>แก้จุดที่ทำให้ลูกค้าไม่ทัก</strong>
-              </article>
-              <article>
-                <span>Hold</span>
-                <strong>ชะลอสิ่งที่ยังวัดผลไม่ได้</strong>
-              </article>
-              <article>
-                <span>Measure</span>
-                <strong>ตั้งสัญญาณว่าควรไปต่อหรือหยุด</strong>
-              </article>
+          <div class="hero-profit-cluster" data-depth-card>
+            <!-- Center: กำไร -->
+            <div class="profit-card profit-center liquid-glass liquidGlass-wrapper">
+              <div class="liquidGlass-effect" aria-hidden="true"></div>
+              <div class="liquidGlass-tint" aria-hidden="true"></div>
+              <div class="liquidGlass-shine" aria-hidden="true"></div>
+              <span class="profit-label">กำไร</span>
+              <span class="profit-sub">เป้าหมายของทุกธุรกิจ</span>
             </div>
-            <button class="text-link" type="button" data-open-lead>ขอให้ช่วยดูโจทย์</button>
+
+            <!-- Top: Marketing -->
+            <div class="profit-card profit-marketing liquid-glass liquidGlass-wrapper">
+              <div class="liquidGlass-effect" aria-hidden="true"></div>
+              <div class="liquidGlass-tint" aria-hidden="true"></div>
+              <div class="liquidGlass-shine" aria-hidden="true"></div>
+              <span class="profit-tag">Marketing</span>
+              <span class="profit-desc">เพิ่มรายได้</span>
+            </div>
+
+            <!-- Bottom-left: AI -->
+            <div class="profit-card profit-ai liquid-glass liquidGlass-wrapper">
+              <div class="liquidGlass-effect" aria-hidden="true"></div>
+              <div class="liquidGlass-tint" aria-hidden="true"></div>
+              <div class="liquidGlass-shine" aria-hidden="true"></div>
+              <span class="profit-tag">AI</span>
+              <span class="profit-desc">ลดต้นทุนและเวลา</span>
+            </div>
+
+            <!-- Bottom-right: Business Knowledge -->
+            <div class="profit-card profit-biz liquid-glass liquidGlass-wrapper">
+              <div class="liquidGlass-effect" aria-hidden="true"></div>
+              <div class="liquidGlass-tint" aria-hidden="true"></div>
+              <div class="liquidGlass-shine" aria-hidden="true"></div>
+              <span class="profit-tag">Business Knowledge</span>
+              <span class="profit-desc">ลดความเสี่ยง</span>
+            </div>
+
+            <!-- Connector lines -->
+            <svg class="profit-connectors" viewBox="0 0 400 400" fill="none" aria-hidden="true">
+              <line x1="200" y1="200" x2="200" y2="70" stroke="var(--yellow)" stroke-width="1.5" stroke-dasharray="6 4" opacity=".45" />
+              <line x1="200" y1="200" x2="90" y2="310" stroke="var(--yellow)" stroke-width="1.5" stroke-dasharray="6 4" opacity=".45" />
+              <line x1="200" y1="200" x2="310" y2="310" stroke="var(--yellow)" stroke-width="1.5" stroke-dasharray="6 4" opacity=".45" />
+            </svg>
           </div>
         </div>
       </section>
@@ -249,9 +272,16 @@ const process = [
           <p class="eyebrow">Problem first</p>
           <h2>คุณเล่าปัญหา เราช่วยหา service ที่เหมาะสม</h2>
         </div>
-        <p>
-          เว็บนี้ไม่เริ่มจากแพ็กเกจ เพราะธุรกิจแต่ละเจอปัญหาไม่เหมือนกัน ส่งโจทย์สั้น ๆ มาได้เลย แล้วเราจะช่วยดูว่าควรเริ่มจากเว็บ แอด ระบบทำงาน หรือ AI
-        </p>
+        <div class="problem-strip-content">
+          <p>
+            เว็บนี้ไม่เริ่มจากแพ็กเกจ เพราะธุรกิจแต่ละเจอปัญหาไม่เหมือนกัน ส่งโจทย์สั้น ๆ มาได้เลย แล้วเราจะช่วยดูว่าควรเริ่มจากเว็บ แอด ระบบทำงาน หรือ AI
+          </p>
+          <ul class="problem-list">
+            <li>เว็บมีอยู่แล้ว แต่ไม่ค่อยมีลูกค้าทัก</li>
+            <li>ยิงแอดอยู่ แต่ยอดขายไม่คุ้ม</li>
+            <li>ทีมงานทำงานช้า หรือผิดพลาดบ่อย</li>
+          </ul>
+        </div>
       </section>
 
       <section id="dataroot" class="case-section scene scene-dark" data-scene="dark">
@@ -324,7 +354,6 @@ const process = [
         <div class="section-heading">
           <p class="eyebrow">Portfolio</p>
           <h2>งานเว็บที่ต้องดูน่าเชื่อถือก่อน แล้วค่อยสวยแบบมีเหตุผล</h2>
-          <a class="section-link" href="/portfolio/">ดูผลงานทั้งหมด</a>
         </div>
 
         <div class="portfolio-grid">
@@ -340,7 +369,7 @@ const process = [
           ))}
         </div>
         <div class="portfolio-more">
-          <a class="button button-secondary" href="/portfolio/">ไปหน้า ผลงาน</a>
+          <a class="button button-primary" href="/portfolio/">ไปหน้า ผลงาน</a>
         </div>
       </section>
 
@@ -351,7 +380,10 @@ const process = [
         </div>
         <div class="process-grid">
           {process.map(([title, copy], index) => (
-            <article>
+            <article class="liquid-glass liquidGlass-wrapper">
+              <div class="liquidGlass-effect" aria-hidden="true"></div>
+              <div class="liquidGlass-tint" aria-hidden="true"></div>
+              <div class="liquidGlass-shine" aria-hidden="true"></div>
               <span class="step-number">{String(index + 1).padStart(2, '0')}</span>
               <h3>{title}</h3>
               <p>{copy}</p>
@@ -372,6 +404,8 @@ const process = [
       </section>
     </main>
 
+    <Footer />
+
     <button class="floating-cta" type="button" data-floating-cta data-open-lead>ส่งโจทย์ให้เราดู</button>
 
     <div class="panel-backdrop" data-panel-backdrop></div>
diff --git a/src/pages/privacy.astro b/src/pages/privacy.astro
new file mode 100644
index 0000000..c94b2bb
--- /dev/null
+++ b/src/pages/privacy.astro
@@ -0,0 +1,25 @@
+---
+import PageShell from '../components/PageShell.astro';
+---
+
+<PageShell
+  title="นโยบายความเป็นส่วนตัว | MoreminiMore"
+  description="นโยบายความเป็นส่วนตัวของ MoreminiMore"
+>
+  <section class="page-hero scene scene-light" data-scene="light">
+    <div class="page-hero-grid">
+      <div>
+        <h1>นโยบายความเป็นส่วนตัว</h1>
+      </div>
+    </div>
+  </section>
+
+  <section class="page-section">
+    <div class="glass-panel liquid-glass liquidGlass-wrapper">
+      <div class="liquidGlass-effect" aria-hidden="true"></div>
+      <div class="liquidGlass-tint" aria-hidden="true"></div>
+      <div class="liquidGlass-shine" aria-hidden="true"></div>
+      <p>หน้านี้กำลังอัพเดท กรุณาติดต่อเราหากมีคำถามเกี่ยวกับนโยบายความเป็นส่วนตัว</p>
+    </div>
+  </section>
+</PageShell>
diff --git a/src/pages/terms.astro b/src/pages/terms.astro
new file mode 100644
index 0000000..6b2f77a
--- /dev/null
+++ b/src/pages/terms.astro
@@ -0,0 +1,25 @@
+---
+import PageShell from '../components/PageShell.astro';
+---
+
+<PageShell
+  title="เงื่อนไขการใช้งาน | MoreminiMore"
+  description="เงื่อนไขการใช้งานของ MoreminiMore"
+>
+  <section class="page-hero scene scene-light" data-scene="light">
+    <div class="page-hero-grid">
+      <div>
+        <h1>เงื่อนไขการใช้งาน</h1>
+      </div>
+    </div>
+  </section>
+
+  <section class="page-section">
+    <div class="glass-panel liquid-glass liquidGlass-wrapper">
+      <div class="liquidGlass-effect" aria-hidden="true"></div>
+      <div class="liquidGlass-tint" aria-hidden="true"></div>
+      <div class="liquidGlass-shine" aria-hidden="true"></div>
+      <p>หน้านี้กำลังอัพเดท กรุณาติดต่อเราหากมีคำถามเกี่ยวกับเงื่อนไขการใช้งาน</p>
+    </div>
+  </section>
+</PageShell>
diff --git a/src/styles/global.css b/src/styles/global.css
index 43cb783..26f5331 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -448,6 +448,28 @@ background: rgb(255 255 255 / .10);
 color: rgb(255 255 255 / .72);
 }
 
+/* Links inside inverted page sections */
+.page-section a,
+.page-section-tight a,
+.page-section button,
+.page-section-tight button,
+.page-section .text-link,
+.page-section-tight .text-link {
+  color: white;
+}
+.page-section a:hover,
+.page-section-tight a:hover,
+.page-section button:hover,
+.page-section-tight button:hover,
+.page-section .text-link:hover,
+.page-section-tight .text-link:hover {
+  color: var(--yellow);
+}
+.page-section li,
+.page-section-tight li {
+  color: rgb(255 255 255 / .72);
+}
+
 .service-detail-grid,
 .about-grid,
 .contact-layout,
@@ -508,6 +530,37 @@ margin-top: 14px;
 color: var(--muted);
 }
 
+/* Override muted colors inside inverted sections */
+.page-section .detail-card p,
+.page-section .about-grid p,
+.page-section .contact-info p,
+.page-section .faq-item p,
+.page-section .blog-card p,
+.page-section-tight .detail-card p,
+.page-section-tight .about-grid p,
+.page-section-tight .faq-item p,
+.page-section-tight .blog-card p,
+.page-section .related-service-card p,
+.page-section-tight .related-service-card p {
+  color: rgb(255 255 255 / .72);
+}
+
+.page-section .detail-card span,
+.page-section .faq-item span,
+.page-section .blog-card span,
+.page-section .related-service-card span,
+.page-section-tight .detail-card span,
+.page-section-tight .faq-item span,
+.page-section-tight .blog-card span,
+.page-section-tight .related-service-card span {
+  color: rgb(255 255 255 / .60);
+}
+
+.page-section .detail-objective,
+.page-section-tight .detail-objective {
+  color: rgb(255 255 255 / .72);
+}
+
 .faq-list {
 grid-template-columns: 1fr;
 }
@@ -554,6 +607,12 @@ font-size: 14px;
 font-weight: 700;
 }
 
+/* Override for dark sections */
+.page-section .contact-problem-list span,
+.page-section-tight .contact-problem-list span {
+  color: rgb(255 255 255 / .72);
+}
+
 .contact-info {
 padding: clamp(12px, 3vw, 28px);
 }
@@ -565,12 +624,13 @@ margin: 24px 0;
 }
 
 .contact-info dt {
-color: var(--muted);
+  color: rgb(255 255 255 / .60);
 font-size: 13px;
 font-weight: 800;
 }
 
 .contact-info dd {
+  color: white;
 margin: 4px 0 0;
 font-size: clamp(1.3rem, 2.4vw, 2rem);
 font-weight: 900;
@@ -596,6 +656,12 @@ font-size: 13px;
 font-weight: 900;
 }
 
+/* Override for dark sections */
+.page-section .service-story-grid h3,
+.page-section-tight .service-story-grid h3 {
+  color: rgb(255 255 255 / .60);
+}
+
 .service-hero-panel p {
 margin: 12px 0 24px;
 color: var(--muted);
@@ -648,7 +714,7 @@ grid-template-columns: repeat(3, minmax(0, 1fr));
 }
 
 .related-service-card {
-color: var(--ink);
+  color: white;
 }
 
 .related-service-card h3 {
@@ -682,7 +748,7 @@ color: var(--muted);
 
 .hero h1 {
   max-width: 15ch;
-  font-size: clamp(3rem, 5.4vw, 5.45rem);
+  font-size: clamp(2.55rem, 4.6vw, 4.63rem);
   font-weight: 900;
 }
 
@@ -698,6 +764,30 @@ color: var(--muted);
   display: none;
 }
 
+.hero-result-metrics {
+display: flex;
+gap: 16px;
+margin: 20px 0;
+}
+
+.hero-metric {
+text-align: center;
+}
+
+.hero-metric strong {
+display: block;
+font-size: 1.6rem;
+font-weight: 900;
+color: var(--ink);
+}
+
+.hero-metric span {
+font-size: 0.82rem;
+color: var(--muted);
+text-transform: uppercase;
+letter-spacing: 0.04em;
+}
+
 .hero-lead {
   max-width: 62ch;
   margin-top: 24px;
@@ -741,6 +831,12 @@ transition: all .4s cubic-bezier(.175, .885, .32, 2.2);
 display: none;
 }
 
+/* Restore process-grid arrows (override liquid-glass ::after) */
+.process-grid.liquid-glass article::after,
+.process-grid article.liquid-glass::after {
+display: grid;
+}
+
 .liquidGlass-effect,
 .liquidGlass-tint,
 .liquidGlass-shine {
@@ -829,6 +925,124 @@ inset -1px -1px 1px 1px var(--nav-shine-b);
   font-size: clamp(1.7rem, 3vw, 2.8rem);
 }
 
+/* ── Hero Profit Cluster ── */
+.hero-profit-cluster {
+  position: relative;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-template-rows: auto auto;
+  gap: 14px;
+  width: 100%;
+  max-width: 420px;
+  aspect-ratio: 1;
+  margin-inline: auto;
+}
+
+/* Center card spans the middle */
+.profit-center {
+  grid-column: 1 / -1;
+  grid-row: 1 / -1;
+  align-self: center;
+  justify-self: center;
+  width: 180px;
+  height: 180px;
+  border-radius: 50%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  z-index: 2;
+  border: 2px solid var(--yellow);
+  box-shadow:
+    0 0 0 6px rgb(254 212 0 / .12),
+    0 20px 60px rgb(254 212 0 / .18),
+    0 4px 16px rgb(0 0 0 / .06);
+}
+
+.profit-label {
+  font-size: clamp(2rem, 4vw, 2.8rem);
+  font-weight: 900;
+  color: var(--ink);
+  line-height: 1;
+}
+
+.profit-sub {
+  margin-top: 4px;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--muted);
+  text-align: center;
+  line-height: 1.3;
+}
+
+/* Outer cards */
+.profit-card {
+  border-radius: 20px;
+  padding: 18px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
+}
+
+.profit-card:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 16px 40px rgb(0 0 0 / .10);
+}
+
+.profit-tag {
+  font-size: 14px;
+  font-weight: 900;
+  color: var(--ink);
+  letter-spacing: .02em;
+  text-transform: uppercase;
+}
+
+.profit-desc {
+  margin-top: 4px;
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--muted);
+  line-height: 1.35;
+}
+
+/* Position outer cards in the grid */
+.profit-marketing {
+  grid-column: 1 / -1;
+  grid-row: 1;
+  justify-self: center;
+  width: 160px;
+  z-index: 1;
+}
+
+.profit-ai {
+  grid-column: 1;
+  grid-row: 2;
+  justify-self: end;
+  width: 150px;
+  z-index: 1;
+}
+
+.profit-biz {
+  grid-column: 2;
+  grid-row: 2;
+  justify-self: start;
+  width: 150px;
+  z-index: 1;
+}
+
+/* Connector SVG */
+.profit-connectors {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 0;
+  pointer-events: none;
+}
+
 .problem-preview,
 .decision-preview {
   display: grid;
@@ -908,6 +1122,36 @@ line-height: 1.32;
   color: var(--muted);
 }
 
+.problem-strip-content {
+display: flex;
+flex-direction: column;
+gap: 16px;
+}
+
+.problem-list {
+list-style: none;
+padding: 0;
+margin: 0;
+display: flex;
+flex-direction: column;
+gap: 8px;
+}
+
+.problem-list li {
+position: relative;
+padding-left: 20px;
+font-size: 0.95rem;
+color: var(--ink);
+}
+
+.problem-list li::before {
+content: "→";
+position: absolute;
+left: 0;
+color: var(--yellow);
+font-weight: 700;
+}
+
 .case-section,
 .portfolio-section {
   width: 100%;
@@ -935,6 +1179,26 @@ position: relative;
 z-index: 1;
 }
 
+
+/* White text on inverted dark backgrounds */
+.scene-dark h2,
+.scene-dark h3 {
+  color: white;
+}
+.scene-dark p {
+  color: rgb(255 255 255 / .72);
+}
+/* Links inside dark scenes */
+.scene-dark a,
+.scene-dark button,
+.scene-dark .text-link {
+  color: white;
+}
+.scene-dark a:hover,
+.scene-dark button:hover,
+.scene-dark .text-link:hover {
+  color: var(--yellow);
+}
 .case-section .eyebrow,
 .portfolio-section .eyebrow {
   border-color: var(--dark-line);
@@ -1167,6 +1431,11 @@ justify-content: center;
 margin-top: 28px;
 }
 
+.portfolio-more .button:hover {
+transform: none;
+box-shadow: 0 14px 34px rgb(254 212 0 / .30), inset 1px 1px 0 rgb(255 255 255 / .48);
+}
+
 .process-grid {
   position: relative;
   display: grid;
@@ -1175,14 +1444,7 @@ margin-top: 28px;
 }
 
 .process-grid::before {
-position: absolute;
-top: 42px;
-right: 10%;
-left: 10%;
-height: 2px;
-z-index: 0;
-content: "";
-background: linear-gradient(90deg, rgb(254 212 0 / .08), rgb(254 212 0 / .62), rgb(254 212 0 / .08));
+display: none;
 }
 
 .process-grid article {
@@ -1191,17 +1453,14 @@ background: linear-gradient(90deg, rgb(254 212 0 / .08), rgb(254 212 0 / .62), r
   min-height: 250px;
   display: flex;
   flex-direction: column;
-  border: 1px solid rgb(19 18 13 / .12);
   border-radius: 24px;
-  background: rgb(255 255 255 / .32);
-  box-shadow: 0 22px 60px rgb(42 36 18 / .10), inset 1px 1px 0 rgb(255 255 255 / .68);
   padding: 18px;
+  overflow: visible;
   transition: transform .25s var(--ease), box-shadow .25s var(--ease);
 }
 
 .process-grid article:hover {
 transform: translateY(-5px);
-box-shadow: 0 30px 76px rgb(42 36 18 / .16), inset 1px 1px 0 rgb(255 255 255 / .78);
 }
 
 .process-grid article::after {
@@ -1232,9 +1491,9 @@ display: grid;
 place-items: center;
 border: 1px solid rgb(19 18 13 / .12);
 border-radius: 22px;
-background: var(--yellow);
+background: rgb(255 255 255 / .5);
 color: var(--ink);
-box-shadow: 0 16px 38px rgb(254 212 0 / .28);
+box-shadow: 0 16px 38px rgb(42 36 18 / .10);
 font-size: 1.25rem;
 }
 
@@ -1636,6 +1895,31 @@ max-width: calc(100% - 32px);
     max-width: 9ch;
   }
 
+  /* Profit cluster mobile */
+  .hero-profit-cluster {
+    max-width: 340px;
+    gap: 10px;
+  }
+  .profit-center {
+    width: 140px;
+    height: 140px;
+  }
+  .profit-label {
+    font-size: 1.8rem;
+  }
+  .profit-marketing,
+  .profit-ai,
+  .profit-biz {
+    width: 130px;
+    padding: 14px;
+  }
+  .profit-tag {
+    font-size: 12px;
+  }
+  .profit-desc {
+    font-size: 11px;
+  }
+
 .problem-strip h2,
 .section-heading h2,
 .final-cta h2,