- aggiunto FeaturesSection all'editor HTML

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>