Updated the Twitter logo to X
This commit is contained in:
Tiago Ribeiro
@@ -1,106 +1,119 @@
|
||||
import Link from "next/link";
|
||||
import {BiLogoFacebook} from "react-icons/bi";
|
||||
import {BsInstagram, BsTwitter} from "react-icons/bs";
|
||||
import { BiLogoFacebook } from "react-icons/bi";
|
||||
import { BsInstagram, BsTwitterX } from "react-icons/bs";
|
||||
import translation from "@/translation/footer.json";
|
||||
import clsx from "clsx";
|
||||
import FooterSection from "@/types/cms/footer";
|
||||
|
||||
interface Props {
|
||||
language: "en" | "ar";
|
||||
data: FooterSection;
|
||||
language: "en" | "ar";
|
||||
data: FooterSection;
|
||||
}
|
||||
|
||||
interface FooterLinkProps {
|
||||
language: "en" | "ar";
|
||||
children: string;
|
||||
href: string;
|
||||
language: "en" | "ar";
|
||||
children: string;
|
||||
href: string;
|
||||
}
|
||||
|
||||
const FooterLink = ({language, href, children}: FooterLinkProps) => {
|
||||
return <Link href={`${language === "ar" ? "/ar" : ""}${href}`}>{children}</Link>;
|
||||
const FooterLink = ({ language, href, children }: FooterLinkProps) => {
|
||||
return (
|
||||
<Link href={`${language === "ar" ? "/ar" : ""}${href}`}>{children}</Link>
|
||||
);
|
||||
};
|
||||
|
||||
export default function Footer({language, data}: Props) {
|
||||
return (
|
||||
<>
|
||||
<section className="bg-mti-gray-seasalt w-full">
|
||||
<div
|
||||
className={clsx(
|
||||
"w-full py-10 px-8 md:px-28 flex flex-col md:justify-between gap-8 lg:container lg:mx-auto",
|
||||
language === "ar" ? "md:flex-row-reverse" : "md:flex-row",
|
||||
)}>
|
||||
<div className="flex flex-col gap-4">
|
||||
<span className="font-bold text-xl">{data.Navigation.Text}</span>
|
||||
<div className="flex flex-col gap-2">
|
||||
<FooterLink language={language} href={`/about`}>
|
||||
{data.Navigation.WhyUs}
|
||||
</FooterLink>
|
||||
<FooterLink language={language} href={`/about#capabilities`}>
|
||||
{data.Navigation.Capabilities}
|
||||
</FooterLink>
|
||||
<FooterLink language={language} href={`/about#expertise`}>
|
||||
{data.Navigation.Expertise}
|
||||
</FooterLink>
|
||||
<FooterLink language={language} href="/history">
|
||||
{data.Navigation.History}
|
||||
</FooterLink>
|
||||
<FooterLink language={language} href="/contact">
|
||||
{data.Navigation.Contact}
|
||||
</FooterLink>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-4">
|
||||
<span className="font-bold text-xl">{data.Services.Text}</span>
|
||||
<div className="flex flex-col gap-2">
|
||||
<FooterLink language={language} href="/#benefits">
|
||||
{data.Services.EnCoachBenefits}
|
||||
</FooterLink>
|
||||
<FooterLink language={language} href="#testimonials">
|
||||
{data.Services.StudentTestimonials}
|
||||
</FooterLink>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-4">
|
||||
<span className="font-bold text-xl">{data.About.Text}</span>
|
||||
<div className="flex flex-col gap-2">
|
||||
<FooterLink language={language} href="/terms">
|
||||
{data.About.Terms}
|
||||
</FooterLink>
|
||||
<FooterLink language={language} href="/privacy-policy">
|
||||
{data.About.PrivacyPolicy}
|
||||
</FooterLink>
|
||||
<FooterLink language={language} href="/about">
|
||||
{data.About.Text}
|
||||
</FooterLink>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-4">
|
||||
<span className="font-bold text-xl">{data.GetInTouch.Title}</span>
|
||||
<div className="flex flex-col gap-4">
|
||||
<span className="max-w-[280px]">{data.GetInTouch.Text}</span>
|
||||
<div className={clsx("flex gap-6 items-center", language === "ar" && "flex-row-reverse justify-start")}>
|
||||
<Link
|
||||
href="https://facebook.com"
|
||||
className="bg-mti-purple-ultralight rounded-full w-10 h-10 flex items-center justify-center hover:bg-mti-purple-dark text-mti-purple-light hover:text-white transition ease-in-out duration-300">
|
||||
<BiLogoFacebook className="w-6 h-6" />
|
||||
</Link>
|
||||
<Link
|
||||
href="https://twitter.com"
|
||||
className="bg-mti-purple-ultralight rounded-full w-10 h-10 flex items-center justify-center hover:bg-mti-purple-dark text-mti-purple-light hover:text-white transition ease-in-out duration-300">
|
||||
<BsTwitter className="w-5 h-5" />
|
||||
</Link>
|
||||
<Link
|
||||
href="https://instagram.com"
|
||||
className="bg-mti-purple-ultralight rounded-full w-10 h-10 flex items-center justify-center hover:bg-mti-purple-dark text-mti-purple-light hover:text-white transition ease-in-out duration-300">
|
||||
<BsInstagram className="w-5 h-5" />
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
export default function Footer({ language, data }: Props) {
|
||||
return (
|
||||
<>
|
||||
<section className="bg-mti-gray-seasalt w-full">
|
||||
<div
|
||||
className={clsx(
|
||||
"w-full py-10 px-8 md:px-28 flex flex-col md:justify-between gap-8 lg:container lg:mx-auto",
|
||||
language === "ar" ? "md:flex-row-reverse" : "md:flex-row",
|
||||
)}
|
||||
>
|
||||
<div className="flex flex-col gap-4">
|
||||
<span className="font-bold text-xl">{data.Navigation.Text}</span>
|
||||
<div className="flex flex-col gap-2">
|
||||
<FooterLink language={language} href={`/about`}>
|
||||
{data.Navigation.WhyUs}
|
||||
</FooterLink>
|
||||
<FooterLink language={language} href={`/about#capabilities`}>
|
||||
{data.Navigation.Capabilities}
|
||||
</FooterLink>
|
||||
<FooterLink language={language} href={`/about#expertise`}>
|
||||
{data.Navigation.Expertise}
|
||||
</FooterLink>
|
||||
<FooterLink language={language} href="/history">
|
||||
{data.Navigation.History}
|
||||
</FooterLink>
|
||||
<FooterLink language={language} href="/contact">
|
||||
{data.Navigation.Contact}
|
||||
</FooterLink>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-4">
|
||||
<span className="font-bold text-xl">{data.Services.Text}</span>
|
||||
<div className="flex flex-col gap-2">
|
||||
<FooterLink language={language} href="/#benefits">
|
||||
{data.Services.EnCoachBenefits}
|
||||
</FooterLink>
|
||||
<FooterLink language={language} href="#testimonials">
|
||||
{data.Services.StudentTestimonials}
|
||||
</FooterLink>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-4">
|
||||
<span className="font-bold text-xl">{data.About.Text}</span>
|
||||
<div className="flex flex-col gap-2">
|
||||
<FooterLink language={language} href="/terms">
|
||||
{data.About.Terms}
|
||||
</FooterLink>
|
||||
<FooterLink language={language} href="/privacy-policy">
|
||||
{data.About.PrivacyPolicy}
|
||||
</FooterLink>
|
||||
<FooterLink language={language} href="/about">
|
||||
{data.About.Text}
|
||||
</FooterLink>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-4">
|
||||
<span className="font-bold text-xl">{data.GetInTouch.Title}</span>
|
||||
<div className="flex flex-col gap-4">
|
||||
<span className="max-w-[280px]">{data.GetInTouch.Text}</span>
|
||||
<div
|
||||
className={clsx(
|
||||
"flex gap-6 items-center",
|
||||
language === "ar" && "flex-row-reverse justify-start",
|
||||
)}
|
||||
>
|
||||
<Link
|
||||
href="https://facebook.com"
|
||||
className="bg-mti-purple-ultralight rounded-full w-10 h-10 flex items-center justify-center hover:bg-mti-purple-dark text-mti-purple-light hover:text-white transition ease-in-out duration-300"
|
||||
>
|
||||
<BiLogoFacebook className="w-6 h-6" />
|
||||
</Link>
|
||||
<Link
|
||||
href="https://twitter.com"
|
||||
className="bg-mti-purple-ultralight rounded-full w-10 h-10 flex items-center justify-center hover:bg-mti-purple-dark text-mti-purple-light hover:text-white transition ease-in-out duration-300"
|
||||
>
|
||||
<BsTwitterX className="w-5 h-5" />
|
||||
</Link>
|
||||
<Link
|
||||
href="https://instagram.com"
|
||||
className="bg-mti-purple-ultralight rounded-full w-10 h-10 flex items-center justify-center hover:bg-mti-purple-dark text-mti-purple-light hover:text-white transition ease-in-out duration-300"
|
||||
>
|
||||
<BsInstagram className="w-5 h-5" />
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer className="w-full py-10 bg-mti-rose-light text-white flex items-center justify-center">© {data.Copyright}</footer>
|
||||
</>
|
||||
);
|
||||
<footer className="w-full py-10 bg-mti-rose-light text-white flex items-center justify-center">
|
||||
© {data.Copyright}
|
||||
</footer>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user