-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
275 lines (263 loc) · 10.9 KB
/
Copy pathindex.html
File metadata and controls
275 lines (263 loc) · 10.9 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
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="shortcut icon" href="./images/fav-icon.png" type="image/x-icon">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Doctor Care</title>
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap"
rel="stylesheet">
<!-- Remix Icon -->
<link href="https://cdn.jsdelivr.net/npm/remixicon@4.5.0/fonts/remixicon.css" rel="stylesheet" />
<style>
html{
scroll-behavior: smooth;
}
.active{
font-weight: bold;
}
</style>
<!-- Tailwind CSS CDN -->
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
'primary': '#00856F',
'green-light': '#DCE9E2',
'green-light-02': '#F7F9F9',
'brand-beige': '#FFFAF1',
'brand-green-hover': '#00453A'
},
fontFamily: {
DMsans: ["DM Sans", "sans - serif"]
}
}
}
}
</script>
</head>
<body class="bg-green-light-02 overflow-x-hidden font-DMsans">
<!-- Header Section Start -->
<header id="header" class="bg-[#DCE9E2] text-primary fixed top-0 left-0 right-0 w-full z-50">
<nav class="container max-w-screen-xl mx-auto flex justify-between items-center p-4">
<div class="text-xl font-bold">
<a href="/" class="text-black">Doctor<span class="text-primary">Care</span></a>
</div>
<div>
<ul class="hidden md:flex space-x-8">
<li><a href="#home" class="hover:text-primary">Início</a></li>
<li><a href="#services" class="hover:text-primary">Serviçes</a></li>
<li><a href="#about" class="hover:text-primary">Sobre</a></li>
<li><a href="#contact" class="hover:text-primary">Depoimentos</a></li>
</ul>
</div>
<div class="hidden md:block">
<a href="#contact" id="contact-btn"
class="md:w-56 text-primary hover:text-white border border-primary px-6 py-2.5 rounded-full transition-all duration-200 hover:bg-primary md:flex items-center justify-center">Agendar
consulta</a>
</div>
<!-- Mobile navbar -->
<div class="md:hidden">
<button id="mobile-menu-button" class="navbar-burger flex items-center p-3">
<img src="./images/menu-icon.svg" alt="Menu Icon" class="block w-4 h-4 fill-current">
</button>
</div>
</nav>
<!-- TODO: Mobile Menu -->
<div id="mobile-menu" class="navbar-menu relative z-50 hidden">
<div class="navbar-backdrop fixed inset-0 bg-primary">
<nav
class="fixed top-0 left-0 bottom-0 flex flex-col w-full max-w-sm py-6 px-6 text-white border-r overflow-y-hidden"
>
<div class="flex items-center mb-8">
<a href="/" class="mr-auto text-2xl leading-none text-white"
>Doctor<span class="text-white">Care</span></a
>
<button
id="mobile-menu-close"
class="navbar-close p-1 rounded-full bg-white"
>
<img
src="./images/close-menu-icon.svg"
alt=""
class="h-6 w-6 text-white cursor-pointer hover:text-gray-500"
/>
</button>
</div>
<div>
<ul class="space-y-5">
<li class="mb-2">
<a href="#home" class="hover:text-red-500 hover:font-bold">Início</a>
</li>
<li class="mb-2">
<a href="#services" class="hover:text-red-500 hover:font-bold">Serviços</a>
</li>
<li class="mb-2">
<a href="#about" class="hover:text-red-500 hover:font-bold">Sobre</a>
</li>
<li class="mb-2">
<a href="#contact" class="hover:text-red-500 hover:font-bold">Depoimentos</a>
</li>
</ul>
</div>
<div class="block md:hidden mt-12">
<a
id="contact-btn"
href="#contact"
class="text-primary bg-white hover:text-white border border-primary px-6 py-2.5 rounded-full hover:bg-red-500 transition-all duration-200 md:flex items-center justify-center"
>Agendar consulta</a
>
</div>
</nav>
</div>
</div>
</header>
<!-- Header Section END -->
<!-- Banner Section Start -->
<section id="home" class="py-28 bg-green-light flex items-center justify-center gap-8">
<div class="container max-w-screen-xl mx-auto px-4 flex md:flex-row flex-col items-center justify-between">
<div class="w-full md:w-2/3 text-center sm:text-left mb-8 md:mb-0 hero-content">
<h2 class="font-bold text-sm text-primary mb-4">BOAS-VINDAS A DOCTORCARE 👋</h2>
<h1 class="text-4xl md:text-6xl font-bold mb-6">Assistência médica simplificada para todos</h1>
<p class="text-lg md:text-xl mb-8 md:w-4/5">Os médicos da DoctorCare vão além dos sintomas para tratar a causa
raiz de sua doença e proporcionar uma cura a longo
prazo.</p>
<div class="text-center">
<button
class="bg-primary text-white px-6 py-3 rounded-full text-lg hover:bg-brand-green-hover flex w-full sm:w-72 items-center justify-center gap-1">
<i class="ri-whatsapp-line"></i>
<a href="#contact">Agende sua consulta</a>
</button>
</div>
</div>
<div class="w-full md:w-1/3 flex justify-center md:justify-end heroimage">
<img src="./images/hero-banner.png" alt="Banner Image" class="w-full object-cover">
</div>
</div>
</section>
<!-- Banner Section END -->
<!-- Stats Section Start -->
<section
class="container max-w-screen-xl mx-auto bg-brand-beige md:h-52 md:-mt-28 mt-0 rounded-lg shadow-lg stats-section">
<div class="p-8 pt-12 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-8 items-center justify-center">
<div class="text-center p-4 rounded-md md:border-r border-b md:border-b-0">
<h4 class="text-5xl font-bold mb-1">+3.500</h4>
<p class="text-primary">Pacientes atendidos</p>
</div>
<div class="text-center p-4 rounded-md md:border-r border-b md:border-b-0">
<h4 class="text-5xl font-bold mb-1">+15</h4>
<p class="text-primary">Especialistas disponíveis</p>
</div>
<div class="text-center p-4 rounded-md">
<h4 class="text-5xl font-bold mb-1">+10</h4>
<p class="text-primary">Anos no mercado</p>
</div>
</div>
</section>
<!-- Stats Section End -->
<!-- Services Section Start -->
<section class="md:py-20 py-12" id="services">
<div class="container max-w-screen-xl mx-auto p-4 text-center">
<div class="service-content">
<p class="text-primary text-lg mb-4 mt-12">SERVIÇOS</p>
<h2
class="text-3xl md:text-5xl md:leading-snug font-bold sm:w-1/2 mx-auto mb-12"
>
Como podemos ajudá-lo a se sentir melhor?
</h2>
</div>
<!-- inject services item into card -->
<div
id="service-container"
class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-8 mb-12 text-left service-content"
>
<!-- cards will come -->
</div>
</div>
</section>
<!-- Services Section END -->
<!-- about section Start-->
<section class="md:py-20 py-12 bg-brand-beige" id="about">
<div
class="py-12 max-w-screen-xl container mx-auto px-4 flex flex-col md:flex-row items-center gap-12 justify-between">
<div class="w-full md:w-1/2 mb-8 md:mb-0 about-section">
<img src="./images/about.png" alt="" class="w-full h-auto rounded-lg" />
</div>
<div class="w-full md:w-1/2 md:pl-8 about-section">
<h3 class="text-primary font-bold text-sm mb-2.5">SOBRE NÓS</h3>
<h2 class="text-3xl md:text-4xl font-bold text-headline mb-6 md:w-2/3">
Entenda quem somos e por que existimos
</h2>
<p class="text-[#495057] leading-relaxed">
Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet
sint. Velit officia consequat duis enim. Amet minim mollit non
deserunt ullamco est sit aliqua dolor do amet sint. Velit officia
consequat duis enim. Amet minim mollit non deserunt ullamco est sit
aliqua dolor do amet sint. Velit officia consequat duis enim. Amet
minim mollit non deserunt ullamco est sit aliqua dolor do amet sint.
Velit officia consequat duis enim. Amet minim mollit non deserunt
ullamco est sit aliqua dolor do amet sint.
</p>
</div>
</div>
</section>
<!-- about section END-->
<!-- contact Section Start-->
<section class="md:py-20 py-12" id="contact">
<div
class="py-12 max-w-screen-xl container mx-auto px-4 flex flex-col md:flex-row-reverse items-center gap-12 justify-between">
<div class="w-full md:w-1/2 mb-8 md:mb-0 about-section">
<img src="./images/contact.png" alt="" class="w-full h-auto rounded-lg" />
</div>
<div class="w-full md:w-1/2 md:pl-8 about-section">
<h2 class="text-3xl md:text-4xl font-bold text-headline mb-6 md:w-2/3">
Entre em contato com a gente!
</h2>
<p class="text-seconday">
<i class="ri-map-pin-line text-primary"></i> Adress: R. Amauri
Souza, 346
</p>
<p class="text-seconday">
<i class="ri-mail-line text-primary"></i> Email:
contato@doctorcare.com
</p>
</div>
</div>
</section>
<!-- contact Section END-->
<!-- footer Section Start-->
<footer class="bg-primary text-white py-6">
<div
class="max-w-screen-xl container mx-auto py-8 px-4 flex flex-col sm:flex-row justify-between items-center gap-8 footer-container">
<div class="mr-4 text-xl">
<a href="/" class="block text-4xl font-bold text-white mb-4">DoctorCare</a>
<p class="text-sm mb-4">© 2025 - DoctorCare.</p>
<p class="text-sm mb-4">Todos os direitos reservados.</p>
</div>
<div class="flex items-center space-x-4 mt-4 md:mt-0">
<a href="#" class="text-white hover:text-gray-500">
<i class="ri-instagram-line text-2xl"></i>
</a>
<a href="#" class="text-white hover:text-gray-500">
<i class="ri-facebook-fill text-2xl"></i>
</a>
<a href="#" class="text-white hover:text-gray-500">
<i class="ri-youtube-line text-2xl"></i>
</a>
</div>
</div>
</footer>
<!-- footer Section END-->
<!-- js script tags -->
<script src="js/app.js"></script>
<script src="js/services.js"></script>
<script src="https://unpkg.com/scrollreveal"></script>
<script src="js/animation.js"></script>
</body>
</html>