feat: add referrals banner (#102)

currently configured to run for all of Q1

<img width="1629" alt="Screenshot 2024-12-16 at 12 43 16 PM"
src="https://github.com/user-attachments/assets/604e22fe-5831-47e8-aaa5-2a19623c250e"
/>

app.config.ts

@@ -4,9 +4,9 @@
 export default defineAppConfig({
   dateFormat: 'MMM DD, YYYY',
   notice: {
-    text: 'Join our Halloween Hackathon 2024! $6666 in DEVILISH prizes up for grabs. Apply before the 13th of October!',
-    href: 'https://hackathon.storacha.network',
-    displayUntil: '2024-10-14', // use ISO date format or final day +1 in yyyy-mm-dd
+    text: 'EARN RACHA POINTS AND STORAGE CREDITS BY REFERRING FRIENDS <u>LEARN MORE</u>',
+    href: 'https://storacha.network/referrals',
+    displayUntil: '2025-12-31', // use ISO date format or final day +1 in yyyy-mm-dd
   },
   actions: {
     start: { text: 'Start Storing', href: 'https://console.storacha.network/' },
@@ -17,8 +17,7 @@ export default defineAppConfig({
       { text: 'Node Providers', href: '/node-providers' },
       { text: 'Blog', href: '/blog' },
       { text: 'Docs', href: 'https://docs.storacha.network' },
-      // TODO: uncomment when we're ready for this to go live
-      // { text: 'Referrals', href: '/referrals' },
+       { text: 'Referrals', href: '/referrals' },
     ],
     mailingList: {
       icon: 'i-carbon:email',

components/Notice.vue

@@ -14,9 +14,8 @@ onMounted(() => {
 </script>
 
 <template>
-  <div v-if="isVisible" class="bg-brand-3 p-3 text-center text-sm text-brand-4">
-    <AppLink :href="href" class="block w-full">
-      {{ text }} <AppIcon i="i-carbon:arrow-right" class="inline-block" />
-    </AppLink>
+  <div v-if="isVisible" class="bg-brand-5 p-3 text-center text-sm text-brand-1"
+  :class="{ 'bg-brand-3': true}">
+    <AppLink :href="href" class="block w-full" v-html="text" />
   </div>
 </template>