Skip to content

style: polish docs homepage within the VitePress contract #144

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

Open
Delqhi wants to merge 3 commits into
base: main
Choose a base branch
from
Open

style: polish docs homepage within the VitePress contract #144

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
34366b9
docs: refresh homepage hero copy
Apr 21, 2026
311c41a
style: polish homepage theme surface contract
Apr 21, 2026
8008126
docs: record homepage polish safeguards
Apr 21, 2026
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
166 changes: 138 additions & 28 deletions docs/.vitepress/theme/components/HomeChoosePath.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,42 +1,152 @@
<template>
<section class="home-choose-path">
<div class="home-choose-path__eyebrow">Start with the right entry point</div>
<h2 class="home-choose-path__title">Choose Your Path</h2>
<p class="home-choose-path__lede">
The homepage contract protects exactly two cards here: one for operators and one for builders.
</p>

<div class="home-choose-path__grid">
<a href="/guide/getting-started" class="home-choose-path__card is-highlight">
<div class="home-choose-path__heading">User Documentation <span class="home-choose-path__arrow">→</span></div>
<div class="home-choose-path__description">How to use OpenSIN, manage your fleet, and leverage autonomous intelligence.</div>
</a>
<a href="/sdk/overview" class="home-choose-path__card">
<div class="home-choose-path__heading">Developer Documentation <span class="home-choose-path__arrow">→</span></div>
<div class="home-choose-path__description">Build plugins, create A2A agents, and integrate with the Neural-Bus.</div>
<a
v-for="card in cards"
:key="card.title"
:href="card.href"
class="home-choose-path__card"
:class="{ 'is-highlight': card.highlight }"
>
<div class="home-choose-path__label">{{ card.label }}</div>
<div class="home-choose-path__heading">
{{ card.title }}
<span class="home-choose-path__arrow">→</span>
</div>
<div class="home-choose-path__description">{{ card.description }}</div>
</a>
</div>
</section>
</template>

<script setup lang="ts">
/**
* Homepage contract note:
* - Keep this array at exactly 2 entries unless issue #141 is formally replaced.
* - Styling intentionally consumes the shared homepage tokens from custom.css so
* hero/features/path/topic cards feel like one surface system across themes.
*/
const cards = [
{
title: 'User Documentation',
description: 'Learn the operator path, daily workflows, and the shortest route to a productive OpenSIN fleet.',
href: '/guide/getting-started',
label: 'Operate',
highlight: true,
},
{
title: 'Developer Documentation',
description: 'Build plugins, compose A2A agents, and ship integrations without leaving the existing docs contract.',
href: '/sdk/overview',
label: 'Build',
highlight: false,
},
]
</script>

<style scoped>
.home-choose-path { margin-top: 2.75rem; }
.home-choose-path__title { margin: 0 0 1rem; font-size: 1.6rem; font-weight: 700; letter-spacing: -0.03em; }
.home-choose-path__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.home-choose-path {
margin-top: 3.5rem;
}

.home-choose-path__eyebrow {
margin-bottom: 0.7rem;
color: var(--opensin-home-accent-text);
font-size: 0.8rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
}

.home-choose-path__title {
margin: 0;
font-size: clamp(1.75rem, 2.8vw, 2.2rem);
font-weight: 800;
letter-spacing: -0.04em;
}

.home-choose-path__lede {
max-width: 42rem;
margin: 0.85rem 0 1.5rem;
color: var(--vp-c-text-2);
font-size: 1rem;
line-height: 1.65;
}

.home-choose-path__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1rem;
}

