devops/encoach_landingpage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Updated the Twitter logo to X

Browse Source
This commit is contained in:
Tiago Ribeiro
2024-04-22 13:47:51 +01:00
parent 3359c47379
commit f15d01ba2c
3 changed files with 109 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@@ -23,7 +23,7 @@
"react": "^18", "react": "^18",
"react-dom": "^18", "react-dom": "^18",
"react-hook-form": "^7.50.1", "react-hook-form": "^7.50.1",
"react-icons": "^4.11.0", "react-icons": "^5.1.0",
"react-string-replace": "^1.1.1", "react-string-replace": "^1.1.1",
"react-toastify": "^10.0.4", "react-toastify": "^10.0.4",
"sharp": "^0.32.6" "sharp": "^0.32.6"

195
src/components/Footer/Footer.tsx
View File

@@ -1,106 +1,119 @@
import Link from "next/link"; import Link from "next/link";
import {BiLogoFacebook} from "react-icons/bi"; import { BiLogoFacebook } from "react-icons/bi";
import {BsInstagram, BsTwitter} from "react-icons/bs"; import { BsInstagram, BsTwitterX } from "react-icons/bs";
import translation from "@/translation/footer.json"; import translation from "@/translation/footer.json";
import clsx from "clsx"; import clsx from "clsx";
import FooterSection from "@/types/cms/footer"; import FooterSection from "@/types/cms/footer";
interface Props { interface Props {
language: "en" | "ar"; language: "en" | "ar";
data: FooterSection; data: FooterSection;
} }
interface FooterLinkProps { interface FooterLinkProps {
language: "en" | "ar"; language: "en" | "ar";
children: string; children: string;
href: string; href: string;
} }
const FooterLink = ({language, href, children}: FooterLinkProps) => { const FooterLink = ({ language, href, children }: FooterLinkProps) => {
return <Link href={`${language === "ar" ? "/ar" : ""}${href}`}>{children}</Link>; return (
<Link href={`${language === "ar" ? "/ar" : ""}${href}`}>{children}</Link>
);
}; };
export default function Footer({language, data}: Props) { export default function Footer({ language, data }: Props) {
return ( return (
<> <>
<section className="bg-mti-gray-seasalt w-full"> <section className="bg-mti-gray-seasalt w-full">
<div <div
className={clsx( className={clsx(
"w-full py-10 px-8 md:px-28 flex flex-col md:justify-between gap-8 lg:container lg:mx-auto", "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", 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-4">
<div className="flex flex-col gap-2"> <span className="font-bold text-xl">{data.Navigation.Text}</span>
<FooterLink language={language} href={`/about`}> <div className="flex flex-col gap-2">
{data.Navigation.WhyUs} <FooterLink language={language} href={`/about`}>
</FooterLink> {data.Navigation.WhyUs}
<FooterLink language={language} href={`/about#capabilities`}> </FooterLink>
{data.Navigation.Capabilities} <FooterLink language={language} href={`/about#capabilities`}>
</FooterLink> {data.Navigation.Capabilities}
<FooterLink language={language} href={`/about#expertise`}> </FooterLink>
{data.Navigation.Expertise} <FooterLink language={language} href={`/about#expertise`}>
</FooterLink> {data.Navigation.Expertise}
<FooterLink language={language} href="/history"> </FooterLink>
{data.Navigation.History} <FooterLink language={language} href="/history">
</FooterLink> {data.Navigation.History}
<FooterLink language={language} href="/contact"> </FooterLink>
{data.Navigation.Contact} <FooterLink language={language} href="/contact">
</FooterLink> {data.Navigation.Contact}
</div> </FooterLink>
</div> </div>
<div className="flex flex-col gap-4"> </div>
<span className="font-bold text-xl">{data.Services.Text}</span> <div className="flex flex-col gap-4">
<div className="flex flex-col gap-2"> <span className="font-bold text-xl">{data.Services.Text}</span>
<FooterLink language={language} href="/#benefits"> <div className="flex flex-col gap-2">
{data.Services.EnCoachBenefits} <FooterLink language={language} href="/#benefits">
</FooterLink> {data.Services.EnCoachBenefits}
<FooterLink language={language} href="#testimonials"> </FooterLink>
{data.Services.StudentTestimonials} <FooterLink language={language} href="#testimonials">
</FooterLink> {data.Services.StudentTestimonials}
</div> </FooterLink>
</div> </div>
<div className="flex flex-col gap-4"> </div>
<span className="font-bold text-xl">{data.About.Text}</span> <div className="flex flex-col gap-4">
<div className="flex flex-col gap-2"> <span className="font-bold text-xl">{data.About.Text}</span>
<FooterLink language={language} href="/terms"> <div className="flex flex-col gap-2">
{data.About.Terms} <FooterLink language={language} href="/terms">
</FooterLink> {data.About.Terms}
<FooterLink language={language} href="/privacy-policy"> </FooterLink>
{data.About.PrivacyPolicy} <FooterLink language={language} href="/privacy-policy">
</FooterLink> {data.About.PrivacyPolicy}
<FooterLink language={language} href="/about"> </FooterLink>
{data.About.Text} <FooterLink language={language} href="/about">
</FooterLink> {data.About.Text}
</div> </FooterLink>
</div> </div>
<div className="flex flex-col gap-4"> </div>
<span className="font-bold text-xl">{data.GetInTouch.Title}</span> <div className="flex flex-col gap-4">
<div className="flex flex-col gap-4"> <span className="font-bold text-xl">{data.GetInTouch.Title}</span>
<span className="max-w-[280px]">{data.GetInTouch.Text}</span> <div className="flex flex-col gap-4">
<div className={clsx("flex gap-6 items-center", language === "ar" && "flex-row-reverse justify-start")}> <span className="max-w-[280px]">{data.GetInTouch.Text}</span>
<Link <div
href="https://facebook.com" className={clsx(
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"> "flex gap-6 items-center",
<BiLogoFacebook className="w-6 h-6" /> language === "ar" && "flex-row-reverse justify-start",
</Link> )}
<Link >
href="https://twitter.com" <Link
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"> href="https://facebook.com"
<BsTwitter className="w-5 h-5" /> 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"
</Link> >
<Link <BiLogoFacebook className="w-6 h-6" />
href="https://instagram.com" </Link>
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"> <Link
<BsInstagram className="w-5 h-5" /> href="https://twitter.com"
</Link> 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"
</div> >
</div> <BsTwitterX className="w-5 h-5" />
</div> </Link>
</div> <Link
</section> 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>
</>
);
} }

8
yarn.lock
View File

@@ -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" resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-7.50.1.tgz#f6aeb17a863327e5a0252de8b35b4fc8990377ed"
integrity sha512-3PCY82oE0WgeOgUtIr3nYNNtNvqtJ7BZjsbxh6TnYNbXButaD5WpjOmTjdxZfheuHKR68qfeFnEDVYoSSFPMTQ== integrity sha512-3PCY82oE0WgeOgUtIr3nYNNtNvqtJ7BZjsbxh6TnYNbXButaD5WpjOmTjdxZfheuHKR68qfeFnEDVYoSSFPMTQ==
react-icons@^4.11.0: react-icons@^5.1.0:
version "4.11.0" version "5.1.0"
resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-4.11.0.tgz#4b0e31c9bfc919608095cc429c4f1846f4d66c65" resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-5.1.0.tgz#9e7533cc256571a610c2a1ec8a7a143fb1222943"
integrity sha512-V+4khzYcE5EBk/BvcuYRq6V/osf11ODUM2J8hg2FDSswRrGvqiYUYPRy4OdrWaQOBj4NcpJfmHZLNaD+VH0TyA== integrity sha512-D3zug1270S4hbSlIRJ0CUS97QE1yNNKDjzQe3HqY0aefp2CBn9VgzgES27sRR2gOvFK+0CNx/BW0ggOESp6fqQ==
react-is@^16.13.1: react-is@^16.13.1:
version "16.13.1" version "16.13.1"