This commit is contained in:
2024-03-21 18:16:42 +05:00
parent 2c2e512c39
commit a2a503d5d5
9 changed files with 394 additions and 21 deletions
+4
View File
@@ -21,6 +21,7 @@
"react-input-mask": "^2.0.4",
"react-rangeslider": "^2.2.0",
"react-swipeable": "^7.0.1",
"react-transition-group": "^4.4.5",
"usehooks-ts": "^3.0.1",
"zustand": "^4.5.2"
},
@@ -30,6 +31,9 @@
"@types/react-dom": "^18",
"@types/react-input-mask": "^3.0.5",
"@types/react-rangeslider": "^2.2.7",
"@types/react-swipeable": "^5.2.0",
"@types/react-swipeable-views": "^0.13.5",
"@types/react-transition-group": "^4.4.10",
"@typescript-eslint/eslint-plugin": "^7.2.0",
"@typescript-eslint/parser": "^7.2.0",
"@vitejs/plugin-react-swc": "^3.6.0",
+22 -1
View File
@@ -5,10 +5,14 @@
@tailwind components;
@tailwind utilities;
:root {
--color: #fff;
}
body {
font-family: "Inter", sans-serif;
background-color: #14161f;
color: #fff;
color: var(--color);
}
.font-gilroy {
@@ -22,6 +26,10 @@ body {
-webkit-text-fill-color: transparent;
}
.text-gradient-none {
-webkit-text-fill-color: var(--color);
}
.bg-gradient {
background: linear-gradient(87deg, #798fff 15%, #d375ff 100%);
}
@@ -109,3 +117,16 @@ body {
.feedback-field::placeholder {
@apply lg:text-base text-sm font-semibold text-[#77787d];
}
.entering {
opacity: 1;
}
.entered {
opacity: 1;
}
.exiting {
opacity: 0;
}
.exited {
opacity: 0;
}
+5 -2
View File
@@ -27,6 +27,7 @@ import VKIcon from "@components/icons/VKIcon";
import YouTubeIcon from "@components/icons/YouTubeIcon";
import TelegramIcon from "@components/icons/TelegramIcon";
import { IProject } from "../types/IProject";
import Histories from "@components/Histories";
export default function App() {
const [selectedVideo, setSelectedVideo] = useState<string>(
@@ -56,7 +57,7 @@ export default function App() {
return (
<div>
<div className="min-h-screen 2xl:px-10 xl:px-8 sm:px-6 px-4 overflow-x-clip">
<div className="relative conatiner mx-auto 2xl:max-w-screen-2xl">
<div className="relative container 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>
<img
@@ -151,7 +152,7 @@ export default function App() {
</div>
</div>
<div className="relative conatiner mx-auto 2xl:max-w-screen-2xl">
<div className="relative container mx-auto 2xl:max-w-screen-2xl">
<div className="flex flex-col 2xl:gap-16 xl:gap-10 gap-8 2xl:mb-[200px] sm:mb-[120px] mb-20">
<Heading2>
Продавайте недвижимость
@@ -365,6 +366,8 @@ export default function App() {
<VideoSliderMobile />
</div>
<Histories />
<div className="relative 2xl:mb-[200px] sm:mb-[120px] mb-20">
<div className="grid sm:grid-cols-2 sm:gap-4 gap-6 2xl:mb-16 xl:mb-10 sm:mb-12 mb-8">
<div className="flex flex-col gap-8 justify-between">
+1 -1
View File
@@ -40,7 +40,7 @@ function ProjectsPage() {
<div className="fixed top-0 left-0 z-10 p-4 bg-[#14161F] border-b border-white border-opacity-10 w-full shadow-2xl">
<Button onClick={handleClickCreateProject}>Добавить проект</Button>
</div>
<div className="conatiner mx-auto 2xl:px-10 xl:px-8 sm:px-6 px-4 2xl:max-w-screen-2xl mt-20">
<div className="container mx-auto 2xl:px-10 xl:px-8 sm:px-6 px-4 2xl:max-w-screen-2xl mt-20">
<div className="relative py-8 flex flex-col gap-8">
<div className="grid grid-cols-3 gap-4">
{projects.map((project, index) => (
+248
View File
@@ -0,0 +1,248 @@
import { createRef, useEffect, useLayoutEffect, useState } from "react";
import { useSwipeable } from "react-swipeable";
import ArrowLeftIcon from "./icons/ArrowLeftIcon";
import ArrowRightIcon from "./icons/ArrowRightIcon";
import { Transition } from "react-transition-group";
const CARD_COUNT = 3;
const videos = [
{
id: 1,
src: "videos/video.mp4",
title: "Вся информация о жилом комплексе на одном экране",
desc: "Инструмент продаж graff.estate для проекта LIFE RESIDENCE: новый подход к презентации недвижимости",
},
{
id: 2,
src: "videos/video.mp4",
title: "Говно",
desc: "Жопа",
},
{
id: 3,
src: "videos/video.mp4",
title: "И в",
desc: "прод",
},
];
const Histories = () => {
const [offset, setOffset] = useState(0);
const [videoRefs, setVideoRefs] = useState<
React.RefObject<HTMLVideoElement>[]
>([]);
const [videoProgress, setVideoProgress] = useState(0);
const [cardWidth, setCardWidth] = useState(0);
const handlers = useSwipeable({
onSwipedLeft: handleOnRightMove,
onSwipedRight: handleOnLeftMove,
trackMouse: true,
});
const [selectedVideo, setSelectedVideo] = useState<number>(0);
const [_document, setDocument] = useState<Document>();
function handleOnLeftMove(): void {
if (offset < 0) {
setOffset((prev) => prev + 1);
}
}
function handleOnRightMove(): void {
if (offset > -2) {
setOffset((prev) => prev - 1);
}
}
useEffect(() => {
setDocument(document);
setVideoRefs((elRefs) =>
Array.from({ length: CARD_COUNT }, (_, index) => index).map(
(_, i) => elRefs[i] || createRef()
)
);
}, []);
useEffect(() => {
if (!_document) return;
const clientWidth = _document.children[0].clientWidth;
if (clientWidth >= 1600) {
setCardWidth(420);
} else if (clientWidth >= 1280) {
setCardWidth(379);
} else if (clientWidth >= 640) {
setCardWidth(370);
} else {
setCardWidth(344);
}
}, [_document]);
useEffect(() => {
if (offset !== 0) {
setSelectedVideo(offset * -1);
} else {
setSelectedVideo(0);
}
}, [offset]);
useEffect(() => {
videoRefs.forEach((video, index) => {
if (!video.current) return;
if (index === selectedVideo) {
video.current.play();
} else {
video.current.pause();
}
});
}, [videoRefs, selectedVideo]);
useEffect(() => {
const currentVideoRef = videoRefs[selectedVideo];
if (!currentVideoRef || !currentVideoRef.current) return;
const progress = Math.round(
(100 / currentVideoRef.current.duration) *
currentVideoRef.current.currentTime
);
setVideoProgress(progress);
const interval = setInterval(() => {
if (!currentVideoRef || !currentVideoRef.current) return;
const progress =
(100 / currentVideoRef.current.duration) *
currentVideoRef.current.currentTime;
setVideoProgress(progress);
if (progress === 100) {
clearInterval(interval);
}
}, 1000);
return () => clearInterval(interval);
}, [selectedVideo, videoRefs]);
return (
<div className="container mx-auto 2xl:max-w-screen-2xl flex flex-col justify-center 2xl:mb-[200px] sm:mb-[120px] mb-20">
<div className="sm:border-b border-b-[#3D425C] 2xl:h-[760px] xl:h-[687px] sm:h-[656px] h-full">
<div className="flex sm:h-full h-fit sm:flex-row flex-col sm:w-full sm:mx-0 mx-auto">
<div className=" flex flex-col justify-between 2xl:min-w-[384px] xl:min-w-[308px] sm:min-w-[263px] sm:pb-6 xl:pb-10 sm:h-full">
<div className="2xl:pr-10 xl:pr-8 sm:pr-[37px]">
<h2 className="font-medium 2xl:text-[64px] xl:text-5xl text-[40px] leading-10 sm:mb-10 mb-6 font-gilroy">
<p className="from-[#798FFF] to-[#D375FF] bg-gradient-to-r bg-clip-text text-transparent">
Истории
</p>
<p>graff.estate</p>
</h2>
{videos.map((item, index) => (
<Transition
key={index}
in={Boolean(index === selectedVideo)}
timeout={300}
>
{(state) => (
<div
className={`absolute 2xl:w-[344px] xl:w-[276px] sm:w-[226px] w-[280px] transition-opacity duration-300 ${state}`}
>
<p className="font-semibold mb-4 2xl:text-xl xl:text-[16px] sm:block hidden">
{item.title}
</p>
<p className="font-normal 2xl:text-[16px] xl:text-[14px] sm:block hidden">
{item.desc}
</p>
</div>
)}
</Transition>
))}
</div>
<div className="gap-2 sm:flex hidden">
<button
className="p-4 border border-[#3D425C] rounded-full"
onClick={handleOnLeftMove}
>
<ArrowLeftIcon />
</button>
<button
className="p-4 border border-[#3D425C] rounded-full"
onClick={handleOnRightMove}
>
<ArrowRightIcon />
</button>
</div>
</div>
<div className="relative sm:border-l border-l-[#3D425C] sm:h-full h-[548px] w-full">
<div className="absolute overflow-x-clip h-full ">
<div {...handlers} className="absolute h-full w-full z-10" />
<div
className="flex gap-4 w-full h-full transition-all duration-300 ease-in-out 2xl:pl-10 xl:pl-8 sm:pl-3 xl:pb-10 sm:pb-[25px] "
style={{
transform: `translateX(${offset * cardWidth}px)`,
}}
>
{videos.map((video, index) => (
<div
key={video.id}
className={`relative 2xl:w-[404px] xl:w-[363px] sm:w-[354px] w-[328px] 2xl:h-[720px] xl:h-[647px] sm:h-[632px] h-[546px]`}
>
<video
ref={videoRefs[index]}
src={video.src}
muted
loop
playsInline
preload="metadata"
className="w-full h-full object-cover touch-none"
/>
<div
className={`absolute bottom-0 w-full h-1 bg-[#52587A] sm:block hidden transition-opacity duration-500 ${
offset === -1 * index ? "opacity-100" : "opacity-0"
}`}
>
<div
className="w-0 bg-white h-1 transition-[width] duration-500"
style={{ width: `${videoProgress}%` }}
></div>
</div>
</div>
))}
</div>
</div>
</div>
<div className="bg-[#212431] p-6 block sm:hidden mb-6">
<h2 className="font-semibold text-sm leading-[18px] pb-2">
Вся информация о жилом комплексе на одном экране
</h2>
<p className="text-[12px] leading-[18px]">
Инструмент продаж graff.estate для проекта LIFE RESIDENCE: новый
подход к презентации недвижимости
</p>
</div>
<div className="mx-auto flex gap-2 h-2 sm:hidden">
<div className="bg-[#a1a2a6] w-10 h-full rounded-full overflow-hidden">
<div
className="bg-white w-0 h-full rounded-full transition-all duration-500"
style={{ width: `${videoProgress}%` }}
></div>
</div>
{videos.map((video, index) => (
<div
key={video.id}
className="h-full w-2 rounded-full transition-all duration-300"
style={{
background: `${
selectedVideo === index ? "white" : "#a1a2a6"
}`,
}}
/>
))}
</div>
</div>
</div>
</div>
);
};
export default Histories;
+3 -9
View File
@@ -63,15 +63,9 @@ function VideoSliderMobile() {
const [activeIndex, setActiveIndex] = useState<number>(0);
const videoRefs = items.map(() => useRef<HTMLVideoElement>(null));
const handlers = useSwipeable({
onSwiped: (e) => {
if (e.dir === "Left") {
handleClickNext();
}
if (e.dir === "Right") {
handleClickPrev();
}
},
trackMouse: true,
onSwipedLeft: handleClickNext,
onSwipedRight: handleClickPrev,
});
function handleClickPrev() {
+38
View File
@@ -0,0 +1,38 @@
import InsertArrowIcon from "../icons/InsertArrowIcon";
const Winners = () => {
return (
<div className="sm:px-10 px-4 flex justify-center items-center sm:flex-row flex-col-reverse ">
<div className="flex justify-center items-center sm:w-1/2 xl:h-[607px] p-5">
<img src="images/award.png" alt="awards" className="h-full" />
</div>
<div className="flex flex-col justify-between sm:w-1/2 2xl:pl-[128px] xl:pl-[111px] sm:pl-[28px] pl-0 text-white 2xl:h-[469px] xl:h-[404px] sm:h-[400px] h-[377px] sm:pt-0 xl:p-8 py-8">
<div>
<h2 className="2xl:text-[64px] 2xl:leading-[64px] xl:text-5xl xl:leading-[48px] text-[40px] leading-10 xl:mb-8 sm:mb-6 mb-4">
<p className="from-[#798FFF] to-[#D375FF] bg-gradient-to-r bg-clip-text text-transparent">
Победители <br /> BuildUP 2023
</p>
в номинации IT
</h2>
<p className="font-semibold 2xl:text-xl 2xl:leading-6 text-[16px] leading-[19.2px] 2xl:max-w-[448px] xl:max-w-[395px] sm:max-w-[311px] max-w-[288px] text-wrap">
В 2023 году наш продукт для застройщиков graff.estate был признан
лучшим в категории IT на Акселераторе технологических стартапов от
лидеров в строительстве и девелопменте Build UP от Фонда «Сколково»
</p>
</div>
<div className="border-b border-b-[#52587A] w-fit">
<a
href="https://graff.tech/tpost/tsksafhgm1-mi-pobedili-na-buildup-2023-ot-fonda-sko"
target="_blank"
className="flex justify-center items-center gap-2 text-sm py-1"
>
<div>КАК ЭТО БЫЛО</div>
<InsertArrowIcon />
</a>
</div>
</div>
</div>
);
};
export default Winners;
+24 -6
View File
@@ -1,6 +1,10 @@
{
"compilerOptions": {
"lib": ["dom", "dom.iterable", "esnext"],
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"strict": true,
@@ -18,12 +22,26 @@
}
],
"paths": {
"@components/*": ["./src/components/*"],
"@components/*": [
"./src/components/*"
],
// "@types/*": ["./src/types/*"],
"@utils/*": ["./src/utils/*"],
"@stores/*": ["./src/stores/*"],
"@utils/*": [
"./src/utils/*"
],
"@stores/*": [
"./src/stores/*"
]
}
},
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
"exclude": ["node_modules"]
"include": [
"next-env.d.ts",
"**/*.ts",
"**/*.tsx",
".next/types/**/*.ts",
"dist/types/**/*.ts"
],
"exclude": [
"node_modules"
]
}
+49 -2
View File
@@ -19,6 +19,13 @@
dependencies:
regenerator-runtime "^0.14.0"
"@babel/runtime@^7.5.5", "@babel/runtime@^7.8.7":
version "7.24.1"
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.24.1.tgz#431f9a794d173b53720e69a6464abc6f0e2a5c57"
integrity sha512-+BIznRzyqBf+2wCTxcKE3wDjfGeCoVE61KSHGpkzqrLi8qxqFwBeUFyId2cxkTmm55fzDGnm0+yCxaxygrLUnQ==
dependencies:
regenerator-runtime "^0.14.0"
"@eslint-community/eslint-utils@^4.2.0", "@eslint-community/eslint-utils@^4.4.0":
version "4.4.0"
resolved "https://registry.yarnpkg.com/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz#a23514e8fb9af1269d5f7788aa556798d61c6b59"
@@ -333,6 +340,27 @@
dependencies:
"@types/react" "*"
"@types/react-swipeable-views@^0.13.5":
version "0.13.5"
resolved "https://registry.yarnpkg.com/@types/react-swipeable-views/-/react-swipeable-views-0.13.5.tgz#f9dc947b7424d34cade864185bfa831a818a45f6"
integrity sha512-ni6WjO7gBq2xB2Y/ZiRdQOgjGOxIik5ow2s7xKieDq8DxsXTdV46jJslSBVK2yoIJHf6mG3uqNTwxwgzbXRRzg==
dependencies:
"@types/react" "*"
"@types/react-swipeable@^5.2.0":
version "5.2.0"
resolved "https://registry.yarnpkg.com/@types/react-swipeable/-/react-swipeable-5.2.0.tgz#69d6088819f0c03b13eb3fd98bfe995ef311c105"
integrity sha512-aQMubLpV45W8fTQufnm5j8yxYVEp/d3JJkqpPr9xcRPQ6Q6MSJUdNpsaR2uogILSIFzrAisC8AqdR1JlvjuZMA==
dependencies:
react-swipeable "*"
"@types/react-transition-group@^4.4.10":
version "4.4.10"
resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.10.tgz#6ee71127bdab1f18f11ad8fb3322c6da27c327ac"
integrity sha512-hT/+s0VQs2ojCX823m60m5f0sL5idt9SO6Tj6Dg+rdphGPIeJbJ6CxvBYkgkGKrYeDjvIpKTR38UzmtHJOGW3Q==
dependencies:
"@types/react" "*"
"@types/react@*", "@types/react@^18":
version "18.2.66"
resolved "https://registry.yarnpkg.com/@types/react/-/react-18.2.66.tgz#d2eafc8c4e70939c5432221adb23d32d76bfe451"
@@ -975,6 +1003,14 @@ doctrine@^3.0.0:
dependencies:
esutils "^2.0.2"
dom-helpers@^5.0.1:
version "5.2.1"
resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-5.2.1.tgz#d9400536b2bf8225ad98fe052e029451ac40e902"
integrity sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==
dependencies:
"@babel/runtime" "^7.8.7"
csstype "^3.0.2"
eastasianwidth@^0.2.0:
version "0.2.0"
resolved "https://registry.yarnpkg.com/eastasianwidth/-/eastasianwidth-0.2.0.tgz#696ce2ec0aa0e6ea93a397ffcf24aa7840c827cb"
@@ -2404,7 +2440,7 @@ prelude-ls@^1.2.1:
resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"
integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==
prop-types@^15.8.1:
prop-types@^15.6.2, prop-types@^15.8.1:
version "15.8.1"
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@@ -2464,11 +2500,21 @@ react-rangeslider@^2.2.0:
classnames "^2.2.3"
resize-observer-polyfill "^1.4.2"
react-swipeable@^7.0.1:
react-swipeable@*, react-swipeable@^7.0.1:
version "7.0.1"
resolved "https://registry.yarnpkg.com/react-swipeable/-/react-swipeable-7.0.1.tgz#cd299f5986c5e4a7ee979839658c228f660e1e0c"
integrity sha512-RKB17JdQzvECfnVj9yDZsiYn3vH0eyva/ZbrCZXZR0qp66PBRhtg4F9yJcJTWYT5Adadi+x4NoG53BxKHwIYLQ==
react-transition-group@^4.4.5:
version "4.4.5"
resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.5.tgz#e53d4e3f3344da8521489fbef8f2581d42becdd1"
integrity sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==
dependencies:
"@babel/runtime" "^7.5.5"
dom-helpers "^5.0.1"
loose-envify "^1.4.0"
prop-types "^15.6.2"
react@^18:
version "18.2.0"
resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"
@@ -2673,6 +2719,7 @@ streamsearch@^1.1.0:
integrity sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg==
"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0:
name string-width-cjs
version "4.2.3"
resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==