Add SEO improvements: sitemap, robots.txt, LocalBusiness schema, GA4, llm.txt

- Add dynamic sitemap.xml generation for all pages
- Add robots.txt for search engine crawl directives
- Add LocalBusiness JSON-LD schema for local SEO
- Add BreadcrumbList schema for navigation breadcrumbs
- Add canonical URLs to all product pages
- Add Twitter Cards metadata
- Add Google Analytics 4 integration component
- Create llm.txt with all product data for AI optimization
- Create reusable UI components (Button, Card, Badge)
- Update company address to full Thai address
- Update .env.example with GA4 placeholder

src/components/analytics/GoogleAnalytics.tsx

@@ -0,0 +1,31 @@
+'use client';
+
+import Script from 'next/script';
+
+const GA_MEASUREMENT_ID = process.env.NEXT_PUBLIC_GA_MEASUREMENT_ID;
+
+export default function GoogleAnalytics() {
+  if (!GA_MEASUREMENT_ID || GA_MEASUREMENT_ID === 'G-XXXXXXXXXX') {
+    return null;
+  }
+
+  return (
+    <>
+      <Script
+        src={`https://www.googletagmanager.com/gtag/js?id=${GA_MEASUREMENT_ID}`}
+        strategy="afterInteractive"
+      />
+      <Script id="google-analytics" strategy="afterInteractive">
+        {`
+          window.dataLayer = window.dataLayer || [];
+          function gtag(){dataLayer.push(arguments);}
+          gtag('js', new Date());
+          gtag('config', '${GA_MEASUREMENT_ID}', {
+            page_title: document.title,
+            page_location: window.location.href,
+          });
+        `}
+      </Script>
+    </>
+  );
+}

src/components/ui/Badge.tsx

@@ -0,0 +1,41 @@
+import { HTMLAttributes, forwardRef } from 'react';
+import { cn } from '@/lib/utils';
+
+interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
+  variant?: 'default' | 'primary' | 'success' | 'warning' | 'error';
+  size?: 'sm' | 'md' | 'lg';
+}
+
+const Badge = forwardRef<HTMLSpanElement, BadgeProps>(
+  ({ className, variant = 'default', size = 'md', children, ...props }, ref) => {
+    return (
+      <span
+        ref={ref}
+        className={cn(
+          'inline-flex items-center font-medium rounded-full',
+          {
+            'bg-secondary-100 text-secondary-700': variant === 'default',
+            'bg-primary-100 text-primary-700': variant === 'primary',
+            'bg-green-100 text-green-700': variant === 'success',
+            'bg-yellow-100 text-yellow-700': variant === 'warning',
+            'bg-red-100 text-red-700': variant === 'error',
+          },
+          {
+            'px-2 py-0.5 text-xs': size === 'sm',
+            'px-3 py-1 text-sm': size === 'md',
+            'px-4 py-1.5 text-base': size === 'lg',
+          },
+          className
+        )}
+        {...props}
+      >
+        {children}
+      </span>
+    );
+  }
+);
+
+Badge.displayName = 'Badge';
+
+export { Badge };
+export type { BadgeProps };

src/components/ui/Button.tsx

@@ -0,0 +1,42 @@
+import { ButtonHTMLAttributes, forwardRef } from 'react';
+import { cn } from '@/lib/utils';
+
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: 'primary' | 'secondary' | 'outline' | 'ghost';
+  size?: 'sm' | 'md' | 'lg';
+}
+
+const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant = 'primary', size = 'md', children, ...props }, ref) => {
+    return (
+      <button
+        ref={ref}
+        className={cn(
+          'inline-flex items-center justify-center font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 disabled:pointer-events-none disabled:opacity-50',
+          // Variants
+          {
+            'bg-primary-600 text-white hover:bg-primary-700 active:bg-primary-800': variant === 'primary',
+            'bg-secondary-100 text-secondary-900 hover:bg-secondary-200': variant === 'secondary',
+            'border-2 border-primary-600 text-primary-600 hover:bg-primary-50': variant === 'outline',
+            'text-secondary-600 hover:bg-secondary-100': variant === 'ghost',
+          },
+          // Sizes
+          {
+            'px-3 py-1.5 text-sm rounded': size === 'sm',
+            'px-4 py-2 text-base rounded-md': size === 'md',
+            'px-6 py-3 text-lg rounded-lg': size === 'lg',
+          },
+          className
+        )}
+        {...props}
+      >
+        {children}
+      </button>
+    );
+  }
+);
+
+Button.displayName = 'Button';
+
+export { Button };
+export type { ButtonProps };

src/components/ui/Card.tsx

@@ -0,0 +1,63 @@
+import { HTMLAttributes, forwardRef } from 'react';
+import { cn } from '@/lib/utils';
+
+interface CardProps extends HTMLAttributes<HTMLDivElement> {
+  variant?: 'default' | 'bordered' | 'elevated';
+}
+
+const Card = forwardRef<HTMLDivElement, CardProps>(
+  ({ className, variant = 'default', children, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          'bg-white rounded-xl overflow-hidden',
+          {
+            'shadow-sm': variant === 'default',
+            'border border-secondary-200': variant === 'bordered',
+            'shadow-lg': variant === 'elevated',
+          },
+          className
+        )}
+        {...props}
+      >
+        {children}
+      </div>
+    );
+  }
+);
+
+Card.displayName = 'Card';
+
+const CardHeader = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
+  ({ className, children, ...props }, ref) => (
+    <div ref={ref} className={cn('p-4 border-b border-secondary-100', className)} {...props}>
+      {children}
+    </div>
+  )
+);
+
+CardHeader.displayName = 'CardHeader';
+
+const CardContent = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
+  ({ className, children, ...props }, ref) => (
+    <div ref={ref} className={cn('p-4', className)} {...props}>
+      {children}
+    </div>
+  )
+);
+
+CardContent.displayName = 'CardContent';
+
+const CardFooter = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
+  ({ className, children, ...props }, ref) => (
+    <div ref={ref} className={cn('p-4 border-t border-secondary-100 bg-secondary-50', className)} {...props}>
+      {children}
+    </div>
+  )
+);
+
+CardFooter.displayName = 'CardFooter';
+
+export { Card, CardHeader, CardContent, CardFooter };
+export type { CardProps };

src/components/ui/index.ts

@@ -0,0 +1,11 @@
+// UI Components - Reusable components for Deal Plus Tech website
+// These components follow the project's design system using Tailwind CSS
+
+export { Button } from './Button';
+export type { ButtonProps } from './Button';
+
+export { Card, CardHeader, CardContent, CardFooter } from './Card';
+export type { CardProps } from './Card';
+
+export { Badge } from './Badge';
+export type { BadgeProps } from './Badge';