Skip to content

feat(ecosystem): PR4 — community-first arrival with portal cards #29

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

Closed
BunsDev wants to merge 1 commit into from
Closed

feat(ecosystem): PR4 — community-first arrival with portal cards #29

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
62 changes: 47 additions & 15 deletions src/components/Ecosystem.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,22 +1,54 @@
---
// Closing "arrival" section: a dominant community CTA (Join the Coven on
// Discord) beside a 2×2 grid of descriptive destination cards.
const DISCORD = `<svg viewBox="0 0 127.14 96.36" aria-hidden="true"><path d="M107.7 8.07A105.15 105.15 0 0 0 81.47 0a72.06 72.06 0 0 0-3.36 6.83 97.68 97.68 0 0 0-29.11 0A72.37 72.37 0 0 0 45.64 0a105.89 105.89 0 0 0-26.25 8.09C2.79 32.65-1.71 56.6.54 80.21A105.73 105.73 0 0 0 32.71 96.36a77.7 77.7 0 0 0 6.89-11.11 68.42 68.42 0 0 1-10.85-5.18c.91-.66 1.8-1.34 2.66-2a75.57 75.57 0 0 0 64.32 0c.87.71 1.76 1.39 2.66 2a68.68 68.68 0 0 1-10.87 5.19 77 77 0 0 0 6.89 11.1 105.25 105.25 0 0 0 32.19-16.14c2.64-27.38-4.51-51.11-18.9-72.15ZM42.45 65.69C36.18 65.69 31 60 31 53s5-12.74 11.43-12.74S54 46 53.89 53s-5.05 12.69-11.44 12.69Zm42.24 0C78.41 65.69 73.25 60 73.25 53s5-12.74 11.44-12.74S96.23 46 96.12 53s-5.05 12.69-11.43 12.69Z"/></svg>`;

const GITHUB = `<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 .5A11.5 11.5 0 0 0 .5 12a11.5 11.5 0 0 0 7.86 10.92c.58.1.79-.25.79-.56v-2c-3.2.7-3.88-1.37-3.88-1.37-.53-1.34-1.28-1.7-1.28-1.7-1.05-.71.08-.7.08-.7 1.16.08 1.77 1.19 1.77 1.19 1.03 1.77 2.7 1.26 3.36.96.1-.75.4-1.26.72-1.55-2.55-.29-5.24-1.28-5.24-5.7 0-1.26.45-2.29 1.19-3.1-.12-.29-.52-1.46.11-3.05 0 0 .97-.31 3.18 1.18a11 11 0 0 1 5.8 0c2.2-1.5 3.17-1.18 3.17-1.18.63 1.59.23 2.76.11 3.05.74.81 1.19 1.84 1.19 3.1 0 4.43-2.7 5.4-5.26 5.69.41.36.78 1.06.78 2.14v3.17c0 .31.21.67.8.56A11.5 11.5 0 0 0 23.5 12 11.5 11.5 0 0 0 12 .5Z"/></svg>`;

const DOCS = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 5.5A2.5 2.5 0 0 1 6.5 3H19a1 1 0 0 1 1 1v14.5"/><path d="M6.5 17H20v2.5a1.5 1.5 0 0 1-1.5 1.5H6.5A2.5 2.5 0 0 1 4 18.5v-13"/><path d="M8 7h7M8 10.5h7"/></svg>`;

const TERMINAL = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="16" rx="2"/><path d="m7 9 3 3-3 3M13 15h4"/></svg>`;

const DOWNLOAD = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3v12"/><path d="m7 10 5 5 5-5"/><path d="M5 20h14"/></svg>`;

