upd fixes popups

2025-05-30 13:14:26 +05:00
parent a659308277
commit cc8c569364
8 changed files with 95 additions and 89 deletions
@@ -1,11 +1,11 @@
-import { cookies } from '@/consts/cookies';
+import { cookies } from "@/consts/cookies";

 function CookiesPage() {
  return (
-    <div className='flex flex-col gap-10'>
-      <div className='flex flex-col gap-4'>
-        <p className='heading1 font-medium'>Политика использования Cookies</p>
-        <p className='text2 w-3/4 max-lg:w-full'>
+    <div className="flex flex-col gap-10">
+      <div className="flex flex-col gap-4">
+        <p className="heading1 font-medium">Политика использования Cookies</p>
+        <p className="text2 max-lg:w-full w-3/4">
          ООО “ГРАФФ.ЭСТЕЙТ” (далее — ГРАФФ.ЭСТЕЙТ) обрабатывает данные,
          указанные в настоящем документе (далее — Политика), собранные в
          процессе использования посетителями нашего веб-сайта. При нажатии
@@ -25,13 +25,13 @@ function CookiesPage() {

 function CookieItem({ title, content }: { title: string; content: string[] }) {
  return (
-    <div className='col-span-full grid grid-cols-4 py-6 border-t border-[#3D425C] last:border-b gap-x-2'>
-      <p className='heading2 font-medium w-full max-lg:col-span-2'>{title}</p>
-      <p className='space-y-4 col-start-2 col-end-4 col-span-2 text2 w-full max-lg:col-span-2'>
+    <div className="col-span-full grid grid-cols-4 py-6 border-t border-[#3D425C] last:border-b gap-x-2">
+      <p className="heading2 max-lg:col-span-2 w-full font-medium">{title}</p>
+      <div className="text2 max-lg:col-span-2 w-full col-span-2 col-start-2 col-end-4 space-y-4">
        {content.map((item, index) => (
          <p key={index}>{item}</p>
        ))}
-      </p>
+      </div>
    </div>
  );
 }
@@ -1,36 +1,36 @@
-import { ModalContainer } from '@/components/Layout/ModalContainer';
-import type { Metadata } from 'next';
-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/modals/CookiesPopup';
+import { ModalContainer } from "@/components/Layout/ModalContainer";
+import type { Metadata } from "next";
+import Script from "next/script";
+import "./globals.css";
+import { QueryProvider } from "@/lib/QueryProvider";
+import { LenisProvider } from "@/lib/LenisProvider";
+import PopupModal from "@/components/modals/TelegramPopup";
+import CookiesPopup from "@/components/modals/CookiesPopup";

 export const metadata: Metadata = {
-  title: 'Интерактивные решения для застройщиков',
+  title: "Интерактивные решения для застройщиков",
  description:
-    'Помогаем девелоперам эффективно демонстрировать свой объект. Продавать больше и быстрее.',
+    "Помогаем девелоперам эффективно демонстрировать свой объект. Продавать больше и быстрее.",
  keywords: [
-    'недвижимость',
-    'застройщики',
-    'девелоперы',
-    'интеграция',
-    'офисы продаж',
-    'демонстрация',
-    'интерактивный инструмент',
-    'интерактивная презентация',
+    "недвижимость",
+    "застройщики",
+    "девелоперы",
+    "интеграция",
+    "офисы продаж",
+    "демонстрация",
+    "интерактивный инструмент",
+    "интерактивная презентация",
  ],
  openGraph: {
-    title: 'Интерактивные решения для застройщиков',
+    title: "Интерактивные решения для застройщиков",
    description:
-      'Помогаем девелоперам эффективно демонстрировать свой объект. Продавать больше и быстрее.',
-    type: 'website',
-    siteName: 'Интерактивные решения для застройщиков',
-    url: 'https://graff.estate',
+      "Помогаем девелоперам эффективно демонстрировать свой объект. Продавать больше и быстрее.",
+    type: "website",
+    siteName: "Интерактивные решения для застройщиков",
+    url: "https://graff.estate",
    images: [
      {
-        url: 'https://graff.estate/icon.svg',
+        url: "https://graff.estate/icon.svg",
        width: 300,
        height: 200,
      },
@@ -45,7 +45,7 @@ export default function RootLayout({
 }>) {
  return (
    <html>
-      <body className='min-h-screen flex flex-col justify-between'>
+      <body className="flex flex-col justify-between min-h-screen">
        <QueryProvider>
          <LenisProvider>
            <PopupModal />
@@ -54,7 +54,7 @@ export default function RootLayout({
            <ModalContainer />
          </LenisProvider>
        </QueryProvider>
-        <Script id='metrika-counter' strategy='afterInteractive'>
+        <Script id="metrika-counter" strategy="afterInteractive">
          {`(function (m, e, t, r, i, k, a) {
        m[i] =
        m[i] ||
@@ -129,23 +129,18 @@ export function FeedbackForm() {
                >
                  Оставить заявку
                </Button>
-                <Link
-                  href={"/policy"}
-                  className="text2 xl:max-w-[60%] md:max-lg:max-w-[40%] md:max-lg:py-1"
-                >
-                  <p>
-                    <span className="text-[#7A7A7A]">
-                      *Нажимая кнопку отправить, вы даете
-                    </span>{" "}
-                    <Link href={"/privacy-policy"} className="underline">
-                      согласие на обработку персональных данных
-                    </Link>{" "}
-                    <span className="text-[#7A7A7A]">и принимаете </span>
-                    <Link href={"/policy"} className="underline">
-                      условия политики
-                    </Link>
-                  </p>
-                </Link>
+                <p className="text2 xl:max-w-[60%] md:max-lg:max-w-[40%] md:max-lg:py-1">
+                  <span className="text-[#7A7A7A]">
+                    *Нажимая кнопку отправить, вы даете
+                  </span>{" "}
+                  <Link href={"/privacy-policy"} className="underline">
+                    согласие на обработку персональных данных
+                  </Link>{" "}
+                  <span className="text-[#7A7A7A]">и принимаете </span>
+                  <Link href={"/policy"} className="underline">
+                    условия политики
+                  </Link>
+                </p>
              </div>
            </form>
          </FormProvider>
@@ -66,7 +66,7 @@ export function ArticleContentFormModal({
  return (
    <>
      <ArticleFormActions disabled={false} handleSave={handleSave} />
-      <div className="relative space-y-4 bg-[#232425] rounded-[28px] top-5 w-[calc(954/1440*100vw)] h-[calc(100vh-40px)] z-10 overflow-y-auto">
+      <div className="relative bg-[#232425] rounded-[28px] top-5 w-[calc(954/1440*100vw)] h-[calc(100vh-40px)] z-10 overflow-y-auto">
        <div className="top-3 right-4 absolute">
          <Button
            className="bg-[#37393B99] z-[3] backdrop-blur-sm p-4 btnm lg:rounded-[1.111vw] rounded-2xl"
@@ -96,14 +96,14 @@ export function ArticleContentFormModal({
          </Button>
        </div>
        <div
-          className="bg-no-repeat bg-cover bg-top px-[75px] pb-6 z-[2] w-full aspect-[954/261] relative flex items-end justify-between gap-4 before:absolute before:left-0 before:top-0 before:w-full before:h-full before:-z-1 before:aspect-[954/261] before:bg-gradient-to-t before:from-[#00000099]"
+          className="bg-no-repeat bg-cover bg-center px-[75px] pb-6 z-[2] w-full aspect-[954/261] relative flex items-end justify-between gap-4 before:absolute before:left-0 before:top-0 before:w-full before:h-full before:-z-[1] before:aspect-[954/261] before:bg-gradient-to-t before:from-[#00000099]"
          style={{
            backgroundImage: `url(${
              process.env.NEXT_PUBLIC_S3_BUCKET + posterImage
            })`,
          }}
        >
-          <p className="heading1 max-w-2/3 font-medium">{title}</p>
+          <p className="heading1 max-w-[66.667%] font-medium">{title}</p>
          <div className="flex flex-wrap gap-1">
            {tags?.map((tag) => (
              <p
@@ -1,9 +1,10 @@
 /* eslint-disable @next/next/no-img-element */
-'use client';
-import { usePopupStore } from '@/stores/usePopupStore';
-import { motion } from 'framer-motion';
-import Link from 'next/link';
-import { useEffect } from 'react';
+"use client";
+import { usePopupStore } from "@/stores/usePopupStore";
+import { Button } from "@/ui/Button";
+import { motion } from "framer-motion";
+import Link from "next/link";
+import { useEffect } from "react";

 function CookiesPopup() {
  const { isShowCookiesPopup, setIsShowCookiesPopup } = usePopupStore();
@@ -26,39 +27,38 @@ function CookiesPopup() {
      {isShowCookiesPopup && (
        <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-[350px] lg:w-[23.611vw] p-px lg:p-[0.069vw] rounded-2xl'
+          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'>
+          <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='w-[2.222vw] h-[2.222vw] object-cover'
+                  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'>
+                <p className="heading2 font-medium">
                  Мы используем 
                  <Link
-                    href='/cookies'
-                    className='underline underline-offset-2'
+                    href="/cookies"
+                    className="underline-offset-2 underline"
                    onClick={handlePopupClick}
                  >
                    cookie
                  </Link>
                </p>
              </div>
-              <p className='text-[0.972vw] leading-[135%] w-full'>
+              <p className="text1 leading-[135%] w-full">
                Они помогают нам понять, как вы взаимодействуете с нашим сайтом
                и сделать его удобнее и лучше.
              </p>
            </div>
-            <div
+            <Button
              onClick={handlePopupClick}
-              className='flex items-center gap-x-1 w-full justify-center btns bg-gradient rounded-xl py-[0.556vw] hover:opacity-80 transition-opacity cursor-pointer'
+              className="flex items-center gap-x-1 w-full justify-center btns bg-gradient rounded-xl py-[0.556vw] hover:opacity-80 transition-opacity cursor-pointer"
            >
              Принять
-            </div>
+            </Button>
          </div>
        </motion.div>
      )}
@@ -130,7 +130,7 @@ export function StoriesModal({ startIndex = 0 }: { startIndex?: number }) {
                  }`}
                />
                {currentIndex === index && (
-                  <div className="z-1 max-md:hidden space-y-5">
+                  <div className="z-[1] max-md:hidden space-y-5">
                    <p className="heading1 font-medium">{text}</p>
                    <div className="bg-white/30 w-full h-1 rounded-[34px]">
                      <div
@@ -3,13 +3,12 @@

 /* eslint-disable react-hooks/exhaustive-deps */
 import CloseIcon from "../../../public/icons/close.svg";
-import TelegramIcon from "../../../public/icons/tg.svg";
 import { useEffect } from "react";
 import { motion } from "framer-motion";
 import Link from "next/link";
 import { usePopupStore } from "@/stores/usePopupStore";

-function Popup() {
+function TelegramPopup() {
  const { isShowPopup, setIsShowPopup, isShowCookiesPopup } = usePopupStore();

  function handlePopupClick() {
@@ -34,18 +33,29 @@ function Popup() {
        <motion.div
          animate={{ y: -40 }}
          transition={{ type: "spring" }}
-          className="fixed bottom-0 md:left-10 left-[calc((100vw-320px)/2)] z-[30] w-[320px] lg:min-w-80 lg:w-[16vw] p-px lg:p-[0.069vw] rounded-2xl bg-gradient"
+          className="fixed bottom-0 sm:left-10 left-1/2 max-md:-translate-x-1/2 z-30 w-[350px] lg:w-[23.611vw] p-px lg:p-[0.069vw] rounded-2xl"
        >
-          <div className="bg-[#14161F] rounded-2xl p-4 flex flex-col gap-y-5 lg:gap-y-10">
-            <p className="btns font-medium">
-              Новости разработки интерактивных решений для девелоперов в нашем
-              телеграм канале
-            </p>
+          <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/tg.png"
+                  alt="popup"
+                  className="lg:w-[2.222vw] lg:h-[2.222vw] w-8 h-8 object-cover"
+                />
+                <p className="heading2 font-medium">GRAFF.estate</p>
+              </div>
+              <p className="text-[0.972vw] leading-[135%] w-full">
+                Новости разработки интерактивных решений для девелоперов в нашем
+                телеграм канале
+              </p>
+            </div>
+
            <Link
              href={"https://t.me/graffestate"}
              target="_blank"
              onClick={handlePopupClick}
-              className="gap-x-1 btns bg-gradient hover:opacity-80 flex items-center justify-center w-full py-2 font-semibold transition-opacity rounded-full"
+              className="flex items-center gap-x-1 w-full justify-center btns bg-gradient rounded-xl py-[0.556vw] hover:opacity-80 transition-opacity"
            >
              Перейти
            </Link>
@@ -62,4 +72,4 @@ function Popup() {
  );
 }

-export default Popup;
+export default TelegramPopup;
@@ -41,7 +41,7 @@ export function PrimeProgressItem({
    <motion.div
      animate={canAnimate ? { x, y, rotateZ, zIndex } : {}}
      transition={{ bounce: "none" }}
-      className="group max-lg:hidden flex items-center z-10 relative"
+      className="group max-lg:hidden relative z-10 flex items-center"
    >
      <motion.div
        animate={{ opacity: +!canAnimate }}
@@ -83,15 +83,16 @@ export function PrimeProgressItem({
        {active && (
          <motion.div
            initial={{ opacity: 0, y: 100 }}
+            style={{ x: "-50%" }}
            animate={{
              opacity: +active,
              y: active ? 0 : 100,
            }}
            exit={{ opacity: 0, y: 100 }}
            transition={{ bounce: "none" }}
-            className="flex flex-col items-center gap-[0.278vw] absolute -top-1/2 left-1/2 min-w-full -z-[5] !-translate-x-1/2 group-last:![transform:translateX(calc(-50%_+_0.4165vw))] group-first:![transform:translateX(calc(-50%_-_0.4165vw))]"
+            className="flex flex-col items-center gap-[0.278vw] absolute -top-1/2 left-1/2 min-w-full -z-[5] group-last:![transform:translateX(calc(-50%_+_0.4165vw))] group-first:![transform:translateX(calc(-50%_-_0.4165vw))]"
          >
-            <p className="btnm font-medium text-nowrap">{title}</p>
+            <p className="btnm text-nowrap font-medium">{title}</p>
            <motion.div className="w-[0.069vw] h-[0.556vw] rounded-[0.139vw] bg-[#7A7A7A]" />
          </motion.div>
        )}