Hugging Face's logo

Spaces:
afurlan
/
prof-sites
Running

App Files Community
afurlan commited on
Commit
abb5ad3
·
verified ·
1 Parent(s): 42caa22

- Follow Up Deployment

Browse files
Files changed (1) hide show
  1. index.html +372 -684
index.html CHANGED
@@ -1,399 +1,258 @@
1
  <!DOCTYPE html>
2
- <html lang="en">
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>ProAutonomy | For Independent Professionals</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
  <style>
10
- .hero-gradient {
11
- background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #9333ea 100%);
12
  }
13
- .feature-card:hover {
14
- transform: translateY(-5px);
15
- box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
16
  }
17
- .testimonial-card {
18
- transition: all 0.3s ease;
19
  }
20
- .testimonial-card:hover {
21
- transform: scale(1.03);
 
 
22
  }
23
- .nav-link {
24
- position: relative;
25
  }
26
- .nav-link:after {
27
- content: '';
28
- position: absolute;
29
- width: 0;
30
- height: 2px;
31
- bottom: 0;
32
- left: 0;
33
- background-color: #4f46e5;
34
- transition: width 0.3s ease;
35
- }
36
- .nav-link:hover:after {
37
- width: 100%;
38
  }
39
  </style>
40
  </head>
41
- <body class="font-sans antialiased text-gray-800">
42
- <!-- Navigation -->
43
- <nav class="bg-white shadow-sm sticky top-0 z-50">
44
- <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
45
- <div class="flex justify-between h-16">
 
 
 
 
 
 
46
  <div class="flex items-center">
47
- <div class="flex-shrink-0 flex items-center">
48
- <i class="fas fa-user-tie text-indigo-600 text-2xl mr-2"></i>
49
- <span class="text-xl font-bold text-gray-900">ProAutonomy</span>
50
- </div>
51
  </div>
52
- <div class="hidden md:ml-6 md:flex md:items-center md:space-x-8">
53
- <a href="#features" class="nav-link text-gray-900 hover:text-indigo-600 px-3 py-2 text-sm font-medium">Features</a>
54
- <a href="#solutions" class="nav-link text-gray-900 hover:text-indigo-600 px-3 py-2 text-sm font-medium">Solutions</a>
55
- <a href="#testimonials" class="nav-link text-gray-900 hover:text-indigo-600 px-3 py-2 text-sm font-medium">Testimonials</a>
56
- <a href="#pricing" class="nav-link text-gray-900 hover:text-indigo-600 px-3 py-2 text-sm font-medium">Pricing</a>
57
- <a href="#contact" class="bg-indigo-600 text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-indigo-700 transition duration-150">Get Started</a>
 
 
 
 
 
 
 
58
  </div>
59
- <div class="-mr-2 flex items-center md:hidden">
60
- <button type="button" id="mobile-menu-button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none">
61
- <span class="sr-only">Open main menu</span>
62
- <i class="fas fa-bars"></i>
 
63
  </button>
64
  </div>
65
  </div>
66
- </div>
67
-
68
- <!-- Mobile menu -->
69
- <div id="mobile-menu" class="hidden md:hidden">
70
- <div class="pt-2 pb-3 space-y-1">
71
- <a href="#features" class="block px-3 py-2 text-base font-medium text-gray-900 hover:text-indigo-600 hover:bg-gray-50">Features</a>
72
- <a href="#solutions" class="block px-3 py-2 text-base font-medium text-gray-900 hover:text-indigo-600 hover:bg-gray-50">Solutions</a>
73
- <a href="#testimonials" class="block px-3 py-2 text-base font-medium text-gray-900 hover:text-indigo-600 hover:bg-gray-50">Testimonials</a>
74
- <a href="#pricing" class="block px-3 py-2 text-base font-medium text-gray-900 hover:text-indigo-600 hover:bg-gray-50">Pricing</a>
75
- <a href="#contact" class="block px-3 py-2 text-base font-medium text-gray-900 hover:text-indigo-600 hover:bg-gray-50">Contact</a>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
76
  </div>
77
  </div>
78
  </nav>
79
 
80
- <!-- Hero Section -->
81
- <div class="hero-gradient text-white">
82
- <div class="max-w-7xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:px-8">
83
- <div class="text-center">
84
- <h1 class="text-4xl font-extrabold tracking-tight sm:text-5xl lg:text-6xl">
85
- Empower Your Independent Practice
86
- </h1>
87
- <p class="mt-6 max-w-lg mx-auto text-xl text-indigo-100">
88
- Streamline your workflow, manage clients, and grow your professional practice with our all-in-one platform designed for autonomous professionals.
89
- </p>
90
- <div class="mt-10 flex justify-center space-x-4">
91
- <a href="#contact" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-indigo-700 bg-white hover:bg-gray-50 transition duration-150">
92
- Get Started
93
- <i class="fas fa-arrow-right ml-2"></i>
94
- </a>
95
- <a href="#features" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-500 bg-opacity-60 hover:bg-opacity-70 transition duration-150">
96
- Learn More
97
- </a>
98
- </div>
99
  </div>
100
  </div>
101
  </div>
102
 
103
- <!-- Features Section -->
104
- <div id="features" class="py-12 bg-white">
105
- <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
106
- <div class="lg:text-center">
107
- <h2 class="text-base text-indigo-600 font-semibold tracking-wide uppercase">Features</h2>
108
- <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
109
- Everything you need to succeed
110
- </p>
111
- <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto">
112
- Designed specifically for independent professionals to save time and focus on what matters most.
113
- </p>
114
- </div>
115
-
116
- <div class="mt-10">
117
- <div class="grid grid-cols-1 gap-10 sm:grid-cols-2 lg:grid-cols-3">
118
- <!-- Feature 1 -->
119
- <div class="feature-card bg-white rounded-lg overflow-hidden shadow-md p-6 transition duration-300">
120
- <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
121
- <i class="fas fa-calendar-alt text-xl"></i>
122
- </div>
123
- <div class="mt-5">
124
- <h3 class="text-lg font-medium text-gray-900">Smart Scheduling</h3>
125
- <p class="mt-2 text-base text-gray-500">
126
- Automated appointment booking that syncs with your calendar and sends reminders to clients.
127
- </p>
128
- </div>
129
  </div>
130
-
131
- <!-- Feature 2 -->
132
- <div class="feature-card bg-white rounded-lg overflow-hidden shadow-md p-6 transition duration-300">
133
- <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
134
- <i class="fas fa-file-invoice-dollar text-xl"></i>
135
- </div>
136
- <div class="mt-5">
137
- <h3 class="text-lg font-medium text-gray-900">Billing & Invoicing</h3>
138
- <p class="mt-2 text-base text-gray-500">
139
- Professional invoices, payment tracking, and automated billing to get paid faster.
140
- </p>
 
 
 
 
 
141
  </div>
142
  </div>
 
 
143
 
144
- <!-- Feature 3 -->
145
- <div class="feature-card bg-white rounded-lg overflow-hidden shadow-md p-6 transition duration-300">
146
- <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
147
- <i class="fas fa-users text-xl"></i>
148
- </div>
149
- <div class="mt-5">
150
- <h3 class="text-lg font-medium text-gray-900">Client Management</h3>
151
- <p class="mt-2 text-base text-gray-500">
152
- Centralized client profiles with notes, documents, and communication history.
153
- </p>
154
- </div>
155
  </div>
 
 
156
 
