90 lines
3.2 KiB
TypeScript
90 lines
3.2 KiB
TypeScript
/* eslint-disable @next/next/no-img-element */
|
||
"use client";
|
||
import QuestionFormModal from "@/components/modals/QuestionFormModal";
|
||
import { useMediaQueries } from "@/hooks/useMediaQueries";
|
||
import { useModalStore } from "@/stores/useModalStore";
|
||
import { motion } from "framer-motion";
|
||
import React, { useEffect, useRef, useState } from "react";
|
||
|
||
export default function ResultsGarlandMobile() {
|
||
const containerRef = useRef<HTMLDivElement>(null);
|
||
const { setModal } = useModalStore();
|
||
const { isMd } = useMediaQueries();
|
||
const [videoExpanded, setVideoExpanded] = useState(false);
|
||
|
||
useEffect(() => {
|
||
const timeout = setTimeout(() => {
|
||
setVideoExpanded(true);
|
||
}, 4000);
|
||
return () => clearTimeout(timeout);
|
||
}, []);
|
||
|
||
return (
|
||
<div
|
||
ref={containerRef}
|
||
className="relative snap-start min-h-[100dvh] md:rounded-b-[5.208vw] rounded-b-[11.111vw] flex flex-col items-center bg-[url('/img/pages/results/components/gradients/mobile-purple.png')] bg-cover bg-center bg-no-repeat"
|
||
>
|
||
<img
|
||
src="/img/pages/results/components/garland/garland_tablet.svg"
|
||
alt="garland"
|
||
draggable={false}
|
||
className="absolute inset-0 w-full z-10 max-md:scale-[2] md:translate-y-[-20%]"
|
||
/>
|
||
|
||
<motion.h1
|
||
animate={{
|
||
opacity: videoExpanded ? 0 : 1,
|
||
transform: videoExpanded ? "translateY(-100%)" : "translateY(0)",
|
||
marginTop: videoExpanded ? "0" : isMd ? "41.276vw" : "61.111vw",
|
||
marginBottom: videoExpanded ? "0" : isMd ? "4.167vw" : "3.125vw",
|
||
height: videoExpanded ? "0" : "auto",
|
||
}}
|
||
transition={{
|
||
duration: 0.5,
|
||
ease: "easeInOut",
|
||
}}
|
||
className="md:text-[6.25vw] text-[11.111vw] md:mb-[3.125vw] mb-[6.667vw] text-white text-center leading-[95%] tracking-[-0.02em] font-medium"
|
||
>
|
||
Подводим <br className="md:hidden block" /> итоги 2025 года <br /> в
|
||
GRAFF.estate
|
||
</motion.h1>
|
||
<motion.video
|
||
animate={{
|
||
height: videoExpanded ? "100dvh" : isMd ? "41.667vw" : "51.111vw",
|
||
width: videoExpanded ? "100vw" : isMd ? "75.521vw" : "92.222vw",
|
||
borderRadius: videoExpanded
|
||
? isMd
|
||
? "0 0 5.208vw 5.208vw"
|
||
: "0 0 11.111vw 11.111vw"
|
||
: isMd
|
||
? "2.604vw"
|
||
: "5.556vw",
|
||
}}
|
||
transition={{
|
||
duration: 0.5,
|
||
ease: "easeInOut",
|
||
}}
|
||
src="/videos/pages/about/hero_video.mp4"
|
||
autoPlay
|
||
muted
|
||
loop
|
||
playsInline
|
||
className="object-cover mx-auto z-[10]"
|
||
/>
|
||
|
||
<motion.button
|
||
onClick={() => {
|
||
setModal(
|
||
<QuestionFormModal products={["Интерактивная презентация"]} />
|
||
);
|
||
}}
|
||
className="btnl
|
||
bg-[radial-gradient(circle_at_right_top,#FF79D2_0%,#C932E8_20%,#7A55FF_60%)]
|
||
md:px-[2.214vw] px-[4.444vw] absolute left-1/2 -translate-x-1/2 bottom-[4.444vw] md:py-[2.214vw] py-[4.722vw] z-[11] md:rounded-[2.083vw] rounded-[4.444vw] w-max mx-auto font-medium mt-auto "
|
||
>
|
||
Стать первыми в 2026
|
||
</motion.button>
|
||
</div>
|
||
);
|
||
}
|