fix(web): improve accessibility and landing page performance

Accessibility:
- Add aria-label to all icon-only buttons (copy, mobile menu)
- Add aria-expanded to mobile menu toggle
- Force terminal to always use dark theme for WCAG AA contrast
- Add i18n keys: common.menu, common.close

Performance:
- Throttle mousemove with rAF, cache getBoundingClientRect on enter
- Replace 10 box-shadow keyframe animations with 2 transform-only
- Animate border glow only on hover instead of continuously
- Reduce hero gradient orbs blur from 3xl to 2xl
- Add passive flag to scroll listener
- Add will-change and contain hints for animated dots

Author: mephistofox

web/src/components/landing/DownloadSection.vue

@@ -139,6 +139,7 @@ onMounted(async () => {
                   @click="copyInstallCommand"
                   class="flex-shrink-0 p-2 rounded-lg bg-surface/50 text-muted-foreground hover:text-foreground hover:bg-surface transition-all"
                   :title="copied ? t('landing.download.copied') : t('common.copy')"
+                  :aria-label="copied ? t('landing.download.copied') : t('common.copy')"
                 >
                   <svg v-if="!copied" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
                     <path stroke-linecap="round" stroke-linejoin="round" d="M15.666 3.888A2.25 2.25 0 0013.5 2.25h-3c-1.03 0-1.9.693-2.166 1.638m7.332 0c.055.194.084.4.084.612v0a.75.75 0 01-.75.75H9a.75.75 0 01-.75-.75v0c0-.212.03-.418.084-.612m7.332 0c.646.049 1.288.11 1.927.184 1.1.128 1.907 1.077 1.907 2.185V19.5a2.25 2.25 0 01-2.25 2.25H6.75A2.25 2.25 0 014.5 19.5V6.257c0-1.108.806-2.057 1.907-2.185a48.208 48.208 0 011.927-.184" />

web/src/components/landing/HeroSection.vue

@@ -33,11 +33,11 @@ onMounted(() => {
     <!-- Animated gradient orbs -->
     <div class="absolute inset-0 overflow-hidden pointer-events-none">
       <div
-        class="absolute w-[600px] h-[600px] rounded-full opacity-30 blur-3xl animate-particle-float"
+        class="absolute w-[600px] h-[600px] rounded-full opacity-30 blur-2xl animate-particle-float"
         style="background: radial-gradient(circle, hsl(var(--primary) / 0.4) 0%, transparent 70%); top: -20%; left: -10%;"
       />
       <div
-        class="absolute w-[400px] h-[400px] rounded-full opacity-20 blur-3xl animate-particle-float"
+        class="absolute w-[400px] h-[400px] rounded-full opacity-20 blur-2xl animate-particle-float"
         style="background: radial-gradient(circle, hsl(var(--accent) / 0.4) 0%, transparent 70%); bottom: 10%; right: -5%; animation-delay: -4s;"
       />
     </div>
@@ -97,7 +97,7 @@ onMounted(() => {
             >
               <span class="text-muted-foreground select-none">$</span>
               <span class="text-foreground/90">{{ quickCommand }}</span>
-              <button class="ml-2 text-muted-foreground hover:text-primary transition-colors">
+              <button class="ml-2 text-muted-foreground hover:text-primary transition-colors" :aria-label="t('common.copy')">
                 <svg v-if="!copied" xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                   <path stroke-linecap="round" stroke-linejoin="round" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
                 </svg>

web/src/components/landing/HowItWorksSection.vue

@@ -41,26 +41,37 @@ const sectionRef = ref<HTMLElement | null>(null)
 const cardsContainerRef = ref<HTMLElement | null>(null)
 const isHovering = ref(false)
 
-function handleMouseMove(e: MouseEvent) {
-  if (!cardsContainerRef.value) return
+let rafId: number | null = null
+let cachedCards: { el: HTMLElement; rect: DOMRect }[] = []
 
+function cacheCardRects() {
+  if (!cardsContainerRef.value) return
   const cards = cardsContainerRef.value.querySelectorAll<HTMLElement>('[data-card]')
+  cachedCards = Array.from(cards).map((el) => ({ el, rect: el.getBoundingClientRect() }))
+}
 
-  cards.forEach((card) => {
-    const cardRect = card.getBoundingClientRect()
-    const x = e.clientX - cardRect.left
-    const y = e.clientY - cardRect.top
-    card.style.setProperty('--mouse-x', `${x}px`)
-    card.style.setProperty('--mouse-y', `${y}px`)
+function handleMouseMove(e: MouseEvent) {
+  if (rafId) return
+  rafId = requestAnimationFrame(() => {
+    for (const { el, rect } of cachedCards) {
+      el.style.setProperty('--mouse-x', `${e.clientX - rect.left}px`)
+      el.style.setProperty('--mouse-y', `${e.clientY - rect.top}px`)
+    }
+    rafId = null
   })
 }
 
 function handleMouseEnter() {
   isHovering.value = true
+  cacheCardRects()
 }
 
 function handleMouseLeave() {
   isHovering.value = false
+  if (rafId) {
+    cancelAnimationFrame(rafId)
+    rafId = null
+  }
 }
 
 onMounted(() => {
@@ -88,6 +99,7 @@ onMounted(() => {
 })
 
 onUnmounted(() => {
+  if (rafId) cancelAnimationFrame(rafId)
   if (cardsContainerRef.value) {
     cardsContainerRef.value.removeEventListener('mousemove', handleMouseMove)
     cardsContainerRef.value.removeEventListener('mouseenter', handleMouseEnter)
@@ -189,6 +201,7 @@ onUnmounted(() => {
                   <button
                     class="p-1.5 rounded bg-surface/80 text-muted-foreground hover:text-foreground transition-colors"
                     @click="copyCode(step.code, index)"
+                    :aria-label="t('common.copy')"
                   >
                     <svg v-if="copiedIndex !== index" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
                       <path stroke-linecap="round" stroke-linejoin="round" d="M15.666 3.888A2.25 2.25 0 0013.5 2.25h-3c-1.03 0-1.9.693-2.166 1.638m7.332 0c.055.194.084.4.084.612v0a.75.75 0 01-.75.75H9a.75.75 0 01-.75-.75v0c0-.212.03-.418.084-.612m7.332 0c.646.049 1.288.11 1.927.184 1.1.128 1.907 1.077 1.907 2.185V19.5a2.25 2.25 0 01-2.25 2.25H6.75A2.25 2.25 0 014.5 19.5V6.257c0-1.108.806-2.057 1.907-2.185a48.208 48.208 0 011.927-.184" />
@@ -280,12 +293,12 @@ onUnmounted(() => {
   mask-composite: exclude;
   pointer-events: none;
   opacity: 0;
-  animation: border-spin 4s linear infinite;
   transition: opacity 0.5s;
 }
 
 .spotlight-card:hover .card-border-glow {
   opacity: 1;
+  animation: border-spin 4s linear infinite;
 }
 
 @keyframes border-spin {