Refactor/components

components/about-us-banner.vue

@@ -1,82 +1,96 @@
 <template>
-<div class="bg-white py-24 sm:py-32">
-  <div class="mx-auto max-w-7xl px-6 lg:px-8">
-    <div class="mx-auto max-w-2xl lg:text-center">
-      <p class="text-base/7 font-semibold text-primary-500">
-        About mostro
-      </p>
-      <div class="flex gap-4 items-center justify-center">
-        <h2 class="mt-2 text-pretty text-4xl font-semibold tracking-tight text-tertiary-900 sm:text-5xl lg:text-balance">
-          Why Mostro impacts
-        </h2>
-        <img
-          class="size-14"
-          src="~/assets/icons/mostro-green.svg"
+  <div class="bg-white py-20">
+    <div class="mx-auto max-w-7xl px-6 lg:px-8">
+      <div class="mx-auto max-w-2xl lg:text-center">
+        <p class="text-base/7 font-semibold text-primary-500">
+          About Mostro
+        </p>
+        <div class="flex gap-4 items-center justify-center">
+          <h2 class="mt-2 text-pretty text-4xl font-semibold tracking-tight text-tertiary-900 sm:text-5xl lg:text-balance">
+            Why Mostro impacts
+          </h2>
+          <img
+            class="size-14"
+            src="~/assets/icons/mostro-green.svg"
+          >
+        </div>
+        <p class="mt-6 text-lg/8 text-tertiary-600">
+          Mostro facilitates peer-to-peer Bitcoin exchanges through the Lightning Network on Nostr, offering a private, decentralized, and censorship-resistant platform.
+        </p>
+      </div>
+      <div class="mx-auto mt-16 max-w-2xl lg:max-w-4xl">
+        <dl class="grid max-w-xl grid-cols-1 gap-x-8 gap-y-10 lg:max-w-none lg:grid-cols-2 lg:gap-y-16">
+          <div class="relative pl-16">
+            <dt class="text-base/7 font-semibold text-tertiary-900">
+              <div class="absolute left-0 top-0 flex size-10 items-center justify-center rounded-lg bg-primary-500">
+                <img
+                  class="size-6"
+                  src="~/assets/icons/detective.svg"
+                >
+              </div>
+              No KYC
+            </dt>
+            <dd class="mt-2 text-base/7 text-tertiary-600 font-light">
+              The project supports Bitcoin adoption by enabling buying and selling without compromising personal data.
+            </dd>
+          </div>
+          <div class="relative pl-16">
+            <dt class="text-base/7 font-semibold text-tertiary-900">
+              <div class="absolute left-0 top-0 flex size-10 items-center justify-center rounded-lg bg-primary-500">
+                <svg class="size-6 text-white" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+                  <path stroke-linecap="round" stroke-linejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 1 0-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 0 0 2.25-2.25v-6.75a2.25 2.25 0 0 0-2.25-2.25H6.75a2.25 2.25 0 0 0-2.25 2.25v6.75a2.25 2.25 0 0 0 2.25 2.25Z" />
+                </svg>
+              </div>
+              Censorship resistant
+            </dt>
+            <dd class="mt-2 text-base/7 text-tertiary-600 font-light">
+              Mostro manages communications on top of Nostr, creating a decentralized platform that enhances resistance to censorship and surveillance.
+            </dd>
+          </div>
+          <div class="relative pl-16">
+            <dt class="text-base/7 font-semibold text-tertiary-900">
+              <div class="absolute left-0 top-0 flex size-10 items-center justify-center rounded-lg bg-primary-500">
+                <img
+                  class="size-6"
+                  src="~/assets/icons/handshake.svg"
+                >
+              </div>
+              P2P
+            </dt>
+            <dd class="mt-2 text-base/7 text-tertiary-600 font-light">
+              Mostro enables secure p2p Bitcoin exchanges via Lightning escrow, holding Sats briefly to minimize risk for both parties.
+            </dd>
+          </div>
+          <div class="relative pl-16">
+            <dt class="text-base/7 font-semibold text-tertiary-900">
+              <div class="absolute left-0 top-0 flex size-10 items-center justify-center rounded-lg bg-primary-500">
+                <img
+                  class="size-6"
+                  src="~/assets/icons/giving-hand.svg"
+                >
+              </div>
+              Open source
+            </dt>
+            <dd class="mt-2 text-base/7 text-tertiary-600 font-light">
+              Mostro is an open-source project, inviting community collaboration to enhance secure, decentralized Bitcoin exchanges.
+            </dd>
+          </div>
+        </dl>
+      </div>
+      <div class="flex flex-col gap-y-4 items-center justify-center pt-8 md:pt-16">
+        <p class="text-tertiary-600 font-light">
+          Interested? Want to learn more?
+        </p>
+        <base-button
+          href="https://mostro.network/"
+          theme="secondary"
+          label="Visit the Mostro website"
         >
