778 lines
34 KiB
TypeScript
778 lines
34 KiB
TypeScript
/* eslint-disable no-irregular-whitespace */
|
||
import './App.css';
|
||
import 'react-rangeslider/lib/index.css';
|
||
import './components/RangeSlider.css';
|
||
import IProject from './types/IProject';
|
||
import api from './utils/api';
|
||
import { useEffect, useState } from 'react';
|
||
import FeatureItem from './components/FeatureItem';
|
||
import StreamButton from './components/StreamButton';
|
||
import ProjectCard from './components/ProjectCard';
|
||
import ExampleCard from './components/ExampleCard';
|
||
import FeatureVideoViewBox from './components/FeatureVideoViewBox';
|
||
import Button from './components/Button';
|
||
import Heading2 from './components/Headings/Heading2';
|
||
import VideoSliderMobile from './components/VideoSliderMobile';
|
||
// import { isMobile } from "react-device-detect";
|
||
import FeedbackForm from './components/FeedbackForm';
|
||
import useModalStore from './stores/useModalStore';
|
||
import FeedbackModal from './components/modals/FeedbackModal';
|
||
import ModalContainer from './components/ModalContainer';
|
||
import MoreProjectButton from './components/MoreProjectButton';
|
||
import MailIcon from './components/icons/MailIcon';
|
||
import PhoneIcon from './components/icons/PhoneIcon';
|
||
import VKIcon from './components/icons/VKIcon';
|
||
import YouTubeIcon from './components/icons/YouTubeIcon';
|
||
import TelegramIcon from './components/icons/TelegramIcon';
|
||
|
||
function App() {
|
||
const [selectedVideo, setSelectedVideo] = useState<string>(
|
||
'/videos/features/virtual_tour.mp4'
|
||
);
|
||
const [projects, setProjects] = useState<IProject[]>([]);
|
||
const [setModal] = useModalStore((state) => [state.setModal]);
|
||
const [isShownAllProjects, setIsShownAllProjects] = useState<boolean>(false);
|
||
const [isBuffering, setIsBuffering] = useState(true);
|
||
|
||
async function getProjects() {
|
||
try {
|
||
const projects: IProject[] = await api.get('projects').json();
|
||
|
||
setProjects(projects);
|
||
} catch (error) {
|
||
if (error instanceof Error) {
|
||
alert(`Error: ${error.message}`);
|
||
}
|
||
}
|
||
}
|
||
|
||
useEffect(() => {
|
||
getProjects();
|
||
}, []);
|
||
|
||
return (
|
||
<div>
|
||
<div className='min-h-screen px-4 2xl:px-10 xl:px-8 sm:px-6 overflow-x-clip'>
|
||
<div className='relative mx-auto conatiner 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
|
||
src='/images/Logo.svg'
|
||
alt=''
|
||
className='hidden sm:block max-h-fit'
|
||
/>
|
||
<img
|
||
src='/images/LogoMobile.svg'
|
||
alt=''
|
||
className='block sm:hidden'
|
||
/>
|
||
</div>
|
||
<div className='flex gap-2 sm:gap-8'>
|
||
<Button onClick={() => setModal(<FeedbackModal />)}>
|
||
<span className='hidden sm:inline'>Submit a request</span>
|
||
<span className='inline sm:hidden'>Contact us</span>
|
||
</Button>
|
||
|
||
{/* <div className="flex gap-1">
|
||
<button className="flex items-center justify-center w-12 h-10 px-3 font-medium rounded-full border-gradient font-gilroy">
|
||
<span className="absolute">RU</span>
|
||
</button>
|
||
<button className="flex items-center justify-center w-12 h-10 px-3 font-medium leading-none rounded-full font-gilroy">
|
||
<span className="absolute">EN</span>
|
||
</button>
|
||
</div> */}
|
||
</div>
|
||
</div>
|
||
|
||
<div className='flex flex-col 2xl:gap-14 gap-6 2xl:mb-[120px] xl:mb-20 sm:mb-12 mb-8'>
|
||
<h1 className='max-w-[1255px] font-gilroy 2xl:text-8xl sm:text-[64px] text-[40px] leading-none text-gradient font-medium'>
|
||
Interactive sales tool
|
||
<br />
|
||
<span style={{ WebkitTextFillColor: '#fff' }}>
|
||
for developers
|
||
</span>
|
||
</h1>
|
||
<p className='xl:text-xl text-base font-gilroy max-w-[650px] font-medium leading-[120%]'>
|
||
We help developers effectively showcase their property.
|
||
<br />
|
||
Sell more and faster.
|
||
</p>
|
||
<div className='absolute top-20 right-0 blur-[10px] -z-10'>
|
||
<img src='/images/blendings/1.svg' alt='' />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className='relative aspect-video w-full 2xl:mb-[200px] sm:mb-[120px] mb-20'>
|
||
<video
|
||
src='/videos/showreel_1080p_4000k_h264.mp4'
|
||
muted
|
||
autoPlay
|
||
loop
|
||
playsInline
|
||
className='absolute w-full aspect-video'
|
||
onPlaying={() => setIsBuffering(false)}
|
||
onWaiting={() => setIsBuffering(true)}
|
||
/>
|
||
|
||
<div
|
||
className={`absolute aspect-video w-full h-full flex justify-center items-center bg-black bg-opacity-50 transition-opacity ${
|
||
isBuffering ? 'opacity-100' : 'opacity-0'
|
||
}`}
|
||
>
|
||
<div className='flex items-center gap-4'>
|
||
<span>
|
||
<svg
|
||
className='w-5 h-5 animate-spin'
|
||
xmlns='http://www.w3.org/2000/svg'
|
||
fill='none'
|
||
viewBox='0 0 24 24'
|
||
>
|
||
<circle
|
||
className='opacity-25'
|
||
cx='12'
|
||
cy='12'
|
||
r='10'
|
||
stroke='currentColor'
|
||
strokeWidth='4'
|
||
></circle>
|
||
<path
|
||
className='opacity-75'
|
||
fill='currentColor'
|
||
d='M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z'
|
||
></path>
|
||
</svg>
|
||
</span>
|
||
<span className='font-gilroy'>Загружаем шоурил...</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className='relative mx-auto conatiner 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>
|
||
Sell real estate
|
||
<br />
|
||
<span style={{ WebkitTextFillColor: '#fff' }}>
|
||
more easily,{' '}
|
||
<span className='relative'>
|
||
<span style={{ WebkitTextFillColor: '#52587A' }}>
|
||
quickly,
|
||
</span>
|
||
<span className='absolute top-[55%] -left-[2.5%] 2xl:h-1.5 h-1 w-[105%] bg-white'></span>
|
||
</span>{' '}
|
||
and at a higher price
|
||
</span>
|
||
</Heading2>
|
||
|
||
<div className='relative xl:flex items-center gap-4 xl:max-h-[400px]'>
|
||
<p className='2xl:text-2xl sm:text-xl font-gilroy min-w-fit'>
|
||
We have gathered statistics{' '}
|
||
<span className='font-semibold text-gradient'>
|
||
over 13 years
|
||
</span>{' '}
|
||
of working
|
||
<br />
|
||
with developers,{' '}
|
||
<span className='font-semibold text-gradient'>
|
||
having implemented 31 projects
|
||
</span>
|
||
</p>
|
||
|
||
<div className='2xl:ml-6 xl:ml-[14px] relative 2xl:-top-8 xl:-top-4 -z-10'>
|
||
<img src='/images/Map.png' alt='' />
|
||
</div>
|
||
</div>
|
||
|
||
<p className='2xl:text-[64px] xl:text-5xl text-[40px] text-gradient font-gilroy font-medium w-fit leading-none'>
|
||
Graff.estate
|
||
</p>
|
||
|
||
<div className='grid grid-cols-1 gap-3 xl:grid-cols-4 sm:grid-cols-2 xl:gap-0'>
|
||
<div className='2xl:px-8 px-6 py-4 flex flex-col gap-4 border-l border-[#3D425C]'>
|
||
<p className='text-sm 2xl:text-base'>By</p>
|
||
<p className='2xl:text-8xl text-[64px] font-gilroy font-medium leading-none'>
|
||
18
|
||
<span className='2xl:text-2xl text-xl ml-1 font-semibold leading-[135%]'>
|
||
%
|
||
</span>
|
||
</p>
|
||
<p className='text-sm 2xl:text-base'>
|
||
increases conversion from consultation to reservation
|
||
</p>
|
||
</div>
|
||
|
||
<div className='2xl:px-8 px-6 py-4 flex flex-col gap-4 border-l border-[#3D425C]'>
|
||
<p className='text-sm 2xl:text-base'>By</p>
|
||
<p className='2xl:text-8xl text-[64px] font-gilroy font-medium leading-none'>
|
||
12
|
||
<span className='2xl:text-2xl text-xl ml-1 font-semibold leading-[135%]'>
|
||
%
|
||
</span>
|
||
</p>
|
||
<p className='text-sm 2xl:text-base'>
|
||
increases conversion from reservation to sale
|
||
</p>
|
||
</div>
|
||
|
||
<div className='2xl:px-8 px-6 py-4 flex flex-col gap-4 border-l border-[#3D425C]'>
|
||
<p className='text-sm 2xl:text-base'>Up to</p>
|
||
<p className='2xl:text-8xl text-[64px] font-gilroy font-medium leading-none'>
|
||
2
|
||
<span className='2xl:text-2xl text-xl ml-1 font-semibold leading-[135%]'>
|
||
times
|
||
</span>
|
||
</p>
|
||
<p className='text-sm 2xl:text-base'>
|
||
cuts the project
|
||
<br />
|
||
implementation time
|
||
</p>
|
||
</div>
|
||
|
||
<div className='2xl:px-8 px-6 py-4 flex flex-col gap-4 border-l border-[#3D425C]'>
|
||
<p className='text-sm 2xl:text-base'>Up to</p>
|
||
<p className='2xl:text-8xl text-[64px] font-gilroy font-medium leading-none'>
|
||
4
|
||
<span className='2xl:text-2xl text-xl ml-1 font-semibold leading-[135%]'>
|
||
times
|
||
</span>
|
||
</p>
|
||
<p className='text-sm 2xl:text-base'>
|
||
reduces the time for preparing advertising materials
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className='relative sm:grid grid-cols-2 xl:gap-x-8 sm:gap-x-6 2xl:mb-[200px] sm:mb-[120px] mb-20'>
|
||
<div className='2xl:mt-[220px] xl:mt-40 sm:mt-[104px]'>
|
||
<ExampleCard
|
||
title='Residential Complex "Life Residence"'
|
||
company='Paritet Development'
|
||
image='/images/Aivaz1.jpg'
|
||
/>
|
||
|
||
<ExampleCard
|
||
title='Residential Complex "Aivazovsky City"'
|
||
company='ENCO'
|
||
image='/images/Aivaz3.jpg'
|
||
/>
|
||
</div>
|
||
|
||
<div>
|
||
<ExampleCard
|
||
title="Authors' quarter Masharov"
|
||
company='Sibintel Development'
|
||
image='/images/Aivaz2.jpg'
|
||
/>
|
||
|
||
<ExampleCard
|
||
title='Residential Complex "Plotlines"'
|
||
company='Fortis Development'
|
||
image='/images/Aivaz4.jpg'
|
||
/>
|
||
</div>
|
||
|
||
<div className='absolute top-[50%] left-[50%] -translate-x-[50%] -translate-y-[50%] scale-150 -z-10 blur-[44px]'>
|
||
<img src='/images/blendings/2.svg' alt='' />
|
||
</div>
|
||
</div>
|
||
|
||
<div className='xl:grid flex flex-col grid-cols-2 xl:gap-4 sm:gap-10 gap-8 2xl:mb-[200px] sm:mb-[120px] mb-20'>
|
||
<div className='flex flex-col gap-20'>
|
||
<div className='grid flex-col gap-3 xl:flex sm:grid-cols-2 xl:gap-8'>
|
||
<Heading2>
|
||
Functional
|
||
<br />
|
||
<span style={{ WebkitTextFillColor: '#fff' }}>
|
||
capabilities
|
||
</span>
|
||
</Heading2>
|
||
<p className='text-sm xl:w-2/3 xl:text-base'>
|
||
An interactive presentation engages buyers and provides
|
||
current information about the residential complex, answering
|
||
all questions and showing important features and advantages of
|
||
the object
|
||
</p>
|
||
</div>
|
||
|
||
<div className='hidden pr-6 xl:block'>
|
||
<FeatureItem
|
||
title='Virtual tour of the residential complex'
|
||
desc='The client can personally assess the angle of sunlight, minor architectural forms, and landscape, moving through the complex with a tap.'
|
||
video='/videos/features/virtual_tour.mp4'
|
||
handleHoverStart={(video) => setSelectedVideo(video)}
|
||
/>
|
||
<FeatureItem
|
||
title='All infrastructure on one screen'
|
||
desc='The ability to assess the infrastructure of the area will show the client important points of interest and the time it takes to reach them.'
|
||
video='/videos/features/nks_infra.mp4'
|
||
handleHoverStart={(video) => setSelectedVideo(video)}
|
||
/>
|
||
<FeatureItem
|
||
title='Interior configurator'
|
||
desc='The client can freely choose furniture and design using the interior configurator. It is possible to select the style for the entire apartment or change individual details.'
|
||
video='/videos/features/uralsky.mp4'
|
||
handleHoverStart={(video) => setSelectedVideo(video)}
|
||
/>
|
||
<FeatureItem
|
||
title='Parametric apartment search'
|
||
desc='The filter will allow marking specific advantages, determine the number of rooms, desired floor, price, and receive a selection of suitable options.'
|
||
video='/videos/features/parametric.mp4'
|
||
handleHoverStart={(video) => setSelectedVideo(video)}
|
||
/>
|
||
<FeatureItem
|
||
title='Any render in a few seconds'
|
||
desc='When you need any object from any angle for advertising, just take a picture inside the presentation.'
|
||
video='/videos/features/render.mp4'
|
||
handleHoverStart={(video) => setSelectedVideo(video)}
|
||
/>
|
||
<FeatureItem
|
||
title='Formation of a wishlist'
|
||
desc='The client can add apartment options to favorites, compare them with each other by the main parameters, and choose their future apartment.'
|
||
video='/videos/features/wish.mp4'
|
||
handleHoverStart={(video) => setSelectedVideo(video)}
|
||
/>
|
||
<FeatureItem
|
||
title='Integration with CRM'
|
||
desc="The application transfers client information to the developer's CRM system and receives current information about prices and statuses of apartments."
|
||
video='/videos/features/integra_crm.mp4'
|
||
handleHoverStart={(video) => setSelectedVideo(video)}
|
||
/>
|
||
<FeatureItem
|
||
title='Sending a commercial offer'
|
||
desc='A commercial offer with selected apartments can be sent to the client by mail or printed and handed over personally.'
|
||
video='/videos/features/send.mp4'
|
||
handleHoverStart={(video) => setSelectedVideo(video)}
|
||
/>
|
||
{/* <FeatureItem
|
||
title="Интерактивная инсоляция"
|
||
desc="Функция позволяет в режиме реального времени увидеть уровень освещенности выбранной квартиры, а если вы изучаете экстерьер жилого комплекса – функция покажет архитектурную подсветку."
|
||
video=""
|
||
/>
|
||
<FeatureItem
|
||
title="Подбор квартир на генплане"
|
||
desc="Сделать генплан удобным инструментом выбора квартиры поможет подсветка выбранных квартир прямо на фасаде Жилого комплекса."
|
||
video=""
|
||
/> */}
|
||
</div>
|
||
</div>
|
||
<div className='aspect-video sticky top-[25%] xl:block hidden'>
|
||
<FeatureVideoViewBox video={selectedVideo} />
|
||
</div>
|
||
|
||
<VideoSliderMobile />
|
||
</div>
|
||
|
||
<div className='relative 2xl:mb-[200px] sm:mb-[120px] mb-20'>
|
||
<div className='grid gap-6 mb-8 sm:grid-cols-2 sm:gap-4 2xl:mb-16 xl:mb-10 sm:mb-12'>
|
||
<div className='flex flex-col justify-between gap-8'>
|
||
<Heading2>
|
||
Graff.estate stream —
|
||
<br />
|
||
<span style={{ WebkitTextFillColor: '#fff' }}>
|
||
remote
|
||
<br />
|
||
demonstration
|
||
<br />
|
||
of a residential complex
|
||
</span>
|
||
</Heading2>
|
||
<a
|
||
href='https://stream.graff.tech'
|
||
target='_blank'
|
||
className='hidden w-fit sm:inline-block'
|
||
>
|
||
<Button>Learn more</Button>
|
||
</a>
|
||
</div>
|
||
<div className='flex flex-col gap-6 xl:gap-16'>
|
||
<div className='grid gap-2 xl:grid-cols-2 xl:gap-4'>
|
||
<p className='text-sm 2xl:text-base'>
|
||
High level of graphics and full immersion of the buyer in
|
||
the process of choosing an apartment
|
||
</p>
|
||
<p className='text-sm 2xl:text-base'>
|
||
Location and device do not matter.
|
||
<br />
|
||
Only the internet is required
|
||
</p>
|
||
</div>
|
||
<div className='grid-cols-2 gap-4 xl:grid'>
|
||
<img src='/images/Datamining.jpg' alt='' className='w-full' />
|
||
</div>
|
||
<a
|
||
href='https://stream.graff.tech'
|
||
target='_blank'
|
||
className='inline-block w-fit sm:hidden'
|
||
>
|
||
<Button>Learn more</Button>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
<div className='border-t border-[#3D425C]'>
|
||
<StreamButton
|
||
icon='/icons/Revolution.svg'
|
||
title='MFC "Re:volution towers"'
|
||
location='Russia, Yekaterinburg'
|
||
background='/images/stream/nks.jpg'
|
||
link='https://stream.graff.tech/?build=nksJukovaDev&location=a1'
|
||
/>
|
||
<StreamButton
|
||
icon='/icons/Residence.svg'
|
||
title='Residential Complex "Life Residence"'
|
||
location='Russia, Tyumen'
|
||
background='/images/stream/liferes.jpg'
|
||
link='https://stream.graff.tech/?build=lifeResidence&location=a1'
|
||
/>
|
||
<StreamButton
|
||
icon='/icons/Aivaz.svg'
|
||
title='Residential Complex "Aivazovsky City"'
|
||
location='Russia, Tyumen'
|
||
background='/images/stream/aivaz.jpg'
|
||
link='https://stream.graff.tech/?build=IvazowskyDev&location=a1'
|
||
/>
|
||
</div>
|
||
|
||
<div className='absolute -top-36 left-0 -z-10 blur-[20px]'>
|
||
<img src='/images/blendings/3.svg' alt='' />
|
||
</div>
|
||
</div>
|
||
|
||
<div className='grid sm:grid-cols-2 xl:gap-4 sm:gap-3 gap-8 2xl:mb-[200px] sm:mb-[120px] mb-20'>
|
||
<div className='flex flex-col justify-between'>
|
||
<div className='flex flex-col gap-4 xl:gap-8 sm:gap-6'>
|
||
<Heading2>
|
||
We analyze
|
||
<br />
|
||
<span style={{ WebkitTextFillColor: '#fff' }}>
|
||
user behavior
|
||
</span>
|
||
</Heading2>
|
||
<p className='text-sm xl:w-2/3 2xl:text-base'>
|
||
The program's internal analytics system collects information
|
||
on user behavior and the efficiency of managers to create a
|
||
report containing necessary metrics
|
||
</p>
|
||
</div>
|
||
<div className='sm:block hidden xl:pb-8 pb-6 border-b border-[#3D425C] -mt-0.5'>
|
||
<p className='xl:w-4/5 2xl:text-xl font-gilroy font-medium 2xl:leading-[120%]'>
|
||
The report makes the process of demonstrating the
|
||
residential complex even more efficient
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div
|
||
className='w-full 2xl:min-h-[600px] xl:min-h-[500px] min-h-[384px] bg-cover bg-center bg-no-repeat'
|
||
style={{ backgroundImage: "url('/images/Analysis.jpg')" }}
|
||
></div>
|
||
|
||
<div className='sm:hidden block xl:pb-8 pb-6 border-b border-[#3D425C] -mt-0.5'>
|
||
<p className='xl:w-4/5 2xl:text-xl text-base font-gilroy font-medium leading-[120%]'>
|
||
The report makes the process of demonstrating the
|
||
residential complex even more efficient
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div className='relative grid sm:grid-cols-2 2xl:gap-4 xl:gap-10 sm:gap-3 gap-4 2xl:mb-[200px] sm:mb-[120px] mb-20'>
|
||
<div className='flex flex-col justify-between'>
|
||
<div className='flex flex-col gap-8'>
|
||
<Heading2>
|
||
Virtual reality
|
||
<br />
|
||
<span style={{ WebkitTextFillColor: '#fff' }}>tour</span>
|
||
</Heading2>
|
||
<Button
|
||
className='hidden sm:block'
|
||
onClick={() => setModal(<FeedbackModal />)}
|
||
>
|
||
Sign up for the showroom
|
||
</Button>
|
||
</div>
|
||
<div className='xl:block hidden pb-8 border-b border-[#3D425C]'>
|
||
<p className='font-gilroy 2xl:text-xl 2xl:leading-[120%]'>
|
||
The client is fully immersed in the recreated reality, feels
|
||
convenience, and the level of comfort
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div className='flex flex-col gap-10'>
|
||
<div className='grid gap-6 xl:grid-cols-2 xl:gap-4'>
|
||
<p className='text-sm 2xl:text-base'>
|
||
Just put on a virtual reality helmet to walk around, evaluate
|
||
and feel the space
|
||
</p>
|
||
<img
|
||
src='/images/VR.png'
|
||
alt=''
|
||
className='sm:px-6 sm:pt-8 sm:pb-5 p-4 pb-2 border-t border-[#3D425C] w-full'
|
||
/>
|
||
</div>
|
||
<video
|
||
src='/videos/vr.mp4'
|
||
muted
|
||
autoPlay
|
||
loop
|
||
playsInline
|
||
className='hidden xl:block'
|
||
></video>
|
||
</div>
|
||
|
||
<div className='flex flex-col gap-8 mt-4 col-span-full sm:mt-8 sm:gap-12'>
|
||
<video
|
||
src='/videos/vr.mp4'
|
||
muted
|
||
autoPlay
|
||
loop
|
||
playsInline
|
||
className='block xl:hidden'
|
||
></video>
|
||
<div className='xl:hidden flex border-b border-[#3D425C] sm:pb-10 pb-6 flex-col gap-8'>
|
||
<p className='font-gilroy font-medium leading-[120%] xl:hidden block'>
|
||
The client is fully immersed
|
||
<br />
|
||
in the recreated reality, feels
|
||
<br />
|
||
convenience, and the level of comfort
|
||
</p>
|
||
<Button
|
||
className='inline-block sm:hidden'
|
||
onClick={() => setModal(<FeedbackModal />)}
|
||
>
|
||
Sign up for the showroom
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
|
||
<div className='absolute -top-[50%] left-[16%] blur-[20px] -z-10'>
|
||
<img src='/images/blendings/4.svg' alt='' />
|
||
</div>
|
||
</div>
|
||
|
||
{/* <div className='relative flex flex-col 2xl:gap-16 xl:gap-10 sm:gap-12 gap-8 2xl:mb-[200px] sm:mb-[120px] mb-20'>
|
||
<div className='flex flex-col gap-6 sm:gap-8'>
|
||
<Heading2>
|
||
Evaluate the effectiveness <br className='block xl:hidden' />
|
||
of the interactive
|
||
<br />
|
||
<span style={{ WebkitTextFillColor: '#fff' }}>sales tool</span>
|
||
</Heading2>
|
||
<div className='grid gap-2 sm:grid-cols-2 xl:gap-4 sm:gap-3'>
|
||
<p className='text-sm xl:w-2/3 2xl:text-base'>
|
||
We studied industry analytics in the new apartment sales
|
||
market and based on this data, assembled a product efficiency
|
||
calculator
|
||
</p>
|
||
<p className='text-sm xl:w-2/3 2xl:text-base'>
|
||
When using project financing, the main thing is time. The
|
||
faster escrow accounts are filled, the lower the percentage
|
||
for the use of borrowed money
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<Calc />
|
||
|
||
<div className='absolute -top-16 right-0 blur-[18px] -z-10'>
|
||
<img src='/images/blendings/5.svg' alt='' />
|
||
</div>
|
||
</div> */}
|
||
|
||
<div className='flex flex-col 2xl:gap-16 xl:gap-10 gap-8 2xl:mb-[200px] sm:mb-[120px] mb-20'>
|
||
<Heading2>Projects</Heading2>
|
||
<div className='hidden gap-3 2xl:grid xl:grid-cols-3 sm:grid-cols-2 2xl:gap-8 xl:gap-6'>
|
||
{projects.map((project, index) => (
|
||
<ProjectCard key={index} {...project} />
|
||
))}
|
||
</div>
|
||
<div className='grid gap-3 2xl:hidden xl:grid-cols-3 sm:grid-cols-2 2xl:gap-8 xl:gap-6'>
|
||
{[...Array(5)].map((_, index) => (
|
||
<ProjectCard key={index} {...projects[index]} />
|
||
))}
|
||
{!isShownAllProjects ? (
|
||
<MoreProjectButton
|
||
onClick={() => setIsShownAllProjects(true)}
|
||
/>
|
||
) : (
|
||
<>
|
||
{projects.map(
|
||
(_, index) =>
|
||
projects[index + 5] && (
|
||
<ProjectCard key={index} {...projects[index + 5]} />
|
||
)
|
||
)}
|
||
</>
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
<div className='relative flex flex-col 2xl:gap-16 xl:gap-10 gap-8 2xl:mb-[200px] sm:mb-[120px] mb-20'>
|
||
<Heading2>
|
||
Our customers are{' '}
|
||
<span style={{ WebkitTextFillColor: '#fff' }}>
|
||
in real estate
|
||
</span>
|
||
</Heading2>
|
||
<img
|
||
src='/images/clients-logos.png'
|
||
alt=''
|
||
className='hidden sm:block'
|
||
/>
|
||
<img
|
||
src='/images/clients-logos-mobile.png'
|
||
alt=''
|
||
className='block sm:hidden'
|
||
/>
|
||
<div className='absolute top-0 right-0 blur-[34px] -z-10'>
|
||
<img src='/images/blendings/6.svg' alt='' />
|
||
</div>
|
||
</div>
|
||
|
||
<div className='relative overflow-hidden pb-[50px]'>
|
||
<div className='lg:mt-40 sm:mt-[120px] mt-[88px]'>
|
||
<div className='grid grid-cols-1 gap-6 lg:grid-cols-4 lg:gap-4'>
|
||
<div className='col-span-1'>
|
||
<div className='grid gap-4 lg:grid-cols-1 sm:grid-cols-2 lg:gap-6'>
|
||
<p className='2xl:text-[64px] xl:text-5xl text-[40px] font-gilroy text-gradient font-medium w-fit leading-none'>
|
||
Contact us
|
||
</p>
|
||
<p className='font-semibold leading-tight 2xl:text-xl lg:text-lg font-gilroy'>
|
||
Want to increase conversion?
|
||
<br />
|
||
Let's discuss the details!
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div className='lg:col-span-3'>
|
||
<FeedbackForm />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className='mt-[104px] relative'>
|
||
<div className='relative grid gap-4 lg:grid-cols-4'>
|
||
<div className='flex gap-4'>
|
||
<p className='font-semibold 2xl:text-xl font-gilroy'>
|
||
Hot line
|
||
</p>
|
||
<div className='w-full h-px bg-[#3D425C]'></div>
|
||
</div>
|
||
|
||
<div className='space-y-2 2xl:pr-4 xl:pr-2'>
|
||
<a
|
||
href='mailto:info@graff.tech'
|
||
className='2xl:h-16 h-14 px-6 py-4 2xl:text-base text-sm border rounded-full font-medium flex justify-between items-center w-full border-[#52587A] opacity-80 hover:opacity-100 transition-all'
|
||
>
|
||
<span>Write us</span>
|
||
<MailIcon className='w-6 h-6 lg:w-8 lg:h-8' />
|
||
</a>
|
||
<a
|
||
href='tel:88007700067'
|
||
className='2xl:h-16 h-14 px-6 py-4 2xl:text-base text-sm border rounded-full font-medium flex justify-between items-center w-full border-[#52587A] opacity-80 hover:opacity-100 transition-all'
|
||
>
|
||
<span>Call us</span>
|
||
<PhoneIcon className='w-6 h-6 lg:w-8 lg:h-8' />
|
||
</a>
|
||
</div>
|
||
|
||
<div className='flex mt-10 sm:col-span-2 sm:justify-end lg:mt-0'>
|
||
<div className='flex justify-between w-full gap-4 lg:w-auto sm:w-1/2 2xl:gap-8 lg:gap-6'>
|
||
<p className='2xl:text-xl font-gilroy font-semibold 2xl:-mt-1.5 -mt-1'>
|
||
Social
|
||
<br />
|
||
media
|
||
</p>
|
||
<div className='flex gap-2 h-fit'>
|
||
<a
|
||
href='https://www.youtube.com/@GRAFFtech'
|
||
target='_blank'
|
||
className='group border border-[#3D425C] xl:p-4 p-3 rounded-full hover:border-[#52587A] transition-all'
|
||
>
|
||
<YouTubeIcon className='w-6 h-6 2xl:w-8 2xl:h-8' />
|
||
</a>
|
||
<a
|
||
href='https://vk.com/graff.interactive'
|
||
target='_blank'
|
||
className='group border border-[#3D425C] xl:p-4 p-3 rounded-full hover:border-[#52587A] transition-all'
|
||
>
|
||
<VKIcon className='w-6 h-6 2xl:w-8 2xl:h-8' />
|
||
</a>
|
||
<a
|
||
href='https://t.me/GRAFFinteractive'
|
||
target='_blank'
|
||
className='border rounded-full border-[#52587A] xl:p-4 p-3 opacity-80 hover:opacity-100 transition-all'
|
||
>
|
||
<TelegramIcon className='w-6 h-6 2xl:w-8 2xl:h-8' />
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className='absolute top-[65%] left-[26%] -z-10 blur-[10px]'>
|
||
<img src='/images/blendings/7.svg' alt='' />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className=' border-t border-[#3D425C] text-sm'>
|
||
<div className='container mx-auto xl:px-8 max-w-[1600px]'>
|
||
<div className='grid lg:grid-cols-4'>
|
||
<div className='sm:col-span-2 lg:order-none order-last py-6 xl:px-0 px-6 flex sm:flex-row flex-col sm:gap-6 gap-4 lg:border-t-0 border-t border-[#3D425C]'>
|
||
<div>
|
||
<img src='/images/Logo.svg' alt='' className='max-h-fit' />
|
||
</div>
|
||
<div className='flex flex-col gap-4 sm:gap-1'>
|
||
<p className='flex flex-col gap-1 sm:flex-row sm:gap-4'>
|
||
<a href='https://graff.tech/privacypolicy' target='_blank'>
|
||
Privacy policy
|
||
</a>
|
||
{/* <a href="https://graff.estate" className="">
|
||
graff.estate
|
||
</a> */}
|
||
</p>
|
||
<p className='text-xs text-[#C5C7CE]'>
|
||
© {new Date().getFullYear()} GRAFF interactive. All rights
|
||
reserved.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div className='col-span-1 lg:border-l sm:border-b-0 border-b border-[#3D425C] xl:px-8 sm:px-6 px-4 py-6 flex flex-col justify-center'>
|
||
<div className='flex items-center justify-between'>
|
||
<div className='text-[#EBEBEB] flex flex-col gap-1'>
|
||
<a href='mailto:info@graff.tech'>info@graff.tech</a>
|
||
<a href='tel:88007700067'>8 800 770 00 67</a>
|
||
</div>
|
||
<div className='w-12 h-12 border border-[#3D425C] rounded-full flex justify-center items-center'>
|
||
RU
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className='col-span-1 sm:border-l border-[#3D425C] xl:pl-8 xl:pr-0 sm:px-6 px-4 py-6 flex flex-col justify-center'>
|
||
<div className='flex items-center justify-between'>
|
||
<div className='text-[#EBEBEB] flex flex-col gap-1'>
|
||
<a href='mailto:sam@graff.tech'>sam@graff.tech</a>
|
||
<a href='tel:+971585060097'>+971 58 506 0097</a>
|
||
</div>
|
||
<div className='w-12 h-12 border border-[#3D425C] rounded-full flex justify-center items-center'>
|
||
UAE
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<ModalContainer />
|
||
</div>
|
||
);
|
||
}
|
||
|
||
export default App;
|