Experience next-generation AI conversations with our advanced chatbot that understands context, learns from interactions, and provides instant, accurate responses.
Preview our pages and access documentation
Explore our Comprehensive AI Chatbot Platform
Explore our Comprehensive AI Chatbot Platform
Explore our comprehensive chatbot platform
Explore our comprehensive chatbot platform
Single License – You can use the template for one project. Only you can access and use it.
Multiple License – You can use the template for multiple projects. Your team members or multiple users can also access it.
Extended License – If you intend to use the template for a client project, an end product for sale, or any commercial purpose, you are required to purchase the Extended License.
VaatBot is a modern AI chatbot platform. Built with React.js and Tailwind CSS, it features beautiful UI and responsive design, ensuring a great experience for users.
Many Hero Section Design with different layouts
Detailed pricing and subscription options
Detailed blog and discussion listings
main-file/
├── documentation/
├── public/
│ ├── images/
├── src/
│ ├── components/
│ │ ├── ui/
│ ├── data/
│ ├── hooks/
│ ├── pages/
│ ├── router/
│ ├── App.jsx
│ ├── index.css
│ ├── index.js
│ └── main.jsx
├── CHANGELOG.md
├── README.md
├── package.json
├── package-lock.json
├── tailwind.config.js
└── vite.config.jsStores static images.
Contains all reusable React components, organized by feature or type.
Stores mock data, data fetching logic, or other data-related utilities.
Contains main layout components (e.g., Navbar, Footer).
Contains top-level page components, each corresponding to a specific route or view.
Defines application routes and navigation logic.
npm installnpm run devHere are the key dependencies and their versions used in this project:
| Package | Version | Description |
|---|---|---|
@react-three/drei |
^10.5.0 | Useful helpers for react-three-fiber |
@react-three/fiber |
^9.2.0 | A React renderer for Three.js |
@tailwindcss/vite |
^4.1.11 | Tailwind CSS plugin for Vite |
clsx |
^2.1.1 | A tiny utility for constructing className strings conditionally |
motion |
^12.23.0 | Animation library for the web |
react |
^19.1.0 | Core React library for building user interfaces |
react-dom |
^19.1.0 | React DOM rendering for web applications |
react-icons |
^5.5.0 | SVG icons for React projects |
react-router-dom |
^7.6.3 | Routing library for React applications |
swiper |
^11.2.10 | Modern mobile touch slider |
tailwind-merge |
^3.3.1 | Merge Tailwind CSS classes without style conflicts |
tailwindcss |
^4.1.11 | A utility-first CSS framework |
three |
^0.178.0 | 3D library for the web |
src/layout/ - Common layouts and navigation
src/components/home/ - Components for home page and discussions
src/components/ui/ - Reusable common UI components
src/pages/SignIn.jsx - Components for authentication
src/pages/Home.jsx - Default home page with a clean, modern layout featuring a hero section.
src/pages/Home2.jsx - Alternative layout with a geometric hero section, followed by all standard sections in a modern, visually appealing design.
src/pages/Home3.jsx - Third layout variant with a custom hero section (HeroSection3) and the same comprehensive sections as other home pages.
src/pages/Home4.jsx - Fourth layout featuring HeroSection4 with a unique design, maintaining all standard sections for consistency.
src/pages/SignIn.jsx - Sign In page
Theme colors are defined in
src/index.css.
src/index.css:/* src/index.css */
@theme {
/* Base Colors */
--color-surface: #040D12;
--color-primary: #5f5af7;
--color-accent: #a594fd;
--default-transition: "cubic-bezier(.405, 0, .025, 1)";
/* Additional Colors */
--color-muted: #94a3b8;
/* For muted/disabled text */
--color-border: #2d3748;
/* For borders */
--color-muted-foreground: #a1a1aa;
/* Shadows */
--shadow-xl: 0 20px 40px -10px rgba(255, 255, 255, 0.25);
--shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
/* Gradients */
--gradient-primary: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
--gradient-accent: linear-gradient(135deg, var(--color-accent), var(--color-primary));
}The application uses two main fonts from Google Fonts: "Nunito" for body text and "Tourney" for titles. These are imported and configured in src/index.css.
src/index.css)/* src/index.css */
/* Google Fonts Import */
@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Tourney:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
/* Apply fonts globally */
@layer base {
body {
font-family: 'Nunito', sans-serif;
}
h1, h2, h3, h4, h5, h6, .font-title {
font-family: 'Tourney', sans-serif;
font-weight: 700;
}
}We offer 6 months of support for any questions or issues you may encounter.
Discover the powerful technologies and tools that make our platform exceptional
Dynamic UI Library
Utility First Framework
Smooth Animations
3D Animation Library
Web Structure
Modern Styling
Mobile Friendly
Web Typography
Vector Graphics
Clean Aesthetics
Flexible Components
Optimized Structure
Clear Guides
Always Available