feat(frontend): scaffold Vue 3 + Vuetify landing page

client/src/App.vue

@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import MainView from './pages/MainView.vue'
+
+interface NavItem {
+  title: string
+  href: string
+  icon: string
+}
+
+const drawer = ref(false)
+
+const navItems: NavItem[] = [
+  { title: 'Misja', href: '#misja', icon: 'mdi-compass-outline' },
+  { title: 'Jak to działa', href: '#jak-to-dziala', icon: 'mdi-sitemap-outline' },
+  { title: 'Dla kogo', href: '#dla-kogo', icon: 'mdi-account-group-outline' },
+]
+</script>
+
+<template>
+  <v-app>
+    <a class="skip-link" href="#main">Przejdź do treści głównej</a>
+
+    <v-app-bar color="primary" density="comfortable" scroll-behavior="elevate">
+      <v-app-bar-nav-icon
+        aria-label="Otwórz menu główne"
+        color="on-primary"
+        @click="drawer = !drawer"
+      />
+      <v-app-bar-title>TarninaHub</v-app-bar-title>
+      <v-spacer />
+      <nav aria-label="Menu główne" class="d-none d-md-block">
+        <v-btn
+          v-for="item in navItems"
+          :key="item.href"
+          :href="item.href"
+          color="on-primary"
+          variant="text"
+        >
+          {{ item.title }}
+        </v-btn>
+      </nav>
+    </v-app-bar>
+
+    <v-navigation-drawer v-model="drawer" aria-label="Menu główne" temporary>
+      <v-list nav>
+        <v-list-item
+          v-for="item in navItems"
+          :key="item.href"
+          :href="item.href"
+          :prepend-icon="item.icon"
+          :title="item.title"
+          @click="drawer = false"
+        />
+      </v-list>
+    </v-navigation-drawer>
+
+    <v-main id="main" tabindex="-1">
+      <MainView />
+    </v-main>
+
+    <v-footer class="d-block pa-4 text-center">
+      <p class="ma-0">
+        TarninaHub — Małopolski Hub Innowacji Społecznych · Projekt hackathonowy
+      </p>
+    </v-footer>
+  </v-app>
+</template>

client/src/assets/vue.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>

client/src/main.ts

@@ -0,0 +1,7 @@
+import { createApp } from 'vue'
+import vuetify from './plugins/vuetify'
+import './style.css'
+import './styles/a11y.css'
+import App from './App.vue'
+
+createApp(App).use(vuetify).mount('#app')

client/src/pages/MainView.vue