157
- <!-- Feature 4 -->
158
- <div class="feature-card bg-white rounded-lg overflow-hidden shadow-md p-6 transition duration-300">
159
- <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
160
- <i class="fas fa-chart-line text-xl"></i>
161
- </div>
162
- <div class="mt-5">
163
- <h3 class="text-lg font-medium text-gray-900">Performance Analytics</h3>
164
- <p class="mt-2 text-base text-gray-500">
165
- Track your practice growth with insightful reports and visual dashboards.
166
- </p>
167
- </div>
168
- </div>
169
 
170
- <!-- Feature 5 -->
171
- <div class="feature-card bg-white rounded-lg overflow-hidden shadow-md p-6 transition duration-300">
172
- <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
173
- <i class="fas fa-lock text-xl"></i>
174
- </div>
175
- <div class="mt-5">
176
- <h3 class="text-lg font-medium text-gray-900">Secure Document Storage</h3>
177
- <p class="mt-2 text-base text-gray-500">
178
- HIPAA and GDPR compliant storage for sensitive client documents with encryption.
179
- </p>
180
- </div>
181
- </div>
182
 
183
- <!-- Feature 6 -->
184
- <div class="feature-card bg-white rounded-lg overflow-hidden shadow-md p-6 transition duration-300">
185
- <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
186
- <i class="fas fa-mobile-alt text-xl"></i>
187
- </div>
188
- <div class="mt-5">
189
- <h3 class="text-lg font-medium text-gray-900">Mobile Access</h3>
190
- <p class="mt-2 text-base text-gray-500">
191
- Full platform access from any device so you can manage your practice on the go.
192
- </p>
193
- </div>
194
  </div>
195
  </div>
196
- </div>
197
- </div>
198
- </div>
199
-
200
- <!-- Solutions Section -->
201
- <div id="solutions" class="py-12 bg-gray-50">
202
- <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
203
- <div class="lg:text-center">
204
- <h2 class="text-base text-indigo-600 font-semibold tracking-wide uppercase">Solutions</h2>
205
- <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
206
- Tailored for your profession
207
- </p>
208
- </div>
209
 
210
- <div class="mt-10">
211
- <div class="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3">
212
- <!-- Solution 1 -->
213
- <div class="bg-white rounded-lg shadow-md overflow-hidden">
214
- <div class="p-6">
215
- <div class="flex items-center">
216
- <div class="flex-shrink-0 bg-indigo-100 p-3 rounded-md">
217
- <i class="fas fa-user-md text-indigo-600 text-xl"></i>
218
- </div>
219
- <div class="ml-5">
220
- <h3 class="text-lg font-medium text-gray-900">Medical Professionals</h3>
221
- </div>
222
- </div>
223
- <div class="mt-4">
224
- <p class="text-base text-gray-500">
225
- HIPAA-compliant tools for doctors, dentists, therapists, and other healthcare providers.
226
- </p>
227
- <ul class="mt-4 space-y-2">
228
- <li class="flex items-start">
229
- <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
230
- <span class="text-gray-600">Patient records management</span>
231
- </li>
232
- <li class="flex items-start">
233
- <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
234
- <span class="text-gray-600">Prescription management</span>
235
- </li>
236
- <li class="flex items-start">
237
- <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
238
- <span class="text-gray-600">Insurance billing integration</span>
239
- </li>
240
- </ul>
241
- </div>
242
- </div>
243
- </div>
244
 
245
- <!-- Solution 2 -->
246
- <div class="bg-white rounded-lg shadow-md overflow-hidden">
247
- <div class="p-6">
248
- <div class="flex items-center">
249
- <div class="flex-shrink-0 bg-indigo-100 p-3 rounded-md">
250
- <i class="fas fa-gavel text-indigo-600 text-xl"></i>
251
- </div>
252
- <div class="ml-5">
253
- <h3 class="text-lg font-medium text-gray-900">Legal Professionals</h3>
254
- </div>
255
- </div>
256
- <div class="mt-4">
257
- <p class="text-base text-gray-500">
258
- Comprehensive tools for lawyers, paralegals, and legal consultants.
259
- </p>
260
- <ul class="mt-4 space-y-2">
261
- <li class="flex items-start">
262
- <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
263
- <span class="text-gray-600">Case management system</span>
264
- </li>
265
- <li class="flex items-start">
266
- <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
267
- <span class="text-gray-600">Document automation</span>
268
- </li>
269
- <li class="flex items-start">
270
- <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
271
- <span class="text-gray-600">Time tracking and billing</span>
272
- </li>
273
- </ul>
274
- </div>
275
- </div>
276
- </div>
277
 
278
- <!-- Solution 3 -->
279
- <div class="bg-white rounded-lg shadow-md overflow-hidden">
280
- <div class="p-6">
281
- <div class="flex items-center">
282
- <div class="flex-shrink-0 bg-indigo-100 p-3 rounded-md">
283
- <i class="fas fa-chart-pie text-indigo-600 text-xl"></i>
284
- </div>
285
- <div class="ml-5">
286
- <h3 class="text-lg font-medium text-gray-900">Financial Consultants</h3>
287
- </div>
288
- </div>
289
- <div class="mt-4">
290
- <p class="text-base text-gray-500">
291
- Secure platform for accountants, financial advisors, and consultants.
292
- </p>
293
- <ul class="mt-4 space-y-2">
294
- <li class="flex items-start">
295
- <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
296
- <span class="text-gray-600">Client portfolio tracking</span>
297
- </li>
298
- <li class="flex items-start">
299
- <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
300
- <span class="text-gray-600">Tax document management</span>
301
- </li>
302
- <li class="flex items-start">
303
- <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
304
- <span class="text-gray-600">Secure file sharing</span>
305
- </li>
306
- </ul>
307
- </div>
308
- </div>
309
  </div>
310
  </div>
311
- </div>
312
- </div>
313
- </div>
314
 
315
- <!-- Testimonials Section -->
316
- <div id="testimonials" class="py-12 bg-white">
317
- <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
318
- <div class="lg:text-center">
319
- <h2 class="text-base text-indigo-600 font-semibold tracking-wide uppercase">Testimonials</h2>
320
- <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
321
- Trusted by professionals worldwide
322
- </p>
323
- </div>
324
 
325
- <div class="mt-10 grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3">
326
- <!-- Testimonial 1 -->
327
- <div class="testimonial-card bg-gray-50 p-6 rounded-lg">
328
- <div class="flex items-center">
329
- <div class="flex-shrink-0">
330
- <img class="h-12 w-12 rounded-full" src="https://images.unsplash.com/photo-1559839734-2b71ea197ec2?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="Dr. Sarah Johnson">
331
- </div>
332
- <div class="ml-4">
333
- <h3 class="text-lg font-medium text-gray-900">Dr. Sarah Johnson</h3>
334
- <p class="text-gray-500">Psychiatrist</p>
335
- </div>
336
- </div>
337
- <div class="mt-4">
338
- <p class="text-gray-600 italic">
339
- "ProAutonomy has transformed my private practice. The scheduling system alone has reduced no-shows by 40%, and having all patient records in one secure place is invaluable."
340
- </p>
341
- <div class="mt-4 flex text-yellow-400">
342
- <i class="fas fa-star"></i>
343
- <i class="fas fa-star"></i>
344
- <i class="fas fa-star"></i>
345
- <i class="fas fa-star"></i>
346
- <i class="fas fa-star"></i>
347
- </div>
348
- </div>
349
  </div>
350
 
351
- <!-- Testimonial 2 -->
352
- <div class="testimonial-card bg-gray-50 p-6 rounded-lg">
353
- <div class="flex items-center">
354
- <div class="flex-shrink-0">
355
- <img class="h-12 w-12 rounded-full" src="https://images.unsplash.com/photo-1560250097-0b93528c311a?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="Michael Chen">
 
