149 lines
6.4 KiB
TypeScript
149 lines
6.4 KiB
TypeScript
import { PropsWithChildren } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import ArrowMoreIcon from "@/components/icons/ArrowMoreIcon";
|
|
import RutubeIcon from "@/components/icons/RutubeIcon";
|
|
import TelegramIcon from "@/components/icons/TgIcon";
|
|
import VkIcon from "@/components/icons/VKIcon";
|
|
import YoutubeIcon from "@/components/icons/YoutubeIcon";
|
|
|
|
export function Footer() {
|
|
const { t, i18n } = useTranslation();
|
|
const showRuLegal = i18n.language.startsWith("ru");
|
|
const isEn = i18n.language.startsWith("en");
|
|
|
|
return (
|
|
<footer className="lg:px-5 lg:pb-5 md:max-lg:px-4 md:max-lg:pb-4 px-[10px] pb-[10px] space-y-6 mb-0">
|
|
<div className="max-md:flex-col lg:gap-[0.833vw] md:max-lg:gap-[1.042vw] flex gap-[1.111vw]">
|
|
<a
|
|
href={`tel:${t("footer.phoneTel")}`}
|
|
className="lg:p-[1.667vw] p-6 flex flex-col justify-between max-md:gap-y-10 bg-[linear-gradient(to_top_left,#7A7A7A50,transparent)] lg:rounded-[1.111vw] rounded-2xl lg:aspect-[696/248] lg:w-[48.333vw] md:max-lg:w-[47.656vw] hover:bg-[#37393B99] bg-transparent transition-colors"
|
|
>
|
|
<div className="text-[#7A7A7A] text1 font-medium">{t("footer.call")}</div>
|
|
<div className="flex items-center font-medium lg:line2 md:max-lg:heading1 line2">
|
|
{t("footer.phoneDisplay")}
|
|
<div className="text-white lg:size-[5.556vw] size-[10vw]">
|
|
<ArrowMoreIcon />
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<a
|
|
href={`mailto:${t("footer.emailAddress")}`}
|
|
className="lg:p-[1.667vw] p-6 flex flex-col justify-between max-md:gap-y-10 bg-[linear-gradient(to_top_left,#7A7A7A50,transparent)] lg:rounded-[1.111vw] rounded-2xl lg:aspect-[624/248] lg:w-[43.333vw] md:max-lg:w-[47.656vw] hover:bg-[#37393B99] bg-transparent transition-colors"
|
|
>
|
|
<div className="text-[#7A7A7A] text1 font-medium">{t("footer.write")}</div>
|
|
<div className="flex items-center font-medium lg:line2 md:max-lg:heading1 line2">
|
|
{t("footer.emailAddress")}
|
|
<div className="text-white lg:size-[5.556vw] size-[10vw]">
|
|
<ArrowMoreIcon />
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<div className="gap-y-2 justify-between md:gap-x-[1.042vw] gap-x-[1.111vw] md:flex-col flex">
|
|
{!isEn ? (
|
|
<>
|
|
<ContactLink href="https://t.me/graffestate">
|
|
<div className="text-white lg:size-[1.389vw] size-[5.556vw] group-hover:text-black">
|
|
<TelegramIcon />
|
|
</div>
|
|
</ContactLink>
|
|
<ContactLink href="https://rutube.ru/channel/25505040">
|
|
<div className="text-white lg:size-[1.389vw] size-[5.556vw] group-hover:text-black">
|
|
<RutubeIcon />
|
|
</div>
|
|
</ContactLink>
|
|
<ContactLink href="https://vk.com/graff.estate">
|
|
<div className="text-white lg:size-[1.389vw] size-[5.556vw] group-hover:text-black">
|
|
<VkIcon />
|
|
</div>
|
|
</ContactLink>
|
|
</>
|
|
) : null}
|
|
<ContactLink href="https://www.youtube.com/@GRAFFtech">
|
|
<div className="text-white lg:size-[1.389vw] size-[5.556vw] group-hover:text-black">
|
|
<YoutubeIcon />
|
|
</div>
|
|
</ContactLink>
|
|
</div>
|
|
</div>
|
|
|
|
{showRuLegal ? (
|
|
<div className="lg:w-full flex flex-col md:flex-row md:max-lg:gap-[1.042vw] lg:gap-x-[0.833vw] gap-6 lg:pb-6 max-lg:py-6 pb-10 md:max-lg:pt-4 !max-md:mt-[11.111vw] border-b border-[#232425] relative">
|
|
<div className="flex flex-col gap-y-[1.111vw] lg:min-w-[48.193vw] flex-1">
|
|
<span className=" text1 text-[#7A7A7A]">{t("footer.legalAddress")}</span>
|
|
<span className="headline2 max-md:leading-4 font-medium text-[#7A7A7A]">
|
|
{t("footer.addressLine1")}
|
|
<br />
|
|
{t("footer.addressLine2")}
|
|
</span>
|
|
|
|
<div className="flex flex-col gap-y-[1.111vw] lg:mt-[0px] md:mt-[2.083vw] mt-6">
|
|
<span className=" text1 text-[#7A7A7A]">{t("footer.mainStack")}</span>
|
|
<div className="headline2 max-md:leading-4 font-medium text-[#7A7A7A]">
|
|
<p>{t("footer.stackLine")}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="flex flex-col gap-y-[1.111vw] flex-1">
|
|
<span className="text1 text-[#7A7A7A]">{t("footer.requisites")}</span>
|
|
<div className="headline2 max-md:leading-4 font-medium text-[#7A7A7A]">
|
|
<p>{t("footer.inn")}</p>
|
|
<p>{t("footer.kpp")}</p>
|
|
<p>{t("footer.company")}</p>
|
|
<p>{t("footer.ogrn")}</p>
|
|
</div>
|
|
</div>
|
|
<img
|
|
src="/img/components/header/Sk.svg"
|
|
alt={t("footer.skolkovoAlt")}
|
|
className=" lg:hidden md:size-[6.25vw] size-[13.333vw] max-md:absolute max-md:right-0 max-md:bottom-6"
|
|
/>
|
|
<img
|
|
src="/img/components/header/Sk.svg"
|
|
alt={t("footer.skolkovoAlt")}
|
|
className="hidden lg:block lg:size-[3.333vw] lg:mt-[2.292vw] lg:self-start"
|
|
/>
|
|
</div>
|
|
) : null}
|
|
|
|
<div className="lg:gap-x-[0.833vw] gap-y-2 flex max-lg:flex-col">
|
|
<a
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
href={t("legalLinks.policy")}
|
|
className="text-[#37393B] text1 font-medium leading-[18.9px] lg:w-[48.193vw] w-fit"
|
|
>
|
|
{t("footer.privacy")}
|
|
</a>
|
|
<p className="text-[#37393B] text1 font-medium leading-[18.9px] col-start-1">
|
|
{t("footer.copyright")}
|
|
</p>
|
|
<a
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
href={"https://graff.tech"}
|
|
className="text-[#37393B] text1 font-medium leading-[18.9px] lg:ml-auto w-fit md:col-start-2 md:text-right"
|
|
>
|
|
{t("footer.site")}
|
|
</a>
|
|
</div>
|
|
</footer>
|
|
);
|
|
}
|
|
|
|
export function ContactLink({
|
|
children,
|
|
href,
|
|
className = "",
|
|
}: PropsWithChildren<{ href: string; className?: string }>) {
|
|
return (
|
|
<a
|
|
href={href}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className={`lg:rounded-[1.111vw] rounded-2xl bg-[#37393B99] lg:p-[1.25vw] p-[18px] hover:bg-white transition-all hover:text-black flex justify-center w-full group ${className}`}
|
|
>
|
|
{children}
|
|
</a>
|
|
);
|
|
}
|