upd
This commit is contained in:
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@@ -0,0 +1,90 @@
|
||||
@font-face {
|
||||
font-family: 'Gilroy';
|
||||
src: url('Gilroy-Regular.woff2') format('woff2'),
|
||||
url('Gilroy-Regular.woff') format('woff');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Gilroy';
|
||||
src: url('Gilroy-Heavy.woff2') format('woff2'),
|
||||
url('Gilroy-Heavy.woff') format('woff');
|
||||
font-weight: 900;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Gilroy';
|
||||
src: url('Gilroy-ExtraBold.woff2') format('woff2'),
|
||||
url('Gilroy-ExtraBold.woff') format('woff');
|
||||
font-weight: bold;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Gilroy';
|
||||
src: url('Gilroy-Black.woff2') format('woff2'),
|
||||
url('Gilroy-Black.woff') format('woff');
|
||||
font-weight: 900;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Gilroy';
|
||||
src: url('Gilroy-Bold.woff2') format('woff2'),
|
||||
url('Gilroy-Bold.woff') format('woff');
|
||||
font-weight: bold;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Gilroy';
|
||||
src: url('Gilroy-UltraLight.woff2') format('woff2'),
|
||||
url('Gilroy-UltraLight.woff') format('woff');
|
||||
font-weight: 100;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Gilroy';
|
||||
src: url('Gilroy-Light.woff2') format('woff2'),
|
||||
url('Gilroy-Light.woff') format('woff');
|
||||
font-weight: 300;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Gilroy';
|
||||
src: url('Gilroy-Medium.woff2') format('woff2'),
|
||||
url('Gilroy-Medium.woff') format('woff');
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Gilroy';
|
||||
src: url('Gilroy-Thin.woff2') format('woff2'),
|
||||
url('Gilroy-Thin.woff') format('woff');
|
||||
font-weight: 100;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Gilroy';
|
||||
src: url('Gilroy-SemiBold.woff2') format('woff2'),
|
||||
url('Gilroy-SemiBold.woff') format('woff');
|
||||
font-weight: 600;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 218 KiB |
@@ -0,0 +1,3 @@
|
||||
<svg width="29" height="29" viewBox="0 0 29 29" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M22.8 10.8L14.4 19.2L6.00001 10.8" stroke="#F2F2F2" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 232 B |
@@ -0,0 +1,3 @@
|
||||
<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M10.5 22.1668L18.6667 14.0001L10.5 5.8335" stroke="#F2F2F2" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 240 B |
Binary file not shown.
|
After Width: | Height: | Size: 4.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 172 KiB |
+587
-2
@@ -1,9 +1,594 @@
|
||||
import "./App.css";
|
||||
import PieChart from "./components/PieChart/PieChart";
|
||||
import Test from "./components/Test";
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold underline">Hello world!</h1>
|
||||
<div className="snap-y h-screen overflow-y-scroll min-h-screen bg-[#151619] text-white">
|
||||
<div className="container mx-auto px-2 py-8 xl:max-w-screen-2xl">
|
||||
<div className="space-y-8">
|
||||
<div className="flex justify-between">
|
||||
<div className="">
|
||||
<a href="/">
|
||||
<img src="/images/logo.png" alt="" />
|
||||
</a>
|
||||
</div>
|
||||
<div className="flex space-x-8">
|
||||
<button className="px-4 py-2 bg-gradient-to-tr from-[#BC75FF] to-[#798FFF] text-white rounded-full opacity-95 hover:opacity-100 transition-opacity">
|
||||
Связаться с нами
|
||||
</button>
|
||||
<div className="space-x-2">
|
||||
<button className="p-2 bg-white bg-opacity-25 hover:bg-opacity-30 text-white rounded-full w-10 h-10 transition-colors">
|
||||
RU
|
||||
</button>
|
||||
<button className="p-2 hover:bg-white hover:bg-opacity-25 text-white rounded-full w-10 h-10 transition-colors">
|
||||
EN
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-8">
|
||||
<div className="h-12 w-0.5 bg-[#2E3038]"></div>
|
||||
<h1 className="text-8xl from-[#BC75FF] to-[#798FFF] bg-gradient-to-bl text-transparent bg-clip-text">
|
||||
Интерактивный инструмент продаж для застройщиков
|
||||
</h1>
|
||||
<p className="text-2xl">
|
||||
Помогаем девелоперам эффективно демонстрировать свой объект
|
||||
<br />
|
||||
Продавать больше и быстрее
|
||||
</p>
|
||||
<div className="h-24 w-0.5 bg-[#2E3038]"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="snap-center">
|
||||
<div
|
||||
className="bg-cover bg-no-repeat bg-center max-w-screen h-screen rounded-xl overflow-hidden"
|
||||
style={{ backgroundImage: "url('./public/images/content.jpg')" }}
|
||||
></div>
|
||||
</div>
|
||||
|
||||
<div className="container mx-auto px-2 py-8 xl:max-w-screen-2xl">
|
||||
<div className="space-y-32 my-32">
|
||||
<div className="grid grid-cols-2 gap-8">
|
||||
<p className="text-5xl from-[#BC75FF] to-[#798FFF] bg-gradient-to-bl text-transparent bg-clip-text">
|
||||
Эффективность инстумента продаж в цифрах
|
||||
</p>
|
||||
<p className="text-2xl">
|
||||
Мы собрали статистику за 10 лет работы с застройщиками, реализовав
|
||||
21 проект
|
||||
</p>
|
||||
</div>
|
||||
<div className="grid grid-cols-4 gap-8">
|
||||
<div className="border-t-2 pt-8 border-[#2E3038]">
|
||||
<p className="text-9xl from-[#BC75FF] to-[#798FFF] bg-gradient-to-bl text-transparent bg-clip-text">
|
||||
10
|
||||
</p>
|
||||
<p className="text-xl">что-то на умном</p>
|
||||
</div>
|
||||
<div className="border-t-2 pt-8 border-[#2E3038]">
|
||||
<p className="text-9xl from-[#BC75FF] to-[#798FFF] bg-gradient-to-bl text-transparent bg-clip-text">
|
||||
26
|
||||
</p>
|
||||
<p className="text-xl">что-то на умном в две строчки</p>
|
||||
</div>
|
||||
<div className="border-t-2 pt-8 border-[#2E3038]">
|
||||
<p className="text-9xl from-[#BC75FF] to-[#798FFF] bg-gradient-to-bl text-transparent bg-clip-text">
|
||||
32%
|
||||
</p>
|
||||
<p className="text-xl">что-то на умном в две строчки</p>
|
||||
</div>
|
||||
<div className="border-t-2 pt-8 border-[#2E3038]">
|
||||
<p className="text-9xl from-[#BC75FF] to-[#798FFF] bg-gradient-to-bl text-transparent bg-clip-text">
|
||||
12%
|
||||
</p>
|
||||
<p className="text-xl">что-то на умном в две строчки</p>
|
||||
</div>
|
||||
</div>
|
||||
<button className="px-8 py-4 bg-gradient-to-tr from-[#BC75FF] to-[#798FFF] text-white rounded-full text-xl opacity-95 hover:opacity-100 transition-opacity">
|
||||
Заказать решение
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="container mx-auto px-2 py-8 xl:max-w-screen-2xl">
|
||||
<div className="grid grid-cols-2 gap-8">
|
||||
<div className="text-5xl from-[#BC75FF] to-[#798FFF] bg-gradient-to-bl text-transparent bg-clip-text">
|
||||
Функциональные возможности
|
||||
</div>
|
||||
<div className="text-2xl">
|
||||
Интерактивная презентация увлекает покупателей и предоставляет
|
||||
актуальную информацию о жилом комплексе, отвечая на все интересующие
|
||||
вопросы и показывая важные особенности и преимущества объекта
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="container mx-auto px-2 py-8 xl:max-w-screen-2xl">
|
||||
<p className="text-9xl">SLIDER</p>
|
||||
</div>
|
||||
|
||||
<div className="container mx-auto px-2 py-8 xl:max-w-screen-2xl">
|
||||
<div className="grid grid-cols-2 gap-8">
|
||||
<div className="flex justify-center items-center">
|
||||
<p className="text-9xl">VR HELM ANIM</p>
|
||||
</div>
|
||||
<div className="space-y-16">
|
||||
<p className="text-5xl from-[#BC75FF] to-[#798FFF] bg-gradient-to-bl text-transparent bg-clip-text">
|
||||
Экскурсия в виртуальной реальности
|
||||
</p>
|
||||
<p className="text-2xl">
|
||||
Клиенту достаточно надеть шлем виртуальной реальности, чтобы
|
||||
прогуляться, оценить и ощутить пространство. Он полностью
|
||||
погружается в воссозданную реальность, чувствует удобство и
|
||||
уровень комфорта
|
||||
</p>
|
||||
<button className="px-8 py-4 bg-gradient-to-tr from-[#BC75FF] to-[#798FFF] text-white rounded-full text-xl opacity-95 hover:opacity-100 transition-opacity">
|
||||
Записаться в шоу-рум
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="container mx-auto px-2 py-8 xl:max-w-screen-2xl">
|
||||
<div className="space-y-16 my-32">
|
||||
<div className="flex flex-col items-center space-y-8">
|
||||
<p className="text-5xl from-[#BC75FF] to-[#798FFF] bg-gradient-to-bl text-transparent bg-clip-text w-1/2">
|
||||
Анализируем
|
||||
<br />
|
||||
поведение
|
||||
<br />
|
||||
пользователей
|
||||
</p>
|
||||
<p className="text-2xl w-1/2">
|
||||
Система внутренней аналитики программы собирает информацию о
|
||||
поведении пользователя и эффективности работы менеджеров для
|
||||
создания отчета, содержащего необходимые метрики
|
||||
</p>
|
||||
</div>
|
||||
<div className="space-y-8">
|
||||
<div className="grid grid-cols-3 gap-8">
|
||||
<div className="p-8 bg-[#1C1D21] rounded-xl space-y-8">
|
||||
<p className="text-2xl">Конверсия менеджеров в брони</p>
|
||||
<div className="space-y-4">
|
||||
<div className="grid grid-cols-6">
|
||||
<span className="col-span-2">К.Н. Федоров</span>
|
||||
<div className="col-span-3 bg-gradient-to-bl from-[#BC75FF] to-[#798FFF] rounded"></div>
|
||||
<span className="col-span-1 text-right">45%</span>
|
||||
</div>
|
||||
<div className="grid grid-cols-6">
|
||||
<span className="col-span-2">И.Ф. Яковлева</span>
|
||||
<div className="col-span-3 bg-gradient-to-bl from-[#BC75FF] to-[#798FFF] rounded w-3/4"></div>
|
||||
<span className="col-span-1 text-right">30%</span>
|
||||
</div>
|
||||
<div className="grid grid-cols-6">
|
||||
<span className="col-span-2">А.М. Ташева</span>
|
||||
<div className="col-span-3 bg-gradient-to-bl from-[#BC75FF] to-[#798FFF] rounded w-2/4"></div>
|
||||
<span className="col-span-1 text-right">20%</span>
|
||||
</div>
|
||||
<div className="grid grid-cols-6">
|
||||
<span className="col-span-2">А.А. Фетисов</span>
|
||||
<div className="col-span-3 bg-gradient-to-bl from-[#BC75FF] to-[#798FFF] rounded w-1/4"></div>
|
||||
<span className="col-span-1 text-right">5%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-8 bg-[#1C1D21] rounded-xl space-y-8">
|
||||
<p className="text-2xl">Популярные типы квартир, %</p>
|
||||
<div className="grid grid-cols-2 gap-8 items-center">
|
||||
<PieChart />
|
||||
<div className="space-y-2">
|
||||
<div className="space-x-4 flex items-center">
|
||||
<span className="w-4 h-4 bg-[#7A31C3] rounded-full inline-block"></span>
|
||||
<span className="text">Студии</span>
|
||||
</div>
|
||||
<div className="space-x-4 flex items-center">
|
||||
<span className="w-4 h-4 bg-[#798FFF] rounded-full inline-block"></span>
|
||||
<span className="text">1-к. квартиры</span>
|
||||
</div>
|
||||
<div className="space-x-4 flex items-center">
|
||||
<span className="w-4 h-4 bg-[#D375FF] rounded-full inline-block"></span>
|
||||
<span className="text-">2-к. квартиры</span>
|
||||
</div>
|
||||
<div className="space-x-4 flex items-center">
|
||||
<span className="w-4 h-4 bg-[#8742F8] rounded-full inline-block"></span>
|
||||
<span className="text-">3-к. квартиры</span>
|
||||
</div>
|
||||
<div className="space-x-4 flex items-center">
|
||||
<span className="w-4 h-4 bg-[#FB57F4] rounded-full inline-block"></span>
|
||||
<span className="text-">4-к. квартиры</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-8 bg-[#1C1D21] rounded-xl space-y-8">
|
||||
<p className="text-2xl">Воронка продаж</p>
|
||||
<div className="space-y-4">
|
||||
<div className="grid grid-cols-6 space-x-4">
|
||||
<div className="col-span-5 bg-gradient-to-bl from-[#BC75FF] to-[#798FFF] rounded text-center">
|
||||
Сеансы
|
||||
</div>
|
||||
<span className="col-span-1 text-right">100%</span>
|
||||
</div>
|
||||
<div className="grid grid-cols-6 space-x-4">
|
||||
<div className="col-span-5">
|
||||
<div className="bg-gradient-to-bl from-[rgba(255,255,255,.1)] to-[rgba(255,255,255,.2)] bg-opacity-10 rounded flex justify-center">
|
||||
<div className="w-5/6 bg-gradient-to-bl from-[#BC75FF] to-[#798FFF] rounded text-center">
|
||||
В избранное
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span className="col-span-1 text-right">93,47%</span>
|
||||
</div>
|
||||
<div className="grid grid-cols-6 space-x-4">
|
||||
<div className="col-span-5">
|
||||
<div className="bg-gradient-to-bl from-[rgba(255,255,255,.1)] to-[rgba(255,255,255,.2)] bg-opacity-10 rounded flex justify-center">
|
||||
<div className="w-4/6 bg-gradient-to-bl from-[#BC75FF] to-[#798FFF] rounded text-center">
|
||||
Брони
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span className="col-span-1 text-right">45,68%</span>
|
||||
</div>
|
||||
<div className="grid grid-cols-6 space-x-4">
|
||||
<div className="col-span-5">
|
||||
<div className="bg-gradient-to-bl from-[rgba(255,255,255,.1)] to-[rgba(255,255,255,.2)] bg-opacity-10 rounded flex justify-center">
|
||||
<div className="w-2/6 bg-gradient-to-bl from-[#BC75FF] to-[#798FFF] rounded text-center">
|
||||
Продажи
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span className="col-span-1 text-right">29,13%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid grid-cols-6 gap-8">
|
||||
<div className="p-8 bg-[#1C1D21] rounded-xl space-y-8">
|
||||
<p className="">
|
||||
Среднее
|
||||
<br />
|
||||
время сеанса,
|
||||
<br /> мин.
|
||||
</p>
|
||||
<p className="text-6xl text-[#D375FF]">12:45</p>
|
||||
</div>
|
||||
<div className="p-8 bg-[#1C1D21] rounded-xl space-y-8">
|
||||
<p className="">
|
||||
Сформировано
|
||||
<br />
|
||||
коммерческих
|
||||
<br />
|
||||
предложений, шт
|
||||
</p>
|
||||
<p className="text-6xl text-[#D375FF]">856</p>
|
||||
</div>
|
||||
<div className="p-8 bg-[#1C1D21] rounded-xl space-y-8">
|
||||
<p className="">
|
||||
Конверсия
|
||||
<br />
|
||||
из сеанса
|
||||
<br />в продажу, %
|
||||
</p>
|
||||
<p className="text-6xl text-[#D375FF]">12,44</p>
|
||||
</div>
|
||||
<div className="p-8 bg-[#1C1D21] rounded-xl space-y-8">
|
||||
<p className="">
|
||||
Продано через
|
||||
<br />
|
||||
Graff.estate,
|
||||
<br />
|
||||
млн.руб.
|
||||
</p>
|
||||
<p className="text-6xl text-[#D375FF]">134,5</p>
|
||||
</div>
|
||||
<div className="col-span-2 p-8 text-2xl flex justify-center items-center text-[#C5C7CE]">
|
||||
Полученный отчет позволяет сделать процесс демонстрации жилого
|
||||
комплекса еще эффективнее
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="relative">
|
||||
<div className="container mx-auto px-2 py-8 xl:max-w-screen-2xl">
|
||||
<div className="grid grid-cols-2 gap-8 items-center">
|
||||
<div className="space-y-16 my-16">
|
||||
<p className="text-5xl from-[#BC75FF] to-[#798FFF] bg-gradient-to-bl text-transparent bg-clip-text">
|
||||
Инструмент продаж поможет вам продавать удаленно
|
||||
</p>
|
||||
<div className="space-y-8">
|
||||
<p className="text-2xl">
|
||||
Высокий уровень графики и полное погружение покупателя в
|
||||
процесс выбора квартиры.
|
||||
</p>
|
||||
<p className="text-2xl text-[#C5C7CE]">
|
||||
Покажите все преимущества вашего жилого комплекса клиенту из
|
||||
любого конца мира. Местоположение и устройство значения не
|
||||
имеют. Нужен только интернет.
|
||||
</p>
|
||||
</div>
|
||||
<button className="px-8 py-4 border border-[#BC75FF] text-white rounded-full flex text-xl opacity-95 hover:opacity-100 transition-opacity">
|
||||
<span>Узнать больше</span>
|
||||
<svg
|
||||
width="28"
|
||||
height="28"
|
||||
viewBox="0 0 28 28"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M10.5 22.1668L18.6667 14.0001L10.5 5.8335"
|
||||
stroke="#F2F2F2"
|
||||
stroke-width="2.4"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="absolute -top-1/3 right-0">
|
||||
<img src="/images/map.png" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="container mx-auto px-2 py-8 xl:max-w-screen-2xl">
|
||||
<div className="space-y-16 my-32">
|
||||
<div className="flex flex-col items-center space-y-8">
|
||||
<p className="text-5xl from-[#BC75FF] to-[#798FFF] bg-gradient-to-bl text-transparent bg-clip-text w-1/2">
|
||||
Можем оценить
|
||||
<br />
|
||||
эффективность
|
||||
<br />
|
||||
интерактивного
|
||||
<br />
|
||||
инструмента продаж
|
||||
</p>
|
||||
<p className="text-2xl w-1/2">
|
||||
Мы изучили отраслевую аналитику на рынке продаж новых квартир и на
|
||||
основе данных собрали калькулятор эффективности продукта
|
||||
</p>
|
||||
</div>
|
||||
<div className="">
|
||||
<p className="text-9xl">CALC</p>
|
||||
</div>
|
||||
<div className="flex flex-col items-center">
|
||||
<div className="w-1/2 space-y-8">
|
||||
<p className="text-2xl text-[#C5C7CE]">
|
||||
Когда девелопер строит жилой комплекс используя проектное
|
||||
финансирование, главное – это время. Чем быстрее вы наполняете
|
||||
счета-эксроу, тем меньше процент за использование денег банка.
|
||||
Сократив время реализации всего проекта, девелопер значительно
|
||||
экономит на стоимости проектного финансирования.
|
||||
</p>
|
||||
<button className="px-8 py-4 bg-gradient-to-tr from-[#BC75FF] to-[#798FFF] rounded-full text-xl opacity-95 hover:opacity-100 transition-opacity">
|
||||
Заказать индивидуальный расчет
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="container mx-auto px-2 py-8 xl:max-w-screen-2xl">
|
||||
<div className="space-y-16 my-32">
|
||||
<div className="flex flex-col items-center space-y-8">
|
||||
<p className="text-5xl from-[#BC75FF] to-[#798FFF] bg-gradient-to-bl text-transparent bg-clip-text w-1/2">
|
||||
Релевантный опыт
|
||||
</p>
|
||||
</div>
|
||||
<div className="grid grid-cols-4">
|
||||
<div className="col-span-1 text-9xl">MAP</div>
|
||||
<div className="col-span-3 space-y-4">
|
||||
<div className="grid grid-cols-4 bg-[#1C1D21] hover:bg-[#2E3038] rounded-xl transition-colors cursor-pointer">
|
||||
<div className="col-span-1">
|
||||
<img
|
||||
src="/images/cards/card_1.jpg"
|
||||
alt=""
|
||||
className="rounded-xl"
|
||||
/>
|
||||
</div>
|
||||
<div className="col-span-3 flex items-center">
|
||||
<div className="p-8">
|
||||
<p className="text-3xl">ЖК «Life Резиденция»</p>
|
||||
<p className="text-[#F2F2F2] text-opacity-50">
|
||||
Россия, Тюмень
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-4 bg-[#1C1D21] hover:bg-[#2E3038] rounded-xl transition-colors cursor-pointer">
|
||||
<div className="col-span-1">
|
||||
<img
|
||||
src="/images/cards/card_1.jpg"
|
||||
alt=""
|
||||
className="rounded-xl"
|
||||
/>
|
||||
</div>
|
||||
<div className="col-span-3 flex items-center">
|
||||
<div className="p-8">
|
||||
<p className="text-3xl">МФК «Re:volution towers»</p>
|
||||
<p className="text-[#F2F2F2] text-opacity-50">
|
||||
Россия, Екатеринбург
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-4 bg-[#1C1D21] hover:bg-[#2E3038] rounded-xl transition-colors cursor-pointer">
|
||||
<div className="col-span-1">
|
||||
<img
|
||||
src="/images/cards/card_1.jpg"
|
||||
alt=""
|
||||
className="rounded-xl"
|
||||
/>
|
||||
</div>
|
||||
<div className="col-span-3 flex items-center">
|
||||
<div className="p-8">
|
||||
<p className="text-3xl">Iskan Abu Dhabi</p>
|
||||
<p className="text-[#F2F2F2] text-opacity-50">
|
||||
ОАЭ, Абу-Даби
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-4 bg-gradient-to-b from-[#1C1D21] to-transparent hover:bg-[#2E3038] rounded-xl transition-colors cursor-pointer">
|
||||
<div className="col-span-1">
|
||||
<img
|
||||
src="/images/cards/card_1.jpg"
|
||||
alt=""
|
||||
className="rounded-xl"
|
||||
/>
|
||||
</div>
|
||||
<div className="col-span-3 flex items-center">
|
||||
<div className="p-8">
|
||||
<p className="text-3xl">ЖК «Авторский квартал Машаров»</p>
|
||||
<p className="text-[#F2F2F2] text-opacity-50">
|
||||
Россия, Тюмень
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col items-center space-y-8">
|
||||
<button className="w-1/2 text-xl flex space-x-2 opacity-95 hover:opacity-100 transition-opacity">
|
||||
<span>Показать больше</span>
|
||||
<svg
|
||||
width="29"
|
||||
height="29"
|
||||
viewBox="0 0 29 29"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M22.8 10.8L14.4 19.2L6.00001 10.8"
|
||||
stroke="#F2F2F2"
|
||||
stroke-width="2.4"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-[#1C1D21]">
|
||||
<div className="container mx-auto px-2 py-8 xl:max-w-screen-2xl">
|
||||
<div className="space-y-16 mt-32 mb-8">
|
||||
<div className="space-y-16">
|
||||
<div className="space-y-8">
|
||||
<p className="text-5xl from-[#BC75FF] to-[#798FFF] bg-gradient-to-bl text-transparent bg-clip-text w-1/2">
|
||||
Свяжитесь с нами
|
||||
</p>
|
||||
<p className="text-2xl">
|
||||
Хотите увеличить конверсию?
|
||||
<br />
|
||||
Давайте обсудим детали!
|
||||
</p>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-8">
|
||||
<div className="space-y-8">
|
||||
<div className="space-y-2">
|
||||
<label htmlFor="" className="text-[#73788C] block text-xl">
|
||||
Имя Фамилия*
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
className="text-xl p-4 bg-[#2E3038] outline-none border border-transparent rounded-lg focus:border-[#BC75FF] transition-colors w-full"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label htmlFor="" className="text-[#73788C] block text-xl">
|
||||
Компания
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
className="text-xl p-4 bg-[#2E3038] outline-none border border-transparent rounded-lg focus:border-[#BC75FF] transition-colors w-full"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-x-4">
|
||||
<input type="checkbox" name="" className="cursor-pointer" />
|
||||
<label htmlFor="" className="">
|
||||
<span className="text-[#F2F2F2] text-opacity-50">
|
||||
Нажимая на кнопку «Отправить заявку» вы соглашаетесь с
|
||||
</span>
|
||||
<a href="#" className="text-white">
|
||||
Политикой конфиденциальности
|
||||
</a>
|
||||
</label>
|
||||
</div>
|
||||
<button className="px-8 py-4 bg-gradient-to-tr from-[#BC75FF] to-[#798FFF] rounded-full text-xl opacity-95 hover:opacity-100 transition-opacity">
|
||||
Отправить заявку
|
||||
</button>
|
||||
</div>
|
||||
<div className="space-y-8">
|
||||
<div className="space-y-2">
|
||||
<label htmlFor="" className="text-[#73788C] block text-xl">
|
||||
Email*
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
className="text-xl p-4 bg-[#2E3038] outline-none border border-transparent rounded-lg focus:border-[#BC75FF] transition-colors w-full"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label htmlFor="" className="text-[#73788C] block text-xl">
|
||||
Номер телефона
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
className="text-xl p-4 bg-[#2E3038] outline-none border border-transparent rounded-lg focus:border-[#BC75FF] transition-colors w-full"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="h-0.5 bg-[#23242A]"></div>
|
||||
<div className="grid grid-cols-2 gap-8">
|
||||
<div className="space-y-8">
|
||||
<div className="space-y-2">
|
||||
<p className="text-xl text-[#73788C]">Email</p>
|
||||
<p className="text-2xl">info@graff.tech</p>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<p className="text-xl text-[#73788C]">Телефон</p>
|
||||
<p className="text-2xl">+7 800 770 00 76</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-8">
|
||||
<div className="space-y-2">
|
||||
<p className="text-xl text-[#73788C]">Адрес</p>
|
||||
<p className="text-2xl">ул. Московская, 47, Екатеринбург</p>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<p className="text-xl text-[#73788C]">Социальные сети</p>
|
||||
<p className="text-2xl space-x-4">
|
||||
<a href="#telegram">Telegram</a>
|
||||
<a href="#vk">VK</a>
|
||||
<a href="#youtube">YouTube</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="h-0.5 bg-[#23242A]"></div>
|
||||
<div className="flex items-center justify-between text-[#C5C7CE]">
|
||||
<a href="/">
|
||||
<img src="/images/logo.png" alt="" />
|
||||
</a>
|
||||
<a href="#privacy">Политика конфиденциальности</a>
|
||||
<a href="#site">graff.tech</a>
|
||||
<p>© 2023 GRAFF interactive. Все права защищены</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
|
||||
|
Before Width: | Height: | Size: 4.0 KiB |
@@ -0,0 +1,19 @@
|
||||
.pie-chart {
|
||||
background: radial-gradient(circle closest-side, transparent 100%, transparent 100%),
|
||||
conic-gradient(
|
||||
from 270deg,
|
||||
#7A31C3 0,
|
||||
#7A31C3 36%,
|
||||
#798FFF 0,
|
||||
#798FFF 42%,
|
||||
#D375FF 0,
|
||||
#D375FF 52%,
|
||||
#8742F8 0,
|
||||
#8742F8 70%,
|
||||
#FB57F4 0,
|
||||
#FB57F4 100%
|
||||
);
|
||||
width: 10rem;
|
||||
height: 10rem;
|
||||
border-radius: 9999px;
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
import React from "react";
|
||||
import "./PieChart.css";
|
||||
|
||||
function PieChart() {
|
||||
return <figure className="pie-chart"></figure>;
|
||||
}
|
||||
|
||||
export default PieChart;
|
||||
@@ -0,0 +1,9 @@
|
||||
import React from 'react'
|
||||
|
||||
function test({item}: any) {
|
||||
return (
|
||||
<div>{item}</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default test
|
||||
@@ -1,3 +1,9 @@
|
||||
@import url("/fonts/Gilroy/stylesheet.css");
|
||||
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
body {
|
||||
font-family: "Gilroy", sans-serif;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user