About section light and dark colors

Author: zlrundefined

src/components/about/AboutCounter.vue

@@ -4,20 +4,44 @@
 			class="container mx-auto py-20 block sm:flex sm:justify-between sm:items-center"
 		>
 			<div class="mb-20 sm:mb-0">
-				<p class="text-4xl font-bold text-gray-600 mb-2">12</p>
-				<span class="text-md text-gray-500">Years of experience</span>
+				<p
+					class="text-4xl font-bold text-secondary-dark dark:text-secondary-light mb-2"
+				>
+					12
+				</p>
+				<span class="text-md text-ternary-dark dark:text-ternary-light"
+					>Years of experience</span
+				>
 			</div>
 			<div class="mb-20 sm:mb-0">
-				<p class="text-4xl font-bold text-gray-600 mb-2">20k+</p>
-				<span class="text-md text-gray-500">Stars on GitHub</span>
+				<p
+					class="text-4xl font-bold text-secondary-dark dark:text-secondary-light mb-2"
+				>
+					20k+
+				</p>
+				<span class="text-md text-ternary-dark dark:text-ternary-light"
+					>Stars on GitHub</span
+				>
 			</div>
 			<div class="mb-20 sm:mb-0">
-				<p class="text-4xl font-bold text-gray-600 mb-2">92%</p>
-				<span class="text-md text-gray-500">Positive feedback</span>
+				<p
+					class="text-4xl font-bold text-secondary-dark dark:text-secondary-light mb-2"
+				>
+					92%
+				</p>
+				<span class="text-md text-ternary-dark dark:text-ternary-light"
+					>Positive feedback</span
+				>
 			</div>
 			<div>
-				<p class="text-4xl font-bold text-gray-600 mb-2">77</p>
-				<span class="text-md text-gray-500">Projects completed</span>
+				<p
+					class="text-4xl font-bold text-secondary-dark dark:text-secondary-light mb-2"
+				>
+					77
+				</p>
+				<span class="text-md text-ternary-dark dark:text-ternary-light"
+					>Projects completed</span
+				>
 			</div>
 		</div>
 	</div>

src/components/about/AboutMe.vue

@@ -8,7 +8,7 @@
 			/>
 		</div>
 		<div class="w-full sm:w-3/4 text-left">
-			<p class="mb-4 text-gray-500 text-lg">
+			<p class="mb-4 text-ternary-dark dark:text-ternary-light text-lg">
 				Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nihil
 				vel illum asperiores dignissimos cumque quibusdam et fugiat
 				voluptatem nobis suscipit explicabo, eaque consequatur nesciunt,
@@ -22,19 +22,19 @@
 				recusandae quas, fuga voluptatibus nesciunt odit libero tenetur
 				neque consequatur ea.
 			</p>
-			<p class="mb-4 text-gray-500 text-lg">
+			<p class="mb-4 text-ternary-dark dark:text-ternary-light text-lg">
 				Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nihil
 				vel illum asperiores dignissimos cumque quibusdam et fugiat
 				voluptatem nobis suscipit explicabo, eaque consequatur nesciunt,
 				fugit eligendi corporis laudantium adipisci soluta?
 			</p>
-			<p class="text-gray-500 text-lg">
+			<p class="text-ternary-dark dark:text-ternary-light text-lg">
 				Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nihil
 				vel illum asperiores dignissimos cumque quibusdam et fugiat
 				voluptatem nobis suscipit explicabo, eaque consequatur nesciunt,
 				fugit eligendi corporis laudantium adipisci soluta?
 			</p>
-			<p class="mb-4 text-gray-500 text-lg">
+			<p class="mb-4 text-ternary-dark dark:text-ternary-light text-lg">
 				Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nihil
 				vel illum asperiores dignissimos cumque quibusdam et fugiat
 				voluptatem nobis suscipit explicabo, eaque consequatur nesciunt,

src/components/about/Clients.vue

