website refactor

apps/website/ui/JsonLd.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+interface JsonLdProps {
+  data: Record<string, any>;
+}
+
+export function JsonLd({ data }: JsonLdProps) {
+  return (
+    <script
+      type="application/ld+json"
+      dangerouslySetInnerHTML={{ __html: JSON.stringify(data) }}
+    />
+  );
+}

apps/website/ui/Layout.tsx

@@ -1,6 +1,5 @@
 import { ReactNode } from 'react';
 import { Box } from '@/ui/Box';
-import { useSidebar } from '@/components/layout/SidebarContext';
 
 export interface LayoutProps {
   children: ReactNode;
@@ -23,9 +22,9 @@ export const Layout = ({
   sidebar,
   fixedSidebar = true,
   fixedHeader = true,
-  fixedFooter = true
-}: LayoutProps) => {
-  const { isCollapsed } = useSidebar();
+  fixedFooter = true,
+  isCollapsed = false
+}: LayoutProps & { isCollapsed?: boolean }) => {
   const sidebarWidth = isCollapsed ? '20' : '64'; // 5rem vs 16rem
   const sidebarWidthClass = isCollapsed ? 'lg:w-20' : 'lg:w-64';
   const contentMarginClass = isCollapsed ? 'lg:ml-20' : 'lg:ml-64';

apps/website/ui/NavLink.tsx

@@ -1,7 +1,7 @@
 import { Box } from '@/ui/Box';
 import { Icon } from '@/ui/Icon';
-import Link from 'next/link';
 import { Text } from '@/ui/Text';
+import Link from 'next/link';
 import { LucideIcon, ChevronRight } from 'lucide-react';
 
 interface NavLinkProps {
@@ -11,9 +11,10 @@ interface NavLinkProps {
   isActive?: boolean;
   variant?: 'sidebar' | 'top';
   collapsed?: boolean;
+  LinkComponent?: React.ComponentType<{ href: string; children: React.ReactNode; className?: string }>;
 }
 
-export function NavLink({ href, label, icon, isActive, variant = 'sidebar', collapsed = false }: NavLinkProps) {
+export function NavLink({ href, label, icon, isActive, variant = 'sidebar', collapsed = false, LinkComponent = Link as any }: NavLinkProps) {
   const isTop = variant === 'top';
 
   // Radical "Game Menu" Style
@@ -72,11 +73,11 @@ export function NavLink({ href, label, icon, isActive, variant = 'sidebar', coll
   );
 
   return (
-    <Link 
+    <LinkComponent 
       href={href} 
       className={`w-full group block ${!isTop ? '' : ''}`}
     >
       {content}
-    </Link>
+    </LinkComponent>
   );
 }

apps/website/ui/VerticalBar.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+
+interface VerticalBarProps {
+  intent?: 'primary' | 'secondary' | 'success' | 'warning' | 'critical';
+  height?: string | number;
+}
+
+/**
+ * VerticalBar - A semantic decorative bar.
+ */
+export function VerticalBar({ intent = 'primary', height = '2rem' }: VerticalBarProps) {
+  const intentClasses = {
+    primary: 'bg-[var(--ui-color-intent-primary)]',
+    secondary: 'bg-[var(--ui-color-intent-secondary)]',
+    success: 'bg-[var(--ui-color-intent-success)]',
+    warning: 'bg-[var(--ui-color-intent-warning)]',
+    critical: 'bg-[var(--ui-color-intent-critical)]',
+  };
+
+  return (
+    <div 
+      className={`w-1 ${intentClasses[intent]}`} 
+      style={{ height: typeof height === 'number' ? `${height * 0.25}rem` : height }} 
+    />
+  );
+}