- aggiunto FeaturesSection all'editor HTML

src/components/FeaturesSection/FeaturesSection.ts

@@ -0,0 +1,43 @@
+import { defineComponent } from 'vue';
+
+// Importiamo icone da Quasar - esempio con quelle disponibili tramite Quasar Extras
+// Assicurati di averle abilitate in quasar.config.js
+import { IFeatSection } from 'app/src/model';
+import { tools } from 'app/src/store/Modules/tools';
+import { useQuasar } from 'quasar';
+
+export default defineComponent({
+  name: 'FeaturesSection',
+  props: {
+    title: {
+      type: String,
+      required: true,
+    },
+    isDark: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    subtitle: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    description: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    features: {
+      type: Array as () => IFeatSection[],
+      required: true,
+    },
+  },
+
+  setup(props) {
+
+    return {
+      tools,
+    };
+  },
+});

src/components/FeaturesSection/FeaturesSection.vue

@@ -0,0 +1,60 @@
+<template>
+  <div :class="{'bg-dark': isDark}" class="q-py-xl">
+    <!-- Container principale -->
+    <div class="q-px-md sm:q-px-lg md:q-px-xl">
+      <div class="row justify-center">
+        <div class="col-12 col-md-10 col-lg-8 text-center q-pb-lg">
+          <div class="text-indigo-4 text-body2 text-weight-bold">{{ description }}</div>
+          <div :class="{'text-white': isDark}" class="text-h4 text-weight-bold q-mt-sm q-mb-md">
+            {{ title }}
+          </div>
+          <div :class="{'text-grey-4': isDark, 'text-grey-2': isDark}" class="text-subtitle1">
+            {{ subtitle }}
+          </div>
+        </div>
+      </div>
+
+      <!-- Griglia delle features -->
+      <div class="row justify-center q-mt-lg">
+        <div class="col-12 col-lg-10">
+          <div class="row q-col-gutter-xl">
+            <div
+              v-for="feature in features"
+              :key="feature.name"
+              class="col-12 col-sm-6"
+            >
+              <q-card flat class="bg-transparent">
+                <q-card-section horizontal>
+                  <!-- Icona circolare -->
+                  <div class="self-start q-mt-xs q-mr-md">
+                    <q-avatar v-if="feature.icon" size="40px" color="indigo-5" text-color="white" rounded>
+                      <q-icon :name="feature.icon" />
+                    </q-avatar>
+                  </div>
+
+                  <div>
+                    <q-card-section class="p-none">
+                      <div :class="{'text-white': isDark}" class="text-subtitle2 text-weight-medium">
+                        {{ feature.name }}
+                      </div>
+                    </q-card-section>
+                    <q-card-section class="q-pt-none">
+                      <div :class="{'text-grey-4': isDark, 'text-grey-2': isDark}" class="text-body2">
+                        {{ feature.description }}
+                      </div>
+                    </q-card-section>
+                  </div>
+                </q-card-section>
+              </q-card>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts" src="./FeaturesSection.ts"></script>
+
+<style lang="scss" scoped>
+@import './FeaturesSection.scss';
+</style>

src/components/FeaturesSection/index.ts

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