@@ -0,0 +1,129 @@
+<script setup lang="ts">
+interface Feature {
+  icon: string
+  title: string
+  text: string
+}
+
+interface Step {
+  number: string
+  title: string
+  text: string
+}
+
+const features: Feature[] = [
+  {
+    icon: 'mdi-home-heart-outline',
+    title: 'Potrzeby mieszkańców',
+    text: 'Mieszkańcy i lokalne społeczności zgłaszają realne problemy: dostęp do opieki, transport, wsparcie seniorów, aktywizację młodzieży.',
+  },
+  {
+    icon: 'mdi-lightbulb-on-outline',
+    title: 'Sprawdzone rozwiązania',
+    text: 'Baza wiedzy i gotowych pomysłów, które zadziałały w innych gminach, instytucjach i organizacjach społecznych.',
+  },
+  {
+    icon: 'mdi-account-multiple-check-outline',
+    title: 'Ludzie gotowi do działania',
+    text: 'Łączymy wolontariuszy, ekspertów, NGOs i samorządy, aby wspólnie wdrażać wartościowe inicjatywy.',
+  },
+]
+
+const steps: Step[] = [
+  {
+    number: '1',
+    title: 'Zgłoś potrzebę',
+    text: 'Opisz problem społeczny krótkim zgłoszeniem — bez formalności, prostym językiem.',
+  },
+  {
+    number: '2',
+    title: 'Znajdź rozwiązanie',
+    text: 'Zobacz sprawdzone inicjatywy i wiedzę dopasowaną do Twojej lokalizacji i tematu.',
+  },
+  {
+    number: '3',
+    title: 'Połącz siły',
+    text: 'Zaproś mieszkańców, instytucje i organizacje, a następnie wspólnie zrealizujcie projekt.',
+  },
+]
+</script>
+
+<template>
+  <v-container class="py-8 py-md-12">
+    <section aria-labelledby="hero-title" class="mb-12">
+      <v-row align="center" justify="center">
+        <v-col cols="12" md="9" lg="8" class="text-center">
+          <h1 id="hero-title" class="text-h3 text-md-h2 mb-6">
+            Dobre pomysły nie mogą pozostać niezauważone
+          </h1>
+          <p class="text-body-1 text-md-h6 mb-8">
+            TarninaHub łączy potrzeby mieszkańców Małopolski z wiedzą,
+            sprawdzonymi rozwiązaniami i ludźmi gotowymi do działania. Wspólnie
+            sprawiamy, by wartościowe inicjatywy społeczne trafiały tam, gdzie są
+            najbardziej potrzebne.
+          </p>
+          <div class="d-flex flex-wrap justify-center ga-3">
+            <v-btn href="#jak-to-dziala" size="x-large">Zobacz, jak to działa</v-btn>
+            <v-btn href="#dla-kogo" size="x-large" variant="outlined">
+              Dla kogo jest TarninaHub?
+            </v-btn>
+          </div>
+        </v-col>
+      </v-row>
+    </section>
+
+    <section id="misja" aria-labelledby="misja-title" class="mb-12">
+      <v-row justify="center">
+        <v-col cols="12" md="10" lg="8">
+          <v-card variant="tonal" color="primary" class="pa-6 pa-md-8">
+            <h2 id="misja-title" class="text-h5 mb-4">Nasza misja</h2>
+            <p class="text-body-1 mb-0">
+              Chcemy, aby żadna wartościowa inicjatywa społeczna nie przepadła z
+              powodu braku informacji, kontaktu lub wsparcia. Technologia ma
+              skracać drogę od pomysłu do działania i ułatwiać współpracę między
+              mieszkańcami, instytucjami i organizacjami społecznymi.
+            </p>
+          </v-card>
+        </v-col>
+      </v-row>
+    </section>
+
+    <section id="jak-to-dziala" aria-labelledby="jak-title" class="mb-12">
+      <h2 id="jak-title" class="text-h4 text-center mb-8">Jak to działa?</h2>
+      <v-row>
+        <v-col v-for="step in steps" :key="step.number" cols="12" md="4">
+          <v-card class="h-100 pa-2" variant="outlined">
+            <v-card-item>
+              <v-avatar color="primary" size="large" class="mb-3">
+                <span class="text-h6" aria-hidden="true">{{ step.number }}</span>
+              </v-avatar>
+              <h3 class="text-h6 mb-2">{{ step.title }}</h3>
+              <p class="text-body-2 mb-0">{{ step.text }}</p>
+            </v-card-item>
+          </v-card>
+        </v-col>
+      </v-row>
+    </section>
+
+    <section id="dla-kogo" aria-labelledby="dla-kogo-title" class="mb-8">
+      <h2 id="dla-kogo-title" class="text-h4 text-center mb-8">Dla kogo?</h2>
+      <v-row>
+        <v-col v-for="feature in features" :key="feature.title" cols="12" md="4">
+          <v-card class="h-100 pa-2" variant="elevated" elevation="2">
+            <v-card-item>
+              <v-icon
+                :icon="feature.icon"
+                size="40"
+                color="primary"
+                class="mb-3"
+                aria-hidden="true"
+              />
+              <h3 class="text-h6 mb-2">{{ feature.title }}</h3>
+              <p class="text-body-2 mb-0">{{ feature.text }}</p>
+            </v-card-item>
+          </v-card>
+        </v-col>
+      </v-row>
+    </section>
+  </v-container>
+</template>

client/src/plugins/vuetify.ts

