feat: Added hero tagline "Production Knowledge, Distilled", value propo…
- "frontend/src/pages/Home.tsx" - "frontend/src/App.css" GSD-Task: S01/T01
This commit is contained in:
jlightner
parent
3a5e18691b
commit
07baa5aca1
10 changed files with 5813 additions and 3 deletions
|
|
@ -1,6 +1,46 @@
|
|||
# S01: Homepage Hero & Value Proposition
|
||||
|
||||
**Goal:** First-time visitors understand what Chrysopedia is and how to start within 10 seconds
|
||||
**Goal:** Homepage shows tagline, value description, how-it-works steps, Start Exploring CTA, and popular topic quick-links above the fold
|
||||
**Demo:** After this: Homepage shows tagline, value description, how-it-works steps, Start Exploring CTA, and popular topic quick-links above the fold
|
||||
|
||||
## Tasks
|
||||
- [x] **T01: Added hero tagline "Production Knowledge, Distilled", value proposition, 3-step how-it-works grid, and "Start Exploring" CTA to homepage** — The Home.tsx hero section currently has an empty <h1> and a subtitle. This task adds the tagline text, a value proposition paragraph, a 3-step how-it-works visual, and a Start Exploring CTA button — all static content with CSS styling using existing design tokens.
|
||||
|
||||
Steps:
|
||||
1. Read `frontend/src/pages/Home.tsx` and `frontend/src/App.css` (home-hero section starting ~line 866)
|
||||
2. In Home.tsx, add text content to the existing empty `<h1 className="home-hero__title">` — set it to "Production Knowledge, Distilled" (or similar compelling tagline)
|
||||
3. Add a new `<p className="home-hero__value-prop">` below the subtitle explaining what Chrysopedia does — e.g. "Real music production techniques extracted from creator tutorials. Skip the 4-hour videos — find the insight you need in seconds."
|
||||
4. Add a `<div className="home-how-it-works">` section with 3 steps: (1) Real creators share techniques (2) AI extracts key moments (3) You find answers fast. Each step gets an icon/number, title, and short description.
|
||||
5. Add a `<Link to="/topics" className="btn home-cta">Start Exploring</Link>` CTA button positioned prominently after the how-it-works section but before the search bar
|
||||
6. In App.css, add styles for `.home-hero__value-prop`, `.home-how-it-works`, `.home-how-it-works__step`, `.home-cta`. Use existing CSS custom properties (--color-text-secondary, --color-accent, --color-bg-surface, etc.)
|
||||
7. Increase `.home-hero` top padding to give breathing room for the new content
|
||||
8. Add mobile responsive rules at the existing breakpoint (~768px) — steps should stack vertically on mobile
|
||||
9. Run `cd frontend && npm run build` to verify zero errors
|
||||
|
||||
Constraints:
|
||||
- Keep search bar prominent — new content supports but doesn't bury it
|
||||
- Use only existing CSS custom properties from :root, no new color definitions
|
||||
- The how-it-works section can be just below the fold on desktop; hero title + search should be visible without scrolling
|
||||
- Estimate: 30m
|
||||
- Files: frontend/src/pages/Home.tsx, frontend/src/App.css
|
||||
- Verify: cd frontend && npm run build 2>&1 | tail -5
|
||||
- [ ] **T02: Add popular topic quick-links fetched from topics API** — Add a popular topics section to the homepage that fetches topic data from the existing fetchTopics API, sorts sub-topics by technique_count, and renders the top 8-10 as clickable pill/chip links. Each pill navigates to the search page scoped to that topic.
|
||||
|
||||
Steps:
|
||||
1. Read current `frontend/src/pages/Home.tsx` (will include T01 changes) and `frontend/src/api/public-client.ts` (for TopicCategory/TopicSubTopic interfaces and fetchTopics function)
|
||||
2. In Home.tsx, import `fetchTopics` and `TopicCategory` from public-client.ts
|
||||
3. Add state: `const [popularTopics, setPopularTopics] = useState<{name: string; count: number}[]>([])`
|
||||
4. Add useEffect that calls fetchTopics(), flattens all sub_topics across categories, sorts by technique_count descending, takes top 8, maps to {name, count}
|
||||
5. Render a `<section className="home-popular-topics">` between the CTA and the search bar (or between search bar and nav-cards). Show heading "Popular Topics" and render each topic as `<Link to={`/search?q=${encodeURIComponent(topic.name)}&scope=topics`} className="pill pill--topic-quick">{topic.name}</Link>`
|
||||
6. If popularTopics is empty (no data or API error), render nothing — no section, no error message
|
||||
7. In App.css, add styles for `.home-popular-topics` (centered, flex-wrap gap layout) and `.pill--topic-quick` (reuse existing pill styling with minor adjustments for interactive hover state using --color-accent)
|
||||
8. Add mobile responsive adjustments if needed
|
||||
9. Run `cd frontend && npm run build` to verify zero errors
|
||||
|
||||
Constraints:
|
||||
- Catch fetchTopics errors silently — no user-facing error for this optional section
|
||||
- Reuse existing pill/badge CSS patterns (`.pill--tag` exists already)
|
||||
- Topic pills should visually complement but not compete with the search bar
|
||||
- Estimate: 25m
|
||||
- Files: frontend/src/pages/Home.tsx, frontend/src/App.css
|
||||
- Verify: cd frontend && npm run build 2>&1 | tail -5
|
||||
|
|
|
|||
77
.gsd/milestones/M009/slices/S01/S01-RESEARCH.md
Normal file
77
.gsd/milestones/M009/slices/S01/S01-RESEARCH.md
Normal file
|
|
@ -0,0 +1,77 @@
|
|||
# S01 Research — Homepage Hero & Value Proposition
|
||||
|
||||
## Summary
|
||||
|
||||
Straightforward frontend slice. The existing `Home.tsx` already has a hero section with search bar, nav cards (Topics/Creators), and a Recently Added section. The work is adding content above and around the search bar: a tagline, value proposition text, how-it-works steps, a "Start Exploring" CTA, and popular topic quick-links. All needed APIs already exist (`fetchTopics` returns categories with sub-topic technique counts). The CSS custom property system (77 tokens in `:root`) is well-established.
|
||||
|
||||
No new backend work. No new dependencies. No risky integration.
|
||||
|
||||
## Recommendation
|
||||
|
||||
Single file change (`Home.tsx`) plus CSS additions in `App.css`. Can be done in 1-2 tasks.
|
||||
|
||||
## Implementation Landscape
|
||||
|
||||
### Current State
|
||||
|
||||
**`frontend/src/pages/Home.tsx`** (236 lines):
|
||||
- `home-hero` section: empty `<h1>` (no tagline text), subtitle "Search techniques, key moments, and creators", search bar with typeahead
|
||||
- `nav-cards` section: Topics and Creators link cards
|
||||
- `recent-section`: Recently Added technique cards
|
||||
- Imports: `searchApi`, `fetchTechniques`, `SearchResultItem`, `TechniqueListItem` from `public-client.ts`
|
||||
|
||||
**`frontend/src/App.css`** (~3200 lines):
|
||||
- `.home-hero` starts at line 866: centered, minimal padding (0.5rem top)
|
||||
- `.home-hero__title`: 2.25rem / 800 weight — exists but the JSX `<h1>` has no text content
|
||||
- `.nav-cards` at line 1020: 2-column grid
|
||||
- `.recent-section` at line 1060
|
||||
- Mobile breakpoint adjusts `.home-hero__title` size at ~line 2078
|
||||
|
||||
**`frontend/src/api/public-client.ts`**:
|
||||
- `fetchTopics(): Promise<TopicCategory[]>` — returns `{ name, description, sub_topics: [{ name, technique_count, creator_count }] }[]`
|
||||
- Already used by `TopicsBrowse.tsx`, proven API
|
||||
|
||||
### What to Build
|
||||
|
||||
1. **Tagline** — Set the `<h1>` text to a value proposition headline (e.g., "Production Knowledge, Distilled")
|
||||
2. **Value description** — 1-2 sentence paragraph below subtitle explaining what Chrysopedia does
|
||||
3. **How-it-works steps** — 3-step visual (e.g., "Real creators share → AI extracts key moments → You find answers fast")
|
||||
4. **Start Exploring CTA** — Button linking to `/topics` or scrolling to search, positioned prominently
|
||||
5. **Popular topic quick-links** — Fetch top N sub-topics by `technique_count` from `fetchTopics()`, render as pill/chip links that navigate to search with scope
|
||||
|
||||
### File Changes
|
||||
|
||||
| File | Change |
|
||||
|------|--------|
|
||||
| `frontend/src/pages/Home.tsx` | Add tagline h1 text, value prop paragraph, how-it-works section, CTA button, popular topics section (new `useEffect` to call `fetchTopics`, sort sub-topics by count, take top 8-10) |
|
||||
| `frontend/src/App.css` | Add styles for `.home-value-prop`, `.home-how-it-works`, `.home-how-it-works__step`, `.home-cta`, `.home-topics-quick` and pill styles. Adjust `.home-hero` padding for more vertical breathing room. Mobile responsive rules. |
|
||||
|
||||
### Natural Task Seams
|
||||
|
||||
This could be 1 task (it's all one page) or split into 2:
|
||||
- **T01**: Hero content (tagline, value prop, how-it-works, CTA) — pure static content + CSS, no API calls
|
||||
- **T02**: Popular topic quick-links — requires `fetchTopics` call, data transform, rendering pills that link to `/search?q=<topic>&scope=topics`
|
||||
|
||||
Splitting is marginally useful for parallel execution but the dependency is trivial. A single task is also reasonable.
|
||||
|
||||
### Design Tokens Available
|
||||
|
||||
The `:root` block has all needed tokens:
|
||||
- `--color-bg-page`, `--color-bg-surface`, `--color-bg-surface-hover` for section backgrounds
|
||||
- `--color-text-primary`, `--color-text-secondary`, `--color-text-muted` for text hierarchy
|
||||
- `--color-accent`, `--color-accent-hover` (cyan) for CTA button
|
||||
- `--color-border` for step dividers
|
||||
- Badge/pill styles already exist (`.badge`, `.pill--tag`) — reuse for topic quick-links
|
||||
|
||||
### Verification
|
||||
|
||||
- `cd frontend && npm run build` — zero TypeScript errors, zero warnings
|
||||
- Visual: browser check at `http://ub01:8096` — hero shows tagline, value prop, steps, CTA, and topic pills above the search bar
|
||||
- Topic pills link correctly to `/search?q=<topic>&scope=topics`
|
||||
- Mobile responsive: content stacks vertically, readable at 375px width
|
||||
|
||||
### Constraints
|
||||
|
||||
- Keep search bar prominent — new content supports but doesn't bury the search experience
|
||||
- "Above the fold" is relative; on desktop the hero + search + CTA should be visible without scrolling, how-it-works can be just below
|
||||
- Topic quick-links depend on having topics data in the DB; render nothing gracefully if empty
|
||||
39
.gsd/milestones/M009/slices/S01/tasks/T01-PLAN.md
Normal file
39
.gsd/milestones/M009/slices/S01/tasks/T01-PLAN.md
Normal file
|
|
@ -0,0 +1,39 @@
|
|||
---
|
||||
estimated_steps: 15
|
||||
estimated_files: 2
|
||||
skills_used: []
|
||||
---
|
||||
|
||||
# T01: Add hero tagline, value proposition, how-it-works steps, and CTA to Home.tsx
|
||||
|
||||
The Home.tsx hero section currently has an empty <h1> and a subtitle. This task adds the tagline text, a value proposition paragraph, a 3-step how-it-works visual, and a Start Exploring CTA button — all static content with CSS styling using existing design tokens.
|
||||
|
||||
Steps:
|
||||
1. Read `frontend/src/pages/Home.tsx` and `frontend/src/App.css` (home-hero section starting ~line 866)
|
||||
2. In Home.tsx, add text content to the existing empty `<h1 className="home-hero__title">` — set it to "Production Knowledge, Distilled" (or similar compelling tagline)
|
||||
3. Add a new `<p className="home-hero__value-prop">` below the subtitle explaining what Chrysopedia does — e.g. "Real music production techniques extracted from creator tutorials. Skip the 4-hour videos — find the insight you need in seconds."
|
||||
4. Add a `<div className="home-how-it-works">` section with 3 steps: (1) Real creators share techniques (2) AI extracts key moments (3) You find answers fast. Each step gets an icon/number, title, and short description.
|
||||
5. Add a `<Link to="/topics" className="btn home-cta">Start Exploring</Link>` CTA button positioned prominently after the how-it-works section but before the search bar
|
||||
6. In App.css, add styles for `.home-hero__value-prop`, `.home-how-it-works`, `.home-how-it-works__step`, `.home-cta`. Use existing CSS custom properties (--color-text-secondary, --color-accent, --color-bg-surface, etc.)
|
||||
7. Increase `.home-hero` top padding to give breathing room for the new content
|
||||
8. Add mobile responsive rules at the existing breakpoint (~768px) — steps should stack vertically on mobile
|
||||
9. Run `cd frontend && npm run build` to verify zero errors
|
||||
|
||||
Constraints:
|
||||
- Keep search bar prominent — new content supports but doesn't bury it
|
||||
- Use only existing CSS custom properties from :root, no new color definitions
|
||||
- The how-it-works section can be just below the fold on desktop; hero title + search should be visible without scrolling
|
||||
|
||||
## Inputs
|
||||
|
||||
- `frontend/src/pages/Home.tsx`
|
||||
- `frontend/src/App.css`
|
||||
|
||||
## Expected Output
|
||||
|
||||
- `frontend/src/pages/Home.tsx`
|
||||
- `frontend/src/App.css`
|
||||
|
||||
## Verification
|
||||
|
||||
cd frontend && npm run build 2>&1 | tail -5
|
||||
76
.gsd/milestones/M009/slices/S01/tasks/T01-SUMMARY.md
Normal file
76
.gsd/milestones/M009/slices/S01/tasks/T01-SUMMARY.md
Normal file
|
|
@ -0,0 +1,76 @@
|
|||
---
|
||||
id: T01
|
||||
parent: S01
|
||||
milestone: M009
|
||||
provides: []
|
||||
requires: []
|
||||
affects: []
|
||||
key_files: ["frontend/src/pages/Home.tsx", "frontend/src/App.css"]
|
||||
key_decisions: ["Used cyan accent numbered circles for how-it-works steps to match existing design language"]
|
||||
patterns_established: []
|
||||
drill_down_paths: []
|
||||
observability_surfaces: []
|
||||
duration: ""
|
||||
verification_result: "cd frontend && npm run build — zero errors, 46 modules transformed, built in 807ms."
|
||||
completed_at: 2026-03-31T05:35:24.075Z
|
||||
blocker_discovered: false
|
||||
---
|
||||
|
||||
# T01: Added hero tagline "Production Knowledge, Distilled", value proposition, 3-step how-it-works grid, and "Start Exploring" CTA to homepage
|
||||
|
||||
> Added hero tagline "Production Knowledge, Distilled", value proposition, 3-step how-it-works grid, and "Start Exploring" CTA to homepage
|
||||
|
||||
## What Happened
|
||||
---
|
||||
id: T01
|
||||
parent: S01
|
||||
milestone: M009
|
||||
key_files:
|
||||
- frontend/src/pages/Home.tsx
|
||||
- frontend/src/App.css
|
||||
key_decisions:
|
||||
- Used cyan accent numbered circles for how-it-works steps to match existing design language
|
||||
duration: ""
|
||||
verification_result: passed
|
||||
completed_at: 2026-03-31T05:35:24.076Z
|
||||
blocker_discovered: false
|
||||
---
|
||||
|
||||
# T01: Added hero tagline "Production Knowledge, Distilled", value proposition, 3-step how-it-works grid, and "Start Exploring" CTA to homepage
|
||||
|
||||
**Added hero tagline "Production Knowledge, Distilled", value proposition, 3-step how-it-works grid, and "Start Exploring" CTA to homepage**
|
||||
|
||||
## What Happened
|
||||
|
||||
The homepage hero section had an empty h1 and only a subtitle with search bar. Added the tagline, a value proposition paragraph, a 3-column how-it-works grid with numbered accent circles (Creators Share Techniques → AI Extracts Key Moments → You Find Answers Fast), and a prominent CTA button linking to /topics. All CSS uses existing custom properties. Responsive stacking at 640px breakpoint.
|
||||
|
||||
## Verification
|
||||
|
||||
cd frontend && npm run build — zero errors, 46 modules transformed, built in 807ms.
|
||||
|
||||
## Verification Evidence
|
||||
|
||||
| # | Command | Exit Code | Verdict | Duration |
|
||||
|---|---------|-----------|---------|----------|
|
||||
| 1 | `cd frontend && npm run build` | 0 | ✅ pass | 2700ms |
|
||||
|
||||
|
||||
## Deviations
|
||||
|
||||
None.
|
||||
|
||||
## Known Issues
|
||||
|
||||
None.
|
||||
|
||||
## Files Created/Modified
|
||||
|
||||
- `frontend/src/pages/Home.tsx`
|
||||
- `frontend/src/App.css`
|
||||
|
||||
|
||||
## Deviations
|
||||
None.
|
||||
|
||||
## Known Issues
|
||||
None.
|
||||
40
.gsd/milestones/M009/slices/S01/tasks/T02-PLAN.md
Normal file
40
.gsd/milestones/M009/slices/S01/tasks/T02-PLAN.md
Normal file
|
|
@ -0,0 +1,40 @@
|
|||
---
|
||||
estimated_steps: 15
|
||||
estimated_files: 2
|
||||
skills_used: []
|
||||
---
|
||||
|
||||
# T02: Add popular topic quick-links fetched from topics API
|
||||
|
||||
Add a popular topics section to the homepage that fetches topic data from the existing fetchTopics API, sorts sub-topics by technique_count, and renders the top 8-10 as clickable pill/chip links. Each pill navigates to the search page scoped to that topic.
|
||||
|
||||
Steps:
|
||||
1. Read current `frontend/src/pages/Home.tsx` (will include T01 changes) and `frontend/src/api/public-client.ts` (for TopicCategory/TopicSubTopic interfaces and fetchTopics function)
|
||||
2. In Home.tsx, import `fetchTopics` and `TopicCategory` from public-client.ts
|
||||
3. Add state: `const [popularTopics, setPopularTopics] = useState<{name: string; count: number}[]>([])`
|
||||
4. Add useEffect that calls fetchTopics(), flattens all sub_topics across categories, sorts by technique_count descending, takes top 8, maps to {name, count}
|
||||
5. Render a `<section className="home-popular-topics">` between the CTA and the search bar (or between search bar and nav-cards). Show heading "Popular Topics" and render each topic as `<Link to={`/search?q=${encodeURIComponent(topic.name)}&scope=topics`} className="pill pill--topic-quick">{topic.name}</Link>`
|
||||
6. If popularTopics is empty (no data or API error), render nothing — no section, no error message
|
||||
7. In App.css, add styles for `.home-popular-topics` (centered, flex-wrap gap layout) and `.pill--topic-quick` (reuse existing pill styling with minor adjustments for interactive hover state using --color-accent)
|
||||
8. Add mobile responsive adjustments if needed
|
||||
9. Run `cd frontend && npm run build` to verify zero errors
|
||||
|
||||
Constraints:
|
||||
- Catch fetchTopics errors silently — no user-facing error for this optional section
|
||||
- Reuse existing pill/badge CSS patterns (`.pill--tag` exists already)
|
||||
- Topic pills should visually complement but not compete with the search bar
|
||||
|
||||
## Inputs
|
||||
|
||||
- `frontend/src/pages/Home.tsx`
|
||||
- `frontend/src/App.css`
|
||||
- `frontend/src/api/public-client.ts`
|
||||
|
||||
## Expected Output
|
||||
|
||||
- `frontend/src/pages/Home.tsx`
|
||||
- `frontend/src/App.css`
|
||||
|
||||
## Verification
|
||||
|
||||
cd frontend && npm run build 2>&1 | tail -5
|
||||
5192
.gsd/reports/M008-2026-03-31T05-31-26.html
Normal file
5192
.gsd/reports/M008-2026-03-31T05-31-26.html
Normal file
File diff suppressed because it is too large
Load diff
209
.gsd/reports/index.html
Normal file
209
.gsd/reports/index.html
Normal file
|
|
@ -0,0 +1,209 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>GSD Reports — content-to-kb-automator</title>
|
||||
<style>
|
||||
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
|
||||
:root{
|
||||
--bg-0:#0f1115;--bg-1:#16181d;--bg-2:#1e2028;--bg-3:#272a33;
|
||||
--border-1:#2b2e38;--border-2:#3b3f4c;
|
||||
--text-0:#ededef;--text-1:#a1a1aa;--text-2:#71717a;
|
||||
--accent:#5e6ad2;--accent-subtle:rgba(94,106,210,.12);
|
||||
--font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
|
||||
--mono:'JetBrains Mono','Fira Code',ui-monospace,monospace;
|
||||
}
|
||||
html{font-size:13px}
|
||||
body{background:var(--bg-0);color:var(--text-0);font-family:var(--font);line-height:1.6;-webkit-font-smoothing:antialiased}
|
||||
a{color:var(--accent);text-decoration:none}
|
||||
a:hover{text-decoration:underline}
|
||||
h2{font-size:14px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--text-1);margin-bottom:16px;padding-bottom:8px;border-bottom:1px solid var(--border-1)}
|
||||
h3{font-size:13px;font-weight:600;color:var(--text-1);margin:16px 0 8px}
|
||||
code{font-family:var(--mono);font-size:12px;background:var(--bg-3);padding:1px 5px;border-radius:3px}
|
||||
.empty{color:var(--text-2);font-size:13px;padding:8px 0}
|
||||
.count{font-size:11px;font-weight:500;color:var(--text-2);background:var(--bg-3);border-radius:3px;padding:1px 6px}
|
||||
|
||||
/* Header */
|
||||
header{background:var(--bg-1);border-bottom:1px solid var(--border-1);padding:12px 32px;position:sticky;top:0;z-index:100}
|
||||
.hdr-inner{display:flex;align-items:center;gap:16px;max-width:1280px;margin:0 auto}
|
||||
.branding{display:flex;align-items:baseline;gap:6px;flex-shrink:0}
|
||||
.logo{font-size:18px;font-weight:800;letter-spacing:-.5px;color:var(--text-0)}
|
||||
.ver{font-size:10px;color:var(--text-2);font-family:var(--mono)}
|
||||
.hdr-meta{flex:1;min-width:0}
|
||||
.hdr-meta h1{font-size:15px;font-weight:600}
|
||||
.hdr-subtitle{color:var(--text-2);font-weight:400;font-size:13px;margin-left:4px}
|
||||
.hdr-path{font-size:11px;color:var(--text-2);font-family:var(--mono);display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
|
||||
.hdr-right{text-align:right;flex-shrink:0}
|
||||
.gen-lbl{font-size:10px;color:var(--text-2);text-transform:uppercase;letter-spacing:.5px;display:block}
|
||||
.gen{font-size:11px;color:var(--text-1)}
|
||||
|
||||
/* Layout */
|
||||
.layout{display:grid;grid-template-columns:200px 1fr;gap:0;max-width:1280px;margin:0 auto;min-height:calc(100vh - 120px)}
|
||||
|
||||
/* Sidebar */
|
||||
.sidebar{background:var(--bg-1);border-right:1px solid var(--border-1);padding:20px 14px;position:sticky;top:52px;height:calc(100vh - 52px);overflow-y:auto}
|
||||
.sidebar-title{font-size:10px;font-weight:600;color:var(--text-2);text-transform:uppercase;letter-spacing:.5px;margin-bottom:12px}
|
||||
.toc-group{margin-bottom:14px}
|
||||
.toc-group-label{font-size:11px;font-weight:600;color:var(--text-1);margin-bottom:3px;font-family:var(--mono)}
|
||||
.toc-group ul{list-style:none;display:flex;flex-direction:column;gap:1px}
|
||||
.toc-group li{display:flex;align-items:center;gap:6px}
|
||||
.toc-group a{font-size:11px;color:var(--text-2);padding:2px 4px;border-radius:3px;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
|
||||
.toc-group a:hover{background:var(--bg-2);color:var(--text-0);text-decoration:none}
|
||||
.toc-kind{font-size:9px;color:var(--text-2);font-family:var(--mono);flex-shrink:0}
|
||||
|
||||
/* Main */
|
||||
main{padding:28px;display:flex;flex-direction:column;gap:40px}
|
||||
|
||||
/* Overview */
|
||||
.idx-summary{display:flex;flex-wrap:wrap;gap:1px;background:var(--border-1);border:1px solid var(--border-1);border-radius:4px;overflow:hidden;margin-bottom:16px}
|
||||
.idx-stat{background:var(--bg-1);padding:10px 16px;display:flex;flex-direction:column;gap:2px;min-width:100px;flex:1}
|
||||
.idx-val{font-size:18px;font-weight:600;color:var(--text-0);font-variant-numeric:tabular-nums}
|
||||
.idx-lbl{font-size:10px;color:var(--text-2);text-transform:uppercase;letter-spacing:.4px}
|
||||
.idx-progress{display:flex;align-items:center;gap:10px;margin-top:10px}
|
||||
.idx-bar-track{flex:1;height:4px;background:var(--bg-3);border-radius:2px;overflow:hidden}
|
||||
.idx-bar-fill{height:100%;background:var(--accent);border-radius:2px}
|
||||
.idx-pct{font-size:12px;font-weight:600;color:var(--text-1);min-width:40px;text-align:right}
|
||||
|
||||
/* Sparkline */
|
||||
.sparkline-wrap{margin-top:20px}
|
||||
.sparkline{position:relative}
|
||||
.spark-svg{display:block;background:var(--bg-1);border:1px solid var(--border-1);border-radius:4px;overflow:visible;max-width:100%}
|
||||
.spark-line{stroke:var(--accent);stroke-width:1.5;fill:none}
|
||||
.spark-dot{fill:var(--accent);stroke:var(--bg-1);stroke-width:2;cursor:pointer}
|
||||
.spark-dot:hover{r:4;fill:var(--text-0)}
|
||||
.spark-lbl{font-size:10px;fill:var(--text-2);font-family:var(--mono)}
|
||||
.spark-axis{display:flex;position:relative;height:18px;margin-top:2px}
|
||||
.spark-tick{position:absolute;transform:translateX(-50%);font-size:9px;color:var(--text-2);font-family:var(--mono);white-space:nowrap}
|
||||
|
||||
/* Report cards */
|
||||
.cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px}
|
||||
.report-card{
|
||||
display:flex;flex-direction:column;gap:6px;
|
||||
background:var(--bg-1);border:1px solid var(--border-1);border-radius:4px;
|
||||
padding:14px;text-decoration:none;color:var(--text-0);
|
||||
transition:border-color .12s;
|
||||
}
|
||||
.report-card:hover{border-color:var(--accent);text-decoration:none}
|
||||
.card-latest{border-color:var(--accent)}
|
||||
.card-top{display:flex;align-items:center;gap:8px}
|
||||
.card-label{flex:1;font-weight:500;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
|
||||
.card-kind{font-size:10px;color:var(--text-2);font-family:var(--mono);flex-shrink:0}
|
||||
.card-date{font-size:11px;color:var(--text-2)}
|
||||
.card-progress{display:flex;align-items:center;gap:6px}
|
||||
.card-bar-track{flex:1;height:3px;background:var(--bg-3);border-radius:2px;overflow:hidden}
|
||||
.card-bar-fill{height:100%;background:var(--accent);border-radius:2px}
|
||||
.card-pct{font-size:11px;color:var(--text-2);min-width:30px;text-align:right}
|
||||
.card-stats{display:flex;gap:8px;flex-wrap:wrap}
|
||||
.card-stats span{font-size:11px;color:var(--text-2);font-variant-numeric:tabular-nums}
|
||||
.card-delta{display:flex;gap:4px;flex-wrap:wrap}
|
||||
.card-delta span{font-size:10px;color:var(--text-1);font-family:var(--mono)}
|
||||
.card-latest-badge{display:none}
|
||||
|
||||
/* Footer */
|
||||
footer{border-top:1px solid var(--border-1);padding:16px 32px}
|
||||
.ftr-inner{display:flex;align-items:center;gap:6px;justify-content:center;font-size:11px;color:var(--text-2)}
|
||||
.ftr-sep{color:var(--border-2)}
|
||||
|
||||
@media(max-width:768px){
|
||||
.layout{grid-template-columns:1fr}
|
||||
.sidebar{position:static;height:auto;border-right:none;border-bottom:1px solid var(--border-1)}
|
||||
}
|
||||
@media print{
|
||||
.sidebar{display:none}
|
||||
header{position:static}
|
||||
body{background:#fff;color:#1a1a1a}
|
||||
:root{--bg-0:#fff;--bg-1:#fafafa;--bg-2:#f5f5f5;--bg-3:#ebebeb;--border-1:#e5e5e5;--border-2:#d4d4d4;--text-0:#1a1a1a;--text-1:#525252;--text-2:#a3a3a3;--accent:#4f46e5}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<div class="hdr-inner">
|
||||
<div class="branding">
|
||||
<span class="logo">GSD</span>
|
||||
<span class="ver">v2.58.0</span>
|
||||
</div>
|
||||
<div class="hdr-meta">
|
||||
<h1>content-to-kb-automator <span class="hdr-subtitle">Reports</span></h1>
|
||||
<span class="hdr-path">/home/aux/projects/content-to-kb-automator</span>
|
||||
</div>
|
||||
<div class="hdr-right">
|
||||
<span class="gen-lbl">Updated</span>
|
||||
<span class="gen">Mar 31, 2026, 05:31 AM</span>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="layout">
|
||||
<!-- Sidebar TOC -->
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-title">Reports</div>
|
||||
|
||||
<div class="toc-group">
|
||||
<div class="toc-group-label">M008</div>
|
||||
<ul><li><a href="M008-2026-03-31T05-31-26.html">Mar 31, 2026, 05:31 AM</a> <span class="toc-kind toc-milestone">milestone</span></li></ul>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- Main content -->
|
||||
<main>
|
||||
<section class="idx-overview">
|
||||
<h2>Project Overview</h2>
|
||||
|
||||
<div class="idx-summary">
|
||||
<div class="idx-stat"><span class="idx-val">$172.23</span><span class="idx-lbl">Total Cost</span></div>
|
||||
<div class="idx-stat"><span class="idx-val">244.48M</span><span class="idx-lbl">Total Tokens</span></div>
|
||||
<div class="idx-stat"><span class="idx-val">7h 56m</span><span class="idx-lbl">Duration</span></div>
|
||||
<div class="idx-stat"><span class="idx-val">32/39</span><span class="idx-lbl">Slices</span></div>
|
||||
<div class="idx-stat"><span class="idx-val">8/10</span><span class="idx-lbl">Milestones</span></div>
|
||||
<div class="idx-stat"><span class="idx-val">1</span><span class="idx-lbl">Reports</span></div>
|
||||
</div>
|
||||
<div class="idx-progress">
|
||||
<div class="idx-bar-track"><div class="idx-bar-fill" style="width:82%"></div></div>
|
||||
<span class="idx-pct">82% complete</span>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
<section class="idx-cards">
|
||||
<h2>Progression <span class="sec-count">1</span></h2>
|
||||
<div class="cards-grid">
|
||||
<a class="report-card card-latest" href="M008-2026-03-31T05-31-26.html">
|
||||
<div class="card-top">
|
||||
<span class="card-label">M008: M008: Credibility Debt Cleanup — Broken Links, Test Data, Jargon, Empty Metrics</span>
|
||||
<span class="card-kind card-kind-milestone">milestone</span>
|
||||
</div>
|
||||
<div class="card-date">Mar 31, 2026, 05:31 AM</div>
|
||||
<div class="card-progress">
|
||||
<div class="card-bar-track">
|
||||
<div class="card-bar-fill" style="width:82%"></div>
|
||||
</div>
|
||||
<span class="card-pct">82%</span>
|
||||
</div>
|
||||
<div class="card-stats">
|
||||
<span>$172.23</span>
|
||||
<span>244.48M</span>
|
||||
<span>7h 56m</span>
|
||||
<span>32/39 slices</span>
|
||||
</div>
|
||||
|
||||
<div class="card-latest-badge">Latest</div>
|
||||
</a></div>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
<div class="ftr-inner">
|
||||
<span class="ftr-brand">GSD v2.58.0</span>
|
||||
<span class="ftr-sep">—</span>
|
||||
<span>content-to-kb-automator</span>
|
||||
<span class="ftr-sep">—</span>
|
||||
<span>/home/aux/projects/content-to-kb-automator</span>
|
||||
<span class="ftr-sep">—</span>
|
||||
<span>Updated Mar 31, 2026, 05:31 AM</span>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
24
.gsd/reports/reports.json
Normal file
24
.gsd/reports/reports.json
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
{
|
||||
"version": 1,
|
||||
"projectName": "content-to-kb-automator",
|
||||
"projectPath": "/home/aux/projects/content-to-kb-automator",
|
||||
"gsdVersion": "2.58.0",
|
||||
"entries": [
|
||||
{
|
||||
"filename": "M008-2026-03-31T05-31-26.html",
|
||||
"generatedAt": "2026-03-31T05:31:26.249Z",
|
||||
"milestoneId": "M008",
|
||||
"milestoneTitle": "M008: Credibility Debt Cleanup — Broken Links, Test Data, Jargon, Empty Metrics",
|
||||
"label": "M008: M008: Credibility Debt Cleanup — Broken Links, Test Data, Jargon, Empty Metrics",
|
||||
"kind": "milestone",
|
||||
"totalCost": 172.23042974999993,
|
||||
"totalTokens": 244482118,
|
||||
"totalDuration": 28596881,
|
||||
"doneSlices": 32,
|
||||
"totalSlices": 39,
|
||||
"doneMilestones": 8,
|
||||
"totalMilestones": 10,
|
||||
"phase": "planning"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -865,7 +865,7 @@ a.app-footer__repo:hover {
|
|||
|
||||
.home-hero {
|
||||
text-align: center;
|
||||
padding: 0.5rem 1rem 1.5rem;
|
||||
padding: 2rem 1rem 2.5rem;
|
||||
}
|
||||
|
||||
.home-hero__title {
|
||||
|
|
@ -881,6 +881,78 @@ a.app-footer__repo:hover {
|
|||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.home-hero__value-prop {
|
||||
max-width: 32rem;
|
||||
margin: 1.5rem auto 0;
|
||||
font-size: 1.0625rem;
|
||||
line-height: 1.6;
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
/* ── How It Works ─────────────────────────────────────────────────────────── */
|
||||
|
||||
.home-how-it-works {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 1.25rem;
|
||||
max-width: 42rem;
|
||||
margin: 2rem auto 0;
|
||||
}
|
||||
|
||||
.home-how-it-works__step {
|
||||
padding: 1.25rem 1rem;
|
||||
background: var(--color-bg-surface);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 0.625rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.home-how-it-works__number {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
border-radius: 50%;
|
||||
background: var(--color-accent);
|
||||
color: var(--color-bg-page);
|
||||
font-weight: 700;
|
||||
font-size: 0.875rem;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.home-how-it-works__title {
|
||||
font-size: 0.9375rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 0.375rem;
|
||||
}
|
||||
|
||||
.home-how-it-works__desc {
|
||||
font-size: 0.8125rem;
|
||||
color: var(--color-text-secondary);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* ── CTA Button ───────────────────────────────────────────────────────────── */
|
||||
|
||||
.home-cta {
|
||||
display: inline-block;
|
||||
margin-top: 2rem;
|
||||
padding: 0.75rem 2rem;
|
||||
background: var(--color-accent);
|
||||
color: var(--color-bg-page);
|
||||
font-weight: 700;
|
||||
font-size: 1rem;
|
||||
border-radius: 0.5rem;
|
||||
text-decoration: none;
|
||||
transition: background 0.15s, transform 0.15s;
|
||||
}
|
||||
|
||||
.home-cta:hover {
|
||||
background: var(--color-accent-hover);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
/* ── Search form ──────────────────────────────────────────────────────────── */
|
||||
|
||||
.search-container {
|
||||
|
|
@ -2079,6 +2151,16 @@ a.app-footer__repo:hover {
|
|||
font-size: 1.75rem;
|
||||
}
|
||||
|
||||
.home-how-it-works {
|
||||
grid-template-columns: 1fr;
|
||||
max-width: 20rem;
|
||||
}
|
||||
|
||||
.home-cta {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.nav-cards {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -110,7 +110,7 @@ export default function Home() {
|
|||
<div className="home">
|
||||
{/* Hero search */}
|
||||
<section className="home-hero">
|
||||
|
||||
<h1 className="home-hero__title">Production Knowledge, Distilled</h1>
|
||||
<p className="home-hero__subtitle">
|
||||
Search techniques, key moments, and creators
|
||||
</p>
|
||||
|
|
@ -167,6 +167,37 @@ export default function Home() {
|
|||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<p className="home-hero__value-prop">
|
||||
Real music production techniques extracted from creator tutorials.
|
||||
Skip the 4-hour videos — find the insight you need in seconds.
|
||||
</p>
|
||||
|
||||
<div className="home-how-it-works">
|
||||
<div className="home-how-it-works__step">
|
||||
<span className="home-how-it-works__number">1</span>
|
||||
<h3 className="home-how-it-works__title">Creators Share Techniques</h3>
|
||||
<p className="home-how-it-works__desc">
|
||||
Real producers and sound designers publish in-depth tutorials
|
||||
</p>
|
||||
</div>
|
||||
<div className="home-how-it-works__step">
|
||||
<span className="home-how-it-works__number">2</span>
|
||||
<h3 className="home-how-it-works__title">AI Extracts Key Moments</h3>
|
||||
<p className="home-how-it-works__desc">
|
||||
We distill hours of video into structured, searchable knowledge
|
||||
</p>
|
||||
</div>
|
||||
<div className="home-how-it-works__step">
|
||||
<span className="home-how-it-works__number">3</span>
|
||||
<h3 className="home-how-it-works__title">You Find Answers Fast</h3>
|
||||
<p className="home-how-it-works__desc">
|
||||
Search by topic, technique, or creator — get straight to the insight
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Link to="/topics" className="btn home-cta">Start Exploring</Link>
|
||||
</section>
|
||||
|
||||
{/* Navigation cards */}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue