241 lines
7.2 KiB
Vue
241 lines
7.2 KiB
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">
|
||
DeFi without<br />
|
||
the rug pull.
|
||
</div>
|
||
<div class="header-subtitle">
|
||
Self-adjusting liquidity with an ETH-backed floor. Real upside, protected downside.
|
||
</div>
|
||
<div class="header-cta">
|
||
<KButton @click="router.push('/app/get-krk')">Buy $KRK</KButton>
|
||
</div>
|
||
<div class="blur-effect"></div>
|
||
</div>
|
||
<WalletCard />
|
||
<LiveStats />
|
||
<div class="k-container">
|
||
<section class="how-it-works-section">
|
||
<h2>How It Works</h2>
|
||
<div class="cards-grid">
|
||
<div class="card">
|
||
<div class="card-emoji">⚙️</div>
|
||
<h3>Adaptive Liquidity</h3>
|
||
<p>The protocol optimizes positions 24/7 — capturing trading fees, adjusting to market conditions, guided by staker sentiment. Your tokens work while you sleep.</p>
|
||
</div>
|
||
<div class="card">
|
||
<div class="card-emoji">🛡️</div>
|
||
<h3>ETH-Backed Floor</h3>
|
||
<p>Every $KRK has a minimum redemption price backed by real ETH in the protocol. No rug pulls — liquidity is locked in contracts.</p>
|
||
</div>
|
||
<div class="card">
|
||
<div class="card-emoji">🔍</div>
|
||
<h3>Fully Transparent</h3>
|
||
<p>Every move is public and verifiable. Nothing happens in secret. You don't have to trust anyone — verify it yourself.</p>
|
||
</div>
|
||
</div>
|
||
<div class="centered-cta">
|
||
<KButton @click="router.push('/app/get-krk')">Buy $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 supply dynamics, ETH reserves, and position history in real-time. See exactly how the protocol manages your position — no wallet required.
|
||
</p>
|
||
<KButton @click="router.push('/app')">View Dashboard</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 $KRK in 30 Seconds</h2>
|
||
<ol class="steps-list">
|
||
<li>Connect your wallet</li>
|
||
<li>Buy $KRK with ETH</li>
|
||
<li>Hold. The protocol handles the rest.</li>
|
||
</ol>
|
||
<div class="button-group">
|
||
<KButton @click="router.push('/app/get-krk')">Buy $KRK</KButton>
|
||
<KButton @click="router.push('/docs/how-it-works')">How It Works →</KButton>
|
||
</div>
|
||
</template>
|
||
</LeftRightComponent>
|
||
</section>
|
||
<section class="trust-section">
|
||
<h2>Verified On-Chain</h2>
|
||
<p>Deployed on Base. Verified and auditable on-chain.</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)
|
||
.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>
|