Website Experience

The current website is a cinematic service-business prototype for A-Grade Services. It presents the company as a premium remodeling and renewal team for residential, commercial, and multi-family spaces.

This page describes how the site works from a client and visitor perspective. It is intentionally non-technical.

Global Experience

Every page shares the same fixed top navigation and full-height footer. The navigation has three states:

• Full desktop state: brand, route links, and an ellipsis menu button.
• Scrolled desktop state: the middle route links collapse away, leaving the brand and menu button.
• Overlay menu state: a dark full-screen menu with route links, contact lines, and social labels.

The visual direction is bold and minimal: dark surfaces, bright white typography, sharp rectangular nav pieces, large spacing, and restrained blue accent text. The site should continue to feel cinematic rather than corporate-template.

Homepage Flow

The homepage is the strongest current experience. It starts with a sticky full-screen video hero, then the content scrolls over that hero into a project carousel and supporting sections.

The visitor journey is:

1. Land on the video hero with the message "Redefining Modern Living Spaces."
2. Scroll into a large project carousel that previews finished spaces.
3. Review the three signature service categories.
4. See a short process section for consultation, build, and reveal.
5. Scan trust metrics.
6. Reach a large contact call-to-action and the global footer.

This gives the homepage a clear story: visual impact first, proof of work second, service fit third, and contact last.

Content Pages

The secondary routes all use the same dark editorial layout. That consistency helps the prototype feel coherent.

About

The About page explains positioning, stats, story, and values. Its copy says the company blends craftsmanship with modern technology and focuses on tile work, cabinet refacing, and deep cleaning.

What works:

• The page hierarchy is clear.
• The stats are easy to scan.
• The values section gives the brand a service philosophy.

What needs client input:

• The current images are dynamic/fallback imagery and may not match real A-Grade work.
• Stats such as "320+" and "92%" need confirmation before launch.
• The story should be replaced with actual company history when available.

Services

The Services page lists six service categories:

• Tile & Stone Installation
• Cabinet Refacing
• Surface Renewal
• Deep Cleaning
• Punch List Support
• Property Turnovers

The structure is strong for a service business because each item includes a short description plus three concrete highlights. The next content pass should tighten these categories against the services A-Grade actually wants to sell first.

Team

The Team page is a placeholder content pattern, not launch-ready team content. It shows names, roles, short bios, and work principles.

Keep the structure if A-Grade wants a people-forward site. Replace the names, roles, bios, and portrait imagery before showing this page to end clients.

Contact

The Contact page has a strong two-column desktop layout with contact details and a compact inquiry form. It currently communicates the intended conversion path well, but the form is only presentational in code.

Before launch, this page needs:

• Real email and phone details.
• A working form submission path.
• Required-field validation.
• Success and error states.
• Spam protection.
• Accessible labels, not placeholder-only labels.

Content Priorities

The next design/content pass should answer these questions first:

• Which service line should the homepage emphasize most?
• Are the homepage metrics real, estimated, or placeholders?
• Should the brand sound more luxury residential, more commercial property management, or both?
• Does A-Grade have real project photography that can replace stock and fallback imagery?
• Should the team page exist publicly during the first launch?
• What should the primary contact method be: phone, email, form, or all three?

Preserve

Preserve these parts of the prototype unless the design direction changes intentionally:

• Sticky video hero behavior.
• Scrolled nav collapse.
• Dark editorial secondary pages.
• Big type and restrained color.
• Project carousel as an early proof-of-work moment.
• Full-screen overlay menu concept.
• Large footer brand lockup.