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

added web-app and landing

Browse source
This commit is contained in:
johba 2025-09-23 14:18:04 +02:00
parent af031877a5
commit 769fa105b8
198 changed files with 22132 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

135
landing/src/components/Countdown.vue Normal file
View file

@ -0,0 +1,135 @@
<template>
<div class="countdown">
<div class="countdown__title">
Time until launch
</div>
<div class="countdown__time">
<slot :days="differenceDays" :hours="differenceHours" :minutes="differenceMinutes">
<div>{{ differenceDays }}d {{ differenceHours }}h {{ differenceMinutes }}m {{ differenceSeconds }}s</div>
</slot>
</div>
</div>
</template>
<script setup lang="ts">
import { ref, onMounted, onUnmounted, computed } from "vue";
const seconds = ref(0);
let _timerId:ReturnType<typeof setTimeout>;
interface Props {
modelValue: number;
end: Date;
}
const emit = defineEmits(["update:modelValue"]);
const props = withDefaults(defineProps<Props>(), {
modelValue: 0,
});
const differenceDays = computed(() => {
if(seconds.value <= 0){
return 0
}
return Math.floor(seconds.value / (3600 * 24))
});
//tage abziehen
const differenceHours = computed(() => {
if(seconds.value <= 0){
return 0
}
return Math.floor((seconds.value - differenceDays.value * 3600 * 24) / 3600)
});
//tage + stunden abziehen
const differenceMinutes = computed(() =>
{
if(seconds.value <= 0){
return 0
}
return Math.floor((seconds.value - differenceDays.value * 3600 * 24 - differenceHours.value * 3600) / 60)
}
);
const differenceSeconds = computed(() =>
{
if (seconds.value <= 0) {
return 0;
}
return seconds.value - differenceDays.value * 86400 - differenceHours.value * 3600 - differenceMinutes.value * 60;
}
);
onMounted(() => {
seconds.value = Math.round((props.end.getTime() - new Date().getTime()) / 1000);
if (seconds.value > 0) {
_timerId = setInterval(() => {
seconds.value--;
emit("update:modelValue", seconds.value)
if (seconds.value <= 0) {
clearInterval(_timerId);
}
}, 1000);
}
emit("update:modelValue", seconds.value)
});
onUnmounted(() => clearInterval(_timerId));
</script>
<style lang="sass">
@keyframes borderAnimation
0%
background-position: 0% 50%
50%
background-position: 100% 50%
100%
background-position: 0% 50%
.countdown
z-index: 10
align-self: center
font-weight: bold
width: calc( 100vw - 48px)
@media (min-width: 768px)
width: 500px
.countdown__title
text-align: left
font-size: 18px
font-weight: 400
margin: 8px
@media (min-width: 768px)
font-size: 20px
.countdown__time
box-sizing: border-box
padding: 12px 24px
font-size: 32px
position: relative
border-radius: 12px
@media (min-width: 768px)
font-size: 40px
&>div
font-family: 'orbitron', sans-serif
font-weight: 400
&::before
content: ""
position: absolute
inset: 0
border-radius: inherit
/* Erbt die Abrundung */
padding: 2px
/* Dicke des Borders */
background: linear-gradient(10deg, #BF62B2, black)
-webkit-mask: linear-gradient(white, white) content-box, linear-gradient(white, white)
-webkit-mask-composite: destination-out
mask-composite: exclude
z-index: -1
</style>

43
landing/src/components/KButton.vue Normal file
View file

@ -0,0 +1,43 @@
<template>
<button class="kraken-button" :class="{'kraken-button--outlined': props.outlined}">
<slot></slot>
</button>
</template>
<script setup lang="ts">
const props = withDefaults(defineProps<{
outlined?: boolean
}>(), {
outlined: false
})
</script>
<style lang="sass">
.kraken-button
background-color: #000000
color: white
font-family: 'Exo 2 Bold', sans-serif
font-weight: 500
line-height: 26px
letter-spacing: 0.46px
font-size: 14px
padding: 16px 64px
border-radius: 12px
border: none
cursor: pointer
color: #BF62B2
display: inline-block
text-align: center
text-decoration: none
transition: all 0.3s ease-in-out
box-shadow: 0px 0px 7.6px 0px #000, 0px 0px 20.6px 0px #BF62B2
@media (min-width: 768px)
font-size: 20px
&:hover,&:active
background-color: #F9F9FA
color: #9667BE
box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.25) inset
</style>

