feat: add learning paths, which needs to be fixed

.vitepress/theme/LearningPaths.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+  import { computed } from 'vue'
+  import LearningPathsItem from './LearningPathsItem.vue'
+
+  interface Props {
+    size?: 'small' | 'medium'
+    learningPaths: []
+  }
+
+  const props = withDefaults(defineProps<Props>(), {
+    size: 'medium'
+  })
+
+  const classes = computed(() => [props.size, `count-${props.learningPaths.length}`])
+</script>
+
+<template>
+  <div class="vt-box-container next-steps">
+    <LearningPathsItem :size="size" :learningPath="learningPath" v-for="learningPath in learningPaths" :key="learningPath.text" />
+  </div>
+</template>
+
+<style scoped>
+  .vt-box-container {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+  }
+</style>

.vitepress/theme/LearningPathsItem.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+  interface Props {
+    size?: "small" | "medium"
+    learningPath: {
+      title: ""
+      text: ""
+      link: ""
+      target: ""
+    }
+  }
+
+  withDefaults(defineProps<Props>(), {
+    size: "medium"
+  })
+</script>
+
+<template>
+  <a class="vt-box" :href="learningPath.link">
+    <p class="next-steps-link">{{ learningPath.title }}</p>
+    <p class="next-steps-caption">{{ learningPath.text }}</p>
+  </a>
+</template>
+
+<style scoped>
+  .vt-box-container .vt-box {
+    background-color: var(--vp-c-bg-soft);
+    transition: color 0.5s, background-color 0.5s;
+    padding: 28px 36px;
+    border-radius: 8px;
+    flex: 0 32%; /* default 3 column */
+    font-size: 14px;
+    font-weight: 500;
+  }
+
+  @media (max-width: 768px) {
+    .vt-box-container .vt-box {
+      flex: 0 100%;
+      margin-bottom: 20px;
+    }
+  }
+</style>

.vitepress/theme/index.ts

@@ -3,6 +3,7 @@ import { h } from "vue"
 import type { Theme } from "vitepress"
 import DefaultTheme from "vitepress/theme"
 import "./style.css"
+import LearningPaths from "./LearningPaths.vue"
 
 export default {
   extends: DefaultTheme,
@@ -12,6 +13,6 @@ export default {
     })
   },
   enhanceApp({ app, router, siteData }) {
-    // ...
+    app.component("LearningPaths", LearningPaths)
   }
 } satisfies Theme

.vitepress/theme/style.css

@@ -8,7 +8,7 @@
  *
  * Each colors have exact same color scale system with 3 levels of solid
  * colors with different brightness, and 1 soft color.
- * 
+ *
  * - `XXX-1`: The most solid color used mainly for colored text. It must
  *   satisfy the contrast ratio against when used on top of `XXX-soft`.
  *
@@ -128,3 +128,31 @@
 .DocSearch {
   --docsearch-primary-color: var(--vp-c-brand-1) !important;
 }
+
+.next-steps {
+  margin-top: 3rem;
+}
+
+.next-steps .vt-box {
+  border: 1px solid var(--vp-c-bg-soft);
+}
+
+.next-steps .vt-box:hover {
+  border-color: var(--vp-c-success-1);
+  transition: border-color 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
+}
+
+.next-steps-link {
+  font-size: 20px;
+  line-height: 1.4;
+  letter-spacing: -0.02em;
+  margin-bottom: 0.75em;
+  display: block;
+  color: var(--vp-c-text-3);
+}
+
+.next-steps-caption {
+  margin-bottom: 0;
+  color: var(--vp-c-text-2);
+  transition: color 0.5s;
+}

src/guide/what-is-parsek.md

@@ -8,23 +8,34 @@ const members = [
     title: 'Creator',
     links: [
       { icon: 'github', link: 'https://github.com/duruer' },
-      { icon: 'instagram', link: 'https://www.instagram.com/ae.duruer' },
     ]
   },
   {
     avatar: 'https://github.com/berkaltiok.png',
-    name: 'Berk Altiok',
+    name: 'Berk Altıok',
     title: 'Random Contributor',
     links: [
       { icon: 'github', link: 'https://github.com/berkaltiok' },
       { icon: 'twitter', link: 'https://twitter.com/altiokberk' }
     ]
   }
+];
+
+const learningPaths = [
+  {
+    title: "Try the Tutorial",
+    text: "For individuals who would rather learn by doing."
+  },
+  {
+    title: "Check out the Examples",
+    text: "Discover common examples of core features and official plugins available for Parsek."
+  }
 ]
 </script>
 
 # What is Parsek?
 Parsek is a core platform designed for back-end applications, allowing developers to focus on their projects without worrying about speed optimizations, best practices, or scalability.
+
 By offering reusable plugins and rapid development tools, Parsek eliminates the need to write the same feature code for each project, ensuring faster, more efficient development while maintaining high performance.
 
 ## Philosophy
@@ -36,33 +47,29 @@ The name "Parsek" is inspired by "parcels" reflecting its modular nature. Just l
 Parsek was created to address the common challenges of traditional back-end development, where repetitive features, declining performance, and maintenance difficulties become issues over time. It also aims to overcome the limitations of other back-end frameworks by offering a modular, high-performance, and easily maintainable solution.
 
 ## Highlighted Features
-### **Vert.X-based**
-Powered by the Vert.X reactive library for high-performance.
-### **Kotlin-first**
-Fully developed in Kotlin, with seamless Java compatibility
-### **Modular architecture**
-Supports reusable plugins across projects
-### **Speed optimized**
-Fast startups and API responses with Vert.X
-### **Efficient development**
-Leverage existing plugins or quickly create new ones
-### **Monolithic approach**
-Simplified development with an all-in-one structure
-### **Cross-platform**
-Runs anywhere with JVM (ARM, Windows, Linux, macOS)
-### **Security-focused**
-Built with security in mind, so you don't need to worry about vulnerabilities
-### **Scalable**
-Designed with scalability in mind to handle growing demands easily
-### **Low Footprint & Efficient**
-Requires only a single CPU core and less than 500MB RAM, thanks to Vert.X.
+* **Vert.X-based**
+> Powered by the Vert.X reactive library for high-performance.
+* **Kotlin-first**
+> Fully developed in Kotlin, with seamless Java compatibility
+* **Modular architecture**
+> Supports reusable plugins across projects
+* **Speed optimized**
+> Fast startups and API responses with Vert.X
+* **Efficient development**
+> Leverage existing plugins or quickly create new ones
+* **Monolithic approach**
+> Simplified development with an all-in-one structure
+* **Cross-platform**
+> Runs anywhere with JVM (ARM, Windows, Linux, macOS)
+* **Security-focused**
+> Built with security in mind, so you don't need to worry about vulnerabilities
+* **Scalable**
+> Designed with scalability in mind to handle growing demands easily
+* **Low Footprint & Efficient**
+> Requires only a single CPU core and less than 500MB RAM, thanks to Vert.X.
 
 ## Pick Your Learning Path
-### **Try the Tutorial**
-For individuals who would rather learn by doing.
-
-### **Check out the Examples**
-Discover common examples of core features and official plugins available for Parsek.
+<LearningPaths size="small" :learningPaths="learningPaths" />
 
 ## Our Team
 Say hello to our awesome team.