refactor(pro-page): streamline ProPage layout and improve bottom navigation visibility
- Consolidated the main container for the ProPage to enhance layout consistency. - Updated the BottomNav component to conditionally hide on the Pro page, improving navigation clarity for users.
This commit is contained in:
vchikalkin
parent
81e223c69b
commit
9903fe4233
@ -25,90 +25,88 @@ export default async function ProPage() {
|
||||
const canUseTrial = !isActive && !hasUsedTrial;
|
||||
|
||||
return (
|
||||
<>
|
||||
<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="" />
|
||||
<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">
|
||||
{/* Hero Section */}
|
||||
<div className="px-4 py-16 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">
|
||||
<div className="absolute inset-0 rounded-full bg-gradient-to-r from-purple-600 to-blue-600 opacity-30 blur-xl" />
|
||||
<div className="relative rounded-full bg-gradient-to-r from-purple-600 to-blue-600 p-4">
|
||||
<Crown className="size-8 text-white" />
|
||||
</div>
|
||||
{/* Hero Section */}
|
||||
<div className="px-4 py-16 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">
|
||||
<div className="absolute inset-0 rounded-full bg-gradient-to-r from-purple-600 to-blue-600 opacity-30 blur-xl" />
|
||||
<div className="relative rounded-full bg-gradient-to-r from-purple-600 to-blue-600 p-4">
|
||||
<Crown className="size-8 text-white" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h1 className="mb-6 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">
|
||||
Pro
|
||||
</span>
|
||||
</h1>
|
||||
<h1 className="mb-6 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">
|
||||
Pro
|
||||
</span>
|
||||
</h1>
|
||||
|
||||
<p className="mx-auto mb-8 max-w-2xl text-xl text-gray-600 dark:text-gray-300">
|
||||
{isActive ? 'Ваша подписка Pro активна!' : 'Разблокируйте больше возможностей'}
|
||||
</p>
|
||||
<p className="mx-auto mb-8 max-w-2xl text-xl text-gray-600 dark:text-gray-300">
|
||||
{isActive ? 'Ваша подписка Pro активна!' : 'Разблокируйте больше возможностей'}
|
||||
</p>
|
||||
|
||||
{!isActive && (
|
||||
<div className="flex flex-col items-center justify-center gap-4 sm:flex-row">
|
||||
{canUseTrial && <TryFreeButton />}
|
||||
{!isActive && (
|
||||
<div className="flex flex-col items-center justify-center gap-4 sm:flex-row">
|
||||
{canUseTrial && <TryFreeButton />}
|
||||
|
||||
<Button
|
||||
asChild
|
||||
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={canUseTrial ? 'outline' : 'default'}
|
||||
>
|
||||
<Link href={env.BOT_URL} rel="noopener noreferrer" target="_blank">
|
||||
Оформить подписку через бота
|
||||
<ArrowRight className="ml-2 size-5" />
|
||||
</Link>
|
||||
</Button>
|
||||
<Button
|
||||
asChild
|
||||
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={canUseTrial ? 'outline' : 'default'}
|
||||
>
|
||||
<Link href={env.BOT_URL} rel="noopener noreferrer" target="_blank">
|
||||
Оформить подписку через бота
|
||||
<ArrowRight className="ml-2 size-5" />
|
||||
</Link>
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<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="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 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">
|
||||
<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 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>
|
||||
);
|
||||
}
|
||||
|
||||
@ -4,12 +4,16 @@ import { NavButton } from './nav-button';
|
||||
import { BookOpen, Newspaper, PlusCircle, User, Users } from 'lucide-react';
|
||||
import { usePathname } from 'next/navigation';
|
||||
|
||||
const hideOn = ['/pro'];
|
||||
|
||||
export function BottomNav() {
|
||||
const pathname = usePathname();
|
||||
|
||||
const isFirstLevel = pathname.split('/').length <= 2;
|
||||
if (!isFirstLevel) return null;
|
||||
|
||||
if (hideOn.includes(pathname)) return null;
|
||||
|
||||
return (
|
||||
<nav className="sticky inset-x-0 bottom-0 border-t border-border bg-background">
|
||||
<div className="grid grid-cols-5">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user