chore: Improving website styling

docs/src/app/about/page.tsx

@@ -24,7 +24,7 @@ export default function AboutPage() {
 				<p>
 					But my skills don&apos;t stop there. I am equally proficient in
 					back-end development, with expertise in languages such as Python,
-					Ruby, and JavaScript (Node.js). Building robust and secure web
+					Java, and JavaScript (Node.js). Building robust and secure web
 					applications is my forte, as I understand the intricacies of
 					server-side logic. My solutions are geared towards efficiency,
 					reliability, and scalability, making sure that even during peak times,

docs/src/app/info/page.tsx

@@ -6,15 +6,13 @@ export default function InfoPage() {
 	return (
 		<MainBg>
 			<section id="info-section">
-				<h1>
-					multiform-validator - JavaScript Library for Form Field Validation
-				</h1>
+				<h1>multiform-validator - Multi Library for Form Field Validation</h1>
 				<p>
-					Introducing multiform-validator, a powerful JavaScript library
-					developed by Gabriel Logan. This versatile library is designed to
-					validate numerous form fields, including email addresses, phone
-					numbers, passwords, CPF (Brazilian individual taxpayer registry
-					numbers), credit card numbers, and more.
+					Introducing multiform-validator, a powerful Multi Library developed by
+					Gabriel Logan. This versatile library is designed to validate numerous
+					form fields, including email addresses, phone numbers, passwords, CPF
+					(Brazilian individual taxpayer registry numbers), credit card numbers,
+					and more.
 				</p>
 				<p>
 					With multiform-validator, you can ensure that the data submitted
@@ -32,7 +30,7 @@ export default function InfoPage() {
 				<p>
 					You can also use the multiform-validator to do validations in your
 					backend, it works for any type of form validation or functions that
-					use javascript, so feel free to use it
+					use javascript, python, so feel free to use it
 				</p>
 				<p>
 					What sets multiform-validator apart is its flexibility and ease of

docs/src/app/page.tsx

@@ -2,22 +2,27 @@ import Image from "next/image";
 import Link from "next/link";
 
 import MainBg from "@/components/MainBg";
+import { merriweather, oswald, playfair, roboto100, sofiaPro } from "@/fonts";
 
 export default function Home() {
 	return (
 		<MainBg>
-			<h1 className="mb-6 mt-28 p-2 text-center text-4xl font-semibold text-white">
+			<h1
+				className={`mb-6 mt-28 p-2 text-center text-4xl font-semibold text-white ${oswald.className}`}
+			>
 				Welcome to the multiform-validator website
 			</h1>
-			<p className="mb-4 text-center text-white">
+			<p className={`mb-4 text-center text-white ${merriweather.className}`}>
 				Using my library, you can convert many lines of code into very few lines
 				and as a result you have a cleaner, stronger and safer code, you will
 				have several tools and functions that will do several form validations
 			</p>
-			<h2 className="my-6 text-center text-4xl font-semibold text-white">
+			<h2
+				className={`my-6 mt-14 text-center text-4xl font-semibold text-white ${playfair.className}`}
+			>
 				Hello (:
 			</h2>
-			<p className=" text-center text-white">
+			<p className={`text-center text-white ${sofiaPro.className}`}>
 				follow the{" "}
 				<Link className="text-blue-500 hover:underline" href="/documentation">
 					documentation
@@ -51,7 +56,7 @@ export default function Home() {
 				</Link>
 			</div>
 
-			<p className=" mb-6 text-center text-white">
+			<p className={`mb-6 mt-28 text-center text-white ${roboto100.className}`}>
 				You can also help the programmer by buying a coffee at the link below,
 				thanks in advance (:
 			</p>

docs/src/components/Footer/index.tsx

@@ -4,6 +4,8 @@ import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { FaYoutube, FaInstagram, FaGithub, FaLinkedin } from "react-icons/fa";
 
+import { playfair, sofiaPro } from "@/fonts";
+
 export default function Footer() {
 	const path = usePathname();
 
@@ -17,65 +19,67 @@ export default function Footer() {
 				<footer className="flex h-56 flex-col items-center justify-center border-t-4 border-black bg-bg1-dark px-0 py-10">
 					<div className="flex items-center justify-center gap-3 pb-6 text-center">
 						<Link href="#" target="_blank" className="mx-2 text-white">
-							<FaInstagram size={32} />
+							<FaInstagram size={30} />
 						</Link>
 						<Link href="#" target="_blank" className="mx-2 text-white">
-							<FaYoutube size={32} />
+							<FaYoutube size={30} />
 						</Link>
 						<Link
 							href="https://github.com/gabriel-logan/"
 							target="_blank"
 							className="mx-2 text-white"
 						>
-							<FaGithub size={32} />
+							<FaGithub size={30} />
 						</Link>
 						<Link href="#" target="_blank" className="mx-2 text-white">
-							<FaLinkedin size={32} />
+							<FaLinkedin size={30} />
 						</Link>
 					</div>
 					<ul className="mb-0 list-none p-0 text-center text-lg leading-6">
 						<li className="mx-2 inline-block px-2">
 							<Link
 								href="/"
-								className="text-inherit text-white opacity-80 hover:opacity-100"
+								className={`text-inherit text-white opacity-80 hover:underline hover:opacity-100 ${playfair.className}`}
 							>
 								Home
 							</Link>
 						</li>
 						<li className="mx-2 inline-block px-2">
 							<Link
 								href="/documentation/"
-								className="text-inherit text-white opacity-80 hover:opacity-100"
+								className={`text-inherit text-white opacity-80 hover:underline hover:opacity-100 ${playfair.className}`}
 							>
 								Services
 							</Link>
 						</li>
 						<li className="mx-2 inline-block px-2">
 							<Link
 								href="/about/"
-								className="text-inherit text-white opacity-80 hover:opacity-100"
+								className={`text-inherit text-white opacity-80 hover:underline hover:opacity-100 ${playfair.className}`}
 							>
 								About
 							</Link>
 						</li>
 						<li className="mx-2 inline-block px-2">
 							<Link
 								href="/terms/"
-								className="text-inherit text-white opacity-80 hover:opacity-100"
+								className={`text-inherit text-white opacity-80 hover:underline hover:opacity-100 ${playfair.className}`}
 							>
 								Terms
 							</Link>
 						</li>
 						<li className="mx-2 inline-block px-2">
 							<Link
 								href="/privacity-polices/"
-								className="text-inherit text-white opacity-80 hover:opacity-100"
+								className={`text-inherit text-white opacity-80 hover:underline hover:opacity-100 ${playfair.className}`}
 							>
 								Privacy Policy
 							</Link>
 						</li>
 					</ul>
-					<p className="mb-0 mt-8 text-center text-sm text-gray-400">
+					<p
+						className={`mb-0 mt-8 text-center text-sm text-gray-400 ${sofiaPro.className}`}
+					>
 						Multiform validator © 2023 - Gabriel Logan
 					</p>
 				</footer>

docs/src/components/Header/index.tsx

@@ -6,6 +6,8 @@ import { useState } from "react";
 import { AiOutlineClose, AiOutlineMenu } from "react-icons/ai";
 import { FaCaretDown } from "react-icons/fa";
 
+import { roboto700 } from "@/fonts";
+
 export default function Header() {
 	const [isSubMenuOpen, setIsSubMenuOpen] = useState(false);
 	const [isMenuOpen, setIsMenuOpen] = useState(false);
@@ -20,7 +22,7 @@ export default function Header() {
 			{!show && (
 				<>
 					<header className="flex h-32 items-center justify-around bg-header md:h-28">
-						<h1 className="w-44 text-lg font-bold text-white">
+						<h1 className={`w-44 text-lg text-white ${roboto700.className}`}>
 							Multiform validator
 						</h1>
 						<div className="flex md:hidden">

docs/src/css/infos.css

@@ -6,11 +6,13 @@
 #info-section h1 {
   font-size: 36px;
   margin-bottom: 20px;
+  font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
 }
 #info-section p {
   font-size: 18px;
   line-height: 1.6;
   margin-block: 25px;
+  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
 }
 #info-section a {
   color: #007bff;

docs/src/css/infos.scss

@@ -15,12 +15,14 @@ $footer-bg: #343a40;
     h1 {
         font-size: 36px;
         margin-bottom: 20px;
+				font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif
     }
     // Styling for paragraphs
     p {
         font-size: 18px;
         line-height: 1.6;
 				margin-block: 25px;
+				font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif
     }
     // Styling for links
     a {

docs/src/fonts/index.ts

@@ -0,0 +1,89 @@
+import type { NextFont } from "next/dist/compiled/@next/font";
+import {
+	Inter,
+	Merriweather,
+	Open_Sans,
+	Oswald,
+	Playfair,
+	Roboto,
+	Roboto_Condensed,
+} from "next/font/google";
+import localFont from "next/font/local";
+
+// google fonts
+export const inter: NextFont = Inter({ subsets: ["latin"] });
+export const oswald: NextFont = Oswald({ subsets: ["latin"] });
+export const roboto100: NextFont = Roboto({
+	subsets: ["latin"],
+	weight: "100",
+});
+export const roboto700: NextFont = Roboto({
+	subsets: ["latin"],
+	weight: "700",
+});
+export const robotoCondensed: NextFont = Roboto_Condensed({
+	subsets: ["latin"],
+});
+export const merriweather: NextFont = Merriweather({
+	subsets: ["latin"],
+	weight: "300",
+});
+export const playfair: NextFont = Playfair({ subsets: ["latin"] });
+export const openSans: NextFont = Open_Sans({ subsets: ["latin"] });
+
+// locals fonts
+export const jersey25: NextFont = localFont({
+	src: "./Jersey25/Jersey25-Regular.ttf",
+	display: "swap",
+});
+
+export const sofiaPro: NextFont = localFont({
+	src: [
+		{
+			path: "./Sofia-pro/Sofia Pro Black Az.otf",
+		},
+		{
+			path: "./Sofia-pro/Sofia Pro Black Italic Az.otf",
+		},
+		{
+			path: "./Sofia-pro/Sofia Pro Bold Az.otf",
+		},
+		{
+			path: "./Sofia-pro/Sofia Pro Bold Italic Az.otf",
+		},
+		{
+			path: "./Sofia-pro/Sofia Pro ExtraLight Az.otf",
+		},
+		{
+			path: "./Sofia-pro/Sofia Pro ExtraLight Italic Az.otf",
+		},
+		{
+			path: "./Sofia-pro/Sofia Pro Light Az.otf",
+		},
+		{
+			path: "./Sofia-pro/Sofia Pro Light Italic Az.otf",
+		},
+		{
+			path: "./Sofia-pro/Sofia Pro Medium Az.otf",
+		},
+		{
+			path: "./Sofia-pro/Sofia Pro Medium Italic Az.otf",
+		},
+		{
+			path: "./Sofia-pro/Sofia Pro Regular Az.otf",
+		},
+		{
+			path: "./Sofia-pro/Sofia Pro Semi Bold Az.otf",
+		},
+		{
+			path: "./Sofia-pro/Sofia Pro Semi Bold Italic Az.otf",
+		},
+		{
+			path: "./Sofia-pro/Sofia Pro UltraLight Az.otf",
+		},
+		{
+			path: "./Sofia-pro/Sofia Pro UltraLight Italic Az.otf",
+		},
+	],
+	display: "swap",
+});