harb/landing/src/views/HomeViewOffensive.vue

<template>
  <div class="header-section">
    <img v-if="isMobile" src="@/assets/img/header-image-mobile.png" width="800" height="600" alt="Kraiken Boss" />
    <img v-else src="@/assets/img/header-image.png" width="1920" height="1080" alt="Kraiken Boss" />
    <div class="header-text">
      The protocol that trades<br />
      while you sleep.
    </div>
    <div class="header-subtitle">
      An autonomous protocol managing $KRK liquidity 24/7. Making moves. Growing reserves. You just hold.
    </div>
    <div class="header-cta">
      <KButton @click="router.push('/app/get-krk')">Get Your Edge</KButton>
    </div>
    <div class="blur-effect"></div>
  </div>
  <WalletCard />
  <LiveStats />
  <div class="k-container">
    <section class="how-it-works-section">
      <h2>Your Unfair Advantage</h2>
      <div class="cards-grid">
        <div class="card">
          <div class="card-emoji">📈</div>
          <h3>ETH-Backed Growth</h3>
          <p>Real liquidity, real ETH reserves growing with every trade. While other tokens bleed, $KRK accumulates value on-chain automatically.</p>
        </div>
        <div class="card">
          <div class="card-emoji">⚡</div>
          <h3>Adaptive Trading</h3>
          <p>KRK owns its own trading infrastructure. The optimizer reads staker sentiment and adapts in real-time — new versions ship as the protocol matures.</p>
          <p><a class="card-link" @click="router.push('/docs/how-it-works')">See how it works →</a></p>
        </div>
        <div class="card">
          <div class="card-emoji">🎯</div>
          <h3>First-Mover Alpha</h3>
          <p>Autonomous on-chain liquidity management. Watch positions adapt in real-time — no trust, just transparent on-chain execution.</p>
        </div>
      </div>
      <div class="centered-cta">
        <KButton @click="router.push('/app/get-krk')">Get $KRK</KButton>
      </div>
    </section>
    <section class="protocol-health-section">
      <LeftRightComponent>
        <template #left>
          <img src="@/assets/img/chest.png" alt="Protocol Dashboard" class="image-card" />
        </template>
        <template #right>
          <h2>Watch It Work</h2>
          <p>
            Track every adjustment, every fee capture, every position shift. Live metrics, growing reserves, expanding trading vault — all visible on-chain.
          </p>
          <KButton @click="router.push('/app')">See Live Metrics</KButton>
        </template>
      </LeftRightComponent>
    </section>
    <section class="getting-started-section">
      <LeftRightComponent reverse>
        <template #left>
          <img src="@/assets/img/chest.png" alt="Get Started" class="image-card" />
        </template>
        <template #right>
          <h2>Get In — 30 Seconds</h2>
          <ol class="steps-list">
            <li>Connect your wallet</li>
            <li>Buy $KRK with ETH</li>
            <li>The protocol starts working for you immediately.</li>
          </ol>
          <div class="button-group">
            <KButton @click="router.push('/app/get-krk')">Get $KRK Now</KButton>
            <KButton @click="router.push('/docs/how-it-works')">How It Works →</KButton>
          </div>
        </template>
      </LeftRightComponent>
    </section>
    <section class="trust-section">
      <h2>On-Chain. Transparent. Verifiable.</h2>
      <p>Built on Base. Every move on-chain. No black boxes, no trust needed.</p>
      <div class="trust-links">
        <KButton outlined @click="router.push('/docs/code')">Source Code</KButton>
        <KButton outlined @click="router.push('/docs')">Documentation</KButton>
        <KButton outlined @click="openExternal('https://discord.gg/kraiken')">Community</KButton>
      </div>
    </section>
  </div>
</template>

<script setup lang="ts">
import KButton from '@/components/KButton.vue';
import LeftRightComponent from '@/components/LeftRightComponent.vue';
import LiveStats from '@/components/LiveStats.vue';
import WalletCard from '@/components/WalletCard.vue';
import { useMobile } from '@/composables/useMobile';
import { useRouter } from 'vue-router';

const isMobile = useMobile();
const router = useRouter();

const openExternal = (url: string) => {
  window.open(url, '_blank', 'noopener');
};
</script>

<style lang="sass">
.header-section
    position: relative
    .blur-effect
        filter: blur(45px)
        height: 300px
        position: absolute
        bottom: -150px
        width: 100%
        background-color: #07111B
        left: -10%
        width: 120%

    img
        max-width: 100%
        min-width: 100%
        height: auto
    .header-text
        color: #E6E6E6
        mix-blend-mode: color-dodge
        font-weight: 500
        position: absolute
        text-align: left
        top: 50%
        left: 35%
        transform: translate(-50%, -50%)
        font-size: 35px
        font-weight: 500
        @media (min-width: 768px)
            width: unset
            font-size: 78px
    .header-subtitle
        color: rgba(240, 240, 240, 0.7)
        position: absolute
        text-align: left
        top: 60%
        left: 35%
        transform: translate(-50%, 0)
        font-size: 14px
        max-width: 280px
        line-height: 1.5
        @media (min-width: 768px)
            font-size: 18px
            max-width: 500px
            top: 62%
    .header-cta
        position: absolute
        top: 75%
        left: 35%
        transform: translate(-50%, 0)
        @media (min-width: 768px)
            top: 73%

.image-card
    box-shadow: 0px 0px 50px 0px #000
    border-radius: 14.5px

h2
    line-height: 133%
    letter-spacing: 0px

.how-it-works-section
    text-align: center
    margin-top: 88px
    h2
        font-weight: 400
        letter-spacing: 0.25px
        font-size: 24px
        margin-bottom: 48px
        @media (min-width: 768px)
            font-size: 27px
    .cards-grid
        display: grid
        grid-template-columns: 1fr
        gap: 24px
        margin-bottom: 48px
        @media (min-width: 768px)
            grid-template-columns: repeat(3, 1fr)
    .card
        background: rgba(255, 255, 255, 0.03)
        border: 1px solid rgba(255, 255, 255, 0.08)
        border-radius: 12px
        padding: 32px 24px
        text-align: center
        .card-emoji
            font-size: 40px
            margin-bottom: 16px
        h3
            font-size: 20px
            font-weight: 500
            margin-bottom: 12px
        p
            font-size: 16px
            line-height: 1.6
            color: rgba(240, 240, 240, 0.8)
    .card-link
        color: rgba(240, 240, 240, 0.8)
        cursor: pointer
        text-decoration: underline
        font-size: 14px
        &:hover
            color: #fff
    .centered-cta
        display: flex
        justify-content: center

.protocol-health-section
    margin-top: 120px

.getting-started-section
    margin-top: 120px
    .steps-list
        list-style: decimal
        padding-left: 20px
        margin: 24px 0
        li
            font-size: 18px
            line-height: 1.8
            color: rgba(240, 240, 240, 0.9)
    .button-group
        display: flex
        gap: 12px
        flex-wrap: wrap

.trust-section
    margin-top: 120px
    margin-bottom: 80px
    text-align: center
    h2
        font-weight: 400
        letter-spacing: 0.25px
        font-size: 24px
        margin-bottom: 16px
        @media (min-width: 768px)
            font-size: 27px
    p
        font-size: 18px
        color: rgba(240, 240, 240, 0.8)
        margin-bottom: 32px
    .trust-links
        display: flex
        justify-content: center
        gap: 12px
        flex-wrap: wrap
</style>