website refactor

apps/website/components/app/AppFooter.tsx

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

apps/website/components/app/AppHeader.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+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) {
+  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}`}
+    >
+      {children}
+    </header>
+  );
+}

apps/website/components/app/AppShell.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+
+interface AppShellProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+/**
+ * AppShell is the root container for the entire application layout.
+ * It provides the base background and layout structure.
+ */
+export function AppShell({ children, className = '' }: AppShellProps) {
+  return (
+    <div className={`min-h-screen bg-[#0C0D0F] text-gray-100 flex flex-col ${className}`}>
+      {children}
+    </div>
+  );
+}

apps/website/components/app/AppSidebar.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+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) {
+  return (
+    <aside 
+      className={`hidden lg:flex flex-col w-64 bg-[#141619] border-r border-[#23272B] overflow-y-auto ${className}`}
+    >
+      {children}
+    </aside>
+  );
+}