Form with client-side validation, server error handling, aria-invalid/ aria-describedby for a11y, localStorage persistence via useEventStorage composable. Routes for /create and /events/:token. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
42 lines
802 B
Vue
42 lines
802 B
Vue
<template>
|
|
<main class="home">
|
|
<h1 class="home__title">fete</h1>
|
|
<p class="home__subtitle">No events yet.<br />Create your first one!</p>
|
|
<RouterLink to="/create" class="btn-primary home__cta">+ Create Event</RouterLink>
|
|
</main>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { RouterLink } from 'vue-router'
|
|
</script>
|
|
|
|
<style scoped>
|
|
.home {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: var(--spacing-lg);
|
|
text-align: center;
|
|
}
|
|
|
|
.home__title {
|
|
font-size: 2rem;
|
|
font-weight: 800;
|
|
color: var(--color-text-on-gradient);
|
|
}
|
|
|
|
.home__subtitle {
|
|
font-size: 1rem;
|
|
font-weight: 400;
|
|
color: var(--color-text-on-gradient);
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.home__cta {
|
|
margin-top: var(--spacing-md);
|
|
max-width: 280px;
|
|
}
|
|
</style>
|