Первоначальная версия VidConf

frontend/src/components/auth/AuthLayout.tsx

@@ -0,0 +1,51 @@
+import type { ReactNode } from 'react'
+import { LogoMark } from '@/components/ui/LogoMark'
+import { ThemeToggle } from '@/components/ui/ThemeToggle'
+import '@/styles/auth.css'
+
+/**
+ * Общая двухколоночная разметка экранов auth (бренд-панель + форма),
+ * см. design/mockups/auth.html. Переключатель темы — плавающей плашкой в
+ * правом верхнем углу (см. design/mockups/dark/login.html): у экрана нет
+ * общего топбара, панель бренда и форма — раздельные колонки.
+ */
+export function AuthLayout({ children }: { children: ReactNode }) {
+  return (
+    <div className="layout">
+      <ThemeToggle className="theme-toggle--floating" />
+
+      <aside className="brand-panel">
+        <div className="brand-mark">
+          <LogoMark /> VidConf
+        </div>
+        <div className="brand-copy">
+          <p className="eyebrow">[ SELF-HOSTED ВИДЕОКОНФЕРЕНЦИИ ]</p>
+          <h1 className="brand-headline">
+            Ваши встречи.
+            <br />
+            Ваша инфраструктура.
+          </h1>
+          <p className="brand-sub">
+            Видео, записи и AI-саммари обрабатываются на ваших серверах - данные не уходят за пределы вашей
+            инфраструктуры. Гости подключаются по ссылке или номеру, без регистрации.
+          </p>
+          <div className="brand-stats">
+            <div className="stat-glass">
+              <strong>100%</strong>
+              <span>данных - в вашем контуре</span>
+            </div>
+            <div className="stat-glass">
+              <strong>AI-саммари</strong>
+              <span>на почту после встречи</span>
+            </div>
+          </div>
+        </div>
+        <p className="hint-msg" style={{ position: 'relative', zIndex: 1 }}>
+          © 2026 VidConf · self-hosted
+        </p>
+      </aside>
+
+      <main className="form-panel">{children}</main>
+    </div>
+  )
+}