first commit

src/pages/home/index.ts

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

src/pages/home/ui/HomePage.tsx

@@ -0,0 +1,21 @@
+import { About } from '@widgets/about'
+import { Converter } from '@widgets/currency-converter'
+import { Footer } from '@widgets/footer'
+import { Header } from '@widgets/header'
+import { Hero } from '@widgets/hero'
+import { NetworksTable } from '@widgets/networks-table'
+
+export function HomePage() {
+  return (
+    <>
+      <Header />
+      <main>
+        <Hero />
+        <About />
+        <Converter />
+        <NetworksTable />
+      </main>
+      <Footer />
+    </>
+  )
+}

src/pages/login/index.ts

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

src/pages/login/ui/LoginPage.module.css

@@ -0,0 +1,7 @@
+.page {
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1rem 0;
+}

src/pages/login/ui/LoginPage.tsx

@@ -0,0 +1,10 @@
+import { LoginForm } from '@widgets/login-form'
+import styles from './LoginPage.module.css'
+
+export function LoginPage() {
+  return (
+    <div className={styles.page}>
+      <LoginForm />
+    </div>
+  )
+}

src/pages/profile/index.ts

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

src/pages/profile/ui/ProfilePage.module.css

@@ -0,0 +1,156 @@
+.page {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  background: var(--bg-deep);
+}
+
+.main {
+  max-width: 1024px;
+  width: 100%;
+  margin: 0 auto;
+  padding: 40px 32px 60px;
+  display: flex;
+  gap: 32px;
+}
+
+/* Desktop: avatar is left column, sections grow right */
+.profileTop {
+  flex-shrink: 0;
+}
+
+.userInfo {
+  display: none;
+}
+
+.sections {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.grid2 {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 16px;
+}
+
+.grid1 {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 16px;
+}
+
+.mnemonicRow {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 16px;
+}
+
+.mnemonicInfo {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.mnemonicIcon {
+  font-size: 16px;
+}
+
+.mnemonicText {
+  color: var(--text-secondary);
+  font-size: 14px;
+  font-weight: 400;
+}
+
+/* < 1024px: column layout, avatar + userInfo side by side at top */
+@media (max-width: 1023px) {
+  .main {
+    flex-direction: column;
+    padding: 24px 20px 40px;
+    gap: 24px;
+  }
+
+  .grid2 {
+    gap: 12px;
+  }
+
+  .profileTop {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    gap: 24px;
+  }
+
+  .userInfo {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    justify-content: center;
+  }
+
+  .userName {
+    font-size: 28px;
+    font-weight: 700;
+    color: var(--text-primary);
+    line-height: 1.2;
+  }
+
+  .userBalance {
+    font-size: 32px;
+    font-weight: 800;
+    color: var(--text-primary);
+  }
+
+  .userBalanceRub {
+    font-size: 13px;
+    color: var(--text-secondary);
+  }
+}
+
+/* < 650px: card padding 16px (в ProfileSection.module.css),
+   кнопка мнемоники — 100% ширины */
+@media (max-width: 649px) {
+  .mnemonicRow {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 16px;
+  }
+}
+
+/* < 640px: инпуты в колонку */
+@media (max-width: 639px) {
+  .main {
+    padding: 16px 16px 40px;
+  }
+
+  .grid2 {
+    grid-template-columns: 1fr;
+  }
+}
+
+/* < 550px: меньше текст и аватар */
+@media (max-width: 549px) {
+  .profileTop {
+    gap: 16px;
+  }
+
+  .userInfo {
+    padding-top: 8px;
+  }
+
+  .userName {
+    font-size: 18px;
+  }
+
+  .userBalance {
+    font-size: 22px;
+    margin-top: 4px;
+  }
+
+  .userBalanceRub {
+    font-size: 12px;
+  }
+}

src/pages/profile/ui/ProfilePage.tsx

@@ -0,0 +1,64 @@
+import { Button, FormField } from '@shared/ui'
+import { WalletHeader } from '@widgets/wallet-header'
+import { ProfileAvatar, ProfileSection } from '@widgets/profile'
+import styles from './ProfilePage.module.css'
+
+export function ProfilePage() {
+  return (
+    <div className={styles.page}>
+      <WalletHeader />
+      <main className={styles.main}>
+        <div className={styles.profileTop}>
+          <ProfileAvatar />
+          <div className={styles.userInfo}>
+            <span className={styles.userName}>Иванов Иван Иванович</span>
+            <span className={styles.userBalance}>$245.00</span>
+            <span className={styles.userBalanceRub}>≈ 22 340,50 ₽</span>
+          </div>
+        </div>
+
+        <div className={styles.sections}>
+          <ProfileSection title="Личные данные">
+            <div className={styles.grid2}>
+              <FormField label="Полное ФИО" value="Иванов Иван Иванович" placeholder="Например: Иванов Иван Иванович" />
+              <FormField label="Адрес электронной почты" value="ivanov@mail.ru" type="email" icon="check" placeholder="example@mail.ru" readOnly />
+              <FormField label="Серия и номер паспорта" value="4515 123456" placeholder="4515 123456" readOnly />
+              <FormField label="Номер телефона" value="+7 (999) 123-45-67" type="tel" icon="check" placeholder="+7 (999) 000-00-00" readOnly />
+            </div>
+          </ProfileSection>
+
+          <ProfileSection title="Верификация">
+            <div className={styles.grid2}>
+              <FormField label="ИНН" value="7712345678" readOnly icon="lock" placeholder="123456789012" />
+              <FormField label="ID аккаунта" value="ECSA-00184729" readOnly icon="lock" placeholder="ECSA-00000000" />
+            </div>
+          </ProfileSection>
+
+          <ProfileSection
+            title="Безопасность"
+            actions={
+              <>
+                <Button variant="danger">⚠️ Посмотреть приватный ключ</Button>
+                <Button variant="primary">СОХРАНИТЬ</Button>
+              </>
+            }
+          >
+            <div className={styles.grid1}>
+              <FormField label="Адрес ERC-20" readOnly icon="lock" value="0x1a2B3c4D5e6F7a8B9c0D1e2F3a4B5c6D7e8F9a0b" placeholder="0x0000000000000000000000000000000000000000" />
+            </div>
+          </ProfileSection>
+
+          <ProfileSection title="Мнемоника">
+            <div className={styles.mnemonicRow}>
+              <div className={styles.mnemonicInfo}>
+                <span className={styles.mnemonicIcon}>🔑</span>
+                <span className={styles.mnemonicText}>Сид-фраза из 12 слов для восстановления кошелька</span>
+              </div>
+              <Button variant="danger">⚠ Показать мнемонику</Button>
+            </div>
+          </ProfileSection>
+        </div>
+      </main>
+    </div>
+  )
+}

src/pages/register/index.ts

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

src/pages/register/ui/RegisterPage.module.css

@@ -0,0 +1,7 @@
+.page {
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1rem 0;
+}

src/pages/register/ui/RegisterPage.tsx

@@ -0,0 +1,10 @@
+import { RegisterForm } from '@widgets/register-form'
+import styles from './RegisterPage.module.css'
+
+export function RegisterPage() {
+  return (
+    <div className={styles.page}>
+      <RegisterForm />
+    </div>
+  )
+}

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>
+  )
+}