+        <template #icon>
+          <span aria-hidden="true">&rarr;</span>
+        </template>
+      </base-button>
       </div>
-      <p class="mt-6 text-lg/8 text-gray-600">
-        Mostro facilitates peer-to-peer Bitcoin exchanges through the Lightning Network on Nostr, offering a private, decentralized, and censorship-resistant platform.
-      </p>
-    </div>
-    <div class="mx-auto mt-16 max-w-2xl lg:max-w-4xl">
-      <dl class="grid max-w-xl grid-cols-1 gap-x-8 gap-y-10 lg:max-w-none lg:grid-cols-2 lg:gap-y-16">
-        <div class="relative pl-16">
-          <dt class="text-base/7 font-semibold text-gray-900">
-            <div class="absolute left-0 top-0 flex size-10 items-center justify-center rounded-lg bg-primary-500">
-              <img
-                class="size-6"
-                src="~/assets/icons/detective.svg"
-              >
-            </div>
-            No KYC
-          </dt>
-          <dd class="mt-2 text-base/7 text-gray-600">
-            The project supports Bitcoin adoption by enabling buying and selling without compromising personal data.
-          </dd>
-        </div>
-        <div class="relative pl-16">
-          <dt class="text-base/7 font-semibold text-gray-900">
-            <div class="absolute left-0 top-0 flex size-10 items-center justify-center rounded-lg bg-primary-500">
-              <svg class="size-6 text-white" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
-                <path stroke-linecap="round" stroke-linejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 1 0-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 0 0 2.25-2.25v-6.75a2.25 2.25 0 0 0-2.25-2.25H6.75a2.25 2.25 0 0 0-2.25 2.25v6.75a2.25 2.25 0 0 0 2.25 2.25Z" />
-              </svg>
-            </div>
-            Censorship resistant
-          </dt>
-          <dd class="mt-2 text-base/7 text-gray-600">
-            Mostro manages communications on top of Nostr, creating a decentralized platform that enhances resistance to censorship and surveillance.
-          </dd>
-        </div>
-        <div class="relative pl-16">
-          <dt class="text-base/7 font-semibold text-gray-900">
-            <div class="absolute left-0 top-0 flex size-10 items-center justify-center rounded-lg bg-primary-500">
-              <img
-                class="size-6"
-                src="~/assets/icons/handshake.svg"
-              >
-            </div>
-            P2P
-          </dt>
-          <dd class="mt-2 text-base/7 text-gray-600">
-            Mostro enables secure p2p Bitcoin exchanges via Lightning escrow, holding Sats briefly to minimize risk for both parties.
-          </dd>
-        </div>
-        <div class="relative pl-16">
-          <dt class="text-base/7 font-semibold text-gray-900">
-            <div class="absolute left-0 top-0 flex size-10 items-center justify-center rounded-lg bg-primary-500">
-              <img
-                class="size-6"
-                src="~/assets/icons/giving-hand.svg"
-              >
-            </div>
-            Open source
-          </dt>
-          <dd class="mt-2 text-base/7 text-gray-600">
-            Mostro is an open-source project, inviting community collaboration to enhance secure, decentralized Bitcoin exchanges.
-          </dd>
-        </div>
-      </dl>
     </div>
   </div>
-</div>
 </template>

