jointrashposs/pages/tools/index.vue

51 lines
1.8 KiB
Vue
Raw Normal View History

2023-09-24 11:35:25 +02:00
<template>
<div>
<GHero>
<template #title>{{ $t('_tools.title') }}</template>
<template #description>
{{ $t('_tools.description') }}
</template>
<template #icon>
<div class="hidden lg:block relative px-6 py-8">
<GDots class="absolute top-0 left-0 w-32 h-32 text-accent-600" />
<GDots class="absolute bottom-0 right-0 w-32 h-32 text-accent-600" />
<div class="relative lg:w-64 h-64 flex items-center">
<img class="drop-shadow-xl toolsHeroToolbox" src="/img/emojis/toolbox_3d.png" />
</div>
</div>
</template>
</GHero>
<div class="pb-12 lg:mt-12 pt-6 bg-white dark:bg-slate-950">
<div class="container mx-auto max-w-screen-xl px-6 space-y-6 lg:space-y-8">
<GLocalNav :items="[
{
name: $t('_tools._forUsers.title'),
anchor: '#forUsers',
},
]" />
<section>
<h2 class="text-2xl lg:text-3xl font-bold mb-4">
{{ $t(`_tools._forUsers.title`) }}
</h2>
<GLinks :wide="true" :items="[
{
to: localePath('/tools/mfm-playground/'),
title: $t('_mfmPlayground.title'),
description: $t('_mfmPlayground.description'),
}
]" />
</section>
</div>
</div>
</div>
</template>
<script setup lang="ts">
const localePath = useLocalePath();
</script>
<style>
.toolsHeroToolbox:hover {
animation: .75s linear 0s 1 normal both running tada;
}
</style>