feat: SEO, accessibility, and branding overhaul

- Add og:image, twitter:image meta tags for social sharing cards
- Add robots.txt and @astrojs/sitemap integration
- Add apple-touch-icon, favicon fallback, theme-color meta
- Add preconnect/dns-prefetch for external domains
- Add poster attribute to video elements
- Add skip navigation link to both layouts
- Add prefers-reduced-motion support in global.css
- Add aria-hidden to decorative SVGs across all components
- Add aria-label to sections, videos, and sidebar nav
- Add focus-visible styles to CTA buttons
- Add (opens in new tab) indicator to target="_blank" links
- Replace navbar logo with new horizontal brand SVG
- Update .gitignore to allow PNG assets in web/public/

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

Author: barckcode

.gitignore

@@ -14,6 +14,7 @@ web/.playwright/
 
 # Misc
 *.png
+!web/public/**/*.png
 .DS_Store
 *.log
 

web/astro.config.mjs

@@ -1,10 +1,11 @@
 // @ts-check
 import { defineConfig } from 'astro/config';
 import tailwindcss from '@tailwindcss/vite';
+import sitemap from '@astrojs/sitemap';
 
 // https://astro.build/config
 export default defineConfig({
-  integrations: [],
+  integrations: [sitemap()],
   output: 'static',
   site: 'https://agentcrew.sh',
 

web/package-lock.json

@@ -10,6 +10,7 @@
     "test:e2e": "playwright test"
   },
   "dependencies": {
+    "@astrojs/sitemap": "^3.7.1",
     "@tailwindcss/vite": "^4.2.0",
     "astro": "^5.17.1",
     "tailwindcss": "^4.2.0"

web/package.json

@@ -0,0 +1,4 @@
+User-agent: *
+Allow: /
+
+Sitemap: https://agentcrew.sh/sitemap-index.xml

web/public/apple-touch-icon.png

@@ -7,7 +7,7 @@ const lang = Astro.props.lang ?? 'en';
 const t = useTranslations(lang);
 ---
 
-<section id="architecture" class="py-16 sm:py-20" style="background-color: #0a0f1e;">
+<section id="architecture" class="py-16 sm:py-20" aria-label="Architecture" style="background-color: #0a0f1e;">
   <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
     <!-- Header -->
     <div class="text-center mb-16 reveal">
@@ -27,8 +27,10 @@ const t = useTranslations(lang);
         muted
         loop
         playsinline
+        poster="/screenshots/app-team-detail.png"
         class="w-full rounded-2xl"
         style="background: #0a0f1e;"
+        aria-label="AgentCrew architecture overview"
       >
         <source src="/videos/architecture-flow.mp4" type="video/mp4" />
       </video>
@@ -37,7 +39,7 @@ const t = useTranslations(lang);
     <!-- Supporting bullets -->
     <div class="grid grid-cols-1 sm:grid-cols-3 gap-6 mt-10 reveal">
       <div class="flex items-start gap-3 p-4 rounded-xl border border-slate-800/60 bg-slate-900/30">
-        <div class="w-8 h-8 rounded-lg flex items-center justify-center flex-shrink-0 mt-0.5" style="background: rgba(59, 130, 246, 0.15);">
+        <div class="w-8 h-8 rounded-lg flex items-center justify-center flex-shrink-0 mt-0.5" style="background: rgba(59, 130, 246, 0.15);" aria-hidden="true">
           <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#60a5fa" stroke-width="2" stroke-linecap="round">
             <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
           </svg>
@@ -48,7 +50,7 @@ const t = useTranslations(lang);
         </div>
       </div>
       <div class="flex items-start gap-3 p-4 rounded-xl border border-slate-800/60 bg-slate-900/30">
-        <div class="w-8 h-8 rounded-lg flex items-center justify-center flex-shrink-0 mt-0.5" style="background: rgba(139, 92, 246, 0.15);">
+        <div class="w-8 h-8 rounded-lg flex items-center justify-center flex-shrink-0 mt-0.5" style="background: rgba(139, 92, 246, 0.15);" aria-hidden="true">
           <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#a78bfa" stroke-width="2" stroke-linecap="round">
             <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/>
             <circle cx="12" cy="12" r="3"/>
@@ -60,7 +62,7 @@ const t = useTranslations(lang);
         </div>
       </div>
       <div class="flex items-start gap-3 p-4 rounded-xl border border-slate-800/60 bg-slate-900/30">
-        <div class="w-8 h-8 rounded-lg flex items-center justify-center flex-shrink-0 mt-0.5" style="background: rgba(34, 197, 94, 0.15);">
+        <div class="w-8 h-8 rounded-lg flex items-center justify-center flex-shrink-0 mt-0.5" style="background: rgba(34, 197, 94, 0.15);" aria-hidden="true">
           <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#4ade80" stroke-width="2" stroke-linecap="round">
             <polyline points="16 18 22 12 16 6"/>
             <polyline points="8 6 2 12 8 18"/>