Skip to content

Commit b6942e4

Browse files
committed
feat: add Roo Code Teams promotional banner to welcome page
Adds a promotional banner for Roo Code Teams that displays on the welcome page breadcrumbs. Includes responsive design and accessible markup.
1 parent d80bd38 commit b6942e4

File tree

2 files changed

+54
-0
lines changed

2 files changed

+54
-0
lines changed

src/theme/DocBreadcrumbs/index.tsx

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -60,9 +60,24 @@ export default function DocBreadcrumbs(): ReactNode {
6060
return null;
6161
}
6262

63+
const lastBreadcrumb = breadcrumbs[breadcrumbs.length - 1];
64+
const showTeamsBanner = lastBreadcrumb?.label === 'Welcome';
65+
6366
return (
6467
<>
6568
<DocBreadcrumbsStructuredData breadcrumbs={breadcrumbs} />
69+
{showTeamsBanner && (
70+
<div className={styles.teamsPromo} role="complementary" aria-label="Roo Code Teams announcement">
71+
<span className={styles.teamsPromoHeadline}>Ship Faster with Roo Code Teams.</span>
72+
<a
73+
className={styles.teamsPromoLink}
74+
href="https://roocode.com/l/teams"
75+
target="_blank"
76+
rel="noopener noreferrer">
77+
Get early access now.
78+
</a>
79+
</div>
80+
)}
6681
<nav
6782
className={clsx(
6883
ThemeClassNames.docs.docBreadcrumbs,

src/theme/DocBreadcrumbs/styles.module.css

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,3 +14,42 @@
1414
margin: 0;
1515
flex: 1;
1616
}
17+
18+
.teamsPromo {
19+
display: flex;
20+
align-items: center;
21+
justify-content: center;
22+
gap: 0.75rem;
23+
padding: 0.85rem 1.1rem;
24+
border-radius: calc(var(--radius) + 8px);
25+
background: linear-gradient(90deg, #4f46e5, #2563eb);
26+
border: 1px solid rgba(147, 197, 253, 0.5);
27+
margin-bottom: 1rem;
28+
color: #ffffff;
29+
box-shadow: 0 12px 30px rgba(37, 99, 235, 0.25);
30+
}
31+
32+
.teamsPromoHeadline {
33+
font-weight: 600;
34+
}
35+
36+
.teamsPromoLink {
37+
color: #ffffff;
38+
font-weight: 600;
39+
text-decoration: underline;
40+
text-decoration-color: rgba(255, 255, 255, 0.7);
41+
text-decoration-thickness: 2px;
42+
}
43+
44+
.teamsPromoLink:hover {
45+
text-decoration-color: rgba(255, 255, 255, 0.95);
46+
}
47+
48+
@media (max-width: 768px) {
49+
.teamsPromo {
50+
flex-direction: column;
51+
align-items: flex-start;
52+
gap: 0.5rem;
53+
padding: 1rem;
54+
}
55+
}

0 commit comments

Comments
 (0)