Site: responsive hero — stacked full-width CTAs and single-line install chip on mobile

The mobile hero was ragged: the two CTAs sat at different widths, the npm
install chip wrapped to two lines with an orphaned arrow, and the type
scale was tuned for desktop.

- Below 460px the CTAs stack full-bleed; above that they stay inline.
- The install chip is full-width and single-line on phones, switching to
  `npm i` under 400px so it never wraps.
- Tighter hero type/spacing under 640px; board height now viewport-relative.
- Same CTA stacking on the keyword landing pages for consistency.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

Author: nmndwivedi

apps/website/src/layouts/Landing.astro

@@ -33,4 +33,17 @@ const { title, description, jsonLd = null } = Astro.props
   .landing .fine-print { font-size: 13px; color: var(--ink-soft); margin-top: 12px; }
   .landing .more-links { color: var(--ink-soft); font-size: 15px; margin-top: 14px; }
   .landing pre { margin: 0; }
+
+  @media (max-width: 640px) {
+    .landing section { margin-top: 56px; }
+    .landing .page-head { margin-top: 30px; }
+    .landing h1 { font-size: clamp(29px, 8.4vw, 38px); line-height: 1.14; }
+    .landing .lede { font-size: 16px; margin-bottom: 24px; }
+  }
+  /* Same as the home hero: below ~460px the buttons stack full-bleed
+     instead of wrapping to ragged widths. */
+  @media (max-width: 460px) {
+    .landing .actions { display: grid; grid-template-columns: 1fr; gap: 10px; }
+    .landing .btn { padding: 13px 20px; text-align: center; font-size: 16px; }
+  }
 </style>

apps/website/src/pages/index.astro

@@ -87,7 +87,7 @@ const jsonLd = {
         </div>
         <a class="install" href="https://www.npmjs.com/package/@quickdrawjs/react" rel="noopener" title="View @quickdrawjs/react on npm">
           <span class="npm-mark" aria-hidden="true">npm</span>
-          <span class="install-cmd"><span class="prompt">$</span> npm install @quickdrawjs/react</span>
+          <span class="install-cmd"><span class="prompt">$</span> <span class="cmd-long">npm install @quickdrawjs/react</span><span class="cmd-short">npm i @quickdrawjs/react</span></span>
           <span class="install-go" aria-hidden="true">→</span>
         </a>
       </div>
@@ -338,7 +338,8 @@ createQuickdraw({
   }
   .install:hover { text-decoration: none; border-color: var(--ink-soft); background: #fff; }
   .install:hover .install-go { transform: translateX(3px); color: var(--accent-ink); }
-  .install-cmd { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
+  .install-cmd { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; white-space: nowrap; }
+  .cmd-short { display: none; }
   .install .prompt { color: var(--accent); user-select: none; margin-right: 6px; }
   .install-go { transition: transform 140ms ease; color: var(--ink-soft); }
   .npm-mark {
@@ -435,8 +436,40 @@ createQuickdraw({
   .cta-final .actions { justify-content: center; }
 
   @media (max-width: 880px) {
-    .hero { grid-template-columns: 1fr; gap: 32px; }
+    .hero { grid-template-columns: 1fr; gap: 34px; margin-top: 46px; }
     #hero-board { height: 380px; }
-    h1 { font-size: clamp(32px, 9vw, 42px); }
+    h1 { font-size: clamp(32px, 6.2vw, 44px); }
+    .lede { max-width: 52ch; }
+  }
+
+  @media (max-width: 640px) {
+    section { margin-top: 68px; }
+    .hero { margin-top: 30px; gap: 26px; }
+    .eyebrow { font-size: 11.5px; letter-spacing: 0.09em; margin: 0 0 12px; }
+    h1 { font-size: clamp(29px, 8.4vw, 38px); line-height: 1.14; margin-bottom: 14px; }
+    .scribble { background-size: 100% 7px; padding-bottom: 6px; }
+    .lede { font-size: 16px; max-width: none; margin-bottom: 24px; }
+    .install { margin-top: 20px; }
+    #hero-board { height: clamp(300px, 52vh, 400px); }
+    .board-hint { margin-top: 10px; }
+    .support-card { padding: 42px 22px 40px; }
+  }
+
+  /* Below ~460px the two buttons no longer sit side by side without
+     wrapping to ragged widths — stack them full-bleed instead. */
+  @media (max-width: 460px) {
+    .actions { display: grid; grid-template-columns: 1fr; gap: 10px; }
+    .btn { padding: 13px 20px; text-align: center; font-size: 16px; }
+    .btn.github { justify-content: center; }
+    .install {
+      display: flex; width: 100%;
+      padding: 11px 13px; gap: 10px; font-size: 12.5px;
+    }
+    .install-go { margin-left: auto; }
+  }
+
+  @media (max-width: 400px) {
+    .cmd-long { display: none; }
+    .cmd-short { display: inline; }
   }
 </style>