BrightNest Cleaning

5-Minute Setup

1. Extract brightnest-cleaning.zip and open index.html.
2. Replace the sample business name, phone, email, service areas, hours, and testimonials.
3. Review the eight generated photographs and replace them with your business imagery where appropriate.
4. Set a real inquiry email in assets/js/main.js, or connect a secure form handler for automatic delivery.
5. Review the policy wording and upload the folder contents to Hostinger.
6. Test the public site and verify that real inquiries reach you.

The form prepares an email draft only. It does not send messages, reserve dates, confirm bookings, or collect payment.

Package Contents

brightnest-cleaning/
├── index.html
├── README.html
├── LICENSES.txt
└── assets/
    ├── favicon.svg
    ├── css/style.css
    ├── js/main.js
    ├── vendor/bootstrap.min.css
    ├── vendor/bootstrap.bundle.min.js
    └── images/  (8 WebP photographs)

All customer-facing sections are in index.html. Privacy Policy and Terms open in modals. There are no separate service pages. README.html is self-contained buyer documentation and is not linked from the landing page.

Technology & Features

BrightNest uses HTML5, CSS3, vanilla JavaScript, and locally bundled Bootstrap 5.3.3. No build system, external font request, CDN, map API, analytics, or third-party embed is required.

• Responsive header and mobile menu.
• Six service cards and three cleaning packages.
• Service, package, property type, area, and frequency preselection.
• Package/service compatibility handling.
• Validated booking inquiry form with optional preferred date and time.
• Email-draft fallback with explicit unsent status.
• FAQs, policy modals, and a mobile call/booking bar.

Use a text editor such as VS Code. Open index.html directly or preview it through a local static web server. No installation is needed for the website.

1. Business Details

Edit index.html and search throughout the file to keep repeated information consistent.

The phone number is reserved fictional content. The example-domain email cannot receive real inquiries. No walk-in address is included.

<a href="tel:+16305550162">(630) 555-0162</a>

2. Brand, Colors & Typography

The wordmark uses inline SVG and text inside .brand. Edit both header and footer. The favicon is assets/favicon.svg.

Update these variables at the top of assets/css/style.css:

--navy: #173441;
--teal: #087f83;
--teal-dark: #06676b;
--aqua: #e5f3ef;
--cream: #f9faf6;
--yellow: #f6d975;
--muted: #52666b;
--line: #d8e3df;

Georgia/Times New Roman provide the heading font; Arial/Helvetica provide the body font. These are system font stacks, so no font files are needed. Edit h1,h2 and --bs-body-font-family to change typography.

Section spacing uses .section. Other useful selectors include .hero, .service-card, .package-card, and .booking-section. Check contrast and responsive layouts after edits.

3. Services & Packages

The six cards live in #services. Match their data-service attributes exactly to the option values in #service.

Package cards live in #packages. Edit descriptions and inclusion lists in index.html. Keep package names synchronized between cards, #package, and PACKAGE_SERVICES in main.js.

const PACKAGE_SERVICES = {
  'Everyday Fresh': 'Standard Home Cleaning',
  'Fresh Start': 'Deep Cleaning',
  'Moving Made Easier': 'Move-In / Move-Out Cleaning'
};

Choosing a package selects its matching service. Changing to an incompatible service clears the old package and announces why. Choosing Help Me Choose does not force a service.

The template shows personalized-quote wording rather than prices. Any real prices, inclusions, exclusions, and promises must be verified by the business.

4. Images & Replacement

All eight photographs are original generated illustrations, stored in assets/images/. They do not document actual employees or completed jobs.

Every supplied image is 1536 × 1024 px. Keep replacement images at least that size when practical and use genuine optimized WebP encoding. Preserve filenames for easy replacement, or update all references.

The hero is cropped into a tall arch; keep its important subject near the center. Package cards crop to wide rectangles. CSS uses object-fit: cover. Check desktop and mobile crops rather than relying only on original image proportions.

Update descriptive alt text and width/height attributes if dimensions change. The hero is eager-loaded with high priority; below-the-fold photos use lazy loading.

5. Navigation & Mobile Actions

Navigation links target #services, #packages, #process, #areas, #contact, and #booking. When renaming a section ID, update every matching anchor.

Bootstrap Collapse controls #mainNav. Navigation closes after a selection. Below 768 px, the fixed mobile action bar provides Call and Request a Booking. Body padding and safe-area insets keep it clear of the bottom content.

Sticky-header offsets use scroll-padding-top. Focus styles and reduced-motion support are included. All mobile phone actions use the same tel destination.

6. Inquiry Form & Validation

The form ID is bookingForm. Required fields are name, email, service, property type, city/ZIP, frequency, and cleaning details. Phone, package, property size, preferred date, and time are optional.

The date field’s minimum is set to the visitor’s local current date when the page loads. Past dates fail validation. No dates are checked against a scheduling service.

