Updated the side of the arabic

src/templates/About.tsx

@@ -4,6 +4,7 @@ import Navbar from "@/components/Navbar";
 import Tag from "@/components/Tag";
 import Title from "@/components/Title";
 import translation from "@/translation/about.json";
+import clsx from "clsx";
 import React from "react";
 import {BsEye, BsEyeFill, BsFlower3, BsRocketTakeoffFill} from "react-icons/bs";
 
@@ -30,7 +31,7 @@ export default function About({language}: Props) {
 					<span>
 						{translation.about.text[language].split("\n").map((line, index) => (
 							<React.Fragment key={index}>
-								<p>{line}</p>
+								<p className={clsx(language === "ar" ? "text-right" : "text-left")}>{line}</p>
 								<br />
 							</React.Fragment>
 						))}
@@ -69,12 +70,12 @@ export default function About({language}: Props) {
 			{/* CEO Message Section */}
 			<section id="message" className="w-full bg-white">
 				<div className="w-full flex -md:flex-col -md:items-center -md:pb-16 justify-between gap-8 p-8 md:p-20 container mx-auto">
-					<div className="flex flex-col gap-8 max-w-xl">
+					<div className={clsx(language === "ar" ? "text-right" : "text-left", "flex flex-col gap-8 max-w-xl")}>
 						<Title>{translation.ceo_message.title[language]}</Title>
 						<span>
 							{translation.ceo_message.text[language].split("\n").map((line, index) => (
 								<React.Fragment key={index}>
-									<p>{line}</p>
+									<p className={clsx(language === "ar" ? "text-right" : "text-left")}>{line}</p>
 									<br />
 								</React.Fragment>
 							))}