|
35 | 35 | <section class="hero"> |
36 | 36 | <div class="hero-content"> |
37 | 37 | <h1 class="hero-title"> |
38 | | - Fresh Mac? Don't spend<br />3 hours setting it up |
| 38 | + Fresh Mac? Don't spend 3 hours <span style="white-space:nowrap">setting it up</span> |
39 | 39 | </h1> |
40 | 40 | <p class="hero-subtitle"> |
41 | 41 | One command installs Git, Node, Docker, VS Code, shell config, dotfiles—everything you'd normally spend your first day installing. Then snapshot your setup and share it with your team so they get the same thing. |
|
69 | 69 | <code>curl -fsSL openboot.dev/install.sh | bash</code> |
70 | 70 | <button class="copy-btn" onclick={() => copyCommand('curl -fsSL openboot.dev/install.sh | bash', 'main')}> |
71 | 71 | {#if copied === 'main'} |
72 | | - <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"> |
| 72 | + <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"> |
73 | 73 | <polyline points="20 6 9 17 4 12"/> |
74 | 74 | </svg> |
75 | | - Copied |
76 | 75 | {:else} |
77 | | - <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| 76 | + <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
78 | 77 | <rect x="9" y="9" width="13" height="13" rx="2" ry="2"/> |
79 | 78 | <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/> |
80 | 79 | </svg> |
81 | | - Copy |
82 | 80 | {/if} |
83 | 81 | </button> |
84 | 82 | </div> |
85 | 83 | </div> |
86 | 84 | <p class="install-alt"> |
87 | | - Want to inspect first? <code>curl -fsSL openboot.dev/install.sh -o install.sh && cat install.sh && bash install.sh</code> |
88 | | - </p> |
89 | | - <p class="install-alt"> |
90 | | - Already have Homebrew? <code>brew install openbootdotdev/tap/openboot</code> |
| 85 | + Have Homebrew? <code>brew install openbootdotdev/tap/openboot</code> |
91 | 86 | </p> |
92 | 87 | </div> |
93 | 88 | </div> |
|
300 | 295 | .hero { |
301 | 296 | padding: 80px 0 60px; |
302 | 297 | display: grid; |
303 | | - grid-template-columns: 1fr 1.2fr; |
| 298 | + grid-template-columns: 1.2fr 1fr; |
304 | 299 | gap: 64px; |
305 | 300 | align-items: center; |
306 | 301 | position: relative; |
|
429 | 424 | color: var(--text-primary); |
430 | 425 | flex: 1; |
431 | 426 | min-width: 0; |
| 427 | + white-space: nowrap; |
432 | 428 | } |
433 | 429 |
|
434 | 430 | .copy-btn { |
435 | | - background: var(--accent); |
436 | | - border: none; |
437 | | - color: #000; |
438 | | - padding: 10px 18px; |
| 431 | + background: transparent; |
| 432 | + border: 1px solid var(--border); |
| 433 | + color: var(--text-secondary); |
| 434 | + padding: 8px; |
439 | 435 | border-radius: 8px; |
440 | | - font-size: 0.85rem; |
441 | | - font-weight: 600; |
442 | 436 | cursor: pointer; |
443 | 437 | transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); |
444 | | - white-space: nowrap; |
445 | 438 | display: inline-flex; |
446 | 439 | align-items: center; |
447 | | - gap: 6px; |
| 440 | + justify-content: center; |
448 | 441 | flex-shrink: 0; |
449 | | - box-shadow: 0 0 20px var(--accent-glow); |
450 | 442 | } |
451 | 443 |
|
452 | 444 | .copy-btn:hover { |
453 | | - background: var(--accent-hover); |
454 | | - transform: translateY(-2px) scale(1.02); |
455 | | - box-shadow: 0 0 30px var(--accent-glow); |
| 445 | + border-color: var(--accent); |
| 446 | + color: var(--accent); |
| 447 | + background: var(--accent-glow); |
456 | 448 | } |
457 | 449 |
|
458 | 450 | .install-alt { |
|
905 | 897 | } |
906 | 898 |
|
907 | 899 | .install-command code { |
908 | | - font-size: 0.8rem; |
| 900 | + font-size: 0.72rem; |
909 | 901 | } |
910 | 902 |
|
911 | 903 | .install-prompt { |
912 | 904 | font-size: 1rem; |
913 | 905 | } |
914 | 906 |
|
915 | 907 | .copy-btn { |
916 | | - padding: 8px 14px; |
917 | | - font-size: 0.8rem; |
| 908 | + padding: 8px 12px; |
| 909 | + font-size: 0.75rem; |
918 | 910 | } |
919 | 911 |
|
920 | 912 | .steps-grid { |
|
0 commit comments