NexusAI Template
A modern AI SaaS landing page template built with Tailwind CSS.
Template Information
Version
1.0.0
Last Updated
2025
Framework
Tailwind CSS
Responsive
All Devices
Getting Started
1. Extract Files
After downloading, extract the ZIP file to your desired location. You'll find all HTML files, assets, and documentation inside.
2. Open in Browser
Simply open index.html in your web browser to view the template. No build tools or server setup required!
3. Edit Content
Use any code editor (VS Code, Sublime Text, etc.) to modify the HTML files and customize content, images, and styling to match your brand.
4. Upload to Server
When ready, upload all files to your web hosting server. The template works on any standard web host that supports static HTML files.
File Structure
nexusai/ ├── assets/ │ ├── css/ │ │ └── style.css # Main stylesheet │ ├── js/ │ │ └── main.js # JavaScript functionality │ └── img/ │ └── favicon.svg # Favicon ├── index.html # Homepage ├── features.html # Features page ├── pricing.html # Pricing page ├── blog.html # Blog listing ├── blog-single.html # Blog post ├── contact.html # Contact page ├── about.html # About page ├── login.html # Login page ├── register.html # Registration page ├── forgot-password.html # Password reset ├── faq.html # FAQ page ├── terms.html # Terms of Service ├── privacy.html # Privacy Policy ├── changelog.html # Version history ├── coming-soon.html # Coming soon page ├── 404.html # Error page ├── documentation.html # This file └── LICENSE.txt # License info
Pages Overview
Homepage
index.html
Features
features.html
Pricing
pricing.html
Blog
blog.html, blog-single.html
Contact
contact.html
About
about.html
Authentication
login.html, register.html, forgot-password.html
FAQ
faq.html
Legal Pages
terms.html, privacy.html
Utility Pages
404.html, coming-soon.html, changelog.html
Customization
Changing Colors
The template uses CSS custom properties for colors. Edit the variables in assets/css/style.css:
:root {
--primary: 250 89% 62%; /* Main brand color */
--secondary: 280 85% 65%; /* Secondary color */
--background: 0 0% 100%; /* Page background */
--foreground: 222 47% 11%; /* Text color */
/* ... more variables */
}
Changing Fonts
The template uses Inter font. To change it, update the font-family in the Tailwind config within each HTML file's <head> section:
fontFamily: {
sans: ['Your Font', 'system-ui', 'sans-serif']
}
Updating Logo
Replace the logo in the header by modifying the logo section in each HTML file. The default uses Lucide icons with text. You can replace it with an image tag:
<a href="index.html">
<img src="assets/img/logo.png" alt="Logo" class="h-8">
</a>
Dark Mode
The template includes built-in dark mode support using Tailwind CSS class-based dark mode. The theme toggle button allows users to switch between light and dark modes.
How It Works
- Theme preference is saved to localStorage
- Respects system preference on first visit
- Smooth transitions between themes
- All components styled for both modes
Customizing Dark Mode Colors
Dark mode colors are defined in assets/css/style.css under the .dark selector:
.dark {
--background: 222 47% 6%;
--foreground: 210 40% 98%;
/* ... more dark mode variables */
}
Components
Buttons
Primary, secondary, outline, and ghost button variants.
Cards
Content containers with border and shadow.
Card content goes here...
Badges
Small labels and tags.
Form Inputs
Text inputs, textareas, and select fields.
Icons
The template uses Lucide Icons, a beautiful open-source icon library. Icons are loaded via CDN and initialized with JavaScript.
Usage
<i data-lucide="icon-name" class="w-5 h-5"></i>
Example Icons
Browse all available icons at lucide.dev/icons
Credits
Support
Need help with the template? We're here to assist!
Item Comments
Ask questions in the item's comment section on ThemeForest.
Support Includes:
- Answering questions about template features
- Assistance with reported bugs
- Help with template updates
Thank You!
Thank you for purchasing NexusAI by WolfCodeLabs. We hope you enjoy using this template!