356
  </div>
357
- <div class="ml-4">
358
- <h3 class="text-lg font-medium text-gray-900">Michael Chen</h3>
359
- <p class="text-gray-500">Attorney at Law</p>
360
  </div>
361
- </div>
362
- <div class="mt-4">
363
- <p class="text-gray-600 italic">
364
- "As a solo practitioner, I needed a system that could handle case management, billing, and client communication. ProAutonomy does it all and saves me 10+ hours per week."
365
- </p>
366
- <div class="mt-4 flex text-yellow-400">
367
- <i class="fas fa-star"></i>
368
- <i class="fas fa-star"></i>
369
- <i class="fas fa-star"></i>
370
- <i class="fas fa-star"></i>
371
- <i class="fas fa-star"></i>
372
  </div>
373
- </div>
374
- </div>
375
-
376
- <!-- Testimonial 3 -->
377
- <div class="testimonial-card bg-gray-50 p-6 rounded-lg">
378
- <div class="flex items-center">
379
- <div class="flex-shrink-0">
380
- <img class="h-12 w-12 rounded-full" src="https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="Emily Rodriguez">
381
  </div>
382
- <div class="ml-4">
383
- <h3 class="text-lg font-medium text-gray-900">Emily Rodriguez</h3>
384
- <p class="text-gray-500">Financial Advisor</p>
385
  </div>
386
- </div>
387
- <div class="mt-4">
388
- <p class="text-gray-600 italic">
389
- "The document management and secure client portal have been game-changers for my financial planning practice. My clients love the professionalism and ease of use."
390
- </p>
391
- <div class="mt-4 flex text-yellow-400">
392
- <i class="fas fa-star"></i>
393
- <i class="fas fa-star"></i>
394
- <i class="fas fa-star"></i>
395
- <i class="fas fa-star"></i>
396
- <i class="fas fa-star-half-alt"></i>
397
  </div>
398
  </div>
399
  </div>
@@ -401,379 +260,208 @@
401
  </div>
402
  </div>
403
 
404
- <!-- Pricing Section -->
405
- <div id="pricing" class="py-12 bg-gray-50">
406
- <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
407
- <div class="lg:text-center">
408
- <h2 class="text-base text-indigo-600 font-semibold tracking-wide uppercase">Pricing</h2>
409
- <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
410
- Simple, transparent pricing
 
 
 
 
411
  </p>
412
- <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto">
413
- Choose the plan that fits your practice needs. No hidden fees, cancel anytime.
 
 
 
 
 
 
 
 
 
 
 
 
 
 
414
  </p>
415
  </div>
 
 
416
 
417
- <div class="mt-10 grid grid-cols-1 gap-8 md:grid-cols-3">
418
- <!-- Basic Plan -->
419
- <div class="bg-white rounded-lg shadow-md overflow-hidden">
420
- <div class="px-6 py-8">
421
- <h3 class="text-lg font-medium text-gray-900">Basic</h3>
422
- <div class="mt-4 flex items-baseline">
423
- <span class="text-4xl font-extrabold text-gray-900">$29</span>
424
- <span class="ml-1 text-lg font-medium text-gray-500">/month</span>
425
- </div>
426
- <p class="mt-4 text-gray-500">
427
- Perfect for professionals just starting their independent practice.
428
- </p>
429
- <div class="mt-6">
430
- <ul class="space-y-4">
431
- <li class="flex items-start">
432
- <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
433
- <span class="text-gray-600">Up to 50 active clients</span>
434
- </li>
435
- <li class="flex items-start">
436
- <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
437
- <span class="text-gray-600">Appointment scheduling</span>
438
- </li>
439
- <li class="flex items-start">
440
- <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
441
- <span class="text-gray-600">Basic invoicing</span>
442
- </li>
443
- <li class="flex items-start">
444
- <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
445
- <span class="text-gray-600">Email support</span>
446
- </li>
447
- </ul>
448
- </div>
449
- </div>
450
- <div class="px-6 py-4 bg-gray-50 border-t border-gray-200">
451
- <a href="#contact" class="w-full flex items-center justify-center px-4 py-2 border border-transparent rounded-md shadow-sm text-base font-medium text-white bg-indigo-600 hover:bg-indigo-700">
452
- Get started
453
- </a>
454
  </div>
455
- </div>
456
-
457
- <!-- Professional Plan (Featured) -->
458
- <div class="bg-white rounded-lg shadow-lg overflow-hidden transform scale-105 z-10 border-2 border-indigo-500">
459
- <div class="px-6 py-8">
460
- <div class="flex justify-between items-center">
461
- <h3 class="text-lg font-medium text-gray-900">Professional</h3>
462
- <span class="px-3 py-1 bg-indigo-100 text-indigo-800 text-xs font-semibold rounded-full">Most Popular</span>
463
- </div>
464
- <div class="mt-4 flex items-baseline">
465
- <span class="text-4xl font-extrabold text-gray-900">$59</span>
466
- <span class="ml-1 text-lg font-medium text-gray-500">/month</span>
467
  </div>
468
- <p class="mt-4 text-gray-500">
469
- Everything you need to efficiently manage a growing practice.
470
- </p>
471
- <div class="mt-6">
472
- <ul class="space-y-4">
473
- <li class="flex items-start">
474
- <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
475
- <span class="text-gray-600">Up to 200 active clients</span>
476
- </li>
477
- <li class="flex items-start">
478
- <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
479
- <span class="text-gray-600">Advanced scheduling</span>
480
- </li>
481
- <li class="flex items-start">
482
- <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
483
- <span class="text-gray-600">Automated billing</span>
484
- </li>
485
- <li class="flex items-start">
486
- <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
487
- <span class="text-gray-600">Client portal</span>
488
- </li>
489
- <li class="flex items-start">
490
- <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
491
- <span class="text-gray-600">Priority support</span>
492
- </li>
493
- </ul>
494
  </div>
495
  </div>
496
- <div class="px-6 py-4 bg-gray-50 border-t border-gray-200">
497
- <a href="#contact" class="w-full flex items-center justify-center px-4 py-2 border border-transparent rounded-md shadow-sm text-base font-medium text-white bg-indigo-600 hover:bg-indigo-700">
498
- Get started
499
- </a>
500
- </div>
501
  </div>
502
-
503
- <!-- Enterprise Plan -->
504
- <div class="bg-white rounded-lg shadow-md overflow-hidden">
505
- <div class="px-6 py-8">
506
- <h3 class="text-lg font-medium text-gray-900">Enterprise</h3>
507
- <div class="mt-4 flex items-baseline">
508
- <span class="text-4xl font-extrabold text-gray-900">$99</span>
509
- <span class="ml-1 text-lg font-medium text-gray-500">/month</span>
 
 
 
 
 
 
 
 
 
 
510
  </div>
511
- <p class="mt-4 text-gray-500">
512
- For established practices with complex needs.
513
- </p>
514
- <div class="mt-6">
515
- <ul class="space-y-4">
516
- <li class="flex items-start">
517
- <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
518
- <span class="text-gray-600">Unlimited clients</span>
519
- </li>
520
- <li class="flex items-start">
521
- <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
522
- <span class="text-gray-600">Custom workflows</span>
523
- </li>
524
- <li class="flex items-start">
525
- <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
526
- <span class="text-gray-600">Team collaboration</span>
527
- </li>
528
- <li class="flex items-start">
529
- <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
530
- <span class="text-gray-600">API access</span>
531
- </li>
532
- <li class="flex items-start">
533
- <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
534
- <span class="text-gray-600">Dedicated account manager</span>
535
- </li>
536
- </ul>
537
  </div>
