Components Gallery, Book, Card, CImgText .... continue...

src/components/FormNewsletter/FormNewsletter.scss

@@ -0,0 +1,30 @@
+// Animations
+// slideFromBottom
+.slideFromBottom-enter, .slideFromBottom-leave-to {
+  transform: translate(0px, 10em);
+}
+
+.slideFromBottom-enter-to, .slideFromBottom-leave {
+  transform: translate(0px, 0px);
+}
+
+.slideFromBottom-enter-active {
+  transition: transform .2s ease-out;
+}
+
+.slideFromBottom-leave-active {
+  transition: transform .2s ease-in;
+}
+
+.news_title {
+  color: white;
+  font-size: 1rem;
+}
+
+.news_link {
+  color: gray;
+}
+
+.news_link:hover {
+  color: white;
+}

src/components/FormNewsletter/FormNewsletter.ts

@@ -0,0 +1,47 @@
+import Vue from 'vue'
+import Component from 'vue-class-component'
+
+import { tools } from '../../store/Modules/tools'
+import { toolsext } from '@src/store/Modules/toolsext'
+
+import Quasar, { Screen } from 'quasar'
+import { Prop } from 'vue-property-decorator'
+
+@Component({
+  name: 'FormNewsletter'
+})
+
+export default class FormNewsletter extends Vue {
+  public $t
+  public $q
+  public name: string = null
+  public email: string = null
+  public accept: boolean = false
+
+  public onSubmit() {
+    if (this.accept !== true) {
+      
+      this.$q.notify({
+        color: 'red-5',
+        textColor: 'white',
+        icon: 'fas fa-exclamation-triangle',
+        message: this.$t('newsletter.license')
+      })
+    }
+    else {
+      this.$q.notify({
+        color: 'green-4',
+        textColor: 'white',
+        icon: 'fas fa-check-circle',
+        message: this.$t('newsletter.submitted')
+      })
+    }
+  }
+
+  public onReset() {
+    this.name = null
+    this.email = null
+    this.accept = false
+  }
+
+}

src/components/FormNewsletter/FormNewsletter.vue

@@ -0,0 +1,50 @@
+<template>
+    <div>
+        <div class="q-pa-md q-gutter-sm text-white">
+            <p class="news_title">Desideri ricevere la nostra Newsletter?</p>
+            <q-form
+                    @submit="onSubmit"
+                    @reset="onReset"
+                    class="q-gutter-md"
+            >
+                <q-input
+                        filled
+                        dark standout
+                        v-model="name"
+                        :label="$t('newsletter.name') + `*`"
+                        :hint="$t('newsletter.namehint')"
+                        lazy-rules
+                        :rules="[ val => val && val.length > 0 || $t('newsletter.typesomething')]">
+
+                </q-input>
+
+                <q-input
+                        filled
+                        dark standout
+                        v-model="email"
+                        :label="$t('newsletter.email') + `*`"
+                        lazy-rules
+                        :rules="[ val => val && val.length > 6 || $t('newsletter.typesomething')]">
+
+                </q-input>
+
+                <a href="/policy"><span class="news_link">Privacy Policy</span></a>
+
+                <q-toggle dark v-model="accept" :label="$t('newsletter.acceptlicense')"/>
+
+                <div>
+                    <q-btn :label="$t('newsletter.submit')" type="submit" color="primary"/>
+                    <q-btn :label="$t('newsletter.reset')" type="reset" color="primary" flat class="q-ml-sm"/>
+                </div>
+            </q-form>
+        </div>
+    </div>
+</template>
+
+<script lang="ts" src="./FormNewsletter.ts">
+</script>
+
+<style lang="scss" scoped>
+    @import './FormNewsletter.scss';
+</style>
+

src/components/FormNewsletter/index.ts

@@ -0,0 +1 @@
+export {default as FormNewsletter} from './FormNewsletter.vue'