130 lines
4.5 KiB
Vue
130 lines
4.5 KiB
Vue
<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="outlined">
|
|
<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>
|