src/pages/swap/index.ts

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

src/pages/swap/ui/SwapPage.module.css

@@ -0,0 +1,52 @@
+.page {
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+    background: var(--bg-deep);
+}
+
+.tabs {
+    display: flex;
+    gap: 8px;
+    padding: 24px 28px 0;
+}
+
+.tab {
+    padding: 10px 24px;
+    border-radius: 10px;
+    font-size: 14px;
+    font-weight: 700;
+    cursor: pointer;
+    border: none;
+    font-family: var(--font-sans);
+    letter-spacing: 0.5px;
+    transition: all 0.2s;
+}
+
+.active {
+    background: linear-gradient(135deg, var(--grad-edge), var(--grad-center));
+    color: var(--text-primary);
+}
+
+.inactive {
+    background: rgba(255, 255, 255, 0.06);
+    color: var(--text-secondary);
+}
+
+.inactive:hover {
+    color: var(--text-primary);
+}
+
+.main {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 32px 20px 48px;
+}
+
+@media (max-width: 650px) {
+    .main {
+        padding: 32px 20px;
+    }
+}

src/pages/swap/ui/SwapPage.tsx

@@ -0,0 +1,38 @@
+import { useState } from 'react'
+import { Footer } from '@widgets/footer'
+import { SwapForm } from '@widgets/swap-form'
+import { WalletHeader } from '@widgets/wallet-header'
+import styles from './SwapPage.module.css'
+
+type Tab = 'swap' | 'bridge'
+
+export function SwapPage() {
+  const [tab, setTab] = useState<Tab>('swap')
+
+  return (
+    <div className={styles.page}>
+      <WalletHeader />
+
+      <div className={styles.tabs}>
+        <button
+          className={`${styles.tab} ${tab === 'swap' ? styles.active : styles.inactive}`}
+          onClick={() => setTab('swap')}
+        >
+          СВОП
+        </button>
+        <button
+          className={`${styles.tab} ${tab === 'bridge' ? styles.active : styles.inactive}`}
+          onClick={() => setTab('bridge')}
+        >
+          БРИДЖ
+        </button>
+      </div>
+
+      <main className={styles.main}>
+        <SwapForm />
+      </main>
+
+      <Footer />
+    </div>
+  )
+}

src/pages/wallet/index.ts

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

src/pages/wallet/ui/WalletPage.module.css

@@ -0,0 +1,40 @@
+.page {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  background: var(--bg-deep);
+}
+
+.main {
+  flex: 1;
+  padding: 28px 32px 40px;
+  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: 992px) {
+  .glow {
+    width: auto;
+    height: auto;
+  }
+}
+
+@media (max-width: 900px) {
+  .main {
+    padding: 20px 16px 32px;
+  }
+}

src/pages/wallet/ui/WalletPage.tsx

@@ -0,0 +1,17 @@
+import { BalanceCard } from '@widgets/balance-card'
+import { TokenTable } from '@widgets/token-table'
+import { WalletHeader } from '@widgets/wallet-header'
+import styles from './WalletPage.module.css'
+
+export function WalletPage() {
+  return (
+    <div className={styles.page}>
+      <WalletHeader />
+      <main className={styles.main}>
+        <div className={styles.glow} />
+        <BalanceCard />
+        <TokenTable />
+      </main>
+    </div>
+  )
+}