Enhance ProPage: Add subscription pricing display and update layout

- Integrated subscription pricing information by fetching active subscription prices and displaying them on the ProPage.
- Adjusted layout margins for improved visual consistency in the header and benefits sections.
- Enhanced user experience by conditionally rendering the pricing section based on available subscription prices.

apps/web/app/(main)/pro/page.tsx

@@ -1,9 +1,11 @@
-import { getSubscription } from '@/actions/api/subscriptions';
+import { getSubscription, getSubscriptionPrices } from '@/actions/api/subscriptions';
 import { getSessionUser } from '@/actions/session';
 import { PageHeader } from '@/components/navigation';
 import { TryFreeButton } from '@/components/subscription';
 import { env } from '@/config/env';
+import { Enum_Subscriptionprice_Period as SubscriptionPricePeriod } from '@repo/graphql/types';
 import { Button } from '@repo/ui/components/ui/button';
+import { formatMoney } from '@repo/utils/money';
 import { ArrowRight, Crown, Infinity as InfinityIcon } from 'lucide-react';
 import Link from 'next/link';
 
@@ -15,6 +17,13 @@ export default async function ProPage() {
 
   const canUseTrial = !usedTrialSubscription;
 
+  const { subscriptionPrices = [] } = await getSubscriptionPrices({
+    filters: {
+      active: { eq: true },
+      period: { ne: SubscriptionPricePeriod.Trial },
+    },
+  });
+
   const botUrl = new URL(env.BOT_URL);
   botUrl.searchParams.set('start', 'pro');
 
@@ -22,7 +31,7 @@ export default async function ProPage() {
     <div className="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50 to-indigo-100 dark:from-slate-900 dark:via-slate-800 dark:to-slate-900">
       <PageHeader title="" />
       {/* Hero Section */}
-      <div className="px-4 py-16 sm:px-6 lg:px-8">
+      <div className="px-4 py-8 sm:px-6 lg:px-8">
         <div className="mx-auto max-w-4xl text-center">
           <div className="mb-2 flex justify-center">
             <div className="relative">
@@ -33,14 +42,14 @@ export default async function ProPage() {
             </div>
           </div>
 
-          <h1 className="mb-6 text-4xl font-bold tracking-tight text-gray-900 dark:text-white sm:text-6xl">
+          <h1 className="mb-4 text-4xl font-bold tracking-tight text-gray-900 dark:text-white sm:text-6xl">
             <span className="bg-gradient-to-r from-purple-600 to-blue-600 bg-clip-text text-transparent dark:from-purple-700 dark:to-blue-700">
               Pro
             </span>{' '}
             Доступ
           </h1>
 
-          <p className="mx-auto mb-8 max-w-2xl text-xl text-gray-600 dark:text-gray-300">
+          <p className="mx-auto mb-6 max-w-2xl text-xl text-gray-600 dark:text-gray-300">
             {hasActiveSubscription
               ? 'Ваш Pro доступ активен!'
               : 'Разблокируйте больше возможностей'}
@@ -69,7 +78,7 @@ export default async function ProPage() {
           )}
 
           <div className="mx-auto mt-12 max-w-2xl">
-            <h2 className="mb-6 text-center text-2xl font-bold text-gray-900 dark:text-white">
+            <h2 className="mb-4 text-center text-2xl font-bold text-gray-900 dark:text-white">
               Преимущества
             </h2>
             <div className="space-y-4">
@@ -92,6 +101,47 @@ export default async function ProPage() {
               </div> */}
             </div>
           </div>
+
+          {subscriptionPrices?.length > 0 && (
+            <div className="mx-auto mt-12 max-w-2xl">
+              <h2 className="mb-4 text-center text-2xl font-bold text-gray-900 dark:text-white">
+                Цены
+              </h2>
+              <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+                {subscriptionPrices.map((price) => (
+                  <div
+                    className={`relative rounded-xl border bg-white/60 p-4 text-left dark:bg-slate-800/60 ${
+                      price?.period === SubscriptionPricePeriod.Month
+                        ? 'border-2 border-purple-400'
+                        : 'border-gray-200 dark:border-gray-700'
+                    }`}
+                    key={price?.documentId}
+                  >
+                    {price?.period === SubscriptionPricePeriod.Month && (
+                      <div className="absolute -top-2 right-3 rounded-full bg-purple-600 px-2 py-0.5 text-xs font-semibold text-white dark:bg-purple-500">
+                        Популярный
+                      </div>
+                    )}
+                    <div className="flex items-baseline justify-between">
+                      <div className="text-xl font-bold text-gray-900 dark:text-white">
+                        {formatMoney(price?.amount ?? 0)}
+                      </div>
+                      {typeof price?.days === 'number' && (
+                        <div className="text-sm text-gray-600 dark:text-gray-300">
+                          {price.days} дн.
+                        </div>
+                      )}
+                    </div>
+                    {price?.description && (
+                      <div className="mt-2 text-sm text-gray-600 dark:text-gray-300">
+                        {price.description}
+                      </div>
+                    )}
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
         </div>
       </div>
     </div>