About desktop + tablet
This commit is contained in:
Binary file not shown.
|
After Width: | Height: | Size: 6.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 92 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 40 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 45 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 49 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 99 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 89 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 848 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.0 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 685 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 230 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 379 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 350 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 104 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 97 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 92 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 162 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 328 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 101 KiB |
@@ -1,5 +1,5 @@
|
||||
import { InProcess } from "@/components/pages/InProcess";
|
||||
import AboutMain from "@/components/pages/AboutPage/AboutMain";
|
||||
|
||||
export default function AboutPage() {
|
||||
return <InProcess />;
|
||||
return <AboutMain />;
|
||||
}
|
||||
|
||||
@@ -93,6 +93,14 @@ html {
|
||||
@apply text-[clamp(14px,14px+(100vw-360px)/1240*2,16px)] leading-none;
|
||||
}
|
||||
|
||||
.headline1{
|
||||
@apply font-medium text-[1.667vw] leading-[1.944vw] tracking-[-0.02em] md:max-lg:text-[3.125vw] md:max-lg:leading-[3.646vw]
|
||||
}
|
||||
|
||||
.headline2{
|
||||
@apply font-medium text-[1.389vw] leading-[1.667vw] tracking-[-0.02em] md:max-lg:text-[2.083vw] md:max-lg:leading-[2.344vw]
|
||||
}
|
||||
|
||||
.text-gradient {
|
||||
background: linear-gradient(87deg, #798fff 15%, #d375ff 100%);
|
||||
background-clip: text;
|
||||
|
||||
@@ -62,17 +62,17 @@ export function Header() {
|
||||
const scroll = useScroll(logoRef);
|
||||
|
||||
return (
|
||||
<header className="lg:mt-[1.389vw] relative flex lg:px-[1.389vw]">
|
||||
<header className="lg:mt-[1.389vw] relative flex lg:px-[1.389vw] ">
|
||||
<Link
|
||||
href={"/"}
|
||||
ref={logoRef}
|
||||
className="max-lg:hidden cursor-pointer outline-none"
|
||||
className="outline-none cursor-pointer max-lg:hidden"
|
||||
>
|
||||
<div className="w-[13.333vw] aspect-[4/1]">
|
||||
<LogoHorIcon />
|
||||
</div>
|
||||
</Link>
|
||||
<div className="flex relative flex-1 justify-center m-auto">
|
||||
<div className="relative flex justify-center flex-1 m-auto">
|
||||
<AnimatePresence>
|
||||
<motion.nav
|
||||
ref={navRef}
|
||||
@@ -93,7 +93,7 @@ export function Header() {
|
||||
)}
|
||||
<div
|
||||
ref={productsBtnRef}
|
||||
className="max-md:hidden flex items-center"
|
||||
className="flex items-center max-md:hidden"
|
||||
>
|
||||
<button
|
||||
className={
|
||||
@@ -122,7 +122,7 @@ export function Header() {
|
||||
href={"/projects"}
|
||||
text={"Проекты"}
|
||||
/>
|
||||
<div className="md:justify-end flex flex-1 justify-center">
|
||||
<div className="flex justify-center flex-1 md:justify-end">
|
||||
<Link
|
||||
href={"/form"}
|
||||
className="btnm bg-gradient font-medium lg:px-[1.667vw] lg:py-[1.181vw] py-[17px] px-6 text-nowrap lg:rounded-[1.111vw] rounded-2xl flex items-center"
|
||||
@@ -130,7 +130,7 @@ export function Header() {
|
||||
Оставить заявку
|
||||
</Link>
|
||||
</div>
|
||||
<div className="md:hidden md:justify-enda flex" ref={burgerBtnRef}>
|
||||
<div className="flex md:hidden md:justify-enda" ref={burgerBtnRef}>
|
||||
<button
|
||||
className="!border-none p-[18px] hover:bg-[#232425] rounded-2xl active:opacity-50 outline-none cursor-pointer"
|
||||
onClick={() => setBurgerOpened((prev) => !prev)}
|
||||
@@ -188,10 +188,10 @@ export function Header() {
|
||||
<Products />
|
||||
</div>
|
||||
<div>
|
||||
<p className="btnm mb-1 opacity-60">Контакты:</p>
|
||||
<p className="mb-1 btnm opacity-60">Контакты:</p>
|
||||
<Link
|
||||
href={"tel:88007700067"}
|
||||
className="accent font-medium outline-none"
|
||||
className="font-medium outline-none accent"
|
||||
>
|
||||
8 800 770 00 67
|
||||
</Link>
|
||||
@@ -237,7 +237,7 @@ export function Header() {
|
||||
alt="кейс dprofile"
|
||||
className="absolute bottom-0 left-0 rotate-[2.56deg]"
|
||||
/>
|
||||
<p className="btnm font-medium">Смотреть кейс</p>
|
||||
<p className="font-medium btnm">Смотреть кейс</p>
|
||||
</a>
|
||||
) : (
|
||||
<div className="bg-[#B5F54E] p-[0.764vw] self-center rounded-[0.556vw] max-lg:hidden">
|
||||
|
||||
@@ -0,0 +1,369 @@
|
||||
/* eslint-disable @next/next/no-img-element */
|
||||
"use client";
|
||||
|
||||
import React from "react";
|
||||
import visualisationImg from "../../../../public/img/pages/about/experience/visualisation.png";
|
||||
import demonstrationImg from "../../../../public/img/pages/about/experience/demonstrartion.png";
|
||||
import presentationsImg from "../../../../public/img/pages/about/experience/presentations.png";
|
||||
import sitesImg from "../../../../public/img/pages/about/experience/sites.png";
|
||||
import toursImg from "../../../../public/img/pages/about/experience/tours.png";
|
||||
|
||||
import EventLogo1 from "../../../../public/img/pages/about/experience/EventLogo1.png";
|
||||
import EventLogo2 from "../../../../public/img/pages/about/experience/EventLogo2.png";
|
||||
|
||||
import buildUpImage from "../../../../public/img/pages/about/experience/cards/build_up.png";
|
||||
import dpImage from "../../../../public/img/pages/about/experience/cards/dp.png";
|
||||
import mapImage from "../../../../public/img/pages/about/experience/cards/map.png";
|
||||
import skImage from "../../../../public/img/pages/about/experience/cards/sk.png";
|
||||
import tableImage from "../../../../public/img/pages/about/experience/cards/table.png";
|
||||
import wowImage from "../../../../public/img/pages/about/experience/cards/wow.png";
|
||||
|
||||
import { ArticleCard } from "../BlogPage/ArticleCard";
|
||||
import { useSearchParams } from "next/navigation";
|
||||
import { useGetArticlesQuery } from "@/queries/getArticles";
|
||||
import { motion } from "framer-motion";
|
||||
|
||||
export default function AboutExperience() {
|
||||
const searchParams = useSearchParams();
|
||||
const { data: articles } = useGetArticlesQuery(searchParams.getAll("tags"));
|
||||
|
||||
function Card({
|
||||
img,
|
||||
title,
|
||||
className,
|
||||
}: {
|
||||
img: string;
|
||||
title: string;
|
||||
className?: string;
|
||||
}) {
|
||||
return (
|
||||
<div
|
||||
className={
|
||||
"w-[15.486vw] aspect-[223/240] rounded-[16px] bg-[#37393B] flex flex-col items-center justify-between p-[1.111vw] absolute overflow-hidden md:max-lg:p-[2.083vw] " +
|
||||
className
|
||||
}
|
||||
>
|
||||
<motion.img
|
||||
style={{
|
||||
scale: 1,
|
||||
}}
|
||||
whileHover={{
|
||||
scale: 1.15,
|
||||
}}
|
||||
transition={{
|
||||
duration: 0.3,
|
||||
}}
|
||||
src={img}
|
||||
className="z-10 w-[9.444vw] md:max-lg:w-[20.833vw]"
|
||||
alt=""
|
||||
/>
|
||||
<p className="z-10 text-center btns md:max-lg:text-[1.563vw]">
|
||||
{title}
|
||||
</p>
|
||||
<div
|
||||
className="absolute w-[24.167vw] aspect-[348/226] rounded-full blur-[120px] bg-[#0F1011] bottom-[-100px]
|
||||
md:max-lg:top-[-150px] md:max-lg:blur-[100px] md:max-lg:w-full"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function CardsTablet() {
|
||||
return (
|
||||
<div className="hidden md:max-lg:grid md:max-lg:grid-cols-3 md:max-lg:grid-rows-2 md:max-lg:w-full md:max-lg:gap-3">
|
||||
<Card
|
||||
img={wowImage.src}
|
||||
title="Заняли 1 место на WOW AWARDS 2024 совместно с застройщиком Upside Development"
|
||||
className="relative w-full"
|
||||
/>
|
||||
<Card
|
||||
img={tableImage.src}
|
||||
title="Наш продукт зарегистрирован и включен в реестр отечественного ПО"
|
||||
className="relative w-full translate-y-[3.125vw]"
|
||||
/>
|
||||
<Card
|
||||
img={skImage.src}
|
||||
title="Мы резиденты Сколково"
|
||||
className="relative w-full"
|
||||
/>
|
||||
<Card
|
||||
img={buildUpImage.src}
|
||||
title="В 2023 году мы выиграли Build UP в категории IT"
|
||||
className="relative w-full"
|
||||
/>
|
||||
<Card
|
||||
img={dpImage.src}
|
||||
title="Каждый наш проект, получил одну или несколько наград на платформе Dprofile"
|
||||
className="relative w-full translate-y-[3.125vw]"
|
||||
/>
|
||||
<Card
|
||||
img={mapImage.src}
|
||||
title="Наши интерактивные столы стоят уже в 16 городах России"
|
||||
className="relative w-full"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Плитка */}
|
||||
<div>
|
||||
<h2
|
||||
className="w-full text-center font-medium text-[4.444vw] leading-[95%] tracking-[-0.02em] mb-[4.444vw]
|
||||
md:max-lg:text-start md:max-lg:text-[5.208vw]"
|
||||
>
|
||||
За 15 лет работы мы реализовали более{" "}
|
||||
<span className=" text-transparent bg-gradient-to-r from-[#7A55FF] via-[#C932E8] to-[#FF79D2] bg-clip-text">
|
||||
65 проектов в сфере интерактивных технологий
|
||||
</span>
|
||||
</h2>
|
||||
|
||||
<div
|
||||
className="grid grid-cols-4 grid-rows-2 gap-3 [grid-template-areas:'a_b_b_c'_'d_b_b_e'] w-full
|
||||
md:max-lg:grid-cols-2 md:max-lg:grid-rows-4 md:max-lg:[grid-template-areas:'a_d'_'b_b'_'b_b'_'c_e']"
|
||||
>
|
||||
<div
|
||||
className="[grid-area:a] w-full aspect-[340/360] rounded-2xl border border-[#FFFFFF1A] flex flex-col items-center justify-between
|
||||
md:max-lg:w-[46.875vw] md:max-lg:p-[3.125vw]"
|
||||
>
|
||||
<img
|
||||
src={visualisationImg.src}
|
||||
className="w-[20.278vw] aspect-[292/252]
|
||||
md:max-lg:w-[40.885vw] md:max-lg:aspect-[314/252]"
|
||||
alt=""
|
||||
/>
|
||||
<span className="text-center mb-[1.667vw] headline1">
|
||||
Архитектурные <br /> визуализации
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
className="relative overflow-hidden [grid-area:d] w-full aspect-[340/360] rounded-2xl border border-[#FFFFFF1A] flex flex-col-reverse items-center justify-between
|
||||
md:max-lg:w-[46.875vw] md:max-lg:p-[3.125vw] "
|
||||
>
|
||||
<span className="text-center mb-[1.667vw] headline1 z-10">
|
||||
Удаленная демонстрация
|
||||
</span>
|
||||
<img
|
||||
src={demonstrationImg.src}
|
||||
alt=""
|
||||
className="absolute w-full md:max-lg:top-0"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
className="relative [grid-area:b] rounded-2xl
|
||||
md:max-lg:border md:max-lg:border-[#FFFFFF1A] md:max-lg:p-[3.125vw]"
|
||||
>
|
||||
<img src={presentationsImg.src} alt="" className="w-full" />
|
||||
<span className="absolute text-center headline1 bottom-[3.125vw] left-1/2 -translate-x-1/2 z-10">
|
||||
Интерактивные <br /> презентации
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
className="relative overflow-hidden [grid-area:c] w-full aspect-[340/360] rounded-2xl border border-[#FFFFFF1A] flex flex-col-reverse items-center justify-between
|
||||
md:max-lg:w-[46.875vw] md:max-lg:p-[3.125vw]"
|
||||
>
|
||||
<span className="text-center headline1 mb-[1.667vw] z-10">
|
||||
Сайты
|
||||
</span>
|
||||
<img
|
||||
src={sitesImg.src}
|
||||
alt=""
|
||||
className="absolute w-full md:max-lg:top-0"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
className="[grid-area:e] w-full aspect-[340/360] rounded-2xl border border-[#FFFFFF1A] flex flex-col items-center justify-between
|
||||
md:max-lg:w-[46.875vw] md:max-lg:p-[3.125vw]"
|
||||
>
|
||||
<img
|
||||
src={toursImg.src}
|
||||
className="w-[20.278vw] aspect-[292/252]
|
||||
md:max-lg:w-[40.885vw]"
|
||||
alt=""
|
||||
/>
|
||||
<span className="text-center headline1 mb-[1.667vw]">
|
||||
Виртуальные туры <br /> по 360 сферам
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Посты */}
|
||||
<div className="">
|
||||
<h2
|
||||
className="w-full text-start font-medium text-[4.444vw] leading-[95%] tracking-[-0.02em] mb-[4.444vw]
|
||||
md:max-lg:text-[5.208vw]"
|
||||
>
|
||||
Каждый год мы принимаем участие{" "}
|
||||
<br className="hidden md:max-lg:block" />{" "}
|
||||
<span className="text-transparent bg-gradient-to-r from-[#7A55FF] via-[#C932E8] to-[#FF79D2] bg-clip-text">
|
||||
в самых крупных российских выставках
|
||||
</span>
|
||||
</h2>
|
||||
|
||||
<div className="space-y-[4.444vw] md:max-lg:space-y-[8.333vw]">
|
||||
<div className="flex justify-between md:max-lg:flex-col md:max-lg:gap-[4.167vw]">
|
||||
<div className="w-[23.611vw] md:max-lg:w-full">
|
||||
<h3 className="headline1 mb-[0.833vw]">
|
||||
За нашей спиной участие в 40 выставках
|
||||
</h3>
|
||||
<p className="headline1 text-[#7A7A7A]">
|
||||
Наш продукт GRAFF.estate уже четыре раза был представлен на
|
||||
форуме “Движение”, Иннопром, Восточный экономический форум, 100+
|
||||
TechnoBuild
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
className="flex gap-x-3 w-[71.319vw]
|
||||
md:max-lg:w-full md:max-lg:flex-wrap"
|
||||
>
|
||||
{articles &&
|
||||
articles
|
||||
.slice(0, 3)
|
||||
.map((article) => (
|
||||
<ArticleCard
|
||||
key={article.id}
|
||||
{...article}
|
||||
className="lg:w-[23.194vw] lg:aspect-[334/352] md:max-lg:w-[46.275vw] md:max-lg:aspect-[360/352] max-md:w-full"
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-between md:max-lg:flex-col md:max-lg:gap-[4.167vw]">
|
||||
<p className="w-[23.611vw] headline1 text-[#7A7A7A] md:max-lg:w-full">
|
||||
<span className="text-white headline1">
|
||||
Ближайшие мероприятия, <br />
|
||||
</span>
|
||||
где каждый девелопер может лично протестировать{" "}
|
||||
<br className="hidden md:max-lg:block" /> и оценить функционал
|
||||
наших интерактивных макетов недвижимости
|
||||
</p>
|
||||
<div className="flex justify-between gap-x-3">
|
||||
{/* TODO: Вынести в отдельный компонент */}
|
||||
<motion.div
|
||||
style={{
|
||||
background:
|
||||
"radial-gradient(at top left, #FF3A94 -50%, transparent 100%)",
|
||||
}}
|
||||
whileHover={{
|
||||
background:
|
||||
"radial-gradient(at top left, #FF3A94 0%, transparent 100%)",
|
||||
}}
|
||||
className="w-[35.208vw] aspect-[507/280] p-[1.667vw] rounded-[16px] flex justify-between flex-col hover:cursor-pointer
|
||||
md:max-lg:w-full md:max-lg:p-[3.125vw] md:max-lg:aspect-[360/280]"
|
||||
>
|
||||
<img
|
||||
src={EventLogo1.src}
|
||||
alt=""
|
||||
className="w-[16.667vw] aspect-[280/48] md:max-lg:w-[31.25vw]"
|
||||
/>
|
||||
<div
|
||||
className="flex gap-x-3 md:max-lg:flex-col
|
||||
md:max-lg:gap-y-[1.563vw]"
|
||||
>
|
||||
<div
|
||||
className="py-2.5 px-[0.833vw] rounded-[1.111vw] border border-[#FFFFFF1A] flex items-center
|
||||
md:max-lg:w-max md:max-lg:py-[1.432vw] md:max-lg:px-[2.604vw] md:max-lg:rounded-full"
|
||||
>
|
||||
<div className="size-2.5 rounded-full bg-[#FF3A94] mr-2" />
|
||||
<span>Москва, GOELRO</span>
|
||||
</div>
|
||||
<div
|
||||
className="py-2.5 px-[0.833vw] rounded-[1.111vw] border border-[#FFFFFF1A]
|
||||
md:max-lg:w-max md:max-lg:py-[1.432vw] md:max-lg:px-[2.604vw] md:max-lg:rounded-full"
|
||||
>
|
||||
<span>10 сентября – 12 сентября</span>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
style={{
|
||||
background:
|
||||
"radial-gradient(at top left, #3F58FF -50%, transparent 100%)",
|
||||
}}
|
||||
whileHover={{
|
||||
background:
|
||||
"radial-gradient(at top left, #3F58FF 0%, transparent 100%)",
|
||||
}}
|
||||
className="w-[35.208vw] aspect-[507/280] p-[1.667vw] rounded-[16px] flex justify-between flex-col hover:cursor-pointer
|
||||
md:max-lg:w-full md:max-lg:p-[3.125vw] "
|
||||
>
|
||||
<img
|
||||
src={EventLogo2.src}
|
||||
alt=""
|
||||
className="w-[16.667vw] aspect-[280/48]
|
||||
md:max-lg:w-[31.25vw]"
|
||||
/>
|
||||
<div className="flex gap-x-3 md:max-lg:flex-col md:max-lg:gap-y-[1.563vw]">
|
||||
<div
|
||||
className="py-2.5 px-[0.833vw] rounded-[1.111vw] border border-[#FFFFFF1A] flex items-center
|
||||
md:max-lg:w-full md:max-lg:py-[1.432vw] md:max-lg:px-[2.604vw] md:max-lg:rounded-full"
|
||||
>
|
||||
<div className="size-2.5 rounded-full bg-[#3F58FF] mr-2" />
|
||||
<span>Москва, GOELRO</span>
|
||||
</div>
|
||||
<div
|
||||
className="py-2.5 px-[0.833vw] rounded-[1.111vw] border border-[#FFFFFF1A] flex items-center
|
||||
md:max-lg:w-max md:max-lg:py-[1.432vw] md:max-lg:px-[2.604vw] md:max-lg:rounded-full"
|
||||
>
|
||||
<span>10 сентября – 12 сентября</span>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Крутые ребята */}
|
||||
<div
|
||||
className="w-full aspect-[140/68] flex items-center justify-center relative
|
||||
md:max-lg:items-start"
|
||||
>
|
||||
<div className="flex flex-col gap-y-[1.667vw] text-center w-[68.333vw] md:max-lg:w-full md:max-lg:gap-y-[3.125vw]">
|
||||
<h2 className="line2">
|
||||
А еще мы крутые <br /> и заряженные ребята
|
||||
</h2>
|
||||
<p className="headline1 text-[#7A7A7A] md:max-lg:mb-[calc(4.557vw-3.125vw)]">
|
||||
Мы не просто делаем проекты, а создаем новый стандарт <br />{" "}
|
||||
интерактивных инструментов продаж
|
||||
</p>
|
||||
<CardsTablet />
|
||||
</div>
|
||||
<Card
|
||||
img={tableImage.src}
|
||||
title="Наш продукт зарегистрирован и включен в реестр отечественного ПО"
|
||||
className="top-0 left-[16.389vw] md:max-lg:hidden "
|
||||
/>
|
||||
<Card
|
||||
img={wowImage.src}
|
||||
title="Заняли 1 место на WOW AWARDS 2024 совместно с застройщиком Upside Development"
|
||||
className="top-[8.333vw] left-0 md:max-lg:hidden "
|
||||
/>
|
||||
<Card
|
||||
img={skImage.src}
|
||||
title="Мы резиденты Сколково"
|
||||
className="bottom-0 left-[8.194vw] md:max-lg:hidden "
|
||||
/>
|
||||
<Card
|
||||
img={mapImage.src}
|
||||
title="Наши интерактивные столы стоят уже в 16 городах России"
|
||||
className="top-0 right-[8.194vw] md:max-lg:hidden "
|
||||
/>
|
||||
<Card
|
||||
img={dpImage.src}
|
||||
title="Каждый наш проект, получил одну или несколько наград на платформе Dprofile"
|
||||
className="bottom-[7.708vw] right-0 md:max-lg:hidden "
|
||||
/>
|
||||
<Card
|
||||
img={buildUpImage.src}
|
||||
title="В 2023 году мы выиграли Build UP в категории IT"
|
||||
className="bottom-0 right-[16.389vw] md:max-lg:hidden "
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,50 @@
|
||||
/* eslint-disable @next/next/no-img-element */
|
||||
import React from "react";
|
||||
import ReelTemplate from "../../../../public/img/pages/about/main/reel_template.png";
|
||||
|
||||
export function AboutHero() {
|
||||
return (
|
||||
<div
|
||||
className="w-[calc(100%+1.398vw*2)] -ml-[1.389vw] h-[calc(100dvh-13.333vw/4-1.489vw-100px)] -translate-y-[calc(13.333vw/4+1.489vw+100px)]
|
||||
md:max-lg:flex md:max-lg:flex-col-reverse md:max-lg:h-auto md:max-lg:translate-y-0 md:max-lg:w-full md:max-lg:m-0 md:max-lg:gap-[10.026vw]"
|
||||
>
|
||||
<video
|
||||
src=""
|
||||
poster={ReelTemplate.src}
|
||||
className="absolute inset-0 object-cover w-full lg:h-dvh rounded-b-[1.111vw]
|
||||
md:max-lg:relative md:max-lg:aspect-[736/441] "
|
||||
></video>
|
||||
<div className="relative z-11 pt-[16.25vw] md:max-lg:pt-0">
|
||||
<h1
|
||||
className="text-center font-medium text-[6.667vw] leading-[95%] tracking-[-4%]
|
||||
md:max-lg:tracking-[-0.02em] md:max-lg:leading-[85%] md:max-lg:text-[6.25vw]"
|
||||
>
|
||||
GRAFF.estate - IT компания,
|
||||
<br /> разрабатывающая <br className="hidden md:max-lg:block" />{" "}
|
||||
передовые
|
||||
<br className="md:max-lg:hidden" /> инструменты продаж для{" "}
|
||||
<br className="md:max-lg:hidden" /> застройщиков
|
||||
</h1>
|
||||
|
||||
<div
|
||||
className={`absolute bg-[radial-gradient(circle_at_top_right,#FF79D2_-200%,#C932E8_50%,#7A55FF_100%)] backdrop-blur-[4px] text-center p-[1.111vw] rounded-[1.111vw] w-[4.653vw] h-[3.889vw] top-[15.167vw] left-[3.292vw] headline2
|
||||
md:max-lg:w-[8.203vw] md:max-lg:h-[5.469vw] md:max-lg:rounded-[2.214vw] md:max-lg:left-[3.906vw] md:max-lg:top-[3.906vw] md:max-lg:p-[1.536vw] md:max-lg:px-[2.083vw]`}
|
||||
>
|
||||
AI
|
||||
</div>
|
||||
<div
|
||||
className={`absolute bg-[#37393B99] backdrop-blur-[4px] text-center p-[1.111vw] rounded-[1.111vw] border-[#FFFFFF1A] leading-6 w-[5.139vw] h-[3.889vw] top-[34.803vw] left-[20.511vw] headline2
|
||||
md:max-lg:w-[8.984vw] md:max-lg:h-[5.469vw] md:max-lg:rounded-[2.214vw] md:max-lg:left-[75.26vw] md:max-lg:top-[6vw] md:max-lg:p-[1.536vw] md:max-lg:px-[2.083vw]`}
|
||||
>
|
||||
VR
|
||||
</div>
|
||||
<div
|
||||
className={`absolute bg-[#37393B99] backdrop-blur-[4px] text-center p-[1.111vw] rounded-[1.111vw] border-[#FFFFFF1A] leading-6 w-[20.556vw] h-[3.889vw] top-[39.917vw] left-[60.167vw] headline2
|
||||
md:max-lg:w-[32.031vw] md:max-lg:h-[5.469vw] md:max-lg:rounded-[2.214vw] md:max-lg:left-[62.802vw] md:max-lg:top-[20vw] md:max-lg:p-[1.536vw] md:max-lg:px-[2.083vw]`}
|
||||
>
|
||||
Интерактивные технологии
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,41 @@
|
||||
"use client";
|
||||
import React, { useEffect } from "react";
|
||||
import { AboutHero } from "./AboutHero";
|
||||
import AboutExperience from "./AboutExperience";
|
||||
import { Statistics } from "../MainPage/Statistics";
|
||||
import AboutTeam from "./AboutTeam";
|
||||
|
||||
export default function AboutMain() {
|
||||
useEffect(() => {
|
||||
const main = document.querySelector("main");
|
||||
const header = document.querySelector("header");
|
||||
|
||||
main!.style.overflow = "visible";
|
||||
header!.style.zIndex = "20";
|
||||
|
||||
return () => {
|
||||
main!.style.overflow = "clip";
|
||||
header!.style.zIndex = "auto";
|
||||
};
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="space-y-[11.111vw] md:max-lg:space-y-[13.021vw]">
|
||||
<AboutHero />
|
||||
<AboutExperience />
|
||||
|
||||
{/* Решения */}
|
||||
<div>
|
||||
<h2 className="font-medium text-[4.444vw] leading-[95%] tracking-[-0.02em] mb-[4.444vw]">
|
||||
Благодаря нашим решениям застройщики <br /> отмечают{" "}
|
||||
<span className="text-transparent bg-gradient-to-r from-[#6078F2] to-[#C868F5] bg-clip-text">
|
||||
видимый рост продаж
|
||||
</span>
|
||||
</h2>
|
||||
<Statistics customTitle={true} />
|
||||
</div>
|
||||
|
||||
<AboutTeam />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,200 @@
|
||||
/* eslint-disable @next/next/no-img-element */
|
||||
"use client";
|
||||
import React from "react";
|
||||
|
||||
import GD from "../../../../public/img/pages/about/team/GD.png";
|
||||
import PD from "../../../../public/img/pages/about/team/PD.png";
|
||||
import devs from "../../../../public/img/pages/about/team/devs.png";
|
||||
import designers from "../../../../public/img/pages/about/team/designers.png";
|
||||
import cat from "../../../../public/img/pages/about/team/cat.png";
|
||||
import mock from "../../../../public/img/pages/about/team/carousel-mock.png";
|
||||
import { motion } from "framer-motion";
|
||||
|
||||
function TeamCarousel() {
|
||||
function getOuterCircleStyle(index: number) {
|
||||
return `
|
||||
rotate(${index * 18}deg) translateX(10.5vw) rotate(-${index * 18}deg)
|
||||
`;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="right-[-7.333vw] top-[-10.5vw] absolute w-[23.611vw] aspect-[1/1] md:max-lg:w-[44.141vw] md:max-lg:right-[-30vw] md:max-lg:">
|
||||
<motion.div
|
||||
animate={{ rotate: 360 }}
|
||||
transition={{ ease: "linear", duration: 50, repeat: Infinity }}
|
||||
className="w-[23.611vw] aspect-[1/1] relative flex items-center justify-center "
|
||||
>
|
||||
{Array.from({ length: 20 }).map((_, index) => (
|
||||
<div
|
||||
key={index}
|
||||
id="outer-team-circle"
|
||||
className="w-[2.847vw] aspect-[1/1] bg-blue-500 rounded-full absolute md:max-lg:w-[5.339vw] "
|
||||
>
|
||||
<img src={mock.src} alt="" />
|
||||
<style jsx>{`
|
||||
#outer-team-circle {
|
||||
transform: rotate(${index * 18}deg) translateX(10.5vw)
|
||||
rotate(-${index * 18}deg);
|
||||
}
|
||||
@media (min-width: 768px) and (max-width: 1440px) {
|
||||
#outer-team-circle {
|
||||
transform: rotate(${index * 18}deg) translateX(21.5vw)
|
||||
rotate(-${index * 18}deg);
|
||||
}
|
||||
}
|
||||
`}</style>
|
||||
</div>
|
||||
))}
|
||||
<motion.div
|
||||
animate={{ rotate: -360 }}
|
||||
transition={{ ease: "linear", duration: 20, repeat: Infinity }}
|
||||
className="w-[12.639vw] aspect-[1/1]"
|
||||
>
|
||||
{Array.from({ length: 8 }).map((_, index) => (
|
||||
<div
|
||||
key={index}
|
||||
id="inner-team-circle"
|
||||
className="w-[2.847vw] aspect-[1/1] bg-blue-500 rounded-full absolute md:max-lg:w-[5.339vw] "
|
||||
>
|
||||
<img src={mock.src} alt="" />
|
||||
<style jsx>{`
|
||||
#inner-team-circle {
|
||||
transform: translate(175%, 175%) rotate(${index * 45}deg)
|
||||
translateX(4.5vw) rotate(-${index * 45}deg);
|
||||
}
|
||||
@media (min-width: 768px) and (max-width: 1440px) {
|
||||
#inner-team-circle {
|
||||
transform: translate(69%, 69%) rotate(${index * 45}deg)
|
||||
translateX(10.5vw) rotate(-${index * 45}deg);
|
||||
}
|
||||
}
|
||||
`}</style>
|
||||
</div>
|
||||
))}
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function AboutTeam() {
|
||||
return (
|
||||
<div className="flex flex-col items-center">
|
||||
<h2
|
||||
className="font-medium text-[4.444vw] leading-[95%] tracking-[-0.02em] text-center mb-[1.667vw]
|
||||
md:max-lg:text-[5.208vw] md:max-lg:mb-[3.125vw]"
|
||||
>
|
||||
Мы объединили уже
|
||||
<span className="text-transparent bg-gradient-to-r from-[#6078F2] to-[#C868F5] bg-clip-text">
|
||||
{" "}
|
||||
более 60 высококвалифицированых специалистов{" "}
|
||||
<br className="md:max-lg:hidden" />
|
||||
</span>{" "}
|
||||
в своем офисе в Екатеринбурге
|
||||
</h2>
|
||||
<span className="headline1 text-[#7A7A7A] text-center w-[29.514vw] mb-[4.444vw] md:max-lg:w-[85.938vw] md:max-lg:mb-[6.25vw]">
|
||||
Используем только собственные силы,{" "}
|
||||
<br className="hidden md:max-lg:block" /> не передавая задачи на аутсорс
|
||||
</span>
|
||||
|
||||
<div
|
||||
className="w-full grid grid-rows-[18.611vw_18.611vw] gap-3 [grid-template-areas:'head_dev_pm'_'prod_dev_3d'] [grid-template-columns:15.486vw_1fr_1fr]
|
||||
md:max-lg:grid-rows-[34.115vw_42.839vw_34.115vw] md:max-lg:grid-cols-[37.5vw_8.073vw_47.135vw] md:max-lg:[grid-template-areas:'head_head_prod'_'dev_dev_dev'_'pm_3d_3d']"
|
||||
>
|
||||
<div
|
||||
className="bg-gradient-to-r from-[#222324] to-[#171819] rounded-[1.111vw] p-[2.222vw] [grid-area:head] flex flex-col items-start
|
||||
md:max-lg:p-[4.167vw] md:max-lg:rounded-[2.083vw]"
|
||||
>
|
||||
<img
|
||||
src={GD.src}
|
||||
alt=""
|
||||
className="w-[8.889vw] md:max-lg:w-[16.667vw] "
|
||||
/>
|
||||
<h3 className="mt-auto headline2 mb-[0.556vw] md:max-lg:mb-[1.042vw]">
|
||||
Георгий Уморин
|
||||
</h3>
|
||||
<span className="caption md:max-lg:text-[1.302vw]">
|
||||
Генеральный директор
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
className="bg-gradient-to-r from-[#222324] to-[#171819] rounded-[1.111vw] p-[2.222vw] [grid-area:dev] flex flex-col justify-between
|
||||
md:max-lg:p-[4.167vw] md:max-lg:rounded-[2.083vw] md:max-lg:flex-row-reverse "
|
||||
>
|
||||
<img
|
||||
src={devs.src}
|
||||
alt=""
|
||||
className="w-[34.514vw] md:max-lg:w-[60.677vw]"
|
||||
/>
|
||||
<div className="mt-auto space-y-[0.833vw]">
|
||||
<span className="line1 md:max-lg:text-[12.5vw]">11</span>
|
||||
<h3 className="headline2">
|
||||
сотрудников в отделе <br /> разработки
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="bg-gradient-to-r from-[#222324] to-[#171819] rounded-[1.111vw] p-[2.222vw] [grid-area:pm] flex items-end
|
||||
md:max-lg:p-[4.167vw] md:max-lg:rounded-[2.083vw]"
|
||||
>
|
||||
<div className="mt-auto space-y-[1.667vw]">
|
||||
<span className="line1 md:max-lg:text-[12.5vw]">3</span>
|
||||
<h3 className="headline2">
|
||||
PMa этим цирком <br /> руководят
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="bg-gradient-to-r from-[#222324] to-[#171819] rounded-[1.111vw] p-[2.222vw] [grid-area:prod] flex flex-col items-start
|
||||
md:max-lg:p-[4.167vw] md:max-lg:rounded-[2.083vw]"
|
||||
>
|
||||
<img
|
||||
src={PD.src}
|
||||
alt=""
|
||||
className="w-[8.889vw] md:max-lg:w-[16.667vw]"
|
||||
/>
|
||||
<h3 className="mt-auto headline2 mb-[0.556vw] md:max-lg:mb-[1.042vw]">
|
||||
Вячеслав Зернов
|
||||
</h3>
|
||||
<span className="caption md:max-lg:text-[1.302vw]">
|
||||
Директор по продукту
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
className="bg-gradient-to-r from-[#222324] to-[#171819] rounded-[1.111vw] p-[2.222vw] [grid-area:3d] flex items-end relative overflow-hidden
|
||||
md:max-lg:p-[4.167vw] md:max-lg:rounded-[2.083vw] md:max-lg:w-[56.771vw]"
|
||||
>
|
||||
<div className="mt-auto space-y-[0.833vw]">
|
||||
<span className="line1 md:max-lg:text-[12.5vw]">50+</span>
|
||||
<h3 className="headline2">
|
||||
сотрудников в отделе <br /> 3D-моделирования, сколько{" "}
|
||||
<br className="hidden md:max-lg:block" /> точно,{" "}
|
||||
<br className="md:max-lg:hidden" /> никто не считал
|
||||
</h3>
|
||||
</div>
|
||||
<TeamCarousel />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start w-full h-[18.611vw] mt-3 md:max-lg:h-[34.896vw]">
|
||||
<div
|
||||
className="w-[39.931vw] h-full rounded-[1.111vw] bg-gradient-to-r from-[#222324] to-[#171819] p-[2.222vw] flex justify-between
|
||||
md:max-lg:w-[59.375vw] md:max-lg:rounded-[2.083vw] md:max-lg:p-[4.167vw]"
|
||||
>
|
||||
<div className="mt-auto space-y-[0.833vw]">
|
||||
<span className="line1 md:max-lg:text-[12.5vw]">4</span>
|
||||
<h3 className="headline2">
|
||||
сотрудника <br /> в отделе дизайна
|
||||
</h3>
|
||||
</div>
|
||||
<img src={designers.src} alt="" className="h-full" />
|
||||
</div>
|
||||
<img
|
||||
src={cat.src}
|
||||
alt=""
|
||||
className="h-full scale-[1.2] mt-[1.111vw] -ml-[0.556vw] md:max-lg:mt-[2.083vw] md:max-lg:-ml-[1.04vw]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -8,7 +8,7 @@ import { getCompaniesCount } from "@/utils/getCompaniesCount";
|
||||
import { motion, useInView } from "framer-motion";
|
||||
import { useRef } from "react";
|
||||
|
||||
export function Statistics() {
|
||||
export function Statistics({ customTitle = false }: { customTitle?: boolean }) {
|
||||
const { data: count } = useGetCompaniesCountQuery();
|
||||
|
||||
const root = useRef<HTMLDivElement>(null);
|
||||
@@ -16,12 +16,20 @@ export function Statistics() {
|
||||
const inView = useInView(root, { margin: "-200px 0px 0px 0px", once: true });
|
||||
|
||||
return (
|
||||
<div className="lg:space-y-[4.444vw] md:max-lg:space-y-[6.25vw] space-y-[11.111vw] lg:mt-40 mt-[100px]">
|
||||
<Title>
|
||||
Мы разрабатываем
|
||||
<span className="text-gradient"> эффективный продукт,</span> которым
|
||||
пользуются уже {count !== undefined && getCompaniesCount(count)}
|
||||
</Title>
|
||||
<div
|
||||
className={
|
||||
customTitle
|
||||
? " mt-0"
|
||||
: "lg:space-y-[4.444vw] md:max-lg:space-y-[6.25vw] space-y-[11.111vw] lg:mt-40 mt-[100px]"
|
||||
}
|
||||
>
|
||||
{!customTitle && (
|
||||
<Title>
|
||||
Мы разрабатываем
|
||||
<span className="text-gradient"> эффективный продукт,</span> которым
|
||||
пользуются уже {count !== undefined && getCompaniesCount(count)}
|
||||
</Title>
|
||||
)}
|
||||
<div
|
||||
ref={root}
|
||||
className="grid lg:grid-cols-4 lg:grid-rows-2 grid-cols-2 max-md:grid-rows-3 lg:gap-3 md:max-lg:gap-3 gap-2 lg:aspect-[1400/462] md:max-lg:aspect-[736/834] aspect-[340/688]"
|
||||
@@ -65,7 +73,7 @@ export function Statistics() {
|
||||
<p className="text1">
|
||||
Время на подготовку рекламных материалов сокращается до
|
||||
</p>
|
||||
<p className="heading2 font-medium">
|
||||
<p className="font-medium heading2">
|
||||
<span className="line1">4</span>раз
|
||||
</p>
|
||||
<div className="absolute md:w-[13.438vw] w-[28.667vw] md:max-lg:bottom-12 md:max-lg:right-16 bottom-12 right-14 lg:hidden">
|
||||
|
||||
Reference in New Issue
Block a user