.home-choose-path__card {
display: block;
padding: 1.25rem 1.25rem;
border-radius: 14px;
border: 1px solid rgba(255,255,255,0.08);
background: #141414;
padding: 1.3rem 1.3rem 1.4rem;
border-radius: 20px;
border: 1px solid var(--opensin-home-card-border);
background: var(--opensin-home-card-bg);
box-shadow: var(--opensin-home-card-shadow);
text-decoration: none;
transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.home-choose-path__card:hover { transform: translateY(-2px); border-color: rgba(0,204,136,.45); box-shadow: 0 12px 28px rgba(0,0,0,.22); }
.home-choose-path__heading { color:#f5f5f5; font-size:1.05rem; font-weight:700; margin-bottom:.35rem; }
.home-choose-path__description { color:#8e8ea0; font-size:.95rem; line-height:1.45; }
.home-choose-path__card.is-highlight { border-color: rgba(0,204,136,.5); }
.home-choose-path__card.is-highlight .home-choose-path__heading { color:#00cc88; }
.home-choose-path__arrow { margin-left:.35rem; }
:global(html:not(.dark)) .home-choose-path__card { background:#ffffff; border-color:rgba(0,0,0,.08); box-shadow:0 10px 24px rgba(15,23,42,.05); }
:global(html:not(.dark)) .home-choose-path__heading { color:#0f172a; }
:global(html:not(.dark)) .home-choose-path__description { color:#475569; }
:global(html:not(.dark)) .home-choose-path__card.is-highlight { border-color: rgba(0,128,96,.3); background: linear-gradient(180deg,#ffffff 0%,#f5fbf8 100%); }
:global(html:not(.dark)) .home-choose-path__card.is-highlight .home-choose-path__heading { color:#008060; }
@media (max-width: 720px) { .home-choose-path__grid { grid-template-columns: 1fr; } }
transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
}

.home-choose-path__card:hover {
transform: translateY(-3px);
border-color: var(--opensin-home-card-border-strong);
box-shadow: var(--opensin-home-card-shadow-hover);
}

.home-choose-path__card.is-highlight {
background: var(--opensin-home-card-bg-highlight);
}

.home-choose-path__label {
display: inline-flex;
align-items: center;
min-height: 1.7rem;
margin-bottom: 0.95rem;
padding: 0.2rem 0.65rem;
border-radius: 999px;
background: var(--opensin-home-pill-bg);
color: var(--opensin-home-accent-text);
font-size: 0.77rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
}

.home-choose-path__heading {
color: var(--vp-c-text-1);
font-size: 1.16rem;
font-weight: 750;
line-height: 1.3;
}

.home-choose-path__description {
margin-top: 0.55rem;
color: var(--vp-c-text-2);
font-size: 0.98rem;
line-height: 1.6;
}

.home-choose-path__arrow {
margin-left: 0.4rem;
color: var(--opensin-home-accent-text);
}

@media (max-width: 720px) {
.home-choose-path {
margin-top: 3rem;
}

.home-choose-path__grid {
grid-template-columns: 1fr;
}
}
</style>
115 changes: 69 additions & 46 deletions docs/.vitepress/theme/components/HomeRelatedTopics.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,14 @@
<template>
<section class="home-related-topics">
<div class="home-related-topics__eyebrow">Cross-surface navigation</div>
<h2 class="home-related-topics__title">Related topics</h2>
<p class="home-related-topics__lede">
Keep the ecosystem scan-friendly without changing the protected four-card section shape.
</p>

<div class="home-related-topics__grid">
<a v-for="card in cards" :key="card.title" :href="card.href" class="home-related-topics__card">
<div class="home-related-topics__label">{{ card.label }}</div>
<div class="home-related-topics__heading">
{{ card.title }}
</div>
Expand All @@ -15,44 +21,65 @@
<script setup lang="ts">
/**
* Homepage related-topics grid.
* DO NOT replace with inline HTML in index.md again.
* This component exists so the homepage can keep the premium surface-card look
* without polluting markdown content with raw layout markup.
* - Keep this array at exactly 4 items while issue #141 is the active contract.
* - This component exists so the homepage keeps a polished surface-card system
* without pushing raw layout HTML into docs/index.md.
*/
const cards = [
{
title: 'OpenSIN Marketing',
description: 'Brand, discovery and product storytelling',
description: 'Brand, discovery, and the public-facing narrative around the ecosystem.',
href: 'https://opensin.ai',
label: 'Surface',
},
{
title: 'OpenSIN Marketplace',
description: 'Plans, bundles and premium access',
description: 'Plans, bundles, and commercial packaging for premium access.',
href: 'https://my.opensin.ai',
label: 'Commerce',
},
{
title: 'OpenSIN Dashboard',
description: 'Authenticated fleet control and chat',
description: 'Authenticated fleet control, chat, and the active operator workspace.',
href: 'https://chat.opensin.ai',
label: 'Control',
},
{
title: 'Domain Registry',
description: 'Verified public, gated and internal surfaces',
description: 'Verified public, gated, and internal surfaces kept in one canonical map.',
href: '/governance/domain-registry',
label: 'Governance',
},
]
</script>

<style scoped>
.home-related-topics {
margin-top: 3rem;
margin-top: 3.25rem;
}

.home-related-topics__title {
margin: 0 0 1rem;
font-size: 1.6rem;
.home-related-topics__eyebrow {
margin-bottom: 0.7rem;
color: var(--opensin-home-accent-text);
font-size: 0.8rem;
font-weight: 700;
letter-spacing: -0.03em;
letter-spacing: 0.14em;
text-transform: uppercase;
}

.home-related-topics__title {
margin: 0;
font-size: clamp(1.75rem, 2.8vw, 2.2rem);
font-weight: 800;
letter-spacing: -0.04em;
}

.home-related-topics__lede {
max-width: 42rem;
margin: 0.85rem 0 1.5rem;
color: var(--vp-c-text-2);
font-size: 1rem;
line-height: 1.65;
}

.home-related-topics__grid {
Expand All @@ -63,51 +90,47 @@ const cards = [

.home-related-topics__card {
display: block;
padding: 1.15rem 1.2rem;
border-radius: 14px;
border: 1px solid rgba(255, 255, 255, 0.08);
background: #141414;
padding: 1.2rem 1.2rem 1.3rem;
border-radius: 20px;
border: 1px solid var(--opensin-home-card-border);
background: var(--opensin-home-card-bg);
box-shadow: var(--opensin-home-card-shadow);
text-decoration: none;
transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}

.home-related-topics__card:hover {
transform: translateY(-2px);
border-color: rgba(0, 204, 136, 0.45);
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
transform: translateY(-3px);
border-color: var(--opensin-home-card-border-strong);
box-shadow: var(--opensin-home-card-shadow-hover);
}

.home-related-topics__heading {
color: #f5f5f5;
font-size: 1.05rem;
.home-related-topics__label {
display: inline-flex;
align-items: center;
min-height: 1.65rem;
margin-bottom: 0.9rem;
padding: 0.18rem 0.62rem;
border-radius: 999px;
background: var(--opensin-home-pill-bg);
color: var(--opensin-home-accent-text);
font-size: 0.76rem;
font-weight: 700;
margin-bottom: 0.3rem;
letter-spacing: 0.06em;
text-transform: uppercase;
}

.home-related-topics__description {
color: #8e8ea0;
font-size: 0.95rem;
line-height: 1.45;
}

:global(html:not(.dark)) .home-related-topics__card {
background: #ffffff;
border-color: rgba(0, 0, 0, 0.08);
box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
}

:global(html:not(.dark)) .home-related-topics__heading {
color: #0f172a;
}

:global(html:not(.dark)) .home-related-topics__description {
color: #475569;
.home-related-topics__heading {
color: var(--vp-c-text-1);
font-size: 1.08rem;
font-weight: 750;
margin-bottom: 0.35rem;
}

@media (max-width: 960px) {
.home-related-topics__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.home-related-topics__description {
color: var(--vp-c-text-2);
font-size: 0.97rem;
line-height: 1.58;
}

@media (max-width: 640px) {
Expand Down
Loading
Loading