Cookies popup upd

src/app/layout.tsx

@@ -4,7 +4,7 @@ import Script from "next/script";
 import "./globals.css";
 import { QueryProvider } from "@/lib/QueryProvider";
 import { LenisProvider } from "@/lib/LenisProvider";
-import PopupModal from "@/components/modals/PopupModal";
+import CookiesPopup from "@/components/CookiesPopup";
 import LocaleLayout from "./[locale]/layout";
 
 export const metadata: Metadata = {
@@ -49,7 +49,7 @@ export default function RootLayout({
         <QueryProvider>
           <LenisProvider>
             <LocaleLayout>
-              <PopupModal />
+              <CookiesPopup />
               {children}
               <ModalContainer />
             </LocaleLayout>

src/components/CookiesPopup.tsx

@@ -0,0 +1,71 @@
+"use client";
+
+/* eslint-disable react-hooks/exhaustive-deps */
+/* eslint-disable @next/next/no-img-element */
+import { useEffect } from "react";
+import { motion } from "framer-motion";
+import Link from "next/link";
+import { usePopupStore } from "@/stores/usePopupStore";
+import { Button } from "@/ui/Button";
+
+function CookiesPopup() {
+  const { isShowCookiesPopup, setIsShowCookiesPopup } = usePopupStore();
+
+  function handlePopupClick() {
+    setIsShowCookiesPopup(false);
+  }
+
+  useEffect(() => {
+    if (isShowCookiesPopup === undefined) {
+      const timeout = setTimeout(() => {
+        setIsShowCookiesPopup(true);
+      }, 500);
+      return () => clearTimeout(timeout);
+    }
+  }, []);
+
+  return (
+    <>
+      {isShowCookiesPopup && (
+        <motion.div
+          animate={{ y: -40 }}
+          className="fixed bottom-0 md:left-10 left-[calc((100vw-350px)/2)] z-30 w-[350px] lg:w-[23.611vw] p-px lg:p-[0.069vw] rounded-2xl"
+        >
+          <div className="bg-[#37393B]/60 rounded-2xl p-4 flex flex-col gap-5 backdrop-blur-sm">
+            <div className="flex flex-col gap-2">
+              <div className="flex items-center gap-2">
+                <img
+                  src="/img/components/popups/cookies.png"
+                  alt="popup"
+                  className="lg:w-[2.222vw] lg:h-[2.222vw] w-8 h-8 object-cover"
+                />
+                <p className="heading2 font-medium">
+                  We use{" "}
+                  <Link
+                    href="/cookies"
+                    className="underline-offset-2 underline"
+                    onClick={handlePopupClick}
+                  >
+                    cookies
+                  </Link>
+                </p>
+              </div>
+              <p className="text1 leading-[135%] w-full">
+                They help us understand how you interact with our site and make
+                it more convenient and better.
+              </p>
+            </div>
+            <Button
+              onClick={handlePopupClick}
+              className="flex items-center gap-x-1 w-full justify-center btns bg-gradient rounded-xl 2xl:py-[0.556vw] py-2 hover:opacity-80 transition-opacity cursor-pointer"
+            >
+              Accept
+            </Button>
+          </div>
+        </motion.div>
+      )}
+    </>
+  );
+}
+
+export default CookiesPopup;

src/components/modals/PopupModal.tsx

@@ -1,66 +0,0 @@
-"use client";
-
-/* eslint-disable react-hooks/exhaustive-deps */
-import CloseIcon from "@/components/icons/CloseIcon";
-import TgIcon from "@/components/icons/TgIcon";
-import { useEffect } from "react";
-import { motion } from "framer-motion";
-import Link from "next/link";
-import { usePopupStore } from "@/stores/usePopupStore";
-import { useTranslations } from "next-intl";
-
-function Popup() {
-  const { isShowPopup, setIsShowPopup } = usePopupStore();
-
-  function handlePopupClick() {
-    setIsShowPopup(false);
-  }
-
-  useEffect(() => {
-    if (usePopupStore.getState().isShowPopup === undefined) {
-      const timeout = setTimeout(() => {
-        setIsShowPopup(true);
-      }, 10000);
-      return () => clearTimeout(timeout);
-    }
-  }, []);
-
-  const t = useTranslations("popup");
-
-  return (
-    <>
-      {isShowPopup && (
-        <motion.div
-          animate={{ y: -40 }}
-          transition={{ type: "spring" }}
-          className="fixed bottom-0 sm:left-10 left-1/2 max-md:-translate-x-1/2 z-30 w-[320px] lg:w-[22.222vw] p-px lg:p-[0.069vw] rounded-2xl bg-gradient"
-        >
-          <div className="bg-[#14161F] rounded-2xl p-4 flex flex-col gap-y-5 lg:gap-y-10">
-            <p className="btns font-medium leading-[15.4px]">{t("text")}</p>
-            <Link
-              href={"https://t.me/graffestate"}
-              target="_blank"
-              onClick={handlePopupClick}
-              className="flex items-center gap-x-1 w-full justify-center font-semibold btns bg-gradient rounded-full py-2 hover:opacity-80 transition-opacity"
-            >
-              <div className="text-white lg:size-[1.667vw] size-4">
-                <TgIcon />
-              </div>
-              {t("link")}
-            </Link>
-            <button
-              className="absolute top-2 right-2 hover:bg-white rounded-full flex p-px hover:bg-opacity-10 group transition-colors"
-              onClick={handlePopupClick}
-            >
-              <div className="text-white lg:size-[1.111vw] size-4 m-auto group-hover:text-black transition-colors">
-                <CloseIcon />
-              </div>
-            </button>
-          </div>
-        </motion.div>
-      )}
-    </>
-  );
-}
-
-export default Popup;

src/stores/usePopupStore.ts

@@ -2,19 +2,18 @@ import { create } from 'zustand';
 import { devtools, persist } from 'zustand/middleware';
 
 interface IPopupStore {
-  isShowPopup: boolean | undefined;
+  isShowCookiesPopup: boolean | undefined;
-  setIsShowPopup: (isShowPopup: boolean) => void;
+  setIsShowCookiesPopup: (isShowPopup: boolean) => void;
 }
 
 export const usePopupStore = create<IPopupStore>()(
-  devtools(
     persist(
       set => ({
-        isShowPopup: undefined,
+        isShowCookiesPopup: undefined,
-        setIsShowPopup: (isShowPopup: boolean) => set({ isShowPopup }),
+        setIsShowCookiesPopup: (isShowCookiesPopup: boolean) => set({ isShowCookiesPopup }),
       }),
       {
         name: 'popup',
       },
     ),
-  ));
+  );