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
This commit is contained in:
Kunthawat Greethong
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user