const portals = [
{ icon: GITHUB, name: 'Coven CLI on GitHub', desc: 'The open runtime itself — read the source, file issues, send a PR.', href: 'https://github.com/OpenCoven/coven' },
{ icon: DOCS, name: 'Documentation', desc: 'Architecture, the socket API, familiars, and the security model, explained.', href: 'https://docs.opencoven.ai' },
{ icon: TERMINAL, name: 'CastCodes terminal', desc: 'The open, telemetry-stripped terminal built to host Coven sessions.', href: 'https://cast.codes' },
{ icon: DOWNLOAD, name: 'Download CovenCave', desc: 'Native desktop apps for macOS, Windows, and Linux.', href: 'https://github.com/OpenCoven/coven/releases' },
];
---
<section class="ecosystem-section" id="ecosystem" aria-labelledby="ecosystem-heading">
<div class="ecosystem-inner" data-reveal>
<div>
<p class="section-kicker">Ecosystem</p>
<h2 id="ecosystem-heading">Living Workspace of Familiar Agents</h2>
</div>
<p>OpenCoven turns AI from a blank chatbox into a durable workspace: familiars with memory and tools, local runtime control, open dashboards, desktop surfaces, and an ecosystem builders can inspect, customize, and own.</p>
<div class="ecosystem-links">
<a class="eco-link primary" href="https://discord.gg/opencoven">
<svg viewBox="0 0 127.14 96.36" aria-hidden="true">
<path d="M107.7 8.07A105.15 105.15 0 0 0 81.47 0a72.06 72.06 0 0 0-3.36 6.83 97.68 97.68 0 0 0-29.11 0A72.37 72.37 0 0 0 45.64 0a105.89 105.89 0 0 0-26.25 8.09C2.79 32.65-1.71 56.6.54 80.21A105.73 105.73 0 0 0 32.71 96.36a77.7 77.7 0 0 0 6.89-11.11 68.42 68.42 0 0 1-10.85-5.18c.91-.66 1.8-1.34 2.66-2a75.57 75.57 0 0 0 64.32 0c.87.71 1.76 1.39 2.66 2a68.68 68.68 0 0 1-10.87 5.19 77 77 0 0 0 6.89 11.1 105.25 105.25 0 0 0 32.19-16.14c2.64-27.38-4.51-51.11-18.9-72.15ZM42.45 65.69C36.18 65.69 31 60 31 53s5-12.74 11.43-12.74S54 46 53.89 53s-5.05 12.69-11.44 12.69Zm42.24 0C78.41 65.69 73.25 60 73.25 53s5-12.74 11.44-12.74S96.23 46 96.12 53s-5.05 12.69-11.43 12.69Z"/>
</svg>
Join Discord
<div class="ecosystem-inner panel panel--arrival" data-reveal>
<div class="ecosystem-lead">
<div class="section-header section-header--wide">
<p class="section-kicker">Ecosystem</p>
<h2 id="ecosystem-heading">The runtime is open. The coven is yours to join.</h2>
<p>A living workspace of familiar agents — the open runtime, the companion terminal, and the builders shaping it. Pick a way in.</p>
</div>
<a class="eco-cta" href="https://discord.gg/opencoven">
<span class="eco-cta-icon"><Fragment set:html={DISCORD} /></span>
<span class="eco-cta-text">
<span class="eco-cta-title">Join the Coven</span>
<span class="eco-cta-sub">Discord community — help shape the roadmap</span>
</span>
</a>
Comment on lines +29 to 35
<a class="eco-link" href="https://github.com/OpenCoven/coven">Coven CLI ↗</a>
<a class="eco-link" href="https://cast.codes">CastCodes ↗</a>
<a class="eco-link" href="https://docs.opencoven.ai">Read the Docs ↗</a>
</div>

<ul class="ecosystem-portals reveal-stagger" role="list">
{portals.map((p) => (
<li>
<a class="eco-portal panel-inset is-card" href={p.href} target="_blank" rel="noopener noreferrer">
<span class="eco-portal-icon"><Fragment set:html={p.icon} /></span>
<span class="eco-portal-body">
<span class="eco-portal-name">{p.name}</span>
<span class="eco-portal-desc">{p.desc}</span>
</span>
<span class="eco-portal-cue" aria-hidden="true">↗</span>
<span class="sr-only">(opens in new tab)</span>
</a>
</li>
))}
</ul>
</div>
</section>
230 changes: 185 additions & 45 deletions src/styles/global.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -803,6 +803,71 @@
100% { transform: scale(1.6); opacity: 0; }
}