Validation uses browser validity checks, visible errors, and aria-invalid. An invalid submission focuses the first field needing attention. Avoid asking visitors for access codes or sensitive information.

A preferred date or time is only a request. The form does not reserve a slot, confirm availability, create a subscription, or collect payment.

7. Email Draft & Backend Connection

A valid form creates an encoded mailto link. The visitor must click Open Email Draft, open their email application, and send the message. The website never sends it automatically or stores it in browser storage.

const BUSINESS_EMAIL = 'hello@brightnestcleaning.example';
const BUSINESS_PHONE = '(630) 555-0162';

Replace these constants in assets/js/main.js. Update the visible contact and policy text in index.html too. Editing only the visible email link will not change the form recipient.

Mailto behavior depends on the visitor’s configured email application, and long drafts can be limited by email clients. Connect a production form handler for automatic delivery.

To connect a real backend, replace the existing submit handler with your secure endpoint integration. Validate on the server, apply appropriate spam controls, and show success only after confirmed acceptance. Handle failed requests without losing entries. Keep private keys on the server, never in this template’s JavaScript.

Update the form explanation and Privacy Policy to reflect actual handling, storage, and providers. Test receipt before launch. An accepted inquiry still does not confirm a booking unless your actual scheduling workflow does so.

8. Buttons & Preselection

Only supplied selections are changed. Unrelated name, contact, size, date, time, and detail entries are preserved. Package reconciliation can clear a package when it no longer matches the selected service.

Recurring buttons select Recurring Home Cleaning with Weekly, Every two weeks, or Every four weeks. The one-time button selects Standard Home Cleaning with One-time cleaning. Office cleaning selects Commercial and Small Office Cleaning.

Changing form data hides the previous draft link. Prepare the inquiry again to use the latest entries.

9. Reviews, FAQs & Policies

Replace the three sample testimonials with genuine, authorized feedback. Do not attribute the samples to review platforms.

FAQs use Bootstrap Accordion. New panels need unique IDs and matching button data-bs-target and aria-controls values. Keep answers consistent with your services and package inclusions.

Privacy Policy and Terms are in #privacyModal and #termsModal. The sample text describes the supplied static site and email-draft behavior. Review and replace it for your real business and processing practices.

Bootstrap handles modal focus containment, Escape, close buttons, and focus restoration to the opening button. Do not remove modal IDs or accessibility labels without updating their references.

10. Metadata & Search Setup

Edit the page title and meta description in the head of index.html. Keep business name, service coverage, phone, and hours consistent across the page.

The package includes basic title/description metadata, a theme color, and a favicon. It does not include a sitemap, robots.txt, canonical URL, Open Graph image, or JSON-LD. If adding these, use your verified production domain and real business information. Do not invent reviews or addresses.

README.html is marked noindex and is not linked from the customer site. You may keep it only in the buyer package rather than upload it publicly.

11. Hostinger Upload

1. Extract the ZIP.
2. Open Hostinger File Manager or connect through SFTP.
3. Upload the contents of brightnest-cleaning to public_html or your chosen subfolder.
4. Put index.html at the intended URL root and preserve the assets folder structure.
5. Visit the site over HTTPS and verify CSS, JavaScript, and images.
6. Test phone links, mobile menu, package selection, FAQs, policies, and your configured inquiry flow.

For /demos/landing-pages/brightnest-cleaning/, place index.html and assets directly inside that folder. Relative paths support subdirectory deployment. No Node.js server, build command, or package installation is required.

12. Responsive Design & Performance

Images use local optimized WebP, explicit dimensions, hero priority, and lazy loading below the fold. The site uses system fonts and local dependencies.

After customization, check 1440, 1024, 768, 390, and 375 px widths. Review heading wraps, package heights, image crops, form controls, navigation, modals, and the mobile bar. Also check keyboard operation and 200% zoom.

If updates appear stale on Hostinger, clear browser/hosting caches and verify the upload location. Add consistent version query strings to stylesheet and script references if needed.

13. Dependencies & Licenses

Bootstrap 5.3.3 CSS and JavaScript bundle are included in assets/vendor. The bundle includes Popper. Retain LICENSES.txt and the bundled license notices.

The logo, favicon, and service icons use local SVG. No third-party icon library or downloaded font files are required.

This guide does not grant template redistribution rights or create a support entitlement. Apply your actual product license and support arrangements separately. Review generated images for suitability before real business use.

14. Before-Launch Checklist

• Replace sample business details, contacts, hours, and coverage.
• Verify services, packages, exclusions, and any pricing claims.
• Replace sample testimonials with genuine authorized feedback.
• Review or replace generated photography and update alt text.
• Configure a real email destination or backend and verify receipt.
• Confirm that the inquiry flow does not misrepresent booking status.
• Review privacy, terms, and any actual cancellation arrangements.
• Test all preselection and package compatibility behavior.
• Check mobile navigation, accordions, policy modals, and telephone links.
• Check every local asset on the final Hostinger path.

15. Troubleshooting