{"id":253,"date":"2026-07-24T13:59:46","date_gmt":"2026-07-24T13:59:46","guid":{"rendered":"https:\/\/demo75.techhassle.com\/?page_id=253"},"modified":"2026-07-25T15:24:49","modified_gmt":"2026-07-25T15:24:49","slug":"autoelite","status":"publish","type":"page","link":"https:\/\/demo75.techhassle.com\/index.php\/autoelite\/","title":{"rendered":"autoelite"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n\r\n\r\nAutoElite \u2014 Premium Car Dealership<\/title>\r\n<script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Playfair+Display:wght@700;800;900&display=swap\" rel=\"stylesheet\">\r\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.1\/css\/all.min.css\">\r\n<script>\r\ntailwind.config = {\r\n theme: {\r\n extend: {\r\n colors: {\r\n brand: { red: '#D42B2B', redHover: '#B82222', dark: '#0A0A0A', gray: '#1A1A1A', mid: '#2A2A2A', light: '#F5F5F5', muted: '#888888', border: '#2E2E2E' }\r\n },\r\n fontFamily: {\r\n heading: ['Playfair Display', 'serif'],\r\n body: ['Inter', 'sans-serif']\r\n }\r\n }\r\n }\r\n}\r\n<\/script>\r\n<style>\r\n * { margin: 0; padding: 0; box-sizing: border-box; }\r\n html { scroll-behavior: smooth; }\r\n body { font-family: 'Inter', sans-serif; background: #0A0A0A; color: #fff; overflow-x: hidden; }\r\n\r\n .page-section { display: none; opacity: 0; transition: opacity 0.4s ease; }\r\n .page-section.active { display: block; opacity: 1; }\r\n\r\n .reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.7s ease, transform 0.7s ease; }\r\n .reveal.visible { opacity: 1; transform: translateY(0); }\r\n .reveal-delay-1 { transition-delay: 0.1s; }\r\n .reveal-delay-2 { transition-delay: 0.2s; }\r\n .reveal-delay-3 { transition-delay: 0.3s; }\r\n .reveal-delay-4 { transition-delay: 0.4s; }\r\n .reveal-delay-5 { transition-delay: 0.5s; }\r\n\r\n .car-card { transition: transform 0.35s ease, box-shadow 0.35s ease; }\r\n .car-card:hover { transform: translateY(-6px); box-shadow: 0 20px 50px rgba(212,43,43,0.12); }\r\n\r\n .btn-primary { position: relative; overflow: hidden; }\r\n .btn-primary::after {\r\n content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;\r\n background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);\r\n transition: left 0.5s ease;\r\n }\r\n .btn-primary:hover::after { left: 100%; }\r\n\r\n .site-header { transition: background 0.3s ease, box-shadow 0.3s ease; }\r\n .site-header.scrolled { background: rgba(10,10,10,0.97) !important; box-shadow: 0 2px 30px rgba(0,0,0,0.5); }\r\n\r\n .nav-link { position: relative; }\r\n .nav-link::after {\r\n content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 2px;\r\n background: #D42B2B; transition: width 0.3s ease;\r\n }\r\n .nav-link:hover::after, .nav-link.active::after { width: 100%; }\r\n\r\n .hero-overlay {\r\n background: linear-gradient(135deg, rgba(10,10,10,0.92) 0%, rgba(10,10,10,0.6) 50%, rgba(10,10,10,0.85) 100%);\r\n }\r\n\r\n .stat-card { border: 1px solid #2E2E2E; transition: border-color 0.3s ease; }\r\n .stat-card:hover { border-color: #D42B2B; }\r\n\r\n .testimonial-card { border: 1px solid #2E2E2E; transition: border-color 0.3s ease, transform 0.3s ease; }\r\n .testimonial-card:hover { border-color: rgba(212,43,43,0.4); transform: translateY(-4px); }\r\n\r\n .filter-btn { transition: all 0.3s ease; }\r\n .filter-btn.active, .filter-btn:hover { background: #D42B2B; color: #fff; border-color: #D42B2B; }\r\n\r\n .team-card img { transition: transform 0.4s ease; }\r\n .team-card:hover img { transform: scale(1.05); }\r\n\r\n .blog-card { transition: transform 0.35s ease; }\r\n .blog-card:hover { transform: translateY(-5px); }\r\n .blog-card .blog-img img { transition: transform 0.5s ease; }\r\n .blog-card:hover .blog-img img { transform: scale(1.08); }\r\n\r\n .faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.4s ease, padding 0.3s ease; }\r\n .faq-item.open .faq-answer { max-height: 300px; }\r\n .faq-item .faq-icon { transition: transform 0.3s ease; }\r\n .faq-item.open .faq-icon { transform: rotate(45deg); }\r\n\r\n ::-webkit-scrollbar { width: 8px; }\r\n ::-webkit-scrollbar-track { background: #0A0A0A; }\r\n ::-webkit-scrollbar-thumb { background: #2E2E2E; border-radius: 4px; }\r\n ::-webkit-scrollbar-thumb:hover { background: #D42B2B; }\r\n\r\n .mobile-menu { transform: translateX(100%); transition: transform 0.4s cubic-bezier(0.4,0,0.2,1); }\r\n .mobile-menu.open { transform: translateX(0); }\r\n\r\n .page-btn { transition: all 0.3s ease; }\r\n .page-btn.active, .page-btn:hover { background: #D42B2B; border-color: #D42B2B; color: #fff; }\r\n\r\n .grain::before {\r\n content: ''; position: absolute; inset: 0; opacity: 0.03; pointer-events: none;\r\n background-image: url(\"data:image\/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'\/%3E%3C\/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'\/%3E%3C\/svg%3E\");\r\n }\r\n\r\n .form-input {\r\n background: #1A1A1A; border: 1px solid #2E2E2E; color: #fff; border-radius: 10px;\r\n padding: 14px 18px; font-size: 15px; width: 100%; transition: border-color 0.3s ease;\r\n font-family: 'Inter', sans-serif;\r\n }\r\n .form-input:focus { outline: none; border-color: #D42B2B; }\r\n .form-input::placeholder { color: #666; }\r\n\r\n .red-glow { box-shadow: 0 0 60px rgba(212,43,43,0.08); }\r\n\r\n @media (prefers-reduced-motion: reduce) {\r\n .reveal { opacity: 1; transform: none; transition: none; }\r\n .car-card, .testimonial-card, .blog-card { transition: none; }\r\n .btn-primary::after { display: none; }\r\n }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<!-- ========== HEADER ========== -->\r\n<header class=\"site-header fixed top-0 left-0 w-full z-50 bg-transparent\" id=\"siteHeader\">\r\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\r\n <div class=\"flex items-center justify-between h-20\">\r\n <a href=\"#\" onclick=\"showPage('home');return false;\" class=\"flex items-center gap-3 group\">\r\n <div class=\"w-10 h-10 bg-brand-red rounded-lg flex items-center justify-center transition-transform duration-300 group-hover:scale-110\">\r\n <i class=\"fa-solid fa-car-side text-white text-lg\"><\/i>\r\n <\/div>\r\n <span class=\"font-heading text-2xl font-bold tracking-tight text-white\">Auto<span class=\"text-brand-red\">Elite<\/span><\/span>\r\n <\/a>\r\n\r\n <nav class=\"hidden lg:flex items-center gap-8\" aria-label=\"Main navigation\">\r\n <a href=\"#\" class=\"nav-link active text-sm font-medium text-white hover:text-brand-red transition-colors\" data-page=\"home\" onclick=\"showPage('home');return false;\">Home<\/a>\r\n <a href=\"#\" class=\"nav-link text-sm font-medium text-gray-400 hover:text-brand-red transition-colors\" data-page=\"about\" onclick=\"showPage('about');return false;\">About<\/a>\r\n <a href=\"#\" class=\"nav-link text-sm font-medium text-gray-400 hover:text-brand-red transition-colors\" data-page=\"products\" onclick=\"showPage('products');return false;\">Products<\/a>\r\n <a href=\"#\" class=\"nav-link text-sm font-medium text-gray-400 hover:text-brand-red transition-colors\" data-page=\"blog\" onclick=\"showPage('blog');return false;\">Blog<\/a>\r\n <a href=\"#\" class=\"nav-link text-sm font-medium text-gray-400 hover:text-brand-red transition-colors\" data-page=\"booking\" onclick=\"showPage('booking');return false;\">Booking<\/a>\r\n <\/nav>\r\n\r\n <div class=\"hidden lg:flex items-center gap-5\">\r\n <a href=\"tel:+15551234567\" class=\"flex items-center gap-2 text-sm text-gray-300 hover:text-brand-red transition-colors\">\r\n <i class=\"fa-solid fa-phone text-brand-red text-xs\"><\/i>\r\n +1 (555) 123-4567\r\n <\/a>\r\n <button onclick=\"showPage('booking')\" class=\"btn-primary bg-brand-red hover:bg-brand-redHover text-white text-sm font-semibold px-6 py-2.5 rounded-lg transition-colors\">\r\n Book Now\r\n <\/button>\r\n <\/div>\r\n\r\n <button class=\"lg:hidden text-white text-2xl\" onclick=\"toggleMobileMenu()\" aria-label=\"Toggle menu\">\r\n <i class=\"fa-solid fa-bars\" id=\"menuIcon\"><\/i>\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n<\/header>\r\n\r\n<!-- Mobile Menu -->\r\n<div class=\"mobile-menu fixed top-0 right-0 w-80 h-full bg-brand-gray z-50 p-8 flex flex-col\" id=\"mobileMenu\">\r\n <button class=\"self-end text-2xl text-gray-400 hover:text-white mb-10\" onclick=\"toggleMobileMenu()\" aria-label=\"Close menu\">\r\n <i class=\"fa-solid fa-xmark\"><\/i>\r\n <\/button>\r\n <nav class=\"flex flex-col gap-5\" aria-label=\"Mobile navigation\">\r\n <a href=\"#\" class=\"text-lg font-medium text-white hover:text-brand-red transition-colors\" onclick=\"showPage('home');toggleMobileMenu();return false;\">Home<\/a>\r\n <a href=\"#\" class=\"text-lg font-medium text-gray-400 hover:text-brand-red transition-colors\" onclick=\"showPage('about');toggleMobileMenu();return false;\">About<\/a>\r\n <a href=\"#\" class=\"text-lg font-medium text-gray-400 hover:text-brand-red transition-colors\" onclick=\"showPage('products');toggleMobileMenu();return false;\">Products<\/a>\r\n <a href=\"#\" class=\"text-lg font-medium text-gray-400 hover:text-brand-red transition-colors\" onclick=\"showPage('blog');toggleMobileMenu();return false;\">Blog<\/a>\r\n <a href=\"#\" class=\"text-lg font-medium text-gray-400 hover:text-brand-red transition-colors\" onclick=\"showPage('booking');toggleMobileMenu();return false;\">Booking<\/a>\r\n <\/nav>\r\n <div class=\"mt-auto\">\r\n <a href=\"tel:+15551234567\" class=\"flex items-center gap-2 text-sm text-gray-300 mb-4\">\r\n <i class=\"fa-solid fa-phone text-brand-red\"><\/i> +1 (555) 123-4567\r\n <\/a>\r\n <button onclick=\"showPage('booking');toggleMobileMenu();\" class=\"btn-primary w-full bg-brand-red hover:bg-brand-redHover text-white font-semibold py-3 rounded-lg transition-colors\">Book Now<\/button>\r\n <\/div>\r\n<\/div>\r\n<div class=\"fixed inset-0 bg-black\/60 z-40 hidden\" id=\"mobileOverlay\" onclick=\"toggleMobileMenu()\"><\/div>\r\n\r\n\r\n<!-- ===================== PAGE 1: HOME ===================== -->\r\n<main id=\"page-home\" class=\"page-section active\">\r\n\r\n <!-- Hero -->\r\n <section class=\"relative min-h-screen flex items-center overflow-hidden grain\">\r\n <div class=\"absolute inset-0\">\r\n <img decoding=\"async\" src=\"http:\/\/demo75.techhassle.com\/wp-content\/uploads\/2026\/07\/Hero-section-image.webp\" alt=\"Luxury car on display\" class=\"w-full h-full object-cover\">\r\n <div class=\"hero-overlay absolute inset-0\"><\/div>\r\n <\/div>\r\n <div class=\"absolute top-1\/2 right-0 -translate-y-1\/2 w-1\/2 h-full opacity-[0.03]\" style=\"background: linear-gradient(90deg, transparent, #D42B2B);\"><\/div>\r\n\r\n <div class=\"relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-32 w-full\">\r\n <div class=\"max-w-2xl\">\r\n <div class=\"reveal flex items-center gap-3 mb-6\">\r\n <div class=\"w-12 h-[2px] bg-brand-red\"><\/div>\r\n <span class=\"text-brand-red text-sm font-semibold uppercase tracking-widest\">Premium Dealership<\/span>\r\n <\/div>\r\n <h1 class=\"reveal reveal-delay-1 font-heading text-5xl sm:text-6xl lg:text-7xl font-900 leading-[1.05] mb-6 text-white\">\r\n Find Your <br><span class=\"text-brand-red\">Perfect<\/span> Car Today\r\n <\/h1>\r\n <p class=\"reveal reveal-delay-2 text-gray-400 text-lg sm:text-xl leading-relaxed mb-10 max-w-lg font-light\">\r\n Explore our handpicked collection of premium vehicles. Quality inspected, competitively priced, and ready for you.\r\n <\/p>\r\n <div class=\"reveal reveal-delay-3 flex flex-wrap gap-4\">\r\n <button onclick=\"showPage('products')\" class=\"btn-primary bg-brand-red hover:bg-brand-redHover text-white font-semibold px-8 py-4 rounded-xl text-base transition-colors flex items-center gap-2\">\r\n View Cars <i class=\"fa-solid fa-arrow-right text-sm\"><\/i>\r\n <\/button>\r\n <button onclick=\"showPage('booking')\" class=\"border border-white\/20 hover:border-brand-red text-white font-semibold px-8 py-4 rounded-xl text-base transition-colors hover:text-brand-red\">\r\n Book Appointment\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/section>\r\n\r\n <!-- Featured Cars -->\r\n <section class=\"py-24 bg-brand-dark relative\">\r\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\r\n <div class=\"text-center mb-16\">\r\n <div class=\"reveal flex items-center justify-center gap-3 mb-4\">\r\n <div class=\"w-8 h-[2px] bg-brand-red\"><\/div>\r\n <span class=\"text-brand-red text-sm font-semibold uppercase tracking-widest\">Our Collection<\/span>\r\n <div class=\"w-8 h-[2px] bg-brand-red\"><\/div>\r\n <\/div>\r\n <h2 class=\"reveal reveal-delay-1 font-heading text-4xl sm:text-5xl font-bold text-white mb-4\">Featured Cars<\/h2>\r\n <p class=\"reveal reveal-delay-2 text-gray-500 text-lg max-w-xl mx-auto\">Discover our most popular vehicles, selected for their exceptional quality and value.<\/p>\r\n <\/div>\r\n\r\n <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8\" id=\"featuredCars\"><\/div>\r\n\r\n <div class=\"reveal text-center mt-14\">\r\n <button onclick=\"showPage('products')\" class=\"btn-primary border border-brand-red text-brand-red hover:bg-brand-red hover:text-white font-semibold px-10 py-4 rounded-xl transition-colors\">\r\n View All Cars <i class=\"fa-solid fa-arrow-right ml-2 text-sm\"><\/i>\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- Why Choose Us -->\r\n <section class=\"py-24 bg-brand-gray relative overflow-hidden\">\r\n <div class=\"absolute top-0 left-0 w-full h-px bg-gradient-to-r from-transparent via-brand-border to-transparent\"><\/div>\r\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\r\n <div class=\"text-center mb-16\">\r\n <div class=\"reveal flex items-center justify-center gap-3 mb-4\">\r\n <div class=\"w-8 h-[2px] bg-brand-red\"><\/div>\r\n <span class=\"text-brand-red text-sm font-semibold uppercase tracking-widest\">Why Us<\/span>\r\n <div class=\"w-8 h-[2px] bg-brand-red\"><\/div>\r\n <\/div>\r\n <h2 class=\"reveal reveal-delay-1 font-heading text-4xl sm:text-5xl font-bold text-white mb-4\">Why Choose AutoElite<\/h2>\r\n <p class=\"reveal reveal-delay-2 text-gray-500 text-lg max-w-xl mx-auto\">We deliver a premium car buying experience you can trust.<\/p>\r\n <\/div>\r\n\r\n <div class=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8\">\r\n <div class=\"reveal reveal-delay-1 text-center p-8 rounded-2xl bg-brand-dark border border-brand-border hover:border-brand-red\/30 transition-colors\">\r\n <div class=\"w-16 h-16 bg-brand-red\/10 rounded-2xl flex items-center justify-center mx-auto mb-6\">\r\n <i class=\"fa-solid fa-shield-halved text-brand-red text-2xl\"><\/i>\r\n <\/div>\r\n <h3 class=\"text-white font-bold text-lg mb-3\">Quality Inspected<\/h3>\r\n <p class=\"text-gray-500 text-sm leading-relaxed\">Every vehicle undergoes a rigorous 150-point inspection before it hits our lot.<\/p>\r\n <\/div>\r\n <div class=\"reveal reveal-delay-2 text-center p-8 rounded-2xl bg-brand-dark border border-brand-border hover:border-brand-red\/30 transition-colors\">\r\n <div class=\"w-16 h-16 bg-brand-red\/10 rounded-2xl flex items-center justify-center mx-auto mb-6\">\r\n <i class=\"fa-solid fa-tag text-brand-red text-2xl\"><\/i>\r\n <\/div>\r\n <h3 class=\"text-white font-bold text-lg mb-3\">Affordable Prices<\/h3>\r\n <p class=\"text-gray-500 text-sm leading-relaxed\">Competitive pricing with no hidden fees. What you see is what you pay.<\/p>\r\n <\/div>\r\n <div class=\"reveal reveal-delay-3 text-center p-8 rounded-2xl bg-brand-dark border border-brand-border hover:border-brand-red\/30 transition-colors\">\r\n <div class=\"w-16 h-16 bg-brand-red\/10 rounded-2xl flex items-center justify-center mx-auto mb-6\">\r\n <i class=\"fa-solid fa-hand-holding-dollar text-brand-red text-2xl\"><\/i>\r\n <\/div>\r\n <h3 class=\"text-white font-bold text-lg mb-3\">Financing Help<\/h3>\r\n <p class=\"text-gray-500 text-sm leading-relaxed\">Flexible financing options tailored to your budget and credit situation.<\/p>\r\n <\/div>\r\n <div class=\"reveal reveal-delay-4 text-center p-8 rounded-2xl bg-brand-dark border border-brand-border hover:border-brand-red\/30 transition-colors\">\r\n <div class=\"w-16 h-16 bg-brand-red\/10 rounded-2xl flex items-center justify-center mx-auto mb-6\">\r\n <i class=\"fa-solid fa-award text-brand-red text-2xl\"><\/i>\r\n <\/div>\r\n <h3 class=\"text-white font-bold text-lg mb-3\">Trusted Dealer<\/h3>\r\n <p class=\"text-gray-500 text-sm leading-relaxed\">15+ years of trusted service with thousands of satisfied customers.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- Testimonials -->\r\n <section class=\"py-24 bg-brand-dark relative\">\r\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\r\n <div class=\"text-center mb-16\">\r\n <div class=\"reveal flex items-center justify-center gap-3 mb-4\">\r\n <div class=\"w-8 h-[2px] bg-brand-red\"><\/div>\r\n <span class=\"text-brand-red text-sm font-semibold uppercase tracking-widest\">Testimonials<\/span>\r\n <div class=\"w-8 h-[2px] bg-brand-red\"><\/div>\r\n <\/div>\r\n <h2 class=\"reveal reveal-delay-1 font-heading text-4xl sm:text-5xl font-bold text-white mb-4\">What Our Customers Say<\/h2>\r\n <\/div>\r\n\r\n <div class=\"grid grid-cols-1 md:grid-cols-3 gap-8\">\r\n <div class=\"reveal reveal-delay-1 testimonial-card rounded-2xl bg-brand-gray p-8\">\r\n <div class=\"flex gap-1 mb-5\">\r\n <i class=\"fa-solid fa-star text-brand-red text-sm\"><\/i>\r\n <i class=\"fa-solid fa-star text-brand-red text-sm\"><\/i>\r\n <i class=\"fa-solid fa-star text-brand-red text-sm\"><\/i>\r\n <i class=\"fa-solid fa-star text-brand-red text-sm\"><\/i>\r\n <i class=\"fa-solid fa-star text-brand-red text-sm\"><\/i>\r\n <\/div>\r\n <p class=\"text-gray-400 leading-relaxed mb-6\">\"The entire experience was seamless. Found my dream BMW at a price that beat every other dealer. The team was honest and professional throughout.\"<\/p>\r\n <div class=\"flex items-center gap-4\">\r\n <img decoding=\"async\" src=\"http:\/\/demo75.techhassle.com\/wp-content\/uploads\/2026\/07\/BMW-5-Series.webp\" alt=\"James Mitchell\" class=\"w-12 h-12 rounded-full object-cover\">\r\n <div>\r\n <p class=\"text-white font-semibold text-sm\">James Mitchell<\/p>\r\n <p class=\"text-gray-500 text-xs\">BMW 5 Series Owner<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"reveal reveal-delay-2 testimonial-card rounded-2xl bg-brand-gray p-8\">\r\n <div class=\"flex gap-1 mb-5\">\r\n <i class=\"fa-solid fa-star text-brand-red text-sm\"><\/i>\r\n <i class=\"fa-solid fa-star text-brand-red text-sm\"><\/i>\r\n <i class=\"fa-solid fa-star text-brand-red text-sm\"><\/i>\r\n <i class=\"fa-solid fa-star text-brand-red text-sm\"><\/i>\r\n <i class=\"fa-solid fa-star text-brand-red text-sm\"><\/i>\r\n <\/div>\r\n <p class=\"text-gray-400 leading-relaxed mb-6\">\"Financing was a breeze thanks to their team. They worked with me to find a plan that fit my budget perfectly. Highly recommend AutoElite to anyone.\"<\/p>\r\n <div class=\"flex items-center gap-4\">\r\n <img decoding=\"async\" src=\"http:\/\/demo75.techhassle.com\/wp-content\/uploads\/2026\/07\/Mercedes-C-Class.webp\" alt=\"Sarah Cooper\" class=\"w-12 h-12 rounded-full object-cover\">\r\n <div>\r\n <p class=\"text-white font-semibold text-sm\">Sarah Cooper<\/p>\r\n <p class=\"text-gray-500 text-xs\">Mercedes C-Class Owner<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"reveal reveal-delay-3 testimonial-card rounded-2xl bg-brand-gray p-8\">\r\n <div class=\"flex gap-1 mb-5\">\r\n <i class=\"fa-solid fa-star text-brand-red text-sm\"><\/i>\r\n <i class=\"fa-solid fa-star text-brand-red text-sm\"><\/i>\r\n <i class=\"fa-solid fa-star text-brand-red text-sm\"><\/i>\r\n <i class=\"fa-solid fa-star text-brand-red text-sm\"><\/i>\r\n <i class=\"fa-solid fa-star-half-stroke text-brand-red text-sm\"><\/i>\r\n <\/div>\r\n <p class=\"text-gray-400 leading-relaxed mb-6\">\"Third car I've bought from AutoElite. The quality inspection gives me peace of mind every time. These guys are the real deal \u2014 no pressure, just great cars.\"<\/p>\r\n <div class=\"flex items-center gap-4\">\r\n <img decoding=\"async\" src=\"http:\/\/demo75.techhassle.com\/wp-content\/uploads\/2026\/07\/Audi-A4-Premium.webp\" alt=\"David Park\" class=\"w-12 h-12 rounded-full object-cover\">\r\n <div>\r\n <p class=\"text-white font-semibold text-sm\">David Park<\/p>\r\n <p class=\"text-gray-500 text-xs\">Audi A4 Owner<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- Statistics -->\r\n <section class=\"py-20 bg-brand-gray relative overflow-hidden\">\r\n <div class=\"absolute inset-0 opacity-[0.02]\" style=\"background: radial-gradient(circle at 50% 50%, #D42B2B, transparent 70%);\"><\/div>\r\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\r\n <div class=\"grid grid-cols-2 lg:grid-cols-4 gap-6\">\r\n <div class=\"reveal reveal-delay-1 stat-card text-center p-8 rounded-2xl bg-brand-dark\">\r\n <p class=\"font-heading text-4xl sm:text-5xl font-bold text-brand-red mb-2\" data-count=\"2850\">0<\/p>\r\n <p class=\"text-gray-500 text-sm font-medium uppercase tracking-wider\">Cars Sold<\/p>\r\n <\/div>\r\n <div class=\"reveal reveal-delay-2 stat-card text-center p-8 rounded-2xl bg-brand-dark\">\r\n <p class=\"font-heading text-4xl sm:text-5xl font-bold text-brand-red mb-2\" data-count=\"2100\">0<\/p>\r\n <p class=\"text-gray-500 text-sm font-medium uppercase tracking-wider\">Happy Customers<\/p>\r\n <\/div>\r\n <div class=\"reveal reveal-delay-3 stat-card text-center p-8 rounded-2xl bg-brand-dark\">\r\n <p class=\"font-heading text-4xl sm:text-5xl font-bold text-brand-red mb-2\" data-count=\"15\">0<\/p>\r\n <p class=\"text-gray-500 text-sm font-medium uppercase tracking-wider\">Years Experience<\/p>\r\n <\/div>\r\n <div class=\"reveal reveal-delay-4 stat-card text-center p-8 rounded-2xl bg-brand-dark\">\r\n <p class=\"font-heading text-4xl sm:text-5xl font-bold text-brand-red mb-2\" data-count=\"98\">0<\/p>\r\n <p class=\"text-gray-500 text-sm font-medium uppercase tracking-wider\">Satisfaction Rate %<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- CTA -->\r\n <section class=\"py-24 bg-brand-dark relative overflow-hidden red-glow\">\r\n <div class=\"absolute inset-0 opacity-[0.04]\" style=\"background: radial-gradient(ellipse at center, #D42B2B, transparent 60%);\"><\/div>\r\n <div class=\"max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center relative z-10\">\r\n <h2 class=\"reveal font-heading text-4xl sm:text-5xl lg:text-6xl font-bold text-white mb-6\">Ready to Drive Your <span class=\"text-brand-red\">Dream Car<\/span>?<\/h2>\r\n <p class=\"reveal reveal-delay-1 text-gray-400 text-lg mb-10 max-w-2xl mx-auto\">Schedule a test drive or visit our showroom today. Our team is ready to help you find the perfect vehicle.<\/p>\r\n <div class=\"reveal reveal-delay-2 flex flex-wrap justify-center gap-4\">\r\n <button onclick=\"showPage('products')\" class=\"btn-primary bg-brand-red hover:bg-brand-redHover text-white font-semibold px-10 py-4 rounded-xl transition-colors text-base\">\r\n Browse Inventory\r\n <\/button>\r\n <button onclick=\"showPage('booking')\" class=\"border border-white\/20 hover:border-brand-red text-white hover:text-brand-red font-semibold px-10 py-4 rounded-xl transition-colors text-base\">\r\n Schedule Visit\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n<\/main>\r\n\r\n\r\n<!-- ===================== PAGE 2: ABOUT ===================== -->\r\n<main id=\"page-about\" class=\"page-section\">\r\n\r\n <!-- Hero -->\r\n <section class=\"relative pt-32 pb-20 bg-brand-dark grain\">\r\n <div class=\"absolute inset-0 opacity-10\">\r\n <img decoding=\"async\" src=\"http:\/\/demo75.techhassle.com\/wp-content\/uploads\/2026\/07\/Car-showroom.webp\" alt=\"\" class=\"w-full h-full object-cover\">\r\n <\/div>\r\n <div class=\"absolute inset-0 bg-gradient-to-b from-brand-dark via-brand-dark\/90 to-brand-dark\"><\/div>\r\n <div class=\"relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center\">\r\n <div class=\"reveal flex items-center justify-center gap-3 mb-4\">\r\n <div class=\"w-8 h-[2px] bg-brand-red\"><\/div>\r\n <span class=\"text-brand-red text-sm font-semibold uppercase tracking-widest\">About Us<\/span>\r\n <div class=\"w-8 h-[2px] bg-brand-red\"><\/div>\r\n <\/div>\r\n <h1 class=\"reveal reveal-delay-1 font-heading text-5xl sm:text-6xl font-bold text-white mb-6\">Our Story<\/h1>\r\n <p class=\"reveal reveal-delay-2 text-gray-400 text-lg max-w-2xl mx-auto\">Over 15 years of delivering premium vehicles and exceptional service to our community.<\/p>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- Company Story -->\r\n <section class=\"py-24 bg-brand-gray\">\r\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\r\n <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-16 items-center\">\r\n <div class=\"reveal\">\r\n <img decoding=\"async\" src=\"http:\/\/demo75.techhassle.com\/wp-content\/uploads\/2026\/07\/Car-showroom.webp\" alt=\"AutoElite showroom interior\" class=\"rounded-2xl w-full h-[400px] object-cover\">\r\n <\/div>\r\n <div>\r\n <div class=\"reveal flex items-center gap-3 mb-4\">\r\n <div class=\"w-8 h-[2px] bg-brand-red\"><\/div>\r\n <span class=\"text-brand-red text-sm font-semibold uppercase tracking-widest\">Since 2009<\/span>\r\n <\/div>\r\n <h2 class=\"reveal reveal-delay-1 font-heading text-3xl sm:text-4xl font-bold text-white mb-6\">Built on Trust, Driven by Passion<\/h2>\r\n <p class=\"reveal reveal-delay-2 text-gray-400 leading-relaxed mb-5\">AutoElite was founded with a simple belief: buying a car should be an exciting experience, not a stressful one. What started as a small family lot has grown into one of the region's most respected dealerships.<\/p>\r\n <p class=\"reveal reveal-delay-3 text-gray-400 leading-relaxed mb-5\">We handpick every vehicle in our inventory, ensuring each one meets our strict quality standards. Our team of automotive experts inspects every car inside and out so you can buy with complete confidence.<\/p>\r\n <p class=\"reveal reveal-delay-4 text-gray-400 leading-relaxed\">Today, with over 2,850 cars sold and counting, we continue to uphold the values that got us here \u2014 honesty, quality, and putting our customers first.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- Mission & Vision -->\r\n <section class=\"py-24 bg-brand-dark\">\r\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\r\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-8\">\r\n <div class=\"reveal p-10 rounded-2xl bg-brand-gray border border-brand-border hover:border-brand-red\/30 transition-colors\">\r\n <div class=\"w-14 h-14 bg-brand-red\/10 rounded-xl flex items-center justify-center mb-6\">\r\n <i class=\"fa-solid fa-bullseye text-brand-red text-xl\"><\/i>\r\n <\/div>\r\n <h3 class=\"text-white font-bold text-2xl mb-4\">Our Mission<\/h3>\r\n <p class=\"text-gray-400 leading-relaxed\">To provide an exceptional car buying experience by offering quality-inspected vehicles at fair prices, with transparent processes and personalized customer service that builds lifelong relationships.<\/p>\r\n <\/div>\r\n <div class=\"reveal reveal-delay-1 p-10 rounded-2xl bg-brand-gray border border-brand-border hover:border-brand-red\/30 transition-colors\">\r\n <div class=\"w-14 h-14 bg-brand-red\/10 rounded-xl flex items-center justify-center mb-6\">\r\n <i class=\"fa-solid fa-eye text-brand-red text-xl\"><\/i>\r\n <\/div>\r\n <h3 class=\"text-white font-bold text-2xl mb-4\">Our Vision<\/h3>\r\n <p class=\"text-gray-400 leading-relaxed\">To become the most trusted name in premium pre-owned vehicles, setting the industry standard for quality, integrity, and customer satisfaction in every community we serve.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- Meet Our Team -->\r\n <section class=\"py-24 bg-brand-gray\">\r\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\r\n <div class=\"text-center mb-16\">\r\n <div class=\"reveal flex items-center justify-center gap-3 mb-4\">\r\n <div class=\"w-8 h-[2px] bg-brand-red\"><\/div>\r\n <span class=\"text-brand-red text-sm font-semibold uppercase tracking-widest\">Our Team<\/span>\r\n <div class=\"w-8 h-[2px] bg-brand-red\"><\/div>\r\n <\/div>\r\n <h2 class=\"reveal reveal-delay-1 font-heading text-4xl sm:text-5xl font-bold text-white mb-4\">Meet the Experts<\/h2>\r\n <p class=\"reveal reveal-delay-2 text-gray-500 text-lg max-w-xl mx-auto\">Dedicated professionals who make your car buying journey smooth and enjoyable.<\/p>\r\n <\/div>\r\n\r\n <div class=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8\">\r\n <div class=\"reveal reveal-delay-1 team-card text-center\">\r\n <div class=\"overflow-hidden rounded-2xl mb-5 border border-brand-border\">\r\n <img decoding=\"async\" src=\"http:\/\/demo75.techhassle.com\/wp-content\/uploads\/2026\/07\/user1.webp\" alt=\"Robert Anderson\" class=\"w-full h-72 object-cover\">\r\n <\/div>\r\n <h3 class=\"text-white font-bold text-lg\">Robert Anderson<\/h3>\r\n <p class=\"text-brand-red text-sm font-medium mb-2\">Founder & CEO<\/p>\r\n <p class=\"text-gray-500 text-sm\">30+ years in automotive industry<\/p>\r\n <\/div>\r\n <div class=\"reveal reveal-delay-2 team-card text-center\">\r\n <div class=\"overflow-hidden rounded-2xl mb-5 border border-brand-border\">\r\n <img decoding=\"async\" src=\"http:\/\/demo75.techhassle.com\/wp-content\/uploads\/2026\/07\/user1.webp\" alt=\"Lisa Chen\" class=\"w-full h-72 object-cover\">\r\n <\/div>\r\n <h3 class=\"text-white font-bold text-lg\">Lisa Chen<\/h3>\r\n <p class=\"text-brand-red text-sm font-medium mb-2\">Sales Director<\/p>\r\n <p class=\"text-gray-500 text-sm\">Expert in luxury vehicles<\/p>\r\n <\/div>\r\n <div class=\"reveal reveal-delay-3 team-card text-center\">\r\n <div class=\"overflow-hidden rounded-2xl mb-5 border border-brand-border\">\r\n <img decoding=\"async\" src=\"http:\/\/demo75.techhassle.com\/wp-content\/uploads\/2026\/07\/user1.webp\" alt=\"Marcus Johnson\" class=\"w-full h-72 object-cover\">\r\n <\/div>\r\n <h3 class=\"text-white font-bold text-lg\">Marcus Johnson<\/h3>\r\n <p class=\"text-brand-red text-sm font-medium mb-2\">Lead Mechanic<\/p>\r\n <p class=\"text-gray-500 text-sm\">ASE Certified Master Technician<\/p>\r\n <\/div>\r\n <div class=\"reveal reveal-delay-4 team-card text-center\">\r\n <div class=\"overflow-hidden rounded-2xl mb-5 border border-brand-border\">\r\n <img decoding=\"async\" src=\"http:\/\/demo75.techhassle.com\/wp-content\/uploads\/2026\/07\/user1.webp\" alt=\"Emily Torres\" class=\"w-full h-72 object-cover\">\r\n <\/div>\r\n <h3 class=\"text-white font-bold text-lg\">Emily Torres<\/h3>\r\n <p class=\"text-brand-red text-sm font-medium mb-2\">Finance Manager<\/p>\r\n <p class=\"text-gray-500 text-sm\">Specialist in auto financing solutions<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- Why Customers Trust Us -->\r\n <section class=\"py-24 bg-brand-dark\">\r\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\r\n <div class=\"text-center mb-16\">\r\n <h2 class=\"reveal font-heading text-4xl sm:text-5xl font-bold text-white mb-4\">Why Customers Trust Us<\/h2>\r\n <\/div>\r\n <div class=\"grid grid-cols-1 md:grid-cols-3 gap-8\">\r\n <div class=\"reveal reveal-delay-1 flex gap-5\">\r\n <div class=\"flex-shrink-0 w-12 h-12 bg-brand-red\/10 rounded-xl flex items-center justify-center\">\r\n <i class=\"fa-solid fa-check-double text-brand-red\"><\/i>\r\n <\/div>\r\n <div>\r\n <h3 class=\"text-white font-bold mb-2\">Transparent Pricing<\/h3>\r\n <p class=\"text-gray-500 text-sm leading-relaxed\">No hidden fees, no gimmicks. Our prices include all standard costs upfront.<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"reveal reveal-delay-2 flex gap-5\">\r\n <div class=\"flex-shrink-0 w-12 h-12 bg-brand-red\/10 rounded-xl flex items-center justify-center\">\r\n <i class=\"fa-solid fa-car-rear text-brand-red\"><\/i>\r\n <\/div>\r\n <div>\r\n <h3 class=\"text-white font-bold mb-2\">Vehicle History Reports<\/h3>\r\n <p class=\"text-gray-500 text-sm leading-relaxed\">Every car comes with a complete history report for your peace of mind.<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"reveal reveal-delay-3 flex gap-5\">\r\n <div class=\"flex-shrink-0 w-12 h-12 bg-brand-red\/10 rounded-xl flex items-center justify-center\">\r\n <i class=\"fa-solid fa-headset text-brand-red\"><\/i>\r\n <\/div>\r\n <div>\r\n <h3 class=\"text-white font-bold mb-2\">After-Sale Support<\/h3>\r\n <p class=\"text-gray-500 text-sm leading-relaxed\">Our relationship doesn't end at the sale. We offer ongoing support and service.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- CTA -->\r\n <section class=\"py-24 bg-brand-gray relative red-glow\">\r\n <div class=\"absolute inset-0 opacity-[0.03]\" style=\"background: radial-gradient(ellipse at center, #D42B2B, transparent 60%);\"><\/div>\r\n <div class=\"max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 text-center relative z-10\">\r\n <h2 class=\"reveal font-heading text-4xl sm:text-5xl font-bold text-white mb-6\">Visit Our Showroom<\/h2>\r\n <p class=\"reveal reveal-delay-1 text-gray-400 text-lg mb-10\">Come see our collection in person. Our doors are always open for you.<\/p>\r\n <button onclick=\"showPage('booking')\" class=\"reveal reveal-delay-2 btn-primary bg-brand-red hover:bg-brand-redHover text-white font-semibold px-10 py-4 rounded-xl transition-colors text-base\">\r\n Book an Appointment\r\n <\/button>\r\n <\/div>\r\n <\/section>\r\n<\/main>\r\n\r\n\r\n<!-- ===================== PAGE 3: PRODUCTS ===================== -->\r\n<main id=\"page-products\" class=\"page-section\">\r\n\r\n <!-- Hero -->\r\n <section class=\"relative pt-32 pb-16 bg-brand-dark grain\">\r\n <div class=\"absolute inset-0 opacity-10\">\r\n <img decoding=\"async\" src=\"http:\/\/demo75.techhassle.com\/wp-content\/uploads\/2026\/07\/Hero-section-image.webp\" alt=\"\" class=\"w-full h-full object-cover\">\r\n <\/div>\r\n <div class=\"absolute inset-0 bg-gradient-to-b from-brand-dark via-brand-dark\/90 to-brand-dark\"><\/div>\r\n <div class=\"relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center\">\r\n <div class=\"reveal flex items-center justify-center gap-3 mb-4\">\r\n <div class=\"w-8 h-[2px] bg-brand-red\"><\/div>\r\n <span class=\"text-brand-red text-sm font-semibold uppercase tracking-widest\">Inventory<\/span>\r\n <div class=\"w-8 h-[2px] bg-brand-red\"><\/div>\r\n <\/div>\r\n <h1 class=\"reveal reveal-delay-1 font-heading text-5xl sm:text-6xl font-bold text-white mb-6\">Our Cars<\/h1>\r\n <p class=\"reveal reveal-delay-2 text-gray-400 text-lg max-w-2xl mx-auto\">Browse our complete inventory of quality-inspected vehicles.<\/p>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- Search & Filters -->\r\n <section class=\"py-10 bg-brand-gray border-b border-brand-border\">\r\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\r\n <div class=\"reveal flex flex-col md:flex-row gap-4 items-center justify-between\">\r\n <div class=\"flex flex-wrap gap-2\">\r\n <button class=\"filter-btn active text-sm px-5 py-2.5 rounded-lg border border-brand-border text-gray-400 font-medium\" onclick=\"setFilter(this)\">All<\/button>\r\n <button class=\"filter-btn text-sm px-5 py-2.5 rounded-lg border border-brand-border text-gray-400 font-medium\" onclick=\"setFilter(this)\">Sedan<\/button>\r\n <button class=\"filter-btn text-sm px-5 py-2.5 rounded-lg border border-brand-border text-gray-400 font-medium\" onclick=\"setFilter(this)\">SUV<\/button>\r\n <button class=\"filter-btn text-sm px-5 py-2.5 rounded-lg border border-brand-border text-gray-400 font-medium\" onclick=\"setFilter(this)\">Coupe<\/button>\r\n <button class=\"filter-btn text-sm px-5 py-2.5 rounded-lg border border-brand-border text-gray-400 font-medium\" onclick=\"setFilter(this)\">Truck<\/button>\r\n <button class=\"filter-btn text-sm px-5 py-2.5 rounded-lg border border-brand-border text-gray-400 font-medium\" onclick=\"setFilter(this)\">Electric<\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- Car Grid -->\r\n <section class=\"py-16 bg-brand-gray\">\r\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\r\n <div class=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6\" id=\"inventoryGrid\"><\/div>\r\n\r\n <!-- Pagination -->\r\n <div class=\"reveal flex justify-center items-center gap-2 mt-16\">\r\n <button class=\"page-btn w-10 h-10 rounded-lg border border-brand-border text-gray-500 flex items-center justify-center text-sm hover:border-brand-red\" aria-label=\"Previous page\"><i class=\"fa-solid fa-chevron-left text-xs\"><\/i><\/button>\r\n <button class=\"page-btn active w-10 h-10 rounded-lg border border-brand-border text-gray-500 flex items-center justify-center text-sm font-medium\">1<\/button>\r\n <button class=\"page-btn w-10 h-10 rounded-lg border border-brand-border text-gray-500 flex items-center justify-center text-sm font-medium\">2<\/button>\r\n <button class=\"page-btn w-10 h-10 rounded-lg border border-brand-border text-gray-500 flex items-center justify-center text-sm font-medium\">3<\/button>\r\n <span class=\"text-gray-600 px-1\">...<\/span>\r\n <button class=\"page-btn w-10 h-10 rounded-lg border border-brand-border text-gray-500 flex items-center justify-center text-sm font-medium\">8<\/button>\r\n <button class=\"page-btn w-10 h-10 rounded-lg border border-brand-border text-gray-500 flex items-center justify-center text-sm hover:border-brand-red\" aria-label=\"Next page\"><i class=\"fa-solid fa-chevron-right text-xs\"><\/i><\/button>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n<\/main>\r\n\r\n\r\n<!-- ===================== PAGE 4: BLOG ===================== -->\r\n<main id=\"page-blog\" class=\"page-section\">\r\n\r\n <!-- Hero -->\r\n <section class=\"relative pt-32 pb-16 bg-brand-dark grain\">\r\n <div class=\"absolute inset-0 opacity-10\">\r\n <img decoding=\"async\" src=\"http:\/\/demo75.techhassle.com\/wp-content\/uploads\/2026\/07\/Hero-section-image.webp\" alt=\"\" class=\"w-full h-full object-cover\">\r\n <\/div>\r\n <div class=\"absolute inset-0 bg-gradient-to-b from-brand-dark via-brand-dark\/90 to-brand-dark\"><\/div>\r\n <div class=\"relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center\">\r\n <div class=\"reveal flex items-center justify-center gap-3 mb-4\">\r\n <div class=\"w-8 h-[2px] bg-brand-red\"><\/div>\r\n <span class=\"text-brand-red text-sm font-semibold uppercase tracking-widest\">Blog<\/span>\r\n <div class=\"w-8 h-[2px] bg-brand-red\"><\/div>\r\n <\/div>\r\n <h1 class=\"reveal reveal-delay-1 font-heading text-5xl sm:text-6xl font-bold text-white mb-6\">Latest Articles<\/h1>\r\n <p class=\"reveal reveal-delay-2 text-gray-400 text-lg max-w-2xl mx-auto\">Tips, guides, and news from the world of automobiles.<\/p>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- Blog Content -->\r\n <section class=\"py-16 bg-brand-gray\">\r\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\r\n <div class=\"flex flex-col lg:flex-row gap-10\">\r\n\r\n <!-- Main Content -->\r\n <div class=\"flex-1\">\r\n <!-- Posts Grid -->\r\n <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-8\" id=\"blogGrid\"><\/div>\r\n\r\n <!-- Pagination -->\r\n <div class=\"reveal flex flex-wrap justify-center items-center gap-2 mt-14\">\r\n <button class=\"page-btn h-10 px-4 rounded-lg border border-brand-border text-gray-500 flex items-center justify-center text-sm font-medium gap-2 hover:border-brand-red\" aria-label=\"Previous page\">\r\n <i class=\"fa-solid fa-chevron-left text-xs\"><\/i> Prev\r\n <\/button>\r\n <button class=\"page-btn active w-10 h-10 rounded-lg border border-brand-border text-gray-500 flex items-center justify-center text-sm font-medium\">1<\/button>\r\n <button class=\"page-btn w-10 h-10 rounded-lg border border-brand-border text-gray-500 flex items-center justify-center text-sm font-medium\">2<\/button>\r\n <button class=\"page-btn w-10 h-10 rounded-lg border border-brand-border text-gray-500 flex items-center justify-center text-sm font-medium\">3<\/button>\r\n <button class=\"page-btn h-10 px-4 rounded-lg border border-brand-border text-gray-500 flex items-center justify-center text-sm font-medium gap-2 hover:border-brand-red\" aria-label=\"Next page\">\r\n Next <i class=\"fa-solid fa-chevron-right text-xs\"><\/i>\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Sidebar -->\r\n <aside class=\"w-full lg:w-80 flex-shrink-0\">\r\n <!-- Newsletter -->\r\n <div class=\"reveal rounded-2xl bg-brand-red\/10 border border-brand-red\/20 p-6\">\r\n <div class=\"w-12 h-12 bg-brand-red\/20 rounded-xl flex items-center justify-center mb-4\">\r\n <i class=\"fa-solid fa-envelope text-brand-red text-lg\"><\/i>\r\n <\/div>\r\n <h3 class=\"text-white font-bold text-lg mb-2\">Newsletter<\/h3>\r\n <p class=\"text-gray-400 text-sm mb-5 leading-relaxed\">Get the latest car tips and deals delivered to your inbox.<\/p>\r\n <input type=\"email\" placeholder=\"Your email address\" class=\"form-input py-3 text-sm mb-3 w-full\" aria-label=\"Email for newsletter\">\r\n <button class=\"btn-primary w-full bg-brand-red hover:bg-brand-redHover text-white font-semibold py-3 rounded-lg transition-colors text-sm\">Subscribe<\/button>\r\n <\/div>\r\n <\/aside>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n<\/main>\r\n\r\n\r\n<!-- ===================== PAGE 5: SINGLE BLOG ===================== -->\r\n<main id=\"page-single-blog\" class=\"page-section\">\r\n\r\n <!-- Hero -->\r\n <section class=\"relative pt-32 pb-16 bg-brand-dark grain\">\r\n <div class=\"absolute inset-0 opacity-10\">\r\n <img decoding=\"async\" src=\"http:\/\/demo75.techhassle.com\/wp-content\/uploads\/2026\/07\/Hero-section-image.webp\" alt=\"\" class=\"w-full h-full object-cover\">\r\n <\/div>\r\n <div class=\"absolute inset-0 bg-gradient-to-b from-brand-dark via-brand-dark\/90 to-brand-dark\"><\/div>\r\n <div class=\"relative z-10 max-w-4xl mx-auto px-4 sm:px-6 lg:px-8\">\r\n <button onclick=\"showPage('blog')\" class=\"reveal flex items-center gap-2 text-gray-400 hover:text-brand-red transition-colors text-sm font-medium mb-8\">\r\n <i class=\"fa-solid fa-arrow-left text-xs\"><\/i> Back to Blog\r\n <\/button>\r\n <div class=\"reveal flex items-center gap-4 mb-5\">\r\n <span class=\"text-brand-red text-xs font-semibold uppercase tracking-wider\" id=\"singleBlogCategory\">Buying Guides<\/span>\r\n <span class=\"text-gray-600 text-xs\" id=\"singleBlogDate\">Jan 15, 2025<\/span>\r\n <span class=\"text-gray-600 text-xs\"><i class=\"fa-regular fa-clock mr-1\"><\/i><span id=\"singleBlogReadTime\">8 min<\/span> read<\/span>\r\n <\/div>\r\n <h1 class=\"reveal reveal-delay-1 font-heading text-4xl sm:text-5xl font-bold text-white leading-tight\" id=\"singleBlogTitle\">The Complete 2025 Car Buying Guide: Everything You Need to Know<\/h1>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- Featured Image -->\r\n <section class=\"bg-brand-dark\">\r\n <div class=\"max-w-4xl mx-auto px-4 sm:px-6 lg:px-8\">\r\n <div class=\"reveal rounded-2xl overflow-hidden border border-brand-border\">\r\n <img decoding=\"async\" id=\"singleBlogImage\" src=\"http:\/\/demo75.techhassle.com\/wp-content\/uploads\/2026\/07\/5-Essential-Tips-for-First-Time-Car-Buyers.webp\" alt=\"Blog featured image\" class=\"w-full h-72 sm:h-96 object-cover\">\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- Content -->\r\n <section class=\"py-16 bg-brand-dark\">\r\n <div class=\"max-w-4xl mx-auto px-4 sm:px-6 lg:px-8\">\r\n <div class=\"max-w-3xl mx-auto\">\r\n <!-- Author -->\r\n <div class=\"reveal flex items-center gap-4 mb-10 pb-10 border-b border-brand-border\">\r\n <img decoding=\"async\" src=\"http:\/\/demo75.techhassle.com\/wp-content\/uploads\/2026\/07\/user1.webp\" alt=\"AutoElite Team\" class=\"w-12 h-12 rounded-full object-cover\">\r\n <div>\r\n <p class=\"text-white font-semibold text-sm\">AutoElite Team<\/p>\r\n <p class=\"text-gray-500 text-xs\">Automotive Experts & Enthusiasts<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Article Body -->\r\n <div class=\"reveal text-gray-400 leading-relaxed space-y-6\" id=\"singleBlogBody\">\r\n <p>Buying a car is one of the most significant financial decisions you'll make. Whether it's your first vehicle or your tenth, the process can feel overwhelming with so many options, financing terms, and dealerships to choose from.<\/p>\r\n\r\n <h2 class=\"text-white font-bold text-2xl mt-10 mb-4\">1. Set Your Budget First<\/h2>\r\n <p>Before you start browsing, determine exactly how much you can afford. A good rule of thumb is the 20\/4\/10 rule: put down at least 20%, finance for no more than 4 years, and keep your total monthly vehicle expenses under 10% of your gross income.<\/p>\r\n <p>Don't forget to factor in insurance, fuel, maintenance, and registration costs. These ongoing expenses can add $200\u2013$500 per month to your total cost of ownership.<\/p>\r\n\r\n <h2 class=\"text-white font-bold text-2xl mt-10 mb-4\">2. Research Before You Shop<\/h2>\r\n <p>Knowledge is your best negotiation tool. Research the make and model you're interested in, including common issues, reliability ratings, and fair market value. Websites like Kelley Blue Book and Edmunds provide excellent baseline pricing.<\/p>\r\n <p>Read owner reviews and join online forums dedicated to your target vehicle. Real-world feedback from current owners often reveals things that professional reviews miss.<\/p>\r\n\r\n <h2 class=\"text-white font-bold text-2xl mt-10 mb-4\">3. New vs. Used: Making the Right Choice<\/h2>\r\n <p>A new car comes with the latest features, full warranty, and that new-car smell \u2014 but it also depreciates 20\u201330% in the first three years. A quality pre-owned vehicle offers significantly better value per dollar.<\/p>\r\n <p>Certified pre-owned (CPO) programs bridge the gap, offering newer vehicles with extended warranties and multi-point inspections. At AutoElite, every vehicle goes through our comprehensive 150-point inspection.<\/p>\r\n\r\n <h2 class=\"text-white font-bold text-2xl mt-10 mb-4\">4. The Test Drive Matters<\/h2>\r\n <p>Never skip the test drive. This is your opportunity to evaluate how the car feels, sounds, and performs in real-world conditions. Drive it on highways, city streets, and if possible, on roads similar to your daily commute.<\/p>\r\n\r\n <h2 class=\"text-white font-bold text-2xl mt-10 mb-4\">5. Understand Financing Options<\/h2>\r\n <p>Get pre-approved for a loan before visiting the dealership. This gives you a baseline rate to compare against the dealer's financing offers. Don't focus solely on the monthly payment \u2014 look at the total interest paid over the life of the loan.<\/p>\r\n\r\n <div class=\"bg-brand-gray border border-brand-border rounded-2xl p-8 my-10\">\r\n <h3 class=\"text-white font-bold text-lg mb-3\"><i class=\"fa-solid fa-lightbulb text-brand-red mr-2\"><\/i>Pro Tip<\/h3>\r\n <p class=\"text-gray-400 text-sm leading-relaxed\">Always get any agreement in writing before signing. Verbal promises from salespeople aren't legally binding. Review every line item on the purchase agreement.<\/p>\r\n <\/div>\r\n\r\n <h2 class=\"text-white font-bold text-2xl mt-10 mb-4\">Final Thoughts<\/h2>\r\n <p>Buying a car doesn't have to be stressful. With proper preparation, realistic expectations, and a trusted dealership partner, you can find a vehicle that fits your needs, budget, and lifestyle.<\/p>\r\n <p>At AutoElite, we're committed to making your car buying experience transparent, enjoyable, and rewarding. Visit our showroom or schedule an appointment to explore our carefully curated inventory.<\/p>\r\n <\/div>\r\n\r\n <!-- Tags -->\r\n <div class=\"reveal flex flex-wrap gap-2 mt-10 pt-10 border-t border-brand-border\">\r\n <span class=\"text-gray-500 text-sm font-medium mr-2\">Tags:<\/span>\r\n <a href=\"#\" class=\"bg-brand-gray border border-brand-border text-gray-400 text-xs px-3 py-1.5 rounded-lg hover:border-brand-red hover:text-brand-red transition-colors\">Car Buying<\/a>\r\n <a href=\"#\" class=\"bg-brand-gray border border-brand-border text-gray-400 text-xs px-3 py-1.5 rounded-lg hover:border-brand-red hover:text-brand-red transition-colors\">Tips<\/a>\r\n <a href=\"#\" class=\"bg-brand-gray border border-brand-border text-gray-400 text-xs px-3 py-1.5 rounded-lg hover:border-brand-red hover:text-brand-red transition-colors\">Guide<\/a>\r\n <a href=\"#\" class=\"bg-brand-gray border border-brand-border text-gray-400 text-xs px-3 py-1.5 rounded-lg hover:border-brand-red hover:text-brand-red transition-colors\">Financing<\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n<\/main>\r\n\r\n\r\n<!-- ===================== PAGE 6: BOOKING ===================== -->\r\n<main id=\"page-booking\" class=\"page-section\">\r\n\r\n <!-- Hero -->\r\n <section class=\"relative pt-32 pb-16 bg-brand-dark grain\">\r\n <div class=\"absolute inset-0 opacity-10\">\r\n <img decoding=\"async\" src=\"http:\/\/demo75.techhassle.com\/wp-content\/uploads\/2026\/07\/Understanding-Your-Credit-Score-for-Car-Loans.webp\" alt=\"\" class=\"w-full h-full object-cover\">\r\n <\/div>\r\n <div class=\"absolute inset-0 bg-gradient-to-b from-brand-dark via-brand-dark\/90 to-brand-dark\"><\/div>\r\n <div class=\"relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center\">\r\n <div class=\"reveal flex items-center justify-center gap-3 mb-4\">\r\n <div class=\"w-8 h-[2px] bg-brand-red\"><\/div>\r\n <span class=\"text-brand-red text-sm font-semibold uppercase tracking-widest\">Appointment<\/span>\r\n <div class=\"w-8 h-[2px] bg-brand-red\"><\/div>\r\n <\/div>\r\n <h1 class=\"reveal reveal-delay-1 font-heading text-5xl sm:text-6xl font-bold text-white mb-6\">Book a Visit<\/h1>\r\n <p class=\"reveal reveal-delay-2 text-gray-400 text-lg max-w-2xl mx-auto\">Schedule your test drive or showroom visit today.<\/p>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- Booking Form & Info -->\r\n <section class=\"py-24 bg-brand-gray\">\r\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\r\n <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-16\">\r\n\r\n <!-- Form -->\r\n <div class=\"reveal\">\r\n <h2 class=\"font-heading text-3xl font-bold text-white mb-8\">Schedule Your Appointment<\/h2>\r\n <form class=\"space-y-5\" onsubmit=\"handleBooking(event)\">\r\n <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-5\">\r\n <div>\r\n <label class=\"block text-gray-400 text-sm font-medium mb-2\">First Name *<\/label>\r\n <input type=\"text\" class=\"form-input\" placeholder=\"John\" required>\r\n <\/div>\r\n <div>\r\n <label class=\"block text-gray-400 text-sm font-medium mb-2\">Last Name *<\/label>\r\n <input type=\"text\" class=\"form-input\" placeholder=\"Doe\" required>\r\n <\/div>\r\n <\/div>\r\n <div>\r\n <label class=\"block text-gray-400 text-sm font-medium mb-2\">Email Address *<\/label>\r\n <input type=\"email\" class=\"form-input\" placeholder=\"john@example.com\" required>\r\n <\/div>\r\n <div>\r\n <label class=\"block text-gray-400 text-sm font-medium mb-2\">Phone Number *<\/label>\r\n <input type=\"tel\" class=\"form-input\" placeholder=\"+1 (555) 000-0000\" required>\r\n <\/div>\r\n <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-5\">\r\n <div>\r\n <label class=\"block text-gray-400 text-sm font-medium mb-2\">Preferred Date *<\/label>\r\n <input type=\"date\" class=\"form-input\" required>\r\n <\/div>\r\n <div>\r\n <label class=\"block text-gray-400 text-sm font-medium mb-2\">Preferred Time *<\/label>\r\n <select class=\"form-input\" required>\r\n <option value=\"\">Select Time<\/option>\r\n <option>9:00 AM<\/option>\r\n <option>10:00 AM<\/option>\r\n <option>11:00 AM<\/option>\r\n <option>12:00 PM<\/option>\r\n <option>1:00 PM<\/option>\r\n <option>2:00 PM<\/option>\r\n <option>3:00 PM<\/option>\r\n <option>4:00 PM<\/option>\r\n <option>5:00 PM<\/option>\r\n <\/select>\r\n <\/div>\r\n <\/div>\r\n <div>\r\n <label class=\"block text-gray-400 text-sm font-medium mb-2\">Interested In<\/label>\r\n <select class=\"form-input\">\r\n <option value=\"\">Select Option<\/option>\r\n <option>Test Drive<\/option>\r\n <option>Showroom Visit<\/option>\r\n <option>Financing Consultation<\/option>\r\n <option>Vehicle Inspection<\/option>\r\n <option>Other<\/option>\r\n <\/select>\r\n <\/div>\r\n <div>\r\n <label class=\"block text-gray-400 text-sm font-medium mb-2\">Additional Notes<\/label>\r\n <textarea class=\"form-input\" rows=\"4\" placeholder=\"Tell us more about what you're looking for...\"><\/textarea>\r\n <\/div>\r\n <button type=\"submit\" class=\"btn-primary w-full bg-brand-red hover:bg-brand-redHover text-white font-semibold py-4 rounded-xl transition-colors text-base\">\r\n Submit Booking Request\r\n <\/button>\r\n <\/form>\r\n <\/div>\r\n\r\n <!-- Info -->\r\n <div>\r\n <div class=\"reveal rounded-2xl overflow-hidden border border-brand-border mb-8\">\r\n <img decoding=\"async\" src=\"http:\/\/demo75.techhassle.com\/wp-content\/uploads\/2026\/07\/Understanding-Your-Credit-Score-for-Car-Loans.webp\" alt=\"AutoElite Showroom Exterior\" class=\"w-full h-64 object-cover\">\r\n <\/div>\r\n <div class=\"reveal space-y-6\">\r\n <div class=\"flex gap-5\">\r\n <div class=\"flex-shrink-0 w-12 h-12 bg-brand-red\/10 rounded-xl flex items-center justify-center\">\r\n <i class=\"fa-solid fa-location-dot text-brand-red\"><\/i>\r\n <\/div>\r\n <div>\r\n <h3 class=\"text-white font-bold mb-1\">Visit Us<\/h3>\r\n <p class=\"text-gray-500 text-sm leading-relaxed\">1234 Auto Drive, Suite 100<br>Los Angeles, CA 90015<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"flex gap-5\">\r\n <div class=\"flex-shrink-0 w-12 h-12 bg-brand-red\/10 rounded-xl flex items-center justify-center\">\r\n <i class=\"fa-solid fa-phone text-brand-red\"><\/i>\r\n <\/div>\r\n <div>\r\n <h3 class=\"text-white font-bold mb-1\">Call Us<\/h3>\r\n <p class=\"text-gray-500 text-sm\">+1 (555) 123-4567<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"flex gap-5\">\r\n <div class=\"flex-shrink-0 w-12 h-12 bg-brand-red\/10 rounded-xl flex items-center justify-center\">\r\n <i class=\"fa-solid fa-envelope text-brand-red\"><\/i>\r\n <\/div>\r\n <div>\r\n <h3 class=\"text-white font-bold mb-1\">Email Us<\/h3>\r\n <p class=\"text-gray-500 text-sm\">info@autoelite.com<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"flex gap-5\">\r\n <div class=\"flex-shrink-0 w-12 h-12 bg-brand-red\/10 rounded-xl flex items-center justify-center\">\r\n <i class=\"fa-solid fa-clock text-brand-red\"><\/i>\r\n <\/div>\r\n <div>\r\n <h3 class=\"text-white font-bold mb-1\">Business Hours<\/h3>\r\n <p class=\"text-gray-500 text-sm\">Mon\u2013Fri: 9:00 AM \u2013 7:00 PM<br>Sat: 9:00 AM \u2013 5:00 PM<br>Sun: Closed<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- FAQ -->\r\n <div class=\"reveal mt-10\">\r\n <h3 class=\"text-white font-bold text-xl mb-6\">Frequently Asked Questions<\/h3>\r\n <div class=\"space-y-3\">\r\n <div class=\"faq-item border border-brand-border rounded-xl overflow-hidden\">\r\n <button class=\"w-full flex items-center justify-between p-5 text-left hover:bg-brand-dark\/50 transition-colors\" onclick=\"toggleFaq(this)\">\r\n <span class=\"text-white text-sm font-medium pr-4\">Do I need an appointment to visit?<\/span>\r\n <i class=\"fa-solid fa-plus text-brand-red text-sm faq-icon flex-shrink-0\"><\/i>\r\n <\/button>\r\n <div class=\"faq-answer px-5 pb-5\">\r\n <p class=\"text-gray-500 text-sm leading-relaxed\">No appointment is necessary for general browsing, but we recommend scheduling one for test drives to ensure the vehicle you're interested in is available and ready.<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"faq-item border border-brand-border rounded-xl overflow-hidden\">\r\n <button class=\"w-full flex items-center justify-between p-5 text-left hover:bg-brand-dark\/50 transition-colors\" onclick=\"toggleFaq(this)\">\r\n <span class=\"text-white text-sm font-medium pr-4\">How long does a test drive take?<\/span>\r\n <i class=\"fa-solid fa-plus text-brand-red text-sm faq-icon flex-shrink-0\"><\/i>\r\n <\/button>\r\n <div class=\"faq-answer px-5 pb-5\">\r\n <p class=\"text-gray-500 text-sm leading-relaxed\">A typical test drive lasts 15\u201330 minutes. We encourage you to take your time and drive on different road types to get a true feel for the vehicle.<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"faq-item border border-brand-border rounded-xl overflow-hidden\">\r\n <button class=\"w-full flex items-center justify-between p-5 text-left hover:bg-brand-dark\/50 transition-colors\" onclick=\"toggleFaq(this)\">\r\n <span class=\"text-white text-sm font-medium pr-4\">Can I trade in my current vehicle?<\/span>\r\n <i class=\"fa-solid fa-plus text-brand-red text-sm faq-icon flex-shrink-0\"><\/i>\r\n <\/button>\r\n <div class=\"faq-answer px-5 pb-5\">\r\n <p class=\"text-gray-500 text-sm leading-relaxed\">Absolutely! We accept trade-ins and offer competitive valuations. Bring your vehicle in for a free appraisal, and we'll apply the value toward your purchase.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n<\/main>\r\n\r\n\r\n<!-- ========== FOOTER ========== -->\r\n<footer class=\"bg-brand-dark border-t border-brand-border pt-20 pb-8\">\r\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\r\n <div class=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-12 mb-16\">\r\n <!-- Brand -->\r\n <div>\r\n <a href=\"#\" onclick=\"showPage('home');return false;\" class=\"flex items-center gap-3 mb-5\">\r\n <div class=\"w-10 h-10 bg-brand-red rounded-lg flex items-center justify-center\">\r\n <i class=\"fa-solid fa-car-side text-white text-lg\"><\/i>\r\n <\/div>\r\n <span class=\"font-heading text-2xl font-bold text-white\">Auto<span class=\"text-brand-red\">Elite<\/span><\/span>\r\n <\/a>\r\n <p class=\"text-gray-500 text-sm leading-relaxed mb-5\">Premium pre-owned vehicles, quality inspected and competitively priced. Your trusted car dealership since 2009.<\/p>\r\n <div class=\"flex gap-3\">\r\n <a href=\"#\" class=\"w-10 h-10 bg-brand-gray border border-brand-border rounded-lg flex items-center justify-center text-gray-400 hover:bg-brand-red hover:border-brand-red hover:text-white transition-all\" aria-label=\"Facebook\"><i class=\"fa-brands fa-facebook-f text-sm\"><\/i><\/a>\r\n <a href=\"#\" class=\"w-10 h-10 bg-brand-gray border border-brand-border rounded-lg flex items-center justify-center text-gray-400 hover:bg-brand-red hover:border-brand-red hover:text-white transition-all\" aria-label=\"Instagram\"><i class=\"fa-brands fa-instagram text-sm\"><\/i><\/a>\r\n <a href=\"#\" class=\"w-10 h-10 bg-brand-gray border border-brand-border rounded-lg flex items-center justify-center text-gray-400 hover:bg-brand-red hover:border-brand-red hover:text-white transition-all\" aria-label=\"Twitter\"><i class=\"fa-brands fa-x-twitter text-sm\"><\/i><\/a>\r\n <a href=\"#\" class=\"w-10 h-10 bg-brand-gray border border-brand-border rounded-lg flex items-center justify-center text-gray-400 hover:bg-brand-red hover:border-brand-red hover:text-white transition-all\" aria-label=\"YouTube\"><i class=\"fa-brands fa-youtube text-sm\"><\/i><\/a>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Quick Links -->\r\n <div>\r\n <h4 class=\"text-white font-bold text-base mb-5\">Quick Links<\/h4>\r\n <ul class=\"space-y-3\">\r\n <li><a href=\"#\" onclick=\"showPage('home');return false;\" class=\"text-gray-500 text-sm hover:text-brand-red transition-colors\">Home<\/a><\/li>\r\n <li><a href=\"#\" onclick=\"showPage('about');return false;\" class=\"text-gray-500 text-sm hover:text-brand-red transition-colors\">About Us<\/a><\/li>\r\n <li><a href=\"#\" onclick=\"showPage('products');return false;\" class=\"text-gray-500 text-sm hover:text-brand-red transition-colors\">Our Cars<\/a><\/li>\r\n <li><a href=\"#\" onclick=\"showPage('blog');return false;\" class=\"text-gray-500 text-sm hover:text-brand-red transition-colors\">Blog<\/a><\/li>\r\n <li><a href=\"#\" onclick=\"showPage('booking');return false;\" class=\"text-gray-500 text-sm hover:text-brand-red transition-colors\">Book Appointment<\/a><\/li>\r\n <\/ul>\r\n <\/div>\r\n\r\n <!-- Services -->\r\n <div>\r\n <h4 class=\"text-white font-bold text-base mb-5\">Services<\/h4>\r\n <ul class=\"space-y-3\">\r\n <li><a href=\"#\" class=\"text-gray-500 text-sm hover:text-brand-red transition-colors\">Car Sales<\/a><\/li>\r\n <li><a href=\"#\" class=\"text-gray-500 text-sm hover:text-brand-red transition-colors\">Trade-In Valuation<\/a><\/li>\r\n <li><a href=\"#\" class=\"text-gray-500 text-sm hover:text-brand-red transition-colors\">Financing Solutions<\/a><\/li>\r\n <li><a href=\"#\" class=\"text-gray-500 text-sm hover:text-brand-red transition-colors\">Vehicle Inspection<\/a><\/li>\r\n <li><a href=\"#\" class=\"text-gray-500 text-sm hover:text-brand-red transition-colors\">After-Sale Service<\/a><\/li>\r\n <\/ul>\r\n <\/div>\r\n\r\n <!-- Contact -->\r\n <div>\r\n <h4 class=\"text-white font-bold text-base mb-5\">Contact Info<\/h4>\r\n <ul class=\"space-y-4\">\r\n <li class=\"flex gap-3\">\r\n <i class=\"fa-solid fa-location-dot text-brand-red text-sm mt-1\"><\/i>\r\n <span class=\"text-gray-500 text-sm\">1234 Auto Drive, Suite 100, Los Angeles, CA 90015<\/span>\r\n <\/li>\r\n <li class=\"flex gap-3\">\r\n <i class=\"fa-solid fa-phone text-brand-red text-sm mt-1\"><\/i>\r\n <span class=\"text-gray-500 text-sm\">+1 (555) 123-4567<\/span>\r\n <\/li>\r\n <li class=\"flex gap-3\">\r\n <i class=\"fa-solid fa-envelope text-brand-red text-sm mt-1\"><\/i>\r\n <span class=\"text-gray-500 text-sm\">info@autoelite.com<\/span>\r\n <\/li>\r\n <li class=\"flex gap-3\">\r\n <i class=\"fa-solid fa-clock text-brand-red text-sm mt-1\"><\/i>\r\n <span class=\"text-gray-500 text-sm\">Mon\u2013Fri: 9AM\u20137PM<br>Sat: 9AM\u20135PM<\/span>\r\n <\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"border-t border-brand-border pt-8 flex flex-col sm:flex-row items-center justify-between gap-4\">\r\n <p class=\"text-gray-600 text-sm\">© 2025 AutoElite. All rights reserved.<\/p>\r\n <div class=\"flex gap-6\">\r\n <a href=\"#\" class=\"text-gray-600 text-sm hover:text-brand-red transition-colors\">Privacy Policy<\/a>\r\n <a href=\"#\" class=\"text-gray-600 text-sm hover:text-brand-red transition-colors\">Terms of Service<\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/footer>\r\n\r\n\r\n<!-- ========== TOAST ========== -->\r\n<div id=\"toast\" class=\"fixed bottom-8 right-8 bg-brand-red text-white px-6 py-4 rounded-xl shadow-2xl transform translate-y-20 opacity-0 transition-all duration-400 z-50 flex items-center gap-3 pointer-events-none\">\r\n <i class=\"fa-solid fa-check-circle\"><\/i>\r\n <span id=\"toastMsg\">Success!<\/span>\r\n<\/div>\r\n\r\n\r\n<script>\r\nconst IMG = 'https:\/\/demo75.techhassle.com\/wp-content\/uploads\/2026\/07\/';\r\n\r\n\/\/ ==================== DATA ====================\r\n\r\nconst carsData = [\r\n { name: 'Audi A4 Premium', year: 2023, price: 38900, mileage: '12,400 mi', fuel: 'Gasoline', type: 'Sedan', img: IMG + 'Audi-A4-Premium.webp' },\r\n { name: 'BMW 5 Series', year: 2022, price: 42500, mileage: '18,200 mi', fuel: 'Gasoline', type: 'Sedan', img: IMG + 'BMW-5-Series.webp' },\r\n { name: 'Mercedes C-Class', year: 2023, price: 39900, mileage: '10,800 mi', fuel: 'Gasoline', type: 'Sedan', img: IMG + 'Mercedes-C-Class.webp' },\r\n { name: 'Tesla Model 3', year: 2023, price: 32900, mileage: '8,500 mi', fuel: 'Electric', type: 'Electric', img: IMG + 'Tesla-Model-3.webp' },\r\n { name: 'Tesla Model Y', year: 2023, price: 36900, mileage: '11,200 mi', fuel: 'Electric', type: 'Electric', img: IMG + 'Tesla-Model-Y.webp' },\r\n { name: 'Audi Q5 Sportback', year: 2022, price: 47800, mileage: '15,600 mi', fuel: 'Gasoline', type: 'SUV', img: IMG + 'Audi-Q5-Sportback.webp' },\r\n { name: 'BMW X5 xDrive', year: 2022, price: 52900, mileage: '22,100 mi', fuel: 'Gasoline', type: 'SUV', img: IMG + 'BMW-X5-xDrive.webp' },\r\n { name: 'Mercedes GLE 350', year: 2023, price: 49500, mileage: '14,300 mi', fuel: 'Gasoline', type: 'SUV', img: IMG + 'Mercedes-GLE-350.webp' },\r\n { name: 'Porsche 911 Carrera', year: 2021, price: 89900, mileage: '9,800 mi', fuel: 'Gasoline', type: 'Coupe', img: IMG + 'Porsche-911-Carrera.webp' },\r\n { name: 'Chevrolet Camaro SS', year: 2022, price: 35500, mileage: '16,900 mi', fuel: 'Gasoline', type: 'Coupe', img: IMG + 'Chevrolet-Camaro-SS.webp' },\r\n { name: 'Ford F-150 Lariat', year: 2023, price: 44800, mileage: '13,500 mi', fuel: 'Gasoline', type: 'Truck', img: IMG + 'Ford-F-150-Lariat.webp' },\r\n { name: 'Ram 1500 Big Horn', year: 2022, price: 41200, mileage: '19,700 mi', fuel: 'Gasoline', type: 'Truck', img: IMG + 'Ram-1500-Big-Horn.webp' }\r\n];\r\n\r\nconst blogsData = [\r\n {\r\n title: 'The Complete 2025 Car Buying Guide',\r\n excerpt: 'Everything you need to know before purchasing your next vehicle \u2014 from budgeting to financing.',\r\n category: 'Buying Guides', date: 'Jan 15, 2025', readTime: '8 min',\r\n img: IMG + '5-Essential-Tips-for-First-Time-Car-Buyers.webp'\r\n },\r\n {\r\n title: '5 Essential Tips for First-Time Car Buyers',\r\n excerpt: 'Navigating your first car purchase? These five tips will save you money and stress.',\r\n category: 'Tips', date: 'Jan 8, 2025', readTime: '5 min',\r\n img: IMG + '5-Essential-Tips-for-First-Time-Car-Buyers.webp'\r\n },\r\n {\r\n title: 'Electric vs. Gas: Which Is Right for You?',\r\n excerpt: 'A comprehensive comparison to help you decide between electric and gasoline-powered vehicles.',\r\n category: 'Comparison', date: 'Dec 28, 2024', readTime: '7 min',\r\n img: IMG + 'Electric-vs.-Gas-Which-Is-Right-for-You.webp'\r\n },\r\n {\r\n title: 'How to Maintain Your Car in Winter',\r\n excerpt: 'Essential winter maintenance tips to keep your vehicle running smoothly through cold months.',\r\n category: 'Maintenance', date: 'Dec 15, 2024', readTime: '6 min',\r\n img: IMG + 'How-to-Maintain-Your-Car-in-Winter.webp'\r\n },\r\n {\r\n title: 'Top 10 Most Reliable Used Cars Under $30K',\r\n excerpt: 'Looking for a dependable pre-owned car on a budget? Here are our top picks.',\r\n category: 'Buying Guides', date: 'Dec 5, 2024', readTime: '9 min',\r\n img: IMG + 'Top-10-Most-Reliable-Used-Cars-Under-30K.webp'\r\n },\r\n {\r\n title: 'Understanding Your Credit Score for Car Loans',\r\n excerpt: 'How your credit score affects auto loan rates and what you can do to improve it.',\r\n category: 'Financing', date: 'Nov 20, 2024', readTime: '6 min',\r\n img: IMG + 'Understanding-Your-Credit-Score-for-Car-Loans.webp'\r\n },\r\n {\r\n title: 'What to Check During a Test Drive',\r\n excerpt: 'Don\\'t just drive around the block. Here\\'s a complete checklist for a thorough test drive.',\r\n category: 'Tips', date: 'Nov 10, 2024', readTime: '5 min',\r\n img: IMG + 'What-to-Check-During-a-Test-Drive.webp'\r\n }\r\n];\r\n\r\n\r\n\/\/ ==================== RENDER FUNCTIONS ====================\r\n\r\nfunction renderCarCard(car) {\r\n return `\r\n <div class=\"car-card rounded-2xl bg-brand-dark border border-brand-border overflow-hidden reveal\">\r\n <div class=\"overflow-hidden h-52\">\r\n <img decoding=\"async\" src=\"${car.img}\" alt=\"${car.name}\" class=\"w-full h-full object-cover hover:scale-105 transition-transform duration-500\" loading=\"lazy\">\r\n <\/div>\r\n <div class=\"p-5\">\r\n <div class=\"flex items-center justify-between mb-3\">\r\n <span class=\"text-brand-red text-xs font-semibold uppercase tracking-wider\">${car.type}<\/span>\r\n <span class=\"text-gray-600 text-xs\">${car.year}<\/span>\r\n <\/div>\r\n <h3 class=\"text-white font-bold text-lg mb-2\">${car.name}<\/h3>\r\n <div class=\"flex items-center gap-4 text-gray-500 text-xs mb-4\">\r\n <span><i class=\"fa-solid fa-road mr-1\"><\/i>${car.mileage}<\/span>\r\n <span><i class=\"fa-solid fa-gas-pump mr-1\"><\/i>${car.fuel}<\/span>\r\n <\/div>\r\n <div class=\"flex items-center justify-between pt-4 border-t border-brand-border\">\r\n <p class=\"text-white font-bold text-xl\">$${car.price.toLocaleString()}<\/p>\r\n <button onclick=\"showPage('booking')\" class=\"bg-brand-red\/10 hover:bg-brand-red text-brand-red hover:text-white text-sm font-semibold px-4 py-2 rounded-lg transition-all\">\r\n View Details\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>`;\r\n}\r\n\r\nfunction renderBlogCard(blog) {\r\n return `\r\n <div class=\"blog-card rounded-2xl bg-brand-dark border border-brand-border overflow-hidden reveal cursor-pointer\" onclick=\"openBlog('${blog.title.replace(\/'\/g, \"\\\\'\")}')\">\r\n <div class=\"blog-img overflow-hidden h-52\">\r\n <img decoding=\"async\" src=\"${blog.img}\" alt=\"${blog.title}\" class=\"w-full h-full object-cover\" loading=\"lazy\">\r\n <\/div>\r\n <div class=\"p-6\">\r\n <div class=\"flex items-center gap-3 mb-3\">\r\n <span class=\"text-brand-red text-xs font-semibold uppercase tracking-wider\">${blog.category}<\/span>\r\n <span class=\"text-gray-600 text-xs\">${blog.date}<\/span>\r\n <\/div>\r\n <h3 class=\"text-white font-bold text-lg mb-3 leading-snug\">${blog.title}<\/h3>\r\n <p class=\"text-gray-500 text-sm leading-relaxed mb-4\">${blog.excerpt}<\/p>\r\n <div class=\"flex items-center justify-between\">\r\n <span class=\"text-gray-600 text-xs\"><i class=\"fa-regular fa-clock mr-1\"><\/i>${blog.readTime} read<\/span>\r\n <span class=\"text-brand-red text-sm font-medium hover:underline\">Read More <i class=\"fa-solid fa-arrow-right text-xs ml-1\"><\/i><\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>`;\r\n}\r\n\r\n\r\n\/\/ ==================== INIT ====================\r\n\r\nfunction initPages() {\r\n \/\/ Featured cars (first 6)\r\n const featuredEl = document.getElementById('featuredCars');\r\n if (featuredEl) {\r\n featuredEl.innerHTML = carsData.slice(0, 6).map(renderCarCard).join('');\r\n }\r\n\r\n \/\/ Full inventory\r\n const inventoryEl = document.getElementById('inventoryGrid');\r\n if (inventoryEl) {\r\n inventoryEl.innerHTML = carsData.map(renderCarCard).join('');\r\n }\r\n\r\n \/\/ Blog grid\r\n const blogEl = document.getElementById('blogGrid');\r\n if (blogEl) {\r\n blogEl.innerHTML = blogsData.map(renderBlogCard).join('');\r\n }\r\n\r\n \/\/ Trigger reveal for initially visible items\r\n setTimeout(() => {\r\n document.querySelectorAll('#page-home .reveal').forEach(el => el.classList.add('visible'));\r\n }, 100);\r\n}\r\n\r\n\r\n\/\/ ==================== PAGE SWITCHING ====================\r\n\r\nfunction showPage(page) {\r\n \/\/ Hide all pages\r\n document.querySelectorAll('.page-section').forEach(p => {\r\n p.classList.remove('active');\r\n });\r\n\r\n \/\/ Show target page\r\n const target = document.getElementById('page-' + page);\r\n if (target) {\r\n target.classList.add('active');\r\n }\r\n\r\n \/\/ Update nav\r\n document.querySelectorAll('.nav-link').forEach(link => {\r\n link.classList.remove('active');\r\n link.classList.remove('text-white');\r\n link.classList.add('text-gray-400');\r\n if (link.dataset.page === page) {\r\n link.classList.add('active');\r\n link.classList.add('text-white');\r\n link.classList.remove('text-gray-400');\r\n }\r\n });\r\n\r\n \/\/ Scroll to top\r\n window.scrollTo({ top: 0, behavior: 'smooth' });\r\n\r\n \/\/ Re-trigger reveals\r\n setTimeout(() => {\r\n target.querySelectorAll('.reveal').forEach(el => {\r\n el.classList.remove('visible');\r\n void el.offsetWidth;\r\n checkReveal(el);\r\n });\r\n \/\/ Run counter animation if on home\r\n if (page === 'home') runCounters();\r\n }, 150);\r\n}\r\n\r\n\r\n\/\/ ==================== BLOG SINGLE ====================\r\n\r\nfunction openBlog(title) {\r\n const blog = blogsData.find(b => b.title === title);\r\n if (!blog) return;\r\n\r\n document.getElementById('singleBlogTitle').textContent = blog.title;\r\n document.getElementById('singleBlogCategory').textContent = blog.category;\r\n document.getElementById('singleBlogDate').textContent = blog.date;\r\n document.getElementById('singleBlogReadTime').textContent = blog.readTime;\r\n document.getElementById('singleBlogImage').src = blog.img;\r\n document.getElementById('singleBlogImage').alt = blog.title;\r\n\r\n showPage('single-blog');\r\n}\r\n\r\n\r\n\/\/ ==================== FILTER ====================\r\n\r\nfunction setFilter(btn) {\r\n document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active'));\r\n btn.classList.add('active');\r\n\r\n const filter = btn.textContent.trim();\r\n const grid = document.getElementById('inventoryGrid');\r\n if (!grid) return;\r\n\r\n const filtered = filter === 'All' ? carsData : carsData.filter(c => c.type === filter);\r\n grid.innerHTML = filtered.map(renderCarCard).join('');\r\n\r\n setTimeout(() => {\r\n grid.querySelectorAll('.reveal').forEach(el => {\r\n el.classList.remove('visible');\r\n void el.offsetWidth;\r\n checkReveal(el);\r\n });\r\n }, 50);\r\n}\r\n\r\n\r\n\/\/ ==================== MOBILE MENU ====================\r\n\r\nfunction toggleMobileMenu() {\r\n const menu = document.getElementById('mobileMenu');\r\n const overlay = document.getElementById('mobileOverlay');\r\n const icon = document.getElementById('menuIcon');\r\n menu.classList.toggle('open');\r\n overlay.classList.toggle('hidden');\r\n if (menu.classList.contains('open')) {\r\n icon.className = 'fa-solid fa-xmark';\r\n document.body.style.overflow = 'hidden';\r\n } else {\r\n icon.className = 'fa-solid fa-bars';\r\n document.body.style.overflow = '';\r\n }\r\n}\r\n\r\n\r\n\/\/ ==================== FAQ ====================\r\n\r\nfunction toggleFaq(btn) {\r\n const item = btn.closest('.faq-item');\r\n const wasOpen = item.classList.contains('open');\r\n \/\/ Close all\r\n document.querySelectorAll('.faq-item').forEach(i => i.classList.remove('open'));\r\n if (!wasOpen) item.classList.add('open');\r\n}\r\n\r\n\r\n\/\/ ==================== BOOKING ====================\r\n\r\nfunction handleBooking(e) {\r\n e.preventDefault();\r\n showToast('Booking request submitted successfully! We\\'ll contact you shortly.');\r\n e.target.reset();\r\n}\r\n\r\n\r\n\/\/ ==================== TOAST ====================\r\n\r\nfunction showToast(msg) {\r\n const toast = document.getElementById('toast');\r\n document.getElementById('toastMsg').textContent = msg;\r\n toast.style.transform = 'translateY(0)';\r\n toast.style.opacity = '1';\r\n toast.style.pointerEvents = 'auto';\r\n setTimeout(() => {\r\n toast.style.transform = 'translateY(20px)';\r\n toast.style.opacity = '0';\r\n toast.style.pointerEvents = 'none';\r\n }, 4000);\r\n}\r\n\r\n\r\n\/\/ ==================== SCROLL REVEAL ====================\r\n\r\nfunction checkReveal(el) {\r\n const rect = el.getBoundingClientRect();\r\n const windowHeight = window.innerHeight;\r\n if (rect.top < windowHeight - 60) {\r\n el.classList.add('visible');\r\n }\r\n}\r\n\r\nfunction handleScroll() {\r\n document.querySelectorAll('.page-section.active .reveal:not(.visible)').forEach(checkReveal);\r\n}\r\n\r\n\r\n\/\/ ==================== HEADER SCROLL ====================\r\n\r\nfunction handleHeaderScroll() {\r\n const header = document.getElementById('siteHeader');\r\n if (window.scrollY > 60) {\r\n header.classList.add('scrolled');\r\n } else {\r\n header.classList.remove('scrolled');\r\n }\r\n}\r\n\r\n\r\n\/\/ ==================== COUNTER ANIMATION ====================\r\n\r\nlet countersRun = false;\r\n\r\nfunction runCounters() {\r\n if (countersRun) return;\r\n const counters = document.querySelectorAll('[data-count]');\r\n if (!counters.length) return;\r\n\r\n countersRun = true;\r\n counters.forEach(counter => {\r\n const target = parseInt(counter.dataset.count);\r\n const duration = 2000;\r\n const step = target \/ (duration \/ 16);\r\n let current = 0;\r\n\r\n function update() {\r\n current += step;\r\n if (current >= target) {\r\n counter.textContent = target.toLocaleString() + (target === 98 ? '%' : '+');\r\n return;\r\n }\r\n counter.textContent = Math.floor(current).toLocaleString();\r\n requestAnimationFrame(update);\r\n }\r\n update();\r\n });\r\n}\r\n\r\n\r\n\/\/ ==================== EVENT LISTENERS ====================\r\n\r\nwindow.addEventListener('scroll', () => {\r\n handleScroll();\r\n handleHeaderScroll();\r\n}, { passive: true });\r\n\r\nwindow.addEventListener('load', () => {\r\n initPages();\r\n handleHeaderScroll();\r\n});\r\n\r\n\/\/ Reduced motion check\r\nif (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {\r\n document.querySelectorAll('.reveal').forEach(el => el.classList.add('visible'));\r\n}\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>AutoElite \u2014 Premium Car Dealership AutoElite Home About Products Blog Booking +1 (555) 123-4567 Book Now Home About Products Blog Booking +1 (555) 123-4567 Book Now Premium Dealership Find Your Perfect Car Today Explore our handpicked collection of premium vehicles. Quality inspected, competitively priced, and ready for you. View Cars Book Appointment Our Collection Featured […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-253","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/demo75.techhassle.com\/index.php\/wp-json\/wp\/v2\/pages\/253","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/demo75.techhassle.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/demo75.techhassle.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/demo75.techhassle.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/demo75.techhassle.com\/index.php\/wp-json\/wp\/v2\/comments?post=253"}],"version-history":[{"count":13,"href":"https:\/\/demo75.techhassle.com\/index.php\/wp-json\/wp\/v2\/pages\/253\/revisions"}],"predecessor-version":[{"id":297,"href":"https:\/\/demo75.techhassle.com\/index.php\/wp-json\/wp\/v2\/pages\/253\/revisions\/297"}],"wp:attachment":[{"href":"https:\/\/demo75.techhassle.com\/index.php\/wp-json\/wp\/v2\/media?parent=253"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}