91 lines
5.6 KiB
Vue
91 lines
5.6 KiB
Vue
<script setup lang="ts">
|
|
import { useI18n } from 'vue-i18n';
|
|
import FeatureCard from './FeatureCard.vue';
|
|
const { t } = useI18n();
|
|
</script>
|
|
|
|
<template>
|
|
<section id="features" class="mx-auto max-w-[1200px] scroll-mt-[84px] px-6 pb-[100px]">
|
|
<div v-reveal class="mb-[46px] text-center">
|
|
<div class="mb-3.5 font-mono text-xs uppercase tracking-[0.14em] text-emerald-400">{{ t('featKicker') }}</div>
|
|
<h2 class="m-0 text-[clamp(28px,3.4vw,40px)] font-semibold tracking-[-0.025em] text-zinc-50">
|
|
{{ t('featTitle') }}
|
|
</h2>
|
|
</div>
|
|
|
|
<div v-reveal class="grid grid-cols-[repeat(auto-fit,minmax(264px,1fr))] gap-4">
|
|
<FeatureCard :title="t('feat1Title')">
|
|
<template #icon>
|
|
<svg width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="6" y1="3" x2="6" y2="15" /><circle cx="18" cy="6" r="3" /><circle cx="6" cy="18" r="3" /><path d="M18 9a9 9 0 0 1-9 9" /></svg>
|
|
</template>
|
|
{{ t('feat1Desc') }}
|
|
</FeatureCard>
|
|
|
|
<FeatureCard :title="t('feat2Title')">
|
|
<template #icon>
|
|
<svg width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect width="7" height="7" x="3" y="3" rx="1" /><rect width="7" height="7" x="14" y="3" rx="1" /><rect width="7" height="7" x="14" y="14" rx="1" /><rect width="7" height="7" x="3" y="14" rx="1" /></svg>
|
|
</template>
|
|
{{ t('feat2Desc') }}
|
|
</FeatureCard>
|
|
|
|
<FeatureCard :title="t('feat3Title')">
|
|
<template #icon>
|
|
<svg width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M22 12h-4l-3 9L9 3l-3 9H2" /></svg>
|
|
</template>
|
|
<span class="text-sky-300">{{ t('busy') }}</span> ·
|
|
<span class="text-amber-300">{{ t('waiting') }}</span> ·
|
|
<span class="text-emerald-400">{{ t('idle') }}</span> — {{ t('feat3Desc') }}
|
|
</FeatureCard>
|
|
|
|
<FeatureCard :title="t('feat4Title')">
|
|
<template #icon>
|
|
<svg width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect width="14" height="20" x="5" y="2" rx="2.5" /><path d="M12 18h.01" /></svg>
|
|
</template>
|
|
{{ t('feat4Desc') }}
|
|
</FeatureCard>
|
|
|
|
<FeatureCard :title="t('feat5Title')">
|
|
<template #icon>
|
|
<svg width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10.27 21a1.94 1.94 0 0 0 3.46 0" /><path d="M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326" /></svg>
|
|
</template>
|
|
{{ t('feat5Desc') }}
|
|
</FeatureCard>
|
|
|
|
<FeatureCard :title="t('feat6Title')">
|
|
<template #icon>
|
|
<svg width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" /></svg>
|
|
</template>
|
|
{{ t('feat6Desc') }}
|
|
</FeatureCard>
|
|
|
|
<FeatureCard :title="t('feat7Title')">
|
|
<template #icon>
|
|
<svg width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M2.97 12.92A2 2 0 0 0 2 14.63v3.24a2 2 0 0 0 .97 1.71l3 1.8a2 2 0 0 0 2.06 0L12 19v-5.5l-5-3-4.03 2.42Z" /><path d="m7 16.5-4.74-2.85" /><path d="m7 16.5 5-3" /><path d="M7 16.5v5.17" /><path d="M12 13.5V19l3.97 2.38a2 2 0 0 0 2.06 0l3-1.8a2 2 0 0 0 .97-1.71v-3.24a2 2 0 0 0-.97-1.71L17 10.5l-5 3Z" /><path d="m17 16.5 4.74-2.85" /><path d="M7.97 4.42A2 2 0 0 0 7 6.13v4.37l5 3 5-3V6.13a2 2 0 0 0-.97-1.71l-3-1.8a2 2 0 0 0-2.06 0l-3 1.8Z" /></svg>
|
|
</template>
|
|
{{ t('feat7Desc') }}
|
|
</FeatureCard>
|
|
|
|
<FeatureCard :title="t('feat8Title')">
|
|
<template #icon>
|
|
<svg width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z" /></svg>
|
|
</template>
|
|
{{ t('feat8Desc') }}
|
|
</FeatureCard>
|
|
|
|
<FeatureCard :title="t('feat9Title')">
|
|
<template #icon>
|
|
<svg width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="16 18 22 12 16 6" /><polyline points="8 6 2 12 8 18" /></svg>
|
|
</template>
|
|
{{ t('feat9Desc') }}
|
|
</FeatureCard>
|
|
|
|
<FeatureCard :title="t('feat10Title')">
|
|
<template #icon>
|
|
<svg width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 10v6" /><path d="M9 13h6" /><path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z" /></svg>
|
|
</template>
|
|
{{ t('feat10Desc') }}
|
|
</FeatureCard>
|
|
</div>
|
|
</section>
|
|
</template>
|