upd
This commit is contained in:
@@ -184,7 +184,7 @@ export default function ResultsAchievements() {
|
||||
|
||||
<div className=" bg-[#FFFFFF1A] backdrop-blur-[24px] border-[2px] border-[#FFFFFF1A] rounded-[1.667vw] p-[2.222vw]">
|
||||
<div className="headline1 mb-[0.556vw] !text-[1.667vw]">
|
||||
Покупка парковочных мест и<br /> локеров
|
||||
Покупка парковочных мест и локеров
|
||||
</div>
|
||||
<img
|
||||
src="/img/pages/results/reels/modules/6.png"
|
||||
|
||||
@@ -92,7 +92,7 @@ function Events({ segmentProgress }: { segmentProgress: MotionValue<number> }) {
|
||||
),
|
||||
}}
|
||||
>
|
||||
Международный <br /> строительный форум 100+ <br /> TechnoBuild
|
||||
Международный <br /> строительный форум 100+ TechnoBuild
|
||||
</motion.p>
|
||||
<motion.p
|
||||
style={{
|
||||
@@ -110,8 +110,8 @@ function Events({ segmentProgress }: { segmentProgress: MotionValue<number> }) {
|
||||
className="absolute bottom-[6.139vw] w-[20.833vw] py-[1.111vw] pl-[1.667vw] pr-[1.111vw] bg-[#FFFFFF1A] backdrop-blur-[24px] flex justify-between gap-[1.111vw] overflow-clip items-center rounded-[1.111vw] border-[2px] border-[#FFFFFF1A]"
|
||||
>
|
||||
<p className="text-start text-[0.972vw] leading-[100%] tracking-[-0.01em] font-medium z-[2]">
|
||||
Взяли первую строчку рейтинга RACA за экспертизу в категории
|
||||
Production
|
||||
Взяли первую строчку рейтинга RACA за экспертизу
|
||||
в категории Production
|
||||
</p>
|
||||
<img
|
||||
src="/img/pages/results/reels/RACA_logo.png"
|
||||
|
||||
@@ -55,7 +55,7 @@ export default function ResultsGeneral() {
|
||||
</>,
|
||||
<>
|
||||
Общая сумма броней превысила <br />
|
||||
30 000 000 000 рублей
|
||||
30 млрд рублей
|
||||
</>,
|
||||
]}
|
||||
shiftBreakpoints={[0, 0.3, 0.5, 0.7, 0.9]}
|
||||
|
||||
@@ -1,272 +0,0 @@
|
||||
/* eslint-disable @next/next/no-img-element */
|
||||
import { motion } from "framer-motion";
|
||||
import MobileReels from "./MobileReels";
|
||||
import CardsSwiper from "../Tablet&Mobile/CardsSwiper";
|
||||
import { useModalStore } from "@/stores/useModalStore";
|
||||
import QuestionFormModal from "@/components/modals/QuestionFormModal";
|
||||
import ResultsTeamWheel from "../ResultsTeamWheel";
|
||||
|
||||
export default function AchievementsMobile() {
|
||||
return <></>;
|
||||
}
|
||||
|
||||
export function Legenda() {
|
||||
return (
|
||||
<div className="snap-center md:h-[140.625vw] h-[183.333vw] md:mt-[1.042vw] mt-[2.222vw] md:rounded-[5.208vw] rounded-[11.111vw] overflow-hidden relative flex flex-col bg-center bg-cover bg-no-repeat bg-[#37393B99] md:pb-[5.208vw]">
|
||||
<h2 className="text-white text-center text-[4.444vw] font-medium leading-[95%] tracking-[-0.02em] z-[10] md:mt-[5.208vw] mt-[11.111vw] md:mb-[5.208vw] mb-[6.667vw] line2 w-[91.667vw] mx-auto">
|
||||
Но победы <br className="md:block hidden" /> были не только наши!
|
||||
</h2>
|
||||
|
||||
<div className="h-[105vw] w-[91.111vw] mx-auto md:rounded-[4.167vw] rounded-[8.889vw] overflow-hidden relative">
|
||||
<video
|
||||
src="/videos/pages/results/legenda.MOV"
|
||||
autoPlay
|
||||
loop
|
||||
muted
|
||||
playsInline
|
||||
className="h-full w-full object-cover"
|
||||
/>
|
||||
<img
|
||||
src="/img/pages/results/achievments/Tablet/office-r.png"
|
||||
alt=""
|
||||
className="absolute md:bottom-[2.995vw] bottom-[3.333vw] md:right-[2.995vw] right-[3.333vw] md:rounded-[2.083vw] rounded-[4.444vw] size-[26.389vw] object-cover"
|
||||
/>
|
||||
</div>
|
||||
<p className="text-white text-center md:text-[2.604vw] text-[4.444vw] font-medium leading-[120%] tracking-[-0.01em] z-[10] mb-[2.222vw] mt-[6.667vw]">
|
||||
Звание лучшего офиса продаж <br /> второй год подряд забрал наш партнер
|
||||
<br /> ГК Легенда
|
||||
</p>
|
||||
<p className="text-white text-center md:text-[1.563vw] text-[3.333vw] leading-[120%] tracking-[-0.01em] z-[10] w-[91.111vw] mx-auto opacity-60">
|
||||
для которой мы укомплектовали офис продаж ЖК{" "}
|
||||
<br className="md:hidden block " /> Северный Порт{" "}
|
||||
<br className="md:block hidden" />
|
||||
интерактивными инструментами продаж
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function GraffEstateView() {
|
||||
function GraffLabel({
|
||||
title,
|
||||
className,
|
||||
}: {
|
||||
title: string;
|
||||
className?: string;
|
||||
}) {
|
||||
return (
|
||||
<div
|
||||
className={`bg-[#FFFFFF29] md:py-[1.302vw] py-[2.222vw] backdrop-blur-[24px] md:px-[2.604vw] px-[3.333vw] rounded-full md:btnm btns w-max ${className}`}
|
||||
>
|
||||
{title}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="snap-center md:h-[140.625vw] h-[183.333vw] md:mt-[1.042vw] mt-[2.222vw] md:rounded-[5.208vw] rounded-[11.111vw] overflow-hidden relative flex flex-col bg-center bg-cover bg-no-repeat bg-[#37393B99]">
|
||||
<p className="text-white text-center text-[5.208vw] placeholder:headline2 !font-medium z-[3] w-[91.111vw] mx-auto md:mb-0 mb-[3.333vw] md:mt-[5.208vw] mt-[11.111vw] ">
|
||||
Запустили новый продукт
|
||||
</p>
|
||||
<h2 className="text-white text-center text-[5.208vw] font-medium leading-[95%] tracking-[-0.02em] md:mb-[5.208vw] mb-[6.667vw] line2 z-[3]">
|
||||
GRAFF.estate View
|
||||
</h2>
|
||||
<img
|
||||
src="/img/pages/results/general/booking_3.png"
|
||||
alt=""
|
||||
className="md:w-[40.922vw] w-[47.222vw] mx-auto object-cover md:mb-[5.208vw] mb-[5.556vw] z-[3]"
|
||||
/>
|
||||
<p className="text-white text-center z-[3] w-[91.111vw] mx-auto headline2 !font-medium ">
|
||||
Показываем виды из любой квартиры еще не построенного{" "}
|
||||
<br className="md:block hidden " /> жилого комплекса{" "}
|
||||
</p>
|
||||
|
||||
<div className="flex flex-wrap gap-[0.521vw] md:w-[90.469vw] w-[95.889vw] mx-auto justify-center mt-[3.333vw] z-[3]">
|
||||
<GraffLabel title="Высокое качество визуализации" />
|
||||
<GraffLabel title="Интеграция с CRM" />
|
||||
<GraffLabel title="Динамическое изменение перспективы" />
|
||||
<GraffLabel title="Выбор квартиры и вида" />
|
||||
|
||||
<GraffLabel title="Кастомизация продукта" />
|
||||
</div>
|
||||
|
||||
<motion.div
|
||||
initial={{
|
||||
scale: 1,
|
||||
}}
|
||||
animate={{
|
||||
scale: 1.5,
|
||||
}}
|
||||
transition={{
|
||||
duration: 10,
|
||||
repeat: Infinity,
|
||||
repeatType: "reverse",
|
||||
ease: "easeInOut",
|
||||
}}
|
||||
className="w-full h-full absolute top-0 left-0 bg-[url('/img/pages/results/components/gradients/mobile-dynamic-top.png')] bg-cover bg-center bg-no-repeat z-[2]"
|
||||
/>
|
||||
<div className="w-full h-full absolute top-0 left-0 bg-[url('/img/pages/results/components/gradients/mobile-dynamic-bottom.png')] bg-cover bg-center bg-no-repeat z-[1]" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function Modules() {
|
||||
const cards = [
|
||||
{
|
||||
id: 1,
|
||||
image: "/img/pages/results/reels/modules/Mobile/1.png",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
image: "/img/pages/results/reels/modules/Mobile/2.png",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
image: "/img/pages/results/reels/modules/Mobile/3.png",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
image: "/img/pages/results/reels/modules/Mobile/4.png",
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
image: "/img/pages/results/reels/modules/Mobile/5.png",
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
image: "/img/pages/results/reels/modules/Mobile/6.png",
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="snap-center md:h-[140.625vw] h-[183.333vw] md:mt-[1.042vw] mt-[2.222vw] md:rounded-[5.208vw] rounded-[11.111vw] overflow-hidden relative flex flex-col bg-[url('/img/pages/results/components/gradients/mobile-modules.png')] bg-center bg-cover bg-no-repeat bg-[#37393B99]">
|
||||
<h2 className="text-white text-center text-[5.208vw] font-medium leading-[95%] tracking-[-0.02em] z-[10] md:mb-[5.208vw] mb-[12.222vw] line2 md:mt-[5.208vw] mt-[11.111vw]">
|
||||
Добавили <br className="md:hidden block" /> 6 новых модулей
|
||||
<br /> в приложение
|
||||
</h2>
|
||||
<CardsSwiper
|
||||
cards={cards}
|
||||
cardClassName="md:!w-[76vw] !w-[70.5vw] !h-[98.333vw] bg-[#FFFFFF1A] border-[2px] border-[#FFFFFF1A] backdrop-blur-[24px] rounded-[4.444vw] shadow-xl "
|
||||
controls={true}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function Details() {
|
||||
return (
|
||||
<div className="snap-center md:min-h-[140.625vw] md:h-[140.625vw] min-h-[183.333vw] md:mt-[1.042vw] mt-[2.222vw] pb-[5.556vw] md:rounded-[5.208vw] rounded-[11.111vw] overflow-hidden relative flex flex-col bg-[url('/img/pages/results/components/gradients/mobile-modules.png')] bg-center bg-cover bg-no-repeat bg-[#37393B99]">
|
||||
<p className="text-white text-center placeholder:headline2 !font-medium z-[3] w-[91.111vw] mx-auto md:mb-[1.563vw] mb-[3.333vw] md:mt-[5.208vw] mt-[11.111vw] ">
|
||||
Кредо этого года:
|
||||
</p>
|
||||
<h2 className="text-white text-center md:text-[5.208vw] text-[5.208vw] font-medium leading-[95%] tracking-[-0.02em] mb-[6.667vw] line2 z-[3]">
|
||||
Внимание к деталям,
|
||||
<br className="md:hidden block" /> стремление{" "}
|
||||
<br className="md:block hidden" /> к идеалу
|
||||
</h2>
|
||||
|
||||
<div className="md:grid md:grid-cols-2 md:grid-rows-[53.99vw_53.99vw] md:gap-[1.563vw] grid-rows-[83.333vw_95vw_100vw] flex flex-col gap-[2.222vw] z-[3] px-[4.444vw]">
|
||||
<div className="flex flex-col gap-[0.556vw] backdrop-blur-[24px] bg-[#FFFFFF1A] md:py-[4.167vw] py-[13.333vw] md:pl-[4.167vw] pl-[5.556vw] border-[2px] border-[#FFFFFF1A] md:rounded-[3.125vw] rounded-[8.889vw] relative overflow-hidden">
|
||||
<p className="md:headline1 headline2 !font-medium md:mb-[1.042vw] mb-[2.222vw]">
|
||||
Облака по расписанию
|
||||
</p>
|
||||
<p className="md:text-1 caption opacity-60 md:w-[38.802vw] w-[64.278vw]">
|
||||
Интегрировали API, передающее направление и скорость ветра в
|
||||
реальном времени именно в той локации, где находится проект
|
||||
</p>
|
||||
|
||||
<img
|
||||
src="/img/pages/results/reels/details/cloud.png"
|
||||
alt=""
|
||||
className="absolute md:bottom-[10.208vw] md:right-[-15.986vw] bottom-[0] right-[-50.986vw] scale-125 object-cover"
|
||||
/>
|
||||
<img
|
||||
src="/img/pages/results/reels/details/cloud.png"
|
||||
alt=""
|
||||
className="hidden md:block absolute bottom-[0] left-[-30.986vw] scale-125 object-cover"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-[0.556vw] backdrop-blur-[24px] bg-[#FFFFFF1A] md:py-[4.167vw] py-[13.333vw] md:pl-[4.167vw] pl-[5.556vw] border-[2px] border-[#FFFFFF1A] md:rounded-[3.125vw] rounded-[8.889vw]">
|
||||
<p className="md:headline1 headline2 !font-medium md:mb-[1.042vw] mb-[2.222vw]">
|
||||
Добавили в <br className="md:hidden block" /> приложения птиц
|
||||
</p>
|
||||
<p className="md:text-1 caption opacity-60 md:w-[38.802vw]">
|
||||
Они не только летают в небе,
|
||||
<br /> но и садятся на землю или
|
||||
<br /> деревья вокруг ЖК
|
||||
</p>
|
||||
<video
|
||||
src="/img/pages/results/reels/details/birds.mp4"
|
||||
autoPlay
|
||||
loop
|
||||
muted
|
||||
playsInline
|
||||
className="absolute md:bottom-[5.635vw] md:translate-y-0 bottom-[50%] translate-y-1/2 md:right-1/2 md:translate-x-1/2 right-[5.556vw] md:rounded-[2.604vw] rounded-[5.556vw] size-[23.889vw] object-cover"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="md:col-span-2 md:overflow-hidden flex flex-col gap-[0.556vw] backdrop-blur-[24px] bg-[#FFFFFF1A] md:py-[4.167vw] py-[13.333vw] md:pl-[4.167vw] pl-[5.556vw] border-[2px] border-[#FFFFFF1A] md:rounded-[3.125vw] rounded-[8.889vw]">
|
||||
<p className="md:headline1 headline2 !font-medium mb-[2.222vw]">
|
||||
Новая модель <br /> интерактивного стола
|
||||
</p>
|
||||
<p className="md:text-1 caption opacity-60">Более тонкая и изящная</p>
|
||||
<img
|
||||
src="/img/pages/results/reels/details/Mobile/table.png"
|
||||
alt=""
|
||||
className="absolute md:bottom-[-21.229vw] bottom-[5.556vw] md:right-[2.5vw] right-[5.556vw] md:h-[64.844vw] h-[29.444vw] object-cover"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<motion.div
|
||||
initial={{
|
||||
scale: 1,
|
||||
}}
|
||||
animate={{
|
||||
scale: 1.5,
|
||||
}}
|
||||
transition={{
|
||||
duration: 10,
|
||||
repeat: Infinity,
|
||||
repeatType: "reverse",
|
||||
ease: "easeInOut",
|
||||
}}
|
||||
className="w-full h-full absolute top-0 left-0 bg-[url('/img/pages/results/components/gradients/mobile-dynamic-top.png')] bg-cover bg-center bg-no-repeat z-[2]"
|
||||
/>
|
||||
<div className="w-full h-full absolute top-0 left-0 bg-[url('/img/pages/results/components/gradients/mobile-dynamic-bottom.png')] bg-cover bg-center bg-no-repeat z-[1]" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function Team() {
|
||||
const { setModal } = useModalStore();
|
||||
|
||||
return (
|
||||
<div
|
||||
id="team-area"
|
||||
className="snap-end md:h-[140.625vw] h-[183.333vw] md:mt-[1.042vw] mt-[2.222vw] md:rounded-[5.208vw] rounded-t-[11.111vw] overflow-hidden relative flex flex-col bg-[url('/img/pages/results/components/gradients/mobile-team.png')] bg-center bg-cover bg-no-repeat bg-[#37393B99]"
|
||||
>
|
||||
<p className="text-white text-center z-[3] w-[91.111vw] mx-auto headline2 md:text-[5.208vw] !font-medium md:mt-[5.208vw] mt-[11.111vw]">
|
||||
Наш штат расширился на 30%
|
||||
</p>
|
||||
<h2 className="text-white text-center text-[5.208vw] font-medium leading-[95%] tracking-[-0.02em] z-[10] md:mt-[1vw] mb-[12.222vw] line2 mt-[3.333vw]">
|
||||
Теперь в команде <br className="md:hidden block" /> более 70 человек
|
||||
</h2>
|
||||
<div className=" w-[267.222vw] ml-[-82.805vw] mx-auto overflow-hidden">
|
||||
<ResultsTeamWheel />
|
||||
|
||||
<button
|
||||
onClick={() =>
|
||||
setModal(
|
||||
<QuestionFormModal products={["Интерактивная презентация"]} />
|
||||
)
|
||||
}
|
||||
className="btnl z-[11] w-max bg-[radial-gradient(circle_at_right_top,#FF79D2_0%,#C932E8_20%,#7A55FF_60%)] md:px-[4.688vw] px-[10.111vw] md:py-[2.604vw] py-[5.556vw] md:rounded-[2.083vw] rounded-[4.444vw] absolute md:bottom-[30.844vw] bottom-[5vw] left-1/2 -translate-x-1/2"
|
||||
>
|
||||
Оставить заявку
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,89 +0,0 @@
|
||||
/* 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>
|
||||
);
|
||||
}
|
||||
@@ -1,168 +0,0 @@
|
||||
/* eslint-disable @next/next/no-img-element */
|
||||
import PlayIcon from "@/components/icons/PlayIcon";
|
||||
import React from "react";
|
||||
|
||||
export function Square() {
|
||||
return (
|
||||
<div className="snap-center md:h-[140.625vw] h-[183.333vw] md:mt-[1.042vw] mt-[2.222vw] md:rounded-[5.208vw] rounded-[11.111vw] overflow-hidden relative flex flex-col items-center justify-center md:bg-[url('/img/pages/results/general/tablet/slide_1/bg.png')] bg-[url('/img/pages/results/general/mobile/slide_1/bg.png')] bg-cover bg-center bg-no-repeat">
|
||||
<div className="absolute md:w-[29.74vw] w-[43.056vw] md:top-[5.208vw] top-[4.444vw] md:left-[5.208vw] left-[4.444vw] md:p-[2.083vw] p-[4.444vw] md:rounded-[1.563vw] rounded-[4.444vw] flex items-center justify-between bg-[#FFFFFF1A] backdrop-blur-[24px] border-[2px] border-[#FFFFFF1A] z-[10]">
|
||||
<div className="flex flex-col gap-[0.694vw] w-full">
|
||||
<span className="md:text-[3.125vw] text-[3.889vw] font-medium leading-[4.444vw] tracking-[-0.02em]">
|
||||
Это как две Тулы
|
||||
</span>
|
||||
<p className="md:text-[1.823vw] text-[2.5vw] leading-[120%] opacity-60">
|
||||
Родина нашего проекта <br />
|
||||
Премьер Парк
|
||||
</p>
|
||||
<img
|
||||
src="/img/pages/results/general/park_logo.svg"
|
||||
alt=""
|
||||
className="md:size-[5.599vw] size-[11.944vw] object-cover ml-auto"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="absolute md:w-[29.74vw] w-[43.056vw] md:bottom-[5.208vw] bottom-[4.444vw] md:right-[5.208vw] right-[4.444vw] md:p-[2.083vw] p-[4.444vw] md:rounded-[1.563vw] rounded-[4.444vw] flex items-center justify-between bg-[#FFFFFF1A] backdrop-blur-[24px] border-[2px] border-[#FFFFFF1A] z-[10]">
|
||||
<div className="flex flex-col gap-[0.694vw] w-full">
|
||||
<span className="md:text-[3.125vw] text-[3.889vw] font-medium leading-[4.444vw] tracking-[-0.02em]">
|
||||
Или Сургут
|
||||
</span>
|
||||
<p className="md:text-[1.823vw] text-[2.5vw] leading-[120%] opacity-60">
|
||||
Город лучших <br /> ПМ-ов и дизайнеров
|
||||
</p>
|
||||
<div className="flex items-center ml-auto mt-[3.056vw]">
|
||||
<img
|
||||
src="/img/pages/results/general/surgut_1.png"
|
||||
alt=""
|
||||
className="md:size-[5.599vw] size-[11.944vw] object-cover"
|
||||
/>
|
||||
<img
|
||||
src="/img/pages/results/general/surgut_2.png"
|
||||
alt=""
|
||||
className="md:size-[5.599vw] size-[11.944vw] object-cover md:ml-[-1.5vw] ml-[-3.972vw]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-[6.389vw] z-[10] items-center justify-center">
|
||||
<div className="md:px-[2.083vw] md:py-[1.042vw] py-[2.778vw] px-[4.444vw] rounded-full bg-[radial-gradient(circle_at_right_top,#FF79D2_0%,#C932E8_20%,#7A55FF_60%)] font-medium">
|
||||
В 2025 году мы
|
||||
</div>
|
||||
<p className="text-center md:text-[5.208vw] text-[7.778vw] font-medium leading-[95%] tracking-[-0.02em]">
|
||||
Мы замоделили 288км² <br className="md:hidden block" /> окружения{" "}
|
||||
<br className="md:block hidden" />
|
||||
<br className="md:hidden block" /> для наших клиентов
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Задник */}
|
||||
{/* <div className="absolute z-[1] top-0 left-0 w-full h-full bg-[url('/img/pages/results/general/mobile/slide_1/bg-bottom.png')] bg-cover bg-center bg-no-repeat"></div>
|
||||
<div className="absolute z-[2] top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 size-[150.333vw] rounded-full bg-[url('/img/pages/results/general/mobile/slide_1/bg-middle.png')] bg-cover bg-center bg-no-repeat"></div>
|
||||
<div className="absolute z-[3] top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 size-[140.278vw] bg-[url('/img/pages/results/general/mobile/slide_1/bg-top.png')] bg-cover bg-center bg-no-repeat"></div> */}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function Appartaments() {
|
||||
function FloorIndicator({
|
||||
floor,
|
||||
appartamentsCount,
|
||||
className,
|
||||
}: {
|
||||
floor: number;
|
||||
appartamentsCount: number;
|
||||
className?: string;
|
||||
}) {
|
||||
return (
|
||||
<div className={`flex items-center gap-[0.556vw] ${className}`}>
|
||||
<div className="size-[2vw] rotate-180">
|
||||
<PlayIcon />
|
||||
</div>
|
||||
<div className="md:rounded-[1.042vw] rounded-[2.222vw] bg-white flex items-center md:gap-[0.52vw] gap-[1.389vw] md:p-[0.26vw] p-[0.439vw] md:pr-[0.86vw] pr-[2.389vw]">
|
||||
<div className="md:size-[3.555vw] size-[6.944vw] md:rounded-[0.911vw] rounded-[1.8vw] bg-[#7A55FF] flex items-center justify-center btnm md:!text-[1.302vw] !text-[2.5vw]">
|
||||
{floor}
|
||||
</div>
|
||||
<span className=" text-black caption tracking-[-0.02em] md:!text-[1vw] !text-[2.222vw] !leading-[133%]">
|
||||
{appartamentsCount} квартир
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="snap-center md:h-[140.625vw] h-[183.333vw] md:mt-[1.042vw] mt-[2.222vw] md:rounded-[5.208vw] rounded-[11.111vw] overflow-hidden relative flex flex-col bg-[#37393B99] bg-[url('/img/pages/results/components/gradients/mobile-pink-half.png')] bg-center bg-cover bg-no-repeat">
|
||||
<h2 className="md:text-[5.208vw] text-[7.778vw] font-medium leading-[95%] tracking-[-0.02em] md:mt-[5.208vw] mt-[8.333vw] mx-auto text-center">
|
||||
В наших приложениях <br />
|
||||
появилось 20 000 <br className="md:hidden block" /> новых квартир
|
||||
</h2>
|
||||
|
||||
<div className="realtive md:w-[95.833vw] w-[91.111vw] mt-auto mx-auto md:mb-[2.125vw] mb-[4.444vw] py-[5vw] backdrop-blur-[24px] border-[2px] border-[#FFFFFF1A] md:rounded-[4.167vw] rounded-[8.889vw]">
|
||||
<img
|
||||
src="/img/pages/results/general/mobile/slide_2/1.png"
|
||||
alt=""
|
||||
className="mx-auto md:mb-0 mb-[4.444vw] md:w-[61.458vw] md:h-[35.677vw] w-[53.056vw] h-[30.833vw]"
|
||||
/>
|
||||
<p className="text-[3.889vw] md:text-[2.604vw] font-medium text-center md:leading-[3.125vw] leading-[16px] tracking-[-0.02em]">
|
||||
4500 часов люди провели <br /> выбирая одну из них для себя в качестве{" "}
|
||||
<br className="md:hidden block" /> нового дома
|
||||
</p>
|
||||
|
||||
<div className="absolute md:h-[62.76vw] h-[78.278vw] md:w-[49.349vw] w-[63.056vw] md:top-[-62.76vw] top-[-78.8vw] left-1/2 -translate-x-1/2">
|
||||
<img
|
||||
src="/img/pages/results/general/building.png"
|
||||
alt=""
|
||||
className="w-full h-full "
|
||||
/>
|
||||
|
||||
<FloorIndicator
|
||||
floor={32}
|
||||
appartamentsCount={8}
|
||||
className="absolute md:top-[20.063vw] md:right-[-7.161vw] top-[21.389vw] right-[-3.333vw]"
|
||||
/>
|
||||
<FloorIndicator
|
||||
floor={25}
|
||||
appartamentsCount={8}
|
||||
className="absolute md:top-[45.063vw] md:right-[-7.161vw] top-[33.333vw] right-[-3.333vw]"
|
||||
/>
|
||||
<FloorIndicator
|
||||
floor={24}
|
||||
appartamentsCount={6}
|
||||
className="absolute md:top-[55.063vw] md:right-[-7.161vw] top-[65.556vw] right-[-3.333vw]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function Reservations() {
|
||||
return (
|
||||
<div className="snap-center md:h-[140.625vw] h-[183.333vw] md:mt-[1.042vw] mt-[2.222vw] md:rounded-[5.208vw] rounded-[11.111vw] overflow-hidden relative flex flex-col bg-[#37393B99] md:bg-[url('/img/pages/results/components/gradients/tablet-pink-red.png')] bg-[url('/img/pages/results/components/gradients/mobile-pink-red-half.png')] bg-center bg-cover bg-no-repeat">
|
||||
<p className="md:hidden text-[3.889vw] font-medium text-center leading-[16px] tracking-[-0.02em] mb-[2.222vw] md:mt-[5.208vw] mt-[11.111vw]">
|
||||
С помощью GRAFF.estate было сделано
|
||||
</p>
|
||||
<h2 className="md:hidden text-[8.889vw] font-medium leading-[95%] tracking-[-0.02em] text-center">
|
||||
1220 заявок на бронь
|
||||
</h2>
|
||||
|
||||
<h2 className="md:block hidden text-[5.208vw] font-medium text-center leading-[95%] tracking-[-0.02em] md:mt-[5.208vw]">
|
||||
С помощью GRAFF.estate было <br /> сделано 1220 заявок на бронь
|
||||
</h2>
|
||||
|
||||
<img
|
||||
src="/img/pages/results/general/mobile/slide_3/1.png"
|
||||
alt=""
|
||||
className="md:w-[70.833vw] w-[83.333vw] mx-auto md:mt-[5.208vw] mt-[11.111vw] mb-[3.889vw]"
|
||||
/>
|
||||
|
||||
<p className="text-[3.889vw] font-medium text-center leading-[3.125vw] tracking-[-0.02em] mb-[2.222vw] md:mt-[5.208vw] mt-[11.111vw]">
|
||||
Общая сумма броней <br className="md:block hidden" /> превысила
|
||||
</p>
|
||||
<h2 className="md:text-[5.208vw] text-[8.889vw] font-medium leading-[95%] tracking-[-0.02em] text-center">
|
||||
30 000 000 000₽
|
||||
</h2>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,188 +0,0 @@
|
||||
/* eslint-disable @next/next/no-img-element */
|
||||
import React, { useEffect, useRef, useState } from "react";
|
||||
import ShiftText from "../ShiftText";
|
||||
import { motion, useMotionValue } from "framer-motion";
|
||||
import { useMediaQueries } from "@/hooks/useMediaQueries";
|
||||
|
||||
export function Projects() {
|
||||
const [expanded, setExpanded] = useState(false);
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
const { isMd } = useMediaQueries();
|
||||
const transition = {
|
||||
duration: 1,
|
||||
ease: "easeInOut",
|
||||
};
|
||||
const progress = useMotionValue(0);
|
||||
|
||||
function ResultsProjectsItem({ src }: { src: string }) {
|
||||
return (
|
||||
<motion.img
|
||||
animate={{
|
||||
borderRadius: expanded ? "2.222vw" : "4.444vw",
|
||||
}}
|
||||
src={src}
|
||||
alt=""
|
||||
className={
|
||||
"md:w-[70.703vw] w-[88.333vw] h-full aspect-[294/166] object-cover"
|
||||
}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if (!containerRef.current) return;
|
||||
|
||||
const observer = new IntersectionObserver(
|
||||
(entries) => {
|
||||
if (entries[0].isIntersecting) {
|
||||
setTimeout(() => {
|
||||
setExpanded(true);
|
||||
progress.set(1);
|
||||
}, 2000);
|
||||
}
|
||||
},
|
||||
{
|
||||
threshold: 0.2,
|
||||
}
|
||||
);
|
||||
observer.observe(containerRef.current);
|
||||
return () => observer.disconnect();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={containerRef}
|
||||
className="relative snap-center md:mt-[1.042vw] mt-[2.222vw] md:h-[140.625vw] h-[183.333vw] md:rounded-[5.208vw] rounded-[11.111vw] flex flex-col items-center bg-[url('/img/pages/results/components/gradients/mobile-pink.png')] bg-cover bg-center bg-no-repeat overflow-hidden"
|
||||
>
|
||||
<ShiftText
|
||||
className=" font-medium line2 text-center text-[4.444vw] z-10 md:mt-[2.604vw] mt-[11.111vw]"
|
||||
paragraphs={[
|
||||
<>
|
||||
Закончили <br />
|
||||
разработку и сдали <br />
|
||||
24 проекта
|
||||
</>,
|
||||
<>
|
||||
Теперь у нас более <br />
|
||||
70 проектов
|
||||
</>,
|
||||
]}
|
||||
shiftBreakpoints={[0, 1]}
|
||||
scrollProgress={progress}
|
||||
/>
|
||||
|
||||
<motion.div
|
||||
animate={{
|
||||
gap: expanded ? "0.556vw" : "1.111vw",
|
||||
gridTemplateRows: expanded
|
||||
? isMd
|
||||
? "repeat(5, calc(120vw/5))"
|
||||
: "repeat(5, calc(141vw/5))"
|
||||
: isMd
|
||||
? "repeat(5, calc(120vw/3))"
|
||||
: "repeat(5, calc(141vw/3))",
|
||||
}}
|
||||
transition={{
|
||||
...transition,
|
||||
}}
|
||||
className="grid grid-rows-5 gap-[1.111vw] origin-center"
|
||||
>
|
||||
<motion.div
|
||||
animate={{
|
||||
translateX: expanded ? -100 : 0,
|
||||
gap: expanded ? "0.556vw" : "1.111vw",
|
||||
}}
|
||||
transition={{
|
||||
...transition,
|
||||
}}
|
||||
className="flex md:gap-[1.563vw] gap-[1.111vw] justify-center"
|
||||
>
|
||||
<ResultsProjectsItem src="/img/pages/results/projects/10.png" />
|
||||
<ResultsProjectsItem src="/img/pages/results/projects/2.png" />
|
||||
<ResultsProjectsItem src="/img/pages/results/projects/3.png" />
|
||||
<ResultsProjectsItem src="/img/pages/results/projects/7.png" />
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
animate={{
|
||||
translateX: expanded ? 100 : 0,
|
||||
gap: expanded ? "0.556vw" : "1.111vw",
|
||||
}}
|
||||
transition={{
|
||||
...transition,
|
||||
}}
|
||||
className="flex md:gap-[1.563vw] gap-[1.111vw] justify-center"
|
||||
>
|
||||
<ResultsProjectsItem src="/img/pages/results/projects/2.png" />
|
||||
<ResultsProjectsItem src="/img/pages/results/projects/6.png" />
|
||||
<ResultsProjectsItem src="/img/pages/results/projects/main.png" />
|
||||
<ResultsProjectsItem src="/img/pages/results/projects/7.png" />
|
||||
<ResultsProjectsItem src="/img/pages/results/projects/2.png" />
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
animate={{
|
||||
translateX: expanded ? -100 : 0,
|
||||
gap: expanded ? "0.556vw" : "1.111vw",
|
||||
}}
|
||||
transition={{
|
||||
...transition,
|
||||
}}
|
||||
className="flex md:gap-[1.563vw] gap-[1.111vw] justify-center"
|
||||
>
|
||||
<ResultsProjectsItem src="/img/pages/results/projects/3.png" />
|
||||
<ResultsProjectsItem src="/img/pages/results/projects/10.png" />
|
||||
<ResultsProjectsItem src="/img/pages/results/projects/11.png" />
|
||||
<ResultsProjectsItem src="/img/pages/results/projects/6.png" />
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
animate={{
|
||||
translateX: expanded ? 100 : 0,
|
||||
gap: expanded ? "0.556vw" : "1.111vw",
|
||||
}}
|
||||
transition={{
|
||||
...transition,
|
||||
}}
|
||||
className="flex md:gap-[1.563vw] gap-[1.111vw] justify-center"
|
||||
>
|
||||
<ResultsProjectsItem src="/img/pages/results/projects/2.png" />
|
||||
<ResultsProjectsItem src="/img/pages/results/projects/6.png" />
|
||||
<ResultsProjectsItem src="/img/pages/results/projects/main.png" />
|
||||
<ResultsProjectsItem src="/img/pages/results/projects/7.png" />
|
||||
<ResultsProjectsItem src="/img/pages/results/projects/2.png" />
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
animate={{
|
||||
translateX: expanded ? -100 : 0,
|
||||
gap: expanded ? "0.556vw" : "1.111vw",
|
||||
}}
|
||||
transition={{
|
||||
...transition,
|
||||
}}
|
||||
className="flex md:gap-[1.563vw] gap-[1.111vw] justify-center"
|
||||
>
|
||||
<ResultsProjectsItem src="/img/pages/results/projects/10.png" />
|
||||
<ResultsProjectsItem src="/img/pages/results/projects/2.png" />
|
||||
<ResultsProjectsItem src="/img/pages/results/projects/3.png" />
|
||||
<ResultsProjectsItem src="/img/pages/results/projects/7.png" />
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function LatestProjects() {
|
||||
return (
|
||||
<div className="relative snap-center md:mt-[1.042vw] mt-[2.222vw] md:h-[140.625vw] h-[183.333vw] md:rounded-[5.208vw] rounded-[11.111vw] flex flex-col items-center bg-[url('/img/pages/results/components/gradients/mobile-red.png')] bg-cover bg-center bg-no-repeat overflow-hidden">
|
||||
<h2 className="text-[4.444vw] md:mb-[3.125vw] mb-[6.667vw] text-white text-center leading-[95%] tracking-[-0.02em] font-medium line2 md:mt-[5.208vw] mt-[11.111vw]">
|
||||
Последними <br /> из которых стали
|
||||
</h2>
|
||||
<div className="flex flex-col h-full w-full md:px-[2.083vw] px-[2.778vw] pb-[2.778vw] md:gap-[1.042vw] gap-[1.111vw] items-center justify-center">
|
||||
<div className="md:rounded-[2.083vw] rounded-[8.889vw] w-full h-full md:bg-[url('/img/pages/results/projects/tablet-badayevskiy.png')] bg-[url('/img/pages/results/projects/mobile-badayevskiy.png')] bg-cover bg-center bg-no-repeat" />
|
||||
<div className="md:rounded-[2.083vw] rounded-[8.889vw] w-full h-full md:bg-[url('/img/pages/results/projects/tablet-rozhdestvenka.png')] bg-[url('/img/pages/results/projects/mobile-rozhdestvenka.png')] bg-cover bg-center bg-no-repeat" />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,24 @@
|
||||
import React from "react";
|
||||
import clsx from "clsx";
|
||||
|
||||
interface WrapperProps extends React.HTMLAttributes<HTMLDivElement> {
|
||||
children: React.ReactNode;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export default function SlideWrapper({
|
||||
children,
|
||||
className,
|
||||
...handlers
|
||||
}: WrapperProps) {
|
||||
return (
|
||||
<div
|
||||
className={clsx(
|
||||
`snap-center md:min-h-[100dvh] md:h-[100dvh] h-[100dvh] md:rounded-[5.208vw] rounded-[11.111vw] overflow-hidden relative ${className}`
|
||||
)}
|
||||
{...handlers}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
+1
-1
@@ -1,4 +1,4 @@
|
||||
import React, { useEffect, useRef } from "react";
|
||||
import React, { useRef } from "react";
|
||||
|
||||
interface SnapWrapperProps {
|
||||
children: React.ReactNode;
|
||||
@@ -0,0 +1,89 @@
|
||||
/* eslint-disable @next/next/no-img-element */
|
||||
import { motion } from "framer-motion";
|
||||
import SlideWrapper from "../../components/SlideWrapper";
|
||||
|
||||
export default function Details() {
|
||||
return (
|
||||
<SlideWrapper className="md:mt-[1.042vw] mt-[2.222vw] flex flex-col bg-[url('/img/pages/results/components/gradients/mobile-modules.png')] bg-center bg-cover bg-no-repeat ">
|
||||
<p className="text-white text-center placeholder:headline2 !font-medium z-[3] w-[91.111vw] mx-auto md:mb-[1.563vw] mb-[3.333vw] md:mt-[5.208vw] mt-[11.111vw] ">
|
||||
Кредо этого года:
|
||||
</p>
|
||||
<h2 className="text-white text-center md:text-[5.208vw] text-[5.208vw] font-medium leading-[95%] tracking-[-0.02em] mb-[6.667vw] line2 z-[3]">
|
||||
Внимание к деталям,
|
||||
<br className="md:hidden block" /> стремление{" "}
|
||||
<br className="md:block hidden" /> к идеалу
|
||||
</h2>
|
||||
|
||||
<div className="md:grid md:grid-cols-2 md:grid-rows-[53.99vw_53.99vw] md:gap-[1.563vw] grid-rows-[83.333vw_95vw_100vw] flex flex-col justify-between gap-[2.222vw] z-[3] px-[4.444vw] pb-[4.444vw] flex-1">
|
||||
<div className="flex flex-col justify-center gap-[0.556vw] backdrop-blur-[24px] bg-[#FFFFFF1A] md:py-[4.167vw] flex-1 md:pl-[4.167vw] pl-[5.556vw] border-[2px] border-[#FFFFFF1A] md:rounded-[3.125vw] rounded-[8.889vw] relative overflow-hidden">
|
||||
<p className="md:headline1 headline2 !font-medium md:mb-[1.042vw] mb-[2.222vw]">
|
||||
Облака по расписанию
|
||||
</p>
|
||||
<p className="md:text-1 caption opacity-60 md:w-[38.802vw] w-[64.278vw]">
|
||||
Интегрировали API, передающее направление и скорость ветра в
|
||||
реальном времени именно в той локации, где находится проект
|
||||
</p>
|
||||
|
||||
<img
|
||||
src="/img/pages/results/reels/details/cloud.png"
|
||||
alt=""
|
||||
className="absolute md:bottom-[10.208vw] md:right-[-15.986vw] bottom-[0] right-[-50.986vw] scale-125 object-cover"
|
||||
/>
|
||||
<img
|
||||
src="/img/pages/results/reels/details/cloud.png"
|
||||
alt=""
|
||||
className="hidden md:block absolute bottom-[0] left-[-30.986vw] scale-125 object-cover"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col justify-center gap-[0.556vw] backdrop-blur-[24px] bg-[#FFFFFF1A] md:py-[4.167vw] flex-1 md:pl-[4.167vw] pl-[5.556vw] border-[2px] border-[#FFFFFF1A] md:rounded-[3.125vw] rounded-[8.889vw]">
|
||||
<p className="md:headline1 headline2 !font-medium md:mb-[1.042vw] mb-[2.222vw]">
|
||||
Добавили в <br className="md:hidden block" /> приложения птиц
|
||||
</p>
|
||||
<p className="md:text-1 caption opacity-60 md:w-[38.802vw]">
|
||||
Они не только летают в небе,
|
||||
<br /> но и садятся на землю или
|
||||
<br /> деревья вокруг ЖК
|
||||
</p>
|
||||
<video
|
||||
src="/img/pages/results/reels/details/birds.mp4"
|
||||
autoPlay
|
||||
loop
|
||||
muted
|
||||
playsInline
|
||||
className="absolute md:bottom-[5.635vw] md:translate-y-0 bottom-[50%] translate-y-1/2 md:right-1/2 md:translate-x-1/2 right-[5.556vw] md:rounded-[2.604vw] rounded-[5.556vw] size-[23.889vw] object-cover"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="md:col-span-2 md:overflow-hidden flex flex-col justify-center gap-[0.556vw] backdrop-blur-[24px] bg-[#FFFFFF1A] md:py-[4.167vw] md:pl-[4.167vw] flex-1 pl-[5.556vw] border-[2px] border-[#FFFFFF1A] md:rounded-[3.125vw] rounded-[8.889vw]">
|
||||
<p className="md:headline1 headline2 !font-medium mb-[2.222vw]">
|
||||
Новая модель <br /> интерактивного стола
|
||||
</p>
|
||||
<p className="md:text-1 caption opacity-60">Более тонкая и изящная</p>
|
||||
<img
|
||||
src="/img/pages/results/reels/details/Mobile/table.png"
|
||||
alt=""
|
||||
className="absolute md:bottom-[-21.229vw] bottom-[5.556vw] md:right-[2.5vw] right-[5.556vw] md:h-[64.844vw] h-[29.444vw] object-cover"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<motion.div
|
||||
initial={{
|
||||
scale: 1,
|
||||
}}
|
||||
animate={{
|
||||
scale: 1.5,
|
||||
}}
|
||||
transition={{
|
||||
duration: 10,
|
||||
repeat: Infinity,
|
||||
repeatType: "reverse",
|
||||
ease: "easeInOut",
|
||||
}}
|
||||
className="w-full h-full absolute top-0 left-0 bg-[url('/img/pages/results/components/gradients/mobile-dynamic-top.png')] bg-cover bg-center bg-no-repeat z-[2]"
|
||||
/>
|
||||
<div className="w-full h-full absolute top-0 left-0 bg-[url('/img/pages/results/components/gradients/mobile-dynamic-bottom.png')] bg-cover bg-center bg-no-repeat z-[1]" />
|
||||
</SlideWrapper>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,67 @@
|
||||
/* eslint-disable @next/next/no-img-element */
|
||||
import { motion } from "framer-motion";
|
||||
import SlideWrapper from "../../components/SlideWrapper";
|
||||
|
||||
export default function GraffEstateView() {
|
||||
function GraffLabel({
|
||||
title,
|
||||
className,
|
||||
}: {
|
||||
title: string;
|
||||
className?: string;
|
||||
}) {
|
||||
return (
|
||||
<div
|
||||
className={`bg-[#FFFFFF29] md:py-[1.302vw] py-[2.222vw] backdrop-blur-[24px] md:px-[2.604vw] px-[3.333vw] rounded-full md:btnm btns w-max ${className}`}
|
||||
>
|
||||
{title}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<SlideWrapper className="md:mt-[1.042vw] mt-[2.222vw] flex flex-col items-center bg-center bg-cover bg-no-repeat bg-[#37393B99]">
|
||||
<p className="text-white text-center text-[5.208vw] placeholder:headline2 !font-medium z-[3] w-[91.111vw] mx-auto md:mb-0 mb-[3.333vw] md:mt-[5.208vw] mt-[11.111vw] ">
|
||||
Запустили новый продукт
|
||||
</p>
|
||||
<h2 className="text-white text-center text-[5.208vw] font-medium leading-[95%] tracking-[-0.02em] md:mb-[5.208vw] mb-[6.667vw] line2 z-[3]">
|
||||
GRAFF.estate View
|
||||
</h2>
|
||||
<img
|
||||
src="/img/pages/results/general/booking_3.png"
|
||||
alt=""
|
||||
className="md:w-[40.922vw] w-[47.222vw] mx-auto object-cover md:mb-[5.208vw] mb-[5.556vw] z-[3]"
|
||||
/>
|
||||
<p className="text-white text-center z-[3] w-[91.111vw] mx-auto headline2 !font-medium ">
|
||||
Показываем виды из любой квартиры еще не построенного{" "}
|
||||
<br className="md:block hidden " /> жилого комплекса{" "}
|
||||
</p>
|
||||
|
||||
<div className="flex flex-wrap gap-[0.521vw] md:w-[90.469vw] w-[95.889vw] mx-auto justify-center mt-[3.333vw] z-[3]">
|
||||
<GraffLabel title="Высокое качество визуализации" />
|
||||
<GraffLabel title="Интеграция с CRM" />
|
||||
<GraffLabel title="Динамическое изменение перспективы" />
|
||||
<GraffLabel title="Выбор квартиры и вида" />
|
||||
|
||||
<GraffLabel title="Кастомизация продукта" />
|
||||
</div>
|
||||
|
||||
<motion.div
|
||||
initial={{
|
||||
scale: 1,
|
||||
}}
|
||||
animate={{
|
||||
scale: 1.5,
|
||||
}}
|
||||
transition={{
|
||||
duration: 10,
|
||||
repeat: Infinity,
|
||||
repeatType: "reverse",
|
||||
ease: "easeInOut",
|
||||
}}
|
||||
className="w-full h-full absolute top-0 left-0 bg-[url('/img/pages/results/components/gradients/mobile-dynamic-top.png')] bg-cover bg-center bg-no-repeat z-[2]"
|
||||
/>
|
||||
<div className="w-full h-full absolute top-0 left-0 bg-[url('/img/pages/results/components/gradients/mobile-dynamic-bottom.png')] bg-cover bg-center bg-no-repeat z-[1]" />
|
||||
</SlideWrapper>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,36 @@
|
||||
/* eslint-disable @next/next/no-img-element */
|
||||
import SlideWrapper from "../../components/SlideWrapper";
|
||||
|
||||
export default function Legenda() {
|
||||
return (
|
||||
<SlideWrapper className="md:mt-[1.042vw] mt-[2.222vw] flex flex-col items-center bg-center bg-cover bg-no-repeat bg-[#37393B99] md:pb-[5.208vw]">
|
||||
<h2 className="text-white text-center text-[4.444vw] font-medium leading-[95%] tracking-[-0.02em] z-[10] md:mt-[5.208vw] mt-[11.111vw] md:mb-[5.208vw] mb-[6.667vw] line2 w-[91.667vw] mx-auto">
|
||||
Но победы <br className="md:block hidden" /> были не только наши!
|
||||
</h2>
|
||||
|
||||
<div className="w-[91.111vw] aspect-[328/378] mx-auto md:rounded-[4.167vw] rounded-[8.889vw] overflow-hidden relative my-auto">
|
||||
<video
|
||||
src="/videos/pages/results/legenda.MOV"
|
||||
autoPlay
|
||||
loop
|
||||
muted
|
||||
playsInline
|
||||
className="h-full w-full object-cover"
|
||||
/>
|
||||
<img
|
||||
src="/img/pages/results/achievments/Tablet/office-r.png"
|
||||
alt=""
|
||||
className="absolute md:bottom-[2.995vw] bottom-[3.333vw] md:right-[2.995vw] right-[3.333vw] md:rounded-[2.083vw] rounded-[4.444vw] size-[26.389vw] object-cover"
|
||||
/>
|
||||
</div>
|
||||
<p className="text-white text-center md:text-[2.604vw] text-[4.444vw] font-medium leading-[120%] tracking-[-0.01em] z-[10] mb-[2.222vw] mt-[6.667vw]">
|
||||
Звание лучшего офиса продаж <br /> второй год подряд забрал наш партнер
|
||||
</p>
|
||||
<p className="text-white text-center md:text-[1.563vw] text-[3.333vw] leading-[120%] tracking-[-0.01em] z-[10] w-[91.111vw] mx-auto opacity-60 mb-[11.111vw]">
|
||||
ГК Легенда для которой мы укомплектовали офис продаж ЖК Северный Порт{" "}
|
||||
<br className="md:block hidden" />
|
||||
интерактивными инструментами продаж
|
||||
</p>
|
||||
</SlideWrapper>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,46 @@
|
||||
/* eslint-disable @next/next/no-img-element */
|
||||
import CardsSwiper from "../../../Tablet&Mobile/CardsSwiper";
|
||||
import SlideWrapper from "../../components/SlideWrapper";
|
||||
|
||||
export default function Modules() {
|
||||
const cards = [
|
||||
{
|
||||
id: 1,
|
||||
image: "/img/pages/results/reels/modules/Mobile/1.png",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
image: "/img/pages/results/reels/modules/Mobile/2.png",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
image: "/img/pages/results/reels/modules/Mobile/3.png",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
image: "/img/pages/results/reels/modules/Mobile/4.png",
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
image: "/img/pages/results/reels/modules/Mobile/5.png",
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
image: "/img/pages/results/reels/modules/Mobile/6.png",
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<SlideWrapper className=" md:mt-[1.042vw] mt-[2.222vw] overflow-hidden relative flex flex-col bg-[url('/img/pages/results/components/gradients/mobile-modules.png')] bg-center bg-cover bg-no-repeat bg-[#37393B99]">
|
||||
<h2 className="text-white text-center text-[5.208vw] font-medium leading-[95%] tracking-[-0.02em] z-[10] md:mb-[5.208vw] mb-[12.222vw] line2 md:mt-[5.208vw] mt-[11.111vw]">
|
||||
Добавили <br className="md:hidden block" /> 6 новых модулей
|
||||
<br /> в приложение
|
||||
</h2>
|
||||
<CardsSwiper
|
||||
cards={cards}
|
||||
cardClassName="md:!w-[76vw] !w-[70.5vw] !h-[98.333vw] bg-[#FFFFFF1A] border-[2px] border-[#FFFFFF1A] backdrop-blur-[24px] rounded-[4.444vw] shadow-xl "
|
||||
controls={true}
|
||||
/>
|
||||
</SlideWrapper>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,37 @@
|
||||
/* eslint-disable @next/next/no-img-element */
|
||||
import { useModalStore } from "@/stores/useModalStore";
|
||||
import QuestionFormModal from "@/components/modals/QuestionFormModal";
|
||||
import ResultsTeamWheel from "../../../ResultsTeamWheel";
|
||||
import SlideWrapper from "../../components/SlideWrapper";
|
||||
|
||||
export default function Team() {
|
||||
const { setModal } = useModalStore();
|
||||
|
||||
return (
|
||||
<SlideWrapper
|
||||
id="team-area"
|
||||
className="snap-end md:mt-[1.042vw] mt-[2.222vw] flex flex-col bg-[url('/img/pages/results/components/gradients/mobile-team.png')] bg-center bg-cover bg-no-repeat bg-[#37393B99]"
|
||||
>
|
||||
<p className="text-white text-center z-[3] w-[91.111vw] mx-auto headline2 md:text-[5.208vw] !font-medium md:mt-[5.208vw] mt-[11.111vw]">
|
||||
Наш штат расширился на 30%
|
||||
</p>
|
||||
<h2 className="text-white text-center text-[5.208vw] font-medium leading-[95%] tracking-[-0.02em] z-[10] md:mt-[1vw] mb-[12.222vw] line2 mt-[3.333vw]">
|
||||
Теперь в команде <br className="md:hidden block" /> более 70 человек
|
||||
</h2>
|
||||
<div className=" w-[267.222vw] ml-[-82.805vw] mx-auto overflow-hidden">
|
||||
<ResultsTeamWheel />
|
||||
|
||||
<button
|
||||
onClick={() =>
|
||||
setModal(
|
||||
<QuestionFormModal products={["Интерактивная презентация"]} />
|
||||
)
|
||||
}
|
||||
className="btnl z-[11] w-max bg-[radial-gradient(circle_at_right_top,#FF79D2_0%,#C932E8_20%,#7A55FF_60%)] md:px-[4.688vw] px-[10.111vw] md:py-[2.604vw] py-[5.556vw] md:rounded-[2.083vw] rounded-[4.444vw] absolute md:bottom-[30.844vw] bottom-[5vw] left-1/2 -translate-x-1/2"
|
||||
>
|
||||
Оставить заявку
|
||||
</button>
|
||||
</div>
|
||||
</SlideWrapper>
|
||||
);
|
||||
}
|
||||
+3
-2
@@ -2,10 +2,11 @@
|
||||
import MuteIcon from "@/components/icons/MuteIcon";
|
||||
import React, { useEffect, useRef, useState } from "react";
|
||||
import { CircularProgressbar } from "react-circular-progressbar";
|
||||
import SlideWrapper from "../../components/SlideWrapper";
|
||||
|
||||
export default function MobileCongratulations() {
|
||||
return (
|
||||
<div className='snap-start overflow-hidden min-h-[100dvh] md:min-h-[100dvh] md:h-[140.625vw] relative flex flex-col bg-[url("/img/pages/results/components/gradients/mobile-congratulations.png")] bg-center bg-cover bg-no-repeat '>
|
||||
<SlideWrapper className='md:mt-[1.042vw] mt-[2.222vw] flex flex-col bg-[url("/img/pages/results/components/gradients/mobile-congratulations.png")] bg-center bg-cover bg-no-repeat '>
|
||||
<img
|
||||
src="/img/pages/results/components/garland/garland_mobile.svg"
|
||||
alt=""
|
||||
@@ -20,7 +21,7 @@ export default function MobileCongratulations() {
|
||||
<div className="md:w-[59.896vw] md:h-[59.896vw] w-[83.333vw] h-[83.333vw] mx-auto mt-[6.667vw] mb-[16.667vw]">
|
||||
<RoundVideo />
|
||||
</div>
|
||||
</div>
|
||||
</SlideWrapper>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,89 @@
|
||||
/* 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";
|
||||
import SlideWrapper from "../../components/SlideWrapper";
|
||||
|
||||
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}>
|
||||
<SlideWrapper className="md:rounded-b-[5.208vw] !rounded-t-[0px] 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" : "19.186dvh",
|
||||
}}
|
||||
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 ? "29.63vh" : "26.744vh",
|
||||
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>
|
||||
</SlideWrapper>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,77 @@
|
||||
/* eslint-disable @next/next/no-img-element */
|
||||
import PlayIcon from "@/components/icons/PlayIcon";
|
||||
import React from "react";
|
||||
import SlideWrapper from "../../components/SlideWrapper";
|
||||
|
||||
export default function Appartaments() {
|
||||
function FloorIndicator({
|
||||
floor,
|
||||
appartamentsCount,
|
||||
className,
|
||||
}: {
|
||||
floor: number;
|
||||
appartamentsCount: number;
|
||||
className?: string;
|
||||
}) {
|
||||
return (
|
||||
<div className={`flex items-center gap-[0.556vw] ${className}`}>
|
||||
<div className="size-[2vw] rotate-180">
|
||||
<PlayIcon />
|
||||
</div>
|
||||
<div className="md:rounded-[1.042vw] rounded-[2.222vw] bg-white flex items-center md:gap-[0.52vw] gap-[1.389vw] md:p-[0.26vw] p-[0.439vw] md:pr-[0.86vw] pr-[2.389vw]">
|
||||
<div className="md:size-[3.555vw] size-[6.944vw] md:rounded-[0.911vw] rounded-[1.8vw] bg-[#7A55FF] flex items-center justify-center btnm md:!text-[1.302vw] !text-[2.5vw]">
|
||||
{floor}
|
||||
</div>
|
||||
<span className=" text-black caption tracking-[-0.02em] md:!text-[1vw] !text-[2.222vw] !leading-[133%]">
|
||||
{appartamentsCount} квартир
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<SlideWrapper className="md:mt-[1.042vw] mt-[2.222vw] flex flex-col items-center bg-[#37393B99] bg-[url('/img/pages/results/components/gradients/mobile-pink-half.png')] bg-center bg-cover bg-no-repeat">
|
||||
<h2 className="md:text-[5.208vw] text-[7.778vw] font-medium leading-[95%] tracking-[-0.02em] md:mt-[5.208vw] mt-[8.333vw] mx-auto text-center">
|
||||
В наших приложениях <br />
|
||||
появилось 20 000 <br className="md:hidden block" /> новых квартир
|
||||
</h2>
|
||||
|
||||
<div className="realtive md:w-[95.833vw] w-[91.111vw] mt-auto mx-auto md:mb-[2.125vw] mb-[4.444vw] py-[5vw] backdrop-blur-[24px] border-[2px] border-[#FFFFFF1A] md:rounded-[4.167vw] rounded-[8.889vw]">
|
||||
<img
|
||||
src="/img/pages/results/general/mobile/slide_2/1.png"
|
||||
alt=""
|
||||
className="mx-auto md:mb-0 mb-[4.444vw] md:w-[61.458vw] md:h-[35.677vw] w-[53.056vw] h-[30.833vw]"
|
||||
/>
|
||||
<p className="text-[3.889vw] md:text-[2.604vw] font-medium text-center md:leading-[3.125vw] leading-[16px] tracking-[-0.02em]">
|
||||
4500 часов люди провели <br /> выбирая одну из них для себя в качестве{" "}
|
||||
<br className="md:hidden block" /> нового дома
|
||||
</p>
|
||||
|
||||
<div className="absolute md:h-[62.76vw] h-[78.278vw] md:w-[49.349vw] w-[63.056vw] md:top-[-62.76vw] top-[-78.8vw] left-1/2 -translate-x-1/2">
|
||||
<img
|
||||
src="/img/pages/results/general/building.png"
|
||||
alt=""
|
||||
className="w-full h-full "
|
||||
/>
|
||||
|
||||
<FloorIndicator
|
||||
floor={32}
|
||||
appartamentsCount={8}
|
||||
className="absolute md:top-[20.063vw] md:right-[-7.161vw] top-[21.389vw] right-[-3.333vw]"
|
||||
/>
|
||||
<FloorIndicator
|
||||
floor={25}
|
||||
appartamentsCount={8}
|
||||
className="absolute md:top-[45.063vw] md:right-[-7.161vw] top-[33.333vw] right-[-3.333vw]"
|
||||
/>
|
||||
<FloorIndicator
|
||||
floor={24}
|
||||
appartamentsCount={6}
|
||||
className="absolute md:top-[55.063vw] md:right-[-7.161vw] top-[65.556vw] right-[-3.333vw]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</SlideWrapper>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,33 @@
|
||||
/* eslint-disable @next/next/no-img-element */
|
||||
import React from "react";
|
||||
import SlideWrapper from "../../components/SlideWrapper";
|
||||
|
||||
export default function Reservations() {
|
||||
return (
|
||||
<SlideWrapper className="md:mt-[1.042vw] mt-[2.222vw] flex flex-col items-center bg-[#37393B99] md:bg-[url('/img/pages/results/components/gradients/tablet-pink-red.png')] bg-[url('/img/pages/results/components/gradients/mobile-pink-red-half.png')] bg-center bg-cover bg-no-repeat">
|
||||
<p className="md:hidden text-[3.889vw] font-medium text-center leading-[16px] tracking-[-0.02em] mb-[2.222vw] md:mt-[5.208vw] mt-[11.111vw]">
|
||||
С помощью GRAFF.estate было сделано
|
||||
</p>
|
||||
<h2 className="md:hidden text-[8.889vw] font-medium leading-[95%] tracking-[-0.02em] text-center">
|
||||
1220 заявок на бронь
|
||||
</h2>
|
||||
|
||||
<h2 className="md:block hidden text-[5.208vw] font-medium text-center leading-[95%] tracking-[-0.02em] md:mt-[5.208vw]">
|
||||
С помощью GRAFF.estate было <br /> сделано 1220 заявок на бронь
|
||||
</h2>
|
||||
|
||||
<img
|
||||
src="/img/pages/results/general/mobile/slide_3/1.png"
|
||||
alt=""
|
||||
className="md:w-[70.833vw] w-[83.333vw] aspect-[301/415] mx-auto my-auto md:mt-[5.208vw] "
|
||||
/>
|
||||
|
||||
<p className="text-[3.889vw] font-medium text-center leading-[3.125vw] tracking-[-0.02em] mb-[2.222vw] md:mt-[5.208vw] mt-[3.889vw]">
|
||||
Общая сумма броней <br className="md:block hidden" /> превысила
|
||||
</p>
|
||||
<h2 className="md:text-[5.208vw] text-[8.889vw] font-medium leading-[95%] tracking-[-0.02em] text-center mb-[11.111vw]">
|
||||
30 млрд ₽
|
||||
</h2>
|
||||
</SlideWrapper>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,65 @@
|
||||
/* eslint-disable @next/next/no-img-element */
|
||||
import React from "react";
|
||||
import SlideWrapper from "../../components/SlideWrapper";
|
||||
|
||||
export default function Square() {
|
||||
return (
|
||||
<SlideWrapper className="md:mt-[1.042vw] mt-[2.222vw] flex flex-col items-center justify-center md:bg-[url('/img/pages/results/general/tablet/slide_1/bg.png')] bg-[url('/img/pages/results/general/mobile/slide_1/bg.png')] bg-cover bg-center bg-no-repeat">
|
||||
<div className="absolute md:w-[29.74vw] w-[43.056vw] md:top-[5.208vw] top-[4.444vw] md:left-[5.208vw] left-[4.444vw] md:p-[2.083vw] p-[4.444vw] md:rounded-[1.563vw] rounded-[4.444vw] flex items-center justify-between bg-[#FFFFFF1A] backdrop-blur-[24px] border-[2px] border-[#FFFFFF1A] z-[10]">
|
||||
<div className="flex flex-col gap-[0.694vw] w-full">
|
||||
<span className="md:text-[3.125vw] text-[3.889vw] font-medium leading-[4.444vw] tracking-[-0.02em]">
|
||||
Это как две Тулы
|
||||
</span>
|
||||
<p className="md:text-[1.823vw] text-[2.5vw] leading-[120%] opacity-60">
|
||||
Родина нашего проекта <br />
|
||||
Премьер Парк
|
||||
</p>
|
||||
<img
|
||||
src="/img/pages/results/general/park_logo.svg"
|
||||
alt=""
|
||||
className="md:size-[5.599vw] size-[11.944vw] object-cover ml-auto"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="absolute md:w-[29.74vw] w-[43.056vw] md:bottom-[5.208vw] bottom-[4.444vw] md:right-[5.208vw] right-[4.444vw] md:p-[2.083vw] p-[4.444vw] md:rounded-[1.563vw] rounded-[4.444vw] flex items-center justify-between bg-[#FFFFFF1A] backdrop-blur-[24px] border-[2px] border-[#FFFFFF1A] z-[10]">
|
||||
<div className="flex flex-col gap-[0.694vw] w-full">
|
||||
<span className="md:text-[3.125vw] text-[3.889vw] font-medium leading-[4.444vw] tracking-[-0.02em]">
|
||||
Или Сургут
|
||||
</span>
|
||||
<p className="md:text-[1.823vw] text-[2.5vw] leading-[120%] opacity-60">
|
||||
Город лучших <br /> ПМ-ов и дизайнеров
|
||||
</p>
|
||||
<div className="flex items-center ml-auto mt-[3.056vw]">
|
||||
<img
|
||||
src="/img/pages/results/general/surgut_1.png"
|
||||
alt=""
|
||||
className="md:size-[5.599vw] size-[11.944vw] object-cover"
|
||||
/>
|
||||
<img
|
||||
src="/img/pages/results/general/surgut_2.png"
|
||||
alt=""
|
||||
className="md:size-[5.599vw] size-[11.944vw] object-cover md:ml-[-1.5vw] ml-[-3.972vw]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-[6.389vw] z-[10] items-center justify-center">
|
||||
<div className="md:px-[2.083vw] md:py-[1.042vw] py-[2.778vw] px-[4.444vw] rounded-full bg-[radial-gradient(circle_at_right_top,#FF79D2_0%,#C932E8_20%,#7A55FF_60%)] font-medium">
|
||||
В 2025 году мы
|
||||
</div>
|
||||
<p className="text-center md:text-[5.208vw] text-[7.778vw] font-medium leading-[95%] tracking-[-0.02em]">
|
||||
Мы замоделили 288км² <br className="md:hidden block" /> окружения{" "}
|
||||
<br className="md:block hidden" />
|
||||
<br className="md:hidden block" /> для наших клиентов
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Задник */}
|
||||
{/* <div className="absolute z-[1] top-0 left-0 w-full h-full bg-[url('/img/pages/results/general/mobile/slide_1/bg-bottom.png')] bg-cover bg-center bg-no-repeat"></div>
|
||||
<div className="absolute z-[2] top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 size-[150.333vw] rounded-full bg-[url('/img/pages/results/general/mobile/slide_1/bg-middle.png')] bg-cover bg-center bg-no-repeat"></div>
|
||||
<div className="absolute z-[3] top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 size-[140.278vw] bg-[url('/img/pages/results/general/mobile/slide_1/bg-top.png')] bg-cover bg-center bg-no-repeat"></div> */}
|
||||
</SlideWrapper>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
/* eslint-disable @next/next/no-img-element */
|
||||
import React from "react";
|
||||
import SlideWrapper from "../../components/SlideWrapper";
|
||||
|
||||
export default function LatestProjects() {
|
||||
return (
|
||||
<SlideWrapper className="md:mt-[1.042vw] mt-[2.222vw] flex flex-col items-center bg-[url('/img/pages/results/components/gradients/mobile-red.png')] bg-cover bg-center bg-no-repeat">
|
||||
<h2 className="text-[4.444vw] md:mb-[3.125vw] mb-[6.667vw] text-white text-center leading-[95%] tracking-[-0.02em] font-medium line2 md:mt-[5.208vw] mt-[11.111vw]">
|
||||
Последними <br /> из которых стали
|
||||
</h2>
|
||||
<div className="flex flex-col h-full w-full md:px-[2.083vw] px-[2.778vw] pb-[2.778vw] md:gap-[1.042vw] gap-[1.111vw] items-center justify-center">
|
||||
<div className="md:rounded-[2.083vw] rounded-[8.889vw] w-full h-full md:bg-[url('/img/pages/results/projects/tablet-badayevskiy.png')] bg-[url('/img/pages/results/projects/mobile-badayevskiy.png')] bg-cover bg-center bg-no-repeat" />
|
||||
<div className="md:rounded-[2.083vw] rounded-[8.889vw] w-full h-full md:bg-[url('/img/pages/results/projects/tablet-rozhdestvenka.png')] bg-[url('/img/pages/results/projects/mobile-rozhdestvenka.png')] bg-cover bg-center bg-no-repeat" />
|
||||
</div>
|
||||
</SlideWrapper>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,143 @@
|
||||
/* eslint-disable @next/next/no-img-element */
|
||||
import React, { useEffect, useRef, useState } from "react";
|
||||
import ShiftText from "../../../ShiftText";
|
||||
import { motion, useMotionValue } from "framer-motion";
|
||||
import { useMediaQueries } from "@/hooks/useMediaQueries";
|
||||
import SlideWrapper from "../../components/SlideWrapper";
|
||||
|
||||
export default function Projects() {
|
||||
const [expanded, setExpanded] = useState(false);
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
const { isMd } = useMediaQueries();
|
||||
const transition = {
|
||||
duration: 1,
|
||||
ease: "easeInOut",
|
||||
};
|
||||
const progress = useMotionValue(0);
|
||||
|
||||
// useEffect(() => {
|
||||
// if (!containerRef.current) return;
|
||||
|
||||
// const observer = new IntersectionObserver(
|
||||
// (entries) => {
|
||||
// if (entries[0].isIntersecting) {
|
||||
// setTimeout(() => {
|
||||
// setExpanded(true);
|
||||
// progress.set(1);
|
||||
// }, 2000);
|
||||
// }
|
||||
// },
|
||||
// {
|
||||
// threshold: 0.2,
|
||||
// }
|
||||
// );
|
||||
// observer.observe(containerRef.current);
|
||||
// return () => observer.disconnect();
|
||||
// }, []);
|
||||
|
||||
function ProjectsRowWrapper({
|
||||
children,
|
||||
offsetDirection,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
offsetDirection: -1 | 1;
|
||||
}) {
|
||||
return (
|
||||
<motion.div
|
||||
animate={{
|
||||
translateX: expanded ? 100 * offsetDirection : 0,
|
||||
gap: expanded ? "0.556vw" : "1.111vw",
|
||||
}}
|
||||
transition={{
|
||||
...transition,
|
||||
}}
|
||||
className="flex md:gap-[1.563vw] gap-[1.111vw] justify-center flex-shrink min-h-0"
|
||||
>
|
||||
{children}
|
||||
</motion.div>
|
||||
);
|
||||
}
|
||||
|
||||
function ResultsProjectsItem({ src }: { src: string }) {
|
||||
return (
|
||||
<motion.img
|
||||
animate={{
|
||||
borderRadius: expanded ? "2.222vw" : "4.444vw",
|
||||
}}
|
||||
src={src}
|
||||
alt=""
|
||||
className={"md:w-[70.703vw] aspect-[294/166] object-cover flex-shrink"}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div ref={containerRef}>
|
||||
<SlideWrapper className="md:mt-[1.042vw] mt-[2.222vw] flex flex-col items-center justify-between bg-[url('/img/pages/results/components/gradients/mobile-pink.png')] bg-cover bg-center bg-no-repeat">
|
||||
<ShiftText
|
||||
className="font-medium line2 text-center text-[4.444vw] z-10 md:mt-[2.604vw] mt-[11.111vw]"
|
||||
paragraphs={[
|
||||
<>
|
||||
Закончили <br />
|
||||
разработку и сдали <br />
|
||||
24 проекта
|
||||
</>,
|
||||
<>
|
||||
Теперь у нас более <br />
|
||||
70 проектов
|
||||
</>,
|
||||
]}
|
||||
shiftBreakpoints={[0, 1]}
|
||||
scrollProgress={progress}
|
||||
/>
|
||||
|
||||
<motion.div
|
||||
animate={{
|
||||
gap: expanded ? "0.556vw" : "1.111vw",
|
||||
}}
|
||||
transition={{
|
||||
...transition,
|
||||
}}
|
||||
className="flex flex-col justify-start gap-[1.111vw] outline min-h-0"
|
||||
>
|
||||
<ProjectsRowWrapper offsetDirection={-1}>
|
||||
<ResultsProjectsItem src="/img/pages/results/projects/10.png" />
|
||||
<ResultsProjectsItem src="/img/pages/results/projects/2.png" />
|
||||
<ResultsProjectsItem src="/img/pages/results/projects/3.png" />
|
||||
<ResultsProjectsItem src="/img/pages/results/projects/7.png" />
|
||||
</ProjectsRowWrapper>
|
||||
|
||||
<ProjectsRowWrapper offsetDirection={1}>
|
||||
<ResultsProjectsItem src="/img/pages/results/projects/2.png" />
|
||||
<ResultsProjectsItem src="/img/pages/results/projects/6.png" />
|
||||
<ResultsProjectsItem src="/img/pages/results/projects/main.png" />
|
||||
<ResultsProjectsItem src="/img/pages/results/projects/7.png" />
|
||||
<ResultsProjectsItem src="/img/pages/results/projects/2.png" />
|
||||
</ProjectsRowWrapper>
|
||||
|
||||
<ProjectsRowWrapper offsetDirection={-1}>
|
||||
<ResultsProjectsItem src="/img/pages/results/projects/3.png" />
|
||||
<ResultsProjectsItem src="/img/pages/results/projects/10.png" />
|
||||
<ResultsProjectsItem src="/img/pages/results/projects/11.png" />
|
||||
<ResultsProjectsItem src="/img/pages/results/projects/6.png" />
|
||||
</ProjectsRowWrapper>
|
||||
|
||||
<ProjectsRowWrapper offsetDirection={1}>
|
||||
<ResultsProjectsItem src="/img/pages/results/projects/2.png" />
|
||||
<ResultsProjectsItem src="/img/pages/results/projects/6.png" />
|
||||
<ResultsProjectsItem src="/img/pages/results/projects/main.png" />
|
||||
<ResultsProjectsItem src="/img/pages/results/projects/7.png" />
|
||||
<ResultsProjectsItem src="/img/pages/results/projects/2.png" />
|
||||
</ProjectsRowWrapper>
|
||||
|
||||
<ProjectsRowWrapper offsetDirection={-1}>
|
||||
<ResultsProjectsItem src="/img/pages/results/projects/10.png" />
|
||||
<ResultsProjectsItem src="/img/pages/results/projects/2.png" />
|
||||
<ResultsProjectsItem src="/img/pages/results/projects/3.png" />
|
||||
<ResultsProjectsItem src="/img/pages/results/projects/7.png" />
|
||||
</ProjectsRowWrapper>
|
||||
</motion.div>
|
||||
</SlideWrapper>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
+5
-5
@@ -1,7 +1,7 @@
|
||||
/* eslint-disable @next/next/no-img-element */
|
||||
import React, { useState, useRef, useEffect } from "react";
|
||||
import { useSwipeable } from "react-swipeable";
|
||||
import { motion, AnimatePresence } from "framer-motion";
|
||||
import SlideWrapper from "../../components/SlideWrapper";
|
||||
|
||||
export default function MobileReels() {
|
||||
const videos = [
|
||||
@@ -101,9 +101,9 @@ export default function MobileReels() {
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
<SlideWrapper
|
||||
onTouchStart={handleVideoTap}
|
||||
className="snap-center md:h-[140.625vw] h-[183.333vw] md:mt-[1.042vw] mt-[2.222vw] md:rounded-[5.208vw] rounded-[11.111vw] overflow-hidden relative flex flex-col bg-center bg-cover bg-no-repeat"
|
||||
className="md:mt-[1.042vw] mt-[2.222vw] flex flex-col items-center bg-center bg-cover bg-no-repeat"
|
||||
>
|
||||
{/* Полоски прогресса */}
|
||||
<div className="absolute md:top-[5.208vw] top-[6.667vw] left-[7.222vw] right-[7.222vw] z-[11] flex gap-[1.111vw]">
|
||||
@@ -178,7 +178,7 @@ export default function MobileReels() {
|
||||
alt=""
|
||||
className="absolute w-full h-full z-[10] pointer-events-none"
|
||||
/>
|
||||
</div>
|
||||
</SlideWrapper>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -187,7 +187,7 @@ function VideoInfo({ index }: { index: number }) {
|
||||
<>
|
||||
<div className="md:w-[32.292vw] w-[68.889vw] md:py-[2.083vw] py-[4.444vw] md:pl-[2.083vw] pl-[4.444vw] md:pr-[1.563vw] pr-[3.333vw] bg-[#FFFFFF1A] mb-[2.222vw] mx-auto backdrop-blur-[24px] flex justify-between gap-[1.111vw] overflow-clip items-center md:rounded-[2.083vw] rounded-[4.444vw] border-[2px] border-[#FFFFFF1A]">
|
||||
<p className="text-start md:text-[1.302vw] text-[2.778vw] leading-[120%] tracking-[-0.01em] font-medium z-[2]">
|
||||
Взяли первую строчку рейтинга RACA за экспертизу в категории
|
||||
Взяли первую строчку рейтинга RACA за экспертизу в категории
|
||||
Production
|
||||
</p>
|
||||
<img
|
||||
@@ -3,31 +3,28 @@
|
||||
|
||||
import { motion, MotionValue, useScroll, useTransform } from "framer-motion";
|
||||
import ResultsGarland from "./Desktop/ResultsGarland";
|
||||
import { useEffect, useRef } from "react";
|
||||
import { useRef } from "react";
|
||||
import ResultsProjects from "./Desktop/ResultsProjects";
|
||||
import ResultsGeneral from "./Desktop/ResultsGeneral";
|
||||
import ResultsEventsReelsWithAchievements from "./Desktop/ResultsEventsReelsWithAchievements";
|
||||
import ResultsMap from "./ResultsMap";
|
||||
import ResultsGarlandMobile from "./Tablet&Mobile/ResultsGarlandMobile";
|
||||
import ResultsGeneralMobile from "./Tablet&Mobile/ResultsGeneralMobile";
|
||||
import ResultsProjectsMobile from "./Tablet&Mobile/ResultsProjectsMobile";
|
||||
import ResultsEventsReelsWithAchievementsMobile from "./Tablet&Mobile/ResultsEventsReelsWithAchievementsMobile";
|
||||
import { useMediaQueries } from "@/hooks/useMediaQueries";
|
||||
import { useModalStore } from "@/stores/useModalStore";
|
||||
import QuestionFormModal from "@/components/modals/QuestionFormModal";
|
||||
import MobileGarland from "./MobileAlt/MobileGarland";
|
||||
import { Appartaments, Reservations, Square } from "./MobileAlt/MobileGeneral";
|
||||
import {
|
||||
GraffEstateView,
|
||||
Details,
|
||||
Modules,
|
||||
Legenda,
|
||||
Team,
|
||||
} from "./MobileAlt/MobileAchievements";
|
||||
import MobileCongratulations from "./MobileAlt/MobileCongratulations";
|
||||
import SnapWrapper from "./MobileAlt/SnapWrapper";
|
||||
import { LatestProjects, Projects } from "./MobileAlt/MobileProjects";
|
||||
import MobileReels from "./MobileAlt/MobileReels";
|
||||
import Garland from "./MobileAlt/slides/garland/Garland";
|
||||
import Appartaments from "./MobileAlt/slides/general/Appartaments";
|
||||
import Reservations from "./MobileAlt/slides/general/Reservations";
|
||||
import Square from "./MobileAlt/slides/general/Square";
|
||||
import Legenda from "./MobileAlt/slides/achievements/Legenda";
|
||||
import GraffEstateView from "./MobileAlt/slides/achievements/GraffEstateView";
|
||||
import Modules from "./MobileAlt/slides/achievements/Modules";
|
||||
import Details from "./MobileAlt/slides/achievements/Details";
|
||||
import Team from "./MobileAlt/slides/achievements/Team";
|
||||
import MobileCongratulations from "./MobileAlt/slides/congratulations/MobileCongratulations";
|
||||
import SnapWrapper from "./MobileAlt/components/SnapWrapper";
|
||||
import Projects from "./MobileAlt/slides/projects/Projects";
|
||||
import LatestProjects from "./MobileAlt/slides/projects/LatestProjects";
|
||||
import MobileReels from "./MobileAlt/slides/reels/MobileReels";
|
||||
import { Feedback } from "@/components/Layout/Feedback";
|
||||
import { Footer } from "@/components/Layout/Footer";
|
||||
|
||||
@@ -70,12 +67,10 @@ export function Results2025() {
|
||||
|
||||
{(isMobile || isMd) && (
|
||||
<SnapWrapper>
|
||||
<MobileGarland />
|
||||
|
||||
<Garland />
|
||||
{/* Projects */}
|
||||
<Projects />
|
||||
<LatestProjects />
|
||||
|
||||
{/* General */}
|
||||
<Square />
|
||||
<Appartaments />
|
||||
|
||||
@@ -42,7 +42,7 @@ export default function CardsSwiper({
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
className={`relative md:aspect-[736/650] aspect-[320/360] [transform-style:preserve-3d] md:px-[12.24vw] px-[15vw] ${className}`}
|
||||
className={`relative md:aspect-[736/650] aspect-[320/360] [transform-style:preserve-3d] md:px-[12.24vw] px-[15vw] my-auto ${className}`}
|
||||
{...handlers}
|
||||
>
|
||||
{cards.map((card, index) => (
|
||||
@@ -57,7 +57,7 @@ export default function CardsSwiper({
|
||||
))}
|
||||
</div>
|
||||
{controls && (
|
||||
<div className="flex items-center justify-center gap-[1.111vw] w-[94.444vw] mx-auto md:mt-auto md:mb-[2vw] mt-[3.333vw] z-[3]">
|
||||
<div className="flex items-center justify-center gap-[1.111vw] w-[94.444vw] mx-auto md:mb-[2vw] mb-[4.444vw] z-[3]">
|
||||
<button
|
||||
onClick={handleSwipeLeft}
|
||||
className="size-[15.556vw] flex items-center justify-center"
|
||||
@@ -110,20 +110,22 @@ function CardItem({
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
animate={{ opacity: index === current ? 1 : 0.8 }}
|
||||
// animate={{ opacity: index === current ? 1 : 0.8 }}
|
||||
transition={{ duration: 0.5 }}
|
||||
className={`absolute w-[88.889vw] aspect-[320/516] bg-[#37393B] backdrop-blur-[24px] rounded-[3.125vw] overflow-clip transition-[scale,transform] will-change-[transform,scale] duration-500 select-none ${
|
||||
index === current ? "[transform:translateZ(40px)]" : "[scale:85%]"
|
||||
} ${
|
||||
className={`absolute w-[88.889vw] aspect-[320/516] bg-[#37393B] backdrop-bl ur-[24px] rounded-[3.125vw] overflow-clip transition-[scale,transform] will-change-[transform,scale] duration-500 select-none ${
|
||||
index === current ? "[transform:translateZ(40px)]" : "[scale:85%] "
|
||||
} ${
|
||||
index === (current + 1) % cardsLength
|
||||
? "md:[transform:translateX(calc(7.5%+12.24vw))] [transform:translateX(calc(7.5%+15.556vw))]"
|
||||
: index === (current - 1 + cardsLength) % cardsLength
|
||||
? "md:[transform:translateX(calc(-7.5%-12.24vw))] [transform:translateX(calc(-7.5%-15.556vw))]"
|
||||
: index !== current
|
||||
? "[transform:translateZ(-140px)]"
|
||||
: ""
|
||||
} ${cardClassName}`}
|
||||
>
|
||||
<div
|
||||
className={`relative h-full overflow-hidden ${
|
||||
className={`relative h-full overflow-hidden ${
|
||||
card.image ? "" : ""
|
||||
} flex flex-col justify-between`}
|
||||
>
|
||||
|
||||
Reference in New Issue
Block a user