- Started working on the about page;

- Updated the translation;
- Changed the language switch from flags to text

src/templates/Home.tsx

@@ -18,37 +18,13 @@ import Footer from "@/components/Footer";
 import translation from "@/translation/home.json";
 import reactStringReplace from "react-string-replace";
 import clsx from "clsx";
-
-const HIGHLIGHT = /({{.+}})/g;
+import Tag from "@/components/Tag";
+import Title from "@/components/Title";
 
 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">