LocalBot AI | Future of Lead Gen<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap\" rel=\"stylesheet\">\n <style>\n :root {\n --primary: #6366f1;\n --secondary: #a855f7;\n --accent: #f43f5e;\n --surface: rgba(255, 255, 255, 0.03);\n --glass-border: rgba(255, 255, 255, 0.1);\n }\n\n * {\n font-family: 'Plus Jakarta Sans', sans-serif;\n scroll-behavior: smooth;\n }\n\n body {\n background: #0f172a;\n color: #f8fafc;\n overflow-x: hidden;\n width: 100%;\n }\n\n \/* 2026 Mesh Gradient Background *\/\n .mesh-gradient {\n position: fixed;\n top: 0;\n left: 0;\n width: 100vw;\n height: 100vh;\n z-index: -1;\n background-color: #0f172a;\n background-image: \n radial-gradient(at 0% 0%, hsla(253,16%,7%,1) 0, transparent 50%), \n radial-gradient(at 50% 0%, hsla(225,39%,30%,1) 0, transparent 50%), \n radial-gradient(at 100% 0%, hsla(339,49%,30%,1) 0, transparent 50%), \n radial-gradient(at 0% 100%, hsla(262,67%,30%,1) 0, transparent 50%), \n radial-gradient(at 100% 100%, hsla(17,80%,30%,1) 0, transparent 50%);\n filter: blur(80px);\n opacity: 0.6;\n }\n\n .glass {\n background: rgba(255, 255, 255, 0.03);\n backdrop-filter: blur(24px) saturate(180%);\n border: 1px solid var(--glass-border);\n box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);\n }\n\n .glass-card {\n background: rgba(255, 255, 255, 0.05);\n backdrop-filter: blur(12px);\n border: 1px solid var(--glass-border);\n transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n }\n\n .glass-card:hover {\n background: rgba(255, 255, 255, 0.08);\n border-color: rgba(255, 255, 255, 0.2);\n transform: translateY(-8px);\n box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);\n }\n\n .text-gradient {\n background: linear-gradient(135deg, #fff 0%, #cbd5e1 100%);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n }\n\n \/* Enhanced Interactive Buttons *\/\n .btn-gradient {\n background: linear-gradient(135deg, var(--primary), var(--secondary));\n transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n position: relative;\n overflow: hidden;\n z-index: 1;\n }\n\n .btn-gradient::after {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: linear-gradient(135deg, var(--secondary), var(--primary));\n opacity: 0;\n z-index: -1;\n transition: opacity 0.4s ease;\n }\n\n .btn-gradient:hover::after {\n opacity: 1;\n }\n\n .btn-gradient:hover {\n transform: translateY(-2px) scale(1.02);\n box-shadow: 0 10px 25px -5px rgba(99, 102, 241, 0.6);\n }\n\n .btn-gradient:active {\n transform: translateY(0) scale(0.98);\n }\n\n .glass-btn {\n transition: all 0.3s ease;\n }\n \n .glass-btn:hover {\n background: rgba(255, 255, 255, 0.12);\n transform: translateY(-2px);\n }\n\n \/* Bento Grid Layouts *\/\n .bento-grid {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n grid-auto-rows: minmax(140px, auto);\n gap: 1.5rem;\n }\n\n @media (max-width: 1024px) {\n .bento-grid { grid-template-columns: repeat(2, 1fr); }\n }\n @media (max-width: 640px) {\n .bento-grid { grid-template-columns: 1fr; }\n }\n\n .pill {\n background: rgba(255, 255, 255, 0.05);\n border: 1px solid rgba(255, 255, 255, 0.1);\n backdrop-filter: blur(10px);\n }\n\n .feature-tag {\n background: rgba(99, 102, 241, 0.15);\n color: #a5b4fc;\n padding: 4px 12px;\n border-radius: 99px;\n font-size: 0.75rem;\n font-weight: 700;\n text-transform: uppercase;\n letter-spacing: 0.05em;\n }\n\n \/* Mobile Menu Styles *\/\n #mobile-menu {\n transform: translateY(-100%);\n transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n }\n #mobile-menu.open {\n transform: translateY(0);\n }\n\n \/* Image Showcase Utility *\/\n .img-placeholder {\n background: linear-gradient(135deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.01) 100%);\n border: 1px dashed rgba(255,255,255,0.2);\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 1.5rem;\n position: relative;\n overflow: hidden;\n }\n <\/style>\n<\/head>\n<body class=\"antialiased selection:bg-indigo-500 selection:text-white\">\n <div class=\"mesh-gradient\"><\/div>\n\n \n <header class=\"fixed top-0 w-full z-[100] px-4 pt-6\">\n <nav class=\"max-w-6xl mx-auto glass rounded-full px-4 md:px-6 py-3 flex justify-between items-center relative z-10\">\n <div class=\"flex items-center gap-3\">\n <a href=\"#\">\n <figure><img decoding=\"async\" src=\"https:\/\/designingmedia.com\/localbot\/wp-content\/uploads\/2026\/04\/logo.png\" alt=\"logo\"><\/figure>\n <\/a>\n <\/div>\n \n \n <div class=\"hidden lg:flex gap-8 text-sm font-medium text-slate-300\">\n <a href=\"#overview\" class=\"hover:text-white transition-colors\">Overview<\/a>\n <a href=\"#demo\" class=\"hover:text-white transition-colors\">Showcase<\/a>\n <a href=\"#features\" class=\"hover:text-white transition-colors\">Features<\/a>\n <a href=\"#audience\" class=\"hover:text-white transition-colors\">Who It’s For<\/a>\n <a href=\"https:\/\/designingmedia.com\/localbot\/documentation\" class=\"hover:text-white transition-colors\">Documentation<\/a>\n <\/div>\n\n <div class=\"flex items-center gap-4\">\n <button class=\"hidden sm:block btn-gradient px-6 py-2.5 rounded-full text-sm font-bold text-white shadow-lg\">\n Get Started\n <\/button>\n \n \n <button id=\"menu-toggle\" class=\"lg:hidden w-10 h-10 flex flex-col items-center justify-center gap-1.5 glass rounded-full\" aria-label=\"Toggle Menu\">\n <span class=\"w-5 h-0.5 bg-white transition-all duration-300\" id=\"line1\"><\/span>\n <span class=\"w-5 h-0.5 bg-white transition-all duration-300\" id=\"line2\"><\/span>\n <span class=\"w-5 h-0.5 bg-white transition-all duration-300\" id=\"line3\"><\/span>\n <\/button>\n <\/div>\n <\/nav>\n\n \n <div id=\"mobile-menu\" class=\"absolute top-0 left-0 w-full glass rounded-b-[2rem] pt-24 pb-8 px-6 lg:hidden -z-10\">\n <div class=\"flex flex-col gap-6 text-center\">\n <a href=\"#overview\" class=\"mobile-link text-lg font-semibold text-slate-300 hover:text-white\">Overview<\/a>\n <a href=\"#demo\" class=\"mobile-link text-lg font-semibold text-slate-300 hover:text-white\">Demo<\/a>\n <a href=\"#features\" class=\"mobile-link text-lg font-semibold text-slate-300 hover:text-white\">Features<\/a>\n <a href=\"#audience\" class=\"mobile-link text-lg font-semibold text-slate-300 hover:text-white\">Who It’s For<\/a>\n <a href=\"#docs\" class=\"mobile-link text-lg font-semibold text-slate-300 hover:text-white\">Documentation<\/a>\n <hr class=\"border-white\/10\">\n <button class=\"btn-gradient w-full py-4 rounded-2xl font-bold text-white\">Get Started<\/button>\n <\/div>\n <\/div>\n <\/header>\n\n <main class=\"pt-32 px-4 pb-20 overflow-x-hidden\">\n \n <section class=\"max-w-6xl mx-auto text-center mb-32\">\n <div class=\"inline-flex items-center gap-2 pill px-4 py-1.5 rounded-full text-xs font-bold text-indigo-300 mb-8 border border-indigo-500\/20\">\n <span class=\"flex h-2 w-2 rounded-full bg-indigo-500\"><\/span>\n GEMINI-POWERED WORDPRESS CHATBOT\n <\/div>\n <h1 class=\"text-4xl sm:text-5xl md:text-8xl font-black mb-8 tracking-tighter leading-[1] md:leading-[0.9] text-gradient\">\n Convert Visitors into <br\/> <span class=\"text-transparent bg-clip-text bg-gradient-to-r from-indigo-400 via-purple-400 to-pink-400\">Real Local Leads.<\/span>\n <\/h1>\n <p class=\"max-w-3xl mx-auto text-base md:text-xl text-slate-400 mb-12 leading-relaxed px-2\">\n LocalBot AI helps local businesses respond instantly, answer common questions, detect urgent intent, and capture qualified leads through a clean chat experience built for WordPress.\n <\/p>\n \n <div class=\"flex flex-col sm:flex-row gap-4 justify-center items-center mb-16 px-4\">\n <a href=\"#features\" class=\"btn-gradient px-10 py-5 rounded-2xl text-lg font-bold text-white hover:!text-white w-full sm:w-auto shadow-2xl text-center\">\n Explore Features\n <\/a>\n <a href=\"#audience\" class=\"glass glass-btn px-10 py-5 rounded-2xl text-lg font-bold text-white w-full sm:w-auto hover:!bg-white text-center\">\n Who It’s For\n <\/a>\n <\/div>\n\n \n <div class=\"grid grid-cols-1 md:grid-cols-3 gap-6 max-w-4xl mx-auto px-4\">\n <div class=\"glass-card p-6 rounded-2xl border-indigo-500\/20\">\n <div class=\"text-indigo-400 font-bold mb-2\">Fast & Natural<\/div>\n <p class=\"text-slate-400 text-sm\">Instant Gemini AI responses for all visitor questions.<\/p>\n <\/div>\n <div class=\"glass-card p-6 rounded-2xl border-purple-500\/20\">\n <div class=\"text-purple-400 font-bold mb-2\">Lead Capture<\/div>\n <p class=\"text-slate-400 text-sm\">Built-in forms capture details mid-conversation.<\/p>\n <\/div>\n <div class=\"glass-card p-6 rounded-2xl border-pink-500\/20\">\n <div class=\"text-pink-400 font-bold mb-2\">After-Hours Flow<\/div>\n <p class=\"text-slate-400 text-sm\">Special handling for midnight service inquiries.<\/p>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"overview\" class=\"max-w-6xl mx-auto mb-32 px-4\">\n <div class=\"mb-12\">\n <h2 class=\"text-3xl md:text-5xl font-black text-white mb-4 tracking-tight\">Purpose-built for local growth.<\/h2>\n <p class=\"text-slate-400 text-lg\">A chatbot designed specifically for service businesses needing faster responses.<\/p>\n <\/div>\n\n <div class=\"bento-grid\">\n <div class=\"bento-item glass-card col-span-1 md:col-span-2 row-span-2 p-6 md:p-10 flex flex-col justify-end\" style=\"border-radius: 1.5rem;\">\n <figure style=\"margin-bottom: 2rem;\"><img decoding=\"async\" src=\"https:\/\/designingmedia.com\/localbot\/wp-content\/uploads\/2026\/04\/leads-dashboard.png\" alt=\"Leads Dashboard\"><\/figure>\n <span class=\"feature-tag mb-4 w-fit\">Intent-Aware<\/span>\n <h3 class=\"text-2xl md:text-3xl font-bold mb-4\">Smarter Visitor Conversations<\/h3>\n <p class=\"text-slate-400 leading-relaxed text-sm md:text-base\">Use Gemini AI to respond naturally, detect urgency, and move visitors toward contact or lead submission without friction.<\/p>\n <\/div>\n \n <div class=\"bento-item glass-card col-span-1 md:col-span-2 p-6 md:p-10\" style=\"border-radius: 1.5rem;\">\n <figure style=\"margin-bottom: 1.5rem;\"><img decoding=\"async\" src=\"https:\/\/designingmedia.com\/localbot\/wp-content\/uploads\/2026\/04\/wordpress-icon.png\" alt=\"WordPress Icon\"><\/figure>\n <h3 class=\"text-xl font-bold mb-2\">Simple WordPress Setup<\/h3>\n <p class=\"text-slate-400 text-sm md:text-base\">Add your Gemini API key, test available models automatically, and customize the widget branding to fit your site.<\/p>\n <\/div>\n\n <div class=\"bento-item glass-card col-span-1 md:col-span-2 p-6 md:p-10\" style=\"border-radius: 1.5rem;\">\n <figure style=\"margin-bottom: 1.5rem;\"><img decoding=\"async\" src=\"https:\/\/designingmedia.com\/localbot\/wp-content\/uploads\/2026\/04\/local-service.png\" alt=\"Local Services\"><\/figure>\n <h3 class=\"text-xl font-bold mb-2\">Local Service Focus<\/h3>\n <p class=\"text-slate-400 text-sm md:text-base\">Support common customer questions, service inquiries, and fast decision-making for visitors looking for immediate help.<\/p>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"demo\" class=\"max-w-6xl mx-auto mb-32 px-4\">\n <div class=\"mb-12\">\n <h2 class=\"text-3xl md:text-5xl font-black text-white mb-4 tracking-tight\">Visual Interface.<\/h2>\n <p class=\"text-slate-400 text-lg\">See how LocalBot AI looks in action across different touchpoints.<\/p>\n <\/div>\n\n <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8\">\n \n <div class=\"flex flex-col gap-6\">\n <figure><img decoding=\"async\" src=\"https:\/\/designingmedia.com\/localbot\/wp-content\/uploads\/2026\/04\/chat-bot.png\" alt=\"Chat Bot\"><\/figure>\n <div class=\"text-center px-4\">\n <h4 class=\"text-white font-bold text-lg mb-2\">Visitor-First Chat<\/h4>\n <p class=\"text-slate-400 text-sm\">A clean, non-intrusive chat window that matches your brand colors perfectly.<\/p>\n <\/div>\n <\/div>\n\n \n <div class=\"flex flex-col gap-6\">\n <figure><img decoding=\"async\" src=\"https:\/\/designingmedia.com\/localbot\/wp-content\/uploads\/2026\/04\/centralized-dashboard.png\" alt=\"Centralized Dashboard\"><\/figure>\n <div class=\"text-center px-4\">\n <h4 class=\"text-white font-bold text-lg mb-2\">Centralized Dashboard<\/h4>\n <p class=\"text-slate-400 text-sm\">Manage API settings, view conversation logs, and export leads from one screen.<\/p>\n <\/div>\n <\/div>\n\n \n <div class=\"flex flex-col gap-6\">\n <figure><img decoding=\"async\" src=\"https:\/\/designingmedia.com\/localbot\/wp-content\/uploads\/2026\/04\/automated-dashboard.png\" alt=\"Automated Dashboard\"><\/figure>\n <div class=\"text-center px-4\">\n <h4 class=\"text-white font-bold text-lg mb-2\">Automated Capture<\/h4>\n <p class=\"text-slate-400 text-sm\">Fields for Name, ZIP, and Service type appear naturally during the flow.<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"features\" class=\"max-w-6xl mx-auto mb-32 px-4\">\n <div class=\"glass-card rounded-[2rem] md:rounded-[3rem] p-8 md:p-16 relative overflow-hidden\">\n <div class=\"absolute top-0 right-0 w-96 h-96 bg-indigo-500\/10 rounded-full blur-[100px] -mr-48 -mt-48\"><\/div>\n \n <h2 class=\"text-3xl md:text-5xl font-black text-white mb-12 tracking-tight\">Everything you need.<\/h2>\n \n <div class=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8 relative z-10\">\n <div class=\"space-y-3\">\n <div class=\"text-indigo-400 font-bold flex items-center gap-2\">\n <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"3\" d=\"M5 13l4 4L19 7\"><\/path><\/svg>\n Gemini AI Chat\n <\/div>\n <p class=\"text-slate-400 text-sm\">Natural, fast responses for service questions and inquiries.<\/p>\n <\/div>\n <div class=\"space-y-3\">\n <div class=\"text-indigo-400 font-bold flex items-center gap-2\">\n <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"3\" d=\"M5 13l4 4L19 7\"><\/path><\/svg>\n Automatic Model Testing\n <\/div>\n <p class=\"text-slate-400 text-sm\">Validate and select models during setup for a smoother launch.<\/p>\n <\/div>\n <div class=\"space-y-3\">\n <div class=\"text-indigo-400 font-bold flex items-center gap-2\">\n <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"3\" d=\"M5 13l4 4L19 7\"><\/path><\/svg>\n Built-in Lead Form\n <\/div>\n <p class=\"text-slate-400 text-sm\">Collect name, phone, email, ZIP, and service type in chat.<\/p>\n <\/div>\n <div class=\"space-y-3\">\n <div class=\"text-indigo-400 font-bold flex items-center gap-2\">\n <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"3\" d=\"M5 13l4 4L19 7\"><\/path><\/svg>\n Emergency Handling\n <\/div>\n <p class=\"text-slate-400 text-sm\">Callback-style flows for leads arriving outside business hours.<\/p>\n <\/div>\n <div class=\"space-y-3\">\n <div class=\"text-indigo-400 font-bold flex items-center gap-2\">\n <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"3\" d=\"M5 13l4 4L19 7\"><\/path><\/svg>\n Custom Widget UI\n <\/div>\n <p class=\"text-slate-400 text-sm\">Set position, colors, and welcome text to match your brand.<\/p>\n <\/div>\n <div class=\"space-y-3\">\n <div class=\"text-indigo-400 font-bold flex items-center gap-2\">\n <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"3\" d=\"M5 13l4 4L19 7\"><\/path><\/svg>\n Admin Dashboard\n <\/div>\n <p class=\"text-slate-400 text-sm\">Review leads, logs, and analytics from your WordPress panel.<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"audience\" class=\"max-w-6xl mx-auto mb-32 px-4\">\n <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-12 items-center\">\n <div>\n <h2 class=\"text-3xl md:text-5xl font-black text-white mb-6 tracking-tight\">Perfect for local <br\/>service businesses.<\/h2>\n <p class=\"text-slate-400 text-lg mb-8\">Ideal for businesses where fast answers directly improve lead conversion.<\/p>\n \n <div class=\"space-y-6\">\n <div class=\"glass-card p-6 rounded-2xl\">\n <h4 class=\"font-bold text-white mb-2\">Home Service Companies<\/h4>\n <p class=\"text-slate-400 text-sm\">Plumbers, HVAC, electricians, roofers, locksmiths, and cleaning services.<\/p>\n <\/div>\n <div class=\"glass-card p-6 rounded-2xl\">\n <h4 class=\"font-bold text-white mb-2\">High-Intent Local Leads<\/h4>\n <p class=\"text-slate-400 text-sm\">Teams handling urgent inquiries, quote requests, or after-hours contact.<\/p>\n <\/div>\n <div class=\"glass-card p-6 rounded-2xl\">\n <h4 class=\"font-bold text-white mb-2\">Conversion Focused<\/h4>\n <p class=\"text-slate-400 text-sm\">Reduce missed opportunities and create a stronger first impression online.<\/p>\n <\/div>\n <\/div>\n <\/div>\n \n <div class=\"glass p-6 md:p-10 rounded-[2rem] md:rounded-[3rem]\">\n <h3 class=\"text-2xl font-bold text-white mb-6\">What visitors experience<\/h3>\n <ul class=\"space-y-4\">\n <li class=\"flex items-start gap-3 text-slate-300\">\n <span class=\"text-green-400 mt-1\">\u2713<\/span>\n Instant answers for common questions\n <\/li>\n <li class=\"flex items-start gap-3 text-slate-300\">\n <span class=\"text-green-400 mt-1\">\u2713<\/span>\n Lead capture during active conversations\n <\/li>\n <li class=\"flex items-start gap-3 text-slate-300\">\n <span class=\"text-green-400 mt-1\">\u2713<\/span>\n Urgent intent handling for time-sensitive requests\n <\/li>\n <li class=\"flex items-start gap-3 text-slate-300\">\n <span class=\"text-green-400 mt-1\">\u2713<\/span>\n Professional branded chat widget on WordPress\n <\/li>\n <\/ul>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"max-w-5xl mx-auto px-4\">\n <div class=\"glass-card rounded-[2rem] md:rounded-[3rem] p-8 md:p-12 text-center relative overflow-hidden\">\n <div class=\"absolute inset-0 bg-gradient-to-br from-indigo-500\/20 to-purple-500\/20 opacity-30\"><\/div>\n <h2 class=\"text-3xl md:text-6xl font-black mb-6 text-white leading-tight relative z-10\">Show visitors you <br\/>respond faster.<\/h2>\n <p class=\"text-slate-400 mb-10 text-base md:text-lg relative z-10\">Turn your WordPress site into a lead-focused machine today.<\/p>\n <button class=\"btn-gradient px-12 py-5 rounded-2xl text-lg font-bold text-white shadow-xl relative z-10\">\n Get Started Free\n <\/button>\n <\/div>\n <\/section>\n <\/main>\n\n <footer class=\"py-12 border-t border-white\/5 text-center px-4\">\n <p class=\"text-slate-500 text-sm\">LocalBot AI © 2026. Built for WordPress conversion.<\/p>\n <\/footer>\n\n <script>\n \/\/ Smooth scroll for nav\n document.querySelectorAll('a[href^=\"#\"]').forEach(anchor => {\n anchor.addEventListener('click', function (e) {\n e.preventDefault();\n const target = document.querySelector(this.getAttribute('href'));\n if (target) {\n target.scrollIntoView({ behavior: 'smooth' });\n \/\/ Close mobile menu if open\n closeMobileMenu();\n }\n });\n });\n\n \/\/ Mobile Menu Logic\n const menuToggle = document.getElementById('menu-toggle');\n const mobileMenu = document.getElementById('mobile-menu');\n const line1 = document.getElementById('line1');\n const line2 = document.getElementById('line2');\n const line3 = document.getElementById('line3');\n let isMenuOpen = false;\n\n function toggleMenu() {\n isMenuOpen = !isMenuOpen;\n if (isMenuOpen) {\n mobileMenu.classList.add('open');\n line1.style.transform = 'rotate(45deg) translate(5px, 5px)';\n line2.style.opacity = '0';\n line3.style.transform = 'rotate(-45deg) translate(5px, -5px)';\n } else {\n closeMobileMenu();\n }\n }\n\n function closeMobileMenu() {\n isMenuOpen = false;\n mobileMenu.classList.remove('open');\n line1.style.transform = 'none';\n line2.style.opacity = '1';\n line3.style.transform = 'none';\n }\n\n menuToggle.addEventListener('click', toggleMenu);\n\n \/\/ Close menu on resize if switching to desktop\n window.addEventListener('resize', () => {\n if (window.innerWidth >= 1024 && isMenuOpen) {\n closeMobileMenu();\n }\n });\n\n \/\/ Parallax effect for mesh gradient\n const mesh = document.querySelector('.mesh-gradient');\n document.addEventListener('mousemove', (e) => {\n const x = (e.clientX \/ window.innerWidth - 0.5) * 30;\n const y = (e.clientY \/ window.innerHeight - 0.5) * 30;\n mesh.style.transform = `translate(${x}px, ${y}px)`;\n });\n <\/script>\n<\/body>\n<\/html>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>LocalBot AI | Future of Lead Gen Overview Showcase Features Who It’s For Documentation Get Started Overview Demo Features Who It’s For Documentation Get Started GEMINI-POWERED WORDPRESS CHATBOT Convert Visitors into Real Local Leads. LocalBot AI helps local businesses respond instantly, answer common questions, detect urgent intent, and capture qualified leads through a clean chat […]<\/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-8","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/designingmedia.com\/localbot\/index.php\/wp-json\/wp\/v2\/pages\/8","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/designingmedia.com\/localbot\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/designingmedia.com\/localbot\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/designingmedia.com\/localbot\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/designingmedia.com\/localbot\/index.php\/wp-json\/wp\/v2\/comments?post=8"}],"version-history":[{"count":7,"href":"https:\/\/designingmedia.com\/localbot\/index.php\/wp-json\/wp\/v2\/pages\/8\/revisions"}],"predecessor-version":[{"id":36,"href":"https:\/\/designingmedia.com\/localbot\/index.php\/wp-json\/wp\/v2\/pages\/8\/revisions\/36"}],"wp:attachment":[{"href":"https:\/\/designingmedia.com\/localbot\/index.php\/wp-json\/wp\/v2\/media?parent=8"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":8,"date":"2026-04-16T12:54:50","date_gmt":"2026-04-16T12:54:50","guid":{"rendered":"https:\/\/designingmedia.com\/localbot\/?page_id=8"},"modified":"2026-04-17T10:38:52","modified_gmt":"2026-04-17T10:38:52","slug":"8-2","status":"publish","type":"page","link":"https:\/\/designingmedia.com\/localbot\/","title":{"rendered":"Landing Page"},"content":{"rendered":"\n\n\n\n \n \n LocalBot AI | Future of Lead Gen<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap\" rel=\"stylesheet\">\n <style>\n :root {\n --primary: #6366f1;\n --secondary: #a855f7;\n --accent: #f43f5e;\n --surface: rgba(255, 255, 255, 0.03);\n --glass-border: rgba(255, 255, 255, 0.1);\n }\n\n * {\n font-family: 'Plus Jakarta Sans', sans-serif;\n scroll-behavior: smooth;\n }\n\n body {\n background: #0f172a;\n color: #f8fafc;\n overflow-x: hidden;\n width: 100%;\n }\n\n \/* 2026 Mesh Gradient Background *\/\n .mesh-gradient {\n position: fixed;\n top: 0;\n left: 0;\n width: 100vw;\n height: 100vh;\n z-index: -1;\n background-color: #0f172a;\n background-image: \n radial-gradient(at 0% 0%, hsla(253,16%,7%,1) 0, transparent 50%), \n radial-gradient(at 50% 0%, hsla(225,39%,30%,1) 0, transparent 50%), \n radial-gradient(at 100% 0%, hsla(339,49%,30%,1) 0, transparent 50%), \n radial-gradient(at 0% 100%, hsla(262,67%,30%,1) 0, transparent 50%), \n radial-gradient(at 100% 100%, hsla(17,80%,30%,1) 0, transparent 50%);\n filter: blur(80px);\n opacity: 0.6;\n }\n\n .glass {\n background: rgba(255, 255, 255, 0.03);\n backdrop-filter: blur(24px) saturate(180%);\n border: 1px solid var(--glass-border);\n box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);\n }\n\n .glass-card {\n background: rgba(255, 255, 255, 0.05);\n backdrop-filter: blur(12px);\n border: 1px solid var(--glass-border);\n transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n }\n\n .glass-card:hover {\n background: rgba(255, 255, 255, 0.08);\n border-color: rgba(255, 255, 255, 0.2);\n transform: translateY(-8px);\n box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);\n }\n\n .text-gradient {\n background: linear-gradient(135deg, #fff 0%, #cbd5e1 100%);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n }\n\n \/* Enhanced Interactive Buttons *\/\n .btn-gradient {\n background: linear-gradient(135deg, var(--primary), var(--secondary));\n transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n position: relative;\n overflow: hidden;\n z-index: 1;\n }\n\n .btn-gradient::after {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: linear-gradient(135deg, var(--secondary), var(--primary));\n opacity: 0;\n z-index: -1;\n transition: opacity 0.4s ease;\n }\n\n .btn-gradient:hover::after {\n opacity: 1;\n }\n\n .btn-gradient:hover {\n transform: translateY(-2px) scale(1.02);\n box-shadow: 0 10px 25px -5px rgba(99, 102, 241, 0.6);\n }\n\n .btn-gradient:active {\n transform: translateY(0) scale(0.98);\n }\n\n .glass-btn {\n transition: all 0.3s ease;\n }\n \n .glass-btn:hover {\n background: rgba(255, 255, 255, 0.12);\n transform: translateY(-2px);\n }\n\n \/* Bento Grid Layouts *\/\n .bento-grid {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n grid-auto-rows: minmax(140px, auto);\n gap: 1.5rem;\n }\n\n @media (max-width: 1024px) {\n .bento-grid { grid-template-columns: repeat(2, 1fr); }\n }\n @media (max-width: 640px) {\n .bento-grid { grid-template-columns: 1fr; }\n }\n\n .pill {\n background: rgba(255, 255, 255, 0.05);\n border: 1px solid rgba(255, 255, 255, 0.1);\n backdrop-filter: blur(10px);\n }\n\n .feature-tag {\n background: rgba(99, 102, 241, 0.15);\n color: #a5b4fc;\n padding: 4px 12px;\n border-radius: 99px;\n font-size: 0.75rem;\n font-weight: 700;\n text-transform: uppercase;\n letter-spacing: 0.05em;\n }\n\n \/* Mobile Menu Styles *\/\n #mobile-menu {\n transform: translateY(-100%);\n transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n }\n #mobile-menu.open {\n transform: translateY(0);\n }\n\n \/* Image Showcase Utility *\/\n .img-placeholder {\n background: linear-gradient(135deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.01) 100%);\n border: 1px dashed rgba(255,255,255,0.2);\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 1.5rem;\n position: relative;\n overflow: hidden;\n }\n <\/style>\n<\/head>\n<body class=\"antialiased selection:bg-indigo-500 selection:text-white\">\n <div class=\"mesh-gradient\"><\/div>\n\n \n <header class=\"fixed top-0 w-full z-[100] px-4 pt-6\">\n <nav class=\"max-w-6xl mx-auto glass rounded-full px-4 md:px-6 py-3 flex justify-between items-center relative z-10\">\n <div class=\"flex items-center gap-3\">\n <a href=\"#\">\n <figure><img decoding=\"async\" src=\"https:\/\/designingmedia.com\/localbot\/wp-content\/uploads\/2026\/04\/logo.png\" alt=\"logo\"><\/figure>\n <\/a>\n <\/div>\n \n \n <div class=\"hidden lg:flex gap-8 text-sm font-medium text-slate-300\">\n <a href=\"#overview\" class=\"hover:text-white transition-colors\">Overview<\/a>\n <a href=\"#demo\" class=\"hover:text-white transition-colors\">Showcase<\/a>\n <a href=\"#features\" class=\"hover:text-white transition-colors\">Features<\/a>\n <a href=\"#audience\" class=\"hover:text-white transition-colors\">Who It’s For<\/a>\n <a href=\"https:\/\/designingmedia.com\/localbot\/documentation\" class=\"hover:text-white transition-colors\">Documentation<\/a>\n <\/div>\n\n <div class=\"flex items-center gap-4\">\n <button class=\"hidden sm:block btn-gradient px-6 py-2.5 rounded-full text-sm font-bold text-white shadow-lg\">\n Get Started\n <\/button>\n \n \n <button id=\"menu-toggle\" class=\"lg:hidden w-10 h-10 flex flex-col items-center justify-center gap-1.5 glass rounded-full\" aria-label=\"Toggle Menu\">\n <span class=\"w-5 h-0.5 bg-white transition-all duration-300\" id=\"line1\"><\/span>\n <span class=\"w-5 h-0.5 bg-white transition-all duration-300\" id=\"line2\"><\/span>\n <span class=\"w-5 h-0.5 bg-white transition-all duration-300\" id=\"line3\"><\/span>\n <\/button>\n <\/div>\n <\/nav>\n\n \n <div id=\"mobile-menu\" class=\"absolute top-0 left-0 w-full glass rounded-b-[2rem] pt-24 pb-8 px-6 lg:hidden -z-10\">\n <div class=\"flex flex-col gap-6 text-center\">\n <a href=\"#overview\" class=\"mobile-link text-lg font-semibold text-slate-300 hover:text-white\">Overview<\/a>\n <a href=\"#demo\" class=\"mobile-link text-lg font-semibold text-slate-300 hover:text-white\">Demo<\/a>\n <a href=\"#features\" class=\"mobile-link text-lg font-semibold text-slate-300 hover:text-white\">Features<\/a>\n <a href=\"#audience\" class=\"mobile-link text-lg font-semibold text-slate-300 hover:text-white\">Who It’s For<\/a>\n <a href=\"#docs\" class=\"mobile-link text-lg font-semibold text-slate-300 hover:text-white\">Documentation<\/a>\n <hr class=\"border-white\/10\">\n <button class=\"btn-gradient w-full py-4 rounded-2xl font-bold text-white\">Get Started<\/button>\n <\/div>\n <\/div>\n <\/header>\n\n <main class=\"pt-32 px-4 pb-20 overflow-x-hidden\">\n \n <section class=\"max-w-6xl mx-auto text-center mb-32\">\n <div class=\"inline-flex items-center gap-2 pill px-4 py-1.5 rounded-full text-xs font-bold text-indigo-300 mb-8 border border-indigo-500\/20\">\n <span class=\"flex h-2 w-2 rounded-full bg-indigo-500\"><\/span>\n GEMINI-POWERED WORDPRESS CHATBOT\n <\/div>\n <h1 class=\"text-4xl sm:text-5xl md:text-8xl font-black mb-8 tracking-tighter leading-[1] md:leading-[0.9] text-gradient\">\n Convert Visitors into <br\/> <span class=\"text-transparent bg-clip-text bg-gradient-to-r from-indigo-400 via-purple-400 to-pink-400\">Real Local Leads.<\/span>\n <\/h1>\n <p class=\"max-w-3xl mx-auto text-base md:text-xl text-slate-400 mb-12 leading-relaxed px-2\">\n LocalBot AI helps local businesses respond instantly, answer common questions, detect urgent intent, and capture qualified leads through a clean chat experience built for WordPress.\n <\/p>\n \n <div class=\"flex flex-col sm:flex-row gap-4 justify-center items-center mb-16 px-4\">\n <a href=\"#features\" class=\"btn-gradient px-10 py-5 rounded-2xl text-lg font-bold text-white hover:!text-white w-full sm:w-auto shadow-2xl text-center\">\n Explore Features\n <\/a>\n <a href=\"#audience\" class=\"glass glass-btn px-10 py-5 rounded-2xl text-lg font-bold text-white w-full sm:w-auto hover:!bg-white text-center\">\n Who It’s For\n <\/a>\n <\/div>\n\n \n <div class=\"grid grid-cols-1 md:grid-cols-3 gap-6 max-w-4xl mx-auto px-4\">\n <div class=\"glass-card p-6 rounded-2xl border-indigo-500\/20\">\n <div class=\"text-indigo-400 font-bold mb-2\">Fast & Natural<\/div>\n <p class=\"text-slate-400 text-sm\">Instant Gemini AI responses for all visitor questions.<\/p>\n <\/div>\n <div class=\"glass-card p-6 rounded-2xl border-purple-500\/20\">\n <div class=\"text-purple-400 font-bold mb-2\">Lead Capture<\/div>\n <p class=\"text-slate-400 text-sm\">Built-in forms capture details mid-conversation.<\/p>\n <\/div>\n <div class=\"glass-card p-6 rounded-2xl border-pink-500\/20\">\n <div class=\"text-pink-400 font-bold mb-2\">After-Hours Flow<\/div>\n <p class=\"text-slate-400 text-sm\">Special handling for midnight service inquiries.<\/p>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"overview\" class=\"max-w-6xl mx-auto mb-32 px-4\">\n <div class=\"mb-12\">\n <h2 class=\"text-3xl md:text-5xl font-black text-white mb-4 tracking-tight\">Purpose-built for local growth.<\/h2>\n <p class=\"text-slate-400 text-lg\">A chatbot designed specifically for service businesses needing faster responses.<\/p>\n <\/div>\n\n <div class=\"bento-grid\">\n <div class=\"bento-item glass-card col-span-1 md:col-span-2 row-span-2 p-6 md:p-10 flex flex-col justify-end\" style=\"border-radius: 1.5rem;\">\n <figure style=\"margin-bottom: 2rem;\"><img decoding=\"async\" src=\"https:\/\/designingmedia.com\/localbot\/wp-content\/uploads\/2026\/04\/leads-dashboard.png\" alt=\"Leads Dashboard\"><\/figure>\n <span class=\"feature-tag mb-4 w-fit\">Intent-Aware<\/span>\n <h3 class=\"text-2xl md:text-3xl font-bold mb-4\">Smarter Visitor Conversations<\/h3>\n <p class=\"text-slate-400 leading-relaxed text-sm md:text-base\">Use Gemini AI to respond naturally, detect urgency, and move visitors toward contact or lead submission without friction.<\/p>\n <\/div>\n \n <div class=\"bento-item glass-card col-span-1 md:col-span-2 p-6 md:p-10\" style=\"border-radius: 1.5rem;\">\n <figure style=\"margin-bottom: 1.5rem;\"><img decoding=\"async\" src=\"https:\/\/designingmedia.com\/localbot\/wp-content\/uploads\/2026\/04\/wordpress-icon.png\" alt=\"WordPress Icon\"><\/figure>\n <h3 class=\"text-xl font-bold mb-2\">Simple WordPress Setup<\/h3>\n <p class=\"text-slate-400 text-sm md:text-base\">Add your Gemini API key, test available models automatically, and customize the widget branding to fit your site.<\/p>\n <\/div>\n\n <div class=\"bento-item glass-card col-span-1 md:col-span-2 p-6 md:p-10\" style=\"border-radius: 1.5rem;\">\n <figure style=\"margin-bottom: 1.5rem;\"><img decoding=\"async\" src=\"https:\/\/designingmedia.com\/localbot\/wp-content\/uploads\/2026\/04\/local-service.png\" alt=\"Local Services\"><\/figure>\n <h3 class=\"text-xl font-bold mb-2\">Local Service Focus<\/h3>\n <p class=\"text-slate-400 text-sm md:text-base\">Support common customer questions, service inquiries, and fast decision-making for visitors looking for immediate help.<\/p>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"demo\" class=\"max-w-6xl mx-auto mb-32 px-4\">\n <div class=\"mb-12\">\n <h2 class=\"text-3xl md:text-5xl font-black text-white mb-4 tracking-tight\">Visual Interface.<\/h2>\n <p class=\"text-slate-400 text-lg\">See how LocalBot AI looks in action across different touchpoints.<\/p>\n <\/div>\n\n <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8\">\n \n <div class=\"flex flex-col gap-6\">\n <figure><img decoding=\"async\" src=\"https:\/\/designingmedia.com\/localbot\/wp-content\/uploads\/2026\/04\/chat-bot.png\" alt=\"Chat Bot\"><\/figure>\n <div class=\"text-center px-4\">\n <h4 class=\"text-white font-bold text-lg mb-2\">Visitor-First Chat<\/h4>\n <p class=\"text-slate-400 text-sm\">A clean, non-intrusive chat window that matches your brand colors perfectly.<\/p>\n <\/div>\n <\/div>\n\n \n <div class=\"flex flex-col gap-6\">\n <figure><img decoding=\"async\" src=\"https:\/\/designingmedia.com\/localbot\/wp-content\/uploads\/2026\/04\/centralized-dashboard.png\" alt=\"Centralized Dashboard\"><\/figure>\n <div class=\"text-center px-4\">\n <h4 class=\"text-white font-bold text-lg mb-2\">Centralized Dashboard<\/h4>\n <p class=\"text-slate-400 text-sm\">Manage API settings, view conversation logs, and export leads from one screen.<\/p>\n <\/div>\n <\/div>\n\n \n <div class=\"flex flex-col gap-6\">\n <figure><img decoding=\"async\" src=\"https:\/\/designingmedia.com\/localbot\/wp-content\/uploads\/2026\/04\/automated-dashboard.png\" alt=\"Automated Dashboard\"><\/figure>\n <div class=\"text-center px-4\">\n <h4 class=\"text-white font-bold text-lg mb-2\">Automated Capture<\/h4>\n <p class=\"text-slate-400 text-sm\">Fields for Name, ZIP, and Service type appear naturally during the flow.<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"features\" class=\"max-w-6xl mx-auto mb-32 px-4\">\n <div class=\"glass-card rounded-[2rem] md:rounded-[3rem] p-8 md:p-16 relative overflow-hidden\">\n <div class=\"absolute top-0 right-0 w-96 h-96 bg-indigo-500\/10 rounded-full blur-[100px] -mr-48 -mt-48\"><\/div>\n \n <h2 class=\"text-3xl md:text-5xl font-black text-white mb-12 tracking-tight\">Everything you need.<\/h2>\n \n <div class=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8 relative z-10\">\n <div class=\"space-y-3\">\n <div class=\"text-indigo-400 font-bold flex items-center gap-2\">\n <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"3\" d=\"M5 13l4 4L19 7\"><\/path><\/svg>\n Gemini AI Chat\n <\/div>\n <p class=\"text-slate-400 text-sm\">Natural, fast responses for service questions and inquiries.<\/p>\n <\/div>\n <div class=\"space-y-3\">\n <div class=\"text-indigo-400 font-bold flex items-center gap-2\">\n <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"3\" d=\"M5 13l4 4L19 7\"><\/path><\/svg>\n Automatic Model Testing\n <\/div>\n <p class=\"text-slate-400 text-sm\">Validate and select models during setup for a smoother launch.<\/p>\n <\/div>\n <div class=\"space-y-3\">\n <div class=\"text-indigo-400 font-bold flex items-center gap-2\">\n <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"3\" d=\"M5 13l4 4L19 7\"><\/path><\/svg>\n Built-in Lead Form\n <\/div>\n <p class=\"text-slate-400 text-sm\">Collect name, phone, email, ZIP, and service type in chat.<\/p>\n <\/div>\n <div class=\"space-y-3\">\n <div class=\"text-indigo-400 font-bold flex items-center gap-2\">\n <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"3\" d=\"M5 13l4 4L19 7\"><\/path><\/svg>\n Emergency Handling\n <\/div>\n <p class=\"text-slate-400 text-sm\">Callback-style flows for leads arriving outside business hours.<\/p>\n <\/div>\n <div class=\"space-y-3\">\n <div class=\"text-indigo-400 font-bold flex items-center gap-2\">\n <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"3\" d=\"M5 13l4 4L19 7\"><\/path><\/svg>\n Custom Widget UI\n <\/div>\n <p class=\"text-slate-400 text-sm\">Set position, colors, and welcome text to match your brand.<\/p>\n <\/div>\n <div class=\"space-y-3\">\n <div class=\"text-indigo-400 font-bold flex items-center gap-2\">\n <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"3\" d=\"M5 13l4 4L19 7\"><\/path><\/svg>\n Admin Dashboard\n <\/div>\n <p class=\"text-slate-400 text-sm\">Review leads, logs, and analytics from your WordPress panel.<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"audience\" class=\"max-w-6xl mx-auto mb-32 px-4\">\n <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-12 items-center\">\n <div>\n <h2 class=\"text-3xl md:text-5xl font-black text-white mb-6 tracking-tight\">Perfect for local <br\/>service businesses.<\/h2>\n <p class=\"text-slate-400 text-lg mb-8\">Ideal for businesses where fast answers directly improve lead conversion.<\/p>\n \n <div class=\"space-y-6\">\n <div class=\"glass-card p-6 rounded-2xl\">\n <h4 class=\"font-bold text-white mb-2\">Home Service Companies<\/h4>\n <p class=\"text-slate-400 text-sm\">Plumbers, HVAC, electricians, roofers, locksmiths, and cleaning services.<\/p>\n <\/div>\n <div class=\"glass-card p-6 rounded-2xl\">\n <h4 class=\"font-bold text-white mb-2\">High-Intent Local Leads<\/h4>\n <p class=\"text-slate-400 text-sm\">Teams handling urgent inquiries, quote requests, or after-hours contact.<\/p>\n <\/div>\n <div class=\"glass-card p-6 rounded-2xl\">\n <h4 class=\"font-bold text-white mb-2\">Conversion Focused<\/h4>\n <p class=\"text-slate-400 text-sm\">Reduce missed opportunities and create a stronger first impression online.<\/p>\n <\/div>\n <\/div>\n <\/div>\n \n <div class=\"glass p-6 md:p-10 rounded-[2rem] md:rounded-[3rem]\">\n <h3 class=\"text-2xl font-bold text-white mb-6\">What visitors experience<\/h3>\n <ul class=\"space-y-4\">\n <li class=\"flex items-start gap-3 text-slate-300\">\n <span class=\"text-green-400 mt-1\">\u2713<\/span>\n Instant answers for common questions\n <\/li>\n <li class=\"flex items-start gap-3 text-slate-300\">\n <span class=\"text-green-400 mt-1\">\u2713<\/span>\n Lead capture during active conversations\n <\/li>\n <li class=\"flex items-start gap-3 text-slate-300\">\n <span class=\"text-green-400 mt-1\">\u2713<\/span>\n Urgent intent handling for time-sensitive requests\n <\/li>\n <li class=\"flex items-start gap-3 text-slate-300\">\n <span class=\"text-green-400 mt-1\">\u2713<\/span>\n Professional branded chat widget on WordPress\n <\/li>\n <\/ul>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"max-w-5xl mx-auto px-4\">\n <div class=\"glass-card rounded-[2rem] md:rounded-[3rem] p-8 md:p-12 text-center relative overflow-hidden\">\n <div class=\"absolute inset-0 bg-gradient-to-br from-indigo-500\/20 to-purple-500\/20 opacity-30\"><\/div>\n <h2 class=\"text-3xl md:text-6xl font-black mb-6 text-white leading-tight relative z-10\">Show visitors you <br\/>respond faster.<\/h2>\n <p class=\"text-slate-400 mb-10 text-base md:text-lg relative z-10\">Turn your WordPress site into a lead-focused machine today.<\/p>\n <button class=\"btn-gradient px-12 py-5 rounded-2xl text-lg font-bold text-white shadow-xl relative z-10\">\n Get Started Free\n <\/button>\n <\/div>\n <\/section>\n <\/main>\n\n <footer class=\"py-12 border-t border-white\/5 text-center px-4\">\n <p class=\"text-slate-500 text-sm\">LocalBot AI © 2026. Built for WordPress conversion.<\/p>\n <\/footer>\n\n <script>\n \/\/ Smooth scroll for nav\n document.querySelectorAll('a[href^=\"#\"]').forEach(anchor => {\n anchor.addEventListener('click', function (e) {\n e.preventDefault();\n const target = document.querySelector(this.getAttribute('href'));\n if (target) {\n target.scrollIntoView({ behavior: 'smooth' });\n \/\/ Close mobile menu if open\n closeMobileMenu();\n }\n });\n });\n\n \/\/ Mobile Menu Logic\n const menuToggle = document.getElementById('menu-toggle');\n const mobileMenu = document.getElementById('mobile-menu');\n const line1 = document.getElementById('line1');\n const line2 = document.getElementById('line2');\n const line3 = document.getElementById('line3');\n let isMenuOpen = false;\n\n function toggleMenu() {\n isMenuOpen = !isMenuOpen;\n if (isMenuOpen) {\n mobileMenu.classList.add('open');\n line1.style.transform = 'rotate(45deg) translate(5px, 5px)';\n line2.style.opacity = '0';\n line3.style.transform = 'rotate(-45deg) translate(5px, -5px)';\n } else {\n closeMobileMenu();\n }\n }\n\n function closeMobileMenu() {\n isMenuOpen = false;\n mobileMenu.classList.remove('open');\n line1.style.transform = 'none';\n line2.style.opacity = '1';\n line3.style.transform = 'none';\n }\n\n menuToggle.addEventListener('click', toggleMenu);\n\n \/\/ Close menu on resize if switching to desktop\n window.addEventListener('resize', () => {\n if (window.innerWidth >= 1024 && isMenuOpen) {\n closeMobileMenu();\n }\n });\n\n \/\/ Parallax effect for mesh gradient\n const mesh = document.querySelector('.mesh-gradient');\n document.addEventListener('mousemove', (e) => {\n const x = (e.clientX \/ window.innerWidth - 0.5) * 30;\n const y = (e.clientY \/ window.innerHeight - 0.5) * 30;\n mesh.style.transform = `translate(${x}px, ${y}px)`;\n });\n <\/script>\n<\/body>\n<\/html>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>LocalBot AI | Future of Lead Gen Overview Showcase Features Who It’s For Documentation Get Started Overview Demo Features Who It’s For Documentation Get Started GEMINI-POWERED WORDPRESS CHATBOT Convert Visitors into Real Local Leads. LocalBot AI helps local businesses respond instantly, answer common questions, detect urgent intent, and capture qualified leads through a clean chat […]<\/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-8","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/designingmedia.com\/localbot\/index.php\/wp-json\/wp\/v2\/pages\/8","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/designingmedia.com\/localbot\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/designingmedia.com\/localbot\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/designingmedia.com\/localbot\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/designingmedia.com\/localbot\/index.php\/wp-json\/wp\/v2\/comments?post=8"}],"version-history":[{"count":7,"href":"https:\/\/designingmedia.com\/localbot\/index.php\/wp-json\/wp\/v2\/pages\/8\/revisions"}],"predecessor-version":[{"id":36,"href":"https:\/\/designingmedia.com\/localbot\/index.php\/wp-json\/wp\/v2\/pages\/8\/revisions\/36"}],"wp:attachment":[{"href":"https:\/\/designingmedia.com\/localbot\/index.php\/wp-json\/wp\/v2\/media?parent=8"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}