johba/harb
1
0
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity Actions

added web and split CLAUDs

Browse source
This commit is contained in:
johba 2025-07-24 16:08:17 +02:00
parent 8ee33e4f5a
commit 8a82d10a7e
59 changed files with 15083 additions and 740 deletions
Download patch file Download diff file Expand all files Collapse all files

71
web/src/components/LeftRightComponent.vue Normal file
View file

@ -0,0 +1,71 @@
<template>
<div class="left-right-component" :class="{ 'left-right-component--reverse': props.reverse }">
<div class="left">
<slot name="left">
<img src="@/assets/img/chest.png" alt="kraken" class="image-card" />
</slot>
</div>
<div class="right">
<slot name="right">
<h2>Challenge the AI</h2>
<p>
KrAIken is a <u>DeFAI</u> Protocol in open beta.<br /><br />
Everyone is invited to train the AI by trading and challenge it's liquidity positions.
</p>
</slot>
</div>
</div>
</template>
<script setup lang="ts">
const props = withDefaults(
defineProps<{
reverse?: boolean;
}>(),
{
reverse: false,
}
);
</script>
<style lang="sass">
.left-right-component
display: flex
justify-content: space-between
align-items: center
gap: 24px
flex-direction: column
text-align: center
@media (min-width: 768px)
flex-direction: row
text-align: unset
&.left-right-component--reverse
flex-direction: column
@media (min-width: 768px)
flex-direction: row-reverse
.left
img
height: 255px
width: 255px
@media (min-width: 768px)
width: unset
height: unset
.right
max-width: 480px
text-align: center
@media (min-width: 768px)
text-align: unset
text-align: left
h2
font-size: 24px
font-weight: 400
@media (min-width: 768px)
font-size: 27px
p
margin-bottom: 32px
@media (min-width: 768px)
font-size: 18px
</style>