Procleaning - Premium Cleaning Service Platform

Procleaning is a high-end, responsive web application built with Next.js 16 and Tailwind CSS 4. It is designed to provide a seamless and visually stunning experience for users looking for professional cleaning services. The platform features modern aesthetics, premium animations, and a user-friendly interface to drive engagement and conversions.

(Note: Add a real preview image path here if available)

✨ Key Features

• 🚀 Premium Design: Modern, glassmorphism-inspired UI with vibrant gradients and sleek typography.
• 📱 Fully Responsive: Optimized for all screen sizes, from mobile devices to large desktops.
• 🛠️ Interactive Components:
  • Dynamic Navbar: Sticky navigation with a mobile-ready menu.
  • Hero Banner: Engaging call-to-action with premium button hover effects.
  • Service Showcases: Interactive sliders (Swiper) highlighting various cleaning solutions.
  • Expert Team: Team member profiles with social links and hover animations.
  • Pricing Plans: Monthly/Yearly toggle for transparent and flexible service pricing.
  • Multi-step Quote Form: A sophisticated form for users to request free estimates.
• 📰 Blog Section: Integrated blog slider to share cleaning tips and company news.
• ✅ Optimized Navigation: Client-side routing using next/link for instant page transitions.
• 🔔 Notifications: Real-time feedback via react-toastify.

🛠️ Tech Stack

• Framework: Next.js 16 (App Router, Turbopack)
• Library: React 19
• Styling: Tailwind CSS 4
• Icons: Lucide React
• Carousel/Slider: Swiper
• Typography: Google Fonts (Outfit)
• State Management: React Hooks (useState, useRef)
• Deployment: Optimized for Vercel/Netlify

🚀 Getting Started

Prerequisites

• Node.js (Latest LTS version recommended)
• npm or yarn

Installation

1. Clone the repository:

   git clone https://github.com/your-username/procleaning-app.git
   cd procleaning-app

2. Install dependencies:

   npm install

3. Run the development server:

   npm run dev

4. Build for production:

   npm run build

5. Start the production server:

   npm run start

📂 Project Structure

├── app/                  # Next.js App Router (Pages & Layouts)
│   ├── about/            # About Us page
│   ├── blog/             # Blog page
│   ├── service/          # Services page
│   ├── quote/            # Quote request page
│   └── page.tsx          # Homepage
├── components/           # Reusable UI Components
│   ├── Navbar/           # Desktop & Mobile Navigation
│   ├── Banner.tsx        # Hero Section
│   ├── ServiceSlider.tsx # Interactive Services
│   ├── ExpertTeam.tsx    # Team Section
│   └── ...
├── constants/            # Image paths and static data
├── public/               # Static assets (images, icons)
└── styles/               # Global styles & Tailwind config

🎨 Design Philosophy

The project prioritizes Visual Excellence and User Experience.

• Gradients: Used to guide the user's eye toward key actions.
• Micro-interactions: Hover effects on buttons, images, and cards provide tactile feedback.
• Consistency: A unified color palette (#36b864 for primary actions) ensures brand recognition.

📄 License

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

---

Built with ❤️ by [shoriful-dev]