add payments page layouts
This commit is contained in:
smanylov
@@ -0,0 +1,7 @@
|
||||
export default function PaymentTubBuyTokens() {
|
||||
return (
|
||||
<div className="tab-content">
|
||||
PaymentTubBuyTokens
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -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>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
export default function PaymentTabTransactionHistory() {
|
||||
return (
|
||||
<div className="tab-content">
|
||||
payment-tab-transaction-history
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -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>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -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>
|
||||
)
|
||||
}
|
||||
@@ -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>
|
||||
)
|
||||
}
|
||||
@@ -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>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user