add payments page layouts

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() {
 		<div>
 			<main>
 				<div>
-					page 1
+					emptypage
 				</div>
 			</main>
 		</div>

src/app/pages/page2/page.tsx

@@ -1,17 +0,0 @@
-import { Metadata } from 'next';
-
-export const metadata: Metadata = {
-	title: 'page 2',
-};
-
-export default function Home() {
-	return (
-		<div>
-			<main>
-				<div>
-					page 2
-				</div>
-			</main>
-		</div>
-	);
-}

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 (
+		<div>
+			<main>
+				<div className="payment-container">
+					<div>
+						<h1 className="page-title">💳 Управление подпиской и токенами</h1>
+						<p>
+							Выберите подходящий тарифный план или пополните баланс токенов для защиты файлов
+						</p>
+					</div>
+					<UserUsage />
+					<TokensSpendStats />
+					<PaymentTabs />
+					<SecurePayments />
+				</div>
+			</main>
+		</div>
+	);
+}