20
landing/src/components/KFooter.vue Normal file
View file

@ -0,0 +1,20 @@
<template>
<footer class="k-container">
<div class="k-footer">
KrAIken is a project by <u><a href="https://sovraigns.network/" target="_blank">SovrAIgns.network</a></u>.<br /> Resarch and Development in DeFAI (DeFi x AI) Agents. Use at your own risk.
</div>
</footer>
</template>
<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
</style>

238
landing/src/components/KNavbar.vue Normal file
View file

@ -0,0 +1,238 @@
<template>
<header>
<div class="kraken-navbar" :class="{ scrolled: isScrolled }">
<div class="navbar-left" @click="router.push('/')">
<div class="navbar-title">
<span>K</span>
<span class="big-spacing">r</span>
<span class="small-spacing">A</span>
<span class="big-spacing">I</span>
<span>ken</span>
</div>
</div>
<div class="desktop-nav">
<RouterLink to="/docs">Docs</RouterLink>
<div class="social-buttons">
<social-button type="telegram" href="https://t.me/kraikenportal"></social-button>
<social-button type="twitter" href="https://x.com/KrAIkenProtocol"></social-button>
</div>
</div>
<div class="menu-trigger" @click.stop="toggleMenu">
<svg width="24" height="24" viewBox="0 0 24 24">
<circle cx="12" cy="5" r="2" :fill="isScrolled ? '#D6D6D6' : '#07111B'" />
<circle cx="12" cy="12" r="2" :fill="isScrolled ? '#D6D6D6' : '#07111B'" />
<circle cx="12" cy="19" r="2" :fill="isScrolled ? '#D6D6D6' : '#07111B'" />
</svg>
</div>
</div>
<div class="menu-overlay" v-if="isMenuOpen" @click="closeMenu"></div>
<div class="slide-menu" :class="{ 'is-open': isMenuOpen }">
<div class="menu-items">
<RouterLink
to="/"
@click="closeMenu"
:class="{ active: $route.path === '/' }"
>Start</RouterLink>
<RouterLink
to="/docs"
@click="closeMenu"
:class="{ active: $route.path === '/docs' }"
>Docs</RouterLink>
</div>
<div class="menu-socials">
<social-button type="telegram" href="https://t.me/kraikenportal"></social-button>
<social-button type="twitter" href="https://x.com/KrAIkenProtocol"></social-button>
</div>
</div>
</header>
</template>
<script setup lang="ts">
import { RouterLink, useRouter } from "vue-router";
import SocialButton from "./SocialButton.vue";
import { onMounted, onUnmounted, ref,computed } from "vue";
const router = useRouter();
const scrollPosition = ref(0);
const isMenuOpen = ref(false);
const isScrolled = computed(() =>
router.currentRoute.value.fullPath.includes('/docs') ||
scrollPosition.value > 50
);
function updateScroll() {
scrollPosition.value = window.scrollY;
}
function toggleMenu() {
isMenuOpen.value = !isMenuOpen.value;
if (isMenuOpen.value) {
document.body.style.overflow = 'hidden';
} else {
document.body.style.overflow = '';
}
}
function closeMenu() {
isMenuOpen.value = false;
document.body.style.overflow = '';
}
onMounted(() => window.addEventListener("scroll", updateScroll));
onUnmounted(() => window.removeEventListener("scroll", updateScroll));document.body.style.overflow = '';
</script>
<style lang="sass">
.desktop-nav
display: none
align-items: center
gap: 24px
@media (min-width: 768px)
display: flex
a
color: #07111B
text-decoration: none
font-size: 18px
line-height: 24px
font-weight: 500
&:hover, &:active, &:focus
color: #F9F9FA
.social-buttons
display: flex
gap: 16px
margin-left: 16px
.social-badge
border: 2px solid #07111B
transition: all 0.2s ease
svg
fill: #07111B
&:hover
border: 2px solid #07111B
svg
fill: #07111B
.menu-trigger
display: none
cursor: pointer
padding: 8px
z-index: 99
@media (max-width: 767px)
display: block
.menu-overlay
position: fixed
top: 0
left: 0
width: 100%
height: 100%
background: rgba(0, 0, 0, 0.6)
z-index: 96
display: none
@media (max-width: 767px)
display: block
.slide-menu
position: fixed
border-top-left-radius: 20px
border-bottom-left-radius: 20px
top: 0
right: -240px
width: 240px
height: 400px
background: #07111B
z-index: 99
transition: transform 0.3s ease
display: none
@media (max-width: 767px)
display: flex
flex-direction: column
&.is-open
transform: translateX(-240px)
.menu-items
padding: 80px 32px
display: flex
flex-direction: column
gap: 24px
flex: 1
a
color: #9A9898
text-decoration: none
font-size: 24px
font-weight: 500
&.router-link-active,
&.active
color: #D6D6D6
&:hover
opacity: 0.8
.menu-socials
padding: 32px
display: flex
gap: 16px
justify-content: center
.kraken-navbar
box-sizing: border-box
background-color: transparent
padding: 8px 24px
height: 60px
border-bottom: 2px solid transparent
display: flex
align-items: center
justify-content: space-between
position: fixed
top: 0
transition: 0.2s ease
color: #07111B
width: 100%
z-index: 99
&.scrolled
background-color: #07111B
color: #D6D6D6
border-bottom: 2px solid #9A9898
.desktop-nav
a
color: #D6D6D6
&:hover
color: #F9F9FA
.social-buttons
.social-badge
border-color: #D6D6D6
svg
fill: #D6D6D6
&:hover
border-color: #F9F9FA
svg
fill: #07111B
.navbar-left
display: flex
gap: 8px
letter-spacing: 3.6px
align-items: center
font-size: 32px
font-weight: 400
&:hover, &:active, &:focus
cursor: pointer
img
height: 40px
width: 40px
@media (min-width: 768px)
height: auto
width: auto
.navbar-title
font-size: 24px
font-family: 'Audiowide', sans-serif
>*
font-family: 'Audiowide', sans-serif
@media (min-width: 768px)
display: block
font-size: 36px
font-weight: bold
.big-spacing
letter-spacing: 5.76px
.small-spacing
letter-spacing: 1.8px
</style>

