feat(about): initial layout

public/locales/en-US.json

@@ -16,6 +16,9 @@
 		"Name": "My name is Miguel",
 		"Details": "Your next Back-end Developer"
 	},
+	"About": {
+		"Text": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur, voluptatum culpa odio optio earum deserunt nulla alias sint eum accusamus commodi ipsum, eveniet sed similique explicabo nesciunt quo non! Provident."
+	},
 	"ErrorToast": {
 		"Title": "Error copied!",
 		"Description": "Error code has copied to clipboard"

public/locales/pt-BR.json

@@ -16,6 +16,9 @@
 		"Name": "Meu nome é Miguel",
 		"Details": "Seu próximo Desenvolvedor Back-end"
 	},
+	"About": {
+		"Text": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur, voluptatum culpa odio optio earum deserunt nulla alias sint eum accusamus commodi ipsum, eveniet sed similique explicabo nesciunt quo non! Provident."
+	},
 	"ErrorToast": {
 		"Title": "Erro copiado!",
 		"Description": "Código de erro copiado para a area de transferência"

src/components/about.tsx

@@ -1,14 +1,21 @@
 import { useTranslations } from "next-intl";
 
 export function About() {
-	const t = useTranslations();
+	const t = useTranslations("About");
 
 	return (
 		<section
 			id="about"
-			className="flex justify-center mt-8 h-screen text-4xl text-blue-700"
+			className="flex justify-center mt-8 h-screen text-white"
 		>
-			<div>{t("Hello")}</div>
+			<div className="flex items-center mt-8 overflow-wrap break-word">
+				<img
+					src="PPF.jpeg"
+					alt="Miguel Alexandre Uhlein PPF"
+					className="size-80 mt-4 inline-block mr-4 rounded-xl"
+				/>
+				<p className="max-w-md">{t("Text")}</p>
+			</div>
 		</section>
 	);
 }