Initial commit: Next.js + Payload CMS for moreminimore-redesign
- Next.js 16 App Router + Payload CMS 3.82 - PostgreSQL via @payloadcms/db-postgres - All pages: Home, Services (4), About, Portfolio, Blog, Contact, FAQ - PDPA: CookieBanner, ConsentLogs API, Privacy Policy, Terms, Cookie Policy - SEO: sitemap, robots.txt, metadata exports, JSON-LD
This commit is contained in:
Kunthawat
200
src/app/(frontend)/faq/page.tsx
Normal file
200
src/app/(frontend)/faq/page.tsx
Normal file
@@ -0,0 +1,200 @@
|
||||
'use client'
|
||||
|
||||
import { useState } from 'react'
|
||||
|
||||
interface FAQItem {
|
||||
q: string
|
||||
a: string
|
||||
}
|
||||
|
||||
interface FAQCategory {
|
||||
category: string
|
||||
questions: FAQItem[]
|
||||
}
|
||||
|
||||
const faqs: FAQCategory[] = [
|
||||
{
|
||||
category: 'บริการ',
|
||||
questions: [
|
||||
{
|
||||
q: 'AI-Enhanced Website ต่างจากเว็บไซต์ทั่วไปอย่างไร?',
|
||||
a: 'AI-Enhanced Website จะผสาน AI Chatbot ที่ตอบคำถามลูกค้าอัตโนมัติ 24/7 พร้อมระบบ SEO ที่ช่วยให้เว็บติดอันดับ Google ได้ง่ายขึ้น และมีระบบวิเคราะห์พฤติกรรมผู้ใช้งานเพื่อปรับปรุงเว็บไซต์อย่างต่อเนื่อง'
|
||||
},
|
||||
{
|
||||
q: 'Marketing Automation ช่วยธุรกิจฉันได้อย่างไร?',
|
||||
a: 'ระบบจะช่วยให้คุณสื่อสารกับลูกค้าโดยอัตโนมัติ ผ่านหลายช่องทางเช่น LINE OA, Facebook Messenger, Email ช่วยลดงานซ้ำซ้อน เพิ่มการตอบสนองที่รวดเร็ว และติดตามผลการตลาดได้อย่างแม่นยำ'
|
||||
},
|
||||
{
|
||||
q: 'SEO + AI Content System ทำงานอย่างไร?',
|
||||
a: 'เราใช้ AI วิจัย Keyword ที่มีศักยภาพ สร้างคอนเทนต์คุณภาพที่ตรงใจกลุ่มเป้าหมาย และปรับแต่งให้ถูกใจ Google ช่วยให้เว็บติดอันดับการค้นหาอย่างยั่งยืน'
|
||||
},
|
||||
{
|
||||
q: 'Tech Consult จำเป็นสำหรับธุรกิจฉันไหม?',
|
||||
a: 'หากคุณกำลังวางแผนใช้เทคโนโลยีใหม่ ขยายระบบ หรือต้องการเลือกเครื่องมือที่เหมาะสมกับธุรกิจ การปรึกษาก่อนเริ่มโครงการจะช่วยประหยัดเวลาและงบประมาณได้มาก'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
category: 'กระบวนการทำงาน',
|
||||
questions: [
|
||||
{
|
||||
q: 'เริ่มต้นใช้บริการอย่างไร?',
|
||||
a: 'ติดต่อเราเพื่อคุยกันและให้คำปรึกษาฟรี! เราจะพูดคุยความต้องการ ธุรกิจ และเป้าหมายของคุณ จากนั้นจึงแนะนำโซลูชันที่เหมาะสมที่สุด'
|
||||
},
|
||||
{
|
||||
q: 'ใช้เวลานานแค่ไหนถึงจะเห็นผล?',
|
||||
a: 'ขึ้นอยู่กับบริการ: เว็บไซต์ใช้เวลา 2-6 สัปดาห์, Marketing Automation เห็นผลใน 1-3 เดือน, SEO ใช้เวลา 3-6 เดือนในการติดอันดับ'
|
||||
},
|
||||
{
|
||||
q: 'มีบริการหลังการขายไหม?',
|
||||
a: 'มี! เราดูแลหลังการติดตั้ง อบรมการใช้งาน และพร้อมให้คำปรึกษาเมื่อคุณต้องการ'
|
||||
},
|
||||
{
|
||||
q: 'ต้องมีความรู้ทางเทคนิคไหม?',
|
||||
a: 'ไม่จำเป็น! เราดูแลทุกอย่างตั้งแต่ต้นจนจบ และอบรมทีมของคุณให้ใช้งานระบบได้อย่างมั่นใจ'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
category: 'ราคาและการชำระเงิน',
|
||||
questions: [
|
||||
{
|
||||
q: 'มี Package ไหนบ้าง?',
|
||||
a: 'เรามีหลาย Package ตั้งแต่เริ่มต้นหลักพัน ไปจนถึงโครงการใหญ่ ขึ้นอยู่กับความต้องการและขอบเขตงาน นอกจากนี้ยังมีบริการที่คิดเป็นรายเดือน (ที่ปรึกษา) ที่จะช่วยพัฒนาระบบได้เรื่อย ๆ ไม่จำกัดด้วย โดยราคาจะขึ้นอยู่กับขอบเขตและความยากของงาน เหมาะสำหรับลูกค้าที่มีความต้องการเปลี่ยนแปลงตลอดเวลา'
|
||||
},
|
||||
{
|
||||
q: 'มีบริการแบบรายเดือนไหม?',
|
||||
a: 'มี! บริการบางอย่างเช่น SEO, Marketing Automation มีแบบรายเดือน ซึ่งรวมถึงการดูแลอย่างต่อเนื่องและปรับปรุงระบบ'
|
||||
},
|
||||
{
|
||||
q: 'ชำระเงินได้อย่างไร?',
|
||||
a: 'รับชำระเงินผ่านการโอนเงินธนาคาร บริษัทออกใบเสร็จและใบกำกับภาษีให้ได้'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
category: 'เทคนิคและการรองรับ',
|
||||
questions: [
|
||||
{
|
||||
q: 'เว็บไซต์รองรับมือถือไหม?',
|
||||
a: 'รองรับ 100%! ทุกเว็บไซต์ที่เราทำเป็น Responsive Design แสดงผลสวยงามทั้งบนมือถือ แท็บเล็ต และคอมพิวเตอร์'
|
||||
},
|
||||
{
|
||||
q: 'มี Warranty ไหม?',
|
||||
a: 'มี! เราให้ Warranty สำหรับ bug และ error ที่เกิดจากระบบของเรา ตลอดอายุสัญญา'
|
||||
},
|
||||
{
|
||||
q: 'ถ้ามีปัญหาต้องทำอย่างไร?',
|
||||
a: 'ติดต่อเราได้หลายช่องทาง: โทรศัพท์, LINE, Email เราจะตอบกลับภายใน 24 ชั่วโมงทำการ'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
export default function FAQPage() {
|
||||
const [openItems, setOpenItems] = useState<Record<string, boolean>>({})
|
||||
|
||||
const toggleItem = (category: string, index: number) => {
|
||||
const key = `${category}-${index}`
|
||||
setOpenItems(prev => ({
|
||||
...prev,
|
||||
[key]: !prev[key]
|
||||
}))
|
||||
}
|
||||
|
||||
return (
|
||||
<main className="flex-grow">
|
||||
{/* Hero Section */}
|
||||
<section className="py-20 bg-gradient-to-br from-purple-600 via-indigo-600 to-purple-800 relative overflow-hidden">
|
||||
{/* Floating Shapes */}
|
||||
<div className="absolute top-20 left-10 w-72 h-72 bg-white/20 rounded-full blur-3xl animate-float-1"></div>
|
||||
<div className="absolute bottom-20 right-10 w-96 h-96 bg-purple-300/20 rounded-full blur-3xl animate-float-2"></div>
|
||||
<div className="absolute top-1/3 left-1/4 w-48 h-48 bg-white/10 rounded-full blur-2xl animate-float-3"></div>
|
||||
|
||||
{/* Grid Pattern */}
|
||||
<div className="absolute inset-0 opacity-[0.03]" style={{ backgroundImage: 'linear-gradient(white 1px, transparent 1px), linear-gradient(90deg, white 1px, transparent 1px)', backgroundSize: '50px 50px' }}></div>
|
||||
|
||||
<div className="container mx-auto px-4 relative z-10">
|
||||
<div className="max-w-4xl mx-auto text-center">
|
||||
<h1 className="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 text-white leading-tight">
|
||||
คำถามที่พบบ่อย
|
||||
</h1>
|
||||
<p className="text-lg md:text-xl text-white/80 max-w-2xl mx-auto">
|
||||
รวบรวมคำถามที่ลูกค้าถามบ่อย พร้อมคำตอบที่ชัดเจน
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* FAQ Content */}
|
||||
<section className="py-20 bg-gradient-to-b from-gray-50 to-white">
|
||||
<div className="container mx-auto px-4">
|
||||
{faqs.map((category) => (
|
||||
<div key={category.category} className="max-w-4xl mx-auto mb-12">
|
||||
<h2 className="text-2xl font-bold mb-6 text-purple-700 flex items-center gap-3">
|
||||
<span className="w-2 h-8 bg-purple-600 rounded-full"></span>
|
||||
{category.category}
|
||||
</h2>
|
||||
<div className="space-y-4">
|
||||
{category.questions.map((faq, index) => {
|
||||
const key = `${category.category}-${index}`
|
||||
const isOpen = openItems[key]
|
||||
return (
|
||||
<div
|
||||
key={key}
|
||||
className="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition-all duration-300"
|
||||
>
|
||||
<button
|
||||
onClick={() => toggleItem(category.category, index)}
|
||||
className="flex justify-between items-center cursor-pointer p-6 font-bold text-lg text-gray-900 hover:bg-purple-50 transition w-full text-left"
|
||||
>
|
||||
<span>{faq.q}</span>
|
||||
<svg
|
||||
className={`w-5 h-5 text-purple-700 transition transform ${isOpen ? 'rotate-45' : ''}`}
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
|
||||
</svg>
|
||||
</button>
|
||||
{isOpen && (
|
||||
<div className="px-6 pb-6 text-gray-700 leading-relaxed border-t border-gray-100 pt-4">
|
||||
{faq.a}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
||||
{/* CTA Section */}
|
||||
<div className="max-w-3xl mx-auto text-center mt-16 py-12 bg-primary rounded-2xl">
|
||||
<h2 className="text-2xl md:text-3xl font-bold mb-4 text-black">
|
||||
ยังมีคำถามอื่นอีก?
|
||||
</h2>
|
||||
<p className="text-lg text-gray-800 mb-8">
|
||||
ติดต่อเรามาได้เลย ยินดีให้คำปรึกษาฟรี!
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<a href="tel:0809955945" className="bg-black text-primary px-8 py-4 rounded-full font-bold text-lg hover:bg-gray-900 transition-colors inline-flex items-center justify-center">
|
||||
<svg className="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path>
|
||||
</svg>
|
||||
080-995-5945
|
||||
</a>
|
||||
<a href="/contact-us" className="bg-white text-black px-8 py-4 rounded-full font-bold text-lg hover:bg-gray-100 transition-colors inline-flex items-center justify-center">
|
||||
<svg className="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path>
|
||||
</svg>
|
||||
ติดต่อเรา
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user