Phase 1: Homepage seamless design - add gradient transitions
- Added gradient transitions between sections in global.css - Portfolio section now has gradient-top (dark to white fade) - Blog section now has gradient-bottom (white fade from dark) - Reduced portfolio overlay opacity from 0.85 to 0.65 - Added border to blog cards for white-on-white visibility - Blog cards now have primary color accent on hover
This commit is contained in:
Kunthawat Greethong
@@ -1,107 +1,66 @@
|
||||
---
|
||||
import Base from '../layouts/Base.astro';
|
||||
import Navigation from '../components/Navigation.astro';
|
||||
import Hero from '../components/Hero.astro';
|
||||
import Footer from '../components/Footer.astro';
|
||||
import PageHero from '../components/PageHero.astro';
|
||||
|
||||
const faqItems = [
|
||||
const faqData = [
|
||||
{
|
||||
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 หรือร้านค้าออนไลน์ได้"
|
||||
}
|
||||
icon: "🎯",
|
||||
items: [
|
||||
{ q: "บริการของเรามีอะไรบ้าง?", a: "เราให้บริการ รับทำเว็บไซต์, Marketing Automation, AI Automation และ Technology Consult สำหรับธุรกิจไทย" },
|
||||
{ q: "สามารถปรับแต่งงานตามความต้องการได้ไหม?", a: "ใช่! เราออกแบบโซลูชันที่เหมาะกับความต้องการเฉพาะของแต่ละธุรกิจ" },
|
||||
]
|
||||
},
|
||||
{
|
||||
category: "ราคา",
|
||||
questions: [
|
||||
{
|
||||
q: "ราคาเริ่มต้นของการทำเว็บไซต์เท่าไหร่?",
|
||||
a: "ราคาเริ่มต้นอยู่ที่ 15,000 บาท ขึ้นอยู่กับความซับซ้อนและฟีเจอร์ที่ต้องการ เราจะประเมินและเสนอราคาหลังจากการปรึกษาฟรี"
|
||||
},
|
||||
{
|
||||
q: "มี包月 หรือรายปีไหม?",
|
||||
a: "มี เรามีแพ็คเกจรายเดือนสำหรับบริการดูแลเว็บไซต์และ Marketing Automation ที่เริ่มต้นที่ 2,500 บาท/เดือน"
|
||||
},
|
||||
{
|
||||
q: "ชำระเงินแบบไหนได้บ้าง?",
|
||||
a: "เรารองรับการชำระเงินผ่าน PromptPay และโอนเงินผ่านธนาคาร สำหรับโปรเจกต์ใหญ่สามารถผ่อนชำระได้"
|
||||
}
|
||||
icon: "💰",
|
||||
items: [
|
||||
{ q: "ราคาเริ่มต้นเท่าไหร่?", a: "ราคาขึ้นอยู่กับความต้องการและขอบเขตของโปรเจกต์ ติดต่อเราเพื่อรับใบเสนอราคาฟรี" },
|
||||
{ q: "มี package สำเร็จรูปไหม?", a: "มี เรามี package สำหรับลูกค้าที่ต้องการโซลูชันที่ครบถ้วนและราคาคุ้มค่า" },
|
||||
]
|
||||
},
|
||||
{
|
||||
category: "ระยะเวลา",
|
||||
questions: [
|
||||
{
|
||||
q: "ใช้เวลาสร้างเว็บไซต์นานแค่ไหน?",
|
||||
a: "เว็บไซต์ทั่วไปใช้เวลา 2-4 สัปดาห์ ระบบที่ซับซ้อนอาจใช้เวลา 1-2 เดือน ขึ้นอยู่กับความต้องการและขนาดของโปรเจกต์"
|
||||
},
|
||||
{
|
||||
q: "เริ่มต้นทำงานได้เร็วแค่ไหน?",
|
||||
a: "หลังจากตกลงรายละเอียดและชำระเงินมัดจำแล้ว เราสามารถเริ่มงานได้ภายใน 3-5 วันทำการ"
|
||||
}
|
||||
icon: "⏱️",
|
||||
items: [
|
||||
{ q: "ใช้เวลาพัฒนานานแค่ไหน?", a: "ขึ้นอยู่กับความซับซ้อนของโปรเจกต์ เว็บไซต์มาตรฐาน 2-4 สัปดาห์, ระบบซับซ้อนอาจใช้ 1-3 เดือน" },
|
||||
]
|
||||
},
|
||||
{
|
||||
category: "การสนับสนุน",
|
||||
questions: [
|
||||
{
|
||||
q: "หลังสร้างเว็บเสร็จแล้ว มีบริการดูแลไหม?",
|
||||
a: "มี เรามีทีมดูแลที่พร้อมช่วยเหลือทั้งการแก้ไขปัญหา อัปเดตเนื้อหา และปรับปรุงระบบตามต้องการ"
|
||||
},
|
||||
{
|
||||
q: "ถ้าเว็บมีปัญหา ติดต่อได้อย่างไร?",
|
||||
a: "สามารถติดต่อเราผ่าน LINE, โทรศัพท์ 080-995-5945 หรืออีเมล contact@moreminimore.com เรามีทีมพร้อมรับมือกับปัญหาฉุกเฉิน"
|
||||
},
|
||||
{
|
||||
q: "มีการรับประกันผลงานไหม?",
|
||||
a: "เรารับประกันงาน 30 วันหลังส่งมอบ หากมีปัญหาจากการทำงานของเรา เราจะแก้ไขให้ฟรี"
|
||||
}
|
||||
category: "ทั่วไป",
|
||||
icon: "💬",
|
||||
items: [
|
||||
{ q: "มีการรับประกันผลงานไหม?", a: "เรารับประกันคุณภาพ หากไม่พอใจเราพร้อมแก้ไขจนกว่าจะถูกใจ" },
|
||||
{ q: "หลังส่งมอบงานแล้วมี after service ไหม?", a: "มี เราให้บริการดูแลและ support หลังการขายตลอด 24 ชม." },
|
||||
]
|
||||
}
|
||||
},
|
||||
];
|
||||
---
|
||||
|
||||
<Base title="คำถามที่พบบ่อย | MoreminiMore">
|
||||
<Base title="คำถามที่พบบ่อย | MoreminiMore - รับทำเว็บไซต์ SEO AI Chatbot">
|
||||
<Navigation />
|
||||
|
||||
<Hero
|
||||
<PageHero
|
||||
badge="FAQ"
|
||||
title="คำถามที่พบบ่อย"
|
||||
subtitle="หาคำตอบสำหรับคำถามที่พบบ่อยเกี่ยวกับบริการของเรา"
|
||||
badge="FAQ"
|
||||
image="/images/hero/tech-consult.jpg"
|
||||
theme="yellow"
|
||||
showCTA={false}
|
||||
variant="centered"
|
||||
size="compact"
|
||||
/>
|
||||
|
||||
<main class="faq-page">
|
||||
|
||||
<!-- FAQ Section -->
|
||||
<section class="section faq-section">
|
||||
<div class="container">
|
||||
<div class="faq-content">
|
||||
{faqItems.map((category, catIndex) => (
|
||||
<section class="faq-category">
|
||||
{faqData.map(cat => (
|
||||
<div class="faq-category">
|
||||
<h2 class="category-title">
|
||||
<span class="category-icon">
|
||||
{category.category === "บริการ" ? "🎯" :
|
||||
category.category === "ราคา" ? "💰" :
|
||||
category.category === "ระยะเวลา" ? "⏱️" : "💬"}
|
||||
</span>
|
||||
{category.category}
|
||||
<span class="category-icon">{cat.icon}</span>
|
||||
{cat.category}
|
||||
</h2>
|
||||
<div class="faq-list">
|
||||
{category.questions.map((item, qIndex) => (
|
||||
<div class="faq-item" data-item={`${catIndex}-${qIndex}`}>
|
||||
{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>
|
||||
@@ -112,20 +71,25 @@ const faqItems = [
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
))}
|
||||
</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>
|
||||
</section>
|
||||
|
||||
<!-- CTA Section -->
|
||||
<section class="section section-primary 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-secondary btn-lg">ติดต่อเรา</a>
|
||||
<a href="tel:0809955945" class="btn btn-outline-dark btn-lg">080-995-5945</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<Footer />
|
||||
</Base>
|
||||
@@ -133,32 +97,25 @@ const faqItems = [
|
||||
<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');
|
||||
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');
|
||||
});
|
||||
|
||||
// Open clicked if it was closed
|
||||
if (!isOpen) {
|
||||
item.classList.add('open');
|
||||
if (answer) answer.style.maxHeight = answer.scrollHeight + 'px';
|
||||
if (answer) (answer as HTMLElement).style.maxHeight = answer.scrollHeight + 'px';
|
||||
if (icon) icon.textContent = '−';
|
||||
if (question) question.setAttribute('aria-expanded', 'true');
|
||||
if (question) (question as HTMLElement).setAttribute('aria-expanded', 'true');
|
||||
}
|
||||
});
|
||||
});
|
||||
@@ -166,53 +123,9 @@ const faqItems = [
|
||||
</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;
|
||||
}
|
||||
|
||||
.faq-section { background: var(--color-white); }
|
||||
.faq-content { max-width: 800px; margin: 0 auto; }
|
||||
.faq-category { margin-bottom: 60px; }
|
||||
.category-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -224,34 +137,17 @@ const faqItems = [
|
||||
padding-bottom: 16px;
|
||||
border-bottom: 2px solid var(--color-primary);
|
||||
}
|
||||
|
||||
.category-icon {
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.faq-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.category-icon { font-size: 28px; }
|
||||
.faq-list { display: flex; flex-direction: column; gap: 12px; }
|
||||
.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;
|
||||
border: 1px solid rgba(0,0,0,0.08);
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.faq-item:hover {
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.faq-item.open {
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
|
||||
.faq-item:hover { box-shadow: 0 4px 20px rgba(0,0,0,0.08); }
|
||||
.faq-item.open { border-color: var(--color-primary); }
|
||||
.faq-question {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
@@ -267,25 +163,14 @@ const faqItems = [
|
||||
font-weight: 600;
|
||||
color: var(--color-black);
|
||||
}
|
||||
|
||||
.question-text {
|
||||
flex: 1;
|
||||
padding-right: 16px;
|
||||
}
|
||||
|
||||
.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 { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
|
||||
.faq-answer p {
|
||||
padding: 0 24px 24px;
|
||||
font-size: 15px;
|
||||
@@ -293,49 +178,32 @@ const faqItems = [
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.faq-cta {
|
||||
text-align: center;
|
||||
padding: 60px;
|
||||
background: var(--color-light-gray);
|
||||
border-radius: 20px;
|
||||
margin-top: 60px;
|
||||
.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;
|
||||
color: var(--color-black);
|
||||
}
|
||||
|
||||
.faq-cta h3 {
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 12px;
|
||||
.cta-desc {
|
||||
font-size: 18px;
|
||||
color: rgba(0,0,0,0.7);
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.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;
|
||||
.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);
|
||||
}
|
||||
.btn-outline-dark:hover { background: var(--color-black); color: var(--color-white); }
|
||||
.btn-lg { padding: 16px 36px; font-size: 16px; }
|
||||
|
||||
@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;
|
||||
}
|
||||
.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; }
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user