89 lines
4.0 KiB
TypeScript
89 lines
4.0 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { PropsWithChildren } from "react";
|
|
import ArrowMoreIcon from "@/components/icons/ArrowMoreIcon";
|
|
import YoutubeIcon from "@/components/icons/YoutubeIcon";
|
|
import { useTranslations } from "next-intl";
|
|
|
|
export function Footer() {
|
|
const t = useTranslations("footer");
|
|
|
|
return (
|
|
<footer
|
|
className="lg:px-5 lg:pb-5 md:max-lg:px-4 md:max-lg:pb-4 px-[10px] pb-[10px] pt-10 space-y-6 mb-0"
|
|
id="footer"
|
|
>
|
|
<div className="max-md:flex-col lg:gap-[0.833vw] md:max-lg:gap-[1.042vw] flex gap-[1.111vw]">
|
|
<Link
|
|
href={"tel:" + "+971 58 506 0097".replaceAll(" ", "")}
|
|
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"
|
|
>
|
|
<p className="text-[#7A7A7A] text1 font-medium">{t("call")}</p>
|
|
<div className="lg:line2 md:max-lg:heading1 line2 flex items-center font-medium">
|
|
+971 58 506 0097
|
|
<div className="text-white lg:size-[5.556vw] md:max-lg:size-[4.167vw] size-[10vw]">
|
|
<ArrowMoreIcon />
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
<Link
|
|
href={"mailto:" + "sam@graff.tech"}
|
|
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"
|
|
>
|
|
<p className="text-[#7A7A7A] text1 font-medium">{t("write")}</p>
|
|
<div className="lg:line2 md:max-lg:heading1 line2 flex items-center font-medium">
|
|
sam@graff.tech
|
|
<div className="text-white lg:size-[5.556vw] md:max-lg:size-[4.167vw] size-[10vw]">
|
|
<ArrowMoreIcon />
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
<div className="gap-y-2 justify-between md:gap-x-[1.042vw] gap-x-[1.111vw] md:flex-col flex">
|
|
{/* <ContactLink href="https://t.me/graffestate">
|
|
<TelegramIcon className="lg:w-[1.389vw] lg:h-[1.389vw] md:max-lg:w-[2.083vw] md:max-lg:h-[2.083vw] w-[5.556vw] h-[5.556vw] text-white group-hover:text-black" />
|
|
</ContactLink>
|
|
<ContactLink href="https://rutube.ru/channel/25505040">
|
|
<RutubeIcon className="lg:w-[1.389vw] lg:h-[1.389vw] md:max-lg:w-[2.083vw] md:max-lg:h-[2.083vw] w-[5.556vw] h-[5.556vw] text-white group-hover:text-black" />
|
|
</ContactLink>
|
|
<ContactLink href="https://vk.com/graff.interactive">
|
|
<VkIcon className="lg:w-[1.389vw] lg:h-[1.389vw] md:max-lg:w-[2.083vw] md:max-lg:h-[2.083vw] w-[5.556vw] h-[5.556vw] text-white group-hover:text-black" />
|
|
</ContactLink> */}
|
|
<ContactLink href="https://www.youtube.com/@GRAFFinteractive">
|
|
<div className="text-white lg:size-[1.389vw] md:max-lg:size-[2.083vw] size-[5.556vw] group-hover:text-black">
|
|
<YoutubeIcon />
|
|
</div>
|
|
</ContactLink>
|
|
</div>
|
|
</div>
|
|
<div className="lg:gap-x-[1.667vw] gap-y-2 lg:flex grid">
|
|
<a
|
|
target="_blank"
|
|
href={"/privacypolicy"}
|
|
className="text-[#37393B] text1 font-medium leading-[18.9px] w-fit"
|
|
>
|
|
{t("privacy")}
|
|
</a>
|
|
<p className="text-[#37393B] text1 font-medium leading-[18.9px] col-start-1">
|
|
{t("copyright")}
|
|
</p>
|
|
</div>
|
|
</footer>
|
|
);
|
|
}
|
|
|
|
export function ContactLink({
|
|
children,
|
|
href,
|
|
className = "",
|
|
}: PropsWithChildren<{ href: string; className?: string }>) {
|
|
return (
|
|
<Link
|
|
href={href}
|
|
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-fit group ${className}`}
|
|
>
|
|
{children}
|
|
</Link>
|
|
);
|
|
}
|