538
  </div>
539
- <div class="px-6 py-4 bg-gray-50 border-t border-gray-200">
540
- <a href="#contact" class="w-full flex items-center justify-center px-4 py-2 border border-transparent rounded-md shadow-sm text-base font-medium text-white bg-indigo-600 hover:bg-indigo-700">
541
- Get started
542
- </a>
543
- </div>
544
  </div>
545
- </div>
546
- </div>
547
- </div>
548
-
549
- <!-- CTA Section -->
550
- <div class="bg-indigo-700">
551
- <div class="max-w-2xl mx-auto text-center py-16 px-4 sm:py-20 sm:px-6 lg:px-8">
552
- <h2 class="text-3xl font-extrabold text-white sm:text-4xl">
553
- <span class="block">Ready to elevate your practice?</span>
554
- <span class="block">Start your free 14-day trial today.</span>
555
- </h2>
556
- <p class="mt-4 text-lg leading-6 text-indigo-200">
557
- No credit card required. Cancel anytime.
558
- </p>
559
- <a href="#contact" class="mt-8 w-full inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-indigo-600 bg-white hover:bg-indigo-50 sm:w-auto">
560
- Sign up for free
561
- </a>
562
- </div>
563
- </div>
564
-
565
- <!-- Contact Section -->
566
- <div id="contact" class="py-12 bg-white">
567
- <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
568
- <div class="lg:text-center">
569
- <h2 class="text-base text-indigo-600 font-semibold tracking-wide uppercase">Contact Us</h2>
570
- <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
571
- Let's get in touch
572
- </p>
573
- <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto">
574
- Have questions about how ProAutonomy can help your practice? We're here to help.
575
- </p>
576
- </div>
577
-
578
- <div class="mt-10 grid grid-cols-1 gap-8 md:grid-cols-2">
579
- <div class="bg-gray-50 p-6 rounded-lg">
580
- <h3 class="text-lg font-medium text-gray-900">Send us a message</h3>
581
- <form class="mt-6 space-y-6">
582
- <div>
583
- <label for="name" class="block text-sm font-medium text-gray-700">Name</label>
584
- <input type="text" id="name" name="name" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
585
- </div>
586
- <div>
587
- <label for="email" class="block text-sm font-medium text-gray-700">Email</label>
588
- <input type="email" id="email" name="email" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
589
- </div>
590
- <div>
591
- <label for="profession" class="block text-sm font-medium text-gray-700">Profession</label>
592
- <select id="profession" name="profession" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
593
- <option>Doctor</option>
594
- <option>Lawyer</option>
595
- <option>Financial Advisor</option>
596
- <option>Consultant</option>
597
- <option>Other</option>
598
- </select>
599
- </div>
600
- <div>
601
- <label for="message" class="block text-sm font-medium text-gray-700">Message</label>
602
- <textarea id="message" name="message" rows="4" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"></textarea>
603
  </div>
604
- <div>
605
- <button type="submit" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
606
- Send Message
607
- </button>
608
  </div>
609
- </form>
610
  </div>
611
-
612
- <div class="space-y-6">
613
- <div class="bg-gray-50 p-6 rounded-lg">
614
- <h3 class="text-lg font-medium text-gray-900">Contact Information</h3>
615
- <div class="mt-4 space-y-4">
616
- <div class="flex items-start">
617
- <div class="flex-shrink-0">
618
- <i class="fas fa-map-marker-alt text-indigo-500"></i>
619
- </div>
620
- <div class="ml-3">
621
- <p class="text-base text-gray-600">123 Professional Way<br>Suite 400<br>San Francisco, CA 94107</p>
622
- </div>
623
- </div>
624
- <div class="flex items-start">
625
- <div class="flex-shrink-0">
626
- <i class="fas fa-phone-alt text-indigo-500"></i>
627
- </div>
628
- <div class="ml-3">
629
- <p class="text-base text-gray-600">+1 (555) 123-4567</p>
630
- </div>
631
- </div>
632
- <div class="flex items-start">
633
- <div class="flex-shrink-0">
634
- <i class="fas fa-envelope text-indigo-500"></i>
635
- </div>
636
- <div class="ml-3">
637
- <p class="text-base text-gray-600">support@proautonomy.com</p>
638
- </div>
639
- </div>
640
- </div>
641
  </div>
642
-
643
- <div class="bg-gray-50 p-6 rounded-lg">
644
- <h3 class="text-lg font-medium text-gray-900">Frequently Asked Questions</h3>
645
- <div class="mt-4 space-y-4">
646
- <div>
647
- <h4 class="font-medium text-gray-900">Is there a free trial available?</h4>
648
- <p class="mt-1 text-gray-600">Yes, you can try ProAutonomy free for 14 days with no credit card required.</p>
649
- </div>
650
- <div>
651
- <h4 class="font-medium text-gray-900">Can I change plans later?</h4>
652
- <p class="mt-1 text-gray-600">Absolutely! You can upgrade or downgrade your plan at any time.</p>
653
- </div>
654
- <div>
655
- <h4 class="font-medium text-gray-900">Is my data secure?</h4>
656
- <p class="mt-1 text-gray-600">We use enterprise-grade security and encryption to protect all client data.</p>
657
  </div>
658
  </div>
 
 
 
 
659
  </div>
660
  </div>
661
  </div>
662
  </div>
663
  </div>
664
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
665
  <!-- Footer -->
666
- <footer class="bg-gray-800">
667
- <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
668
- <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
 
669
  <div>
670
- <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Product</h3>
671
- <ul class="mt-4 space-y-4">
672
- <li><a href="#features" class="text-base text-gray-300 hover:text-white">Features</a></li>
673
- <li><a href="#solutions" class="text-base text-gray-300 hover:text-white">Solutions</a></li>
674
- <li><a href="#pricing" class="text-base text-gray-300 hover:text-white">Pricing</a></li>
675
- <li><a href="#" class="text-base text-gray-300 hover:text-white">Demo</a></li>
676
- </ul>
677
- </div>
678
- <div>
679
- <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Resources</h3>
680
- <ul class="mt-4 space-y-4">
681
- <li><a href="#" class="text-base text-gray-300 hover:text-white">Documentation</a></li>
682
- <li><a href="#" class="text-base text-gray-300 hover:text-white">Guides</a></li>
683
- <li><a href="#" class="text-base text-gray-300 hover:text-white">Blog</a></li>
684
- <li><a href="#" class="text-base text-gray-300 hover:text-white">Webinars</a></li>
685
  </ul>
686
  </div>
 
 
687
  <div>
688
- <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Company</h3>
689
- <ul class="mt-4 space-y-4">
690
- <li><a href="#" class="text-base text-gray-300 hover:text-white">About</a></li>
691
- <li><a href="#" class="text-base text-gray-300 hover:text-white">Careers</a></li>
692
- <li><a href="#" class="text-base text-gray-300 hover:text-white">Privacy</a></li>
693
- <li><a href="#" class="text-base text-gray-300 hover:text-white">Terms</a></li>
694
  </ul>
695
  </div>
