Initial SFERA platform baseline

starter/src/components/layout/app-shell.tsx

@@ -0,0 +1,17 @@
+// starter/src/components/layout/app-shell.tsx
+import { Sidebar } from "./sidebar";
+import { Topbar } from "./topbar";
+
+export function AppShell({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="min-h-screen bg-background text-foreground">
+      <Sidebar />
+      <div className="lg:pl-72">
+        <Topbar />
+        <main className="mx-auto max-w-7xl px-4 py-6 sm:px-6 lg:px-8">
+          {children}
+        </main>
+      </div>
+    </div>
+  );
+}

starter/src/components/layout/sidebar.tsx

@@ -0,0 +1,51 @@
+// starter/src/components/layout/sidebar.tsx
+import {
+  BarChart3,
+  Bot,
+  Briefcase,
+  CheckSquare,
+  Gauge,
+  GitBranch,
+  Plug,
+  Settings,
+  Users,
+  WalletCards,
+} from "lucide-react";
+
+const items = [
+  { label: "Dashboard", icon: Gauge },
+  { label: "Клиенты", icon: Users },
+  { label: "Сделки", icon: Briefcase },
+  { label: "Мерчанты", icon: WalletCards },
+  { label: "Задачи", icon: CheckSquare },
+  { label: "Бординг", icon: GitBranch },
+  { label: "Аналитика", icon: BarChart3 },
+  { label: "AI", icon: Bot },
+  { label: "Интеграции", icon: Plug },
+  { label: "Настройки", icon: Settings },
+];
+
+export function Sidebar() {
+  return (
+    <aside className="fixed inset-y-0 left-0 hidden w-72 border-r bg-card/60 px-4 py-5 backdrop-blur lg:block">
+      <div className="mb-8">
+        <div className="text-lg font-semibold tracking-tight">SFERA</div>
+        <div className="text-xs text-muted-foreground">
+          Enterprise AI Workspace
+        </div>
+      </div>
+
+      <nav className="space-y-1">
+        {items.map((item) => (
+          <button
+            key={item.label}
+            className="flex w-full items-center gap-3 rounded-xl px-3 py-2 text-sm text-muted-foreground transition hover:bg-muted hover:text-foreground"
+          >
+            <item.icon className="h-4 w-4" />
+            {item.label}
+          </button>
+        ))}
+      </nav>
+    </aside>
+  );
+}

starter/src/components/layout/topbar.tsx

@@ -0,0 +1,27 @@
+// starter/src/components/layout/topbar.tsx
+import { Bell, Command, Search } from "lucide-react";
+
+export function Topbar() {
+  return (
+    <header className="sticky top-0 z-20 border-b bg-background/80 backdrop-blur">
+      <div className="flex h-16 items-center justify-between px-4 sm:px-6 lg:px-8">
+        <div className="flex w-full max-w-xl items-center gap-2 rounded-2xl border bg-card px-3 py-2 text-sm text-muted-foreground">
+          <Search className="h-4 w-4" />
+          <span>Поиск по клиентам, сделкам, задачам...</span>
+          <div className="ml-auto flex items-center gap-1 rounded-md border px-1.5 py-0.5 text-xs">
+            <Command className="h-3 w-3" /> K
+          </div>
+        </div>
+
+        <div className="ml-4 flex items-center gap-2">
+          <button className="rounded-xl border p-2 hover:bg-muted">
+            <Bell className="h-4 w-4" />
+          </button>
+          <button className="rounded-xl border px-3 py-2 text-sm hover:bg-muted">
+            AI Copilot
+          </button>
+        </div>
+      </div>
+    </header>
+  );
+}