docs: homepage refresh (tasks + paths) (#710)
* docs: add customer provisioning walkthrough animation * docs: refresh homepage layout (Mintlify-ish) --------- Co-authored-by: Clawdbot <clawdbot@Clawdbots-Mac-mini.local>
taylorcopilot committed
Feb 14, 2026 at 21:44 UTC
45ca4e8dbbde641d1163e1c0491f237a2ddd1395
3 files changed
+222
-39
docs/index.md
+113
-33
@@ -1,51 +1,92 @@
1
# SOCFortress CoPilot Documentation
2
3
-CoPilot is a **single pane of glass** for operating an open‑source SOC/SIEM stack (Wazuh, Graylog, Velociraptor, Grafana, Shuffle, etc.).
3
+<div class="sf-hero" markdown>
4
5
-<video autoplay loop muted playsinline style="width:100%; border-radius:16px; margin: 12px 0 18px; border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.02);">
5
+<div class="sf-hero-left" markdown>
6
+
7
+## Operate your open‑source SOC
8
+
9
+CoPilot is a **single pane of glass** for operating an open‑source SOC/SIEM stack (Wazuh, Graylog, Velociraptor, Grafana, Shuffle, and more).
10
+
11
+<div class="sf-cta-row" markdown>
12
+
13
+[Operator quickstart](user/operators-quickstart.md){ .md-button .md-button--primary }
14
+[Admin/Engineer quickstart](user/admins-quickstart.md){ .md-button .md-button--primary }
15
+[UI Guide (by menu)](user/ui/overview.md){ .md-button }
16
+[Developer docs](developer/start-here.md){ .md-button }
17
+
18
+</div>
19
+
20
+<div class="sf-hero-meta" markdown>
21
+
22
+**Popular next steps:** [Customer provisioning](user/customer-provisioning.md) · [Videos (summarized)](user/videos.md) · [GitHub releases](https://github.com/socfortress/CoPilot/releases)
23
+
24
+</div>
25
+
26
+</div>
27
+
28
+<div class="sf-hero-right" markdown>
29
+
30
+<video class="sf-hero-video" autoplay loop muted playsinline>
31
<source src="assets/hero/copilot-hub.webm" type="video/webm">
32
<source src="assets/hero/copilot-hub.mp4" type="video/mp4">
33
</video>
34
35
+</div>
36
+
37
+</div>
38
+
39
+---
40
+
41
+## Choose your path
42
+
43
<div class="sf-home-grid" markdown>
44
45
<div class="sf-card" markdown>
46
14
-## New to CoPilot?
47
+### SOC operator / analyst
48
16
-Start with the guides and get a working SOC workflow quickly.
49
+You live in **Incident Management** (alerts → cases → investigations).
50
18
-[Getting started →](user/operators-quickstart.md){ .md-button .md-button--primary }
51
+- [Operator quickstart](user/operators-quickstart.md)
52
+- [Incident Management UI guide](user/ui/incident-management.md)
53
+- [Videos track (Operator)](user/videos.md#operator-track)
54
55
</div>
56
57
<div class="sf-card" markdown>
58
24
-## Configure your stack
59
+### Admin / engineer
60
26
-Admins/engineers: set up connectors + integrations so alerts flow.
61
+You configure **sources, connectors, and integrations** so alerts flow into CoPilot.
62
28
-[Admin quickstart →](user/admins-quickstart.md){ .md-button .md-button--primary }
63
+- [Admin/Engineer quickstart](user/admins-quickstart.md)
64
+- [External services + integrations](user/ui/external-services.md)
65
+- [Videos track (Admin/Engineer)](user/videos.md#adminengineer-track)
66
67
</div>
68
69
<div class="sf-card" markdown>
70
34
-## Developer / AI Agent Docs
71
+### Developer / AI Agent
72
36
-Architecture, data flows, schema, and safe change playbooks.
73
+You’re changing the codebase, adding connectors, or debugging flows.
74
38
-[Start here →](developer/start-here.md){ .md-button }
75
+- [Start here](developer/start-here.md)
76
+- [Architecture](architecture/ARCHITECTURE.md)
77
+- [Data flows](architecture/DATA_FLOWS.md)
78
+- [Database schema](architecture/DATABASE_SCHEMA.md)
79
80
</div>
81
82
<div class="sf-card" markdown>
83
44
-## Video library (summarized)
84
+### Video library (summarized)
85
46
-Use the playlist like documentation: grouped summaries by topic.
86
+Treat the YouTube playlist like documentation: links + structured bullets (no transcripts stored).
87
48
-[Browse videos →](user/videos.md){ .md-button }
88
+- [Browse videos](user/videos.md)
89
+- [Role-based tracks](user/videos.md#jump-to-your-role)
90
91
</div>
92
@@ -53,37 +94,76 @@ Use the playlist like documentation: grouped summaries by topic.
94
95
---
96
56
-## Pick your path
97
+## Popular tasks
98
+
99
+<div class="sf-task-grid" markdown>
100
+
101
+<div class="sf-task-card" markdown>
102
58
-=== "SOC operator / analyst"
103
+<h3 class="sf-task-title"><span class="sf-icon">:material-account-multiple:</span> Provision a customer</h3>
104
60
- You spend most of your time in **Incident Management** (alerts → cases → investigations).
105
+Create a tenant + set up the minimum required configuration.
106
62
- - [Quickstart (Operators)](user/operators-quickstart.md)
63
- - [User Guide Overview](user/overview.md)
64
- - [Videos (Playlist)](user/videos.md)
107
+[Customer provisioning →](user/customer-provisioning.md)
108
66
-=== "Admin / engineer"
109
+</div>
110
+
111
+<div class="sf-task-card" markdown>
112
68
- You configure **connectors, sources, and integrations** so alerts flow into CoPilot.
113
+<h3 class="sf-task-title"><span class="sf-icon">:material-connection:</span> Add integrations & connectors</h3>
114
70
- - [Quickstart (Admins/Engineers)](user/admins-quickstart.md)
71
- - [Features by Area](user/features.md)
72
- - [Videos (Playlist)](user/videos.md)
115
+Connect third‑party sources and external network connectors so data flows into CoPilot.
116
74
-=== "Developer / AI Agent"
117
+[Integrations overview →](user/ui/external-third-party-integrations.md)
118
76
- You are making changes to the codebase, adding connectors, or debugging flows.
119
+</div>
120
78
- - [Start Here](developer/start-here.md)
79
- - [Architecture](architecture/ARCHITECTURE.md)
80
- - [Data Flows](architecture/DATA_FLOWS.md)
81
- - [Database Schema](architecture/DATABASE_SCHEMA.md)
121
+<div class="sf-task-card" markdown>
122
+
123
+<h3 class="sf-task-title"><span class="sf-icon">:material-alert:</span> Triage an alert → open a case</h3>
124
+
125
+Start from an alert, pivot to evidence, and manage work in a case.
126
+
127
+[Incident alerts →](user/ui/incident-alerts.md)
128
+
129
+</div>
130
+
131
+<div class="sf-task-card" markdown>
132
+
133
+<h3 class="sf-task-title"><span class="sf-icon">:material-database:</span> Manage indices</h3>
134
+
135
+Find, validate, and troubleshoot index patterns and retention.
136
+
137
+[Indices management →](user/ui/indices-management.md)
138
+
139
+</div>
140
+
141
+<div class="sf-task-card" markdown>
142
+
143
+<h3 class="sf-task-title"><span class="sf-icon">:material-magnify:</span> Navigate the UI fast</h3>
144
+
145
+Map the sidebar/menu to routes and learn deep‑link patterns.
146
+
147
+[UI navigation guide →](user/navigation.md)
148
+
149
+</div>
150
+
151
+<div class="sf-task-card" markdown>
152
+
153
+<h3 class="sf-task-title"><span class="sf-icon">:material-code-tags:</span> Build / change CoPilot safely</h3>
154
+
155
+Architecture, schema source‑of‑truth, and change playbooks.
156
+
157
+[Developer start here →](developer/start-here.md)
158
+
159
+</div>
160
+
161
+</div>
162
163
---
164
165
## How to use this site
166
87
-- Use the **left sidebar** (hamburger menu on mobile) to navigate.
167
+- Use the **left sidebar** (hamburger menu on mobile) to browse by area.
168
- Use **Search** (top bar) to jump straight to a topic.
89
-- Everything lives under `docs/` and is updated via PRs.
169
+- Everything lives under `docs/` and is updated via PRs (GitHub Pages build via Actions).
docs/stylesheets/extra.css
+105
-2
@@ -21,7 +21,7 @@
21
border-bottom: 1px solid var(--md-default-fg-color--lightest);
22
}
23
24
-/* Home page cards (DFIR-IRIS-ish layout) */
24
+/* Home page cards / grids */
25
.sf-home-grid {
26
display: grid;
27
grid-template-columns: repeat(12, 1fr);
@@ -37,7 +37,8 @@
37
padding: 1.1rem 1.1rem 0.8rem;
38
}
39
40
-.sf-card h2 {
40
+.sf-card h2,
41
+.sf-card h3 {
42
margin-top: 0.1rem;
43
}
44
@@ -47,6 +48,108 @@
48
}
49
}
50
51
+/* Homepage hero (Mintlify-ish feel, but in MkDocs Material) */
52
+.sf-hero {
53
+ display: grid;
54
+ grid-template-columns: repeat(12, 1fr);
55
+ gap: 1.25rem;
56
+ align-items: center;
57
+ margin: 0.25rem 0 1.25rem;
58
+}
59
+
60
+.sf-hero-left {
61
+ grid-column: span 12;
62
+}
63
+
64
+.sf-hero-right {
65
+ grid-column: span 12;
66
+}
67
+
68
+@media (min-width: 900px) {
69
+ .sf-hero-left {
70
+ grid-column: span 6;
71
+ }
72
+
73
+ .sf-hero-right {
74
+ grid-column: span 6;
75
+ }
76
+}
77
+
78
+.sf-hero h1 {
79
+ margin-top: 0.25rem;
80
+ margin-bottom: 0.35rem;
81
+}
82
+
83
+.sf-hero p {
84
+ margin-top: 0.35rem;
85
+ margin-bottom: 0.7rem;
86
+ font-size: 1.05rem;
87
+ opacity: 0.9;
88
+}
89
+
90
+.sf-cta-row {
91
+ display: flex;
92
+ flex-wrap: wrap;
93
+ gap: 0.5rem;
94
+ margin-top: 0.75rem;
95
+}
96
+
97
+.sf-cta-row .md-button {
98
+ margin: 0;
99
+}
100
+
101
+.sf-hero-meta {
102
+ margin-top: 0.65rem;
103
+ font-size: 0.85rem;
104
+ opacity: 0.75;
105
+}
106
+
107
+.sf-hero-video {
108
+ width: 100%;
109
+ border-radius: 16px;
110
+ border: 1px solid rgba(255, 255, 255, 0.08);
111
+ background: rgba(255, 255, 255, 0.02);
112
+}
113
+
114
+/* Small task cards */
115
+.sf-task-grid {
116
+ display: grid;
117
+ grid-template-columns: repeat(12, 1fr);
118
+ gap: 1rem;
119
+ margin: 0.75rem 0 1.25rem;
120
+}
121
+
122
+.sf-task-card {
123
+ grid-column: span 12;
124
+ border: 1px solid rgba(255, 255, 255, 0.08);
125
+ background: rgba(255, 255, 255, 0.02);
126
+ border-radius: 14px;
127
+ padding: 0.9rem 0.95rem;
128
+}
129
+
130
+.sf-task-title {
131
+ display: flex;
132
+ gap: 0.5rem;
133
+ align-items: baseline;
134
+ margin: 0;
135
+}
136
+
137
+.sf-task-title .sf-icon {
138
+ font-size: 1.1rem;
139
+}
140
+
141
+.sf-task-card p {
142
+ margin-top: 0.35rem;
143
+ margin-bottom: 0.6rem;
144
+ opacity: 0.85;
145
+}
146
+
147
+@media (min-width: 900px) {
148
+ .sf-task-card {
149
+ grid-column: span 4;
150
+ }
151
+}
152
+
153
/* Video thumbnail grids */
154
.sf-thumb-grid {
155
display: grid;
docs/user/videos.md
+4
-4
@@ -4,8 +4,8 @@ This page is generated from the CoPilot YouTube playlist transcripts and is mean
4
5
## Jump to your role
6
7
-[I'm a SOC Operator](#operator-track-soc-operators-analysts){ .md-button .md-button--primary }
8
-[I'm an Admin/Engineer](#adminengineer-track-admins-engineers){ .md-button .md-button--primary }
7
+[I'm a SOC Operator](#operator-track){ .md-button .md-button--primary }
8
+[I'm an Admin/Engineer](#adminengineer-track){ .md-button .md-button--primary }
9
10
---
11
@@ -607,7 +607,7 @@ Use these thumbnail grids to jump straight to a video. Click the **thumbnail** t
607
- Start with the section that matches your role.
608
- Videos labeled **Best for: Both** appear in *both* tracks below (by design).
609
610
-## Operator Track (SOC operators / analysts)
610
+## Operator Track (SOC operators / analysts) {#operator-track}
611
612
Alert triage, case work, investigations, and day-to-day SOC workflows.
613
@@ -1020,7 +1020,7 @@ Alert triage, case work, investigations, and day-to-day SOC workflows.
1020
- Includes practical walkthrough steps that can be replicated in production-like SOC environments.
1021
- Key CoPilot features shown: Wazuh integration, SCA visibility, Vulnerability visibility, Enrichment workflows
1022
1023
-## Admin/Engineer Track (admins / engineers)
1023
+## Admin/Engineer Track (admins / engineers) {#adminengineer-track}
1024
1025
Connecting sources, configuring integrations, tuning detections, reporting, and platform operations.
1026