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

src/components/Breadcrumbs.astro

@@ -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>