feat(web): redesign website with shared azd-web-core design system (#17)

- Migrate to shared @jongio/azd-web-core components (Header, Footer, ThemeToggle, SuiteNav)
- Apply "Developer Terminal" design system (dark-first, Geist fonts, sky/violet palette)
- Add command showcase (❯ azd copilot) to hero section
- Add X/Twitter and LinkedIn social links to header
- Update CI workflow with GitHub Packages auth and repository_dispatch trigger
- Add .npmrc for @jongio scoped package registry

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

Author: jongio

.github/workflows/website.yml

@@ -1,6 +1,8 @@
 name: Website Deploy
 
 on:
+  repository_dispatch:
+    types: [azd-web-core-updated]
   workflow_dispatch:
   workflow_call:
   push:
@@ -19,6 +21,7 @@ concurrency:
 permissions:
   contents: write
   pull-requests: write
+  packages: read
 
 jobs:
   build:
@@ -39,10 +42,13 @@ jobs:
           node-version: '20'
           cache: 'pnpm'
           cache-dependency-path: 'web/pnpm-lock.yaml'
+          registry-url: 'https://npm.pkg.github.com'
 
       - name: Install dependencies
         working-directory: web
         run: pnpm install --frozen-lockfile
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
       - name: Build website (Production)
         if: github.event_name != 'pull_request'

README.md

@@ -2,6 +2,8 @@
 
 **Describe what you want. Copilot builds it and deploys it to Azure.**
 
+[**🌐 Visit the Website →**](https://jongio.github.io/azd-copilot/) | [**📦 azd Extensions Hub →**](https://jongio.github.io/azd-extensions/)
+
 `azd copilot` is an [Azure Developer CLI](https://learn.microsoft.com/azure/developer/azure-developer-cli/) extension that turns GitHub Copilot CLI into a full-stack Azure development assistant — 16 specialized agents, 28 Azure skills, and 6 MCP servers working together so you can go from idea to deployed app in one command.
 
 ```
@@ -368,6 +370,19 @@ skills/my-skill/
 
 Then run `mage UpdateCounts` to update agent/skill counts across the project.
 
+## 🔗 azd Extensions
+
+azd copilot is part of a suite of Azure Developer CLI extensions by [Jon Gallant](https://github.com/jongio).
+
+| Extension | Description | Website |
+|-----------|-------------|---------|
+| **[azd app](https://github.com/jongio/azd-app)** | Run Azure apps locally with auto-dependencies, dashboard, and AI debugging | [jongio.github.io/azd-app](https://jongio.github.io/azd-app/) |
+| **[azd copilot](https://github.com/jongio/azd-copilot)** | AI-powered Azure development with 16 agents and 28 skills | [jongio.github.io/azd-copilot](https://jongio.github.io/azd-copilot/) |
+| **[azd exec](https://github.com/jongio/azd-exec)** | Execute scripts with azd environment context and Key Vault integration | [jongio.github.io/azd-exec](https://jongio.github.io/azd-exec/) |
+| **[azd rest](https://github.com/jongio/azd-rest)** | Authenticated REST API calls with automatic scope detection | [jongio.github.io/azd-rest](https://jongio.github.io/azd-rest/) |
+
+🌐 **Extension Hub**: [jongio.github.io/azd-extensions](https://jongio.github.io/azd-extensions/) — Browse all extensions, quick install, and registry info.
+
 ## License
 
 MIT

web/.npmrc

@@ -0,0 +1 @@
+@jongio:registry=https://npm.pkg.github.com

web/package.json

@@ -13,6 +13,7 @@
   },
   "dependencies": {
     "@astrojs/mdx": "^4.3.13",
+    "@jongio/azd-web-core": "^2.0.0",
     "@tailwindcss/vite": "^4.1.18",
     "astro": "^5.17.1",
     "tailwindcss": "^4.1.18"

web/pnpm-lock.yaml

@@ -13,25 +13,25 @@ interface Props {
 const { id, emoji, name, role, description, skills, color, index } = Astro.props;
 
 const colorMap: Record<string, string> = {
-  azure: 'var(--color-glow-cyan)',
-  purple: 'var(--color-glow-violet)',
-  indigo: 'var(--color-glow-violet)',
-  blue: 'var(--color-glow-cyan)',
-  red: '#ef4444',
-  sky: 'var(--color-glow-cyan)',
-  orange: '#f97316',
-  amber: '#f59e0b',
-  neutral: 'var(--color-muted-foreground)',
-  gold: '#eab308',
-  stone: '#78716c',
-  teal: 'var(--color-glow-emerald)',
-  fuchsia: '#d946ef',
-  cyan: 'var(--color-glow-cyan)',
-  pink: '#ec4899',
-  emerald: 'var(--color-glow-emerald)',
+  azure: 'var(--color-primary)',
+  purple: 'var(--color-accent)',
+  indigo: 'var(--color-accent)',
+  blue: 'var(--color-primary)',
+  red: 'var(--color-danger)',
+  sky: 'var(--color-primary)',
+  orange: 'var(--color-warning)',
+  amber: 'var(--color-warning)',
+  neutral: 'var(--color-text-muted)',
+  gold: 'var(--color-warning)',
+  stone: 'var(--color-text-muted)',
+  teal: 'var(--color-success)',
+  fuchsia: 'var(--color-accent)',
+  cyan: 'var(--color-primary)',
+  pink: 'var(--color-accent)',
+  emerald: 'var(--color-success)',
 };
 
-const accentColor = colorMap[color] || 'var(--color-glow-cyan)';
+const accentColor = colorMap[color] || 'var(--color-primary)';
 ---
 
 <button
@@ -79,13 +79,13 @@ const accentColor = colorMap[color] || 'var(--color-glow-cyan)';
     align-items: center;
     text-align: center;
     padding: 1.5rem;
-    border-radius: 1.25rem;
+    border-radius: var(--radius-lg);
     cursor: pointer;
     transition: all 0.3s ease;
     animation: fade-up 0.6s ease-out forwards;
     opacity: 0;
-    border-color: transparent;
-    background: var(--color-card);
+    border: 1px solid var(--color-border);
+    background: var(--color-surface-2);
   }
 
   .agent-card:hover {
@@ -140,7 +140,7 @@ const accentColor = colorMap[color] || 'var(--color-glow-cyan)';
     align-items: center;
     justify-content: center;
     font-size: 2.5rem;
-    background: var(--color-secondary);
+    background: var(--color-surface);
     border: 2px solid var(--accent);
   }
 
@@ -170,7 +170,7 @@ const accentColor = colorMap[color] || 'var(--color-glow-cyan)';
     font-size: 1.125rem;
     font-weight: 700;
     margin: 0;
-    color: var(--color-foreground);
+    color: var(--color-text);
   }
 
   .agent-role {
@@ -183,7 +183,7 @@ const accentColor = colorMap[color] || 'var(--color-glow-cyan)';
   .agent-desc {
     font-size: 0.8125rem;
     line-height: 1.5;
-    color: var(--color-muted-foreground);
+    color: var(--color-text-muted);
     margin: 0 0 0.75rem;
     display: -webkit-box;
     -webkit-line-clamp: 3;

web/src/components/AgentCard.astro

@@ -3,14 +3,14 @@
  * AnimatedBackground Component
  * 
  * Floating, glowing orbs that create a modern startup aesthetic.
- * Matching the style from azd-extensions.
+ * Uses shared design token colors.
  */
 ---
 
 <div class="animated-bg" aria-hidden="true">
-  <div class="orb orb-cyan"></div>
-  <div class="orb orb-violet"></div>
-  <div class="orb orb-emerald"></div>
+  <div class="orb orb-primary"></div>
+  <div class="orb orb-accent"></div>
+  <div class="orb orb-success"></div>
   <div class="floating-dot dot-1"></div>
   <div class="floating-dot dot-2"></div>
   <div class="floating-dot dot-3"></div>
@@ -32,32 +32,32 @@
     animation: pulse-glow 4s ease-in-out infinite;
   }
 
-  .orb-cyan {
+  .orb-primary {
     top: -10rem;
     left: -10rem;
     width: 20rem;
     height: 20rem;
-    background: var(--color-glow-cyan);
+    background: var(--color-primary);
     opacity: 0.2;
   }
 
-  .orb-violet {
+  .orb-accent {
     top: 33%;
     right: -10rem;
     width: 24rem;
     height: 24rem;
-    background: var(--color-glow-violet);
+    background: var(--color-accent);
     opacity: 0.15;
     animation-delay: 2s;
     filter: blur(120px);
   }
 
-  .orb-emerald {
+  .orb-success {
     bottom: -10rem;
     left: 33%;
     width: 18rem;
     height: 18rem;
-    background: var(--color-glow-emerald);
+    background: var(--color-success);
     opacity: 0.1;
     animation-delay: 4s;
   }
@@ -73,7 +73,7 @@
     left: 2.5rem;
     width: 0.5rem;
     height: 0.5rem;
-    background: var(--color-glow-cyan);
+    background: var(--color-primary);
     opacity: 0.6;
   }
 
@@ -82,7 +82,7 @@
     right: 5rem;
     width: 0.75rem;
     height: 0.75rem;
-    background: var(--color-glow-violet);
+    background: var(--color-accent);
     opacity: 0.5;
     animation-delay: 2s;
     animation-duration: 8s;
@@ -93,7 +93,7 @@
     left: 15%;
     width: 0.5rem;
     height: 0.5rem;
-    background: var(--color-glow-emerald);
+    background: var(--color-success);
     opacity: 0.4;
     animation-delay: 1s;
     animation-duration: 7s;

web/src/components/AnimatedBackground.astro

@@ -3,7 +3,7 @@
  * FeatureCard Component
  * 
  * Card for displaying features with icon, title, and description.
- * Has hover glow effects matching azd-extensions style.
+ * Uses shared design token variables.
  */
 interface Props {
   icon: string;
@@ -16,9 +16,9 @@ interface Props {
 const { icon, title, description, href, glowColor = 'cyan' } = Astro.props;
 
 const glowColorMap = {
-  cyan: 'var(--color-glow-cyan)',
-  violet: 'var(--color-glow-violet)',
-  emerald: 'var(--color-glow-emerald)',
+  cyan: 'var(--color-primary)',
+  violet: 'var(--color-accent)',
+  emerald: 'var(--color-success)',
 };
 
 const color = glowColorMap[glowColor];
@@ -54,8 +54,8 @@ const Tag = href ? 'a' : 'div';
     position: relative;
     display: block;
     padding: 1.5rem;
-    border-radius: 1rem;
-    background: var(--color-card);
+    border-radius: var(--radius-lg);
+    background: var(--color-surface-2);
     backdrop-filter: blur(16px);
     border: 1px solid var(--color-border);
     text-decoration: none;
@@ -66,8 +66,8 @@ const Tag = href ? 'a' : 'div';
 
   .feature-card:hover {
     transform: translateY(-4px) scale(1.01);
-    border-color: rgba(148, 163, 184, 0.2);
-    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
+    border-color: color-mix(in srgb, var(--glow-color) 30%, var(--color-border));
+    box-shadow: 0 20px 40px color-mix(in srgb, var(--glow-color) 15%, transparent);
     text-decoration: none;
   }
 
@@ -101,8 +101,8 @@ const Tag = href ? 'a' : 'div';
     width: 3rem;
     height: 3rem;
     margin-bottom: 1rem;
-    border-radius: 0.75rem;
-    background: linear-gradient(135deg, rgba(6, 182, 212, 0.2), rgba(139, 92, 246, 0.1));
+    border-radius: var(--radius-md);
+    background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 20%, transparent), color-mix(in srgb, var(--color-accent) 10%, transparent));
     transition: transform 0.3s ease;
   }
 
@@ -118,12 +118,12 @@ const Tag = href ? 'a' : 'div';
     font-size: 1.125rem;
     font-weight: 600;
     margin-bottom: 0.5rem;
-    color: var(--color-foreground);
+    color: var(--color-text);
   }
 
   .feature-description {
     font-size: 0.875rem;
-    color: var(--color-muted-foreground);
+    color: var(--color-text-muted);
     line-height: 1.6;
     margin: 0;
   }