feat(website): add Get Started section and slim down hero

website/src/components/GetStarted.astro

@@ -0,0 +1,18 @@
+---
+import InstallCommand from '@/components/ui/InstallCommand.astro';
+import SectionHeading from '@/components/ui/SectionHeading.astro';
+import type { GetStartedData } from '@/data/landing-page';
+
+type Props = GetStartedData;
+
+const { eyebrow, heading, description, install } = Astro.props;
+---
+
+<section id="get-started" class="relative scroll-mt-20 py-20 md:py-28" data-reveal aria-label="Quick Start">
+  <div class="mx-auto max-w-6xl px-5 md:px-8">
+    <SectionHeading align="center" eyebrow={eyebrow} heading={heading} subheading={description} />
+    <div class="mx-auto max-w-3xl">
+      <InstallCommand install={install} />
+    </div>
+  </div>
+</section>

website/src/components/Hero.astro

@@ -1,7 +1,6 @@
 ---
 import Contributors from '@/components/Contributors.astro';
 import Icon from '@/components/ui/Icon.astro';
-import InstallCommand from '@/components/ui/InstallCommand.astro';
 import LinkButton from '@/components/ui/LinkButton.astro';
 import type { GitHubContributor } from '@/lib/github';
 import { Code } from 'astro:components';
@@ -10,17 +9,10 @@ interface Props {
   badge?: string;
   title?: string;
   description?: string;
-  installCommands: {
-    posix: string;
-    windows: string;
-  };
-  installPlatformLabel: string;
-  posixInstallLabel: string;
-  windowsInstallLabel: string;
-  copyInstallCommandLabel: string;
-  copiedInstallCommandLabel: string;
   primaryHref: string;
   primaryLabel?: string;
+  secondaryHref?: string;
+  secondaryLabel?: string;
   contributorsLabel?: string;
   contributors?: GitHubContributor[];
 }
@@ -29,14 +21,10 @@ const {
   badge,
   title,
   description,
-  installCommands,
-  installPlatformLabel,
-  posixInstallLabel,
-  windowsInstallLabel,
-  copyInstallCommandLabel,
-  copiedInstallCommandLabel,
   primaryHref,
   primaryLabel,
+  secondaryHref,
+  secondaryLabel,
   contributorsLabel,
   contributors = [],
 }: Props = Astro.props;
