From 0bb6128f49baf03f96ffde669cd2d6ef4ee2bb25 Mon Sep 17 00:00:00 2001
From: vchikalkin <djchikalkin@gmail.com>
Date: Tue, 2 Sep 2025 18:18:44 +0300
Subject: [PATCH] feat(pro-page): enhance subscription messaging and add
 benefits section

- Updated subscription status messaging for clarity and conciseness.
- Improved button styling based on trial availability.
- Added a new benefits section for non-active subscribers, highlighting key features of the Pro subscription.
---
 apps/web/app/(main)/pro/page.tsx              | 50 ++++++++++++++++---
 .../subscription/try-free-button.tsx          |  2 +-
 2 files changed, 45 insertions(+), 7 deletions(-)

diff --git a/apps/web/app/(main)/pro/page.tsx b/apps/web/app/(main)/pro/page.tsx
index 9ae2cd9..e6edf4f 100644
--- a/apps/web/app/(main)/pro/page.tsx
+++ b/apps/web/app/(main)/pro/page.tsx
@@ -3,7 +3,7 @@ import { getSessionUser } from '@/actions/session';
 import { TryFreeButton } from '@/components/subscription';
 import { env } from '@/config/env';
 import { Button } from '@repo/ui/components/ui/button';
-import { ArrowRight, Crown } from 'lucide-react';
+import { ArrowRight, Crown, Infinity as InfinityIcon, Star, Users } from 'lucide-react';
 import Link from 'next/link';
 
 export default async function ProPage() {
@@ -45,9 +45,7 @@ export default async function ProPage() {
           </h1>
 
           <p className="mx-auto mb-8 max-w-2xl text-xl text-gray-600 dark:text-gray-300">
-            {isActive
-              ? 'Ваша подписка Pro активна! Доступно неограниченное количество записей'
-              : 'Разблокируйте неограниченное количество записей в месяц'}
+            {isActive ? 'Ваша подписка Pro активна!' : 'Разблокируйте больше возможностей'}
           </p>
 
           {!isActive && (
@@ -56,9 +54,13 @@ export default async function ProPage() {
 
               <Button
                 asChild
-                className="w-full border-2 border-gray-300 text-gray-700 hover:bg-gray-100 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-700 sm:w-auto"
+                className={`w-full border-2 text-base font-semibold sm:w-auto ${
+                  canUseTrial
+                    ? 'border-gray-300 text-gray-700 hover:bg-gray-100 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-700'
+                    : 'border-0 bg-gradient-to-r from-purple-600 to-blue-600 text-white hover:from-purple-700 hover:to-blue-700 dark:from-purple-500 dark:to-blue-500 dark:hover:from-purple-600 dark:hover:to-blue-600'
+                }`}
                 size="lg"
-                variant="outline"
+                variant={canUseTrial ? 'outline' : 'default'}
               >
                 <Link href={env.BOT_URL} rel="noopener noreferrer" target="_blank">
                   Оформить подписку через бота
@@ -67,6 +69,42 @@ export default async function ProPage() {
               </Button>
             </div>
           )}
+
+          {!isActive && (
+            <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>
+              <div className="space-y-4">
+                <div className="flex items-start gap-3 rounded-lg border border-gray-200 bg-white/50 p-4 dark:border-gray-700 dark:bg-slate-800/50">
+                  <div className="mt-1 shrink-0">
+                    <InfinityIcon className="size-5 text-purple-600 dark:text-purple-400" />
+                  </div>
+                  <p className="text-left text-base leading-relaxed text-gray-700 dark:text-gray-300">
+                    Доступно неограниченное количество записей в месяц
+                  </p>
+                </div>
+
+                <div className="flex items-start gap-3 rounded-lg border border-gray-200 bg-white/50 p-4 dark:border-gray-700 dark:bg-slate-800/50">
+                  <div className="mt-1 shrink-0">
+                    <Users className="size-5 text-purple-600 dark:text-purple-400" />
+                  </div>
+                  <p className="text-left text-base leading-relaxed text-gray-700 dark:text-gray-300">
+                    Ваш профиль доступен всем пользователям
+                  </p>
+                </div>
+
+                <div className="flex items-start gap-3 rounded-lg border border-gray-200 bg-white/50 p-4 dark:border-gray-700 dark:bg-slate-800/50">
+                  <div className="mt-1 shrink-0">
+                    <Star className="size-5 text-purple-600 dark:text-purple-400" />
+                  </div>
+                  <p className="text-left text-base leading-relaxed text-gray-700 dark:text-gray-300">
+                    Профиль и аватар выделяются специальным цветом
+                  </p>
+                </div>
+              </div>
+            </div>
+          )}
         </div>
       </div>
     </div>
diff --git a/apps/web/components/subscription/try-free-button.tsx b/apps/web/components/subscription/try-free-button.tsx
index e89f6ba..011c627 100644
--- a/apps/web/components/subscription/try-free-button.tsx
+++ b/apps/web/components/subscription/try-free-button.tsx
@@ -14,7 +14,7 @@ export function TryFreeButton({ className = '', size = 'lg' }: TryFreeButtonProp
 
   return (
     <Button
-      className={`w-full bg-gradient-to-r from-purple-600 to-blue-600 px-8 py-3 text-lg font-semibold text-white shadow-lg transition-all duration-200 hover:from-purple-700 hover:to-blue-700 hover:shadow-xl sm:w-auto ${className}`}
+      className={`w-full bg-gradient-to-r from-purple-600 to-blue-600 px-8 py-3 text-base font-semibold text-white shadow-lg transition-all duration-200 hover:from-purple-700 hover:to-blue-700 hover:shadow-xl sm:w-auto ${className}`}
       onClick={handleTryFree}
       size={size}
     >