71
landing/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>

69
landing/src/components/NavItem.vue Normal file
View file

@ -0,0 +1,69 @@
<template>
<li :class="{ active: isActive, parentActive: hasActiveChild }">
<router-link :to="'#' + props.item.id">{{ props.item.title }}</router-link>
<ul class="nav" v-if="props.item.children && props.item.children.length > 0">
<NavItem v-for="(child, index) in props.item.children" :key="index" :item="child" />
</ul>
</li>
</template>
<script setup lang="ts">
import { computed, inject, type Ref } from "vue";
interface MenuItem {
title: string;
id: string | null;
children: MenuItem[];
}
// Props für das aktuelle Element
const props = defineProps<{ item: MenuItem }>();
// `inject` für die aktive Referenz
const activeSection: any = inject("activeSection");
// Prüfen, ob das aktuelle Element aktiv ist
const isActive = computed(() => {
return activeSection.value === props.item.id;
});
// Rekursive Prüfung, ob ein untergeordnetes Element aktiv ist
const hasActiveChild = computed(() => {
return props.item.children.some((child) => checkChildActive(child));
});
function checkChildActive(child: MenuItem): boolean {
if (child.id === activeSection.value) {
return true;
}
return child.children.some((subChild) => checkChildActive(subChild));
}
</script>
<style scoped>
.nav {
list-style-type: none;
padding: 0;
margin: 0;
}
.nav li {
margin: 5px 0;
}
.nav a {
text-decoration: none;
color: #D6D6D6;
}
.nav li.active a {
font-weight: bold;
color: #9667BE;
}
.nav li.parentActive > a {
font-weight: bold;
color: #9667BE;
}
</style>

