Files
myprojplanet_vite/src/components/HomeRiso/HomeRiso copy.vue

885 lines
30 KiB
Vue
Raw Blame History

This file contains invisible Unicode characters
This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<template>
<q-page class="riso-homepage">
<!-- Hero Section -->
<!-- Hero Section con Slideshow -->
<section class="hero-section">
<!-- Background Slideshow -->
<div class="hero-slideshow">
<div
v-for="(image, index) in heroImages"
:key="index"
class="hero-slide"
:class="{ active: currentSlide === index }"
:style="{ backgroundImage: `url(${image.src})` }"
>
<div class="hero-overlay"></div>
</div>
</div>
<!-- Slideshow Indicators -->
<div class="slideshow-indicators">
<button
v-for="(image, index) in heroImages"
:key="index"
class="indicator-dot"
:class="{ active: currentSlide === index }"
@click="goToSlide(index)"
:aria-label="`Vai alla slide ${index + 1}`"
></button>
</div>
<!-- Hero Content -->
<div class="hero-content">
<q-img
src="/images/logo.png"
alt="RISO Logo"
class="hero-logo"
:ratio="1"
/>
<h1 class="hero-title animate-fade-in">
<span class="riso-text">RISO</span>
</h1>
<h2 class="hero-subtitle animate-fade-in-delay">
Rete Italiana di Scambio Orizzontale
</h2>
<p class="hero-description animate-fade-in-delay-2">
Una rete di comunità consapevoli, basata sul sostegno reciproco,<br />
la fiducia, la condivisione e l'ascolto.
</p>
<div class="hero-actions animate-fade-in-delay-3">
<q-btn
v-if="!tools.isLogged()"
label="Unisciti a RISO"
:size="$q.platform.is.mobile ? 'lg' : 'xl'"
color="primary"
rounded
unelevated
class="cta-button"
@click="scrollToRegistrazione"
/>
<q-btn
v-else
label="ACCEDI"
:size="$q.platform.is.mobile ? 'lg' : 'xl'"
color="primary"
rounded
unelevated
class="cta-button"
@click="goToHome"
/>
<q-btn
label="Scopri di più"
size="md"
outline
rounded
class="secondary-button"
@click="scrollToAbout"
/>
</div>
</div>
</section>
<!-- Cos'è RISO Section -->
<section
id="about"
class="about-section"
>
<div class="contain_riso">
<h2 class="section-title">
<q-icon
name="eco"
size="md"
class="title-icon"
/>
Cos'è RISO?
</h2>
<div class="content-cards">
<q-card
class="info-card"
flat
bordered
>
<q-card-section class="card-icon-section">
<div class="icon-circle">🫂</div>
</q-card-section>
<q-card-section>
<div class="card-title">Una Rete di Comunità</div>
<p class="card-text">
RISO è una rete di comunità che vuole creare un nuovo mondo, attraverso
l'incontro e la condivisione, con il sor<strong>RISO</strong> sulle
labbra.
</p>
</q-card-section>
</q-card>
<q-card
class="info-card"
flat
bordered
>
<q-card-section class="card-icon-section">
<div class="icon-circle">🌾</div>
</q-card-section>
<q-card-section>
<div class="card-title">Simbolo di Vita</div>
<p class="card-text">
Il RISO è fonte di vita, simbolo del ciclo della vita e del valore della
terra. Una delle prime forme di scambio, una moneta basata su uno dei beni
più preziosi.
</p>
</q-card-section>
</q-card>
<q-card
class="info-card"
flat
bordered
>
<q-card-section class="card-icon-section">
<div class="icon-circle">🤝</div>
</q-card-section>
<q-card-section>
<div class="card-title">Decisioni Orizzontali</div>
<p class="card-text">
Il progetto è orizzontale: ogni decisione viene presa nei territori
attraverso la condivisione e la partecipazione.
</p>
</q-card-section>
</q-card>
</div>
</div>
</section>
<!-- Il Sogno Section -->
<section class="dream-section">
<div class="contain_riso">
<div class="dream-content">
<div class="dream-text">
<h2 class="section-title light">
<q-icon
name="auto_awesome"
size="md"
class="title-icon"
/>
Il Sogno di RISO
</h2>
<p class="dream-description">
Siamo una rete di comunità consapevoli, basata sul sostegno reciproco, la
fiducia, la condivisione e l'ascolto. Coltiviamo terreno fertile per creare,
in armonia con la natura, un mondo di collettività
<strong>libere e autosufficienti</strong>, attraverso un circuito di scambio
di esperienze umane, beni e servizi.
</p>
<div class="dream-highlight">
<q-icon
name="campaign"
size="lg"
/>
<div>
<strong>Partecipa al cambiamento.</strong><br />
RISO sei anche tu!
</div>
</div>
</div>
<div class="dream-image">
<q-img
src="/images/cerchio_riso.jpg"
alt="Comunità RISO"
class="rounded-image"
ratio="1"
/>
</div>
</div>
</div>
</section>
<!-- Valori Section -->
<section class="values-section">
<div class="contain_riso">
<h2 class="section-title">
<q-icon
name="favorite"
size="md"
class="title-icon"
/>
I Nostri Valori
</h2>
<div class="values-grid">
<div
v-for="(value, index) in values"
:key="index"
class="value-item"
>
<div class="value-icon">{{ value.icon }}</div>
<h3 class="value-title">{{ value.title }}</h3>
<p class="value-text">{{ value.text }}</p>
</div>
</div>
</div>
</section>
<!-- Come Funziona Section -->
<section class="how-it-works-section">
<div class="contain_riso">
<h2 class="section-title">
<q-icon
name="settings"
size="md"
class="title-icon"
/>
Come Funziona
</h2>
<div class="steps-timeline">
<div
v-for="(step, index) in steps"
:key="index"
class="step-item"
>
<div class="step-number">{{ index + 1 }}</div>
<div class="step-content">
<h3 class="step-title">{{ step.title }}</h3>
<p class="step-text">{{ step.text }}</p>
</div>
</div>
</div>
</div>
</section>
<!-- Video Section - Aggiungi dopo la sezione "How it works" -->
<section class="video-section">
<div class="container">
<h2 class="section-title">
<q-icon
name="play_circle"
size="md"
class="title-icon"
/>
Guarda il Video di Presentazione
</h2>
<div class="video-container">
<iframe
width="100%"
height="100%"
src="https://rumble.com/embed/v5opfsn/?pub=46vc7z"
title="Video presentazione Progetto RISO"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
></iframe>
</div>
<p class="video-description">
Scopri come funziona il Progetto RISO e come puoi contribuire a creare
un'economia più sostenibile e solidale nella tua comunità.
</p>
</div>
</section>
<!-- Comunità Territoriali Section -->
<section class="communities-section">
<div class="contain_riso">
<h2 class="section-title">
<q-icon
name="groups"
size="md"
class="title-icon"
/>
Comunità Territoriali
</h2>
<div class="communities-content">
<p class="section-intro">
Le colonne portanti di RISO sono le <strong>Comunità Territoriali</strong>.
Ogni comunità ha pieno potere decisionale al suo interno, nel rispetto dei
principi e delle finalità di RISO.
</p>
<div class="features-grid">
<q-card
class="feature-card"
flat
>
<q-card-section>
<div class="feature-icon">🏘</div>
<div class="feature-title">Autonomia Locale</div>
<p class="feature-text">
Ogni comunità decide autonomamente, tessendo relazioni con i gruppi del
territorio.
</p>
</q-card-section>
</q-card>
<q-card
class="feature-card"
flat
>
<q-card-section>
<div class="feature-icon">👥</div>
<div class="feature-title">Facilitatori</div>
<p class="feature-text">
Idealmente servirebbero almeno 3 facilitatori per comunità, scelti dai
membri per aiutare nella comunicazione e nel coordinamento.
</p>
</q-card-section>
</q-card>
<q-card
class="feature-card"
flat
>
<q-card-section>
<div class="feature-icon">🔗</div>
<div class="feature-title">Nodi Regionali</div>
<p class="feature-text">
I facilitatori regionali supportano le comunità territoriali e
condividono iniziative.
</p>
</q-card-section>
</q-card>
</div>
</div>
</div>
</section>
<!-- RIS e Scambi Section -->
<section class="ris-section">
<div class="contain_riso">
<h2 class="section-title">
<q-icon
name="currency_exchange"
size="md"
class="title-icon"
/>
I Circuiti di Scambio e il RIS
</h2>
<div class="ris-content">
<!-- Card principale cos'è il RIS -->
<div class="ris-card-main">
<q-card
class="ris-info-card"
flat
bordered
>
<q-card-section class="ris-header">
<div class="ris-icon">💰</div>
<h3>Cos'è il RIS?</h3>
</q-card-section>
<q-card-section>
<p class="ris-description">
Il <strong>RIS</strong> è l'unità di misura del valore dei beni e
servizi per lo scambio tra i membri di una comunità territoriale. È una
moneta complementare basata sulla <strong>fiducia reciproca</strong>
tra i membri della comunità.
</p>
<q-separator class="q-my-md" />
<div class="ris-features">
<div class="ris-feature-item">
<q-icon
name="check_circle"
color="positive"
/>
<span
>Parti da 0 RIS: ricevere = credito (+), offrire = debito (-)</span
>
</div>
<div class="ris-feature-item">
<q-icon
name="check_circle"
color="positive"
/>
<span>Non si accumula: serve per far circolare beni e servizi</span>
</div>
<div class="ris-feature-item">
<q-icon
name="check_circle"
color="positive"
/>
<span>Il bilancio totale della comunità è sempre zero</span>
</div>
<div class="ris-feature-item">
<q-icon
name="check_circle"
color="positive"
/>
<span>Puoi combinarlo con Euro, baratto o dono</span>
</div>
</div>
</q-card-section>
</q-card>
</div>
<!-- Limiti RIS -->
<div class="ris-limits-section">
<h3 class="subsection-title">📊 Limiti di Utilizzo</h3>
<p class="limits-intro">
Per garantire la circolazione equilibrata, esistono dei limiti al saldo RIS
che ogni membro può avere:
</p>
<div class="limits-grid">
<q-card
class="limit-card"
flat
bordered
>
<q-card-section>
<div class="limit-icon">🏘️</div>
<h4 class="limit-title">Circuito Territoriale</h4>
<p class="limit-subtitle">(Provincia)</p>
<div class="limit-values">
<div class="limit-value negative">
<div class="limit-label">
Fiducia Concessa<br />(Limite negativo)
</div>
<div class="limit-number">-100 RIS</div>
</div>
<div class="limit-separator">↔️</div>
<div class="limit-value positive">
<div class="limit-label">
Massimo Accumulo<br />(Limite positivo)
</div>
<div class="limit-number">+200 RIS</div>
</div>
</div>
</q-card-section>
</q-card>
<q-card
class="limit-card"
flat
bordered
>
<q-card-section>
<div class="limit-icon">🇮🇹</div>
<h4 class="limit-title">Circuito Nazionale</h4>
<p class="limit-subtitle">(Tutta Italia)</p>
<div class="limit-values">
<div class="limit-value negative">
<div class="limit-label">
Fiducia Concessa<br />(Limite negativo)
</div>
<div class="limit-number">-200 RIS</div>
</div>
<div class="limit-separator">↔️</div>
<div class="limit-value positive">
<div class="limit-label">
Massimo Accumulo<br />(Limite positivo)
</div>
<div class="limit-number">+400 RIS</div>
</div>
</div>
</q-card-section>
</q-card>
</div>
<q-banner
class="limits-note"
rounded
>
<template v-slot:avatar>
<q-icon
name="info"
color="primary"
/>
</template>
I limiti servono a evitare accumulo eccessivo e garantire che i RIS
circolino continuamente nella comunità, mantenendo il bilancio totale a
zero. Ogni comunita territoriale provinciale può decidere
<strong>autonomamente di modificare</strong> i limiti all'occorrenza.
</q-banner>
</div>
<!-- Esempio 1: Scambio circolare -->
<div class="example-section">
<h3 class="subsection-title">🔄 Esempio 1: Scambio Circolare</h3>
<p class="example-intro">
Vediamo come funzionano gli scambi in RIS con 3 persone che offrono e
ricevono servizi dello stesso valore (10 RIS):
</p>
<q-card
class="example-card"
flat
bordered
>
<q-card-section>
<div class="example-steps">
<!-- Step 1 -->
<div class="example-step">
<div class="step-header">
<div class="step-badge">1</div>
<div class="step-title">
Mario riceve verdure da Laura e le invia 10 RIS (va a -10)
</div>
</div>
<div class="step-content">
<div class="transaction">
<div class="person">
<div class="person-name">👨 Mario</div>
<div class="balance negative">-10 RIS</div>
<div class="balance-detail">(0 -10) = -10</div>
</div>
<div class="arrow"></div>
<div class="person">
<div class="person-name">👩 Laura</div>
<div class="balance positive">+10 RIS</div>
<div class="balance-detail">(0 +10) = +10</div>
</div>
</div>
</div>
</div>
<q-separator class="q-my-md" />
<!-- Step 2 -->
<div class="example-step">
<div class="step-header">
<div class="step-badge">2</div>
<div class="step-title">
Laura si fa riparare la bici da Paolo e gli invia 10 RIS, Laura
torna così a zero.
</div>
</div>
<div class="step-content">
<div class="transaction">
<div class="person">
<div class="person-name">👩 Laura</div>
<div class="balance neutral">0 RIS</div>
<div class="balance-detail">(+10 -10) = 0</div>
</div>
<div class="arrow"></div>
<div class="person">
<div class="person-name">👨 Paolo</div>
<div class="balance positive">+10 RIS</div>
<div class="balance-detail">(+10 -10) = 0</div>
</div>
</div>
</div>
</div>
<q-separator class="q-my-md" />
<!-- Step 3 -->
<div class="example-step">
<div class="step-header">
<div class="step-badge">3</div>
<div class="step-title">
Paolo riceve del miele da Mario e gli invia 10 RIS.
</div>
</div>
<div class="step-content">
<div class="transaction">
<div class="person">
<div class="person-name">👨 Paolo</div>
<div class="balance neutral">0 RIS</div>
<div class="balance-detail">(+10 -10) = 0</div>
</div>
<div class="arrow"></div>
<div class="person">
<div class="person-name">👨 Mario</div>
<div class="balance neutral">0 RIS</div>
<div class="balance-detail">(-10 +10) = 0</div>
</div>
</div>
</div>
</div>
<!-- Risultato finale -->
<q-banner
class="example-result"
rounded
>
<template v-slot:avatar>
<q-icon
name="check_circle"
color="positive"
size="lg"
/>
</template>
<div class="result-content">
<strong>Risultato finale:</strong> Tutti e tre tornano a
<strong>0 RIS</strong>, ma ciascuno ha ricevuto e offerto qualcosa
di valore! Il bilancio totale della comunità rimane sempre zero.
</div>
</q-banner>
</div>
</q-card-section>
</q-card>
</div>
<!-- Esempio 2: Scambio misto -->
<div class="example-section">
<h3 class="subsection-title">💶 Esempio 2: Scambio Misto (RIS + Euro)</h3>
<p class="example-intro">
Puoi combinare RIS con Euro nella stessa transazione per ridurre
gradualmente la dipendenza dalla moneta tradizionale:
</p>
<q-card
class="example-card mixed"
flat
bordered
>
<q-card-section>
<div class="mixed-example">
<div class="scenario">
<div class="scenario-title">
🥬 Scenario: Cassetta di verdure settimanale
</div>
<div class="scenario-desc">Valore totale: <strong>20</strong></div>
</div>
<div class="mixed-options">
<!-- Opzione 1: Solo Euro -->
<div class="option">
<div class="option-label"> Economia tradizionale</div>
<div class="option-detail">
<div class="payment-item">100% Euro = <strong>20</strong></div>
<div class="payment-item ris">
0% RIS = <strong>0 RIS</strong>
</div>
</div>
</div>
<div class="option-divider">VS</div>
<!-- Opzione 2: Misto -->
<div class="option highlighted">
<div class="option-label"> Scambio RISO</div>
<div class="option-detail">
<div class="payment-item">80% Euro = <strong>16</strong></div>
<div class="payment-item ris">
20% RIS = <strong>4 RIS</strong>
</div>
</div>
</div>
</div>
<q-banner
class="mixed-benefit"
rounded
>
<template v-slot:avatar>
<q-icon
name="trending_down"
color="positive"
size="lg"
/>
</template>
<div class="benefit-content">
<strong>Beneficio:</strong> Hai ridotto del 20% l'uso degli Euro,
sostenendo il produttore locale e rafforzando la comunità! Puoi
iniziare con percentuali basse (5-10%) e aumentare gradualmente man
mano che la fiducia nella comunità cresce.
</div>
</q-banner>
</div>
</q-card-section>
</q-card>
</div>
</div>
</div>
</section>
<!-- CTA Section -->
<section
id="registrazione"
class="cta-section"
>
<div class="contain_riso">
<div class="cta-content">
<h2 class="cta-title">Pronto a Fare Parte del Cambiamento?</h2>
<p class="cta-subtitle">
Unisciti alla comunità RISO e inizia a scambiare in modo sostenibile e
solidale
</p>
<div class="cta-buttons">
<q-btn
label="Registrati a RISO"
:size="$q.platform.is.mobile ? 'lg' : 'xl'"
color="primary"
rounded
unelevated
icon="person_add"
class="cta-main-button"
@click="goToApp"
/>
</div>
<!-- Info App -->
<div class="app-features">
<div class="feature-badge">
<q-icon
name="devices"
size="md"
/>
<div class="cta-feature-text">
<strong>Multi-piattaforma</strong>
<span>Chrome, Firefox, Safari, Android, iPhone, PC</span>
</div>
</div>
<div class="feature-badge">
<q-icon
name="download"
size="md"
/>
<div class="cta-feature-text">
<strong>Installazione facile</strong>
<span>Senza passare dallo store, direttamente da riso.app</span>
</div>
</div>
<div class="feature-badge">
<q-icon
name="volunteer_activism"
size="md"
/>
<div class="cta-feature-text">
<strong>100% Gratuita</strong>
<span>Open Source, nessuna pubblicità</span>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="riso-footer">
<div class="contain_riso">
<div class="footer-content">
<div class="footer-section">
<h4>Link Utili</h4>
<ul class="footer-links">
<li><a @click="scrollToAbout">Cos'è RISO</a></li>
<li>
<a
href="https://t.me/+pZ40VpmL1NhkZjE0"
target="_blank"
>
🟢 Canale pubblico - PROGETTO RISO
</a>
</li>
<li>
<a
href="https://t.me/c/1565097581/3"
target="_blank"
>
🔵 Gruppi territoriali - ELENCO
</a>
</li>
<li>
<a
href="https://riso.app/riso_gruppo"
target="_blank"
>
🟠 Gruppo nazionale - RISO Italia
</a>
</li>
<li>
<a
href="https://sicrenacc.info/"
target="_blank"
>
Si.cre.na.C.C - Sistema di Credito Naturale
</a>
</li>
</ul>
</div>
<div class="footer-section">
<h4>Menu</h4>
<ul>
<template
v-for="(myitemmenu, ind) in static_data.routes"
:key="ind"
>
<li v-if="myitemmenu.infooter && tools.visumenu(myitemmenu) && !myitemmenu.solotitle">
<router-link
:to="myitemmenu.path"
custom
v-slot="{ navigate }"
>
<span
class="footer_link"
@click="navigate"
@keypress.enter="navigate"
role="link"
>
<span v-if="myitemmenu.level_child > 0">&nbsp;&nbsp;&nbsp;</span>
{{ tools.getLabelByItem(myitemmenu) }}
</span>
</router-link>
</li>
</template>
</ul>
</div>
<div class="footer-section">
<h4>Contatti</h4>
<ul class="footer-links">
<li>
👴
<q-icon
name="telegram"
color="light-blue-7"
size="18px"
style="vertical-align: middle; margin-right: 4px"
/>
<a href="https://t.me/surya1977">Surya</a>
</li>
<li>
👩
<q-icon
name="telegram"
color="light-blue-7"
size="18px"
style="vertical-align: middle; margin-right: 4px"
/>
<a href="https://t.me/ElenaEspx">Elena</a>
</li>
</ul>
</div>
</div>
<q-separator class="footer-separator" />
<div class="footer-bottom">
<p>{{ currentYear }} RISO - Rete Italiana di Scambio Orizzontale</p>
<p class="footer-values">
Comunità · Fiducia · Scambi Solidali · Sostenibilità
</p>
</div>
</div>
</footer>
<!-- Floating Action Button per tornare su -->
<q-page-sticky
position="bottom-right"
:offset="[18, 18]"
>
<q-btn
v-show="showScrollTop"
fab
icon="keyboard_arrow_up"
color="primary"
@click="scrollToTop"
/>
</q-page-sticky>
</q-page>
</template>
<script lang="ts" src="./HomeRiso.ts"></script>
<style lang="scss" scoped>
@import './HomeRiso.scss';
</style>