From d89cc35fcac609a92cbe1e24cea342c93dae2855 Mon Sep 17 00:00:00 2001 From: smanylov Date: Mon, 1 Dec 2025 17:36:20 +0700 Subject: [PATCH] add payments page layouts --- README.md | 2 +- src/app/pages/{page1 => emptypage}/page.tsx | 4 +- src/app/pages/page2/page.tsx | 17 - src/app/pages/payment/page.tsx | 30 ++ src/app/styles/global-styles.scss | 1 + src/app/styles/payment-container.scss | 340 ++++++++++++++++++ src/app/ui/header/headerPanel.tsx | 7 +- src/app/ui/nav-link-dropdown.tsx | 12 +- src/app/ui/nav-links.tsx | 12 +- src/app/ui/payment/payment-tab-buy-tokens.tsx | 7 + src/app/ui/payment/payment-tab-tariffs.tsx | 122 +++++++ .../payment-tab-transaction-history.tsx | 7 + src/app/ui/payment/payment-tabs.tsx | 53 +++ src/app/ui/payment/secure-payments.tsx | 32 ++ src/app/ui/payment/tokens-spend-stats.tsx | 40 +++ src/app/ui/payment/user-usage.tsx | 41 +++ 16 files changed, 693 insertions(+), 34 deletions(-) rename src/app/pages/{page1 => emptypage}/page.tsx (83%) delete mode 100644 src/app/pages/page2/page.tsx create mode 100644 src/app/pages/payment/page.tsx create mode 100644 src/app/styles/payment-container.scss create mode 100644 src/app/ui/payment/payment-tab-buy-tokens.tsx create mode 100644 src/app/ui/payment/payment-tab-tariffs.tsx create mode 100644 src/app/ui/payment/payment-tab-transaction-history.tsx create mode 100644 src/app/ui/payment/payment-tabs.tsx create mode 100644 src/app/ui/payment/secure-payments.tsx create mode 100644 src/app/ui/payment/tokens-spend-stats.tsx create mode 100644 src/app/ui/payment/user-usage.tsx diff --git a/README.md b/README.md index d1f74b0..b0fb9d1 100644 --- a/README.md +++ b/README.md @@ -4,4 +4,4 @@ npm run dev ``` -Open [http://localhost:3000](http://localhost:3000) \ No newline at end of file +Open [http://localhost:2999](http://localhost:2999) \ No newline at end of file diff --git a/src/app/pages/page1/page.tsx b/src/app/pages/emptypage/page.tsx similarity index 83% rename from src/app/pages/page1/page.tsx rename to src/app/pages/emptypage/page.tsx index 49d924f..69451a5 100644 --- a/src/app/pages/page1/page.tsx +++ b/src/app/pages/emptypage/page.tsx @@ -1,7 +1,7 @@ import { Metadata } from 'next'; export const metadata: Metadata = { - title: 'page 1', + title: 'emptypage', }; export default function Home() { @@ -9,7 +9,7 @@ export default function Home() {
- page 1 + emptypage
diff --git a/src/app/pages/page2/page.tsx b/src/app/pages/page2/page.tsx deleted file mode 100644 index 0314a45..0000000 --- a/src/app/pages/page2/page.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import { Metadata } from 'next'; - -export const metadata: Metadata = { - title: 'page 2', -}; - -export default function Home() { - return ( -
-
-
- page 2 -
-
-
- ); -} diff --git a/src/app/pages/payment/page.tsx b/src/app/pages/payment/page.tsx new file mode 100644 index 0000000..9e59a16 --- /dev/null +++ b/src/app/pages/payment/page.tsx @@ -0,0 +1,30 @@ +import { Metadata } from 'next'; +import UserUsage from '@/app/ui/payment/user-usage'; +import TokensSpendStats from '@/app/ui/payment/tokens-spend-stats'; +import PaymentTabs from '@/app/ui/payment/payment-tabs'; +import SecurePayments from '@/app/ui/payment/secure-payments'; + +export const metadata: Metadata = { + title: 'payment', +}; + +export default function Home() { + return ( +
+
+
+
+

💳 Управление подпиской и токенами

+

+ Выберите подходящий тарифный план или пополните баланс токенов для защиты файлов +

+
+ + + + +
+
+
+ ); +} diff --git a/src/app/styles/global-styles.scss b/src/app/styles/global-styles.scss index 726d045..0caff06 100644 --- a/src/app/styles/global-styles.scss +++ b/src/app/styles/global-styles.scss @@ -1,6 +1,7 @@ @use './header.scss'; @use './dashboard.scss'; @use './settings.scss'; +@use './payment-container.scss'; .btn { padding: 12px 24px; diff --git a/src/app/styles/payment-container.scss b/src/app/styles/payment-container.scss new file mode 100644 index 0000000..4891da6 --- /dev/null +++ b/src/app/styles/payment-container.scss @@ -0,0 +1,340 @@ +.payment-container { + max-width: 1200px; + margin: 0 auto; + padding: 15px; + + .page-title { + font-size: 1.8rem; + margin-bottom: 8px; + } + + .usage-stats, + .tokens-stats { + background: white; + border-radius: 16px; + padding: 25px; + margin-bottom: 25px; + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); + + h3 { + margin-bottom: 16px; + color: #1e293b; + font-size: 1.15rem; + font-weight: bold; + } + } + + .stats-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); + gap: 16px; + + .stat-card { + background: #f8fafc; + border-radius: 14px; + padding: 16px; + text-align: center; + border: 1px solid #e2e8f0; + } + + .stat-value { + font-size: 1.6rem; + font-weight: 700; + color: #1e293b; + margin-bottom: 4px; + } + + .stat-label { + color: #64748b; + font-size: 0.85rem; + } + + .progress-bar { + width: 100%; + height: 6px; + background: #e2e8f0; + border-radius: 3px; + overflow: hidden; + margin-top: 8px; + } + + .progress-fill { + height: 100%; + background: linear-gradient(90deg, #10b981, #059669); + transition: width 1s ease; + } + } + + .tokens-stats { + .tokens-comparison { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 20px; + margin-bottom: 25px; + } + + .month-stats { + background: #f8fafc; + border-radius: 14px; + padding: 16px; + text-align: center; + + &.current { + background: linear-gradient(135deg, #e0e7ff, #c7d2fe); + border: 2px solid #6366f1; + + .spent-amount { + background: linear-gradient(135deg, #6366f1, #8b5cf6); + -webkit-text-fill-color: transparent; + background-clip: text; + } + } + + .spent-amount { + font-size: 2.2rem; + font-weight: 800; + margin-bottom: 6px; + color: #64748b; + } + + .month-title { + font-size: 1rem; + font-weight: 600; + color: #1e293b; + margin-bottom: 12px; + } + + .spent-label { + margin-bottom: 8px; + } + + .spent-label, + .protected-label { + color: #64748b; + font-size: 0.85rem; + } + } + } + + .payment-tabs { + display: flex; + gap: 8px; + margin-bottom: 25px; + background: white; + border-radius: 16px; + padding: 6px; + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); + + .payment-tab { + flex: 1; + text-align: center; + padding: 12px 16px; + border-radius: 12px; + cursor: pointer; + transition: all .3s; + font-weight: 600; + font-size: 0.9rem; + border: none; + background: transparent; + color: #64748b; + + &.active { + background: linear-gradient(135deg, #6366f1, #8b5cf6); + color: white; + transform: translateY(-2px); + box-shadow: 0 8px 25px rgba(99, 102, 241, 0.3); + + &:hover { + background: linear-gradient(135deg, #6366f1, #8b5cf6); + } + } + + &:hover { + background: linear-gradient(135deg, #d7d8e9, #aa90e9); + } + } + } + + .tab-content { + .billing-toggle { + text-align: center; + margin-bottom: 30px; + + &>div { + display: inline-block; + background: white; + border-radius: 16px; + padding: 5px; + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); + } + + .billing-btn { + padding: 10px 25px; + border: none; + border-radius: 12px; + font-weight: 600; + cursor: pointer; + transition: 0.3s; + background: transparent; + color: rgb(100, 116, 139); + position: relative; + font-size: 0.9rem; + + &.active { + background: linear-gradient(135deg, rgb(99, 102, 241), rgb(139, 92, 246)); + color: #fff; + } + + span { + position: absolute; + top: -6px; + right: -6px; + background: #f59e0b; + color: white; + font-size: 9px; + padding: 2px 5px; + border-radius: 6px; + font-weight: 700; + } + } + } + + .subscription-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); + gap: 20px; + margin-bottom: 25px; + } + + .plan-card { + background: white; + border-radius: 20px; + padding: 25px; + position: relative; + border: 2px solid #e2e8f0; + transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); + cursor: pointer; + overflow: visible; + + .plan-header { + text-align: center; + margin-bottom: 20px; + position: relative; + } + + .plan-icon { + font-size: 2.5rem; + margin-bottom: 8px; + filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1)); + } + + .plan-name { + font-size: 1.2rem; + font-weight: 700; + color: #1e293b; + margin-bottom: 6px; + } + + .plan-price { + font-size: 2rem; + font-weight: 800; + background: linear-gradient(135deg, #6366f1, #8b5cf6); + -webkit-text-fill-color: transparent; + background-clip: text; + margin-bottom: 4px; + } + + .plan-period { + color: #64748b; + font-size: 0.85rem; + } + + .plan-tokens { + background: linear-gradient(135deg, #e3f2fd, #bbdefb); + color: #1976d2; + padding: 6px 14px; + border-radius: 16px; + font-size: 0.85rem; + font-weight: 600; + margin: 12px auto; + display: inline-block; + } + + .plan-features { + list-style: none; + margin-bottom: 20px; + } + + .plan-feature { + display: flex; + align-items: center; + gap: 8px; + padding: 6px 0; + font-size: 0.9rem; + color: #374151; + } + + .feature-icon { + width: 18px; + height: 18px; + border-radius: 50%; + background: #10b981; + display: flex; + align-items: center; + justify-content: center; + color: white; + font-size: 11px; + flex-shrink: 0; + + &.not { + background: #ef4444; + } + } + } + } + + .secure-payments-wrapper { + background: white; + border-radius: 16px; + padding: 20px; + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); + + h3 { + margin-bottom: 16px; + color: #1e293b; + display: flex; + align-items: center; + gap: 8px; + font-size: 1.1rem; + font-weight: bold; + } + + .secure-payments-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); + gap: 16px; + text-align: center; + } + + .secure-payments-card { + padding: 12px; + + .secure-payments-card-header { + font-size: 1.8rem; + margin-bottom: 8px; + } + + h4 { + color: #1e293b; + margin-bottom: 6px; + font-size: 0.95rem; + font-weight: bold; + } + + p { + color: #64748b; + font-size: 0.85rem; + } + } + } +} \ No newline at end of file diff --git a/src/app/ui/header/headerPanel.tsx b/src/app/ui/header/headerPanel.tsx index a7106dc..dc586e1 100644 --- a/src/app/ui/header/headerPanel.tsx +++ b/src/app/ui/header/headerPanel.tsx @@ -12,7 +12,10 @@ export default function HeaderPanel() {
-
+
@@ -20,7 +23,7 @@ export default function HeaderPanel() { 800 токенов
-
+ + PaymentTubBuyTokens +
+ ) +} \ No newline at end of file diff --git a/src/app/ui/payment/payment-tab-tariffs.tsx b/src/app/ui/payment/payment-tab-tariffs.tsx new file mode 100644 index 0000000..2dfd7dc --- /dev/null +++ b/src/app/ui/payment/payment-tab-tariffs.tsx @@ -0,0 +1,122 @@ +export default function PaymentTabTariffs() { + return ( +
+
+
+ + +
+
+
+
+
+
🚀
+

СТАРТ

+
900₽
+
в месяц
+
100 токенов включено
+
+
    +
  • + ✓ + 100 файлов в месяц +
    • +
  • + ✓ + 1 ГБ хранилища +
    • +
  • + ✓ + До 10 МБ на файл +
    • +
  • + ✓ + Базовые модули защиты +
    • +
  • + ✓ + Поддержка 24/7 +
    • +
  • + ✗ + API доступ +
    • +
+
+
+
+
🚀
+

ПРЕМИУМ

+
3500₽
+
в месяц
+
100 токенов включено
+
+
    +
  • + ✓ + 100 файлов в месяц +
    • +
  • + ✓ + 1 ГБ хранилища +
    • +
  • + ✓ + До 10 МБ на файл +
    • +
  • + ✓ + Базовые модули защиты +
    • +
  • + ✓ + Поддержка 24/7 +
    • +
  • + ✗ + API доступ +
    • +
+
+
+
+
🚀
+

ПРОФИ

+
9500₽
+
в месяц
+
100 токенов включено
+
+
    +
  • + ✓ + 100 файлов в месяц +
    • +
  • + ✓ + 1 ГБ хранилища +
    • +
  • + ✓ + До 10 МБ на файл +
    • +
  • + ✓ + Базовые модули защиты +
    • +
  • + ✓ + Поддержка 24/7 +
    • +
  • + ✗ + API доступ +
    • +
+
+
+
+ ) +} \ No newline at end of file diff --git a/src/app/ui/payment/payment-tab-transaction-history.tsx b/src/app/ui/payment/payment-tab-transaction-history.tsx new file mode 100644 index 0000000..3869aa4 --- /dev/null +++ b/src/app/ui/payment/payment-tab-transaction-history.tsx @@ -0,0 +1,7 @@ +export default function PaymentTabTransactionHistory() { + return ( +
+ payment-tab-transaction-history +
+ ) +} \ No newline at end of file diff --git a/src/app/ui/payment/payment-tabs.tsx b/src/app/ui/payment/payment-tabs.tsx new file mode 100644 index 0000000..2edf12e --- /dev/null +++ b/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 ( + <> +
+ + + +
+
+ {selectedTab === '1' && ( + + )} + {selectedTab === '2' && ( + + )} + {selectedTab === '3' && ( + + )} +
+ + ) +} \ No newline at end of file diff --git a/src/app/ui/payment/secure-payments.tsx b/src/app/ui/payment/secure-payments.tsx new file mode 100644 index 0000000..d530eaa --- /dev/null +++ b/src/app/ui/payment/secure-payments.tsx @@ -0,0 +1,32 @@ +export default function SecurePayments() { + return ( +
+

+ 🔒 Безопасные платежи +

+
+
+
+ 🪪 +
+

Яндекс.Касса

+

Надёжная платёжная система с защитой данных

+
+
+
+ 💳 +
+

Все способы оплаты

+

Банковские карты, электронные кошельки, СБП

+
+
+
+ 🔐 +
+

SSL шифрование

+

Ваши платёжные данные защищены

+
+
+
+ ) +} \ No newline at end of file diff --git a/src/app/ui/payment/tokens-spend-stats.tsx b/src/app/ui/payment/tokens-spend-stats.tsx new file mode 100644 index 0000000..d90037e --- /dev/null +++ b/src/app/ui/payment/tokens-spend-stats.tsx @@ -0,0 +1,40 @@ +export default function TokensSpendStats() { + return ( +
+

+ Статистика трат токенов +

+
+
+
+ Текущий месяц (декабрь 2025) +
+
+ 0 +
+
+ токенов потрачено +
+
+ Защищено файлов: 0 +
+
+ +
+
+ Прошлый месяц (ноябрь 2025) +
+
+ 0 +
+
+ токенов потрачено +
+
+ Защищено файлов: 0 +
+
+
+
+ ) +} \ No newline at end of file diff --git a/src/app/ui/payment/user-usage.tsx b/src/app/ui/payment/user-usage.tsx new file mode 100644 index 0000000..0669b1c --- /dev/null +++ b/src/app/ui/payment/user-usage.tsx @@ -0,0 +1,41 @@ +export default function UserUsage() { + return ( +
+

+ 📊 Ваше использование +

+
+
+
0 / 2,000
+
Файлов в месяц
+
+
+
+
+
+
+
0 / 20 ГБ
+
Объём хранилища
+
+
+
+
+
+
+
0
+
Токенов на балансе
+
+
+
ПРОФИ
+
Текущий план
+
+
+
+ ) +} \ No newline at end of file