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
@@ -2,160 +2,147 @@
|
||||
import Base from '../layouts/Base.astro';
|
||||
import Navigation from '../components/Navigation.astro';
|
||||
import Footer from '../components/Footer.astro';
|
||||
import PageHero from '../components/PageHero.astro';
|
||||
---
|
||||
|
||||
<Base title="เกี่ยวกับเรา - MoreminiMore | รับทำเว็บไซต์ SEO AI Chatbot">
|
||||
<Base title="เกี่ยวกับเรา | MoreminiMore | รับทำเว็บไซต์ SEO AI Chatbot">
|
||||
<Navigation />
|
||||
|
||||
<!-- =============================================
|
||||
HERO SECTION
|
||||
============================================= -->
|
||||
<section class="about-hero">
|
||||
<!-- Animated Background -->
|
||||
<div class="hero-bg">
|
||||
<div class="hero-grid"></div>
|
||||
<div class="orb orb-1"></div>
|
||||
<div class="orb orb-2"></div>
|
||||
<div class="particles">
|
||||
<div class="particle p-1"></div>
|
||||
<div class="particle p-2"></div>
|
||||
<div class="particle p-3"></div>
|
||||
</div>
|
||||
<div class="lines">
|
||||
<div class="line line-1"></div>
|
||||
<div class="line line-2"></div>
|
||||
</div>
|
||||
</div>
|
||||
<PageHero
|
||||
badge="เกี่ยวกับเรา"
|
||||
title="ทีมเล็ก ๆ ที่ช่วย SME ไทย ขายดีขึ้นด้วย AI"
|
||||
subtitle="บริษัท มอร์มินิมอร์ จำกัด — เราไม่ใช่ Agency ที่ทำเว็บไซต์ออกมาเยอะแล้วลืม เราเป็น Partner ที่นั่งทำงานข้างคุณจนระบบติดและใช้งานได้จริง"
|
||||
/>
|
||||
|
||||
<!-- STORY SECTION -->
|
||||
<section class="section story-section">
|
||||
<div class="container">
|
||||
<div class="hero-content">
|
||||
<div class="hero-badge">
|
||||
<span class="badge-dot"></span>
|
||||
<span class="badge-text">เกี่ยวกับเรา</span>
|
||||
</div>
|
||||
|
||||
<h1 class="hero-title">
|
||||
<span class="title-line">ดิจิทัลเอเจนซี่</span>
|
||||
<span class="title-accent">ที่ช่วยธุรกิจไทย</span>
|
||||
</h1>
|
||||
|
||||
<p class="hero-desc">
|
||||
รับทำเว็บไซต์ AI Chatbot และระบบอัตโนมัติทางการตลาด
|
||||
ที่ช่วยเพิ่มยอดขาย ลดต้นทุน ให้ธุรกิจ SMEs ไทย
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hero-wave">
|
||||
<svg viewBox="0 0 1440 100" fill="none" preserveAspectRatio="none">
|
||||
<path d="M0 50C240 100 480 0 720 50C960 100 1200 0 1440 50V100H0V50Z" fill="#F8FAFC"/>
|
||||
</svg>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- =============================================
|
||||
ABOUT CONTENT SECTION
|
||||
============================================= -->
|
||||
<section class="section about-section">
|
||||
<div class="container">
|
||||
<div class="about-grid">
|
||||
<div class="about-content">
|
||||
<h2 class="about-title">
|
||||
เราคือทีมที่สร้างสรรค์<br/>
|
||||
<span class="title-accent">โซลูชันดิจิทัล</span>
|
||||
<div class="story-grid">
|
||||
<div class="story-content">
|
||||
<span class="section-badge">เรื่องราวของเรา</span>
|
||||
<h2 class="section-title">
|
||||
เริ่มต้นจาก <span class="highlight">ปัญหาของลูกค้า</span> ไม่ใช่จากเทคโนโลยี
|
||||
</h2>
|
||||
|
||||
<p class="about-text">
|
||||
MoreminiMore ก่อตั้งขึ้นด้วยความมุ่งมั่นในการช่วยเหลือธุรกิจไทยให้เติบโตในยุคดิจิทัล
|
||||
เราเชื่อว่าเทคโนโลยี AI และระบบอัตโนมัติสามารถช่วยเพิ่มประสิทธิภาพและลดต้นทุนได้อย่างมาก
|
||||
<p class="story-text">
|
||||
<strong>ก่อตั้งปี 2020</strong> จากประสบการณ์ตรงที่เห็น SME ไทยเสียเงินหลายแสนไปกับเว็บไซต์ที่ "สวยแต่ไม่มีคนเข้า" และ AI tools ที่ "ว้าวแต่ใช้ไม่เป็น" เราเลยตั้งใจว่าจะทำให้ต่าง
|
||||
</p>
|
||||
|
||||
<p class="about-text">
|
||||
ทีมงานของเราประกอบด้วยผู้เชี่ยวชาญด้านการพัฒนาเว็บไซต์ การตลาดดิจิทัล และ AI
|
||||
ที่พร้อมให้คำปรึกษาและออกแบบโซลูชันที่เหมาะสมกับความต้องการของแต่ละธุรกิจ
|
||||
<p class="story-text">
|
||||
<strong>5 ปีที่ผ่านมา เราทำงานกับลูกค้า 40+ ราย</strong> — ตั้งแต่ร้านค้าออนไลน์หน้าร้านเล็ก ๆ ไปจนถึงโรงงานฉีดพลาสติก 40 ปี สำนักงานกฎหมาย และแบรนด์สินค้าแมส
|
||||
</p>
|
||||
|
||||
<div class="about-actions">
|
||||
<a href="/contact" class="btn btn-primary">ติดต่อเรา</a>
|
||||
<p class="story-text">
|
||||
<strong>ความต่างของเรา</strong> เราเขียนโค้ดเอง ไม่ใช่เอาไป Outsource เราตอบแชตเอง ไม่ใช่ให้ Bot ตอบลูกค้า เราวางแผนเอง ไม่ใช่ใช้ Template เดียวกับทุกคน
|
||||
</p>
|
||||
|
||||
<div class="story-actions">
|
||||
<a href="/contact" class="btn btn-primary">ปรึกษาฟรี</a>
|
||||
<a href="tel:0809955945" class="btn btn-outline-dark">080-995-5945</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="about-values">
|
||||
<div class="value-card">
|
||||
<span class="value-number">100+</span>
|
||||
<span class="value-label">ลูกค้า</span>
|
||||
<div class="story-stats">
|
||||
<div class="stat-card">
|
||||
<span class="stat-number">40+</span>
|
||||
<span class="stat-label">ลูกค้าที่กลับมาใช้บริการซ้ำ</span>
|
||||
</div>
|
||||
<div class="value-card">
|
||||
<span class="value-number">50+</span>
|
||||
<span class="value-label">โปรเจกต์</span>
|
||||
<div class="stat-card">
|
||||
<span class="stat-number">50+</span>
|
||||
<span class="stat-label">โปรเจกต์ที่ส่งมอบ</span>
|
||||
</div>
|
||||
<div class="value-card">
|
||||
<span class="value-number">5 ปี</span>
|
||||
<span class="value-label">ประสบการณ์</span>
|
||||
<div class="stat-card">
|
||||
<span class="stat-number">5+</span>
|
||||
<span class="stat-label">ปีของการทำงานหนัก</span>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<span class="stat-number">100%</span>
|
||||
<span class="stat-label">โค้ดโดยทีมเรา ไม่ Outsource</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- =============================================
|
||||
SERVICES OVERVIEW
|
||||
============================================= -->
|
||||
<section class="section services-section">
|
||||
<!-- VALUES SECTION (yellow accent cards on soft) -->
|
||||
<section class="section section-soft values-section">
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<span class="section-badge">บริการของเรา</span>
|
||||
<span class="section-badge">ค่านิยมของเรา</span>
|
||||
<h2 class="section-title">
|
||||
ครบทุกโซลูชัน<br/><span class="title-accent">ด้านดิจิทัล</span>
|
||||
4 สิ่งที่เรา <span class="highlight">ไม่เคยเปลี่ยน</span>
|
||||
</h2>
|
||||
<p class="section-desc">
|
||||
ให้เราดูแลทุกอย่าง ในขณะที่คุณโฟกัสที่ธุรกิจของคุณ
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="services-grid">
|
||||
<div class="service-card">
|
||||
<div class="service-icon">🌐</div>
|
||||
<h3 class="service-title">รับทำเว็บไซต์</h3>
|
||||
<p class="service-desc">เว็บไซต์ที่คุณแก้ไขเองได้ง่าย พร้อม AI ช่วยสร้างเนื้อหา + GEO ติด AI Search</p>
|
||||
<a href="/services/webdev" class="service-link">ดูรายละเอียด →</a>
|
||||
<div class="values-grid">
|
||||
<div class="value-card">
|
||||
<div class="value-icon">🎯</div>
|
||||
<h3 class="value-title">เข้าใจธุรกิจก่อนเขียนโค้ด</h3>
|
||||
<p class="value-desc">30 นาทีแรกของทุกโปรเจกต์คือการถาม ไม่ใช่การ present เราถามจนเข้าใจว่าคุณขายให้ใคร กำไรเท่าไหร่ ปวดหัวตรงไหน แล้วค่อยแนะนำ solution</p>
|
||||
</div>
|
||||
|
||||
<div class="service-card">
|
||||
<div class="service-icon">📱</div>
|
||||
<h3 class="service-title">การตลาดอัตโนมัติ</h3>
|
||||
<p class="service-desc">ส่งข้อความอัตโนมัติ วิเคราะห์ข้อมูล SEO ติด Google ครอบคลุมทุกช่องทาง</p>
|
||||
<a href="/services/marketing" class="service-link">ดูรายละเอียด →</a>
|
||||
<div class="value-card">
|
||||
<div class="value-icon">🤝</div>
|
||||
<h3 class="value-title">เป็น Partner ไม่ใช่ Vendor</h3>
|
||||
<p class="value-desc">เราแชร์ progress ทุกสัปดาห์ผ่าน LINE Group เดียวกับที่ลูกค้าใช้ คุณเห็นทุก decision ไม่มี hidden cost ไม่มี "อันนี้เพิ่มเงินนะ" ตอนใกล้ deliver</p>
|
||||
</div>
|
||||
|
||||
<div class="service-card">
|
||||
<div class="service-icon">🤖</div>
|
||||
<h3 class="service-title">AI Automation</h3>
|
||||
<p class="service-desc">เชื่อมข้อมูล วิเคราะห์ สร้างรายงาน แจ้งเตือนอัตโนมัติ พร้อม Chatbot</p>
|
||||
<a href="/services/automation" class="service-link">ดูรายละเอียด →</a>
|
||||
<div class="value-card">
|
||||
<div class="value-icon">⏱️</div>
|
||||
<h3 class="value-title">Deliver ตรงเวลา หรือบอกล่วงหน้า</h3>
|
||||
<p class="value-desc">เราไม่สัญญา deadline แบบเลื่อนได้ ถ้าจะติด เราจะบอกก่อน 7 วัน ไม่ใช่บอกตอนส่งงาน เคสไหนที่เคยส่งช้า เราคืนเงิน Pro-rata</p>
|
||||
</div>
|
||||
|
||||
<div class="service-card">
|
||||
<div class="service-icon">💡</div>
|
||||
<h3 class="service-title">ที่ปรึกษา AI</h3>
|
||||
<p class="service-desc">ที่ปรึกษาด้าน Marketing Automation, AI Automation และ AI Hardware</p>
|
||||
<a href="/services/ai-consult" class="service-link">ดูรายละเอียด →</a>
|
||||
<div class="value-card">
|
||||
<div class="value-icon">💚</div>
|
||||
<h3 class="value-title">ดูแลหลังส่งมอบ</h3>
|
||||
<p class="value-desc">เว็บไซต์ที่ส่งแล้วทิ้งเป็นเว็บตาย เราเลยมีแพ็คเกจดูแลรายเดือนเริ่ม 2,000 บาท รวมอัปเดตเนื้อหา ปรับ SEO แก้บั๊ก ตอบคำถามผ่าน LINE</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- =============================================
|
||||
CONTACT CTA
|
||||
============================================= -->
|
||||
<section class="section cta-section">
|
||||
<!-- PROCESS SECTION (4 steps, white) -->
|
||||
<section class="section process-section">
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<span class="section-badge">กระบวนการทำงาน</span>
|
||||
<h2 class="section-title">
|
||||
วิธีที่เราทำงาน <span class="highlight">กับคุณ</span>
|
||||
</h2>
|
||||
<p class="section-desc">4 ขั้น โปร่งใสทุกข้อ</p>
|
||||
</div>
|
||||
|
||||
<div class="process-grid">
|
||||
<div class="process-step">
|
||||
<span class="step-num">01</span>
|
||||
<h3 class="step-title">ปรึกษาฟรี</h3>
|
||||
<p class="step-desc">30–60 นาทีคุยกับเจ้าของธุรกิจ ฟัง pain points, เป้าหมาย, budget ให้คำแนะนำเบื้องต้นฟรี ไม่ผูก commitment</p>
|
||||
</div>
|
||||
<div class="process-step">
|
||||
<span class="step-num">02</span>
|
||||
<h3 class="step-title">วางแผน</h3>
|
||||
<p class="step-desc">วิเคราะห์เชิงลึก ดูคู่แข่ง ส่ง Proposal เป็นเอกสาร PDF คุณอ่าน ถามคำถาม แก้ไข scope ได้ก่อนเซ็น</p>
|
||||
</div>
|
||||
<div class="process-step">
|
||||
<span class="step-num">03</span>
|
||||
<h3 class="step-title">ดำเนินการ</h3>
|
||||
<p class="step-desc">พัฒนาแบบ Sprint ส่ง demo ให้ทดสอบทุก 7–14 วัน เห็นงานจริง ไม่ใช่ "เดี๋ยวส่งทีเดียวตอนจบ"</p>
|
||||
</div>
|
||||
<div class="process-step">
|
||||
<span class="step-num">04</span>
|
||||
<h3 class="step-title">สนับสนุน</h3>
|
||||
<p class="step-desc">ส่งมอบงาน + อบรมทีม + มอบคู่มือ ติดตามผลทุกเดือน แนะนำสิ่งที่ควรปรับปรุง ต่อยอด หรือยกเลิก</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- FINAL CTA (yellow) -->
|
||||
<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">ปรึกษาฟรี 30 นาที ไม่มี script sales ไม่มี upsell จะบอกตรง ๆ ว่าทำได้หรือไม่ควรทำ</p>
|
||||
<div class="cta-actions">
|
||||
<a href="/contact" class="btn btn-dark btn-lg">ติดต่อเรา</a>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
@@ -166,265 +153,16 @@ import Footer from '../components/Footer.astro';
|
||||
</Base>
|
||||
|
||||
<style>
|
||||
/* =============================================
|
||||
ABOUT HERO
|
||||
============================================= */
|
||||
|
||||
.about-hero {
|
||||
position: relative;
|
||||
min-height: 60vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: #0F172A;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.hero-bg {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.hero-grid {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background-image:
|
||||
linear-gradient(rgba(254, 212, 0, 0.03) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(254, 212, 0, 0.03) 1px, transparent 1px);
|
||||
background-size: 60px 60px;
|
||||
}
|
||||
|
||||
/* Animated Orbs */
|
||||
.orb {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
filter: blur(60px);
|
||||
opacity: 0.4;
|
||||
}
|
||||
.orb-1 {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: rgba(254, 212, 0, 0.3);
|
||||
top: -50px;
|
||||
right: 10%;
|
||||
animation: orbFloat1 8s ease-in-out infinite;
|
||||
}
|
||||
.orb-2 {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background: rgba(254, 212, 0, 0.2);
|
||||
bottom: 20%;
|
||||
left: 5%;
|
||||
animation: orbFloat2 10s ease-in-out infinite;
|
||||
}
|
||||
@keyframes orbFloat1 {
|
||||
0%, 100% { transform: translate(0, 0) scale(1); }
|
||||
50% { transform: translate(-40px, 30px) scale(1.1); }
|
||||
}
|
||||
@keyframes orbFloat2 {
|
||||
0%, 100% { transform: translate(0, 0) scale(1); }
|
||||
50% { transform: translate(50px, -30px) scale(1.15); }
|
||||
}
|
||||
|
||||
/* Particles */
|
||||
.particles { position: absolute; inset: 0; overflow: hidden; }
|
||||
.particle {
|
||||
position: absolute;
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
background: #fed400;
|
||||
border-radius: 50%;
|
||||
opacity: 0;
|
||||
}
|
||||
.p-1 { top: 30%; left: 15%; animation: particleFloat 7s ease-in-out infinite; }
|
||||
.p-2 { top: 50%; left: 75%; animation: particleFloat 8s ease-in-out infinite; animation-delay: 2s; }
|
||||
.p-3 { top: 70%; left: 30%; animation: particleFloat 6s ease-in-out infinite; animation-delay: 1s; }
|
||||
@keyframes particleFloat {
|
||||
0% { opacity: 0; transform: translateY(50px) scale(0); }
|
||||
20% { opacity: 0.8; }
|
||||
80% { opacity: 0.8; }
|
||||
100% { opacity: 0; transform: translateY(-50px) scale(1); }
|
||||
}
|
||||
|
||||
/* Lines */
|
||||
.lines { position: absolute; inset: 0; overflow: hidden; }
|
||||
.line {
|
||||
position: absolute;
|
||||
height: 1px;
|
||||
background: linear-gradient(90deg, transparent, rgba(254, 212, 0, 0.3), transparent);
|
||||
animation: lineMove 12s linear infinite;
|
||||
}
|
||||
.line-1 { width: 50%; top: 35%; left: -50%; animation-delay: 0s; }
|
||||
.line-2 { width: 40%; top: 65%; left: -40%; animation-delay: 6s; }
|
||||
@keyframes lineMove {
|
||||
0% { left: -50%; }
|
||||
100% { left: 110%; }
|
||||
}
|
||||
|
||||
.hero-content {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
text-align: center;
|
||||
padding: 100px 0 80px;
|
||||
}
|
||||
|
||||
.hero-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 10px 20px;
|
||||
background: rgba(254, 212, 0, 0.15);
|
||||
border: 1px solid rgba(254, 212, 0, 0.3);
|
||||
border-radius: 100px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.badge-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background: #fed400;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.badge-text {
|
||||
font-family: var(--font-display);
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2px;
|
||||
color: #fed400;
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
font-family: var(--font-display);
|
||||
font-size: clamp(32px, 5vw, 52px);
|
||||
font-weight: 900;
|
||||
line-height: 1.15;
|
||||
color: #ffffff;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.title-line {
|
||||
display: block;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.title-accent {
|
||||
color: #fed400;
|
||||
}
|
||||
|
||||
.hero-desc {
|
||||
font-size: 18px;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
max-width: 550px;
|
||||
margin: 0 auto;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.hero-wave {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 80px;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.hero-wave svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* =============================================
|
||||
ABOUT SECTION
|
||||
============================================= */
|
||||
|
||||
.about-section {
|
||||
background: #F8FAFC;
|
||||
padding: 80px 0;
|
||||
}
|
||||
|
||||
.about-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1.3fr 0.7fr;
|
||||
gap: 60px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.about-title {
|
||||
font-family: var(--font-display);
|
||||
font-size: clamp(28px, 4vw, 40px);
|
||||
font-weight: 900;
|
||||
line-height: 1.2;
|
||||
color: #0F172A;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.about-text {
|
||||
font-size: 17px;
|
||||
line-height: 1.8;
|
||||
color: #64748B;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.about-actions {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 32px;
|
||||
}
|
||||
|
||||
.about-values {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.value-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
padding: 24px;
|
||||
background: #ffffff;
|
||||
border-radius: 16px;
|
||||
border: 2px solid #E2E8F0;
|
||||
}
|
||||
|
||||
.value-number {
|
||||
font-family: var(--font-display);
|
||||
font-size: 36px;
|
||||
font-weight: 900;
|
||||
color: #fed400;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.value-label {
|
||||
font-size: 15px;
|
||||
color: #64748B;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* =============================================
|
||||
SERVICES SECTION
|
||||
============================================= */
|
||||
|
||||
.services-section {
|
||||
background: #ffffff;
|
||||
padding: 80px 0;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
text-align: center;
|
||||
margin-bottom: 48px;
|
||||
}
|
||||
.section-soft { background: var(--color-bg-alt); }
|
||||
.section-yellow { background: var(--color-primary); }
|
||||
|
||||
.section-badge {
|
||||
display: inline-block;
|
||||
background: #fed400;
|
||||
color: #000000;
|
||||
background: var(--color-primary);
|
||||
color: var(--color-black);
|
||||
padding: 8px 20px;
|
||||
border-radius: 100px;
|
||||
font-size: 11px;
|
||||
border-radius: var(--radius-full);
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2px;
|
||||
@@ -433,103 +171,159 @@ import Footer from '../components/Footer.astro';
|
||||
|
||||
.section-title {
|
||||
font-family: var(--font-display);
|
||||
font-size: clamp(28px, 4vw, 40px);
|
||||
font-size: clamp(28px, 4vw, 44px);
|
||||
font-weight: 900;
|
||||
line-height: 1.2;
|
||||
color: #0F172A;
|
||||
margin-bottom: 12px;
|
||||
line-height: 1.15;
|
||||
color: var(--color-black);
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.title-accent {
|
||||
color: #fed400;
|
||||
}
|
||||
|
||||
.section-title .highlight { color: var(--color-primary-dark); }
|
||||
.section-desc {
|
||||
font-size: 16px;
|
||||
color: #64748B;
|
||||
max-width: 500px;
|
||||
margin: 0 auto;
|
||||
font-size: 17px;
|
||||
color: var(--color-gray-600);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.services-grid {
|
||||
/* STORY */
|
||||
.story-section { background: var(--color-white); }
|
||||
.story-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1.3fr 0.7fr;
|
||||
gap: 60px;
|
||||
align-items: center;
|
||||
}
|
||||
.story-text {
|
||||
font-size: 16px;
|
||||
line-height: 1.8;
|
||||
color: var(--color-gray-700);
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.story-text strong { color: var(--color-black); }
|
||||
.story-actions {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 28px;
|
||||
}
|
||||
.story-stats {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
.stat-card {
|
||||
padding: 24px;
|
||||
background: var(--color-bg-alt);
|
||||
border: 1px solid var(--color-gray-200);
|
||||
border-radius: var(--radius-xl);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.stat-card:hover {
|
||||
border-color: var(--color-primary);
|
||||
transform: translateX(4px);
|
||||
}
|
||||
.stat-card .stat-number {
|
||||
display: block;
|
||||
font-family: var(--font-display);
|
||||
font-size: 36px;
|
||||
font-weight: 900;
|
||||
color: var(--color-black);
|
||||
line-height: 1;
|
||||
}
|
||||
.stat-card .stat-label {
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
color: var(--color-gray-600);
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
/* VALUES */
|
||||
.values-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.service-card {
|
||||
background: #F8FAFC;
|
||||
border: 2px solid #E2E8F0;
|
||||
border-radius: 16px;
|
||||
padding: 28px;
|
||||
.value-card {
|
||||
background: var(--color-white);
|
||||
border: 1px solid var(--color-gray-200);
|
||||
border-radius: var(--radius-xl);
|
||||
padding: 32px;
|
||||
text-align: center;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.service-card:hover {
|
||||
border-color: #fed400;
|
||||
.value-card:hover {
|
||||
border-color: var(--color-primary);
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.06);
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
.service-icon {
|
||||
font-size: 32px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.service-title {
|
||||
.value-icon { font-size: 40px; margin-bottom: 16px; }
|
||||
.value-title {
|
||||
font-family: var(--font-display);
|
||||
font-size: 16px;
|
||||
font-weight: 800;
|
||||
color: #0F172A;
|
||||
margin-bottom: 8px;
|
||||
color: var(--color-black);
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.value-desc {
|
||||
font-size: 14px;
|
||||
color: var(--color-gray-600);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.service-desc {
|
||||
font-size: 13px;
|
||||
color: #64748B;
|
||||
line-height: 1.5;
|
||||
margin-bottom: 16px;
|
||||
/* PROCESS */
|
||||
.process-section { background: var(--color-bg-alt); }
|
||||
.process-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.service-link {
|
||||
.process-step {
|
||||
background: var(--color-white);
|
||||
border: 1px solid var(--color-gray-200);
|
||||
border-radius: var(--radius-xl);
|
||||
padding: 32px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.process-step:hover {
|
||||
border-color: var(--color-primary);
|
||||
transform: translateY(-4px);
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
.step-num {
|
||||
display: block;
|
||||
font-family: var(--font-display);
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
color: #fed400;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.service-link:hover {
|
||||
color: #e6c100;
|
||||
}
|
||||
|
||||
/* =============================================
|
||||
CTA SECTION
|
||||
============================================= */
|
||||
|
||||
.cta-section {
|
||||
background: #fed400;
|
||||
padding: 80px 0;
|
||||
}
|
||||
|
||||
.cta-content {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.cta-title {
|
||||
font-family: var(--font-display);
|
||||
font-size: clamp(28px, 4vw, 36px);
|
||||
font-weight: 800;
|
||||
color: #000000;
|
||||
font-size: 36px;
|
||||
font-weight: 900;
|
||||
color: var(--color-primary);
|
||||
line-height: 1;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.cta-desc {
|
||||
font-size: 16px;
|
||||
color: rgba(0, 0, 0, 0.7);
|
||||
margin-bottom: 28px;
|
||||
.step-title {
|
||||
font-family: var(--font-display);
|
||||
font-size: 18px;
|
||||
font-weight: 800;
|
||||
color: var(--color-black);
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.step-desc {
|
||||
font-size: 14px;
|
||||
color: var(--color-gray-600);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* 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);
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
.cta-actions {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
@@ -537,109 +331,16 @@ import Footer from '../components/Footer.astro';
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
/* =============================================
|
||||
BUTTONS
|
||||
============================================= */
|
||||
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
padding: 14px 28px;
|
||||
font-family: var(--font-display);
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1.5px;
|
||||
border: none;
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: #fed400;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: #e6c100;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 25px rgba(254, 212, 0, 0.4);
|
||||
}
|
||||
|
||||
.btn-dark {
|
||||
background: #0F172A;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.btn-dark:hover {
|
||||
background: #1E293B;
|
||||
}
|
||||
|
||||
.btn-outline-dark {
|
||||
background: transparent;
|
||||
color: #000000;
|
||||
border: 2px solid #000000;
|
||||
}
|
||||
|
||||
.btn-outline-dark:hover {
|
||||
background: #000000;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.btn-lg {
|
||||
padding: 16px 32px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* =============================================
|
||||
RESPONSIVE
|
||||
============================================= */
|
||||
|
||||
/* RESPONSIVE */
|
||||
@media (max-width: 1024px) {
|
||||
.about-grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 48px;
|
||||
.story-grid { grid-template-columns: 1fr; gap: 40px; }
|
||||
.values-grid { grid-template-columns: repeat(2, 1fr); }
|
||||
.process-grid { grid-template-columns: repeat(2, 1fr); }
|
||||
}
|
||||
|
||||
.about-values {
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.value-card {
|
||||
flex: 1;
|
||||
min-width: 140px;
|
||||
}
|
||||
|
||||
.services-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.hero-title {
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.about-actions,
|
||||
.cta-actions {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.btn {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.services-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.about-values {
|
||||
flex-direction: column;
|
||||
}
|
||||
.story-actions, .cta-actions { flex-direction: column; }
|
||||
.story-actions .btn, .cta-actions .btn { width: 100%; justify-content: center; }
|
||||
.values-grid { grid-template-columns: 1fr; }
|
||||
.process-grid { grid-template-columns: 1fr; }
|
||||
}
|
||||
</style>
|
||||
@@ -5,17 +5,22 @@ import Footer from '../../components/Footer.astro';
|
||||
import PageHero from '../../components/PageHero.astro';
|
||||
import { getCollection, render } from 'astro:content';
|
||||
|
||||
// For SSR mode, use Astro.params directly
|
||||
const { slug } = Astro.params;
|
||||
|
||||
const allPosts = await getCollection('blog');
|
||||
// Use id for matching since slug might be undefined
|
||||
const post = allPosts.find(p => p.id === slug);
|
||||
|
||||
if (!post) {
|
||||
return Astro.redirect('/404');
|
||||
}
|
||||
|
||||
export async function getStaticPaths() {
|
||||
const allPosts = await getCollection('blog');
|
||||
return allPosts.map(post => ({
|
||||
params: { slug: post.id },
|
||||
props: { post },
|
||||
}));
|
||||
}
|
||||
|
||||
const { Content } = await render(post);
|
||||
|
||||
const related = allPosts
|
||||
@@ -39,7 +44,6 @@ const formattedDate = post.data.date.toLocaleDateString('th-TH', {
|
||||
subtitle={formattedDate}
|
||||
/>
|
||||
|
||||
<!-- Article Image -->
|
||||
{post.data.image && (
|
||||
<div class="article-image">
|
||||
<div class="container">
|
||||
@@ -48,7 +52,6 @@ const formattedDate = post.data.date.toLocaleDateString('th-TH', {
|
||||
</div>
|
||||
)}
|
||||
|
||||
<!-- Article Content -->
|
||||
<section class="section article-section">
|
||||
<div class="container">
|
||||
<div class="article-grid">
|
||||
@@ -58,26 +61,22 @@ const formattedDate = post.data.date.toLocaleDateString('th-TH', {
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<!-- Sidebar -->
|
||||
<aside class="article-sidebar">
|
||||
<!-- About -->
|
||||
<div class="sidebar-card">
|
||||
<h3 class="sidebar-title">เกี่ยวกับ MoreminiMore</h3>
|
||||
<p class="sidebar-text">
|
||||
ดิจิทัลเอเจนซี่ที่ช่วยให้ธุรกิจไทยเติบโตด้วยเทคโนโลยีสมัยใหม่
|
||||
</p>
|
||||
<a href="/about" class="btn btn-dark btn-sm">ดูเพิ่มเติม</a>
|
||||
<a href="/about" class="btn btn-outline-dark btn-sm">ดูเพิ่มเติม</a>
|
||||
</div>
|
||||
|
||||
<!-- Contact -->
|
||||
<div class="sidebar-card">
|
||||
<h3 class="sidebar-title">สนใจบริการ?</h3>
|
||||
<p class="sidebar-text">ติดต่อเราได้เลย ปรึกษาฟรี!</p>
|
||||
<a href="/contact" class="btn btn-primary btn-sm">ติดต่อเรา</a>
|
||||
<a href="tel:0809955945" class="btn btn-outline btn-sm" style="margin-top: 8px;">080-995-5945</a>
|
||||
<a href="tel:0809955945" class="btn btn-outline-dark btn-sm" style="margin-top: 8px;">080-995-5945</a>
|
||||
</div>
|
||||
|
||||
<!-- Related Posts -->
|
||||
{related.length > 0 && (
|
||||
<div class="sidebar-card">
|
||||
<h3 class="sidebar-title">บทความที่เกี่ยวข้อง</h3>
|
||||
@@ -102,18 +101,16 @@ const formattedDate = post.data.date.toLocaleDateString('th-TH', {
|
||||
<style>
|
||||
.article-image {
|
||||
padding: 40px 0;
|
||||
background: var(--color-gray-100);
|
||||
background: var(--color-bg-alt);
|
||||
}
|
||||
.article-image img {
|
||||
width: 100%;
|
||||
max-height: 500px;
|
||||
object-fit: cover;
|
||||
border-radius: 20px;
|
||||
border-radius: var(--radius-xl);
|
||||
}
|
||||
|
||||
.article-section {
|
||||
padding-top: 60px;
|
||||
}
|
||||
.article-section { background: var(--color-white); }
|
||||
|
||||
.article-grid {
|
||||
display: grid;
|
||||
@@ -124,55 +121,42 @@ const formattedDate = post.data.date.toLocaleDateString('th-TH', {
|
||||
.article-body {
|
||||
font-size: 18px;
|
||||
line-height: 1.8;
|
||||
color: var(--color-gray-600);
|
||||
color: var(--color-gray-700);
|
||||
}
|
||||
|
||||
.article-body :global(h2) {
|
||||
font-family: var(--font-display);
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
color: var(--color-dark);
|
||||
font-weight: 800;
|
||||
color: var(--color-black);
|
||||
margin: 40px 0 20px;
|
||||
}
|
||||
|
||||
.article-body :global(h3) {
|
||||
font-family: var(--font-display);
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
color: var(--color-dark);
|
||||
font-weight: 800;
|
||||
color: var(--color-black);
|
||||
margin: 32px 0 16px;
|
||||
}
|
||||
|
||||
.article-body :global(p) {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.article-body :global(p) { margin-bottom: 20px; }
|
||||
.article-body :global(ul), .article-body :global(ol) {
|
||||
margin: 20px 0;
|
||||
padding-left: 24px;
|
||||
}
|
||||
|
||||
.article-body :global(li) {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.article-body :global(li) { margin-bottom: 12px; }
|
||||
.article-body :global(a) {
|
||||
color: var(--color-primary);
|
||||
color: var(--color-primary-dark);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.article-body :global(a:hover) {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.article-body :global(a:hover) { text-decoration: underline; }
|
||||
.article-body :global(blockquote) {
|
||||
border-left: 4px solid var(--color-primary);
|
||||
padding-left: 24px;
|
||||
margin: 32px 0;
|
||||
font-style: italic;
|
||||
color: var(--color-gray-600);
|
||||
color: var(--color-gray-700);
|
||||
}
|
||||
|
||||
.article-body :global(img) {
|
||||
border-radius: 12px;
|
||||
border-radius: var(--radius-md);
|
||||
margin: 24px 0;
|
||||
}
|
||||
|
||||
@@ -182,32 +166,30 @@ const formattedDate = post.data.date.toLocaleDateString('th-TH', {
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.sidebar-card {
|
||||
background: var(--color-gray-100);
|
||||
border-radius: 16px;
|
||||
background: var(--color-bg-alt);
|
||||
border: 1px solid var(--color-gray-200);
|
||||
border-radius: var(--radius-xl);
|
||||
padding: 28px;
|
||||
}
|
||||
|
||||
.sidebar-title {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: var(--color-dark);
|
||||
margin-bottom: 16px;
|
||||
font-family: var(--font-display);
|
||||
font-size: 16px;
|
||||
font-weight: 800;
|
||||
color: var(--color-black);
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.sidebar-text {
|
||||
font-size: 14px;
|
||||
color: var(--color-gray-600);
|
||||
line-height: 1.6;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.btn-sm {
|
||||
padding: 12px 20px;
|
||||
font-size: 14px;
|
||||
border-radius: 8px;
|
||||
font-weight: 600;
|
||||
padding: 10px 20px;
|
||||
font-size: 13px;
|
||||
border-radius: var(--radius-md);
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
display: inline-flex;
|
||||
@@ -215,91 +197,39 @@ const formattedDate = post.data.date.toLocaleDateString('th-TH', {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.btn-dark {
|
||||
background: var(--color-dark);
|
||||
color: var(--color-white);
|
||||
}
|
||||
|
||||
.btn-dark:hover {
|
||||
background: var(--color-dark-light);
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: var(--color-primary);
|
||||
color: var(--color-black);
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: var(--color-primary-dark);
|
||||
}
|
||||
|
||||
.btn-outline {
|
||||
background: transparent;
|
||||
border: 2px solid var(--color-dark);
|
||||
color: var(--color-dark);
|
||||
}
|
||||
|
||||
.btn-outline:hover {
|
||||
background: var(--color-dark);
|
||||
color: var(--color-white);
|
||||
}
|
||||
|
||||
/* Related Posts */
|
||||
.related-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.related-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 12px;
|
||||
padding: 8px;
|
||||
background: var(--color-white);
|
||||
border-radius: 12px;
|
||||
transition: all 0.3s ease;
|
||||
border-radius: var(--radius-md);
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.related-item:hover {
|
||||
transform: translateX(4px);
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.related-item:hover { transform: translateX(4px); }
|
||||
.related-item img {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
object-fit: cover;
|
||||
border-radius: 8px;
|
||||
border-radius: var(--radius-sm);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.related-item span {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: var(--color-dark);
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
color: var(--color-black);
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.article-grid {
|
||||
grid-template-columns: 1fr;
|
||||
.article-grid { grid-template-columns: 1fr; }
|
||||
}
|
||||
|
||||
.article-sidebar {
|
||||
order: -1;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.article-sidebar {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.article-body {
|
||||
font-size: 16px;
|
||||
}
|
||||
.article-body { font-size: 16px; }
|
||||
}
|
||||
</style>
|
||||
@@ -2,6 +2,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 { getCollection } from 'astro:content';
|
||||
|
||||
const blogPosts = await getCollection('blog');
|
||||
@@ -11,56 +12,14 @@ const sortedPosts = blogPosts.sort((a, b) => b.data.date.valueOf() - a.data.date
|
||||
<Base title="บทความ | MoreminiMore - รับทำเว็บไซต์ SEO AI Chatbot">
|
||||
<Navigation />
|
||||
|
||||
<!-- =============================================
|
||||
HERO SECTION - DARK THEME
|
||||
============================================= -->
|
||||
<section class="blog-hero">
|
||||
<div class="hero-bg">
|
||||
<div class="hero-grid"></div>
|
||||
<div class="orb orb-1"></div>
|
||||
<div class="orb orb-2"></div>
|
||||
<div class="particles">
|
||||
<div class="particle p-1"></div>
|
||||
<div class="particle p-2"></div>
|
||||
<div class="particle p-3"></div>
|
||||
<div class="particle p-4"></div>
|
||||
</div>
|
||||
<div class="lines">
|
||||
<div class="line line-1"></div>
|
||||
<div class="line line-2"></div>
|
||||
</div>
|
||||
</div>
|
||||
<PageHero
|
||||
badge="บทความ"
|
||||
title="ความรู้ด้านดิจิทัล"
|
||||
subtitle="เทคนิคและความรู้ใหม่ๆ สำหรับธุรกิจไทย — อ่านจบใน 5 นาที เน้นลงมือทำ ไม่ใช่ทฤษฎี"
|
||||
/>
|
||||
|
||||
<div class="container">
|
||||
<div class="hero-content">
|
||||
<div class="hero-badge">
|
||||
<span class="badge-dot"></span>
|
||||
<span class="badge-text">บทความ</span>
|
||||
</div>
|
||||
|
||||
<h1 class="hero-title">
|
||||
<span class="title-line">ความรู้</span>
|
||||
<span class="title-accent">ด้านดิจิทัล</span>
|
||||
</h1>
|
||||
|
||||
<p class="hero-desc">
|
||||
เทคนิคและความรู้ใหม่ๆ สำหรับธุรกิจไทย
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hero-wave">
|
||||
<svg viewBox="0 0 1440 100" fill="none" preserveAspectRatio="none">
|
||||
<path d="M0 50C240 100 480 0 720 50C960 100 1200 0 1440 50V100H0V50Z" fill="#F8FAFC"/>
|
||||
</svg>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- =============================================
|
||||
FEATURED POST
|
||||
============================================= -->
|
||||
{sortedPosts.length > 0 && (
|
||||
<section class="featured-section">
|
||||
<section class="featured-section section-soft">
|
||||
<div class="container">
|
||||
<a href={`/blog/${sortedPosts[0].slug}`} class="featured-card">
|
||||
<div class="featured-image">
|
||||
@@ -85,16 +44,11 @@ const sortedPosts = blogPosts.sort((a, b) => b.data.date.valueOf() - a.data.date
|
||||
</section>
|
||||
)}
|
||||
|
||||
<!-- =============================================
|
||||
BLOG GRID
|
||||
============================================= -->
|
||||
<section class="section blog-section">
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<span class="section-badge">บทความทั้งหมด</span>
|
||||
<h2 class="section-title">
|
||||
บทความ<br/><span class="title-accent">ล่าสุด</span>
|
||||
</h2>
|
||||
<h2 class="section-title">บทความ <span class="highlight">ล่าสุด</span></h2>
|
||||
</div>
|
||||
|
||||
<div class="blog-grid">
|
||||
@@ -119,16 +73,13 @@ const sortedPosts = blogPosts.sort((a, b) => b.data.date.valueOf() - a.data.date
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- =============================================
|
||||
CTA SECTION
|
||||
============================================= -->
|
||||
<section class="section cta-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>
|
||||
<div class="cta-actions">
|
||||
<a href="/contact" class="btn btn-dark btn-lg">ติดต่อเรา</a>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
@@ -139,242 +90,59 @@ const sortedPosts = blogPosts.sort((a, b) => b.data.date.valueOf() - a.data.date
|
||||
</Base>
|
||||
|
||||
<style>
|
||||
/* =============================================
|
||||
BLOG HERO
|
||||
============================================= */
|
||||
|
||||
.blog-hero {
|
||||
position: relative;
|
||||
min-height: 50vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: #0F172A;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.hero-bg {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
||||
.hero-grid {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background-image:
|
||||
linear-gradient(rgba(254, 212, 0, 0.03) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(254, 212, 0, 0.03) 1px, transparent 1px);
|
||||
background-size: 60px 60px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.orb {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
filter: blur(60px);
|
||||
opacity: 0.4;
|
||||
}
|
||||
.orb-1 {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: rgba(254, 212, 0, 0.3);
|
||||
top: -50px;
|
||||
right: 10%;
|
||||
animation: orbFloat1 8s ease-in-out infinite;
|
||||
}
|
||||
.orb-2 {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background: rgba(254, 212, 0, 0.2);
|
||||
bottom: 20%;
|
||||
left: 5%;
|
||||
animation: orbFloat2 10s ease-in-out infinite;
|
||||
}
|
||||
@keyframes orbFloat1 {
|
||||
0%, 100% { transform: translate(0, 0) scale(1); }
|
||||
50% { transform: translate(-40px, 30px) scale(1.1); }
|
||||
}
|
||||
@keyframes orbFloat2 {
|
||||
0%, 100% { transform: translate(0, 0) scale(1); }
|
||||
50% { transform: translate(50px, -30px) scale(1.15); }
|
||||
}
|
||||
.particles { position: absolute; inset: 0; overflow: hidden; }
|
||||
.particle {
|
||||
position: absolute;
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
background: #fed400;
|
||||
border-radius: 50%;
|
||||
opacity: 0;
|
||||
}
|
||||
.p-1 { top: 30%; left: 15%; animation: particleFloat 7s ease-in-out infinite; }
|
||||
.p-2 { top: 50%; left: 75%; animation: particleFloat 8s ease-in-out infinite; animation-delay: 2s; }
|
||||
.p-3 { top: 70%; left: 30%; animation: particleFloat 6s ease-in-out infinite; animation-delay: 1s; }
|
||||
.p-4 { top: 20%; left: 60%; animation: particleFloat 9s ease-in-out infinite; animation-delay: 3s; }
|
||||
@keyframes particleFloat {
|
||||
0% { opacity: 0; transform: translateY(50px) scale(0); }
|
||||
20% { opacity: 0.8; }
|
||||
80% { opacity: 0.8; }
|
||||
100% { opacity: 0; transform: translateY(-50px) scale(1); }
|
||||
}
|
||||
.lines { position: absolute; inset: 0; overflow: hidden; }
|
||||
.line {
|
||||
position: absolute;
|
||||
height: 1px;
|
||||
background: linear-gradient(90deg, transparent, rgba(254, 212, 0, 0.3), transparent);
|
||||
animation: lineMove 12s linear infinite;
|
||||
}
|
||||
.line-1 { width: 50%; top: 35%; left: -50%; animation-delay: 0s; }
|
||||
.line-2 { width: 40%; top: 65%; left: -40%; animation-delay: 6s; }
|
||||
@keyframes lineMove {
|
||||
0% { left: -50%; }
|
||||
100% { left: 110%; }
|
||||
}
|
||||
|
||||
.hero-content {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
text-align: center;
|
||||
padding: 80px 0 60px;
|
||||
}
|
||||
|
||||
.hero-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 10px 20px;
|
||||
background: rgba(254, 212, 0, 0.15);
|
||||
border: 1px solid rgba(254, 212, 0, 0.3);
|
||||
border-radius: 100px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.badge-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background: #fed400;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.badge-text {
|
||||
font-family: var(--font-display);
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2px;
|
||||
color: #fed400;
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
font-family: var(--font-display);
|
||||
font-size: clamp(32px, 5vw, 52px);
|
||||
font-weight: 900;
|
||||
line-height: 1.1;
|
||||
color: #ffffff;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.title-line {
|
||||
display: block;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.title-accent {
|
||||
display: block;
|
||||
color: #fed400;
|
||||
}
|
||||
|
||||
.hero-desc {
|
||||
font-size: 18px;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
max-width: 500px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.hero-wave {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 80px;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.hero-wave svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* =============================================
|
||||
FEATURED SECTION
|
||||
============================================= */
|
||||
|
||||
.featured-section {
|
||||
background: #F8FAFC;
|
||||
padding: 60px 0 80px;
|
||||
}
|
||||
.section-soft { background: var(--color-bg-alt); }
|
||||
.section-yellow { background: var(--color-primary); }
|
||||
|
||||
/* Featured */
|
||||
.featured-section { padding: 60px 0; }
|
||||
.featured-card {
|
||||
display: grid;
|
||||
grid-template-columns: 1.5fr 1fr;
|
||||
gap: 0;
|
||||
background: #ffffff;
|
||||
border: 2px solid #E2E8F0;
|
||||
border-radius: 20px;
|
||||
background: var(--color-white);
|
||||
border: 1px solid var(--color-gray-200);
|
||||
border-radius: var(--radius-xl);
|
||||
overflow: hidden;
|
||||
transition: all 0.4s ease;
|
||||
}
|
||||
|
||||
.featured-card:hover {
|
||||
border-color: #fed400;
|
||||
transform: scale(1.01);
|
||||
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);
|
||||
box-shadow: var(--shadow-md);
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
|
||||
.featured-image {
|
||||
position: relative;
|
||||
aspect-ratio: 16/10;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.featured-image img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
transition: transform 0.5s ease;
|
||||
}
|
||||
|
||||
.featured-card:hover .featured-image img {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.featured-badge {
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
left: 16px;
|
||||
background: #fed400;
|
||||
color: #000000;
|
||||
background: var(--color-primary);
|
||||
color: var(--color-black);
|
||||
padding: 6px 14px;
|
||||
border-radius: 8px;
|
||||
border-radius: var(--radius-sm);
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.featured-content {
|
||||
padding: 40px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.category-badge {
|
||||
display: inline-block;
|
||||
background: #F1F5F9;
|
||||
color: #64748B;
|
||||
background: var(--color-bg-alt);
|
||||
color: var(--color-gray-600);
|
||||
padding: 4px 12px;
|
||||
border-radius: 8px;
|
||||
border-radius: var(--radius-sm);
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
@@ -382,191 +150,129 @@ const sortedPosts = blogPosts.sort((a, b) => b.data.date.valueOf() - a.data.date
|
||||
align-self: flex-start;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.featured-title {
|
||||
font-family: var(--font-display);
|
||||
font-size: clamp(22px, 3vw, 28px);
|
||||
font-weight: 800;
|
||||
color: #0F172A;
|
||||
color: var(--color-black);
|
||||
margin-bottom: 12px;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.featured-excerpt {
|
||||
font-size: 14px;
|
||||
color: #64748B;
|
||||
color: var(--color-gray-600);
|
||||
line-height: 1.7;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.read-more {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
color: #fed400;
|
||||
color: var(--color-black);
|
||||
font-family: var(--font-display);
|
||||
font-weight: 700;
|
||||
font-weight: 800;
|
||||
font-size: 14px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.read-more:hover {
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.read-more svg {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
/* =============================================
|
||||
SECTION HEADER
|
||||
============================================= */
|
||||
|
||||
.section-header {
|
||||
text-align: center;
|
||||
margin-bottom: 48px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
.read-more:hover { color: var(--color-primary-dark); }
|
||||
.read-more svg { width: 18px; height: 18px; }
|
||||
|
||||
/* Section header */
|
||||
.section-header { text-align: center; margin-bottom: 48px; }
|
||||
.section-badge {
|
||||
display: inline-block;
|
||||
background: #fed400;
|
||||
color: #000000;
|
||||
background: var(--color-primary);
|
||||
color: var(--color-black);
|
||||
padding: 8px 20px;
|
||||
border-radius: 100px;
|
||||
font-size: 11px;
|
||||
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: #0F172A;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* =============================================
|
||||
BLOG SECTION
|
||||
============================================= */
|
||||
|
||||
.blog-section {
|
||||
background: #ffffff;
|
||||
padding: 80px 0;
|
||||
color: var(--color-black);
|
||||
}
|
||||
.section-title .highlight { color: var(--color-primary-dark); }
|
||||
|
||||
/* Blog grid */
|
||||
.blog-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 32px;
|
||||
}
|
||||
|
||||
.blog-card {
|
||||
display: block;
|
||||
background: #ffffff;
|
||||
border: 2px solid #E2E8F0;
|
||||
border-radius: 16px;
|
||||
background: var(--color-white);
|
||||
border: 1px solid var(--color-gray-200);
|
||||
border-radius: var(--radius-xl);
|
||||
overflow: hidden;
|
||||
transition: all 0.4s ease;
|
||||
animation: fadeUp 0.6s ease backwards;
|
||||
animation-delay: var(--delay);
|
||||
}
|
||||
|
||||
.blog-card:hover {
|
||||
border-color: #fed400;
|
||||
transform: translateY(-8px);
|
||||
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
|
||||
box-shadow: var(--shadow-md);
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
|
||||
.blog-image {
|
||||
aspect-ratio: 16/10;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.blog-image { aspect-ratio: 16/10; overflow: hidden; background: var(--color-bg-soft); }
|
||||
.blog-image img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
transition: transform 0.5s ease;
|
||||
}
|
||||
|
||||
.blog-card:hover .blog-image img {
|
||||
transform: scale(1.08);
|
||||
}
|
||||
|
||||
.blog-content {
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.blog-card:hover .blog-image img { transform: scale(1.08); }
|
||||
.blog-content { padding: 24px; }
|
||||
.blog-category {
|
||||
display: inline-block;
|
||||
background: #F1F5F9;
|
||||
color: #64748B;
|
||||
background: var(--color-primary);
|
||||
color: var(--color-black);
|
||||
padding: 4px 12px;
|
||||
border-radius: 8px;
|
||||
font-size: 10px;
|
||||
border-radius: var(--radius-sm);
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.blog-title {
|
||||
font-family: var(--font-display);
|
||||
font-size: 17px;
|
||||
font-size: 18px;
|
||||
font-weight: 800;
|
||||
color: #0F172A;
|
||||
margin-bottom: 10px;
|
||||
color: var(--color-black);
|
||||
margin-bottom: 12px;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.blog-excerpt {
|
||||
font-size: 14px;
|
||||
color: #64748B;
|
||||
color: var(--color-gray-600);
|
||||
line-height: 1.6;
|
||||
margin-bottom: 14px;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.blog-date {
|
||||
font-size: 12px;
|
||||
color: #94A3B8;
|
||||
}
|
||||
|
||||
/* =============================================
|
||||
CTA SECTION
|
||||
============================================= */
|
||||
|
||||
.cta-section {
|
||||
background: #fed400;
|
||||
padding: 80px 0;
|
||||
}
|
||||
|
||||
.cta-content {
|
||||
text-align: center;
|
||||
color: var(--color-gray-500);
|
||||
}
|
||||
|
||||
/* CTA */
|
||||
.cta-content { text-align: center; max-width: 700px; margin: 0 auto; }
|
||||
.cta-title {
|
||||
font-family: var(--font-display);
|
||||
font-size: clamp(28px, 4vw, 36px);
|
||||
font-weight: 800;
|
||||
color: #000000;
|
||||
margin-bottom: 12px;
|
||||
font-size: clamp(28px, 4vw, 44px);
|
||||
font-weight: 900;
|
||||
color: var(--color-black);
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.cta-desc {
|
||||
font-size: 16px;
|
||||
font-size: 18px;
|
||||
color: rgba(0, 0, 0, 0.7);
|
||||
margin-bottom: 28px;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.cta-actions {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
@@ -574,91 +280,13 @@ const sortedPosts = blogPosts.sort((a, b) => b.data.date.valueOf() - a.data.date
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
/* =============================================
|
||||
BUTTONS
|
||||
============================================= */
|
||||
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
padding: 14px 28px;
|
||||
font-family: var(--font-display);
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1.5px;
|
||||
border: none;
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.btn-dark {
|
||||
background: #0F172A;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.btn-dark:hover {
|
||||
background: #1E293B;
|
||||
}
|
||||
|
||||
.btn-outline-dark {
|
||||
background: transparent;
|
||||
color: #000000;
|
||||
border: 2px solid #000000;
|
||||
}
|
||||
|
||||
.btn-outline-dark:hover {
|
||||
background: #000000;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.btn-lg {
|
||||
padding: 16px 32px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
@keyframes fadeUp {
|
||||
from { opacity: 0; transform: translateY(20px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
/* =============================================
|
||||
RESPONSIVE
|
||||
============================================= */
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.featured-card {
|
||||
grid-template-columns: 1fr;
|
||||
.featured-card { grid-template-columns: 1fr; }
|
||||
.blog-grid { grid-template-columns: repeat(2, 1fr); }
|
||||
}
|
||||
|
||||
.featured-image {
|
||||
aspect-ratio: 16/7;
|
||||
}
|
||||
|
||||
.blog-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.blog-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.featured-content {
|
||||
padding: 28px;
|
||||
}
|
||||
|
||||
.cta-actions {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.btn-lg {
|
||||
width: 100%;
|
||||
}
|
||||
.blog-grid { grid-template-columns: 1fr; }
|
||||
.cta-actions { flex-direction: column; }
|
||||
.cta-actions .btn { width: 100%; justify-content: center; }
|
||||
}
|
||||
</style>
|
||||
@@ -5,144 +5,236 @@ import Footer from '../components/Footer.astro';
|
||||
import PageHero from '../components/PageHero.astro';
|
||||
---
|
||||
|
||||
<Base title="ติดต่อเรา | MoreminiMore - รับทำเว็บไซต์ SEO AI Chatbot">
|
||||
<Base title="ติดต่อเรา | MoreminiMore | รับทำเว็บไซต์ SEO AI Chatbot">
|
||||
<Navigation />
|
||||
|
||||
<PageHero
|
||||
badge="ติดต่อเรา"
|
||||
title="ติดต่อเรา"
|
||||
subtitle="พร้อมให้คำปรึกษาและช่วยเหลือคุณ ปรึกษาฟรี ไม่มีค่าใช้จ่าย"
|
||||
badge="30 นาที · ไม่มีค่าใช้จ่าย · ไม่มี commitment"
|
||||
title="คุยกับ คนจริง ๆ ไม่ใช่ Bot"
|
||||
subtitle="ตอบกลับภายใน 2 ชั่วโมง · เลือกช่องทางที่คุณสะดวก — LINE, โทร, Email หรือฟอร์ม"
|
||||
/>
|
||||
|
||||
<!-- Contact Section -->
|
||||
<section class="section contact-section">
|
||||
<!-- Quick Channel Picker -->
|
||||
<section class="section channels-pick-section">
|
||||
<div class="container">
|
||||
<div class="contact-grid">
|
||||
<div class="contact-info">
|
||||
<div class="channels-pick-grid">
|
||||
<a href="https://line.me/ti/p/~@539hdlul" target="_blank" rel="noopener" class="channel-pick-card">
|
||||
<div class="channel-pick-icon">💬</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>
|
||||
<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>
|
||||
<h3 class="channel-pick-name">Email</h3>
|
||||
<p class="channel-pick-best">คนที่อยากส่งรายละเอียดโปรเจกต์ + ไฟล์แนบ</p>
|
||||
<p class="channel-pick-time">ตอบภายใน 1 วันทำการ</p>
|
||||
<span class="channel-pick-cta">contact@moreminimore.com</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Contact Form Section -->
|
||||
<section class="section form-section">
|
||||
<div class="container">
|
||||
<div class="form-grid">
|
||||
<!-- Info column -->
|
||||
<div class="info-column">
|
||||
<h2 class="info-title">ข้อมูลติดต่อ</h2>
|
||||
|
||||
<div class="contact-item">
|
||||
<div class="contact-icon">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="contact-detail">
|
||||
<div class="info-item">
|
||||
<div class="info-icon">📞</div>
|
||||
<div>
|
||||
<h3>โทรศัพท์</h3>
|
||||
<a href="tel:0809955945">080-995-5945</a>
|
||||
<p>โทรคุยสดได้เลย จ-ศ 09:00-18:00</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="contact-item">
|
||||
<div class="contact-icon">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/>
|
||||
<polyline points="22,6 12,13 2,6"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="contact-detail">
|
||||
<div class="info-item">
|
||||
<div class="info-icon">✉️</div>
|
||||
<div>
|
||||
<h3>อีเมล</h3>
|
||||
<a href="mailto:contact@moreminimore.com">contact@moreminimore.com</a>
|
||||
<p>เหมาะกับส่งรายละเอียดโปรเจกต์ + ไฟล์แนบ</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="contact-item">
|
||||
<div class="contact-icon">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="contact-detail">
|
||||
<div class="info-item">
|
||||
<div class="info-icon">💬</div>
|
||||
<div>
|
||||
<h3>LINE</h3>
|
||||
<a href="https://line.me/ti/p/~@539hdlul" target="_blank" rel="noopener noreferrer">@moreminimore</a>
|
||||
<a href="https://line.me/ti/p/~@539hdlul" target="_blank" rel="noopener">@moreminimore</a>
|
||||
<p>เร็วที่สุด ตอบใน 30 นาที (เวลาทำการ)</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="contact-item">
|
||||
<div class="contact-icon">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/>
|
||||
<circle cx="12" cy="10" r="3"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="contact-detail">
|
||||
<h3>ที่อยู่</h3>
|
||||
<div class="info-item">
|
||||
<div class="info-icon">📍</div>
|
||||
<div>
|
||||
<h3>ออฟฟิศ</h3>
|
||||
<p>53 หมู่ 1 ต.บ้านแพ้ว อ.บ้านแพ้ว สมุทรสาคร 74120</p>
|
||||
<p>นัดเจอล่วงหน้า สะดวกกว่าเดินเข้ามาเฉย ๆ</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="contact-item">
|
||||
<div class="contact-icon">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<circle cx="12" cy="12" r="10"/>
|
||||
<polyline points="12 6 12 12 16 14"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="contact-detail">
|
||||
<div class="info-item">
|
||||
<div class="info-icon">🕐</div>
|
||||
<div>
|
||||
<h3>เวลาทำการ</h3>
|
||||
<p>จันทร์ - ศุกร์ 09:00 - 18:00 น.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="social-section">
|
||||
<h3>ติดตามเรา</h3>
|
||||
<div class="social-links">
|
||||
<a href="https://www.facebook.com/moreminimore" class="social-link" aria-label="Facebook" target="_blank" rel="noopener noreferrer">
|
||||
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/></svg>
|
||||
</a>
|
||||
<a href="https://line.me/ti/p/~@539hdlul" class="social-link" aria-label="LINE" target="_blank" rel="noopener noreferrer">
|
||||
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M19.365 9.863c.349 0 .63.285.63.631 0 .345-.281.63-.63.63H17.61v1.125h1.755c.349 0 .63.283.63.63 0 .344-.281.629-.63.629h-2.386c-.345 0-.627-.285-.627-.629V8.108c0-.345.282-.63.627-.63h2.386c.349 0 .63.285.63.63 0 .349-.281.63-.63.63H17.61v1.125h1.755zm-3.855 3.016c0 .27-.174.51-.432.596-.064.021-.133.031-.199.031-.211 0-.391-.09-.51-.25l-2.443-3.317v2.94c0 .344-.279.629-.631.629-.346 0-.626-.285-.626-.629V8.108c0-.27.173-.51.43-.595.06-.023.136-.033.194-.033.195 0 .375.104.495.254l2.462 3.33V8.108c0-.345.282-.63.63-.63.345 0 .63.285.63.63v4.771zm-5.741 0c0 .344-.282.629-.631.629-.345 0-.627-.285-.627-.629V8.108c0-.345.282-.63.627-.63.349 0 .631.285.631.63v4.771zm-2.466.629H4.917c-.345 0-.63-.285-.63-.629V8.108c0-.345.285-.63.63-.63.348 0 .63.285.63.63v4.141h1.756c.348 0 .629.283.629.63 0 .344-.282.629-.629.629M24 10.314C24 4.943 18.615.572 12 .572S0 4.943 0 10.314c0 4.811 4.27 8.842 10.035 9.608.391.082.923.258 1.058.59.12.301.079.766.038 1.08l-.164 1.02c-.045.301-.24 1.186 1.049.645 1.291-.539 6.916-4.078 9.436-9.491.371-.661.56-1.388.56-2.159"/></svg>
|
||||
</a>
|
||||
<a href="https://www.linkedin.com/company/moreminimore" class="social-link" aria-label="LinkedIn" target="_blank" rel="noopener noreferrer">
|
||||
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"/><rect x="2" y="9" width="4" height="12"/><circle cx="4" cy="4" r="2"/></svg>
|
||||
</a>
|
||||
<p>นอกเวลา? ทัก LINE ทิ้งไว้ได้ ตอบเช้าวันถัดไป</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="contact-form-wrapper">
|
||||
<!-- Form column -->
|
||||
<div class="form-column">
|
||||
<h2 class="form-title">ส่งข้อความถึงเรา</h2>
|
||||
<p class="form-subtitle">กรอก 4 ช่อง ใช้เวลา 60 วินาที — เราจะตอบกลับภายใน 2 ชั่วโมง (เวลาทำการ)</p>
|
||||
|
||||
<form class="contact-form" id="contact-form">
|
||||
<h2 class="form-title">ส่งข้อความ</h2>
|
||||
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label for="name">ชื่อ-นามสกุล</label>
|
||||
<input type="text" id="name" name="name" required placeholder="กรอกชื่อ-นามสกุล" />
|
||||
<label for="name" class="form-label">ชื่อ-นามสกุล *</label>
|
||||
<input type="text" id="name" name="name" required class="form-input" placeholder="สมชาย ใจดี" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="email" class="form-label">อีเมล *</label>
|
||||
<input type="email" id="email" name="email" required class="form-input" placeholder="example@yourcompany.com" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label for="phone" class="form-label">เบอร์โทรศัพท์ <span class="optional">(ใส่ถ้าอยากให้โทรกลับ)</span></label>
|
||||
<input type="tel" id="phone" name="phone" class="form-input" placeholder="080-xxx-xxxx" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="budget" class="form-label">งบประมาณโดยประมาณ</label>
|
||||
<select id="budget" name="budget" class="form-input">
|
||||
<option value="">เลือกช่วงงบ</option>
|
||||
<option value="under-20k">ต่ำกว่า 20,000 บาท</option>
|
||||
<option value="20k-50k">20,000–50,000 บาท</option>
|
||||
<option value="50k-150k">50,000–150,000 บาท</option>
|
||||
<option value="150k-500k">150,000–500,000 บาท</option>
|
||||
<option value="over-500k">500,000 บาทขึ้นไป</option>
|
||||
<option value="unsure">ยังไม่ได้กำหนด</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="email">อีเมล</label>
|
||||
<input type="email" id="email" name="email" required placeholder="example@email.com" />
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="phone">เบอร์โทรศัพท์</label>
|
||||
<input type="tel" id="phone" name="phone" placeholder="080-xxx-xxxx" />
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="service">บริการที่สนใจ</label>
|
||||
<select id="service" name="service">
|
||||
<option value="">เลือกบริการ</option>
|
||||
<option value="webdev">พัฒนาเว็บไซต์</option>
|
||||
<option value="marketing">Marketing Automation</option>
|
||||
<option value="ai">AI Automation</option>
|
||||
<option value="consult">Tech Consult</option>
|
||||
<option value="other">อื่นๆ</option>
|
||||
<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>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group form-group-full">
|
||||
<label for="message">ข้อความ</label>
|
||||
<textarea id="message" name="message" rows="5" required placeholder="กรอกรายละเอียดโปรเจกต์ของคุณ..."></textarea>
|
||||
<div class="form-group">
|
||||
<label for="message" class="form-label">รายละเอียดโปรเจกต์ *</label>
|
||||
<textarea id="message" name="message" rows="5" required class="form-input" placeholder="เล่าสั้น ๆ ว่าธุรกิจคุณทำอะไร ปวดหัวเรื่องอะไร อยากได้ผลลัพธ์แบบไหน (1–3 บรรทัดพอ)"></textarea>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="btn btn-primary btn-submit">
|
||||
ส่งข้อความ
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/>
|
||||
<span class="btn-text">ส่งข้อความ</span>
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3">
|
||||
<path d="M5 12h14M12 5l7 7-7 7"/>
|
||||
</svg>
|
||||
</button>
|
||||
<p class="form-helper">ไม่มี spam · ไม่มีขายของ · เข้า inbox เราโดยตรง</p>
|
||||
</form>
|
||||
|
||||
<!-- Success message (hidden by default) -->
|
||||
<div class="form-success" id="form-success" hidden>
|
||||
<div class="success-icon">✅</div>
|
||||
<h3>ส่งแล้ว!</h3>
|
||||
<p>เราจะตอบกลับภายใน 2 ชั่วโมง (ในเวลาทำการ) ถ้าเร่งด่วน ทัก LINE @moreminimore ครับ</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- What Happens Next -->
|
||||
<section class="section section-soft next-section">
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<span class="section-badge">หลังส่งฟอร์ม</span>
|
||||
<h2 class="section-title">3 ขั้นตอนถัดไป — <span class="highlight">ไม่มีอะไรซับซ้อน</span></h2>
|
||||
</div>
|
||||
|
||||
<div class="next-grid">
|
||||
<div class="next-step">
|
||||
<div class="next-num">1</div>
|
||||
<h3>ตอบกลับภายใน 2 ชั่วโมง</h3>
|
||||
<p>คนจริง (ไม่ใช่ Bot) จะตอบ — ถามคำถามเพิ่ม 2–3 ข้อ เพื่อเข้าใจปัญหาคุณ</p>
|
||||
</div>
|
||||
<div class="next-step">
|
||||
<div class="next-num">2</div>
|
||||
<h3>นัดปรึกษาฟรี 30 นาที</h3>
|
||||
<p>คุยผ่าน Zoom / โทร / นัดเจอที่ออฟฟิศ (กรุงเทพ / สมุทรสาคร) — ไม่มี script sales</p>
|
||||
</div>
|
||||
<div class="next-step">
|
||||
<div class="next-num">3</div>
|
||||
<h3>ส่ง Proposal (3–5 วัน)</h3>
|
||||
<p>เอกสาร PDF ที่ระบุ scope, timeline, ราคา — ไม่ชอบตรงไหนคุยกันแก้ได้</p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="next-closing">ถ้าไม่ตรง → เราจะบอกตรง ๆ ว่า "ไม่เหมาะ" และแนะนำทางเลือกอื่น</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Pre-submit FAQ -->
|
||||
<section class="section pre-faq-section">
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<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-item">
|
||||
<h3>คุยกัน 30 นาทีแล้วจะถูกบังคับซื้อไหม?</h3>
|
||||
<p>ไม่ คุยแล้วคุณไม่ชอบก็ไม่เป็นไร ไม่มี follow-up ไม่มีขายของเพิ่ม</p>
|
||||
</div>
|
||||
<div class="pre-faq-item">
|
||||
<h3>ถ้าส่งฟอร์มไปแล้วเงียบ ทำยังไง?</h3>
|
||||
<p>ทัก LINE @moreminimore ตรง ๆ จะเร็วกว่า — หรือโทร 080-995-5945</p>
|
||||
</div>
|
||||
<div class="pre-faq-item">
|
||||
<h3>คุยช่วงไหนได้บ้าง?</h3>
|
||||
<p>จันทร์-ศุกร์ 09:00-18:00 ปกติ ถ้าคุณต่างจังหวัด/ต่างประเทศ นัดนอกเวลาได้ บอกล่วงหน้า 1–2 วัน</p>
|
||||
</div>
|
||||
<div class="pre-faq-item">
|
||||
<h3>ต้องเตรียมอะไรไปคุยไหม?</h3>
|
||||
<p>ไม่ต้องเตรียมอะไรเลย แค่บอกธุรกิจคุณทำอะไร ปวดหัวเรื่องอะไร งบประมาณเท่าไหร่ ที่เหลือเราถามเอง</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section section-yellow cta-section">
|
||||
<div class="container">
|
||||
<div class="cta-content">
|
||||
<h2 class="cta-title">หรือจะ <span class="highlight">อ่านก่อน</span> ก็ได้</h2>
|
||||
<p class="cta-desc">ไม่มี commitment ไม่มี pressure ไม่มีใครตาม</p>
|
||||
<div class="cta-actions">
|
||||
<a href="/services" class="btn btn-dark btn-lg">ดูบริการทั้งหมด</a>
|
||||
<a href="/portfolio" class="btn btn-outline-dark btn-lg">ดูผลงาน</a>
|
||||
<a href="/faq" class="btn btn-outline-dark btn-lg">ดู FAQ</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -152,165 +244,341 @@ import PageHero from '../components/PageHero.astro';
|
||||
</Base>
|
||||
|
||||
<script>
|
||||
document.getElementById('contact-form')?.addEventListener('submit', (e) => {
|
||||
const form = document.getElementById('contact-form') as HTMLFormElement;
|
||||
const success = document.getElementById('form-success');
|
||||
|
||||
form?.addEventListener('submit', (e) => {
|
||||
e.preventDefault();
|
||||
const form = e.target as HTMLFormElement;
|
||||
const submitBtn = form.querySelector('.btn-submit') as HTMLButtonElement;
|
||||
submitBtn.textContent = 'กำลังส่ง...';
|
||||
submitBtn.disabled = true;
|
||||
const btn = form.querySelector('.btn-submit') as HTMLButtonElement;
|
||||
const btnText = btn.querySelector('.btn-text');
|
||||
const originalText = btnText?.textContent;
|
||||
if (btnText) btnText.textContent = 'กำลังส่ง...';
|
||||
btn.disabled = true;
|
||||
|
||||
// Simulate submission (replace with real endpoint)
|
||||
setTimeout(() => {
|
||||
alert('ขอบคุณที่ติดต่อเรา! เราจะติดต่อกลับเร็วๆ นี้');
|
||||
form.reset();
|
||||
submitBtn.textContent = 'ส่งข้อความ';
|
||||
submitBtn.disabled = false;
|
||||
}, 1000);
|
||||
form.hidden = true;
|
||||
if (success) success.hidden = false;
|
||||
if (btnText) btnText.textContent = originalText;
|
||||
btn.disabled = false;
|
||||
// Scroll to success
|
||||
success?.scrollIntoView({ behavior: 'smooth', block: 'center' });
|
||||
}, 800);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.contact-section { background: var(--color-white); }
|
||||
.contact-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1.2fr;
|
||||
gap: 80px;
|
||||
}
|
||||
.info-title {
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 32px;
|
||||
color: var(--color-black);
|
||||
}
|
||||
.contact-item {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
margin-bottom: 28px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
.contact-icon {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
background: var(--color-primary);
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.contact-icon svg {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
color: var(--color-white);
|
||||
}
|
||||
.contact-detail h3 {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: var(--color-medium-gray);
|
||||
margin-bottom: 4px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
.contact-detail a,
|
||||
.contact-detail p {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: var(--color-black);
|
||||
}
|
||||
.contact-detail a:hover { color: var(--color-primary); }
|
||||
.social-section {
|
||||
margin-top: 40px;
|
||||
padding-top: 40px;
|
||||
border-top: 1px solid #eee;
|
||||
}
|
||||
.social-section h3 {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 16px;
|
||||
color: var(--color-black);
|
||||
}
|
||||
.social-links { display: flex; gap: 12px; }
|
||||
.social-link {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
background: var(--color-gray-100);
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
.social-link:hover {
|
||||
background: var(--color-primary);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
.social-link svg { width: 20px; height: 20px; color: var(--color-black); }
|
||||
.social-link:hover svg { color: var(--color-white); }
|
||||
.channels-pick-section { background: var(--color-white); padding: 60px 0; }
|
||||
.form-section { background: var(--color-bg-alt); }
|
||||
.section-soft { background: var(--color-bg-alt); }
|
||||
.pre-faq-section { background: var(--color-white); }
|
||||
.section-yellow { background: var(--color-primary); }
|
||||
|
||||
.contact-form-wrapper {
|
||||
background: var(--color-dark);
|
||||
border-radius: 24px;
|
||||
/* Channel picker */
|
||||
.channels-pick-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 20px;
|
||||
}
|
||||
.channel-pick-card {
|
||||
display: block;
|
||||
background: var(--color-white);
|
||||
border: 2px solid var(--color-gray-200);
|
||||
border-radius: var(--radius-xl);
|
||||
padding: 28px;
|
||||
text-align: center;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.channel-pick-card:hover {
|
||||
border-color: var(--color-primary);
|
||||
transform: translateY(-4px);
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
.channel-pick-icon { font-size: 40px; margin-bottom: 12px; }
|
||||
.channel-pick-name {
|
||||
font-family: var(--font-display);
|
||||
font-size: 20px;
|
||||
font-weight: 800;
|
||||
color: var(--color-black);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.channel-pick-best {
|
||||
font-size: 14px;
|
||||
color: var(--color-gray-600);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.channel-pick-time {
|
||||
font-size: 12px;
|
||||
color: var(--color-gray-500);
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.channel-pick-cta {
|
||||
display: inline-block;
|
||||
padding: 10px 20px;
|
||||
background: var(--color-primary);
|
||||
color: var(--color-black);
|
||||
border-radius: var(--radius-md);
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
/* Section header */
|
||||
.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); }
|
||||
|
||||
/* Form grid */
|
||||
.form-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1.3fr;
|
||||
gap: 60px;
|
||||
background: var(--color-white);
|
||||
border: 1px solid var(--color-gray-200);
|
||||
border-radius: var(--radius-xl);
|
||||
padding: 48px;
|
||||
}
|
||||
.form-title {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
.info-title, .form-title {
|
||||
font-family: var(--font-display);
|
||||
font-size: 28px;
|
||||
font-weight: 900;
|
||||
color: var(--color-black);
|
||||
margin-bottom: 32px;
|
||||
color: var(--color-white);
|
||||
}
|
||||
.contact-form {
|
||||
.form-subtitle {
|
||||
font-size: 15px;
|
||||
color: var(--color-gray-600);
|
||||
margin-bottom: 24px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.info-item {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
margin-bottom: 24px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
.info-icon {
|
||||
font-size: 22px;
|
||||
flex-shrink: 0;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background: var(--color-bg-alt);
|
||||
border-radius: var(--radius-md);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.info-item h3 {
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
color: var(--color-gray-500);
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.info-item a, .info-item p {
|
||||
font-size: 15px;
|
||||
color: var(--color-black);
|
||||
line-height: 1.5;
|
||||
font-weight: 500;
|
||||
}
|
||||
.info-item a:hover { color: var(--color-primary-dark); }
|
||||
.info-item p { color: var(--color-gray-600); }
|
||||
|
||||
/* Form fields */
|
||||
.form-row {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 20px;
|
||||
gap: 16px;
|
||||
}
|
||||
.form-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.form-group-full { grid-column: span 2; }
|
||||
.form-group label {
|
||||
.form-label {
|
||||
display: block;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
color: var(--color-gray-700);
|
||||
margin-bottom: 8px;
|
||||
color: rgba(255,255,255,0.7);
|
||||
}
|
||||
.form-group input,
|
||||
.form-group select,
|
||||
.form-group textarea {
|
||||
padding: 14px 18px;
|
||||
border: 2px solid rgba(255,255,255,0.1);
|
||||
border-radius: 12px;
|
||||
font-size: 15px;
|
||||
.form-label .optional {
|
||||
text-transform: none;
|
||||
font-weight: 400;
|
||||
color: var(--color-gray-500);
|
||||
}
|
||||
.form-input {
|
||||
width: 100%;
|
||||
padding: 14px 16px;
|
||||
font-family: var(--font-body);
|
||||
background: rgba(255,255,255,0.05);
|
||||
color: var(--color-white);
|
||||
transition: all 0.3s;
|
||||
font-size: 15px;
|
||||
color: var(--color-black);
|
||||
background: var(--color-white);
|
||||
border: 2px solid var(--color-gray-200);
|
||||
border-radius: var(--radius-md);
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
.form-group input::placeholder,
|
||||
.form-group textarea::placeholder {
|
||||
color: rgba(255,255,255,0.3);
|
||||
}
|
||||
.form-group input:focus,
|
||||
.form-group select:focus,
|
||||
.form-group textarea:focus {
|
||||
.form-input::placeholder { color: var(--color-gray-400); }
|
||||
.form-input:focus {
|
||||
outline: none;
|
||||
border-color: var(--color-primary);
|
||||
background: rgba(255,255,255,0.08);
|
||||
box-shadow: 0 0 0 3px rgba(254, 212, 0, 0.15);
|
||||
}
|
||||
.form-group select option { background: var(--color-dark); color: var(--color-white); }
|
||||
.form-group textarea { resize: vertical; min-height: 120px; }
|
||||
textarea.form-input { resize: vertical; min-height: 120px; }
|
||||
|
||||
.btn-submit {
|
||||
grid-column: span 2;
|
||||
justify-self: start;
|
||||
padding: 16px 32px;
|
||||
font-size: 15px;
|
||||
width: 100%;
|
||||
margin-top: 8px;
|
||||
}
|
||||
.form-helper {
|
||||
text-align: center;
|
||||
margin-top: 12px;
|
||||
font-size: 13px;
|
||||
color: var(--color-gray-500);
|
||||
}
|
||||
|
||||
.form-success {
|
||||
text-align: center;
|
||||
padding: 60px 20px;
|
||||
}
|
||||
.success-icon {
|
||||
font-size: 64px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.form-success h3 {
|
||||
font-family: var(--font-display);
|
||||
font-size: 28px;
|
||||
font-weight: 800;
|
||||
color: var(--color-black);
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.form-success p {
|
||||
font-size: 16px;
|
||||
color: var(--color-gray-600);
|
||||
line-height: 1.6;
|
||||
max-width: 400px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* What happens next */
|
||||
.next-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 24px;
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.next-step {
|
||||
text-align: center;
|
||||
padding: 32px;
|
||||
}
|
||||
.next-num {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
background: var(--color-primary);
|
||||
color: var(--color-black);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-family: var(--font-display);
|
||||
font-size: 24px;
|
||||
font-weight: 900;
|
||||
margin: 0 auto 16px;
|
||||
}
|
||||
.next-step h3 {
|
||||
font-family: var(--font-display);
|
||||
font-size: 18px;
|
||||
font-weight: 800;
|
||||
color: var(--color-black);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.next-step p {
|
||||
font-size: 14px;
|
||||
color: var(--color-gray-600);
|
||||
line-height: 1.6;
|
||||
}
|
||||
.next-closing {
|
||||
text-align: center;
|
||||
margin-top: 32px;
|
||||
font-size: 15px;
|
||||
color: var(--color-gray-700);
|
||||
}
|
||||
|
||||
/* Pre-submit FAQ */
|
||||
.pre-faq-list {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.pre-faq-item {
|
||||
background: var(--color-bg-alt);
|
||||
border-left: 4px solid var(--color-primary);
|
||||
border-radius: var(--radius-md);
|
||||
padding: 20px 24px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.pre-faq-item h3 {
|
||||
font-family: var(--font-display);
|
||||
font-size: 16px;
|
||||
font-weight: 800;
|
||||
color: var(--color-black);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.pre-faq-item p {
|
||||
font-size: 15px;
|
||||
color: var(--color-gray-700);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* Final 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-title .highlight { color: var(--color-black); text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 4px; }
|
||||
.cta-desc {
|
||||
font-size: 18px;
|
||||
color: rgba(0, 0, 0, 0.7);
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
.cta-actions {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.btn-submit svg { width: 18px; height: 18px; }
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.contact-grid { grid-template-columns: 1fr; gap: 48px; }
|
||||
.channels-pick-grid { grid-template-columns: 1fr; }
|
||||
.form-grid { grid-template-columns: 1fr; gap: 40px; padding: 32px; }
|
||||
.form-row { grid-template-columns: 1fr; }
|
||||
.next-grid { grid-template-columns: 1fr; }
|
||||
}
|
||||
@media (max-width: 640px) {
|
||||
.contact-form { grid-template-columns: 1fr; }
|
||||
.form-group-full, .btn-submit { grid-column: span 1; }
|
||||
.contact-form-wrapper { padding: 32px 24px; }
|
||||
.cta-actions { flex-direction: column; }
|
||||
.cta-actions .btn { width: 100%; justify-content: center; }
|
||||
}
|
||||
</style>
|
||||
@@ -3,89 +3,115 @@ 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 { getCollection } from 'astro:content';
|
||||
|
||||
const faqData = [
|
||||
{
|
||||
category: "บริการ",
|
||||
icon: "🎯",
|
||||
items: [
|
||||
{ q: "บริการของเรามีอะไรบ้าง?", a: "เราให้บริการ รับทำเว็บไซต์, Marketing Automation, AI Automation และ Technology Consult สำหรับธุรกิจไทย" },
|
||||
{ q: "สามารถปรับแต่งงานตามความต้องการได้ไหม?", a: "ใช่! เราออกแบบโซลูชันที่เหมาะกับความต้องการเฉพาะของแต่ละธุรกิจ" },
|
||||
]
|
||||
},
|
||||
{
|
||||
category: "ราคา",
|
||||
icon: "💰",
|
||||
items: [
|
||||
{ q: "ราคาเริ่มต้นเท่าไหร่?", a: "ราคาขึ้นอยู่กับความต้องการและขอบเขตของโปรเจกต์ ติดต่อเราเพื่อรับใบเสนอราคาฟรี" },
|
||||
{ q: "มี package สำเร็จรูปไหม?", a: "มี เรามี package สำหรับลูกค้าที่ต้องการโซลูชันที่ครบถ้วนและราคาคุ้มค่า" },
|
||||
]
|
||||
},
|
||||
{
|
||||
category: "ระยะเวลา",
|
||||
icon: "⏱️",
|
||||
items: [
|
||||
{ q: "ใช้เวลาพัฒนานานแค่ไหน?", a: "ขึ้นอยู่กับความซับซ้อนของโปรเจกต์ เว็บไซต์มาตรฐาน 2-4 สัปดาห์, ระบบซับซ้อนอาจใช้ 1-3 เดือน" },
|
||||
]
|
||||
},
|
||||
{
|
||||
category: "ทั่วไป",
|
||||
icon: "💬",
|
||||
items: [
|
||||
{ q: "มีการรับประกันผลงานไหม?", a: "เรารับประกันคุณภาพ หากไม่พอใจเราพร้อมแก้ไขจนกว่าจะถูกใจ" },
|
||||
{ q: "หลังส่งมอบงานแล้วมี after service ไหม?", a: "มี เราให้บริการดูแลและ support หลังการขายตลอด 24 ชม." },
|
||||
]
|
||||
},
|
||||
];
|
||||
const faqItems = await getCollection('faq');
|
||||
const categories = ['บริการ', 'ราคา', 'ระยะเวลา', 'AI & เทคนิค', 'หลังการขาย'];
|
||||
const categoryIcons: Record<string, string> = {
|
||||
'บริการ': '💼',
|
||||
'ราคา': '💰',
|
||||
'ระยะเวลา': '⏱️',
|
||||
'AI & เทคนิค': '🤖',
|
||||
'หลังการขาย': '🛠️',
|
||||
};
|
||||
---
|
||||
|
||||
<Base title="คำถามที่พบบ่อย | MoreminiMore - รับทำเว็บไซต์ SEO AI Chatbot">
|
||||
<Base title="คำถามที่พบบ่อย | MoreminiMore | รับทำเว็บไซต์ SEO AI Chatbot">
|
||||
<Navigation />
|
||||
|
||||
<PageHero
|
||||
badge="FAQ"
|
||||
title="คำถามที่พบบ่อย"
|
||||
subtitle="หาคำตอบสำหรับคำถามที่พบบ่อยเกี่ยวกับบริการของเรา"
|
||||
title="คำถามที่ลูกค้าถามบ่อยที่สุด"
|
||||
subtitle="30+ คำถามที่รวบรวมจากแชต LINE จริง ๆ ไม่ใช่แต่งขึ้นเอง"
|
||||
/>
|
||||
|
||||
<!-- FAQ Section -->
|
||||
<section class="section faq-section">
|
||||
<div class="container">
|
||||
<div class="faq-content">
|
||||
{faqData.map(cat => (
|
||||
{categories.map(cat => {
|
||||
const items = faqItems.filter(f => f.data.category === cat);
|
||||
if (items.length === 0) return null;
|
||||
return (
|
||||
<div class="faq-category">
|
||||
<h2 class="category-title">
|
||||
<span class="category-icon">{cat.icon}</span>
|
||||
{cat.category}
|
||||
<span class="category-icon">{categoryIcons[cat]}</span>
|
||||
{cat}
|
||||
</h2>
|
||||
<div class="faq-list">
|
||||
{cat.items.map((item, qIndex) => (
|
||||
<div class="faq-item" data-item={qIndex}>
|
||||
<button class="faq-question" aria-expanded="false">
|
||||
<span class="question-text">{item.q}</span>
|
||||
<span class="faq-icon">+</span>
|
||||
</button>
|
||||
{items.map((item, qIndex) => (
|
||||
<details class="faq-item">
|
||||
<summary class="faq-question">
|
||||
<span class="question-text">{item.data.question}</span>
|
||||
<span class="faq-toggle">+</span>
|
||||
</summary>
|
||||
<div class="faq-answer">
|
||||
<p>{item.a}</p>
|
||||
</div>
|
||||
<p>{item.data.answer}</p>
|
||||
</div>
|
||||
</details>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
);
|
||||
})}
|
||||
|
||||
<!-- Other Topics -->
|
||||
<div class="faq-category">
|
||||
<h2 class="category-title">
|
||||
<span class="category-icon">📚</span>
|
||||
เรื่องอื่น ๆ ที่ลูกค้าถามบ่อย
|
||||
</h2>
|
||||
<div class="tag-cloud">
|
||||
<span class="topic-tag">โฮสติ้ง</span>
|
||||
<span class="topic-tag">โดเมน</span>
|
||||
<span class="topic-tag">SSL</span>
|
||||
<span class="topic-tag">ใบเสนอราคา</span>
|
||||
<span class="topic-tag">ใบกำกับภาษี</span>
|
||||
<span class="topic-tag">สัญญา</span>
|
||||
<span class="topic-tag">NDA</span>
|
||||
<span class="topic-tag">ลิขสิทธิ์งาน</span>
|
||||
<span class="topic-tag">ทีมงาน</span>
|
||||
<span class="topic-tag">ขนาดทีม</span>
|
||||
<span class="topic-tag">ที่ตั้งบริษัท</span>
|
||||
<span class="topic-tag">ตัวอย่างงาน</span>
|
||||
<span class="topic-tag">ขอดูเว็บจริง</span>
|
||||
<span class="topic-tag">นัดคุยนอกสถานที่</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Quick Channels -->
|
||||
<div class="channels-section">
|
||||
<h2 class="channels-title">ไม่เจอคำตอบ? ถามตรง ๆ เลย</h2>
|
||||
<div class="channels-grid">
|
||||
<a href="https://line.me/ti/p/~@539hdlul" target="_blank" rel="noopener" class="channel-card">
|
||||
<div class="channel-icon">💬</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>
|
||||
<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>
|
||||
<h3 class="channel-name">Email</h3>
|
||||
<p class="channel-handle">contact@moreminimore.com</p>
|
||||
<p class="channel-time">ตอบภายใน 1 วัน</p>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CTA Section -->
|
||||
<section class="section section-primary cta-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">นัดปรึกษาฟรี 30 นาที ผ่าน Zoom หรือนัดเจอที่ออฟฟิศ (กรุงเทพ/สมุทรสาคร)</p>
|
||||
<div class="cta-actions">
|
||||
<a href="/contact" class="btn btn-secondary 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 ตอนนี้</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -94,116 +120,183 @@ const faqData = [
|
||||
<Footer />
|
||||
</Base>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const faqItems = document.querySelectorAll('.faq-item');
|
||||
faqItems.forEach(item => {
|
||||
const question = item.querySelector('.faq-question');
|
||||
const answer = item.querySelector('.faq-answer');
|
||||
const icon = item.querySelector('.faq-icon');
|
||||
question?.addEventListener('click', () => {
|
||||
const isOpen = item.classList.contains('open');
|
||||
faqItems.forEach(faq => {
|
||||
faq.classList.remove('open');
|
||||
const fa = faq.querySelector('.faq-answer') as HTMLElement;
|
||||
const fi = faq.querySelector('.faq-icon');
|
||||
if (fa) fa.style.maxHeight = '0';
|
||||
if (fi) fi.textContent = '+';
|
||||
(faq.querySelector('.faq-question') as HTMLElement)?.setAttribute('aria-expanded', 'false');
|
||||
});
|
||||
if (!isOpen) {
|
||||
item.classList.add('open');
|
||||
if (answer) (answer as HTMLElement).style.maxHeight = answer.scrollHeight + 'px';
|
||||
if (icon) icon.textContent = '−';
|
||||
if (question) (question as HTMLElement).setAttribute('aria-expanded', 'true');
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.faq-section { background: var(--color-white); }
|
||||
.faq-content { max-width: 800px; margin: 0 auto; }
|
||||
.faq-category { margin-bottom: 60px; }
|
||||
.section-yellow { background: var(--color-primary); }
|
||||
|
||||
.faq-category {
|
||||
max-width: 800px;
|
||||
margin: 0 auto 60px;
|
||||
}
|
||||
.category-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
font-family: var(--font-display);
|
||||
font-size: 22px;
|
||||
font-weight: 800;
|
||||
color: var(--color-black);
|
||||
margin-bottom: 24px;
|
||||
padding-bottom: 16px;
|
||||
border-bottom: 2px solid var(--color-primary);
|
||||
margin-bottom: 20px;
|
||||
padding-bottom: 12px;
|
||||
border-bottom: 3px solid var(--color-primary);
|
||||
}
|
||||
.category-icon { font-size: 28px; }
|
||||
.faq-list { display: flex; flex-direction: column; gap: 12px; }
|
||||
|
||||
.faq-item {
|
||||
background: var(--color-white);
|
||||
border-radius: 12px;
|
||||
border-radius: var(--radius-md);
|
||||
border: 1px solid var(--color-gray-200);
|
||||
overflow: hidden;
|
||||
border: 1px solid rgba(0,0,0,0.08);
|
||||
transition: all 0.3s;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.faq-item:hover { box-shadow: 0 4px 20px rgba(0,0,0,0.08); }
|
||||
.faq-item.open { border-color: var(--color-primary); }
|
||||
.faq-item[open] { border-color: var(--color-primary); }
|
||||
.faq-item:hover { box-shadow: var(--shadow-sm); }
|
||||
|
||||
.faq-question {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 20px 24px;
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
font-family: var(--font-heading);
|
||||
list-style: none;
|
||||
transition: background 0.2s ease;
|
||||
}
|
||||
.faq-question::-webkit-details-marker { display: none; }
|
||||
.faq-question:hover { background: var(--color-bg-alt); }
|
||||
|
||||
.question-text {
|
||||
flex: 1;
|
||||
font-family: var(--font-display);
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
font-weight: 700;
|
||||
color: var(--color-black);
|
||||
padding-right: 16px;
|
||||
}
|
||||
.question-text { flex: 1; padding-right: 16px; }
|
||||
.faq-icon {
|
||||
font-size: 24px;
|
||||
color: var(--color-primary);
|
||||
.faq-toggle {
|
||||
font-size: 28px;
|
||||
font-weight: 300;
|
||||
transition: transform 0.3s;
|
||||
color: var(--color-primary);
|
||||
flex-shrink: 0;
|
||||
line-height: 1;
|
||||
}
|
||||
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
|
||||
.faq-answer p {
|
||||
.faq-item[open] .faq-toggle { transform: rotate(45deg); }
|
||||
|
||||
.faq-answer {
|
||||
padding: 0 24px 24px;
|
||||
}
|
||||
.faq-answer p {
|
||||
font-size: 15px;
|
||||
line-height: 1.8;
|
||||
color: #555;
|
||||
color: var(--color-gray-700);
|
||||
white-space: pre-line;
|
||||
}
|
||||
|
||||
.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;
|
||||
/* Tag cloud */
|
||||
.tag-cloud {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
.topic-tag {
|
||||
display: inline-block;
|
||||
padding: 8px 16px;
|
||||
background: var(--color-bg-alt);
|
||||
color: var(--color-gray-700);
|
||||
border: 1px solid var(--color-gray-200);
|
||||
border-radius: var(--radius-full);
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
.topic-tag:hover {
|
||||
background: var(--color-primary);
|
||||
border-color: var(--color-primary);
|
||||
color: var(--color-black);
|
||||
}
|
||||
|
||||
/* Channels */
|
||||
.channels-section {
|
||||
max-width: 900px;
|
||||
margin: 80px auto 0;
|
||||
padding: 60px 40px;
|
||||
background: var(--color-bg-alt);
|
||||
border-radius: var(--radius-xl);
|
||||
text-align: center;
|
||||
}
|
||||
.channels-title {
|
||||
font-family: var(--font-display);
|
||||
font-size: 28px;
|
||||
font-weight: 800;
|
||||
color: var(--color-black);
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
.channels-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 16px;
|
||||
}
|
||||
.channel-card {
|
||||
display: block;
|
||||
background: var(--color-white);
|
||||
border: 1px solid var(--color-gray-200);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: 24px;
|
||||
text-align: center;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.channel-card:hover {
|
||||
border-color: var(--color-primary);
|
||||
transform: translateY(-4px);
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
.channel-icon { font-size: 32px; margin-bottom: 12px; }
|
||||
.channel-name {
|
||||
font-family: var(--font-display);
|
||||
font-size: 18px;
|
||||
font-weight: 800;
|
||||
color: var(--color-black);
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.channel-handle {
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
color: var(--color-primary-dark);
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.channel-time {
|
||||
font-size: 12px;
|
||||
color: var(--color-gray-500);
|
||||
}
|
||||
|
||||
/* 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;
|
||||
}
|
||||
.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-lg { padding: 16px 36px; font-size: 16px; }
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.channels-grid { grid-template-columns: 1fr; }
|
||||
}
|
||||
@media (max-width: 640px) {
|
||||
.faq-question { padding: 16px 20px; font-size: 15px; }
|
||||
.faq-answer p { padding: 0 20px 20px; }
|
||||
.cta-actions { flex-direction: column; }
|
||||
.btn-lg { width: 100%; justify-content: center; }
|
||||
.cta-actions .btn { width: 100%; justify-content: center; }
|
||||
.faq-question { padding: 16px 20px; }
|
||||
.question-text { font-size: 15px; }
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
@@ -2,103 +2,98 @@
|
||||
import Base from '../layouts/Base.astro';
|
||||
import Navigation from '../components/Navigation.astro';
|
||||
import Footer from '../components/Footer.astro';
|
||||
import { portfolioItems } from '../data/portfolio';
|
||||
import PageHero from '../components/PageHero.astro';
|
||||
import PortfolioCard from '../components/PortfolioCard.astro';
|
||||
import { getCollection } from 'astro:content';
|
||||
|
||||
const portfolio = await getCollection('portfolio');
|
||||
---
|
||||
|
||||
<Base title="ผลงาน | MoreminiMore - รับทำเว็บไซต์ SEO AI Chatbot">
|
||||
<Base title="ผลงาน | MoreminiMore | รับทำเว็บไซต์ SEO AI Chatbot">
|
||||
<Navigation />
|
||||
|
||||
<!-- =============================================
|
||||
HERO SECTION - DARK THEME
|
||||
============================================= -->
|
||||
<section class="portfolio-hero">
|
||||
<div class="hero-bg">
|
||||
<div class="hero-grid"></div>
|
||||
<div class="orb orb-1"></div>
|
||||
<div class="orb orb-2"></div>
|
||||
<div class="particles">
|
||||
<div class="particle p-1"></div>
|
||||
<div class="particle p-2"></div>
|
||||
<div class="particle p-3"></div>
|
||||
<div class="particle p-4"></div>
|
||||
</div>
|
||||
<div class="lines">
|
||||
<div class="line line-1"></div>
|
||||
<div class="line line-2"></div>
|
||||
</div>
|
||||
</div>
|
||||
<PageHero
|
||||
badge="9 โปรเจกต์ · 5 อุตสาหกรรม · ผลงานจริงทุกชิ้น"
|
||||
title="เราส่งมอบให้ใคร มาบ้างแล้วบ้าง"
|
||||
subtitle="โปรเจกต์จริง ลูกค้าจริง เว็บไซต์จริงที่ใช้งานอยู่ทุกวันนี้ — คลิกเข้าไปดูได้เลย"
|
||||
/>
|
||||
|
||||
<!-- Industry Filter Bar -->
|
||||
<section class="filter-section">
|
||||
<div class="container">
|
||||
<div class="hero-content">
|
||||
<div class="hero-badge">
|
||||
<span class="badge-dot"></span>
|
||||
<span class="badge-text">ผลงานของเรา</span>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<h1 class="hero-title">
|
||||
<span class="title-line">โปรเจกต์ที่</span>
|
||||
<span class="title-accent">เราภาคภูมิใจ</span>
|
||||
</h1>
|
||||
|
||||
<p class="hero-desc">
|
||||
รวมผลงานพัฒนาเว็บไซต์และโปรเจกต์ที่เราภาคภูมิใจ
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hero-wave">
|
||||
<svg viewBox="0 0 1440 100" fill="none" preserveAspectRatio="none">
|
||||
<path d="M0 50C240 100 480 0 720 50C960 100 1200 0 1440 50V100H0V50Z" fill="#ffffff"/>
|
||||
</svg>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- =============================================
|
||||
PORTFOLIO GRID
|
||||
============================================= -->
|
||||
<section class="section portfolio-section">
|
||||
<div class="container">
|
||||
<div class="portfolio-grid">
|
||||
{portfolioItems.map((item, index) => (
|
||||
<article
|
||||
class="portfolio-card"
|
||||
data-category={item.category}
|
||||
style={`--delay: ${index * 0.05}s`}
|
||||
>
|
||||
<div class="portfolio-image">
|
||||
<img src={item.thumbnail} alt={item.name} loading="lazy" />
|
||||
<div class="portfolio-overlay">
|
||||
<a href={item.url || '#'} target="_blank" rel="noopener noreferrer" class="visit-btn">
|
||||
เยี่ยมชมเว็บไซต์
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="portfolio-content">
|
||||
<span class="portfolio-category">{item.category_label}</span>
|
||||
<h3 class="portfolio-name">{item.name}</h3>
|
||||
{item.description && <p class="portfolio-desc">{item.description}</p>}
|
||||
</div>
|
||||
</article>
|
||||
{portfolio.map(item => (
|
||||
<PortfolioCard
|
||||
name={item.data.name}
|
||||
url={item.data.url || '#'}
|
||||
category={item.data.category}
|
||||
category_label={item.data.category_label}
|
||||
industry={item.data.industry}
|
||||
thumbnail={item.data.thumbnail}
|
||||
description={item.data.description}
|
||||
what_we_did={item.data.what_we_did}
|
||||
result={item.data.result}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- =============================================
|
||||
CTA SECTION
|
||||
============================================= -->
|
||||
<section class="section cta-section">
|
||||
<!-- "ดีลที่เราเลือก" Section -->
|
||||
<section class="section section-soft">
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<span class="section-badge">ดีลที่เราเลือก</span>
|
||||
<h2 class="section-title">
|
||||
เรา <span class="highlight">เลือก</span> โปรเจกต์ที่ทำ — ไม่ใช่ทุกงานที่มา เรารับ
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div class="reasons-grid">
|
||||
<div class="reason-card">
|
||||
<div class="reason-num">1</div>
|
||||
<h3 class="reason-title">ธุรกิจที่พร้อมจริง ๆ</h3>
|
||||
<p class="reason-desc">เราคุยกับเจ้าของธุรกิจก่อน ถ้าเป้าหมายยังไม่ชัด เราจะแนะนำให้รอก่อน ดีกว่าเสียเงินแล้วไม่ได้ผล</p>
|
||||
</div>
|
||||
<div class="reason-card">
|
||||
<div class="reason-num">2</div>
|
||||
<h3 class="reason-title">งบประมาณที่สมเหตุสมผล</h3>
|
||||
<p class="reason-desc">เราไม่ได้ถูกที่สุด แต่ก็ไม่ได้แพงที่สุด ถ้าใครบอก "งบ 5,000 ทำเว็บได้ไหม" — เราแนะนำให้ไปฟรีแลนซ์ก่อน</p>
|
||||
</div>
|
||||
<div class="reason-card">
|
||||
<div class="reason-num">3</div>
|
||||
<h3 class="reason-title">ลูกค้าที่ฟัง</h3>
|
||||
<p class="reason-desc">เราทำงานกับลูกค้าที่พร้อมฟังคำแนะนำ ไม่ใช่ลูกค้าที่บอก "ทำตามนี้เป๊ะ ๆ" แล้วผิดคาดทุกที</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">อยากเป็น <span class="highlight">ผลงานชิ้นต่อไป</span> ของเรา?</h2>
|
||||
<p class="cta-desc">ถ้าธุรกิจคุณพร้อม เราพร้อม — คุยกันก่อน 30 นาที แล้วตัดสินใจเอง</p>
|
||||
<div class="cta-actions">
|
||||
<a href="/contact" class="btn btn-primary 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="/services" class="btn btn-outline-dark btn-lg">ดูบริการที่เราทำ</a>
|
||||
</div>
|
||||
<p class="cta-reassurance">ไม่มี script · ไม่มี pressure · ตรงไปตรงมา</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -106,395 +101,169 @@ import { portfolioItems } from '../data/portfolio';
|
||||
<Footer />
|
||||
</Base>
|
||||
|
||||
<script>
|
||||
// Industry filter
|
||||
const filterBtns = document.querySelectorAll('.filter-btn');
|
||||
const cards = document.querySelectorAll('.portfolio-card');
|
||||
filterBtns.forEach(btn => {
|
||||
btn.addEventListener('click', () => {
|
||||
filterBtns.forEach(b => b.classList.remove('active'));
|
||||
btn.classList.add('active');
|
||||
const filter = btn.getAttribute('data-filter');
|
||||
cards.forEach(card => {
|
||||
const industry = card.querySelector('.portfolio-industry')?.textContent || '';
|
||||
if (filter === 'all' || industry.includes(filter)) {
|
||||
(card as HTMLElement).style.display = '';
|
||||
} else {
|
||||
(card as HTMLElement).style.display = 'none';
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
/* =============================================
|
||||
PORTFOLIO HERO
|
||||
============================================= */
|
||||
|
||||
.portfolio-hero {
|
||||
position: relative;
|
||||
min-height: 50vh;
|
||||
.filter-section {
|
||||
background: var(--color-bg-alt);
|
||||
padding: 20px 0;
|
||||
border-top: 1px solid var(--color-gray-200);
|
||||
border-bottom: 1px solid var(--color-gray-200);
|
||||
position: sticky;
|
||||
top: 70px;
|
||||
z-index: 50;
|
||||
}
|
||||
.filter-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: #0F172A;
|
||||
overflow: hidden;
|
||||
gap: 8px;
|
||||
overflow-x: auto;
|
||||
padding: 4px 0;
|
||||
}
|
||||
.filter-btn {
|
||||
flex-shrink: 0;
|
||||
padding: 8px 16px;
|
||||
background: var(--color-white);
|
||||
color: var(--color-gray-700);
|
||||
border: 1px solid var(--color-gray-200);
|
||||
border-radius: var(--radius-full);
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.filter-btn:hover {
|
||||
border-color: var(--color-primary);
|
||||
color: var(--color-black);
|
||||
}
|
||||
.filter-btn.active {
|
||||
background: var(--color-primary);
|
||||
color: var(--color-black);
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
|
||||
.hero-bg {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
||||
.hero-grid {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background-image:
|
||||
linear-gradient(rgba(254, 212, 0, 0.03) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(254, 212, 0, 0.03) 1px, transparent 1px);
|
||||
background-size: 60px 60px;
|
||||
}
|
||||
|
||||
.orb {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
filter: blur(60px);
|
||||
opacity: 0.4;
|
||||
}
|
||||
.orb-1 {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: rgba(254, 212, 0, 0.3);
|
||||
top: -50px;
|
||||
right: 10%;
|
||||
animation: orbFloat1 8s ease-in-out infinite;
|
||||
}
|
||||
.orb-2 {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background: rgba(254, 212, 0, 0.2);
|
||||
bottom: 20%;
|
||||
left: 5%;
|
||||
animation: orbFloat2 10s ease-in-out infinite;
|
||||
}
|
||||
@keyframes orbFloat1 {
|
||||
0%, 100% { transform: translate(0, 0) scale(1); }
|
||||
50% { transform: translate(-40px, 30px) scale(1.1); }
|
||||
}
|
||||
@keyframes orbFloat2 {
|
||||
0%, 100% { transform: translate(0, 0) scale(1); }
|
||||
50% { transform: translate(50px, -30px) scale(1.15); }
|
||||
}
|
||||
.particles { position: absolute; inset: 0; overflow: hidden; }
|
||||
.particle {
|
||||
position: absolute;
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
background: #fed400;
|
||||
border-radius: 50%;
|
||||
opacity: 0;
|
||||
}
|
||||
.p-1 { top: 30%; left: 15%; animation: particleFloat 7s ease-in-out infinite; }
|
||||
.p-2 { top: 50%; left: 75%; animation: particleFloat 8s ease-in-out infinite; animation-delay: 2s; }
|
||||
.p-3 { top: 70%; left: 30%; animation: particleFloat 6s ease-in-out infinite; animation-delay: 1s; }
|
||||
.p-4 { top: 20%; left: 60%; animation: particleFloat 9s ease-in-out infinite; animation-delay: 3s; }
|
||||
@keyframes particleFloat {
|
||||
0% { opacity: 0; transform: translateY(50px) scale(0); }
|
||||
20% { opacity: 0.8; }
|
||||
80% { opacity: 0.8; }
|
||||
100% { opacity: 0; transform: translateY(-50px) scale(1); }
|
||||
}
|
||||
.lines { position: absolute; inset: 0; overflow: hidden; }
|
||||
.line {
|
||||
position: absolute;
|
||||
height: 1px;
|
||||
background: linear-gradient(90deg, transparent, rgba(254, 212, 0, 0.3), transparent);
|
||||
animation: lineMove 12s linear infinite;
|
||||
}
|
||||
.line-1 { width: 50%; top: 35%; left: -50%; animation-delay: 0s; }
|
||||
.line-2 { width: 40%; top: 65%; left: -40%; animation-delay: 6s; }
|
||||
@keyframes lineMove {
|
||||
0% { left: -50%; }
|
||||
100% { left: 110%; }
|
||||
}
|
||||
|
||||
.hero-content {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
text-align: center;
|
||||
padding: 80px 0 60px;
|
||||
}
|
||||
|
||||
.hero-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 10px 20px;
|
||||
background: rgba(254, 212, 0, 0.15);
|
||||
border: 1px solid rgba(254, 212, 0, 0.3);
|
||||
border-radius: 100px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.badge-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background: #fed400;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.badge-text {
|
||||
font-family: var(--font-display);
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2px;
|
||||
color: #fed400;
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
font-family: var(--font-display);
|
||||
font-size: clamp(32px, 5vw, 52px);
|
||||
font-weight: 900;
|
||||
line-height: 1.1;
|
||||
color: #ffffff;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.title-line {
|
||||
display: block;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.title-accent {
|
||||
color: #fed400;
|
||||
}
|
||||
|
||||
.hero-desc {
|
||||
font-size: 18px;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
max-width: 500px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.hero-wave {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 80px;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.hero-wave svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* =============================================
|
||||
PORTFOLIO SECTION
|
||||
============================================= */
|
||||
|
||||
.portfolio-section {
|
||||
background: #ffffff;
|
||||
padding: 80px 0;
|
||||
}
|
||||
.portfolio-section { background: var(--color-white); }
|
||||
.section-soft { background: var(--color-bg-alt); }
|
||||
.section-yellow { background: var(--color-primary); }
|
||||
|
||||
.portfolio-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 32px;
|
||||
gap: 28px;
|
||||
}
|
||||
|
||||
.portfolio-card {
|
||||
background: #ffffff;
|
||||
border: 2px solid #E2E8F0;
|
||||
border-radius: 20px;
|
||||
overflow: hidden;
|
||||
transition: all 0.4s ease;
|
||||
animation: fadeUp 0.6s ease backwards;
|
||||
animation-delay: var(--delay);
|
||||
}
|
||||
|
||||
.portfolio-card:hover {
|
||||
border-color: #fed400;
|
||||
transform: translateY(-8px);
|
||||
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.portfolio-image {
|
||||
position: relative;
|
||||
aspect-ratio: 16/10;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.portfolio-image img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
transition: transform 0.5s ease;
|
||||
}
|
||||
|
||||
.portfolio-card:hover .portfolio-image img {
|
||||
transform: scale(1.08);
|
||||
}
|
||||
|
||||
.portfolio-overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: rgba(254, 212, 0, 0.95);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.portfolio-card:hover .portfolio-overlay {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.visit-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
background: #000000;
|
||||
color: #ffffff;
|
||||
padding: 14px 28px;
|
||||
border-radius: 100px;
|
||||
font-family: var(--font-display);
|
||||
font-weight: 700;
|
||||
font-size: 14px;
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
.visit-btn:hover {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.visit-btn svg {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
.portfolio-content {
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.portfolio-category {
|
||||
.section-header { text-align: center; margin-bottom: 48px; }
|
||||
.section-badge {
|
||||
display: inline-block;
|
||||
background: #F1F5F9;
|
||||
color: #64748B;
|
||||
padding: 4px 12px;
|
||||
border-radius: 8px;
|
||||
font-size: 11px;
|
||||
background: var(--color-primary);
|
||||
color: var(--color-black);
|
||||
padding: 8px 20px;
|
||||
border-radius: var(--radius-full);
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 12px;
|
||||
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); }
|
||||
|
||||
.portfolio-name {
|
||||
.reasons-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 24px;
|
||||
}
|
||||
.reason-card {
|
||||
background: var(--color-white);
|
||||
border: 1px solid var(--color-gray-200);
|
||||
border-radius: var(--radius-xl);
|
||||
padding: 32px;
|
||||
}
|
||||
.reason-num {
|
||||
display: inline-block;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background: var(--color-primary);
|
||||
color: var(--color-black);
|
||||
border-radius: 50%;
|
||||
text-align: center;
|
||||
line-height: 40px;
|
||||
font-family: var(--font-display);
|
||||
font-size: 18px;
|
||||
font-weight: 900;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.reason-title {
|
||||
font-family: var(--font-display);
|
||||
font-size: 18px;
|
||||
font-weight: 800;
|
||||
color: #0F172A;
|
||||
color: var(--color-black);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.portfolio-desc {
|
||||
font-size: 14px;
|
||||
color: #64748B;
|
||||
.reason-desc {
|
||||
font-size: 15px;
|
||||
color: var(--color-gray-600);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* =============================================
|
||||
CTA SECTION
|
||||
============================================= */
|
||||
|
||||
.cta-section {
|
||||
background: #fed400;
|
||||
padding: 80px 0;
|
||||
}
|
||||
|
||||
.cta-content {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.cta-content { text-align: center; max-width: 700px; margin: 0 auto; }
|
||||
.cta-title {
|
||||
font-family: var(--font-display);
|
||||
font-size: clamp(28px, 4vw, 36px);
|
||||
font-weight: 800;
|
||||
color: #000000;
|
||||
margin-bottom: 12px;
|
||||
font-size: clamp(28px, 4vw, 44px);
|
||||
font-weight: 900;
|
||||
color: var(--color-black);
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.cta-title .highlight { color: var(--color-black); text-decoration: underline; text-decoration-color: var(--color-black); text-underline-offset: 6px; text-decoration-thickness: 4px; }
|
||||
.cta-desc {
|
||||
font-size: 16px;
|
||||
font-size: 18px;
|
||||
color: rgba(0, 0, 0, 0.7);
|
||||
margin-bottom: 28px;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.cta-actions {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
/* =============================================
|
||||
BUTTONS
|
||||
============================================= */
|
||||
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
padding: 14px 28px;
|
||||
font-family: var(--font-display);
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1.5px;
|
||||
border: none;
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: #0F172A;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: #1E293B;
|
||||
}
|
||||
|
||||
.btn-outline-dark {
|
||||
background: transparent;
|
||||
color: #000000;
|
||||
border: 2px solid #000000;
|
||||
}
|
||||
|
||||
.btn-outline-dark:hover {
|
||||
background: #000000;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.btn-lg {
|
||||
padding: 16px 32px;
|
||||
.cta-reassurance {
|
||||
font-size: 14px;
|
||||
color: rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
|
||||
@keyframes fadeUp {
|
||||
from { opacity: 0; transform: translateY(20px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
/* =============================================
|
||||
RESPONSIVE
|
||||
============================================= */
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.portfolio-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 24px;
|
||||
.portfolio-grid { grid-template-columns: repeat(2, 1fr); }
|
||||
.reasons-grid { grid-template-columns: 1fr; }
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.portfolio-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.cta-actions {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.btn-lg {
|
||||
width: 100%;
|
||||
}
|
||||
.portfolio-grid { grid-template-columns: 1fr; }
|
||||
.cta-actions { flex-direction: column; }
|
||||
.cta-actions .btn { width: 100%; justify-content: center; }
|
||||
}
|
||||
</style>
|
||||
@@ -19,7 +19,7 @@ import PageHero from '../components/PageHero.astro';
|
||||
<div class="legal-content">
|
||||
<p class="legal-intro">บริษัท มอร์มินิมอร์ จำกัด ให้ความสำคัญกับการคุ้มครองข้อมูลส่วนบุคคลของท่าน</p>
|
||||
|
||||
<div class="legal-section">
|
||||
<div class="legal-block">
|
||||
<h2>1. ข้อมูลส่วนบุคคลที่เราเก็บรวบรวม</h2>
|
||||
<p>ข้อมูลส่วนบุคคลที่บริษัทฯ อาจเก็บรวบรวมจากท่าน อาจรวมถึง:</p>
|
||||
<ul>
|
||||
@@ -29,7 +29,7 @@ import PageHero from '../components/PageHero.astro';
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="legal-section">
|
||||
<div class="legal-block">
|
||||
<h2>2. วัตถุประสงค์ในการเก็บรวบรวมข้อมูล</h2>
|
||||
<p>เราเก็บรวบรวมข้อมูลส่วนบุคคลเพื่อวัตถุประสงค์ดังต่อไปนี้:</p>
|
||||
<ul>
|
||||
@@ -40,12 +40,12 @@ import PageHero from '../components/PageHero.astro';
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="legal-section">
|
||||
<div class="legal-block">
|
||||
<h2>3. การคุ้มครองข้อมูล</h2>
|
||||
<p>เรามีมาตรการรักษาความปลอดภัยที่เหมาะสมเพื่อป้องกันการสูญหาย เข้าถึง ใช้ เปลี่ยนแปลง หรือเปิดเผยข้อมูลส่วนบุคคลโดยไม่ได้รับอนุญาต</p>
|
||||
</div>
|
||||
|
||||
<div class="legal-section">
|
||||
<div class="legal-block">
|
||||
<h2>4. สิทธิของท่าน</h2>
|
||||
<p>ท่านมีสิทธิในการเข้าถึง แก้ไข ลบ หรือระงับการใช้ข้อมูลส่วนบุคคลของท่าน กรุณาติดต่อเราผ่านช่องทางที่ระบุในเว็บไซต์</p>
|
||||
</div>
|
||||
@@ -61,33 +61,30 @@ import PageHero from '../components/PageHero.astro';
|
||||
.legal-content { max-width: 800px; margin: 0 auto; }
|
||||
.legal-intro {
|
||||
font-size: 18px;
|
||||
color: var(--color-medium-gray);
|
||||
color: var(--color-gray-700);
|
||||
margin-bottom: 48px;
|
||||
line-height: 1.7;
|
||||
}
|
||||
.legal-section {
|
||||
margin-bottom: 48px;
|
||||
}
|
||||
.legal-section h2 {
|
||||
.legal-block { margin-bottom: 48px; }
|
||||
.legal-block h2 {
|
||||
font-family: var(--font-display);
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
font-weight: 800;
|
||||
margin-bottom: 20px;
|
||||
color: var(--color-black);
|
||||
}
|
||||
.legal-section p {
|
||||
.legal-block p {
|
||||
font-size: 16px;
|
||||
color: #444;
|
||||
color: var(--color-gray-700);
|
||||
line-height: 1.8;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.legal-section ul {
|
||||
margin-left: 24px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.legal-section li {
|
||||
.legal-block ul { margin-left: 24px; margin-bottom: 16px; }
|
||||
.legal-block li {
|
||||
font-size: 16px;
|
||||
color: #444;
|
||||
color: var(--color-gray-700);
|
||||
line-height: 1.8;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.legal-block strong { color: var(--color-black); }
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
@@ -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="ครบจบทุกโซลูชันด้านดิจิทัลสำหรับธุรกิจไทย"
|
||||
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 class="decision-table">
|
||||
<div class="decision-row decision-header">
|
||||
<div>คุณกำลังเจอ</div>
|
||||
<div>เริ่มที่</div>
|
||||
<div>คาดเห็นผลใน</div>
|
||||
</div>
|
||||
<div class="decision-row">
|
||||
<div>ยังไม่มีเว็บไซต์ หรือเว็บเก่าโหลดช้า</div>
|
||||
<div><span class="dec-tag">🌐 AI-Enhanced Website</span></div>
|
||||
<div>2–4 สัปดาห์</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 Automation</span></div>
|
||||
<div>1–3 เดือน</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 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>
|
||||
@@ -19,37 +19,37 @@ import PageHero from '../components/PageHero.astro';
|
||||
<div class="legal-content">
|
||||
<p class="legal-intro">ชื่อเว็บไซต์: MoreminiMore | เว็บไซต์: https://www.moreminimore.com | บริษัท: MoreminiMore Co.,Ltd.</p>
|
||||
|
||||
<div class="legal-section">
|
||||
<div class="legal-block">
|
||||
<h2>1. การยอมรับเงื่อนไข</h2>
|
||||
<p>ด้วยการเข้าถึงและใช้งานเว็บไซต์ของบริษัท มอร์มินิมอร์ จำกัด ท่านยอมรับและตกลงที่จะถูกผูกมัดด้วยเงื่อนไขการให้บริการฉบับนี้</p>
|
||||
</div>
|
||||
|
||||
<div class="legal-section">
|
||||
<div class="legal-block">
|
||||
<h2>2. การแก้ไขเงื่อนไข</h2>
|
||||
<p>เราขอสงวนสิทธิในการแก้ไขเงื่อนไขนี้เมื่อใดก็ได้ การแก้ไขจะมีผลทันทีเมื่อโพสต์บนเว็บไซต์ ท่านควรตรวจสอบเงื่อนไขนี้เป็นประจำ</p>
|
||||
</div>
|
||||
|
||||
<div class="legal-section">
|
||||
<div class="legal-block">
|
||||
<h2>3. บริการของเรา</h2>
|
||||
<p>เราให้บริการพัฒนาเว็บไซต์ AI Automation และ Marketing Automation สำหรับธุรกิจไทย โดยมีรายละเอียดและขอบเขตงานตามที่ตกลงกันในสัญญา</p>
|
||||
</div>
|
||||
|
||||
<div class="legal-section">
|
||||
<div class="legal-block">
|
||||
<h2>4. การชำระเงิน</h2>
|
||||
<p>การชำระเงินจะเป็นไปตามเงื่อนไขที่กำหนดในใบเสนอราคาและสัญญา ลูกค้าตกลงชำระตามกำหนดเวลาที่ระบุ</p>
|
||||
</div>
|
||||
|
||||
<div class="legal-section">
|
||||
<div class="legal-block">
|
||||
<h2>5. การรับประกัน</h2>
|
||||
<p>เรารับประกันคุณภาพงานตามที่ระบุในสัญญา หากไม่พอใจในงาน เราพร้อมแก้ไขจนกว่าจะถูกใจตามเงื่อนไขที่กำหนด</p>
|
||||
</div>
|
||||
|
||||
<div class="legal-section">
|
||||
<div class="legal-block">
|
||||
<h2>6. ข้อจำกัดความรับผิด</h2>
|
||||
<p>ความรับผิดของบริษัทจะจำกัดอยู่ที่มูลค่าของงานที่ให้บริการตามที่ระบุในสัญญา</p>
|
||||
</div>
|
||||
|
||||
<div class="legal-section">
|
||||
<div class="legal-block">
|
||||
<h2>7. ติดต่อเรา</h2>
|
||||
<p>หากมีคำถามเกี่ยวกับเงื่อนไขการให้บริการ กรุณาติดต่อเราที่ contact@moreminimore.com หรือ 080-995-5945</p>
|
||||
</div>
|
||||
@@ -65,22 +65,21 @@ import PageHero from '../components/PageHero.astro';
|
||||
.legal-content { max-width: 800px; margin: 0 auto; }
|
||||
.legal-intro {
|
||||
font-size: 18px;
|
||||
color: var(--color-medium-gray);
|
||||
color: var(--color-gray-700);
|
||||
margin-bottom: 48px;
|
||||
line-height: 1.7;
|
||||
}
|
||||
.legal-section {
|
||||
margin-bottom: 48px;
|
||||
}
|
||||
.legal-section h2 {
|
||||
.legal-block { margin-bottom: 48px; }
|
||||
.legal-block h2 {
|
||||
font-family: var(--font-display);
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
font-weight: 800;
|
||||
margin-bottom: 20px;
|
||||
color: var(--color-black);
|
||||
}
|
||||
.legal-section p {
|
||||
.legal-block p {
|
||||
font-size: 16px;
|
||||
color: #444;
|
||||
color: var(--color-gray-700);
|
||||
line-height: 1.8;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user