# Comprehensive Rebuild Prompt for KM Concept & Build Website

**Context & Role:**You are an elite Frontend Web Developer & UI/UX Designer specializing in high-end, cinematic, and architectural web experiences. Your task is to rebuild the "KM Concept & Build" landing page verbatim from the modular specifications below.
**Stack:** Vanilla HTML5, CSS3, JavaScript (ES6). No frameworks (no React/Vue/Tailwind).
---
## 1. Global Assets & Variables
**Typography:**- Headers (Uppercase, bold): `font-family: 'Roboto Slab', serif;` (Weights: 400, 700, 900)- Body: `font-family: 'Inter', sans-serif;` (Weights: 300, 400, 500, 600)- Embed these via Google Fonts in the `<head>`.
**CSS Variables (Strict Light Mode Palette):**```css:root { --deep-forest: #2D4033; --terracotta: #B67B5F; --slate-charcoal: #3C3F42; --warm-bone: #F2F2F0; --natural-linen: #D1C9BC; --bg-dark: #F7F7F6; /* Bright, warm off-white background / --card-bg: #FFFFFF; / Pure white cards / --text-main: #2D4033; / Deep Forest text instead of black / --text-muted: #5e6b63; / Muted dark green/grey body text / --border-color: rgba(45, 64, 51, 0.15); / Deep forest border /}```
*CDNs to include in `<head>` (via jsdelivr):**- GSAP Core (`v3.12.5`)- GSAP ScrollTrigger (`v3.12.5`)- Studio Freight Lenis Smooth Scroll (`@1.0.42`)
---
## 2. Design System & Aesthetics- Vibe: "Grounded Assurance" - Raw, architectural, seasoned, bright but heavy.- Backgrounds: `body` background is `var(--bg-dark)`.- Buttons (`.btn-primary`): Transparent bg, terracotta border and text, sharp 0px radius. Hover: Terracotta bg, white text, subtle terracotta box-shadow.- Section Titles: 3rem size, color `--text-main`, bottom border of `2px solid var(--deep-forest)`. If `.text-center`, remove bottom border and insert an `::after` pseudo-element (60px width, 4px height, terracotta background) centered below.
---
## 3. Section-by-Section HTML/CSS Architecture
### A. Dynamic Header Navigation- Structure: `<header class="site-header">` -> `.logo`, `.desktop-nav`, `.header-cta`.- Styling: Fixed top, transparent padding. - Logo: "KM CONCEPT & BUILD" (Roboto Slab, 900 weight, force color `#F2F2F0`).- Nav Links: Anchor links with `::after` terracotta underline that scales from `width: 0%` to `100%` on hover. Force color `#F2F2F0`.- Scroll State: Via JS, when scroll > 50px, add `.scrolled` class (changes bg to `rgba(45, 64, 51, 0.95)`, adds 10px backdrop-blur, and reduces padding).
### B. Cinematic Pinned Hero- Structure: `.hero-section` (100vh height, flex center, `overflow: hidden`).- Video Background: Absolute `<video autoplay muted loop playsinline>` video URL : "https://assets.cdn.filesafe.space/o20mWy976FeCjNTilj0j/media/69d9e471d7871cddf737384a.mp4"
- Overlay: Absolute overlay using `linear-gradient(rgba(27, 30, 27, 0.4), rgba(45, 64, 51, 0.8))`.- Content: Headline "GROUNDED ASSURANCE" (Drop shadow `0 4px 24px rgba(0,0,0,0.5)`, color `--warm-bone`). Subtitle below it in `--natural-linen`.- Circular Badge: Positioned absolute bottom-right. Contains `.circular-text` (spans injected via JS reading "TRUSTED VETERAN • EXPERT WORKMANSHIP •") rotating infinitely over 15s. Center of the badge has a standard SVG Plus/Crosshair icon.
### C. Kinetic Marquee- Container: `.marquee-section` with `--terracotta` background.- Track/Content: Flex row, `white-space: nowrap`. Spans reading "FULL-SCALE BUILDS •", "TECHNICAL WET WORKS •", "EXTENSIONS •", "20 YEARS MASTERY •". Color `#1b1e1b`, Roboto Slab 900.
### D. Cinematic About (Text Mask Reveal)- Concept: Pin the section, draw the text's fill upward based on scroll.- Layout: Min-height 100vh. A sticky wrapper containing: 1. `.mask-video`: background image `concrete.png`, `opacity: 0.8`. 2. `.mask-overlay`: A solid `--bg-dark` absolute layer covering the image. Inside is `.mask-text` ("RAW<br>GRIT") that uses `-webkit-text-stroke: 2px var(--terracotta)` and `color: transparent`. 3. `.mask-reveal`: Same layout as `.mask-text` but the text is filled with `concrete.png` using `background-clip: text` and `color: transparent`. It starts fully hidden via `clip-path: inset(100% 0 0 0)`. 4. `.mask-subtext`: Paragraph positioned at `bottom: 20%`. Starts `opacity: 0`.
### E. Journey Timeline (SVG Scroll Draw)- Container: 100vh flex column. Contains `.draw-container` (max-width 600px).- SVG Anchor Line: A `<svg viewBox="0 0 400 500">` containing a central vertical line `<path>` and 5 `<circle>` elements spaced evenly.- Milestone Cards: 5 `.milestone` divs positioned absolutely with inline CSS top percentages (`4%`, `27%`, `50%`, `73%`, `96%`). Odd elements aligned left, evens aligned right. White card backgrounds with subtle box shadows. Starts `opacity: 0`.
### F. Core Benefits (Bento Grid)- Grid: 2-column layout. - Cards: White bg, `--border-color` border. Add a 4px wide terracotta `::before` pseudo-element on the left edge that scales from `Y(0)` to `Y(1)` on hover.- Layout Note: Feature one `.card-large` spanning 2 rows (`grid-row: span 2;`) containing an image with `filter: grayscale(40%)`.
### G. Services Flex Accordion- Container: `.accordion` setting `display: flex; height: 70vh;`- Panels: 4 `.accordion-panel` items. Default `flex: 1`. On hover or `.active`, transitions to `flex: 5`. Overflows hidden, `border-radius: 8px`.- Panel Elements: - Absolute background image wrapper (zooms slightly on active). - Dark gradient overlay. - `.panel-title` rotated vertically (`writing-mode: vertical-rl`) when collapsed, hidden when active. - `.panel-content` anchored bottom-left. Elements inside (Num, H3, Desc) fade and translate up on hover/active.
### H. Testimonials & FAQ- Testimonials: 2-column grid. Cards mirror the bento-grid hover interaction (left terracotta line). Inject a massive `opacity: 0.4` standalone `"` quote mark using Roboto Slab font.- FAQ: Standard list of `.accordion-item` rows with bottom borders. The `.accordion-header` contains an h4 and a `+` icon. `.accordion-content` height animated via GSAP.
### I. Footer / CTA- CTA Wrapper: Centered flex column with blue-print/linear-gradient overlay texture. "READY TO BUILD A SOLID FOUNDATION?". Button.- Footer: Deep background grid. Brand logo, Navigation links, Contact links.
---
## 4. JavaScript Logic Requirements (ES6)
Create `app.js` and execute on DOMContentLoaded:
1. Lenis Setup: - Instantiate with `duration: 1.2`, vertical easing. Link to ScrollTrigger via `lenis.on('scroll', ScrollTrigger.update)` and `gsap.ticker.add((time) => lenis.raf(time 1000))`. Disable `lagSmoothing`.2. *Header Scroll Toggle:** Standard `window.scrollY > 50` check to toggle `.scrolled` class.3. Circular Badge: Inject span tags into `.circular-text` for the string "TRUSTED VETERAN • EXPERT WORKMANSHIP •". Set their inline rotation mathematically `(i (360/length))`.4. *Pinned Hero & Parallax Content:** - ScrollTrigger `.hero-video` with `pin: true` for `end: "+=50%", scrub: true`. - GSAP tween `.hero-content` `y: -150`, `opacity: 0`, tied to the same hero scroll bounds.5. Kinetic Marquee Loop: - Duplicate track content twice. Define a `requestAnimationFrame` pushing `xPercent` from 0 to -33.33. - Tie a `lenis.on` event listener to inject scroll velocity into the baseline speed multiplier.6. Cinematic Text Mask Reveal: - ScrollTrigger timeline pinning `.mask-section` for `+=1000px`. - `maskTl.to('.mask-reveal', { clipPath: 'inset(0% 0 0 0)' })` to reveal text fill. - Fade up `.mask-subtext` smoothly afterwards.7. SVG Path Draw Timeline: - Read SVG `getTotalLength()`, set `strokeDasharray` and `offset`. - Pin `.draw-section` for `+=1500px`. Tween `strokeDashoffset` down to 0. - Fade in the exactly timed milestone cards at position offsets (e.g. `0.04`, `0.27`, etc.) inside the GSAP timeline.8. Services Accordion Slider: Iterate nodes and apply `.active` class via standard click listener (resetting siblings).9. FAQ GSAP Accordion: Add click listeners to headers. If opening, transition height to `"auto"` (via GSAP). Find active siblings and tween their height to `0`. 10. Global Refresh: Call `ScrollTrigger.refresh()` on `window.load` to guarantee geometry calculations are accurate after images populate.
**IMPORTANT OUTPUT REQUIREMENT:**Respond ONLY with the complete, functional, ready-to-run code blocks (`index.html`, `style.css`, `app.js`). Do not invent unrequested animations or deviate. Remain strictly locked into the architectural, raw "master builder" aesthetic requested.

UNLOCK YOU DESIGN

Powered by AI.

Atheras

Machinary

KM Builder

AirdroidTech

PCgroup Home Page