# Plan: Footer Component + Remove Yellow Lines from Process Section
_Locked via grill — by Claude + Kunthawat — Revised Round 1_

## Goal
สร้าง 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)