website refactor

apps/website/components/app/AppFooter.tsx

@@ -1,17 +1,15 @@
 import React from 'react';
+import { Footer } from '@/ui/Footer';
 
 interface AppFooterProps {
   children?: React.ReactNode;
-  className?: string;
 }
 
 /**
  * AppFooter is the bottom section of the application.
  */
-export function AppFooter({ children, className = '' }: AppFooterProps) {
+export function AppFooter({ children }: AppFooterProps) {
   return (
-    <footer className={`bg-[#141619] border-t border-[#23272B] py-8 px-4 md:px-6 ${className}`}>
-      {children}
-    </footer>
+    <Footer />
   );
 }

apps/website/components/app/AppHeader.tsx

@@ -1,20 +1,18 @@
 import React from 'react';
+import { Header } from '@/ui/Header';
 
 interface AppHeaderProps {
   children: React.ReactNode;
-  className?: string;
 }
 
 /**
  * AppHeader is the top control bar of the application.
  * It follows the "Telemetry Workspace" structure.
  */
-export function AppHeader({ children, className = '' }: AppHeaderProps) {
+export function AppHeader({ children }: AppHeaderProps) {
   return (
-    <header 
-      className={`sticky top-0 z-50 h-16 md:h-20 bg-[#0C0D0F]/80 backdrop-blur-md border-b border-[#23272B] flex items-center px-4 md:px-6 ${className}`}
-    >
+    <Header>
       {children}
-    </header>
+    </Header>
   );
 }

apps/website/components/app/AppSidebar.tsx

@@ -1,20 +1,18 @@
 import React from 'react';
+import { Sidebar } from '@/ui/Sidebar';
 
 interface AppSidebarProps {
   children?: React.ReactNode;
-  className?: string;
 }
 
 /**
  * AppSidebar is the "dashboard rail" of the application.
  * It provides global navigation and context.
  */
-export function AppSidebar({ children, className = '' }: AppSidebarProps) {
+export function AppSidebar({ children }: AppSidebarProps) {
   return (
-    <aside 
-      className={`hidden lg:flex flex-col w-64 bg-[#141619] border-r border-[#23272B] overflow-y-auto ${className}`}
-    >
+    <Sidebar>
       {children}
-    </aside>
+    </Sidebar>
   );
 }