696
- <div>
697
- <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Connect</h3>
698
- <div class="mt-4 flex space-x-6">
699
- <a href="#" class="text-gray-400 hover:text-white">
700
- <i class="fab fa-facebook-f"></i>
701
- </a>
702
- <a href="#" class="text-gray-400 hover:text-white">
703
- <i class="fab fa-twitter"></i>
704
- </a>
705
- <a href="#" class="text-gray-400 hover:text-white">
706
- <i class="fab fa-linkedin-in"></i>
707
- </a>
708
- <a href="#" class="text-gray-400 hover:text-white">
709
- <i class="fab fa-instagram"></i>
710
- </a>
711
- </div>
712
- <div class="mt-6">
713
- <p class="text-gray-300">Subscribe to our newsletter</p>
714
- <form class="mt-2 flex">
715
- <input type="email" placeholder="Your email" class="px-3 py-2 border border-gray-600 rounded-l-md bg-gray-700 text-white focus:outline-none focus:ring-1 focus:ring-indigo-500">
716
- <button type="submit" class="px-4 py-2 bg-indigo-600 text-white rounded-r-md hover:bg-indigo-700 focus:outline-none focus:ring-1 focus:ring-indigo-500">
717
- <i class="fas fa-paper-plane"></i>
718
- </button>
719
- </form>
720
- </div>
721
- </div>
722
- </div>
723
- <div class="mt-12 border-t border-gray-700 pt-8">
724
- <p class="text-base text-gray-400 text-center">
725
- &copy; 2023 ProAutonomy. All rights reserved.
726
- </p>
727
- </div>
728
- </div>
729
- </footer>
730
-
731
- <script>
732
- // Mobile menu toggle
733
- document.getElementById('mobile-menu-button').addEventListener('click', function() {
734
- const menu = document.getElementById('mobile-menu');
735
- if (menu.classList.contains('hidden')) {
736
- menu.classList.remove('hidden');
737
- this.innerHTML = '<i class="fas fa-times"></i>';
738
- } else {
739
- menu.classList.add('hidden');
740
- this.innerHTML = '<i class="fas fa-bars"></i>';
741
- }
742
- });
743
-
744
- // Smooth scrolling for anchor links
745
- document.querySelectorAll('a[href^="#"]').forEach(anchor => {
746
- anchor.addEventListener('click', function (e) {
747
- e.preventDefault();
748
 
749
- const targetId = this.getAttribute('href');
750
- if (targetId === '#') return;
751
-
752
- const targetElement = document.querySelector(targetId);
753
- if (targetElement) {
754
- targetElement.scrollIntoView({
755
- behavior: 'smooth'
756
- });
757
-
758
- // Close mobile menu if open
759
- const mobileMenu = document.getElementById('mobile-menu');
760
- if (!mobileMenu.classList.contains('hidden')) {
761
- mobileMenu.classList.add('hidden');
762
- document.getElementById('mobile-menu-button').innerHTML = '<i class="fas fa-bars"></i>';
763
- }
764
- }
765
- });
766
- });
767
-
768
- // Form submission handling
769
- const contactForm = document.querySelector('form');
770
- if (contactForm) {
771
- contactForm.addEventListener('submit', function(e) {
772
- e.preventDefault();
773
- alert('Thank you for your message! We will get back to you soon.');
774
- this.reset();
775
- });
776
- }
777
- </script>
778
  <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=afurlan/prof-sites" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
779
  </html>
 
1
  <!DOCTYPE html>
2
+ <html lang="pt-BR">
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Copo Térmico Life + Ebook - Clear - Preto - 880ml | Gocase</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
  <style>
10
+ .dropdown:hover .dropdown-menu {
11
+ display: block;
12
  }
13
+ .product-gallery {
14
+ scroll-snap-type: x mandatory;
 
15
  }
16
+ .product-gallery img {
17
+ scroll-snap-align: start;
18
  }
19
+ .sticky-nav {
20
+ position: sticky;
21
+ top: 0;
22
+ z-index: 50;
23
  }
24
+ .fade-in {
25
+ animation: fadeIn 0.3s ease-in-out;
26
  }
27
+ @keyframes fadeIn {
28
+ from { opacity: 0; }
29
+ to { opacity: 1; }
 
 
 
 
 
 
 
 
 
30
  }
31
  </style>
32
  </head>
33
+ <body class="bg-gray-50 font-sans">
34
+ <!-- Top Banner -->
35
+ <div class="bg-black text-white text-center py-2 text-sm">
36
+ <p>FRETE GRÁTIS A PARTIR DE R$149,90* | 6X SEM JUROS EM PEDIDOS A PARTIR DE R$ 499!</p>
37
+ </div>
38
+
39
+ <!-- Main Navigation -->
40
+ <nav class="sticky-nav bg-white shadow-md">
41
+ <div class="container mx-auto px-4">
42
+ <div class="flex justify-between items-center py-4">
43
+ <!-- Logo -->
44
  <div class="flex items-center">
45
+ <a href="#" class="flex items-center">
46
+ <img src="https://cdn.gocase.com.br/.nuxt/dist/client/img/logo-birth.e283944.webp" alt="Gocase" class="h-8 mr-2">
47
+ <span class="text-xl font-bold">gocase</span>
48
+ </a>
49
  </div>
50
+
51
+ <!-- Search and User/Cart -->
52
+ <div class="hidden md:flex items-center space-x-6">
53
+ <div class="relative">
54
+ <input type="text" placeholder="Buscar produtos..." class="border border-gray-300 rounded-full py-2 px-4 w-64 focus:outline-none focus:ring-2 focus:ring-pink-500">
55
+ <button class="absolute right-3 top-2.5 text-gray-400">
56
+ <i class="fas fa-search"></i>
57
+ </button>
58
+ </div>
59
+ <div class="flex items-center space-x-4">
60
+ <a href="#" class="text-gray-700 hover:text-pink-500"><i class="far fa-user"></i></a>
61
+ <a href="#" class="text-gray-700 hover:text-pink-500"><i class="fas fa-shopping-cart"></i></a>
62
+ </div>
63
  </div>
64
+
65
+ <!-- Mobile Menu Button -->
66
+ <div class="md:hidden">
67
+ <button class="text-gray-700">
68
+ <i class="fas fa-bars text-2xl"></i>
69
  </button>
70
  </div>
71
  </div>
72
+
73
+ <!-- Category Navigation -->
74
+ <div class="hidden md:flex justify-between py-3 border-t border-gray-200">
75
+ <div class="flex space-x-6">
76
+ <a href="#" class="text-gray-700 hover:text-pink-500 font-medium">OFERTAS ATÉ 70% OFF</a>
77
+ <div class="dropdown relative">
78
+ <button class="text-gray-700 hover:text-pink-500 font-medium flex items-center">
79
+ Produtos Térmicos <i class="fas fa-chevron-down ml-1 text-xs"></i>
80
+ </button>
81
+ <div class="dropdown-menu absolute hidden bg-white shadow-lg rounded-md mt-2 py-2 w-64 z-10">
82
+ <a href="#" class="block px-4 py-2 hover:bg-pink-50">☆ Novas Estampas</a>
83
+ <a href="#" class="block px-4 py-2 hover:bg-pink-50">✩ Garrafa Térmica Flip Pro 750mL</a>
84
+ <div class="border-t border-gray-200 my-1"></div>
85
+ <a href="#" class="block px-4 py-2 hover:bg-pink-50">Copo Térmico Life 880mL</a>
86
+ <a href="#" class="block px-4 py-2 hover:bg-pink-50">Copo Térmico Life 1180mL</a>
87
+ </div>
88
+ </div>
89
+ <div class="dropdown relative">
90
+ <button class="text-gray-700 hover:text-pink-500 font-medium flex items-center">
91
+ Capinhas <i class="fas fa-chevron-down ml-1 text-xs"></i>
92
+ </button>
93
+ <div class="dropdown-menu absolute hidden bg-white shadow-lg rounded-md mt-2 py-2 w-64 z-10">
94
+ <a href="#" class="block px-4 py-2 hover:bg-pink-50">✩ Novas Estampas</a>
95
+ <a href="#" class="block px-4 py-2 hover:bg-pink-50">Mais Vendidas</a>
96
+ <div class="border-t border-gray-200 my-1"></div>
97
+ <a href="#" class="block px-4 py-2 hover:bg-pink-50">iPhone</a>
98
+ <a href="#" class="block px-4 py-2 hover:bg-pink-50">Samsung</a>
99
+ </div>
100
+ </div>
101
+ <a href="#" class="text-gray-700 hover:text-pink-500 font-medium">Bolsas, Malas e Mochilas</a>
102
+ <a href="#" class="text-gray-700 hover:text-pink-500 font-medium">Acessórios</a>
103
+ <a href="#" class="text-gray-700 hover:text-pink-500 font-medium">Coleções</a>
104
+ </div>
105
+ <div class="flex space-x-4">
106
+ <a href="#" class="text-gray-700 hover:text-pink-500 text-sm">Seja Revendedor(a)</a>
107
+ <a href="#" class="text-gray-700 hover:text-pink-500 text-sm">Brindes Corporativos</a>
108
+ </div>
109
  </div>