67
landing/src/components/SocialButton.vue Normal file
View file

@ -0,0 +1,67 @@
<template>
<a :href="props.href" target="_blank">
<div
class="social-badge"
>
<div class="social-badge-icon">
<component :is="img" />
</div>
</div>
</a>
</template>
<script setup lang="ts">
import { defineAsyncComponent, computed } from "vue";
interface Props {
type?: string;
href?: string;
}
const props = withDefaults(defineProps<Props>(), {});
const img = computed(() => {
let img;
switch (props.type) {
case "discord":
img = defineAsyncComponent(() => import(`../components/icons/IconDiscord.vue`));
break;
case "twitter":
img = defineAsyncComponent(() => import(`../components/icons/IconTwitter.vue`));
break;
case "telegram":
img = defineAsyncComponent(() => import(`../components/icons/IconTelegram.vue`));
break;
default:
break;
}
return img;
});
</script>
<style lang="sass">
.social-badge
border-radius: 14px
display: flex
border: 2px solid #D6D6D6
padding: 8px 24px
align-items: center
flex: 0 1 0
color: black
height: 100%
box-sizing: border-box
@media (min-width: 768px)
padding: 8px 48px
.social-badge-icon
display: flex
svg
fill: #D6D6D6
&:hover,&:active,&:focus
cursor: pointer
background-color: #F9F9FA
svg
fill: unset
</style>

7
landing/src/components/icons/IconCommunity.vue Normal file
View file

@ -0,0 +1,7 @@
<template>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
<path
d="M15 4a1 1 0 1 0 0 2V4zm0 11v-1a1 1 0 0 0-1 1h1zm0 4l-.707.707A1 1 0 0 0 16 19h-1zm-4-4l.707-.707A1 1 0 0 0 11 14v1zm-4.707-1.293a1 1 0 0 0-1.414 1.414l1.414-1.414zm-.707.707l-.707-.707.707.707zM9 11v-1a1 1 0 0 0-.707.293L9 11zm-4 0h1a1 1 0 0 0-1-1v1zm0 4H4a1 1 0 0 0 1.707.707L5 15zm10-9h2V4h-2v2zm2 0a1 1 0 0 1 1 1h2a3 3 0 0 0-3-3v2zm1 1v6h2V7h-2zm0 6a1 1 0 0 1-1 1v2a3 3 0 0 0 3-3h-2zm-1 1h-2v2h2v-2zm-3 1v4h2v-4h-2zm1.707 3.293l-4-4-1.414 1.414 4 4 1.414-1.414zM11 14H7v2h4v-2zm-4 0c-.276 0-.525-.111-.707-.293l-1.414 1.414C5.42 15.663 6.172 16 7 16v-2zm-.707 1.121l3.414-3.414-1.414-1.414-3.414 3.414 1.414 1.414zM9 12h4v-2H9v2zm4 0a3 3 0 0 0 3-3h-2a1 1 0 0 1-1 1v2zm3-3V3h-2v6h2zm0-6a3 3 0 0 0-3-3v2a1 1 0 0 1 1 1h2zm-3-3H3v2h10V0zM3 0a3 3 0 0 0-3 3h2a1 1 0 0 1 1-1V0zM0 3v6h2V3H0zm0 6a3 3 0 0 0 3 3v-2a1 1 0 0 1-1-1H0zm3 3h2v-2H3v2zm1-1v4h2v-4H4zm1.707 4.707l.586-.586-1.414-1.414-.586.586 1.414 1.414z"
/>
</svg>
</template>

29
landing/src/components/icons/IconDiscord.vue Normal file
View file

