Skip to content

Commit a590668

Browse files
fullstackjamfullstackjam
committed
feat(landing): add snapshot feature section to homepage
1 parent 6d2a853 commit a590668

File tree

1 file changed

+161
-2
lines changed

1 file changed

+161
-2
lines changed

‎src/routes/+page.svelte‎

Lines changed: 161 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@
4444

4545
<svelte:head>
4646
<title>OpenBoot - One-line macOS Development Environment Setup</title>
47-
<meta name="description" content="Bootstrap your Mac development environment in minutes. One command to install everything you need - Homebrew, CLI tools, GUI apps, dotfiles, and Oh-My-Zsh." />
47+
<meta name="description" content="Bootstrap your Mac development environment in minutes. One command to install everything you need - Homebrew, CLI tools, GUI apps, dotfiles, and Oh-My-Zsh. Snapshot your current setup and share it with your team." />
4848
</svelte:head>
4949

5050
<header class="site-header">
@@ -94,7 +94,7 @@
9494
<div class="feature-item">Apple Silicon & Intel support</div>
9595
<div class="feature-item">3 curated presets</div>
9696
<div class="feature-item">Oh-My-Zsh + shell aliases</div>
97-
<div class="feature-item">Dotfiles management</div>
97+
<div class="feature-item">Snapshot & share your setup</div>
9898
<div class="feature-item">macOS preferences tuning</div>
9999
<div class="feature-item">Dry-run mode for preview</div>
100100
<div class="feature-item">100% open source</div>
@@ -177,6 +177,43 @@
177177
{/if}
178178
</div>
179179
</section>
180+
181+
<section class="snapshot-section">
182+
<div class="section-header">
183+
<h2 class="section-title">Already Have a Setup?</h2>
184+
<p class="section-subtitle">Capture your current Mac's installed state and share it as a config</p>
185+
</div>
186+
187+
<div class="snapshot-card">
188+
<div class="snapshot-content">
189+
<div class="snapshot-info">
190+
<div class="snapshot-flow">
191+
<p class="snapshot-description">
192+
Run one command to scan your machine — Homebrew formulae & casks, macOS preferences, shell config, git config, dev tools, and VS Code extensions — then upload it as a shareable configuration.
193+
</p>
194+
<p class="snapshot-usecase">Perfect for team leads who want to share their proven setup as a team baseline.</p>
195+
</div>
196+
<div class="snapshot-detects">
197+
<span class="detect-tag">Homebrew formulae & casks</span>
198+
<span class="detect-tag">macOS preferences</span>
199+
<span class="detect-tag">Shell config</span>
200+
<span class="detect-tag">Git config</span>
201+
<span class="detect-tag">Dev tools</span>
202+
<span class="detect-tag">VS Code extensions</span>
203+
</div>
204+
</div>
205+
<div class="snapshot-command-area">
206+
<div class="snapshot-command">
207+
<code>openboot snapshot</code>
208+
<button class="copy-btn" onclick={() => copyCommand('openboot snapshot', 'snapshot')}>
209+
{copied === 'snapshot' ? 'Copied!' : 'Copy'}
210+
</button>
211+
</div>
212+
<span class="snapshot-flags">Also supports <code>--json</code> <code>--local</code> <code>--dry-run</code></span>
213+
</div>
214+
</div>
215+
</div>
216+
</section>
180217
</div>
181218
</main>
182219

@@ -538,6 +575,111 @@
538575
font-size: 0.85rem;
539576
}
540577
578+
.snapshot-section {
579+
margin-bottom: 80px;
580+
}
581+
582+
.snapshot-card {
583+
background: var(--bg-secondary);
584+
border: 1px solid var(--border);
585+
border-radius: 20px;
586+
padding: 36px 40px;
587+
position: relative;
588+
overflow: hidden;
589+
}
590+
591+
.snapshot-card::before {
592+
content: '';
593+
position: absolute;
594+
top: 0;
595+
left: 0;
596+
right: 0;
597+
height: 3px;
598+
background: linear-gradient(90deg, var(--accent), transparent);
599+
}
600+
601+
.snapshot-content {
602+
display: grid;
603+
grid-template-columns: 1fr auto;
604+
gap: 40px;
605+
align-items: center;
606+
}
607+
608+
.snapshot-info {
609+
display: flex;
610+
flex-direction: column;
611+
gap: 20px;
612+
}
613+
614+
.snapshot-description {
615+
color: var(--text-secondary);
616+
font-size: 0.95rem;
617+
line-height: 1.6;
618+
margin: 0;
619+
}
620+
621+
.snapshot-usecase {
622+
color: var(--text-muted);
623+
font-size: 0.85rem;
624+
font-style: italic;
625+
margin: 0;
626+
}
627+
628+
.snapshot-detects {
629+
display: flex;
630+
flex-wrap: wrap;
631+
gap: 8px;
632+
}
633+
634+
.detect-tag {
635+
font-family: 'JetBrains Mono', monospace;
636+
font-size: 0.7rem;
637+
padding: 4px 12px;
638+
background: rgba(255, 255, 255, 0.05);
639+
border: 1px solid rgba(255, 255, 255, 0.08);
640+
border-radius: 6px;
641+
color: var(--text-secondary);
642+
}
643+
644+
.snapshot-command-area {
645+
display: flex;
646+
flex-direction: column;
647+
align-items: flex-end;
648+
gap: 12px;
649+
flex-shrink: 0;
650+
}
651+
652+
.snapshot-command {
653+
background: var(--code-bg);
654+
border: 1px solid var(--border);
655+
border-radius: 12px;
656+
padding: 16px 20px;
657+
display: flex;
658+
align-items: center;
659+
gap: 16px;
660+
white-space: nowrap;
661+
}
662+
663+
.snapshot-command code {
664+
font-family: 'JetBrains Mono', monospace;
665+
font-size: 0.95rem;
666+
color: var(--accent);
667+
}
668+
669+
.snapshot-flags {
670+
font-size: 0.75rem;
671+
color: var(--text-muted);
672+
}
673+
674+
.snapshot-flags code {
675+
font-family: 'JetBrains Mono', monospace;
676+
font-size: 0.7rem;
677+
color: var(--text-secondary);
678+
padding: 2px 6px;
679+
background: rgba(255, 255, 255, 0.05);
680+
border-radius: 4px;
681+
}
682+
541683
@media (max-width: 768px) {
542684
.ascii-logo {
543685
font-size: 6px;
@@ -550,5 +692,22 @@
550692
.presets-container {
551693
grid-template-columns: 1fr;
552694
}
695+
696+
.snapshot-card {
697+
padding: 24px 20px;
698+
}
699+
700+
.snapshot-content {
701+
grid-template-columns: 1fr;
702+
gap: 24px;
703+
}
704+
705+
.snapshot-command-area {
706+
align-items: stretch;
707+
}
708+
709+
.snapshot-flags {
710+
text-align: center;
711+
}
553712
}
554713
</style>

0 commit comments

Comments
 (0)