-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
1339 lines (1151 loc) · 64.6 KB
/
index.html
File metadata and controls
1339 lines (1151 loc) · 64.6 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
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
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<!-- Configurações básicas do documento e metadados -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Infotera para Consultores Internos - Litoral Verde</title>
<meta name="description"
content="Guia completo para utilização do sistema Infotravel na Litoral Verde. Treinamento oficial para consultores internos.">
<meta name="keywords" content="Infotravel, Litoral Verde, turismo, reservas, orçamentos, consultores">
<meta name="author" content="Litoral Verde">
<!-- Metadados para redes sociais (Open Graph) -->
<meta property="og:title" content="Infotera para Consultores Internos - Litoral Verde">
<meta property="og:description" content="Guia completo para utilização do sistema Infotravel na Litoral Verde">
<meta property="og:type" content="website">
<!-- Favicon e Fontes Externas -->
<link rel="icon" type="image/svg+xml" href="favicon.ico">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<!-- Bibliotecas de ícones e estilos específicos -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<link rel="stylesheet" href="image_zoom.css">
<style>
/* Definição de variáveis de cores e estilos globais */
:root {
--primary-accent: #A3E635;
--secondary-accent: #84CC16;
--accent-color: #A3E635;
--main-bg-color: #0F172A;
--light-bg-color: #1E293B;
--text-dark-color: #0F172A;
--text-light-color: #F8FAFC;
--white-color: #F8FAFC;
--light-gray-color: #334155;
--border-color: #334155;
--shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
--shadow-hover: 0 8px 25px rgba(0, 0, 0, 0.15);
--transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Reset básico de CSS */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
line-height: 1.6;
color: var(--text-light-color);
background: var(--main-bg-color);
min-height: 100vh;
}
/* Layout principal com Flexbox */
.container {
max-width: 1900px;
margin: 0 auto;
background: var(--light-bg-color);
min-height: 100vh;
box-shadow: var(--shadow);
display: flex;
}
/* Estilização da Barra Lateral (Sidebar) */
.sidebar {
width: 320px;
background: var(--main-bg-color);
color: var(--text-light-color);
padding: 30px 20px;
position: fixed;
height: 100vh;
overflow-y: auto;
z-index: 1000;
border-right: 3px solid var(--secondary-accent);
}
/* Customização da barra de rolagem da sidebar */
.sidebar::-webkit-scrollbar {
width: 6px;
}
.sidebar::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.1);
}
.sidebar::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.3);
border-radius: 3px;
}
/* Seção do Logo na Sidebar */
.logo-section {
text-align: center;
margin-bottom: 30px;
padding-bottom: 20px;
border-bottom: 2px solid rgba(255, 255, 255, 0.2);
}
.logo-section img {
max-width: 180px;
height: auto;
margin-bottom: 15px;
filter: brightness(1.1);
}
.sidebar h2 {
color: var(--accent-color);
margin-bottom: 25px;
font-size: 1.3em;
font-weight: 600;
display: flex;
align-items: center;
gap: 10px;
}
/* Caixa de busca na Sidebar */
.search-box {
margin-bottom: 25px;
position: relative;
}
.search-box input {
width: 100%;
padding: 12px 15px;
border: 2px solid rgba(255, 255, 255, 0.2);
border-radius: 25px;
font-size: 14px;
background: rgba(255, 255, 255, 0.1);
color: var(--text-light-color);
transition: var(--transition);
}
.search-box input::placeholder {
color: rgba(255, 255, 255, 0.7);
}
.search-box input:focus {
outline: none;
border-color: var(--accent-color);
background: rgba(255, 255, 255, 0.15);
}
/* Menu de Navegação */
.nav-menu {
list-style: none;
}
.nav-menu li {
margin-bottom: 8px;
}
.nav-menu a {
color: rgba(255, 255, 255, 0.9);
text-decoration: none;
display: flex;
align-items: center;
gap: 12px;
padding: 12px 15px;
border-radius: 12px;
transition: var(--transition);
font-size: 0.95em;
font-weight: 500;
}
.nav-menu a:hover {
background: rgba(255, 255, 255, 0.15);
transform: translateX(5px);
color: var(--text-light-color);
}
.nav-menu a.active {
background: var(--primary-accent);
color: var(--text-dark-color) !important;
}
/* Área de Conteúdo Principal */
.main-content {
margin-left: 320px;
padding: 40px;
flex: 1;
min-height: 100vh;
}
/* Cabeçalho do Conteúdo (Header) */
.header {
color: var(--text-light-color);
text-align: center;
margin-bottom: 50px;
padding: 40px;
background: var(--light-bg-color);
border-radius: 20px;
box-shadow: var(--shadow-hover);
position: relative;
overflow: hidden;
}
/* Efeito visual no fundo do header */
.header::before {
content: '';
position: absolute;
top: -50%;
right: -50%;
width: 100%;
height: 200%;
background: url('img/estrela.png') no-repeat center;
background-size: 500px;
opacity: 0.1;
animation: float 5s ease-in-out infinite;
}
@keyframes float {
0%, 100% { transform: translateY(0px) rotate(0deg); }
50% { transform: translateY(-20px) rotate(180deg); }
}
.header h1 {
font-size: 3em;
margin-bottom: 15px;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
font-weight: 700;
position: relative;
z-index: 2;
}
.header p {
font-size: 1.3em;
opacity: 0.95;
font-weight: 400;
position: relative;
z-index: 2;
}
/* Container de Estatísticas */
.stats-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
margin: 30px 0;
}
.stat-item {
background: rgba(255, 255, 255, 0.15);
padding: 20px;
border-radius: 15px;
text-align: center;
backdrop-filter: blur(10px);
}
.stat-number {
font-size: 2.5em;
font-weight: 700;
color: var(--accent-color);
display: block;
}
.stat-label {
font-size: 0.9em;
opacity: 0.9;
margin-top: 5px;
}
/* Estilização das Seções de Conteúdo */
.section {
color: var(--text-light-color);
margin-bottom: 50px;
background: var(--light-bg-color);
padding: 40px;
border-radius: 20px;
box-shadow: var(--shadow);
border-left: 6px solid var(--primary-accent);
transition: var(--transition);
position: relative;
}
.section:hover {
box-shadow: var(--shadow-hover);
transform: translateY(-2px);
}
.section h2 {
color: var(--primary-accent);
margin-bottom: 25px;
font-size: 2.2em;
font-weight: 700;
display: flex;
align-items: center;
gap: 15px;
}
.section h3 {
color: var(--text-light-color);
margin: 30px 0 20px 0;
font-size: 1.5em;
font-weight: 600;
border-bottom: 3px solid var(--light-bg-color);
padding-bottom: 10px;
display: flex;
align-items: center;
gap: 10px;
}
.section h4 {
color: var(--secondary-accent);
margin: 25px 0 15px 0;
font-size: 1.2em;
font-weight: 600;
}
.section p {
margin-bottom: 18px;
text-align: justify;
line-height: 1.7;
font-size: 1.05em;
}
/* Placeholder para imagens (caso não carreguem) */
.image-placeholder {
width: 100%;
height: 300px;
background: var(--light-bg-color);
border: 3px dashed var(--primary-accent);
border-radius: 15px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin: 25px 0;
transition: var(--transition);
position: relative;
overflow: hidden;
}
.image-placeholder:hover {
background: var(--light-bg-color);
transform: scale(1.02);
}
.image-placeholder i {
font-size: 3em;
color: var(--primary-accent);
margin-bottom: 15px;
}
.image-placeholder span {
color: var(--primary-accent);
font-weight: 600;
font-size: 1.1em;
text-align: center;
padding: 0 20px;
}
/* Estilo para imagens de conteúdo */
.content-image {
width: 100%;
border-radius: 15px;
margin: 25px 0;
box-shadow: var(--shadow);
cursor: pointer;
transition: var(--transition);
}
.content-image:hover {
transform: scale(1.01);
box-shadow: var(--shadow-hover);
}
/* Estilo para listas */
.list {
list-style: none;
margin: 20px 0;
}
.list li {
margin-bottom: 12px;
padding-left: 30px;
position: relative;
}
.list li::before {
content: '\f058';
font-family: 'Font Awesome 6 Free';
font-weight: 900;
position: absolute;
left: 0;
color: var(--primary-accent);
}
/* Estilo para notas e avisos */
.note {
background: rgba(163, 230, 53, 0.1);
border-left: 4px solid var(--primary-accent);
padding: 20px;
border-radius: 0 15px 15px 0;
margin: 25px 0;
display: flex;
gap: 15px;
align-items: flex-start;
}
.note i {
color: var(--primary-accent);
font-size: 1.2em;
margin-top: 3px;
}
/* Botão Voltar ao Topo */
.back-to-top {
position: fixed;
bottom: 30px;
right: 30px;
background: var(--primary-accent);
color: var(--text-dark-color);
width: 50px;
height: 50px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
box-shadow: var(--shadow);
opacity: 0;
visibility: hidden;
transition: var(--transition);
z-index: 1000;
}
.back-to-top.visible {
opacity: 1;
visibility: visible;
}
.back-to-top:hover {
transform: translateY(-5px);
background: var(--secondary-accent);
}
/* Rodapé */
.footer {
text-align: center;
padding: 40px;
margin-top: 50px;
border-top: 1px solid var(--border-color);
color: rgba(255, 255, 255, 0.6);
}
/* Responsividade para dispositivos móveis */
@media (max-width: 1024px) {
.sidebar {
width: 100%;
height: auto;
position: relative;
border-right: none;
border-bottom: 3px solid var(--secondary-accent);
}
.main-content {
margin-left: 0;
padding: 20px;
}
.container {
flex-direction: column;
}
.header h1 {
font-size: 2em;
}
.section {
padding: 25px;
}
.section h2 {
font-size: 1.8em;
}
.nav-menu {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.nav-menu a {
padding: 10px 12px;
}
}
/* Estilos do Modal de Zoom de Imagem */
.modal {
display: none;
position: fixed;
z-index: 2000;
padding-top: 50px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.9);
}
.modal-content {
margin: auto;
display: block;
max-width: 90%;
max-height: 90%;
}
.close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
</style>
</head>
<body>
<div class="container">
<!-- Barra Lateral de Navegação -->
<aside class="sidebar">
<div class="logo-section">
<img src="img/logo.png" alt="Logo Litoral Verde">
</div>
<h2><i class="fas fa-compass"></i> Infotera</h2>
<!-- Campo de Busca no Menu -->
<div class="search-box">
<input type="text" id="searchInput" placeholder="Buscar no guia...">
</div>
<!-- Links de Navegação Rápida -->
<ul class="nav-menu" id="navMenu">
<li><a href="#introducao" class="active"><i class="fas fa-rocket"></i> Introdução</a></li>
<li><a href="#primeiros-passos"><i class="fas fa-shoe-prints"></i> Primeiros Passos</a></li>
<li><a href="#cadastroClientes"><i class="fas fa-user-plus"></i> Cadastro de Cliente</a></li>
<li><a href="#orcamentos"><i class="fas fa-file-invoice-dollar"></i> Orçamentos</a></li>
<li><a href="#reservas"><i class="fas fa-calendar-check"></i> Reservas</a></li>
<li><a href="#Bloqueios"><i class="fas fa-clipboard-list"></i> Bloqueios</a></li>
<!-- <li><a href="#relatorios"><i class="fas fa-chart-line"></i> Relatórios</a></li>-->
<li><a href="#dicas-avancadas"><i class="fas fa-star"></i> Dicas Avançadas</a></li>
</ul>
</aside>
<!-- Conteúdo Principal -->
<main class="main-content">
<!-- Cabeçalho Principal -->
<header class="header">
<h1>Guia Infotravel para Consultores</h1>
<p>Seu manual completo para dominar o sistema Infotera na Litoral Verde</p>
<!-- Blocos de Estatísticas/Resumo -->
<div class="stats-container">
<div class="stat-item">
<span class="stat-number" id="total-topics">+7</span>
<span class="stat-label">Tópicos</span>
</div>
<div class="stat-item">
<span class="stat-number" id="total-images">+90</span>
<span class="stat-label">Imagens de Exemplo</span>
</div>
<div class="stat-item">
<span class="stat-number" id="last-updated">01/2026</span>
<span class="stat-label">Última Atualização</span>
</div>
</div>
</header>
<!-- Seção 1: Introdução -->
<section id="introducao" class="section">
<h2><i class="fas fa-rocket"></i> Introdução ao Infotravel</h2>
<p>Bem-vindo ao guia de utilização do sistema <strong>Infotravel</strong>, a principal ferramenta de trabalho
para os consultores da Litoral Verde. Este manual foi desenvolvido para ser seu companheiro diário,
oferecendo um passo a passo detalhado de todas as funcionalidades essenciais para o seu sucesso.</p>
<p>O Infotravel é um sistema robusto que permite a criação de orçamentos, efetivação de reservas, gestão de
clientes e muito mais. Dominar esta ferramenta é fundamental para otimizar seu tempo, aumentar sua
eficiência e, consequentemente, suas vendas.</p>
<div class="note">
<i class="fas fa-lightbulb"></i>
<p><strong>Dica de Ouro:</strong> Salve este guia nos seus favoritos! Ele será atualizado constantemente com
novas dicas e funcionalidades.</p>
</div>
<div class="note">
<i class=""></i>
<p><strong></strong>O mercado de turismo é uma indústria complexa e desafiadora.
Com tantas opções e serviços disponíveis, pode ser difícil para as agências de turismo gerenciarem suas operações e maximizarem seus lucros.
E é por isso que trabalhamos com o InfoTravel, uma plataforma de tecnologia projetada para simplificar a venda de serviços turísticos de maneira fácil e eficiente.
Com cotações rápidas e precisas, servas online de forma prática e a capacidade de gerenciar margens de lucro e comissões.
O InfoTravel ajuda as agências de turismo de todos os tamanhos a aumentarem suas vendas e a expandirem seus negócios.
Uma característica fundamental do InfoTravel é a capacidade de evoluir ao longo do tempo.
Novas funções e melhorias são lançadas regularmente como parte natural do ciclo de inovação do produto e garante que nossos clientes tenham acesso às ferramentas mais recentes e eficazes para gerenciarem suas operações.
Com o InfoTravel, nossos clientes têm a vantagem necessária para se destacar em um mercado de turismo cada vez mais competitivo.
Esta é a Universidade LV.
A plataforma de vídeos exclusiva da Litoral que vai ajudar você, nosso agente parceiro a utilizar os benefícios do InfoTravel a seu favor e, assim fazer com que você se destaque no mercado pela agilidade e praticidade.</p>
</div>
<img src="img/infotera1.png" alt="Interface principal do sistema Infotravel" class="content-image">
</section>
<!-- Seção 2: Primeiros Passos -->
<section id="primeiros-passos" class="section">
<h2><i class="fas fa-shoe-prints"></i> Primeiros Passos: Acesso e Configuração</h2>
<p>Para começar sua jornada no Infotravel, o primeiro passo é acessar o sistema com suas credenciais. Você
receberá um e-mail de boas-vindas com seu usuário, senha temporária e o link de acesso.</p>
<h3>1. Acessando o Sistema</h3>
<ul class="list">
<li>Abra o e-mail de boas-vindas enviado pelo nosso sistema.</li>
<li>Utilize o <strong>usuário</strong> e <strong>senha</strong> fornecidos.</li>
<li>Clique no link de acesso: <a href="https://reservas.litoralverde.com.br"
target="_blank" style="color: A3E635;">https://reservas.litoralverde.com.br</a></li>
</ul>
<h3>2. Trocando a Senha</h3>
<p>Por segurança, é <strong>obrigatório</strong> que você troque sua senha no primeiro acesso. Escolha uma senha
forte, que combine letras, números e símbolos.</p>
<ul class="list">
<li>Na tela de login, insira seu usuário e a senha temporária.</li>
<li>O sistema solicitará que você defina uma nova senha.</li>
<li>Digite sua senha atual (a temporária), o código de verificação (se houver) e sua nova senha segura.</li>
<li>Clique em "Salvar" ou "Confirmar".</li>
</ul>
<!-- Imagens de suporte para troca de senha -->
<img src="img/Novasenha.png" style="width: 400px; margin: 5% 0 0 25%;" alt="Tela de definição de nova senha no Infotravel" class="content-image">
<img src="img/contrato.png" style="width: 400px; margin: 5% 0 0 25%;" alt="Tela de definição de nova senha no Infotravel" class="content-image">
<img src="img/telainicial.png" alt="Tela inicial" class="content-image">
<div class="note">
<i class="fas fa-key"></i>
<p><strong>Segurança:</strong> Nunca compartilhe sua senha. Lembre-se de trocá-la periodicamente para manter
sua conta segura.</p>
</div>
</section>
<!-- Seção 3: Cadastro de Clientes -->
<section id="cadastroClientes" class="section">
<h2><i class="fa-solid fa-user"></i> Cadastro de Clientes</h2>
<p>Podemos realizar a pesquisa de clientes de quatro formas: por nome, e-mail, telefone ou documento (CPF)</p>
<img src="img/cadastro-cliente-menu.png" alt="Menu de acesso ao cadastro de clientes" class="content-image">
<div class="note">
<i class="fas fa-exclamation-circle"></i>
<p><strong>Atenção:</strong> Sempre confira os dados antes de salvar. Informações incorretas podem gerar problemas em reservas e documentos oficiais.</p>
</div>
<h3>1. Acessando o Cadastro de Clientes</h3>
<ul class="list">
<li>No menu principal do sistema, acesse <strong>Cadastros > Clientes > Adicionar</strong></li>
<li>Clique no botão <strong>“Novo Cliente”</strong>.</li>
<li>Será aberta a tela de cadastro com os campos obrigatórios.</li>
</ul>
<img src="img/novocad.png" alt="Menu de acesso ao cadastro de clientes" class="content-image">
<img src="img/cadastrando.png" alt="Menu de acesso ao cadastro de clientes" class="content-image">
<ul class="list">
<li>Após preencher todos os dados, clique em <strong>“Salvar”</strong>.</li>
<li>Se atente aos campos obrigatórios, que estão marcados com um asterisco ().</li>
<li>Clique em Salvar para concluir o cadastro.</li>
</ul>
<img src="img/finalizando-cad.png" alt="Menu de acesso ao cadastro de clientes" class="content-image">
<div class="note">
<i class="fas fa-lightbulb"></i>
<p><strong>Dica:</strong> ⚠️Antes de iniciar o atendimento, sempre verifique se o cliente já possui cadastro. Como temos diversos canais de atendimento, é possível que ele já tenha sido atendido por outro colega.</p>
</div>
</section>
<!-- Seção 4: Orçamentos -->
<section id="orcamentos" class="section">
<h2><i class="fas fa-file-invoice-dollar"></i> Orçamentos: Criando e Gerenciando</h2>
<p>A criação de orçamentos é uma das tarefas mais comuns no dia a dia do consultor. O Infotravel oferece uma
plataforma completa para montar, personalizar e enviar propostas aos seus clientes.</p>
<h3>1. Criando um Novo Orçamento</h3>
<ul class="list">
<li>No menu principal, navegue até <strong>Reservas</strong>.</li>
<img src="img/orça.png" alt="Interface principal do sistema Infotravel" class="content-image">
<li>Após isso, preencher com os dados do cliente cadastrados previamente, clicar em Iniciar.</li>
<img src="img/preen.dados.png" alt="Interface principal do sistema Infotravel" class="content-image">
<li>Por essa tela de reservar também podemos criar um novo cliente, assim ganhamos tempo no atendimento.</li>
<img src="img/preen.dados2.png" alt="Interface principal do sistema Infotravel" class="content-image">
<img src="img/inici.png" alt="Interface principal do sistema Infotravel" class="content-image">
<li>E já podemos iniciar o atendimento </li>
<img src="img/init.png" alt="Interface principal do sistema Infotravel" class="content-image">
<li>Na tela será possível cotar todos os serviços que trabalhamos </li>
<li>Na parte de Hospedagem é possível ver os valores de Hospedagem, Aéreo, Transfer | Passeios | Seguro, Circuitos, Pacotes, Monte seu Pacote e Veículos. </li>
<li>Ainda podemos modificar o número de quartos, adultos, crianças e Sênior.</li>
<li>Podemos também realizar a busca e inserir cupom “Quando houver”, a Nacionalidade ou buscar por conectores específicos.</li>
</ul>
<h3>Monte seu Pacote</h3>
<p>Na aba Monte seu Pacote, já temos o resultado da pesquisa exibindo as opções de hotel e aéreo para o destino selecionado.</p>
<p>Essa funcionalidade é a mais utilizada, pois reúne todas as demais funções em uma única aba, facilitando o processo de orçamento e reserva.</p>
<ul class="list">
<li>É possível pesquisar hospedagem + aéreo diretamente por essa aba.</li>
<img src="img/monteseu.png" alt="Interface principal do sistema Infotravel" class="content-image">
<li>Na Aba lateral temos a opção de filtros por Hotel, Preços, Estrelas, Políticas de Cancelamento, Regime alimentar e recomendações</li>
<img src="img/abalat.png" alt="Interface principal do sistema Infotravel" class="content-image">
<li>Alguns de nossos Resorts aparecem como RECOMENDADO, essa é uma configuração ajustado pelo setor responsável e o time de TI.</li>
<img src="img/recom..png" alt="Interface principal do sistema Infotravel" class="content-image">
</ul>
<div class="list">
<i class="fas fa-exclamation-circle"></i>
<p><strong>Atenção:</strong> Sempre confira os dados antes de salvar. Podemos buscar primeiro a hospedagem (e demais serviços, se desejado), selecionar os itens para adicionar ao carrinho e, em seguida, clicar em Reservar ou Enviar Orçamento.</p>
</div>
<h3> Também é possível pesquisar pelo Mapa:</h3>
<p>Como no exemplo a seguir, podemos visualizar os hotéis próximos a determinados pontos de referência.</p>
<div class="note">
<i class="fas fa-lightbulb"></i>
<p><strong>Exemplo:</strong> Ponto de referência: Salvador - BA. Cada marcação no mapa representa um hotel, e é possível identificar até mesmo pela nome da rua.</p>
</div>
<img src="img/map1.png" alt="Mapa de hotéis" class="content-image">
<img src="img/map2.png" alt="Detalhe do mapa" class="content-image">
<div class="note">
<i class="fas fa-exclamation-circle"></i>
<p><strong></strong> 📌Ao passar o mouse sobre a marcação, o nome do hotel aparecerá. Para selecioná-lo, basta clicar sobre a marcação e confirmar a escolha.</p>
</div>
<h3> 🧾 Para gerar um orçamento</h3>
<p>Basta clicar em “Adicionar novo orçamento”, e o item será enviado automaticamente para o carrinho.</p>
<p>Para adicionar mais itens no mesmo orçamento basta clicar no serviço escolhido clicar em adicionar e escolher o orçamento 1 (Essa opção vai enviar o valor total do pacote)</p>
<img src="img/novoorç..png" alt="Novo orçamento" class="content-image">
<p>🛒 Funcionalidades do Carrinho: Na parte inferior do carrinho, temos diversas opções disponíveis, como:</p>
<ul class="list">
<li>Limpar Carrinho</li>
<li>Ajuste dados do cliente</li>
<li>Enviar Orçamento PDF</li>
<li>Enviar Orçamento Web</li>
<li>Excluir item indesejado</li>
<li>Eliminar o orçamento</li>
</ul>
<h3>🌐 Sobre o Orçamento Web</h3>
<p>Ao clicar em “Enviar Orçamento Web”, somos direcionados para o WhatsApp Web, onde é possível:</p>
<ul class="list">
<li>Selecionar o cliente diretamente para envio;</li>
<li>Ou copiar o link gerado e enviá-lo manualmente ao cliente.</li>
</ul>
<img src="img/orçweb.png" alt="Orçamento Web" class="content-image">
<i class="fas fa-lightbulb"></i>
<p><strong>Dica importante:</strong> Ao enviar o Orçamento Web, não selecione o link arrastando o mouse, pois isso pode fazer com que parte do link não seja copiada corretamente.<br>
✅ Em vez disso, dê três cliques rápidos sobre o link para que ele seja selecionado por completo, garantindo que o cliente consiga acessá-lo sem problemas.</p>
<img src="img/linkorç.png" alt="Link do orçamento" class="content-image">
<h3>🌐 Por que utilizar o Orçamento Web?</h3>
<p>O Orçamento Web é a forma mais indicada para envio aos clientes, devido a alguns pontos específicos:</p>
<ul class="list">
<li> Permite incluir múltiplas opções de orçamento em um único documento, oferecendo ao cliente uma visão mais ampla e comparativa dos produtos;</li>
<li> Exibe os voos de forma visual, com um mapa ilustrando o trajeto de ida e volta;</li>
<li>Inclui nossos canais de atendimento, transmitindo mais credibilidade e confiança ao cliente.</li>
</ul>
<h3>Caso queira mostrar os valores dos serviços separados clicar em adicionar e clicar novamente em Novo Orçamento ou Extra</h3>
<img src="img/ext1.png" alt="Serviços extras" class="content-image">
<p>👀 Olha como fica no carrinho com os produtos separados:</p>
<img src="img/EXT2.png" alt="Carrinho separado" class="content-image">
<h3>📦 Agrupando Serviços no Orçamento</h3>
<p>Se adicionarmos todos os serviços em um único orçamento, o cliente receberá o valor total do pacote, com todos os itens detalhados no documento.</p>
<p>✅ Porém, caso prefira que o cliente visualize os valores separados por serviço, será necessário criar um orçamento individual para cada serviço.</p>
<h3>📤 Envio do Orçamento ao Cliente</h3>
<p>Para enviar o orçamento, clique em “Enviar Orçamento”. Ele será automaticamente enviado para o e-mail cadastrado no início do atendimento.</p>
<ul class="list">
<p>📱 Caso deseje enviar o orçamento via WhatsApp, você pode:</p>
<li>Enviar o documento para você mesmo e repassar ao cliente;</li>
<li>Ou acessar o PDF na aba Orçamentos e compartilhar.</li>
</ul>
<img src="img/env.orç.png" alt="Envio de orçamento" class="content-image">
<div class="note">
<i class="fas fa-lightbulb"></i>
<p><strong>Dica importante:</strong> O orçamento só será salvo no sistema se você clicar em “Enviar”</p>
</div>
<ul class="list">
<p>🧾 Acompanhamento na Aba “Orçamentos”</p>
<p>Na aba Orçamentos, é possível:</p>
<li>Consultar orçamentos enviados a partir de filtros.</li>
<li>Reservar</li>
<li>Reenviar orçamentos via e-mail </li>
<li>Enviar orçamento WEB</li>
<li>Editar </li>
<li>Visualizar PDF </li>
</ul>
<img src="img/porç2.png" alt="Lista de orçamentos" class="content-image">
<h3>✏️ Como fazer alterações no orçamento</h3>
<p>Para fazer as alterações, vá até o menu Orçamentos e abra a tela do ID que deseja atualizar.</p>
<h3>🗑️ Exclusão e Reativação de Itens no Orçamento</h3>
<p>A partir da tela de orçamento, é possível excluir insumos clicando no "X" ao lado do item que se deseja remover.</p>
<img src="img/porç3.png" alt="Exclusão de itens" class="content-image">
<i class="fas fa-lightbulb"></i>
<p><strong>Dica importante:</strong> Itens cancelados podem ser reativados posteriormente. Sempre que reativar um item, lembre-se de clicar em "Recalcular" para verificar se houve alteração nos valores.</p>
<h3>📋 Clonar Orçamento</h3>
<p>Também é possível clonar o orçamento, o que evita refazer todo o processo caso apenas o cliente seja diferente. Essa função agiliza o atendimento e garante maior praticidade.</p>
<img src="img/clonar.png" alt="Clonar orçamento" class="content-image">
<p>Nos casos de insumo manual será possível editar os valores net e venda e o valor atualiza automático no orçamento.</p>
<h3>🔄 Recalcular Insumos e Atualizar o Orçamento</h3>
<p>Durante a edição do orçamento, é possível recalcular os insumos para que o sistema valide novamente a disponibilidade e os preços atualizados.</p>
<p>✅ Após o recálculo, você poderá salvar as informações atualizadas e enviar o orçamento ao cliente.</p>
<ul class="list">
<p>Passo a passo para recalcular:</p>
<li>Clique em Ações > Recalcular</li>
<li>Selecione o(s) insumo(s) que deseja atualizar</li>
<li> Clique em Recalcular</li>
</ul>
<h4>A partir desse ponto, você poderá:</h4>
<ul class="list">
<li>Enviar o orçamento atualizado ao cliente</li>
<li>Realizar a reserva total</li>
<li>Ou reservar apenas alguns itens do orçamento</li>
</ul>
<img src="img/RECAL.png" alt="Recalcular" class="content-image">
<img src="img/rec2.png" alt="Recalcular detalhe" class="content-image">
<ul class="list">
<p><strong>🆔 Descritivo dos Campos – ID de Orçamento/Reserva</strong></p>
<li><strong>ID / Localizador:</strong> Número gerado automaticamente pelo sistema.</li>
<li><strong>Fornecedor:</strong> Exibe o fornecedor vinculado ao orçamento.</li>
<li><strong>Unidade:</strong> Refere-se à agência na qual o atendimento foi iniciado.</li>
<li><strong>Cliente:</strong> Nome da pessoa para quem o atendimento foi iniciado.</li>
<li><strong>Atendente:</strong> Consultores/vendedores responsáveis.</li>
<li><strong>Minhas Reservas:</strong> Lista todos os orçamentos criados pelo usuário logado.</li>
<li><strong>Datas:</strong> Filtro para seleção por período de datas.</li>
<li><strong>Inclusão:</strong> Data em que o orçamento foi criado.</li>
<li><strong>Utilização:</strong> Refere-se à vigência da viagem.</li>
<li><strong>Expiração:</strong> Prazo de validade do orçamento.</li>
<li><strong>Negócio:</strong> B2B, B2C, etc.</li>
<li><strong>Tipos:</strong> Refere-se aos tipos de produtos vinculados.</li>
<li><strong>Reservas:</strong> Para transformar um orçamento em reserva, repita o processo e clique em Reservar.</li>
</ul>
</section>
<!-- Seção 5: Reservas -->
<section id="reservas" class="section">
<h3><i class="fas fa-calendar-check"></i>🔍 Tela "Pesquisar" – Realizando Reservas</h3>
<p>Na tela Pesquisar, é possível realizar reservas de forma separada ou combinada. As opções incluem:</p>
<ul class="list">
<li>Hospedagem</li>
<li>Aéreos (de forma separada – recomendado)</li>
<li> Transfer | Passeios | Seguro</li>
<li> Circuitos</li>
<li> Pacotes</li>
<li> Ou Hospedagem + Aéreo simultaneamente na aba Monte seu Pacote (RECOMENADO)</li>
<li> Veículos</li>
</ul>
<h3>📝 Observação: </h3>
<p>Ao trocar o voo em um determinado hotel, o sistema aplica essa alteração a todos os hotéis que forem exibidos nos resultados da busca.</p>
<img src="img/reserva.png" alt="Tela de reserva" class="content-image">
<h3>🛎️ Finalizando a Reserva</h3>
<p>Ao clicar em Reservar, siga estas orientações:</p>
<ul class="list">
<li>Mantenha a opção "Reutilizar nomes" marcada.</li>
<li>Preencha o primeiro e o último nome do passageiro (PAX).</li>
<li>Se houver CHD (criança), sempre preencha a data de nascimento.</li>
</ul>
<img src="img/RES1.png" alt="Finalizar reserva 1" class="content-image">
<img src="img/RES2.png" alt="Finalizar reserva 2" class="content-image">
<h3>Nessa tela, é possível:</h3>
<p>Após finalizar a reserva, será aberta a tela do ID, exibindo os serviços recém-reservados.</p>
<ul class="list">
<li>Adicionar mais serviços ou produtos à reserva</li>
<li>Inserir pagamentos</li>
<li>Aplicar descontos, se necessário</li>
</ul>
<img src="img/garanta.png" alt="Garantia de reserva" class="content-image">
<div class="note">
<i class="fas fa-exclamation-circle"></i>
<p><strong>Atenção: </strong> Fique atento ao prazo de expiração do ID. Caso o prazo expire, o sistema poderá cancelar a reserva automaticamente.</p>
</div>
<h3>✅ Confirmação dos Serviços e Detalhamento de Valores</h3>
<p>Os serviços confirmados ficam organizados de acordo com suas respectivas abas: Hospedagem, Aéreo e Serviços.</p>
<p>Para visualizar os valores de cada serviço: Clique em “Detalhar” para consultar os valores Net (custo) e Venda (valor final).</p>
<p>Logo abaixo quando o cliente efetua o pagamento aparecerá as informações do Cliente e a forma de Pagamento </p>
<img src="img/busca2.png" alt="Busca de reserva" class="content-image">
<h3>Detalhamento Aba Financeiro</h3>
<img src="img/FINAN1.png" alt="Financeiro detalhe" class="content-image">
<h3> Detalhes do Insumo</h3>
<p>Além da opção "Detalhar", você também pode acessar informações específicas de cada serviço clicando em:</p>
<ul class="list">
<p>Detalhes do Insumo</p>
<li>Política: informações sobre cancelamento, multas e regras específicas.</li>
<li> Forma de pagamento</li>
<li> Políticas gerais do serviço selecionado</li>
</ul>
<img src="img/det.png" alt="Detalhes do insumo" class="content-image">
<h3>💰 Aba Financeiro</h3>
<p>Na aba Financeiro, você poderá visualizar todos os detalhes relacionados aos valores da reserva, incluindo: Valor NET, Taxa, Markup (MKP), Desconto e Valor de Venda.</p>
<img src="img/det. insumo.png" alt="Financeiro insumo" class="content-image">
<img src="img/insdel.png" alt="Financeiro detalhe" class="content-image">
<h3>⚠️ Reserva Inconsistente</h3>
<p>Caso o sistema gere o ID como "Inconsistente", é necessário acionar o setor de Operações (geral) ou Transportes (aéreo).</p>
<img src="img/inc.png" alt="Reserva inconsistente" class="content-image">
<h3>💸 Descontos</h3>
<p>Para incluir um desconto em um serviço reservado online:</p>
<ul class="list">
<li>Clique em “Adicionar”</li>
<li>Selecione “Editar Desconto Gerencial”</li>
<li>Insira o valor do desconto e o Motivo do Desconto (obrigatório)</li>
<li>Clique em “Aplicar”</li>
</ul>
<img src="img/aplicdesc.png" alt="Aplicar desconto" class="content-image">
<h3>💳Finalização com Pagamento e Envio do Voucher</h3>
<p>Após registrar o pagamento, o sistema fechará o caixa automaticamente e o voucher será enviado.</p>
<h3>🏦 Lançamento pelo Financeiro</h3>
<p>O ID só será fechado (status: Confirmado) após o financeiro registrar o pagamento e fechar o caixa.</p>
<h3>💸 Descontos em Serviços Reservados Manualmente</h3>
<p>Para aplicar desconto em um serviço inserido manualmente:</p>
<ul class="list">
<li>Clique no ícone Editar do respectivo serviço.</li>
<li>Informe o valor do desconto concedido.</li>
</ul>
<img src="img/aplicdesc.png" alt="Desconto manual" class="content-image">
<h3>📌 Importante: Mesmo que o orçamento contenha serviços online e manuais, os descontos nos serviços manuais só podem ser inseridos via edição direta.</h3>
<p>✅ A regra de diluição do desconto por serviço também se aplica aqui.</p>
<img src="img/edit1.png" alt="Edição de serviço" class="content-image">
<img src="img/cadman.png" alt="Cadastro manual" class="content-image">
<h3>⚠️ Descontos em Reservas em Período de Multa</h3>
<p>Não é possível adicionar descontos em serviços que ainda não foram confirmados (em período de multa). O desconto só poderá ser aplicado após o pagamento ser efetuado e o caixa fechado.</p>
<h3>🏦 Pagamento via Financeiro</h3>
<p> Se o pagamento for realizado por transferência bancária ou cartão fora do sistema, solicite ao financeiro o registro com urgência.</p>
<h3>💳 Pagamento via Link</h3>
<p>Se o pagamento for efetuado através de link de pagamento: Basta editar o valor que o cliente deverá pagar, aplicando o desconto.</p>
<h3>⏳ Reservas em Período de Multa</h3>
<p>Quando um serviço já está em período de multa, ele fica registrado como Solicitação. A reserva só será confirmada após o pagamento.</p>
<img src="img/solicitacao.png" alt="Reserva em solicitação" class="content-image">
<p>Para saber se um serviço está em período de multa, verifique na tela de Reservar.</p>
<img src="img/canc.png" alt="Período de multa" class="content-image">
<h3> ⚠️ Reservas em Solicitação (Período de Multa) – Pagamentos e Diferenças de Valores</h3>
<p>Quando uma reserva está em solicitação, ao adicionar pagamentos, o pagante será informado caso existam diferenças de preços.</p>
<h3> 🔄 Fluxo para Reservas em Solicitação Não Geradas</h3>
<ul class="list">
<li>O sistema abrirá uma janela modal informando sobre diferenças de valores.</li>
<li>O pagante será orientado a entrar em contato com a consultora.</li>
<li>A confirmação só ocorrerá após o setor financeiro gerar a confirmação manual após o pagamento.</li>
</ul>
<h3> 🔎 Acompanhar Reservas</h3>
<p>Na tela Buscar, você poderá controlar suas reservas filtrando por Minhas Reservas, ID, Nome do Cliente, Datas, etc.</p>
<img src="img/filt.png" alt="Filtros de busca" class="content-image">
<h3>⏰ Prazos de Expiração</h3>
<p>O prazo indica o tempo limite para que a reserva seja confirmada mediante o pagamento. Se necessário estender, solicite a prorrogação via Spark para o setor de Operações.</p>
<img src="img/exp.png" alt="Prazo de expiração" class="content-image">
<h3>✈️ Prazo do Aéreo</h3>
<p>Nas companhias Gol e Latam, a tarifa só é garantida para o dia atual. Se o pagamento não for no mesmo dia, será necessário atualizar 🔄 a tarifa no dia seguinte.</p>
<img src="img/praz.png" alt="Prazo aéreo" class="content-image">