mikhail_lanskikh/graff.estate-nextjs-updated
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fixes, again todo sliders...

Browse Source
This commit is contained in:
Lanskikh
2024-08-13 19:09:29 +05:00
parent dc7e3d8113
commit 6d9fd2a458
19 changed files with 179 additions and 204 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/img/pages/home/calc/chart_highlight.svg
+12
View File
@@ -0,0 +1,12 @@
<svg width="512" height="264" viewBox="0 0 512 264" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_f_3520_15055)">
<ellipse cx="71.3167" cy="236.909" rx="104.059" ry="67.6618" transform="rotate(-6.77723 71.3167 236.909)" fill="#5545AC"/>
</g>
<defs>
<filter id="filter0_f_3520_15055" x="-380.328" y="-179.405" width="903.29" height="832.628" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feGaussianBlur stdDeviation="174" result="effect1_foregroundBlur_3520_15055"/>
</filter>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 678 B

public/img/pages/home/calc/numbers_highlight.svg
+12
View File
@@ -0,0 +1,12 @@
<svg width="256" height="132" viewBox="0 0 256 132" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_f_3856_6199)">
<ellipse cx="212.927" cy="104.469" rx="104.059" ry="67.6618" transform="rotate(-6.77723 212.927 104.469)" fill="#5545AC"/>
</g>
<defs>
<filter id="filter0_f_3856_6199" x="-238.718" y="-311.845" width="903.29" height="832.628" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feGaussianBlur stdDeviation="174" result="effect1_foregroundBlur_3856_6199"/>
</filter>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 675 B

