upd
This commit is contained in:
|
Before Width: | Height: | Size: 10 KiB After Width: | Height: | Size: 10 KiB |
|
Before Width: | Height: | Size: 9.2 KiB After Width: | Height: | Size: 9.2 KiB |
|
Before Width: | Height: | Size: 6.5 KiB After Width: | Height: | Size: 6.5 KiB |
|
Before Width: | Height: | Size: 9.7 KiB After Width: | Height: | Size: 9.7 KiB |
|
Before Width: | Height: | Size: 13 KiB After Width: | Height: | Size: 13 KiB |
|
Before Width: | Height: | Size: 10 KiB After Width: | Height: | Size: 10 KiB |
|
Before Width: | Height: | Size: 16 KiB After Width: | Height: | Size: 16 KiB |
|
Before Width: | Height: | Size: 9.6 KiB After Width: | Height: | Size: 9.6 KiB |
|
Before Width: | Height: | Size: 9.9 KiB After Width: | Height: | Size: 9.9 KiB |
|
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 12 KiB |
|
Before Width: | Height: | Size: 10 KiB After Width: | Height: | Size: 10 KiB |
|
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 12 KiB |
|
Before Width: | Height: | Size: 9.6 KiB After Width: | Height: | Size: 9.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 291 KiB |
+235
-235
@@ -15,6 +15,19 @@ import Map2 from "./components/Map2";
|
||||
import FeatureCard from "./components/FeatureCard";
|
||||
|
||||
function App() {
|
||||
function getAccel() {
|
||||
DeviceMotionEvent.requestPermission().then((response) => {
|
||||
if (response == "granted") {
|
||||
console.log("accelerometer permission granted");
|
||||
alert("1");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
getAccel();
|
||||
}, []);
|
||||
|
||||
const parallaxRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
const [fullname, setFullname] = useState<string>("");
|
||||
@@ -46,7 +59,7 @@ function App() {
|
||||
if (featureImagesContainer.current) {
|
||||
featureImagesContainer.current.insertAdjacentHTML(
|
||||
"beforeend",
|
||||
`<div data-index="${selectedFeatureImageIndex}" style="background-image: url('${featureImages[selectedFeatureImageIndex]}')" alt="" class="absolute top-0 left-0 w-full h-full bg-cover bg-center bg-no-repeat fade-in-image" />`
|
||||
`<div data-index="${selectedFeatureImageIndex}" style="background-image: url('${featureImages[selectedFeatureImageIndex]}')" alt="" class="absolute top-0 left-0 w-full h-full bg-cover bg-center bg-no-repeat fade-in" />`
|
||||
);
|
||||
|
||||
if (featureImagesContainer.current.children.length > 1) {
|
||||
@@ -116,7 +129,7 @@ function App() {
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="bg-[#151619] text-white">
|
||||
<div className="bg-[#131317] text-white">
|
||||
<div
|
||||
ref={parallaxRef}
|
||||
className="relative lg:container mx-auto p-4 xl:max-w-screen-2xl"
|
||||
@@ -342,8 +355,12 @@ function App() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="lg:container mx-auto p-4 xl:max-w-screen-2xl">
|
||||
<div className="grid grid-cols-2 gap-8">
|
||||
<div className="relative lg:container mx-auto p-4 xl:max-w-screen-2xl">
|
||||
<div className="absolute top-0 left-0 w-full h-full flex justify-center items-center">
|
||||
<img src="/images/shapes/3.svg" alt="" />
|
||||
</div>
|
||||
|
||||
<div className="relative grid grid-cols-2 gap-8">
|
||||
<div className="space-y-8">
|
||||
<div className="font-gilroy 2xl:text-7xl lg:text-5xl sm:text-4xl text-3xl text-gradient">
|
||||
Анализируем
|
||||
@@ -368,7 +385,9 @@ function App() {
|
||||
<div className="grid grid-cols-3 gap-4">
|
||||
<div className="col-span-2 space-y-4">
|
||||
<div className="p-8 space-y-6 bg-[#272730] rounded-lg">
|
||||
<p className="uppercase">Конверсия менеджеров в брони</p>
|
||||
<p className="text-xl uppercase tracking-wider">
|
||||
Конверсия менеджеров в брони
|
||||
</p>
|
||||
<div className="space-y-4">
|
||||
<div className="grid grid-cols-8 gap-4 items-center text-xl">
|
||||
<span className="col-span-3 w-[152px] whitespace-nowrap">
|
||||
@@ -401,70 +420,221 @@ function App() {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-red-500">2</div>
|
||||
<div className="bg-red-500">3</div>
|
||||
|
||||
<div className="p-8 space-y-6 bg-[#272730] rounded-lg">
|
||||
<p className="text-xl uppercase tracking-wider">
|
||||
Популярные типы квартир, %
|
||||
</p>
|
||||
<div className="flex space-x-10">
|
||||
<PieChart />
|
||||
<div className="space-y-2.5">
|
||||
<div className="flex items-center space-x-2">
|
||||
<div className="w-4 h-4 bg-[#7A31C3] rounded-full"></div>
|
||||
<p className="text-xl">Студии</p>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center space-x-2">
|
||||
<div className="w-4 h-4 bg-[#798FFF] rounded-full"></div>
|
||||
<p className="text-xl">1-к. квартиры</p>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center space-x-2">
|
||||
<div className="w-4 h-4 bg-[#D375FF] rounded-full"></div>
|
||||
<p className="text-xl">2-к. квартиры</p>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center space-x-2">
|
||||
<div className="w-4 h-4 bg-[#8742F8] rounded-full"></div>
|
||||
<p className="text-xl">3-к. квартиры</p>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center space-x-2">
|
||||
<div className="w-4 h-4 bg-[#FB57F4] rounded-full"></div>
|
||||
<p className="text-xl">4-к. квартиры</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="p-8 space-y-6 bg-[#272730] rounded-lg">
|
||||
<p className="text-xl uppercase tracking-wider">
|
||||
Воронка продаж
|
||||
</p>
|
||||
<div className="space-y-4">
|
||||
<div className="grid grid-cols-5 gap-4 items-center text-xl">
|
||||
<div className="col-span-4 bg-gradient-to-bl from-[#D375FF1A] to-[#798FFF1A] rounded flex justify-center space-x-4">
|
||||
<div className="bg-gradient-to-bl from-[#BC75FF] to-[#798FFF] w-full h-10 rounded flex justify-center items-center">
|
||||
Сеансы
|
||||
</div>
|
||||
</div>
|
||||
<span className="col-span-1 text-right w-full">100%</span>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-5 gap-4 items-center text-xl">
|
||||
<div className="col-span-4 bg-gradient-to-bl from-[#D375FF1A] to-[#798FFF1A] rounded flex justify-center space-x-4">
|
||||
<div className="bg-gradient-to-bl from-[#BC75FF] to-[#798FFF] w-[90%] h-10 rounded flex justify-center items-center">
|
||||
В избранное
|
||||
</div>
|
||||
</div>
|
||||
<span className="col-span-1 text-right w-full">
|
||||
93,47%
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-5 gap-4 items-center text-xl">
|
||||
<div className="col-span-4 bg-gradient-to-bl from-[#D375FF1A] to-[#798FFF1A] rounded flex justify-center space-x-4">
|
||||
<div className="bg-gradient-to-bl from-[#BC75FF] to-[#798FFF] w-[50%] h-10 rounded flex justify-center items-center">
|
||||
Брони
|
||||
</div>
|
||||
</div>
|
||||
<span className="col-span-1 text-right w-full">
|
||||
45,68%
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-5 gap-4 items-center text-xl">
|
||||
<div className="col-span-4 bg-gradient-to-bl from-[#D375FF1A] to-[#798FFF1A] rounded flex justify-center space-x-4">
|
||||
<div className="bg-gradient-to-bl from-[#BC75FF] to-[#798FFF] w-[35%] h-10 rounded flex justify-center items-center">
|
||||
Продажи
|
||||
</div>
|
||||
</div>
|
||||
<span className="col-span-1 text-right w-full">
|
||||
29,13%
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 space-y-4">
|
||||
<div className="bg-red-500">1</div>
|
||||
<div className="bg-red-500">2</div>
|
||||
<div className="bg-red-500">3</div>
|
||||
<div className="bg-red-500">4</div>
|
||||
<div className="bg-[#272730] rounded-lg flex flex-col justify-between items-start p-8 space-y-4">
|
||||
<div className="font-gilroy text-gradient">
|
||||
<p className="text-6xl">12</p>
|
||||
<p className="text-xl font-medium">минут</p>
|
||||
</div>
|
||||
<p className="text-xl">Среднее время сеанса</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-[#272730] rounded-lg flex flex-col justify-between items-start p-8 space-y-4">
|
||||
<div className="font-gilroy text-gradient">
|
||||
<p className="text-6xl">856</p>
|
||||
{/* <p className="text-xl font-medium">минут</p> */}
|
||||
</div>
|
||||
<p className="text-xl">
|
||||
Коммерческих предложений сформировано
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-[#272730] rounded-lg flex flex-col justify-between items-start p-8 space-y-4">
|
||||
<div className="font-gilroy text-gradient">
|
||||
<p className="text-6xl">12,41%</p>
|
||||
{/* <p className="text-xl font-medium">минут</p> */}
|
||||
</div>
|
||||
<p className="text-xl">Конверсия из сеанса в бронь</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-[#272730] rounded-lg flex flex-col justify-between items-start p-8 space-y-4">
|
||||
<div className="font-gilroy text-gradient">
|
||||
<p className="text-6xl">132,1</p>
|
||||
<p className="text-xl font-medium">млн. р.</p>
|
||||
</div>
|
||||
<p className="text-xl">Получено через Graff.estate</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="relative overflow-hidden" style={{ marginTop: 0 }}>
|
||||
<div className="lg:container mx-auto p-4 xl:max-w-screen-2xl ">
|
||||
<div className="lg:grid grid-cols-2 gap-8 items-center ">
|
||||
<div className="space-y-16">
|
||||
<p className="font-gilroy 2xl:text-6xl lg:text-5xl sm:text-4xl text-3xl text-gradient">
|
||||
<div className="relative">
|
||||
<div className="absolute -top-8 right-0">
|
||||
<img src="/images/mockup.png" alt="" />
|
||||
</div>
|
||||
<div className="relative lg:container mx-auto p-4 xl:max-w-screen-2xl">
|
||||
<div className="absolute -top-8 -left-44 w-full h-full">
|
||||
<img src="/images/shapes/4.svg" alt="" />
|
||||
</div>
|
||||
|
||||
<div className="w-[52%] space-y-16">
|
||||
<div className="space-y-14">
|
||||
<p className="font-gilroy text-2xl uppercase tracking-wider">
|
||||
Инструмент продаж поможет вам продавать удаленно
|
||||
</p>
|
||||
<div className="space-y-8">
|
||||
<p className="font-gilroy 2xl:text-2xl text-xl">
|
||||
Высокий уровень графики и полное погружение покупателя в
|
||||
процесс выбора квартиры.
|
||||
</p>
|
||||
<p className="2xl:text-xl lg:text-lg text-[#C5C7CE]">
|
||||
Покажите все преимущества вашего жилого комплекса клиенту из
|
||||
любого конца мира. Местоположение и устройство значения не
|
||||
имеют. Нужен только интернет.
|
||||
</p>
|
||||
</div>
|
||||
<button className="group 2xl:text-xl px-8 py-4 border border-[#BC75FF] text-white rounded-full flex justify-center items-center opacity-95 hover:opacity-100 transition-opacity sm:w-auto w-full">
|
||||
<span>Узнать больше</span>
|
||||
<i className="group-hover:translate-x-2 transition-transform">
|
||||
<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"
|
||||
strokeWidth="2.4"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</i>
|
||||
</button>
|
||||
<p className="font-gilroy text-5xl font-medium">
|
||||
Покажите все преимущества вашего жилого комплекса клиенту из
|
||||
любого конца мира. Местоположение и устройство значения не
|
||||
имеют.
|
||||
<br />
|
||||
Нужен только интернет.
|
||||
</p>
|
||||
<p className="text-xl">
|
||||
Высокий уровень графики и полное погружение покупателя
|
||||
<br /> в процесс выбора квартиры.
|
||||
</p>
|
||||
</div>
|
||||
<div className="lg:block hidden translate-y-20">
|
||||
<Map />
|
||||
<div className="space-y-8">
|
||||
<button className="text-xl border border-[#BC75FF] px-6 py-3 pr-3 flex items-center space-x-2 rounded-full">
|
||||
<span>Узнать больше</span>
|
||||
<svg
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M9.00002 19L16 12L9.00002 5"
|
||||
stroke="#F2F2F2"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
<button className="text-xl border border-[#BC75FF] px-6 py-3 pr-3 flex items-center space-x-2 rounded-full">
|
||||
<span>Узнать столько же</span>
|
||||
<svg
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M9.00002 19L16 12L9.00002 5"
|
||||
stroke="#F2F2F2"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
<button className="text-xl border border-[#BC75FF] px-6 py-3 pr-3 flex items-center space-x-2 rounded-full">
|
||||
<span>Узнать меньше и отупеть в край</span>
|
||||
<svg
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M9.00002 19L16 12L9.00002 5"
|
||||
stroke="#F2F2F2"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="lg:container mx-auto p-4 xl:max-w-screen-2xl">
|
||||
<div className="lg:space-y-24 space-y-12">
|
||||
<div className="lg:space-y-20 space-y-12">
|
||||
<div className="grid lg:grid-cols-2 gap-6">
|
||||
<div className="font-gilroy 2xl:text-6xl lg:text-5xl sm:text-4xl text-3xl text-gradient">
|
||||
Можем оценить
|
||||
<div className="font-gilroy 2xl:text-7xl lg:text-5xl sm:text-4xl text-3xl text-gradient">
|
||||
Оцените
|
||||
<br />
|
||||
эффективность
|
||||
<br />
|
||||
@@ -472,9 +642,9 @@ function App() {
|
||||
<br />
|
||||
инструмента продаж
|
||||
</div>
|
||||
<div className="2xl:text-xl lg:text-lg">
|
||||
<div className="2xl:text-2xl lg:text-lg">
|
||||
Мы изучили отраслевую аналитику на рынке продаж новых квартир и
|
||||
на основе данных собрали калькулятор эффективности продукта
|
||||
на основе данных собрали калькулятор эффективности продукта.
|
||||
<br />
|
||||
<br />
|
||||
Когда девелопер строит жилой комплекс используя проектное
|
||||
@@ -487,192 +657,22 @@ function App() {
|
||||
<Calc />
|
||||
</div>
|
||||
</div>
|
||||
<div className="lg:container mx-auto p-4 xl:max-w-screen-2xl">
|
||||
<div className="space-y-16">
|
||||
<div className="xl:ml-[33%]">
|
||||
<p className="font-gilroy 2xl:text-6xl lg:text-5xl sm:text-4xl text-3xl text-gradient">
|
||||
Релевантный опыт
|
||||
</p>
|
||||
</div>
|
||||
<div className="xl:grid grid-cols-3">
|
||||
<div
|
||||
className="col-span-1 sticky top-0 bottom-0 left-0 overflow-hidden h-[726px] transition-all ease-in-out duration-1000 xl:block hidden"
|
||||
style={{
|
||||
boxShadow: "inset 0 0 32px 64px #151619",
|
||||
backgroundImage: "url('/images/map2.png')",
|
||||
border: "1px solid #151619",
|
||||
backgroundSize: "2400px",
|
||||
backgroundPosition: mapPosition,
|
||||
}}
|
||||
>
|
||||
{mapCity === "Тюмень" && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ ease: "easeOut", delay: 0.25 }}
|
||||
className="font-gilroy text-2xl absolute top-[38%] left-[33%] flex flex-col justify-center items-center space-y-2"
|
||||
>
|
||||
<span>{mapCity}</span>
|
||||
<div className="w-4 h-4 rounded-full bg-white border-2 border-[#BC75FF]"></div>
|
||||
</motion.div>
|
||||
)}
|
||||
{mapCity === "Екатеринбург" && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ ease: "easeOut", delay: 0.25 }}
|
||||
className="font-gilroy text-2xl absolute top-[38%] left-[33%] flex flex-col justify-center items-center space-y-2"
|
||||
>
|
||||
<span>{mapCity}</span>
|
||||
<div className="w-4 h-4 rounded-full bg-white border-2 border-[#BC75FF]"></div>
|
||||
</motion.div>
|
||||
)}
|
||||
{mapCity === "Санкт-Петербург" && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ ease: "easeOut", delay: 0.25 }}
|
||||
className="font-gilroy text-2xl absolute top-[38%] left-[33%] flex flex-col justify-center items-center space-y-2"
|
||||
>
|
||||
<span>{mapCity}</span>
|
||||
<div className="w-4 h-4 rounded-full bg-white border-2 border-[#BC75FF]"></div>
|
||||
</motion.div>
|
||||
)}
|
||||
{mapCity === "Брянск" && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ ease: "easeOut", delay: 0.25 }}
|
||||
className="font-gilroy text-2xl absolute top-[38%] left-[33%] flex flex-col justify-center items-center space-y-2"
|
||||
>
|
||||
<span>{mapCity}</span>
|
||||
<div className="w-4 h-4 rounded-full bg-white border-2 border-[#BC75FF]"></div>
|
||||
</motion.div>
|
||||
)}
|
||||
{mapCity === "Нижний Тагил" && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ ease: "easeOut", delay: 0.25 }}
|
||||
className="font-gilroy text-2xl absolute top-[38%] left-[33%] flex flex-col justify-center items-center space-y-2"
|
||||
>
|
||||
<span>{mapCity}</span>
|
||||
<div className="w-4 h-4 rounded-full bg-white border-2 border-[#BC75FF]"></div>
|
||||
</motion.div>
|
||||
)}
|
||||
</div>
|
||||
<div className="xl:col-span-2 space-y-4">
|
||||
<ComplexCard
|
||||
image="/images/cards/card_1.jpg"
|
||||
name="ЖК «Life Резиденция»"
|
||||
location="Россия, Тюмень"
|
||||
handleClick={() => handleClickComplexCard("Тюмень")}
|
||||
/>
|
||||
<ComplexCard
|
||||
image={"/images/cards/card_2.jpg"}
|
||||
name="МФК «Re:volution towers»"
|
||||
location="Россия, Екатеринбург"
|
||||
handleClick={() => handleClickComplexCard("Екатеринбург")}
|
||||
/>
|
||||
{/* <ComplexCard
|
||||
image={"/images/cards/card_3.jpg"}
|
||||
name="Iskan Abu Dhabi"
|
||||
location="ОАЭ, Абу-Даби"
|
||||
/> */}
|
||||
<ComplexCard
|
||||
image={"/images/cards/card_4.jpg"}
|
||||
name="ЖК «Авторский квартал Машаров»"
|
||||
location="Россия, Тюмень"
|
||||
handleClick={() => handleClickComplexCard("Тюмень")}
|
||||
/>
|
||||
<ComplexCard
|
||||
image={"/images/cards/card_5.jpg"}
|
||||
name="ЖК «Айвазовский»"
|
||||
location="Россия, Тюмень"
|
||||
handleClick={() => handleClickComplexCard("Тюмень")}
|
||||
/>
|
||||
{isShowMoreComplexCards && (
|
||||
<>
|
||||
<ComplexCard
|
||||
image={"/images/cards/card_6.jpg"}
|
||||
name="ЖК «Графика»"
|
||||
location="Россия, Санкт-Петербург"
|
||||
handleClick={() =>
|
||||
handleClickComplexCard("Санкт-Петербург")
|
||||
}
|
||||
/>
|
||||
<ComplexCard
|
||||
image={"/images/cards/card_7.jpg"}
|
||||
name="ЖК «4you»"
|
||||
location="Россия, Екатеринбург"
|
||||
handleClick={() => handleClickComplexCard("Екатеринбург")}
|
||||
/>
|
||||
<ComplexCard
|
||||
image={"/images/cards/card_8.jpg"}
|
||||
name="ЖК «Уральский»"
|
||||
location="Россия, Екатеринбург"
|
||||
handleClick={() => handleClickComplexCard("Екатеринбург")}
|
||||
/>
|
||||
<ComplexCard
|
||||
image={"/images/cards/card_9.jpg"}
|
||||
name="ЖК «Новая Атмосфера»"
|
||||
location="Россия, Брянск"
|
||||
handleClick={() => handleClickComplexCard("Брянск")}
|
||||
/>
|
||||
<ComplexCard
|
||||
image={"/images/cards/card_10.jpg"}
|
||||
name="ЖК «Тринити»"
|
||||
location="Россия, Екатеринбург"
|
||||
handleClick={() => handleClickComplexCard("Екатеринбург")}
|
||||
/>
|
||||
<ComplexCard
|
||||
image={"/images/cards/card_11.jpg"}
|
||||
name="ЖК «Дом на Опалихинской»"
|
||||
location="Россия, Екатеринбург"
|
||||
handleClick={() => handleClickComplexCard("Екатеринбург")}
|
||||
/>
|
||||
<ComplexCard
|
||||
image={"/images/cards/card_12.jpg"}
|
||||
name="ЖК «Свой Круг»"
|
||||
location="Россия, Тюмень"
|
||||
handleClick={() => handleClickComplexCard("Тюмень")}
|
||||
/>
|
||||
<ComplexCard
|
||||
image={"/images/cards/card_13.jpg"}
|
||||
name="ЖК «Александровский»"
|
||||
location="Россия, Нижний Тагил"
|
||||
handleClick={() => handleClickComplexCard("Нижний Тагил")}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
|
||||
{!isShowMoreComplexCards && (
|
||||
<button
|
||||
className="2xl:text-xl flex items-center justify-center space-x-2 opacity-95 hover:opacity-100 transition-opacity lg:w-auto w-full"
|
||||
onClick={() => setIsShowMoreComplexCards(true)}
|
||||
>
|
||||
<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"
|
||||
strokeWidth="2.4"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
)}
|
||||
<div className="lg:container mx-auto p-4 xl:max-w-screen-2xl">
|
||||
<div className="grid grid-cols-2 gap-8">
|
||||
<div className="bg-[#22222A] rounded-lg">
|
||||
<div
|
||||
className="h-[404px] bg-no-repeat bg-cover bg-center"
|
||||
style={{ backgroundImage: `url('/images/cards/1.jpg')` }}
|
||||
></div>
|
||||
<div className="p-8 space-y-2">
|
||||
<p className="text-4xl">ЖК «Life Резиденция»</p>
|
||||
<p className="text-[#ABABBA]">Россия, Тюмень.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-[#1C1D21]">
|
||||
<div className="lg:container mx-auto p-4 xl:max-w-screen-2xl">
|
||||
<div className="space-y-16 mt-12 mb-8">
|
||||
|
||||
+101
-24
@@ -145,11 +145,12 @@ function Calc() {
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="lg:grid xl:grid-cols-3 lg:grid-cols-2 2xl:gap-12 lg:gap-6 lg:space-y-0 space-y-12">
|
||||
<div className="space-y-4">
|
||||
<p className="2xl:text-3xl md:text-2xl text-xl font-gilroy pb-2">
|
||||
<div className="lg:grid xl:grid-cols-3 lg:grid-cols-2 2xl:gap-16 lg:gap-6 lg:space-y-0 space-y-12">
|
||||
<div className="space-y-6">
|
||||
<p className="2xl:text-3xl md:text-2xl text-xl font-gilroy uppercase tracking-wider">
|
||||
Данные по региону
|
||||
</p>
|
||||
|
||||
<div className="space-y-1">
|
||||
<p className="2xl:text-base text-sm text-[#C5C7CE]">Регион</p>
|
||||
<SearchableSelect
|
||||
@@ -158,8 +159,9 @@ function Calc() {
|
||||
handleSelect={(option) => selectRegion(option.id)}
|
||||
/>
|
||||
</div>
|
||||
<div className="bg-[#1C1D21] 2xl:p-6 p-4 space-y-4 rounded">
|
||||
<div className="grid grid-cols-2 gap-6 border-b-2 pb-4 border-[#2E3038]">
|
||||
|
||||
<div className="bg-[#272730] 2xl:p-6 p-4 space-y-4 rounded">
|
||||
<div className="grid grid-cols-2 gap-6 border-b-2 pb-4 border-[#454554]">
|
||||
<p className="2xl:text-base text-sm text-[#C5C7CE]">
|
||||
Средняя площадь
|
||||
<br />
|
||||
@@ -173,7 +175,7 @@ function Calc() {
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-6 border-b-2 pb-4 border-[#2E3038]">
|
||||
<div className="grid grid-cols-2 gap-6 border-b-2 pb-4 border-[#454554]">
|
||||
<p className="2xl:text-base text-sm text-[#C5C7CE]">
|
||||
Средняя площадь
|
||||
<br />
|
||||
@@ -187,7 +189,7 @@ function Calc() {
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-6 border-b-2 pb-4 border-[#2E3038]">
|
||||
<div className="grid grid-cols-2 gap-6 border-b-2 pb-4 border-[#454554]">
|
||||
<p className="2xl:text-base text-sm text-[#C5C7CE]">
|
||||
Средняя стоимость
|
||||
<br />
|
||||
@@ -205,17 +207,22 @@ function Calc() {
|
||||
Установлены усредненные показатели по региону
|
||||
<br />
|
||||
Источник:{" "}
|
||||
<a href="https://наш.дом.рф" target="_blank">
|
||||
<a
|
||||
href="https://наш.дом.рф"
|
||||
target="_blank"
|
||||
className="border-b border-[#73788C]"
|
||||
>
|
||||
наш.дом.рф
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<p className="2xl:text-3xl md:text-2xl text-xl font-gilroy pb-2">
|
||||
<div className="space-y-6">
|
||||
<p className="2xl:text-3xl md:text-2xl text-xl font-gilroy uppercase tracking-wider">
|
||||
Статистика продаж
|
||||
</p>
|
||||
|
||||
<div className="space-y-1">
|
||||
<p className="2xl:text-base text-sm text-[#C5C7CE]">
|
||||
Очных консультаций в месяц
|
||||
@@ -223,13 +230,13 @@ function Calc() {
|
||||
<input
|
||||
type="text"
|
||||
pattern="^\d+$"
|
||||
className="px-5 py-3.5 w-full outline-none placeholder:text-white bg-[#2E3038] rounded border border-transparent focus:border-[#BC75FF] transition-colors"
|
||||
className="px-5 py-3.5 w-full outline-none placeholder:text-white rounded border border-transparent transition-colors bg-[#454554] focus:border-[#BC75FF]"
|
||||
value={consultsPerMonth}
|
||||
onChange={handleChangeConsultsPerMonth}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="bg-[#1C1D21] 2xl:p-6 p-4 2xl:space-y-[29px] space-y-[25px] rounded">
|
||||
<div className="bg-[#272730] 2xl:p-6 p-4 2xl:space-y-[29px] space-y-[25px] rounded">
|
||||
<div className="space-y-2">
|
||||
<div className="flex justify-between">
|
||||
<span className="2xl:text-base text-sm text-[#C5C7CE]">
|
||||
@@ -237,7 +244,7 @@ function Calc() {
|
||||
</span>
|
||||
<span className="text-xl">100%</span>
|
||||
</div>
|
||||
<div className="bg-[#23242A] rounded">
|
||||
<div className="bg-[#454554] rounded">
|
||||
<div className="bg-gradient mx-auto h-10 rounded flex justify-center items-center">
|
||||
<span className="text-xl">{consultsPerMonth}</span>
|
||||
</div>
|
||||
@@ -251,7 +258,7 @@ function Calc() {
|
||||
</span>
|
||||
<span className="text-xl">{!isEnabled ? "30" : "48"}%</span>
|
||||
</div>
|
||||
<div className="bg-[#23242A] rounded">
|
||||
<div className="bg-[#454554] rounded">
|
||||
<div
|
||||
className={[
|
||||
"bg-gradient mx-auto h-10 rounded flex justify-center items-center transition-all",
|
||||
@@ -270,7 +277,7 @@ function Calc() {
|
||||
</span>
|
||||
<span className="text-xl">{!isEnabled ? "10" : "22"}%</span>
|
||||
</div>
|
||||
<div className="bg-[#23242A] rounded">
|
||||
<div className="bg-[#454554] rounded">
|
||||
<div
|
||||
className={[
|
||||
"bg-gradient mx-auto h-10 rounded flex justify-center items-center transition-all",
|
||||
@@ -284,13 +291,82 @@ function Calc() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4 xl:col-span-1 col-span-2">
|
||||
<p className="2xl:text-3xl md:text-2xl text-xl font-gilroy pb-2">
|
||||
<div className="space-y-6 xl:col-span-1 col-span-2">
|
||||
<p className="2xl:text-3xl md:text-2xl text-xl font-gilroy uppercase tracking-wider">
|
||||
Результаты расчета
|
||||
</p>
|
||||
<div className="xl:space-y-4 xl:block grid lg:grid-cols-2 gap-4">
|
||||
<div className="space-y-2 lg:border-t-2 border-[#2E3038] pt-4">
|
||||
<p className="2xl:text-lg text-sm text-[#C5C7CE] 2xl:pb-2 xl:pb-4 pb-2">
|
||||
|
||||
<div className="space-y-6">
|
||||
<div className="border-b-2 border-[#2E3038] pb-6 space-y-6">
|
||||
<p className="text-[#C5C7CE]">Срок реализации</p>
|
||||
<div className="grid grid-cols-2">
|
||||
<div className="space-y-1">
|
||||
<p
|
||||
className={[
|
||||
"font-gilroy text-7xl transition-colors",
|
||||
isEnabled && "text-[#D375FF]",
|
||||
].join(" ")}
|
||||
>
|
||||
{implementationTime}
|
||||
</p>
|
||||
<p className="text-xl">{implementationTimeCase}</p>
|
||||
</div>
|
||||
{isEnabled && (
|
||||
<p className="text-xl fade-in">
|
||||
На{" "}
|
||||
<span className="text-[#D375FF]">
|
||||
{diffImplementationTime} {diffImplementationTimeCase}
|
||||
</span>{" "}
|
||||
вы сократили срок реализации проекта
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-6">
|
||||
<p className="text-[#C5C7CE]">Месячный доход</p>
|
||||
<div className="grid grid-cols-2">
|
||||
<div className="space-y-1">
|
||||
<p
|
||||
className={[
|
||||
"font-gilroy text-7xl transition-colors",
|
||||
isEnabled && "text-[#D375FF]",
|
||||
].join(" ")}
|
||||
>
|
||||
{profitPerMonth}
|
||||
</p>
|
||||
<p className="text-xl">млн. р.</p>
|
||||
</div>
|
||||
{isEnabled && (
|
||||
<p className="text-xl fade-in">
|
||||
На{" "}
|
||||
<span className="text-[#D375FF]">
|
||||
{diffProfitPerMonth} млн. р.
|
||||
</span>{" "}
|
||||
в месяц вы заработали больше
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="pt-3.5">
|
||||
<button
|
||||
className={[
|
||||
"w-full px-6 py-3 rounded-full",
|
||||
isEnabled ? "bg-[#2E2E38]" : "bg-gradient",
|
||||
].join(" ")}
|
||||
onClick={() => setIsEnabled(!isEnabled)}
|
||||
>
|
||||
{isEnabled
|
||||
? "Отключить себя от интернета и пойти погулять"
|
||||
: "Использовать инсулин 💉"}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* <div className="xl:space-y-6 xl:block grid lg:grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<p className="2xl:text-base text-sm text-[#C5C7CE] 2xl:pb-2 xl:pb-4 pb-2">
|
||||
Срок реализации
|
||||
</p>
|
||||
<div className="grid grid-cols-2">
|
||||
@@ -324,7 +400,7 @@ function Calc() {
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-2 border-t-2 border-[#2E3038] pt-4">
|
||||
<p className="2xl:text-lg text-sm text-[#C5C7CE] 2xl:pb-2 xl:pb-4 pb-2">
|
||||
<p className="2xl:text-base text-sm text-[#C5C7CE] 2xl:pb-2 xl:pb-4 pb-2">
|
||||
Месячный доход
|
||||
</p>
|
||||
<div className="grid grid-cols-2">
|
||||
@@ -355,8 +431,9 @@ function Calc() {
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="xl:w-auto md:w-1/2 w-full">
|
||||
</div> */}
|
||||
|
||||
{/* <div className="xl:w-auto md:w-1/2 w-full pt-10">
|
||||
<button
|
||||
className={[
|
||||
"w-full 2xl:text-xl py-4 px-8 rounded-full xl:mt-0 mt-10",
|
||||
@@ -366,7 +443,7 @@ function Calc() {
|
||||
>
|
||||
{!isEnabled ? "Использовать инструмент" : "Отключить инструмент"}
|
||||
</button>
|
||||
</div>
|
||||
</div> */}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -9,9 +9,9 @@
|
||||
#7a31c3 0,
|
||||
#7a31c3 36%,
|
||||
#fb57f4 0,
|
||||
#fb57f4 42%,
|
||||
#fb57f4 43%,
|
||||
#8742f8 0,
|
||||
#8742f8 52%,
|
||||
#8742f8 53%,
|
||||
#d375ff 0,
|
||||
#d375ff 70%,
|
||||
#798fff 0,
|
||||
|
||||
@@ -3,10 +3,10 @@ import "./PieChart.css";
|
||||
|
||||
function PieChart() {
|
||||
return (
|
||||
<figure className="pie-chart relative text-xs sm:w-[168px] sm:h-[168px] w-[128px] h-[128px]">
|
||||
<figure className="pie-chart relative sm:w-[180px] sm:h-[180px] w-[128px] h-[128px]">
|
||||
<span className="absolute sm:top-[40px] sm:left-[40px] top-[28px] left-[26px]">36,27%</span>
|
||||
<span className="absolute sm:top-[38px] sm:left-[116px] top-[28px] left-[86px]">6,22%</span>
|
||||
<span className="absolute sm:top-[66px] sm:left-[122px] top-[50px] left-[90px]">9,95%</span>
|
||||
<span className="absolute sm:top-[35px] sm:left-[112px] top-[28px] left-[86px]">6,22%</span>
|
||||
<span className="absolute sm:top-[64px] sm:left-[118px] top-[50px] left-[90px]">9,95%</span>
|
||||
<span className="absolute sm:top-[108px] sm:left-[108px] top-[82px] left-[76px]">17,93%</span>
|
||||
<span className="absolute sm:top-[114px] sm:left-[36px] top-[84px] left-[20px]">29,64%</span>
|
||||
</figure>
|
||||
|
||||
@@ -77,7 +77,7 @@ function SearchableSelect({
|
||||
<div className="relative space-y-2">
|
||||
<div
|
||||
tabIndex={-1}
|
||||
className="flex items-center cursor-pointer rounded overflow-hidden border border-transparent bg-[#2E3038]"
|
||||
className="flex items-center cursor-pointer rounded overflow-hidden border border-transparent bg-[#454554]"
|
||||
onClick={() => setIsOpen(!isOpen)}
|
||||
>
|
||||
<input
|
||||
|
||||
@@ -61,7 +61,7 @@ body {
|
||||
@apply bg-gradient-to-bl from-[#BC75FF] to-[#798FFF] text-transparent bg-clip-text;
|
||||
}
|
||||
|
||||
.fade-in-image {
|
||||
.fade-in {
|
||||
animation: fadeIn 0.5s;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user