Spaces:

kritsanan
/

instructa

Running

App Files Files Community

kritsanan commited on Aug 5, 2025

Commit

8dca1a8

verified ·

1 Parent(s): c3c0fcf

Context: You are an expert AI coding assistant on Lovable.dev, building a full-stack web application called "ที่นี่วังสามหมอ - Tour Der Wang," a job-matching and local tourism platform for Wang Sam Mo, Thailand, targeting service, retail, and tourism sectors. The app uses Node.js 20, React with TypeScript, Tailwind CSS, and Supabase for authentication (email, Line, Facebook), PostgreSQL database, and file storage. It runs on port 5000, aligns with a ... configuration, and supports deployment with npm run build and npm run start. The design uses a pastel orange theme (#FFE5CC, #FFCC99) with Sarabun font, Thai text, and a minimalist, mobile-first UI incorporating local cultural elements (e.g., Phra Pathom Chedi icons). The homepage includes navigation to: Homepage, /ประวัติศาสตร์, /คอนเทนท์, /ร้านอาหาร-ห้องพัก-ธุรกิรและบริการในพื้นที่, /หางาน-หาพนักงาน, /สนใจติดต่อประชาสัมพันธ์-pricing-ค่าบริการ, /เกี่ยวกับเรา, /ลงชื่อเข้าใช้. Task: Develop the app with all specified pages and features (job-matching, local business directory, monetization) incrementally, ensuring compatibility with ... configuration. Test each feature for responsiveness and functionality. Maintain a Knowledge Base with a PRD. - Follow Up Deployment

Browse files

Files changed (1) hide show

index.html +321 -502

index.html CHANGED Viewed

@@ -1,609 +1,428 @@
 <!DOCTYPE html>
-<html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Tourderwang 2.0 | AI-Powered Social Media Content Revolution</title>
     <script src="https://cdn.tailwindcss.com"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700&family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
     <script>
         tailwind.config = {
             theme: {
                 extend: {
                     colors: {
-                        primary: "#4F46E5",
-                        secondary: "#8B5CF6",
-                        accent: "#0EA5E9",
-                        dark: "#1E293B",
-                        highlight: "#06B6D4"
                     },
                     fontFamily: {
-                        orbitron: ['Orbitron', 'sans-serif'],
-                        poppins: ['Poppins', 'sans-serif']
-                    },
-                    animation: {
-                        'float': 'float 6s ease-in-out infinite',
-                        'pulse-slow': 'pulse 5s cubic-bezier(0.4, 0, 0.6, 1) infinite'
-                    },
-                    keyframes: {
-                        float: {
-                            '0%, 100%': { transform: 'translateY(0)' },
-                            '50%': { transform: 'translateY(-20px)' },
-                        }
                     }
                 }
             }
         }
     </script>
     <style>
-        :root {
-            --gradient: linear-gradient(135deg, #4F46E5, #8B5CF6, #0EA5E9);
-        }
         body {
-            background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
-            color: #f8fafc;
-            overflow-x: hidden;
-            scroll-behavior: smooth;
-        }
-        .glow {
-            text-shadow: 0 0 10px rgba(79, 70, 229, 0.5), 0 0 20px rgba(79, 70, 229, 0.3);
-        }
-        .card {
-            background: rgba(30, 41, 59, 0.7);
-            backdrop-filter: blur(10px);
-            border: 1px solid rgba(79, 70, 229, 0.3);
-            border-radius: 16px;
-            transition: all 0.3s ease;
         }
-        .card:hover {
-            transform: translateY(-10px);
-            border-color: rgba(79, 70, 229, 0.6);
-            box-shadow: 0 10px 30px -15px rgba(79, 70, 229, 0.5);
-        }
-        .cta-bg {
-            background: radial-gradient(circle at center, rgba(79, 70, 229, 0.2) 0%, rgba(30, 41, 59, 0) 70%);
-        }
-        .neon-border {
             position: relative;
-            z-index: 1;
         }
-        .neon-border::before {
-            content: '';
             position: absolute;
-            top: -2px;
-            left: -2px;
-            right: -2px;
-            bottom: -2px;
-            background: var(--gradient);
-            border-radius: 16px;
-            z-index: -1;
         }
-        .analytics-preview {
-            perspective: 1000px;
         }
-        .cube {
-            width: 200px;
-            height: 200px;
-            position: relative;
-            transform-style: preserve-3d;
-            transform: rotateX(25deg) rotateY(-25deg);
-            animation: rotate 15s infinite linear;
         }
-        @keyframes rotate {
-            0% { transform: rotateX(25deg) rotateY(0deg); }
-            100% { transform: rotateX(25deg) rotateY(-360deg); }
         }
-        .cube div {
-            position: absolute;
-            width: 200px;
-            height: 200px;
-            backdrop-filter: blur(5px);
-            border: 1px solid rgba(139, 92, 246, 0.6);
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 1.5rem;
-            font-weight: bold;
-            color: white;
-        }
-        .front { transform: translateZ(100px); background: rgba(14, 165, 233, 0.3); }
-        .back { transform: translateZ(-100px) rotateY(180deg); background: rgba(139, 92, 246, 0.3); }
-        .right { transform: rotateY(90deg) translateZ(100px); background: rgba(79, 70, 229, 0.3); }
-        .left { transform: rotateY(-90deg) translateZ(100px); background: rgba(6, 182, 212, 0.3); }
-        .top { transform: rotateX(90deg) translateZ(100px); background: rgba(255, 255, 255, 0.1); }
-        .bottom { transform: rotateX(-90deg) translateZ(100px); background: rgba(30, 41, 59, 0.4); }
-        .feature-icon {
-            font-size: 2.5rem;
-            background: var(--gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
         }
     </style>
 </head>
-<body>
-    <!-- Navigation -->
-    <nav class="fixed w-full z-50 py-4 backdrop-blur-md bg-opacity-80 bg-gray-900 border-b border-indigo-900">
-        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-            <div class="flex justify-between items-center">
-                <div class="flex items-center">
-                    <div class="flex-shrink-0 flex items-center">
-                        <div class="relative">
-                            <div class="absolute -inset-1.5 bg-indigo-600 rounded-full blur opacity-75"></div>
-                            <div class="text-white font-bold text-2xl relative px-4 py-2 rounded-full bg-gray-900">
-                                <span class="text-indigo-400">T</span>
-                                <span class="text-cyan-400">2.0</span>
-                            </div>
-                        </div>
                     </div>
                 </div>
-                <div class="hidden md:flex space-x-10">
-                    <a href="#features" class="text-indigo-200 hover:text-white transition">Features</a>
-                    <a href="#analytics" class="text-indigo-200 hover:text-white transition">3D Analytics</a>
-                    <a href="#preview" class="text-indigo-200 hover:text-white transition">Preview</a>
-                    <a href="#tech" class="text-indigo-200 hover:text-white transition">Tech Stack</a>
-                </div>
-                <div>
-                    <button class="hidden md:inline-block bg-gradient-to-r from-indigo-600 to-cyan-500 text-white font-bold py-2 px-6 rounded-full transition-all hover:from-indigo-700 hover:to-cyan-600 hover:shadow-xl hover:shadow-indigo-500/30">
-                        Get Started
-                    </button>
-                </div>
-                <div class="md:hidden">
-                    <button id="mobile-menu-button" class="p-2 text-indigo-300">
-                        <i class="fas fa-bars text-2xl"></i>
-                    </button>
-                </div>
             </div>
-            <div id="mobile-menu" class="hidden md:hidden py-4 px-2 border-t border-indigo-900 mt-4">
-                <div class="flex flex-col space-y-4">
-                    <a href="#features" class="text-indigo-200 hover:text-white transition">Features</a>
-                    <a href="#analytics" class="text-indigo-200 hover:text-white transition">3D Analytics</a>
-                    <a href="#preview" class="text-indigo-200 hover:text-white transition">Preview</a>
-                    <a href="#tech" class="text-indigo-200 hover:text-white transition">Tech Stack</a>
-                    <button class="bg-gradient-to-r from-indigo-600 to-cyan-500 text-white font-bold py-3 rounded-full">
-                        Get Started
-                    </button>
                 </div>
-            </div>
         </div>
-    </nav>
-    <!-- Hero Section -->
-    <section class="pt-32 pb-20 md:pt-44 md:pb-32 relative overflow-hidden">
-        <div class="absolute top-0 left-0 w-full h-full" id="hero-canvas"></div>
-        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
-            <div class="flex flex-col md:flex-row items-center">
-                <div class="md:w-1/2 mb-16 md:mb-0">
-                    <h1 class="text-4xl md:text-6xl font-bold mb-6 font-orbitron glow">
-                        <span class="text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-indigo-400">Tourderwang</span>
-                        <span class="block">2.0 is Here</span>
-                    </h1>
-                    <p class="text-xl text-cyan-100 mb-8 font-poppins">
-                        Revolutionize your social media content with AI-driven creation, immersive 3D analytics, and optimization tools crafted for the next generation of digital engagement.
-                    </p>
-                    <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
-                        <button class="bg-gradient-to-r from-indigo-600 to-cyan-500 text-white font-bold py-4 px-8 rounded-full text-lg transition-all hover:from-indigo-700 hover:to-cyan-600 hover:shadow-xl hover:shadow-indigo-500/30">
-                            Start Free Trial
-                        </button>
-                        <button class="bg-gray-800 text-indigo-100 font-bold py-4 px-8 rounded-full border border-indigo-900 text-lg hover:bg-gray-700 hover:border-indigo-700 transition">
-                            <i class="fas fa-play-circle mr-2"></i> See Demo
-                        </button>
-                    </div>
-                </div>
-                <div class="md:w-1/2 flex justify-center">
-                    <div class="relative w-full max-w-xl">
-                        <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-80 h-80 bg-gradient-to-tr from-indigo-500 to-cyan-400 rounded-full filter blur-[100px] opacity-30"></div>
-                        <div class="analytics-preview flex justify-center">
-                            <div class="cube">
-                                <div class="front">AI Content</div>
-                                <div class="back">Performance</div>
-                                <div class="right">Sentiment</div>
-                                <div class="left">Trends</div>
-                                <div class="top">Schedule</div>
-                                <div class="bottom">Tours</div>
-                            </div>
                         </div>
                     </div>
-                </div>
-            </div>
-        </div>
-    </section>
-    <!-- Features Section -->
-    <section id="features" class="py-20">
-        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-            <div class="text-center mb-20">
-                <h2 class="text-3xl md:text-4xl font-bold mb-4 font-orbitron">The Future of Social Media Management</h2>
-                <p class="text-lg text-cyan-100 max-w-3xl mx-auto">
-                    With Tourderwang 2.0, transform your content strategy with cutting-edge AI and immersive analytics.
-                </p>
-            </div>
-            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
-                <!-- Feature 1 -->
-                <div class="card p-8">
-                    <div class="feature-icon mb-4">
-                        <i class="fas fa-brain"></i>
-                    </div>
-                    <h3 class="text-xl font-bold mb-3 font-orbitron">AI Content Generation</h3>
-                    <p class="text-cyan-100 mb-4">
-                        Create compelling, optimized content in seconds with our advanced AI engine - tailored to your brand voice.
-                    </p>
-                    <div class="bg-gray-800 p-4 rounded-lg border border-indigo-900">
-                        <div class="flex justify-between mb-2">
-                            <span class="text-sm text-indigo-300">Content Score</span>
-                            <span class="text-sm text-cyan-400">94%</span>
-                        </div>
-                        <div class="w-full bg-gray-700 rounded-full h-2">
-                            <div class="bg-gradient-to-r from-indigo-500 to-cyan-400 h-2 rounded-full" style="width: 94%"></div>
-                        </div>
-                    </div>
-                </div>
-                <!-- Feature 2 -->
-                <div class="card p-8">
-                    <div class="feature-icon mb-4">
-                        <i class="fas fa-globe"></i>
-                    </div>
-                    <h3 class="text-xl font-bold mb-3 font-orbitron">Multi-Language Support</h3>
-                    <p class="text-cyan-100 mb-4">
-                        Reach global audiences effortlessly with native-language content generation and translation tools.
-                    </p>
-                    <div class="flex flex-wrap gap-2">
-                        <span class="px-3 py-1 bg-indigo-900/50 text-indigo-100 rounded-full text-sm">English</span>
-                        <span class="px-3 py-1 bg-indigo-900/50 text-indigo-100 rounded-full text-sm">Spanish</span>
-                        <span class="px-3 py-1 bg-indigo-900/50 text-indigo-100 rounded-full text-sm">French</span>
-                        <span class="px-3 py-1 bg-indigo-900/50 text-indigo-100 rounded-full text-sm">German</span>
-                        <span class="px-3 py-1 bg-indigo-900/50 text-indigo-100 rounded-full text-sm">Japanese</span>
-                        <span class="px-3 py-1 bg-indigo-900/50 text-indigo-100 rounded-full text-sm">Chinese</span>
-                        <span class="px-3 py-1 bg-indigo-900/50 text-indigo-100 rounded-full text-sm">+ 12 more</span>
-                    </div>
-                </div>
-                <!-- Feature 3 -->
-                <div class="card p-8">
-                    <div class="feature-icon mb-4">
-                        <i class="fas fa-chart-line"></i>
-                    </div>
-                    <h3 class="text-xl font-bold mb-3 font-orbitron">Sentiment & Trend Analysis</h3>
-                    <p class="text-cyan-100 mb-4">
-                        Identify emerging trends and gauge audience sentiment with real-time AI-powered analytics.
-                    </p>
-                    <div class="flex">
-                        <div class="bg-gradient-to-br from-cyan-400 to-indigo-500 w-16 h-16 rounded-lg flex items-center justify-center mr-4">
-                            <i class="fas fa-thumbs-up text-2xl"></i>
-                        </div>
-                        <div class="flex-1">
-                            <h4 class="font-bold">Positive Sentiment</h4>
-                            <div class="flex items-center">
-                                <div class="w-4/5 h-2 bg-gray-700 rounded-full mr-2">
-                                    <div class="h-2 bg-cyan-400 rounded-full" style="width: 78%"></div>
                                 </div>
-                                <span class="text-cyan-400 text-sm">78%</span>
                             </div>
                         </div>
                     </div>
                 </div>
-                <!-- Feature 4 -->
-                <div class="card p-8">
-                    <div class="feature-icon mb-4">
-                        <i class="fas fa-calendar-alt"></i>
-                    </div>
-                    <h3 class="text-xl font-bold mb-3 font-orbitron">AI-Powered Scheduling</h3>
-                    <p class="text-cyan-100 mb-4">
-                        Optimize engagement with intelligent scheduling powered by predictive analytics.
-                    </p>
-                    <div class="bg-gray-800 p-4 rounded-lg border border-indigo-900">
-                        <div class="flex justify-between border-b border-gray-700 pb-2 mb-2">
-                            <span>Twitter</span>
-                            <span class="text-cyan-400">2 days, 4 hours</span>
                         </div>
-                        <div class="flex justify-between border-b border-gray-700 pb-2 mb-2">
-                            <span>Facebook</span>
-                            <span class="text-green-400">12 hours</span>
                         </div>
-                        <div class="flex justify-between">
-                            <span>Instagram</span>
-                            <span class="text-cyan-400">1 day, 6 hours</span>
                         </div>
                     </div>
                 </div>
-                <!-- Feature 5 -->
-                <div class="card p-8">
-                    <div class="feature-icon mb-4">
-                        <i class="fas fa-users"></i>
                     </div>
-                    <h3 class="text-xl font-bold mb-3 font-orbitron">Team Collaboration</h3>
-                    <p class="text-cyan-100 mb-4">
-                        Manage teams, assign roles, and collaborate on content with real-time workflows.
-                    </p>
-                    <div class="flex -space-x-2">
-                        <img class="w-10 h-10 rounded-full border-2 border-cyan-400" src="https://randomuser.me/api/portraits/women/44.jpg" alt="">
-                        <img class="w-10 h-10 rounded-full border-2 border-indigo-400" src="https://randomuser.me/api/portraits/men/32.jpg" alt="">
-                        <img class="w-10 h-10 rounded-full border-2 border-violet-400" src="https://randomuser.me/api/portraits/women/68.jpg" alt="">
-                        <div class="w-10 h-10 rounded-full border-2 border-gray-600 bg-gray-800 flex items-center justify-center">
-                            <span class="text-xs text-gray-400">+3</span>
-                        </div>
                     </div>
                 </div>
-                <!-- Feature 6 -->
-                <div class="card p-8">
-                    <div class="feature-icon mb-4">
-                        <i class="fas fa-rocket"></i>
                     </div>
-                    <h3 class="text-xl font-bold mb-3 font-orbitron">Automated Posting</h3>
-                    <p class="text-cyan-100 mb-4">
-                        Schedule, preview, and publish across all platforms with a single click.
-                    </p>
-                    <div class="flex space-x-4">
-                        <i class="fab fa-twitter text-sky-400 text-2xl"></i>
-                        <i class="fab fa-facebook text-blue-700 text-2xl"></i>
-                        <i class="fab fa-instagram text-pink-500 text-2xl"></i>
-                        <i class="fab fa-linkedin text-blue-500 text-2xl"></i>
-                        <i class="fab fa-tiktok text-gray-300 text-2xl"></i>
                     </div>
                 </div>
             </div>
-        </div>
-    </section>
-    <!-- 3D Analytics Section -->
-    <section id="analytics" class="py-20 bg-gradient-to-b from-gray-900 to-gray-950">
-        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-            <div class="text-center mb-16">
-                <h2 class="text-3xl md:text-4xl font-bold mb-4 font-orbitron">Immersive 3D Analytics</h2>
-                <p class="text-lg text-cyan-100 max-w-3xl mx-auto">
-                    Step inside your data with our revolutionary interactive 3D dashboard that brings analytics to life.
-                </p>
-            </div>
-            <div class="flex flex-col md:flex-row items-center">
-                <div class="md:w-1/2 mb-12 md:mb-0 flex justify-center">
-                    <div class="relative w-full max-w-md">
-                        <div class="absolute -top-20 -left-20 w-64 h-64 bg-gradient-to-tr from-indigo-600 to-cyan-500 rounded-full filter blur-3xl opacity-20"></div>
-                        <div class="analytics-preview">
-                            <div class="cube w-64 h-64 mx-auto">
-                                <div class="front w-64 h-64 flex flex-col p-4">
-                                    <div class="text-lg font-bold mb-2">Engagement Score</div>
-                                    <div class="text-5xl font-orbitron text-cyan-300">92%</div>
-                                </div>
-                                <div class="back w-64 h-64 flex flex-col p-4">
-                                    <div class="text-lg font-bold mb-2">Reach</div>
-                                    <div class="text-5xl font-orbitron text-purple-300">24.7K</div>
-                                </div>
-                                <div class="right w-64 h-64 flex flex-col p-4">
-                                    <div class="text-lg font-bold mb-2">Sentiment</div>
-                                    <div class="text-5xl font-orbitron text-pink-300">78%</div>
-                                </div>
-                                <div class="left w-64 h-64 flex flex-col p-4">
-                                    <div class="text-lg font-bold mb-2">Shares</div>
-                                    <div class="text-5xl font-orbitron text-blue-300">1.2K</div>
-                                </div>
-                                <div class="top w-64 h-64 flex flex-col p-4">
-                                    <div class="text-lg font-bold mb-2">New Followers</div>
-                                    <div class="text-5xl font-orbitron text-green-300">287</div>
-                                </div>
-                                <div class="bottom w-64 h-64 flex flex-col p-4">
-                                    <div class="text-lg font-bold mb-2">Best Time</div>
-                                    <div class="text-4xl font-orbitron text-yellow-300">10:42 AM</div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
                 </div>
-                <div class="md:w-1/2">
-                    <div class="pl-0 md:pl-12">
-                        <h3 class="text-2xl font-bold mb-6 font-orbitron">Data Visualization Reimagined</h3>
-                        <div class="space-y-6">
-                            <div class="flex">
-                                <div class="mr-4 mt-1">
-                                    <div class="bg-gradient-to-br from-cyan-500 to-indigo-600 w-12 h-12 rounded-lg flex items-center justify-center">
-                                        <i class="fas fa-expand text-xl"></i>
-                                    </div>
-                                </div>
-                                <div>
-                                    <h4 class="text-lg font-bold mb-1">360-Degree Insight</h4>
-                                    <p class="text-cyan-100">Explore your data from every perspective with our dynamic 3D visualization.</p>
-                                </div>
-                            </div>
-                            <div class="flex">
-                                <div class="mr-4 mt-1">
-                                    <div class="bg-gradient-to-br from-cyan-500 to-indigo-600 w-12 h-12 rounded-lg flex items-center justify-center">
-                                        <i class="fas fa-search-plus text-xl"></i>
-                                    </div>
-                                </div>
-                                <div>
-                                    <h4 class="text-lg font-bold mb-1">Deep Analytics</h4>
-                                    <p class="text-cyan-100">Dive into granular performance metrics and uncover hidden patterns.</p>
-                                </div>
-                            </div>
-                            <div class="flex">
-                                <div class="mr-4 mt-1">
-                                    <div class="bg-gradient-to-br from-cyan-500 to-indigo-600 w-12 h-12 rounded-lg flex items-center justify-center">
-                                        <i class="fas fa-vr-cardboard text-xl"></i>
-                                    </div>
-                                </div>
-                                <div>
-                                    <h4 class="text-lg font-bold mb-1">Immersive Experience</h4>
-                                    <p class="text-cyan-100">Experience your analytics as never before with spatial interfaces.</p>
-                                </div>
-                            </div>
-                            <div class="mt-8">
-                                <button class="bg-gradient-to-r from-indigo-600 to-cyan-500 text-white font-bold py-4 px-8 rounded-full text-lg hover:from-indigo-700 hover:to-cyan-600 hover:shadow-xl hover:shadow-indigo-500/30 transition-all">
-                                    Explore Dashboard
-                                </button>
-                            </div>
                         </div>
                     </div>
-                </div>
-            </div>
-        </div>
-    </section>
-    <!-- CTA Section -->
-    <section class="py-24 cta-bg">
-        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
-            <div class="py-12 px-6 md:px-12 bg-gray-900 rounded-3xl border border-indigo-900/50 rounded-xl">
-                <h2 class="text-3xl md:text-4xl font-bold mb-6 font-orbitron">
-                    Ready to Transform Your Social Media?
-                </h2>
-                <p class="text-xl text-cyan-100 max-w-2xl mx-auto mb-8">
-                    Join thousands of content creators and marketers already revolutionizing their workflow with Tourderwang 2.0
-                </p>
-                <button class="bg-gradient-to-r from-indigo-600 to-cyan-500 text-white font-bold py-4 px-12 rounded-full text-lg hover:from-indigo-700 hover:to-cyan-600 hover:shadow-xl hover:shadow-indigo-500/30 transition-all transform hover:scale-105">
-                    Start Your Free Trial <i class="fas fa-arrow-right ml-2"></i>
-                </button>
-            </div>
-        </div>
-    </section>
-    <!-- Tech Stack Section -->
-    <section id="tech" class="py-16 pb-20">
-        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-            <div class="text-center mb-16">
-                <h2 class="text-3xl md:text-4xl font-bold mb-4 font-orbitron">Powerful Technology Stack</h2>
-                <p class="text-lg text-cyan-100 max-w-3xl mx-auto">
-                    Built on cutting-edge tools for performance, security, and scalability
-                </p>
-            </div>
-            <div class="flex justify-center">
-                <div class="bg-gray-800 p-8 rounded-2xl w-full max-w-4xl">
-                    <div class="grid grid-cols-2 md:grid-cols-4 gap-6 text-center">
-                        <div>
-                            <div class="bg-gray-900 rounded-2xl p-6 flex flex-col items-center">
-                                <i class="fab fa-vuejs text-5xl text-green-400 mb-4"></i>
-                                <h3 class="text-xl font-bold mb-1 font-orbitron">Vite</h3>
-                                <p class="text-cyan-100">Lightning Fast Tooling</p>
-                            </div>
                         </div>
-                        <div>
-                            <div class="bg-gray-900 rounded-2xl p-6 flex flex-col items-center">
-                                <i class="fab fa-react text-5xl text-cyan-300 mb-4"></i>
-                                <h3 class="text-xl font-bold mb-1 font-orbitron">React</h3>
-                                <p class="text-cyan-100">Modern Frontend</p>
-                            </div>
                         </div>
-                        <div>
-                            <div class="bg-gray-900 rounded-2xl p-6 flex flex-col items-center">
-                                <i class="fas fa-database text-5xl text-amber-400 mb-4"></i>
-                                <h3 class="text-xl font-bold mb-1 font-orbitron">Supabase</h3>
-                                <p class="text-cyan-100">Backend + Auth</p>
-                            </div>
                         </div>
-                        <div>
-                            <div class="bg-gray-900 rounded-2xl p-6 flex flex-col items-center">
-                                <i class="fas fa-paint-brush text-5xl text-indigo-400 mb-4"></i>
-                                <h3 class="text-xl font-bold mb-1 font-orbitron">Tailwind</h3>
-                                <p class="text-cyan-100">CSS Framework</p>
                             </div>
                         </div>
                     </div>
                 </div>
             </div>
-        </div>
-    </section>
     <!-- Footer -->
-    <footer class="pt-16 pb-8 border-t border-indigo-900/50">
-        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-            <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-12">
                 <div>
-                    <h3 class="text-lg font-bold mb-4 text-cyan-300 font-orbitron">Tourderwang 2.0</h3>
-                    <p class="text-cyan-100 mb-4">
-                        Revolutionizing social media content creation with AI power and immersive analytics.
-                    </p>
-                    <div class="flex space-x-4">
-                        <a href="#" class="text-indigo-300 hover:text-white"><i class="fab fa-twitter"></i></a>
-                        <a href="#" class="text-indigo-300 hover:text-white"><i class="fab fa-linkedin"></i></a>
-                        <a href="#" class="text-indigo-300 hover:text-white"><i class="fab fa-github"></i></a>
-                        <a href="#" class="text-indigo-300 hover:text-white"><i class="fab fa-instagram"></i></a>
                     </div>
                 </div>
                 <div>
-                    <h3 class="text-lg font-bold mb-4 text-cyan-300 font-orbitron">Features</h3>
                     <ul class="space-y-2">
-                        <li><a href="#" class="text-cyan-100 hover:text-white">AI Content Generation</a></li>
-                        <li><a href="#" class="text-cyan-100 hover:text-white">3D Analytics Dashboard</a></li>
-                        <li><a href="#" class="text-cyan-100 hover:text-white">Multi-Language Support</a></li>
-                        <li><a href="#" class="text-cyan-100 hover:text-white">Advanced Scheduling</a></li>
-                        <li><a href="#" class="text-cyan-100 hover:text-white">Team Collaboration</a></li>
                     </ul>
                 </div>
                 <div>
-                    <h3 class="text-lg font-bold mb-4 text-cyan-300 font-orbitron">Resources</h3>
                     <ul class="space-y-2">
-                        <li><a href="#" class="text-cyan-100 hover:text-white">Documentation</a></li>
-                        <li><a href="#" class="text-cyan-100 hover:text-white">API Reference</a></li>
-                        <li><a href="#" class="text-cyan-100 hover:text-white">Tutorials</a></li>
-                        <li><a href="#" class="text-cyan-100 hover:text-white">Blog</a></li>
-                        <li><a href="#" class="text-cyan-100 hover:text-white">Community</a></li>
                     </ul>
                 </div>
                 <div>
-                    <h3 class="text-lg font-bold mb-4 text-cyan-300 font-orbitron">Subscribe</h3>
-                    <p class="text-cyan-100 mb-4">Get the latest updates and news.</p>
-                    <form class="space-y-3">
-                        <input type="email" placeholder="Your email" class="w-full bg-gray-800 border border-indigo-900 rounded-full py-3 px-6 text-white placeholder-indigo-400 focus:outline-none focus:ring-1 focus:ring-indigo-500">
-                        <button class="w-full bg-gradient-to-r from-indigo-600 to-cyan-500 text-white font-bold py-3 rounded-full hover:from-indigo-700 hover:to-cyan-600 transition">
-                            Subscribe
-                        </button>
-                    </form>
                 </div>
             </div>
-            <div class="pt-8 border-t border-indigo-900/50 text-center">
-                <p class="text-indigo-400">© 2023 Tourderwang 2.0. All rights reserved.</p>
             </div>
         </div>
     </footer>
     <script>
-        // Mobile menu toggle
-        const mobileMenuButton = document.getElementById('mobile-menu-button');
-        const mobileMenu = document.getElementById('mobile-menu');
-        mobileMenuButton.addEventListener('click', () => {
-            mobileMenu.classList.toggle('hidden');
         });
-        // Smooth scrolling for anchor links
-        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
-            anchor.addEventListener('click', function(e) {
                 e.preventDefault();
-                const target = document.querySelector(this.getAttribute('href'));
-                if (target) {
-                    window.scrollTo({
-                        top: target.offsetTop - 100,
-                        behavior: 'smooth'
-                    });
-                    // Close mobile menu if open
-                    mobileMenu.classList.add('hidden');
-                }
             });
         });
     </script>
 <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=kritsanan/instructa" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 </html>

 <!DOCTYPE html>
+<html lang="th">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>ที่นี่วังสามหมอ - Tour Der Wang</title>
     <script src="https://cdn.tailwindcss.com"></script>
+    <link href="https://fonts.googleapis.com/css2?family=Sarabun:wght@400;500;700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <script>
         tailwind.config = {
             theme: {
                 extend: {
                     colors: {
+                        'pastel-orange-light': '#FFE5CC',
+                        'pastel-orange': '#FFCC99',
+                        'pastel-orange-dark': '#e6b889',
                     },
                     fontFamily: {
+                        'sarabun': ['Sarabun', 'sans-serif']
                     }
                 }
             }
         }
     </script>
     <style>
         body {
+            font-family: 'Sarabun', sans-serif;
+            background-color: #fffdf5;
         }
+        .phra-chedi-divider {
             position: relative;
+            padding-bottom: 50px;
         }
+        .phra-chedi-divider:after {
+            content: "";
             position: absolute;
+            bottom: 0;
+            left: calc(50% - 25px);
+            width: 50px;
+            height: 50px;
+            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23FF9A3D' d='M24 4.3l-20 10v10l2 2h36l2-2v-10l-20-10zm-2 15.7h4v6h-4v-6zm4 8h-4v4h4v-4z'/%3E%3C/svg%3E");
+            background-repeat: no-repeat;
+            background-size: contain;
         }
+        .section-transition {
+            transition: opacity 0.4s ease, transform 0.4s ease;
         }
+        @keyframes floating {
+            0% { transform: translateY(0px); }
+            50% { transform: translateY(-12px); }
+            100% { transform: translateY(0px); }
         }
+        .floating {
+            animation: floating 6s ease-in-out infinite;
         }
+        .gradient-bg {
+            background: radial-gradient(circle, rgba(255,229,204,0.7) 0%, rgba(255,255,255,0.8) 70%);
         }
     </style>
 </head>
+<body class="min-h-screen flex flex-col bg-gradient-to-b from-pastel-orange-light to-white text-gray-800">
+    <!-- Header -->
+    <header class="bg-white shadow-md sticky top-0 z-50">
+        <div class="container mx-auto px-4">
+            <div class="flex justify-between items-center py-4">
+                <!-- Logo -->
+                <div class="flex items-center space-x-2">
+                    <div class="w-12 h-12 rounded-lg bg-pastel-orange flex items-center justify-center">
+                        <i class="fas fa-pagoda text-white text-xl"></i>
                     </div>
+                    <h1 class="text-xl md:text-2xl font-bold">ที่นี่<span class="text-orange-600">วังสามหมอ</span></h1>
                 </div>
+                <!-- Desktop Navigation -->
+                <nav class="hidden lg:flex space-x-1">
+                    <a href="#" data-target="home" class="page-link px-4 py-2 rounded-lg hover:bg-pastel-orange-light transition">หน้าหลัก</a>
+                    <a href="#" data-target="history" class="page-link px-4 py-2 rounded-lg hover:bg-pastel-orange-light transition">ประวัติศาสตร์</a>
+                    <a href="#" data-target="content" class="page-link px-4 py-2 rounded-lg hover:bg-pastel-orange-light transition">คอนเทนท์</a>
+                    <a href="#" data-target="business" class="page-link px-4 py-2 rounded-lg hover:bg-pastel-orange-light transition">ร้านอาหาร-ห้องพัก</a>
+                    <a href="#" data-target="jobs" class="page-link px-4 py-2 rounded-lg hover:bg-pastel-orange-light transition">หางาน-หาพนักงาน</a>
+                    <a href="#" data-target="pricing" class="page-link px-4 py-2 rounded-lg hover:bg-pastel-orange-light transition">ค่าบริการ</a>
+                    <a href="#" data-target="about" class="page-link px-4 py-2 rounded-lg hover:bg-pastel-orange-light transition">เกี่ยวกับเรา</a>
+                    <a href="#" data-target="login" class="px-4 py-2 rounded-lg bg-orange-500 text-white hover:bg-orange-600 transition">เข้าสู่ระบบ</a>
+                </nav>
+                <!-- Mobile Menu Button -->
+                <button id="mobileMenuButton" class="lg:hidden text-2xl">
+                    <i class="fas fa-bars"></i>
+                </button>
             </div>
+            <!-- Mobile Navigation -->
+            <nav id="mobileMenu" class="hidden lg:hidden py-4 border-t">
+                <div class="flex flex-col space-y-2">
+                    <a href="#" data-target="home" class="page-link px-4 py-2 rounded-lg hover:bg-pastel-orange-light transition text-center">หน้าหลัก</a>
+                    <a href="#" data-target="history" class="page-link px-4 py-2 rounded-lg hover:bg-pastel-orange-light transition text-center">ประวัติศาสตร์</a>
+                    <a href="#" data-target="content" class="page-link px-4 py-2 rounded-lg hover:bg-pastel-orange-light transition text-center">คอนเทนท์</a>
+                    <a href="#" data-target="business" class="page-link px-4 py-2 rounded-lg hover:bg-pastel-orange-light transition text-center">ร้านอาหาร-ห้องพัก</a>
+                    <a href="#" data-target="jobs" class="page-link px-4 py-2 rounded-lg hover:bg-pastel-orange-light transition text-center">หางาน-หาพนักงาน</a>
+                    <a href="#" data-target="pricing" class="page-link px-4 py-2 rounded-lg hover:bg-pastel-orange-light transition text-center">ค่าบริการ</a>
+                    <a href="#" data-target="about" class="page-link px-4 py-2 rounded-lg hover:bg-pastel-orange-light transition text-center">เกี่ยวกับเรา</a>
+                    <a href="#" data-target="login" class="px-4 py-2 rounded-lg bg-orange-500 text-white hover:bg-orange-600 transition text-center">เข้าสู่ระบบ</a>
                 </div>
+            </nav>
         </div>
+    </header>
+    <main class="flex-grow">
+        <!-- Homepage -->
+        <section id="home" class="page-section py-12 gradient-bg min-h-[calc(100vh-150px)]">
+            <div class="container mx-auto px-4 relative">
+                <!-- Floating decorations -->
+                <div class="absolute -top-16 right-10 w-24 h-24 bg-pastel-orange rounded-full opacity-30 floating"></div>
+                <div class="absolute -bottom-12 left-4 w-36 h-36 bg-pastel-orange rounded-full opacity-20 floating" style="animation-delay: 2s;"></div>
+                <div class="absolute top-1/4 left-24 w-14 h-14 bg-orange-200 rounded-full opacity-40 floating" style="animation-delay: 4s;"></div>
+                <div class="flex flex-col lg:flex-row items-center">
+                    <div class="lg:w-1/2 z-10">
+                        <h2 class="text-3xl md:text-4xl lg:text-5xl font-bold mb-4">
+                            ยินดีต้อนรับสู่ <span class="text-amber-700">"วังสามหมอ"</span> <br>จุดหมายปลายทางของทุกสิ่ง
+                        </h2>
+                        <p class="text-lg mb-8 max-w-xl">
+                            เพลิดเพลินไปกับประสบการณ์การเดินทางท่องเที่ยว ผสมผสานวัฒนธรรม การรับประทานอาหารชั้นเลิศ และโอกาสทางอาชีพใต้ท้องฟ้าแสนสวยของเรา
+                        </p>
+                        <div class="flex flex-wrap gap-4">
+                            <a href="#" data-target="business" class="px-6 py-3 bg-orange-500 text-white rounded-full text-lg font-medium hover:bg-orange-600 transition flex items-center">
+                                <i class="fas fa-map-marked-alt mr-2"></i> ค้นหาสถานที่ท่องเที่ยว
+                            </a>
+                            <a href="#" data-target="jobs" class="px-6 py-3 bg-white text-orange-600 border border-orange-500 rounded-full text-lg font-medium hover:bg-orange-50 transition flex items-center">
+                                <i class="fas fa-briefcase mr-2"></i> หางานในท้องถิ่น
+                            </a>
                         </div>
                     </div>
+                    <div class="lg:w-1/2 z-10 mt-10 lg:mt-0">
+                        <div class="relative">
+                            <div class="rounded-2xl overflow-hidden shadow-xl">
+                                <div class="bg-gray-200 border-2 border-dashed rounded-xl w-full h-80 md:h-96"></div>
+                            </div>
+                            <div class="absolute -bottom-5 -right-5 w-32 h-32 bg-pastel-orange rounded-full flex items-center justify-center">
+                                <div class="text-amber-800 text-center">
+                                    <i class="fas fa-umbrella-beach text-4xl mb-1"></i>
+                                    <p class="font-bold">วังสามหมอ</p>
                                 </div>
                             </div>
                         </div>
                     </div>
                 </div>
+                <!-- Features Section -->
+                <div class="mt-16 pt-12 phra-chedi-divider">
+                    <h2 class="text-3xl font-bold text-center mb-12">บริการของเรา</h2>
+                    <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+                        <div class="feature-card bg-white p-6 rounded-2xl shadow-md hover:shadow-xl transition">
+                            <div class="w-16 h-16 rounded-full bg-pastel-orange-light flex items-center justify-center mb-4">
+                                <i class="fas fa-hotel text-2xl text-amber-600"></i>
+                            </div>
+                            <h3 class="text-xl font-bold mb-2">ที่พักและร้านอาหาร</h3>
+                            <p class="text-gray-600">ค้นพบที่พักดีๆ และรสชาติอาหารท้องถิ่นที่หาไม่ได้จากที่อื่น</p>
                         </div>
+                        <div class="feature-card bg-white p-6 rounded-2xl shadow-md hover:shadow-xl transition">
+                            <div class="w-16 h-16 rounded-full bg-pastel-orange-light flex items-center justify-center mb-4">
+                                <i class="fas fa-briefcase text-2xl text-amber-600"></i>
+                            </div>
+                            <h3 class="text-xl font-bold mb-2">โอกาสทางอาชีพ</h3>
+                            <p class="text-gray-600">เชื่อมโยงผู้หางานกับนายจ้างในธุรกิจท้องถิ่น</p>
                         </div>
+                        <div class="feature-card bg-white p-6 rounded-2xl shadow-md hover:shadow-xl transition">
+                            <div class="w-16 h-16 rounded-full bg-pastel-orange-light flex items-center justify-center mb-4">
+                                <i class="fas fa-map-signs text-2xl text-amber-600"></i>
+                            </div>
+                            <h3 class="text-xl font-bold mb-2">ทัวร์และประสบการณ์</h3>
+                            <p class="text-gray-600">เปิดโลกเที่ยวชมสถานที่สวยงามและวัฒนธรรมของวังสามหมอ</p>
                         </div>
                     </div>
                 </div>
+            </div>
+        </section>
+        <!-- History Page -->
+        <section id="history" class="page-section hidden py-16 min-h-screen bg-white">
+            <div class="container mx-auto px-4">
+                <div class="text-center mb-12">
+                    <h2 class="text-3xl font-bold">ประวัติศาสตร์<span class="text-amber-700">แห่งวังสามหมอ</span></h2>
+                    <div class="w-24 h-1 bg-amber-500 mx-auto mt-3"></div>
+                </div>
+                <div class="flex flex-col lg:flex-row gap-8 items-center">
+                    <div class="lg:w-1/2">
+                        <div class="bg-gray-200 border-2 border-dashed rounded-xl w-full h-80"></div>
                     </div>
+                    <div class="lg:w-1/2">
+                        <h3 class="text-2xl font-bold mb-4">เรื่องเล่าขานของเมือง</h3>
+                        <p class="mb-4">
+                            วังสามหมอเป็นตำบลในพื้นที่อำเภอโนนสูงของจังหวัดนครราชสีมา โดยมีสถานที่ที่ขึ้นชื่อคือ วัดสามัคคีธรรมวนาราม หรือชาวบ้านเรียกติดปากว่า "วัดเขาใหญ่" ด้วยสถาปัตยกรรมที่สวยงามของวิหารแก้วกลางน้ำ แม้ว่ามีผู้คนมาสักการะน้อยลงเนื่องจากความลาดชันและความแข็งแรงของสถานที่ แต่ก็ยังเป็นสถานที่ท่องเที่ยวที่สำคัญ
+                        </p>
+                        <p>
+                            ชื่อ "วังสามหมอ" นั้นมีที่มาจากตำนานเล่าขานว่า ในอดีตมีหมออยู่สามท่านที่เป็นภิกษุและมีความรู้ด้านแพทย์แผนโบราณอย่างเชี่ยวชาญ สามารถรักษาผู้คนได้อย่างยอดเยี่ยม จึงเป็นที่รักใคร่นับถือของชาวบ้าน และตั้งหมู่บ้านชื่อว่า "หมู่บ้านวังสามหมอ" จนทุกวันนี้
+                        </p>
                     </div>
                 </div>
+                <div class="mt-16 grid grid-cols-1 md:grid-cols-2 gap-8">
+                    <div class="bg-pastel-orange-light rounded-2xl p-6">
+                        <h4 class="text-xl font-bold mb-3">วัฒนธรรมและประเพณี</h4>
+                        <p>
+                            ประเพณีสำคัญของชาววังสามหมอคือ การทำบุญวันมาฆบูชาและวันสำคัญทางศาสนา ถือเป็นประเพณีที่กระทำกันมาช้านาน นอกจากนี้ยังมีการรักษาวิถีชีวิตพื้นบ้านแบบดั้งเดิมไว้อย่างเหนียวแน่น
+                        </p>
                     </div>
+                    <div class="bg-pastel-orange-light rounded-2xl p-6">
+                        <h4 class="text-xl font-bold mb-3">แหล่งท่องเที่ยวสำคัญ</h4>
+                        <p>
+                            น้ำตกถ้ำสวย มูลนิธิหลวงพ่อโต ถ้ำนางคอย และสถานปฏิบัติธรรมถ้ำคนองเป็นสถานที่น่าสนใจในท้องถิ่นนอกจากวัดเขาใหญ่ ทั้งเป็นสถานที่ศักดิ์สิทธิ์และมีธรรมชาติอันสวยงาม
+                        </p>
                     </div>
                 </div>
             </div>
+        </section>
+        <!-- Content Page -->
+        <section id="content" class="page-section hidden py-16 min-h-screen bg-pastel-orange-light">
+            <div class="container mx-auto px-4">
+                <div class="text-center mb-12">
+                    <h2 class="text-3xl font-bold">คอนเทนท์<span class="text-amber-700">ท้องถิ่น</span></h2>
+                    <p class="text-xl">การเดินทาง วัฒนธรรม และสถานที่น่าสนใจ</p>
+                    <div class="w-24 h-1 bg-amber-500 mx-auto mt-3"></div>
                 </div>
+                <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+                    <!-- Placeholder cards for content -->
+                    <div class="bg-white rounded-2xl overflow-hidden shadow-md hover:shadow-xl transition">
+                        <div class="bg-gray-200 border-2 border-dashed w-full h-48"></div>
+                        <div class="p-5">
+                            <span class="text-orange-600 font-medium text-sm"><i class="fas fa-calendar-alt mr-1"></i> 5 สิงหาคม 2566</span>
+                            <h3 class="text-xl font-bold my-2">เส้นทางผจญภัยบนเขาใหญ่สุดมัน</h3>
+                            <p class="text-gray-600">สำรวจเส้นทางเดินป่าและจุดชมวิวยอดฮิตน่าไปทำเป็นกิจกรรมครั้งหนึ่งในชีวิต</p>
                         </div>
                     </div>
+                    <div class="bg-white rounded-2xl overflow-hidden shadow-md hover:shadow-xl transition">
+                        <div class="bg-gray-200 border-2 border-dashed w-full h-48"></div>
+                        <div class="p-5">
+                            <span class="text-orange-600 font-medium text-sm"><i class="fas fa-calendar-alt mr-1"></i> 21 กรกฎาคม 2566</span>
+                            <h3 class="text-xl font-bold my-2">สูตรลับแกงคั่วหอยขมแม่ศรีจันทร์</h3>
+                            <p class="text-gray-600">แกะรอยตำรับอาหารพื้นบ้านเพื่อสุขภาพที่สืบทอดกันมานานหลายชั่วอายุคน</p>
                         </div>
+                    </div>
+                    <div class="bg-white rounded-2xl overflow-hidden shadow-md hover:shadow-xl transition">
+                        <div class="bg-gray-200 border-2 border-dashed w-full h-48"></div>
+                        <div class="p-5">
+                            <span class="text-orange-600 font-medium text-sm"><i class="fas fa-calendar-alt mr-1"></i> 4 กรกฎาคม 2566</span>
+                            <h3 class="text-xl font-bold my-2">งานเลี้ยงบุญขนครชัยเมืองวังสามหมอ</h3>
+                            <p class="text-gray-600">ร่วมเรียนรู้ประเพณีเก่าแก่ที่ยังคงมีลมหายใจแม้ว่าจะก้าวสู่ศตวรรษที่ 21</p>
                         </div>
+                    </div>
+                </div>
+                <!-- Video section -->
+                <div class="mt-16 bg-white rounded-2xl p-6 shadow-md">
+                    <h3 class="text-2xl font-bold mb-6">วังสามหมอบนภาพยนตร์</h3>
+                    <div class="flex flex-col lg:flex-row gap-8 items-center">
+                        <div class="lg:w-1/2">
+                            <div class="bg-gray-200 border-2 border-dashed rounded-xl w-full h-96"></div>
                         </div>
+                        <div class="lg:w-1/2">
+                            <h4 class="text-xl font-bold mb-3">สำรวจเบื้องหลังความงามผ่านลวดกล้อง</h4>
+                            <p>
+                                หนังสั้นเรื่อง "ทางลัดวังสามหมอ" ซึ่งได้รับการคัดเลือกแสดงในเทศกาลภาพยนตร์ท้องถิ่น ได้นำเสนอด้านน้อยรู้ของวัฒนธรรมและธรรมชาติอันเขียวชอุ่ม ได้เสียงวิจารณ์ที่ดีจากผู้ชมและนักวิจารณ์ได้อย่างภาคภูมิ
+                            </p>
+                            <div class="mt-4 flex gap-3">
+                                <a href="#" class="px-4 py-2 bg-orange-500 text-white rounded-full text-sm">ดูทั้งหมด</a>
+                                <a href="#" class="px-4 py-2 border border-orange-500 text-orange-500 rounded-full text-sm">แบ่งปัน</a>
                             </div>
                         </div>
                     </div>
                 </div>
             </div>
+        </section>
+        <!-- Business Directory Page (simplified for layout) -->
+        <section id="business" class="page-section hidden py-16 min-h-screen bg-white">
+            <div class="container mx-auto px-4">
+                <!-- Section content would be similar structured -->
+            </div>
+        </section>
+        <!-- Jobs Page (simplified for layout) -->
+        <section id="jobs" class="page-section hidden py-16 min-h-screen bg-pastel-orange-light">
+            <div class="container mx-auto px-4">
+                <!-- Section content would be similar structured -->
+            </div>
+        </section>
+        <!-- Pricing Page (simplified for layout) -->
+        <section id="pricing" class="page-section hidden py-16 min-h-screen bg-white">
+            <div class="container mx-auto px-4">
+                <!-- Section content would be similar structured -->
+            </div>
+        </section>
+        <!-- About Us Page (simplified for layout) -->
+        <section id="about" class="page-section hidden py-16 min-h-screen bg-pastel-orange-light">
+            <div class="container mx-auto px-4">
+                <!-- Section content would be similar structured -->
+            </div>
+        </section>
+        <!-- Login Page (simplified for layout) -->
+        <section id="login" class="page-section hidden py-16 min-h-screen bg-white">
+            <div class="container mx-auto px-4">
+                <!-- Section content would be similar structured -->
+            </div>
+        </section>
+    </main>
     <!-- Footer -->
+    <footer class="bg-gray-900 text-white pt-12 pb-4">
+        <div class="container mx-auto px-4">
+            <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
                 <div>
+                    <div class="flex items-center space-x-2 mb-4">
+                        <div class="w-10 h-10 rounded-lg bg-pastel-orange flex items-center justify-center">
+                            <i class="fas fa-pagoda text-white"></i>
+                        </div>
+                        <h2 class="text-xl font-bold">ที่นี่<span class="text-orange-400">วังสามหมอ</span></h2>
                     </div>
+                    <p class="text-gray-400">
+                        แพลตฟอร์มเพื่อการท่องเที่ยวและโอกาสทางอาชีพในชุมชนวังสามหมอ อำเภอโนนสูง จังหวัดนครราชสีมา
+                    </p>
                 </div>
                 <div>
+                    <h3 class="text-lg font-bold mb-4">ลิงก์สำคัญ</h3>
                     <ul class="space-y-2">
+                        <li><a href="#" class="text-gray-400 hover:text-white transition">นโยบายความเป็นส่วนตัว</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white transition">ข้อกำหนดการใช้งาน</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white transition">คำถามที่พบบ่อย</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white transition">คำติชม</a></li>
                     </ul>
                 </div>
                 <div>
+                    <h3 class="text-lg font-bold mb-4">ติดต่อเรา</h3>
                     <ul class="space-y-2">
+                        <li class="flex items-start">
+                            <i class="fas fa-map-marker-alt text-orange-500 mt-1 mr-2"></i>
+                            <span class="text-gray-400">ตำบลวังสามหมอ อำเภอโนนสูง จังหวัดนครราชสีมา</span>
+                        </li>
+                        <li class="flex items-start">
+                            <i class="fas fa-phone text-orange-500 mt-1 mr-2"></i>
+                            <span class="text-gray-400">044-123456</span>
+                        </li>
+                        <li class="flex items-start">
+                            <i class="fas fa-envelope text-orange-500 mt-1 mr-2"></i>
+                            <span class="text-gray-400">info@wangsammo.com</span>
+                        </li>
                     </ul>
                 </div>
                 <div>
+                    <h3 class="text-lg font-bold mb-4">ติดตามเรา</h3>
+                    <div class="flex space-x-3">
+                        <a href="#" class="w-10 h-10 rounded-full bg-orange-600 flex items-center justify-center hover:bg-orange-700 transition">
+                            <i class="fab fa-facebook-f"></i>
+                        </a>
+                        <a href="#" class="w-10 h-10 rounded-full bg-orange-600 flex items-center justify-center hover:bg-orange-700 transition">
+                            <i class="fab fa-instagram"></i>
+                        </a>
+                        <a href="#" class="w-10 h-10 rounded-full bg-orange-600 flex items-center justify-center hover:bg-orange-700 transition">
+                            <i class="fab fa-line"></i>
+                        </a>
+                        <a href="#" class="w-10 h-10 rounded-full bg-orange-600 flex items-center justify-center hover:bg-orange-700 transition">
+                            <i class="fab fa-youtube"></i>
+                        </a>
+                    </div>
                 </div>
             </div>
+            <div class="border-t border-gray-800 mt-8 pt-4 text-center text-gray-500">
+                <p>&copy; 2023 ที่นี่วังสามหมอ - ทัวร์ เดอร์ หวัง. สงวนลิขสิทธิ์.</p>
             </div>
         </div>
     </footer>
+    <!-- JavaScript for navigation and interactions -->
     <script>
+        // Toggle mobile menu
+        document.getElementById('mobileMenuButton').addEventListener('click', function() {
+            const menu = document.getElementById('mobileMenu');
+            menu.classList.toggle('hidden');
         });
+        // Page navigation
+        const navLinks = document.querySelectorAll('.page-link');
+        const sections = document.querySelectorAll('.page-section');
+        function navigateTo(targetId) {
+            sections.forEach(section => {
+                section.classList.add('hidden');
+                section.classList.remove('section-transition');
+            });
+            document.getElementById(targetId).classList.remove('hidden');
+            document.getElementById(targetId).classList.add('section-transition');
+            const mobileMenu = document.getElementById('mobileMenu');
+            mobileMenu.classList.add('hidden');
+            // Scroll to top
+            window.scrollTo(0, 0);
+        }
+        navLinks.forEach(link => {
+            link.addEventListener('click', function(e) {
                 e.preventDefault();
+                const target = this.dataset.target;
+                navigateTo(target);
             });
         });
+        // Set homepage as default
+        window.addEventListener('DOMContentLoaded', () => {
+            navigateTo('home');
+        });
     </script>
 <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=kritsanan/instructa" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 </html>