|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Japanese Motors - Premium Automotive Excellence</title> |
|
|
<link rel="icon" type="image/x-icon" href="/static/favicon.ico"> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"> |
|
|
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
|
|
<script src="https://unpkg.com/feather-icons"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script> |
|
|
<style> |
|
|
.hero-section { |
|
|
background: linear-gradient(135deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.3) 100%); |
|
|
} |
|
|
.car-card:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); |
|
|
} |
|
|
.nav-link:hover { |
|
|
color: #ef4444; |
|
|
} |
|
|
.floating-chat { |
|
|
position: fixed; |
|
|
bottom: 20px; |
|
|
right: 20px; |
|
|
z-index: 1000; |
|
|
} |
|
|
.sticky-contact { |
|
|
position: fixed; |
|
|
bottom: 20px; |
|
|
left: 20px; |
|
|
z-index: 1000; |
|
|
} |
|
|
.notification-bell { |
|
|
position: fixed; |
|
|
top: 20px; |
|
|
right: 20px; |
|
|
z-index: 1000; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-100 font-sans"> |
|
|
|
|
|
<div class="notification-bell"> |
|
|
<div class="relative"> |
|
|
<button id="notificationBtn" class="bg-red-500 text-white p-3 rounded-full shadow-lg hover:bg-red-600 transition"> |
|
|
<i data-feather="bell"></i> |
|
|
<span class="absolute top-0 right-0 bg-white text-red-500 rounded-full w-5 h-5 flex items-center justify-center text-xs font-bold">3</span> |
|
|
</button> |
|
|
<div id="notificationDropdown" class="hidden absolute right-0 mt-2 w-72 bg-white rounded-md shadow-lg py-1 z-50"> |
|
|
<div class="px-4 py-2 border-b"> |
|
|
<p class="font-bold">Notifications</p> |
|
|
</div> |
|
|
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"> |
|
|
<div class="flex items-center"> |
|
|
<div class="flex-shrink-0"> |
|
|
<i data-feather="dollar-sign" class="text-green-500"></i> |
|
|
</div> |
|
|
<div class="ml-3"> |
|
|
<p class="font-medium">Price drop on Nissan GT-R</p> |
|
|
<p class="text-xs text-gray-500">2 hours ago</p> |
|
|
</div> |
|
|
</div> |
|
|
</a> |
|
|
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"> |
|
|
<div class="flex items-center"> |
|
|
<div class="flex-shrink-0"> |
|
|
<i data-feather="truck" class="text-blue-500"></i> |
|
|
</div> |
|
|
<div class="ml-3"> |
|
|
<p class="font-medium">New arrivals from Japan</p> |
|
|
<p class="text-xs text-gray-500">5 hours ago</p> |
|
|
</div> |
|
|
</div> |
|
|
</a> |
|
|
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"> |
|
|
<div class="flex items-center"> |
|
|
<div class="flex-shrink-0"> |
|
|
<i data-feather="clock" class="text-yellow-500"></i> |
|
|
</div> |
|
|
<div class="ml-3"> |
|
|
<p class="font-medium">Limited time offer ending soon</p> |
|
|
<p class="text-xs text-gray-500">1 day ago</p> |
|
|
</div> |
|
|
</div> |
|
|
</a> |
|
|
<div class="px-4 py-2 border-t"> |
|
|
<a href="#" class="text-xs text-red-500 hover:underline">View all notifications</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<nav class="bg-white shadow-lg fixed w-full z-10"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="flex justify-between h-16"> |
|
|
<div class="flex items-center"> |
|
|
<a href="#" class="flex-shrink-0 flex items-center"> |
|
|
<i data-feather="zap" class="h-8 w-8 text-red-500"></i> |
|
|
<span class="ml-2 text-xl font-bold text-gray-900">JAPANESE MOTORS</span> |
|
|
</a> |
|
|
</div> |
|
|
<div class="hidden md:flex items-center space-x-8"> |
|
|
<a href="index.html" class="nav-link text-gray-700 hover:text-red-500 px-3 py-2 rounded-md text-sm font-medium">Home</a> |
|
|
<a href="1a/gallery.html" class="nav-link text-gray-700 hover:text-red-500 px-3 py-2 rounded-md text-sm font-medium">Inventory</a> |
|
|
<a href="1aservices.html" class="nav-link text-gray-700 hover:text-red-500 px-3 py-2 rounded-md text-sm font-medium">Services</a> |
|
|
<a href="1aabout.html" class="nav-link text-red-500 px-3 py-2 rounded-md text-sm font-medium">About</a> |
|
|
<a href="1acontact.html" class="bg-red-500 hover:bg-red-600 text-white px-4 py-2 rounded-md text-sm font-medium transition duration-300">Contact</a> |
|
|
<a href="ac1/index.html" class="bg-red-500 hover:bg-red-600 text-white px-7 py-2 rounded-md text-sm font-medium transition duration-300"> |
|
|
<i data-feather="user" class="w-4 h-4 mr-0"></i> Sign In |
|
|
</a> |
|
|
</div> |
|
|
<div class="md:hidden flex items-center"> |
|
|
<button class="text-gray-500 hover:text-gray-900 focus:outline-none"> |
|
|
<i data-feather="menu"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
|
|
|
<div class="hero-section relative pt-24 pb-32 flex content-center items-center justify-center min-h-screen"> |
|
|
<div class="absolute top-0 w-full h-full bg-center bg-cover parallax" style="background-image: url('https://images.unsplash.com/photo-1592198084033-aade902d1aae?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1920&q=80')"> |
|
|
<span class="w-full h-full absolute opacity-70 bg-black"></span> |
|
|
</div> |
|
|
<div class="container relative mx-auto"> |
|
|
<div class="items-center flex flex-wrap"> |
|
|
<div class="w-full lg:w-6/12 px-4 ml-auto mr-auto text-center" data-aos="fade-up"> |
|
|
<h1 class="text-white font-semibold text-5xl mb-4">Experience Japanese Engineering</h1> |
|
|
<p class="mt-4 text-lg text-gray-300">Premium imported vehicles with unmatched performance and reliability</p> |
|
|
<div class="mt-10"> |
|
|
<a href="1a/gallery.html" class="bg-red-500 hover:bg-red-600 text-white font-bold py-3 px-8 rounded-full mr-4 transition duration-300">Browse Inventory</a> |
|
|
<a href="1a/services.html" class="border-2 border-white hover:bg-white hover:text-black text-white font-bold py-3 px-8 rounded-full transition duration-300">Learn More</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<section class="py-20 bg-white"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="text-center mb-16" data-aos="fade-up"> |
|
|
<h2 class="text-3xl font-bold text-gray-800 mb-4">Featured Vehicles</h2> |
|
|
<div class="w-20 h-1 bg-red-500 mx-auto"></div> |
|
|
<p class="mt-4 text-gray-600 max-w-2xl mx-auto">Discover our curated selection of premium Japanese automobiles</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> |
|
|
|
|
|
<div class="car-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300" data-aos="fade-up" data-aos-delay="100"> |
|
|
<div class="relative overflow-hidden h-64"> |
|
|
<img class="w-full h-full object-cover" src="http://static.photos/automotive/640x360/1" alt="Nissan GT-R"> |
|
|
<div class="absolute top-4 right-4 bg-red-500 text-white px-3 py-1 rounded-full text-xs font-bold">NEW</div> |
|
|
<div class="absolute bottom-4 left-4"> |
|
|
<button class="bg-black bg-opacity-70 text-white px-3 py-1 rounded-full text-xs flex items-center hover:bg-opacity-90"> |
|
|
<i data-feather="maximize-2" class="w-3 h-3 mr-1"></i> 360° View |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<h3 class="text-xl font-bold text-gray-800 mb-2">Nissan GT-R</h3> |
|
|
<div class="flex items-center text-gray-600 mb-4"> |
|
|
<i data-feather="clock" class="mr-2"></i> |
|
|
<span>2023 Model</span> |
|
|
<i data-feather="map-pin" class="ml-4 mr-2"></i> |
|
|
<span>Tokyo</span> |
|
|
</div> |
|
|
<p class="text-gray-700 mb-4">The legendary Godzilla with 565HP twin-turbo V6 engine.</p> |
|
|
<div class="flex justify-between items-center"> |
|
|
<span class="text-2xl font-bold text-gray-900">$112,000</span> |
|
|
<button class="view-details-btn bg-red-500 hover:bg-red-600 text-white px-4 py-2 rounded-md text-sm font-medium transition duration-300" data-car-id="1">View Details</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="car-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300" data-aos="fade-up" data-aos-delay="200"> |
|
|
<div class="relative overflow-hidden h-64"> |
|
|
<img class="w-full h-full object-cover" src="http://static.photos/automotive/640x360/2" alt="Toyota Supra"> |
|
|
<div class="absolute bottom-4 left-4"> |
|
|
<button class="bg-black bg-opacity-70 text-white px-3 py-1 rounded-full text-xs flex items-center hover:bg-opacity-90"> |
|
|
<i data-feather="maximize-2" class="w-3 h-3 mr-1"></i> 360° View |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<h3 class="text-xl font-bold text-gray-800 mb-2">Toyota Supra</h3> |
|
|
<div class="flex items-center text-gray-600 mb-4"> |
|
|
<i data-feather="clock" class="mr-2"></i> |
|
|
<span>2023 Model</span> |
|
|
<i data-feather="map-pin" class="ml-4 mr-2"></i> |
|
|
<span>Osaka</span> |
|
|
</div> |
|
|
<p class="text-gray-700 mb-4">The iconic sports car returns with 382HP turbocharged inline-6.</p> |
|
|
<div class="flex justify-between items-center"> |
|
|
<span class="text-2xl font-bold text-gray-900">$52,000</span> |
|
|
<button class="view-details-btn bg-red-500 hover:bg-red-600 text-white px-4 py-2 rounded-md text-sm font-medium transition duration-300" data-car-id="2">View Details</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="car-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300" data-aos="fade-up" data-aos-delay="300"> |
|
|
<div class="relative overflow-hidden h-64"> |
|
|
<img class="w-full h-full object-cover" src="http://static.photos/automotive/640x360/3" alt="Honda NSX"> |
|
|
<div class="absolute top-4 right-4 bg-red-500 text-white px-3 py-1 rounded-full text-xs font-bold">LIMITED</div> |
|
|
<div class="absolute bottom-4 left-4"> |
|
|
<button class="bg-black bg-opacity-70 text-white px-3 py-1 rounded-full text-xs flex items-center hover:bg-opacity-90"> |
|
|
<i data-feather="maximize-2" class="w-3 h-3 mr-1"></i> 360° View |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<h3 class="text-xl font-bold text-gray-800 mb-2">Honda NSX</h3> |
|
|
<div class="flex items-center text-gray-600 mb-4"> |
|
|
<i data-feather="clock" class="mr-2"></i> |
|
|
<span>2023 Model</span> |
|
|
<i data-feather="map-pin" class="ml-4 mr-2"></i> |
|
|
<span>Yokohama</span> |
|
|
</div> |
|
|
<p class="text-gray-700 mb-4">573HP hybrid supercar with cutting-edge technology.</p> |
|
|
<div class="flex justify-between items-center"> |
|
|
<span class="text-2xl font-bold text-gray-900">$169,000</span> |
|
|
<button class="view-details-btn bg-red-500 hover:bg-red-600 text-white px-4 py-2 rounded-md text-sm font-medium transition duration-300" data-car-id="3">View Details</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="text-center mt-12"> |
|
|
<a href="1a/gallery.html" class="inline-flex items-center text-red-500 hover:text-red-600 font-medium"> |
|
|
View Full Inventory |
|
|
<i data-feather="arrow-right" class="ml-2"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<div id="carDetailsModal" class="hidden fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50 p-4"> |
|
|
<div class="bg-white rounded-lg max-w-4xl w-full max-h-screen overflow-y-auto"> |
|
|
<div class="flex justify-between items-center p-6 border-b"> |
|
|
<h3 id="modalCarTitle" class="text-2xl font-bold text-gray-800">Car Title</h3> |
|
|
<button id="closeModal" class="text-gray-500 hover:text-gray-700"> |
|
|
<i data-feather="x" class="w-6 h-6"></i> |
|
|
</button> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6"> |
|
|
<div> |
|
|
<img id="modalCarImage" src="" alt="Car Image" class="w-full h-64 object-cover rounded-lg mb-4"> |
|
|
<div class="grid grid-cols-3 gap-2"> |
|
|
<img src="http://static.photos/automotive/640x360/1" alt="Thumbnail 1" class="thumbnail w-full h-20 object-cover rounded cursor-pointer"> |
|
|
<img src="http://static.photos/automotive/640x360/2" alt="Thumbnail 2" class="thumbnail w-full h-20 object-cover rounded cursor-pointer"> |
|
|
<img src="http://static.photos/automotive/640x360/3" alt="Thumbnail 3" class="thumbnail w-full h-20 object-cover rounded cursor-pointer"> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<div class="flex justify-between items-start mb-4"> |
|
|
<div> |
|
|
<span id="modalCarPrice" class="text-2xl font-bold text-red-500">$112,000</span> |
|
|
<span id="modalCarDiscount" class="text-sm text-green-600 ml-2">$6,000 OFF</span> |
|
|
</div> |
|
|
<div class="text-sm text-gray-600"> |
|
|
<div class="flex items-center"> |
|
|
<i data-feather="clock" class="w-4 h-4 mr-1"></i> |
|
|
<span id="modalCarYear">2023 Model</span> |
|
|
</div> |
|
|
<div class="flex items-center mt-1"> |
|
|
<i data-feather="map-pin" class="w-4 h-4 mr-1"></i> |
|
|
<span id="modalCarLocation">Tokyo, Japan</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<p id="modalCarDescription" class="text-gray-700 mb-6">Car description goes here.</p> |
|
|
|
|
|
<div class="grid grid-cols-2 gap-4 mb-6"> |
|
|
<div class="bg-gray-100 p-3 rounded"> |
|
|
<div class="text-sm text-gray-600">Engine</div> |
|
|
<div id="modalCarEngine" class="font-semibold">3.8L Twin-Turbo V6</div> |
|
|
</div> |
|
|
<div class="bg-gray-100 p-3 rounded"> |
|
|
<div class="text-sm text-gray-600">Horsepower</div> |
|
|
<div id="modalCarHorsepower" class="font-semibold">565 HP</div> |
|
|
</div> |
|
|
<div class="bg-gray-100 p-3 rounded"> |
|
|
<div class="text-sm text-gray-600">Transmission</div> |
|
|
<div id="modalCarTransmission" class="font-semibold">6-Speed Dual Clutch</div> |
|
|
</div> |
|
|
<div class="bg-gray-100 p-3 rounded"> |
|
|
<div class="text-sm text-gray-600">Mileage</div> |
|
|
<div id="modalCarMileage" class="font-semibold">12,000 km</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="border-t pt-4"> |
|
|
<h4 class="font-semibold mb-2">Financing Options</h4> |
|
|
<div class="grid grid-cols-2 gap-4"> |
|
|
<div> |
|
|
<div class="text-sm text-gray-600">Minimum Deposit</div> |
|
|
<div id="modalCarDeposit" class="font-semibold">$15,000</div> |
|
|
</div> |
|
|
<div> |
|
|
<div class="text-sm text-gray-600">36 Months</div> |
|
|
<div id="modalCarFinance36" class="font-semibold">$2,850/mo</div> |
|
|
</div> |
|
|
<div> |
|
|
<div class="text-sm text-gray-600">60 Months</div> |
|
|
<div id="modalCarFinance60" class="font-semibold">$1,890/mo</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-6 border-t flex justify-end space-x-4"> |
|
|
<button class="px-6 py-2 border border-red-500 text-red-500 rounded-md hover:bg-red-50 transition">Save</button> |
|
|
<button class="px-6 py-2 bg-red-500 text-white rounded-md hover:bg-red-600 transition">Contact Sales</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<section class="py-20 bg-gray-100"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="text-center mb-16" data-aos="fade-up"> |
|
|
<h2 class="text-3xl font-bold text-gray-800 mb-4">Why Choose Japanese Motors</h2> |
|
|
<div class="w-20 h-1 bg-red-500 mx-auto"></div> |
|
|
<p class="mt-4 text-gray-600 max-w-2xl mx-auto">Our commitment to excellence sets us apart</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
|
|
<div class="bg-white p-8 rounded-lg shadow-md text-center" data-aos="fade-up" data-aos-delay="100"> |
|
|
<div class="w-16 h-16 bg-red-100 rounded-full flex items-center justify-center mx-auto mb-4"> |
|
|
<i data-feather="check-circle" class="text-red-500 w-8 h-8"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold text-gray-800 mb-3">Authentic Imports</h3> |
|
|
<p class="text-gray-600">Directly sourced from Japan with full documentation and service history.</p> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white p-8 rounded-lg shadow-md text-center" data-aos="fade-up" data-aos-delay="200"> |
|
|
<div class="w-16 h-16 bg-red-100 rounded-full flex items-center justify-center mx-auto mb-4"> |
|
|
<i data-feather="shield" class="text-red-500 w-8 h-8"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold text-gray-800 mb-3">Rigorous Inspection</h3> |
|
|
<p class="text-gray-600">Each vehicle undergoes 150-point inspection by certified technicians.</p> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white p-8 rounded-lg shadow-md text-center" data-aos="fade-up" data-aos-delay="300"> |
|
|
<div class="w-16 h-16 bg-red-100 rounded-full flex items-center justify-center mx-auto mb-4"> |
|
|
<i data-feather="award" class="text-red-500 w-8 h-8"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold text-gray-800 mb-3">Premium Warranty</h3> |
|
|
<p class="text-gray-600">Comprehensive 3-year warranty on all vehicles for your peace of mind.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-16 bg-gray-800 text-white"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="max-w-3xl mx-auto text-center"> |
|
|
<h2 class="text-3xl font-bold mb-6" data-aos="fade-up">Stay Updated</h2> |
|
|
<p class="mb-8 text-gray-300" data-aos="fade-up" data-aos-delay="100">Subscribe to our newsletter for exclusive offers, new arrivals, and automotive insights.</p> |
|
|
<form class="flex flex-col sm:flex-row gap-4 justify-center" data-aos="fade-up" data-aos-delay="200"> |
|
|
<input type="email" placeholder="Your email address" class="px-4 py-3 rounded-md w-full sm:w-96 text-gray-800 focus:outline-none focus:ring-2 focus:ring-red-500"> |
|
|
<button type="submit" class="bg-red-500 hover:bg-red-600 text-white font-bold py-3 px-6 rounded-md transition duration-300">Subscribe</button> |
|
|
</form> |
|
|
<div class="mt-4 flex items-center justify-center"> |
|
|
<input type="checkbox" id="notificationOptIn" class="mr-2"> |
|
|
<label for="notificationOptIn" class="text-sm text-gray-300">Also receive push notifications for price drops</label> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-20 bg-white"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="text-center mb-16" data-aos="fade-up"> |
|
|
<h2 class="text-3xl font-bold text-gray-800 mb-4">What Our Clients Say</h2> |
|
|
<div class="w-20 h-1 bg-red-500 mx-auto"></div> |
|
|
<p class="mt-4 text-gray-600 max-w-2xl mx-auto">Hear from our satisfied customers worldwide</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-8"> |
|
|
<div class="bg-gray-50 p-8 rounded-lg" data-aos="fade-up" data-aos-delay="100"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="w-12 h-12 rounded-full overflow-hidden mr-4"> |
|
|
<img src="http://static.photos/people/200x200/1" alt="Michael R." class="w-full h-full object-cover"> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-bold text-gray-800">Michael R.</h4> |
|
|
<div class="flex text-yellow-400"> |
|
|
<i data-feather="star" class="w-4 h-4 fill-current"></i> |
|
|
<i data-feather="star" class="w-4 h-4 fill-current"></i> |
|
|
<i data-feather="star" class="w-4 h-4 fill-current"></i> |
|
|
<i data-feather="star" class="w-4 h-4 fill-current"></i> |
|
|
<i data-feather="star" class="w-4 h-4 fill-current"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-gray-600 italic">"The team at Japanese Motors made importing my dream GT-R from Japan seamless. The car arrived in perfect condition, exactly as described. Their attention to detail is unmatched."</p> |
|
|
<div class="mt-4 flex items-center text-sm text-gray-500"> |
|
|
<i data-feather="thumbs-up" class="mr-1"></i> |
|
|
<span>32 people found this helpful</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-gray-50 p-8 rounded-lg" data-aos="fade-up" data-aos-delay="200"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="w-12 h-12 rounded-full overflow-hidden mr-4"> |
|
|
<img src="http://static.photos/people/200x200/2" alt="Sarah K." class="w-full h-full object-cover"> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-bold text-gray-800">Sarah K.</h4> |
|
|
<div class="flex text-yellow-400"> |
|
|
<i data-feather="star" class="w-4 h-4 fill-current"></i> |
|
|
<i data-feather="star" class="w-4 h-4 fill-current"></i> |
|
|
<i data-feather="star" class="w-4 h-4 fill-current"></i> |
|
|
<i data-feather="star" class="w-4 h-4 fill-current"></i> |
|
|
<i data-feather="star" class="w-4 h-4 fill-current"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-gray-600 italic">"I was hesitant about importing a car internationally, but Japanese Motors guided me through every step. My Supra is flawless and I saved thousands compared to local dealers."</p> |
|
|
<div class="mt-4 flex items-center text-sm text-gray-500"> |
|
|
<i data-feather="thumbs-up" class="mr-1"></i> |
|
|
<span>28 people found this helpful</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="text-center mt-12"> |
|
|
<a href="testimonials.html" class="inline-flex items-center text-red-500 hover:text-red-600 font-medium"> |
|
|
Read More Testimonials |
|
|
<i data-feather="arrow-right" class="ml-2"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-20 bg-red-500 text-white"> |
|
|
<div class="container mx-auto px-4 text-center"> |
|
|
<h2 class="text-3xl font-bold mb-6" data-aos="fade-up">Ready to Own Your Dream Japanese Car?</h2> |
|
|
<p class="text-xl mb-8 max-w-2xl mx-auto" data-aos="fade-up" data-aos-delay="100">Contact our specialists today to start your import journey</p> |
|
|
<div class="flex flex-col sm:flex-row justify-center gap-4" data-aos="fade-up" data-aos-delay="200"> |
|
|
<a href="contact.html" class="bg-white hover:bg-gray-100 text-red-500 font-bold py-3 px-8 rounded-full transition duration-300">Get a Quote</a> |
|
|
<a href="tel:+254756709823" class="border-2 border-white hover:bg-white hover:text-red-500 font-bold py-3 px-8 rounded-full transition duration-300">Call Now</a> |
|
|
</div> |
|
|
<div class="mt-6 flex justify-center space-x-4"> |
|
|
<a href="https://wa.me/254756709823" class="bg-green-500 hover:bg-green-600 text-white p-3 rounded-full"> |
|
|
<i data-feather="message-circle"></i> |
|
|
</a> |
|
|
<a href="https://t.me/254756709823" class="bg-blue-500 hover:bg-blue-600 text-white p-3 rounded-full"> |
|
|
<i data-feather="send"></i> |
|
|
</a> |
|
|
<a href="mailto:info@japanesemotors.com" class="bg-gray-700 hover:bg-gray-800 text-white p-3 rounded-full"> |
|
|
<i data-feather="mail"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<footer class="bg-gray-900 text-white pt-16 pb-8"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8"> |
|
|
<div> |
|
|
<h3 class="text-xl font-bold mb-4 flex items-center"> |
|
|
<i data-feather="zap" class="h-6 w-6 text-red-500 mr-2"></i> |
|
|
JAPANESE MOTORS |
|
|
</h3> |
|
|
<p class="text-gray-400">Premium Japanese vehicle imports with uncompromising quality and service.</p> |
|
|
<div class="flex mt-4 space-x-4"> |
|
|
<a href="#" class="text-gray-400 hover:text-white"> |
|
|
<i data-feather="facebook"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-400 hover:text-white"> |
|
|
<i data-feather="instagram"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-400 hover:text-white"> |
|
|
<i data-feather="twitter"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-400 hover:text-white"> |
|
|
<i data-feather="youtube"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h4 class="text-lg font-semibold mb-4">Quick Links</h4> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="index.html" class="text-gray-400 hover:text-white">Home</a></li> |
|
|
<li><a href="1a/gallery.html" class="text-gray-400 hover:text-white">Inventory</a></li> |
|
|
<li><a href="1a/services.html" class="text-gray-400 hover:text-white">Services</a></li> |
|
|
<li><a href="1a/about.html" class="text-gray-400 hover:text-white">About Us</a></li> |
|
|
<li><a href="1a/contact.html" class="text-gray-400 hover:text-white">Contact</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h4 class="text-lg font-semibold mb-4">Services</h4> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Vehicle Import</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Customs Clearance</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Financing</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Shipping</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">After-Sales Support</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h4 class="text-lg font-semibold mb-4">Contact Us</h4> |
|
|
<ul class="space-y-3"> |
|
|
<li class="flex items-center"> |
|
|
<i data-feather="map-pin" class="w-5 h-5 mr-2 text-red-500"></i> |
|
|
<span class="text-gray-400">123 Automotive Way, Tokyo, Japan</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i data-feather="phone" class="w-5 h-5 mr-2 text-red-500"></i> |
|
|
<span class="text-gray-400">+254 756 709 823</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i data-feather="mail" class="w-5 h-5 mr-2 text-red-500"></i> |
|
|
<span class="text-gray-400">info@japanesemotors.com</span> |
|
|
</li> |
|
|
</ul> |
|
|
<div class="mt-4 flex space-x-3"> |
|
|
<a href="https://wa.me/254756709823" class="bg-green-500 hover:bg-green-600 text-white p-2 rounded-full"> |
|
|
<i data-feather="message-circle"></i> |
|
|
</a> |
|
|
<a href="https://t.me/japanesemotors" class="bg-blue-500 hover:bg-blue-600 text-white p-2 rounded-full"> |
|
|
<i data-feather="send"></i> |
|
|
</a> |
|
|
<a href="viber://chat?number=+254756709823" class="bg-purple-500 hover:bg-purple-600 text-white p-2 rounded-full"> |
|
|
<i data-feather="phone-call"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="border-t border-gray-800 pt-8 text-center text-gray-400"> |
|
|
<p>© 2023 Japanese Motors. All rights reserved.</p> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
|
|
|
<div class="sticky-contact"> |
|
|
<div class="relative"> |
|
|
<button id="contactBtn" class="bg-red-500 hover:bg-red-600 text-white p-4 rounded-full shadow-lg flex items-center transition"> |
|
|
<i data-feather="phone" class="w-5 h-5"></i> |
|
|
</button> |
|
|
<div id="contactDropdown" class="hidden absolute bottom-full left-0 mb-2 w-64 bg-white rounded-md shadow-lg py-1 z-50"> |
|
|
<div class="px-4 py-2 border-b"> |
|
|
<p class="font-bold text-gray-800">Contact Options</p> |
|
|
</div> |
|
|
<a href="tel:+254756709823" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 flex items-center"> |
|
|
<i data-feather="phone" class="w-4 h-4 mr-2 text-red-500"></i> |
|
|
Call Us Now |
|
|
</a> |
|
|
<a href="https://wa.me/254756709823" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 flex items-center"> |
|
|
<i data-feather="message-circle" class="w-4 h-4 mr-2 text-green-500"></i> |
|
|
WhatsApp Chat |
|
|
</a> |
|
|
<a href="mailto:info@japanesemotors.com" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 flex items-center"> |
|
|
<i data-feather="mail" class="w-4 h-4 mr-2 text-blue-500"></i> |
|
|
Send Email |
|
|
</a> |
|
|
<a href="tel:+254756709823" id="callbackBtn" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 flex items-center"> |
|
|
<i data-feather="clock" class="w-4 h-4 mr-2 text-yellow-500"></i> |
|
|
Request Callback |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="callbackModal" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"> |
|
|
<div class="bg-white rounded-lg p-6 max-w-md w-full"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<h3 class="text-xl font-bold text-gray-800">Request a Callback</h3> |
|
|
<button id="closeCallbackModal" class="text-gray-500 hover:text-gray-700"> |
|
|
<i data-feather="x"></i> |
|
|
</button> |
|
|
</div> |
|
|
<form class="space-y-4"> |
|
|
<div> |
|
|
<label for="callbackName" class="block text-sm font-medium text-gray-700 mb-1">Your Name</label> |
|
|
<input type="text" id="callbackName" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-red-500"> |
|
|
</div> |
|
|
<div> |
|
|
<label for="callbackPhone" class="block text-sm font-medium text-gray-700 mb-1">Phone Number</label> |
|
|
<input type="tel" id="callbackPhone" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-red-500"> |
|
|
</div> |
|
|
<div> |
|
|
<label for="callbackTime" class="block text-sm font-medium text-gray-700 mb-1">Preferred Time</label> |
|
|
<select id="callbackTime" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-red-500"> |
|
|
<option value="morning">Morning (9AM - 12PM)</option> |
|
|
<option value="afternoon">Afternoon (12PM - 5PM)</option> |
|
|
<option value="evening">Evening (5PM - 8PM)</option> |
|
|
</select> |
|
|
</div> |
|
|
<button type="submit" class="w-full bg-red-500 hover:bg-red-600 text-white py-2 px-4 rounded-md transition duration-300">Request Callback</button> |
|
|
</form> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="floating-chat"> |
|
|
<div class="relative"> |
|
|
<button id="chatToggle" class="bg-red-500 hover:bg-red-600 text-white p-4 rounded-full shadow-lg flex items-center transition"> |
|
|
<i data-feather="message-square" class="w-5 h-5"></i> |
|
|
</button> |
|
|
<div id="chatWidget" class="hidden absolute bottom-full right-0 mb-2 w-80 bg-white rounded-lg shadow-xl overflow-hidden z-50"> |
|
|
<div class="bg-red-500 text-white px-4 py-3 flex justify-between items-center"> |
|
|
<h3 class="font-bold">How can we help?</h3> |
|
|
<button id="closeChat" class="text-white hover:text-gray-200"> |
|
|
<i data-feather="x"></i> |
|
|
</button> |
|
|
</div> |
|
|
<div class="p-4 h-64 overflow-y-auto" id="chatMessages"> |
|
|
<div class="mb-4"> |
|
|
<div class="bg-gray-100 rounded-lg p-3 max-w-xs"> |
|
|
<p class="text-sm">Hello! I'm your virtual assistant. How can I help you today?</p> |
|
|
</div> |
|
|
<p class="text-xs text-gray-500 mt-1">Just now</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="border-t p-4"> |
|
|
<div class="flex space-x-2"> |
|
|
<input type="text" placeholder="Type your message..." class="flex-1 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-red-500 text-sm"> |
|
|
<button class="bg-red-500 hover:bg-red-600 text-white p-2 rounded-md"> |
|
|
<i data-feather="send" class="w-4 h-4"></i> |
|
|
</button> |
|
|
</div> |
|
|
<div class="mt-2 text-center"> |
|
|
<button id="humanHelp" class="text-xs text-red-500 hover:underline">Need human help? Click here</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
|
|
|
const carData = { |
|
|
1: { |
|
|
title: "Nissan GT-R", |
|
|
year: "2023 Model", |
|
|
location: "Tokyo, Japan", |
|
|
price: "$112,000", |
|
|
originalPrice: "$118,000", |
|
|
discount: "$6,000 OFF", |
|
|
description: "The legendary Godzilla with 565HP twin-turbo V6 engine. This premium sports car features advanced all-wheel drive, precision handling, and iconic styling that turns heads everywhere.", |
|
|
engine: "3.8L Twin-Turbo V6", |
|
|
horsepower: "565 HP", |
|
|
transmission: "6-Speed Dual Clutch", |
|
|
mileage: "12,000 km", |
|
|
deposit: "$15,000", |
|
|
finance36: "$2,850/mo", |
|
|
finance60: "$1,890/mo", |
|
|
images: { |
|
|
main: "http://static.photos/automotive/640x360/1", |
|
|
thumbnails: [ |
|
|
"http://static.photos/automotive/640x360/1", |
|
|
"http://static.photos/automotive/640x360/1", |
|
|
"http://static.photos/automotive/640x360/1" |
|
|
] |
|
|
} |
|
|
}, |
|
|
2: { |
|
|
title: "Toyota Supra", |
|
|
year: "2023 Model", |
|
|
location: "Osaka, Japan", |
|
|
price: "$52,000", |
|
|
originalPrice: "$55,000", |
|
|
discount: "$3,000 OFF", |
|
|
description: "The iconic sports car returns with 382HP turbocharged inline-6. With its perfect weight distribution and rear-wheel drive, the Supra delivers an exhilarating driving experience.", |
|
|
engine: "3.0L Turbocharged Inline-6", |
|
|
horsepower: "382 HP", |
|
|
transmission: "8-Speed Automatic", |
|
|
mileage: "8,500 km", |
|
|
deposit: "$8,000", |
|
|
finance36: "$1,320/mo", |
|
|
finance60: "$890/mo", |
|
|
images: { |
|
|
main: "http://static.photos/automotive/640x360/2", |
|
|
thumbnails: [ |
|
|
"http://static.photos/automotive/640x360/2", |
|
|
"http://static.photos/automotive/640x360/2", |
|
|
"http://static.photos/automotive/640x360/2" |
|
|
] |
|
|
} |
|
|
}, |
|
|
3: { |
|
|
title: "Honda NSX", |
|
|
year: "2023 Model", |
|
|
location: "Yokohama, Japan", |
|
|
price: "$169,000", |
|
|
originalPrice: "$175,000", |
|
|
discount: "$6,000 OFF", |
|
|
description: "573HP hybrid supercar with cutting-edge technology. The NSX combines a twin-turbo V6 engine with three electric motors for instantaneous response and incredible performance.", |
|
|
engine: "3.5L Twin-Turbo V6 Hybrid", |
|
|
horsepower: "573 HP", |
|
|
transmission: "9-Speed Dual Clutch", |
|
|
mileage: "6,200 km", |
|
|
deposit: "$25,000", |
|
|
finance36: "$4,250/mo", |
|
|
finance60: "$2,850/mo", |
|
|
images: { |
|
|
main: "http://static.photos/automotive/640x360/3", |
|
|
thumbnails: [ |
|
|
"http://static.photos/automotive/640x360/3", |
|
|
"http://static.photos/automotive/640x360/3", |
|
|
"http://static.photos/automotive/640x360/3" |
|
|
] |
|
|
} |
|
|
} |
|
|
}; |
|
|
|
|
|
|
|
|
const modal = document.getElementById('carDetailsModal'); |
|
|
const closeModalBtn = document.getElementById('closeModal'); |
|
|
const viewDetailsBtns = document.querySelectorAll('.view-details-btn'); |
|
|
|
|
|
|
|
|
function openCarModal(carId) { |
|
|
const car = carData[carId]; |
|
|
|
|
|
if (car) { |
|
|
|
|
|
document.getElementById('modalCarTitle').textContent = car.title; |
|
|
document.getElementById('modalCarYear').textContent = car.year; |
|
|
document.getElementById('modalCarLocation').textContent = car.location; |
|
|
document.getElementById('modalCarPrice').textContent = car.price; |
|
|
document.getElementById('modalCarDiscount').textContent = car.discount; |
|
|
document.getElementById('modalCarDescription').textContent = car.description; |
|
|
document.getElementById('modalCarEngine').textContent = car.engine; |
|
|
document.getElementById('modalCarHorsepower').textContent = car.horsepower; |
|
|
document.getElementById('modalCarTransmission').textContent = car.transmission; |
|
|
document.getElementById('modalCarMileage').textContent = car.mileage; |
|
|
document.getElementById('modalCarDeposit').textContent = car.deposit; |
|
|
document.getElementById('modalCarFinance36').textContent = car.finance36; |
|
|
document.getElementById('modalCarFinance60').textContent = car.finance60; |
|
|
|
|
|
|
|
|
document.getElementById('modalCarImage').src = car.images.main; |
|
|
|
|
|
|
|
|
const thumbnails = document.querySelectorAll('.thumbnail'); |
|
|
car.images.thumbnails.forEach((thumb, index) => { |
|
|
if (thumbnails[index]) { |
|
|
thumbnails[index].src = thumb; |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
modal.classList.remove('hidden'); |
|
|
document.body.style.overflow = 'hidden'; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function closeCarModal() { |
|
|
modal.classList.add('hidden'); |
|
|
document.body.style.overflow = 'auto'; |
|
|
} |
|
|
|
|
|
|
|
|
viewDetailsBtns.forEach(btn => { |
|
|
btn.addEventListener('click', function() { |
|
|
const carId = this.getAttribute('data-car-id'); |
|
|
openCarModal(carId); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
closeModalBtn.addEventListener('click', closeCarModal); |
|
|
|
|
|
|
|
|
modal.addEventListener('click', function(e) { |
|
|
if (e.target === modal) { |
|
|
closeCarModal(); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
document.addEventListener('keydown', function(e) { |
|
|
if (e.key === 'Escape' && !modal.classList.contains('hidden')) { |
|
|
closeCarModal(); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('.thumbnail').forEach(thumb => { |
|
|
thumb.addEventListener('click', function() { |
|
|
document.getElementById('modalCarImage').src = this.src; |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
const newsletterForm = document.querySelector('section.py-16.bg-gray-800 form'); |
|
|
|
|
|
if (newsletterForm) { |
|
|
newsletterForm.addEventListener('submit', function(e) { |
|
|
e.preventDefault(); |
|
|
|
|
|
const emailInput = this.querySelector('input[type="email"]'); |
|
|
const notificationCheckbox = document.getElementById('notificationOptIn'); |
|
|
const email = emailInput.value.trim(); |
|
|
|
|
|
if (!email || !isValidEmail(email)) { |
|
|
showNotification('Please enter a valid email address.', 'error'); |
|
|
return; |
|
|
} |
|
|
|
|
|
|
|
|
subscribeToNewsletter(email, notificationCheckbox ? notificationCheckbox.checked : false); |
|
|
}); |
|
|
} |
|
|
}); |
|
|
|
|
|
function isValidEmail(email) { |
|
|
const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; |
|
|
return re.test(email); |
|
|
} |
|
|
|
|
|
function subscribeToNewsletter(email, notificationOptIn) { |
|
|
|
|
|
showNotification('Processing your subscription...', 'info'); |
|
|
|
|
|
|
|
|
const formData = new FormData(); |
|
|
formData.append('email', email); |
|
|
formData.append('notification_opt_in', notificationOptIn ? '1' : '0'); |
|
|
|
|
|
fetch('1a/api/subscribe.php', { |
|
|
method: 'POST', |
|
|
body: formData |
|
|
}) |
|
|
.then(response => { |
|
|
if (!response.ok) { |
|
|
throw new Error('Network response was not ok'); |
|
|
} |
|
|
return response.json(); |
|
|
}) |
|
|
.then(data => { |
|
|
if (data.message) { |
|
|
showNotification(data.message, 'success'); |
|
|
document.querySelector('input[type="email"]').value = ''; |
|
|
} else { |
|
|
showNotification('Subscription failed. Please try again.', 'error'); |
|
|
} |
|
|
}) |
|
|
.catch(error => { |
|
|
console.error('Error:', error); |
|
|
showNotification('Subscription error. Please try again later.', 'error'); |
|
|
}); |
|
|
} |
|
|
|
|
|
function showNotification(message, type) { |
|
|
|
|
|
const existingNotifications = document.querySelectorAll('.custom-notification'); |
|
|
existingNotifications.forEach(notification => notification.remove()); |
|
|
|
|
|
|
|
|
const notification = document.createElement('div'); |
|
|
notification.className = `custom-notification fixed top-4 right-4 p-4 rounded-md shadow-lg z-50 transition-opacity duration-300 ${ |
|
|
type === 'success' ? 'bg-green-500 text-white' : |
|
|
type === 'error' ? 'bg-red-500 text-white' : |
|
|
'bg-blue-500 text-white' |
|
|
}`; |
|
|
notification.textContent = message; |
|
|
|
|
|
document.body.appendChild(notification); |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
notification.classList.add('opacity-100'); |
|
|
}, 10); |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
notification.classList.remove('opacity-100'); |
|
|
setTimeout(() => { |
|
|
notification.remove(); |
|
|
}, 300); |
|
|
}, 3000); |
|
|
} |
|
|
|
|
|
VANTA.GLOBE({ |
|
|
el: "#hero", |
|
|
mouseControls: true, |
|
|
touchControls: true, |
|
|
gyroControls: false, |
|
|
minHeight: 200.00, |
|
|
minWidth: 200.00, |
|
|
scale: 1.00, |
|
|
scaleMobile: 1.00, |
|
|
color: 0xff0000, |
|
|
backgroundColor: 0x0, |
|
|
size: 0.8 |
|
|
}); |
|
|
|
|
|
|
|
|
AOS.init({ |
|
|
duration: 800, |
|
|
easing: 'ease-in-out', |
|
|
once: true |
|
|
}); |
|
|
|
|
|
|
|
|
feather.replace(); |
|
|
|
|
|
const notificationBtn = document.getElementById('notificationBtn'); |
|
|
const notificationDropdown = document.getElementById('notificationDropdown'); |
|
|
|
|
|
notificationBtn.addEventListener('click', () => { |
|
|
notificationDropdown.classList.toggle('hidden'); |
|
|
}); |
|
|
|
|
|
const contactBtn = document.getElementById('contactBtn'); |
|
|
const contactDropdown = document.getElementById('contactDropdown'); |
|
|
|
|
|
contactBtn.addEventListener('click', () => { |
|
|
contactDropdown.classList.toggle('hidden'); |
|
|
}); |
|
|
|
|
|
const callbackBtn = document.getElementById('callbackBtn'); |
|
|
const callbackModal = document.getElementById('callbackModal'); |
|
|
const closeCallbackModal = document.getElementById('closeCallbackModal'); |
|
|
|
|
|
callbackBtn.addEventListener('click', () => { |
|
|
callbackModal.classList.remove('hidden'); |
|
|
contactDropdown.classList.add('hidden'); |
|
|
}); |
|
|
|
|
|
closeCallbackModal.addEventListener('click', () => { |
|
|
callbackModal.classList.add('hidden'); |
|
|
}); |
|
|
|
|
|
const chatToggle = document.getElementById('chatToggle'); |
|
|
const chatWidget = document.getElementById('chatWidget'); |
|
|
const closeChat = document.getElementById('closeChat'); |
|
|
|
|
|
chatToggle.addEventListener('click', () => { |
|
|
chatWidget.classList.toggle('hidden'); |
|
|
}); |
|
|
|
|
|
closeChat.addEventListener('click', () => { |
|
|
chatWidget.classList.add('hidden'); |
|
|
}); |
|
|
|
|
|
const humanHelp = document.getElementById('humanHelp'); |
|
|
|
|
|
humanHelp.addEventListener('click', () => { |
|
|
const chatMessages = document.getElementById('chatMessages'); |
|
|
chatMessages.innerHTML += ` |
|
|
<div class="mb-4 text-right"> |
|
|
<div class="bg-red-500 text-white rounded-lg p-3 max-w-xs ml-auto"> |
|
|
<p class="text-sm">Connecting you to a live agent...</p> |
|
|
</div> |
|
|
<p class="text-xs text-gray-500 mt-1 text-right">Just now</p> |
|
|
</div> |
|
|
`; |
|
|
chatMessages.scrollTop = chatMessages.scrollHeight; |
|
|
}); |
|
|
|
|
|
document.addEventListener('click', (event) => { |
|
|
if (!notificationBtn.contains(event.target) && !notificationDropdown.contains(event.target)) { |
|
|
notificationDropdown.classList.add('hidden'); |
|
|
} |
|
|
|
|
|
if (!contactBtn.contains(event.target) && !contactDropdown.contains(event.target)) { |
|
|
contactDropdown.classList.add('hidden'); |
|
|
} |
|
|
|
|
|
if (!chatToggle.contains(event.target) && !chatWidget.contains(event.target)) { |
|
|
chatWidget.classList.add('hidden'); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
if ('Notification' in window) { |
|
|
Notification.requestPermission().then(permission => { |
|
|
if (permission === 'granted') { |
|
|
console.log('Notification permission granted'); |
|
|
} |
|
|
}); |
|
|
} |
|
|
|
|
|
if ('serviceWorker' in navigator) { |
|
|
window.addEventListener('load', () => { |
|
|
navigator.serviceWorker.register('/sw.js').then(registration => { |
|
|
console.log('ServiceWorker registration successful'); |
|
|
}).catch(err => { |
|
|
console.log('ServiceWorker registration failed: ', err); |
|
|
}); |
|
|
}); |
|
|
} |
|
|
</script> |
|
|
</body> |
|
|
</html> |