@@ -1,63 +1,65 @@
 <template>
 	<div class="mt-10 sm:mt-20">
-		<p class="text-2xl sm:text-4xl text-gray-600 font-sans font-semibold">
+		<p
+			class="text-2xl sm:text-4xl text-primary-dark dark:text-primary-light font-sans font-semibold"
+		>
 			Some of the best companies I worked with
 		</p>
 		<div class="grid grid-cols-2 sm:grid-cols-4 mt-10 sm:mt-20 gap-2">
 			<div>
 				<img
 					src="../../assets/images/brands/amazon_gray.png"
 					alt="Amazon"
-					class="w-64 py-5 px-10 border border-gray-50 shadow-sm rounded-xl mb-8 cursor-pointer"
+					class="w-64 py-5 px-10 border border-ternary-light dark:border-ternary-dark shadow-sm rounded-xl mb-8 cursor-pointer"
 				/>
 			</div>
 			<div>
 				<img
 					src="../../assets/images/brands/sony_gray.png"
 					alt="SONY"
-					class="w-64 py-5 px-10 border border-gray-50 shadow-sm rounded-xl mb-8 cursor-pointer"
+					class="w-64 py-5 px-10 border border-ternary-light dark:border-ternary-dark shadow-sm rounded-xl mb-8 cursor-pointer"
 				/>
 			</div>
 			<div>
 				<img
 					src="../../assets/images/brands/adidas_gray.png"
 					alt="Adidas"
-					class="w-64 py-5 px-10 border border-gray-50 shadow-sm rounded-xl mb-8 cursor-pointer"
+					class="w-64 py-5 px-10 border border-ternary-light dark:border-ternary-dark shadow-sm rounded-xl mb-8 cursor-pointer"
 				/>
 			</div>
 			<div>
 				<img
 					src="../../assets/images/brands/fila_gray.png"
 					alt="FILA"
-					class="w-64 py-5 px-10 border border-gray-50 shadow-sm rounded-xl mb-8 cursor-pointer"
+					class="w-64 py-5 px-10 border border-ternary-light dark:border-ternary-dark shadow-sm rounded-xl mb-8 cursor-pointer"
 				/>
 			</div>
 			<div>
 				<img
 					src="../../assets/images/brands/nb_gray.png"
 					alt="NB"
-					class="w-64 py-5 px-10 border border-gray-50 shadow-sm rounded-xl mb-8 cursor-pointer"
+					class="w-64 py-5 px-10 border border-ternary-light dark:border-ternary-dark shadow-sm rounded-xl mb-8 cursor-pointer"
 				/>
 			</div>
 			<div>
 				<img
 					src="../../assets/images/brands/samsung_gray.png"
 					alt="Samsung"
-					class="w-64 py-5 px-10 border border-gray-50 shadow-sm rounded-xl mb-8 cursor-pointer"
+					class="w-64 py-5 px-10 border border-ternary-light dark:border-ternary-dark shadow-sm rounded-xl mb-8 cursor-pointer"
 				/>
 			</div>
 			<div>
 				<img
 					src="../../assets/images/brands/canon_gray.png"
 					alt="Canon"
-					class="w-64 py-5 px-10 border border-gray-50 shadow-sm rounded-xl mb-8 cursor-pointer"
+					class="w-64 py-5 px-10 border border-ternary-light dark:border-ternary-dark shadow-sm rounded-xl mb-8 cursor-pointer"
 				/>
 			</div>
 			<div>
 				<img
 					src="../../assets/images/brands/puma_gray.png"
 					alt="Puma"
-					class="w-64 py-5 px-10 border border-gray-50 shadow-sm rounded-xl mb-8 cursor-pointer"
+					class="w-64 py-5 px-10 border border-ternary-light dark:border-ternary-dark shadow-sm rounded-xl mb-8 cursor-pointer"
 				/>
 			</div>
 		</div>