@@ -61,136 +49,6 @@ class MyPlugin:
             prompt, model=state.get("model")
         )
         return reply.text`;
-
-const heroCodeScopes = {
-  keyword: [
-    'keyword.control',
-    'keyword.operator',
-    'storage.type',
-    'storage.modifier',
-    'keyword.other.unit.python',
-  ],
-  decorator: [
-    'entity.name.function.decorator',
-    'entity.name.function.decorator.python',
-    'meta.annotation',
-    'meta.annotation punctuation',
-  ],
-  functionName: [
-    'entity.name.function',
-    'meta.function.python entity.name.function.python',
-    'meta.function-call.generic.python',
-  ],
-  callable: [
-    'support.function',
-    'support.function.builtin',
-    'support.type.property-name',
-    'meta.function-call.python',
-  ],
-  parameter: [
-    'variable.parameter',
-    'variable.parameter.function.python',
-    'meta.function-call.arguments.python',
-  ],
-  string: [
-    'string',
-    'string.quoted',
-    'comment.block.documentation',
-    'punctuation.definition.string',
-  ],
-  punctuation: [
-    'punctuation',
-    'meta.brace',
-    'meta.delimiter',
-    'entity.name.type',
-  ],
-};
-
-function createHeroCodeTheme(name, type, palette) {
-  return {
-    name,
-    type,
-    colors: {
-      'editor.background': palette.background,
-      'editor.foreground': palette.foreground,
-    },
-    tokenColors: [
-      {
-        settings: {
-          foreground: palette.foreground,
-        },
-      },
-      {
-        scope: heroCodeScopes.keyword,
-        settings: {
-          foreground: palette.keyword,
-          fontStyle: 'italic',
-        },
-      },
-      {
-        scope: heroCodeScopes.decorator,
-        settings: {
-          foreground: palette.decorator,
-        },
-      },
-      {
-        scope: heroCodeScopes.functionName,
-        settings: {
-          foreground: palette.functionName,
-        },
-      },
-      {
-        scope: heroCodeScopes.callable,
-        settings: {
-          foreground: palette.callable,
-        },
-      },
-      {
-        scope: heroCodeScopes.parameter,
-        settings: {
-          foreground: palette.parameter,
-        },
-      },
-      {
-        scope: heroCodeScopes.string,
-        settings: {
-          foreground: palette.string,
-        },
-      },
-      {
-        scope: heroCodeScopes.punctuation,
-        settings: {
-          foreground: palette.punctuation,
-        },
-      },
-    ],
-  };
-}
-
-const heroCodeThemes = {
-  light: createHeroCodeTheme('bub-hero-light', 'light', {
-    background: '#F6F7F9',
-    foreground: '#403F53',
-    keyword: '#8844AE',
-    decorator: '#3B61B0',
-    functionName: '#3B61B0',
-    callable: '#096E72',
-    parameter: '#096E72',
-    string: '#984E4D',
-    punctuation: '#111111',
-  }),
-  dark: createHeroCodeTheme('bub-hero-dark', 'dark', {
-    background: '#252525',
-    foreground: '#D6DEEB',
-    keyword: '#C792EA',
-    decorator: '#C5E478',
-    functionName: '#82AAFF',
-    callable: '#B2CCD6',
-    parameter: '#7FDBCA',
-    string: '#ECC48D',
-    punctuation: '#D9F5DD',
-  }),
-};
 ---
 
 <section class="pb-20 pt-14 md:pb-28 md:pt-20" aria-label="Hero">
@@ -222,23 +80,16 @@ const heroCodeThemes = {
           </div>
         )}
 
-        <div class="mt-6 max-w-xl">
-          <InstallCommand
-            commands={installCommands}
-            platformLabel={installPlatformLabel}
-            posixLabel={posixInstallLabel}
-            windowsLabel={windowsInstallLabel}
-            copyLabel={copyInstallCommandLabel}
-            copiedLabel={copiedInstallCommandLabel}
-          />
-        </div>
-
         <!-- CTAs -->
-        <div class="mt-3 flex flex-col gap-3 sm:flex-row">
+        <div class="mt-8 flex flex-col gap-3 sm:flex-row">
           <LinkButton href={primaryHref} class="w-full px-6 py-3 sm:w-auto">
             {primaryLabel}
-            <Icon name="arrowUpRight" size={15} aria-hidden="true" />
           </LinkButton>
+          {secondaryHref && (
+            <LinkButton href={secondaryHref} variant="secondary" class="w-full px-6 py-3 sm:w-auto">
+              {secondaryLabel}
+            </LinkButton>
+          )}
         </div>
       </div>
 
@@ -252,10 +103,7 @@ const heroCodeThemes = {
             <Code
               code={exampleCode}
               lang="python"
-              themes={{
-                light: heroCodeThemes.light,
-                dark: heroCodeThemes.dark,
-              }}
+              themes={{ light: 'night-owl-light', dark: 'night-owl' }}
               defaultColor="light"
             />
           </figure>

website/src/components/ui/InstallCommand.astro

@@ -1,66 +1,64 @@
 ---
 import Icon from '@/components/ui/Icon.astro';
+import type { InstallCommandData } from '@/data/landing-page';
+import { Code } from 'astro:components';
 
 interface Props {
-  commands: {
-    posix: string;
-    windows: string;
-  };
-  platformLabel: string;
-  posixLabel: string;
-  windowsLabel: string;
-  copyLabel: string;
-  copiedLabel: string;
+  install: InstallCommandData;
 }
 
-const { commands, platformLabel, posixLabel, windowsLabel, copyLabel, copiedLabel } = Astro.props;
-const installOptions = [
-  { id: 'posix', label: posixLabel, command: commands.posix },
-  { id: 'windows', label: windowsLabel, command: commands.windows },
-];
+const { install } = Astro.props;
+const { platforms, copyLabel, copiedLabel } = install;
 ---
 
 <div
-  class="min-w-0 border border-border bg-card/80 shadow-[var(--site-shadow)]"
+  class="install-command min-w-0 border border-border bg-card text-left shadow-(--site-shadow)"
   data-install-command
-  data-command={commands.posix}
+  data-command={platforms[0]?.command ?? ''}
   data-copied-label={copiedLabel}
 >
-  <div
-    class="flex border-b border-border"
-    role="group"
-    aria-label={platformLabel}
-  >
-    {installOptions.map((option, index) => (
+  <div class="flex border-b border-border bg-secondary">
+    {platforms.map((platform, index) => (
       <button
         type="button"
         class:list={[
-          'install-platform min-h-11 w-1/2 cursor-pointer px-3 font-mono text-xs font-medium',
-          'text-muted-foreground transition-colors hover:bg-secondary/60 hover:text-foreground',
+          'min-h-11 flex-1 cursor-pointer px-3 font-mono text-xs font-medium',
+          'text-muted-foreground transition-colors hover:bg-card/60 hover:text-foreground',
+          'aria-pressed:relative aria-pressed:z-[1] aria-pressed:bg-card aria-pressed:text-foreground',
+          // Hide the border under the selected tab.
+          'aria-pressed:shadow-[0_1px_0_var(--card)]',
           'focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-ring',
           index === 0 && 'border-r border-border',
         ]}
         aria-pressed={index === 0 ? 'true' : 'false'}
-        data-platform={option.id}
-        data-command={option.command}
+        data-platform={platform.id}
+        data-command={platform.command}
       >
-        {option.label}
+        {platform.label}
       </button>
     ))}
   </div>
-  <div class="flex min-w-0 items-start">
+  <div class="flex min-w-0 items-stretch">
     <span class="shrink-0 pl-4 pt-3 font-mono text-sm leading-5 text-muted-foreground" aria-hidden="true">$</span>
-    <code
-      class="min-w-0 flex-1 overflow-x-auto whitespace-nowrap px-2 py-3 font-mono text-sm leading-5 text-foreground"
-      data-command-value
-    >
-      {commands.posix}
-    </code>
+    <div class="install-code min-w-0 flex-1 py-3 pl-2 pr-1 font-mono text-sm leading-5">
+      {platforms.map((platform, index) => (
+        <span data-command-view={platform.id} hidden={index !== 0}>
+          <Code
+            inline
+            wrap
+            code={platform.command}
+            lang="shellscript"
+            themes={{ light: 'night-owl-light', dark: 'night-owl' }}
+            defaultColor="light"
+          />
+        </span>
+      ))}
+    </div>
     <button
       type="button"
       class:list={[
-        'flex min-h-11 min-w-11 shrink-0 cursor-pointer items-center justify-center border-l border-border',
-        'text-muted-foreground transition-colors hover:bg-secondary hover:text-foreground',
+        'mr-2 flex h-9 w-9 shrink-0 cursor-pointer items-center justify-center self-center',
+        'text-muted-foreground transition hover:bg-secondary hover:text-foreground hover:shadow-(--site-shadow)',
         'focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-ring',
       ]}
       aria-label={copyLabel}
@@ -79,9 +77,13 @@ const installOptions = [
 </div>
 
 <style>
-  .install-platform[aria-pressed='true'] {
-    background: var(--secondary);
-    color: var(--foreground);
+  .install-code :global(code.astro-code) {
+    background: transparent !important;
+  }
+
+  :global(.dark) .install-code :global(code.astro-code span[style*='--shiki-dark']),
+  :global([data-theme='dark']) .install-code :global(code.astro-code span[style*='--shiki-dark']) {
+    color: var(--shiki-dark) !important;
   }
 </style>
 
@@ -120,7 +122,9 @@ const installOptions = [
     container.dataset.copyReady = 'true';
 
     const button = container.querySelector<HTMLButtonElement>('[data-copy-command]');
-    const commandValue = container.querySelector<HTMLElement>('[data-command-value]');
+    const commandViews = Array.from(
+      container.querySelectorAll<HTMLElement>('[data-command-view]'),
+    );
     const platformOptions = Array.from(
       container.querySelectorAll<HTMLButtonElement>('[data-platform]'),
     );
@@ -132,8 +136,13 @@ const installOptions = [
       for (const option of platformOptions) {
         option.setAttribute('aria-pressed', String(option === selectedOption));
       }
+
       container.dataset.command = selectedOption.dataset.command ?? '';
-      if (commandValue) commandValue.textContent = container.dataset.command;
+
+      const activePlatform = selectedOption.dataset.platform;
+      for (const view of commandViews) {
+        view.hidden = view.dataset.commandView !== activePlatform;
+      }
     };
 
     for (const option of platformOptions) {