deepdrft/product-notes/about-page.md

About Page — DeepDrft public site — Design Spec

Status: proposed (2026-06-17). Author: product-designer. Date: 2026-06-17. Implementer: staff-engineer (when approved). Surface: public site only (DeepDrftPublic / DeepDrftPublic.Client).

All body prose in this spec is DRAFT, fenced as [COPY — FOR APPROVAL]. Daniel curates the band's public voice himself. Section headers, eyebrows, and UI labels are proposed and may be set; any sentence or paragraph of site copy is a placeholder pending Daniel's own words. Do not ship the drafts as written without his pass.

Cross-references: Pages/Home.razor + Pages/Home.razor.css (the visual language this page mirrors — inspected, not invented), Controls/DeepDrftHero.razor (hero type treatment), DeepDrftShared.Client/Components/ParallaxImage.razor (the full-bleed image idiom), PLAN.md §12 (the concise phase entry). Plan only — no code edits made by this doc.

---

0. Goal and shape

A real About page with three movements — the People, the Process, the Product — with ethos / pathos / logos woven through the prose rather than bolted on as a labelled block. It reads as a continuous editorial scroll in the exact visual language of the Home page, not a new look.

The strategic intent (Daniel's framing, paraphrased): the site is presentation and proof of effort — evidence that real people in the Charleston scene are pushing classic club sounds forward. The About page is where that claim is made explicit. It is the page that earns the catalogue.

Route: /about. Linked from the main menu (DeepDrftMenu / Pages.cs nav index) and a natural target for the Home page's existing copy about the collective.

---

1. The look — mapped to the Home page (inspected, not invented)

The Home page (Pages/Home.razor) is built from a small, repeating set of section primitives. The About page reuses them verbatim so the two pages are visually continuous. Every class below is one the Home page already renders (scoped in Home.razor.css, mirrored in the global deepdrft-styles.css). No new visual vocabulary is proposed — the only genuinely new styling need is two member-bio cards (§4), and even those should be assembled from existing spacing/type tokens before any bespoke class is added.

The Home primitives, in the order they appear there, and how each maps onto About:

Home primitive	Classes	Role on Home	Reuse on About
Split hero (50/50 grid)	.hero, .hero-left, DeepDrftHero	Title + NowPlaying panel	The About hero — left column carries the eyebrow + title + standfirst; right column carries the duo hero portrait (see §3)
Full-bleed parallax band	<ParallaxImage FullWidth>	Duo photo under the hero	The duo shot or a hands-on-gear shot as the hero's full-width anchor
Section divider	.section-divider, .divider-line, .divider-tag	"The Sound" rule between movements	One divider per movement boundary — The People / The Process / The Product are the three .divider-tags
Two-column section	.section, .section-header-grid, .section-label, .section-title, .section-body	"Music through Every Medium" (label+title left, prose right)	The default body rhythm for each movement — label + serif title on the left (md=4), prose on the right (md=8)
Dark feature band	.section-dark, .section-label-dark, .section-title-dark, .features-grid, .feature-card	"Built for the Committed Listener"	The Process gear/method band — the dark ground suits the warehouse/rig material; the feature-card grid becomes the gear-stage cards (§5)
Split section	.section-split, .split-left, .split-right, .split-eyebrow, .split-title, .split-body	"Where the Holy City Meets the Future" (prose left, parallax portrait right)	The People origin/meeting story (prose + a portrait) and the Product "on the street, in the swamp" turn
CTA banner	.cta-banner, .cta-headline, .cta-sub, .cta-actions, .btn-white, .btn-outline-white	"Ready to Drift Deeper?"	Closing CTA into the catalogue / archive
Trailing parallax	<ParallaxImage> (mixer.jpg)	Closing image	A closing hands-on-gear band

Type and palette are inherited automatically — these classes already encode the Bodoni Moda / Cormorant / DM Sans stack and the light/dark palettes. <em> inside .section-title / .split-title / .cta-headline is the established italic-serif emphasis device (Home uses it on Every, Committed Listener, Meets the Future, Drift). The About titles should use the same device on one word per title, not more.

Hero title treatment. DeepDrftHero hard-codes "Deep / DRFT" — do not reuse the component verbatim for About (it carries the streaming CTA and the home masthead). Instead reuse its CSS classes (.hero-eyebrow, .hero-title, .hero-subtitle, .hero-desc) directly in the About hero markup so the type scale matches, with About's own words. (The @AnimClass fade-up-on-prerender trick in DeepDrftHero is worth copying for the eyebrow/title if Daniel wants the same entrance.)

---

2. Page structure and section order

The scroll, top to bottom. Movements are bounded by .section-divider tags so the three-movement structure is legible without a heading that says "Movement One."

┌─ HERO (split 50/50) ──────────────────────────────────────────┐
│  left:  eyebrow "Charleston, South Carolina"                   │
│         title  "Deep <em>DRFT</em>" or "Who We <em>Are</em>"   │
│         standfirst (the ethos line, condensed)                 │
│  right: DUO HERO PORTRAIT  [IMG SLOT A — likely hero]          │
├─ full-bleed parallax band  [IMG SLOT B — duo or gear] ─────────┤
│                                                                │
│  ── divider: "The People" ──                                  │
│  SECTION (two-col): label "The Collective" + title;           │
│         prose: how they met / shared synths / shared taste     │
│  MEMBER BIO PAIR (two cards):  [IMG SLOT C1 — Khabran]         │
│                                [IMG SLOT C2 — Daniel]          │
│         each: portrait + name + role line + bio (drop-in slot) │
│  SPLIT section (origin/meeting story + portrait) — optional    │
│                                                                │
│  ── divider: "The Process" ──                                 │
│  SECTION-DARK: label "How It's Made" + title;                  │
│         gear-stage cards (feature-grid):                       │
│           Sketch → Arrange → Studio → Live Rig                 │
│  full-bleed parallax band  [IMG SLOT D — hands on gear]        │
│                                                                │
│  ── divider: "The Product" ──                                 │
│  SECTION (two-col): label "The Output" + title;                │
│         prose: the catalogue as evidence                       │
│  MEDIUM TRIPTYCH (optional reuse of Home's medium-card grid):  │
│         CUTS / SESSIONS / MIXES — brief frame each              │
│  SPLIT section: "...on the street, in the swamp" — live        │
│         identity beyond the releases                           │
│                                                                │
│  CTA banner: into the archive / catalogue                      │
│  trailing parallax  [IMG SLOT E — gear/atmosphere]             │
└────────────────────────────────────────────────────────────────┘

Why this order. Ethos / pathos / logos are not three sections — they are three registers carried through the three movements:

• The People carries the pathos — heart and soul, the metalhead-at-heart, music for strife and celebration, two people who met over synthesizers.
• The Process carries the logos — the gear, the method, "science and math is just as important as beauty," the soul that is designed, not extracted. The dark band's analytical feel fits this register.
• The Product carries the ethos — the claim and the proof: classics with a twist, the catalogue as evidence, the collective's place in the Charleston scene, and the live identity ("on the street, in the swamp").

The triad is woven, not labelled. No section is titled "Our Ethos."

---

3. The hero

Mirror Home's .hero split.

• Left (md=6, .hero-left): eyebrow + title + standfirst, using the .hero-* classes.
  • Eyebrow: Charleston, South Carolina (matches Home's hero eyebrow — anchors place immediately).
  • Title: a one-or-two-word masthead with the <em> device. Candidate: "Who We Are" or simply "The Collective". (Header — proposed, not copy.)
  • Standfirst: the condensed ethos line — see [COPY A] below.
• Right (md=6): IMG SLOT A — the duo hero portrait. This is the likely hero image. A duo shot reads "two people, a collective" at first paint. Aspect: landscape or square works in the split column; if a strong landscape duo file exists, prefer it. (Home uses dd-duo-hero.jpeg / dd-duo-hero-bw.jpeg as a 2048×1365 landscape pair in the full-bleed band — About could either reuse that pair in the band and put a different duo shot in the hero column, or promote it.)

Below the hero, a full-bleed <ParallaxImage FullWidth> band (IMG SLOT B) exactly as Home does under its hero. The bw/colour hover-crossfade pair (Image1 + Image2) is the established idiom — supply both a bw and a colour file per slot where available (Home pairs dd-duo-hero-bw + dd-duo-hero).

[COPY A — FOR APPROVAL — standfirst] Two people, all the hats. We bring the heart and soul of Midwest deep club house to Charleston — informed by the founders of the style, and pushing it forward.

---

4. The People

Divider tag: The People.

Intro (two-column .section): .section-label "The Collective" + .section-title with the origin/meeting hook; prose in the right column about how they met (exchanging synthesizers, realising they made and enjoyed similar music) and that both members wear every hat — music, sound design, arranging, producing, mixing, field recording, visual design, custom sound tools.

[COPY B — FOR APPROVAL — People intro] We met trading synthesizers and found out we were chasing the same thing. Two of us, no fixed roles — we both write, arrange, produce, mix, record in the field, build the visuals, and make the tools when the tools don't exist yet.

4.1 Member bio pair

Two bio cards, side by side (MudGrid, xs=12 md=6). Each member's bio text is a drop-in slot — Daniel supplies the prose per member; the spec reserves the slot and the layout.

Per card:

• Portrait — IMG SLOT C1 (Khabran), IMG SLOT C2 (Daniel). Portrait orientation (the existing kp-shoulder-bw.jpeg is 1365×2048 portrait — that aspect is the precedent). Bw or colour; recommend bw to match the editorial restraint of the rest of the site, with an optional colour-on-hover via the parallax/crossfade idiom if these become ParallaxImages.
• Name — Khabran Peters, Daniel Harvey (display serif, e.g. .section-title scale stepped down, or a dedicated .bio-name token if needed).
• Role line — both are "everything," so the role line should state that rather than a single title. Candidate label: Production · Sound Design · Live (proposed UI label, not copy).
• Bio body — [BIO SLOT — Daniel supplies per member].

Khabran's bio is an OPEN TODO — Daniel will add it later (open question §8). Daniel's bio material exists in the interview transcript and is drafted below for approval; Khabran's card renders its slot empty / with a placeholder until his text arrives. Design the card so a missing bio degrades gracefully (portrait + name + role line still compose; the body block simply absent) — the same null-renders-nothing discipline ReleaseDescription uses.

[COPY C — FOR APPROVAL — Daniel bio, drafted from transcript; Khabran's TBD] Daniel started on drums at ten and found electronic music at seventeen — synthesizers first. A metalhead at heart, he spent ten years as a Detroit artist, shaped most of all by modern underground Detroit techno. He's also an engineer: custom plugins, hardware recording rigs, the tools behind the tracks. To him the science and the math matter as much as the beauty — tension and release, built deliberately.

4.2 Optional split — the meeting / origin

If the bio pair runs short, a .section-split (prose left, portrait right — IMG could reuse the duo shot or a second portrait) carries the meeting story and the pathos register: underground art by real people, for real people, for strife and celebration. Mark optional — fold into the intro prose if Daniel prefers a tighter People movement.

---

5. The Process

Divider tag: The Process.

Reuse Home's dark band (.section-dark). .section-label-dark "How It's Made" + .section-title-dark (e.g. Digital, Analog, Whatever Moves). The dark ground gives the gear/method material its own visual chapter and reads as the analytical (logos) register.

Gear-stage cards — reuse the .features-grid / .feature-card structure (Home uses four cards; About uses the same count). These are not "features we offer" but stages of the process, each with a hand-rolled SVG icon in the existing .feature-icon slot:

1. Sketch — start on the Akai Force or MPC Live 3.
2. Arrange — into Ableton, or the whole thing in REAPER (heavy REAPER users).
3. Studio — an arsenal of synths and pedals; digital and analog, hard and soft, some custom-made.
4. Live Rig — DAWless live synthesizer rigs, sometimes fully improvised. Built for the warehouse.

[COPY D — FOR APPROVAL — Process card bodies]

1. Sketch — A loop starts on the Force or the MPC. The idea comes first.
2. Arrange — Sometimes into Ableton, sometimes start-to-finish in REAPER. Whatever gets the take.
3. Studio — A wall of synths and pedals, digital and analog, some of it built by hand.
4. Live Rig — DAWless rigs for the room. Sometimes composed, sometimes pure improvisation. Think Octave One — big spread of gear, big tunes, meant for the warehouse.

[COPY D-intro — FOR APPROVAL — Process standfirst, optional] It doesn't matter how — digital or analog, hard or soft, bought or built — as long as it moves the room. The soul in this music is designed, not extracted; assembled, not distilled.

(The "designed, not extracted / assembled, not distilled / constructed, not grown" line is the sharpest statement of the logos register and the soul-is-engineered thesis. Recommend it land here, in the Process movement, rather than the hero — it's the why behind the method, and it pays off the dark band. Flag for Daniel: hero standfirst vs. Process — his call.)

Below the dark band: a full-bleed parallax (IMG SLOT D — hands-on-gear shot, the literal proof-of-effort image). Home's trailing mixer.jpg / mixer-bw.jpg pair is the precedent.

---

6. The Product

Divider tag: The Product.

Two-column .section: .section-label "The Output" + .section-title (e.g. Classics, with a Twist); prose framing the catalogue as the evidence — what the site is for.

[COPY E — FOR APPROVAL — Product intro] Everything ends up here, in the catalogue. We play the classics, with a twist — proof that someone in Charleston is still pushing the club sound forward.

6.1 Medium triptych — should CUTS / SESSIONS / MIXES be explained here?

Open question (§8), recommendation below. The three mediums already exist app-wide and the Home page already carries a medium triptych (.medium-grid / .medium-card, the Studio / Live / DJ Mix cards). Two shapes:

• (i) Reuse the .medium-card grid with a one-line frame of each medium (CUTS = composed studio work; SESSIONS = live, unrepeatable; MIXES = uninterrupted DJ sets), each linking to /cuts, /sessions, /mixes. Pro: ties the About narrative directly to the catalogue; reuses an existing component; gives the Product movement a concrete payoff. Con: partial duplication of the Home page's medium section.
• (ii) Prose-only mention, no cards — name the three mediums in a sentence and let the catalogue/ nav do the explaining. Pro: avoids duplicating the Home triptych. Con: the About page is the natural place a newcomer learns what a "Session" is vs. a "Mix."

Recommend (i) with a lighter touch than Home — the About page is exactly where the taxonomy should be explained for someone reading top-to-bottom, and the medium cards are the established device for it. Keep the copy to one line per medium (a frame, not a re-pitch) so it reads as definition, not a second sales section. If Daniel finds it too repetitive next to Home, fall back to (ii).

[COPY F — FOR APPROVAL — medium one-liners, if cards used]

• CUTS — studio work, composed and finished.
• SESSIONS — live, caught once, never the same twice.
• MIXES — uninterrupted sets, start to finish.

6.2 The live turn — "on the street, in the swamp"

Close the Product movement with a .section-split (or a second short band) carrying the live/public identity — the part of the collective that isn't a release at all.

[COPY G — FOR APPROVAL — live identity] But that's just the releases. We're also out there — on the street, in the swamp, with a PA, a generator, and a bunch of good vibes.

---

7. Closing CTA

Reuse Home's .cta-banner. Headline with the <em> device; one primary + one ghost action.

• Primary (.btn-white): Explore the Archive → /archive.
• Secondary (.btn-outline-white): Hear a Cut / Start Streaming — reuse StreamNowButton's behaviour if a streaming CTA is wanted, or link to /cuts. (Home's CTA pairs "Explore the Archive"
  • a live-schedule button; About should point inward to the catalogue, the thing it just argued for.)

[COPY H — FOR APPROVAL — CTA] Headline: "Hear the Proof" / sub: "The catalogue is the evidence. Start listening."

Trailing full-bleed parallax (IMG SLOT E) to close, matching Home's structure.

---

8. Image slots — summary table

5 slots specced; 4–5 photos expected. Daniel is still sorting final files — treat every slot as a TODO; do not block on them. Each slot degrades to the existing fallback treatment (or a bw placeholder) until a file lands.

Slot	Section	Role	Orientation / aspect	bw+colour pair?	Likely file
A	Hero right column	Likely HERO — duo shot, "two people" at first paint	Landscape or square (fits md=6)	Optional (hover crossfade)	a duo shot; could promote dd-duo-2.jpeg
B	Full-bleed band under hero	Atmosphere / duo anchor	Landscape ~2048×1365 (Home precedent)	Yes (Home pairs bw+colour)	dd-duo-hero pair (or a new duo/gear shot)
C1	People — bio card	Khabran portrait	Portrait ~1365×2048	Optional	Khabran portrait (TODO)
C2	People — bio card	Daniel portrait	Portrait ~1365×2048	Optional	Daniel portrait (TODO)
D	Process — band under dark section	Hands-on-gear (proof of effort)	Landscape	Yes	a gear shot (or reuse mixer pair)
E	Closing trailing band	Atmosphere close	Landscape	Yes	gear/atmosphere

If only 4 files arrive, the two safe drops are slot B (the hero column A already carries a duo shot) and slot E (the closing band is decorative). The two bio portraits (C1/C2) and one gear shot (D) are the load-bearing four.

Image hosting — OPEN QUESTION for implementation

Where do these images physically live, and by what path are they served? Two precedents exist in the repo and they differ:

• Static wwwroot/img/ — every Home page image (dd-duo-hero.jpeg, mixer.jpg, etc.) is a committed static asset under DeepDrftPublic/wwwroot/img/, referenced as img/.... Simplest; these are brand/marketing assets, not catalogue content. This is the likely right home for the About images by direct analogy to Home.
• Image vault / streaming endpoint — release cover art and session hero images go through the FileDatabase Image vault and the unauthenticated image-streaming endpoint. That machinery is for content (covers, hero images tied to releases), not chrome. The About portraits are chrome.

Recommendation (flag, do not resolve): put the About images in wwwroot/img/ alongside the Home assets — they are marketing chrome with the exact lifecycle of the existing Home photos. Only reach for the vault if Daniel wants these editable from the CMS, which the brief gives no signal of. This is staff-engineer's call at implementation; named here so it isn't discovered mid-build.

---

9. Open questions (for Daniel)

1. Khabran's bio. Not yet supplied — the card renders its body slot empty/placeholder until it arrives. Daniel's bio is drafted from the transcript ([COPY C]); both are his to finalise.
2. Final photos. 4–5 files still being sorted; every image slot is a TODO. Spec is laid out so placement is ready when files arrive (§8).
3. Image hosting path. wwwroot/img/ (recommended, Home-analogous) vs. the image vault. Flagged for staff-engineer; recommendation in §8.
4. CUTS / SESSIONS / MIXES — explained on About? Recommend yes, via a one-line-per-medium reuse of the .medium-card grid (§6.1); fall back to prose-only if it reads as duplicate of Home.
5. Where does the "designed, not extracted" thesis land — hero standfirst or the Process movement? Recommend Process (§5).
6. Hero title wording — "Who We Are" vs. "The Collective" vs. a Deep/DRFT masthead echo. Header is proposed; Daniel's call.
7. All [COPY …] blocks are drafts pending Daniel's voice. None ship as written without his pass.

---

10. Implementation notes (for staff-engineer, when approved)

• No new visual language. Assemble from the Home primitives in §1. The only candidate new classes are the two bio-card pieces (.bio-name, .bio-role, .bio-body or similar) — and even those should first be tried with existing type tokens before adding scoped CSS to a new About.razor.css.
• Hero: reuse the .hero-* classes directly (About's own words), not the DeepDrftHero component (it hard-codes the masthead + streaming CTA).
• Page-scoped CSS: follow Home's pattern — About.razor.css scoped, mirrored into the global deepdrft-styles.css only for anything that must reach beyond the component (Home does this for the section primitives; the About page should consume those, not re-declare them).
• ParallaxImage: supply NaturalWidth/NaturalHeight for every above-the-fold band to avoid the documented layout shift (component remarks); pass the bw+colour Image1/Image2 pair where files allow.
• Nav: register /about in Pages.cs (the centralised nav index) so it appears in DeepDrftMenu.
• Null-safe images/bios: every image slot and Khabran's bio must degrade gracefully (fallback or absent block) — the page must compose correctly before any final file or Khabran's text lands.
• Out of scope: no source/Razor written by this spec; this is design only.