Explore Our Platform
Preview our pages and access documentation
Home Page Demos
Demos
Home Variation 1
Home Variation 2
Home Variation 3
Home Variation 4
Home Variation 5
Primary Pages
Inner Pages
About Us Page
Services Page
Pricing Page
Faqs Page
Contact Us Page
Sign In Page
Quick Links
Introduction
🛒 License Information
Regular License – Use this for a single end product that users are not charged for. You can use this for your personal project or for one client.
Extended License – Use this for a single end product that users can be charged for (e.g., a SaaS platform or a product for sale). This is required for any commercial project where the end-user pays to use the service.
Important Note – Each license is valid for a single project only. For more details on Envato license terms, please visit the Official License Page.
Welcome to the MeeAi AI SaaS & Technology Landing Page Template documentation. This comprehensive Bootstrap 5 template is built with Gulp, HTML5, CSS3, JavaScript, and modern web technologies to help you build powerful, responsive SaaS platforms and technology websites. Following industry best practices, MeeAi combines beautiful design with professional performance. functionality to accelerate your development process.
5 Home Variations
Diverse, high-conversion layouts perfectly suited for any AI startup niche.
Premium Animations
Experience fluid motion with Lenis smooth-scrolling, AOS animations, and interactive WebGL elements.
Fully Responsive
Seamlessly optimized with Bootstrap 5.3 for stunning performance on all mobile and desktop browsers.
Folder Structure
meeai/
├── documentation/
├── src/
│ ├── html/
│ ├── scss/
│ ├── js/
│ ├── images/
│ └── videos/
├── build/
├── .gitignore
├── gulpfile.js
├── package.json
└── README.md Key Directories:
src/html/
Contains all HTML templates and modular partials for easy editing.
src/scss/
Source files for all styling, organized by components and pages.
gulpfile.js
Automates compilation, minification, and browser-sync reloading.
Changelog
- Initial release of MeeAi AI SaaS Template
- 5 Unique Home Page Variations
- Modern Glassmorphism Design
- Premium Background Animations (Orb & Glow effects)
- Built with Bootstrap 5, HTML, and Gulp
- Advanced Styling with SCSS
- Inner Pages: About, Services, Pricing, Contact
- Fully Responsive & Mobile Optimized
Installation Guide
Install Dependencies
npm installStart Development Server
gulpGetting Started
1. Changing the Logo
To update the logo, you need to replace the image files in the src/images/ directory and update the HTML partials.
- Place your new logo files (e.g.,
logo.png,logo-sm.png) in thesrc/images/folder. - Open
src/html/partials/layout/navbar.htmland update the<img>tags to point to your new logo:
<a class="navbar-brand" href="/index.html">
<img src="images/your-logo.png" alt="Logo" width="172" height="44" class="d-none d-sm-block ">
<img src="images/your-logo-sm.png" alt="Logo Small" width="40" height="40" class="d-sm-none d-block">
</a>2. Updating Primary Colors
MeeAi uses SCSS variables for easy theming. To change the primary color scheme:
- Open
src/scss/_variables.scss. - Locate the Base Colors section and modify the
$primaryvariable or any other base color.
// In src/scss/_variables.scss
$white: #ffffff;
$orange: #F59E0B; // Default primary
$purple: #6366f1;
$blue: #3657FF;
// Update primary to your brand color
$primary: $blue; // Changed from $orange to $blueAfter saving, Gulp will automatically recompile the SCSS into
css/style.min.css.
3. Libraries & Fonts Used
The template leverages the following premium libraries and Google Fonts:
Typography
- Plus Jakarta Sans - Main heading and body font. Imported via Google Fonts in
_variables.scss.
JavaScript & CSS Libraries
| Library | Purpose |
|---|---|
| Bootstrap 5.3 | Core responsive UI framework. |
| Lenis | Smooth scroll engine for premium browsing experience. |
| AOS (Animate On Scroll) | Scroll-based element entrance animations. |
| Swiper | Modern, touch-enabled sliders for testimonials and galleries. |
| GLightbox | Responsive lightbox for feature images and video popups. |
| Remixicon | Clean, open-source vector icon system. |
| Bootstrap Icons | Secondary icon set used in documentation. |
Package Dependencies
Here are the key dependencies and their versions used in this project:
| Package | Version | Description |
|---|---|---|
gulp |
^5.0.1 | Task automation toolkit |
bootstrap |
^5.3.8 | Core UI framework |
@studio-freight/lenis |
^1.0.42 | Smooth scrolling engine |
aos |
^2.3.4 | Animate on scroll library |
swiper |
^12.0.3 | Modern touch slider |
remixicon |
^4.7.0 | Open source icon set |
sass |
^1.93.2 | CSS preprocessor |
gulp-file-include |
^2.3.0 | HTML partials system |
browser-sync |
^3.0.4 | Live reload server |
File Customization
Core Components
-
src/html/partials/- HTML partials and includes -
src/scss/- SCSS source files for styling
Color & Font Customization
Color Customization
Customize your theme colors by editing the SCSS variables file.
Base Colors
// In src/scss/_variables.scss
// Base Colors
$white: #ffffff;
$orange: #F59E0B;
$purple: #6366f1;
$blue: #3657FF;
$red: #FE4444;
$gray-950: #09060e;
// Theme Overrides
$primary: $orange;
$body-bg: $gray-950;Font Customization
Customize typography by updating font imports and variables.
1. Google Fonts Import
// In src/scss/_variables.scss
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap');
$font-family-base: "Plus Jakarta Sans", sans-serif;Credits
Frameworks
- Bootstrap 5 - UI Framework
- Google Fonts - Typography
- Gulp.js - Task Automation Toolkit
Support
Need Help?
We offer 6 months of support for any questions or issues you may encounter.
