Digital Agency

A modern, responsive digital agency website built with React and Vite. Features a sleek design with dark/light mode toggle, smooth animations, and a fully responsive layout.

✨ Features

• 🎨 Modern UI/UX - Clean and professional design with smooth animations
• 🌓 Dark/Light Mode - Toggle between themes with persistent localStorage
• 📱 Fully Responsive - Optimized for all devices (mobile, tablet, desktop)
• ⚡ Fast Performance - Built with Vite for lightning-fast development and builds
• 🎭 Smooth Animations - AOS (Animate On Scroll) library integration
• 🎠 Interactive Sliders - Testimonial carousel using React Slick
• 🎯 SEO Friendly - Semantic HTML structure
• 🧩 Component-Based - Modular and reusable React components

🚀 Demo

The website includes the following sections:

• Hero Section - Eye-catching landing with call-to-action
• Services - Showcase of agency services (App Dev, Web Design, Graphic Design, Marketing)
• Testimonials - Client feedback slider
• Blog - Latest articles and insights
• Brands - Partner company logos
• Footer - Contact information and social links

🛠️ Tech Stack

• Frontend Framework: React 18.2.0
• Build Tool: Vite 5.0.8
• Styling: Tailwind CSS 3.3.6
• Icons: React Icons 4.12.0
• Animations: AOS 2.3.4
• Carousel: React Slick 0.30.1
• Linting: ESLint 8.55.0

📋 Prerequisites

Before you begin, ensure you have the following installed:

• Node.js (v16 or higher)
• npm or yarn package manager

🔧 Installation

1. Clone the repository

   git clone <repository-url>
   cd Digital_Agency-main

2. Install dependencies

   npm install

   or

   yarn install

🏃 Running the Project

Development Mode

Start the development server with hot module replacement:

npm run dev

or

yarn dev

The application will open at http://localhost:5173

Build for Production

Create an optimized production build:

npm run build

or

yarn build

Preview Production Build

Preview the production build locally:

npm run preview

or

yarn preview

Lint Code

Run ESLint to check code quality:

npm run lint

or

yarn lint

📁 Project Structure

Digital_Agency-main/
├── public/              # Static assets
├── src/
│   ├── assets/         # Images, fonts, and other assets
│   ├── components/     # React components
│   │   ├── Blogs/      # Blog section components
│   │   ├── BrandsLogo/ # Brand logos component
│   │   ├── Footer/     # Footer component
│   │   ├── Hero/       # Hero section component
│   │   ├── Navbar/     # Navigation and dark mode toggle
│   │   ├── Services/   # Services section component
│   │   └── Testimonial/# Testimonial slider component
│   ├── App.jsx         # Main application component
│   ├── main.jsx        # Application entry point
│   └── index.css       # Global styles and Tailwind imports
├── index.html          # HTML template
├── package.json        # Project dependencies and scripts
├── tailwind.config.js  # Tailwind CSS configuration
├── vite.config.js      # Vite configuration
└── README.md           # Project documentation

🎨 Customization

Colors

The primary color scheme uses purple (#6153CD). To customize:

1. Edit tailwind.config.js to modify the color palette
2. Update the primary color in the theme configuration

Content

• Services: Edit src/components/Services/Services.jsx
• Testimonials: Edit src/components/Testimonial/Testimonial.jsx
• Blog Posts: Edit src/components/Blogs/BlogsComp.jsx
• Hero Section: Edit src/components/Hero/Hero.jsx

Dark Mode

Dark mode is implemented using Tailwind's dark mode feature with localStorage persistence. The toggle is located in src/components/Navbar/DarkMode.jsx.

🌐 Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

📝 Available Scripts

Script	Description
npm run dev	Start development server
npm run build	Build for production
npm run preview	Preview production build
npm run lint	Run ESLint

🤝 Contributing

Contributions are welcome! Please follow these steps:

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

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

👨‍💻 Author

The Coding Journey

🙏 Acknowledgments

• React
• Vite
• Tailwind CSS
• AOS Library
• React Slick
• React Icons

📞 Support

For any issues or feature requests, please open an issue in the repository.

---

Made with ❤️ by The Coding Journey