features.vue
3.69 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
<script setup>
import sectionTitleIcon from '@images/pages/section-title-icon.png'
import SelectSolid from '@images/svg/3d-select-solid.svg'
import Edit from '@images/svg/edit.svg'
import GoogleDocs from '@images/svg/google-docs.svg'
import LaptopCharging from '@images/svg/laptop-charging.svg'
import Lifebelt from '@images/svg/lifebelt.svg'
import TransitionUp from '@images/svg/transition-up.svg'
const featuresData = [
{
title: 'Quality Code',
desc: 'Code structure that all developers will easily understand and fall in love with.',
img: LaptopCharging,
},
{
title: 'Continuous Updates',
desc: 'Free updates for the next 12 months, including new demos and features.',
img: TransitionUp,
},
{
title: 'Starter Kit',
desc: 'Start your project quickly without having to remove unnecessary features.',
img: Edit,
},
{
title: 'API Ready',
desc: 'Just change the endpoint and see your own data loaded within seconds.',
img: SelectSolid,
},
{
title: 'Well Documented',
desc: 'An easy-to-follow doc with lots of references and code examples.',
img: Lifebelt,
},
{
title: 'Excellent Support',
desc: 'An easy-to-follow doc with lots of references and code examples.',
img: GoogleDocs,
},
]
</script>
<template>
<VContainer id="features">
<div class="feature-cards">
<div class="headers d-flex justify-center flex-column align-center mb-6">
<div class="d-flex gap-x-3 mb-6">
<img
:src="sectionTitleIcon"
alt="section title icon"
height="24"
width="25"
>
<div
class="text-body-1 text-high-emphasis font-weight-medium"
style="letter-spacing: 0.15px !important;"
>
USEFUL FEATURES
</div>
</div>
<div class="mb-2 text-center">
<span
class="text-h4 d-inline-block font-weight-bold"
style="line-height: 2rem;"
>
Everything you need
</span> <span class="text-h5 d-inline-block">to start your next project</span>
</div>
<p
class="text-body-1 font-weight-medium text-center"
style="letter-spacing: 0.15px !important;"
>
Not just a set of tools, the package includes ready-to-deploy conceptual application.
</p>
</div>
<VRow>
<VCol
v-for="(data, index) in featuresData"
:key="index"
cols="12"
sm="6"
md="4"
>
<div class="feature d-flex flex-column gap-y-2 align-center justify-center mt-2">
<VAvatar
variant="outlined"
size="84"
color="primary"
class="mb-2"
>
<Component :is="data.img" />
</VAvatar>
<h5 class="text-h5">
{{ data.title }}
</h5>
<p
class="text-center text-medium-emphasis"
style="max-inline-size: 360px;"
>
{{ data.desc }}
</p>
</div>
</VCol>
</VRow>
</div>
</VContainer>
</template>
<style lang="scss" scoped>
.feature-cards {
margin-block-end: 4.25rem;
}
#features{
padding-block-start: 16rem;
}
@media (max-width: 960px ){
#features{
padding-block-start: 6rem;
}
}
@media (max-width: 600px ){
#features{
padding-block-start: 2rem;
}
}
</style>
<style lang="scss" scoped>
.feature{
.v-avatar{
&.v-avatar--variant-outlined{
border: 2px solid rgba(var(--v-theme-primary), 0.32);
&:hover{
background: rgba(var(--v-theme-primary), 0.16);
cursor: pointer;
}
}
}
}
</style>