Merge pull request kodadot#10112 from Jarsen136/issue-10111

feat: Farcaster frame mint is live - notification on landing page

components/landing/FarcasterMintNotificationBanner.vue

@@ -0,0 +1,26 @@
+<template>
+  <a
+    v-safe-href="config.url"
+    target="_blank"
+    class="hover:text-text-color flex items-center p-2 gap-[10px] bg-background-color border border-text-color rounded-[1.5rem]">
+    <img :src="config.image" class="w-[38px] h-[38px] rounded-[14px]" />
+
+    <div
+      class="bg-k-red-accent-2 flex flex-wrap gap-2 px-3 py-2 rounded-[14px]">
+      <div class="font-bold">{{ config.name }}</div>
+      <div class="capitalize">{{ $t('landing.farcasterMintLive') }}</div>
+    </div>
+    <NeoIcon icon="arrow-right" />
+  </a>
+</template>
+
+<script setup lang="ts">
+import { NeoIcon } from '@kodadot1/brick'
+defineProps<{
+  config: {
+    url: string
+    image: string
+    name: string
+  }
+}>()
+</script>

components/landing/HeroBanner.vue

@@ -20,7 +20,10 @@
         </div>
       </h1>
       <div class="container is-fluid flex justify-center mt-[2rem]">
-        <LandingFarcasterBanner />
+        <LandingFarcasterMintNotificationBanner
+          v-if="farcasterLiveMint"
+          :config="farcasterLiveMint" />
+        <LandingFarcasterBanner v-else />
       </div>
 
       <div class="flex justify-center mt-[2rem]">
@@ -36,6 +39,35 @@
   </section>
 </template>
 
+<script lang="ts" setup>
+import farcasterLiveMintConfig from '@/script/farcasterLiveMint.json'
+
+const farcasterLiveMint = ref()
+
+const fetchFarcasterLiveMint = async () => {
+  if (isProduction) {
+    try {
+      const res: string = await $fetch(
+        'https://raw.githubusercontent.com/kodadot/nft-gallery/main/script/farcasterLiveMint.json',
+        {
+          method: 'GET',
+        },
+      )
+      const config = JSON.parse(res)
+      if (config) {
+        farcasterLiveMint.value = config
+      }
+    } catch (error) {
+      // no live mint
+    }
+  } else {
+    farcasterLiveMint.value = farcasterLiveMintConfig
+  }
+}
+
+onMounted(fetchFarcasterLiveMint)
+</script>
+
 <style lang="scss" scoped>
 @import '@/assets/styles/abstracts/variables';
 .with-divider {

locales/en.json

@@ -1195,7 +1195,8 @@
       "hook": "Get in {0} and we will hook you up with free mints.",
       "touch": "touch"
     },
-    "connectFarcaster": "Connect with Koda on Farcaster"
+    "connectFarcaster": "Connect with Koda on Farcaster",
+    "farcasterMintLive": "Mint is live!"
   },
   "whyKoda": {
     "title": "Why Koda?",

script/farcasterLiveMint.json

@@ -0,0 +1,6 @@
+{
+  "name": "Basescapes",
+  "image":
+    "https://imagedelivery.net/jk5b6spi_m_-9qC4VTnjpg/bafybeiaystlm6xszy3eq5ovqgqjwxwgpeztdrvbsixiqx6me56yxp7efrq/public",
+  "url": "https://warpcast.com/th0mas-art/0x47bfc921"
+}