upd main gradient
This commit is contained in:
+13
-6
@@ -122,17 +122,24 @@ html {
|
|||||||
-webkit-text-fill-color: transparent;
|
-webkit-text-fill-color: transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.text-gradient-saturated {
|
||||||
|
background: linear-gradient(45deg, #7a55ff 0%, #c932e8 75%, #ff79d2 95%);
|
||||||
|
background-clip: text;
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
.bg-gradient {
|
.bg-gradient {
|
||||||
background: linear-gradient(87deg, #798fff 15%, #d375ff 100%);
|
background: linear-gradient(87deg, #798fff 15%, #d375ff 100%);
|
||||||
}
|
}
|
||||||
|
|
||||||
.bg-gradient-saturated {
|
.bg-gradient-saturated {
|
||||||
background: linear-gradient(45deg, #7A55FF 0%, #C932E8 75%, #FF79D2 95%);
|
background: linear-gradient(45deg, #7a55ff 0%, #c932e8 75%, #ff79d2 95%);
|
||||||
}
|
}
|
||||||
|
|
||||||
.upside-table-mask {
|
.upside-table-mask {
|
||||||
-webkit-mask-image:url('/img/cases/UpsideTowers/table_mask.png');
|
-webkit-mask-image: url("/img/cases/UpsideTowers/table_mask.png");
|
||||||
mask-image: url('/img/cases/UpsideTowers/table_mask.png');
|
mask-image: url("/img/cases/UpsideTowers/table_mask.png");
|
||||||
-webkit-mask-repeat: no-repeat;
|
-webkit-mask-repeat: no-repeat;
|
||||||
mask-repeat: no-repeat;
|
mask-repeat: no-repeat;
|
||||||
-webkit-mask-size: 100% 100%;
|
-webkit-mask-size: 100% 100%;
|
||||||
@@ -142,8 +149,8 @@ html {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.upside-tablet-mask {
|
.upside-tablet-mask {
|
||||||
-webkit-mask-image:url('/img/cases/UpsideTowers/tablet_mask.png');
|
-webkit-mask-image: url("/img/cases/UpsideTowers/tablet_mask.png");
|
||||||
mask-image: url('/img/cases/UpsideTowers/tablet_mask.png');
|
mask-image: url("/img/cases/UpsideTowers/tablet_mask.png");
|
||||||
-webkit-mask-repeat: no-repeat;
|
-webkit-mask-repeat: no-repeat;
|
||||||
mask-repeat: no-repeat;
|
mask-repeat: no-repeat;
|
||||||
-webkit-mask-size: 100% 100%;
|
-webkit-mask-size: 100% 100%;
|
||||||
|
|||||||
@@ -222,7 +222,7 @@ export function FeedbackForm() {
|
|||||||
) : (
|
) : (
|
||||||
<div className="bg-[#37393B99] aspect-[643/480] w-full rounded-2xl flex justify-center items-center">
|
<div className="bg-[#37393B99] aspect-[643/480] w-full rounded-2xl flex justify-center items-center">
|
||||||
<div className="flex gap-3 justify-center items-center">
|
<div className="flex gap-3 justify-center items-center">
|
||||||
<div className="bg-gradient p-3 rounded-full">
|
<div className="bg-gradient-saturated p-3 rounded-full">
|
||||||
<div className="text-white lg:size-[1.667vw] size-6">
|
<div className="text-white lg:size-[1.667vw] size-6">
|
||||||
<CheckIcon />
|
<CheckIcon />
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -143,7 +143,7 @@ export function Header() {
|
|||||||
<div className="md:justify-end flex flex-1 justify-center">
|
<div className="md:justify-end flex flex-1 justify-center">
|
||||||
<Link
|
<Link
|
||||||
href={"/form"}
|
href={"/form"}
|
||||||
className="btnm bg-gradient font-medium lg:px-[1.667vw] lg:py-[1.181vw] py-[17px] px-6 text-nowrap lg:rounded-[1.111vw] rounded-2xl flex items-center"
|
className="btnm bg-gradient-saturated font-medium lg:px-[1.667vw] lg:py-[1.181vw] py-[17px] px-6 text-nowrap lg:rounded-[1.111vw] rounded-2xl flex items-center"
|
||||||
>
|
>
|
||||||
Оставить заявку
|
Оставить заявку
|
||||||
</Link>
|
</Link>
|
||||||
@@ -257,7 +257,7 @@ export function Header() {
|
|||||||
<a
|
<a
|
||||||
target="_blank"
|
target="_blank"
|
||||||
href={"https://dprofile.ru/graff.estate"}
|
href={"https://dprofile.ru/graff.estate"}
|
||||||
className="max-xl:hidden rounded-[20px] bg-[#37393B99] backdrop-blur-[20px] hover:bg-[#232425] py-5 pl-[63px] pr-[33px] right-5 fixed z-[2] top-5 overflow-clip bg-[url(/img/components/header/dp.png)] bg-no-repeat bg-right-bottom"
|
className="max-lg:hidden rounded-[20px] bg-[#37393B99] backdrop-blur-[20px] hover:bg-[#232425] py-5 pl-[63px] pr-[33px] right-5 fixed z-[2] top-5 overflow-clip bg-[url(/img/components/header/dp.png)] bg-no-repeat bg-right-bottom"
|
||||||
>
|
>
|
||||||
<img
|
<img
|
||||||
src={"/img/components/header/show_case.png"}
|
src={"/img/components/header/show_case.png"}
|
||||||
|
|||||||
@@ -42,7 +42,7 @@ export function ArticleButtonLinkInput({
|
|||||||
{link && title && (
|
{link && title && (
|
||||||
<Link
|
<Link
|
||||||
href={link}
|
href={link}
|
||||||
className="bg-gradient btnm w-fit flex gap-2 items-center px-6 py-4 font-medium rounded-2xl"
|
className="bg-gradient-saturated btnm w-fit flex gap-2 items-center px-6 py-4 font-medium rounded-2xl"
|
||||||
>
|
>
|
||||||
{title ?? "Название кнопки"}
|
{title ?? "Название кнопки"}
|
||||||
<span className="text-white lg:size-[1.111vw] size-4">
|
<span className="text-white lg:size-[1.111vw] size-4">
|
||||||
|
|||||||
@@ -17,7 +17,7 @@ export function ArticleFormActions({
|
|||||||
<>
|
<>
|
||||||
<div className="space-y-2 absolute left-7 top-5 z-[2]">
|
<div className="space-y-2 absolute left-7 top-5 z-[2]">
|
||||||
<button
|
<button
|
||||||
className="flex items-center gap-2 lg:py-[0.556vw] lg:px-[0.833vw] py-2 px-3 bg-gradient disabled:bg-[#232425] group disabled:bg-none lg:rounded-[0.833vw] rounded-xl cursor-pointer"
|
className="flex items-center gap-2 lg:py-[0.556vw] lg:px-[0.833vw] py-2 px-3 bg-gradient-saturated disabled:bg-[#232425] group disabled:bg-none lg:rounded-[0.833vw] rounded-xl cursor-pointer"
|
||||||
disabled={disabled}
|
disabled={disabled}
|
||||||
onClick={() => handleSave(false)}
|
onClick={() => handleSave(false)}
|
||||||
>
|
>
|
||||||
|
|||||||
@@ -55,7 +55,7 @@ function CookiesPopup() {
|
|||||||
</div>
|
</div>
|
||||||
<Button
|
<Button
|
||||||
onClick={handlePopupClick}
|
onClick={handlePopupClick}
|
||||||
className="flex items-center gap-x-1 w-full justify-center btns bg-gradient rounded-xl 2xl:py-[0.556vw] py-2 hover:opacity-80 transition-opacity cursor-pointer"
|
className="flex items-center gap-x-1 w-full justify-center btns bg-gradient-saturated rounded-xl 2xl:py-[0.556vw] py-2 hover:opacity-80 transition-opacity cursor-pointer"
|
||||||
>
|
>
|
||||||
Принять
|
Принять
|
||||||
</Button>
|
</Button>
|
||||||
|
|||||||
@@ -27,7 +27,7 @@ function FeedbackModal({ id }: { id: string }) {
|
|||||||
return (
|
return (
|
||||||
<div className="fixed top-[50%] translate-y-[-50%] flex md:flex-row flex-col md:max-w-[695px] max-w-[422px] max-[360px]:max-w-[340px] z-[15] md:p-[48px] p-[32px] max-[360px]:p-[24px] bg-[#37393B99] backdrop-blur-xl backdrop-opacity-60 rounded-2xl">
|
<div className="fixed top-[50%] translate-y-[-50%] flex md:flex-row flex-col md:max-w-[695px] max-w-[422px] max-[360px]:max-w-[340px] z-[15] md:p-[48px] p-[32px] max-[360px]:p-[24px] bg-[#37393B99] backdrop-blur-xl backdrop-opacity-60 rounded-2xl">
|
||||||
<div className="flex md:flex-col flex-row md:justify-center items-center md:max-w-[200px] md:gap-y-[16px] gap-x-[24px]">
|
<div className="flex md:flex-col flex-row md:justify-center items-center md:max-w-[200px] md:gap-y-[16px] gap-x-[24px]">
|
||||||
<div className="p-3 rounded-full bg-gradient translate-x-[4px]">
|
<div className="p-3 rounded-full bg-gradient-saturated translate-x-[4px]">
|
||||||
<div className="z-10 absolute top-[-4px] left-[-4.3px] w-[56px] h-[56px] rounded-full bg-gradient-to-r from-[#6078F299] to-[#C868F599]" />
|
<div className="z-10 absolute top-[-4px] left-[-4.3px] w-[56px] h-[56px] rounded-full bg-gradient-to-r from-[#6078F299] to-[#C868F599]" />
|
||||||
<div className="text-white lg:size-[1.389vw] size-4 relative z-20">
|
<div className="text-white lg:size-[1.389vw] size-4 relative z-20">
|
||||||
<CheckIcon />
|
<CheckIcon />
|
||||||
|
|||||||
@@ -11,7 +11,7 @@ export function FormModalHeader({
|
|||||||
return (
|
return (
|
||||||
<div className="flex justify-end top-4 right-4 h-[60px] w-full items-end absolute z-[1]">
|
<div className="flex justify-end top-4 right-4 h-[60px] w-full items-end absolute z-[1]">
|
||||||
<button
|
<button
|
||||||
className="disabled:bg-transparent bg-gradient disabled:bg-none flex gap-2 items-center p-4 rounded-2xl cursor-pointer"
|
className="disabled:bg-transparent bg-gradient-saturated disabled:bg-none flex gap-2 items-center p-4 rounded-2xl cursor-pointer"
|
||||||
disabled={disabled}
|
disabled={disabled}
|
||||||
onClick={submitHandler}
|
onClick={submitHandler}
|
||||||
>
|
>
|
||||||
|
|||||||
@@ -172,7 +172,7 @@ export default function QuestionFormModal({
|
|||||||
) : (
|
) : (
|
||||||
<div className="bg-[#37393B99] aspect-[643/480] w-full rounded-2xl flex justify-center items-center">
|
<div className="bg-[#37393B99] aspect-[643/480] w-full rounded-2xl flex justify-center items-center">
|
||||||
<div className="flex gap-3 justify-center items-center">
|
<div className="flex gap-3 justify-center items-center">
|
||||||
<div className="bg-gradient p-3 rounded-full">
|
<div className="bg-gradient-saturated p-3 rounded-full">
|
||||||
<div className="text-white lg:size-[1.667vw] size-6">
|
<div className="text-white lg:size-[1.667vw] size-6">
|
||||||
<CheckIcon />
|
<CheckIcon />
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -57,7 +57,7 @@ function TelegramPopup() {
|
|||||||
href={"https://t.me/graffestate"}
|
href={"https://t.me/graffestate"}
|
||||||
target="_blank"
|
target="_blank"
|
||||||
onClick={handlePopupClick}
|
onClick={handlePopupClick}
|
||||||
className="flex items-center gap-x-1 w-full justify-center btns bg-gradient 2xl:rounded-[0.886vw] rounded-xl 2xl:py-[0.556vw] py-2 hover:opacity-80 transition-opacity"
|
className="flex items-center gap-x-1 w-full justify-center btns bg-gradient-saturated 2xl:rounded-[0.886vw] rounded-xl 2xl:py-[0.556vw] py-2 hover:opacity-80 transition-opacity"
|
||||||
>
|
>
|
||||||
Перейти
|
Перейти
|
||||||
</Link>
|
</Link>
|
||||||
|
|||||||
@@ -95,7 +95,7 @@ export function ArticleSyncPage({ slug }: { slug: string }) {
|
|||||||
) : block.type === "ButtonLink" ? (
|
) : block.type === "ButtonLink" ? (
|
||||||
<Link
|
<Link
|
||||||
href={block.link}
|
href={block.link}
|
||||||
className="bg-gradient btnm w-fit flex gap-3 items-center px-6 py-4 rounded-2xl"
|
className="bg-gradient-saturated btnm w-fit flex gap-3 items-center px-6 py-4 rounded-2xl"
|
||||||
>
|
>
|
||||||
{block.title}
|
{block.title}
|
||||||
<div className="text-white lg:size-[1.111vw] size-4">
|
<div className="text-white lg:size-[1.111vw] size-4">
|
||||||
|
|||||||
@@ -94,7 +94,7 @@ export function ArticlesList() {
|
|||||||
</div>
|
</div>
|
||||||
<Link
|
<Link
|
||||||
href={"https://t.me/graffestate"}
|
href={"https://t.me/graffestate"}
|
||||||
className="bg-gradient lg:rounded-[1.111vw] rounded-2xl p-[1.111vw] pl-[1.667vw] flex items-center w-fit lg:gap-[0.556vw] gap-2 group relative cursor-pointer"
|
className="bg-gradient-saturated lg:rounded-[1.111vw] rounded-2xl p-[1.111vw] pl-[1.667vw] flex items-center w-fit lg:gap-[0.556vw] gap-2 group relative cursor-pointer"
|
||||||
>
|
>
|
||||||
<div className="group-hover:bg-black/10 absolute top-0 left-0 w-full h-full rounded-2xl transition-colors" />
|
<div className="group-hover:bg-black/10 absolute top-0 left-0 w-full h-full rounded-2xl transition-colors" />
|
||||||
<div className="btnm font-medium z-[1]">В телеграм</div>
|
<div className="btnm font-medium z-[1]">В телеграм</div>
|
||||||
|
|||||||
@@ -134,7 +134,7 @@ export function Calculator() {
|
|||||||
Оцените эффективность
|
Оцените эффективность
|
||||||
<br />
|
<br />
|
||||||
инструмента
|
инструмента
|
||||||
<span className="text-gradient"> GRAFF.estate</span>
|
<span className="text-gradient-saturated"> GRAFF.estate</span>
|
||||||
</Title>
|
</Title>
|
||||||
<div className="md:flex gap-x-[0.833vw] gap-y-4 md:items-end grid relative max-md:bg-[#232425B8] max-md:rounded-[25px] max-md:p-4 max-md:pt-10 w-full lg:justify-center md:max-lg:justify-stretch max-md:order-2">
|
<div className="md:flex gap-x-[0.833vw] gap-y-4 md:items-end grid relative max-md:bg-[#232425B8] max-md:rounded-[25px] max-md:p-4 max-md:pt-10 w-full lg:justify-center md:max-lg:justify-stretch max-md:order-2">
|
||||||
{selectedRegion && (
|
{selectedRegion && (
|
||||||
|
|||||||
@@ -73,7 +73,7 @@ export function Clients({ showTitle = true }: { showTitle?: boolean }) {
|
|||||||
<div className="flex justify-between items-center">
|
<div className="flex justify-between items-center">
|
||||||
{showTitle && (
|
{showTitle && (
|
||||||
<Title className="mx-auto">
|
<Title className="mx-auto">
|
||||||
<span className="text-gradient">
|
<span className="text-gradient-saturated">
|
||||||
{count !== undefined && getCompaniesCount(count)}
|
{count !== undefined && getCompaniesCount(count)}
|
||||||
</span>{" "}
|
</span>{" "}
|
||||||
уже внедрили наш продукт в свою цепочку продаж
|
уже внедрили наш продукт в свою цепочку продаж
|
||||||
|
|||||||
@@ -31,7 +31,9 @@ export function PresentationDesktop() {
|
|||||||
<div className="mt-[100px] mb-[240px] max-lg:hidden relative">
|
<div className="mt-[100px] mb-[240px] max-lg:hidden relative">
|
||||||
<Title className="mb-16">
|
<Title className="mb-16">
|
||||||
Интерактивная презентация{" "}
|
Интерактивная презентация{" "}
|
||||||
<span className="text-gradient">улучшает опыт выбора недвижимости</span>{" "}
|
<span className="text-gradient-saturated">
|
||||||
|
улучшает опыт выбора недвижимости
|
||||||
|
</span>{" "}
|
||||||
и увеличивает темпы продаж квартир в жилом комплексе
|
и увеличивает темпы продаж квартир в жилом комплексе
|
||||||
</Title>
|
</Title>
|
||||||
<div className="relative h-[233.334vw]" ref={container}>
|
<div className="relative h-[233.334vw]" ref={container}>
|
||||||
|
|||||||
@@ -67,7 +67,7 @@ export function PresentationMini() {
|
|||||||
<div ref={titleContainer}>
|
<div ref={titleContainer}>
|
||||||
<Title>
|
<Title>
|
||||||
Интерактивная презентация{" "}
|
Интерактивная презентация{" "}
|
||||||
<span className="text-gradient">
|
<span className="text-gradient-saturated">
|
||||||
улучшает опыт выбора недвижимости
|
улучшает опыт выбора недвижимости
|
||||||
</span>{" "}
|
</span>{" "}
|
||||||
и увеличивает темпы продаж
|
и увеличивает темпы продаж
|
||||||
|
|||||||
@@ -60,7 +60,7 @@ export function Projects({
|
|||||||
{title && (
|
{title && (
|
||||||
<Title>
|
<Title>
|
||||||
За 15 лет работы мы реализовали{" "}
|
За 15 лет работы мы реализовали{" "}
|
||||||
<span className="text-gradient">
|
<span className="text-gradient-saturated">
|
||||||
{projects && getProjectsCount(projects?.length)}{" "}
|
{projects && getProjectsCount(projects?.length)}{" "}
|
||||||
для застройщиков
|
для застройщиков
|
||||||
</span>{" "}
|
</span>{" "}
|
||||||
|
|||||||
@@ -26,8 +26,12 @@ export function Statistics({ customTitle = false }: { customTitle?: boolean }) {
|
|||||||
{!customTitle && (
|
{!customTitle && (
|
||||||
<Title>
|
<Title>
|
||||||
Мы разрабатываем
|
Мы разрабатываем
|
||||||
<span className="text-gradient"> эффективный продукт,</span> которым
|
<span className="text-gradient-saturated">
|
||||||
пользуются уже {count !== undefined && getCompaniesCount(count)}
|
{" "}
|
||||||
|
эффективный продукт,
|
||||||
|
</span>{" "}
|
||||||
|
которым пользуются уже{" "}
|
||||||
|
{count !== undefined && getCompaniesCount(count)}
|
||||||
</Title>
|
</Title>
|
||||||
)}
|
)}
|
||||||
<div
|
<div
|
||||||
|
|||||||
@@ -48,12 +48,17 @@ export function Streaming() {
|
|||||||
>
|
>
|
||||||
<Title className="max-md:hidden select-none">
|
<Title className="max-md:hidden select-none">
|
||||||
Уникальная технология
|
Уникальная технология
|
||||||
<span className="text-gradient"> удаленной демонстрации</span>{" "}
|
<span className="text-gradient-saturated">
|
||||||
|
{" "}
|
||||||
|
удаленной демонстрации
|
||||||
|
</span>{" "}
|
||||||
дает возможность презентовать объект покупателю из любой точки
|
дает возможность презентовать объект покупателю из любой точки
|
||||||
мира
|
мира
|
||||||
</Title>
|
</Title>
|
||||||
<Title headerLevel={2} className="md:hidden text-center select-none">
|
<Title headerLevel={2} className="md:hidden text-center select-none">
|
||||||
<span className="text-gradient">Удаленная демонстрация — </span>
|
<span className="text-gradient-saturated">
|
||||||
|
Удаленная демонстрация —{" "}
|
||||||
|
</span>
|
||||||
презентуйте объект покупателю из любой точки мира
|
презентуйте объект покупателю из любой точки мира
|
||||||
</Title>
|
</Title>
|
||||||
<div
|
<div
|
||||||
@@ -95,7 +100,7 @@ export function Streaming() {
|
|||||||
</p>
|
</p>
|
||||||
<Link
|
<Link
|
||||||
href={"/form"}
|
href={"/form"}
|
||||||
className="btnm font-medium group-hover:scale-105 duration-500 lg:px-[1.667vw] lg:py-[1.181vw] px-6 py-[17px] transition-transform lg:rounded-[0.833vw] rounded-xl bg-gradient"
|
className="btnm font-medium group-hover:scale-105 duration-500 lg:px-[1.667vw] lg:py-[1.181vw] px-6 py-[17px] transition-transform lg:rounded-[0.833vw] rounded-xl bg-gradient-saturated"
|
||||||
>
|
>
|
||||||
Оставить заявку
|
Оставить заявку
|
||||||
</Link>
|
</Link>
|
||||||
|
|||||||
@@ -59,7 +59,7 @@ export function StreamingProject({
|
|||||||
</div>
|
</div>
|
||||||
<div className="lg:hidden absolute right-4 bottom-4">
|
<div className="lg:hidden absolute right-4 bottom-4">
|
||||||
<Link
|
<Link
|
||||||
className="bg-gradient btns flex gap-2 items-center px-3 py-2 font-medium rounded-xl"
|
className="bg-gradient-saturated btns flex gap-2 items-center px-3 py-2 font-medium rounded-xl"
|
||||||
href={streaming.find((s) => s.title === title)?.url ?? "/"}
|
href={streaming.find((s) => s.title === title)?.url ?? "/"}
|
||||||
>
|
>
|
||||||
Смотреть
|
Смотреть
|
||||||
|
|||||||
@@ -42,7 +42,7 @@ export function InterierConfiguratorCard({ slide }: { slide: number }) {
|
|||||||
alt=""
|
alt=""
|
||||||
className="rounded-full w-[4.444vw] aspect-square"
|
className="rounded-full w-[4.444vw] aspect-square"
|
||||||
/>
|
/>
|
||||||
<div className="bg-gradient rounded-full p-[0.538vw] absolute z-[1] left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2">
|
<div className="bg-gradient-saturated rounded-full p-[0.538vw] absolute z-[1] left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2">
|
||||||
<div className="text-white lg:size-[1.076vw] size-[1.076vw]">
|
<div className="text-white lg:size-[1.076vw] size-[1.076vw]">
|
||||||
<SwitchIcon />
|
<SwitchIcon />
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -62,7 +62,7 @@ export function PackageTitle({ slide }: { slide: number }) {
|
|||||||
<p
|
<p
|
||||||
className={clsx(
|
className={clsx(
|
||||||
"px-[0.833vw] py-[0.764vw] rounded-[1.181vw] btnm font-medium relative w-[8.056vw] h-[2.5vw]",
|
"px-[0.833vw] py-[0.764vw] rounded-[1.181vw] btnm font-medium relative w-[8.056vw] h-[2.5vw]",
|
||||||
slide > 12 && "bg-gradient",
|
slide > 12 && "bg-gradient-saturated",
|
||||||
slide <= 12 && "bg-[#B5F54E] text-black"
|
slide <= 12 && "bg-[#B5F54E] text-black"
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
|
|||||||
@@ -44,7 +44,7 @@ export default function PrimeFAQ() {
|
|||||||
/>
|
/>
|
||||||
<button
|
<button
|
||||||
onClick={() => setModal(<QuestionFormModal />)}
|
onClick={() => setModal(<QuestionFormModal />)}
|
||||||
className="w-full bg-gradient rounded-[1.111vw] btn-l py-[1.111vw] text-[1.111vw] mt-[0.556vw]
|
className="w-full bg-gradient-saturated rounded-[1.111vw] btn-l py-[1.111vw] text-[1.111vw] mt-[0.556vw]
|
||||||
md:max-lg:text-[2.083vw] md:max-lg:rounded-[2.083vw] md:max-lg:py-[3.125vw] md:max-lg:mt-[1.302vw]
|
md:max-lg:text-[2.083vw] md:max-lg:rounded-[2.083vw] md:max-lg:py-[3.125vw] md:max-lg:mt-[1.302vw]
|
||||||
max-md:text-[4.444vw] max-md:py-[5.556vw] max-md:rounded-[4.444vw] max-md:mt-[2.222vw]"
|
max-md:text-[4.444vw] max-md:py-[5.556vw] max-md:rounded-[4.444vw] max-md:mt-[2.222vw]"
|
||||||
>
|
>
|
||||||
|
|||||||
@@ -61,8 +61,10 @@ export function PrimeDesktopPage() {
|
|||||||
<div className="max-lg:hidden space-y-[3.333vw]">
|
<div className="max-lg:hidden space-y-[3.333vw]">
|
||||||
<Title headerLevel={2}>
|
<Title headerLevel={2}>
|
||||||
Интерактивная презентация улучшает{" "}
|
Интерактивная презентация улучшает{" "}
|
||||||
<span className="text-gradient">опыт выбора недвижимости</span> и
|
<span className="text-gradient-saturated">
|
||||||
увеличивает темпы продаж квартир в жилом комплексе
|
опыт выбора недвижимости
|
||||||
|
</span>{" "}
|
||||||
|
и увеличивает темпы продаж квартир в жилом комплексе
|
||||||
</Title>
|
</Title>
|
||||||
<div className="relative h-[1498.368vh]">
|
<div className="relative h-[1498.368vh]">
|
||||||
<div className="h-[93.684vh] sticky top-[3.333vw] -mx-[1.389vw] px-[1.389vw]">
|
<div className="h-[93.684vh] sticky top-[3.333vw] -mx-[1.389vw] px-[1.389vw]">
|
||||||
|
|||||||
@@ -1,19 +1,19 @@
|
|||||||
import { PropsWithChildren } from 'react';
|
import { PropsWithChildren } from "react";
|
||||||
import { useUnit } from 'effector-react';
|
import { useUnit } from "effector-react";
|
||||||
import {
|
import {
|
||||||
$configurationStore,
|
$configurationStore,
|
||||||
setEquipment,
|
setEquipment,
|
||||||
setDesign,
|
setDesign,
|
||||||
toggleOption,
|
toggleOption,
|
||||||
toggleSeason,
|
toggleSeason,
|
||||||
} from '@/stores/configurator-store/configurationStore';
|
} from "@/stores/configurator-store/configurationStore";
|
||||||
import {
|
import {
|
||||||
Design,
|
Design,
|
||||||
Equipment,
|
Equipment,
|
||||||
ExtraSeasons,
|
ExtraSeasons,
|
||||||
OptionFeatures,
|
OptionFeatures,
|
||||||
OptionTitles,
|
OptionTitles,
|
||||||
} from '@/types/IConfigurator';
|
} from "@/types/IConfigurator";
|
||||||
|
|
||||||
function CheckboxItem<T extends keyof OptionTitles, V extends OptionTitles[T]>({
|
function CheckboxItem<T extends keyof OptionTitles, V extends OptionTitles[T]>({
|
||||||
titleCategory,
|
titleCategory,
|
||||||
@@ -29,16 +29,16 @@ function CheckboxItem<T extends keyof OptionTitles, V extends OptionTitles[T]>({
|
|||||||
const { opts } = configurator[titleCategory];
|
const { opts } = configurator[titleCategory];
|
||||||
|
|
||||||
function handleCheck(item: V[number]) {
|
function handleCheck(item: V[number]) {
|
||||||
if (typeof opts === 'number') {
|
if (typeof opts === "number") {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
if (titleCategory === 'Оборудование') {
|
if (titleCategory === "Оборудование") {
|
||||||
setEquipment(item as Equipment);
|
setEquipment(item as Equipment);
|
||||||
} else if (titleCategory === 'Дизайн интерьеров') {
|
} else if (titleCategory === "Дизайн интерьеров") {
|
||||||
setDesign(item as Design);
|
setDesign(item as Design);
|
||||||
} else if (titleCategory === 'Опции') {
|
} else if (titleCategory === "Опции") {
|
||||||
toggleOption(item as OptionFeatures);
|
toggleOption(item as OptionFeatures);
|
||||||
} else if (titleCategory === 'Сезонность') {
|
} else if (titleCategory === "Сезонность") {
|
||||||
toggleSeason(item as ExtraSeasons);
|
toggleSeason(item as ExtraSeasons);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -46,33 +46,33 @@ function CheckboxItem<T extends keyof OptionTitles, V extends OptionTitles[T]>({
|
|||||||
return (
|
return (
|
||||||
<label
|
<label
|
||||||
className={`relative p-3 bg-[#37393B99] rounded-2xl flex-shrink-0 flex flex-col items-start justify-between snap-always ${className} ${
|
className={`relative p-3 bg-[#37393B99] rounded-2xl flex-shrink-0 flex flex-col items-start justify-between snap-always ${className} ${
|
||||||
titleCategory === 'Оборудование'
|
titleCategory === "Оборудование"
|
||||||
? 'w-[167px] h-[154px] md:aspect-[242/100] md:flex-1'
|
? "w-[167px] h-[154px] md:aspect-[242/100] md:flex-1"
|
||||||
: 'w-[160px] h-[154px] md:w-full'
|
: "w-[160px] h-[154px] md:w-full"
|
||||||
}
|
}
|
||||||
md:cursor-pointer`}
|
md:cursor-pointer`}
|
||||||
>
|
>
|
||||||
{item === 'Лето' ? (
|
{item === "Лето" ? (
|
||||||
<div className='text-[10px] bg-gradient px-2 py-0.5 rounded-[30px]'>
|
<div className="text-[10px] bg-gradient-saturated px-2 py-0.5 rounded-[30px]">
|
||||||
уже в пакете
|
уже в пакете
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<input
|
<input
|
||||||
type='checkbox'
|
type="checkbox"
|
||||||
className={`absolute w-4 h-4 rounded-[4px] appearance-none border border-gray-500
|
className={`absolute w-4 h-4 rounded-[4px] appearance-none border border-gray-500
|
||||||
checked:bg-gradient checked:shadow-[0px_0px_2px_0px_#7874F3]
|
checked:bg-gradient-saturated checked:shadow-[0px_0px_2px_0px_#7874F3]
|
||||||
checked:before:content-[""] checked:before:absolute checked:before:w-full checked:before:h-full
|
checked:before:content-[""] checked:before:absolute checked:before:w-full checked:before:h-full
|
||||||
checked:before:bg-[url(/icons/check.svg)] before:bg-[length:14px] checked:before:bg-center checked:before:bg-no-repeat
|
checked:before:bg-[url(/icons/check.svg)] before:bg-[length:14px] checked:before:bg-center checked:before:bg-no-repeat
|
||||||
checked:scale-110 transition-transform
|
checked:scale-110 transition-transform
|
||||||
${
|
${
|
||||||
titleCategory === 'Сезонность'
|
titleCategory === "Сезонность"
|
||||||
? 'pointer-events-none bg-white outline-none border-transparent'
|
? "pointer-events-none bg-white outline-none border-transparent"
|
||||||
: ''
|
: ""
|
||||||
}`}
|
}`}
|
||||||
checked={
|
checked={
|
||||||
Array.isArray(opts) &&
|
Array.isArray(opts) &&
|
||||||
(titleCategory === ('Опции' as const) ||
|
(titleCategory === ("Опции" as const) ||
|
||||||
titleCategory === ('Сезонность' as const))
|
titleCategory === ("Сезонность" as const))
|
||||||
? opts.includes(item as OptionFeatures & ExtraSeasons)
|
? opts.includes(item as OptionFeatures & ExtraSeasons)
|
||||||
: opts === item
|
: opts === item
|
||||||
}
|
}
|
||||||
@@ -80,11 +80,11 @@ function CheckboxItem<T extends keyof OptionTitles, V extends OptionTitles[T]>({
|
|||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
{children}
|
{children}
|
||||||
<div className='flex flex-col gap-1'>
|
<div className="flex flex-col gap-1">
|
||||||
{<p className='btns text-wrap '>{item.split('.')[0]}</p>}
|
{<p className="btns text-wrap ">{item.split(".")[0]}</p>}
|
||||||
{titleCategory === 'Дизайн интерьеров' && (
|
{titleCategory === "Дизайн интерьеров" && (
|
||||||
<p className='text-[10px] leading-[120%] text-[#7A7A7A] break-words whitespace-normal'>
|
<p className="text-[10px] leading-[120%] text-[#7A7A7A] break-words whitespace-normal">
|
||||||
{item.split('.')[1]}
|
{item.split(".")[1]}
|
||||||
</p>
|
</p>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -30,7 +30,7 @@ export function AwardsCard({ className }: { className?: string }) {
|
|||||||
</div>
|
</div>
|
||||||
<Link
|
<Link
|
||||||
href={"https://dprofile.ru/graff.estate"}
|
href={"https://dprofile.ru/graff.estate"}
|
||||||
className="px-6 py-4 bg-gradient self-start rounded-2xl btnm z-[1] font-medium"
|
className="px-6 py-4 bg-gradient-saturated self-start rounded-2xl btnm z-[1] font-medium"
|
||||||
>
|
>
|
||||||
Смотреть кейсы
|
Смотреть кейсы
|
||||||
</Link>
|
</Link>
|
||||||
|
|||||||
@@ -81,7 +81,7 @@ export function TagsFilters({
|
|||||||
)}
|
)}
|
||||||
<button
|
<button
|
||||||
onClick={handleApplyClick}
|
onClick={handleApplyClick}
|
||||||
className="bg-gradient rounded-2xl btnm flex items-center gap-2 pl-6 py-4 pr-4 font-medium z-[11] -mb-5 mt-5 cursor-pointer"
|
className="bg-gradient-saturated rounded-2xl btnm flex items-center gap-2 pl-6 py-4 pr-4 font-medium z-[11] -mb-5 mt-5 cursor-pointer"
|
||||||
>
|
>
|
||||||
Применить
|
Применить
|
||||||
<div className="text-white lg:size-[1.389vw] size-4">
|
<div className="text-white lg:size-[1.389vw] size-4">
|
||||||
|
|||||||
@@ -82,7 +82,7 @@ export default function AvailableDemos() {
|
|||||||
</p>
|
</p>
|
||||||
<Link
|
<Link
|
||||||
href={"/form"}
|
href={"/form"}
|
||||||
className="btnm font-medium group-hover:scale-105 duration-500 lg:px-[1.667vw] lg:py-[1.181vw] px-6 py-[17px] transition-transform lg:rounded-[0.833vw] rounded-xl bg-gradient"
|
className="btnm font-medium group-hover:scale-105 duration-500 lg:px-[1.667vw] lg:py-[1.181vw] px-6 py-[17px] transition-transform lg:rounded-[0.833vw] rounded-xl bg-gradient-saturated"
|
||||||
>
|
>
|
||||||
Оставить заявку
|
Оставить заявку
|
||||||
</Link>
|
</Link>
|
||||||
|
|||||||
@@ -47,7 +47,7 @@ export default function StreamFAQ() {
|
|||||||
<QuestionFormModal products={["Удаленная демонстрация"]} />
|
<QuestionFormModal products={["Удаленная демонстрация"]} />
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
className="w-full bg-gradient rounded-[1.111vw] btn-l py-[1.111vw] text-[1.111vw] mt-[0.556vw]
|
className="w-full bg-gradient-saturated rounded-[1.111vw] btn-l py-[1.111vw] text-[1.111vw] mt-[0.556vw]
|
||||||
md:max-lg:text-[2.083vw] md:max-lg:rounded-[2.083vw] md:max-lg:py-[3.125vw] md:max-lg:mt-[1.302vw]
|
md:max-lg:text-[2.083vw] md:max-lg:rounded-[2.083vw] md:max-lg:py-[3.125vw] md:max-lg:mt-[1.302vw]
|
||||||
max-md:text-[4.444vw] max-md:py-[5.556vw] max-md:rounded-[4.444vw] max-md:mt-[2.222vw]"
|
max-md:text-[4.444vw] max-md:py-[5.556vw] max-md:rounded-[4.444vw] max-md:mt-[2.222vw]"
|
||||||
>
|
>
|
||||||
|
|||||||
@@ -99,7 +99,7 @@ export default function InfiniteSlider() {
|
|||||||
</div>
|
</div>
|
||||||
<div className="flex gap-[0.833vw] absolute left-1/2 bottom-0 -translate-x-1/2 z-10">
|
<div className="flex gap-[0.833vw] absolute left-1/2 bottom-0 -translate-x-1/2 z-10">
|
||||||
<button
|
<button
|
||||||
className="lg:rounded-[1.111vw] rounded-2xl text-white bg-gradient lg:p-[1.111vw] p-4"
|
className="lg:rounded-[1.111vw] rounded-2xl text-white bg-gradient-saturated lg:p-[1.111vw] p-4"
|
||||||
onClick={() => moveSlide("left")}
|
onClick={() => moveSlide("left")}
|
||||||
>
|
>
|
||||||
<div className="lg:size-[1.111vw] size-4">
|
<div className="lg:size-[1.111vw] size-4">
|
||||||
@@ -107,7 +107,7 @@ export default function InfiniteSlider() {
|
|||||||
</div>
|
</div>
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
className="lg:rounded-[1.111vw] rounded-2xl text-white bg-gradient lg:p-[1.111vw] p-4"
|
className="lg:rounded-[1.111vw] rounded-2xl text-white bg-gradient-saturated lg:p-[1.111vw] p-4"
|
||||||
onClick={() => moveSlide("right")}
|
onClick={() => moveSlide("right")}
|
||||||
>
|
>
|
||||||
<div className="lg:size-[1.111vw] size-4">
|
<div className="lg:size-[1.111vw] size-4">
|
||||||
|
|||||||
@@ -300,7 +300,7 @@ export default function WebDemo() {
|
|||||||
</span>
|
</span>
|
||||||
<button
|
<button
|
||||||
onClick={() => setDemoActive(true)}
|
onClick={() => setDemoActive(true)}
|
||||||
className="bg-gradient btn-l py-[1.389vw] px-[2.778vw] rounded-[1.111vw] mt-[2.778vw] text-[1.111vw]
|
className="bg-gradient-saturated btn-l py-[1.389vw] px-[2.778vw] rounded-[1.111vw] mt-[2.778vw] text-[1.111vw]
|
||||||
md:max-lg:rounded-[2.083vw] md:max-lg:text-[2.083vw] md:max-lg:py-[2.604vw] md:max-lg:px-[5.208vw] md:max-lg:mt-[5.208vw]
|
md:max-lg:rounded-[2.083vw] md:max-lg:text-[2.083vw] md:max-lg:py-[2.604vw] md:max-lg:px-[5.208vw] md:max-lg:mt-[5.208vw]
|
||||||
max-md:rounded-[4.444vw] max-md:text-[4.444vw] max-md:py-[2.778vw] max-md:px-[5.556vw] max-md:mt-[5.556vw]"
|
max-md:rounded-[4.444vw] max-md:text-[4.444vw] max-md:py-[2.778vw] max-md:px-[5.556vw] max-md:mt-[5.556vw]"
|
||||||
>
|
>
|
||||||
|
|||||||
@@ -209,7 +209,7 @@ export default function WebDevelopmentTimeline() {
|
|||||||
<div className="mb-[1.667vw]">
|
<div className="mb-[1.667vw]">
|
||||||
{" Если короче, то "}
|
{" Если короче, то "}
|
||||||
<div
|
<div
|
||||||
className="inline h-[2.5vw] w-[8.5vw] text-center btn-m text-[0.972vw] py-[0.764vw] px-[1.389vw] rounded-full bg-gradient
|
className="inline h-[2.5vw] w-[8.5vw] text-center btn-m text-[0.972vw] py-[0.764vw] px-[1.389vw] rounded-full bg-gradient-saturated
|
||||||
max-md:text-[3.333vw] max-md:w-[22.778vw] max-md:h-[7.778vw] max-md:px-[3.333vw] max-md:py-[1.944vw] max-md:leading-[150%]"
|
max-md:text-[3.333vw] max-md:w-[22.778vw] max-md:h-[7.778vw] max-md:px-[3.333vw] max-md:py-[1.944vw] max-md:leading-[150%]"
|
||||||
>
|
>
|
||||||
{isNewClient ? "~4,5 месяца" : "~3 месяца"}
|
{isNewClient ? "~4,5 месяца" : "~3 месяца"}
|
||||||
@@ -222,7 +222,7 @@ export default function WebDevelopmentTimeline() {
|
|||||||
<div className="text-center accent mt-[4.444vw] flex w-full items-center justify-center gap-[0.556vw] md:max-lg:mt-[4.948vw] md:max-lg:text-[3.125vw] max-md:hidden">
|
<div className="text-center accent mt-[4.444vw] flex w-full items-center justify-center gap-[0.556vw] md:max-lg:mt-[4.948vw] md:max-lg:text-[3.125vw] max-md:hidden">
|
||||||
{" Если короче, то "}
|
{" Если короче, то "}
|
||||||
<div
|
<div
|
||||||
className="leading-[120%] w-[8.5vw] text-center btn-m text-[0.972vw] py-[0.764vw] px-[1.389vw] rounded-full bg-gradient mt-[0.356vw]
|
className="leading-[120%] w-[8.5vw] text-center btn-m text-[0.972vw] py-[0.764vw] px-[1.389vw] rounded-full bg-gradient-saturated mt-[0.356vw]
|
||||||
md:max-lg:text-[1.563vw] md:max-lg:w-[12.677vw] md:max-lg:h-[3.646vw] md:max-lg:px-[1.563vw] md:max-lg:py-[0.911vw] md:max-lg:leading-[120%]"
|
md:max-lg:text-[1.563vw] md:max-lg:w-[12.677vw] md:max-lg:h-[3.646vw] md:max-lg:px-[1.563vw] md:max-lg:py-[0.911vw] md:max-lg:leading-[120%]"
|
||||||
>
|
>
|
||||||
{isNewClient ? "~4,5 месяца" : "~3 месяца"}
|
{isNewClient ? "~4,5 месяца" : "~3 месяца"}
|
||||||
|
|||||||
@@ -43,7 +43,7 @@ export default function FAQ() {
|
|||||||
/>
|
/>
|
||||||
<button
|
<button
|
||||||
onClick={() => setModal(<QuestionFormModal />)}
|
onClick={() => setModal(<QuestionFormModal />)}
|
||||||
className="w-full bg-gradient rounded-[1.111vw] btn-l py-[1.111vw] text-[1.111vw] mt-[0.556vw]
|
className="w-full bg-gradient-saturated rounded-[1.111vw] btn-l py-[1.111vw] text-[1.111vw] mt-[0.556vw]
|
||||||
md:max-lg:text-[2.083vw] md:max-lg:rounded-[2.083vw] md:max-lg:py-[3.125vw] md:max-lg:mt-[1.302vw]
|
md:max-lg:text-[2.083vw] md:max-lg:rounded-[2.083vw] md:max-lg:py-[3.125vw] md:max-lg:mt-[1.302vw]
|
||||||
max-md:text-[4.444vw] max-md:py-[5.556vw] max-md:rounded-[4.444vw] max-md:mt-[2.222vw]"
|
max-md:text-[4.444vw] max-md:py-[5.556vw] max-md:rounded-[4.444vw] max-md:mt-[2.222vw]"
|
||||||
>
|
>
|
||||||
|
|||||||
@@ -68,9 +68,9 @@ export default function WebMain() {
|
|||||||
<WebDevelopmentTimeline />
|
<WebDevelopmentTimeline />
|
||||||
|
|
||||||
<div className="gap-y-[4.444vw] flex flex-col">
|
<div className="gap-y-[4.444vw] flex flex-col">
|
||||||
<h2 className="font-medium text-[4.444vw] leading-[95%] tracking-[-0.02em] max-md:text-[8.889vw] bg-gradient-to-r from-[#6078F2] to-[#C868F5] bg-clip-text">
|
<h2 className="font-medium text-[4.444vw] leading-[95%] tracking-[-0.02em] max-md:text-[8.889vw]">
|
||||||
За 15 лет работы мы реализовали{" "}
|
За 15 лет работы мы реализовали{" "}
|
||||||
<span className="text-transparent bg-clip-text">
|
<span className="text-gradient-saturated text-transparent">
|
||||||
{count && getProjectsCount(count)} для застройщиков
|
{count && getProjectsCount(count)} для застройщиков
|
||||||
</span>{" "}
|
</span>{" "}
|
||||||
в сфере интерактивных технологий
|
в сфере интерактивных технологий
|
||||||
|
|||||||
@@ -60,7 +60,7 @@ export const awards: IAward[] = [
|
|||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "1 строчка в рейтинга",
|
title: "1 строчка в рейтинге",
|
||||||
description: "в категории экспертиза",
|
description: "в категории экспертиза",
|
||||||
image: "/img/pages/home/awards/raca.png",
|
image: "/img/pages/home/awards/raca.png",
|
||||||
year: 2024,
|
year: 2024,
|
||||||
@@ -68,8 +68,7 @@ export const awards: IAward[] = [
|
|||||||
content: {
|
content: {
|
||||||
title:
|
title:
|
||||||
"В 2025 году мы первый раз участвовали в рейтинге рекламных и коммуникационных агенств RACA в категории Production",
|
"В 2025 году мы первый раз участвовали в рейтинге рекламных и коммуникационных агенств RACA в категории Production",
|
||||||
description:
|
description: `По результатам независимого исследования мы заняли первую строчку рейтинга и получили оценку 9,50/10 за экспертизу в категории, а также заняли второе место за уровень клиентского сервиса, обогнав лидеров прошлого года.
|
||||||
`По результатам независимого исследования мы заняли первую строчку рейтинга и получили оценку 9,50/10 за экспертизу в категории, а также заняли второе место за уровень клиентского сервиса, обогнав лидеров прошлого года.
|
|
||||||
|
|
||||||
По итогам интегрального рейтинга мы вошли в Топ-4 в категории Production.`,
|
По итогам интегрального рейтинга мы вошли в Топ-4 в категории Production.`,
|
||||||
images: ["/img/pages/home/awards/content/raca/1.png"],
|
images: ["/img/pages/home/awards/content/raca/1.png"],
|
||||||
|
|||||||
+2
-2
@@ -36,7 +36,7 @@ export function Button({
|
|||||||
"group cursor-pointer relative px-6 py-2",
|
"group cursor-pointer relative px-6 py-2",
|
||||||
rounded && `rounded-${rounded}`,
|
rounded && `rounded-${rounded}`,
|
||||||
"min-w-fit",
|
"min-w-fit",
|
||||||
color === "primary" && "bg-gradient",
|
color === "primary" && "bg-gradient-saturated",
|
||||||
color === "secondary" && "outline-1 outline-[#3D425C]",
|
color === "secondary" && "outline-1 outline-[#3D425C]",
|
||||||
icon && "pr-4",
|
icon && "pr-4",
|
||||||
"flex gap-1 items-center overflow-hidden",
|
"flex gap-1 items-center overflow-hidden",
|
||||||
@@ -45,7 +45,7 @@ export function Button({
|
|||||||
"justify-between"
|
"justify-between"
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
<span className="group-hover:opacity-10 absolute top-0 left-0 w-full h-full transition-opacity bg-black opacity-0"></span>
|
<span className="group-hover:opacity-10 absolute top-0 left-0 w-full h-full bg-black opacity-0 transition-opacity"></span>
|
||||||
<span className={clsx("relative font-medium", !icon && "m-auto")}>
|
<span className={clsx("relative font-medium", !icon && "m-auto")}>
|
||||||
{children}
|
{children}
|
||||||
</span>
|
</span>
|
||||||
|
|||||||
@@ -1,4 +1,5 @@
|
|||||||
import { PropsWithChildren } from 'react';
|
import clsx from "clsx";
|
||||||
|
import { PropsWithChildren } from "react";
|
||||||
|
|
||||||
export function GradientButton({
|
export function GradientButton({
|
||||||
children,
|
children,
|
||||||
@@ -14,22 +15,21 @@ export function GradientButton({
|
|||||||
<button
|
<button
|
||||||
onClick={onClick}
|
onClick={onClick}
|
||||||
className={`outline-none lg:p-[0.069vw] md:max-lg:p-[0.13vw] p-px rounded-full cursor-pointer${
|
className={`outline-none lg:p-[0.069vw] md:max-lg:p-[0.13vw] p-px rounded-full cursor-pointer${
|
||||||
className ? ' ' + className : ''
|
className ? " " + className : ""
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
className={`lg:p-[0.556vw] p-1 [1.111vw] bg-[#0f1011] rounded-full${
|
className={`lg:p-[0.556vw] p-1 [1.111vw] bg-[#0f1011] rounded-full${
|
||||||
active
|
active
|
||||||
? ' [animation:custom-ping_2s_cubic-bezier(0,0,0.25,1)_infinite_both_running]'
|
? " [animation:custom-ping_2s_cubic-bezier(0,0,0.25,1)_infinite_both_running]"
|
||||||
: ''
|
: ""
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
className={`lg:p-[0.972vw] p-[14px] rounded-full bg-[#37393B99] active:bg-gradient-to-r${
|
className={clsx(
|
||||||
active
|
`lg:p-[0.972vw] p-[14px] rounded-full bg-[#37393B99]`,
|
||||||
? ' [background:linear-gradient(to_bottom_left,#BE69F5,#798FFF)]'
|
active && "bg-gradient-saturated"
|
||||||
: ''
|
)}
|
||||||
}`}
|
|
||||||
>
|
>
|
||||||
{children}
|
{children}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -23,7 +23,7 @@ export function LocaleSwitch({ value, onChange }: LocaleSwitchProps) {
|
|||||||
onClick={handleToggle}
|
onClick={handleToggle}
|
||||||
>
|
>
|
||||||
<motion.div
|
<motion.div
|
||||||
className="absolute bg-gradient lg:rounded-[0.556vw] rounded-lg lg:p-[0.556vw] p-2 lg:w-[calc(50%-0.278vw)] w-[calc(50%-4px)] flex items-center justify-center left-[0.278vw] top-1/2"
|
className="absolute bg-gradient-saturated lg:rounded-[0.556vw] rounded-lg lg:p-[0.556vw] p-2 lg:w-[calc(50%-0.278vw)] w-[calc(50%-4px)] flex items-center justify-center left-[0.278vw] top-1/2"
|
||||||
animate={{
|
animate={{
|
||||||
x: value === "ru" ? 0 : "100%",
|
x: value === "ru" ? 0 : "100%",
|
||||||
y: "-50%",
|
y: "-50%",
|
||||||
|
|||||||
@@ -1,5 +1,6 @@
|
|||||||
/* eslint-disable @next/next/no-img-element */
|
/* eslint-disable @next/next/no-img-element */
|
||||||
import { useMediaQueries } from "@/hooks/useMediaQueries";
|
import { useMediaQueries } from "@/hooks/useMediaQueries";
|
||||||
|
import clsx from "clsx";
|
||||||
import { motion } from "framer-motion";
|
import { motion } from "framer-motion";
|
||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
|
|
||||||
@@ -22,9 +23,10 @@ export function ProductItem({
|
|||||||
return (
|
return (
|
||||||
<Link
|
<Link
|
||||||
href={href}
|
href={href}
|
||||||
className={`md:p-5 p-2 flex flex-col overflow-hidden justify-between box-border relative max-md:items-start bg-[#37393B99] hover:border-white/8 border-transparent border transition-colors bg-[radial-gradient(farthest-corner_at_top_left,transparent,transparent)] lg:hover:bg-[radial-gradient(farthest-corner_at_top_left,transparent,#7A7A7A50)] lg:rounded-[1.111vw] rounded-2xl${
|
className={clsx(
|
||||||
className ? " " + className : ""
|
`md:p-5 p-2 flex flex-col overflow-hidden justify-between box-border relative max-md:items-start bg-[#37393B99] hover:border-white/8 border-transparent border transition-colors bg-[radial-gradient(farthest-corner_at_top_left,transparent,transparent)] lg:hover:bg-[radial-gradient(farthest-corner_at_top_left,transparent,#7A7A7A50)] lg:rounded-[1.111vw] rounded-2xl`,
|
||||||
}`}
|
className
|
||||||
|
)}
|
||||||
>
|
>
|
||||||
<div className="max-md:hidden space-y-2">
|
<div className="max-md:hidden space-y-2">
|
||||||
{/* <div className="heading1 flex items-start font-medium">
|
{/* <div className="heading1 flex items-start font-medium">
|
||||||
@@ -35,7 +37,7 @@ export function ProductItem({
|
|||||||
)}
|
)}
|
||||||
{title}
|
{title}
|
||||||
</div> */}
|
</div> */}
|
||||||
<div className=" heading2 font-medium opacity-60 lg:max-w-[50%]">
|
<div className="heading2 font-medium opacity-60 lg:max-w-[50%]">
|
||||||
{text}
|
{text}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -17,13 +17,13 @@ export function StoriesButton() {
|
|||||||
return (
|
return (
|
||||||
<div className="flex items-center mx-auto">
|
<div className="flex items-center mx-auto">
|
||||||
<div className="flex items-center">
|
<div className="flex items-center">
|
||||||
{stories?.slice(0,3).map(({ id, text, preview }, index) => (
|
{stories?.slice(0, 3).map(({ id, text, preview }, index) => (
|
||||||
<button
|
<button
|
||||||
onClick={() => setModal(<StoriesModal startIndex={index} />)}
|
onClick={() => setModal(<StoriesModal startIndex={index} />)}
|
||||||
className="aspect-square first:translate-x-2 last:-translate-x-2 w-full rounded-full cursor-pointer outline-none"
|
className="aspect-square first:translate-x-2 last:-translate-x-2 w-full rounded-full cursor-pointer outline-none"
|
||||||
key={id}
|
key={id}
|
||||||
>
|
>
|
||||||
<div className="lg:p-[0.069vw] p-px bg-gradient rounded-full relative aspect-square">
|
<div className="lg:p-[0.069vw] p-px bg-gradient-saturated rounded-full relative aspect-square">
|
||||||
<img
|
<img
|
||||||
src={process.env.NEXT_PUBLIC_S3_BUCKET + preview}
|
src={process.env.NEXT_PUBLIC_S3_BUCKET + preview}
|
||||||
alt={text}
|
alt={text}
|
||||||
|
|||||||
Reference in New Issue
Block a user