feat: background blur compatibility, subscription page text from translation v2

src/components/Compatibility/index.tsx

@@ -2,7 +2,7 @@ import { useTranslation } from "react-i18next";
 import MainButton from "../MainButton";
 import Title from "../Title";
 import styles from "./styles.module.css";
-import { useCallback, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import NameInput from "./nameInput";
 import DatePicker from "./DatePicker";
 import { IDate } from "@/services/date";
@@ -12,6 +12,12 @@ import routes from "@/routes";
 import { useDispatch, useSelector } from "react-redux";
 import { actions, selectors } from "@/store";
 import { EPathsFromHome } from "@/store/siteConfig";
+import {
+  getCategoryIdByZodiacSign,
+  getZodiacSignByDate,
+} from "@/services/zodiac-sign";
+import { Asset } from "@/api/resources/Assets";
+import { getRandomArbitrary } from "@/services/random-value";
 
 function CompatibilityPage(): JSX.Element {
   const { t, i18n } = useTranslation();
@@ -25,6 +31,31 @@ function CompatibilityPage(): JSX.Element {
   const [compatCategory, setCompatCategory] = useState(1);
   const homeConfig = useSelector(selectors.selectHome);
   const showNavbarFooter = homeConfig.isShowNavbar;
+  const birthdate = useSelector(selectors.selectBirthdate);
+  const zodiacSign = getZodiacSignByDate(birthdate);
+  const [asset, setAsset] = useState<Asset>();
+  const api = useApi();
+  const locale = i18n.language;
+
+  const assetsData = useCallback(async () => {
+    const { asset_categories } = await api.getAssetCategories({ locale });
+    const categoryId = getCategoryIdByZodiacSign(zodiacSign, asset_categories);
+    const { assets } = await api.getAssets({
+      category: String(categoryId || "1"),
+    });
+    return assets;
+  }, [api, locale, zodiacSign]);
+
+  const {
+    data: assets,
+    // isPending
+  } = useApiCall<Asset[]>(assetsData);
+
+  useEffect(() => {
+    if (assets) {
+      setAsset(assets[getRandomArbitrary(0, assets?.length || 0)]);
+    }
+  }, [assets]);
 
   const handleNext = () => {
     if (isDisabled) return;
@@ -66,8 +97,6 @@ function CompatibilityPage(): JSX.Element {
     return navigate(routes.client.home());
   };
 
-  const api = useApi();
-  const locale = i18n.language;
   const loadData = useCallback(() => {
     return api
       .getAiCompatCategories({ locale })
@@ -98,8 +127,12 @@ function CompatibilityPage(): JSX.Element {
   return (
     <section
       className={`${styles.page} page`}
-      style={{ paddingBottom: showNavbarFooter ? "48px" : "16px" }}
+      style={{
+        paddingBottom: showNavbarFooter ? "48px" : "16px",
+        backgroundImage: `url(${asset?.url.replace("http://", "https://")})`,
+      }}
     >
+      <div className={styles.blurring}></div>
       {!showNavbarFooter && (
         <div className={styles.cross} onClick={handleCross}></div>
       )}

src/components/Compatibility/styles.module.css

@@ -4,8 +4,12 @@
   flex: auto;
   background-color: #121212;
   align-items: flex-start;
+  background-position: center;
+  /* background-size: cover; */
+  background-repeat: no-repeat;
 }
 
+
 .cross {
   position: absolute;
   top: 24px;
@@ -42,6 +46,20 @@
 
 .content {
   width: 100%;
+  position: relative;
+  z-index: 2;
+}
+
+.blurring {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: #00000045;
+  -webkit-backdrop-filter: blur(100px);
+  backdrop-filter: blur(100px);
+  z-index: 1;
 }
 
 .title {

src/components/SubscriptionPage/index.tsx

@@ -17,17 +17,17 @@ import { useState } from "react";
 const currency = Currency.USD;
 const locale = Locale.EN;
 const itemPriceId = "aura-membership-2-week-USD";
-const paymentItems = [
-  {
-    title: "Per 7-Day Trial For",
-    price: 1.0,
-    description: "2-Week Plan",
-  },
-];
 
 function SubscriptionPage(): JSX.Element {
   const [isOpenModal, setIsOpenModal] = useState(false);
   const { t } = useTranslation();
+  const paymentItems = [
+    {
+      title: "Per 7-Day Trial For",
+      price: 1.0,
+      description: t("au.2week_plan.web"),
+    },
+  ];
   const navigate = useNavigate();
   const email = useSelector(selectors.selectEmail);
   const itemPrice = useSelector(selectors.selectPlanById(itemPriceId));