Before EmDash migration - plain Astro site with 22 pages, unique hero layouts per page, Thai content
This commit is contained in:
Kunthawat Greethong
341
src/pages/faq.astro
Normal file
341
src/pages/faq.astro
Normal file
@@ -0,0 +1,341 @@
|
||||
---
|
||||
import Base from '../layouts/Base.astro';
|
||||
import Navigation from '../components/Navigation.astro';
|
||||
import Hero from '../components/Hero.astro';
|
||||
import Footer from '../components/Footer.astro';
|
||||
|
||||
const faqItems = [
|
||||
{
|
||||
category: "บริการ",
|
||||
questions: [
|
||||
{
|
||||
q: "MoreminiMore ให้บริการอะไรบ้าง?",
|
||||
a: "เราให้บริการ 4 ประเภทหลัก: พัฒนาเว็บไซต์, Marketing Automation, AI Automation และ Tech Consult สำหรับธุรกิจไทย"
|
||||
},
|
||||
{
|
||||
q: "สามารถสั่งทำเว็บไซต์เฉพาะประเภทได้ไหม?",
|
||||
a: "ได้ เราสามารถพัฒนาเว็บไซต์ได้ทุกประเภท ไม่ว่าจะเป็นเว็บบริษัท เว็บขายของ เว็บ Landing Page หรือระบบ Web Application"
|
||||
},
|
||||
{
|
||||
q: "AI Chatbot สามารถทำอะไรได้บ้าง?",
|
||||
a: "AI Chatbot ของเราสามารถตอบคำถามลูกค้า รับออร์เดอร์ นัดหมาย และเชื่อมต่อกับระบบ CRM หรือร้านค้าออนไลน์ได้"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
category: "ราคา",
|
||||
questions: [
|
||||
{
|
||||
q: "ราคาเริ่มต้นของการทำเว็บไซต์เท่าไหร่?",
|
||||
a: "ราคาเริ่มต้นอยู่ที่ 15,000 บาท ขึ้นอยู่กับความซับซ้อนและฟีเจอร์ที่ต้องการ เราจะประเมินและเสนอราคาหลังจากการปรึกษาฟรี"
|
||||
},
|
||||
{
|
||||
q: "มี包月 หรือรายปีไหม?",
|
||||
a: "มี เรามีแพ็คเกจรายเดือนสำหรับบริการดูแลเว็บไซต์และ Marketing Automation ที่เริ่มต้นที่ 2,500 บาท/เดือน"
|
||||
},
|
||||
{
|
||||
q: "ชำระเงินแบบไหนได้บ้าง?",
|
||||
a: "เรารองรับการชำระเงินผ่าน PromptPay และโอนเงินผ่านธนาคาร สำหรับโปรเจกต์ใหญ่สามารถผ่อนชำระได้"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
category: "ระยะเวลา",
|
||||
questions: [
|
||||
{
|
||||
q: "ใช้เวลาสร้างเว็บไซต์นานแค่ไหน?",
|
||||
a: "เว็บไซต์ทั่วไปใช้เวลา 2-4 สัปดาห์ ระบบที่ซับซ้อนอาจใช้เวลา 1-2 เดือน ขึ้นอยู่กับความต้องการและขนาดของโปรเจกต์"
|
||||
},
|
||||
{
|
||||
q: "เริ่มต้นทำงานได้เร็วแค่ไหน?",
|
||||
a: "หลังจากตกลงรายละเอียดและชำระเงินมัดจำแล้ว เราสามารถเริ่มงานได้ภายใน 3-5 วันทำการ"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
category: "การสนับสนุน",
|
||||
questions: [
|
||||
{
|
||||
q: "หลังสร้างเว็บเสร็จแล้ว มีบริการดูแลไหม?",
|
||||
a: "มี เรามีทีมดูแลที่พร้อมช่วยเหลือทั้งการแก้ไขปัญหา อัปเดตเนื้อหา และปรับปรุงระบบตามต้องการ"
|
||||
},
|
||||
{
|
||||
q: "ถ้าเว็บมีปัญหา ติดต่อได้อย่างไร?",
|
||||
a: "สามารถติดต่อเราผ่าน LINE, โทรศัพท์ 080-995-5945 หรืออีเมล contact@moreminimore.com เรามีทีมพร้อมรับมือกับปัญหาฉุกเฉิน"
|
||||
},
|
||||
{
|
||||
q: "มีการรับประกันผลงานไหม?",
|
||||
a: "เรารับประกันงาน 30 วันหลังส่งมอบ หากมีปัญหาจากการทำงานของเรา เราจะแก้ไขให้ฟรี"
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
---
|
||||
|
||||
<Base title="คำถามที่พบบ่อย | MoreminiMore">
|
||||
<Navigation />
|
||||
|
||||
<Hero
|
||||
title="คำถามที่พบบ่อย"
|
||||
subtitle="หาคำตอบสำหรับคำถามที่พบบ่อยเกี่ยวกับบริการของเรา"
|
||||
badge="FAQ"
|
||||
image="/images/hero/tech-consult.jpg"
|
||||
theme="yellow"
|
||||
showCTA={false}
|
||||
variant="centered"
|
||||
size="compact"
|
||||
/>
|
||||
|
||||
<main class="faq-page">
|
||||
|
||||
<div class="faq-content">
|
||||
{faqItems.map((category, catIndex) => (
|
||||
<section class="faq-category">
|
||||
<h2 class="category-title">
|
||||
<span class="category-icon">
|
||||
{category.category === "บริการ" ? "🎯" :
|
||||
category.category === "ราคา" ? "💰" :
|
||||
category.category === "ระยะเวลา" ? "⏱️" : "💬"}
|
||||
</span>
|
||||
{category.category}
|
||||
</h2>
|
||||
<div class="faq-list">
|
||||
{category.questions.map((item, qIndex) => (
|
||||
<div class="faq-item" data-item={`${catIndex}-${qIndex}`}>
|
||||
<button class="faq-question" aria-expanded="false">
|
||||
<span class="question-text">{item.q}</span>
|
||||
<span class="faq-icon">+</span>
|
||||
</button>
|
||||
<div class="faq-answer">
|
||||
<p>{item.a}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<section class="faq-cta">
|
||||
<h3>ยังมีคำถามอื่น?</h3>
|
||||
<p>ติดต่อเราได้โดยตรง เราพร้อมตอบทุกคำถาม</p>
|
||||
<div class="cta-buttons">
|
||||
<a href="/contact" class="btn btn-primary">ติดต่อเรา</a>
|
||||
<a href="tel:0809955945" class="btn btn-secondary">080-995-5945</a>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<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');
|
||||
|
||||
// Close all
|
||||
faqItems.forEach(faq => {
|
||||
faq.classList.remove('open');
|
||||
const faqAnswer = faq.querySelector('.faq-answer');
|
||||
const faqIcon = faq.querySelector('.faq-icon');
|
||||
if (faqAnswer) faqAnswer.style.maxHeight = '0';
|
||||
if (faqIcon) faqIcon.textContent = '+';
|
||||
const faqQuestion = faq.querySelector('.faq-question');
|
||||
if (faqQuestion) faqQuestion.setAttribute('aria-expanded', 'false');
|
||||
});
|
||||
|
||||
// Open clicked if it was closed
|
||||
if (!isOpen) {
|
||||
item.classList.add('open');
|
||||
if (answer) answer.style.maxHeight = answer.scrollHeight + 'px';
|
||||
if (icon) icon.textContent = '−';
|
||||
if (question) question.setAttribute('aria-expanded', 'true');
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.faq-page {
|
||||
padding: 120px 0 80px;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.faq-header {
|
||||
text-align: center;
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
|
||||
.section-badge {
|
||||
display: inline-block;
|
||||
background: var(--color-primary);
|
||||
color: var(--color-black);
|
||||
padding: 6px 16px;
|
||||
border-radius: 20px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
font-family: var(--font-heading);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.faq-title {
|
||||
font-size: clamp(36px, 5vw, 56px);
|
||||
font-weight: 800;
|
||||
color: var(--color-black);
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.faq-desc {
|
||||
font-size: 18px;
|
||||
color: var(--color-medium-gray);
|
||||
max-width: 500px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.faq-content {
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.faq-category {
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
|
||||
.category-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
color: var(--color-black);
|
||||
margin-bottom: 24px;
|
||||
padding-bottom: 16px;
|
||||
border-bottom: 2px solid var(--color-primary);
|
||||
}
|
||||
|
||||
.category-icon {
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.faq-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.faq-item {
|
||||
background: var(--color-white);
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
|
||||
border: 1px solid #eee;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.faq-item:hover {
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.faq-item.open {
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
|
||||
.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);
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: var(--color-black);
|
||||
}
|
||||
|
||||
.question-text {
|
||||
flex: 1;
|
||||
padding-right: 16px;
|
||||
}
|
||||
|
||||
.faq-icon {
|
||||
font-size: 24px;
|
||||
color: var(--color-primary);
|
||||
font-weight: 300;
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
|
||||
.faq-answer {
|
||||
max-height: 0;
|
||||
overflow: hidden;
|
||||
transition: max-height 0.3s ease;
|
||||
}
|
||||
|
||||
.faq-answer p {
|
||||
padding: 0 24px 24px;
|
||||
font-size: 15px;
|
||||
line-height: 1.8;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.faq-cta {
|
||||
text-align: center;
|
||||
padding: 60px;
|
||||
background: var(--color-light-gray);
|
||||
border-radius: 20px;
|
||||
margin-top: 60px;
|
||||
}
|
||||
|
||||
.faq-cta h3 {
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.faq-cta p {
|
||||
font-size: 16px;
|
||||
color: var(--color-medium-gray);
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.cta-buttons {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.faq-question {
|
||||
padding: 16px 20px;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.faq-answer p {
|
||||
padding: 0 20px 20px;
|
||||
}
|
||||
|
||||
.faq-cta {
|
||||
padding: 40px 24px;
|
||||
}
|
||||
|
||||
.cta-buttons {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user