Add about counter ui

Author: realstoman

src/components/AboutCounter.js

@@ -0,0 +1,45 @@
+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 sm:items-center">
+				<div className="mb-20 sm:mb-0">
+					<h2 className="text-4xl font-bold text-secondary-dark dark:text-secondary-light mb-2">
+						12
+					</h2>
+					<span className="block text-md text-ternary-dark dark:text-ternary-light">
+						Years of experience
+					</span>
+				</div>
+
+				<div className="mb-20 sm:mb-0">
+					<h2 className="text-4xl font-bold text-secondary-dark dark:text-secondary-light mb-2">
+						20k+
+					</h2>
+					<span className="block text-md text-ternary-dark dark:text-ternary-light">
+						Stars on GitHub
+					</span>
+				</div>
+
+				<div className="mb-20 sm:mb-0">
+					<h2 className="text-4xl font-bold text-secondary-dark dark:text-secondary-light mb-2">
+						92%
+					</h2>
+					<span className="block text-md text-ternary-dark dark:text-ternary-light">
+						Positive feedback
+					</span>
+				</div>
+
+				<div className="mb-20 sm:mb-0">
+					<h2 className="text-4xl font-bold text-secondary-dark dark:text-secondary-light mb-2">
+						77
+					</h2>
+					<span className="block text-md text-ternary-dark dark:text-ternary-light">
+						Projects completed
+					</span>
+				</div>
+			</div>
+		</div>
+	);
+};
+
+export default AboutCounter;

src/pages/AboutMe.js

@@ -1,9 +1,15 @@
+import AboutCounter from '../components/AboutCounter';
 import AboutMeBio from '../components/AboutMeBio';
 
 const About = () => {
 	return (
-		<div className="container mx-auto">
-			<AboutMeBio />
+		<div>
+			<div className="container mx-auto">
+				<AboutMeBio />
+			</div>
+
+			{/** Counter without paddings */}
+			<AboutCounter />
 		</div>
 	);
 };