About counter design

Author: zlrundefined

src/components/about/AboutCounter.vue

@@ -1,20 +1,22 @@
 <template>
-	<div class="flex justify-between items-center">
-		<div>
-			<p>12</p>
-			<span>Years of experience</span>
-		</div>
-		<div>
-			<p>20k+</p>
-			<span>Stars on GitHub</span>
-		</div>
-		<div>
-			<p>92%</p>
-			<span>Positive feedback</span>
-		</div>
-		<div>
-			<p>77</p>
-			<span>Projects completed</span>
+	<div class="mt-20 bg-gray-100 shadow-sm">
+		<div class="container mx-auto p-10 flex justify-between items-center">
+			<div>
+				<p class="text-4xl font-bold text-gray-600 mb-2">12</p>
+				<span class="text-md text-gray-500">Years of experience</span>
+			</div>
+			<div>
+				<p class="text-4xl font-bold text-gray-600 mb-2">20k+</p>
+				<span class="text-md text-gray-500">Stars on GitHub</span>
+			</div>
+			<div>
+				<p class="text-4xl font-bold text-gray-600 mb-2">92%</p>
+				<span class="text-md text-gray-500">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>
+			</div>
 		</div>
 	</div>
 </template>

src/components/about/AboutMe.vue

@@ -3,7 +3,7 @@
 		<div class="w-full sm:w-1/3">
 			<img src="" alt="" />
 		</div>
-		<div class="w-full sm:w-2/3">
+		<div class="w-full sm:w-2/3 text-left">
 			<p>
 				Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nihil
 				vel illum asperiores dignissimos cumque quibusdam et fugiat

src/views/About.vue

@@ -0,0 +1,42 @@
+<template>
+	<div>
+		<div class="container mx-auto px-4 py-10">
+			<!-- About me start -->
+			<AboutMe />
+			<!-- About me end -->
+		</div>
+
+		<!-- About counter start -->
+		<AboutCounter />
+		<!-- About counter end -->
+	</div>
+</template>
+
+<script>
+import AboutMe from '@/components/about/AboutMe';
+import AboutCounter from '@/components/about/AboutCounter';
+import feather from 'feather-icons';
+
+export default {
+	name: 'About',
+	components: {
+		AboutMe,
+		AboutCounter,
+	},
+	props: {
+		msg: String,
+	},
+	data: () => {
+		return {};
+	},
+	mounted() {
+		feather.replace();
+	},
+	updated() {
+		feather.replace();
+	},
+	methods: {},
+};
+</script>
+
+<style scoped></style>