About fonts and heading updates

Author: realstoman

src/components/about/AboutClients.js

@@ -7,10 +7,10 @@ const AboutClients = () => {
 
 	return (
 		<div className="mt-10 sm:mt-20">
-			<p className="text-2xl sm:text-4xl text-primary-dark dark:text-primary-light font-sans font-semibold">
+			<p className="font-general-medium text-2xl sm:text-3xl  text-center text-primary-dark dark:text-primary-light">
 				{clientsHeading}
 			</p>
-			<div className="grid grid-cols-2 sm:grid-cols-4 mt-10 sm:mt-20 gap-2">
+			<div className="grid grid-cols-2 sm:grid-cols-4 mt-10 sm:mt-14 gap-2">
 				{clientsData.map((client) => (
 					<AboutClientSingle
 						title={client.title}

src/components/about/AboutCounter.js

@@ -1,39 +1,39 @@
 const AboutCounter = () => {
 	return (
 		<div className="mt-10 sm:mt-20 bg-primary-light dark:bg-ternary-dark shadow-sm">
-			<div className="container mx-auto py-20 block sm:flex sm:justify-between items-center">
+			<div className="font-general-medium container mx-auto py-20 block sm:flex sm:justify-between items-center">
 				<div className="mb-20 sm:mb-0">
-					<h2 className="text-4xl text-center font-bold text-secondary-dark dark:text-secondary-light mb-2">
+					<h2 className="text-4xl text-center text-secondary-dark dark:text-secondary-light mb-2">
 						12
 					</h2>
-					<span className="block text-md text-center text-ternary-dark dark:text-ternary-light">
+					<span className="font-general-regular block text-md text-center text-ternary-dark dark:text-ternary-light">
 						Years of experience
 					</span>
 				</div>
 
 				<div className="mb-20 sm:mb-0">
-					<h2 className="text-4xl text-center font-bold text-secondary-dark dark:text-secondary-light mb-2">
+					<h2 className="text-4xl text-center text-secondary-dark dark:text-secondary-light mb-2">
 						20k+
 					</h2>
-					<span className="block text-md text-center text-ternary-dark dark:text-ternary-light">
+					<span className="font-general-regular block text-md text-center text-ternary-dark dark:text-ternary-light">
 						Stars on GitHub
 					</span>
 				</div>
 
 				<div className="mb-20 sm:mb-0">
-					<h2 className="text-4xl text-center font-bold text-secondary-dark dark:text-secondary-light mb-2">
+					<h2 className="text-4xl text-center text-secondary-dark dark:text-secondary-light mb-2">
 						92%
 					</h2>
-					<span className="block text-md text-center text-ternary-dark dark:text-ternary-light">
+					<span className="font-general-regular block text-md text-center text-ternary-dark dark:text-ternary-light">
 						Positive feedback
 					</span>
 				</div>
 
 				<div className="mb-20 sm:mb-0">
-					<h2 className="text-4xl text-center font-bold text-secondary-dark dark:text-secondary-light mb-2">
+					<h2 className="text-4xl text-center text-secondary-dark dark:text-secondary-light mb-2">
 						77
 					</h2>
-					<span className="block text-md text-center text-ternary-dark dark:text-ternary-light">
+					<span className="font-general-regular block text-md text-center text-ternary-dark dark:text-ternary-light">
 						Projects completed
 					</span>
 				</div>

src/components/about/AboutMeBio.js

@@ -14,7 +14,7 @@ const AboutMeBio = () => {
 			{/* About me portfolio image end */}
 
 			{/* About me details start */}
-			<div className="w-full sm:w-3/4 text-left">
+			<div className="font-general-regular w-full sm:w-3/4 text-left">
 				{aboutMe.map((bio) => (
 					<p
 						className="mb-4 text-ternary-dark dark:text-ternary-light text-lg"

src/data/clientsData.js

@@ -8,7 +8,7 @@ import SamsungImage from '../images/brands/samsung_gray.png';
 import CanonImage from '../images/brands/canon_gray.png';
 import PumaImage from '../images/brands/puma_gray.png';
 
-export const clientsHeading = 'Some of the brands I worked with';
+export const clientsHeading = 'Some of the brands that trust me';
 
 export const clientsData = [
 	{