feat: Phase 2-3 - Add Breadcrumbs, Sitemap, FAQ, Portfolio pages
New Pages: - /sitemap - XML-style sitemap with all pages - /faq - 12 FAQs in 4 categories (Services, Process, Pricing, Technical) - /portfolio - 5 case studies (E-commerce, Clinic, School, Restaurant, Law Firm) Components: - Breadcrumbs.astro - Reusable breadcrumb component Navigation: - Update menu to Option A (หน้าแรก, เกี่ยวกับเรา, บริการ dropdown, FAQ, บทความ, ติดต่อเรา) - Add dropdown for 5 services - Change CTA button to btn-brand Color Updates: - Add Royal Blue (#1e40af) as secondary brand color - Fix gradient-primary text contrast
This commit is contained in:
Kunthawat Greethong
85
src/components/Breadcrumbs.astro
Normal file
85
src/components/Breadcrumbs.astro
Normal file
@@ -0,0 +1,85 @@
|
||||
---
|
||||
export async function getStaticPaths() {
|
||||
// Define all pages with their titles
|
||||
const pages = [
|
||||
{ href: '/', title: 'หน้าแรก' },
|
||||
{ href: '/about-us', title: 'เกี่ยวกับเรา' },
|
||||
{ href: '/contact-us', title: 'ติดต่อเรา' },
|
||||
{ href: '/web-development', title: 'AI-Enhanced Website' },
|
||||
{ href: '/marketing-automation', title: 'Marketing Automation' },
|
||||
{ href: '/seo-content-system', title: 'SEO + AI Content' },
|
||||
{ href: '/tech-consult', title: 'Tech Consult' },
|
||||
{ href: '/ai-automation', title: 'AI Automation' },
|
||||
{ href: '/faq', title: 'FAQ' },
|
||||
{ href: '/blog', title: 'บทความ' },
|
||||
];
|
||||
|
||||
return pages.map((page) => ({
|
||||
params: { currentPage: page.href },
|
||||
props: { currentPage: page },
|
||||
}));
|
||||
}
|
||||
|
||||
interface Props {
|
||||
currentPage: { href: string; title: string };
|
||||
}
|
||||
|
||||
const { currentPage } = Astro.props;
|
||||
|
||||
// Helper function to determine breadcrumb path
|
||||
function getBreadcrumbPath(href: string) {
|
||||
if (href === '/') return [{ href: '/', title: 'หน้าแรก' }];
|
||||
|
||||
const paths = href.split('/').filter(Boolean);
|
||||
const breadcrumb = [{ href: '/', title: 'หน้าแรก' }];
|
||||
|
||||
let accumulatedPath = '';
|
||||
for (const path of paths) {
|
||||
accumulatedPath += '/' + path;
|
||||
breadcrumb.push({
|
||||
href: accumulatedPath,
|
||||
title: pages.find(p => p.href === accumulatedPath)?.title || path,
|
||||
});
|
||||
}
|
||||
|
||||
return breadcrumb;
|
||||
}
|
||||
|
||||
const pages = [
|
||||
{ href: '/', title: 'หน้าแรก' },
|
||||
{ href: '/about-us', title: 'เกี่ยวกับเรา' },
|
||||
{ href: '/contact-us', title: 'ติดต่อเรา' },
|
||||
{ href: '/web-development', title: 'AI-Enhanced Website' },
|
||||
{ href: '/marketing-automation', title: 'Marketing Automation' },
|
||||
{ href: '/seo-content-system', title: 'SEO + AI Content' },
|
||||
{ href: '/tech-consult', title: 'Tech Consult' },
|
||||
{ href: '/ai-automation', title: 'AI Automation' },
|
||||
{ href: '/faq', title: 'FAQ' },
|
||||
{ href: '/blog', title: 'บทความ' },
|
||||
];
|
||||
|
||||
const breadcrumbPath = getBreadcrumbPath(currentPage.href);
|
||||
---
|
||||
|
||||
<nav class="bg-gray-50 border-b border-gray-200 py-3" aria-label="Breadcrumb">
|
||||
<div class="container mx-auto px-4">
|
||||
<ol class="flex items-center space-x-2 text-sm">
|
||||
{breadcrumbPath.map((item, index) => (
|
||||
<li class="flex items-center">
|
||||
{index > 0 && (
|
||||
<svg class="w-4 h-4 mx-2 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
)}
|
||||
{index === breadcrumbPath.length - 1 ? (
|
||||
<span class="text-primary font-semibold" aria-current="page">{item.title}</span>
|
||||
) : (
|
||||
<a href={item.href} class="text-gray-600 hover:text-primary transition">
|
||||
{item.title}
|
||||
</a>
|
||||
)}
|
||||
</li>
|
||||
))}
|
||||
</ol>
|
||||
</div>
|
||||
</nav>
|
||||
@@ -82,12 +82,32 @@ const { title = 'MoreminiMore - ที่ปรึกษาองค์กร AI
|
||||
</a>
|
||||
|
||||
<nav class="hidden md:flex gap-6 items-center">
|
||||
<a href="/#services" class="hover:text-accent-blue transition font-medium">บริการ</a>
|
||||
<a href="/#process" class="hover:text-accent-blue transition font-medium">กระบวนการ</a>
|
||||
<a href="/" class="hover:text-accent-blue transition font-medium">หน้าแรก</a>
|
||||
<a href="/about-us" class="hover:text-accent-blue transition font-medium">เกี่ยวกับเรา</a>
|
||||
|
||||
<!-- Services Dropdown -->
|
||||
<div class="relative group">
|
||||
<button class="hover:text-accent-blue transition font-medium flex items-center gap-1">
|
||||
บริการ
|
||||
<svg class="w-4 h-4 transition group-hover:rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
|
||||
</svg>
|
||||
</button>
|
||||
<div class="absolute left-0 mt-2 w-64 bg-white rounded-lg shadow-xl opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50">
|
||||
<div class="py-2">
|
||||
<a href="/web-development" class="block px-4 py-2 hover:bg-gray-50 transition">🌐 AI-Enhanced Website</a>
|
||||
<a href="/marketing-automation" class="block px-4 py-2 hover:bg-gray-50 transition">🔄 Marketing Automation</a>
|
||||
<a href="/seo-content-system" class="block px-4 py-2 hover:bg-gray-50 transition">📝 SEO + AI Content</a>
|
||||
<a href="/tech-consult" class="block px-4 py-2 hover:bg-gray-50 transition">🖥️ Tech Consult</a>
|
||||
<a href="/ai-automation" class="block px-4 py-2 hover:bg-gray-50 transition">⚙️ AI Automation</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a href="/faq" class="hover:text-accent-blue transition font-medium">FAQ</a>
|
||||
<a href="/blog" class="hover:text-accent-blue transition font-medium">บทความ</a>
|
||||
<a href="/contact-us" class="hover:text-accent-blue transition font-medium">ติดต่อเรา</a>
|
||||
<a href="/about-us" class="hover:text-accent-blue transition font-medium">เกี่ยวกับเรา</a>
|
||||
<a href="tel:0809955945" class="bg-black text-white px-6 py-2 rounded-full hover:bg-gray-800 transition font-medium flex items-center gap-2">
|
||||
<a href="tel:0809955945" class="btn-brand flex items-center gap-2">
|
||||
📞 โทรเลย
|
||||
</a>
|
||||
</nav>
|
||||
@@ -103,14 +123,30 @@ const { title = 'MoreminiMore - ที่ปรึกษาองค์กร AI
|
||||
<!-- Mobile Menu -->
|
||||
<div class="md:hidden hidden" id="mobile-menu">
|
||||
<div class="flex flex-col gap-4 mt-4 pb-4">
|
||||
<a href="/#services" class="hover:text-accent-blue transition font-medium">บริการ</a>
|
||||
<a href="/#process" class="hover:text-accent-blue transition font-medium">กระบวนการ</a>
|
||||
<a href="/" class="hover:text-accent-blue transition font-medium">หน้าแรก</a>
|
||||
<a href="/about-us" class="hover:text-accent-blue transition font-medium">เกี่ยวกับเรา</a>
|
||||
|
||||
<!-- Mobile Services Dropdown -->
|
||||
<details class="group">
|
||||
<summary class="hover:text-accent-blue transition font-medium cursor-pointer flex items-center justify-between">
|
||||
บริการ
|
||||
<svg class="w-4 h-4 transition group-open:rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
|
||||
</svg>
|
||||
</summary>
|
||||
<div class="ml-4 mt-2 flex flex-col gap-2">
|
||||
<a href="/web-development" class="text-sm hover:text-accent-blue transition">🌐 AI-Enhanced Website</a>
|
||||
<a href="/marketing-automation" class="text-sm hover:text-accent-blue transition">🔄 Marketing Automation</a>
|
||||
<a href="/seo-content-system" class="text-sm hover:text-accent-blue transition">📝 SEO + AI Content</a>
|
||||
<a href="/tech-consult" class="text-sm hover:text-accent-blue transition">🖥️ Tech Consult</a>
|
||||
<a href="/ai-automation" class="text-sm hover:text-accent-blue transition">⚙️ AI Automation</a>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<a href="/faq" class="hover:text-accent-blue transition font-medium">FAQ</a>
|
||||
<a href="/blog" class="hover:text-accent-blue transition font-medium">บทความ</a>
|
||||
<a href="/contact-us" class="hover:text-accent-blue transition font-medium">ติดต่อเรา</a>
|
||||
<a href="/about-us" class="hover:text-accent-blue transition font-medium">เกี่ยวกับเรา</a>
|
||||
<a href="tel:0809955945" class="bg-black text-white px-6 py-2 rounded-full hover:bg-gray-800 transition font-medium text-center flex items-center justify-center gap-2">
|
||||
📞 โทรเลย
|
||||
</a>
|
||||
<a href="tel:0809955945" class="btn-brand text-center">📞 โทรเลย</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
136
src/pages/faq.astro
Normal file
136
src/pages/faq.astro
Normal file
@@ -0,0 +1,136 @@
|
||||
---
|
||||
import Layout from '../layouts/Layout.astro'
|
||||
import Breadcrumbs from '../components/Breadcrumbs.astro'
|
||||
|
||||
const faqs = [
|
||||
{
|
||||
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 ชั่วโมงทำการ'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
---
|
||||
|
||||
<Layout title="คำถามที่พบบ่อย | MoreminiMore">
|
||||
<Breadcrumbs currentPage={{ href: '/faq', title: 'คำถามที่พบบ่อย' }} />
|
||||
|
||||
<section class="py-20 bg-gradient-to-br from-yellow-50 to-white">
|
||||
<div class="container mx-auto px-4">
|
||||
<h1 class="text-4xl md:text-5xl font-bold text-center mb-8 text-secondary">
|
||||
คำถามที่พบบ่อย
|
||||
</h1>
|
||||
<p class="text-xl text-center text-gray-700 max-w-3xl mx-auto mb-12">
|
||||
รวบรวมคำถามที่ลูกค้าถามบ่อย พร้อมคำตอบที่ชัดเจน
|
||||
</p>
|
||||
|
||||
{faqs.map((category) => (
|
||||
<div class="max-w-4xl mx-auto mb-12">
|
||||
<h2 class="text-2xl font-bold mb-6 text-secondary flex items-center gap-3">
|
||||
<span class="w-2 h-8 bg-primary rounded-full"></span>
|
||||
{category.category}
|
||||
</h2>
|
||||
<div class="space-y-4">
|
||||
{category.questions.map((faq) => (
|
||||
<details class="group bg-white rounded-lg shadow-md overflow-hidden">
|
||||
<summary class="flex justify-between items-center cursor-pointer p-6 font-bold text-lg hover:bg-gray-50 transition">
|
||||
<span>{faq.q}</span>
|
||||
<span class="text-2xl group-open:rotate-45 transition">+</span>
|
||||
</summary>
|
||||
<div class="px-6 pb-6 text-gray-700 leading-relaxed">
|
||||
{faq.a}
|
||||
</div>
|
||||
</details>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
||||
<!-- CTA Section -->
|
||||
<div class="max-w-3xl mx-auto text-center mt-16">
|
||||
<h2 class="text-2xl font-bold mb-4 text-secondary">ยังมีคำถามอื่นอีก?</h2>
|
||||
<p class="text-lg text-gray-700 mb-8">
|
||||
ติดต่อเรามาได้เลย ยินดีให้คำปรึกษาฟรี!
|
||||
</p>
|
||||
<div class="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<a href="tel:0809955945" class="btn-brand text-lg">
|
||||
📞 080-995-5945
|
||||
</a>
|
||||
<a href="/contact-us" class="btn-secondary text-lg">
|
||||
💬 ติดต่อเรา
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</Layout>
|
||||
133
src/pages/portfolio.astro
Normal file
133
src/pages/portfolio.astro
Normal file
@@ -0,0 +1,133 @@
|
||||
---
|
||||
import Layout from '../layouts/Layout.astro'
|
||||
import Breadcrumbs from '../components/Breadcrumbs.astro'
|
||||
|
||||
const projects = [
|
||||
{
|
||||
title: 'ระบบ Chatbot สำหรับ E-commerce',
|
||||
category: 'AI Automation',
|
||||
icon: '🛍️',
|
||||
challenge: 'ลูกค้ามีคำถามซ้ำๆ เกี่ยวกับสินค้า การจัดส่ง และโปรโมชั่น ทีมงานตอบไม่ทัน',
|
||||
solution: 'พัฒนา AI Chatbot ที่ตอบคำถามอัตโนมัติ 24/7 เชื่อมต่อกับระบบสินค้าคงคลัง',
|
||||
result: 'ลดงานตอบคำถาม 70% เพิ่มยอดขาย 25% จาก Conversion Rate ที่ดีขึ้น',
|
||||
technologies: ['AI Chatbot', 'LINE OA', 'E-commerce Platform']
|
||||
},
|
||||
{
|
||||
title: 'Website + SEO สำหรับคลินิกความงาม',
|
||||
category: 'Web Development',
|
||||
icon: '💄',
|
||||
challenge: 'คลินิกไม่ปรากฏบน Google เมื่อค้นหาคำว่า "คลินิกความงาม ใกล้ฉัน"',
|
||||
solution: 'สร้างเว็บไซต์ใหม่พร้อมทำ SEO On-page และสร้างคอนเทนต์คุณภาพ',
|
||||
result: 'ติดอันดับ 1-3 Google ภายใน 4 เดือน ลูกค้าใหม่จาก Google เพิ่มขึ้น 300%',
|
||||
technologies: ['Web Development', 'SEO', 'Content Marketing']
|
||||
},
|
||||
{
|
||||
title: 'Marketing Automation สำหรับโรงเรียนสอนพิเศษ',
|
||||
category: 'Marketing Automation',
|
||||
icon: '🏫',
|
||||
challenge: 'โรงเรียนต้องส่งข้อมูลคอร์สเรียนให้ผู้ปกครองจำนวนมาก ใช้เวลานาน',
|
||||
solution: 'ตั้งค่าระบบส่งอีเมลและ LINE อัตโนมัติ ตามความสนใจของแต่ละคน',
|
||||
result: 'ลดเวลาทำงาน 80% อัตราการลงทะเบียนเพิ่มขึ้น 40%',
|
||||
technologies: ['Email Marketing', 'LINE OA', 'CRM']
|
||||
},
|
||||
{
|
||||
title: 'ระบบจองคิวออนไลน์สำหรับร้านอาหาร',
|
||||
category: 'Web Development',
|
||||
icon: '🍽️',
|
||||
challenge: 'ลูกค้าต้องโทรจองคิว เจ้าหน้าที่รับไม่ทันในช่วงเวลาเร่งด่วน',
|
||||
solution: 'พัฒนาระบบจองคิวออนไลน์ผ่านเว็บและ LINE เชื่อมต่อกับ Google Calendar',
|
||||
result: 'ลูกค้าพึงพอใจมากขึ้น ลดการโทรจอง 60% จัดการคิวได้มีประสิทธิภาพ',
|
||||
technologies: ['Web App', 'LINE LIFF', 'Google Calendar API']
|
||||
},
|
||||
{
|
||||
title: 'SEO Content System สำหรับบริษัทกฎหมาย',
|
||||
category: 'SEO + AI Content',
|
||||
icon: '⚖️',
|
||||
challenge: 'บริษัทต้องการสร้างคอนเทนต์กฎหมายที่เข้าใจง่าย แต่ไม่มีเวลาเขียน',
|
||||
solution: 'ใช้ AI ช่วยสร้างบทความกฎหมายจากคำถามที่พบบ่อย พร้อมทำ SEO',
|
||||
result: 'มีบทความคุณภาพ 50+ บทความในเวลา 2 เดือน Traffic จาก Google เพิ่มขึ้น 500%',
|
||||
technologies: ['AI Content', 'SEO', 'Content Strategy']
|
||||
}
|
||||
]
|
||||
---
|
||||
|
||||
<Layout title="ผลงานของเรา | MoreminiMore">
|
||||
<Breadcrumbs currentPage={{ href: '/portfolio', title: 'ผลงานของเรา' }} />
|
||||
|
||||
<section class="py-20 bg-gradient-to-br from-yellow-50 to-white">
|
||||
<div class="container mx-auto px-4">
|
||||
<h1 class="text-4xl md:text-5xl font-bold text-center mb-8 text-secondary">
|
||||
ผลงานของเรา
|
||||
</h1>
|
||||
<p class="text-xl text-center text-gray-700 max-w-3xl mx-auto mb-12">
|
||||
กรณีศึกษาจริงจากลูกค้าที่ไว้วางใจให้เราพัฒนาระบบ IT และ AI
|
||||
</p>
|
||||
|
||||
<!-- Filter Buttons -->
|
||||
<div class="flex flex-wrap justify-center gap-4 mb-12">
|
||||
<button class="btn-brand">ทั้งหมด</button>
|
||||
<button class="btn-secondary">Web Development</button>
|
||||
<button class="btn-secondary">AI Automation</button>
|
||||
<button class="btn-secondary">SEO + AI Content</button>
|
||||
</div>
|
||||
|
||||
<!-- Projects Grid -->
|
||||
<div class="max-w-6xl mx-auto space-y-12">
|
||||
{projects.map((project) => (
|
||||
<div class="bg-white rounded-2xl shadow-xl overflow-hidden">
|
||||
<div class="bg-gradient-to-r from-primary to-brand-blue p-6 text-white">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="text-5xl">{project.icon}</div>
|
||||
<div>
|
||||
<div class="text-sm font-medium opacity-90">{project.category}</div>
|
||||
<h2 class="text-2xl font-bold">{project.title}</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-8">
|
||||
<div class="grid md:grid-cols-3 gap-6 mb-6">
|
||||
<div>
|
||||
<h3 class="font-bold text-lg mb-2 text-secondary">🎯 ความท้าทาย</h3>
|
||||
<p class="text-gray-700">{project.challenge}</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="font-bold text-lg mb-2 text-secondary">💡 วิธีแก้</h3>
|
||||
<p class="text-gray-700">{project.solution}</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="font-bold text-lg mb-2 text-secondary">📊 ผลลัพธ์</h3>
|
||||
<p class="text-gray-700">{project.result}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-wrap gap-2 pt-4 border-t">
|
||||
{project.technologies.map((tech) => (
|
||||
<span class="bg-gray-100 text-gray-700 px-3 py-1 rounded-full text-sm">
|
||||
{tech}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<!-- CTA Section -->
|
||||
<div class="max-w-3xl mx-auto text-center mt-16">
|
||||
<h2 class="text-2xl font-bold mb-4 text-secondary">สนใจให้เราทำให้คุณบ้างไหม?</h2>
|
||||
<p class="text-lg text-gray-700 mb-8">
|
||||
ให้เราช่วยคุณสร้างระบบ IT และ AI ที่ตอบโจทย์ธุรกิจ
|
||||
</p>
|
||||
<div class="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<a href="/contact-us" class="btn-brand text-lg">
|
||||
💬 ปรึกษาฟรี
|
||||
</a>
|
||||
<a href="tel:0809955945" class="btn-secondary text-lg">
|
||||
📞 080-995-5945
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</Layout>
|
||||
73
src/pages/sitemap.astro
Normal file
73
src/pages/sitemap.astro
Normal file
@@ -0,0 +1,73 @@
|
||||
---
|
||||
import Layout from '../layouts/Layout.astro'
|
||||
import Breadcrumbs from '../components/Breadcrumbs.astro'
|
||||
|
||||
const services = [
|
||||
{ href: '/web-development', icon: '🌐', title: 'AI-Enhanced Website', desc: 'ออกแบบและพัฒนาเว็บไซต์ที่ทันสมัย ผสาน AI Chatbot และ SEO' },
|
||||
{ href: '/marketing-automation', icon: '🔄', title: 'Marketing Automation', desc: 'ตั้งค่าระบบการตลาดอัตโนมัติ เชื่อมต่อ LINE OA, Facebook, Email' },
|
||||
{ href: '/seo-content-system', icon: '📝', title: 'SEO + AI Content System', desc: 'วิจัย Keyword และสร้างคอนเทนต์คุณภาพด้วย AI' },
|
||||
{ href: '/tech-consult', icon: '🖥️', title: 'Tech Infrastructure Consult', desc: 'ให้คำปรึกษาระบบ Server, Data Pipeline และเลือกเครื่องมือ Tech' },
|
||||
{ href: '/ai-automation', icon: '⚙️', title: 'AI Automation', desc: 'นำ Chatbot และ Workflow Automation มาใช้ ตอบลูกค้า 24/7' },
|
||||
]
|
||||
|
||||
const pages = [
|
||||
{ href: '/', title: 'หน้าแรก' },
|
||||
{ href: '/about-us', title: 'เกี่ยวกับเรา' },
|
||||
{ href: '/contact-us', title: 'ติดต่อเรา' },
|
||||
{ href: '/faq', title: 'คำถามที่พบบ่อย' },
|
||||
{ href: '/blog', title: 'บทความ' },
|
||||
]
|
||||
---
|
||||
|
||||
<Layout title="แผนผังเว็บไซต์ | MoreminiMore">
|
||||
<Breadcrumbs currentPage={{ href: '/sitemap', title: 'แผนผังเว็บไซต์' }} />
|
||||
|
||||
<section class="py-20 bg-gradient-to-br from-yellow-50 to-white">
|
||||
<div class="container mx-auto px-4">
|
||||
<h1 class="text-4xl md:text-5xl font-bold text-center mb-8 text-secondary">
|
||||
แผนผังเว็บไซต์
|
||||
</h1>
|
||||
<p class="text-xl text-center text-gray-700 max-w-3xl mx-auto mb-12">
|
||||
รวบรวมทุกหน้าของเว็บไซต์ MoreminiMore เพื่อการเข้าถึงข้อมูลที่สะดวก
|
||||
</p>
|
||||
|
||||
<!-- Main Pages -->
|
||||
<div class="max-w-4xl mx-auto mb-12">
|
||||
<h2 class="text-2xl font-bold mb-6 text-secondary">หน้าหลัก</h2>
|
||||
<div class="grid md:grid-cols-2 gap-4">
|
||||
{pages.map((page) => (
|
||||
<a href={page.href} class="bg-white p-4 rounded-lg shadow-md hover:shadow-xl transition border-l-4 border-primary">
|
||||
<div class="font-bold text-lg text-secondary">{page.title}</div>
|
||||
<div class="text-sm text-gray-500">{page.href}</div>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Services -->
|
||||
<div class="max-w-6xl mx-auto mb-12">
|
||||
<h2 class="text-2xl font-bold mb-6 text-secondary">บริการของเรา</h2>
|
||||
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{services.map((service) => (
|
||||
<a href={service.href} class="bg-white p-6 rounded-lg shadow-md hover:shadow-xl transition border-l-4 border-brand-blue">
|
||||
<div class="text-4xl mb-3">{service.icon}</div>
|
||||
<div class="font-bold text-lg text-secondary mb-2">{service.title}</div>
|
||||
<div class="text-sm text-gray-600">{service.desc}</div>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Blog Posts -->
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<h2 class="text-2xl font-bold mb-6 text-secondary">บทความล่าสุด</h2>
|
||||
<div class="bg-white rounded-lg shadow-md overflow-hidden">
|
||||
<a href="/blog" class="block p-4 hover:bg-gray-50 transition border-b">
|
||||
<div class="font-bold text-lg text-secondary">ดูบทความทั้งหมด →</div>
|
||||
<div class="text-sm text-gray-500">/blog</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</Layout>
|
||||
Reference in New Issue
Block a user