✨ swap page landing

components/swap/landing.vue

@@ -0,0 +1,68 @@
+<template>
+  <div class="max-w-[490px] mx-auto">
+    <div class="flex flex-col h-full space-y-10 pt-8">
+      <div>
+        <div class="flex items-center">
+          <img
+            class="-ml-8"
+            src="~/assets/svg/arrows.svg"
+            alt="Swap NFTs"
+          >
+          <h1 class="title">
+            {{ $t('swap.landingTitle') }}
+          </h1>
+        </div>
+        <p class="mb-2">
+          {{ $t('swap.landingSubtitle') }}
+        </p>
+        <a
+          class="text-k-blue hover:text-k-blue-hover"
+          href="https://hello.kodadot.xyz/tutorial/swaps"
+          target="_blank"
+          rel="nofollow noopener noreferrer"
+        >
+          {{ $t('swap.learnMoreAboutSwaps') }}
+        </a>
+      </div>
+
+      <div>
+        <h2 class="mb-2 font-bold text-text-color capitalize">
+          {{ $t('swap.connectTrader') }}
+        </h2>
+        <p>
+          {{ $t('swap.connectTraderInfo') }}
+        </p>
+      </div>
+
+      <form @submit="handleSubmit">
+        <AddressInput
+          v-model="traderAddress"
+          placeholder="Enter wallet address"
+          :strict="false"
+          empty-on-error
+        />
+
+        <NeoButton
+          type="submit"
+          :label="$t('swap.beginSwap')"
+          size="large"
+          class="text-base my-5 capitalize"
+          expanded
+          :disabled="traderAddress === ''"
+          native-type="submit"
+          variant="primary"
+        />
+      </form>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { NeoButton } from '@kodadot1/brick'
+
+const traderAddress = ref('')
+
+const handleSubmit = () => {
+  console.log(traderAddress.value)
+}
+</script>

locales/en.json

@@ -1787,6 +1787,14 @@
   "support": {
     "tooltip": "Cover costs mean that users help to support initial costs for Koda which stores your JPEG on your behalf."
   },
+  "swap": {
+    "beginSwap": "Begin Swap offer",
+    "connectTrader": "Connect with a trader",
+    "connectTraderInfo": "Enter the wallet address of the trader you want to engage with, and we’ll guide you through the secure process of making a swap offer.",
+    "landingSubtitle": "Koda Swap facilitates secure and straightforward exchanges of digital assets. Connect directly with traders and confidently navigate your NFT transactions with our reliable platform.",
+    "landingTitle": "Koda Swap",
+    "learnMoreAboutSwaps": "Learn more about swaps"
+  },
   "tabs": {
     "activity": "Activity",
     "chart": "Chart",

pages/[prefix]/swap/index.vue

@@ -0,0 +1,18 @@
+<template>
+  <SwapLanding />
+</template>
+
+<script lang="ts" setup>
+definePageMeta({
+  layout: 'background-layout',
+})
+
+useSeoMeta({
+  title: 'Swap NFTs',
+  ogTitle: 'Swap NFTs',
+  description: 'Trade NFTs on Koda marketplace',
+  ogDescription: 'Trade NFTs on Koda marketplace',
+  ogImage: '/k_card.png',
+  twitterCard: 'summary_large_image',
+})
+</script>