0f244424c0
- 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
72 lines
4.4 KiB
Markdown
72 lines
4.4 KiB
Markdown
# 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)
|