Files

Kunthawat Greethong 0f244424c0 feat: hero profit cluster, dark text fix, footer, privacy/terms pages

- 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

2026-06-24 08:24:49 +07:00

4.4 KiB

Raw Blame History

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):

<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

ล่าง:

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)

4.4 KiB Raw Blame History