845 lines
28 KiB
Vue
845 lines
28 KiB
Vue
|
<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>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>
|