/* ── Short laptops: keep the whole thesis above the fold ─
At ~640-720px-tall viewports the default rhythm pushes the
continuity timeline below the fold. Compress vertical rhythm
only — widths and columns stay untouched. */
@media (min-width: 901px) and (max-height: 720px) {
Comment on lines +806 to +810
.hero {
min-height: calc(100vh - 64px);
gap: 24px;
padding: 14px 32px 20px;
}
.kicker { margin-bottom: 14px; }
h1 {
font-size: clamp(2.375rem, 4vw, 3.25rem);
margin-bottom: 16px;
}
.hero-lede { margin-bottom: 20px; font-size: 0.9688rem; }
.download-cta { gap: 10px; }
.download-primary { padding: 11px 22px 11px 17px; }
.hero-actions-secondary { margin-top: 12px; }
.hero-card-cmdline { padding: 12px 20px 10px; }
.hero-card-output { margin-bottom: 12px; }
.output-identity { padding: 11px 16px; }
.output-memory { padding: 10px 16px 12px; gap: 6px; }
.hero-card-roster { padding: 9px 20px 11px; }
.continuity-text { font-size: 0.7188rem; }
}

/* ── Ultrawide (1680px+): scale the composition up ──────
The page reads small when 1280px of content floats in a 2560px
viewport. Step the shared containers to 1440px and let the hero
type, terminal, and ambient light grow with them. */
@media (min-width: 1680px) {
.header-inner,
.hero,
.proof-section,
.content-section,
.ecosystem-section,
.footer-inner { max-width: 1440px; }

.hero { gap: 56px; }
.hero-main { gap: 88px; }
.kicker { font-size: 0.75rem; margin-bottom: 26px; }
h1 { font-size: clamp(4.25rem, 3.2vw, 5rem); margin-bottom: 28px; }
.hero-lede { font-size: 1.1875rem; max-width: 560px; margin-bottom: 34px; }
.download-primary { padding: 16px 30px 16px 23px; }
.download-primary-label { font-size: 1.0625rem; }
.download-primary-sub { font-size: 0.6875rem; }
.download-alts { font-size: 0.75rem; }

.hero-card { max-width: 560px; }
.hero-card-cmdline { padding: 17px 22px 15px; }
.card-prompt, .card-cmd { font-size: 0.8125rem; }
.familiar-name { font-size: 0.875rem; }
.memory-note { font-size: 0.6875rem; }
.roster-tab { font-size: 0.6875rem; }

.continuity-date { font-size: 0.625rem; }
.continuity-text { font-size: 0.8125rem; max-width: 28ch; }

/* Ambient light scales with the canvas */
.glow-left { width: 820px; height: 680px; }
.glow-right { width: 960px; height: 820px; }
.glow-bottom { width: 700px; height: 560px; }
}

/* ── TESTIMONIAL STRIP ───────────────────────────────── */
.testimonial-strip {
position: relative; z-index: 1;
Expand Down Expand Up @@ -1114,44 +1179,87 @@
.qs-body { padding: 16px 16px 18px; }
}

