61 lines
2.2 KiB
Vue
Executable File
61 lines
2.2 KiB
Vue
Executable File
<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>
|