Skip to content

Commit 9dec185

Browse files
fullstackjamfullstackjam
committed
revamp landing page: animated demo, How It Works section, simplified CTAs and Teams
1 parent e61fa0c commit 9dec185

File tree

2 files changed

+132
-126
lines changed

2 files changed

+132
-126
lines changed

‎src/routes/+page.svelte‎

Lines changed: 131 additions & 126 deletions
Original file line numberDiff line numberDiff line change
@@ -95,72 +95,78 @@
9595
</button>
9696
</div>
9797

98-
<div class="cta-buttons">
99-
{#if $auth.loading}
100-
<span class="btn-outlined btn-placeholder">...</span>
101-
{:else if $auth.user}
102-
<a href="/dashboard" class="btn-outlined">
103-
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
104-
<rect x="3" y="3" width="7" height="7" /><rect x="14" y="3" width="7" height="7" />
105-
<rect x="14" y="14" width="7" height="7" /><rect x="3" y="14" width="7" height="7" />
106-
</svg>
107-
Dashboard
108-
</a>
109-
{:else}
110-
<a href="/api/auth/login" class="btn-outlined">
111-
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
112-
<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
113-
</svg>
114-
Sign in
115-
</a>
116-
{/if}
117-
<a href="/docs" class="btn-outlined">
98+
<div class="cta-buttons">
99+
{#if $auth.user}
100+
<a href="/dashboard" class="btn-outlined">
118101
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
119-
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/><polyline points="10 9 9 9 8 9"/>
102+
<rect x="3" y="3" width="7" height="7" /><rect x="14" y="3" width="7" height="7" />
103+
<rect x="14" y="14" width="7" height="7" /><rect x="3" y="14" width="7" height="7" />
120104
</svg>
121-
Docs
122-
</a>
123-
<a href="https://github.com/openbootdotdev/openboot" class="btn-outlined" target="_blank" rel="noopener">
124-
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
125-
<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
126-
</svg>
127-
View on GitHub
128-
{#if starCount > 0}
129-
<span class="star-badge">{starCount}</span>
130-
{/if}
105+
Dashboard
131106
</a>
132-
</div>
107+
{/if}
108+
<a href="/docs" class="btn-outlined">
109+
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
110+
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/><polyline points="10 9 9 9 8 9"/>
111+
</svg>
112+
Docs
113+
</a>
114+
<a href="https://github.com/openbootdotdev/openboot" class="btn-outlined" target="_blank" rel="noopener">
115+
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
116+
<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
117+
</svg>
118+
GitHub
119+
{#if starCount > 0}
120+
<span class="star-badge">{starCount}</span>
121+
{/if}
122+
</a>
123+
</div>
133124

134125
<p class="privacy-note">No analytics. No telemetry. Your data stays on your machine.</p>
135126
</div>
136127

137-
<div class="hero-right">
138-
<div class="terminal-window">
139-
<div class="terminal-titlebar">
140-
<div class="terminal-dots">
141-
<span class="dot dot-red"></span>
142-
<span class="dot dot-yellow"></span>
143-
<span class="dot dot-green"></span>
144-
</div>
145-
<span class="terminal-title">openboot</span>
146-
<div class="terminal-dots-spacer"></div>
147-
</div>
148-
<div class="terminal-body"><pre class="terminal-content"><span class="t-accent"> ⚡ OpenBoot</span> <span class="t-muted">— Developer Environment Setup</span>
149-
150-
<span class="t-border">┌─</span> <span class="t-label">Formulae</span> <span class="t-border">─────────────────────────────────┐</span>
151-
<span class="t-border">│</span> <span class="t-check">✓</span> <span class="t-text">ripgrep</span> <span class="t-check">✓</span> <span class="t-text">fd</span> <span class="t-check">✓</span> <span class="t-text">bat</span> <span class="t-border">│</span>
152-
<span class="t-border">│</span> <span class="t-check">✓</span> <span class="t-text">fzf</span> <span class="t-check">✓</span> <span class="t-text">lazygit</span> <span class="t-check">✓</span> <span class="t-text">gh</span> <span class="t-border">│</span>
153-
<span class="t-border">│</span> <span class="t-check">✓</span> <span class="t-text">jq</span> <span class="t-check">✓</span> <span class="t-text">htop</span> <span class="t-check">✓</span> <span class="t-text">tmux</span> <span class="t-border">│</span>
154-
<span class="t-border">└────────────────────────────────────────────┘</span>
155-
156-
<span class="t-border">┌─</span> <span class="t-label">Casks</span> <span class="t-border">────────────────────────────────────┐</span>
157-
<span class="t-border">│</span> <span class="t-unchecked">◻</span> <span class="t-text">VS Code</span> <span class="t-check">✓</span> <span class="t-text">Chrome</span> <span class="t-check">✓</span> <span class="t-text">OrbStack</span> <span class="t-border">│</span>
158-
<span class="t-border">│</span> <span class="t-check">✓</span> <span class="t-text">Warp</span> <span class="t-check">✓</span> <span class="t-text">Raycast</span> <span class="t-unchecked">◻</span> <span class="t-text">Figma</span> <span class="t-border">│</span>
159-
<span class="t-border">└────────────────────────────────────────────┘</span>
160-
161-
<span class="t-help">← → tab · space toggle · enter confirm</span></pre>
128+
<div class="hero-right">
129+
<div class="demo-window">
130+
<div class="demo-titlebar">
131+
<div class="terminal-dots">
132+
<span class="dot dot-red"></span>
133+
<span class="dot dot-yellow"></span>
134+
<span class="dot dot-green"></span>
162135
</div>
136+
<span class="terminal-title">openboot</span>
137+
<div class="terminal-dots-spacer"></div>
163138
</div>
139+
<img src="/demo.svg" alt="OpenBoot demo — installing dev tools in one command" class="demo-svg" loading="eager" />
140+
</div>
141+
</div>
142+
</div>
143+
</section>
144+
145+
<section class="how-it-works">
146+
<div class="section-header">
147+
<h2 class="section-title">How It Works</h2>
148+
<p class="section-subtitle">From zero to coding in 4 steps</p>
149+
</div>
150+
<div class="steps-grid">
151+
<div class="step">
152+
<div class="step-number">1</div>
153+
<h3>Run one command</h3>
154+
<p>Paste the curl command in Terminal. OpenBoot downloads and launches automatically.</p>
155+
</div>
156+
<div class="step">
157+
<div class="step-number">2</div>
158+
<h3>Pick your tools</h3>
159+
<p>Choose a preset or use the interactive TUI to toggle exactly what you want.</p>
160+
</div>
161+
<div class="step">
162+
<div class="step-number">3</div>
163+
<h3>Grab a coffee</h3>
164+
<p>OpenBoot installs Homebrew, CLI tools, apps, dotfiles, and configures macOS for you.</p>
165+
</div>
166+
<div class="step">
167+
<div class="step-number">4</div>
168+
<h3>Start building</h3>
169+
<p>Your dev environment is ready. Share your config with teammates so they can do the same.</p>
164170
</div>
165171
</div>
166172
</section>
@@ -205,7 +211,7 @@
205211
<section class="beyond-section">
206212
<div class="section-header">
207213
<h2 class="section-title">For Teams & Power Users</h2>
208-
<p class="section-subtitle">Snapshot your existing setup or build a custom config for your entire team</p>
214+
<p class="section-subtitle">Go beyond presets</p>
209215
</div>
210216

211217
<div class="beyond-grid">
@@ -215,15 +221,7 @@
215221
<p class="beyond-card-desc">
216222
Scan your existing machine -- Homebrew packages, macOS preferences, shell & git config, and dev tools -- then upload it as a shareable configuration.
217223
</p>
218-
<p class="beyond-card-hint">Perfect for team leads who want to share their proven setup as a baseline.</p>
219-
<div class="snapshot-detects">
220-
<span class="detect-tag">Homebrew formulae & casks</span>
221-
<span class="detect-tag">macOS preferences</span>
222-
<span class="detect-tag">Shell config</span>
223-
<span class="detect-tag">Git config</span>
224-
<span class="detect-tag">Dev tools</span>
225-
</div>
226-
<div class="beyond-command">
224+
<div class="beyond-command">
227225
<div class="beyond-command-prompt">$</div>
228226
<code>curl -fsSL openboot.dev/install.sh | bash -s -- snapshot</code>
229227
<button class="copy-btn" onclick={() => copyCommand('curl -fsSL https://openboot.dev/install.sh | bash -s -- snapshot', 'snapshot')}>
@@ -511,11 +509,6 @@
511509
background: var(--bg-tertiary);
512510
}
513511
514-
.btn-placeholder {
515-
cursor: default;
516-
opacity: 0.5;
517-
}
518-
519512
.star-badge {
520513
display: inline-flex;
521514
align-items: center;
@@ -542,15 +535,15 @@
542535
opacity: 0.7;
543536
}
544537
545-
/* ── Terminal Mockup ──────────────────────────────── */
538+
/* ── Demo Window ─────────────────────────────────── */
546539
547540
.hero-right {
548541
display: flex;
549542
justify-content: center;
550543
align-items: center;
551544
}
552545
553-
.terminal-window {
546+
.demo-window {
554547
width: 100%;
555548
max-width: 520px;
556549
border-radius: 12px;
@@ -562,7 +555,7 @@
562555
0 0 60px rgba(34, 197, 94, 0.06);
563556
}
564557
565-
.terminal-titlebar {
558+
.demo-titlebar {
566559
display: flex;
567560
align-items: center;
568561
justify-content: space-between;
@@ -597,29 +590,66 @@
597590
width: 52px;
598591
}
599592
600-
.terminal-body {
601-
padding: 20px;
602-
overflow-x: auto;
593+
.demo-svg {
594+
width: 100%;
595+
display: block;
596+
}
597+
598+
/* ── How It Works ────────────────────────────────── */
599+
600+
.how-it-works {
601+
margin-bottom: 80px;
602+
}
603+
604+
.steps-grid {
605+
display: grid;
606+
grid-template-columns: repeat(4, 1fr);
607+
gap: 24px;
608+
}
609+
610+
.step {
611+
text-align: center;
612+
padding: 28px 20px;
613+
background: var(--bg-secondary);
614+
border: 1px solid var(--border);
615+
border-radius: 16px;
616+
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
617+
}
618+
619+
.step:hover {
620+
border-color: var(--border-hover);
621+
transform: translateY(-4px);
622+
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
603623
}
604624
605-
.terminal-content {
625+
.step-number {
626+
width: 36px;
627+
height: 36px;
628+
border-radius: 50%;
629+
background: var(--accent);
630+
color: #000;
606631
font-family: 'JetBrains Mono', monospace;
607-
font-size: 0.72rem;
608-
line-height: 1.65;
609-
margin: 0;
610-
white-space: pre;
611-
color: #c0caf5;
632+
font-weight: 700;
633+
font-size: 0.9rem;
634+
display: flex;
635+
align-items: center;
636+
justify-content: center;
637+
margin: 0 auto 16px;
638+
}
639+
640+
.step h3 {
641+
font-size: 1rem;
642+
font-weight: 600;
643+
margin-bottom: 8px;
644+
letter-spacing: -0.01em;
612645
}
613646
614-
/* Terminal text colors — always dark theme */
615-
.t-accent { color: #22c55e; font-weight: 700; }
616-
.t-muted { color: #565f89; }
617-
.t-border { color: #3b3f52; }
618-
.t-label { color: #7aa2f7; font-weight: 600; }
619-
.t-check { color: #22c55e; }
620-
.t-unchecked { color: #565f89; }
621-
.t-text { color: #c0caf5; }
622-
.t-help { color: #565f89; font-size: 0.68rem; }
647+
.step p {
648+
color: var(--text-secondary);
649+
font-size: 0.85rem;
650+
line-height: 1.5;
651+
margin: 0;
652+
}
623653
624654
/* ── Presets Section ──────────────────────────────── */
625655
@@ -854,35 +884,6 @@
854884
margin: 0;
855885
}
856886
857-
.beyond-card-hint {
858-
color: var(--text-muted);
859-
font-size: 0.8rem;
860-
font-style: italic;
861-
margin: 0;
862-
}
863-
864-
.snapshot-detects {
865-
display: flex;
866-
flex-wrap: wrap;
867-
gap: 6px;
868-
margin-top: 4px;
869-
}
870-
871-
.detect-tag {
872-
font-family: 'JetBrains Mono', monospace;
873-
font-size: 0.68rem;
874-
padding: 4px 10px;
875-
background: var(--bg-tertiary);
876-
border: 1px solid var(--border);
877-
border-radius: 20px;
878-
color: var(--text-secondary);
879-
transition: border-color 0.2s;
880-
}
881-
882-
.beyond-card:hover .detect-tag {
883-
border-color: var(--border-hover);
884-
}
885-
886887
.beyond-command {
887888
background: var(--code-bg);
888889
border: 1px solid var(--border);
@@ -1009,10 +1010,14 @@
10091010
order: -1;
10101011
}
10111012
1012-
.terminal-window {
1013+
.demo-window {
10131014
max-width: 480px;
10141015
}
10151016
1017+
.steps-grid {
1018+
grid-template-columns: repeat(2, 1fr);
1019+
}
1020+
10161021
.hero h1 {
10171022
font-size: 2.2rem;
10181023
}
@@ -1065,12 +1070,12 @@
10651070
font-size: 0.7rem;
10661071
}
10671072
1068-
.terminal-window {
1073+
.demo-window {
10691074
max-width: 100%;
10701075
}
10711076
1072-
.terminal-content {
1073-
font-size: 0.6rem;
1077+
.steps-grid {
1078+
grid-template-columns: 1fr;
10741079
}
10751080
10761081
.install-command code {

‎static/demo.svg‎

Lines changed: 1 addition & 0 deletions
Loading

0 commit comments

Comments
 (0)