feat: initialise subscription page

src/locales/en/en.json

@@ -174,6 +174,12 @@
     "childPhoneDesc2": "• Log in with your account",
     "childPhoneDesc3": "• Choose Child mode"
   },
+  "subscription": {
+    "selectTariff": "Select a tariff",
+    "selectPaymentMethod": "Select a payment method",
+    "cancellPaymentTitle": "Payment can be cancelled within 24 hours",
+    "pay": "Pay for a subscription"
+  },
   "button": {
     "login": "Login",
     "register": "Register",

src/locales/ru/ru.json

@@ -174,6 +174,12 @@
     "childPhoneDesc2": "• Войдите под Вашим аккаунтом",
     "childPhoneDesc3": "• Выберите режим Ребенок"
   },
+  "subscription": {
+    "selectTariff": "Выберите тариф",
+    "selectPaymentMethod": "Выберите способ оплаты",
+    "cancellPaymentTitle": "Платеж можно отменить в течении 24 часов",
+    "pay": "Оплатить подписку"
+  },
   "button": {
     "login": "Войти",
     "register": "Зарегистрироваться",

src/pages/Subscription/Subscription.css

 .subscription {
-    padding: 0 1rem;
+    padding-top: 60px;
 }
\ No newline at end of file

src/pages/Subscription/Subscription.tsx

 import React from "react";
 import "./Subscription.css";
+import CButton from "../../components/CButton";
+import { useTranslation } from "react-i18next";
+
+const tariffs = [
+  {
+    id: 1,
+    title: "Yearly",
+    amount: 25,
+  },
+  {
+    id: 2,
+    title: "3-Months",
+    amount: 15,
+  },
+  {
+    id: 3,
+    title: "Monthly",
+    amount: 10,
+  },
+];
+
+const paymentMethods = [
+  {
+    id: 1,
+    paymethod_name: "Карта РФ: Мир, Visa, Mastercard",
+  },
+  {
+    id: 2,
+    paymethod_name: "СБП (Все банки РФ)",
+  },
+  {
+    id: 3,
+    paymethod_name: "МИР",
+  },
+];
 
 const Subscription: React.FC = () => {
-  return <div className="subscription">Subscription</div>;
+  const { t } = useTranslation();
+
+  return (
+    <div className="subscription wrapper">
+      <div className="subscription__tariffs">
+        <h3 className="subscription__tariffs__title">
+          {t("subscription.selectTariff")}
+        </h3>
+
+        <div className="subscription__tariffs__list">
+          {tariffs.map((tariff) => (
+            <div key={tariff.id} className="subscription__tariff">
+              <h4 className="subscription__tariff__title">{tariff.title}</h4>
+              <p className="subscription__tariff__amount">${tariff.amount}</p>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      <div className="subscription__payments">
+        <h3 className="subscription__payments__title">
+          {t("subscription.selectPaymentMethod")}
+        </h3>
+
+        <div className="subscription__payments__list">
+          {paymentMethods.map((method) => (
+            <div key={method.id} className="subscription__payment">
+              <p className="subscription__payment__name">
+                {method.paymethod_name}
+              </p>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      <CButton title={t("subscription.pay")} />
+    </div>
+  );
 };
 
 export default Subscription;