-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
223 lines (223 loc) · 10.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
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="./src/assets/css/output.css" rel="stylesheet">
<title>Veterinário</title>
</head>
<body class="">
<header id="menuSite" class="w-full m-0 p-0 overflow-hidden h-fit">
<!-- menu é carrefado aqui -->
</header>
<main class="w-full m-0 p-0 overflow-hidden pt-20">
<section id="banner" class="sessao">
<div class="conteudo">
<div class="my-4 lg:w-5/6 xl:w-4/6">
<h5 class="mb-4 text-orange-500">O melhor cuida para o seu pet</h5>
<h1 class="text-gray-800">Saúde, bem-estar e tudo de melhor qualidade para o seu melhor amigo</h1>
<p>Serviços veterinários de ponta e cuidados especiais para pets de todas as idades e tamanhos.</p>
<div class="flex justify-between w-full my-8 lg:w-4/6">
<button class="btn primario w-[49%]" type="submit"><a href="./src/pages/planos/">Escolha um Plano</a></button>
<button class="btn whatsapp w-[49%]" type="submit"><iconify-icon icon="ic:outline-whatsapp" class="text-lg mr-2"></iconify-icon>Fale Conosco</button>
</div>
</div>
</div>
</section>
<section id="sobre" class="sessao bg-azul-100">
<div class="conteudo mb-16 lg:grid-cols-2 xl:grid-cols-5">
<div class="lg:flex lg:flex-col lg:my-auto xl:col-span-3">
<h2 class="w-5/6">Tudo o que você precisa para a saúde e felicidade do seu pet</h2>
<p>Somos a principal referência em cuidados veterinários, proporcionando serviços de qualidade excepcionais que garantam a saúde e o bem-estar dos pets, sempre com ética, empatia e um compromisso genuíno com cada animal e seu tutor.</p>
</div>
<div class="w-full mt-8 lg:m-0 xl:col-span-2">
<picture class="flex w-full m-auto aspect-square rounded-full">
<img id="caes-transp" class="w-full" src="/src/assets/img/caes-fundo-transparente.png" alt="" />
</picture>
</div>
</div>
<div class="conteudo">
<h2 class="">Nossos Serviços</h2>
<div id="servicos-slider" class="px-8 pb-12 pt-0 flex w-[130%] -ml-[15%] overflow-x-scroll scroll-oculto lg:w-[110%] lg:-ml-[5%] ">
<div class="box-servico">
<span class="coluna mb-8">
<h3 class="py-4 px-8 bg-orange-500">Pronto Socorro</h3>
<p class="py-0 px-8">Disponibilizamos atendimento de emergência 24 horas para animais que necessitam de cuidados imediatos.</p>
</span>
<span class="p-8">
<button class="btn primario" type="submit">Fale Conosco</button>
</span>
</div>
<div class="box-servico">
<span class="coluna mb-8">
<h3 class="py-4 px-8 bg-orange-500">Consultas</h3>
<p class="py-0 px-8">Oferecemos consultas veterinárias completas para garantir a saúde do seu animal de estimação.</p>
</span>
<span class="p-8">
<button class="btn primario" type="submit">Agende agora</button>
</span>
</div>
<div class="box-servico">
<span class="coluna mb-8">
<h3 class="py-4 px-8 bg-orange-500">Cirurgias</h3>
<p class="py-0 px-8">Nossas clínicas contam com centros cirúrgicos equipados e equipes de profissionais qualificados.</p>
</span>
<span class="p-8">
<button class="btn primario" type="submit">Saiba mais</button>
</span>
</div>
<div class="box-servico">
<span class="coluna mb-8">
<h3 class="py-4 px-8 bg-orange-500">Banho e Tosa</h3>
<p class="py-0 px-8">Proporcionamos serviços de banho e tosa com produtos de alta qualidade e cuidados especiais para cada tipo de pelagem.</p>
</span>
<span class="p-8">
<button class="btn primario" type="submit">Solicitar Orçamento</button>
</span>
</div>
<div class="box-servico">
<span class="coluna mb-8">
<h3 class="py-4 px-8 bg-orange-500">Muito mais</h3>
<p class="py-0 px-8">Confira todos os nossos serviços e planos</p>
</span>
<span class="p-8">
<button class="btn primario" type="submit"><a href="./src/pages/servicos/">Ver todos</a></button>
</span>
</div>
</div>
</div>
</section>
<section id="encontre-unidade" class="sessao">
<div class="conteudo lg:w-3/6 2xl:w-2/6">
<div class="text-center ">
<h2 class="">Encontre a unidade <strong class="text-orange-500">mais próxima de você!</strong></h2>
</div>
<div class="shadow-2xl p-8 rounded-2xl aspect-square bg-cover lg:aspect-video lg:bg-center" style="background-image: url('./src/assets/img/consultorio-2.jpg')">
<div class="flex items-end h-full">
<span class="items-center w-full justify-between bg-white p-2 rounded-xl">
<input class="p-2 outline-0 w-full" type="search" name="unidades" id="unidades" value="" placeholder="Encontre uma unidade" />
<label for="unidades" class="p-2">
<iconify-icon icon="lucide:search" class="flex"></iconify-icon>
</label>
</span>
</div>
</div>
</div>
</section>
<section class="sessao bg-gray-100">
<div class="conteudo 2xl:w-3/6">
<h2 class="">Nossos planos</h2>
</div>
<div class="conteudo 2xl:w-3/6">
<div class="bg-white w-full flex overflow-hidden rounded-2xl">
<div class="w-2/5 border-r-2 border-gray-100 xl:w-1/5 2xl:w-2/6">
<table class="w-full" border="0">
<thead class="">
<tr>
<th class="tab-titulo">Planos</th>
</tr>
</thead>
<tbody class="">
<tr><td class="tab-conteudo">Premium Gold</td></tr>
<tr><td class="tab-conteudo">Premium Silver</td></tr>
<tr><td class="tab-conteudo">Standart II</td></tr>
<tr><td class="tab-conteudo">Standart I</td></tr>
<tr><td class="tab-conteudo">Basic</td></tr>
<tr><td class="tab-conteudo">Free</td></tr>
</tbody>
</table>
</div>
<div class="w-3/5 overflow-x-scroll scroll-oculto xl:w-4/5 2xl:w-4/6">
<table class="w-full" border="0">
<thead class="">
<tr>
<th class="tab-titulo">Consulta</th>
<th class="tab-titulo">Pronto Socorro</th>
<th class="tab-titulo">Cirurgia</th>
<th class="tab-titulo">Vacinação</th>
<th class="tab-titulo">Banho e Tosa</th>
<th class="tab-titulo">Internação</th>
<th class="tab-titulo">Microchipagem</th>
<th class="tab-titulo">Eutanásia</th>
</tr>
</thead>
<tbody id="corpo-tabela">
<!-- -->
</tbody>
</table>
</div>
</div>
<a class="mt-8" href="./src/pages/planos/">Confira planos e valores</a>
</div>
<picture class="flex -mb-16 mt-16 lg:w-4/6 lg:mx-auto xl:w-3/6">
<img class="" src="./src/assets/img/gatos-fundo-transparente.png" alt="" />
</picture>
</section>
<section class="sessao">
<div class="conteudo lg:grid-cols-2 lg:gap-4">
<h2 class="lg:col-span-2">Time de Especialistas</h2>
<span class="grid grid-cols-3 gap-4 shadow-lg p-6 rounded-2xl mb-8 bg-gray-100 lg:m-0">
<picture class="flex rounded-full bg-gray-500 w-full aspect-square overflow-hidden border-2 border-orange-500">
<img class="object-cover" src="./src/assets/img/vet-01.jpg" alt="" />
</picture>
<div class="col-span-2">
<h3 class="text-orange-500">Marilda Gomez</h3>
<p class="text-xs font-semibold">CRMV: SP 12 345</p>
<p class="text-xs">Veterinário</p>
</div>
</span>
<span class="grid grid-cols-3 gap-4 shadow-lg p-6 rounded-2xl mb-8 bg-gray-100 lg:m-0">
<picture class="flex rounded-full bg-gray-500 w-full aspect-square overflow-hidden border-2 border-orange-500">
<img class="object-cover" src="./src/assets/img/vet-02.jpg" alt="" />
</picture>
<div class="col-span-2">
<h3 class="text-orange-500">Alesson Santana</h3>
<p class="text-xs font-semibold">CRMV: SP 12 345</p>
<p class="text-xs">Veterinário</p>
</div>
</span>
<span class="grid grid-cols-3 gap-4 shadow-lg p-6 rounded-2xl mb-8 bg-gray-100 lg:m-0">
<picture class="flex rounded-full bg-gray-500 w-full aspect-square overflow-hidden border-2 border-orange-500">
<img class="object-cover" src="./src/assets/img/vet-03.jpg" alt="" />
</picture>
<div class="col-span-2">
<h3 class="text-orange-500">Nicoly Dias</h3>
<p class="text-xs font-semibold">CRMV: SP 12 345</p>
<p class="text-xs">Veterinário</p>
</div>
</span>
<span class="grid grid-cols-3 gap-4 shadow-lg p-6 rounded-2xl bg-gray-100 lg:m-0">
<picture class="flex rounded-full bg-gray-500 w-full aspect-square overflow-hidden border-2 border-orange-500">
<img class="object-cover" src="./src/assets/img/vet-04.jpg" alt="" />
</picture>
<div class="col-span-2">
<h3 class="text-orange-500">Lorena Bueno</h3>
<p class="text-xs font-semibold">CRMV: SP 12 345</p>
<p class="text-xs">Veterinário</p>
</div>
</span>
</div>
</section>
<section class="sessao bg-orange-500">
<div class="conteudo">
<div class="text-orange-950 lg:w-4/6 xl:w-3/6">
<h2 class="">Duvidas?</h2>
<p class="mb-8">Deixe seus dados que entraremos em contato para te dar uma explicação mais detalhada.</p>
<form class="grid gap-4" action="" method="get" accept-charset="utf-8">
<input class="rounded-md py-2 px-4" type="text" name="" id="" value="" placeholder="Nome Sobrenome" />
<input class="rounded-md py-2 px-4" type="text" name="" id="" value="" placeholder="11 98765-4321" />
<input class="rounded-md py-2 px-4" type="text" name="" id="" value="" placeholder="[email protected]" />
<textarea class="rounded-md py-2 px-4" rows="4" cols="50"></textarea>
<input class="btn w-3/6 branco lg:btn-xs" type="submit" name="" id="" value="Enviar" />
</form>
</div>
</div>
</section>
</main>
<footer id="rodapeSite" class="bg-orange-500 text-orange-950">
<!-- o rodapé do sote é renderizado aqui -->
</footer>
<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
<script src="./src/js/main.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>