Introduction

What Is Visionix?

Visionix is a fully responsive and modern Tailwind CSS Landing Page Template, designed specifically for agencies, startups, and businesses. It provides a clean, professional, and high-performance design that ensures a seamless user experience on all devices. Built with the latest Tailwind CSS v3.4.17, Visionix is optimized for fast performance and easy customization. The template includes pre-defined styles for typography, colors, icons, and animations, allowing users to quickly adapt it to their branding needs.

Key Features:

Agency-Focused Design – Tailored for digital agencies and startups
Dark Mode Support – Easily switch between light and dark themes
Simple Color Customization – Modify primary and secondary colors via tailwind.config.js
Fully Responsive & Mobile-Friendly – Optimized for all screen sizes
Remix Icon Integration – High-quality, scalable icons for UI elements
Smooth Animations with AOS – Enhance user experience with scroll animations
Google Fonts Support – Easily update typography through main.css

Instalation Steps

If you'd like to speed up development process with Node.js, then follow these steps :

Install Node.js if you don’t have it yet.
Run npx tailwindcss init before npm install command

if you haven't already installed tailwindcss previously. This will install the npm packages listed in the package.json file. You should now have the project files set up and all the npm packages installed.
if you already installed tailwindcss previously, Run npm install then npm run dev to start the development server with hot-reloading. This command allows you to preview changes in real-time while customizing your Visionix template before preparing it for production.

Quick Installation

Installing npm packages ( Terminal command: npm install )

Build for Development( Terminal command: npm run dev )

Customization

How to customize colors in Visionix?

Visionix makes it easy to customize colors using Tailwind CSS. Instead of manually changing colors throughout the template, you can modify the primary and secondary colors directly in the tailwind.config.js file. Simply update the values for "primary" and "secondary" in the theme extension, and all elements using these colors will automatically reflect the changes. This allows you to adjust the themes color scheme with just one modification. For more details on customizing colors, refer to the Tailwind CSS documentation: Customizing Colors.
How to change the font family in Visionix?

Visionix makes it easy to customize colors using First, open the _main.css file (located in `build/css/main.css`) and import your Google Font: @import url('https://fonts.google.com/')
Next, create a custom class inside `main.css` to define the font family:
.poppins-regular { font-family: "Poppins", sans-serif; font-weight: 400; font-style: normal; }
Finally, apply the font using the class in your HTML:
This text uses Poppins font.
How to set up Formspree in Visionix?

Visionix uses Formspree to handle contact form submissions easily without a backend. To set it up, follow these steps:
1. Go to Formspree and sign up (if you haven't already).
2. Create a new form and copy the unique Formspree endpoint URL.
3. Open the contact.html file in Visionix.
4. Replace the current form's action attribute with your Formspree endpoint.
5. Save the file, and your form is ready to receive submissions via email.
How to change icons in Visionix?

Visionix uses Remix Icon, a free and open-source icon library. Follow these steps to change icons in your project :
Find Your Desired Icon Visit Remix Icon and search for the icon you want to use. Each icon has a unique class name (e.g., `ri-home-line` for a home icon).
Replace the Icon Class in Your HTML Locate the icon in your HTML file and replace the class with your chosen icon. Example:  → Change to 
Customize Icon Size and Color You can modify the icon size and color using Tailwind CSS classes: - Size: `` (Change `text-2xl` to other sizes like `text-lg`, `text-4xl`, etc.) - Color: ``
Using Icons Inside Buttons and Links To use an icon inside a button or link, simply wrap it inside: <a href="#" class="flex items-center space-x-2"> Buy Now </a> That's it! You can now easily replace and customize icons in Visionix.

Structures

Folder and File Structure

Visionix V1.0

docs

documentation.html

build
- - css
    - main.css
    - output.css
    - flowbite.min.css
    - aos.css
  - remixicon
    - // icons and fonts here
  - images
    - // all images here
  - js
    - main.js
    - flowbite.min.js
    - aos.js
  - src
    - input.css
  - themes
    - agency
      - home.html
      - about.html
      - services.html
      - blog.html
      - portfolio.html
      - contact.html
    - auth
      - forgotpasssword.html
      - resetpassword.html
      - sigin.html
      - signup.html
  - index.html
LICENSE

README.md

package.json

tailwind.config.js

HTML Structure


                <!DOCTYPE html>
                <html lang="en">
                <head>
                    <meta charset="UTF-8">
                    <meta name="viewport" content="width=device-width, initial-scale=1.0">
                    <title>My Page</title>
                    
                    <!-- Tailwind CSS -->
                    <link rel="stylesheet" href="../../css/output.css">
                    
                    <!-- Main Custom CSS -->
                    <link rel="stylesheet" href="../../css/main.css">
                    
                   
                </head>
                <body>

                <!-- Loader -->
                    <div id='loader'>
                    </div>
                    <!--End Loader -->

                    <!-- Main Content -->
                    <main id="content">

                    <!-- Navbar -->
                        <header>
                           <div class="-----">
                           -----------
                           -----------
                           </div>
                        </header>
                        <!--End Navbar -->

                        <!-- Back to top button -->
                         <button id="-----">
                         </button>
                        <!--End Back to top button -->

                        <!-- Hero Section -->
                         <section class="-----">
                           <div class="-----">
                           -----------
                           -----------
                           </div>
                        </section>
                        <!--End Hero Section -->

                        <!-- Footer -->
                        <footer class="-----">
                          <div class="-----">
                          -----------
                          -----------
                          </div>
                        </footer>
                        <!--End Footer -->

                    </main>
                    <!--End Main Content -->

                  
                    <!-- AOS JS -->
                    <script src="https://unpkg.com/aos@next/dist/aos.js"></script>
                    
                    <!-- Main JS -->
                    <script src="../../js/main.js"></script>

                </body>
                </html>

File Explanation

CSS

Files are explained below :

File	Description
main.css	The core custom CSS file used across all pages.
input.css	Tailwind's default files, handling utility classes generation.
output.css	Tailwind's default files, handling utility classes generation.
aos.css	CSS file for AOS (Animate On Scroll) library, handling scroll-based animations.
flowbite.min.css	Minified CSS file for Flowbite, used for Tailwind-based UI components.

Javascript

Files are explained below :

File	Description
main.js	Handles custom JavaScript functionalities, including animations, event listeners, smooth scrolling, and UI interactions for Visionix.
aos.js	JavaScript file for AOS (Animate On Scroll), enabling smooth scroll-based animations on elements.
flowbite.min.js	Minified JavaScript file for Flowbite, providing interactive Tailwind-based UI components.

Credits

Credits & Official Documentation

We've used the following resources as listed. These are some awesome creation and we are thankful to the community.

Npm Js

Node Js

Tailwind css

Flowbite

Animate On Scroll

Alpine js

Keen Slider

Remix Icon

Google Fonts

Freepik

Pexels

Css Gradient

Favicon

Support & Changelog

Thank-you note

Once again thank you for your purchase. I'll be happy to answer the the questions you have related to the theme. In case if you have any suggestion or feature, request please feel free to contact me, I'll try to implement it and will release as part of future updates. If you have any questions that are beyond the scope of this documentation, please feel free to email or contact us via my page. Stay awesome - Flowdev Teams

Change Log

Version 1.0 Initial Release