Axis Commercial

1. Overview

Axis Commercial is a corporate Bootstrap 5 landing page for commercial construction businesses. It includes six services, four illustrative commercial projects, owner/developer and business/tenant panels, project-planning principles, eight Sacramento-area sample service cities, three sample testimonials, a four-step commercial project process, an estimate inquiry, thirteen FAQs, and policy dialogs.

The eight local WebP photographs are AI-generated illustrations. The contact details and testimonials are fictional demonstration content. Replace them with authentic business content before launch.

The form prepares an email draft for the visitor to send. It does not automatically deliver or store inquiries, calculate estimates, or book appointments.

2. Files and quick start

axis-commercial/
  index.html
  README.html
  LICENSES.txt
  assets/
    favicon.svg
    css/style.css
    js/main.js
    images/ (8 WebP photographs)
    icons/sprite.svg
    vendor/bootstrap/
      bootstrap.min.css
      bootstrap.bundle.min.js

Open index.html to preview. Keep all files and folders together. No build process, database, CDN, remote fonts, or package installation is required.

3. Edit your business content

In index.html, replace Axis Commercial, the sample phone (916) 555-0147, email projects@axis.example, hours, service cities, about copy, FAQs, and sample testimonials. Update phone text and every tel: link together. Update email text, mailto: links, and the recipient constant in assets/js/main.js together.

Search for each old value to catch header, contact section, footer, and no-JavaScript fallback. Adapt the sample privacy and terms dialogs to actual practices. No license credentials, awards, or completed-project claims are supplied.

4. Colors, typography, and spacing

Edit the variables at the beginning of assets/css/style.css. The Axis theme rules at the end of that file refine the layout; edit those rules when they override an earlier selector.

Headings and body text use Arial/Helvetica with system sans-serif fallbacks. No font downloads are required. Check default, hover, focus, and active button states when changing colors. Replace assets/favicon.svg to update the browser icon.

5. Photos and project showcase

All photographs are in assets/images as 1536 × 1024 WebPs. The hero uses hero.webp; project cards use office.webp, retail.webp, industrial.webp, and interior.webp. Supporting images are detail.webp, planning.webp, and team.webp.

Replace images with authorized photographs, preserve filenames or update the corresponding src paths, and write accurate alt text. The hero fills the viewport width using object-fit: cover, so its edges crop on narrow screens. Adjust .hero-image object-position in the desktop and mobile rules if the subject moves.

Project cards are illustrative concepts, not a record of completed commercial projects. Replace captions and labels together when adding genuine projects. The device showcase and marketplace hero capture are separate deliverables rather than template dependencies.

6. Services and inquiry preselection

Service buttons use data-service to select the matching form option. Current values are preconstruction, newbuild, interiors, renovation, coordination, phased, multiple, and other. If you rename a value, update every associated button and option.

Stakeholder panels use data-audience values Owner / Developer and Business / Tenant. The form also supports Design / Project Team and Other / Not Sure. City buttons use data-city and fill the city field. These actions preserve unrelated visitor inputs.

7. Estimate form and email draft

Required fields are name, email, service, stakeholder role, city, and project details. Phone, company, indicative budget range, approximate size, project stage, operational constraints, discussion date, and timing are optional. Dates earlier than the visitor’s local current date are rejected. A selected date is a request only.

1. The visitor completes the form and selects Prepare Estimate Inquiry.
2. The script validates fields and displays a reviewable draft.
3. Open Email App opens a mailto draft addressed to the configured recipient.
4. The visitor reviews and sends the message through their own email service.

Copy Draft uses the clipboard when available, with a text-selection fallback. Editing the form invalidates the previous draft. Reset clears the form and draft. No attachments are uploaded; visitors may attach files in their email app.

Change the recipient and subject in assets/js/main.js. Without JavaScript, use the provided phone or email links.

8. Automatic delivery and integrations

To receive submissions automatically, connect a backend or a form provider separately. Preserve field validation, provide a clear success or error message, and show success only after the service confirms receipt. Add server-side validation and suitable spam protection. Update the privacy wording to describe actual processing and storage. No CRM, scheduler, payment service, cost calculator, or file-upload service is included.

9. Navigation, FAQs, and accessibility

Bootstrap controls the mobile navigation, thirteen FAQ accordion items, and privacy/terms dialogs. Keep each control’s target, aria-controls, and element ID consistent. Keyboard focus outlines, a skip link, semantic headings, form labels, and reduced-motion styles are provided. Preserve those features during customization. The mobile quick-contact bar offers Call and Request an Estimate.

10. Responsive layout

Services adapt from one to three columns, commercial project cards from one to two columns, and the process from one to four columns as space permits. The menu collapses below the extra-large breakpoint. Check small phones, tablets, and desktops after edits, especially long business names, email addresses, and button labels.

11. Dependencies and notices

Bootstrap 5.3.8 and its bundled Popper are included locally. See LICENSES.txt and vendor headers for notices. Icons are local SVG artwork. Template usage and redistribution rights follow your applicable purchase terms; this documentation does not grant additional rights.

12. Launch checklist

1. Replace fictional business details and sample testimonials.
2. Confirm all services and scope statements describe your business.
3. Replace illustrative imagery before claiming genuine completed-project or team evidence.
4. Set the real email recipient, phone links, hours, and coverage.
5. Review privacy and terms wording.
6. Test service, role, and city buttons.
7. Test required fields, dates, draft editing, copy, reset, and actual email delivery.
8. Check mobile navigation, FAQs, keyboard focus, and dialogs.
9. Update page title, description, brand, and favicon.

13. Troubleshooting