A professional, responsive website for AIM CLEANER, a cleaning products company. The website features modern design, subtle animations, and a clean user interface.

• Responsive design for all device sizes
• Scroll-based animations using Framer Motion
• Interactive product cards with hover effects
• Contact form with validation
• WhatsApp floating button
• Modern UI with clean aesthetics

• React
• TypeScript
• Tailwind CSS
• Framer Motion
• Lucide Icons

• Node.js (v16 or higher)
• npm or pnpm

1. Clone the repository:

git clone https://github.com/your-username/aim-cleaner-website.git
cd aim-cleaner-website

2. Install dependencies:

# Using npm
npm install

# Using pnpm
pnpm install

3. Start the development server:

# Using npm
npm run dev

# Using pnpm
pnpm run dev

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

To build the project for production:

# Using npm
npm run build

# Using pnpm
pnpm run build

The build files will be in the dist directory.

aim-cleaner-website/
├── public/             # Static assets
├── src/
│   ├── assets/         # Images and other assets
│   ├── components/     # React components
│   ├── App.css         # App-specific styles
│   ├── App.tsx         # Main App component
│   ├── index.css       # Global styles
│   └── main.tsx        # Entry point
├── index.html          # HTML entry point
├── package.json        # Project dependencies
├── tailwind.config.js  # Tailwind configuration
└── tsconfig.json       # TypeScript configuration

The primary colors can be adjusted in the src/App.tsx file:

// Set primary color variables based on brand colors
useEffect(() => {
  document.documentElement.style.setProperty('--color-primary', '#0066cc');
  document.documentElement.style.setProperty('--color-primary-dark', '#004d99');
  document.documentElement.style.setProperty('--color-primary-light', '#e6f0ff');
}, []);

The website content can be modified in the respective component files in the src/components/ directory.