@ -0,0 +1,29 @@
<template>
<svg width="23" height="18" viewBox="0 0 23 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_2590_494)">
<path
ref="svgPath"
d="M19.419 3.40166C16.7691 1.45664 14.2483 1.51053 14.2483 1.51053L13.9906 1.79865C17.1188 2.73512 18.5723 4.08593 18.5723 4.08593C16.6585 3.05941 14.7817 2.55501 13.0336 2.35694C11.7088 2.21276 10.4391 2.24892 9.3167 2.39287C9.20634 2.39287 9.11433 2.41083 9.00397 2.42879C8.35994 2.48292 6.79584 2.71692 4.82702 3.56357C4.14628 3.86966 3.74131 4.08593 3.74131 4.08593C3.74131 4.08593 5.2687 2.66303 8.58065 1.72656L8.39664 1.51053C8.39664 1.51053 5.87579 1.4564 3.22598 3.40166C3.22598 3.40166 0.576172 8.10242 0.576172 13.9018C0.576172 13.9018 2.12191 16.5134 6.18851 16.6393C6.18851 16.6393 6.86925 15.8289 7.42129 15.1446C5.08444 14.4601 4.20109 13.0195 4.20109 13.0195C4.20109 13.0195 4.3851 13.1454 4.71642 13.3256C4.73477 13.3435 4.75313 13.3615 4.79007 13.3797C4.84537 13.4156 4.90043 13.4338 4.95573 13.4697C5.41576 13.7219 5.87579 13.92 6.29911 14.0821C7.05351 14.3703 7.95521 14.6584 9.00397 14.8565C10.3841 15.1087 12.0032 15.1987 13.7697 14.8744C14.6344 14.7303 15.5178 14.4783 16.4378 14.0999C17.0819 13.8656 17.7996 13.5236 18.554 13.0372C18.554 13.0372 17.6339 14.514 15.2234 15.1805C15.7754 15.865 16.4378 16.6393 16.4378 16.6393C20.5047 16.5131 22.0688 13.9018 22.0688 13.9018C22.0688 8.10242 19.419 3.40166 19.419 3.40166ZM7.8818 12.2267C6.85138 12.2267 6.00498 11.3262 6.00498 10.2276C6.00498 9.12894 6.83303 8.22841 7.8818 8.22841C8.93056 8.22841 9.77697 9.12894 9.75861 10.2276C9.75861 11.3262 8.93056 12.2267 7.8818 12.2267ZM14.598 12.2267C13.5675 12.2267 12.7211 11.3262 12.7211 10.2276C12.7211 9.12894 13.5492 8.22841 14.598 8.22841C15.6467 8.22841 16.4748 9.12894 16.4748 10.2276C16.4748 11.3262 15.647 12.2267 14.598 12.2267Z"
:fill="props.color"
/>
</g>
<defs>
<clipPath id="clip0_2590_494">
<rect width="22" height="17" fill="white" transform="translate(0.333984 0.58667)" />
</clipPath>
</defs>
</svg>
</template>
<script setup lang="ts">
import { onMounted, ref } from "vue";
const svgPath = ref();
interface Props {
color?: string;
}
const props = withDefaults(defineProps<Props>(), {});
</script>

7
landing/src/components/icons/IconDocumentation.vue Normal file
View file

@ -0,0 +1,7 @@
<template>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" fill="currentColor">
<path
d="M11 2.253a1 1 0 1 0-2 0h2zm-2 13a1 1 0 1 0 2 0H9zm.447-12.167a1 1 0 1 0 1.107-1.666L9.447 3.086zM1 2.253L.447 1.42A1 1 0 0 0 0 2.253h1zm0 13H0a1 1 0 0 0 1.553.833L1 15.253zm8.447.833a1 1 0 1 0 1.107-1.666l-1.107 1.666zm0-14.666a1 1 0 1 0 1.107 1.666L9.447 1.42zM19 2.253h1a1 1 0 0 0-.447-.833L19 2.253zm0 13l-.553.833A1 1 0 0 0 20 15.253h-1zm-9.553-.833a1 1 0 1 0 1.107 1.666L9.447 14.42zM9 2.253v13h2v-13H9zm1.553-.833C9.203.523 7.42 0 5.5 0v2c1.572 0 2.961.431 3.947 1.086l1.107-1.666zM5.5 0C3.58 0 1.797.523.447 1.42l1.107 1.666C2.539 2.431 3.928 2 5.5 2V0zM0 2.253v13h2v-13H0zm1.553 13.833C2.539 15.431 3.928 15 5.5 15v-2c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM5.5 15c1.572 0 2.961.431 3.947 1.086l1.107-1.666C9.203 13.523 7.42 13 5.5 13v2zm5.053-11.914C11.539 2.431 12.928 2 14.5 2V0c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM14.5 2c1.573 0 2.961.431 3.947 1.086l1.107-1.666C18.203.523 16.421 0 14.5 0v2zm3.5.253v13h2v-13h-2zm1.553 12.167C18.203 13.523 16.421 13 14.5 13v2c1.573 0 2.961.431 3.947 1.086l1.107-1.666zM14.5 13c-1.92 0-3.703.523-5.053 1.42l1.107 1.666C11.539 15.431 12.928 15 14.5 15v-2z"
/>
</svg>
</template>