110
  </div>
111
  </nav>
112
 
113
+ <!-- Breadcrumbs -->
114
+ <div class="bg-gray-100 py-3">
115
+ <div class="container mx-auto px-4">
116
+ <div class="flex items-center text-sm text-gray-600">
117
+ <a href="#" class="hover:text-pink-500">Início</a>
118
+ <span class="mx-2">/</span>
119
+ <a href="#" class="hover:text-pink-500">Copo Térmico Life + Ebook</a>
120
+ <span class="mx-2">/</span>
121
+ <span class="text-gray-900 font-medium">Clear - Preto</span>
 
 
 
 
 
 
 
 
 
 
122
  </div>
123
  </div>
124
  </div>
125
 
126
+ <!-- Product Section -->
127
+ <div class="container mx-auto px-4 py-8">
128
+ <div class="flex flex-col lg:flex-row gap-8">
129
+ <!-- Product Gallery -->
130
+ <div class="lg:w-1/2">
131
+ <div class="bg-white rounded-lg shadow-md overflow-hidden">
132
+ <!-- Main Image -->
133
+ <div class="relative pb-[100%] bg-gray-100">
134
+ <img src="https://ik.imagekit.io/gocase/govinci/copo-life-clear-vitrine-preto/360lifepreto-copolife880ebook/mockup?stamp=prisma-render/prod-v2/previews/clear-mockup/53797/standard-iphone11/1719840659323318207807880787045535.png"
135
+ alt="Copo Térmico Life + Ebook - Clear - Preto"
136
+ class="absolute h-full w-full object-contain">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
137
  </div>
138
+ <!-- Thumbnails -->
139
+ <div class="flex overflow-x-auto product-gallery p-4 space-x-2">
140
+ <div class="flex-shrink-0 w-20 h-20 bg-gray-100 rounded border border-gray-200">
141
+ <img src="https://ik.imagekit.io/gocase/govinci/copo-life-clear-vitrine-preto/360lifepreto-copolife880ebook/mockup?stamp=prisma-render/prod-v2/previews/clear-mockup/53797/standard-iphone11/1719840659323318207807880787045535.png"
142
+ alt="Thumbnail 1"
143
+ class="h-full w-full object-contain">
144
+ </div>
145
+ <div class="flex-shrink-0 w-20 h-20 bg-gray-100 rounded border border-gray-200">
146
+ <img src="https://ik.imagekit.io/gocase/govinci/copo-life-clear-vitrine-preto/360lifepreto-copolife880ebook/mockup?stamp=prisma-render/prod-v2/previews/clear-mockup/53797/standard-iphone11/1719840659323318207807880787045535.png"
147
+ alt="Thumbnail 2"
148
+ class="h-full w-full object-contain">
149
+ </div>
150
+ <div class="flex-shrink-0 w-20 h-20 bg-gray-100 rounded border border-gray-200">
151
+ <img src="https://ik.imagekit.io/gocase/govinci/copo-life-clear-vitrine-preto/360lifepreto-copolife880ebook/mockup?stamp=prisma-render/prod-v2/previews/clear-mockup/53797/standard-iphone11/1719840659323318207807880787045535.png"
152
+ alt="Thumbnail 3"
153
+ class="h-full w-full object-contain">
154
  </div>
155
  </div>
156
+ </div>
157
+ </div>
158
 
159
+ <!-- Product Info -->
160
+ <div class="lg:w-1/2">
161
+ <h1 class="text-3xl font-bold text-gray-900 mb-2">Copo Térmico Life + Ebook - Clear - Preto</h1>
162
+
163
+ <div class="flex items-center mb-4">
164
+ <div class="flex text-yellow-400">
165
+ <i class="fas fa-star"></i>
166
+ <i class="fas fa-star"></i>
167
+ <i class="fas fa-star"></i>
168
+ <i class="fas fa-star"></i>
169
+ <i class="fas fa-star-half-alt"></i>
170
  </div>
171
+ <span class="text-gray-600 ml-2">(45 avaliações)</span>
172
+ </div>
173
 
174
+ <div class="mb-6">
175
+ <span class="text-3xl font-bold text-pink-600">R$129,90</span>
176
+ <span class="text-lg text-gray-500 line-through ml-2">R$269,90</span>
177
+ <span class="bg-pink-100 text-pink-800 text-sm font-medium ml-2 px-2.5 py-0.5 rounded">52% OFF</span>
178
+ </div>
 
 
 
 
 
 
 
179
 
180
+ <div class="mb-6">
181
+ <p class="text-gray-700 mb-4">Quer comprar com a logo da sua empresa? <a href="#" class="text-pink-600 hover:underline">Clique aqui!</a><br>
182
+ <span class="text-sm text-gray-500">*para pedidos acima de 50 unidades.</span></p>
183
+ </div>
 
 
 
 
 
 
 
 
184
 
185
+ <!-- Size Selection -->
186
+ <div class="mb-6">
187
+ <h3 class="text-lg font-medium text-gray-900 mb-3">Tamanho</h3>
188
+ <div class="flex flex-wrap gap-2">
189
+ <button class="px-4 py-2 border border-gray-300 rounded-md hover:border-pink-500 hover:bg-pink-50">1180ml</button>
190
+ <button class="px-4 py-2 border border-pink-500 bg-pink-50 rounded-md text-pink-600 font-medium">880ml</button>
191
+ <button class="px-4 py-2 border border-gray-300 rounded-md hover:border-pink-500 hover:bg-pink-50">880ml + Alça Esporte</button>
 
 
 
 
192
  </div>
193
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
194
 
195
+ <!-- Customization -->
196
+ <div class="mb-6">
197
+ <h3 class="text-lg font-medium text-gray-900 mb-3">Customizar</h3>
198
+ <button class="px-4 py-2 border border-gray-300 rounded-md hover:border-pink-500 hover:bg-pink-50">
199
+ <i class="fas fa-paint-brush mr-2"></i>Personalizar
200
+ </button>
201
+ </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
202
 
203
+ <!-- Add to Cart -->
204
+ <div class="mb-8">
205
+ <button class="w-full bg-pink-600 hover:bg-pink-700 text-white font-bold py-3 px-4 rounded-md transition duration-300 flex items-center justify-center">
206
+ <i class="fas fa-shopping-cart mr-2"></i> Adicionar ao Carrinho
207
+ </button>
208
+ </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
209
 
