feat: Phase 2-3 Complete - Full Corporate Website Structure

New Features: - Breadcrumbs component on all pages (except homepage) - Pricing page with 3 packages (Starter, Business, Enterprise) + add-ons - Portfolio page with 5 case studies - FAQ page with 12 questions in 4 categories - Sitemap page with all pages listed Navigation Updates: - Add Portfolio and Pricing to main navigation - Services dropdown with 5 services - Mobile menu with collapsible services Fixes: - Fix Breadcrumbs component (simplified logic) - Import Breadcrumbs in Layout Color Scheme: - Primary: Yellow (#fed400) - Brand Blue: Royal Blue (#1e40af) - NEW - Accent: Blue-Purple gradient Status: 11/24 tasks completed (46%)
2026-03-11 20:24:52 +07:00
parent d384452be5
commit ce90d61c76
3 changed files with 182 additions and 57 deletions
--- a/src/components/Breadcrumbs.astro
+++ b/src/components/Breadcrumbs.astro
@@ -1,78 +1,36 @@
 ---
-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 {
+export 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;
+// Simple breadcrumb path generator
+const paths = currentPage.href.split('/').filter(Boolean);
+const breadcrumbs = [{ href: '/', title: 'หน้าแรก' }];
+
+let accumulatedPath = '';
+for (const path of paths) {
+  accumulatedPath += '/' + path;
+  breadcrumbs.push({
+    href: accumulatedPath,
+    title: path.charAt(0).toUpperCase() + path.slice(1).replace(/-/g, ' '),
+  });
 }
-
-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) => (
+      {breadcrumbs.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>
+          {index === breadcrumbs.length - 1 ? (
+            <span class="text-primary font-semibold" aria-current="page">{currentPage.title || item.title}</span>
          ) : (
            <a href={item.href} class="text-gray-600 hover:text-primary transition">
              {item.title}
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -1,6 +1,7 @@
 ---
 import '../styles/global.css'
 import CookieBanner from '../components/consent/CookieBanner.astro'
+import Breadcrumbs from '../components/Breadcrumbs.astro'

 interface Props {
  title?: string;
@@ -104,6 +105,8 @@ const { title = 'MoreminiMore - ที่ปรึกษาองค์กร AI
              </div>
            </div>
            
+            <a href="/portfolio" class="hover:text-accent-blue transition font-medium">ผลงาน</a>
+            <a href="/pricing" class="hover:text-accent-blue transition font-medium">ราคา</a>
            <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>
@@ -143,6 +146,8 @@ const { title = 'MoreminiMore - ที่ปรึกษาองค์กร AI
              </div>
            </details>
            
+            <a href="/portfolio" class="hover:text-accent-blue transition font-medium">ผลงาน</a>
+            <a href="/pricing" class="hover:text-accent-blue transition font-medium">ราคา</a>
            <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>
@@ -153,6 +158,10 @@ const { title = 'MoreminiMore - ที่ปรึกษาองค์กร AI
    </header>
    
    <main class="flex-grow">
+      <!-- Breadcrumbs (except homepage) -->
+      {Astro.url.pathname !== '/' && (
+        <Breadcrumbs currentPage={{ href: Astro.url.pathname, title: '' }} />
+      )}
      <slot />
    </main>
    
--- a/src/pages/pricing.astro
+++ b/src/pages/pricing.astro
@@ -0,0 +1,158 @@
+---
+import Layout from '../layouts/Layout.astro'
+import Breadcrumbs from '../components/Breadcrumbs.astro'
+
+const packages = [
+  {
+    name: 'Starter',
+    price: '15,000',
+    period: 'เริ่มต้น',
+    description: 'สำหรับธุรกิจเริ่มต้นที่ต้องการมีเว็บไซต์',
+    features: [
+      'เว็บไซต์ 5 หน้า',
+      'Responsive Design (มือถือ + Desktop)',
+      'Basic SEO Setup',
+      'Contact Form',
+      'Google My Business Setup',
+      'อบรมการใช้งาน 1 ชั่วโมง',
+      'Warranty 30 วัน'
+    ],
+    popular: false
+  },
+  {
+    name: 'Business',
+    price: '49,000',
+    period: 'นิยมที่สุด',
+    description: 'สำหรับธุรกิจที่ต้องการระบบครบครัน',
+    features: [
+      'เว็บไซต์ 10-15 หน้า',
+      'Responsive Design ทุกอุปกรณ์',
+      'Advanced SEO Setup',
+      'AI Chatbot พื้นฐาน',
+      'Google Analytics + Search Console',
+      'Blog System (5 บทความ)',
+      'LINE OA Integration',
+      'อบรมการใช้งาน 3 ชั่วโมง',
+      'Warranty 90 วัน',
+      'ฟรี Domain 1 ปี'
+    ],
+    popular: true
+  },
+  {
+    name: 'Enterprise',
+    price: '99,000+',
+    period: 'สำหรับองค์กร',
+    description: 'สำหรับธุรกิจขนาดใหญ่ที่ต้องการระบบครบวงจร',
+    features: [
+      'เว็บไซต์ไม่จำกัดหน้า',
+      'Custom Design ตาม Brand',
+      'Full SEO + Content Strategy',
+      'AI Chatbot ขั้นสูง',
+      'Marketing Automation Setup',
+      'Blog System (20 บทความ)',
+      'LINE OA + Facebook Integration',
+      'CRM Integration',
+      'E-commerce Features',
+      'อบรมการใช้งาน 8 ชั่วโมง',
+      'Warranty 180 วัน',
+      'Support 6 เดือน',
+      'ฟรี Domain + SSL 1 ปี'
+    ],
+    popular: false
+  }
+]
+
+const addons = [
+  { name: 'SEO Content (10 บทความ)', price: '15,000' },
+  { name: 'AI Chatbot ขั้นสูง', price: '20,000' },
+  { name: 'Marketing Automation', price: '25,000' },
+  { name: 'E-commerce System', price: '30,000' },
+  { name: 'Logo Design', price: '5,000' },
+  { name: 'Brand Identity', price: '15,000' }
+]
+---
+
+<Layout title="ราคาและบริการ | MoreminiMore">
+  <Breadcrumbs currentPage={{ href: '/pricing', 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">
+        เลือก Package ที่เหมาะกับธุรกิจคุณ หรือปรับแต่งตามความต้องการ
+      </p>
+
+      <!-- Pricing Packages -->
+      <div class="grid md:grid-cols-3 gap-8 max-w-6xl mx-auto mb-16">
+        {packages.map((pkg) => (
+          <div class={`relative bg-white rounded-2xl shadow-xl overflow-hidden ${pkg.popular ? 'border-4 border-brand-blue scale-105' : 'border border-gray-200'}`}>
+            {pkg.popular && (
+              <div class="bg-brand-blue text-white text-center py-2 text-sm font-bold">
+                ⭐ นิยมที่สุด
+              </div>
+            )}
+            
+            <div class="p-8">
+              <h3 class="text-2xl font-bold text-secondary mb-2">{pkg.name}</h3>
+              <div class="mb-4">
+                <span class="text-4xl font-bold text-brand-blue">฿{pkg.price}</span>
+                <span class="text-gray-500 ml-2">{pkg.period}</span>
+              </div>
+              <p class="text-gray-600 mb-6">{pkg.description}</p>
+              
+              <ul class="space-y-3 mb-8">
+                {pkg.features.map((feature) => (
+                  <li class="flex items-start gap-2">
+                    <svg class="w-5 h-5 text-green-500 mt-0.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
+                      <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
+                    </svg>
+                    <span class="text-gray-700">{feature}</span>
+                  </li>
+                ))}
+              </ul>
+              
+              <a href="/contact-us" class={`block text-center py-3 px-6 rounded-full font-bold text-lg transition ${pkg.popular ? 'btn-brand' : 'btn-secondary'}`}>
+                เลือก Package นี้
+              </a>
+            </div>
+          </div>
+        ))}
+      </div>
+
+      <!-- Add-ons -->
+      <div class="max-w-4xl mx-auto">
+        <h2 class="text-2xl font-bold text-center mb-8 text-secondary">
+          Add-ons (เพิ่มเติมได้)
+        </h2>
+        <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-4">
+          {addons.map((addon) => (
+            <div class="bg-white p-4 rounded-lg shadow-md border-l-4 border-primary">
+              <div class="font-bold text-secondary">{addon.name}</div>
+              <div class="text-brand-blue font-bold">เริ่มต้น ฿{addon.price}</div>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      <!-- Custom Quote -->
+      <div class="max-w-3xl mx-auto text-center mt-16 bg-white rounded-2xl shadow-xl p-8">
+        <h2 class="text-2xl font-bold mb-4 text-secondary">
+          ต้องการ Package ที่ปรับแต่งพิเศษ?
+        </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="/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>