7
landing/src/components/icons/IconEcosystem.vue Normal file
View file

@ -0,0 +1,7 @@
<template>
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="20" fill="currentColor">
<path
d="M11.447 8.894a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm0 1.789a1 1 0 1 0 .894-1.789l-.894 1.789zM7.447 7.106a1 1 0 1 0-.894 1.789l.894-1.789zM10 9a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0H8zm9.447-5.606a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm2 .789a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zM18 5a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0h-2zm-5.447-4.606a1 1 0 1 0 .894-1.789l-.894 1.789zM9 1l.447-.894a1 1 0 0 0-.894 0L9 1zm-2.447.106a1 1 0 1 0 .894 1.789l-.894-1.789zm-6 3a1 1 0 1 0 .894 1.789L.553 4.106zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zm-2-.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 2.789a1 1 0 1 0 .894-1.789l-.894 1.789zM2 5a1 1 0 1 0-2 0h2zM0 7.5a1 1 0 1 0 2 0H0zm8.553 12.394a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 1a1 1 0 1 0 .894 1.789l-.894-1.789zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zM8 19a1 1 0 1 0 2 0H8zm2-2.5a1 1 0 1 0-2 0h2zm-7.447.394a1 1 0 1 0 .894-1.789l-.894 1.789zM1 15H0a1 1 0 0 0 .553.894L1 15zm1-2.5a1 1 0 1 0-2 0h2zm12.553 2.606a1 1 0 1 0 .894 1.789l-.894-1.789zM17 15l.447.894A1 1 0 0 0 18 15h-1zm1-2.5a1 1 0 1 0-2 0h2zm-7.447-5.394l-2 1 .894 1.789 2-1-.894-1.789zm-1.106 1l-2-1-.894 1.789 2 1 .894-1.789zM8 9v2.5h2V9H8zm8.553-4.894l-2 1 .894 1.789 2-1-.894-1.789zm.894 0l-2-1-.894 1.789 2 1 .894-1.789zM16 5v2.5h2V5h-2zm-4.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zm-2.894-1l-2 1 .894 1.789 2-1L8.553.106zM1.447 5.894l2-1-.894-1.789-2 1 .894 1.789zm-.894 0l2 1 .894-1.789-2-1-.894 1.789zM0 5v2.5h2V5H0zm9.447 13.106l-2-1-.894 1.789 2 1 .894-1.789zm0 1.789l2-1-.894-1.789-2 1 .894 1.789zM10 19v-2.5H8V19h2zm-6.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zM2 15v-2.5H0V15h2zm13.447 1.894l2-1-.894-1.789-2 1 .894 1.789zM18 15v-2.5h-2V15h2z"
/>
</svg>
</template>

5
landing/src/components/icons/IconMenu.vue Normal file
View file

@ -0,0 +1,5 @@
<template>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
<!-- Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc. -->
<path d="M0 96C0 78.3 14.3 64 32 64l384 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 128C14.3 128 0 113.7 0 96zM0 256c0-17.7 14.3-32 32-32l384 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 288c-17.7 0-32-14.3-32-32zM448 416c0 17.7-14.3 32-32 32L32 448c-17.7 0-32-14.3-32-32s14.3-32 32-32l384 0c17.7 0 32 14.3 32 32z"/></svg>
</template>

