AI — Smart AI Chatbot Landing Page
A modern, highly animated AI chatbot landing page built with React, Vite, Tailwind CSS, and Framer Motion. Designed with glass morphism aesthetics, seamless scroll animations, and a premium demo popup — showcasing a fictional AI chatbot product ready for backend integration.
This project is a fully responsive, single-page landing website inspired by the
Elementra AI Chatbot design. It serves as a frontend demo / prototype for an AI
powered customer support chatbot service. The site features a bold, futuristic
visual identity with dark-mode glassmorphism, vibrant gradient accents, and rich
motion design throughout every section.
2. TECH STACK
————-
– Framework : React 18 + TypeScript
– Build Tool : Vite 5
– Styling : Tailwind CSS v3 (custom design tokens & semantic tokens)
– Animation : Framer Motion (entrance, hover, scroll-triggered)
– UI Components : shadcn/ui (Accordion, Dialog, Tabs, etc.)
– Icons : Lucide React
– Fonts : Sora (headings) + Inter (body)
3. KEY FEATURES & SECTIONS
————————–
– Navbar : Sticky glassmorphism nav with scroll-state transitions
– Hero : Dynamic headline, gradient text, mock chat interface,
floating robot mascot, and scrolling brand marquee
– Innovation : Animated UI mockups showcasing AI capabilities
– Voice : CSS-based audio waveform visualization
– Features : Grid layout with hover-scale animations
– Pricing : Interactive monthly/yearly billing toggle
– Blog : Article cards with entrance animations
– FAQ : Expandable accordion with smooth transitions
– CTA : High-contrast call-to-action section
– Footer : Multi-column footer with links and branding
– Demo Popup : Floating bottom-right glassmorphism card with developer
branding (pabitra.net & Brown Fox IT), spring entrance
animation, idle float loop, and dismiss functionality
4. DESIGN HIGHLIGHTS
——————–
– Dark theme with Apple-like minimalism
– Custom CSS animations: blob, float, marquee, wave, gradient-x
– Glassmorphism cards with backdrop blur and soft semi-transparent gradients
– Premium color palette using HSL semantic tokens (primary, secondary, accent, CTA)
– Fully responsive across mobile, tablet, and desktop viewports
5. ASSETS INCLUDED
——————
– robot-hero.png : 3D AI robot mascot
– blog-1.jpg : Demo blog thumbnail 1
– blog-2.jpg : Demo blog thumbnail 2
– blog-3.jpg : Demo blog thumbnail 3
– person-chat.jpg : Demo chat avatar image
– logo-pabitra.png : Developer branding logo 1
– logo-brownfox.png : Developer branding logo 2
6. DEPLOYMENT READY
——————-
– Production build optimized via Vite
– Includes .htaccess for cPanel / Apache hosting
– SPA routing support (all paths → index.html)
– Gzip compression and browser caching enabled
– All images bundled in the dist/assets/ folder
7. FUTURE SCOPE
—————
The frontend is intentionally decoupled from backend logic, making it easy to:
– Connect to Lovable Cloud / Supabase for auth and database
– Add a real AI chat API (OpenAI, Claude, etc.)
– Implement user accounts, subscriptions, and admin dashboard
– Extend with Stripe / Paddle payment integration
8. DEVELOPER CREDITS
——————–
– Primary Developer : Pabitra (pabitra.net)
– Development Partner : Brown Fox IT (brownfoxit.com)
