• Overview
• Key Features
• Tech Stack
• Project Structure
• Getting Started
  • Prerequisites
  • Installation
  • Environment Variables
• Components Overview
• Customization
• Deployment
• Performance
• Contributing
• License

AGENCY-AI is a modern, responsive landing page template designed for AI-powered digital agencies. This project showcases:

• 🎨 Modern, sleek design with dark/light theme support
• ⚡ Blazing fast performance with Vite
• 📱 Fully responsive across all devices
• 🤖 AI-focused content and design elements
• 🎯 Conversion-optimized sections

Perfect for agencies specializing in AI, machine learning, and digital transformation services.

• Dual Theme Support: Light and dark mode toggle
• Modern UI: Clean, professional design with smooth animations
• Responsive Design: Flawless experience on desktop, tablet, and mobile
• Accessibility: WCAG compliant design principles

• Hero Section: Compelling headline with call-to-action
• Services: Showcase AI services with interactive cards
• Our Work: Portfolio/case studies display
• Team: Team member profiles with expertise
• Trusted By: Client logos and testimonials
• Contact: Contact form and information

• Fast Loading: Optimized with Vite for instant loading
• SEO Ready: Proper meta tags and structured data
• Easy Customization: Modular component structure
• Performance Optimized: Optimized images and code splitting

• React 18 - Modern React with hooks
• Vite - Next-generation build tool
• Tailwind CSS - Utility-first CSS framework
• React Icons - Comprehensive icon library
• Framer Motion (optional) - Smooth animations

• ESLint - Code linting and quality
• Git - Version control
• Vercel - Deployment platform
• npm - Package management

agency-ai/
├── public/                 # Static assets
│   ├── favicon.ico        # Site favicon
│   └── index.html         # HTML template
│
├── src/                   # Source code
│   ├── assets/           # Images, icons, fonts
│   ├── components/       # Reusable components
│   │   ├── ContactUs.jsx # Contact section
│   │   ├── Footer.jsx    # Footer component
│   │   ├── Hero.jsx      # Hero section
│   │   ├── Navbar.jsx    # Navigation bar
│   │   ├── OurWork.jsx   # Portfolio section
│   │   ├── ServiceCard.jsx # Individual service card
│   │   ├── Services.jsx  # Services section
│   │   ├── Teams.jsx     # Team section
│   │   ├── ThemeToggleBtn.jsx # Theme switcher
│   │   ├── Title.jsx     # Section titles
│   │   └── TrustedBy.jsx # Clients section
│   │
│   ├── App.jsx           # Main application component
│   ├── index.css         # Global styles
│   └── main.jsx          # Application entry point
│
├── .env                  # Environment variables
├── .gitignore           # Git ignore rules
├── eslint.config.js     # ESLint configuration
├── index.html           # Main HTML file
├── package.json         # Dependencies and scripts
├── vercel.json          # Vercel deployment config
└── vite.config.js       # Vite configuration

• Node.js (v16 or higher)
• npm (v8 or higher)
• Modern web browser

1. Clone the repository:

git clone https://github.com/elyse502/agency-ai.git
cd agency-ai

2. Install dependencies:

npm install

3. Start the development server:

npm run dev

4. Open your browser and navigate to http://localhost:5173

Create a .env file in the root directory:

VITE_APP_TITLE="Agency AI"
VITE_APP_DESCRIPTION="Modern AI agency landing page"
[email protected]
VITE_CONTACT_PHONE=+1234567890

• Navbar.jsx: Responsive navigation with mobile menu
• ThemeToggleBtn.jsx: Dark/light mode toggle

• Hero.jsx: Attractive hero section with CTA
• Services.jsx: Service offerings with ServiceCard components
• OurWork.jsx: Portfolio and case studies
• Teams.jsx: Team members and profiles
• TrustedBy.jsx: Client logos and testimonials
• ContactUs.jsx: Contact form and information

• Title.jsx: Consistent section titles
• ServiceCard.jsx: Individual service cards
• Footer.jsx: Site footer with links

1. Text Content: Edit component files in /src/components/
2. Images: Replace images in /src/assets/
3. Colors: Modify Tailwind classes or CSS variables
4. Theme: Update color scheme in index.css

1. Create new component in /src/components/
2. Import and add to App.jsx
3. Style with Tailwind CSS classes

• Uses Tailwind CSS utility classes
• Custom CSS in index.css
• Responsive design with breakpoints

1. Push code to GitHub
2. Connect repository to Vercel
3. Automatic deployments on push

npm run build
npm run preview

• Netlify
• GitHub Pages
• Firebase Hosting
• Any static hosting service

• ⚡ Lighthouse Score: 95+
• 📦 Bundle Size: < 500KB
• 🖼️ Optimized Images
• 🔄 Code Splitting
• 🎯 SEO Optimized

We welcome contributions! Please follow these steps:

1. Fork the project
2. Create a feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

Distributed under the MIT License. See LICENSE for more information.

AGENCY-AI - Transforming digital experiences with artificial intelligence! 🚀

For support, email [email protected] or create an issue in the GitHub repository.

For any questions or support, please contact:

• NIYIBIZI Elysée👨🏿‍💻 | Github | Linkedin | Twitter.
• Email: [email protected]