Client Website Guide

These docs explain the current A-Grade Services website prototype for clients, designers, agents, and developers.

The website is an early but substantial Next.js prototype. The base layout direction is already in place: a cinematic video hero, fixed navigation, scroll-linked nav behavior, overlay menu, project carousel, dark content pages, and a large footer.

What The Website Does

The site positions A-Grade Services as a premium remodeling and renewal company serving residential, commercial, and multi-family spaces.

The current public routes are:

• / - Homepage with video hero, project carousel, services, process, metrics, and contact CTA.
• /about - Company positioning, stats, story, values, and showcase imagery.
• /services - Service categories and process cards.
• /team - Placeholder team/personality page.
• /contact - Contact details and inquiry form layout.

Visitor Journey

The intended visitor flow is simple:

1. Feel the brand through the hero video and large headline.
2. See a sample of project imagery in the carousel.
3. Understand the core services.
4. Build trust through process language and metrics.
5. Move to the Contact page or footer CTA.

This is a good foundation for a high-touch service business. The next design pass should focus on credibility: real imagery, real contact details, real proof points, and a working inquiry flow.

Current Prototype Status

The desktop homepage direction is the most resolved part of the app. The visual language is bold, minimal, and memorable.

The main risks before launch are:

• Mobile navigation currently overflows.
• The contact form is presentational and does not submit.
• Several images are dynamic/fallback stock imagery and do not match the service promise.
• Team, metrics, phone, and social content appear placeholder.
• Footer and overlay social items need real destinations.

Documentation Map

Start here:

• Website Experience explains the site from the client and visitor perspective.
• UI Review records screenshot-backed design and UX findings.
• Recent Updates summarizes shipped infrastructure and platform changes.
• Developer holds advanced technical notes for review (collapsed in the sidebar).