PhongPham
51f2505839
- 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
747 lines
40 KiB
HTML
747 lines
40 KiB
HTML
<!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>
|