chore: adjusting styling and texts

docs/src/app/(doc-session)/documentation/js/functions/cnpjIsValid/page.tsx

@@ -44,7 +44,7 @@ export default function CnpjIsValid() {
 				<p>{t("The function takes two parameters:")}</p>
 				<ul>
 					<li>
-						<code>cnpj</code> (string) - {t("The CNPJ number to validate.")}
+						<code>cnpj</code> (string) - {t("The CNPJ number to be validate.")}
 					</li>
 					<li>
 						<code>errorMsg</code> ({t("optional array")}) -{" "}

docs/src/app/(doc-session)/documentation/js/functions/isEmpty/page.tsx

@@ -97,8 +97,7 @@ console.log(result6);`}
 					{t(
 						"method and checks if the resulting string is empty (i.e., has a length of 0). If the input string consists of only whitespace characters, the function also returns.",
 					)}{" "}
-					<code>true</code>
-					{t("as it considers such strings to be empty.")}
+					<code>true</code> {t("as it considers such strings to be empty.")}
 				</p>
 			</div>
 		</div>

docs/src/app/(doc-session)/documentation/js/functions/isValidImage/page.tsx

@@ -88,7 +88,7 @@ if (!isValidImageResult) {
     throw new BadRequestException('Invalid image');
 }`}
 				</SyntaxHighlighter>
-				<p>
+				<p className="mt-6">
 					{t("First, import the")} <code>isValidImage</code>{" "}
 					{t(
 						"function from 'multiform-validator'. Then, define the path to the image you want to check. Call the",

docs/src/app/(doc-session)/documentation/js/functions/validateBRPhoneNumber/page.tsx

@@ -29,7 +29,7 @@ export default function ValidateBRPhoneNumber() {
 				<h2 className="subtitle">Import</h2>
 				<p>
 					{t(
-						'The function can be imported using ES6 syntax from the "br-phone-number-validator" package:',
+						'The function can be imported using ES6 syntax from the "validateBRPhoneNumber" package:',
 					)}
 				</p>
 

docs/src/app/(doc-session)/documentation/js/functions/validateEmail/page.tsx

@@ -28,7 +28,7 @@ export default function ValidateEmail() {
 
 				<p>
 					{t("What is the difference between")} <code>validateEmail</code>{" "}
-					{t("and")} <code>isEmail</code>?{" "}
+					{t("and")} <code>isEmail</code> ?{" "}
 					{t(
 						"isEmail just does simple validations like checking if the string has the formatting of an email like several validators out there,",
 					)}{" "}

docs/src/app/(doc-session)/documentation/js/functions/validateTextarea/page.tsx

@@ -16,7 +16,12 @@ export default function ValidateTextarea() {
 				<DrawerComponent />
 			</div>
 			<div className="container-fluid container">
-				<h1>validateTextarea {t("Function Documentation")}</h1>
+				<h1>
+					<p>
+						<code>validateTextarea</code>
+					</p>{" "}
+					{t("Function Documentation")}
+				</h1>
 				<p>
 					{t(
 						"This function is a text area validation utility that checks the validity of a given textarea string based on certain criteria.",

docs/src/app/(doc-session)/documentation/js/functions/validateUsername/page.tsx

@@ -34,7 +34,7 @@ export default function ValidateUsername() {
 				</p>
 
 				<SyntaxHighlighter language="javascript" style={a11yDark}>
-					{`import {validateUsername} from 'multiform-validator';`}
+					{`import { validateUsername } from 'multiform-validator';`}
 				</SyntaxHighlighter>
 
 				<p>
@@ -45,7 +45,7 @@ export default function ValidateUsername() {
 				</p>
 
 				<SyntaxHighlighter language="javascript" style={a11yDark}>
-					{`const {validateUsername} = require('multiform-validator');`}
+					{`const { validateUsername } = require('multiform-validator');`}
 				</SyntaxHighlighter>
 
 				<h2 className="subtitle">{t("Function Signature")}</h2>

docs/src/app/about/page.tsx

@@ -1,9 +1,12 @@
 import "@/css/infos.css";
-import translation from "@/components/Internationalization";
+import translation, { getBrowserLang } from "@/components/Internationalization";
 import MainBg from "@/components/MainBg";
 
 export default function AboutPage() {
-	const t = (text: string) => translation({ text, subject: "About" });
+	const browserLang = getBrowserLang();
+
+	const t = (text: string) =>
+		translation({ text, subject: "About", language: browserLang });
 
 	return (
 		<MainBg>

docs/src/app/news/page.tsx

@@ -25,7 +25,6 @@ export default function NewsPage() {
 
 	return (
 		<MainBg>
-			<h1>TESTE: {GOOGLE_ADSENSE_CLIENT_ID}</h1>
 			{isClient && (
 				<>
 					<div id="news-page">

docs/src/css/functions.css

@@ -36,6 +36,7 @@
 #page-content-wrapper .container p {
   line-height: 1.6;
   margin-bottom: 20px;
+  font-size: 1rem;
 }
 #page-content-wrapper .container-fluid p code,
 #page-content-wrapper .container p code {
@@ -80,6 +81,59 @@
   white-space: pre-wrap;
   word-break: break-all;
 }
+@media (max-width: 768px) {
+  #page-content-wrapper .container-fluid,
+  #page-content-wrapper .container {
+    padding: 0 10px;
+  }
+  #page-content-wrapper .container-fluid .title,
+  #page-content-wrapper .container .title {
+    font-size: 2rem;
+  }
+  #page-content-wrapper .container-fluid .subtitle,
+  #page-content-wrapper .container .subtitle {
+    font-size: 1.6rem;
+  }
+  #page-content-wrapper .container-fluid p,
+  #page-content-wrapper .container p {
+    font-size: 0.9rem;
+  }
+}
+@media (max-width: 576px) {
+  #page-content-wrapper .container-fluid,
+  #page-content-wrapper .container {
+    padding: 0 5px;
+  }
+  #page-content-wrapper .container-fluid .title,
+  #page-content-wrapper .container .title {
+    font-size: 1.8rem;
+  }
+  #page-content-wrapper .container-fluid .subtitle,
+  #page-content-wrapper .container .subtitle {
+    font-size: 1.4rem;
+  }
+  #page-content-wrapper .container-fluid p,
+  #page-content-wrapper .container p {
+    font-size: 0.8rem;
+  }
+}
+@media (max-width: 400px) {
+  #page-content-wrapper {
+    padding: 5px;
+  }
+  #page-content-wrapper .container-fluid .title,
+  #page-content-wrapper .container .title {
+    font-size: 1.6rem;
+  }
+  #page-content-wrapper .container-fluid .subtitle,
+  #page-content-wrapper .container .subtitle {
+    font-size: 1.2rem;
+  }
+  #page-content-wrapper .container-fluid p,
+  #page-content-wrapper .container p {
+    font-size: 0.7rem;
+  }
+}
 
 .lastLi {
   margin-bottom: 20px;

docs/src/css/functions.scss

@@ -40,6 +40,7 @@ $secondary-color: #6c757d;
 		p {
 			line-height: 1.6;
 			margin-bottom: 20px;
+			font-size: 1rem;
 
 			code {
 				padding: 2px 5px;
@@ -85,6 +86,63 @@ $secondary-color: #6c757d;
 			word-break: break-all;
 		}
 	}
+
+	@media (max-width: 768px) {
+		.container-fluid,
+		.container {
+			padding: 0 10px;
+
+			.title {
+				font-size: 2rem;
+			}
+
+			.subtitle {
+				font-size: 1.6rem;
+			}
+
+			p {
+				font-size: 0.9rem;
+			}
+		}
+	}
+
+	@media (max-width: 576px) {
+		.container-fluid,
+		.container {
+			padding: 0 5px;
+
+			.title {
+				font-size: 1.8rem;
+			}
+
+			.subtitle {
+				font-size: 1.4rem;
+			}
+
+			p {
+				font-size: 0.8rem;
+			}
+		}
+	}
+
+	@media (max-width: 400px) {
+		padding: 5px;
+
+		.container-fluid,
+		.container {
+			.title {
+				font-size: 1.6rem;
+			}
+
+			.subtitle {
+				font-size: 1.2rem;
+			}
+
+			p {
+				font-size: 0.7rem;
+			}
+		}
+	}
 }
 
 .lastLi {

docs/src/css/infos.css

@@ -2,6 +2,7 @@
 #info-section {
   padding: 20px;
   text-align: center;
+  margin-top: 35px;
 }
 #info-section h1 {
   font-size: 36px;
@@ -22,4 +23,28 @@
 }
 #info-section a:hover {
   text-decoration: underline;