src/app/blog/[postId]/page.tsx
+1 -1
View File
@@ -28,7 +28,7 @@ export default function PostPage({
return (
post && (
<>
<div className="lg:pt-[68px] sm:pb-7 lg:px-10 sm:px-6 sm:pt-[76px] pt-12 px-4 pb-4 flex max-lg:flex-col justify-between sm:gap-4 gap-y-8 border-b border-[#3D425C]">
<div className="sm:pb-7 pb-4 flex max-lg:flex-col justify-between sm:gap-4 gap-y-8 border-b border-[#3D425C]">
<div className="min-w-[calc(25vw-56px)] flex lg:flex-col justify-between max-sm:flex-col-reverse gap-y-2">
<div className="flex flex-wrap gap-3">
{post.tags.map(tag => (
src/app/layout.tsx
+1 -1
View File
@@ -25,7 +25,7 @@ export default function RootLayout({
<html lang="en">
<body className="min-h-screen flex flex-col justify-between lg:px-6">
<DynamicHeader />
<main className="flex-1 lg:pt-40">{children}</main>
<main className="flex-1 lg:pt-[140px]">{children}</main>
<Feedback />
<Footer />
<ModalContainer />
src/components/Layout/Header.tsx
+1 -1
View File
@@ -32,7 +32,7 @@ export function Header() {
<header className="relative">
<nav className="flex items-stretch justify-between border-b border-[#3D425C] lg:min-h-[72px] min-h-16 -mx-6">
<div className="flex">
<div className="w-[25vw] lg:pl-10 pl-6 flex items-center">
<div className="w-[25vw] lg:pl-6 flex items-center">
<Link href={'/'}>
<ClassNameWrapper className="xl:hidden" element={<LogoIcon />} />
{width >= 1280 && <LogoWithTextIcon />}
src/components/pages/BlogPage/RelevantSlider.tsx
+1 -1
View File
@@ -14,7 +14,7 @@ export function RelevantSlider() {
const width = useWindowWidth();
return (
<div className="lg:py-[70px] sm:pt-[66px] sm:pb-14 py-14 overflow-hidden">
<div className="lg:py-[70px] sm:pt-[66px] sm:pb-14 py-14 overflow-hidden lg:-mb-[82px] -mb-[96px]">
<div className="flex justify-between sm:mb-10 mb-6 lg:px-10 sm:px-8 px-4">
<h2 className="lg:h2 h1 font-medium flex">Похожие статьи</h2>
<div className="flex gap-x-2 lg:py-1 self-end">
src/components/pages/MainPage/Calculator/Calculator.tsx
+26 -28
View File
@@ -178,12 +178,14 @@ export function Calculator() {
return (
<div className="bg-[url(/img/pages/home/stats/highlight.svg)d] bg-no-repeat bg-center border-t border-[#3D425C]">
<p className="accent font-medium py-16 max-w-screen-md m-auto">
Для прогнозирования экономического эффекта продукта мы изучили
отраслевую аналитику на рынке продаж новых квартир, отчеты об
использовании интерактивной презентации и собрали статистику за время
работы с застройщиками
</p>
<div className="grid grid-cols-4">
<p className="accent font-medium py-16 col-start-2 col-end-4 m-auto">
Для прогнозирования экономического эффекта продукта мы изучили
отраслевую аналитику на рынке продаж новых квартир, отчеты об
использовании интерактивной презентации и собрали статистику за время
работы с застройщиками
</p>
</div>
<div className="grid grid-cols-12 grid-rows-3">
<div className="flex flex-col items-stretch gap-y-12 col-span-3 row-span-full py-6 pr-4 border-y border-[#3D425C]">
<Descriptor title="калькулятор эффективности" />
@@ -272,7 +274,7 @@ export function Calculator() {
{(selectedRegion?.costPerSquare || 100).toLocaleString()}
</p>
</div>
<div className="p-6 flex flex-col justify-between col-start-8 col-end-10 row-start-2 row-end-3 border-[#3D425C] border-l border-b">
<div className="p-6 flex flex-col justify-between col-start-8 col-end-10 row-start-2 row-end-3 border-[#3D425C] border-l border-b bg-[url(/img/pages/home/calc/numbers_highlight.svg)] bg-no-repeat bg-cover">
<p className="m-caption">Срок реализации</p>
<p className="font-medium">
<span className="accent">
@@ -285,7 +287,7 @@ export function Calculator() {
</span>
</p>
</div>
<div className="p-6 flex flex-col justify-between col-start-8 col-end-10 row-start-3 border-[#3D425C] border-l border-b">
<div className="p-6 flex flex-col justify-between col-start-8 col-end-10 row-start-3 border-[#3D425C] border-l border-b bg-[url(/img/pages/home/calc/numbers_highlight.svg)] bg-no-repeat bg-cover">
<p className="m-caption">Месячный доход</p>
<p className="font-medium">
<span className="accent">
@@ -295,53 +297,49 @@ export function Calculator() {
</p>
</div>
<div className="col-span-4 row-span-2 px-6 py-12 grid grid-cols-11 grid-rows-3 2xl:gap-3 sm:gap-1.5 gap-2 border-[#3D425C] border-l border-b">
<p className="l-text col-span-1 row-span-1 self-center">100%</p>
<div className="col-span-4 row-span-2 2xl:px-6 xl:px-3 py-12 grid grid-cols-11 grid-rows-3 2xl:gap-3 sm:gap-1.5 gap-2 border-[#3D425C] border-l border-b bg-[url(/img/pages/home/calc/chart_highlight.svg)] bg-no-repeat bg-cover">
<p className="m-text col-span-1 row-span-1 self-center">100%</p>
<div className="bg-[#212431] rounded-full col-span-8">
<div
className={`2xl:py-3.5 py-2 rounded-full w-full transition-all ${
className={`2xl:py-3.5 py-2 rounded-full w-full h-full flex justify-center items-center transition-all ${
isToolEnabled ? 'bg-gradient' : 'bg-[#52587A]'
}`}
>
<p className="text-center self-center">{consultations}</p>
<p>{consultations}</p>
</div>
</div>
<p className="l-caption text-[#8088A7] text-wrap col-span-2 self-center">
Консультаций в офисе
<p className="m-caption text-[#8088A7] text-wrap col-span-2 self-center">
Консультации
</p>
<p className="l-text col-span-1 self-center">
<p className="m-text col-span-1 self-center">
{isToolEnabled ? 42 : 30}%
</p>
<div className="bg-[#212431] rounded-full w-full col-span-8 flex justify-center">
<div
className={`2xl:py-3.5 py-2 rounded-full transition-all ${
className={`2xl:py-3.5 py-2 rounded-full flex justify-center items-center transition-all ${
isToolEnabled ? 'w-[60%] bg-gradient' : 'w-[50%] bg-[#52587A]'
}`}
>
<p className="text-center self-center">
{isToolEnabled ? reservation : oldReservation}
</p>
<p>{isToolEnabled ? reservation : oldReservation}</p>
</div>
</div>
<p className="l-caption text-[#8088A7] text-wrap col-span-2 self-center">
Бронь квартиры
<p className="m-caption text-[#8088A7] text-wrap col-span-2 self-center">
Бронь
</p>
<p className="l-text col-span-1 self-center">
<p className="m-text col-span-1 self-center">
{isToolEnabled ? 42 : 30}%
</p>
<div className="bg-[#212431] rounded-full w-full col-span-8 flex justify-center">
<div
className={`2xl:py-3.5 py-2 rounded-full transition-all ${
className={`2xl:py-3.5 py-2 rounded-full flex justify-center items-center transition-all ${
isToolEnabled ? 'w-[60%] bg-gradient' : 'w-[50%] bg-[#52587A]'
}`}
>
<p className="text-center self-center">
{isToolEnabled ? sales : oldSales}
</p>
<p>{isToolEnabled ? sales : oldSales}</p>
</div>
</div>
<p className="l-caption text-[#8088A7] text-wrap col-span-2 self-center">
Продажа
<p className="m-caption text-[#8088A7] text-wrap col-span-2 self-center">
Продажи
</p>
</div>
src/components/pages/MainPage/Clients.tsx
+1 -1
View File
@@ -20,7 +20,7 @@ function MarqueeHalf() {
key={client.src}
alt=""
fill
className="object-contain !relative"
className="!relative object-contain"
/>
</div>
))}
src/components/pages/MainPage/Demoversions.tsx
+11 -11
View File
@@ -5,7 +5,7 @@ import Image from 'next/image';
export function Demoversions() {
return (
<div className="pt-8 grid grid-cols-12 gap-x-4 border-t border-[#3D425C] mb-[200px]">
<Descriptor title="Демоверсии" className="mt-6 col-span-1" />
<Descriptor title="Демоверсии" className="mt-6 col-span-2 self-start" />
<div className="col-start-4 col-span-9">
<div className="grid grid-cols-3 gap-4 mb-10">
<div className="space-y-[50px] p-6 bg-[url(/img/pages/home/stats/highlight.svg)] bg-cover bg-center bg-no-repeat">
@@ -25,40 +25,40 @@ export function Demoversions() {
</div>
<div className="space-y-[50px] p-6 bg-[url(/img/pages/home/stats/highlight.svg)] bg-cover bg-center bg-no-repeat">
<Image
src={'/img/pages/home/demoversions/upside_towers.png'}
src={'/img/pages/home/demoversions/revolution_towers.png'}
width={164}
height={164}
alt={''}
/>
<div className="flex justify-between items-end">
<div className="space-y-1">
<h4 className="h4 font-medium">Upside Towers</h4>
<p className="m-text">Россия, Москва</p>
<h4 className="h4 font-medium">Re:volution Towers</h4>
<p className="m-text">Россия, Екатеринбург</p>
</div>
<ArrowMoreIcon />
</div>
</div>
<div className="space-y-[50px] p-6 bg-[url(/img/pages/home/stats/highlight.svg)] bg-cover bg-center bg-no-repeat">
<Image
src={'/img/pages/home/demoversions/upside_towers.png'}
src={'/img/pages/home/demoversions/ayvasovsky.png'}
width={164}
height={164}
alt={''}
/>
<div className="flex justify-between items-end">
<div className="space-y-1">
<h4 className="h4 font-medium">Upside Towers</h4>
<p className="m-text">Россия, Москва</p>
<h4 className="h4 font-medium">Айвазовский City</h4>
<p className="m-text">Россия, Тюмень</p>
</div>
<ArrowMoreIcon />
</div>
</div>
</div>
<p className="col-span-6 max-w-screen-md accent font-medium">
Местоположение и устройство не имеют значения. Для демонстрации нужен
только интернет
</p>
</div>
<p className="col-start-4 col-span-6 accent font-medium">
Местоположение и устройство не имеют значения. Для демонстрации нужен
только интернет
</p>
</div>
);
}
src/components/pages/MainPage/ProjectManagment.tsx
+6 -4
View File
@@ -39,10 +39,12 @@ export function ProjectManagment() {
alt={''}
className="!relative"
/>
<p className="accent font-medium max-w-screen-md m-auto">
Полученный отчет позволяет сделать процесс демонстрации
жилого комплекса еще эффективнее
</p>
<div className="grid grid-cols-4">
<p className="accent font-medium m-auto col-start-2 col-end-4">
Полученный отчет позволяет сделать процесс демонстрации
жилого комплекса еще эффективнее
</p>
</div>
</div>
</div>
);
src/components/pages/MainPage/Projects.tsx
+4 -4
View File
@@ -11,8 +11,8 @@ import Link from 'next/link';
export function Projects() {
return (
<div>
<div className="border-y border-[#3D425C] py-6 flex justify-between items-end">
<div className="space-y-6">
<div className="border-y border-[#3D425C] py-6 grid grid-cols-4">
<div className="space-y-6 col-start-1 col-span-2">
<Descriptor title="Проекты" />
<p className="accent font-medium max-w-[42vw]">
За <span className="text-gradient">13 лет</span> работы мы
@@ -23,13 +23,13 @@ export function Projects() {
</div>
<Link
href={'/projects'}
className="px-6 py-4 flex justify-between items-center rounded-full border border-[#3D425C] min-w-[23vw]"
className="px-6 py-4 flex justify-between items-center rounded-full border border-[#3D425C] col-start-4 self-end"
>
Все проекты{' '}
<ClassNameWrapper className="w-8 h-8" element={<ArrowMoreIcon />} />
</Link>
</div>
<div className="py-20 grid grid-cols-12 grid-rows-[554px_286px_554px] gap-4">
<div className="py-20 grid grid-cols-12 grid-rows-[34.625vw_17.875vw_34.625vw] gap-4">
<ProjectCard
city="Москва"
company="Upside Development"
src/components/pages/MainPage/Showreel.tsx
+11 -33
View File
@@ -4,11 +4,11 @@ import { LoadingIcon } from '@/components/icons/LoadingIcon';
import { PauseIcon } from '@/components/icons/PauseIcon';
import { PlayIcon } from '@/components/icons/PlayIcon';
import { ClassNameWrapper } from '@/hocs/ClassNameWrapper';
import { useCallback, useEffect, useRef, useState } from 'react';
import { useRef, useState } from 'react';
import { useHover } from 'usehooks-ts';
export function Showreel() {
const [isPlaying, setIsPlaying] = useState(true);
const [hovered, setHovered] = useState(false);
const [isBuffering, setIsBuffering] = useState(false);
function handleOnPlaying() {
@@ -22,28 +22,7 @@ export function Showreel() {
const ref = useRef<HTMLDivElement>(null);
const videoRef = useRef<HTMLVideoElement>(null);
const addMouseOut = useCallback(
() =>
ref.current?.addEventListener('mouseout', () => setHovered(isPlaying)),
[isPlaying],
);
const removeMouseOut = useCallback(
() =>
ref.current?.removeEventListener('mouseout', () => setHovered(isPlaying)),
[isPlaying],
);
useEffect(() => {
const video = ref.current;
video?.addEventListener('mouseover', () => setHovered(true));
addMouseOut();
return () => {
video?.removeEventListener('mouseover', () => setHovered(true));
removeMouseOut();
};
}, [isPlaying, addMouseOut, removeMouseOut]);
const hovered = useHover(ref);
return (
<div className="lg:mb-[200px]">
@@ -54,11 +33,11 @@ export function Showreel() {
muted
autoPlay
loop
className={'w-full object-cover '}
className="w-full object-cover"
onPlaying={handleOnPlaying}
onWaiting={handleOnWaiting}
/>
{hovered && (
{(hovered || !isPlaying) && (
<button
onClick={() => {
if (!isPlaying) {
@@ -69,13 +48,12 @@ export function Showreel() {
setIsPlaying(false);
}
}}
className="absolute z-30 mx-auto p-8 rounded-full border"
className="absolute z-10 mx-auto p-8 rounded-full border"
>
{isPlaying ? (
<ClassNameWrapper className="w-10 h-10" element={<PauseIcon />} />
) : (
<ClassNameWrapper className="w-10 h-10" element={<PlayIcon />} />
)}
<ClassNameWrapper
className="w-10 h-10"
element={isPlaying ? <PauseIcon /> : <PlayIcon />}
/>
</button>
)}
@@ -92,7 +70,7 @@ export function Showreel() {
element={<LoadingIcon />}
/>
</span>
<span className="">Загружаем шоурил...</span>
<span>Загружаем шоурил...</span>
</div>
</div>
</div>
src/components/pages/MainPage/Statistics.tsx
+33 -54
View File
@@ -25,7 +25,7 @@ export function Statistics() {
src={'/img/pages/home/stats/map.jpg'}
alt={''}
fill
className="!static object-cover"
className="!relative object-cover"
/>
</div>
<div className="col-span-1 py-10 flex flex-col justify-between border-b border-r border-[#3D425C]">
@@ -36,103 +36,82 @@ export function Statistics() {
</p>
</div>
<div className="col-span-3 py-4 pl-4 gap-4 border-b border-[#3D425C] grid grid-cols-3 grid-rows-2">
<div className="p-6 aspect-[376/250] flex flex-col bg-[url(/img/pages/home/stats/highlight.svg)] bg-cover bg-no-repeat">
<div className="p-6 aspect-[376/250] bg-[url(/img/pages/home/stats/highlight.svg)] bg-cover bg-no-repeat flex flex-col">
<p className="m-text">
Конверсия из консультации в бронирование <br /> увеличивается на
Конверсия из консультации в бронирование увеличивается на
</p>
<div className="flex flex-1 relative">
<div className="aspect-[328/158] relative bg-[url(/img/pages/home/stats/increasing.svg)] bg-[length:53.65%_77.53%] bg-[left_12.5%_bottom_2.5%] bg-no-repeat flex-1">
<p
className="font-bold absolute -bottom-[5px] text-[#52587A]"
className="font-bold text-sm absolute -bottom-[5px] left-px text-[#52587A]"
style={{ fontFamily: manrope.style.fontFamily }}
>
30%
</p>
<p
className="font-bold absolute top-[7px] left-[202px] text-[#798FFF]"
className="opacity-50 font-bold text-sm absolute top-[4.43%] left-[55.58%] text-[#798FFF]"
style={{ fontFamily: manrope.style.fontFamily }}
>
48%
</p>
<Image
src={'/img/pages/home/stats/increasing.svg'}
width="176"
height="122"
alt={''}
className="bottom-1 left-10 max-h-[122px] absolute"
/>
<p className="h1 self-end absolute right-0">
18<span className="h3 font-medium">%</span>
<p className="h1 absolute font-medium bottom-0 right-0">
18<span className="h3">%</span>
</p>
</div>
</div>
<div className="p-6 flex flex-col aspect-[376/250] bg-[url(/img/pages/home/stats/highlight.svg)] bg-cover bg-no-repeat">
<div className="p-6 aspect-[376/250] bg-[url(/img/pages/home/stats/highlight.svg)] bg-cover bg-no-repeat flex flex-col">
<p className="m-text">
Конверсия из консультации в бронирование <br /> увеличивается на
Конверсия из консультации в бронирование увеличивается на
</p>
<div className="flex flex-1 relative">
<div className="aspect-[328/158] relative bg-[url(/img/pages/home/stats/increasing.svg)] bg-[length:53.65%_77.53%] bg-[left_12.5%_bottom_2.5%] bg-no-repeat flex-1">
<p
className="font-bold absolute -bottom-[5px] text-[#52587A]"
className="font-bold text-sm absolute -bottom-[5px] left-px text-[#52587A]"
style={{ fontFamily: manrope.style.fontFamily }}
>
30%
</p>
<p
className="font-bold absolute top-[7px] left-[202px] text-[#798FFF]"
className="opacity-50 font-bold text-sm absolute top-[4.43%] left-[55.58%] text-[#798FFF]"
style={{ fontFamily: manrope.style.fontFamily }}
>
42%
</p>
<Image
src={'/img/pages/home/stats/increasing.svg'}
width="176"
height="122"
alt={''}
className="bottom-1 left-10 max-h-[122px] absolute"
/>
<p className="h1 self-end absolute right-0">
12<span className="h3 font-medium">%</span>
<p className="h1 absolute font-medium bottom-0 right-0">
12<span className="h3">%</span>
</p>
</div>
</div>
<div className="flex flex-col p-6 aspect-[376/250] bg-[url(/img/pages/home/stats/highlight.svg)] bg-cover bg-no-repeat overflow-hidden">
<p className="m-text">
Время реализации проекта <br /> сокращается до
</p>
<div className="relative flex h-full justify-end">
<div className="p-6 aspect-[376/250] bg-[url(/img/pages/home/stats/highlight.svg)] bg-cover bg-no-repeat relative overflow-hidden flex flex-col">
<p className="m-text">Время реализации проекта сокращается до</p>
<div className="relative aspect-[328/158] flex items-end flex-1">
<Image
src={'/img/pages/home/stats/building.png'}
width={85}
height={238}
alt={''}
className="absolute left-[23px] -bottom-6"
fill
className="max-w-[22.6%] max-h-[95.2%] ml-[7%] mt-[10%]"
/>
<Image
src={'/img/pages/home/stats/building.png'}
width={85}
height={238}
className="absolute left-[79px] -bottom-[calc(50%-16px)]"
alt={''}
fill
className="max-w-[22.6%] max-h-[95.2%] ml-[24%] mt-[30.8%]"
/>
<p className="relative -bottom-0.5 h1 font-medium self-end">
2<span className="h3 font-medium"> раз</span>
<p className="absolute bottom-0 right-0 h1 font-medium">
2<span className="h3"> раз</span>
</p>
</div>
</div>
<div className="flex flex-col justify-between p-6 aspect-[376/250] relative bg-[url(/img/pages/home/stats/highlight.svg)] bg-cover bg-no-repeat overflow-hidden">
<div className="p-6 aspect-[376/250] relative bg-[url(/img/pages/home/stats/highlight.svg),url(/img/pages/home/stats/adv.png)] bg-[length:100%,65%_75%] bg-[position:center,left_bottom] bg-no-repeat overflow-hidden flex flex-col">
<p className="m-text">
Время на подготовку рекламных <br /> материалов сокращается до
</p>
<Image
src={'/img/pages/home/stats/adv.png'}
width={263}
height={223}
alt={''}
className="absolute left-0 bottom-0"
/>
<p className="h1 font-medium self-end">
4<span className="h3 font-medium"> раз</span>
Время на подготовку рекламных материалов сокращается до
</p>
<div className="aspect-[328/158] relative flex-1">
<p className="h1 font-medium absolute bottom-0 right-0">
4<span className="h3"> раз</span>
</p>
</div>
</div>
</div>
</div>
src/components/pages/MainPage/Technology.tsx
+26 -22
View File
@@ -6,33 +6,37 @@ import Link from 'next/link';
export function Technology() {
return (
<div className="pt-1 flex flex-col items-center lg:max-w-screen-md m-auto">
<div className="flex flex-col items-center m-auto border-y border-[#3D425C]">
<div className="h-[172px] flex flex-col items-center mb-[76px]">
<div className="w-px bg-[#3D425C] flex-1" />
<PlusIcon />
</div>
<p className="accent mb-16 font-medium">
Уникальная технология удаленной демонстрации дает возможность
презентовать объект покупателю из любой точки мира
</p>
<Image
src={'/img/pages/home/technology/Content.png'}
fill
alt={''}
className="!relative max-w-screen-md max-h-[417px] mb-10 rounded-lg border-[7.31px][border-image:linear-gradient(360deg,#14161F,#ffffff)_3_linear-gradient(360deg,#282A33,#32343D)_3]"
/>
<div className="flex justify-between items-start">
<h4 className="h4 font-medium w-2/3">
Высокий уровень графики и полное погружение покупателя в процесс
выбора квартиры
</h4>
<Link href={'/'} className="flex gap-1 items-center">
<p className="btn-text font-medium text-[#9299BD]">О технологии</p>
<ClassNameWrapper
className="text-[#9299BD]"
element={<ArrowMoreIcon />}
<div className="grid grid-cols-4">
<p className="accent mb-16 font-medium col-start-2 col-end-4">
Уникальная технология удаленной демонстрации дает возможность
презентовать объект покупателю из любой точки мира
</p>
<div className="col-start-2 col-end-4 rounded-lg [box-shadow:1.04px_1.04px_4.18px_0px_rgba(45,79,0,0.3)]">
<Image
src={'/img/pages/home/technology/Content.png'}
fill
alt={''}
className="!relative rounded-lg border-[8.36px] border-transparent [background:linear-gradient(72.18deg,#575A6C_1.53%,#616476_98.43%)_border-box] [-webkit-mask:linear-gradient(#fff_0_0)_padding-box,linear-gradient(#fff_0_0)] [-webkit-mask-composite:xor]"
/>
</Link>
</div>
<div className="flex justify-between items-start col-start-2 col-end-4 mt-10">
<h4 className="h4 font-medium w-2/3">
Высокий уровень графики и полное погружение покупателя в процесс
выбора квартиры
</h4>
<Link href={'/'} className="flex gap-1 items-center">
<p className="btn-text font-medium text-[#9299BD]">О технологии</p>
<ClassNameWrapper
className="text-[#9299BD]"
element={<ArrowMoreIcon />}
/>
</Link>
</div>
</div>
<div className="h-[172px] flex flex-col items-center mt-[76px]">
<PlusIcon />
src/components/pages/MainPage/Winners.tsx
+5 -5
View File
@@ -6,8 +6,8 @@ import Link from 'next/link';
export function Winners() {
return (
<div className="m-auto max-w-screen-md py-40 space-y-4">
<Title className="text-[96px]">
<div className="grid grid-cols-4 py-40 gap-y-4">
<Title className="text-[96px] col-start-2 col-span-2">
<span className="text-gradient block">Победители</span>
<span className="text-gradient text-right block">BuildUP 2023</span>
<span className="block">в номинации IT</span>
@@ -15,15 +15,15 @@ export function Winners() {
<Image
src={'/img/pages/home/winners/nomination.png'}
fill
className="!relative"
className="!relative col-start-2 col-span-2"
alt={''}
/>
<p className="accent font-medium mb-2">
<p className="accent font-medium mb-2 col-start-2 col-span-2">
В 2023 году наш продукт для застройщиков GRAFF.estate был признан лучшим
в категории IT на Акселераторе технологических стартапов от лидеров в
строительстве и девелопменте Build UP от Фонда «Сколково»
</p>
<Link href={'/'} className="flex gap-x-1 py-2 w-fit">
<Link href={'/'} className="flex gap-x-1 py-2 w-fit col-start-2">
<p className="text-[#9299BD] font-medium btn-text self-center">
Как это было
</p>
src/consts/reviews.json
+2 -2
View File
@@ -1,7 +1,7 @@
[
{
"image": "/img/pages/home/reviews/1.png",
"text": "«Эффективность инструмента была подтверждена буквально в первый день после его внедрения.»",
"text": "«Эффективность инструмента была подтверждена буквально в первый день после его внедрения»",
"author": "Егор Бобров, Коммерческий директор авторского квартала «Машаров»"
},
{
@@ -11,7 +11,7 @@
},
{
"image": "/img/pages/home/reviews/3.jpg",
"text": "«Одним из преимуществ инструмента является возможность посмотреть 3D-модель квартиры с готовым дизайнерским ремонтом и оценить видовые характеристиками, изменяя время суток (день или ночь)»",
"text": "«Клиенты особенно ценят возможность легко выбрать квартиру с помощью 3D-модель жилого комплекса»",
"author": "Алина Веселова, Ведущий специалист отдела продаж"
}
]
src/hocs/ClassNameWrapper.tsx
+1 -1
View File
@@ -16,7 +16,7 @@ export function ClassNameWrapper({ element, className }: Props) {
ref.current?.children
.item(0)
?.classList.add(...className.split(' ').filter(Boolean));
}, [className]);
}, [className, element]);
return <div ref={ref}>{element}</div>;
}
src/ui/LineThrow.tsx
+1 -2
View File
@@ -6,9 +6,8 @@ export function LineThrow({
}: PropsWithChildren<{ className?: string }>) {
return (
<span
className={`line-through decoration-white text-[#52587A] + ${className}`}
className={'line-through decoration-white text-[#52587A]' + className}
>
{' '}
{children}
</span>
);
src/ui/SliderWithScaling.tsx
+24 -33
View File
@@ -37,15 +37,18 @@ export function SliderWithScaling<T>({
const [itemRef, scale] = useAnimate<HTMLDivElement>();
const [slide, setSlide] = useState(0);
const [sliderOffset, setSliderOffset] = useState(baseoffset);
const [order, dispatch] = useReducer(
(state: typeof slides, action: 'prev' | 'next') => {
switch (action) {
case 'prev':
setSlide(slide => (slide === 0 ? slides.length - 1 : slide - 1));
setSliderOffset(2 * baseoffset);
return [state[state.length - 3], ...state.slice(0, -1)];
case 'next':
setSlide(slide => (slide === slides.length - 1 ? 0 : slide + 1));
setSliderOffset(0);
return [...state.slice(1), state[2]];
default:
return state;
@@ -54,13 +57,6 @@ export function SliderWithScaling<T>({
[slides[slides.length - 1], ...slides, slides[0]],
);
useEffect(() => {
console.log(
sliderRef.current.children.item(0)?.children.item(0)?.clientWidth,
sliderRef.current.children.item(0)?.children.item(0)?.clientHeight,
);
}, [sliderRef]);
const nextSlide = async () => {
await scale(
itemRef.current!,
@@ -69,23 +65,21 @@ export function SliderWithScaling<T>({
minHeight,
},
{ duration: 0.5 },
).then(() => {
dispatch('next');
});
await move(
sliderRef.current!,
{ transform: `translateX(0px)` },
{ duration: 0.000001 },
);
await move(
sliderRef.current!,
{
transform: `translateX(${baseoffset}px)`,
},
{
duration: 0.5,
},
);
)
.then(async () => {
dispatch('next');
console.log(sliderOffset);
move(
sliderRef.current!,
{
transform: `translateX(${baseoffset}px)`,
},
{
duration: 0.5,
},
);
})
.then(() => setSliderOffset(baseoffset));
};
const prevSlide = async () => {
@@ -96,14 +90,7 @@ export function SliderWithScaling<T>({
minHeight,
},
{ duration: 0.5 },
).then(() => {
dispatch('prev');
});
await move(
sliderRef.current!,
{ transform: `translateX(${2 * baseoffset}px)` },
{ duration: 0.000001 },
);
).then(() => dispatch('prev'));
await move(
sliderRef.current!,
{
@@ -123,6 +110,10 @@ export function SliderWithScaling<T>({
touchEventOptions: { passive: false },
});
useEffect(() => {
console.log(sliderRef.current.style.transform);
}, [sliderRef]);
return (
<div className={'flex flex-col relative ' + className}>
<div className="flex items-center justify-between mb-10">
@@ -133,7 +124,7 @@ export function SliderWithScaling<T>({
<motion.div
ref={sliderRef}
className={`flex items-${alignItems} gap-x-4 -mr-6 relative select-none`}
initial={{ transform: `translateX(${baseoffset}px)` }}
style={{ transform: `translateX(${sliderOffset}px)` }}
>
{order.map((slide, index) => (
<SlideElement