Preview our pages and access documentation
Documentation for the AI Image Generator Website
Explore our comprehensive Auth Pages
Explore our comprehensive Other Pages
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.
AIGenerator is a modern and powerful AI Image Generator website React template. It's designed for showcasing cutting-edge AI technology that transforms text prompts into stunning visuals. Built with React, React-Bootstrap, Bootstrap 5, SCSS, it offers a dynamic and engaging user experience across all devices.
Leverage state-of-the-art AI to generate high-quality, photorealistic images.
Offer users a choice from over 50+ artistic styles to craft unique masterpieces.
Generate images in seconds and download them in stunning 4K resolution.
imgeai-react/
├── public/
├── src/
│ ├── assets/
│ ├── components/
│ │ ├── home/
│ │ └── ui/
│ ├── data/
│ ├── layout/
│ │ ├── Footer.jsx
│ │ ├── Header.jsx
│ │ └── Layout.jsx
│ ├── pages/
│ ├── routers/
│ ├── scss/
│ │ ├── components/
│ │ ├── layout/
│ │ └── plugin/
│ ├── App.css
│ ├── App.jsx
│ ├── index.scss
│ └── main.jsx
├── index.html
├── package.json
└── vite.config.jsnpm installnpm run devHere are the key dependencies and their versions used in this project:
| Dev Package | Version | Description |
|---|---|---|
@fortawesome/fontawesome-free | ^7.0.0 | Font Awesome icon set |
bootstrap | ^5.3.8 | CSS framework for responsive layouts |
motion | ^12.23.12 | Framer Motion (new entrypoint) animations |
react | ^19.1.1 | Core React library |
react-bootstrap | ^2.10.10 | React components for Bootstrap |
react-countup | ^6.5.3 | Animated counters |
react-dom | ^19.1.1 | DOM renderer for React |
react-router-dom | ^7.8.2 | Routing for React apps |
remixicon | ^4.6.0 | Remix Icon set |
swiper | ^11.2.10 | Touch slider/carousel |
src/components/home/HeroSection.jsx
– Landing hero content (headline, CTA, visuals)
src/components/ui/SectionHeader.jsx
– Reusable section heading wrapper
src/components/ui/SmartCouter.jsx
– Animated counter widget
src/layout/Header.jsx,
src/layout/Footer.jsx,
src/layout/Layout.jsx
– Global layout scaffolding
src/pages/Home.jsx,
src/pages/Home2.jsx
– Home pages
src/pages/Signin.jsx,
src/pages/Signup.jsx
– Auth pages
src/images/property-img/ – Listing
images (img-1.jpg … img-14.jpg)
src/images/property-icon/ – SVG
icons for property types
src/images/auth-slider/ – Auth
slider images (auth-img-*.jpg)
src/images/user-img/ – Testimonial
avatars
src/scss/_variables.scss – Theme
variables (colors, spacing, typography)
src/scss/style.scss & src/index.scss – Bootstrap + custom
SCSS bundle
Customize your theme colors by editing the SCSS variables file.
// In src/scss/_variables.scss
// Base Colors
$blue: #4f46e5 ;
$indigo: #7c3aed ;
$purple: #8b5cf6 ;
$pink: #ec4899 ;
$red: #ef4444 ;
$orange: #f97316 ;
$yellow: #f59e0b ;
$green: #10b981 ;
$teal: #14b8a6 ;
$cyan: #06b6d4 ;Customize typography by updating font imports and variables.
// In src/scss/_variables.scss
@import url('https://fonts.googleapis.com/css2?family=Audiowide&family=Quantico:ital,wght@0,400;0,700;1,400;1,700&display=swap');// In src/scss/_custom-variables.scss
$body-line-height: 1.6;
$body-font-size: $font-size-base * 1.1;
$line-height-md: 1.5;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
Responsive Framework
React Components
Smooth Animations
Smart Styling
Web Structure
Modern Styling
Mobile Friendly
Web Typography
Vector Graphics
Clean Aesthetics
Flexible Components
Optimized Structure
Clear Guides
Always Available
© Mantraksh Devs. ImgeAi - All Rights Reserved. Crafted with ❤