210
+ <!-- Wishlist and Share -->
211
+ <div class="flex items-center space-x-4">
212
+ <button class="text-gray-700 hover:text-pink-500 flex items-center">
213
+ <i class="far fa-heart mr-2"></i> Lista de Desejos
214
+ </button>
215
+ <div class="flex items-center space-x-3">
216
+ <span class="text-gray-700">Compartilhar:</span>
217
+ <a href="#" class="text-gray-500 hover:text-blue-500"><i class="fab fa-facebook-f"></i></a>
218
+ <a href="#" class="text-gray-500 hover:text-blue-400"><i class="fab fa-twitter"></i></a>
219
+ <a href="#" class="text-gray-500 hover:text-red-500"><i class="fab fa-pinterest-p"></i></a>
220
+ <a href="#" class="text-gray-500 hover:text-green-500"><i class="fab fa-whatsapp"></i></a>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
221
  </div>
222
  </div>
 
 
 
223
 
224
+ <div class="border-t border-gray-200 my-6"></div>
 
 
 
 
 
 
 
 
225
 
226
+ <!-- Shipping Info -->
227
+ <div class="bg-gray-50 p-4 rounded-md mb-6">
228
+ <h3 class="text-lg font-medium text-gray-900 mb-2">Prazo de Postagem</h3>
229
+ <p class="text-gray-700">Após a confirmação de pagamento precisamos de até <span class="font-medium">10 dia(s) útil(eis)</span> para a produção e postagem do seu pedido. Após a postagem se inicia a contagem do prazo do frete para a sua localidade.</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
230
  </div>
231
 
232
+ <!-- Payment Options -->
233
+ <div class="mb-6">
234
+ <h3 class="text-lg font-medium text-gray-900 mb-3">Formas de Pagamento</h3>
235
+ <div class="grid grid-cols-4 gap-2">
236
+ <div class="border border-gray-200 p-2 rounded-md flex justify-center">
237
+ <img src="https://logodownload.org/wp-content/uploads/2014/04/visa-logo-1.png" alt="Visa" class="h-6">
238
  </div>
239
+ <div class="border border-gray-200 p-2 rounded-md flex justify-center">
240
+ <img src="https://logodownload.org/wp-content/uploads/2014/04/mastercard-logo-1.png" alt="Mastercard" class="h-6">
 
241
  </div>
242
+ <div class="border border-gray-200 p-2 rounded-md flex justify-center">
243
+ <img src="https://logodownload.org/wp-content/uploads/2019/08/amex-logo-0.png" alt="American Express" class="h-6">
 
 
 
 
 
 
 
 
 
244
  </div>
245
+ <div class="border border-gray-200 p-2 rounded-md flex justify-center">
246
+ <img src="https://logodownload.org/wp-content/uploads/2019/08/hipercard-logo-0.png" alt="Hipercard" class="h-6">
 
 
 
 
 
 
247
  </div>
248
+ <div class="border border-gray-200 p-2 rounded-md flex justify-center">
249
+ <img src="https://logodownload.org/wp-content/uploads/2019/08/elo-logo-0.png" alt="Elo" class="h-6">
 
250
  </div>
251
+ <div class="border border-gray-200 p-2 rounded-md flex justify-center">
252
+ <img src="https://logodownload.org/wp-content/uploads/2019/08/boleto-logo-0.png" alt="Boleto" class="h-6">
253
+ </div>
254
+ <div class="border border-gray-200 p-2 rounded-md flex justify-center">
255
+ <img src="https://logodownload.org/wp-content/uploads/2020/04/pix-logo-0.png" alt="Pix" class="h-6">
 
 
 
 
 
 
256
  </div>
257
  </div>
258
  </div>
 
260
  </div>
261
  </div>
262
 
263
+ <!-- Product Description -->
264
+ <div class="bg-white py-8">
265
+ <div class="container mx-auto px-4">
266
+ <div class="border-b border-gray-200">
267
+ <h2 class="text-2xl font-bold text-gray-900 mb-6">Descrição</h2>
268
+ </div>
269
+
270
+ <div class="mt-6">
271
+ <h3 class="text-lg font-medium text-gray-900 mb-3">Copo Térmico Life + Ebook - Clear - Preto - 880ml</h3>
272
+ <p class="text-gray-700 mb-4">
273
+ O Copo Térmico Life é perfeito para quem busca praticidade e estilo no dia a dia. Com capacidade de 880ml, ele mantém suas bebidas na temperatura ideal por horas, seja quente ou gelada.
274
  </p>
275
+ <p class="text-gray-700 mb-4">
276
+ <strong>Características:</strong>
277
+ </p>
278
+ <ul class="list-disc pl-5 text-gray-700 mb-4 space-y-2">
279
+ <li>Material: Aço inoxidável 18/8 de alta qualidade</li>
280
+ <li>Revestimento interno em cobre para melhor isolamento térmico</li>
281
+ <li>Tampa com vedação perfeita e sistema anti-vazamento</li>
282
+ <li>Manutenção de temperatura: até 12h quente e 24h gelado</li>
283
+ <li>Base antiderrapante em silicone</li>
284
+ <li>Design moderno e elegante</li>
285
+ </ul>
286
+ <p class="text-gray-700 mb-4">
287
+ <strong>Inclui:</strong> Ebook exclusivo com receitas saudáveis e dicas de bem-estar.
288
+ </p>
289
+ <p class="text-gray-700">
290
+ <strong>Dimensões:</strong> 9cm de diâmetro x 23cm de altura
291
  </p>
292
  </div>
293
+ </div>
294
+ </div>
295
 
296
+ <!-- Related Products -->
297
+ <div class="bg-gray-50 py-12">
298
+ <div class="container mx-auto px-4">
299
+ <h2 class="text-2xl font-bold text-gray-900 mb-8">Você também pode gostar</h2>
300
+
301
+ <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
302
+ <!-- Product 1 -->
303
+ <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition duration-300">
304
+ <div class="relative pb-[100%] bg-gray-100">
305
+ <img src="https://ik.imagekit.io/gocase/govinci/copo-life-clear-vitrine-preto/360lifepreto-copolife880ebook/mockup?stamp=prisma-render/prod-v2/previews/clear-mockup/53797/standard-iphone11/1719840659323318207807880787045535.png"
306
+ alt="Copo Térmico Life Azul Claro"
307
+ class="absolute h-full w-full object-contain">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
308
  </div>
309
+ <div class="p-4">
310
+ <h3 class="text-lg font-medium text-gray-900 mb-1">Copo Térmico Life Azul Claro</h3>
311
+ <div class="flex items-center mb-2">
312
+ <div class="flex text-yellow-400 text-xs">
313
+ <i class="fas fa-star"></i>
314
+ <i class="fas fa-star"></i>
315
+ <i class="fas fa-star"></i>
316
+ <i class="fas fa-star"></i>
317
+ <i class="fas fa-star-half-alt"></i>
318
+ </div>
 
 
319
  </div>
320
+ <div class="flex items-center">
321
+ <span class="text-lg font-bold text-pink-600">R$129,90</span>
322
+ <span class="text-sm text-gray-500 line-through ml-2">R$269,90</span>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
323
  </div>
324
  </div>
 
 
 
 
 
325
  </div>
326
+
327
+ <!-- Product 2 -->
328
+ <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition duration-300">
329
+ <div class="relative pb-[100%] bg-gray-100">
330
+ <img src="https://ik.imagekit.io/gocase/govinci/copo-life-clear-vitrine-preto/360lifepreto-copolife880ebook/mockup?stamp=prisma-render/prod-v2/previews/clear-mockup/53797/standard-iphone11/1719840659323318207807880787045535.png"
331
+ alt="Copo Térmico Life Rosa"
332
+ class="absolute h-full w-full object-contain">
333
+ </div>
334
+ <div class="p-4">
335
+ <h3 class="text-lg font-medium text-gray-900 mb-1">Copo Térmico Life Rosa</h3>
336
+ <div class="flex items-center mb-2">
337
+ <div class="flex text-yellow-400 text-xs">
338
+ <i class="fas fa-star"></i>
339
+ <i class="fas fa-star"></i>
340
+ <i class="fas fa-star"></i>
341
+ <i class="fas fa-star"></i>
342
+ <i class="far fa-star"></i>
343
+ </div>
344
  </div>
