feat: Vue 3 Basis mit TailwindCSS, PrimeVue, i18n und Dark/Light Mode
- Vue 3 + Vite Setup - TailwindCSS mit Dark Mode Support - PrimeVue 4 mit Aura Theme - vue-i18n (Deutsch/Englisch) - Vue Router + Pinia - Responsive Navbar mit Theme Toggle & Language Switcher
This commit is contained in:
51
src/views/HomeView.vue
Normal file
51
src/views/HomeView.vue
Normal file
@@ -0,0 +1,51 @@
|
||||
<script setup>
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import Card from 'primevue/card'
|
||||
import Button from 'primevue/button'
|
||||
|
||||
const { t } = useI18n()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="space-y-8">
|
||||
<h1 class="text-4xl font-bold text-center">
|
||||
{{ t('home.title') }}
|
||||
</h1>
|
||||
|
||||
<div class="grid md:grid-cols-3 gap-6">
|
||||
<Card>
|
||||
<template #title>
|
||||
<i class="pi pi-bolt text-primary-500 mr-2"></i>
|
||||
{{ t('home.features.fast.title') }}
|
||||
</template>
|
||||
<template #content>
|
||||
{{ t('home.features.fast.desc') }}
|
||||
</template>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<template #title>
|
||||
<i class="pi pi-palette text-primary-500 mr-2"></i>
|
||||
{{ t('home.features.themes.title') }}
|
||||
</template>
|
||||
<template #content>
|
||||
{{ t('home.features.themes.desc') }}
|
||||
</template>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<template #title>
|
||||
<i class="pi pi-globe text-primary-500 mr-2"></i>
|
||||
{{ t('home.features.i18n.title') }}
|
||||
</template>
|
||||
<template #content>
|
||||
{{ t('home.features.i18n.desc') }}
|
||||
</template>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<div class="text-center">
|
||||
<Button :label="t('home.getStarted')" icon="pi pi-arrow-right" iconPos="right" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
Reference in New Issue
Block a user