118 lines
4.6 KiB
TypeScript
118 lines
4.6 KiB
TypeScript
import { Link } from "react-router";
|
||
import YoutubeIcon from "./icons/YoutubeIcon";
|
||
import InstagramIcon from "./icons/InstagramIcon";
|
||
import FacebookIcon from "./icons/FacebookIcon";
|
||
import LinkedInIcon from "./icons/LinkedInIcon";
|
||
import TwitterIcon from "./icons/TwitterIcon";
|
||
|
||
function Footer() {
|
||
return (
|
||
<footer className="2xl:px-[2.222vw] 2xl:pb-[2.222vw] 2xl:pt-[2.778vw] md:max-2xl:p-6 px-4 py-6 grid 2xl:grid-cols-6 md:max-2xl:grid-cols-4 grid-cols-2 2xl:grid-rows-2 2xl:gap-x-[1.667vw] 2xl:gap-y-[1.111vw] max-2xl:gap-y-6 2xl:rounded-t-[1.667vw] rounded-t-3xl outline outline-[#E2E2DC] bg-white">
|
||
<img
|
||
src="/images/logo.svg"
|
||
className="2xl:w-[5.972vw] w-[86px] cursor-pointer"
|
||
onClick={() => {
|
||
window.location.href = "/";
|
||
}}
|
||
alt="IRTH"
|
||
/>
|
||
|
||
<p className="2xl:max-w-[17.083vw] text-s text-[#0D1922]/40 2xl:col-start-1 md:max-2xl:col-start-3 max-2xl:col-span-3 md:max-2xl:row-start-2 max-md:row-start-3 max-md:mt-12">
|
||
For more information, visit
|
||
<br />
|
||
our website:
|
||
<Link
|
||
className="text-[#00BED7] md:underline"
|
||
to={"https://www.irth.ae"}
|
||
>
|
||
www.irth.ae
|
||
</Link>
|
||
</p>
|
||
|
||
<div className="2xl:space-y-[0.833vw] space-y-3 md:max-2xl:col-start-3 max-2xl:col-span-3 md:max-2xl:row-start-3 max-md:row-start-4 max-md:mt-6">
|
||
<p className="text-s text-[#0D1922]/40">Follow us for more:</p>
|
||
<div className="flex 2xl:gap-[0.278vw] gap-1">
|
||
<div className="2xl:p-[0.417vw] p-1.5 bg-[#E2E2DC] 2xl:rounded-[0.278vw] rounded">
|
||
<div className="2xl:w-[1.389vw] 2xl:h-[1.389vw] w-5 h-5 text-[#0D1922]/70">
|
||
<YoutubeIcon />
|
||
</div>
|
||
</div>
|
||
<div className="2xl:p-[0.417vw] p-1.5 bg-[#E2E2DC] 2xl:rounded-[0.278vw] rounded">
|
||
<div className="2xl:w-[1.389vw] 2xl:h-[1.389vw] w-5 h-5 text-[#0D1922]/70">
|
||
<InstagramIcon />
|
||
</div>
|
||
</div>
|
||
<div className="2xl:p-[0.417vw] p-1.5 bg-[#E2E2DC] 2xl:rounded-[0.278vw] rounded">
|
||
<div className="2xl:w-[1.389vw] 2xl:h-[1.389vw] w-5 h-5 text-[#0D1922]/70">
|
||
<FacebookIcon />
|
||
</div>
|
||
</div>
|
||
<div className="2xl:p-[0.417vw] p-1.5 bg-[#E2E2DC] 2xl:rounded-[0.278vw] rounded">
|
||
<div className="2xl:w-[1.389vw] 2xl:h-[1.389vw] w-5 h-5 text-[#0D1922]/70">
|
||
<LinkedInIcon />
|
||
</div>
|
||
</div>
|
||
<div className="2xl:p-[0.417vw] p-1.5 bg-[#E2E2DC] 2xl:rounded-[0.278vw] rounded">
|
||
<div className="2xl:w-[1.389vw] 2xl:h-[1.389vw] w-5 h-5 text-[#0D1922]/70">
|
||
<TwitterIcon />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="2xl:border-l-[0.069vw] border-l border-[#E2E2DC] 2xl:pl-[1.111vw] pl-4 flex flex-col 2xl:col-start-4 2xl:row-start-1 2xl:row-span-2 md:max-2xl:col-start-3 col-start-1 max-md:mt-4">
|
||
<Link
|
||
to={"/"}
|
||
className="text-m flex-1 content-center max-2xl:py-2.5 text-[#0D1922]/70 w-fit"
|
||
>
|
||
Map
|
||
</Link>
|
||
<Link
|
||
to={"/unit-types"}
|
||
className="text-m flex-1 content-center max-2xl:py-2.5 text-[#0D1922]/70 w-fit"
|
||
>
|
||
Unit Types
|
||
</Link>
|
||
<Link
|
||
to={"/about-irth"}
|
||
className="text-m flex-1 content-center max-2xl:py-2.5 text-[#0D1922]/70 w-fit"
|
||
>
|
||
About IRTH
|
||
</Link>
|
||
</div>
|
||
|
||
<div className="2xl:border-l-[0.069vw] border-l border-[#E2E2DC] 2xl:pl-[1.111vw] pl-4 flex flex-col 2xl:col-start-5 2xl:row-start-1 2xl:row-span-2 max-2xl:col-span-2 max-md:mt-4">
|
||
<Link
|
||
to={"/favourites"}
|
||
className="text-m flex-1 content-center max-2xl:py-2.5 text-[#0D1922]/70 w-fit"
|
||
>
|
||
Favorites
|
||
</Link>
|
||
<Link
|
||
to={"/search"}
|
||
className="text-m flex-1 content-center max-2xl:py-2.5 text-[#0D1922]/70 w-fit"
|
||
>
|
||
Search
|
||
</Link>
|
||
<Link
|
||
to={"/"}
|
||
className="text-m flex-1 content-center max-2xl:py-2.5 text-[#0D1922]/70 w-fit"
|
||
>
|
||
Brochures
|
||
</Link>
|
||
</div>
|
||
|
||
<div className="content-end 2xl:text-right 2xl:col-start-6 2xl:row-start-1 2xl:row-span-2 md:max-2xl:col-start-1 md:max-2xl:row-start-3 max-md:col-span-3 max-md:pt-3 max-md:border-t border-[#E2E2DC]">
|
||
<Link
|
||
to={"/"}
|
||
className="2xl:text-caption-m text-caption-s max-2xl:text-[#73787C] text-[#0D1922]/70"
|
||
>
|
||
Privacy Policy
|
||
</Link>
|
||
</div>
|
||
</footer>
|
||
);
|
||
}
|
||
|
||
export default Footer;
|