Cleanpro Services Modern Cleaning Company Template

Basic Structure Overview

The template has several main sections:

• Header with navigation
• Hero section
• About Us
• Services
• Why Choose Us
• Pricing
• Testimonials
• Contact
• Footer

How to Edit Different Parts

1. Text Content

Replace any text by finding the corresponding HTML elements:

html

<!-- Example: Changing the company name -->

<a href="#home" class="text-3xl font-bold text-blue-600">

  Your<span class="text-emerald-500">Company</span>

</a>

<!-- Example: Changing the hero section -->

<h1 class="text-4xl md:text-6xl font-extrabold">

  Your New Headline Here

</h1>

<p class="text-lg md:text-xl mb-8">

  Your new description text

</p>

2. Contact Information

Update in the contact section:

html

<p><strong class="font-semibold">Phone:</strong> (555) 123-4567</p>

<p><strong class="font-semibold">Email:</strong> your@email.com</p>

<p><strong class="font-semibold">Address:</strong> Your Address Here</p>

3. Pricing

Modify pricing plans:

html

<div class="text-5xl font-extrabold text-blue-600 mb-6">

  $79<span class="text-xl text-gray-500">/visit</span>

</div>

4. Services

Update service descriptions:

html

<h3 class="text-2xl font-semibold text-gray-800 mb-4">Your Service Name</h3>

<p class="text-gray-600">Your service description here.</p>

5. Colors and Styling

The template uses Tailwind CSS classes. Key color classes:

• text-blue-600 - Primary blue
• text-emerald-500 - Accent green
• bg-blue-600 - Blue background
• bg-emerald-500 - Green background

To change colors, replace these classes throughout the file.

6. Images

Replace image sources:

html

<!-- Hero background -->

style="background-image: url('your-hero-image.jpg');"

<!-- About section -->

<img src="your-about-image.jpg" alt="About Your Company">

<!-- Testimonials -->

<img src="client-avatar.jpg" alt="Client Name">

Step-by-Step Editing Process

1. Company Information

• Change "CleanPro" to your company name
• Update contact details
• Modify the about us text

2. Services & Pricing

• Update service descriptions to match your offerings
• Adjust pricing to reflect your rates
• Modify service features in pricing cards

3. Testimonials

• Replace with your client testimonials
• Update client names and photos
• Modify review text

4. Styling Customization

• Change color scheme by replacing color classes
• Adjust fonts if needed
• Modify spacing and layout

Important Notes

1. Image Requirements:
   • Hero image: Large landscape (recommended: 1920x1080px)
   • About image: Square or portrait (recommended: 600x600px)
   • Testimonial avatars: Square (recommended: 200x200px)
2. File Structure:
   • Keep images in an images folder
   • CSS files should be in the same directory
3. Mobile Responsiveness:
   • The template is already mobile-responsive
   • Test on different screen sizes after making changes

Quick Customization Tips

• Use find/replace in your code editor to quickly change colors
• Start with the most important sections (contact info, services)
• Test each change in a browser
• Save a backup before making major changes