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
1067 lines
64 KiB
HTML
1067 lines
64 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">
|
|
|
|
<!-- Favicon -->
|
|
<link rel="icon" href="laca-favicon.png" type="image/png">
|
|
<meta name="theme-color" content="#E85A4F">
|
|
<link rel="manifest" href="../manifest.json?v=2">
|
|
|
|
<!-- 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;
|
|
}
|
|
|
|
html {
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Inter', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
|
|
line-height: 1.6;
|
|
color: var(--neutral-800);
|
|
overflow-x: hidden;
|
|
overflow-y: auto;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.btn-primary {
|
|
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
|
|
color: white;
|
|
padding: 16px 36px;
|
|
border-radius: 14px;
|
|
font-weight: 700;
|
|
text-decoration: none;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
transition: all 0.3s ease;
|
|
box-shadow: 0 10px 30px rgba(232, 90, 79, 0.3);
|
|
border: none;
|
|
cursor: pointer;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
transform: translateY(-3px);
|
|
box-shadow: 0 15px 40px rgba(232, 90, 79, 0.4);
|
|
background: linear-gradient(135deg, var(--secondary-color), var(--accent-color));
|
|
}
|
|
|
|
.btn-secondary {
|
|
background: white;
|
|
color: var(--primary-color);
|
|
padding: 16px 36px;
|
|
border-radius: 14px;
|
|
font-weight: 700;
|
|
text-decoration: none;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
transition: all 0.3s ease;
|
|
border: 3px solid var(--primary-color);
|
|
cursor: pointer;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.btn-secondary:hover {
|
|
background: var(--primary-color);
|
|
color: white;
|
|
transform: translateY(-3px);
|
|
box-shadow: 0 15px 40px rgba(232, 90, 79, 0.3);
|
|
}
|
|
|
|
.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, var(--primary-color) 0%, var(--secondary-color) 50%, var(--accent-color) 100%);
|
|
}
|
|
|
|
.nav-link {
|
|
color: var(--neutral-800);
|
|
font-weight: 600;
|
|
text-decoration: none;
|
|
transition: all 0.3s ease;
|
|
padding: 0.5rem 0;
|
|
position: relative;
|
|
}
|
|
|
|
.nav-link:hover {
|
|
color: var(--primary-color);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.nav-link::after {
|
|
content: '';
|
|
position: absolute;
|
|
width: 0;
|
|
height: 2px;
|
|
bottom: -2px;
|
|
left: 50%;
|
|
background: var(--primary-color);
|
|
transition: all 0.3s ease;
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
.nav-link:hover::after {
|
|
width: 100%;
|
|
}
|
|
|
|
.mobile-menu-btn {
|
|
color: var(--neutral-800);
|
|
transition: all 0.3s ease;
|
|
border-radius: 0.5rem;
|
|
background: transparent;
|
|
border: none;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.mobile-menu-btn:hover {
|
|
color: var(--primary-color);
|
|
background: var(--neutral-100);
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
.hero-text-gradient {
|
|
background: linear-gradient(135deg, #FFD700, var(--primary-color), var(--secondary-color));
|
|
background-clip: text;
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
color: transparent;
|
|
}
|
|
|
|
.feature-icon-primary {
|
|
width: 4rem;
|
|
height: 4rem;
|
|
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
|
|
border-radius: 1rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.feature-icon-secondary {
|
|
width: 4rem;
|
|
height: 4rem;
|
|
background: linear-gradient(135deg, var(--secondary-color), var(--accent-color));
|
|
border-radius: 1rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.feature-icon-accent {
|
|
width: 4rem;
|
|
height: 4rem;
|
|
background: linear-gradient(135deg, var(--accent-color), var(--primary-color));
|
|
border-radius: 1rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.step-circle {
|
|
position: relative;
|
|
margin: 0 auto 2rem auto;
|
|
width: 6rem;
|
|
height: 6rem;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.step-1 {
|
|
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
|
|
}
|
|
|
|
.step-2 {
|
|
background: linear-gradient(135deg, var(--secondary-color), var(--accent-color));
|
|
}
|
|
|
|
.step-3 {
|
|
background: linear-gradient(135deg, var(--accent-color), var(--primary-color));
|
|
}
|
|
|
|
.step-icon {
|
|
position: absolute;
|
|
top: -0.5rem;
|
|
right: -0.5rem;
|
|
width: 2rem;
|
|
height: 2rem;
|
|
background: linear-gradient(135deg, #FFD700, #FFA500);
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.footer-link {
|
|
color: #D1D5DB;
|
|
text-decoration: none;
|
|
transition: color 0.3s ease;
|
|
}
|
|
|
|
.footer-link:hover {
|
|
color: var(--primary-color);
|
|
}
|
|
|
|
.contact-icon {
|
|
color: var(--primary-color);
|
|
}
|
|
|
|
.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);
|
|
}
|
|
|
|
.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" style="position: relative; min-height: 100vh;">
|
|
<!-- 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-full mx-auto px-4 sm:px-6 lg:px-12 xl:px-16">
|
|
<div class="flex justify-between items-center h-24 md:h-28">
|
|
<!-- Logo -->
|
|
<div class="flex items-center">
|
|
<a href="#home" class="flex items-center hover:opacity-80 transition-opacity duration-300">
|
|
<img src="../assets/Logo.png" alt="Laca City Logo" class="h-14 md:h-16 w-auto">
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Desktop Menu -->
|
|
<div class="hidden md:flex items-center space-x-10 lg:space-x-12">
|
|
<a href="#home" class="nav-link text-2xl lg:text-3xl">Home</a>
|
|
<a href="#features" class="nav-link text-2xl lg:text-3xl">Features</a>
|
|
<a href="#team" class="nav-link text-2xl lg:text-3xl">Team</a>
|
|
<a href="#news" class="nav-link text-2xl lg:text-3xl">News</a>
|
|
<a href="/?app=parking" class="btn-primary text-2xl lg:text-3xl px-8 py-4 lg:px-10 lg:py-5">
|
|
Launch App
|
|
<svg class="w-6 h-6 lg:w-7 lg:h-7" 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="mobile-menu-btn p-2">
|
|
<svg class="w-8 h-8" 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-80 bg-white shadow-xl z-50">
|
|
<div class="p-8">
|
|
<div class="flex justify-end mb-10">
|
|
<button id="closeMobileMenu" class="mobile-menu-btn p-2">
|
|
<svg class="w-8 h-8" 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-8">
|
|
<a href="#home" class="block nav-link text-3xl">Home</a>
|
|
<a href="#features" class="block nav-link text-3xl">Features</a>
|
|
<a href="#team" class="block nav-link text-3xl">Team</a>
|
|
<a href="#news" class="block nav-link text-3xl">News</a>
|
|
<a href="/?app=parking" class="btn-primary w-full justify-center text-2xl py-5">
|
|
Launch App
|
|
<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="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" style="background-image: url('../assets/Background_introduction_Section.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat;">
|
|
<!-- Background overlay for better text readability -->
|
|
<div class="absolute inset-0 bg-black/50"></div>
|
|
|
|
<!-- 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-full mx-auto px-4 sm:px-6 lg:px-12 xl:px-16 py-20 relative z-10">
|
|
<div class="bg-black/30 backdrop-blur-md rounded-3xl p-8 md:p-12 lg:p-16 xl:p-20 border border-white/20 shadow-2xl">
|
|
<div class="grid lg:grid-cols-2 gap-12 lg:gap-20 xl:gap-24 items-center">
|
|
<!-- Hero Content -->
|
|
<div class="hero-content text-white fade-in-up text-left lg:pr-8 xl:pr-12">
|
|
<div class="mb-8">
|
|
<span class="inline-flex items-center px-8 py-4 rounded-full text-2xl md:text-3xl font-medium bg-white/20 backdrop-blur-sm border border-white/30">
|
|
<span class="w-4 h-4 bg-green-400 rounded-full mr-4 animate-pulse"></span>
|
|
Live Parking Availability
|
|
</span>
|
|
</div>
|
|
<h1 class="text-5xl md:text-6xl lg:text-7xl xl:text-8xl font-bold mb-10 leading-tight text-white text-left">
|
|
Park Easy, <br>
|
|
<span class="text-white">
|
|
Move Breezy!
|
|
</span>
|
|
</h1>
|
|
<p class="text-xl md:text-2xl lg:text-3xl xl:text-4xl mb-12 text-white/90 leading-relaxed text-left max-w-4xl">
|
|
Download the app to experience LACA's services.
|
|
</p>
|
|
<div class="flex flex-col sm:flex-row gap-8 justify-start">
|
|
<img src="../assets/download_store.png" alt="Download on App Store and Google Play" class="w-auto h-20 md:h-24 lg:h-28 xl:h-32">
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Hero Image using existing assets -->
|
|
<div class="relative h-96 md:h-[450px] lg:h-[550px] xl:h-[600px] fade-in-up floating-animation flex items-center justify-center">
|
|
<img src="../assets/Phone_intro.png" alt="Location and Parking" class="max-h-full w-auto object-contain relative z-10 drop-shadow-2xl scale-90 lg:scale-100">
|
|
</div>
|
|
</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>
|
|
|
|
<!-- Features Section -->
|
|
<section id="features" class="section-padding bg-gray-50">
|
|
<div class="max-w-full mx-auto px-4 sm:px-6 lg:px-12 xl:px-16">
|
|
<div class="text-center mb-20 fade-in-up max-w-8xl mx-auto">
|
|
<h2 class="text-5xl md:text-6xl lg:text-7xl font-bold text-gray-900 mb-8">
|
|
What Makes <span style="color: var(--primary-color);">Laca City</span> Different ?
|
|
</h2>
|
|
<p class="text-3xl md:text-4xl text-gray-600 max-w-4xl mx-auto leading-relaxed">
|
|
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="feature-icon-primary">
|
|
<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 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
|
|
</svg>
|
|
</div>
|
|
<h3 class="text-4xl md:text-5xl font-bold text-gray-900 mb-6">Trend Predictions</h3>
|
|
<p class="text-xl md:text-2xl text-gray-600 leading-relaxed">
|
|
Predicts best parking times by trends.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="feature-card fade-in-up">
|
|
<div class="feature-icon-secondary">
|
|
<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-4xl md:text-5xl font-bold text-gray-900 mb-6">Real-Time Alerts</h3>
|
|
<p class="text-xl md:text-2xl text-gray-600 leading-relaxed">
|
|
Broadcasts fleeting spots in real time.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="feature-card fade-in-up">
|
|
<div class="feature-icon-accent">
|
|
<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 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path>
|
|
</svg>
|
|
</div>
|
|
<h3 class="text-4xl md:text-5xl font-bold text-gray-900 mb-6">Community Network</h3>
|
|
<p class="text-xl md:text-2xl text-gray-600 leading-relaxed">
|
|
Follow reliable spot-sharers.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Meet Our Team Section -->
|
|
<section id="team" class="section-padding bg-white">
|
|
<div class="max-w-full mx-auto px-4 sm:px-6 lg:px-12 xl:px-16">
|
|
<div class="text-center mb-20 fade-in-up max-w-8xl mx-auto">
|
|
<h2 class="text-5xl md:text-6xl lg:text-7xl font-bold text-gray-900 mb-8">
|
|
Meet Our <span class="hero-text-gradient">Team</span>
|
|
</h2>
|
|
<p class="text-3xl md:text-4xl text-gray-600 max-w-4xl mx-auto leading-relaxed">
|
|
The passionate innovators behind Laca City's smart parking revolution
|
|
</p>
|
|
</div>
|
|
|
|
<div class="max-w-8xl mx-auto">
|
|
<!-- Team Overview with Founding Team Photo -->
|
|
<div class="grid lg:grid-cols-2 gap-16 items-center fade-in-up mb-20">
|
|
<!-- Team Photo with Enhanced Effects -->
|
|
<div class="relative">
|
|
<div class="relative p-8">
|
|
<!-- Enhanced gradient blur background -->
|
|
<div class="absolute -inset-8 bg-gradient-to-br from-primary/25 via-secondary/15 to-accent/25 rounded-3xl blur-2xl"></div>
|
|
<div class="absolute -inset-4 bg-gradient-to-tl from-accent/20 via-primary/10 to-secondary/20 rounded-3xl blur-xl"></div>
|
|
<!-- Team image -->
|
|
<div class="relative">
|
|
<img src="../assets/Founding team_Laca City.jpg" alt="Laca City Founding Team" class="w-full h-auto rounded-3xl shadow-2xl relative z-10" onload="console.log('Team image loaded successfully')" onerror="console.log('Team image failed, trying fallback'); this.src='../assets/new_team_photo.jpg'">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Team Description -->
|
|
<div class="space-y-10">
|
|
<!-- Main Story with Icon -->
|
|
<div class="bg-white border border-red-200 p-8 rounded-3xl shadow-lg">
|
|
<div class="flex items-start space-x-6 mb-6">
|
|
<div class="flex-shrink-0">
|
|
<div class="w-16 h-16 bg-gradient-to-br from-red-500 to-red-600 rounded-2xl flex items-center justify-center shadow-lg">
|
|
<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>
|
|
</div>
|
|
<div class="flex-1">
|
|
<h3 class="text-2xl md:text-3xl font-bold text-gray-900 mb-4">Our Story</h3>
|
|
<p class="text-lg md:text-xl text-gray-700 leading-relaxed">
|
|
Laca City connects drivers to real-time parking, easing congestion, cutting emissions, and reclaiming sidewalks.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Founder Story with Icon -->
|
|
<div class="bg-white border border-red-200 p-8 rounded-3xl shadow-lg">
|
|
<div class="flex items-start space-x-6 mb-6">
|
|
<div class="flex-shrink-0">
|
|
<div class="w-16 h-16 bg-gradient-to-br from-red-600 to-red-700 rounded-2xl flex items-center justify-center shadow-lg">
|
|
<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="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<div class="flex-1">
|
|
<h3 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">Founded by Mai Nguyen</h3>
|
|
<p class="text-xl md:text-2xl text-gray-700 leading-relaxed">
|
|
After witnessing Vietnam's urban parking chaos, we're building smart, scalable solutions for today's cities—and the autonomous mobility of tomorrow.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Vision with Icon -->
|
|
<div class="bg-white border border-red-200 p-8 rounded-3xl shadow-lg">
|
|
<div class="flex items-start space-x-6">
|
|
<div class="flex-shrink-0">
|
|
<div class="w-16 h-16 bg-gradient-to-br from-orange-500 to-red-500 rounded-2xl flex items-center justify-center shadow-lg">
|
|
<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="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<div class="flex-1">
|
|
<h3 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">Our Vision</h3>
|
|
<p class="text-xl md:text-2xl text-gray-700 leading-relaxed">
|
|
Transforming urban mobility through innovative technology and sustainable solutions for smarter cities.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Key Features Grid -->
|
|
<div class="grid md:grid-cols-2 gap-6">
|
|
<div class="bg-white border border-red-200 p-6 rounded-2xl shadow-sm hover:shadow-md transition-shadow">
|
|
<div class="flex items-center space-x-4 mb-4">
|
|
<div class="w-12 h-12 bg-gradient-to-br from-red-500 to-red-600 rounded-xl flex items-center justify-center">
|
|
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
|
</svg>
|
|
</div>
|
|
<h4 class="text-xl md:text-2xl font-bold text-gray-900">Smart Solutions</h4>
|
|
</div>
|
|
<p class="text-lg md:text-xl text-gray-600 leading-relaxed">Real-time parking availability and seamless user experience</p>
|
|
</div>
|
|
|
|
<div class="bg-white border border-red-200 p-6 rounded-2xl shadow-sm hover:shadow-md transition-shadow">
|
|
<div class="flex items-center space-x-4 mb-4">
|
|
<div class="w-12 h-12 bg-gradient-to-br from-orange-500 to-red-500 rounded-xl flex items-center justify-center">
|
|
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9v-9m0-9v9"></path>
|
|
</svg>
|
|
</div>
|
|
<h4 class="text-xl md:text-2xl font-bold text-gray-900">Sustainable Future</h4>
|
|
</div>
|
|
<p class="text-lg md:text-xl text-gray-600 leading-relaxed">Reducing emissions and building greener urban environments</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Individual Team Members Section -->
|
|
<div class="fade-in-up">
|
|
<div class="text-center mb-16">
|
|
<h3 class="text-5xl md:text-6xl font-bold text-gray-900 mb-6">
|
|
Key Team <span class="hero-text-gradient">Members</span>
|
|
</h3>
|
|
<p class="text-2xl md:text-3xl text-gray-600 max-w-3xl mx-auto leading-relaxed">
|
|
Meet the dedicated professionals driving innovation at Laca City
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Team Members Grid -->
|
|
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-12 max-w-8xl mx-auto">
|
|
<!-- Founder & CEO -->
|
|
<div class="bg-white rounded-3xl shadow-xl p-8 border border-red-100 hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2">
|
|
<div class="text-center">
|
|
<!-- Profile Image with Fancy Border -->
|
|
<div class="w-64 h-64 mx-auto mb-8 relative">
|
|
<!-- Fancy animated border background -->
|
|
<div class="absolute inset-0 bg-gradient-to-r from-red-400 via-red-500 to-red-600 rounded-full animate-pulse"></div>
|
|
<div class="absolute inset-2 bg-gradient-to-br from-red-300 via-pink-300 to-red-400 rounded-full opacity-70"></div>
|
|
<div class="absolute inset-4 bg-white rounded-full shadow-inner"></div>
|
|
|
|
<!-- Profile Image -->
|
|
<img src="../assets/mai_nguyen.png" alt="Mai Nguyen" class="absolute inset-6 w-52 h-52 rounded-full object-cover shadow-2xl border-4 border-white">
|
|
|
|
<!-- Role Badge -->
|
|
<div class="absolute -bottom-2 left-1/2 transform -translate-x-1/2 bg-gradient-to-r from-red-500 to-red-600 text-white px-6 py-2 rounded-full text-lg font-bold shadow-lg">
|
|
Founder
|
|
</div>
|
|
</div>
|
|
<h4 class="text-3xl md:text-4xl font-bold text-gray-900 mb-2">Mai Nguyen</h4>
|
|
<p class="text-xl text-red-500 font-semibold mb-4">Founder</p>
|
|
<p class="text-lg text-gray-600 leading-relaxed mb-6">
|
|
MIT-trained urban planner with global experience (City of Boston, World Bank), guiding Laca City's strategy for sustainable, impactful urban tech.
|
|
</p>
|
|
<!-- Social Links -->
|
|
<div class="flex justify-center space-x-4">
|
|
<a href="#" class="w-12 h-12 bg-gray-100 hover:bg-blue-600 rounded-full flex items-center justify-center transition-colors duration-300 group shadow-lg">
|
|
<svg class="w-6 h-6 text-gray-600 group-hover:text-white" 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>
|
|
</div>
|
|
|
|
<!-- Head of Operations -->
|
|
<div class="bg-white rounded-3xl shadow-xl p-8 border border-red-100 hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2">
|
|
<div class="text-center">
|
|
<!-- Profile Image with Fancy Border -->
|
|
<div class="w-64 h-64 mx-auto mb-8 relative">
|
|
<!-- Fancy animated border background -->
|
|
<div class="absolute inset-0 bg-gradient-to-r from-green-400 via-green-500 to-green-600 rounded-full animate-pulse"></div>
|
|
<div class="absolute inset-2 bg-gradient-to-br from-green-300 via-emerald-300 to-green-400 rounded-full opacity-70"></div>
|
|
<div class="absolute inset-4 bg-white rounded-full shadow-inner"></div>
|
|
|
|
<!-- Profile Image -->
|
|
<img src="../assets/phung_do.png" alt="Phung Do" class="absolute inset-6 w-52 h-52 rounded-full object-cover shadow-2xl border-4 border-white">
|
|
|
|
<!-- Role Badge -->
|
|
<div class="absolute -bottom-2 left-1/2 transform -translate-x-1/2 bg-gradient-to-r from-green-500 to-green-600 text-white px-6 py-2 rounded-full text-lg font-bold shadow-lg">
|
|
Operations
|
|
</div>
|
|
</div>
|
|
<h4 class="text-3xl md:text-4xl font-bold text-gray-900 mb-2">Phung Do</h4>
|
|
<p class="text-xl text-green-500 font-semibold mb-4">Co-Founder & CPO/COO</p>
|
|
<p class="text-lg text-gray-600 leading-relaxed mb-6">
|
|
Mapping expert (Mercedes-Benz, Grab, Be Group) and OpenStreetMap Vietnam admin, building geospatial systems that make parking smarter and streets more efficient.
|
|
</p>
|
|
<!-- Social Links -->
|
|
<div class="flex justify-center space-x-4">
|
|
<a href="#" class="w-12 h-12 bg-gray-100 hover:bg-blue-600 rounded-full flex items-center justify-center transition-colors duration-300 group shadow-lg">
|
|
<svg class="w-6 h-6 text-gray-600 group-hover:text-white" 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>
|
|
</div>
|
|
|
|
<!-- Product Manager -->
|
|
<div class="bg-white rounded-3xl shadow-xl p-8 border border-red-100 hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2">
|
|
<div class="text-center">
|
|
<!-- Profile Image with Fancy Border -->
|
|
<div class="w-64 h-64 mx-auto mb-8 relative">
|
|
<!-- Fancy animated border background -->
|
|
<div class="absolute inset-0 bg-gradient-to-r from-purple-400 via-purple-500 to-purple-600 rounded-full animate-pulse"></div>
|
|
<div class="absolute inset-2 bg-gradient-to-br from-purple-300 via-violet-300 to-purple-400 rounded-full opacity-70"></div>
|
|
<div class="absolute inset-4 bg-white rounded-full shadow-inner"></div>
|
|
|
|
<!-- Profile Image -->
|
|
<img src="../assets/quang_tue.png" alt="Quang Tue" class="absolute inset-6 w-52 h-52 rounded-full object-cover shadow-2xl border-4 border-white">
|
|
|
|
<!-- Role Badge -->
|
|
<div class="absolute -bottom-2 left-1/2 transform -translate-x-1/2 bg-gradient-to-r from-purple-500 to-purple-600 text-white px-6 py-2 rounded-full text-lg font-bold shadow-lg">
|
|
Product
|
|
</div>
|
|
</div>
|
|
<h4 class="text-3xl md:text-4xl font-bold text-gray-900 mb-2">Tue Le-quang</h4>
|
|
<p class="text-xl text-purple-500 font-semibold mb-4">CMO</p>
|
|
<p class="text-lg text-gray-600 leading-relaxed mb-6">
|
|
Data journalist turned storyteller (VnExpress, Fulbright), connecting Laca City to people through maps, media, and metrics.
|
|
</p>
|
|
<!-- Social Links -->
|
|
<div class="flex justify-center space-x-4">
|
|
<a href="#" class="w-12 h-12 bg-gray-100 hover:bg-blue-600 rounded-full flex items-center justify-center transition-colors duration-300 group shadow-lg">
|
|
<svg class="w-6 h-6 text-gray-600 group-hover:text-white" 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>
|
|
</div>
|
|
|
|
<!-- CTO -->
|
|
<div class="bg-white rounded-3xl shadow-xl p-8 border border-red-100 hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2">
|
|
<div class="text-center">
|
|
<!-- Profile Image with Fancy Border -->
|
|
<div class="w-64 h-64 mx-auto mb-8 relative">
|
|
<!-- Fancy animated border background -->
|
|
<div class="absolute inset-0 bg-gradient-to-r from-blue-400 via-blue-500 to-blue-600 rounded-full animate-pulse"></div>
|
|
<div class="absolute inset-2 bg-gradient-to-br from-blue-300 via-cyan-300 to-blue-400 rounded-full opacity-70"></div>
|
|
<div class="absolute inset-4 bg-white rounded-full shadow-inner"></div>
|
|
|
|
<!-- Profile Image -->
|
|
<img src="../assets/phong_pham.png" alt="Phong Pham" class="absolute inset-6 w-52 h-52 rounded-full object-cover shadow-2xl border-4 border-white">
|
|
|
|
<!-- Role Badge -->
|
|
<div class="absolute -bottom-2 left-1/2 transform -translate-x-1/2 bg-gradient-to-r from-blue-500 to-blue-600 text-white px-6 py-2 rounded-full text-lg font-bold shadow-lg">
|
|
Tech Lead
|
|
</div>
|
|
</div>
|
|
<h4 class="text-3xl md:text-4xl font-bold text-gray-900 mb-2">Phong Pham</h4>
|
|
<p class="text-xl text-blue-500 font-semibold mb-4">Head of Development</p>
|
|
<p class="text-lg text-gray-600 leading-relaxed mb-6">
|
|
Physicist and lead coder, designing ML engines and backend systems that turn raw data into seamless urban mobility experiences.
|
|
</p>
|
|
<!-- Social Links -->
|
|
<div class="flex justify-center space-x-4">
|
|
<a href="#" class="w-12 h-12 bg-gray-100 hover:bg-blue-600 rounded-full flex items-center justify-center transition-colors duration-300 group shadow-lg">
|
|
<svg class="w-6 h-6 text-gray-600 group-hover:text-white" 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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- News Section -->
|
|
<section id="news" class="py-20 bg-gray-50">
|
|
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<!-- Section Header -->
|
|
<div class="text-center mb-16 fade-in-up">
|
|
<h2 class="text-4xl md:text-5xl lg:text-6xl font-bold text-gray-900 mb-6">
|
|
Latest <span class="hero-text-gradient">News</span>
|
|
</h2>
|
|
<p class="text-xl md:text-2xl text-gray-600 max-w-3xl mx-auto">
|
|
Stay updated with our events
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Event Card -->
|
|
<div class="bg-white rounded-3xl shadow-lg overflow-hidden fade-in-up max-w-3xl mx-auto">
|
|
<!-- Event Image -->
|
|
<div class="aspect-w-16 aspect-h-9">
|
|
<img src="../assets/AiBootcamp_event.png" alt="Google LACA City AI Bootcamp Event" class="w-full h-full object-cover">
|
|
</div>
|
|
|
|
<!-- Event Content -->
|
|
<div class="p-8">
|
|
<h3 class="text-2xl md:text-3xl font-bold text-gray-900 mb-6">
|
|
Laca City in Google AI Bootcamp HCMC
|
|
</h3>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Partners Section -->
|
|
<section class="section-padding hero-gradient">
|
|
<div class="max-w-full mx-auto px-4 sm:px-6 lg:px-12 xl:px-16">
|
|
<div class="max-w-7xl mx-auto fade-in-up">
|
|
<!-- Partners Grid -->
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-12 md:gap-16 max-w-6xl mx-auto">
|
|
<!-- Partner 1 - Ford Philanthropy -->
|
|
<div class="bg-white p-12 rounded-2xl shadow-sm hover:shadow-md transition-all duration-300 flex items-center justify-center group">
|
|
<img src="../assets/logo_partners/Ford_Philanthropy_Logo.jpeg" alt="Ford Philanthropy" class="h-40 md:h-52 lg:h-64 xl:h-72 w-auto object-contain opacity-70 group-hover:opacity-100 transition-opacity duration-300">
|
|
</div>
|
|
|
|
<!-- Partner 2 - GIST -->
|
|
<div class="bg-white p-12 rounded-2xl shadow-sm hover:shadow-md transition-all duration-300 flex items-center justify-center group">
|
|
<img src="../assets/logo_partners/GIST_logo_445_1.jpeg" alt="GIST" class="h-40 md:h-52 lg:h-64 xl:h-72 w-auto object-contain opacity-70 group-hover:opacity-100 transition-opacity duration-300">
|
|
</div>
|
|
|
|
<!-- Partner 3 - Watson -->
|
|
<div class="bg-white p-12 rounded-2xl shadow-sm hover:shadow-md transition-all duration-300 flex items-center justify-center group">
|
|
<img src="../assets/logo_partners/watson.png" alt="Watson" class="h-40 md:h-52 lg:h-64 xl:h-72 w-auto object-contain opacity-70 group-hover:opacity-100 transition-opacity duration-300">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Footer -->
|
|
<footer id="contact" class="bg-black text-white section-padding">
|
|
<div class="max-w-full mx-auto px-4 sm:px-6 lg:px-12 xl:px-16">
|
|
<div class="grid md:grid-cols-4 gap-12 mb-16 max-w-8xl mx-auto">
|
|
<div class="col-span-2">
|
|
<div class="flex items-center space-x-4 mb-8">
|
|
<img src="../assets/Footer_page_logo.png" alt="Laca City Logo" class="h-16 w-auto">
|
|
</div>
|
|
<p class="text-xl md:text-2xl text-gray-200 leading-relaxed mb-8 max-w-lg">
|
|
Revolutionizing urban parking with smart technology, real-time data, and user-friendly solutions for Ho Chi Minh City.
|
|
</p>
|
|
|
|
<!-- Social Media Links -->
|
|
<div class="flex space-x-6">
|
|
<a href="#" class="group bg-gray-800 hover:bg-red-500 p-4 rounded-2xl transition-all duration-300 transform hover:scale-110">
|
|
<!-- Facebook Icon -->
|
|
<svg class="w-8 h-8 text-gray-300 group-hover:text-white transition-colors duration-300" fill="currentColor" viewBox="0 0 24 24">
|
|
<path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
|
|
</svg>
|
|
</a>
|
|
<a href="#" class="group bg-gray-800 hover:bg-blue-600 p-4 rounded-2xl transition-all duration-300 transform hover:scale-110">
|
|
<!-- LinkedIn Icon -->
|
|
<svg class="w-8 h-8 text-gray-300 group-hover:text-white transition-colors duration-300" 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>
|
|
<a href="#" class="group bg-gray-800 hover:bg-red-500 p-4 rounded-2xl transition-all duration-300 transform hover:scale-110">
|
|
<!-- Instagram Icon -->
|
|
<svg class="w-8 h-8 text-gray-300 group-hover:text-white transition-colors duration-300" fill="currentColor" viewBox="0 0 24 24">
|
|
<path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/>
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<h4 class="text-2xl md:text-3xl font-bold mb-8 text-white">Quick Links</h4>
|
|
<ul class="space-y-6">
|
|
<li><a href="#home" class="footer-link text-xl hover:text-red-500 transition-colors duration-300">Home</a></li>
|
|
<li><a href="#features" class="footer-link text-xl hover:text-red-500 transition-colors duration-300">Features</a></li>
|
|
<li><a href="#team" class="footer-link text-xl hover:text-red-500 transition-colors duration-300">Team</a></li>
|
|
<li><a href="#news" class="footer-link text-xl hover:text-red-500 transition-colors duration-300">News</a></li>
|
|
<li><a href="/?app=parking" class="footer-link text-xl hover:text-red-500 transition-colors duration-300">Launch App</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div>
|
|
<h4 class="text-2xl md:text-3xl font-bold mb-8 text-white">Contact Info</h4>
|
|
<div class="space-y-6">
|
|
<div class="flex items-center space-x-4">
|
|
<div class="w-12 h-12 bg-red-500 rounded-xl flex items-center justify-center">
|
|
<svg class="w-6 h-6 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>
|
|
<span class="text-xl text-gray-200">Ho Chi Minh City, Vietnam</span>
|
|
</div>
|
|
<div class="flex items-center space-x-4">
|
|
<div class="w-12 h-12 bg-red-500 rounded-xl flex items-center justify-center">
|
|
<svg class="w-6 h-6 text-white" 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>
|
|
</div>
|
|
<span class="text-xl text-gray-200">info@lacacity.com</span>
|
|
</div>
|
|
<div class="flex items-center space-x-4">
|
|
<div class="w-12 h-12 bg-red-500 rounded-xl flex items-center justify-center">
|
|
<svg class="w-6 h-6 text-white" 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>
|
|
</div>
|
|
<span class="text-xl text-gray-200">+84 123 456 789</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="border-t border-gray-700 pt-12 flex flex-col md:flex-row justify-between items-center">
|
|
<p class="text-gray-300 text-lg mb-4 md:mb-0">
|
|
© 2025 Laca City. All rights reserved.
|
|
</p>
|
|
<div class="flex space-x-8">
|
|
<a href="#" class="text-gray-300 hover:text-red-500 text-lg transition-colors duration-300">Privacy Policy</a>
|
|
<a href="#" class="text-gray-300 hover:text-red-500 text-lg transition-colors duration-300">Terms of Service</a>
|
|
<a href="#" class="text-gray-300 hover:text-red-500 text-lg 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>
|