From 6fa3d22b68de869ac50b3dd72732bd926579989d Mon Sep 17 00:00:00 2001
From: Sitt Guruvanich <aekazitt@gmail.com>
Date: Sun, 11 Aug 2024 14:09:54 +0700
Subject: [PATCH] feat: modularize Hero section into a Hero.vue component

---
 src/App.vue                  | 48 ++-------------------------------
 src/components/Hero.vue      | 51 ++++++++++++++++++++++++++++++++++++
 src/components/HeroCards.vue |  2 +-
 src/components/index.js      |  1 +
 4 files changed, 55 insertions(+), 47 deletions(-)
 create mode 100644 src/components/Hero.vue

diff --git a/src/App.vue b/src/App.vue
index b1c6fdc..bfc4074 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,54 +1,10 @@
 <script lang="ts" setup>
 /* components */
-import { Button } from '@/components/ui/button'
-import { HeroCards, Navbar, Sponsors } from '@/components'
-
-/* vectors */
-import { Github } from 'lucide-vue-next'
-import KruttCrest from '@/assets/krutt.svg'
-
-/* functions */
-let openGitHub = () => window.open('https://github.com/krutt', '_blank', 'noreferrer, noopener')
+import { Hero, Navbar, Sponsors } from '@/components'
 </script>
 
 <template>
   <Navbar />
-  <section class="container grid lg:grid-cols-2 place-items-center py-20 md:py-32 gap-10">
-    <div class="text-center lg:text-start space-y-6">
-      <main class="text-5xl md:text-6xl font-bold">
-        <h1 class="inline">
-          <span
-            class="dark:drop-shadow-[0_1.2px_1.2px_rgba(255,255,255,0.6)] inline bg-gradient-to-r from-[#7B6A4B] via-[#B39F7B] to-[#7B6A4B] text-transparent bg-clip-text"
-          >
-            Krutt
-          </span>
-          brings Bitcoin to the mass
-        </h1>
-        with
-        <h2 class="inline">
-          <span
-            class="inline bg-gradient-to-r from-[#EB5E28] via-[#FCA311] to-[#BC13FE] text-transparent bg-clip-text"
-          >
-            Lightning &amp; Nostr
-          </span>
-          liquidity unlocks.
-        </h2>
-      </main>
-
-      <p class="text-xl text-muted-foreground md:w-10/12 mx-auto lg:mx-0">
-        Commited to open-sourcing no second best. Krutt is ahead of its peers sharing these
-        following projects:
-      </p>
-
-      <div class="space-y-4 md:space-y-0 md:space-x-4">
-        <Button class="w-full md:w-1/3">Get Started</Button>
-        <Button @click.prevent="openGitHub" class="w-full md:w-1/3" variant="outline">
-          Github Profile
-          <Github class="inline ml-2 w-5 h-5" />
-        </Button>
-      </div>
-    </div>
-    <HeroCards class="w-full" />
-  </section>
+  <Hero />
   <Sponsors />
 </template>
diff --git a/src/components/Hero.vue b/src/components/Hero.vue
new file mode 100644
index 0000000..934553d
--- /dev/null
+++ b/src/components/Hero.vue
@@ -0,0 +1,51 @@
+<script lang="ts" setup>
+/* components */
+import { Button } from '@/components/ui/button'
+import { HeroCards } from '@/components'
+
+/* vectors */
+import { Github } from 'lucide-vue-next'
+
+/* functions */
+let openGitHub = () => window.open('https://github.com/krutt', '_blank', 'noreferrer, noopener')
+</script>
+
+<template>
+  <section class="container grid lg:grid-cols-2 place-items-center py-20 md:py-32 gap-10">
+    <div class="text-center lg:text-start space-y-6">
+      <main class="text-5xl md:text-6xl font-bold">
+        <h1 class="inline">
+          <span
+            class="dark:drop-shadow-[0_1.2px_1.2px_rgba(255,255,255,0.6)] inline bg-gradient-to-r from-[#7B6A4B] via-[#B39F7B] to-[#7B6A4B] text-transparent bg-clip-text"
+          >
+            Krutt
+          </span>
+          brings Bitcoin to the mass
+        </h1>
+        with
+        <h2 class="inline">
+          <span
+            class="inline bg-gradient-to-r from-[#EB5E28] via-[#FCA311] to-[#BC13FE] text-transparent bg-clip-text"
+          >
+            Lightning &amp; Nostr
+          </span>
+          liquidity unlocks.
+        </h2>
+      </main>
+
+      <p class="text-xl text-muted-foreground md:w-10/12 mx-auto lg:mx-0">
+        Commited to open-sourcing no second best. Krutt is ahead of its peers sharing these
+        following projects:
+      </p>
+
+      <div class="space-y-4 md:space-y-0 md:space-x-4">
+        <Button class="w-full md:w-1/3">Get Started</Button>
+        <Button @click.prevent="openGitHub" class="w-full md:w-1/3" variant="outline">
+          Github Profile
+          <Github class="inline ml-2 w-5 h-5" />
+        </Button>
+      </div>
+    </div>
+    <HeroCards class="w-full" />
+  </section>
+</template>
diff --git a/src/components/HeroCards.vue b/src/components/HeroCards.vue
index 9a5ef4a..d553867 100644
--- a/src/components/HeroCards.vue
+++ b/src/components/HeroCards.vue
@@ -90,7 +90,7 @@ let gitHubTayanPage = () => {
             <Badge variant="secondary"> JavaScript </Badge>
             <Badge variant="secondary"> Statechain </Badge>
             <Badge class="bg-gradient-to-r from-[#EB5E28] to-[#FCA311] via-[#EB5E28]">
-                Alpha
+              Alpha
             </Badge>
           </p>
         </CardDescription>
diff --git a/src/components/index.js b/src/components/index.js
index 2d3bb43..f5b8740 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -1,5 +1,6 @@
 /* ~~/src/components/index.js */
 
+export { default as Hero } from './Hero.vue'
 export { default as HeroCards } from './HeroCards.vue'
 export { default as Navbar } from './Navbar.vue'
 export { default as Sponsors } from './Sponsors.vue'