components/base-button.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { smoothScroll } from '@/utils/scroll';
+
+type Theme = 'primary' | 'secondary' | 'tertiary';
+
+type BaseButtonProps = {
+  href: string;
+  theme: Theme;
+  label: string;
+  scroll?: boolean;
+};
+
+type ThemeClasses = {
+  [key in Theme]: string;
+};
+
+const themeClasses: ThemeClasses = {
+  primary: 'bg-primary-500 hover:bg-primary-600 text-white',
+  secondary: 'bg-secondary-400 hover:bg-secondary-500 text-tertiary-700',
+  tertiary: 'bg-white border border-primary-700 hover:bg-primary-700/10 text-primary-700',
+};
+
+const props = withDefaults(defineProps<BaseButtonProps>(), {
+  scroll: false,
+});
+
+const buttonStyles = computed((): string[] => {
+  return ([
+    "flex text-center items-center gap-2 font-semibold shadow-lg px-10 py-2 rounded-full transition-all duration-300 ease-in-out",
+    themeClasses[props.theme],
+  ]);
+});
+
+const handleClick = (event: Event) => {
+  if (props.scroll) {
+    event.preventDefault();
+    smoothScroll(props.href);
+  }
+};
+</script>
+
+<template>
+  <a
+    :class="buttonStyles"
+    :href="href"
+    role="button"
+    :aria-label="label"
+    @click="handleClick"
+  >
+    {{ label }}
+    <slot name="icon" />
+  </a>
+</template>

components/contact-banner.vue

@@ -5,18 +5,39 @@
       Follow us!
     </h2>
     <div class="flex w-full justify-center gap-x-6 lg:gap-x-8">
-      <a target="_blank" href="https://x.com/MostroP2P" class="h-12 lg:h-16 rounded-full bg-secondary-400 hover:bg-secondary-300 shadow-lg flex aspect-square items-center justify-center">
+      <a
+        href="https://x.com/MostroP2P"
+        target="_blank"
+        rel="noopener noreferrer"
+         class="contact-link"
+
+      >
         <img class="h-8 lg:h-10" src="~/assets/icons/x.svg" alt="X">
       </a>
 
-      <a target="_blank" href="https://primal.net/p/npub1m0str0d7z2ww8rdh20t2n9lx520xjwhaq24p68umqp06wwrwtsnqen40un" class="h-12 lg:h-16 rounded-full bg-secondary-400 hover:bg-secondary-300 shadow-lg flex aspect-square items-center justify-center">
+      <a
+        href="https://primal.net/p/npub1m0str0d7z2ww8rdh20t2n9lx520xjwhaq24p68umqp06wwrwtsnqen40un"
+        target="_blank"
+        rel="noopener noreferrer"
+        class="contact-link"
+      >
         <img class="h-8 lg:h-10" src="~/assets/icons/nostr.svg" alt="Nostr">
       </a>
 
-      <a target="_blank" href="https://t.me/mostrop2p" class="h-12 lg:h-16 rounded-full bg-secondary-400 hover:bg-secondary-300 shadow-lg flex aspect-square items-center justify-center">
+      <a
+        href="https://t.me/mostrop2p"
+        target="_blank"
+        rel="noopener noreferrer"
+        class="contact-link"
+      >
         <img class="h-8 lg:h-10" src="~/assets/icons/telegram.svg" alt="Telegram">
       </a>
     </div>
   </div>
 </div>
 </template>
+<style>
+ .contact-link {
+   @apply h-12 lg:h-16 rounded-full bg-secondary-400 hover:bg-secondary-300 shadow-lg flex aspect-square items-center justify-center;
+}
+</style>

components/contribute-banner.vue

@@ -16,20 +16,31 @@
       </p>
       <div class="mx-auto mt-10 max-w-2xl lg:mx-0 lg:max-w-none">
       <div class="text-base/7 flex-col flex md:flex-row items-center justify-center md:justify-start gap-4">
-        <a
-          class="bg-white flex text-center px-10 items-center gap-2 font-semibold border border-primary-700 hover:bg-primary-700/10 shadow-lg text-primary-700 py-2 rounded-full transition-all duration-400 ease-in-out"
+        <base-button
           href="https://github.com/MostroP2P"
