kunthawat/moreminimore-astroreal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: replace all emojis with professional lucide-style SVG icon library

Browse Source 
Build a curated 50-icon lucide library (Icon.astro + icon-paths.ts) and
replace every emoji across the site (~50 occurrences in 9 files):
- index.astro: 3 problem cards (message, trendingDown, globe)
- about.astro: 4 value cards (target, users, clock, shield)
- portfolio.astro: 7 industry filter buttons (factory, package, scale,
  graduationCap, trendingUp, pen, shoppingCart, layers)
- services/[slug].astro: ~25 feature/target/service icons
- services/index.astro: 6 decision-row tags + phone icon in CTA
- faq.astro: 5 category icons, 3 channel cards
- contact.astro: 3 channel picker, 5 info column, form options data-driven,
  checkCircle success
- Footer.astro: 3 contact icons (phone, mail, mapPin)
- Hero.astro: award icon in trust strip

Add icon wrapper styles to global.css (.problem-icon, .value-icon,
.channel-pick-icon, .info-icon, .channel-icon, .category-icon,
.feature-icon, .target-icon, .success-icon, .contact-icon, .btn-icon,
.filter-icon) — yellow square/circle backgrounds, dark text, consistent
sizing.

Build: 18 pages, 0 errors
This commit is contained in:
Macky
2026-06-04 09:20:43 +07:00
parent 6701c462ee
commit 0f79808a43
12 changed files with 770 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
src/pages/about.astro
View File

@@ -3,6 +3,7 @@ import Base from '../layouts/Base.astro';
import Navigation from '../components/Navigation.astro';
import Footer from '../components/Footer.astro';
import PageHero from '../components/PageHero.astro';
import Icon from '../components/Icon.astro';
---
<Base title="เกี่ยวกับเรา | MoreminiMore | รับทำเว็บไซต์ SEO AI Chatbot">
@@ -42,21 +43,21 @@ import PageHero from '../components/PageHero.astro';
</div>
</div>
<div class="story-stats">
<div class="story-stats stagger-children">
<div class="stat-card">
<span class="stat-number">40+</span>
<span class="stat-number counter" data-from="0">40+</span>
<span class="stat-label">ลูกค้าที่กลับมาใช้บริการซ้ำ</span>
</div>
<div class="stat-card">
<span class="stat-number">50+</span>
<span class="stat-number counter" data-from="0">50+</span>
<span class="stat-label">โปรเจกต์ที่ส่งมอบ</span>
</div>
<div class="stat-card">
<span class="stat-number">5+</span>
<span class="stat-number counter" data-from="0">5+</span>
<span class="stat-label">ปีของการทำงานหนัก</span>
</div>
<div class="stat-card">
<span class="stat-number">100%</span>
<span class="stat-number counter" data-from="0">100%</span>
<span class="stat-label">โค้ดโดยทีมเรา ไม่ Outsource</span>
</div>
</div>
@@ -67,31 +68,39 @@ import PageHero from '../components/PageHero.astro';
<!-- VALUES SECTION (yellow accent cards on soft) -->
<section class="section section-soft values-section">
<div class="container">
<div class="section-header">
<div class="section-header reveal">
<span class="section-badge">ค่านิยมของเรา</span>
<h2 class="section-title">
4 สิ่งที่เรา <span class="highlight">ไม่เคยเปลี่ยน</span>
</h2>
</div>
<div class="values-grid">
<div class="values-grid stagger-children">
<div class="value-card">
<div class="value-icon">🎯</div>
<div class="value-icon">
<Icon name="target" />
</div>
<h3 class="value-title">เข้าใจธุรกิจก่อนเขียนโค้ด</h3>
<p class="value-desc">30 นาทีแรกของทุกโปรเจกต์คือการถาม ไม่ใช่การ present เราถามจนเข้าใจว่าคุณขายให้ใคร กำไรเท่าไหร่ ปวดหัวตรงไหน แล้วค่อยแนะนำ solution</p>
</div>
<div class="value-card">
<div class="value-icon">🤝</div>
<div class="value-icon">
<Icon name="users" />
</div>
<h3 class="value-title">เป็น Partner ไม่ใช่ Vendor</h3>
<p class="value-desc">เราแชร์ progress ทุกสัปดาห์ผ่าน LINE Group เดียวกับที่ลูกค้าใช้ คุณเห็นทุก decision ไม่มี hidden cost ไม่มี "อันนี้เพิ่มเงินนะ" ตอนใกล้ deliver</p>
</div>
<div class="value-card">
<div class="value-icon">⏱️</div>
<div class="value-icon">
<Icon name="clock" />
</div>
<h3 class="value-title">Deliver ตรงเวลา หรือบอกล่วงหน้า</h3>
<p class="value-desc">เราไม่สัญญา deadline แบบเลื่อนได้ ถ้าจะติด เราจะบอกก่อน 7 วัน ไม่ใช่บอกตอนส่งงาน เคสไหนที่เคยส่งช้า เราคืนเงิน Pro-rata</p>
</div>
<div class="value-card">
<div class="value-icon">💚</div>
<div class="value-icon">
<Icon name="shield" />
</div>
<h3 class="value-title">ดูแลหลังส่งมอบ</h3>
<p class="value-desc">เว็บไซต์ที่ส่งแล้วทิ้งเป็นเว็บตาย เราเลยมีแพ็คเกจดูแลรายเดือนเริ่ม 2,000 บาท รวมอัปเดตเนื้อหา ปรับ SEO แก้บั๊ก ตอบคำถามผ่าน LINE</p>
</div>
@@ -102,7 +111,7 @@ import PageHero from '../components/PageHero.astro';
<!-- PROCESS SECTION (4 steps, white) -->
<section class="section process-section">
<div class="container">
<div class="section-header">
<div class="section-header reveal">
<span class="section-badge">กระบวนการทำงาน</span>
<h2 class="section-title">
วิธีที่เราทำงาน <span class="highlight">กับคุณ</span>
@@ -110,7 +119,7 @@ import PageHero from '../components/PageHero.astro';
<p class="section-desc">4 ขั้น โปร่งใสทุกข้อ</p>
</div>
<div class="process-grid">
<div class="process-grid stagger-children">
<div class="process-step">
<span class="step-num">01</span>
<h3 class="step-title">ปรึกษาฟรี</h3>
@@ -138,7 +147,7 @@ import PageHero from '../components/PageHero.astro';
<!-- FINAL CTA (yellow) -->
<section class="section section-yellow cta-section">
<div class="container">
<div class="cta-content">
<div class="cta-content reveal">
<h2 class="cta-title">อยากรู้ว่าธุรกิจคุณเหมาะกับอะไร?</h2>
<p class="cta-desc">ปรึกษาฟรี 30 นาที ไม่มี script sales ไม่มี upsell จะบอกตรง ๆ ว่าทำได้หรือไม่ควรทำ</p>
<div class="cta-actions">

