Skip to content

Commit 5725468

Browse files
fullstackjamfullstackjam
committed
docs: update landing page hero cards with Homebrew install + usage layout
1 parent 503babf commit 5725468

File tree

1 file changed

+65
-38
lines changed

1 file changed

+65
-38
lines changed

‎src/routes/+page.svelte‎

Lines changed: 65 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -118,8 +118,8 @@
118118
</div>
119119

120120
<div class="hero-actions">
121-
<div class="hero-action-card">
122-
<div class="hero-action-label">Installation</div>
121+
<div class="hero-action-card hero-action-install">
122+
<div class="hero-action-label">Install</div>
123123
<h3 class="hero-action-title">Install OpenBoot</h3>
124124
<p class="hero-action-desc">Install via Homebrew (recommended) for easy updates, or use the one-line installer as a fallback.</p>
125125
<div class="install-command" id="install">
@@ -135,40 +135,48 @@
135135
{/if}
136136
</button>
137137
</div>
138-
<p class="hero-action-desc" style="margin-top: 12px; font-size: 0.8rem; opacity: 0.7;">
139-
Alternative: <code style="font-size: 0.75rem;">curl -fsSL openboot.dev/install.sh | bash</code>
138+
<p class="hero-action-alt">
139+
Alternative: <code>curl -fsSL openboot.dev/install.sh | bash</code>
140140
</p>
141141
</div>
142142

143-
<div class="hero-action-card hero-action-snapshot">
144-
<div class="hero-action-label">Usage</div>
145-
<h3 class="hero-action-title">Set up or snapshot</h3>
146-
<p class="hero-action-desc">Run <code>openboot</code> to install dev tools on a fresh Mac, or <code>openboot snapshot</code> to capture your current setup.</p>
147-
<div class="install-command">
148-
<div class="install-prompt">$</div>
149-
<code>openboot</code>
150-
<button class="copy-btn" onclick={() => copyCommand('openboot', 'setup')}>
151-
{#if copied === 'setup'}
152-
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>
153-
Copied!
154-
{:else}
155-
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
156-
Copy
157-
{/if}
158-
</button>
143+
<div class="hero-action-pair">
144+
<div class="hero-action-card">
145+
<div class="hero-action-label">Set Up</div>
146+
<h3 class="hero-action-title">Set up your Mac</h3>
147+
<p class="hero-action-desc">Fresh Mac? One command to install 80+ dev tools, dotfiles, and macOS preferences.</p>
148+
<div class="install-command">
149+
<div class="install-prompt">$</div>
150+
<code>openboot</code>
151+
<button class="copy-btn" onclick={() => copyCommand('openboot', 'setup')}>
152+
{#if copied === 'setup'}
153+
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>
154+
Copied!
155+
{:else}
156+
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
157+
Copy
158+
{/if}
159+
</button>
160+
</div>
159161
</div>
160-
<div class="install-command" style="margin-top: 12px;">
161-
<div class="install-prompt">$</div>
162-
<code>openboot snapshot</code>
163-
<button class="copy-btn" onclick={() => copyCommand('openboot snapshot', 'snapshot')}>
164-
{#if copied === 'snapshot'}
165-
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>
166-
Copied!
167-
{:else}
168-
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
169-
Copy
170-
{/if}
171-
</button>
162+
163+
<div class="hero-action-card">
164+
<div class="hero-action-label">Snapshot</div>
165+
<h3 class="hero-action-title">Capture your setup</h3>
166+
<p class="hero-action-desc">Already set up? Snapshot your current tools and share the config with your team.</p>
167+
<div class="install-command">
168+
<div class="install-prompt">$</div>
169+
<code>openboot snapshot</code>
170+
<button class="copy-btn" onclick={() => copyCommand('openboot snapshot', 'snapshot')}>
171+
{#if copied === 'snapshot'}
172+
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>
173+
Copied!
174+
{:else}
175+
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
176+
Copy
177+
{/if}
178+
</button>
179+
</div>
172180
</div>
173181
</div>
174182
</div>
@@ -535,11 +543,11 @@
535543
background: #1e1e2e;
536544
}
537545
538-
/* ── Hero Actions (Dual CTA Cards) ──────────────── */
546+
/* ── Hero Actions ────────────────────────────────── */
539547
540548
.hero-actions {
541-
display: grid;
542-
grid-template-columns: 1fr 1fr;
549+
display: flex;
550+
flex-direction: column;
543551
gap: 20px;
544552
margin-top: 48px;
545553
}
@@ -562,16 +570,35 @@
562570
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
563571
}
564572
565-
.hero-action-card:first-child {
573+
/* Full-width install card */
574+
.hero-action-install {
566575
border-color: rgba(34, 197, 94, 0.3);
567576
background: linear-gradient(135deg, var(--bg-secondary) 0%, rgba(34, 197, 94, 0.04) 100%);
568577
}
569578
570-
.hero-action-card:first-child:hover {
579+
.hero-action-install:hover {
571580
border-color: rgba(34, 197, 94, 0.5);
572581
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2), 0 0 20px rgba(34, 197, 94, 0.08);
573582
}
574583
584+
.hero-action-alt {
585+
color: var(--text-secondary);
586+
font-size: 0.8rem;
587+
opacity: 0.7;
588+
margin: 0;
589+
}
590+
591+
.hero-action-alt code {
592+
font-size: 0.75rem;
593+
}
594+
595+
/* Two-column pair for setup / snapshot */
596+
.hero-action-pair {
597+
display: grid;
598+
grid-template-columns: 1fr 1fr;
599+
gap: 20px;
600+
}
601+
575602
.hero-action-label {
576603
font-family: 'JetBrains Mono', monospace;
577604
font-size: 0.65rem;
@@ -775,7 +802,7 @@
775802
}
776803
777804
@media (max-width: 960px) {
778-
.hero-actions {
805+
.hero-action-pair {
779806
grid-template-columns: 1fr;
780807
}
781808
}

0 commit comments

Comments
 (0)