345
+ <div class="flex items-center">
346
+ <span class="text-lg font-bold text-pink-600">R$129,90</span>
347
+ <span class="text-sm text-gray-500 line-through ml-2">R$269,90</span>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
348
  </div>
349
  </div>
 
 
 
 
 
350
  </div>
351
+
352
+ <!-- Product 3 -->
353
+ <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition duration-300">
354
+ <div class="relative pb-[100%] bg-gray-100">
355
+ <img src="https://ik.imagekit.io/gocase/govinci/copo-life-clear-vitrine-preto/360lifepreto-copolife880ebook/mockup?stamp=prisma-render/prod-v2/previews/clear-mockup/53797/standard-iphone11/1719840659323318207807880787045535.png"
356
+ alt="Copo Térmico Life Branco"
357
+ class="absolute h-full w-full object-contain">
358
+ </div>
359
+ <div class="p-4">
360
+ <h3 class="text-lg font-medium text-gray-900 mb-1">Copo Térmico Life Branco</h3>
361
+ <div class="flex items-center mb-2">
362
+ <div class="flex text-yellow-400 text-xs">
363
+ <i class="fas fa-star"></i>
364
+ <i class="fas fa-star"></i>
365
+ <i class="fas fa-star"></i>
366
+ <i class="fas fa-star"></i>
367
+ <i class="fas fa-star"></i>
368
+ </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
369
  </div>
370
+ <div class="flex items-center">
371
+ <span class="text-lg font-bold text-pink-600">R$129,90</span>
372
+ <span class="text-sm text-gray-500 line-through ml-2">R$269,90</span>
 
373
  </div>
374
+ </div>
375
  </div>
376
+
377
+ <!-- Product 4 -->
378
+ <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition duration-300">
379
+ <div class="relative pb-[100%] bg-gray-100">
380
+ <img src="https://ik.imagekit.io/gocase/govinci/copo-life-clear-vitrine-preto/360lifepreto-copolife880ebook/mockup?stamp=prisma-render/prod-v2/previews/clear-mockup/53797/standard-iphone11/1719840659323318207807880787045535.png"
381
+ alt="Copo Térmico Life Lilás"
382
+ class="absolute h-full w-full object-contain">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
383
  </div>
384
+ <div class="p-4">
385
+ <h3 class="text-lg font-medium text-gray-900 mb-1">Copo Térmico Life Lilás</h3>
386
+ <div class="flex items-center mb-2">
387
+ <div class="flex text-yellow-400 text-xs">
388
+ <i class="fas fa-star"></i>
389
+ <i class="fas fa-star"></i>
390
+ <i class="fas fa-star"></i>
391
+ <i class="fas fa-star"></i>
392
+ <i class="fas fa-star-half-alt"></i>
 
 
 
 
 
 
393
  </div>
394
  </div>
395
+ <div class="flex items-center">
396
+ <span class="text-lg font-bold text-pink-600">R$129,90</span>
397
+ <span class="text-sm text-gray-500 line-through ml-2">R$269,90</span>
398
+ </div>
399
  </div>
400
  </div>
401
  </div>
402
  </div>
403
  </div>
404
 
405
+ <!-- Newsletter -->
406
+ <div class="bg-pink-50 py-12">
407
+ <div class="container mx-auto px-4 text-center">
408
+ <h2 class="text-2xl font-bold text-gray-900 mb-2">Nós enviamos e-mails incríveis.</h2>
409
+ <p class="text-gray-700 mb-6">Saiba primeiro dos nossos lançamentos, coleções e promoções exclusivas.</p>
410
+
411
+ <div class="max-w-md mx-auto flex">
412
+ <input type="email" placeholder="Seu melhor e-mail" class="flex-grow border border-gray-300 rounded-l-md py-3 px-4 focus:outline-none focus:ring-2 focus:ring-pink-500">
413
+ <button class="bg-pink-600 hover:bg-pink-700 text-white font-medium py-3 px-6 rounded-r-md transition duration-300">
414
+ Assinar
415
+ </button>
416
+ </div>
417
+ </div>
418
+ </div>
419
+
420
  <!-- Footer -->
421
+ <footer class="bg-gray-900 text-white pt-12 pb-6">
422
+ <div class="container mx-auto px-4">
423
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-8">
424
+ <!-- About -->
425
  <div>
426
+ <h3 class="text-lg font-bold mb-4">Sobre a Gocase</h3>
427
+ <ul class="space-y-2">
428
+ <li><a href="#" class="text-gray-400 hover:text-white">Quem Somos</a></li>
429
+ <li><a href="#" class="text-gray-400 hover:text-white">Onde Encontrar</a></li>
430
+ <li><a href="#" class="text-gray-400 hover:text-white">Trabalhe Conosco</a></li>
 
 
 
 
 
 
 
 
 
 
431
  </ul>
432
  </div>
433
+
434
+ <!-- Help -->
435
  <div>
436
+ <h3 class="text-lg font-bold mb-4">Precisa de ajuda?</h3>
437
+ <ul class="space-y-2">
438
+ <li><a href="#" class="text-gray-400 hover:text-white">Central de ajuda</a></li>
439
+ <li><a href="#" class="text-gray-400 hover:text-white">Quero ser um Revendedor Oficial</a></li>
440
+ <li><a href="#" class="text-gray-400 hover:text-white">Política de Privacidade</a></li>
441
+ <li><a href="#" class="text-gray-400 hover:text-white">Termos de Uso</a></li>
442
  </ul>
443
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
444
 
445
+ <!-- Payment Methods -->
446
+ <div>
447
+ <h3 class="text-lg font-bold mb-4">Métodos de Pagamento</h3>
448
+ <div class="grid grid-cols-4 gap-2">
449
+ <div class="bg-white p-2 rounded flex justify-center">
450
+ <img src="https://logodownload.org/wp-content/uploads/2014/04/visa-logo-1.png" alt="Visa" class="h-6">
451
+ </div>
452
+ <div class="bg-white p-2 rounded flex justify-center">
453
+ <img src="https://logodownload.org/wp-content/uploads/2014/04/mastercard-logo-1.png" alt="Mastercard" class="h-6">
454
+ </div>
455
+ <div class="bg-white p-2 rounded flex justify-center">
456
+ <img src="https://logodownload.org/wp-content/uploads/2019/08/amex-logo-0.png" alt="American Express" class="h-6">
457
+ </div>
458
+ <div class="bg-white p-2 rounded flex justify-center">
459
+ <img src="https://logodownload.org/wp-content/uploads/2019/08/hipercard-logo-0.png" alt="Hipercard" class="h-6">
460
+ </div>
461
+ <div class="bg-white p-2 rounded flex justify-center">
462
+ <img src="https://logodownload.org/wp-content/uploads/2019/08/elo-logo-0.png" alt="Elo" class="h-6">
463
+ </div>
464
+ <div class="bg-white p-2 rounded flex justify-center">
465
+ <img src="https://logodownload.org/wp-content/uploads/2019/08/boleto-logo-0.png" alt="
 
 
 
 
 
 
 
 
466
  <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=afurlan/prof-sites" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
467
  </html>