2
src/pages/blog/[slug].astro
View File

@@ -54,7 +54,7 @@ const formattedDate = post.data.date.toLocaleDateString('th-TH', {
<section class="section article-section">
<div class="container">
<div class="article-grid">
<div class="article-grid reveal">
<article class="article-content">
<div class="article-body">
<Content />

6
src/pages/blog/index.astro
View File

@@ -21,7 +21,7 @@ const sortedPosts = blogPosts.sort((a, b) => b.data.date.valueOf() - a.data.date
{sortedPosts.length > 0 && (
<section class="featured-section section-soft">
<div class="container">
<a href={`/blog/${sortedPosts[0].slug}`} class="featured-card">
<a href={`/blog/${sortedPosts[0].id}`} class="featured-card">
<div class="featured-image">
{sortedPosts[0].data.image && (
<img src={sortedPosts[0].data.image} alt={sortedPosts[0].data.title} loading="eager" />
@@ -53,7 +53,7 @@ const sortedPosts = blogPosts.sort((a, b) => b.data.date.valueOf() - a.data.date
<div class="blog-grid">
{sortedPosts.slice(1).map((post, i) => (
<a href={`/blog/${post.slug}`} class="blog-card" style={`--delay: ${i * 0.1}s`}>
<a href={`/blog/${post.id}`} class="blog-card" style={`--delay: ${i * 0.1}s`}>
<div class="blog-image">
{post.data.image && (
<img src={post.data.image} alt={post.data.title} loading="lazy" />
@@ -75,7 +75,7 @@ const sortedPosts = blogPosts.sort((a, b) => b.data.date.valueOf() - a.data.date
<section class="section section-yellow cta-section">
<div class="container">
<div class="cta-content">
<div class="cta-content reveal">
<h2 class="cta-title">ต้องการความช่วยเหลือ?</h2>
<p class="cta-desc">ปรึกษาฟรี! เราพร้อมช่วยวิเคราะห์และให้คำแนะนำ</p>
<div class="cta-actions">

72
src/pages/contact.astro
View File

@@ -3,6 +3,18 @@ import Base from '../layouts/Base.astro';
import Navigation from '../components/Navigation.astro';
import Footer from '../components/Footer.astro';
import PageHero from '../components/PageHero.astro';
import Icon from '../components/Icon.astro';
// Service options for the form — with lucide icon names
const serviceOptions = [
{ value: 'webdev', label: 'AI-Enhanced Website (เว็บ + Chatbot + SEO)', icon: 'globe' },
{ value: 'automation', label: 'AI Automation (Workflow + Chatbot)', icon: 'cog' },
{ value: 'marketing', label: 'Online Marketing Automation (Email + LINE + Facebook)', icon: 'megaphone' },
{ value: 'seo', label: 'SEO + AI Content System', icon: 'search' },
{ value: 'consult', label: 'Tech Consult (Server / Data Pipeline)', icon: 'server' },
{ value: 'audit', label: 'Audit เว็บไซต์เดิมฟรี 30 นาที', icon: 'briefcase' },
{ value: 'unsure', label: 'ยังไม่แน่ใจ — ช่วยแนะนำ', icon: 'help' },
];
---
<Base title="ติดต่อเรา | MoreminiMore | รับทำเว็บไซต์ SEO AI Chatbot">
@@ -17,23 +29,29 @@ import PageHero from '../components/PageHero.astro';
<!-- Quick Channel Picker -->
<section class="section channels-pick-section">
<div class="container">
<div class="channels-pick-grid">
<div class="channels-pick-grid stagger-children">
<a href="https://line.me/ti/p/~@539hdlul" target="_blank" rel="noopener" class="channel-pick-card">
<div class="channel-pick-icon">💬</div>
<div class="channel-pick-icon">
<Icon name="message" size={32} />
</div>
<h3 class="channel-pick-name">LINE Official</h3>
<p class="channel-pick-best">คนที่อยากคุยเร็ว ๆ แบบเป็นกันเอง</p>
<p class="channel-pick-time">ตอบใน 30 นาที (เวลาทำการ)</p>
<span class="channel-pick-cta">ทักเลย →</span>
</a>
<a href="tel:0809955945" class="channel-pick-card">
<div class="channel-pick-icon">📞</div>
<div class="channel-pick-icon">
<Icon name="phone" size={32} />
</div>
<h3 class="channel-pick-name">โทรศัพท์</h3>
<p class="channel-pick-best">คนที่อยากคุยยาว ๆ 5–10 นาที ถามตอบสด</p>
<p class="channel-pick-time">รับสายทันที หรือโทรกลับภายใน 2 ชม.</p>
<span class="channel-pick-cta">080-995-5945</span>
</a>
<a href="mailto:contact@moreminimore.com" class="channel-pick-card">
<div class="channel-pick-icon">📧</div>
<div class="channel-pick-icon">
<Icon name="mail" size={32} />
</div>
<h3 class="channel-pick-name">Email</h3>
<p class="channel-pick-best">คนที่อยากส่งรายละเอียดโปรเจกต์ + ไฟล์แนบ</p>
<p class="channel-pick-time">ตอบภายใน 1 วันทำการ</p>
@@ -46,13 +64,15 @@ import PageHero from '../components/PageHero.astro';
<!-- Contact Form Section -->
<section class="section form-section">
<div class="container">
<div class="form-grid">
<div class="form-grid reveal">
<!-- Info column -->
<div class="info-column">
<h2 class="info-title">ข้อมูลติดต่อ</h2>
<div class="info-item">
<div class="info-icon">📞</div>
<div class="info-icon">
<Icon name="phone" size={22} />
</div>
<div>
<h3>โทรศัพท์</h3>
<a href="tel:0809955945">080-995-5945</a>
@@ -60,7 +80,9 @@ import PageHero from '../components/PageHero.astro';
</div>
</div>
<div class="info-item">
<div class="info-icon">✉️</div>
<div class="info-icon">
<Icon name="mail" size={22} />
</div>
<div>
<h3>อีเมล</h3>
<a href="mailto:contact@moreminimore.com">contact@moreminimore.com</a>
@@ -68,7 +90,9 @@ import PageHero from '../components/PageHero.astro';
</div>
</div>
<div class="info-item">
<div class="info-icon">💬</div>
<div class="info-icon">
<Icon name="message" size={22} />
</div>
<div>
<h3>LINE</h3>
<a href="https://line.me/ti/p/~@539hdlul" target="_blank" rel="noopener">@moreminimore</a>
@@ -76,7 +100,9 @@ import PageHero from '../components/PageHero.astro';
</div>
</div>
<div class="info-item">
<div class="info-icon">📍</div>
<div class="info-icon">
<Icon name="mapPin" size={22} />
</div>
<div>
<h3>ออฟฟิศ</h3>
<p>53 หมู่ 1 ต.บ้านแพ้ว อ.บ้านแพ้ว สมุทรสาคร 74120</p>
@@ -84,7 +110,9 @@ import PageHero from '../components/PageHero.astro';
</div>
</div>
<div class="info-item">
<div class="info-icon">🕐</div>
<div class="info-icon">
<Icon name="clock" size={22} />
</div>
<div>
<h3>เวลาทำการ</h3>
<p>จันทร์ - ศุกร์ 09:00 - 18:00 น.</p>
@@ -133,13 +161,9 @@ import PageHero from '../components/PageHero.astro';
<label for="service" class="form-label">บริการที่สนใจ</label>
<select id="service" name="service" class="form-input">
<option value="">เลือกบริการ (ไม่บังคับ)</option>
<option value="webdev">🌐 AI-Enhanced Website (เว็บ + Chatbot + SEO)</option>
<option value="automation">⚙️ AI Automation (Workflow + Chatbot)</option>
<option value="marketing">📈 Online Marketing Automation (Email + LINE + Facebook)</option>
<option value="seo">🔍 SEO + AI Content System</option>
<option value="consult">🖥️ Tech Consult (Server / Data Pipeline)</option>
<option value="audit">💼 Audit เว็บไซต์เดิมฟรี 30 นาที</option>
<option value="unsure">❓ ยังไม่แน่ใจ — ช่วยแนะนำ</option>
{serviceOptions.map(opt => (
<option value={opt.value}>{opt.label}</option>
))}
</select>
</div>
@@ -159,7 +183,9 @@ import PageHero from '../components/PageHero.astro';
<!-- Success message (hidden by default) -->
<div class="form-success" id="form-success" hidden>
<div class="success-icon">✅</div>
<div class="success-icon">
<Icon name="checkCircle" size={44} />
</div>
<h3>ส่งแล้ว!</h3>
<p>เราจะตอบกลับภายใน 2 ชั่วโมง (ในเวลาทำการ) ถ้าเร่งด่วน ทัก LINE @moreminimore ครับ</p>
</div>
@@ -171,12 +197,12 @@ import PageHero from '../components/PageHero.astro';
<!-- What Happens Next -->
<section class="section section-soft next-section">
<div class="container">
<div class="section-header">
<div class="section-header reveal">
<span class="section-badge">หลังส่งฟอร์ม</span>
<h2 class="section-title">3 ขั้นตอนถัดไป — <span class="highlight">ไม่มีอะไรซับซ้อน</span></h2>
</div>
<div class="next-grid">
<div class="next-grid stagger-children">
<div class="next-step">
<div class="next-num">1</div>
<h3>ตอบกลับภายใน 2 ชั่วโมง</h3>
@@ -200,12 +226,12 @@ import PageHero from '../components/PageHero.astro';
<!-- Pre-submit FAQ -->
<section class="section pre-faq-section">
<div class="container">
<div class="section-header">
<div class="section-header reveal">
<span class="section-badge">ก่อนกดส่ง</span>
<h2 class="section-title">4 คำถามที่คนถาม <span class="highlight">ก่อน</span> กดส่งฟอร์ม</h2>
</div>
<div class="pre-faq-list">
<div class="pre-faq-list stagger-children">
<div class="pre-faq-item">
<h3>คุยกัน 30 นาทีแล้วจะถูกบังคับซื้อไหม?</h3>
<p>ไม่ คุยแล้วคุณไม่ชอบก็ไม่เป็นไร ไม่มี follow-up ไม่มีขายของเพิ่ม</p>
@@ -228,7 +254,7 @@ import PageHero from '../components/PageHero.astro';
<section class="section section-yellow cta-section">
<div class="container">
<div class="cta-content">
<div class="cta-content reveal">
<h2 class="cta-title">หรือจะ <span class="highlight">อ่านก่อน</span> ก็ได้</h2>
<p class="cta-desc">ไม่มี commitment ไม่มี pressure ไม่มีใครตาม</p>
<div class="cta-actions">

39
src/pages/faq.astro
View File

@@ -3,16 +3,19 @@ import Base from '../layouts/Base.astro';
import Navigation from '../components/Navigation.astro';
import Footer from '../components/Footer.astro';
import PageHero from '../components/PageHero.astro';
import Icon from '../components/Icon.astro';
import { getCollection } from 'astro:content';
const faqItems = await getCollection('faq');
const categories = ['บริการ', 'ราคา', 'ระยะเวลา', 'AI & เทคนิค', 'หลังการขาย'];
// Map categories to lucide icon names (semantic match, not visual emoji)
const categoryIcons: Record<string, string> = {
'บริการ': '💼',
'ราคา': '💰',
'ระยะเวลา': '⏱️',
'AI & เทคนิค': '🤖',
'หลังการขาย': '🛠️',
'บริการ': 'briefcase',
'ราคา': 'dollarSign',
'ระยะเวลา': 'clock',
'AI & เทคนิค': 'bot',
'หลังการขาย': 'wrench',
};
---
@@ -31,9 +34,11 @@ const categoryIcons: Record<string, string> = {
const items = faqItems.filter(f => f.data.category === cat);
if (items.length === 0) return null;
return (
<div class="faq-category">
<div class="faq-category reveal">
<h2 class="category-title">
<span class="category-icon">{categoryIcons[cat]}</span>
<span class="category-icon">
<Icon name={categoryIcons[cat] as any} size={18} />
</span>
{cat}
</h2>
<div class="faq-list">
@@ -56,7 +61,9 @@ const categoryIcons: Record<string, string> = {
<!-- Other Topics -->
<div class="faq-category">
<h2 class="category-title">
<span class="category-icon">📚</span>
<span class="category-icon">
<Icon name="book" size={18} />
</span>
เรื่องอื่น ๆ ที่ลูกค้าถามบ่อย
</h2>
<div class="tag-cloud">
@@ -78,23 +85,29 @@ const categoryIcons: Record<string, string> = {
</div>
<!-- Quick Channels -->
<div class="channels-section">
<div class="channels-section reveal">
<h2 class="channels-title">ไม่เจอคำตอบ? ถามตรง ๆ เลย</h2>
<div class="channels-grid">
<div class="channels-grid stagger-children">
<a href="https://line.me/ti/p/~@539hdlul" target="_blank" rel="noopener" class="channel-card">
<div class="channel-icon">💬</div>
<div class="channel-icon">
<Icon name="message" size={28} />
</div>
<h3 class="channel-name">LINE</h3>
<p class="channel-handle">@moreminimore</p>
<p class="channel-time">ตอบใน 30 นาที (เวลาทำการ)</p>
</a>
<a href="tel:0809955945" class="channel-card">
<div class="channel-icon">📞</div>
<div class="channel-icon">
<Icon name="phone" size={28} />
</div>
<h3 class="channel-name">โทร</h3>
<p class="channel-handle">080-995-5945</p>
<p class="channel-time">จ-ศ 09:00-18:00</p>
</a>
<a href="mailto:contact@moreminimore.com" class="channel-card">
<div class="channel-icon">📧</div>
<div class="channel-icon">
<Icon name="mail" size={28} />
</div>
<h3 class="channel-name">Email</h3>
<p class="channel-handle">contact@moreminimore.com</p>
<p class="channel-time">ตอบภายใน 1 วัน</p>

53
src/pages/index.astro
View File

@@ -2,6 +2,7 @@
import Base from '../layouts/Base.astro';
import Navigation from '../components/Navigation.astro';
import Footer from '../components/Footer.astro';
import Icon from '../components/Icon.astro';
import Hero from '../components/Hero.astro';
import { getCollection } from 'astro:content';
import { render } from 'astro:content';
@@ -34,71 +35,77 @@ const serviceImages: Record<string, string> = {
subtitle={home?.data.subtitle}
/>
<!-- STATS SECTION — yellow band -->
<section class="section section-stats">
<!-- STATS SECTION — yellow band (counters animate on view) -->
<section class="section section-stats reveal">
<div class="container">
<div class="stats-grid">
<div class="stat-item">
<span class="stat-number">50+</span>
<span class="stat-number counter" data-from="0">50+</span>
<span class="stat-label">โปรเจกต์สำเร็จ</span>
</div>
<div class="stat-item">
<span class="stat-number">40+</span>
<span class="stat-number counter" data-from="0">40+</span>
<span class="stat-label">ลูกค้าที่ไว้วางใจ</span>
</div>
<div class="stat-item">
<span class="stat-number">5+</span>
<span class="stat-number counter" data-from="0">5+</span>
<span class="stat-label">ปีประสบการณ์</span>
</div>
<div class="stat-item">
<span class="stat-number">24/7</span>
<span class="stat-number counter" data-from="0">24/7</span>
<span class="stat-label">ให้บริการ</span>
</div>
</div>
</div>
</section>
<!-- PROBLEM SECTION — light, 3 cards -->
<!-- PROBLEM SECTION — light, 3 cards (stagger-children) -->
<section class="section section-soft">
<div class="container">
<div class="section-header">
<div class="section-header reveal">
<span class="section-badge">ปัญหาที่ SME ไทยเจอซ้ำทุกวัน</span>
<h2 class="section-title">
คุณกำลังเจอ <span class="highlight">แบบนี้อยู่</span> ใช่ไหม?
</h2>
</div>
<div class="problem-grid">
<div class="problem-grid stagger-children">
<div class="problem-card">
<div class="problem-icon">😩</div>
<div class="problem-icon">
<Icon name="message" />
</div>
<h3 class="problem-title">ลูกค้าทัก LINE เข้ามา แต่ตอบไม่ทัน</h3>
<p class="problem-desc">ทีมเซลล์ 1–2 คน ตอบแชตไม่ไหว ลูกค้ารอ 5 นาทีแล้วไปซื้อที่อื่น</p>
<span class="problem-result">→ ยอดหายก่อนที่คุณจะเห็น</span>
</div>
<div class="problem-card">
<div class="problem-icon">📉</div>
<div class="problem-icon">
<Icon name="trendingDown" />
</div>
<h3 class="problem-title">ลงโฆษณา แต่ยอดขายไม่ขยับ</h3>
<p class="problem-desc">ไม่มีระบบ Lead ไม่มี Funnel ไม่รู้ว่าใครซื้อ ใครแค่ทักมาถามเล่น</p>
<span class="problem-result">→ เงินหายไปกับคลิกที่ไม่มีคุณภาพ</span>
</div>
<div class="problem-card">
<div class="problem-icon">🌐</div>
<div class="problem-icon">
<Icon name="globe" />
</div>
<h3 class="problem-title">เว็บไซต์มีอยู่ แต่ไม่มีใครเจอใน Google</h3>
<p class="problem-desc">อันดับหน้า 5 ไม่มีใครเปิด ขณะที่คู่แข่งติดหน้าแรกจาก SEO อย่างเดียว</p>
<span class="problem-result">→ เสียเงินฟรีทุกเดือน</span>
</div>
</div>
<p class="problem-closing">
<p class="problem-closing reveal">
<span class="highlight">ทุกปัญหาข้างต้นแก้ได้ด้วยระบบเดียว</span> — ดูว่าเราทำยังไง
</p>
</div>
</section>
<!-- SERVICES SECTION — 4 mega cards on white -->
<!-- SERVICES SECTION — 4 mega cards on white (stagger-children) -->
<section class="section services-section">
<div class="container">
<div class="section-header">
<div class="section-header reveal">
<span class="section-badge">บริการของเรา</span>
<h2 class="section-title">
ครบจบในที่เดียว — <span class="highlight">โซลูชัน AI สำหรับธุรกิจไทย</span>
@@ -106,7 +113,7 @@ const serviceImages: Record<string, string> = {
<p class="section-desc">เลือกแค่ที่คุณต้องการ หรือให้เราวางแผนทั้งระบบให้ก็ได้</p>
</div>
<div class="services-mega-grid">
<div class="services-mega-grid stagger-children">
{allServices.map(s => (
<a href={`/services/${s.id}`} class="mega-card">
<span class="mega-tag">{s.data.badge}</span>
@@ -128,7 +135,7 @@ const serviceImages: Record<string, string> = {
</section>
<!-- PULL QUOTE — black section, oversized white text -->
<section class="section section-dark-quote">
<section class="section section-dark-quote reveal">
<div class="container">
<blockquote class="pull-quote">
<p class="quote-text">
@@ -142,7 +149,7 @@ const serviceImages: Record<string, string> = {
<!-- PORTFOLIO PREVIEW — 3 latest on soft -->
<section class="section section-soft">
<div class="container">
<div class="section-header">
<div class="section-header reveal">
<span class="section-badge">ผลงานจริง · ไม่ใช่ Mockup</span>
<h2 class="section-title">
ลูกค้าจริง <span class="highlight">ผลลัพธ์จริง</span>
@@ -150,9 +157,9 @@ const serviceImages: Record<string, string> = {
<p class="section-desc">9 โปรเจกต์ที่เราภาคภูมิใจ — ตั้งแต่ร้านค้าออนไลน์ ไปจนถึงโรงงานฉีดพลาสติก</p>
</div>
<div class="blog-editorial">
<div class="blog-editorial reveal">
{sortedPosts[0] && (
<a href={`/blog/${sortedPosts[0].slug}`} class="blog-featured">
<a href={`/blog/${sortedPosts[0].id}`} class="blog-featured">
<div class="blog-image">
<img src={sortedPosts[0].data.image} alt={sortedPosts[0].data.title} loading="lazy" />
<span class="blog-badge">บทความล่าสุด</span>
@@ -168,7 +175,7 @@ const serviceImages: Record<string, string> = {
<div class="blog-sidebar">
{sortedPosts.slice(1, 4).map((post) => (
<a href={`/blog/${post.slug}`} class="blog-card-mini">
<a href={`/blog/${post.id}`} class="blog-card-mini">
<div class="blog-card-image">
<img src={post.data.image} alt={post.data.title} loading="lazy" />
</div>
@@ -193,7 +200,7 @@ const serviceImages: Record<string, string> = {
<!-- FINAL CTA — yellow section -->
<section class="section section-yellow cta-section">
<div class="container">
<div class="cta-content">
<div class="cta-content reveal">
<h2 class="cta-title">พร้อมเปลี่ยนธุรกิจของคุณ?</h2>
<p class="cta-desc">ปรึกษาฟรี 30 นาที — เราจะถามคำถาม 5 ข้อ แล้วบอกคุณได้เลยว่าควรเริ่มจากตรงไหน</p>
<div class="cta-actions">
@@ -318,7 +325,7 @@ const serviceImages: Record<string, string> = {
box-shadow: var(--shadow-md);
border-color: var(--color-primary);
}
.problem-icon { font-size: 48px; margin-bottom: 16px; }
.problem-icon { margin-bottom: 16px; }
.problem-title {
font-family: var(--font-display);
font-size: 20px;

55
src/pages/portfolio.astro
View File

@@ -4,9 +4,23 @@ import Navigation from '../components/Navigation.astro';
import Footer from '../components/Footer.astro';
import PageHero from '../components/PageHero.astro';
import PortfolioCard from '../components/PortfolioCard.astro';
import Icon from '../components/Icon.astro';
import { getCollection } from 'astro:content';
const portfolio = await getCollection('portfolio');
// Industry filter metadata: id -> { label, icon }
// Icons are lucide-style SVGs; emoji-free.
const industryFilters = [
{ id: 'all', label: 'ทั้งหมด', icon: 'layers' },
{ id: '🏭 โรงงาน', label: 'โรงงาน', icon: 'factory' },
{ id: '💊 สินค้าอุปโภค', label: 'สินค้าอุปโภค', icon: 'package' },
{ id: '⚖️ สำนักงานกฎหมาย', label: 'สำนักงานกฎหมาย', icon: 'scale' },
{ id: '📚 สถาบัน / การศึกษา', label: 'สถาบัน / การศึกษา', icon: 'graduationCap' },
{ id: '📈 ที่ปรึกษาธุรกิจ', label: 'ที่ปรึกษาธุรกิจ', icon: 'trendingUp' },
{ id: '🎨 Digital Agency', label: 'Digital Agency', icon: 'pen' },
{ id: '🛒 E-commerce', label: 'E-commerce', icon: 'shoppingCart' },
];
---
<Base title="ผลงาน | MoreminiMore | รับทำเว็บไซต์ SEO AI Chatbot">
@@ -22,21 +36,24 @@ const portfolio = await getCollection('portfolio');
<section class="filter-section">
<div class="container">
<div class="filter-bar">
<button class="filter-btn active" data-filter="all">ทั้งหมด ({portfolio.length})</button>
<button class="filter-btn" data-filter="🏭 โรงงาน">🏭 โรงงาน</button>
<button class="filter-btn" data-filter="💊 สินค้าอุปโภค">💊 สินค้าอุปโภค</button>
<button class="filter-btn" data-filter="⚖️ สำนักงานกฎหมาย">⚖️ สำนักงานกฎหมาย</button>
<button class="filter-btn" data-filter="📚 สถาบัน / การศึกษา">📚 สถาบัน / การศึกษา</button>
<button class="filter-btn" data-filter="📈 ที่ปรึกษาธุรกิจ">📈 ที่ปรึกษาธุรกิจ</button>
<button class="filter-btn" data-filter="🎨 Digital Agency">🎨 Digital Agency</button>
<button class="filter-btn" data-filter="🛒 E-commerce">🛒 E-commerce</button>
{industryFilters.map(f => (
<button
class="filter-btn"
class:list={[{ active: f.id === 'all' }]}
data-filter={f.id}
>
{f.id !== 'all' && <Icon name={f.icon as any} size={16} class="filter-icon" />}
{f.id === 'all' && <Icon name={f.icon as any} size={16} class="filter-icon" />}
<span>{f.id === 'all' ? `ทั้งหมด (${portfolio.length})` : f.label}</span>
</button>
))}
</div>
</div>
</section>
<section class="section portfolio-section">
<div class="container">
<div class="portfolio-grid">
<div class="portfolio-grid stagger-children">
{portfolio.map(item => (
<PortfolioCard
name={item.data.name}
@@ -57,14 +74,14 @@ const portfolio = await getCollection('portfolio');
<!-- "ดีลที่เราเลือก" Section -->
<section class="section section-soft">
<div class="container">
<div class="section-header">
<div class="section-header reveal">
<span class="section-badge">ดีลที่เราเลือก</span>
<h2 class="section-title">
เรา <span class="highlight">เลือก</span> โปรเจกต์ที่ทำ — ไม่ใช่ทุกงานที่มา เรารับ
</h2>
</div>
<div class="reasons-grid">
<div class="reasons-grid stagger-children">
<div class="reason-card">
<div class="reason-num">1</div>
<h3 class="reason-title">ธุรกิจที่พร้อมจริง ๆ</h3>
@@ -86,7 +103,7 @@ const portfolio = await getCollection('portfolio');
<section class="section section-yellow cta-section">
<div class="container">
<div class="cta-content">
<div class="cta-content reveal">
<h2 class="cta-title">อยากเป็น <span class="highlight">ผลงานชิ้นต่อไป</span> ของเรา?</h2>
<p class="cta-desc">ถ้าธุรกิจคุณพร้อม เราพร้อม — คุยกันก่อน 30 นาที แล้วตัดสินใจเอง</p>
<div class="cta-actions">
@@ -139,16 +156,19 @@ const portfolio = await getCollection('portfolio');
padding: 4px 0;
}
.filter-btn {
flex-shrink: 0;
padding: 8px 16px;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 20px;
background: var(--color-white);
color: var(--color-gray-700);
color: var(--color-black);
border: 1px solid var(--color-gray-200);
border-radius: var(--radius-full);
font-size: 13px;
font-family: var(--font-display);
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
transition: all 0.2s var(--ease-out-expo);
white-space: nowrap;
}
.filter-btn:hover {
@@ -160,6 +180,7 @@ const portfolio = await getCollection('portfolio');
color: var(--color-black);
border-color: var(--color-primary);
}
.filter-icon { color: currentColor; }
.portfolio-section { background: var(--color-white); }
.section-soft { background: var(--color-bg-alt); }

38
src/pages/services/index.astro
View File

@@ -3,10 +3,21 @@ import Base from '../../layouts/Base.astro';
import Navigation from '../../components/Navigation.astro';
import Footer from '../../components/Footer.astro';
import PageHero from '../../components/PageHero.astro';
import Icon from '../../components/Icon.astro';
import { getCollection } from 'astro:content';
const services = await getCollection('services');
// Decision-table icon lookup
const serviceIcons: Record<string, string> = {
'webdev': 'globe',
'automation': 'cog',
'marketing': 'megaphone',
'seo': 'search',
'consult': 'server',
'audit': 'refresh',
};
// Map service slugs to images
const serviceImages: Record<string, string> = {
'automation': '/images/services/automation.jpg',
@@ -41,32 +52,32 @@ const serviceImages: Record<string, string> = {
</div>
<div class="decision-row">
<div>ยังไม่มีเว็บไซต์ หรือเว็บเก่าโหลดช้า</div>
<div><span class="dec-tag">🌐 AI-Enhanced Website</span></div>
<div><span class="dec-tag"><Icon name="globe" size={14} class="dec-icon" />AI-Enhanced Website</span></div>
<div>2–4 สัปดาห์</div>
</div>
<div class="decision-row">
<div>ทีมเซลล์ตอบแชตไม่ทัน ลูกค้าหายตอนกลางคืน</div>
<div><span class="dec-tag">⚙️ AI Automation</span></div>
<div><span class="dec-tag"><Icon name="cog" size={14} class="dec-icon" />AI Automation</span></div>
<div>1–3 เดือน</div>
</div>
<div class="decision-row">
<div>ลงโฆษณาเยอะ แต่ยอดขายไม่โต</div>
<div><span class="dec-tag">📈 Online Marketing Automation</span></div>
<div><span class="dec-tag"><Icon name="megaphone" size={14} class="dec-icon" />Online Marketing Automation</span></div>
<div>1–3 เดือน</div>
</div>
<div class="decision-row">
<div>อยากติดหน้าแรก Google แต่ไม่รู้จะเริ่มยังไง</div>
<div><span class="dec-tag">🔍 SEO + AI Content</span></div>
<div><span class="dec-tag"><Icon name="search" size={14} class="dec-icon" />SEO + AI Content</span></div>
<div>3–6 เดือน</div>
</div>
<div class="decision-row">
<div>ไม่อยากจ้างทีม IT ประจำ แต่อยากมี Server/ระบบหลังบ้าน</div>
<div><span class="dec-tag">🖥️ Tech Consult</span></div>
<div><span class="dec-tag"><Icon name="server" size={14} class="dec-icon" />Tech Consult</span></div>
<div>2–6 สัปดาห์</div>
</div>
<div class="decision-row">
<div>มีเว็บอยู่แล้ว แต่ขายไม่ได้</div>
<div><span class="dec-tag">🔄 เริ่มจาก Audit ฟรี 30 นาที</span></div>
<div><span class="dec-tag"><Icon name="refresh" size={14} class="dec-icon" />เริ่มจาก Audit ฟรี 30 นาที</span></div>
<div>1 สัปดาห์</div>
</div>
</div>
@@ -80,12 +91,12 @@ const serviceImages: Record<string, string> = {
<!-- Service Grid -->
<section class="section services-grid-section">
<div class="container">
<div class="section-header">
<div class="section-header reveal">
<span class="section-badge">บริการทั้งหมด</span>
<h2 class="section-title">เลือกตาม <span class="highlight">เป้าหมาย</span> ของคุณ</h2>
</div>
<div class="services-cards">
<div class="services-cards stagger-children">
{services.map(s => (
<a href={`/services/${s.id}`} class="service-block">
<span class="service-tag">{s.data.badge}</span>
@@ -105,12 +116,12 @@ const serviceImages: Record<string, string> = {
<!-- Pricing tiers -->
<section class="section pricing-section">
<div class="container">
<div class="section-header">
<div class="section-header reveal">
<span class="section-badge">งบประมาณ</span>
<h2 class="section-title">ไม่ใช่ทุกงบที่จะ<span class="highlight">เหมือนกัน</span></h2>
</div>
<div class="pricing-grid">
<div class="pricing-grid stagger-children">
<div class="pricing-card">
<h3 class="pricing-tier">เริ่มต้น</h3>
<div class="pricing-range">15,000–35,000 บาท</div>
@@ -133,7 +144,7 @@ const serviceImages: Record<string, string> = {
<section class="section section-yellow cta-section">
<div class="container">
<div class="cta-content">
<div class="cta-content reveal">
<h2 class="cta-title">ยังไม่รู้ว่าจะเริ่มจากตรงไหน?</h2>
<p class="cta-desc">Audit ฟรี 30 นาที — เราจะถาม 5 คำถาม แล้วบอกว่าคุณควรลงทุนกับอะไรก่อน ไม่มี upsell ไม่มี commitment</p>
<div class="cta-actions">
@@ -204,7 +215,9 @@ const serviceImages: Record<string, string> = {
letter-spacing: 1px;
}
.dec-tag {
display: inline-block;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
background: var(--color-primary);
color: var(--color-black);
@@ -212,6 +225,7 @@ const serviceImages: Record<string, string> = {
font-size: 13px;
font-weight: 700;
}
.dec-icon { flex-shrink: 0; }
.decision-closing {
text-align: center;
margin-top: 32px;