7
landing/src/components/icons/IconSupport.vue Normal file
View file

@ -0,0 +1,7 @@
<template>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
<path
d="M10 3.22l-.61-.6a5.5 5.5 0 0 0-7.666.105 5.5 5.5 0 0 0-.114 7.665L10 18.78l8.39-8.4a5.5 5.5 0 0 0-.114-7.665 5.5 5.5 0 0 0-7.666-.105l-.61.61z"
/>
</svg>
</template>

22
landing/src/components/icons/IconTelegram.vue Normal file
View file

@ -0,0 +1,22 @@
<template>
<svg width="18" height="15" viewBox="0 0 18 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="Group">
<path id="Vector" d="M16.558 0.345906L1.24462 6.2506C0.199293 6.66992 0.205631 7.2531 1.05407 7.5128L4.98317 8.73926L6.33449 13.1866C6.51217 13.677 6.42458 13.8716 6.93975 13.8716C7.33718 13.8716 7.51274 13.6899 7.7346 13.4742L9.64412 11.6175L13.6166 14.5525C14.3477 14.9559 14.8754 14.7469 15.0575 13.8739L17.6654 1.58466C17.9324 0.51398 17.2574 0.0283891 16.558 0.345906Z" />
<path id="Vector_2" d="M6.95616 12.6891L5.66016 8.424L15.6361 2.50586L8.26406 9.76418L6.95616 12.6891Z"/>
</g>
</svg>
</template>
<script setup lang="ts">
import { onMounted, ref } from "vue";
const svgPath = ref();
interface Props {
color?: string;
}
const props = withDefaults(defineProps<Props>(), {});
</script>

19
landing/src/components/icons/IconTooling.vue Normal file
View file

@ -0,0 +1,19 @@
<!-- This icon is from <https://github.com/Templarian/MaterialDesign>, distributed under Apache 2.0 (https://www.apache.org/licenses/LICENSE-2.0) license-->
<template>
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
aria-hidden="true"
role="img"
class="iconify iconify--mdi"
width="24"
height="24"
preserveAspectRatio="xMidYMid meet"
viewBox="0 0 24 24"
>
<path
d="M20 18v-4h-3v1h-2v-1H9v1H7v-1H4v4h16M6.33 8l-1.74 4H7v-1h2v1h6v-1h2v1h2.41l-1.74-4H6.33M9 5v1h6V5H9m12.84 7.61c.1.22.16.48.16.8V18c0 .53-.21 1-.6 1.41c-.4.4-.85.59-1.4.59H4c-.55 0-1-.19-1.4-.59C2.21 19 2 18.53 2 18v-4.59c0-.32.06-.58.16-.8L4.5 7.22C4.84 6.41 5.45 6 6.33 6H7V5c0-.55.18-1 .57-1.41C7.96 3.2 8.44 3 9 3h6c.56 0 1.04.2 1.43.59c.39.41.57.86.57 1.41v1h.67c.88 0 1.49.41 1.83 1.22l2.34 5.39z"
fill="currentColor"
></path>
</svg>
</template>

18
landing/src/components/icons/IconTwitter.vue Normal file
View file

@ -0,0 +1,18 @@
<template>
<svg width="19" height="19" viewBox="0 0 19 19" xmlns="http://www.w3.org/2000/svg">
<path id="Vector" d="M0.5 0.5L7.4306 10.625L0.646792 18.5H2.14979L8.0944 11.5946L12.8213 18.5H18.5L11.2592 7.92259L17.6488 0.5H16.1504L10.5945 6.95025L6.17872 0.5H0.5ZM2.29474 1.44737H5.6811L16.7053 17.5526H13.3189L2.29474 1.44737Z"/>
</svg>
</template>
<script setup lang="ts">
import { onMounted, ref } from "vue";
const svgPath = ref();
interface Props {
color?: string;
}
const props = withDefaults(defineProps<Props>(), {});
</script>