From 25be06f7bfec05ea9a5d440da43712d6f44b8a44 Mon Sep 17 00:00:00 2001
From: Sitt Guruvanich <aekazitt@gmail.com>
Date: Sun, 11 Aug 2024 13:22:25 +0700
Subject: [PATCH] feat: add Sponsors section

---
 src/App.vue                 | 13 +++++++------
 src/components/Sponsors.vue | 31 +++++++++++++++++++++++++++++++
 src/components/index.js     |  1 +
 3 files changed, 39 insertions(+), 6 deletions(-)
 create mode 100644 src/components/Sponsors.vue

diff --git a/src/App.vue b/src/App.vue
index 4d6fcd1..b1c6fdc 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 /* components */
 import { Button } from '@/components/ui/button'
-import { HeroCards, Navbar } from '@/components'
+import { HeroCards, Navbar, Sponsors } from '@/components'
 
 /* vectors */
 import { Github } from 'lucide-vue-next'
@@ -18,20 +18,20 @@ let openGitHub = () => window.open('https://github.com/krutt', '_blank', 'norefe
       <main class="text-5xl md:text-6xl font-bold">
         <h1 class="inline">
           <span
-            class="inline bg-gradient-to-r from-[#7B6A4B] via-[#B39F7B] to-[#7B6A4B] text-transparent bg-clip-text"
+            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.
+          brings Bitcoin to the mass
         </h1>
-        Integrating
+        with
         <h2 class="inline">
           <span
             class="inline bg-gradient-to-r from-[#EB5E28] via-[#FCA311] to-[#BC13FE] text-transparent bg-clip-text"
           >
-            Lightning + Nostr
+            Lightning &amp; Nostr
           </span>
-          developers
+          liquidity unlocks.
         </h2>
       </main>
 
@@ -50,4 +50,5 @@ let openGitHub = () => window.open('https://github.com/krutt', '_blank', 'norefe
     </div>
     <HeroCards class="w-full" />
   </section>
+  <Sponsors />
 </template>
diff --git a/src/components/Sponsors.vue b/src/components/Sponsors.vue
new file mode 100644
index 0000000..725d35e
--- /dev/null
+++ b/src/components/Sponsors.vue
@@ -0,0 +1,31 @@
+<script lang="ts" setup>
+/* imports */
+import { Bird } from 'lucide-vue-next'
+
+/* constants */
+const sponsors: string[] = ['Krutt', 'collective', 'needs', 'your', 'support']
+</script>
+
+<template>
+  <section id="sponsors" class="container pt-24 sm:py-32">
+    <h2
+      class="text-center text-md lg:text-xl font-bold mb-8 dark:drop-shadow-[0_1.2px_1.2px_rgba(255,255,255,0.6)]"
+    >
+      <span
+        class="bg-gradient-to-r from-[#7B6A4B] via-[#B39F7B] to-[#7B6A4B] text-transparent bg-clip-text"
+      >
+        Investors and Sponsorship
+      </span>
+    </h2>
+    <div class="flex flex-wrap justify-center items-center gap-4 md:gap-8">
+      <div
+        :key="i"
+        class="flex items-center gap-1 text-muted-foreground/60"
+        v-for="(sponsor, i) in sponsors"
+      >
+        <Bird class="h-12 mr-2 text-primary w-auto" />
+        <h3 class="text-xl font-bold">{{ sponsor }}</h3>
+      </div>
+    </div>
+  </section>
+</template>
diff --git a/src/components/index.js b/src/components/index.js
index 6de4046..2d3bb43 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -2,4 +2,5 @@
 
 export { default as HeroCards } from './HeroCards.vue'
 export { default as Navbar } from './Navbar.vue'
+export { default as Sponsors } from './Sponsors.vue'
 export { default as ThemeToggle } from './ThemeToggle.vue'