Updated the Twitter logo to X
This commit is contained in:
Tiago Ribeiro
@@ -23,7 +23,7 @@
|
||||
"react": "^18",
|
||||
"react-dom": "^18",
|
||||
"react-hook-form": "^7.50.1",
|
||||
"react-icons": "^4.11.0",
|
||||
"react-icons": "^5.1.0",
|
||||
"react-string-replace": "^1.1.1",
|
||||
"react-toastify": "^10.0.4",
|
||||
"sharp": "^0.32.6"
|
||||
|
||||
@@ -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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -2263,10 +2263,10 @@ react-hook-form@^7.50.1:
|
||||
resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-7.50.1.tgz#f6aeb17a863327e5a0252de8b35b4fc8990377ed"
|
||||
integrity sha512-3PCY82oE0WgeOgUtIr3nYNNtNvqtJ7BZjsbxh6TnYNbXButaD5WpjOmTjdxZfheuHKR68qfeFnEDVYoSSFPMTQ==
|
||||
|
||||
react-icons@^4.11.0:
|
||||
version "4.11.0"
|
||||
resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-4.11.0.tgz#4b0e31c9bfc919608095cc429c4f1846f4d66c65"
|
||||
integrity sha512-V+4khzYcE5EBk/BvcuYRq6V/osf11ODUM2J8hg2FDSswRrGvqiYUYPRy4OdrWaQOBj4NcpJfmHZLNaD+VH0TyA==
|
||||
react-icons@^5.1.0:
|
||||
version "5.1.0"
|
||||
resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-5.1.0.tgz#9e7533cc256571a610c2a1ec8a7a143fb1222943"
|
||||
integrity sha512-D3zug1270S4hbSlIRJ0CUS97QE1yNNKDjzQe3HqY0aefp2CBn9VgzgES27sRR2gOvFK+0CNx/BW0ggOESp6fqQ==
|
||||
|
||||
react-is@^16.13.1:
|
||||
version "16.13.1"
|
||||
|
||||
Reference in New Issue
Block a user