website refactor

apps/website/components/layout/AppShellBar.tsx

@@ -0,0 +1,34 @@
+'use client';
+
+import { Box } from '@/ui/Box';
+import { ReactNode } from 'react';
+
+interface AppShellBarProps {
+  position: 'top' | 'bottom';
+  children: ReactNode;
+  sidebarOffset?: boolean;
+}
+
+export function AppShellBar({ position, children, sidebarOffset = true }: AppShellBarProps) {
+  const isTop = position === 'top';
+  
+  return (
+    <Box
+      as={isTop ? 'header' : 'footer'}
+      className={`
+        fixed ${isTop ? 'top-0' : 'bottom-0'} right-0 z-40
+        h-14
+        bg-base-black/70 backdrop-blur-xl
+        border-${isTop ? 'b' : 't'} border-outline-steel
+        flex items-center justify-between px-6
+        transition-all duration-200
+      `}
+      // Use style for responsive left offset to ensure it works
+      // We use a CSS variable or calc if possible, but here we rely on Tailwind classes via className if we could
+      // But since we need responsive logic that matches Layout, we'll use the Box props
+      left={sidebarOffset ? { base: 0, lg: 64 } : 0}
+    >
+      {children}
+    </Box>
+  );
+}