feat(apollo-vertex): polish shell/sidebar with framer-motion animations and self-contained CSS

Convert sidebar width animation from CSS transitions to framer-motion spring
physics matching MRS exactly. Make shell components self-contained by moving
collapsible CSS to co-located file, swap hand-rolled buttons for vertex Button
component, add asymmetric text fade variants via AnimatePresence, fix z-index
stacking in docs preview, fix minimal header logo background, and switch locale
loading state from spinner to skeleton.

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

Author: creilly11235

apps/apollo-vertex/app/globals.css

@@ -30,3 +30,4 @@
     @apply text-primary-700 dark:text-primary-400;
   }
 }
+

apps/apollo-vertex/app/vertex-components/shell/page.mdx

@@ -19,7 +19,7 @@ Use the `variant="minimal"` prop to render a horizontal header layout instead of
 
 ## Features
 
-- **Collapsible Sidebar**: Icon-only collapsed mode with smooth CSS transitions, built on the shadcn sidebar primitives
+- **Collapsible Sidebar**: Icon-only collapsed mode with smooth spring animations, built on the shadcn sidebar primitives
 - **Sub-Navigation**: Collapsible menu items with nested sub-items that auto-expand when active
 - **Collapsed Menu Handling**: Clicking a collapsible item while collapsed expands the sidebar and opens the submenu
 - **Custom Logo**: Support for company logos with separate light/dark mode variants

apps/apollo-vertex/locales/en.json

@@ -105,6 +105,7 @@
   "turkish": "Turkish",
   "type_a_message": "Type a message...",
   "user_email_placeholder": "user@company.com",
+  "user_profile": "Profile and settings",
   "view": "View",
   "view_customer": "View customer",
   "view_payment_details": "View payment details",

apps/apollo-vertex/locales/es-MX.json

@@ -100,6 +100,7 @@
   "warning": "Advertencia",
   "business_user": "Usuario empresarial",
   "user_email_placeholder": "user@company.com",
+  "user_profile": "Profile and settings",
   "enter_full_screen": "Ingresar a pantalla completa",
   "exit_full_screen": "Salir de la pantalla completa",
   "select_frameworks": "Seleccionar marcos",

apps/apollo-vertex/locales/ja.json

@@ -100,6 +100,7 @@
   "warning": "警告",
   "business_user": "ビジネス ユーザー",
   "user_email_placeholder": "user@company.com",
+  "user_profile": "Profile and settings",
   "enter_full_screen": "全画面表示",
   "exit_full_screen": "全画面表示を終了",
   "select_frameworks": "フレームワークを選択",

apps/apollo-vertex/locales/ko.json

@@ -100,6 +100,7 @@
   "warning": "경고",
   "business_user": "비즈니스 사용자",
   "user_email_placeholder": "user@company.com",
+  "user_profile": "Profile and settings",
   "enter_full_screen": "전체 화면으로 전환",
   "exit_full_screen": "전체 화면 종료",
   "select_frameworks": "프레임워크 선택",

apps/apollo-vertex/locales/pt.json

@@ -100,6 +100,7 @@
   "warning": "Aviso",
   "business_user": "Utilizador Empresarial",
   "user_email_placeholder": "user@company.com",
+  "user_profile": "Profile and settings",
   "enter_full_screen": "Entrar no ecrã inteiro",
   "exit_full_screen": "Sair de ecrã inteiro",
   "select_frameworks": "Selecionar estruturas",

apps/apollo-vertex/locales/ro.json

@@ -100,6 +100,7 @@
   "warning": "Atenție",
   "business_user": "Utilizator business",
   "user_email_placeholder": "user@company.com",
+  "user_profile": "Profile and settings",
   "enter_full_screen": "Intră în modul ecran complet",
   "exit_full_screen": "Ieșire din modul ecran complet",
   "select_frameworks": "Selectați frameworkuri",

apps/apollo-vertex/locales/ru.json

@@ -14,5 +14,6 @@
   "russian": "Русский",
   "spanish": "Испанский",
   "spanish-mx": "Испанский (Мексика)",
-  "turkish": "Турецкий"
+  "turkish": "Турецкий",
+  "user_profile": "Profile and settings"
 }

apps/apollo-vertex/locales/zh-CN.json

@@ -100,6 +100,7 @@
   "warning": "警告",
   "business_user": "企业用户",
   "user_email_placeholder": "user@company.com",
+  "user_profile": "Profile and settings",
   "enter_full_screen": "进入全屏",
   "exit_full_screen": "退出全屏",
   "select_frameworks": "选择框架",