add payments page layouts

src/app/ui/header/headerPanel.tsx

@@ -12,7 +12,10 @@ export default function HeaderPanel() {
 				<input type="text" placeholder="Поиск контента..." id="global-search" />
 			</div>
 			<div className="header-action">
-				<div className="tokens-balance">
+				<Link
+					href={'/pages/payment'}
+					className="tokens-balance"
+				>
 					<div className="tokens-wrapper" title="Текущий баланс токенов для защиты файлов">
 						<svg viewBox="0 0 24 24" fill="currentColor" style={{ width: "16px", height: "16px" }}>
 							<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 16c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4z"></path>
@@ -20,7 +23,7 @@ export default function HeaderPanel() {
 						<span className="tokens-count">800</span>
 						<span className="tokens-label">токенов</span>
 					</div>
-				</div>
+				</Link>
 				<NotificationsButton />
 				<Link
 					className="icon-btn"

src/app/ui/nav-link-dropdown.tsx

@@ -15,27 +15,27 @@ export default function DropDownList() {
 	const links = [
 		{
 			name: 'Маркировка фото',
-			href: '/pages/page1'
+			href: '/pages/emptypage'
 		},
 		{
 			name: 'Маркировка видео',
-			href: '/pages/page1'
+			href: '/pages/emptypage'
 		},
 		{
 			name: 'Маркировка аудио',
-			href: '/pages/page1'
+			href: '/pages/emptypage'
 		},
 		{
 			name: 'Маркировка PDF',
-			href: '/pages/page1'
+			href: '/pages/emptypage'
 		},
 		{
 			name: 'Маркировка PHP/JS',
-			href: '/pages/page1'
+			href: '/pages/emptypage'
 		},
 		{
 			name: 'Маркировка Текста',
-			href: '/pages/page1'
+			href: '/pages/emptypage'
 		},
 	];
 

src/app/ui/nav-links.tsx

@@ -11,7 +11,7 @@ import { logout } from '@/app/actions/auth';
 const links = [
 	{
 		name: 'Отчёты',
-		href: '/pages/page1',
+		href: '/pages/emptypage',
 		img: 'M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zM9 17H7v-7h2v7zm4 0h-2V7h2v10zm4 0h-2v-4h2v4z'
 	},
 	{
@@ -21,27 +21,27 @@ const links = [
 	},
 	{
 		name: 'Мой контент',
-		href: '/pages/page1',
+		href: '/pages/emptypage',
 		img: 'M20 6h-2.18c.11-.31.18-.65.18-1a2.996 2.996 0 0 0-5.5-1.65l-.5.67-.5-.68C10.96 2.54 10 2 9 2 7.34 2 6 3.34 6 5c0 .35.07.69.18 1H4c-1.11 0-1.99.89-1.99 2L2 19c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V8c0-1.11-.89-2-2-2zm-5-2c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zM9 4c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1z'
 	},
 	{
 		name: 'Реферальная программа',
-		href: '/pages/page1',
+		href: '/pages/emptypage',
 		img: 'M16 4c0-1.11.89-2 2-2s2 .89 2 2-.89 2-2 2-2-.89-2-2zm4 18v-6h2.5l-2.54-7.63A1.5 1.5 0 0 0 18.54 8H16c-.8 0-1.54.37-2 1l-3 4v2h2l2.54-3.82L16.5 18H20z'
 	},
 	{
 		name: 'Нарушения',
-		href: '/pages/page1',
+		href: '/pages/emptypage',
 		img: 'M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z'
 	},
 	{
 		name: 'Поиск',
-		href: '/pages/page1',
+		href: '/pages/emptypage',
 		img: 'M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'
 	},
 	{
 		name: 'API',
-		href: '/pages/page1',
+		href: '/pages/emptypage',
 		img: 'M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0L19.2 12l-4.6-4.6L16 6l6 6-6 6-1.4-1.4z'
 	}
 ];

src/app/ui/payment/payment-tab-buy-tokens.tsx

@@ -0,0 +1,7 @@
+export default function PaymentTubBuyTokens() {
+	return (
+		<div className="tab-content">
+			PaymentTubBuyTokens
+		</div>
+	)
+}

src/app/ui/payment/payment-tab-tariffs.tsx

@@ -0,0 +1,122 @@
+export default function PaymentTabTariffs() {
+	return (
+		<div className="tab-content">
+			<div className="billing-toggle">
+				<div>
+					<button className="billing-btn active">💳 Помесячно</button>
+					<button className="billing-btn">
+						🔥 Годовая
+						<span>ВЫГОДНО</span>
+					</button>
+				</div>
+			</div>
+			<div className="subscription-grid">
+				<div className="plan-card animate-card">
+					<div className="plan-header">
+						<div className="plan-icon">🚀</div>
+						<h3 className="plan-name">СТАРТ</h3>
+						<div className="plan-price">900₽</div>
+						<div className="plan-period">в месяц</div>
+						<div className="plan-tokens">100 токенов включено</div>
+					</div>
+					<ul className="plan-features">
+						<li className="plan-feature">
+							<span className="feature-icon">✓</span>
+							100 файлов в месяц
+						</li>
+						<li className="plan-feature">
+							<span className="feature-icon">✓</span>
+							1 ГБ хранилища
+						</li>
+						<li className="plan-feature">
+							<span className="feature-icon">✓</span>
+							До 10 МБ на файл
+						</li>
+						<li className="plan-feature">
+							<span className="feature-icon">✓</span>
+							Базовые модули защиты
+						</li>
+						<li className="plan-feature">
+							<span className="feature-icon">✓</span>
+							Поддержка 24/7
+						</li>
+						<li className="plan-feature">
+							<span className="feature-icon not">✗</span>
+							API доступ
+						</li>
+					</ul>
+				</div>
+				<div className="plan-card animate-card">
+					<div className="plan-header">
+						<div className="plan-icon">🚀</div>
+						<h3 className="plan-name">ПРЕМИУМ</h3>
+						<div className="plan-price">3500₽</div>
+						<div className="plan-period">в месяц</div>
+						<div className="plan-tokens">100 токенов включено</div>
+					</div>
+					<ul className="plan-features">
+						<li className="plan-feature">
+							<span className="feature-icon">✓</span>
+							100 файлов в месяц
+						</li>
+						<li className="plan-feature">
+							<span className="feature-icon">✓</span>
+							1 ГБ хранилища
+						</li>
+						<li className="plan-feature">
+							<span className="feature-icon">✓</span>
+							До 10 МБ на файл
+						</li>
+						<li className="plan-feature">
+							<span className="feature-icon">✓</span>
+							Базовые модули защиты
+						</li>
+						<li className="plan-feature">
+							<span className="feature-icon">✓</span>
+							Поддержка 24/7
+						</li>
+						<li className="plan-feature">
+							<span className="feature-icon not">✗</span>
+							API доступ
+						</li>
+					</ul>
+				</div>
+				<div className="plan-card animate-card">
+					<div className="plan-header">
+						<div className="plan-icon">🚀</div>
+						<h3 className="plan-name">ПРОФИ</h3>
+						<div className="plan-price">9500₽</div>
+						<div className="plan-period">в месяц</div>
+						<div className="plan-tokens">100 токенов включено</div>
+					</div>
+					<ul className="plan-features">
+						<li className="plan-feature">
+							<span className="feature-icon">✓</span>
+							100 файлов в месяц
+						</li>
+						<li className="plan-feature">
+							<span className="feature-icon">✓</span>
+							1 ГБ хранилища
+						</li>
+						<li className="plan-feature">
+							<span className="feature-icon">✓</span>
+							До 10 МБ на файл
+						</li>
+						<li className="plan-feature">
+							<span className="feature-icon">✓</span>
+							Базовые модули защиты
+						</li>
+						<li className="plan-feature">
+							<span className="feature-icon">✓</span>
+							Поддержка 24/7
+						</li>
+						<li className="plan-feature">
+							<span className="feature-icon not">✗</span>
+							API доступ
+						</li>
+					</ul>
+				</div>
+			</div>
+		</div>
+	)
+}

src/app/ui/payment/payment-tab-transaction-history.tsx

@@ -0,0 +1,7 @@
+export default function PaymentTabTransactionHistory() {
+	return (
+		<div className="tab-content">
+			payment-tab-transaction-history
+		</div>
+	)
+}

src/app/ui/payment/payment-tabs.tsx

@@ -0,0 +1,53 @@
+'use client'
+
+import { useState } from 'react';
+import PaymentTabTariffs from '@/app/ui/payment/payment-tab-tariffs';
+import PaymentTubBuyTokens from './payment-tab-buy-tokens';
+import PaymentTabTransactionHistory from './payment-tab-transaction-history'; 
+
+
+export default function PaymentTabs() {
+	let [selectedTab, setSelectedTab] = useState('1');
+	function switchTabsHandler(tab: string) {
+		console.log('click');
+		setSelectedTab(tab);
+	}
+	return (
+		<>
+			<div className="payment-tabs">
+				<button
+					className={`payment-tab ${selectedTab === '1' ? 'active' : ''}`}
+					onClick={() => {
+						switchTabsHandler('1')
+					}}>
+					Тарифные планы
+				</button>
+				<button
+					className={`payment-tab ${selectedTab === '2' ? 'active' : ''}`}
+					onClick={() => {
+						switchTabsHandler('2')
+					}}>
+					Пополнить токены
+				</button>
+				<button
+					className={`payment-tab ${selectedTab === '3' ? 'active' : ''}`}
+					onClick={() => {
+						switchTabsHandler('3')
+					}}>
+					История операций
+				</button>
+			</div>
+			<div className="tab-content">
+				{selectedTab === '1' && (
+					<PaymentTabTariffs/>
+				)}
+				{selectedTab === '2' && (
+					<PaymentTubBuyTokens/>
+				)}
+				{selectedTab === '3' && (
+					<PaymentTabTransactionHistory/>
+				)}
+			</div>
+		</>
+	)
+}

src/app/ui/payment/secure-payments.tsx

@@ -0,0 +1,32 @@
+export default function SecurePayments() {
+	return (
+		<div className="secure-payments-wrapper">
+			<h3>
+				🔒 Безопасные платежи
+			</h3>
+			<div className="secure-payments-grid">
+				<div className="secure-payments-card">
+					<div className="secure-payments-card-header">
+						🪪
+					</div>
+					<h4>Яндекс.Касса</h4>
+					<p>Надёжная платёжная система с защитой данных</p>
+				</div>
+				<div className="secure-payments-card">
+					<div className="secure-payments-card-header">
+						💳
+					</div>
+					<h4>Все способы оплаты</h4>
+					<p>Банковские карты, электронные кошельки, СБП</p>
+				</div>
+				<div className="secure-payments-card">
+					<div className="secure-payments-card-header">
+						🔐
+					</div>
+					<h4>SSL шифрование</h4>
+					<p>Ваши платёжные данные защищены</p>
+				</div>
+			</div>
+		</div>
+	)
+}

src/app/ui/payment/tokens-spend-stats.tsx

@@ -0,0 +1,40 @@
+export default function TokensSpendStats() {
+	return (
+		<div className="tokens-stats">
+			<h3>
+				Статистика трат токенов
+			</h3>
+			<div className="tokens-comparison">
+				<div className="month-stats current">
+					<div className="month-title">
+						Текущий месяц (декабрь 2025)
+					</div>
+					<div className="spent-amount">
+						0
+					</div>
+					<div className="spent-label">
+						токенов потрачено
+					</div>
+					<div className="protected-label">
+						Защищено файлов: <span>0</span>
+					</div>
+				</div>
+
+				<div className="month-stats">
+					<div className="month-title">
+						Прошлый месяц (ноябрь 2025)
+					</div>
+					<div className="spent-amount">
+						0
+					</div>
+					<div className="spent-label">
+						токенов потрачено
+					</div>
+					<div className="protected-label">
+						Защищено файлов: <span>0</span>
+					</div>
+				</div>
+			</div>
+		</div>
+	)
+}

src/app/ui/payment/user-usage.tsx

@@ -0,0 +1,41 @@
+export default function UserUsage() {
+	return (
+		<div className="usage-stats">
+			<h3>
+				📊 Ваше использование
+			</h3>
+			<div className="stats-grid">
+				<div className="stat-card">
+					<div className="stat-value">0 / 2,000</div>
+					<div className="stat-label">Файлов в месяц</div>
+					<div className="progress-bar">
+						<div
+							className="progress-fill"
+							style={{ width: '50%' }}
+						>
+						</div>
+					</div>
+				</div>
+				<div className="stat-card">
+					<div className="stat-value">0 / 20 ГБ</div>
+					<div className="stat-label">Объём хранилища</div>
+					<div className="progress-bar">
+						<div
+							className="progress-fill"
+							style={{ width: '50%' }}
+						>
+						</div>
+					</div>
+				</div>
+				<div className="stat-card">
+					<div className="stat-value">0</div>
+					<div className="stat-label">Токенов на балансе</div>
+				</div>
+				<div className="stat-card">
+					<div className="stat-value">ПРОФИ</div>
+					<div className="stat-label">Текущий план</div>
+				</div>
+			</div>
+		</div>
+	)
+}