🚀 Complete Laca City Website with VPS Deployment

- Added complete Next.js frontend with responsive design - Added NestJS backend with PostgreSQL and Redis - Added comprehensive VPS deployment script (vps-deploy.sh) - Added deployment guide and documentation - Added all assets and static files - Configured SSL, Nginx, PM2, and monitoring - Ready for production deployment on any VPS
2025-08-12 07:06:15 +07:00
parent bc87a88719
commit 51f2505839
111 changed files with 4967 additions and 6447 deletions
--- a/frontend/public/android-chrome-192x192.png
+++ b/frontend/public/android-chrome-192x192.png
--- a/frontend/public/android-chrome-512x512.png
+++ b/frontend/public/android-chrome-512x512.png
--- a/frontend/public/apple-touch-icon.png
+++ b/frontend/public/apple-touch-icon.png
--- a/frontend/public/assets/AiBootcamp_event.png
+++ b/frontend/public/assets/AiBootcamp_event.png
--- a/frontend/public/assets/Background_introduction_Section.jpg
+++ b/frontend/public/assets/Background_introduction_Section.jpg
--- a/frontend/public/assets/Footer_page_logo.png
+++ b/frontend/public/assets/Footer_page_logo.png
--- a/frontend/public/assets/Founding
+++ b/frontend/public/assets/Founding
--- a/frontend/public/assets/Phone_intro.png
+++ b/frontend/public/assets/Phone_intro.png
--- a/frontend/public/assets/download_store.png
+++ b/frontend/public/assets/download_store.png
--- a/frontend/public/assets/intro_section_phone.png
+++ b/frontend/public/assets/intro_section_phone.png
--- a/frontend/public/assets/logo_partners/Ford_Philanthropy_Logo.jpeg
+++ b/frontend/public/assets/logo_partners/Ford_Philanthropy_Logo.jpeg
--- a/frontend/public/assets/logo_partners/GIST_logo_445_1.jpeg
+++ b/frontend/public/assets/logo_partners/GIST_logo_445_1.jpeg
--- a/frontend/public/assets/logo_partners/watson.png
+++ b/frontend/public/assets/logo_partners/watson.png
--- a/frontend/public/assets/mai_nguyen.png
+++ b/frontend/public/assets/mai_nguyen.png
--- a/frontend/public/assets/new_team_photo.jpg
+++ b/frontend/public/assets/new_team_photo.jpg
--- a/frontend/public/assets/phong_pham.png
+++ b/frontend/public/assets/phong_pham.png
--- a/frontend/public/assets/phung_do.png
+++ b/frontend/public/assets/phung_do.png
--- a/frontend/public/assets/quang_tue.png
+++ b/frontend/public/assets/quang_tue.png
--- a/frontend/public/assets/team_ava/Phong
+++ b/frontend/public/assets/team_ava/Phong
--- a/frontend/public/assets/team_ava/Phung
+++ b/frontend/public/assets/team_ava/Phung
--- a/frontend/public/assets/team_ava/mai
+++ b/frontend/public/assets/team_ava/mai
--- a/frontend/public/assets/team_ava/quang
+++ b/frontend/public/assets/team_ava/quang
--- a/frontend/public/assets/team_photo.jpg
+++ b/frontend/public/assets/team_photo.jpg
--- a/frontend/public/assets/team_photo_new.jpg
+++ b/frontend/public/assets/team_photo_new.jpg
@@ -0,0 +1 @@
+The image attachment you provided shows four team members sitting together on a couch in a friendly, professional setting. Since I cannot directly extract the binary image data from the attachment, I'll guide you to manually save this image.
--- a/frontend/public/favicon-16x16.png
+++ b/frontend/public/favicon-16x16.png
--- a/frontend/public/favicon-32x32.png
+++ b/frontend/public/favicon-32x32.png
--- a/frontend/public/favicon.ico
+++ b/frontend/public/favicon.ico
--- a/frontend/public/favicon.png
+++ b/frontend/public/favicon.png
--- a/frontend/public/homepage/_assets.html
+++ b/frontend/public/homepage/_assets.html
--- a/frontend/public/homepage/apple-touch-icon.png
+++ b/frontend/public/homepage/apple-touch-icon.png
--- a/frontend/public/homepage/assets/team_photo.jpg
+++ b/frontend/public/homepage/assets/team_photo.jpg
--- a/frontend/public/homepage/favicon-16x16.png
+++ b/frontend/public/homepage/favicon-16x16.png
--- a/frontend/public/homepage/favicon-32x32.png
+++ b/frontend/public/homepage/favicon-32x32.png
--- a/frontend/public/homepage/favicon-test.html
+++ b/frontend/public/homepage/favicon-test.html
@@ -0,0 +1,99 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Favicon Test - Laca City</title>
+    
+    <!-- Favicons -->
+    <link rel="icon" href="favicon.ico?v=3" type="image/x-icon">
+    <link rel="shortcut icon" href="favicon.ico?v=3">
+    <link rel="icon" href="favicon-16x16.png?v=3" sizes="16x16" type="image/png">
+    <link rel="icon" href="favicon-32x32.png?v=3" sizes="32x32" type="image/png">
+    <link rel="icon" href="favicon.png?v=3" sizes="192x192" type="image/png">
+    <link rel="apple-touch-icon" href="apple-touch-icon.png?v=3" sizes="180x180">
+    <meta name="theme-color" content="#E85A4F">
+    
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            max-width: 800px;
+            margin: 50px auto;
+            padding: 20px;
+            background: #f5f5f5;
+        }
+        .container {
+            background: white;
+            padding: 40px;
+            border-radius: 10px;
+            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+        }
+        h1 {
+            color: #E85A4F;
+            text-align: center;
+        }
+        .favicon-test {
+            border: 2px solid #E85A4F;
+            padding: 20px;
+            margin: 20px 0;
+            border-radius: 8px;
+            background: #fff8f8;
+        }
+        .favicon-display {
+            display: flex;
+            align-items: center;
+            gap: 15px;
+            margin: 10px 0;
+        }
+        .favicon-display img {
+            border: 1px solid #ccc;
+            padding: 5px;
+            background: white;
+        }
+        .instructions {
+            background: #e8f4f8;
+            padding: 15px;
+            border-radius: 5px;
+            border-left: 4px solid #2196F3;
+            margin: 20px 0;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>🎯 Favicon Test Page - Laca City</h1>
+        
+        <div class="instructions">
+            <strong>📋 Instructions:</strong>
+            <ol>
+                <li>Look at your browser tab - you should see the red LC logo</li>
+                <li>Try refreshing the page (Ctrl+F5 or Cmd+Shift+R)</li>
+                <li>Clear browser cache if needed</li>
+                <li>Bookmark this page to test bookmark favicon</li>
+            </ol>
+        </div>
+        
+        <div class="favicon-test">
+            <h3>🔍 Favicon Display Test</h3>
+            <div class="favicon-display">
+                <span><strong>16x16:</strong></span>
+                <img src="favicon-16x16.png?v=3" width="16" height="16" alt="16x16 favicon">
+            </div>
+            <div class="favicon-display">
+                <span><strong>32x32:</strong></span>
+                <img src="favicon-32x32.png?v=3" width="32" height="32" alt="32x32 favicon">
+            </div>
+            <div class="favicon-display">
+                <span><strong>64x64:</strong></span>
+                <img src="favicon.png?v=3" width="64" height="64" alt="64x64 favicon">
+            </div>
+        </div>
+        
+        <div style="text-align: center; margin-top: 30px;">
+            <p>✅ If you can see the red LC logo in the browser tab and in the images above, the favicon is working correctly!</p>
+            <a href="../" style="color: #E85A4F; text-decoration: none; font-weight: bold;">← Back to Homepage</a> |
+            <a href="/?app=parking" style="color: #E85A4F; text-decoration: none; font-weight: bold;">Go to Parking App →</a>
+        </div>
+    </div>
+</body>
+</html>
--- a/frontend/public/homepage/favicon.ico
+++ b/frontend/public/homepage/favicon.ico
--- a/frontend/public/homepage/favicon.png
+++ b/frontend/public/homepage/favicon.png
--- a/frontend/public/homepage/index.html
+++ b/frontend/public/homepage/index.html
--- a/frontend/public/homepage/index_backup.html
+++ b/frontend/public/homepage/index_backup.html
--- a/frontend/public/homepage/index_new.html
+++ b/frontend/public/homepage/index_new.html
@@ -0,0 +1,746 @@
+<!DOCTYPE html>
+<html lang="vi-VN" class="scroll-smooth">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Laca City - Smart Parking Solutions</title>
+    <meta name="description" content="Laca City provides smart parking solutions for Ho Chi Minh City with real-time availability and easy booking.">
+    <meta name="app-name" content="laca_city_parking"/>
+    
+    <!-- Keep original Canva assets for compatibility -->
+    <link href="_assets/a0684b0780c739e9.vendor.ltr.css" rel="stylesheet" integrity="sha512-JwMCpiHdk95MoUTatfaZJwstzeDnWfvWMJiwnSxZfPmgeCe4yvQDQ+ONMQjIy/Ht72r0TmlE+gvZnYRnpdLdVg==" crossorigin="anonymous">
+    <link href="_assets/41486a3f3556b006.ltr.css" rel="stylesheet" integrity="sha512-4Kv3Zsha8ynK/1q8KtFeSG9EVbb1IvcqHyM5L6F6XWPSfxqk4fJ3+EihE11U0cxXbjgEIETcgDbzAtCTJFDsEA==" crossorigin="anonymous">
+    <link href="_assets/static_font_4.ltr.css" rel="stylesheet">
+    
+    <!-- Fonts -->
+    <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=Inter:wght@300;400;500;600;700;800&family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
+    
+    <!-- Favicons -->
+    <link rel="shortcut icon" href="_assets/images/2d0b56e7e51cf11036ad8734bdb67e2d.png">
+    <link rel="icon" href="_assets/images/e53c4bd8da5e491d9ab09e7cf0daf874.png" sizes="192x192">
+    <link rel="apple-touch-icon" href="_assets/images/725b756a69a7d4c235070e51acd85560.png" sizes="180x180">
+    
+    <!-- Meta tags -->
+    <meta name="referrer" content="strict-origin-when-cross-origin">
+    <meta property="og:title" content="Laca City - Smart Parking Solutions">
+    <meta property="og:type" content="website">
+    <meta property="og:description" content="Find, reserve, and pay for parking in Ho Chi Minh City with real-time availability and smart navigation.">
+    
+    <!-- TailwindCSS CDN -->
+    <script src="https://cdn.tailwindcss.com"></script>
+    
+    <!-- Preserve original contextmenu protection -->
+    <script nonce="656f2f39-c6e5-4f19-9fd1-98a29006c658">
+      document.addEventListener('contextmenu', (e) => {
+        const isMedia = ['img', 'image', 'video', 'svg', 'picture'].some(
+          tagName => tagName.localeCompare(e.target.tagName, undefined, { sensitivity: 'base' }) === 0,
+        );
+        isMedia && e.preventDefault();
+      });
+    </script>
+    
+    <script nonce="656f2f39-c6e5-4f19-9fd1-98a29006c658">
+        const lang = navigator.language ? navigator.language : 'en';
+        // Preserve original Canva footer functionality
+        window.canva_installFooter = (container) => {
+            if (!(container instanceof HTMLDivElement)) {
+                return;
+            }
+            fetch('_footer?lang=' + encodeURIComponent(lang)).then(response => {
+                if (response.status !== 200) {
+                    return;
+                }
+                response.text().then(footerStr => {
+                    container.innerHTML = '';
+                    const div = document.createElement('div');
+                    div.innerHTML = footerStr;
+                    for (const child of [...div.children]) {
+                        if (child.tagName.toLowerCase() !== 'script') {
+                            container.append(child);
+                        }
+                    }
+                });
+            });
+        }
+    </script>
+    
+    <script nonce="656f2f39-c6e5-4f19-9fd1-98a29006c658">
+        window.C_CAPTCHA_IMPLEMENTATION = 'RECAPTCHA';
+    </script>
+    
+    <script nonce="656f2f39-c6e5-4f19-9fd1-98a29006c658">
+        window.C_CAPTCHA_KEY = '6LdpNmIrAAAAAHQVezN3pBAfDjQQ2qUpo881f24o';
+    </script>
+
+    <!-- Custom styles for the redesigned homepage -->
+    <style>
+        :root {
+            --primary-color: #E85A4F;
+            --secondary-color: #D73502;
+            --accent-color: #C73E1D;
+            --success-color: #10B981;
+            --warning-color: #F59E0B;
+            --error-color: #EF4444;
+            --neutral-100: #F3F4F6;
+            --neutral-200: #E5E7EB;
+            --neutral-300: #D1D5DB;
+            --neutral-800: #1F2937;
+            --neutral-900: #111827;
+        }
+
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: 'Inter', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
+            line-height: 1.6;
+            color: var(--neutral-800);
+            overflow-x: hidden;
+        }
+
+        .btn-primary {
+            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
+            color: white;
+            padding: 14px 32px;
+            border-radius: 12px;
+            font-weight: 600;
+            text-decoration: none;
+            display: inline-flex;
+            align-items: center;
+            gap: 8px;
+            transition: all 0.3s ease;
+            box-shadow: 0 8px 25px rgba(232, 90, 79, 0.3);
+            border: none;
+            cursor: pointer;
+        }
+
+        .btn-primary:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 12px 35px rgba(232, 90, 79, 0.4);
+        }
+
+        .btn-secondary {
+            background: white;
+            color: var(--primary-color);
+            padding: 14px 32px;
+            border-radius: 12px;
+            font-weight: 600;
+            text-decoration: none;
+            display: inline-flex;
+            align-items: center;
+            gap: 8px;
+            transition: all 0.3s ease;
+            border: 2px solid var(--primary-color);
+            cursor: pointer;
+        }
+
+        .btn-secondary:hover {
+            background: var(--primary-color);
+            color: white;
+            transform: translateY(-2px);
+        }
+
+        .floating-animation {
+            animation: floating 6s ease-in-out infinite;
+        }
+
+        @keyframes floating {
+            0%, 100% { transform: translateY(0px); }
+            50% { transform: translateY(-20px); }
+        }
+
+        .fade-in-up {
+            opacity: 0;
+            transform: translateY(30px);
+            transition: all 0.8s ease;
+        }
+
+        .fade-in-up.visible {
+            opacity: 1;
+            transform: translateY(0);
+        }
+
+        .section-padding {
+            padding: 100px 0;
+        }
+
+        .hero-gradient {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, var(--primary-color) 100%);
+        }
+
+        .feature-card {
+            background: white;
+            border-radius: 20px;
+            padding: 40px;
+            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
+            border: 1px solid var(--neutral-200);
+            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+        }
+
+        .feature-card:hover {
+            transform: translateY(-8px);
+            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+        }
+
+        .stats-card {
+            background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
+            backdrop-filter: blur(10px);
+            border: 1px solid rgba(255, 255, 255, 0.2);
+            border-radius: 20px;
+            padding: 30px;
+            text-align: center;
+            color: white;
+        }
+
+        .mobile-menu {
+            transform: translateX(100%);
+            transition: transform 0.3s ease;
+        }
+
+        .mobile-menu.open {
+            transform: translateX(0);
+        }
+
+        @media (max-width: 768px) {
+            .section-padding {
+                padding: 60px 0;
+            }
+        }
+
+        .pulse-ring {
+            animation: pulse-ring 1.25s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
+        }
+
+        @keyframes pulse-ring {
+            0% { transform: scale(.33); }
+            80%, 100% { opacity: 0; }
+        }
+
+        .scroll-indicator {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 4px;
+            background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
+            transform-origin: left;
+            transform: scaleX(0);
+            z-index: 9999;
+            transition: transform 0.3s ease;
+        }
+
+        /* Hide original Canva content but preserve functionality */
+        #root {
+            display: none;
+        }
+    </style>
+</head>
+<body>
+    <!-- Scroll Progress Indicator -->
+    <div class="scroll-indicator" id="scrollIndicator"></div>
+
+    <!-- Original Canva functionality preserved but hidden -->
+    <div id="root" style="display: none;"></div>
+
+    <!-- New Redesigned Content -->
+    <div id="redesigned-homepage">
+        <!-- Navigation -->
+        <nav class="fixed top-0 w-full z-50 bg-white/90 backdrop-blur-md border-b border-gray-200/50 transition-all duration-300" id="navbar">
+            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+                <div class="flex justify-between items-center h-20">
+                    <!-- Logo -->
+                    <div class="flex items-center space-x-3">
+                        <img src="../assets/Logo.png" alt="Laca City Logo" class="h-12 w-auto">
+                        <div class="hidden sm:block">
+                            <h1 class="text-2xl font-bold text-gray-900">Laca City</h1>
+                            <p class="text-sm text-gray-600 font-medium">Smart Parking</p>
+                        </div>
+                    </div>
+
+                    <!-- Desktop Menu -->
+                    <div class="hidden md:flex items-center space-x-8">
+                        <a href="#home" class="text-gray-700 hover:text-red-600 font-medium transition-colors duration-300">Home</a>
+                        <a href="#features" class="text-gray-700 hover:text-red-600 font-medium transition-colors duration-300">Features</a>
+                        <a href="#how-it-works" class="text-gray-700 hover:text-red-600 font-medium transition-colors duration-300">How It Works</a>
+                        <a href="#contact" class="text-gray-700 hover:text-red-600 font-medium transition-colors duration-300">Contact</a>
+                        <a href="?app=parking" class="btn-primary">
+                            Launch App
+                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"></path>
+                            </svg>
+                        </a>
+                    </div>
+
+                    <!-- Mobile Menu Button -->
+                    <div class="md:hidden">
+                        <button id="mobileMenuBtn" class="text-gray-700 hover:text-red-600 focus:outline-none">
+                            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
+                            </svg>
+                        </button>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Mobile Menu -->
+            <div id="mobileMenu" class="mobile-menu md:hidden fixed inset-y-0 right-0 w-64 bg-white shadow-xl z-50">
+                <div class="p-6">
+                    <div class="flex justify-end mb-8">
+                        <button id="closeMobileMenu" class="text-gray-700 hover:text-red-600">
+                            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
+                            </svg>
+                        </button>
+                    </div>
+                    <div class="space-y-6">
+                        <a href="#home" class="block text-gray-700 hover:text-red-600 font-medium">Home</a>
+                        <a href="#features" class="block text-gray-700 hover:text-red-600 font-medium">Features</a>
+                        <a href="#how-it-works" class="block text-gray-700 hover:text-red-600 font-medium">How It Works</a>
+                        <a href="#contact" class="block text-gray-700 hover:text-red-600 font-medium">Contact</a>
+                        <a href="?app=parking" class="btn-primary w-full justify-center">
+                            Launch App
+                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"></path>
+                            </svg>
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </nav>
+
+        <!-- Hero Section -->
+        <section id="home" class="hero-gradient min-h-screen flex items-center relative overflow-hidden">
+            <!-- Background patterns -->
+            <div class="absolute inset-0 opacity-10">
+                <div class="absolute top-20 left-10 w-20 h-20 bg-white rounded-full pulse-ring"></div>
+                <div class="absolute top-40 right-20 w-16 h-16 bg-white rounded-full pulse-ring" style="animation-delay: 0.5s;"></div>
+                <div class="absolute bottom-40 left-20 w-12 h-12 bg-white rounded-full pulse-ring" style="animation-delay: 1s;"></div>
+            </div>
+
+            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 relative z-10">
+                <div class="grid lg:grid-cols-2 gap-12 items-center">
+                    <!-- Hero Content -->
+                    <div class="hero-content text-white fade-in-up">
+                        <div class="mb-6">
+                            <span class="inline-flex items-center px-4 py-2 rounded-full text-sm font-medium bg-white/20 backdrop-blur-sm border border-white/30">
+                                <span class="w-2 h-2 bg-green-400 rounded-full mr-2 animate-pulse"></span>
+                                Live Parking Availability
+                            </span>
+                        </div>
+                        <h1 class="text-4xl md:text-6xl font-bold mb-6 leading-tight">
+                            Smart Parking <br>
+                            <span class="bg-gradient-to-r from-yellow-300 to-orange-300 bg-clip-text text-transparent">
+                                Made Simple
+                            </span>
+                        </h1>
+                        <p class="text-xl md:text-2xl mb-8 text-white/90 leading-relaxed">
+                            Find, reserve, and pay for parking in Ho Chi Minh City with real-time availability and smart navigation.
+                        </p>
+                        <div class="flex flex-col sm:flex-row gap-4">
+                            <a href="?app=parking" class="btn-primary text-lg">
+                                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
+                                </svg>
+                                Find Parking Now
+                            </a>
+                            <a href="#features" class="btn-secondary text-lg">
+                                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+                                </svg>
+                                Learn More
+                            </a>
+                        </div>
+                    </div>
+
+                    <!-- Hero Image using existing assets -->
+                    <div class="relative lg:h-96 fade-in-up floating-animation">
+                        <div class="absolute inset-0 bg-gradient-to-r from-white/20 to-transparent rounded-3xl backdrop-blur-sm"></div>
+                        <img src="../assets/Location.png" alt="Location and Parking" class="w-full h-full object-contain relative z-10 drop-shadow-2xl">
+                    </div>
+                </div>
+            </div>
+
+            <!-- Scroll indicator -->
+            <div class="absolute bottom-8 left-1/2 transform -translate-x-1/2 text-white animate-bounce">
+                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"></path>
+                </svg>
+            </div>
+        </section>
+
+        <!-- Stats Section -->
+        <section class="relative -mt-20 z-20">
+            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+                <div class="grid md:grid-cols-3 gap-6">
+                    <div class="stats-card">
+                        <div class="text-4xl font-bold mb-2">500+</div>
+                        <div class="text-white/80">Parking Locations</div>
+                    </div>
+                    <div class="stats-card">
+                        <div class="text-4xl font-bold mb-2">10K+</div>
+                        <div class="text-white/80">Happy Users</div>
+                    </div>
+                    <div class="stats-card">
+                        <div class="text-4xl font-bold mb-2">24/7</div>
+                        <div class="text-white/80">Available Support</div>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <!-- Features Section -->
+        <section id="features" class="section-padding bg-gray-50">
+            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+                <div class="text-center mb-20 fade-in-up">
+                    <h2 class="text-4xl md:text-5xl font-bold text-gray-900 mb-6">
+                        Why Choose <span style="color: var(--primary-color);">Laca City</span>?
+                    </h2>
+                    <p class="text-xl text-gray-600 max-w-3xl mx-auto">
+                        Experience the future of parking with our smart, efficient, and user-friendly platform designed for modern urban mobility.
+                    </p>
+                </div>
+
+                <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
+                    <!-- Feature Cards -->
+                    <div class="feature-card fade-in-up">
+                        <div class="w-16 h-16 bg-gradient-to-br from-blue-500 to-blue-600 rounded-2xl flex items-center justify-center mb-6">
+                            <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
+                            </svg>
+                        </div>
+                        <h3 class="text-2xl font-bold text-gray-900 mb-4">Real-Time Availability</h3>
+                        <p class="text-gray-600 leading-relaxed">
+                            Get live updates on parking space availability across Ho Chi Minh City with accurate, real-time data.
+                        </p>
+                    </div>
+
+                    <div class="feature-card fade-in-up">
+                        <div class="w-16 h-16 bg-gradient-to-br from-green-500 to-green-600 rounded-2xl flex items-center justify-center mb-6">
+                            <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1"></path>
+                            </svg>
+                        </div>
+                        <h3 class="text-2xl font-bold text-gray-900 mb-4">Smart Pricing</h3>
+                        <p class="text-gray-600 leading-relaxed">
+                            Transparent, competitive pricing with advance booking discounts and flexible payment options.
+                        </p>
+                    </div>
+
+                    <div class="feature-card fade-in-up">
+                        <div class="w-16 h-16 bg-gradient-to-br from-purple-500 to-purple-600 rounded-2xl flex items-center justify-center mb-6">
+                            <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7"></path>
+                            </svg>
+                        </div>
+                        <h3 class="text-2xl font-bold text-gray-900 mb-4">GPS Navigation</h3>
+                        <p class="text-gray-600 leading-relaxed">
+                            Smart navigation system guides you directly to your reserved parking spot with turn-by-turn directions.
+                        </p>
+                    </div>
+
+                    <div class="feature-card fade-in-up">
+                        <div class="w-16 h-16 bg-gradient-to-br from-red-500 to-red-600 rounded-2xl flex items-center justify-center mb-6">
+                            <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path>
+                            </svg>
+                        </div>
+                        <h3 class="text-2xl font-bold text-gray-900 mb-4">Secure Booking</h3>
+                        <p class="text-gray-600 leading-relaxed">
+                            Safe and secure reservation system with instant confirmation and QR code access.
+                        </p>
+                    </div>
+
+                    <div class="feature-card fade-in-up">
+                        <div class="w-16 h-16 bg-gradient-to-br from-yellow-500 to-yellow-600 rounded-2xl flex items-center justify-center mb-6">
+                            <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
+                            </svg>
+                        </div>
+                        <h3 class="text-2xl font-bold text-gray-900 mb-4">Quick Access</h3>
+                        <p class="text-gray-600 leading-relaxed">
+                            Fast booking process takes less than 2 minutes from search to confirmation.
+                        </p>
+                    </div>
+
+                    <div class="feature-card fade-in-up">
+                        <div class="w-16 h-16 bg-gradient-to-br from-indigo-500 to-indigo-600 rounded-2xl flex items-center justify-center mb-6">
+                            <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 5.636l-3.536 3.536m0 5.656l3.536 3.536M9.172 9.172L5.636 5.636m3.536 9.192L5.636 18.364M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-5 0a4 4 0 11-8 0 4 4 0 018 0z"></path>
+                            </svg>
+                        </div>
+                        <h3 class="text-2xl font-bold text-gray-900 mb-4">24/7 Support</h3>
+                        <p class="text-gray-600 leading-relaxed">
+                            Round-the-clock customer support to help you with any parking-related queries or issues.
+                        </p>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <!-- How It Works Section -->
+        <section id="how-it-works" class="section-padding bg-white">
+            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+                <div class="text-center mb-20 fade-in-up">
+                    <h2 class="text-4xl md:text-5xl font-bold text-gray-900 mb-6">
+                        How It <span style="color: var(--primary-color);">Works</span>
+                    </h2>
+                    <p class="text-xl text-gray-600 max-w-3xl mx-auto">
+                        Simple, fast, and efficient parking solution in just three easy steps.
+                    </p>
+                </div>
+
+                <div class="grid md:grid-cols-3 gap-12">
+                    <div class="text-center fade-in-up">
+                        <div class="relative mx-auto w-24 h-24 bg-gradient-to-br from-blue-500 to-blue-600 rounded-full flex items-center justify-center mb-8">
+                            <span class="text-3xl font-bold text-white">1</span>
+                            <div class="absolute -top-2 -right-2 w-8 h-8 bg-yellow-400 rounded-full flex items-center justify-center">
+                                <svg class="w-4 h-4 text-yellow-800" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
+                                </svg>
+                            </div>
+                        </div>
+                        <h3 class="text-2xl font-bold text-gray-900 mb-4">Search Location</h3>
+                        <p class="text-gray-600 leading-relaxed">
+                            Enter your destination or use GPS to find nearby parking spots with real-time availability.
+                        </p>
+                    </div>
+
+                    <div class="text-center fade-in-up">
+                        <div class="relative mx-auto w-24 h-24 bg-gradient-to-br from-green-500 to-green-600 rounded-full flex items-center justify-center mb-8">
+                            <span class="text-3xl font-bold text-white">2</span>
+                            <div class="absolute -top-2 -right-2 w-8 h-8 bg-yellow-400 rounded-full flex items-center justify-center">
+                                <svg class="w-4 h-4 text-yellow-800" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
+                                </svg>
+                            </div>
+                        </div>
+                        <h3 class="text-2xl font-bold text-gray-900 mb-4">Select & Book</h3>
+                        <p class="text-gray-600 leading-relaxed">
+                            Choose your preferred parking spot, select duration, and confirm your booking instantly.
+                        </p>
+                    </div>
+
+                    <div class="text-center fade-in-up">
+                        <div class="relative mx-auto w-24 h-24 bg-gradient-to-br from-purple-500 to-purple-600 rounded-full flex items-center justify-center mb-8">
+                            <span class="text-3xl font-bold text-white">3</span>
+                            <div class="absolute -top-2 -right-2 w-8 h-8 bg-yellow-400 rounded-full flex items-center justify-center">
+                                <svg class="w-4 h-4 text-yellow-800" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
+                                </svg>
+                            </div>
+                        </div>
+                        <h3 class="text-2xl font-bold text-gray-900 mb-4">Navigate & Park</h3>
+                        <p class="text-gray-600 leading-relaxed">
+                            Follow GPS navigation to your reserved spot and use QR code for easy access.
+                        </p>
+                    </div>
+                </div>
+
+                <!-- CTA -->
+                <div class="text-center mt-16 fade-in-up">
+                    <a href="?app=parking" class="btn-primary text-lg">
+                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"></path>
+                        </svg>
+                        Start Parking Now
+                    </a>
+                </div>
+            </div>
+        </section>
+
+        <!-- CTA Section -->
+        <section class="section-padding hero-gradient">
+            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
+                <div class="fade-in-up">
+                    <h2 class="text-4xl md:text-5xl font-bold text-white mb-6">
+                        Ready to Transform Your <br>
+                        <span class="bg-gradient-to-r from-yellow-300 to-orange-300 bg-clip-text text-transparent">
+                            Parking Experience?
+                        </span>
+                    </h2>
+                    <p class="text-xl text-white/90 mb-8 max-w-2xl mx-auto">
+                        Join thousands of satisfied users who have made parking stress-free with Laca City.
+                    </p>
+                    <div class="flex flex-col sm:flex-row gap-4 justify-center">
+                        <a href="?app=parking" class="btn-primary text-lg">
+                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z"></path>
+                            </svg>
+                            Launch Mobile App
+                        </a>
+                        <a href="#contact" class="btn-secondary text-lg">
+                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path>
+                            </svg>
+                            Contact Support
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <!-- Footer -->
+        <footer id="contact" class="bg-gray-900 text-white section-padding">
+            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+                <div class="grid md:grid-cols-4 gap-8 mb-12">
+                    <div class="col-span-2">
+                        <div class="flex items-center space-x-3 mb-6">
+                            <img src="../assets/Logo.png" alt="Laca City Logo" class="h-12 w-auto">
+                            <div>
+                                <h3 class="text-2xl font-bold">Laca City</h3>
+                                <p class="text-gray-400">Smart Parking Solutions</p>
+                            </div>
+                        </div>
+                        <p class="text-gray-300 leading-relaxed mb-6 max-w-md">
+                            Revolutionizing urban parking with smart technology, real-time data, and user-friendly solutions for Ho Chi Minh City.
+                        </p>
+                    </div>
+
+                    <div>
+                        <h4 class="text-lg font-semibold mb-6">Quick Links</h4>
+                        <ul class="space-y-3">
+                            <li><a href="#home" class="text-gray-300 hover:text-white transition-colors duration-300">Home</a></li>
+                            <li><a href="#features" class="text-gray-300 hover:text-white transition-colors duration-300">Features</a></li>
+                            <li><a href="#how-it-works" class="text-gray-300 hover:text-white transition-colors duration-300">How It Works</a></li>
+                            <li><a href="?app=parking" class="text-gray-300 hover:text-white transition-colors duration-300">Launch App</a></li>
+                        </ul>
+                    </div>
+
+                    <div>
+                        <h4 class="text-lg font-semibold mb-6">Contact Info</h4>
+                        <div class="space-y-3">
+                            <div class="flex items-center space-x-3">
+                                <svg class="w-5 h-5 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
+                                </svg>
+                                <span class="text-gray-300">Ho Chi Minh City, Vietnam</span>
+                            </div>
+                            <div class="flex items-center space-x-3">
+                                <svg class="w-5 h-5 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 4.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
+                                </svg>
+                                <span class="text-gray-300">info@lacacity.com</span>
+                            </div>
+                            <div class="flex items-center space-x-3">
+                                <svg class="w-5 h-5 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path>
+                                </svg>
+                                <span class="text-gray-300">+84 123 456 789</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="border-t border-gray-800 pt-8 flex flex-col md:flex-row justify-between items-center">
+                    <p class="text-gray-400 text-sm">
+                        © 2025 Laca City. All rights reserved.
+                    </p>
+                    <div class="flex space-x-6 mt-4 md:mt-0">
+                        <a href="#" class="text-gray-400 hover:text-white text-sm transition-colors duration-300">Privacy Policy</a>
+                        <a href="#" class="text-gray-400 hover:text-white text-sm transition-colors duration-300">Terms of Service</a>
+                        <a href="#" class="text-gray-400 hover:text-white text-sm transition-colors duration-300">Cookie Policy</a>
+                    </div>
+                </div>
+            </div>
+        </footer>
+    </div>
+
+    <!-- Original Canva scripts preserved -->
+    <script nonce="656f2f39-c6e5-4f19-9fd1-98a29006c658">document.documentElement.classList.replace('adaptive', window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');</script>
+    <script nonce="656f2f39-c6e5-4f19-9fd1-98a29006c658">(function() {window['__canva_public_path__'] = '_assets.html\/'; window['bootstrap'] = JSON.parse('{"base":{"A?":"B","L":false,"N":false,"E":"4fae5166b56a1d7ddf289b70c12e5be51b3483e8","K":1754786491,"F":{"A?":"B"},"G":"CLIENT_FULL","M":"PRODUCTION","I":["staging","production"],"B":"diwidj.my.canva.site","H":{"C":"6LdpNmIrAAAAAHQVezN3pBAfDjQQ2qUpo881f24o","I":"RECAPTCHA","J":true},"D":true},"translation":{"D":"/translations/vi-VN.json","E":"vi-VN"},"runtime":{"E":"4fae5166b56a1d7ddf289b70c12e5be51b3483e8","A?":"D"},"canvaRoot":{"F":"https://canva.com","K":"/_","H":"/_"}}');window['__canva_site_directory__'] = ''; window['__canva_runtime_env__'] = 'node'; window['__canva_config__'] = bootstrap.runtime; if (['development', 'test'].includes(bootstrap.base.M)) { window['__canva_environment__'] = bootstrap.base.M; } })();
+    </script>
+    <script crossorigin="anonymous" src="_assets/44f34d65fd73e1ed.runtime.js" integrity="sha512-X9pbe1KLWNp2Cc2E+rXPrIyh9ypYg03DtN6V9lyoOIjeLc3KwHU1Qbk1spedVyyKQWRAVXQlYuuiJb/jTIb8GA==" nonce="656f2f39-c6e5-4f19-9fd1-98a29006c658"></script>
+    <script crossorigin="anonymous" src="_assets/3728e0a9c5b9c68f.s4le6a.vendor.js" integrity="sha512-Q0M8bNXf4EK25TsxODbPA7DtMzU/wFrdoWP7bVnfp9c03h9VLvkwZpcIKwzo1va1YjfjMMUvJ97M5y6Wlr6Rmw==" nonce="656f2f39-c6e5-4f19-9fd1-98a29006c658"></script>
+    <script crossorigin="anonymous" src="_assets/f90d92d25d1cd0e3.vendor.js" integrity="sha512-M6jk9jbryq7jIVzbpU8D6Xcjfy+cbuTjsd7w+y2vNHWyKDfRLv47TAc015AIC6WzKoZYT8d/jcFyAshhEE7RAg==" nonce="656f2f39-c6e5-4f19-9fd1-98a29006c658"></script>
+    <script crossorigin="anonymous" src="_assets/9cfe83e364efa77d.strings.js" integrity="sha512-esrEuPVdpThh//VF6TsFQ5F7lDHpdgb7IXDOgWTt4FPwp1BTq4G8JqsjIPpfrHTG+HRq0cOI+aULTLQOVRqwfA==" nonce="656f2f39-c6e5-4f19-9fd1-98a29006c658"></script>
+    <script crossorigin="anonymous" src="_assets/a4dd4bffd461949b.vi-VN.js" integrity="sha512-fRwl6n+jGzS8tt7ozxxQDUl4OSW6jZa2pne3lL5viqicmiZTNijnqgZx2inLmUvbwSyH3mk31PcW8aewZ8DuvA==" nonce="656f2f39-c6e5-4f19-9fd1-98a29006c658"></script>
+    <script crossorigin="anonymous" src="_assets/9bbbab0b3b011006.js" defer integrity="sha512-5Qmb0qHhAj/ELT1Zr/iswLWaBDeKY6sYbS2JKmpeSwnacFYS6usM1Xx9oWMNY9fQG1YGjOk7o8LX6f9hno3jwA==" nonce="656f2f39-c6e5-4f19-9fd1-98a29006c658"></script>
+
+    <!-- Custom JavaScript for the redesigned homepage -->
+    <script>
+        // Smooth scrolling for navigation links
+        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+            anchor.addEventListener('click', function (e) {
+                e.preventDefault();
+                const target = document.querySelector(this.getAttribute('href'));
+                if (target) {
+                    target.scrollIntoView({
+                        behavior: 'smooth',
+                        block: 'start'
+                    });
+                }
+            });
+        });
+
+        // Mobile menu toggle
+        const mobileMenuBtn = document.getElementById('mobileMenuBtn');
+        const mobileMenu = document.getElementById('mobileMenu');
+        const closeMobileMenu = document.getElementById('closeMobileMenu');
+
+        if (mobileMenuBtn && mobileMenu && closeMobileMenu) {
+            mobileMenuBtn.addEventListener('click', () => {
+                mobileMenu.classList.add('open');
+            });
+
+            closeMobileMenu.addEventListener('click', () => {
+                mobileMenu.classList.remove('open');
+            });
+
+            // Close mobile menu when clicking outside
+            document.addEventListener('click', (e) => {
+                if (!mobileMenu.contains(e.target) && !mobileMenuBtn.contains(e.target)) {
+                    mobileMenu.classList.remove('open');
+                }
+            });
+        }
+
+        // Fade in animation on scroll
+        const observerOptions = {
+            threshold: 0.1,
+            rootMargin: '0px 0px -50px 0px'
+        };
+
+        const observer = new IntersectionObserver((entries) => {
+            entries.forEach(entry => {
+                if (entry.isIntersecting) {
+                    entry.target.classList.add('visible');
+                }
+            });
+        }, observerOptions);
+
+        document.querySelectorAll('.fade-in-up').forEach(el => {
+            observer.observe(el);
+        });
+
+        // Navbar background on scroll
+        const navbar = document.getElementById('navbar');
+        if (navbar) {
+            window.addEventListener('scroll', () => {
+                if (window.scrollY > 100) {
+                    navbar.classList.add('bg-white/95');
+                    navbar.classList.remove('bg-white/90');
+                } else {
+                    navbar.classList.add('bg-white/90');
+                    navbar.classList.remove('bg-white/95');
+                }
+            });
+        }
+
+        // Scroll progress indicator
+        const scrollIndicator = document.getElementById('scrollIndicator');
+        if (scrollIndicator) {
+            window.addEventListener('scroll', () => {
+                const scrollTop = window.pageYOffset;
+                const docHeight = document.body.scrollHeight - window.innerHeight;
+                const scrollPercent = (scrollTop / docHeight) * 100;
+                scrollIndicator.style.transform = `scaleX(${scrollPercent / 100})`;
+            });
+        }
+    </script>
+</body>
+</html>
--- a/frontend/public/homepage/laca-favicon.png
+++ b/frontend/public/homepage/laca-favicon.png
--- a/frontend/public/homepage/redesigned.html
+++ b/frontend/public/homepage/redesigned.html
@@ -0,0 +1,776 @@
+<!DOCTYPE html>
+<html lang="vi-VN" class="scroll-smooth">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Laca City - Smart Parking Solutions</title>
+    <meta name="description" content="Laca City provides smart parking solutions for Ho Chi Minh City with real-time availability and easy booking.">
+    
+    <!-- Fonts -->
+    <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=Inter:wght@300;400;500;600;700;800&family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
+    
+    <!-- Favicons -->
+    <link rel="shortcut icon" href="_assets/images/2d0b56e7e51cf11036ad8734bdb67e2d.png">
+    <link rel="icon" href="_assets/images/e53c4bd8da5e491d9ab09e7cf0daf874.png" sizes="192x192">
+    <link rel="apple-touch-icon" href="_assets/images/725b756a69a7d4c235070e51acd85560.png" sizes="180x180">
+    
+    <!-- TailwindCSS CDN -->
+    <script src="https://cdn.tailwindcss.com"></script>
+    
+    <!-- Custom styles -->
+    <style>
+        :root {
+            --primary-color: #E85A4F;
+            --secondary-color: #D73502;
+            --accent-color: #C73E1D;
+            --success-color: #10B981;
+            --warning-color: #F59E0B;
+            --error-color: #EF4444;
+            --neutral-100: #F3F4F6;
+            --neutral-200: #E5E7EB;
+            --neutral-300: #D1D5DB;
+            --neutral-800: #1F2937;
+            --neutral-900: #111827;
+        }
+
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: 'Inter', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
+            line-height: 1.6;
+            color: var(--neutral-800);
+            overflow-x: hidden;
+        }
+
+        .gradient-bg {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        }
+
+        .glass-effect {
+            background: rgba(255, 255, 255, 0.1);
+            backdrop-filter: blur(10px);
+            border: 1px solid rgba(255, 255, 255, 0.2);
+        }
+
+        .card-hover {
+            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+        }
+
+        .card-hover:hover {
+            transform: translateY(-8px);
+            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+        }
+
+        .btn-primary {
+            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
+            color: white;
+            padding: 14px 32px;
+            border-radius: 12px;
+            font-weight: 600;
+            text-decoration: none;
+            display: inline-flex;
+            align-items: center;
+            gap: 8px;
+            transition: all 0.3s ease;
+            box-shadow: 0 8px 25px rgba(232, 90, 79, 0.3);
+        }
+
+        .btn-primary:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 12px 35px rgba(232, 90, 79, 0.4);
+        }
+
+        .btn-secondary {
+            background: white;
+            color: var(--primary-color);
+            padding: 14px 32px;
+            border-radius: 12px;
+            font-weight: 600;
+            text-decoration: none;
+            display: inline-flex;
+            align-items: center;
+            gap: 8px;
+            transition: all 0.3s ease;
+            border: 2px solid var(--primary-color);
+        }
+
+        .btn-secondary:hover {
+            background: var(--primary-color);
+            color: white;
+            transform: translateY(-2px);
+        }
+
+        .floating-animation {
+            animation: floating 6s ease-in-out infinite;
+        }
+
+        @keyframes floating {
+            0%, 100% { transform: translateY(0px); }
+            50% { transform: translateY(-20px); }
+        }
+
+        .fade-in-up {
+            opacity: 0;
+            transform: translateY(30px);
+            transition: all 0.8s ease;
+        }
+
+        .fade-in-up.visible {
+            opacity: 1;
+            transform: translateY(0);
+        }
+
+        .section-padding {
+            padding: 100px 0;
+        }
+
+        .hero-gradient {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, var(--primary-color) 100%);
+        }
+
+        .feature-card {
+            background: white;
+            border-radius: 20px;
+            padding: 40px;
+            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
+            border: 1px solid var(--neutral-200);
+        }
+
+        .stats-card {
+            background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
+            backdrop-filter: blur(10px);
+            border: 1px solid rgba(255, 255, 255, 0.2);
+            border-radius: 20px;
+            padding: 30px;
+            text-align: center;
+            color: white;
+        }
+
+        .mobile-menu {
+            transform: translateX(100%);
+            transition: transform 0.3s ease;
+        }
+
+        .mobile-menu.open {
+            transform: translateX(0);
+        }
+
+        @media (max-width: 768px) {
+            .section-padding {
+                padding: 60px 0;
+            }
+            
+            .hero-content h1 {
+                font-size: 2.5rem !important;
+                line-height: 1.2 !important;
+            }
+        }
+
+        .pulse-ring {
+            animation: pulse-ring 1.25s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
+        }
+
+        @keyframes pulse-ring {
+            0% {
+                transform: scale(.33);
+            }
+            80%, 100% {
+                opacity: 0;
+            }
+        }
+
+        .scroll-indicator {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 4px;
+            background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
+            transform-origin: left;
+            transform: scaleX(0);
+            z-index: 9999;
+            transition: transform 0.3s ease;
+        }
+    </style>
+</head>
+<body>
+    <!-- Scroll Progress Indicator -->
+    <div class="scroll-indicator" id="scrollIndicator"></div>
+
+    <!-- Navigation -->
+    <nav class="fixed top-0 w-full z-50 bg-white/90 backdrop-blur-md border-b border-gray-200/50 transition-all duration-300" id="navbar">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="flex justify-between items-center h-20">
+                <!-- Logo -->
+                <div class="flex items-center space-x-3">
+                    <img src="../assets/Logo.png" alt="Laca City Logo" class="h-12 w-auto">
+                    <div class="hidden sm:block">
+                        <h1 class="text-2xl font-bold text-gray-900">Laca City</h1>
+                        <p class="text-sm text-gray-600 font-medium">Smart Parking</p>
+                    </div>
+                </div>
+
+                <!-- Desktop Menu -->
+                <div class="hidden md:flex items-center space-x-8">
+                    <a href="#home" class="text-gray-700 hover:text-red-600 font-medium transition-colors duration-300">Home</a>
+                    <a href="#features" class="text-gray-700 hover:text-red-600 font-medium transition-colors duration-300">Features</a>
+                    <a href="#how-it-works" class="text-gray-700 hover:text-red-600 font-medium transition-colors duration-300">How It Works</a>
+                    <a href="#contact" class="text-gray-700 hover:text-red-600 font-medium transition-colors duration-300">Contact</a>
+                    <a href="?app=parking" class="btn-primary">
+                        Launch App
+                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"></path>
+                        </svg>
+                    </a>
+                </div>
+
+                <!-- Mobile Menu Button -->
+                <div class="md:hidden">
+                    <button id="mobileMenuBtn" class="text-gray-700 hover:text-red-600 focus:outline-none">
+                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
+                        </svg>
+                    </button>
+                </div>
+            </div>
+        </div>
+
+        <!-- Mobile Menu -->
+        <div id="mobileMenu" class="mobile-menu md:hidden fixed inset-y-0 right-0 w-64 bg-white shadow-xl z-50">
+            <div class="p-6">
+                <div class="flex justify-end mb-8">
+                    <button id="closeMobileMenu" class="text-gray-700 hover:text-red-600">
+                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
+                        </svg>
+                    </button>
+                </div>
+                <div class="space-y-6">
+                    <a href="#home" class="block text-gray-700 hover:text-red-600 font-medium">Home</a>
+                    <a href="#features" class="block text-gray-700 hover:text-red-600 font-medium">Features</a>
+                    <a href="#how-it-works" class="block text-gray-700 hover:text-red-600 font-medium">How It Works</a>
+                    <a href="#contact" class="block text-gray-700 hover:text-red-600 font-medium">Contact</a>
+                    <a href="?app=parking" class="btn-primary w-full justify-center">
+                        Launch App
+                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"></path>
+                        </svg>
+                    </a>
+                </div>
+            </div>
+        </div>
+    </nav>
+
+    <!-- Hero Section -->
+    <section id="home" class="hero-gradient min-h-screen flex items-center relative overflow-hidden">
+        <!-- Background patterns -->
+        <div class="absolute inset-0 opacity-10">
+            <div class="absolute top-20 left-10 w-20 h-20 bg-white rounded-full pulse-ring"></div>
+            <div class="absolute top-40 right-20 w-16 h-16 bg-white rounded-full pulse-ring" style="animation-delay: 0.5s;"></div>
+            <div class="absolute bottom-40 left-20 w-12 h-12 bg-white rounded-full pulse-ring" style="animation-delay: 1s;"></div>
+        </div>
+
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 relative z-10">
+            <div class="grid lg:grid-cols-2 gap-12 items-center">
+                <!-- Hero Content -->
+                <div class="hero-content text-white fade-in-up">
+                    <div class="mb-6">
+                        <span class="inline-flex items-center px-4 py-2 rounded-full text-sm font-medium bg-white/20 backdrop-blur-sm border border-white/30">
+                            <span class="w-2 h-2 bg-green-400 rounded-full mr-2 animate-pulse"></span>
+                            Live Parking Availability
+                        </span>
+                    </div>
+                    <h1 class="text-4xl md:text-6xl font-bold mb-6 leading-tight">
+                        Smart Parking <br>
+                        <span class="bg-gradient-to-r from-yellow-300 to-orange-300 bg-clip-text text-transparent">
+                            Made Simple
+                        </span>
+                    </h1>
+                    <p class="text-xl md:text-2xl mb-8 text-white/90 leading-relaxed">
+                        Find, reserve, and pay for parking in Ho Chi Minh City with real-time availability and smart navigation.
+                    </p>
+                    <div class="flex flex-col sm:flex-row gap-4">
+                        <a href="?app=parking" class="btn-primary text-lg">
+                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
+                            </svg>
+                            Find Parking Now
+                        </a>
+                        <a href="#features" class="btn-secondary text-lg">
+                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+                            </svg>
+                            Learn More
+                        </a>
+                    </div>
+                </div>
+
+                <!-- Hero Image -->
+                <div class="relative lg:h-96 fade-in-up floating-animation">
+                    <div class="absolute inset-0 bg-gradient-to-r from-white/20 to-transparent rounded-3xl backdrop-blur-sm"></div>
+                    <img src="../assets/Location.png" alt="Location and Parking" class="w-full h-full object-contain relative z-10 drop-shadow-2xl">
+                </div>
+            </div>
+        </div>
+
+        <!-- Scroll indicator -->
+        <div class="absolute bottom-8 left-1/2 transform -translate-x-1/2 text-white animate-bounce">
+            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"></path>
+            </svg>
+        </div>
+    </section>
+
+    <!-- Stats Section -->
+    <section class="relative -mt-20 z-20">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="grid md:grid-cols-3 gap-6">
+                <div class="stats-card">
+                    <div class="text-4xl font-bold mb-2">500+</div>
+                    <div class="text-white/80">Parking Locations</div>
+                </div>
+                <div class="stats-card">
+                    <div class="text-4xl font-bold mb-2">10K+</div>
+                    <div class="text-white/80">Happy Users</div>
+                </div>
+                <div class="stats-card">
+                    <div class="text-4xl font-bold mb-2">24/7</div>
+                    <div class="text-white/80">Available Support</div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Features Section -->
+    <section id="features" class="section-padding bg-gray-50">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="text-center mb-20 fade-in-up">
+                <h2 class="text-4xl md:text-5xl font-bold text-gray-900 mb-6">
+                    Why Choose <span style="color: var(--primary-color);">Laca City</span>?
+                </h2>
+                <p class="text-xl text-gray-600 max-w-3xl mx-auto">
+                    Experience the future of parking with our smart, efficient, and user-friendly platform designed for modern urban mobility.
+                </p>
+            </div>
+
+            <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
+                <!-- Feature 1 -->
+                <div class="feature-card card-hover fade-in-up">
+                    <div class="w-16 h-16 bg-gradient-to-br from-blue-500 to-blue-600 rounded-2xl flex items-center justify-center mb-6">
+                        <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
+                        </svg>
+                    </div>
+                    <h3 class="text-2xl font-bold text-gray-900 mb-4">Real-Time Availability</h3>
+                    <p class="text-gray-600 leading-relaxed">
+                        Get live updates on parking space availability across Ho Chi Minh City with accurate, real-time data.
+                    </p>
+                </div>
+
+                <!-- Feature 2 -->
+                <div class="feature-card card-hover fade-in-up" style="animation-delay: 0.2s;">
+                    <div class="w-16 h-16 bg-gradient-to-br from-green-500 to-green-600 rounded-2xl flex items-center justify-center mb-6">
+                        <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1"></path>
+                        </svg>
+                    </div>
+                    <h3 class="text-2xl font-bold text-gray-900 mb-4">Smart Pricing</h3>
+                    <p class="text-gray-600 leading-relaxed">
+                        Transparent, competitive pricing with advance booking discounts and flexible payment options.
+                    </p>
+                </div>
+
+                <!-- Feature 3 -->
+                <div class="feature-card card-hover fade-in-up" style="animation-delay: 0.4s;">
+                    <div class="w-16 h-16 bg-gradient-to-br from-purple-500 to-purple-600 rounded-2xl flex items-center justify-center mb-6">
+                        <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7"></path>
+                        </svg>
+                    </div>
+                    <h3 class="text-2xl font-bold text-gray-900 mb-4">GPS Navigation</h3>
+                    <p class="text-gray-600 leading-relaxed">
+                        Smart navigation system guides you directly to your reserved parking spot with turn-by-turn directions.
+                    </p>
+                </div>
+
+                <!-- Feature 4 -->
+                <div class="feature-card card-hover fade-in-up" style="animation-delay: 0.6s;">
+                    <div class="w-16 h-16 bg-gradient-to-br from-red-500 to-red-600 rounded-2xl flex items-center justify-center mb-6">
+                        <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path>
+                        </svg>
+                    </div>
+                    <h3 class="text-2xl font-bold text-gray-900 mb-4">Secure Booking</h3>
+                    <p class="text-gray-600 leading-relaxed">
+                        Safe and secure reservation system with instant confirmation and QR code access.
+                    </p>
+                </div>
+
+                <!-- Feature 5 -->
+                <div class="feature-card card-hover fade-in-up" style="animation-delay: 0.8s;">
+                    <div class="w-16 h-16 bg-gradient-to-br from-yellow-500 to-yellow-600 rounded-2xl flex items-center justify-center mb-6">
+                        <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
+                        </svg>
+                    </div>
+                    <h3 class="text-2xl font-bold text-gray-900 mb-4">Quick Access</h3>
+                    <p class="text-gray-600 leading-relaxed">
+                        Fast booking process takes less than 2 minutes from search to confirmation.
+                    </p>
+                </div>
+
+                <!-- Feature 6 -->
+                <div class="feature-card card-hover fade-in-up" style="animation-delay: 1s;">
+                    <div class="w-16 h-16 bg-gradient-to-br from-indigo-500 to-indigo-600 rounded-2xl flex items-center justify-center mb-6">
+                        <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 5.636l-3.536 3.536m0 5.656l3.536 3.536M9.172 9.172L5.636 5.636m3.536 9.192L5.636 18.364M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-5 0a4 4 0 11-8 0 4 4 0 018 0z"></path>
+                        </svg>
+                    </div>
+                    <h3 class="text-2xl font-bold text-gray-900 mb-4">24/7 Support</h3>
+                    <p class="text-gray-600 leading-relaxed">
+                        Round-the-clock customer support to help you with any parking-related queries or issues.
+                    </p>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- How It Works Section -->
+    <section id="how-it-works" class="section-padding bg-white">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="text-center mb-20 fade-in-up">
+                <h2 class="text-4xl md:text-5xl font-bold text-gray-900 mb-6">
+                    How It <span style="color: var(--primary-color);">Works</span>
+                </h2>
+                <p class="text-xl text-gray-600 max-w-3xl mx-auto">
+                    Simple, fast, and efficient parking solution in just three easy steps.
+                </p>
+            </div>
+
+            <div class="grid md:grid-cols-3 gap-12">
+                <!-- Step 1 -->
+                <div class="text-center fade-in-up">
+                    <div class="relative mx-auto w-24 h-24 bg-gradient-to-br from-blue-500 to-blue-600 rounded-full flex items-center justify-center mb-8">
+                        <span class="text-3xl font-bold text-white">1</span>
+                        <div class="absolute -top-2 -right-2 w-8 h-8 bg-yellow-400 rounded-full flex items-center justify-center">
+                            <svg class="w-4 h-4 text-yellow-800" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
+                            </svg>
+                        </div>
+                    </div>
+                    <h3 class="text-2xl font-bold text-gray-900 mb-4">Search Location</h3>
+                    <p class="text-gray-600 leading-relaxed">
+                        Enter your destination or use GPS to find nearby parking spots with real-time availability.
+                    </p>
+                </div>
+
+                <!-- Step 2 -->
+                <div class="text-center fade-in-up" style="animation-delay: 0.3s;">
+                    <div class="relative mx-auto w-24 h-24 bg-gradient-to-br from-green-500 to-green-600 rounded-full flex items-center justify-center mb-8">
+                        <span class="text-3xl font-bold text-white">2</span>
+                        <div class="absolute -top-2 -right-2 w-8 h-8 bg-yellow-400 rounded-full flex items-center justify-center">
+                            <svg class="w-4 h-4 text-yellow-800" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
+                            </svg>
+                        </div>
+                    </div>
+                    <h3 class="text-2xl font-bold text-gray-900 mb-4">Select & Book</h3>
+                    <p class="text-gray-600 leading-relaxed">
+                        Choose your preferred parking spot, select duration, and confirm your booking instantly.
+                    </p>
+                </div>
+
+                <!-- Step 3 -->
+                <div class="text-center fade-in-up" style="animation-delay: 0.6s;">
+                    <div class="relative mx-auto w-24 h-24 bg-gradient-to-br from-purple-500 to-purple-600 rounded-full flex items-center justify-center mb-8">
+                        <span class="text-3xl font-bold text-white">3</span>
+                        <div class="absolute -top-2 -right-2 w-8 h-8 bg-yellow-400 rounded-full flex items-center justify-center">
+                            <svg class="w-4 h-4 text-yellow-800" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
+                            </svg>
+                        </div>
+                    </div>
+                    <h3 class="text-2xl font-bold text-gray-900 mb-4">Navigate & Park</h3>
+                    <p class="text-gray-600 leading-relaxed">
+                        Follow GPS navigation to your reserved spot and use QR code for easy access.
+                    </p>
+                </div>
+            </div>
+
+            <!-- CTA -->
+            <div class="text-center mt-16 fade-in-up">
+                <a href="?app=parking" class="btn-primary text-lg">
+                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"></path>
+                    </svg>
+                    Start Parking Now
+                </a>
+            </div>
+        </div>
+    </section>
+
+    <!-- CTA Section -->
+    <section class="section-padding hero-gradient">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
+            <div class="fade-in-up">
+                <h2 class="text-4xl md:text-5xl font-bold text-white mb-6">
+                    Ready to Transform Your <br>
+                    <span class="bg-gradient-to-r from-yellow-300 to-orange-300 bg-clip-text text-transparent">
+                        Parking Experience?
+                    </span>
+                </h2>
+                <p class="text-xl text-white/90 mb-8 max-w-2xl mx-auto">
+                    Join thousands of satisfied users who have made parking stress-free with Laca City.
+                </p>
+                <div class="flex flex-col sm:flex-row gap-4 justify-center">
+                    <a href="?app=parking" class="btn-primary text-lg">
+                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z"></path>
+                        </svg>
+                        Launch Mobile App
+                    </a>
+                    <a href="#contact" class="btn-secondary text-lg">
+                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path>
+                        </svg>
+                        Contact Support
+                    </a>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Footer -->
+    <footer id="contact" class="bg-gray-900 text-white section-padding">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="grid md:grid-cols-4 gap-8 mb-12">
+                <!-- Company Info -->
+                <div class="col-span-2">
+                    <div class="flex items-center space-x-3 mb-6">
+                        <img src="../assets/Logo.png" alt="Laca City Logo" class="h-12 w-auto">
+                        <div>
+                            <h3 class="text-2xl font-bold">Laca City</h3>
+                            <p class="text-gray-400">Smart Parking Solutions</p>
+                        </div>
+                    </div>
+                    <p class="text-gray-300 leading-relaxed mb-6 max-w-md">
+                        Revolutionizing urban parking with smart technology, real-time data, and user-friendly solutions for Ho Chi Minh City.
+                    </p>
+                    <div class="flex space-x-4">
+                        <a href="#" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center hover:bg-red-600 transition-colors duration-300">
+                            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
+                                <path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"/>
+                            </svg>
+                        </a>
+                        <a href="#" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center hover:bg-red-600 transition-colors duration-300">
+                            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
+                                <path d="M22.46 6c-.77.35-1.6.58-2.46.69.88-.53 1.56-1.37 1.88-2.38-.83.5-1.75.85-2.72 1.05C18.37 4.5 17.26 4 16 4c-2.35 0-4.27 1.92-4.27 4.29 0 .34.04.67.11.98C8.28 9.09 5.11 7.38 3 4.79c-.37.63-.58 1.37-.58 2.15 0 1.49.75 2.81 1.91 3.56-.71 0-1.37-.2-1.95-.5v.03c0 2.08 1.48 3.82 3.44 4.21a4.22 4.22 0 0 1-1.93.07 4.28 4.28 0 0 0 4 2.98 8.521 8.521 0 0 1-5.33 1.84c-.34 0-.68-.02-1.02-.06C3.44 20.29 5.7 21 8.12 21 16 21 20.33 14.46 20.33 8.79c0-.19 0-.37-.01-.56.84-.6 1.56-1.36 2.14-2.23z"/>
+                            </svg>
+                        </a>
+                        <a href="#" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center hover:bg-red-600 transition-colors duration-300">
+                            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
+                                <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
+                            </svg>
+                        </a>
+                    </div>
+                </div>
+
+                <!-- Quick Links -->
+                <div>
+                    <h4 class="text-lg font-semibold mb-6">Quick Links</h4>
+                    <ul class="space-y-3">
+                        <li><a href="#home" class="text-gray-300 hover:text-white transition-colors duration-300">Home</a></li>
+                        <li><a href="#features" class="text-gray-300 hover:text-white transition-colors duration-300">Features</a></li>
+                        <li><a href="#how-it-works" class="text-gray-300 hover:text-white transition-colors duration-300">How It Works</a></li>
+                        <li><a href="?app=parking" class="text-gray-300 hover:text-white transition-colors duration-300">Launch App</a></li>
+                    </ul>
+                </div>
+
+                <!-- Contact Info -->
+                <div>
+                    <h4 class="text-lg font-semibold mb-6">Contact Info</h4>
+                    <div class="space-y-3">
+                        <div class="flex items-center space-x-3">
+                            <svg class="w-5 h-5 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
+                            </svg>
+                            <span class="text-gray-300">Ho Chi Minh City, Vietnam</span>
+                        </div>
+                        <div class="flex items-center space-x-3">
+                            <svg class="w-5 h-5 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 4.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
+                            </svg>
+                            <span class="text-gray-300">info@lacacity.com</span>
+                        </div>
+                        <div class="flex items-center space-x-3">
+                            <svg class="w-5 h-5 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path>
+                            </svg>
+                            <span class="text-gray-300">+84 123 456 789</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Bottom bar -->
+            <div class="border-t border-gray-800 pt-8 flex flex-col md:flex-row justify-between items-center">
+                <p class="text-gray-400 text-sm">
+                    © 2025 Laca City. All rights reserved.
+                </p>
+                <div class="flex space-x-6 mt-4 md:mt-0">
+                    <a href="#" class="text-gray-400 hover:text-white text-sm transition-colors duration-300">Privacy Policy</a>
+                    <a href="#" class="text-gray-400 hover:text-white text-sm transition-colors duration-300">Terms of Service</a>
+                    <a href="#" class="text-gray-400 hover:text-white text-sm transition-colors duration-300">Cookie Policy</a>
+                </div>
+            </div>
+        </div>
+    </footer>
+
+    <!-- Scripts -->
+    <script>
+        // Smooth scrolling for navigation links
+        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+            anchor.addEventListener('click', function (e) {
+                e.preventDefault();
+                const target = document.querySelector(this.getAttribute('href'));
+                if (target) {
+                    target.scrollIntoView({
+                        behavior: 'smooth',
+                        block: 'start'
+                    });
+                }
+            });
+        });
+
+        // Mobile menu toggle
+        const mobileMenuBtn = document.getElementById('mobileMenuBtn');
+        const mobileMenu = document.getElementById('mobileMenu');
+        const closeMobileMenu = document.getElementById('closeMobileMenu');
+
+        mobileMenuBtn.addEventListener('click', () => {
+            mobileMenu.classList.add('open');
+        });
+
+        closeMobileMenu.addEventListener('click', () => {
+            mobileMenu.classList.remove('open');
+        });
+
+        // Close mobile menu when clicking outside
+        document.addEventListener('click', (e) => {
+            if (!mobileMenu.contains(e.target) && !mobileMenuBtn.contains(e.target)) {
+                mobileMenu.classList.remove('open');
+            }
+        });
+
+        // Fade in animation on scroll
+        const observerOptions = {
+            threshold: 0.1,
+            rootMargin: '0px 0px -50px 0px'
+        };
+
+        const observer = new IntersectionObserver((entries) => {
+            entries.forEach(entry => {
+                if (entry.isIntersecting) {
+                    entry.target.classList.add('visible');
+                }
+            });
+        }, observerOptions);
+
+        document.querySelectorAll('.fade-in-up').forEach(el => {
+            observer.observe(el);
+        });
+
+        // Navbar background on scroll
+        const navbar = document.getElementById('navbar');
+        window.addEventListener('scroll', () => {
+            if (window.scrollY > 100) {
+                navbar.classList.add('bg-white/95');
+                navbar.classList.remove('bg-white/90');
+            } else {
+                navbar.classList.add('bg-white/90');
+                navbar.classList.remove('bg-white/95');
+            }
+        });
+
+        // Scroll progress indicator
+        const scrollIndicator = document.getElementById('scrollIndicator');
+        window.addEventListener('scroll', () => {
+            const scrollTop = window.pageYOffset;
+            const docHeight = document.body.scrollHeight - window.innerHeight;
+            const scrollPercent = (scrollTop / docHeight) * 100;
+            scrollIndicator.style.transform = `scaleX(${scrollPercent / 100})`;
+        });
+
+        // Add some interactive elements
+        document.addEventListener('DOMContentLoaded', () => {
+            // Add hover effects to cards
+            const cards = document.querySelectorAll('.card-hover');
+            cards.forEach(card => {
+                card.addEventListener('mouseenter', () => {
+                    card.style.transform = 'translateY(-8px) scale(1.02)';
+                });
+                
+                card.addEventListener('mouseleave', () => {
+                    card.style.transform = 'translateY(0) scale(1)';
+                });
+            });
+
+            // Add click animation to buttons
+            const buttons = document.querySelectorAll('.btn-primary, .btn-secondary');
+            buttons.forEach(button => {
+                button.addEventListener('click', (e) => {
+                    // Create ripple effect
+                    const ripple = document.createElement('span');
+                    const rect = button.getBoundingClientRect();
+                    const size = Math.max(rect.width, rect.height);
+                    const x = e.clientX - rect.left - size / 2;
+                    const y = e.clientY - rect.top - size / 2;
+                    
+                    ripple.style.width = ripple.style.height = size + 'px';
+                    ripple.style.left = x + 'px';
+                    ripple.style.top = y + 'px';
+                    ripple.classList.add('ripple');
+                    
+                    button.appendChild(ripple);
+                    
+                    setTimeout(() => {
+                        ripple.remove();
+                    }, 600);
+                });
+            });
+        });
+
+        // Add CSS for ripple effect
+        const style = document.createElement('style');
+        style.textContent = `
+            .btn-primary, .btn-secondary {
+                position: relative;
+                overflow: hidden;
+            }
+            
+            .ripple {
+                position: absolute;
+                background: rgba(255, 255, 255, 0.6);
+                border-radius: 50%;
+                pointer-events: none;
+                transform: scale(0);
+                animation: ripple-animation 0.6s linear;
+            }
+            
+            @keyframes ripple-animation {
+                to {
+                    transform: scale(4);
+                    opacity: 0;
+                }
+            }
+        `;
+        document.head.appendChild(style);
+    </script>
+</body>
+</html>
--- a/frontend/public/manifest.json
+++ b/frontend/public/manifest.json
@@ -0,0 +1,30 @@
+{
+  "name": "Laca City - Smart Parking",
+  "short_name": "Laca City",
+  "description": "Find and share parking in seconds. Save time, fuel, and stress in Ho Chi Minh City & Hanoi.",
+  "start_url": "/",
+  "display": "standalone",
+  "background_color": "#ffffff",
+  "theme_color": "#E85A4F",
+  "orientation": "portrait-primary",
+  "icons": [
+    {
+      "src": "/favicon.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "any maskable"
+    },
+    {
+      "src": "/favicon.png", 
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "any maskable"
+    }
+  ],
+  "categories": ["navigation", "travel", "utilities"],
+  "lang": "en",
+  "dir": "ltr",
+  "scope": "/",
+  "related_applications": [],
+  "prefer_related_applications": false
+}
--- a/frontend/public/robots.txt
+++ b/frontend/public/robots.txt
@@ -0,0 +1,14 @@
+User-agent: *
+Allow: /
+
+# Sitemap
+Sitemap: https://yourdomain.com/sitemap.xml
+
+# Specific paths
+Allow: /homepage/
+Allow: /assets/
+Allow: /?app=parking
+
+# Disallow admin or private sections (if any)
+# Disallow: /admin/
+# Disallow: /private/
				`@@ -0,0 +1 @@`
				`The image attachment you provided shows four team members sitting together on a couch in a friendly, professional setting. Since I cannot directly extract the binary image data from the attachment, I'll guide you to manually save this image.`