kunthawat/moreminimore-astroreal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
0f244424c01ba215b3280f4ab2e19974f59d5bd2
moreminimore-astroreal/src/pages/index.astro
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

488 lines
27 KiB
Plaintext
Raw Blame History

---
import '../styles/global.css';
import Footer from '../components/Footer.astro';
const formEndpoint = '';
const problems = [
['website_no_leads', 'เว็บมีอยู่แล้ว แต่ไม่ค่อยมีลูกค้าทัก'],
['ads_not_worth_it', 'ยิงแอดอยู่ แต่ยอดขายไม่คุ้ม'],
['wrong_leads', 'มีคนทักมา แต่ไม่ใช่ลูกค้าที่ใช่'],
['slow_or_error_work', 'ทีมงานทำงานเดิม ๆ แต่ทำงานช้า หรือผิดพลาดบ่อย'],
['ai_not_sure', 'อยากใช้ AI แต่ไม่รู้เริ่มตรงไหน'],
['not_sure', 'ยังไม่แน่ใจว่าควรแก้อะไรก่อน'],
];
const services = [
{
name: 'Website Development',
slug: 'website-development',
headline: 'เว็บที่ช่วยให้ลูกค้ารู้ว่าควรทักเรื่องอะไร',
copy: 'เหมาะกับธุรกิจที่มีเว็บแล้วแต่ลูกค้ายังไม่ค่อยติดต่อ หรืออยากเริ่มเว็บใหม่ให้วัดผลได้ตั้งแต่วันแรก',
},
{
name: 'Marketing Consult',
slug: 'marketing-consult',
headline: 'การตลาดที่ใช้งบคุ้มขึ้นจากข้อมูลจริง',
copy: 'เหมาะกับธุรกิจที่ยิงแอดอยู่ แต่ยอดขายไม่คุ้ม หรือมีคนทักมาแล้วไม่ใช่ลูกค้าที่ควรได้',
},
{
name: 'Automation Workflow',
slug: 'automation-workflow',
headline: 'ระบบที่ลดงานช้าและงานผิดพลาด',
copy: 'เหมาะกับทีมที่ทำงานเดิม ๆ ซ้ำทุกวัน ใช้เวลานาน หรือมีจุดผิดพลาดที่แก้ไม่จบ',
},
{
name: 'AI Consult',
slug: 'ai-consult',
headline: 'AI ที่ช่วยทีมทำงาน ไม่ใช่แค่ของเล่นใหม่',
copy: 'เหมาะกับธุรกิจที่อยากใช้ AI แต่ยังไม่แน่ใจว่างานไหนควรเริ่มก่อนและใช้อย่างไรให้ปลอดภัย',
},
];
const portfolio = [
{
name: 'Jet Industries',
image: '/images/portfolio/jetindustries.png',
href: 'https://jetindustries.co.th',
tag: 'Featured credibility',
description: 'เว็บไซต์องค์กรผู้ผลิตพลาสติกฉีดขึ้นรูป ประสบการณ์กว่า 40 ปี',
featured: true,
},
{
name: 'เทรนเนอร์ซันนี่',
image: '/images/portfolio/trainersunny.png',
href: 'https://trainersunny.com',
tag: 'Featured visual',
description: 'เว็บไซต์ personal brand และหลักสูตรอบรมที่มีภาพจำชัด',
featured: true,
},
{
name: 'Dealplustech',
image: '/images/portfolio/dealplustech.png',
href: 'https://www.dealplustech.co.th',
tag: 'Website Development',
description: 'เว็บไซต์ระบบน้ำและสุขภัณฑ์คุณภาพสูงสำหรับโรงงานและบ้านเรือน',
},
{
name: 'Underdog Marketing',
image: '/images/portfolio/underdog.png',
href: 'https://underdog.run',
tag: 'Website Development',
description: 'แพลตฟอร์มบทความการตลาดที่ใช้งานง่ายและ SEO friendly',
},
{
name: 'ทวนทอง 99',
image: '/images/portfolio/tuanthong.png',
href: 'https://tuanthong99.com',
tag: 'E-commerce',
description: 'เว็บไซต์สินค้าอุปโภคบริโภคและสมุนไพรไทย',
},
{
name: 'สำนักงานกฎหมาย ตถาตา',
image: '/images/portfolio/lawyernoom.png',
href: 'https://lawyernoom.com',
tag: 'Website Development',
description: 'เว็บไซต์สำนักงานกฎหมายที่เน้นความน่าเชื่อถือ',
},
];
const process = [
['เข้าใจธุรกิจ', 'ทำความรู้จักเป้าหมาย ลูกค้า และปัญหาที่เจอจริง'],
['ดูข้อมูล', 'เช็กเว็บ แอด ลูกค้า ขั้นตอนทำงาน หรือข้อมูลที่มีอยู่'],
['เลือกทางที่คุ้ม', 'เสนอสิ่งที่ควรทำก่อน ไม่ทำทุกอย่างพร้อมกัน'],
['ลงมือและวัดผล', 'ทำให้ใช้งานได้จริง แล้วดูผลเพื่อปรับต่อ'],
];
---
<!doctype html>
<html lang="th">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
<meta name="description" content="MoreminiMore ช่วย SME ดูข้อมูลจริงก่อนตัดสินใจทำเว็บ การตลาด AI หรือระบบอัตโนมัติ เพื่อเลือกสิ่งที่ควรทำให้คุ้มที่สุด" />
<meta name="theme-color" content="#f8f5ea" />
<title>MoreminiMore | ธุรกิจไม่ควรเสียเงินกับสิ่งที่ยังไม่รู้ว่าคุ้มไหม</title>
</head>
<body>
<div class="background-stage" aria-hidden="true">
<svg class="coded-background" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid slice">
<defs>
<radialGradient id="Gradient1Home" cx="50%" cy="50%" fx="0.441602%" fy="50%" r=".5">
<animate attributeName="fx" dur="34s" values="0%;3%;0%" repeatCount="indefinite" />
<stop offset="0%" stop-color="rgba(255, 0, 255, 1)" />
<stop offset="100%" stop-color="rgba(255, 0, 255, 0)" />
</radialGradient>
<radialGradient id="Gradient2Home" cx="50%" cy="50%" fx="2.68147%" fy="50%" r=".5">
<animate attributeName="fx" dur="23.5s" values="0%;3%;0%" repeatCount="indefinite" />
<stop offset="0%" stop-color="rgba(255, 255, 0, 1)" />
<stop offset="100%" stop-color="rgba(255, 255, 0, 0)" />
</radialGradient>
<radialGradient id="Gradient3Home" cx="50%" cy="50%" fx="0.836536%" fy="50%" r=".5">
<animate attributeName="fx" dur="21.5s" values="0%;3%;0%" repeatCount="indefinite" />
<stop offset="0%" stop-color="rgba(0, 255, 255, 1)" />
<stop offset="100%" stop-color="rgba(0, 255, 255, 0)" />
</radialGradient>
<radialGradient id="Gradient4Home" cx="50%" cy="50%" fx="4.56417%" fy="50%" r=".5">
<animate attributeName="fx" dur="23s" values="0%;5%;0%" repeatCount="indefinite" />
<stop offset="0%" stop-color="rgba(0, 255, 0, 1)" />
<stop offset="100%" stop-color="rgba(0, 255, 0, 0)" />
</radialGradient>
<radialGradient id="Gradient5Home" cx="50%" cy="50%" fx="2.65405%" fy="50%" r=".5">
<animate attributeName="fx" dur="24.5s" values="0%;5%;0%" repeatCount="indefinite" />
<stop offset="0%" stop-color="rgba(0, 0, 255, 1)" />
<stop offset="100%" stop-color="rgba(0, 0, 255, 0)" />
</radialGradient>
<radialGradient id="Gradient6Home" cx="50%" cy="50%" fx="0.981338%" fy="50%" r=".5">
<animate attributeName="fx" dur="25.5s" values="0%;5%;0%" repeatCount="indefinite" />
<stop offset="0%" stop-color="rgba(255, 0, 0, 1)" />
<stop offset="100%" stop-color="rgba(255, 0, 0, 0)" />
</radialGradient>
</defs>
<rect x="13.744%" y="1.18473%" width="100%" height="100%" fill="url(#Gradient1Home)" transform="rotate(334.41 50 50)">
<animate attributeName="x" dur="20s" values="25%;0%;25%" repeatCount="indefinite" />
<animate attributeName="y" dur="21s" values="0%;25%;0%" repeatCount="indefinite" />
<animateTransform attributeName="transform" type="rotate" from="0 50 50" to="360 50 50" dur="7s" repeatCount="indefinite" />
</rect>
<rect x="-2.17916%" y="35.4267%" width="100%" height="100%" fill="url(#Gradient2Home)" transform="rotate(255.072 50 50)">
<animate attributeName="x" dur="23s" values="-25%;0%;-25%" repeatCount="indefinite" />
<animate attributeName="y" dur="24s" values="0%;50%;0%" repeatCount="indefinite" />
<animateTransform attributeName="transform" type="rotate" from="0 50 50" to="360 50 50" dur="12s" repeatCount="indefinite" />
</rect>
<rect x="9.00483%" y="14.5733%" width="100%" height="100%" fill="url(#Gradient3Home)" transform="rotate(139.903 50 50)">
<animate attributeName="x" dur="25s" values="0%;25%;0%" repeatCount="indefinite" />
<animate attributeName="y" dur="12s" values="0%;25%;0%" repeatCount="indefinite" />
<animateTransform attributeName="transform" type="rotate" from="360 50 50" to="0 50 50" dur="9s" repeatCount="indefinite" />
</rect>
</svg>
</div>
<a class="skip-link" href="#main">ข้ามไปยังเนื้อหา</a>
<header class="site-nav liquid-glass liquidGlass-wrapper" data-nav>
<div class="liquidGlass-effect" aria-hidden="true"></div>
<div class="liquidGlass-tint" aria-hidden="true"></div>
<div class="liquidGlass-shine" aria-hidden="true"></div>
<a class="brand" href="/" aria-label="MoreminiMore">
<img src="/images/logos/logo-long-black.png" width="205" height="36" alt="MoreminiMore" />
</a>
<button class="nav-toggle" type="button" aria-controls="nav-menu" aria-expanded="false" data-nav-toggle>
เมนู
</button>
<nav id="nav-menu" class="nav-menu" aria-label="เมนูหลัก" data-nav-menu>
<a href="/">หน้าแรก</a>
<div class="nav-service">
<button type="button" aria-expanded="false" data-service-toggle>บริการ</button>
<div class="service-mega" data-service-menu>
{services.map((service) => (
<a href={`/services/${service.slug}/`}>
<strong>{service.name}</strong>
<span>{service.headline}</span>
</a>
))}
</div>
</div>
<a href="/portfolio/">ผลงาน</a>
<a href="/about/">เกี่ยวกับ</a>
<a href="/blog/">บทความ</a>
<a href="/contact/">ติดต่อ</a>
</nav>
<button class="nav-cta" type="button" data-open-lead>ส่งโจทย์ให้เราดู</button>
</header>
<main id="main">
<section id="home" class="hero scene scene-light" data-scene="light">
<div class="hero-grid">
<div class="hero-copy">
<p class="eyebrow">พาร์ทเนอร์สำหรับ SME ที่อยากตัดสินใจให้คุ้มขึ้น</p>
<h1 class="desktop-title">
<span>ธุรกิจไม่ควร</span>
<span>เสียเงินกับสิ่งที่ยัง</span>
<span>ไม่รู้ว่าคุ้มไหม</span>
</h1>
<h1 class="mobile-title" aria-hidden="true">
<span>ธุรกิจ</span>
<span>ไม่ควร</span>
<span>เสียเงิน</span>
<span>กับสิ่งที่ยัง</span>
<span>ไม่รู้ว่า</span>
<span>คุ้มไหม</span>
</h1>
<p class="hero-lead">
เราช่วย SME ดูข้อมูลจริงก่อนตัดสินใจทำเว็บ การตลาด AI หรือระบบอัตโนมัติ เพื่อเลือกสิ่งที่ควรทำอย่างมีประสิทธิภาพ และเหมาะกับธุรกิจของคุณ
</p>
<div class="hero-actions">
<button class="button button-primary" type="button" data-open-lead>ส่งโจทย์ให้เราดู</button>
<a class="button button-secondary" href="#portfolio">ดูผลงานก่อน</a>
</div>
</div>
<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>
<!-- 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>
<section class="problem-strip">
<div>
<p class="eyebrow">Problem first</p>
<h2>คุณเล่าปัญหา เราช่วยหา service ที่เหมาะสม</h2>
</div>
<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">
<div class="section-heading">
<p class="eyebrow">Diagnosis story</p>
<h2>Dataroot: ก่อนแก้ ต้องรู้ก่อนว่าข้อมูลกำลังบอกอะไร</h2>
</div>
<div class="case-grid">
<article class="case-story 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>
<div class="story-step">
<span>01</span>
<h3>ปัญหา</h3>
<p>ยิงโฆษณาและทำการตลาดอยู่แล้ว แต่ต้องดูให้ชัดว่าคนที่เข้ามาใช่ลูกค้าที่ควรได้หรือไม่</p>
</div>
<div class="story-step">
<span>02</span>
<h3>สิ่งที่พบ</h3>
<p>กลุ่มเป้าหมายและข้อความบางส่วนดึงความสนใจได้ แต่ยังไม่พาคนที่มี intent ตรงพอเข้ามา</p>
</div>
<div class="story-step">
<span>03</span>
<h3>สิ่งที่ปรับ</h3>
<p>ปรับการมองกลุ่มเป้าหมายและการวัดผลจากข้อมูลจริง ไม่ใช่เลือกจากสิ่งที่ดูน่าจะคลิกง่าย</p>
</div>
</article>
<div class="case-proof" data-depth-card>
<img src="/images/portfolio/dataroot.png" alt="Dataroot website screenshot" loading="lazy" />
<div class="metric-card">
<strong>+373%</strong>
<span>impression</span>
</div>
<div class="metric-card">
<strong>+114.2%</strong>
<span>click</span>
</div>
<div class="metric-card">
<strong>-28.3%</strong>
<span>ad spend</span>
</div>
</div>
</div>
</section>
<section id="services" class="services-section scene scene-light" data-scene="light">
<div class="section-heading">
<p class="eyebrow">Services</p>
<h2>บริการมีไว้ให้เราเลือกให้เหมาะกับปัญหา ไม่ใช่ให้คุณเดาเอง</h2>
</div>
<div class="service-grid">
{services.map((service) => (
<article class="service-card 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>{service.name}</span>
<h3>{service.headline}</h3>
<p>{service.copy}</p>
</article>
))}
</div>
</section>
<section id="portfolio" class="portfolio-section scene scene-dark" data-scene="dark">
<div class="section-heading">
<p class="eyebrow">Portfolio</p>
<h2>งานเว็บที่ต้องดูน่าเชื่อถือก่อน แล้วค่อยสวยแบบมีเหตุผล</h2>
</div>
<div class="portfolio-grid">
{portfolio.slice(0, 5).map((item) => (
<a class:list={['portfolio-card', item.featured && 'featured']} href={item.href} target="_blank" rel="noopener">
<img src={item.image} alt={`${item.name} website screenshot`} loading={item.featured ? 'eager' : 'lazy'} />
<div>
<span>{item.tag}</span>
<h3>{item.name}</h3>
<p>{item.description}</p>
</div>
</a>
))}
</div>
<div class="portfolio-more">
<a class="button button-primary" href="/portfolio/">ไปหน้า ผลงาน</a>
</div>
</section>
<section id="process" class="process-section">
<div class="section-heading">
<p class="eyebrow">How we work</p>
<h2>ไม่เริ่มจากขายของ เริ่มจากเข้าใจธุรกิจก่อน</h2>
</div>
<div class="process-grid">
{process.map(([title, copy], index) => (
<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>
</article>
))}
</div>
</section>
<section class="final-cta">
<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 class="eyebrow">Start small</p>
<h2>ส่งโจทย์สั้น ๆ มาก่อนก็ได้ เดี๋ยวเราช่วยดูว่าควรเริ่มตรงไหน</h2>
<button class="button button-primary" type="button" data-open-lead>ส่งโจทย์ให้เราดู</button>
</div>
</section>
</main>
<Footer />
<button class="floating-cta" type="button" data-floating-cta data-open-lead>ส่งโจทย์ให้เราดู</button>
<div class="panel-backdrop" data-panel-backdrop></div>
<aside class="lead-panel liquid-glass liquidGlass-wrapper" aria-labelledby="lead-title" aria-hidden="true" data-lead-panel data-endpoint={formEndpoint}>
<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="panel-head">
<div>
<p class="eyebrow">ส่งโจทย์ให้เราดู</p>
<h2 id="lead-title">เลือกปัญหาที่ใกล้ที่สุด แล้วเล่าเพิ่มสั้น ๆ</h2>
</div>
<button type="button" class="panel-close" aria-label="ปิดฟอร์ม" data-close-lead>ปิด</button>
</div>
<form class="lead-form" data-lead-form>
<input class="honeypot" type="text" name="website" tabindex="-1" autocomplete="off" />
<fieldset>
<legend>ตอนนี้ติดเรื่องไหนอยู่?</legend>
<div class="chip-grid">
{problems.map(([value, label]) => (
<label class="chip">
<input type="checkbox" name="problems" value={value} />
<span>{label}</span>
</label>
))}
</div>
</fieldset>
<label>
เล่าเพิ่มสั้น ๆ
<textarea name="message" rows="4" placeholder="เช่น ยิงแอดอยู่ แต่ยอดขายไม่คุ้ม อยากรู้ว่าควรแก้อะไรก่อน"></textarea>
</label>
<div class="field-row">
<label>
ชื่อ
<input name="name" type="text" autocomplete="name" required />
</label>
<label>
เบอร์โทร
<input name="phone" type="tel" autocomplete="tel" />
</label>
</div>
<label>
อีเมล
<input name="email" type="email" autocomplete="email" />
</label>
<p class="field-note">ใส่เบอร์โทรหรืออีเมลอย่างใดอย่างหนึ่งก็ได้</p>
<p class="form-status" data-form-status role="status"></p>
<button class="button button-primary" type="submit">ส่งโจทย์</button>
</form>
</aside>
<svg class="glass-filter" aria-hidden="true" focusable="false">
<filter id="glass-distortion" x="0%" y="0%" width="100%" height="100%" filterUnits="objectBoundingBox">
<feTurbulence type="fractalNoise" baseFrequency="0.01 0.01" numOctaves="1" seed="5" result="turbulence" />
<feComponentTransfer in="turbulence" result="mapped">
<feFuncR type="gamma" amplitude="1" exponent="10" offset="0.5" />
<feFuncG type="gamma" amplitude="0" exponent="1" offset="0" />
<feFuncB type="gamma" amplitude="0" exponent="1" offset="0.5" />
</feComponentTransfer>
<feGaussianBlur in="turbulence" stdDeviation="3" result="softMap" />
<feSpecularLighting in="softMap" surfaceScale="5" specularConstant="1" specularExponent="100" lighting-color="white" result="specLight">
<fePointLight x="-200" y="-200" z="300" />
</feSpecularLighting>
<feComposite in="specLight" operator="arithmetic" k1="0" k2="1" k3="1" k4="0" result="litImage" />
<feDisplacementMap in="SourceGraphic" in2="softMap" scale="150" xChannelSelector="R" yChannelSelector="G" />
</filter>
</svg>
<script>
import '../scripts/home.js';
</script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink