harb/landing/src/components/KFooter.vue

<template>
  <footer class="k-container">
    <div class="k-footer">
      <div class="k-footer__contracts" v-if="krkAddress || stakeAddress">
        <div class="k-footer__contracts-title">Verified Contracts</div>
        <div class="k-footer__contracts-list">
          <span v-if="krkAddress" class="k-footer__address-row">
            <a :href="`https://basescan.org/address/${krkAddress}`" target="_blank" rel="noopener noreferrer">
              KRK Token: {{ shortAddress(krkAddress) }}
            </a>
            <button class="k-footer__copy-btn" @click="copyAddress(krkAddress, 'krk')" :title="copied === 'krk' ? 'Copied!' : 'Copy address'" :aria-label="copied === 'krk' ? 'Copied!' : 'Copy KRK token address'">
              <svg v-if="copied !== 'krk'" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
              <svg v-else width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#4ade80" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
            </button>
          </span>
          <span v-if="stakeAddress" class="k-footer__address-row">
            <a :href="`https://basescan.org/address/${stakeAddress}`" target="_blank" rel="noopener noreferrer">
              Stake: {{ shortAddress(stakeAddress) }}
            </a>
            <button class="k-footer__copy-btn" @click="copyAddress(stakeAddress, 'stake')" :title="copied === 'stake' ? 'Copied!' : 'Copy address'" :aria-label="copied === 'stake' ? 'Copied!' : 'Copy Stake contract address'">
              <svg v-if="copied !== 'stake'" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
              <svg v-else width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#4ade80" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
            </button>
          </span>
        </div>
        <div class="k-footer__audit-note">⚠️ Unaudited — use at your own risk</div>
      </div>
      <div class="k-footer__links">
        <a href="/pitch-deck.html" target="_blank" rel="noopener noreferrer">Pitch Deck</a>
        <span class="k-footer__sep">·</span>
        <a href="/docs">Documentation</a>
      </div>
      <div class="k-footer__about">
        KrAIken is a project by <u><a href="https://niovi.voyage/" target="_blank">niovi.voyage</a></u
        >.<br />
        Autonomous liquidity protocol. Use at your own risk.
      </div>
    </div>
  </footer>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const krkAddress = import.meta.env.VITE_KRAIKEN_ADDRESS || '';
const stakeAddress = import.meta.env.VITE_STAKE_ADDRESS || '';
const copied = ref('');

function shortAddress(addr: string): string {
  if (!addr || addr.length < 10) return addr;
  return `${addr.slice(0, 6)}…${addr.slice(-4)}`;
}

function copyAddress(addr: string, key: string) {
  navigator.clipboard.writeText(addr);
  copied.value = key;
  setTimeout(() => { copied.value = ''; }, 1500);
}
</script>

<style lang="sass">
.k-footer
    font-size: 14px
    line-height: 22px
    letter-spacing: 0.15px
    padding-bottom: 48px
    a
        color: #F0F0F0
    @media (min-width: 992px)
        font-size: 16px

.k-footer__contracts
    margin-bottom: 24px
    padding: 16px
    background: rgba(255, 255, 255, 0.05)
    border-radius: 8px
    text-align: center

.k-footer__contracts-title
    font-weight: 600
    margin-bottom: 8px
    font-size: 13px
    text-transform: uppercase
    letter-spacing: 1px
    color: #9A9898

.k-footer__contracts-list
    display: flex
    gap: 24px
    justify-content: center
    flex-wrap: wrap
    a
        font-family: monospace
        font-size: 13px
        color: #7550AE
        text-decoration: none
        &:hover
            text-decoration: underline

.k-footer__address-row
    display: inline-flex
    align-items: center
    gap: 6px

.k-footer__copy-btn
    background: none
    border: none
    cursor: pointer
    padding: 2px
    color: #9A9898
    display: inline-flex
    align-items: center
    vertical-align: middle
    &:hover
        color: #c084fc

.k-footer__audit-note
    margin-top: 8px
    font-size: 12px
    color: #9A9898

.k-footer__links
    text-align: center
    margin-bottom: 16px
    a
        color: #9A9898
        text-decoration: none
        font-size: 13px
        &:hover
            color: #F0F0F0
            text-decoration: underline

.k-footer__sep
    color: #9A9898
    margin: 0 8px
</style>