-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
362 lines (339 loc) · 19.2 KB
/
index.html
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
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
---
layout: home
card: false
---
<div id="home">
<section id="home-section-1" class="hero">
<div class="mdc-layout-grid main-class">
<div class="mdc-layout-grid__inner">
<div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-12" id="main-card">
<div class="mdc-layout-grid__inner">
<div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-6">
<div class="hero__title">
<h1 class="mdc-typography--headline1">Seguro online<br /> para o seu carro</h1>
<h5 class="mdc-typography--headline5">Contrate o seguro auto online do seu jeito e pague só pelo o que escolher.</h5>
</div>
</div>
<div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-6">
<img src="{{ '/assets/img/hero-home.svg' | relative_url }}" alt="hero" />
</div>
</div>
<div class="hero__card mdc-card">
<div class="mdc-layout-grid">
<div class="mdc-layout-grid__inner">
<div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-1 mdc-layout-grid__cell--align-middle">
<img src="{{ '/assets/img/symbol-auto-insurance.svg' | relative_url }}" alt="Seguro Auto Youse" />
</div>
<div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-8 mdc-layout-grid__cell--align-middle">
<h6 class="mdc-typography--headline6">Seu seguro Youse Auto à partir de R$79,90 por mês. Contrate agora!</h6>
</div>
<div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-3 mdc-layout-grid__cell--align--middle">
<button class="mdc-button mdc-button--raised mdc-button--dense">Cotar agora</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="home-section-2" class="home-section home-section--white">
<div class="mdc-layout-grid main-class">
<div class="mdc-layout-grid__inner">
<div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-12">
<div class="home-section__header">
<h1 class="mdc-typography--headline1">Seguro Auto que vc monta do seu jeito e só paga pelo<br /> que escolhe</h1>
</div>
</div>
</div>
<div class="mdc-layout-grid__inner">
<div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-4">
<img src="{{ '/assets/img/Asset16@2x.png' | relative_url }}" alt="Preencha os dados
do seu carro" />
<h5 class="mdc-typography--headline5">Preencha os dados
<br /> do seu carro</h5>
<p class="mdc-typography--body1">A gente precisa saber qual veículo você quer segurar pra te passar o valor exato do seguro. É tranquilo preencher.<br /> Você acerta de 1ª</p>
</div>
<div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-4">
<img src="{{ '/assets/img/Asset324@2x.png' | relative_url }}" alt="Monte o seguro
do seu jeito" />
<h5 class="mdc-typography--headline5">Monte o seguro
<br /> do seu jeito</h5>
<p class="mdc-typography--body1">Você mesmo escolhe os serviços do seu seguro e as coberturas ideais pro seu carro. E o melhor: já fica sabendo na hora<br /> quanto vai pagar por cada uma ;)</p>
</div>
<div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-4">
<img src="{{ '/assets/img/Asset246@2x.png' | relative_url }}" alt="Faça a vistoria ou instale o Dispositivo de Segurança" />
<h5 class="mdc-typography--headline5">Faça a vistoria ou instale o<br /> Dispositivo de Segurança</h5>
<p class="mdc-typography--body1">Pro seguro começar a valer, você precisa instalar o Dispositivo de Segurança<br /> ou fazer a vistoria no carro e esperar a aprovação.</p>
</div>
</div>
</div>
</section>
<section id="home-section-3" class="home-section home-section--gray">
<div class="mdc-layout-grid main-class">
<div class="mdc-layout-grid__inner">
<div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-12">
<div class="home-section__header">
<h1 class="mdc-typography--headline1">Você é quem escolhe as coberturas e assistências</h1>
<h6 class="mdc-typography--subtitle1">Coberturas</h6>
<h5 class="mdc-typography--headline5">Veja quais são as nossas coberturas em caso de sinistro</h5>
</div>
</div>
<div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-2">
<div class="mdc-card">
<p class="mdc-typography--subtitle2">Acidentes com passageiros</p>
</div>
</div>
<div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-2">
<div class="mdc-card">
<p class="mdc-typography--subtitle2">Alagamento e
outros eventos naturais</p>
</div>
</div>
<div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-2">
<div class="mdc-card">
<p class="mdc-typography--subtitle2">Batida com perda total</p>
</div>
</div>
<div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-2">
<div class="mdc-card">
<p class="mdc-typography--subtitle2">Danos corporais a terceiros</p>
</div>
</div>
<div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-2">
<div class="mdc-card">
<p class="mdc-typography--subtitle2">Incêndio</p>
</div>
</div>
<div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-2">
<div class="mdc-card">
<p class="mdc-typography--subtitle2">Roubo</p>
</div>
</div>
<div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-12">
<div class="home-section__header">
<h6 class="mdc-typography--subtitle1">Assistências</h6>
<h5 class="mdc-typography--headline5">Você pode usar as assistências à vontade, pois não afeta a franquia</h5>
</div>
</div>
<div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-4">
<ul class="mdc-list mdc-list--two-line" aria-orientation="vertical">
<li class="mdc-list-divider" role="separator"></li>
<li class="mdc-list-item">
<span class="mdc-list-item__graphic material-icons" aria-hidden="true">directions_car</span>
<span class="mdc-list-item__text">
<span class="mdc-list-item__primary-text mdc-typography--body1">Auto básico</span>
<span class="mdc-list-item__secondary-text mdc-typography--body2">Saiba mais</span>
</span>
</li>
<li class="mdc-list-divider" role="separator"></li>
<li class="mdc-list-item">
<span class="mdc-list-item__graphic material-icons" aria-hidden="true">directions_car</span>
<span class="mdc-list-item__text">
<span class="mdc-list-item__primary-text mdc-typography--body1">Carro reserva</span>
<span class="mdc-list-item__secondary-text mdc-typography--body2">Saiba mais</span>
</span>
</li>
<li class="mdc-list-divider" role="separator"></li>
<li class="mdc-list-item">
<span class="mdc-list-item__graphic material-icons" aria-hidden="true">directions_car</span>
<span class="mdc-list-item__text">
<span class="mdc-list-item__primary-text mdc-typography--body1">Chaveiro</span>
<span class="mdc-list-item__secondary-text mdc-typography--body2">Saiba mais</span>
</span>
</li>
<li class="mdc-list-divider" role="separator"></li>
<li class="mdc-list-item">
<span class="mdc-list-item__graphic material-icons" aria-hidden="true">directions_car</span>
<span class="mdc-list-item__text">
<span class="mdc-list-item__primary-text mdc-typography--body1">Reparos simples</span>
<span class="mdc-list-item__secondary-text mdc-typography--body2">Saiba mais</span>
</span>
</li>
<li class="mdc-list-divider" role="separator"></li>
<li class="mdc-list-item">
<span class="mdc-list-item__graphic material-icons" aria-hidden="true">directions_car</span>
<span class="mdc-list-item__text">
<span class="mdc-list-item__primary-text mdc-typography--body1">Motorista Youse</span>
<span class="mdc-list-item__secondary-text mdc-typography--body2">Saiba mais</span>
</span>
</li>
<li class="mdc-list-divider" role="separator"></li>
</ul>
</div>
<div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-4">
<ul class="mdc-list mdc-list--two-line" aria-orientation="vertical">
<li class="mdc-list-divider" role="separator"></li>
<li class="mdc-list-item">
<span class="mdc-list-item__graphic material-icons" aria-hidden="true">directions_car</span>
<span class="mdc-list-item__text">
<span class="mdc-list-item__primary-text mdc-typography--body1">Faróis, lanternas e retrovisores</span>
<span class="mdc-list-item__secondary-text mdc-typography--body2">Saiba mais</span>
</span>
</li>
<li class="mdc-list-divider" role="separator"></li>
<li class="mdc-list-item">
<span class="mdc-list-item__graphic material-icons" aria-hidden="true">directions_car</span>
<span class="mdc-list-item__text">
<span class="mdc-list-item__primary-text mdc-typography--body1">Reparos completos</span>
<span class="mdc-list-item__secondary-text mdc-typography--body2">Saiba mais</span>
</span>
</li>
<li class="mdc-list-divider" role="separator"></li>
<li class="mdc-list-item">
<span class="mdc-list-item__graphic material-icons" aria-hidden="true">directions_car</span>
<span class="mdc-list-item__text">
<span class="mdc-list-item__primary-text mdc-typography--body1">Serviço Leva e Traz</span>
<span class="mdc-list-item__secondary-text mdc-typography--body2">Saiba mais</span>
</span>
</li>
<li class="mdc-list-divider" role="separator"></li>
<li class="mdc-list-item">
<span class="mdc-list-item__graphic material-icons" aria-hidden="true">directions_car</span>
<span class="mdc-list-item__text">
<span class="mdc-list-item__primary-text mdc-typography--body1">Vidros</span>
<span class="mdc-list-item__secondary-text mdc-typography--body2">Saiba mais</span>
</span>
</li>
<li class="mdc-list-divider" role="separator"></li>
</ul>
</div>
<div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-4">
<ul class="mdc-list mdc-list--two-line" aria-orientation="vertical">
<li class="mdc-list-divider" role="separator"></li>
<li class="mdc-list-item">
<span class="mdc-list-item__graphic material-icons" aria-hidden="true">directions_car</span>
<span class="mdc-list-item__text">
<span class="mdc-list-item__primary-text mdc-typography--body1">Histórico de veículos</span>
<span class="mdc-list-item__secondary-text mdc-typography--body2">Saiba mais</span>
</span>
</li>
<li class="mdc-list-divider" role="separator"></li>
<li class="mdc-list-item">
<span class="mdc-list-item__graphic material-icons" aria-hidden="true">directions_car</span>
<span class="mdc-list-item__text">
<span class="mdc-list-item__primary-text mdc-typography--body1">Limpeza</span>
<span class="mdc-list-item__secondary-text mdc-typography--body2">Saiba mais</span>
</span>
</li>
<li class="mdc-list-divider" role="separator"></li>
<li class="mdc-list-item">
<span class="mdc-list-item__graphic material-icons" aria-hidden="true">directions_car</span>
<span class="mdc-list-item__text">
<span class="mdc-list-item__primary-text mdc-typography--body1">Montagem de bike</span>
<span class="mdc-list-item__secondary-text mdc-typography--body2">Saiba mais</span>
</span>
</li>
<li class="mdc-list-divider" role="separator"></li>
<li class="mdc-list-item">
<span class="mdc-list-item__graphic material-icons" aria-hidden="true">directions_car</span>
<span class="mdc-list-item__text">
<span class="mdc-list-item__primary-text mdc-typography--body1">Restituição de IPVA</span>
<span class="mdc-list-item__secondary-text mdc-typography--body2">Saiba mais</span>
</span>
</li>
<li class="mdc-list-divider" role="separator"></li>
</ul>
</div>
</div>
</div>
</section>
<section id="home-section-4" class="home-section home-section--purple">
<div class="mdc-layout-grid main-class">
<div class="mdc-layout-grid__inner">
<div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-12">
<div class="home-section__header">
<h1 class="mdc-typography--headline1">Porque escolher a Youse?</h1>
</div>
</div>
<div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-4">
<div class="mdc-card mdc-card--on-primary">
<h3 class="mdc-typography--headline3">140.000</h3>
<p class="mdc-typography--subtitle1">clientes do Seguro Auto</p>
</div>
</div>
<div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-4">
<div class="mdc-card mdc-card--on-primary">
<h3 class="mdc-typography--headline3">19.540</h3>
<p class="mdc-typography--subtitle1">km rodados com o guincho</p>
</div>
</div>
<div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-4">
<div class="mdc-card mdc-card--on-primary">
<p class="mdc-typography--subtitle1">conheça mais sobre a gente</p>
</div>
</div>
</div>
<div class="mdc-layout-grid__inner">
<div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-4">
<img src="{{ '/assets/img/Asset348@2x.png' | relative_url }}" alt="Preencha os dados
do seu carro" />
<h5 class="mdc-typography--headline5">O pagamento é mensal e não tem multa por cancelamento</h5>
</div>
<div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-4">
<img src="{{ '/assets/img/Asset43@2x.png' | relative_url }}" alt="Monte o seguro
do seu jeito" />
<h5 class="mdc-typography--headline5">Cobertura nacional
e assistência 24 horas</h5>
</div>
<div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-4">
<img src="{{ '/assets/img/Asset242@2x.png' | relative_url }}" alt="Faça a vistoria ou instale o Dispositivo de Segurança" />
<h5 class="mdc-typography--headline5">Faz a vistoria em até 7 dias depois do pagamento</h5>
</div>
</div>
</div>
</section>
<section id="home-section-5" class="home-section home-section--gray">
<div class="mdc-layout-grid main-class">
<div class="mdc-layout-grid__inner">
<div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-12">
<div class="home-section__header">
<h1 class="mdc-typography--headline1">Faça sua cotação</h1>
<h6 class="mdc-typography--subtitle1">Escolha o que condiz com suas necessidades e personalize como preferir</h6>
</div>
</div>
<div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-4 mdc-layout-grid__cell--align-top">
<div class="mdc-card">
<img class="mdc-card__img" src="{{ '/assets/img/Asset231@2x.png' | relative_url }}" alt="Preencha os dados
do seu carro" />
<h5 class="mdc-typography--headline5">Auto básico</h5>
<div class="mdc-card__action-icons">
<button class="mdc-button mdc-card__action mdc-card__action--button" title="Começar por esse">Começar por esse</button>
</div>
</div>
</div>
<div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-4 mdc-layout-grid__cell--align-top">
<div class="mdc-card">
<img class="mdc-card__img" src="{{ '/assets/img/Asset252@2x.png' | relative_url }}" alt="Monte o seguro
do seu jeito" />
<h5 class="mdc-typography--headline5">Auto completo</h5>
<div class="mdc-card__action-icons">
<button class="mdc-button mdc-card__action mdc-card__action--button" title="Começar por esse">Começar por esse</button>
</div>
</div>
</div>
<div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-4 mdc-layout-grid__cell--align-top">
<div class="mdc-card">
<img class="mdc-card__img" src="{{ '/assets/img/Asset252@2x.png' | relative_url }}" alt="Faça a vistoria ou instale o Dispositivo de Segurança" />
<h5 class="mdc-typography--headline5">Auto completo+</h5>
<div class="mdc-card__action-icons">
<button class="mdc-button mdc-card__action mdc-card__action--button" title="Começar por esse">Começar por esse</button>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="home-section-6" class="home-section home-section--gray">
<div class="mdc-layout-grid main-class">
<div class="mdc-layout-grid__inner">
<div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-4 mdc-layout-grid__cell--align-top">
<img src="{{ '/assets/img/Asset324@4x.png' | relative_url }}" alt="Monte o seguro
do seu jeito" />
</div>
<div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-8 mdc-layout-grid__cell--align-top">
<div class="mdc-layout-grid__inner">
<div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-12 mdc-layout-grid__cell--align-top">
<h4 class="mdc-typography--headline4">Com o Youse App, você tem<br /> seu seguro na palma da mão,<br /> quando e onde quiser.</h4>
</div>
<div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-3 mdc-layout-grid__cell--align-top mdc-layout-grid--align-left">
<img src="{{ '/assets/img/btn-download-in-google-play.png' | relative_url }}" alt="Baixe o aplicativo no Google Play" />
</div>
<div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-9 mdc-layout-grid__cell--align-top mdc-layout-grid--align-left">
<img src="{{ '/assets/img/btn-download-in-app-store.png' | relative_url }}" alt="Baixe o aplicativo na App Store" />
</div>
</div>
</div>
</div>
</div>
</section>
</div>