refactor(site): clean up landing page design and optimize CI (#220)

Cleans up the landing page CSS and optimizes the site deployment
workflow.

Landing page: removed noise overlay and gradient mesh (AI slop),
simplified text gradients to solid colors, replaced pill tags with plain
text separators, bumped light-mode contrast for WCAG AA, added lazy
loading to feature videos, and added missing footer links.

CI: replaced the duplicate build jobs in site.yml with a single
matrix-based build job. Both GitHub Pages and Cloudflare builds now
share checkout/setup/install and run in parallel. Cloudflare deploy
downloads the pre-built artifact instead of rebuilding.

Closes #219

---------

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Author: dorlugasigal

.github/workflows/site.yml

@@ -20,8 +20,17 @@ concurrency:
   cancel-in-progress: true
 
 jobs:
-  build-github-pages:
+  build:
     runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        target:
+          - name: github-pages
+            deploy_target: ''
+            site_url: ''
+          - name: cloudflare
+            deploy_target: cloudflare
+            site_url: https://termbeam.pages.dev
     defaults:
       run:
         working-directory: packages/site
@@ -34,16 +43,26 @@ jobs:
           cache-dependency-path: packages/site/package-lock.json
       - name: Install dependencies
         run: npm ci
-      - name: Build with Astro (GitHub Pages target)
+      - name: Build with Astro
+        env:
+          DEPLOY_TARGET: ${{ matrix.target.deploy_target }}
+          SITE_URL: ${{ matrix.target.site_url }}
         run: npm run build
       - name: Upload Pages artifact
+        if: matrix.target.name == 'github-pages'
         uses: actions/upload-pages-artifact@56afc609e74202658d3ffba0e8f6dda462b719fa # v3
         with:
           path: packages/site/dist
+      - name: Upload Cloudflare artifact
+        if: matrix.target.name == 'cloudflare'
+        uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4
+        with:
+          name: cloudflare-dist
+          path: packages/site/dist
 
   deploy-github-pages:
     if: github.event_name == 'push' || github.event_name == 'workflow_dispatch'
-    needs: build-github-pages
+    needs: build
     runs-on: ubuntu-latest
     permissions:
       contents: read
@@ -59,30 +78,23 @@ jobs:
 
   deploy-cloudflare-pages:
     if: github.event_name == 'push' || github.event_name == 'workflow_dispatch'
+    needs: build
     runs-on: ubuntu-latest
     permissions:
       contents: read
       deployments: write
     environment:
       name: cloudflare-pages
       url: https://termbeam.pages.dev
-    defaults:
-      run:
-        working-directory: packages/site
     steps:
       - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6
-      - uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6
         with:
-          node-version: '22'
-          cache: npm
-          cache-dependency-path: packages/site/package-lock.json
-      - name: Install dependencies
-        run: npm ci
-      - name: Build with Astro (Cloudflare target)
-        env:
-          DEPLOY_TARGET: cloudflare
-          SITE_URL: https://termbeam.pages.dev
-        run: npm run build
+          sparse-checkout: packages/site
+      - name: Download Cloudflare build
+        uses: actions/download-artifact@d3f86a106a0bac45b974a628896c90dbdf5c8093 # v4
+        with:
+          name: cloudflare-dist
+          path: packages/site/dist
       - name: Deploy to Cloudflare Pages
         uses: cloudflare/wrangler-action@da0e0dfe58b7a431659754fdf3f186c529afbe65 # v3
         with:

packages/site/src/components/FeatureSection.astro

@@ -9,6 +9,7 @@ export interface Props {
   device: 'browser' | 'phone';
   layout: 'center' | 'split' | 'split-reverse';
   xl?: boolean;
+  lazy?: boolean;
 }
 
 const {
@@ -21,6 +22,7 @@ const {
   device,
   layout,
   xl = true,
+  lazy = false,
 } = Astro.props;
 
 const base = import.meta.env.BASE_URL.replace(/\/+$/, '');
@@ -71,7 +73,8 @@ const deviceXL =
                   playsinline
                   width="2560"
                   height="1440"
-                  preload="metadata"
+                  preload={lazy ? 'none' : 'metadata'}
+                  loading={lazy ? 'lazy' : undefined}
                   aria-label={`Demo of ${title}`}
                 />
                 <button class="video-replay" type="button" hidden aria-label={`Replay ${title} demo`}>
@@ -93,7 +96,8 @@ const deviceXL =
                   playsinline
                   width="1170"
                   height="2532"
-                  preload="metadata"
+                  preload={lazy ? 'none' : 'metadata'}
+                  loading={lazy ? 'lazy' : undefined}
                   aria-label={`Demo of ${title}`}
                 />
                 <button class="video-replay" type="button" hidden aria-label={`Replay ${title} demo`}>

packages/site/src/layouts/MarketingLayout.astro

@@ -78,12 +78,7 @@ const siteUrl = new URL(`${base}/`.replace(/\/+/g, '/'), Astro.site).toString();
   <body>
     <a href="#main-content" class="skip-nav">Skip to content</a>
 
-    <div class="noise-overlay" aria-hidden="true"></div>
-    <div class="gradient-mesh" aria-hidden="true">
-      <div class="mesh-blob mesh-blob-1"></div>
-      <div class="mesh-blob mesh-blob-2"></div>
-      <div class="mesh-blob mesh-blob-3"></div>
-    </div>
+    <div class="hero-glow" aria-hidden="true"></div>
 
     <slot />
 

packages/site/src/pages/index.astro

@@ -29,6 +29,7 @@ const features = [
     posterSrc: 'showcase/agents-desktop.png',
     device: 'browser' as const,
     layout: 'split' as const,
+    lazy: true,
   },
   {
     num: '03',
@@ -40,6 +41,7 @@ const features = [
     posterSrc: 'showcase/terminal-mobile.png',
     device: 'phone' as const,
     layout: 'split-reverse' as const,
+    lazy: true,
   },
   {
     num: '04',
@@ -51,6 +53,7 @@ const features = [
     posterSrc: 'showcase/voice-mobile.png',
     device: 'phone' as const,
     layout: 'split' as const,
+    lazy: true,
   },
   {
     num: '05',
@@ -62,6 +65,7 @@ const features = [
     posterSrc: 'showcase/sessions-desktop.png',
     device: 'browser' as const,
     layout: 'split-reverse' as const,
+    lazy: true,
   },
   {
     num: '06',
@@ -73,6 +77,7 @@ const features = [
     posterSrc: 'showcase/theme-mobile.png',
     device: 'phone' as const,
     layout: 'split' as const,
+    lazy: true,
   },
 ];
 ---
@@ -503,6 +508,8 @@ const features = [
       <div class="footer-brand"><span class="nav-logo-beam">▸</span> TermBeam</div>
       <div class="footer-links">
         <a href={docsLink}>Documentation</a>
+        <a href={`${base}/use-cases/`}>Use Cases</a>
+        <a href={`${base}/ai-agents/`}>AI Agents</a>
         <a href="https://github.com/dorlugasigal/TermBeam" target="_blank" rel="noopener noreferrer"
           >GitHub</a
         >

packages/site/src/styles/global.css

@@ -78,7 +78,7 @@
 
   --color-fg: #0a0a0a;
   --color-fg-muted: #475569;
-  --color-fg-dim: #64748b;
+  --color-fg-dim: #52525b;
 
   --color-accent: #1d4ed8;
   --color-accent-soft: rgba(29, 78, 216, 0.12);