inmake/graff.estate
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

upd

Browse Source
This commit is contained in:
inmake
2023-12-05 18:24:45 +05:00
parent edcd51599c
commit f198ff9dfe
29 changed files with 632 additions and 559 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/App.tsx
+109 -67
View File
@@ -1,6 +1,5 @@
/* eslint-disable no-irregular-whitespace */
import "./App.css";
import LogoIcon from "./components/icons/LogoIcon";
import BlendingHeader from "./components/blendings/BlendingHeader";
import FeatureItem from "./components/FeatureItem";
// import BlendVR from "./components/blendings/BlendVR";
@@ -23,6 +22,7 @@ import VideoSliderMobile from "./components/VideoSliderMobile";
// import { isMobile } from "react-device-detect";
import IProject from "./types/IProject";
import api from "./utils/api";
import ArrowRightIcon from "./components/icons/ArrowRightIcon";
function App() {
const [selectedVideo, setSelectedVideo] = useState<string>(
@@ -53,7 +53,16 @@ function App() {
<div className="relative conatiner mx-auto 2xl:max-w-screen-2xl">
<div className="flex justify-between py-6 2xl:mb-28 xl:mb-[88px] sm:mb-12 mb-14">
<div>
<LogoIcon />
<img
src="/images/Logo.svg"
alt=""
className="sm:block hidden max-h-fit"
/>
<img
src="/images/LogoMobile.svg"
alt=""
className="sm:hidden block"
/>
</div>
<div className="flex sm:gap-8 gap-2">
<Button>
@@ -104,10 +113,9 @@ function App() {
<div className="flex flex-col 2xl:gap-16 xl:gap-10 gap-8 2xl:mb-40 sm:mb-[120px] mb-20">
<div className="grid xl:grid-cols-4 xl:gap-0 sm:gap-6 gap-4">
<div className="col-span-3">
<div className="col-span-full">
<Heading2>
Помогаем продавать
<br />
Помогаем продавать{" "}
<span style={{ WebkitTextFillColor: "#fff" }}>
проще и{" "}
<span
@@ -120,12 +128,32 @@ function App() {
</span>
</Heading2>
</div>
<p className="2xl:text-base text-sm">
Мы собрали статистику за 10 лет работы
<br />
с застройщиками, реализовав 31 проект
</p>
<div className="relative flex items-center gap-4 col-span-full h-[400px]">
<p className="2xl:text-2xl text-sm font-gilroy font-medium min-w-[496px] ">
Мы собрали статистику{" "}
<span className="text-gradient font-semibold">за 13 лет</span>{" "}
работы
<br />
с застройщиками,{" "}
<span className="text-gradient font-semibold">
реализовав 31 проект
</span>
</p>
<div className="">
<img
src="/images/Map.png"
alt=""
className="relative top-8 -z-10"
/>
</div>
</div>
</div>
<p className="text-gradient font-gilroy font-medium text-5xl w-fit">
Graff.estate
</p>
<div className="grid xl:grid-cols-4 sm:grid-cols-2 grid-cols-1 xl:gap-0 gap-3">
<div className="px-8 py-4 flex flex-col gap-4 border-l border-[#3D425C]">
<p className="2xl:text-base text-sm">На</p>
@@ -296,7 +324,76 @@ function App() {
<VideoSliderMobile />
</div>
<div className="relative grid grid-cols-2 gap-4 2xl:mb-40 sm:mb-[120px] mb-20">
<div className="relative 2xl:mb-40 sm:mb-[120px] mb-20">
<div className="grid grid-cols-4 mb-16">
<Heading2 className="col-span-3">
Graff.estate stream —{" "}
<span style={{ WebkitTextFillColor: "#fff" }}>
удаленная демонстрация жилого комплекса
</span>
</Heading2>
<p>
Высокий уровень графики и полное
<br />
погружение покупателя в процесс
<br />
выбора квартиры
</p>
</div>
<div className="relative mb-[120px]">
<img src="/images/Stream.jpg" alt="" />
<div className="absolute bottom-10 left-10">
<p className="flex flex-col gap-4 text-2xl font-gilroy font-medium">
<span>
Местоположение и устройство
<br />
значения не имеют
</span>
<span>Нужен только интернет</span>
</p>
</div>
</div>
<div className="flex justify-between mb-16">
<p className="text-5xl font-gilroy font-medium">
Демонстрация технологии
</p>
<Button icon={<ArrowRightIcon />}>Узнать больше</Button>
</div>
<div>
<StreamButton
icon="/icons/Revolution.svg"
title="МФК «Re:volution towers»"
location="Россия, Екатеринбург"
background="/images/stream/nks.jpg"
link="https://stream.graff.tech/?build=nksJukovaDev&location=a1"
/>
<StreamButton
icon="/icons/Residence.svg"
title="ЖК «Life Резиденция»"
location="Россия, Тюмень"
background="/images/stream/liferes.jpg"
link="https://stream.graff.tech/?build=lifeResidence&location=a1"
/>
<StreamButton
icon="/icons/Aivaz.svg"
title="ЖК «Айвазовский City»"
location="Россия, Тюмень"
background="/images/stream/aivaz.jpg"
link="https://stream.graff.tech/?build=Ivazowsky&location=a1"
/>
</div>
<div className="absolute -bottom-[2%] -right-[30%] -z-10 blur-[18px]">
<BlendStream />
</div>
</div>
{/* <div className="relative grid grid-cols-2 gap-4 2xl:mb-40 sm:mb-[120px] mb-20">
<div className="flex flex-col gap-8">
<Heading2>
Экскурсия
@@ -314,7 +411,7 @@ function App() {
<Button className="sm:block hidden">Записаться в шоу-рум</Button>
</div>
<div className=""></div>
</div>
</div> */}
<div className="grid grid-cols-2 gap-4 2xl:mb-40 sm:mb-[120px] mb-20">
<div>
@@ -342,61 +439,6 @@ function App() {
<img src="/images/Analysis.jpg" alt="" className="w-full" />
</div>
<div className="relative grid grid-cols-4 gap-4 mb-16">
<div className="col-span-2 flex flex-col justify-between">
<Heading2>
Graff.estate stream —
<br />
<span style={{ WebkitTextFillColor: "#fff" }}>
удаленная демонстрация
<br />
жилого комплекса
</span>
</Heading2>
<Button>Узнать больше</Button>
</div>
<div className="flex flex-col gap-12">
<p>
Высокий уровень графики и полное погружение покупателя в процесс
выбора квартиры
</p>
<img src="/images/Stream.jpg" alt="" />
</div>
<div>
<p>
Местоположение и устройство значения не имеют. Нужен только
интернет
</p>
</div>
<div className="absolute top-[50%] -translate-y-[50%] left-0 -z-10 blur-[30px]">
<BlendStream />
</div>
</div>
<div className="2xl:mb-40 sm:mb-[120px] mb-20">
<StreamButton
icon="/icons/Revolution.svg"
title="МФК «Re:volution towers»"
location="Россия, Екатеринбург"
background="/images/stream/nks.jpg"
link="https://stream.graff.tech/?build=nksJukovaDev&location=a1"
/>
<StreamButton
icon="/icons/Residence.svg"
title="ЖК «Life Резиденция»"
location="Россия, Тюмень"
background="/images/stream/liferes.jpg"
link="https://stream.graff.tech/?build=lifeResidence&location=a1"
/>
<StreamButton
icon="/icons/Aivaz.svg"
title="ЖК «Айвазовский City»"
location="Россия, Тюмень"
background="/images/stream/aivaz.jpg"
link="https://stream.graff.tech/?build=Ivazowsky&location=a1"
/>
</div>
<div className="relative flex flex-col gap-16 2xl:mb-40 sm:mb-[120px] mb-20">
<div className="flex flex-col gap-8">
<Heading2>
client/src/assets/fonts/Gilroy/Gilroy-Medium.eot
BIN
View File
Binary file not shown.
client/src/assets/fonts/Gilroy/Gilroy-Medium.ttf
BIN
View File
Binary file not shown.
client/src/assets/fonts/Gilroy/Gilroy-Medium.woff
BIN
View File
Binary file not shown.
client/src/assets/fonts/Gilroy/Gilroy-Medium.woff2
BIN
View File
Binary file not shown.
client/src/assets/fonts/Gilroy/Gilroy-Semibold.eot
BIN
View File
Binary file not shown.
client/src/assets/fonts/Gilroy/Gilroy-Semibold.ttf
BIN
View File
Binary file not shown.
client/src/assets/fonts/Gilroy/Gilroy-Semibold.woff
BIN
View File
Binary file not shown.
client/src/assets/fonts/Gilroy/Gilroy-Semibold.woff2
BIN
View File
Binary file not shown.
client/src/assets/fonts/Gilroy/Gilroy.css
+24
View File
@@ -0,0 +1,24 @@
@font-face {
font-family: 'Gilroy';
src: url('Gilroy-Medium.eot');
src: url('Gilroy-Medium.eot?#iefix') format('embedded-opentype'),
url('Gilroy-Medium.woff2') format('woff2'),
url('Gilroy-Medium.woff') format('woff'),
url('Gilroy-Medium.ttf') format('truetype');
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Gilroy';
src: url('Gilroy-Semibold.eot');
src: url('Gilroy-Semibold.eot?#iefix') format('embedded-opentype'),
url('Gilroy-Semibold.woff2') format('woff2'),
url('Gilroy-Semibold.woff') format('woff'),
url('Gilroy-Semibold.ttf') format('truetype');
font-weight: 600;
font-style: normal;
font-display: swap;
}
client/src/components/Button.tsx
+6 -4
View File
@@ -19,13 +19,15 @@ function Button({
<button
onClick={handleClick}
className={`group relative px-6 py-2 rounded-full ${
(color === "primary" && "bg-gradient") ||
(color === "secondary" && "outline outline-1 outline-[#3D425C]")
} flex justify-between items-center overflow-hidden w-fit ${className}`}
(color === "primary" ? "bg-gradient" : "") ||
(color === "secondary" ? "outline outline-1 outline-[#3D425C]" : "")
} ${
icon ? "pr-4" : ""
} flex justify-between gap-1 items-center overflow-hidden w-fit ${className}`}
>
<span className="group-hover:opacity-10 opacity-0 bg-black transition-opacity absolute top-0 left-0 w-full h-full"></span>
<span className="relative font-gilroy font-medium">{children}</span>
{icon}
<span className="relative">{icon}</span>
</button>
);
}
client/src/components/Calc.tsx
+16 -58
View File
@@ -260,7 +260,7 @@ function Calc() {
<div className="grid grid-cols-2">
<p
className={`2xl:text-5xl text-[32px] font-gilroy font-medium flex items-end gap-1.5 w-fit ${
isToolEnabled && "text-gradient"
isToolEnabled ? "text-gradient" : ""
}`}
>
<span className="leading-none">
@@ -296,7 +296,7 @@ function Calc() {
<div className="grid grid-cols-2">
<p
className={`2xl:text-5xl text-[32px] font-gilroy font-medium flex items-end gap-1.5 w-fit ${
isToolEnabled && "text-gradient"
isToolEnabled ? "text-gradient" : ""
}`}
>
<span className="leading-none">
@@ -304,7 +304,7 @@ function Calc() {
</span>
<span
className={`${
isToolEnabled && "text-gradient"
isToolEnabled ? "text-gradient" : ""
} 2xl:text-2xl text-xl leading-none`}
>
млн руб.
@@ -327,56 +327,6 @@ function Calc() {
<div className="2xl:px-8 2xl:py-6 px-6 py-4 border border-l-0 border-[#3D425C] flex flex-col gap-4">
<p className="text-sm">Статистика продаж</p>
<div className="flex flex-col 2xl:gap-3 gap-1.5">
{/* <div className="grid grid-cols-3 items-center gap-4">
<p className="w-fit 2xl:text-sm text-xs">100%</p>
<div className=" bg-[#212431] rounded-full flex justify-center">
<div className="2xl:p-3.5 p-2 bg-gradient rounded-full w-full">
<p className="text-center">{consultations}</p>
</div>
</div>
<p className="2xl:text-sm text-xs text-[#8088A7] whitespace-nowrap">
Консультаций в офисе
</p>
</div>
<div className="flex items-center gap-4">
<p className="w-[36px] 2xl:text-sm text-xs">
{isToolEnabled ? 48 : 30}%
</p>
<div className="w-[284px] bg-[#212431] rounded-full flex justify-center">
<div
className={`2xl:p-3.5 p-2 bg-gradient rounded-full transition-all w-[50%] ${
isToolEnabled ? "w-[60%]" : "w-[50%]"
}`}
>
<p className="text-center">
{isToolEnabled ? reservation : oldReservation}
</p>
</div>
</div>
<p className="2xl:text-sm text-xs text-[#8088A7] whitespace-nowrap">
Бронь квартиры
</p>
</div>
<div className="flex items-center gap-4">
<p className="w-[36px] 2xl:text-sm text-xs">
{isToolEnabled ? 42 : 30}%
</p>
<div className="w-[284px] bg-[#212431] rounded-full flex justify-center">
<div
className={`2xl:p-3.5 p-2 bg-gradient rounded-full transition-all ${
isToolEnabled ? "w-[32%]" : "w-[22%]"
}`}
>
<p className="text-center">
{isToolEnabled ? sales : oldSales}
</p>
</div>
</div>
<p className="2xl:text-sm text-xs text-[#8088A7]">Продажа</p>
</div> */}
<div className="flex gap-4">
<div className="flex flex-col 2xl:gap-3 gap-1.5 justify-around">
<p className="2xl:text-sm text-xs">100%</p>
@@ -389,14 +339,20 @@ function Calc() {
</div>
<div className="w-full flex flex-col 2xl:gap-3 gap-1.5 justify-around">
<div className="bg-[#212431] rounded-full flex justify-center">
<div className="bg-gradient 2xl:py-3.5 py-2 rounded-full w-full">
<div
className={`2xl:py-3.5 py-2 rounded-full w-full transition-all ${
isToolEnabled ? "bg-gradient" : "bg-[#52587A]"
}`}
>
<p className="text-center">{consultations}</p>
</div>
</div>
<div className="bg-[#212431] rounded-full flex justify-center">
<div
className={`bg-gradient 2xl:py-3.5 py-2 rounded-full ${
isToolEnabled ? "w-[60%]" : "w-[50%]"
className={`2xl:py-3.5 py-2 rounded-full transition-all ${
isToolEnabled
? "w-[60%] bg-gradient"
: "w-[50%] bg-[#52587A]"
}`}
>
<p className="text-center">
@@ -406,8 +362,10 @@ function Calc() {
</div>
<div className="bg-[#212431] rounded-full flex justify-center">
<div
className={`bg-gradient 2xl:py-3.5 py-2 rounded-full ${
isToolEnabled ? "w-[32%]" : "w-[22%]"
className={`2xl:py-3.5 py-2 rounded-full transition-all ${
isToolEnabled
? "w-[32%] bg-gradient"
: "w-[22%] bg-[#52587A]"
}`}
>
<p className="text-center">
client/src/components/ProjectCard.tsx
+1 -1
View File
@@ -48,7 +48,7 @@ function ProjectCard({
<ProgressPie value={stagePercentage} />
</div>
) : (
<div className="bg-gradient px-3 py-2 rounded-full w-fit">
<div className="bg-gradient py-2.5 px-4 rounded-full">
<p className="font-gilroy font-medium leading-none">
{releaseYear}
</p>
client/src/components/blendings/BlendStream.tsx
+368 -420
View File
File diff suppressed because it is too large Load Diff
client/src/components/blendings/BlendingCalc.tsx
-2
View File
@@ -1,5 +1,3 @@
import React from "react";
function BlendingCalc() {
return (
<svg
client/src/components/icons/LogoMobileIcon.tsx
View File
client/src/index.css
+1 -1
View File
@@ -1,5 +1,5 @@
@import url("https://fonts.googleapis.com/css2?family=Inter&display=swap");
@import url("https://gistcdn.githack.com/mfd/09b70eb47474836f25a21660282ce0fd/raw/e06a670afcb2b861ed2ac4a1ef752d062ef6b46b/Gilroy.css");
@import url("./assets/fonts/Gilroy/Gilroy.css");
@tailwind base;
@tailwind components;
client/src/stores/useModalStore.ts
-2
View File
@@ -4,13 +4,11 @@ import { create } from "zustand";
interface ModalState {
modal: ReactNode | null;
setModal: (modal: ReactNode) => void;
removeModal: () => void;
}
const useModalStore = create<ModalState>((set) => ({
modal: null,
setModal: (modal) => set({ modal }),
removeModal: set({ modal: null }),
}));
export default useModalStore;