/* ── ECOSYSTEM / CTA SECTION ─────────────────────────── */
/* ── ECOSYSTEM / ARRIVAL SECTION ─────────────────────────
The page's closing "choose your door" moment: a dominant community
CTA beside a 2×2 grid of descriptive destination cards. */
.ecosystem-section {
position: relative; z-index: 1;
max-width: 1280px; margin: 0 auto;
padding: 72px 32px;
border-top: 1px solid var(--border);
}
/* Surface comes from .panel.panel--arrival; this rule owns only layout */
.ecosystem-inner {
background: linear-gradient(135deg, rgba(59,22,79,0.4) 0%, rgba(14,11,22,0.8) 60%);
border: 1px solid var(--border-v);
border-radius: 12px;
padding: 56px 64px;
display: flex; flex-direction: column;
gap: 32px;
display: grid;
grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
gap: 48px; align-items: center;
padding: 48px 56px;
}
.ecosystem-lead { display: flex; flex-direction: column; gap: 28px; }
.ecosystem-lead .section-header { margin-bottom: 0; }
.ecosystem-inner h2 { max-width: 640px; }
.ecosystem-inner p {
.ecosystem-lead p {
font-size: 1rem; line-height: 1.65;
color: var(--muted); max-width: 560px;
color: var(--muted); max-width: 46ch;
}
.ecosystem-links {
display: flex; flex-wrap: wrap; gap: 12px;

/* Dominant CTA — Join the Coven (Discord), echoing the header button */
.eco-cta {
display: inline-flex; align-items: center; gap: 12px;
align-self: flex-start;
padding: 12px 20px;
border-radius: var(--radius-md);
text-decoration: none;
background: linear-gradient(135deg, var(--violet-cta) 0%, #553f9a 100%);
border: 1px solid transparent;
color: #fff;
box-shadow: 0 8px 24px -8px rgba(109,91,175,0.65), 0 0 0 1px rgba(255,255,255,0.06) inset;
transition: transform var(--dur-ui) ease, box-shadow var(--dur-ui) ease, background var(--dur-ui) ease;
}
.eco-link {
display: inline-flex; align-items: center; gap: 8px;
font-size: 0.75rem; font-weight: 600;
letter-spacing: 0.06em;
color: var(--vtext); text-decoration: none;
padding: 8px 16px;
border: 1px solid var(--border-v);
border-radius: 6px;
background: rgba(142,61,255,0.06);
transition: border-color 0.15s, background 0.15s;
.eco-cta-icon { flex: 0 0 auto; display: grid; place-items: center; }
.eco-cta-icon svg { width: 22px; height: 17px; fill: currentColor; }
.eco-cta-text { display: flex; flex-direction: column; gap: 2px; text-align: left; }
.eco-cta-title { font-size: 14px; font-weight: 700; letter-spacing: 0.01em; }
.eco-cta-sub { font-size: 11px; font-weight: 500; color: rgba(255,255,255,0.75); }

/* Destination portal cards (built on .panel-inset.is-card) */
.ecosystem-portals {
list-style: none;
display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;
}
.ecosystem-portals > li { display: flex; }
.eco-portal {
display: flex; align-items: flex-start; gap: 12px;
width: 100%;
padding: 16px; text-decoration: none;
}
.eco-portal-icon {
flex: 0 0 auto;
width: 38px; height: 38px; border-radius: 9px;
display: grid; place-items: center;
border: 1px solid rgba(154,142,205,0.5);
background: linear-gradient(150deg, rgba(154,142,205,0.28), rgba(154,142,205,0.08));
color: var(--vtext);
transition: box-shadow var(--dur-ui) ease;
}
.eco-portal-icon svg { width: 18px; height: 18px; }
.eco-portal-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.eco-portal-name { font-size: 13.5px; font-weight: 700; color: #fff; }
.eco-portal-desc { font-size: 12px; line-height: 1.5; color: var(--muted); }
.eco-portal-cue {
flex: 0 0 auto; margin-left: auto;
font-size: 13px; color: var(--vtext); opacity: 0.55;
transition: transform var(--dur-ui) ease, opacity var(--dur-ui) ease;
}
@media (hover: hover) {
.eco-portal:hover .eco-portal-cue { opacity: 1; transform: translate(2px, -2px); }
.eco-portal:hover .eco-portal-icon { box-shadow: var(--oc-hover-glow); }
.eco-cta:hover {
transform: translateY(-1px);
background: linear-gradient(135deg, #7e6cc4 0%, #5e479e 100%);
box-shadow: 0 12px 28px -8px rgba(109,91,175,0.8), 0 0 0 1px rgba(255,255,255,0.1) inset;
}
}
.eco-link:hover { border-color: rgba(142,61,255,0.4); background: rgba(142,61,255,0.12); color: var(--white); }
.eco-link.primary { background: var(--violet-cta); border-color: var(--violet-cta); color: #fff; }
.eco-link.primary:hover { background: var(--vtext); border-color: var(--vtext); color: var(--bg); }
.eco-link svg { width: 16px; height: 12px; fill: currentColor; }

/* ── FOOTER ──────────────────────────────────────────── */
footer {
Expand Down Expand Up @@ -1294,8 +1402,34 @@
.testimonial-strip { padding: 32px 20px; }
footer { padding: 32px 20px; }

/* Hero: stack the main row vertically; let it flow (no forced viewport
height) so nothing clips on short/tall phones. */
/* Hero stacking moved to the orientation-aware block below —
landscape phones ≥701px wide keep a compact two-column hero. */

/* Grids */
.proof-grid { grid-template-columns: repeat(2, 1fr); }
.card-grid.three, .card-grid.four { grid-template-columns: repeat(2, 1fr); }

/* Sections — uniform 20px gutter (matches hero) */
.content-section, .proof-section { padding: 48px 20px; }
/* Ecosystem card spans edge-to-edge so its inner 20px gutter aligns
with other sections instead of double-indenting */
.ecosystem-section { padding: 48px 0; }
.ecosystem-inner {
grid-template-columns: 1fr;
padding: 32px 20px; gap: 28px;
border-radius: 0;
border-left: none; border-right: none;
}

/* Footer */
.footer-inner { flex-direction: column; align-items: flex-start; gap: 16px; }
.footer-nav { gap: 12px; }
}

/* ── Hero stacking — orientation-aware ──────────────────
Portrait handhelds stack; landscape phones (701-900px wide,
short) keep the two-column composition since it fits. */
@media (max-width: 700px), (max-width: 900px) and (orientation: portrait) {
.hero {
min-height: auto;
padding: 40px 20px;
Expand All @@ -1308,7 +1442,7 @@
}
/* Copy leads, card follows below it on narrow screens. */
.hero-copy { order: 1; }
.hero-lede { max-width: 100%; font-size: 0.9375rem; }
.hero-lede { max-width: 55ch; font-size: 0.9375rem; }
.hero-visual { order: 2; justify-content: flex-start; }
.hero-card { max-width: 100%; }

Expand Down Expand Up @@ -1339,25 +1473,30 @@
.continuity-date { grid-column: 2; grid-row: 1; }
.continuity-node { grid-column: 1; grid-row: 1; align-self: center; }
.continuity-text { grid-column: 2; grid-row: 2; max-width: none; }
}

/* Grids */
.proof-grid { grid-template-columns: repeat(2, 1fr); }
.card-grid.three, .card-grid.four { grid-template-columns: repeat(2, 1fr); }

/* Sections — uniform 20px gutter (matches hero) */
.content-section, .proof-section { padding: 48px 20px; }
/* Ecosystem card spans edge-to-edge so its inner 20px gutter aligns
with other sections instead of double-indenting */
.ecosystem-section { padding: 48px 0; }
.ecosystem-inner {
padding: 32px 20px; gap: 24px;
border-radius: 0;
border-left: none; border-right: none;
/* Landscape phones: compact two-column hero */
@media (min-width: 701px) and (max-width: 900px) and (orientation: landscape) {
.hero {
min-height: auto;
padding: 28px 20px 32px;
gap: 26px;
}

/* Footer */
.footer-inner { flex-direction: column; align-items: flex-start; gap: 16px; }
.footer-nav { gap: 12px; }
.hero-main { grid-template-columns: 1.05fr 0.95fr; gap: 36px; }
.kicker { margin-bottom: 12px; }
h1 { font-size: clamp(1.875rem, 4.6vw, 2.375rem); margin-bottom: 14px; }
.hero-lede { font-size: 0.875rem; margin-bottom: 18px; max-width: 46ch; }
.download-cta { gap: 10px; }
.download-primary { padding: 11px 20px 11px 16px; }
.download-primary-label { font-size: 0.875rem; }
.hero-actions-secondary { margin-top: 10px; }
.hero-card-cmdline { padding: 12px 16px 10px; }
.hero-card-output { margin: 0 16px 12px; }
.output-identity { padding: 11px 14px; }
.output-memory { padding: 10px 14px 12px; gap: 6px; }
.hero-card-roster { padding: 9px 16px 11px; }
.roster-hint { display: none; }
.continuity-text { font-size: 0.7188rem; }
}

@media (max-width: 520px) {
Expand All @@ -1374,6 +1513,7 @@
.testimonial-quote { font-size: 1rem; }
.section-header { margin-bottom: 32px; }
.ecosystem-inner { padding: 24px 20px; }
.ecosystem-portals { grid-template-columns: 1fr; }
.proof-grid { grid-template-columns: 1fr; }
}

Expand Down