From 07c9f465cee3cddc1369198b4a33a58b787b5f3b Mon Sep 17 00:00:00 2001 From: Marcus Vorwaller Date: Sat, 17 Jan 2026 18:06:40 -0800 Subject: [PATCH] Marketing site improvements --- website/docusaurus.config.js | 20 +++- website/src/css/custom.css | 176 +++++++++++++++++++++++++++++++++++ website/src/pages/index.js | 64 +++++++++++++ 3 files changed, 258 insertions(+), 2 deletions(-) diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js index c3165e7e..83a9988b 100644 --- a/website/docusaurus.config.js +++ b/website/docusaurus.config.js @@ -139,19 +139,35 @@ const config = { label: 'Getting Started', to: '/docs/intro', }, + { + label: 'Task Management', + to: '/docs/td', + }, + { + label: 'Git Workflow', + to: '/docs/git-plugin', + }, ], }, { - title: 'More', + title: 'Community', items: [ { label: 'GitHub', href: 'https://github.com/marcus/sidecar', }, + { + label: 'Issues', + href: 'https://github.com/marcus/sidecar/issues', + }, + { + label: 'Releases', + href: 'https://github.com/marcus/sidecar/releases', + }, ], }, ], - copyright: `Copyright © ${new Date().getFullYear()} Sidecar. Built with Docusaurus.`, + copyright: `Copyright © ${new Date().getFullYear()} Sidecar.`, }, prism: { theme: prismThemes.github, diff --git a/website/src/css/custom.css b/website/src/css/custom.css index 620bdf84..c88a1f56 100644 --- a/website/src/css/custom.css +++ b/website/src/css/custom.css @@ -1043,3 +1043,179 @@ a:hover { margin: 24px auto 0; max-width: 60ch; } + +/* ---------- Workflow Section ---------- */ + +.sc-workflow { + background: rgba(23, 26, 31, 0.3); + padding: 60px 0; + border-bottom: 1px solid var(--sc-border); +} + +.sc-workflowGrid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); + gap: 32px; +} + +.sc-workflowStep { + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + gap: 16px; + position: relative; + transition: transform 250ms ease; + cursor: default; +} + +.sc-workflowStep:hover { + transform: translateY(-4px); +} + +.sc-workflowIconBox { + width: 64px; + height: 64px; + border-radius: 16px; + display: flex; + align-items: center; + justify-content: center; + box-shadow: 0 8px 16px rgba(0,0,0,0.2); + transition: all 300ms cubic-bezier(0.34, 1.56, 0.64, 1); + position: relative; + overflow: hidden; +} + +.sc-workflowIconBox::after { + content: ""; + position: absolute; + inset: 0; + background: linear-gradient(135deg, rgba(255,255,255,0.1), transparent); + opacity: 0; + transition: opacity 300ms ease; +} + +.sc-workflowStep:hover .sc-workflowIconBox { + transform: scale(1.1) rotate(2deg); + box-shadow: 0 12px 24px rgba(0,0,0,0.3); +} + +.sc-workflowStep:hover .sc-workflowIconBox::after { + opacity: 1; +} + +.sc-workflowIcon { + font-size: 28px; + transition: transform 300ms ease; +} + +.sc-workflowStep:hover .sc-workflowIcon { + transform: scale(1.1); +} + +.sc-workflowTitle { + font-size: 18px; + margin: 0 0 8px; + color: var(--ifm-font-color-base); + font-weight: 600; +} + +.sc-workflowDesc { + font-size: 14px; + color: rgba(232, 232, 227, 0.6); + margin: 0; + line-height: 1.5; +} + +/* Green Variant (Plan) */ +.sc-step-green .sc-workflowIconBox { + background: linear-gradient(135deg, rgba(166, 226, 46, 0.1), rgba(166, 226, 46, 0.05)); + border: 1px solid rgba(166, 226, 46, 0.2); + color: #a6e22e; +} +.sc-step-green:hover .sc-workflowIconBox { + border-color: rgba(166, 226, 46, 0.5); + box-shadow: 0 0 20px rgba(166, 226, 46, 0.2); +} + +/* Blue Variant (Act) */ +.sc-step-blue .sc-workflowIconBox { + background: linear-gradient(135deg, rgba(102, 217, 239, 0.1), rgba(102, 217, 239, 0.05)); + border: 1px solid rgba(102, 217, 239, 0.2); + color: #66d9ef; +} +.sc-step-blue:hover .sc-workflowIconBox { + border-color: rgba(102, 217, 239, 0.5); + box-shadow: 0 0 20px rgba(102, 217, 239, 0.2); +} + +/* Purple Variant (Monitor) */ +.sc-step-purple .sc-workflowIconBox { + background: linear-gradient(135deg, rgba(174, 129, 255, 0.1), rgba(174, 129, 255, 0.05)); + border: 1px solid rgba(174, 129, 255, 0.2); + color: #ae81ff; +} +.sc-step-purple:hover .sc-workflowIconBox { + border-color: rgba(174, 129, 255, 0.5); + box-shadow: 0 0 20px rgba(174, 129, 255, 0.2); +} + +/* Pink Variant (Review) */ +.sc-step-pink .sc-workflowIconBox { + background: linear-gradient(135deg, rgba(249, 38, 114, 0.1), rgba(249, 38, 114, 0.05)); + border: 1px solid rgba(249, 38, 114, 0.2); + color: #f92672; +} +.sc-step-pink:hover .sc-workflowIconBox { + border-color: rgba(249, 38, 114, 0.5); + box-shadow: 0 0 20px rgba(249, 38, 114, 0.2); +} + +/* Arrows between steps (desktop only) */ +@media (min-width: 996px) { + .sc-workflowStep:not(:last-child)::after { + content: "→"; + position: absolute; + right: -24px; + top: 32px; + transform: translateY(-50%); + color: rgba(255, 255, 255, 0.1); + font-size: 24px; + font-family: var(--ifm-font-family-monospace); + } +} + +/* ---------- Footer ---------- */ + +.footer { + --ifm-footer-background-color: #0f1114; + --ifm-footer-color: rgba(232, 232, 227, 0.6); + --ifm-footer-link-color: rgba(232, 232, 227, 0.6); + --ifm-footer-title-color: rgba(232, 232, 227, 0.9); +} + +.footer__title { + font-family: var(--ifm-font-family-monospace); + font-size: 14px; + letter-spacing: 0.5px; + text-transform: uppercase; + margin-bottom: 12px; +} + +.footer__link-item { + font-size: 13px; + line-height: 1.6; + transition: color 150ms ease; +} + +.footer__link-item:hover { + color: var(--ifm-color-primary); + text-decoration: none; +} + +.footer__copyright { + font-size: 12px; + color: rgba(232, 232, 227, 0.4); + margin-top: 24px; + font-family: var(--ifm-font-family-monospace); +} diff --git a/website/src/pages/index.js b/website/src/pages/index.js index 2aed4d37..05c7e200 100644 --- a/website/src/pages/index.js +++ b/website/src/pages/index.js @@ -642,6 +642,68 @@ function FeatureListItem({ icon, title, description, color }) { ); } +function WorkflowSection() { + return ( +
+
+

The Workflow

+ +
+ +
+
+ +
+
+

1. Plan

+

+ Create tasks in Sidecar to give agents clear objectives and context. +

+
+
+ +
+
+ +
+
+

2. Act

+

+ Your agent (Claude, Cursor, etc.) reads the task and writes code. +

+
+
+ +
+
+ +
+
+

3. Monitor

+

+ Watch the agent's progress, diffs, and logs in Sidecar's TUI. +

+
+
+ +
+
+ +
+
+

4. Review

+

+ Verify the changes, commit, and mark the task as done. +

+
+
+ +
+
+
+ ); +} + export default function Home() { const { siteConfig } = useDocusaurusContext(); const [activeTab, setActiveTab] = useState('td'); @@ -777,6 +839,8 @@ export default function Home() { + + {/* Component Showcase Sections */}