Sink/components/home/Hero.vue
wudi e563d55852 feat: Add internationalization (i18n) support
Implemented multi-language support for the application:
- Added @nuxtjs/i18n plugin configuration
- Created locale files for English (en-US) and Chinese (zh-CN)
- Updated components to use translation keys
- Added language switcher in header
- Configured VSCode i18n-ally settings
- Prepared translation infrastructure for future language expansions
2025-03-03 11:21:39 +08:00

58 lines
1.4 KiB
Vue

<script setup>
import heroImg from '@/assets/images/hero.svg?raw'
import { AreaChart } from 'lucide-vue-next'
import { GitHubIcon } from 'vue3-simple-icons'
const { title, description, github } = useAppConfig()
</script>
<template>
<main
class="grid pt-8 pb-8 lg:grid-cols-2 place-items-center md:py-12"
>
<div>
<h1
class="text-5xl font-bold lg:text-6xl xl:text-7xl lg:tracking-tight xl:tracking-tighter"
>
{{ title }}
</h1>
<p class="max-w-xl mt-4 text-lg text-slate-600">
{{ description }}
</p>
<div class="flex flex-col gap-3 mt-6 sm:flex-row">
<HomeLink
href="/dashboard"
target="_blank"
title="Dashboard"
class="flex items-center justify-center gap-1"
rel="noopener"
>
<AreaChart
class="w-5 h-5"
/>
{{ $t('dashboard.title') }}
</HomeLink>
<HomeLink
size="lg"
type="outline"
rel="noopener"
:href="github"
title="Github"
class="flex items-center justify-center gap-1"
target="_blank"
>
<GitHubIcon
class="w-5 h-5"
/>
GitHub Repo
</HomeLink>
</div>
</div>
<div class="hidden py-6 md:block">
<div
class="w-[512px]"
v-html="heroImg"
/>
</div>
</main>
</template>