|
121 | 121 | <div class="panel-install"> |
122 | 122 | <div class="install-command" id="install"> |
123 | 123 | <div class="install-prompt">$</div> |
124 | | - <code>brew tap openbootdotdev/tap && brew install openboot</code> |
125 | | - <button class="copy-btn" onclick={() => copyCommand('brew tap openbootdotdev/tap && brew install openboot', 'main')}> |
| 124 | + <code>brew install openbootdotdev/tap/openboot</code> |
| 125 | + <button class="copy-btn" onclick={() => copyCommand('brew install openbootdotdev/tap/openboot', 'main')}> |
126 | 126 | {#if copied === 'main'} |
127 | 127 | <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> |
128 | 128 | Copied! |
|
133 | 133 | </button> |
134 | 134 | </div> |
135 | 135 | <p class="install-alt">Alternative: <code>curl -fsSL openboot.dev/install.sh | bash</code></p> |
136 | | - </div> |
137 | | - |
138 | | - <div class="panel-divider"></div> |
139 | | - |
140 | | - <div class="panel-usage"> |
141 | | - <div class="usage-option"> |
142 | | - <div class="usage-text"> |
143 | | - <h3 class="usage-title">Set up your Mac</h3> |
144 | | - <p class="usage-desc">Fresh Mac? One command to install 80+ dev tools, dotfiles, and macOS preferences.</p> |
145 | | - </div> |
146 | | - <div class="install-command"> |
147 | | - <div class="install-prompt">$</div> |
148 | | - <code>openboot</code> |
149 | | - <button class="copy-btn" onclick={() => copyCommand('openboot', 'setup')}> |
150 | | - {#if copied === 'setup'} |
151 | | - <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> |
152 | | - Copied! |
153 | | - {:else} |
154 | | - <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> |
155 | | - Copy |
156 | | - {/if} |
157 | | - </button> |
158 | | - </div> |
159 | | - </div> |
160 | | - |
161 | | - <div class="usage-option"> |
162 | | - <div class="usage-text"> |
163 | | - <h3 class="usage-title">Capture your setup</h3> |
164 | | - <p class="usage-desc">Already set up? Snapshot your current tools and share the config with your team.</p> |
165 | | - </div> |
166 | | - <div class="install-command"> |
167 | | - <div class="install-prompt">$</div> |
168 | | - <code>openboot snapshot</code> |
169 | | - <button class="copy-btn" onclick={() => copyCommand('openboot snapshot', 'snapshot')}> |
170 | | - {#if copied === 'snapshot'} |
171 | | - <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> |
172 | | - Copied! |
173 | | - {:else} |
174 | | - <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> |
175 | | - Copy |
176 | | - {/if} |
177 | | - </button> |
178 | | - </div> |
179 | | - </div> |
| 136 | + <p class="install-next">Then run <code>openboot</code> to set up your Mac, or <code>openboot snapshot</code> to capture your current setup.</p> |
180 | 137 | </div> |
181 | 138 | </div> |
182 | 139 | </section> |
|
546 | 503 |
|
547 | 504 | .get-started-panel { |
548 | 505 | margin-top: 56px; |
| 506 | + max-width: 680px; |
| 507 | + margin-left: auto; |
| 508 | + margin-right: auto; |
549 | 509 | background: var(--bg-secondary); |
550 | 510 | border: 1px solid var(--border); |
551 | 511 | border-radius: 16px; |
552 | 512 | overflow: hidden; |
| 513 | + text-align: center; |
553 | 514 | } |
554 | 515 |
|
555 | 516 | .panel-install { |
|
571 | 532 | font-size: 0.73rem; |
572 | 533 | } |
573 | 534 |
|
574 | | - .panel-divider { |
575 | | - height: 1px; |
576 | | - background: var(--border); |
577 | | - margin: 0 28px; |
578 | | - } |
579 | | -
|
580 | | - .panel-usage { |
581 | | - display: grid; |
582 | | - grid-template-columns: 1fr 1fr; |
583 | | - gap: 0; |
584 | | - } |
585 | | -
|
586 | | - .usage-option { |
587 | | - padding: 24px 28px; |
588 | | - display: flex; |
589 | | - flex-direction: column; |
590 | | - gap: 16px; |
591 | | - } |
592 | | -
|
593 | | - .usage-option:first-child { |
594 | | - border-right: 1px solid var(--border); |
595 | | - } |
596 | | -
|
597 | | - .usage-text { |
598 | | - display: flex; |
599 | | - flex-direction: column; |
600 | | - gap: 6px; |
601 | | - flex: 1; |
602 | | - } |
603 | | -
|
604 | | - .usage-title { |
605 | | - font-size: 1.05rem; |
606 | | - font-weight: 700; |
607 | | - letter-spacing: -0.02em; |
608 | | - color: var(--text-primary); |
609 | | - margin: 0; |
| 535 | + .install-next { |
| 536 | + color: var(--text-muted); |
| 537 | + font-size: 0.8rem; |
| 538 | + margin: 8px 0 0; |
610 | 539 | } |
611 | 540 |
|
612 | | - .usage-desc { |
| 541 | + .install-next code { |
| 542 | + font-family: 'JetBrains Mono', monospace; |
| 543 | + font-size: 0.75rem; |
613 | 544 | color: var(--text-secondary); |
614 | | - font-size: 0.85rem; |
615 | | - line-height: 1.55; |
616 | | - margin: 0; |
617 | | - } |
618 | | -
|
619 | | - .usage-option .install-command { |
620 | | - margin-bottom: 0; |
621 | 545 | } |
622 | 546 |
|
623 | 547 | /* ── How It Works ────────────────────────────────── */ |
|
779 | 703 | } |
780 | 704 | } |
781 | 705 |
|
782 | | - @media (max-width: 960px) { |
783 | | - .panel-usage { |
784 | | - grid-template-columns: 1fr; |
785 | | - } |
786 | | -
|
787 | | - .usage-option:first-child { |
788 | | - border-right: none; |
789 | | - border-bottom: 1px solid var(--border); |
790 | | - } |
791 | | - } |
792 | | -
|
793 | 706 | @media (max-width: 768px) { |
794 | 707 | .hero h1 { |
795 | 708 | font-size: 1.75rem; |
|
0 commit comments