feat: add Sponsors section

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>

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>

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'