Skip to content

marketing-site #44

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
marcus merged 1 commit into from
Jan 18, 2026
Merged

marketing-site #44

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 18 additions & 2 deletions website/docusaurus.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
176 changes: 176 additions & 0 deletions website/src/css/custom.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
64 changes: 64 additions & 0 deletions website/src/pages/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -642,6 +642,68 @@ function FeatureListItem({ icon, title, description, color }) {
);
}

function WorkflowSection() {
return (
<section className="sc-workflow">
<div className="container">
<h2 className="sc-showcaseTitle" style={{ textAlign: 'center', marginBottom: '48px' }}>The Workflow</h2>

<div className="sc-workflowGrid">

<div className="sc-workflowStep sc-step-green">
<div className="sc-workflowIconBox">
<i className="icon-list sc-workflowIcon" />
</div>
<div>
<h3 className="sc-workflowTitle">1. Plan</h3>
<p className="sc-workflowDesc">
Create tasks in Sidecar to give agents clear objectives and context.
</p>
</div>
</div>

<div className="sc-workflowStep sc-step-blue">
<div className="sc-workflowIconBox">
<i className="icon-terminal sc-workflowIcon" />
</div>
<div>
<h3 className="sc-workflowTitle">2. Act</h3>
<p className="sc-workflowDesc">
Your agent (Claude, Cursor, etc.) reads the task and writes code.
</p>
</div>
</div>

<div className="sc-workflowStep sc-step-purple">
<div className="sc-workflowIconBox">
<i className="icon-eye sc-workflowIcon" />
</div>
<div>
<h3 className="sc-workflowTitle">3. Monitor</h3>
<p className="sc-workflowDesc">
Watch the agent's progress, diffs, and logs in Sidecar's TUI.
</p>
</div>
</div>

<div className="sc-workflowStep sc-step-pink">
<div className="sc-workflowIconBox">
<i className="icon-check sc-workflowIcon" />
</div>
<div>
<h3 className="sc-workflowTitle">4. Review</h3>
<p className="sc-workflowDesc">
Verify the changes, commit, and mark the task as done.
</p>
</div>
</div>

</div>
</div>
</section>
);
}

export default function Home() {
const { siteConfig } = useDocusaurusContext();
const [activeTab, setActiveTab] = useState('td');
Expand Down Expand Up @@ -777,6 +839,8 @@ export default function Home() {
</div>
</section>

<WorkflowSection />

{/* Component Showcase Sections */}
<section className="sc-showcase">
<div className="container">
Expand Down