+          theme="tertiary"
+          label="Contribute"
         >
-          <span> Contribute </span>
-          <img class="h-5" src="~/assets/icons/github.svg" >
-        </a>
-        <a
-          class="font-semibold bg-primary-500 hover:bg-primary-600 shadow-lg  text-white px-10 py-2 rounded-full transition-all duration-400 ease-in-out"
+          <template #icon>
+            <img
+              class="h-5"
+              src="~/assets/icons/github.svg"
+              alt="GitHub logo">
+            >
+          </template>
+        </base-button>
+
+        <base-button
           href="https://geyser.fund/project/mostro"
+          theme="primary"
+          label="Support us"
         >
-          Support us
-          <span aria-hidden="true">&rarr;</span>
-        </a>
+          <template #icon>
+            <span aria-hidden="true" aria-label="Right arrow">
+              &rarr;
+            </span>
+          </template>
+        </base-button>
       </div>
     </div>
     </div>

components/donate-banner.vue

@@ -15,19 +15,21 @@
       </svg>
       <div class="mx-auto max-w-md text-center lg:mx-0 lg:flex-auto lg:pt-16 lg:text-left">
         <h2 class="text-balance text-3xl font-semibold tracking-tight text-white sm:text-4xl">
-          Help us keep funding mostro projects
+          Help us keep funding Mostro projects
         </h2>
         <p class="mt-6 text-pretty font-light text-lg/8 text-white">
           This project's development has been made possible thanks to the incredible support from the community.
         </p>
         <div class="mt-10 flex items-center justify-center gap-x-6 lg:justify-start">
-          <a
-            class="font-semibold bg-secondary-400 hover:bg-secondary-500 shadow-lg  text-tertiary-700 px-10 py-2 rounded-full transition-all duration-400 ease-in-out"
+          <base-button
             href="https://geyser.fund/project/mostro"
+            theme="secondary"
+            label="Donate today"
           >
-            Donate today
-            <span aria-hidden="true">&rarr;</span>
-          </a>
+            <template #icon>
+              <span aria-hidden="true">&rarr;</span>
+            </template>
+          </base-button>
         </div>
       </div>
     </div>

components/hero-banner-header.vue

@@ -22,8 +22,7 @@ import { smoothScroll } from '../utils/scroll'
         <div class="flex gap-x-4 md:gap-x-12">
           <a
             class="text-sm/6 font-semibold text-white"
-            href="#donate"
-            @click.prevent="smoothScroll('#donate')"
+            href="https://geyser.fund/project/mostro"
           >
             Donate
           </a>
@@ -32,7 +31,7 @@ import { smoothScroll } from '../utils/scroll'
             href="#about-us"
             @click.prevent="smoothScroll('#about-us')"
           >
-            About mostro
+            About Mostro
           </a>
           <a
             href="#contact"

components/hero-banner.vue

@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import HeroBannerHeader from './hero-banner-header.vue';
-import { smoothScroll } from '../utils/scroll'
 
 </script>
 <template>
@@ -13,17 +11,19 @@ import { smoothScroll } from '../utils/scroll'
             Mostro Foundation
           </h1>
           <p class="mt-8 font-medium text-lg text-white sm:text-xl/8">
-            We fund mostro proyects and decentralized bitcoin peer-to-peer tools
+            We support Mostro developers in building peer-to-peer Bitcoin tools
           </p>
           <div class="mt-10 flex items-center justify-center gap-6 flex-col  md:flex-row">
-            <a
-              class="font-semibold bg-secondary-400 hover:bg-secondary-500 shadow-lg  text-tertiary-700 px-10 py-2 rounded-full transition-all duration-400 ease-in-out"
+            <base-button
               href="#contribute"
-              @click.prevent="smoothScroll('#contribute')"
+              theme="secondary"
+              label="Learn more"
+              scroll
             >
-              Learn more
-              <span aria-hidden="true">&darr;</span>
-          </a>
+              <template #icon>
+                <span aria-hidden="true">&darr;</span>
+              </template>
+            </base-button>
           </div>
         </div>
       </div>