+}
+@media (max-width: 768px) {
+  #info-section {
+    padding: 12px;
+  }
+  #info-section h1 {
+    font-size: 32px;
+  }
+  #info-section p {
+    font-size: 16px;
+  }
+}
+@media (max-width: 576px) {
+  #info-section {
+    padding: 8px;
+  }
+  #info-section h1 {
+    font-size: 28px;
+  }
+}
+@media (max-width: 480px) {
+  #info-section {
+    padding: 4px;
+  }
 }/*# sourceMappingURL=infos.css.map */

docs/src/css/infos.scss

@@ -6,34 +6,62 @@ $secondary-color: #6c757d;
 $body-bg: #e9e9e9;
 $text-color: #333;
 $footer-bg: #343a40;
+
 // General styling for the body and text
 // Styling for the section
 #info-section {
-    padding: 20px;
-    text-align: center;
-    // Styling for headings
-    h1 {
-        font-size: 36px;
-        margin-bottom: 20px;
-				font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
-				color: white;
-    }
-    // Styling for paragraphs
-    p {
-        font-size: 18px;
-        line-height: 1.6;
-				margin-block: 25px;
-				font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-				color: white;
-    }
-    // Styling for links
-    a {
-        color: $primary-color;
-        text-decoration: none;
-        &:hover {
-            text-decoration: underline;
-        }
-    }
-}
+	padding: 20px;
+	text-align: center;
+	margin-top: 35px;
+
+	// Styling for headings
+	h1 {
+		font-size: 36px;
+		margin-bottom: 20px;
+		font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
+		color: white;
+	}
+
+	// Styling for paragraphs
+	p {
+		font-size: 18px;
+		line-height: 1.6;
+		margin-block: 25px;
+		font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+		color: white;
+	}
+
+	// Styling for links
+	a {
+		color: $primary-color;
+		text-decoration: none;
+
+		&:hover {
+			text-decoration: underline;
+		}
+	}
 
+	@media (max-width: 768px) {
+		padding: 12px;
 
+		h1 {
+			font-size: 32px;
+		}
+
+		p {
+			font-size: 16px;
+		}
+	}
+
+	@media (max-width: 576px) {
+		padding: 8px;
+
+		h1 {
+			font-size: 28px;
+		}
+	}
+
+	@media (max-width: 480px) {
+		padding: 4px;
+	}
+}