payments card and separated /support url

frontend/app/(urls)/account/payments/page.tsx

@@ -1,7 +1,58 @@
-import React from 'react'
+'use client'
 
-const PaymentsPage = () => {
-  return <div>page</div>
+import React, { useEffect, useState } from 'react'
+import PricingCard from './PricingCard'
+import { PricingCardProps } from '@/app/types'
+import useUserStore from '@/app/store/userStore'
+import Loader from '@/components/ui/Loader'
+
+const AdminPayments = () => {
+  const { user } = useUserStore()
+  const [plans, setPlans] = useState<PricingCardProps[]>([])
+  const [isLoading, setIsLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+
+  useEffect(() => {
+    const fetchPlans = async () => {
+      try {
+        const response = await fetch('/api/account/get-plans')
+        if (!response.ok) {
+          throw new Error('Failed to fetch plans')
+        }
+        const data = await response.json()
+        setPlans(data)
+      } catch (err) {
+        setError(err instanceof Error ? err.message : 'Failed to load pricing plans')
+      } finally {
+        setIsLoading(false)
+      }
+    }
+
+    fetchPlans()
+  }, [])
+
+  if (isLoading) {
+    return <Loader />
+  }
+
+  if (error) {
+    return <div className="p-8 text-center text-red-500">{error}</div>
+  }
+
+  return (
+    <div className="container mx-auto translate-y-5 animate-[fadeIn_1.1s_ease-out_forwards] space-y-6">
+      <h2 className="mb-6 text-center text-3xl font-bold">Тарифные планы</h2>
+      <div className="grid grid-cols-1 gap-8 rounded-lg bg-white p-8 md:grid-cols-3">
+        {plans.map(plan => (
+          <PricingCard
+            key={plan.plan}
+            {...plan}
+            isActive={user?.account_type?.toLowerCase() === plan.plan.toLowerCase()}
+          />
+        ))}
+      </div>
+    </div>
+  )
 }
 
-export default PaymentsPage
+export default AdminPayments