feat: Earn hero section (#16)

src/components/Navbar.vue

@@ -6,7 +6,7 @@
 			</RouterLink>
 			<nav class="flex space-x-8 body-small text-neutral-800">
 				<RouterLink to="/company">Company</RouterLink>
-				<a href="#">Earn</a>
+				<RouterLink to="/earn">Earn</RouterLink>
 				<RouterLink to="/developer">Developer</RouterLink>
 				<div @mouseenter="showApps = true" @mouseleave="showApps = false">
 					<div class="flex">

src/pages/Earn/EarnHeroSection.vue

@@ -0,0 +1,13 @@
+<template>
+	<div class="bg-white grid md:grid-cols-[50%_50%]">
+		<div class="flex flex-col justify-center items-center text-center max-w-xl m-auto gap-y-6">
+			<h2>Decentralize everything and earn LibertAI Tokens</h2>
+			<p class="body-small">
+				Are you ready to dive into a new world of decentralized computing, where your contributions are rewarded with
+				tangible benefits? Look no further than Libertai Tokens! These Tokens play an essential role within the exciting
+				and innovative LibertAI ecosystem.
+			</p>
+		</div>
+		<img alt="Earn" class="max-md:max-h-80 m-auto" src="../../assets/earn.svg" />
+	</div>
+</template>

src/pages/Earn/index.vue

@@ -0,0 +1,7 @@
+<script lang="ts" setup>
+import EarnHeroSection from "./EarnHeroSection.vue";
+</script>
+
+<template>
+	<EarnHeroSection />
+</template>

src/router.ts

@@ -4,6 +4,7 @@ import Home from "./pages/Home/index.vue";
 import Company from "./pages/Company/index.vue";
 import Design from "./pages/Design/index.vue";
 import Developer from "./pages/Developer/index.vue";
+import Earn from "./pages/Earn/index.vue";
 
 const routes = [
 	{
@@ -22,6 +23,10 @@ const routes = [
 		path: "/developer",
 		component: Developer,
 	},
+	{
+		path: "/earn",
+		component: Earn,
+	},
 ];
 
 export const router = createRouter({