MarketingAI - Digital Marketing Agency Website 🚀

A modern, responsive digital marketing agency website built with React and Tailwind CSS. Features a sleek design with dark/light theme toggle, custom cursor effects, and engaging animations.

✨ Features

• Modern Design: Clean, professional layout with gradient accents
• Dark/Light Theme: Toggle between themes with persistent localStorage
• Custom Cursor: Interactive cursor with smooth animations
• Responsive Design: Fully responsive across all device sizes
• Smooth Animations: Hover effects and transitions throughout
• Contact Form: Functional contact form with Web3Forms integration
• Company Showcase: Display trusted partners and team members
• Portfolio Section: Showcase latest work and projects

🛠️ Built With

• React 19 - Latest React version with modern features
• Vite - Fast build tool and development server
• Tailwind CSS 4 - Utility-first CSS framework
• React Hot Toast - Beautiful notifications
• Web3Forms - Contact form backend service
• Framer Motion - Smooth animations and transitions for React

🚀 Quick Start

Prerequisites

• Node.js (v18 or higher)
• npm or yarn

Installation

1. Clone the repository

   git clone https://github.com/pranto113015/marketingai.git
   cd marketingai

2. Install dependencies

   npm install

3. Start development server

   npm run dev

4. Open in browser Navigate to http://localhost:5173

📁 Project Structure

marketingai/
├── public/
│   └── favicon.ico
├── src/
│   ├── assets/          # Images, icons, and asset exports
│   ├── components/      # Reusable React components
│   │   ├── Navbar.jsx
│   │   ├── Hero.jsx
│   │   ├── Services.jsx
│   │   ├── OurWork.jsx
│   │   ├── Teams.jsx
│   │   ├── ContactUs.jsx
│   │   └── Footer.jsx
│   ├── App.jsx         # Main application component
│   ├── main.jsx        # Application entry point
│   └── index.css       # Global styles and Tailwind imports
├── package.json
├── vite.config.js
└── tailwind.config.js

🎨 Key Components

Hero Section

• Engaging headline with gradient text effects
• Trust indicators showing "Trusted by 20k+ people"
• Call-to-action with hero image

Services Section

• Four main service offerings:
  • Advertising
  • Content Marketing
  • Content Writing
  • Social Media

Portfolio (Our Work)

• Showcase of latest projects
• Hover effects and responsive grid layout
• Project descriptions and imagery

Team Section

• Meet the team with profile photos
• Dynamic team member cards
• Professional titles and roles

Contact Form

• Integrated with Web3Forms
• Form validation and error handling
• Success/error notifications with React Hot Toast

🌙 Theme System

The application supports both light and dark themes:

• Theme preference stored in localStorage
• Smooth transitions between themes
• Custom theme toggle component
• Theme-aware asset loading

🎯 Custom Cursor

Interactive cursor system with:

• Smooth follow animation
• Ring and dot elements
• Custom easing and positioning
• Z-index layering for proper display

📱 Responsive Design

Mobile-first approach with breakpoints:

• sm: - 640px and up
• md: - 768px and up
• lg: - 1024px and up
• xl: - 1280px and up

🚀 Deployment

Build for Production

npm run build

Preview Production Build

npm run preview

Deploy to Vercel

# Install Vercel CLI
npm i -g vercel

# Deploy
vercel

Deploy to Netlify

# Build the project
npm run build

# Deploy the dist folder to Netlify

🔧 Configuration

Contact Form Setup

1. Sign up at Web3Forms
2. Get your access key
3. Replace YOUR_ACCESS_KEY_HERE in ContactUs.jsx

Customization

• Colors: Modify the primary color in index.css (--color-primary)
• Fonts: Current font is Manrope from Google Fonts
• Assets: Replace images in the src/assets/ directory
• Content: Update text content in component files

📜 Available Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm run preview - Preview production build
• npm run lint - Run ESLint

🤝 Contributing

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

📄 License

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

🌟 Acknowledgments

• Design inspiration from modern marketing agencies
• Icons and images from various sources
• Team photos from Unsplash and RandomUser
• Built with love using React and Tailwind CSS

📞 Contact

If you have any questions or need further clarification, please contact my email/ Linkedin .

💌 Email : pranto113015@gmail.com
🕵️‍♂️ LinkedIn : Pranto Kumar

⭐ If you found this project helpful, please give it a star!

This project demonstrates professional front-end development with modern technologies and production-ready architecture. Perfect for showcasing your skills to potential employers!