first commit

src/pages/seed-phrase/index.ts

@@ -0,0 +1 @@
+export { SeedPhrasePage } from './ui/SeedPhrasePage'

src/pages/seed-phrase/ui/SeedPhrasePage.module.css

@@ -0,0 +1,33 @@
+.page {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  background: var(--bg-deep);
+}
+
+.main {
+  flex: 1;
+  padding: 40px 32px 60px;
+  max-width: 1200px;
+  width: 100%;
+  margin: 0 auto;
+  position: relative;
+}
+
+.glow {
+  position: absolute;
+  top: -40px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 600px;
+  height: 320px;
+  background: radial-gradient(ellipse, rgba(61, 42, 142, 0.15), transparent 70%);
+  pointer-events: none;
+  z-index: 0;
+}
+
+@media (max-width: 900px) {
+  .main {
+    padding: 20px 16px 40px;
+  }
+}

src/pages/seed-phrase/ui/SeedPhrasePage.tsx

@@ -0,0 +1,17 @@
+import { WalletHeader } from '@widgets/wallet-header'
+import { SeedPhraseWidget } from '@widgets/seed-phrase'
+import styles from './SeedPhrasePage.module.css'
+
+const MOCK_WORDS = ['egg', 'phone', 'long', 'vibe', 'potato', 'soup', 'skirt', 'black', 'phase', 'word', 'num', 'cucumber']
+
+export function SeedPhrasePage() {
+  return (
+    <div className={styles.page}>
+      <WalletHeader />
+      <main className={styles.main}>
+        <div className={styles.glow} />
+        <SeedPhraseWidget words={MOCK_WORDS} />
+      </main>
+    </div>
+  )
+}