feat: light theme page templates + integration with new content collections
- All 11 page templates rewritten for light theme - index.astro: 8 sections (hero, stats yellow band, problem cards, services mega-grid, black pull-quote, blog preview, yellow CTA) - about.astro: story + values (4 dark-icon cards) + process 4-step - contact.astro: 4 channel picker cards + 8-field form (added budget field) + 3-step 'what happens next' + pre-submit FAQ + yellow final CTA - faq.astro: dynamic category rendering from content/faq collection (5 categories, 20 Q&A) + tag cloud + 3 channel cards - portfolio.astro: industry filter bar (sticky) + 9 items with new schema (industry, what_we_did, result fields) + 'ดีลที่เราเลือก' section - services/index.astro: decision table (6 rows, scannable in 30s) + 3 pricing tiers (Starter/Business/Enterprise) + add-on chips - services/[slug].astro: 4 service types with light hero + pricing + tech options + AI features + 6-FAQ per service - blog/index.astro: featured + 4-card grid from content collection - blog/[slug].astro: 2-column with sidebar (about, contact, related) - privacy.astro + terms.astro: legal content, light theme - All form posts go to setTimeout success (placeholder for backend wire)
This commit is contained in:
Macky
@@ -3,12 +3,9 @@ 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 ServiceCard from '../../components/ServiceCard.astro';
|
||||
import { getCollection } from 'astro:content';
|
||||
|
||||
const services = await getCollection('services');
|
||||
const techServices = services.filter(s => s.data.category === 'tech-consult');
|
||||
const marketingServices = services.filter(s => s.data.category === 'marketing-consult');
|
||||
|
||||
// Map service slugs to images
|
||||
const serviceImages: Record<string, string> = {
|
||||
@@ -19,88 +16,129 @@ const serviceImages: Record<string, string> = {
|
||||
};
|
||||
---
|
||||
|
||||
<Base title="บริการ | MoreminiMore - รับทำเว็บไซต์ SEO AI Chatbot">
|
||||
<Base title="บริการ | MoreminiMore | รับทำเว็บไซต์ SEO AI Chatbot">
|
||||
<Navigation />
|
||||
|
||||
<PageHero
|
||||
badge="บริการ"
|
||||
title="บริการของเรา"
|
||||
subtitle="ครบจบทุกโซลูชันด้านดิจิทัลสำหรับธุรกิจไทย"
|
||||
<PageHero
|
||||
badge="บริการ 4 ด้าน · เริ่มต้น 15,000 บาท"
|
||||
title="โซลูชัน AI 4 ด้าน ที่คุณเลือกได้ตามงบ"
|
||||
subtitle="เลือกเฉพาะที่คุณต้องการ หรือให้เราวางแผนให้ทั้งระบบ"
|
||||
/>
|
||||
|
||||
<section class="section">
|
||||
<!-- Decision Table -->
|
||||
<section class="section decision-section">
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<span class="section-badge">ไม่แน่ใจว่าจะเริ่มจากตรงไหน?</span>
|
||||
<h2 class="section-title">เลือกบริการที่ใช่ <span class="highlight">ใน 30 วินาที</span></h2>
|
||||
</div>
|
||||
|
||||
<!-- Tech Consult Category -->
|
||||
<div class="category-section">
|
||||
<div class="category-header">
|
||||
<div class="category-icon">🔧</div>
|
||||
<div class="category-info">
|
||||
<span class="category-badge">Technology Consult</span>
|
||||
<h2 class="category-title">ลดต้นทุนและเวลา</h2>
|
||||
<p class="category-desc">บริการให้คำปรึกษาด้านเทคโนโลยีเพื่อเพิ่มประสิทธิภาพการทำงานและลดค่าใช้จ่ายในระยะยาว</p>
|
||||
</div>
|
||||
<div class="decision-table">
|
||||
<div class="decision-row decision-header">
|
||||
<div>คุณกำลังเจอ</div>
|
||||
<div>เริ่มที่</div>
|
||||
<div>คาดเห็นผลใน</div>
|
||||
</div>
|
||||
<div class="services-grid">
|
||||
{techServices.map(s => (
|
||||
<ServiceCard
|
||||
title={s.data.title}
|
||||
subtitle={s.data.subtitle}
|
||||
image={serviceImages[s.slug] || '/images/services/default.jpg'}
|
||||
link={`/services/${s.slug}`}
|
||||
/>
|
||||
))}
|
||||
<div class="decision-row">
|
||||
<div>ยังไม่มีเว็บไซต์ หรือเว็บเก่าโหลดช้า</div>
|
||||
<div><span class="dec-tag">🌐 AI-Enhanced Website</span></div>
|
||||
<div>2–4 สัปดาห์</div>
|
||||
</div>
|
||||
<div class="usp-box">
|
||||
<div class="usp-icon">🎁</div>
|
||||
<div class="usp-content">
|
||||
<h4 class="usp-title">สิทธิพิเศษสำหรับลูกค้า Consult</h4>
|
||||
<p class="usp-desc">ลูกค้าที่ใช้บริการ Technology Consult จะได้รับ Server ฟรีสำหรับ App และ AI (สำหรับการใช้งานปกติ) หากต้องการใช้งานหนักหรือ Resource-intensive จะมีค่าใช้จ่ายเพิ่มเติม</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Marketing Consult Category -->
|
||||
<div class="category-section">
|
||||
<div class="category-header">
|
||||
<div class="category-icon">📈</div>
|
||||
<div class="category-info">
|
||||
<span class="category-badge">Marketing Consult</span>
|
||||
<h2 class="category-title">เพิ่มยอดขาย</h2>
|
||||
<p class="category-desc">บริการด้านการตลาดที่ช่วยให้ธุรกิจของคุณเข้าถึงลูกค้าได้มากขึ้นและเพิ่มยอดขายอย่างเป็นระบบ</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="services-grid">
|
||||
{marketingServices.map(s => (
|
||||
<ServiceCard
|
||||
title={s.data.title}
|
||||
subtitle={s.data.subtitle}
|
||||
image={serviceImages[s.slug] || '/images/services/default.jpg'}
|
||||
link={`/services/${s.slug}`}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
<div class="usp-box">
|
||||
<div class="usp-icon">🎁</div>
|
||||
<div class="usp-content">
|
||||
<h4 class="usp-title">สิทธิพิเศษสำหรับลูกค้า Website</h4>
|
||||
<p class="usp-desc">ลูกค้าที่ใช้ Server ของเราจะได้รับบริการแก้ไขและเพิ่มเนื้อหาเว็บไซต์ฟรี! จ่ายเฉพาะเมื่อต้องการ Redesign ทั้งหมด หรือ Upgrade ฟีเจอร์ใหญ่ เช่น เพิ่มระบบ E-commerce</p>
|
||||
</div>
|
||||
<div class="decision-row">
|
||||
<div>ทีมเซลล์ตอบแชตไม่ทัน ลูกค้าหายตอนกลางคืน</div>
|
||||
<div><span class="dec-tag">⚙️ 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>1–3 เดือน</div>
|
||||
</div>
|
||||
<div class="decision-row">
|
||||
<div>อยากติดหน้าแรก Google แต่ไม่รู้จะเริ่มยังไง</div>
|
||||
<div><span class="dec-tag">🔍 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>2–6 สัปดาห์</div>
|
||||
</div>
|
||||
<div class="decision-row">
|
||||
<div>มีเว็บอยู่แล้ว แต่ขายไม่ได้</div>
|
||||
<div><span class="dec-tag">🔄 เริ่มจาก Audit ฟรี 30 นาที</span></div>
|
||||
<div>1 สัปดาห์</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="decision-closing">
|
||||
ถ้ายังไม่แน่ใจ → กดปุ่ม "ปรึกษาฟรี" ด้านล่าง เราจะถาม 5 คำถามแล้วบอกคำตอบเอง
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CTA Section -->
|
||||
<section class="section section-primary cta">
|
||||
<!-- Service Grid -->
|
||||
<section class="section services-grid-section">
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<span class="section-badge">บริการทั้งหมด</span>
|
||||
<h2 class="section-title">เลือกตาม <span class="highlight">เป้าหมาย</span> ของคุณ</h2>
|
||||
</div>
|
||||
|
||||
<div class="services-cards">
|
||||
{services.map(s => (
|
||||
<a href={`/services/${s.id}`} class="service-block">
|
||||
<span class="service-tag">{s.data.badge}</span>
|
||||
<h3 class="service-name">{s.data.title}</h3>
|
||||
<p class="service-subtitle">{s.data.subtitle}</p>
|
||||
<div class="service-objective">
|
||||
<span class="obj-label">เป้าหมาย</span>
|
||||
<span class="obj-value">{s.data.objective}</span>
|
||||
</div>
|
||||
<span class="service-link">ดูรายละเอียด →</span>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Pricing tiers -->
|
||||
<section class="section pricing-section">
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<span class="section-badge">งบประมาณ</span>
|
||||
<h2 class="section-title">ไม่ใช่ทุกงบที่จะ<span class="highlight">เหมือนกัน</span></h2>
|
||||
</div>
|
||||
|
||||
<div class="pricing-grid">
|
||||
<div class="pricing-card">
|
||||
<h3 class="pricing-tier">เริ่มต้น</h3>
|
||||
<div class="pricing-range">15,000–35,000 บาท</div>
|
||||
<p class="pricing-desc">Landing Page + AI Chatbot</p>
|
||||
</div>
|
||||
<div class="pricing-card pricing-featured">
|
||||
<div class="pricing-popular">แนะนำ</div>
|
||||
<h3 class="pricing-tier">ธุรกิจ</h3>
|
||||
<div class="pricing-range">50,000–150,000 บาท</div>
|
||||
<p class="pricing-desc">เว็บไซต์เต็มรูป + SEO 3 เดือน</p>
|
||||
</div>
|
||||
<div class="pricing-card">
|
||||
<h3 class="pricing-tier">องค์กร</h3>
|
||||
<div class="pricing-range">200,000 บาทขึ้นไป</div>
|
||||
<p class="pricing-desc">ระบบครบวงจร + Automation</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section section-yellow cta-section">
|
||||
<div class="container">
|
||||
<div class="cta-content">
|
||||
<h2 class="cta-title">พร้อมเริ่มต้นวันนี้?</h2>
|
||||
<p class="cta-desc">ปรึกษาฟรี! เราพร้อมช่วยวิเคราะห์และออกแบบโซลูชันที่เหมาะกับคุณ</p>
|
||||
<h2 class="cta-title">ยังไม่รู้ว่าจะเริ่มจากตรงไหน?</h2>
|
||||
<p class="cta-desc">Audit ฟรี 30 นาที — เราจะถาม 5 คำถาม แล้วบอกว่าคุณควรลงทุนกับอะไรก่อน ไม่มี upsell ไม่มี commitment</p>
|
||||
<div class="cta-actions">
|
||||
<a href="/contact" class="btn btn-dark btn-lg">ติดต่อเรา</a>
|
||||
<a href="tel:0809955945" class="btn btn-outline-dark btn-lg">080-995-5945</a>
|
||||
<a href="/contact" class="btn btn-dark btn-lg">นัดคุยเลย →</a>
|
||||
<a href="https://line.me/ti/p/~@539hdlul" target="_blank" rel="noopener" class="btn btn-outline-dark btn-lg">ทัก LINE: @moreminimore</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -110,112 +148,232 @@ const serviceImages: Record<string, string> = {
|
||||
</Base>
|
||||
|
||||
<style>
|
||||
.category-section {
|
||||
margin-bottom: 80px;
|
||||
}
|
||||
.category-section:last-of-type { margin-bottom: 0; }
|
||||
.decision-section { background: var(--color-bg-alt); }
|
||||
.services-grid-section { background: var(--color-white); }
|
||||
.pricing-section { background: var(--color-bg-alt); }
|
||||
.section-yellow { background: var(--color-primary); }
|
||||
|
||||
.category-header {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
.section-header { text-align: center; margin-bottom: 48px; }
|
||||
.section-badge {
|
||||
display: inline-block;
|
||||
background: var(--color-primary);
|
||||
color: var(--color-black);
|
||||
padding: 8px 20px;
|
||||
border-radius: var(--radius-full);
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.section-title {
|
||||
font-family: var(--font-display);
|
||||
font-size: clamp(28px, 4vw, 40px);
|
||||
font-weight: 900;
|
||||
line-height: 1.2;
|
||||
color: var(--color-black);
|
||||
}
|
||||
.section-title .highlight { color: var(--color-primary-dark); }
|
||||
|
||||
/* Decision table */
|
||||
.decision-table {
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
background: var(--color-white);
|
||||
border: 1px solid var(--color-gray-200);
|
||||
border-radius: var(--radius-xl);
|
||||
overflow: hidden;
|
||||
}
|
||||
.decision-row {
|
||||
display: grid;
|
||||
grid-template-columns: 1.5fr 1.2fr 0.8fr;
|
||||
gap: 16px;
|
||||
padding: 16px 24px;
|
||||
border-top: 1px solid var(--color-gray-200);
|
||||
align-items: center;
|
||||
font-size: 15px;
|
||||
color: var(--color-gray-700);
|
||||
}
|
||||
.decision-row:first-child { border-top: none; }
|
||||
.decision-header {
|
||||
background: var(--color-bg-alt);
|
||||
font-weight: 800;
|
||||
color: var(--color-black);
|
||||
font-size: 12px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
.dec-tag {
|
||||
display: inline-block;
|
||||
padding: 4px 10px;
|
||||
background: var(--color-primary);
|
||||
color: var(--color-black);
|
||||
border-radius: var(--radius-sm);
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
}
|
||||
.decision-closing {
|
||||
text-align: center;
|
||||
margin-top: 32px;
|
||||
font-size: 16px;
|
||||
color: var(--color-gray-700);
|
||||
}
|
||||
|
||||
/* Service cards */
|
||||
.services-cards {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 24px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
.service-block {
|
||||
display: block;
|
||||
background: var(--color-white);
|
||||
border: 2px solid var(--color-gray-200);
|
||||
border-radius: var(--radius-xl);
|
||||
padding: 32px;
|
||||
background: var(--color-gray-100);
|
||||
border-radius: 20px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.category-icon {
|
||||
font-size: 48px;
|
||||
flex-shrink: 0;
|
||||
.service-block:hover {
|
||||
border-color: var(--color-primary);
|
||||
transform: translateY(-4px);
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
.category-info { flex: 1; }
|
||||
.category-badge {
|
||||
.service-tag {
|
||||
display: inline-block;
|
||||
background: var(--color-primary);
|
||||
color: var(--color-black);
|
||||
padding: 4px 12px;
|
||||
border-radius: 12px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.category-title {
|
||||
font-size: 32px;
|
||||
border-radius: var(--radius-sm);
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
color: var(--color-dark);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.service-name {
|
||||
font-family: var(--font-display);
|
||||
font-size: 24px;
|
||||
font-weight: 800;
|
||||
color: var(--color-black);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.category-desc {
|
||||
font-size: 16px;
|
||||
.service-subtitle {
|
||||
font-size: 15px;
|
||||
color: var(--color-gray-600);
|
||||
line-height: 1.6;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.services-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 24px;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.usp-box {
|
||||
.service-objective {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 20px;
|
||||
padding: 24px;
|
||||
background: linear-gradient(135deg, var(--color-primary) 0%, #ffe066 100%);
|
||||
border-radius: 16px;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 10px 14px;
|
||||
background: var(--color-bg-alt);
|
||||
border-radius: var(--radius-md);
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.usp-icon { font-size: 32px; flex-shrink: 0; }
|
||||
.usp-title {
|
||||
font-size: 18px;
|
||||
.obj-label {
|
||||
font-size: 11px;
|
||||
color: var(--color-gray-500);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
font-weight: 700;
|
||||
}
|
||||
.obj-value {
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
color: var(--color-black);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.usp-desc {
|
||||
.service-link {
|
||||
display: inline-block;
|
||||
font-size: 14px;
|
||||
color: rgba(0,0,0,0.8);
|
||||
line-height: 1.6;
|
||||
font-weight: 700;
|
||||
color: var(--color-black);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.section-primary { background: var(--color-primary); }
|
||||
.cta-content { text-align: center; }
|
||||
.cta-title {
|
||||
font-size: clamp(28px, 4vw, 42px);
|
||||
font-weight: 800;
|
||||
margin-bottom: 16px;
|
||||
/* Pricing */
|
||||
.pricing-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 24px;
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.pricing-card {
|
||||
position: relative;
|
||||
background: var(--color-white);
|
||||
border: 2px solid var(--color-gray-200);
|
||||
border-radius: var(--radius-xl);
|
||||
padding: 32px;
|
||||
text-align: center;
|
||||
}
|
||||
.pricing-featured {
|
||||
border-color: var(--color-primary);
|
||||
background: var(--color-bg-alt);
|
||||
}
|
||||
.pricing-popular {
|
||||
position: absolute;
|
||||
top: -12px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background: var(--color-primary);
|
||||
color: var(--color-black);
|
||||
padding: 4px 12px;
|
||||
border-radius: var(--radius-full);
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
.pricing-tier {
|
||||
font-family: var(--font-display);
|
||||
font-size: 22px;
|
||||
font-weight: 800;
|
||||
color: var(--color-black);
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.pricing-range {
|
||||
font-family: var(--font-display);
|
||||
font-size: 24px;
|
||||
font-weight: 900;
|
||||
color: var(--color-primary-dark);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.pricing-desc {
|
||||
font-size: 14px;
|
||||
color: var(--color-gray-600);
|
||||
}
|
||||
|
||||
/* CTA */
|
||||
.cta-content { text-align: center; max-width: 700px; margin: 0 auto; }
|
||||
.cta-title {
|
||||
font-family: var(--font-display);
|
||||
font-size: clamp(28px, 4vw, 44px);
|
||||
font-weight: 900;
|
||||
color: var(--color-black);
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.cta-desc {
|
||||
font-size: 18px;
|
||||
color: rgba(0,0,0,0.7);
|
||||
color: rgba(0, 0, 0, 0.7);
|
||||
margin-bottom: 32px;
|
||||
max-width: 500px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
.cta-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
|
||||
.btn-outline-dark {
|
||||
background: transparent;
|
||||
color: var(--color-black);
|
||||
border: 2px solid var(--color-black);
|
||||
.cta-actions {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.btn-outline-dark:hover { background: var(--color-black); color: var(--color-white); }
|
||||
.btn-dark {
|
||||
background: var(--color-dark);
|
||||
color: var(--color-white);
|
||||
}
|
||||
.btn-dark:hover { background: var(--color-dark-light); }
|
||||
.btn-lg { padding: 16px 36px; font-size: 16px; font-weight: 600; text-transform: uppercase; letter-spacing: 2px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.services-grid { grid-template-columns: 1fr; }
|
||||
.services-cards { grid-template-columns: 1fr; }
|
||||
.pricing-grid { grid-template-columns: 1fr; }
|
||||
.decision-row { grid-template-columns: 1fr; gap: 8px; }
|
||||
}
|
||||
@media (max-width: 640px) {
|
||||
.category-header { flex-direction: column; }
|
||||
.cta-actions { flex-direction: column; }
|
||||
.btn-lg { width: 100%; }
|
||||
.cta-actions .btn { width: 100%; justify-content: center; }
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user