- aggiornata la grafica della Home di RISO

- Profilo Completition
- Email Verificata
- Invita un Amico (invio di email)

src/components/HomeRiso/HomeRiso.ts

@@ -0,0 +1,213 @@
+import { defineComponent, ref, onMounted, onUnmounted, computed } from 'vue';
+import { useRouter } from 'vue-router';
+
+import { tools } from '@tools';
+import { useGlobalStore } from 'app/src/store';
+
+// ==========================================
+// TYPES
+// ==========================================
+interface Value {
+  icon: string;
+  title: string;
+  text: string;
+}
+
+interface Step {
+  title: string;
+  text: string;
+}
+
+interface HeroImage {
+  src: string;
+  alt: string;
+}
+// ==========================================
+// COMPONENT
+// ==========================================
+export default defineComponent({
+  name: 'RisoHomepage',
+
+  setup() {
+    // ==========================================
+    // COMPOSABLES
+    // ==========================================
+    const router = useRouter();
+
+    const globalStore = useGlobalStore()
+
+    // ==========================================
+    // STATE
+    // ==========================================
+    const showScrollTop = ref(false);
+    const currentSlide = ref(0);
+
+    // Array immagini hero - PERSONALIZZABILE
+    const heroImages = ref<HeroImage[]>([
+      {
+        src: '/images/hero/cerchio_riso.jpg',
+        alt: 'Comunità RISO che si incontra'
+      },
+      {
+        src: '/images/hero/mercatino_riso.jpg',
+        alt: 'Utilizzo della App RISO'
+      },
+      {
+        src: '/images/hero/riso_home_app.png',
+        alt: 'App di RISO'
+      }
+    ]);
+
+    const values = ref<Value[]>([
+      {
+        icon: '🤝',
+        title: 'Comunità',
+        text: 'Creiamo legami autentici basati su sostegno reciproco e fiducia.',
+      },
+      {
+        icon: '💚',
+        title: 'Fiducia',
+        text: 'La base del nostro sistema di scambio e delle nostre relazioni.',
+      },
+      {
+        icon: '🔄',
+        title: 'Condivisione',
+        text: 'Scambiamo esperienze, beni e servizi in armonia con la natura.',
+      },
+      {
+        icon: '👂',
+        title: 'Ascolto',
+        text: 'Ogni voce è importante nelle decisioni della comunità.',
+      },
+      {
+        icon: '🌱',
+        title: 'Sostenibilità',
+        text: "Promuoviamo stili di vita sani e rispettosi dell'ambiente.",
+      },
+      {
+        icon: '🏠',
+        title: 'Autosufficienza',
+        text: "Costruiamo collettività libere e indipendenti dall'economia tradizionale.",
+      },
+    ]);
+
+    const steps = ref<Step[]>([
+      {
+        title: 'Unisciti alla Comunità',
+        text: "Registrati alla Piattaforma di RISO e trova la comunità territoriale della tua provincia su Telegram e richiedi l'accesso.",
+      },
+      {
+        title: 'Conosci i Membri',
+        text: 'Partecipa agli incontri locali e ai mercatini per conoscere gli altri membri della comunità. Se nella tua zona non sono ancora attivi, contattaci: ti aiuteremo a organizzare il primo incontro sul Progetto RISO.',
+      },
+      {
+        title: 'Inizia a Scambiare',
+        text: 'Crea annunci di beni e servizi, ospitalità, scambia usando il baratto, scambio lavoro, RIS, dono o altre modalità che ritieni utili.',
+      },
+      {
+        title: 'Usa i RIS',
+        text: 'Scambia in RIS, anche parzialmente: puoi combinare RIS con Euro, baratto o dono nella stessa transazione. Parti da 0 RIS: quando ricevi vai in positivo, quando offri vai in negativo. Più usi i RIS, meno dipendi dall\'economia tradizionale.'
+      },
+    ]);
+
+    // ==========================================
+    // COMPUTED
+    // ==========================================
+    const currentYear = computed(() => new Date().getFullYear());
+
+    // ==========================================
+    // METHODS
+    // ==========================================
+    const scrollToTop = (): void => {
+      window.scrollTo({
+        top: 0,
+        behavior: 'smooth',
+      });
+    };
+
+    const scrollToAbout = (): void => {
+      const element = document.getElementById('about');
+      if (element) {
+        element.scrollIntoView({ behavior: 'smooth' });
+      }
+    };
+
+    const scrollToRegistrazione = (): void => {
+      const element = document.getElementById('registrazione');
+      if (element) {
+        element.scrollIntoView({ behavior: 'smooth' });
+      }
+    };
+
+    const goToApp = (): void => {
+      router.push('/registrati');
+    };
+    const goToHome= (): void => {
+      router.push('/');
+    };
+
+    const handleScroll = (): void => {
+      showScrollTop.value = window.scrollY > 300;
+    };
+
+     // Slideshow automatico
+    let slideInterval: ReturnType<typeof setInterval> | null = null;
+
+    const startSlideshow = (): void => {
+      slideInterval = setInterval(() => {
+        currentSlide.value = (currentSlide.value + 1) % heroImages.value.length;
+      }, 5000); // Cambia immagine ogni 5 secondi
+    };
+
+    const stopSlideshow = (): void => {
+      if (slideInterval) {
+        clearInterval(slideInterval);
+        slideInterval = null;
+      }
+    };
+
+    const goToSlide = (index: number): void => {
+      currentSlide.value = index;
+      stopSlideshow();
+      startSlideshow(); // Riavvia il timer
+    };
+
+    // ==========================================
+    // LIFECYCLE
+    // ==========================================
+    onMounted(() => {
+      window.addEventListener('scroll', handleScroll);
+      startSlideshow();
+    });
+
+    onUnmounted(() => {
+      window.removeEventListener('scroll', handleScroll);
+      stopSlideshow();
+    });
+
+    // ==========================================
+    // RETURN
+    // ==========================================
+    return {
+      // State
+      showScrollTop,
+      values,
+      steps,
+      heroImages,
+      currentSlide,
+
+      // Computed
+      currentYear,
+
+      // Methods
+      scrollToTop,
+      scrollToAbout,
+      scrollToRegistrazione,
+      goToApp,
+      goToSlide,
+      tools,
+      globalStore,
+      goToHome,
+    };
+  },
+});