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

Updated the language of the home page

Browse Source
This commit is contained in:
Tiago Ribeiro
2023-10-22 15:59:37 +01:00
parent a39cf68569
commit 967ad60a1e
4 changed files with 60 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
src/templates/Home.tsx
View File

@@ -16,11 +16,39 @@ import {BiLogoFacebook} from "react-icons/bi";
import Navbar from "@/components/Navbar";
import Footer from "@/components/Footer";
import translation from "@/translation/home.json";
import reactStringReplace from "react-string-replace";
import clsx from "clsx";
const HIGHLIGHT = /({{.+}})/g;
interface Props {
language: "en" | "ar";
}
function Tag({children}: {children: string}) {
return (
<span className="text-lg font-semibold">
{reactStringReplace(children, HIGHLIGHT, (match, i) => (
<span key={i} className="text-white bg-mti-rose-light px-1 py-0">
{match.replaceAll(/[{}]/g, "")}
</span>
))}
</span>
);
}
function Title({children, className}: {children: string; className?: string}) {
return (
<span className={clsx("text-4xl font-bold max-w-md", className)}>
{reactStringReplace(children, HIGHLIGHT, (match, i) => (
<span key={i} className="text-mti-rose-light">
{match.replaceAll(/[{}]/g, "")}
</span>
))}
</span>
);
}
export default function Home({language}: Props) {
return (
<main className="h-screen w-full bg-white text-mti-black flex flex-col">
@@ -81,15 +109,9 @@ export default function Home({language}: Props) {
<section className="w-full bg-mti-gray-seasalt">
<div className="w-full p-8 lg:py-24 lg:px-12 flex flex-col gap-8 md:gap-24 lg:flex-row items-center justify-center container mx-auto">
<div className="flex flex-col gap-8">
<span className="text-lg font-semibold">
<span className="text-white bg-mti-rose-light px-1 py-0">{translation.learn_ai.tag.highlight[language]}</span>{" "}
{translation.learn_ai.tag.text[language]}
</span>
<Tag>{translation.learn_ai.tag[language]}</Tag>
<div className="flex flex-col gap-3">
<span className="text-4xl font-bold max-w-md">
{translation.learn_ai.title.text[language]}{" "}
<span className="text-mti-rose-light">{translation.learn_ai.title.highlight[language]}</span>
</span>
<Title>{translation.learn_ai.title[language]}</Title>
<p className="max-w-lg text-base">{translation.learn_ai.description[language]}</p>
</div>
<Link href="/join">
@@ -119,15 +141,9 @@ export default function Home({language}: Props) {
</div>
</div>
<div className="flex flex-col gap-8">
<span className="text-lg font-semibold">
<span className="text-white bg-mti-rose-light px-1 py-0">{translation.encoach_benefits.tag.encoach[language]}</span>{" "}
{translation.encoach_benefits.tag.benefits[language]}
</span>
<Tag>{translation.encoach_benefits.tag[language]}</Tag>
<div className="flex flex-col gap-3">
<span className="text-4xl font-bold max-w-md">
{translation.encoach_benefits.title.text[language]}{" "}
<span className="text-mti-rose-light">{translation.encoach_benefits.title.highlight[language]}</span>
</span>
<Title>{translation.encoach_benefits.title[language]}</Title>
<p className="max-w-lg text-base">{translation.encoach_benefits.description[language]}</p>
</div>
<Link href="/about">
@@ -142,15 +158,8 @@ export default function Home({language}: Props) {
{/* Interested Section */}
<section className="w-full bg-mti-gray-seasalt">
<div className="w-full p-8 py-16 md:py-32 md:px-16 lg:px-28 items-center justify-center flex flex-col gap-10 relative container mx-auto">
<span className="text-xl">
<span className="text-white bg-mti-rose-light px-1 py-0">{translation.interested.tag.highlight[language]}</span>{" "}
{translation.interested.tag.text[language]}
</span>
<span className="text-4xl font-bold max-w-sm text-center">
{translation.interested.title.beginning[language]}{" "}
<span className="text-mti-rose-light">{translation.interested.title.highlight[language]}</span>{" "}
{translation.interested.title.end[language]}
</span>
<Tag>{translation.interested.tag[language]}</Tag>
<Title className="!max-w-sm text-center">{translation.interested.title[language]}</Title>
<Link href="/contact">
<button className="bg-mti-purple-light hover:bg-mti-purple text-white rounded-xl px-8 py-4 transition ease-in-out duration-300 shadow">
{translation.interested.contact_us[language]}
@@ -178,15 +187,9 @@ export default function Home({language}: Props) {
<section className="w-full bg-white">
<div className="w-full p-8 md:p-20 lg:p-32 flex flex-col gap-12 md:flex-row items-center justify-around container mx-auto">
<div className="flex flex-col gap-8">
<span className="text-lg font-semibold">
<span className="text-white bg-mti-rose-light px-1 py-0">{translation.ceo_message.tag.highlight[language]}</span>{" "}
{translation.ceo_message.tag.text[language]}
</span>
<Tag>{translation.ceo_message.tag[language]}</Tag>
<div className="flex flex-col gap-3">
<span className="text-4xl font-bold max-w-md">
&ldquo;{translation.ceo_message.title.text[language]}{" "}
<span className="text-mti-rose-light">{translation.ceo_message.title.highlight[language]}</span>&rdquo;
</span>
<Title>{translation.ceo_message.title[language]}</Title>
<p className="max-w-lg text-base">{translation.ceo_message.description[language]}</p>
</div>
<Link href="/about">