✨ refactor(home): redesign hero section to dual-column layout with compliant copywriting

Redesigns the hero section into a balanced horizontal dual-column layout:
- Left Column: Features title, clean legal-compliant descriptions, CTA buttons with BookOpen Docs link, and enlarged supported apps buttons (Cherry Studio and CC Switch with lobe icons)
- Right Column: Smoothly integrates the terminal API demo with top horizontal alignment
- i18n: Configures compliance translations for en, zh, fr, ja, ru, and vi locales

web/default/src/features/home/components/hero-terminal-demo.tsx

@@ -163,7 +163,11 @@ const API_DEMOS: ApiDemoConfig[] = [
 const CYCLE_INTERVAL = 4500
 const CYCLE_INTERVAL = 4500
 const TRANSITION_MS = 220
 const TRANSITION_MS = 220
 
 
-export function HeroTerminalDemo() {
+interface HeroTerminalDemoProps {
+  className?: string
+}
+
+export function HeroTerminalDemo(props: HeroTerminalDemoProps) {
   const [activeIndex, setActiveIndex] = useState(0)
   const [activeIndex, setActiveIndex] = useState(0)
   const [transitioning, setTransitioning] = useState(false)
   const [transitioning, setTransitioning] = useState(false)
   const intervalRef = useRef<ReturnType<typeof setInterval>>(undefined)
   const intervalRef = useRef<ReturnType<typeof setInterval>>(undefined)
@@ -202,7 +206,7 @@ export function HeroTerminalDemo() {
   const accent = ACCENT_CLASSES[demo.accent]
   const accent = ACCENT_CLASSES[demo.accent]
 
 
   return (
   return (
-    <div className='mx-auto mt-16 w-full max-w-2xl'>
+    <div className={cn('mx-auto w-full max-w-2xl', props.className)}>
       <div
       <div
         className={cn(
         className={cn(
           'overflow-hidden rounded-2xl border backdrop-blur-sm',
           'overflow-hidden rounded-2xl border backdrop-blur-sm',