@@ -0,0 +1,91 @@
+import '@mdi/font/css/materialdesignicons.css'
+import 'vuetify/styles'
+import { createVuetify, type ThemeDefinition } from 'vuetify'
+import * as components from 'vuetify/components'
+import * as directives from 'vuetify/directives'
+import { en, pl } from 'vuetify/locale'
+
+const light: ThemeDefinition = {
+  dark: false,
+  colors: {
+    background: '#FFFFFF',
+    surface: '#FFFFFF',
+    'surface-variant': '#4D4D4D',
+    primary: '#1565C0',
+    'on-primary': '#FFFFFF',
+    secondary: '#455A64',
+    'on-secondary': '#FFFFFF',
+    error: '#B3261E',
+    'on-error': '#FFFFFF',
+    success: '#1B5E20',
+    'on-success': '#FFFFFF',
+    warning: '#8A4B00',
+    'on-warning': '#FFFFFF',
+    info: '#01579B',
+    'on-info': '#FFFFFF',
+  },
+}
+
+const dark: ThemeDefinition = {
+  dark: true,
+  colors: {
+    background: '#121212',
+    surface: '#1E1E1E',
+    'surface-variant': '#CFCFCF',
+    primary: '#90CAF9',
+    'on-primary': '#0D1B2A',
+    secondary: '#B0BEC5',
+    'on-secondary': '#10181C',
+    error: '#FFB4AB',
+    'on-error': '#410002',
+    success: '#A5D6A7',
+    'on-success': '#0B2A0E',
+    warning: '#FFCC80',
+    'on-warning': '#2E1A00',
+    info: '#81D4FA',
+    'on-info': '#00263A',
+  },
+}
+
+const highContrast: ThemeDefinition = {
+  dark: true,
+  colors: {
+    background: '#000000',
+    surface: '#000000',
+    'surface-variant': '#FFFFFF',
+    primary: '#FFFF00',
+    'on-primary': '#000000',
+    secondary: '#00FFFF',
+    'on-secondary': '#000000',
+    error: '#FF8A80',
+    'on-error': '#000000',
+    success: '#69F0AE',
+    'on-success': '#000000',
+    warning: '#FFD740',
+    'on-warning': '#000000',
+    info: '#80D8FF',
+    'on-info': '#000000',
+  },
+}
+
+export default createVuetify({
+  components,
+  directives,
+  locale: { locale: 'pl', fallback: 'en', messages: { pl, en } },
+  theme: { defaultTheme: 'system', themes: { light, dark, highContrast } },
+  defaults: {
+    global: { ripple: false },
+    VBtn: { size: 'large', variant: 'flat', color: 'primary' },
+    VTextField: { variant: 'outlined', density: 'default', color: 'primary', hideDetails: 'auto' },
+    VTextarea: { variant: 'outlined', density: 'default', color: 'primary', hideDetails: 'auto' },
+    VSelect: { variant: 'outlined', density: 'default', color: 'primary', hideDetails: 'auto' },
+    VAutocomplete: { variant: 'outlined', density: 'default', color: 'primary', hideDetails: 'auto' },
+    VCheckbox: { color: 'primary', density: 'default' },
+    VRadioGroup: { color: 'primary' },
+    VSwitch: { color: 'primary', inset: true },
+    VAlert: { variant: 'tonal', border: 'start' },
+    VSnackbar: { timeout: 10000 },
+    VCarousel: { cycle: false },
+    VTooltip: { openDelay: 300 },
+  },
+})

client/src/style.css

@@ -0,0 +1,11 @@
+@layer app-reset {
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+
+  body {
+    margin: 0;
+  }
+}

client/src/styles/a11y.css

@@ -0,0 +1,106 @@
+.v-theme--light {
+  --a11y-focus: #0b3d91;
+}
+.v-theme--dark {
+  --a11y-focus: #ffd54f;
+}
+.v-theme--highContrast {
+  --a11y-focus: #ffff00;
+}
+
+html {
+  font-size: 112.5%;
+}
+
+body {
+  line-height: 1.6;
+}
+
+:where(a, button, input, select, textarea, summary, [tabindex], .v-btn, .v-field, .v-list-item,
+    .v-tab, .v-chip--link, .v-selection-control__input):focus-visible {
+  outline: 3px solid var(--a11y-focus) !important;
+  outline-offset: 2px;
+}
+.v-field:focus-within {
+  outline: 3px solid var(--a11y-focus);
+  outline-offset: 2px;
+}
+.v-btn:focus-visible .v-btn__overlay {
+  opacity: 0.12;
+}
+
+.v-btn:not(.v-btn--icon):not(.v-btn--size-x-small) {
+  min-height: 44px;
+}
+.v-btn--icon {
+  min-width: 44px;
+  min-height: 44px;
+}
+.v-selection-control {
+  min-height: 44px;
+}
+.v-list-item {
+  min-height: 48px;
+}
+
+.prose a,
+p a,
+li a {
+  text-decoration: underline;
+  text-underline-offset: 3px;
+}
+
+.skip-link {
+  position: absolute;
+  left: 8px;
+  top: -100px;
+  z-index: 10000;
+  padding: 12px 16px;
+  background: #000;
+  color: #fff;
+  font-weight: 700;
+  border-radius: 4px;
+}
+.skip-link:focus {
+  top: 8px;
+}
+
+.sr-only {
+  position: absolute !important;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
+
+@media (forced-colors: active) {
+  .v-btn,
+  .v-card,
+  .v-field__outline,
+  .v-chip,
+  .v-alert {
+    border: 1px solid CanvasText;
+  }
+  .v-btn:focus-visible,
+  .v-field:focus-within {
+    outline: 3px solid Highlight !important;
+  }
+  .v-selection-control__input {
+    forced-color-adjust: auto;
+  }
+}