added popup with tg link
This commit is contained in:
@@ -1,11 +1,13 @@
|
|||||||
import { PrimeDesktopPage } from '@/components/pages/PrimePage/PrimePage';
|
import { InProcess } from '@/components/pages/InProcess';
|
||||||
import PrimePageMobile from '@/components/pages/PrimePageMobile/PrimePageMobile';
|
// import { PrimeDesktopPage } from '@/components/pages/PrimePage/PrimePage';
|
||||||
|
// import PrimePageMobile from '@/components/pages/PrimePageMobile/PrimePageMobile';
|
||||||
|
|
||||||
export default function PrimePage() {
|
export default function PrimePage() {
|
||||||
return (
|
// return (
|
||||||
<div className="relative">
|
// <div className="relative">
|
||||||
<PrimePageMobile />
|
// <PrimePageMobile />
|
||||||
<PrimeDesktopPage />
|
// <PrimeDesktopPage />
|
||||||
</div>
|
// </div>
|
||||||
);
|
// );
|
||||||
|
return <InProcess />;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -4,6 +4,7 @@ import Script from 'next/script';
|
|||||||
import './globals.css';
|
import './globals.css';
|
||||||
import { QueryProvider } from '@/lib/QueryProvider';
|
import { QueryProvider } from '@/lib/QueryProvider';
|
||||||
import { LenisProvider } from '@/lib/LenisProvider';
|
import { LenisProvider } from '@/lib/LenisProvider';
|
||||||
|
import PopupModal from '@/components/modals/PopupModal';
|
||||||
|
|
||||||
export const metadata: Metadata = {
|
export const metadata: Metadata = {
|
||||||
title: 'Интерактивные решения для застройщиков',
|
title: 'Интерактивные решения для застройщиков',
|
||||||
@@ -46,6 +47,7 @@ export default function RootLayout({
|
|||||||
<body className="min-h-screen flex flex-col justify-between">
|
<body className="min-h-screen flex flex-col justify-between">
|
||||||
<QueryProvider>
|
<QueryProvider>
|
||||||
<LenisProvider>
|
<LenisProvider>
|
||||||
|
<PopupModal />
|
||||||
{children}
|
{children}
|
||||||
<ModalContainer />
|
<ModalContainer />
|
||||||
</LenisProvider>
|
</LenisProvider>
|
||||||
|
|||||||
@@ -85,7 +85,7 @@ export function Header() {
|
|||||||
{((isLg && scroll < -logoRef.current?.clientHeight!) || !isLg) && (
|
{((isLg && scroll < -logoRef.current?.clientHeight!) || !isLg) && (
|
||||||
<Link
|
<Link
|
||||||
href={'/'}
|
href={'/'}
|
||||||
className="aspect-square lg:p-[0.833vw] p-3 hover:bg-[#232425] group active:bg-white lg:rounded-[1.111vw] rounded-2xl content-center m-auto"
|
className="aspect-square lg:p-[1.111vw] p-3 hover:bg-[#232425] group active:bg-white lg:rounded-[1.111vw] rounded-2xl content-center m-auto"
|
||||||
>
|
>
|
||||||
<GraffIcon className="text-white group-active:text-black lg:w-[1.111vw] md:max-lg:w-[2.083vw] w-4 lg:h-[1.111vw] md:max-lg:h-[2.083vw] h-4" />
|
<GraffIcon className="text-white group-active:text-black lg:w-[1.111vw] md:max-lg:w-[2.083vw] w-4 lg:h-[1.111vw] md:max-lg:h-[2.083vw] h-4" />
|
||||||
</Link>
|
</Link>
|
||||||
|
|||||||
@@ -0,0 +1,62 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
/* 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() {
|
||||||
|
const { isShowPopup, setIsShowPopup } = usePopupStore();
|
||||||
|
|
||||||
|
function handlePopupClick() {
|
||||||
|
setIsShowPopup(false);
|
||||||
|
}
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (usePopupStore.getState().isShowPopup === undefined) {
|
||||||
|
const timeout = setTimeout(() => {
|
||||||
|
setIsShowPopup(true);
|
||||||
|
}, 10000);
|
||||||
|
return () => clearTimeout(timeout);
|
||||||
|
}
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
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]">
|
||||||
|
Новости разработки интерактивных решений для девелоперов в нашем
|
||||||
|
телеграм канале
|
||||||
|
</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"
|
||||||
|
>
|
||||||
|
<TelegramIcon className="lg:w-[1.667vw] lg:h-[1.667vw] w-4 h-4" />
|
||||||
|
Перейти
|
||||||
|
</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}
|
||||||
|
>
|
||||||
|
<CloseIcon className="lg:w-[1.111vw] lg:h-[1.111vw] w-4 h-4 m-auto group-hover:text-black transition-colors" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Popup;
|
||||||
Reference in New Issue
Block a user