Hugging Face's logo

Spaces:
leobora
/
iwbbr
Running

App Files Community
leobora commited on
Commit
aef7e29
·
verified ·
1 Parent(s): c1fdf10

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +351 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Iwbbr
3
- emoji: 👁
4
- colorFrom: blue
5
- colorTo: yellow
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: iwbbr
3
+ emoji: 🐳
4
+ colorFrom: gray
5
+ colorTo: pink
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,351 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </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>I Wanna Buy Brasil - Acessórios Automotivos</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
+ <script src="https://js.stripe.com/v3/"></script>
10
+ <style>
11
+ .product-card:hover {
12
+ transform: translateY(-5px);
13
+ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
14
+ }
15
+ .ebook-banner {
16
+ background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%);
17
+ }
18
+ .instagram-icon:hover {
19
+ color: #E1306C;
20
+ }
21
+ .whatsapp-icon:hover {
22
+ color: #25D366;
23
+ }
24
+ .stripe-button {
25
+ background: #635bff !important;
26
+ font-family: inherit !important;
27
+ }
28
+ .stripe-button:hover {
29
+ background: #7a73ff !important;
30
+ }
31
+ </style>
32
+ </head>
33
+ <body class="bg-gray-50 font-sans">
34
+ <!-- Header/Navigation -->
35
+ <header class="bg-white shadow-sm sticky top-0 z-50">
36
+ <div class="container mx-auto px-4 py-3 flex justify-between items-center">
37
+ <div class="flex items-center">
38
+ <i class="fas fa-car text-blue-600 text-2xl mr-2"></i>
39
+ <h1 class="text-xl font-bold text-gray-800">I Wanna Buy Brasil</h1>
40
+ </div>
41
+ <div class="flex items-center space-x-4">
42
+ <a href="#produtos" class="text-gray-600 hover:text-blue-600 transition">Produtos</a>
43
+ <a href="#ebook" class="text-gray-600 hover:text-blue-600 transition">E-book</a>
44
+ <a href="https://instagram.com/iwannabuybrasil" target="_blank" class="instagram-icon text-gray-600 hover:text-blue-600 transition">
45
+ <i class="fab fa-instagram text-xl"></i>
46
+ </a>
47
+ <a href="https://wa.me/5541996619309" target="_blank" class="whatsapp-icon text-gray-600 hover:text-blue-600 transition">
48
+ <i class="fab fa-whatsapp text-xl"></i>
49
+ </a>
50
+ </div>
51
+ </div>
52
+ </header>
53
+
54
+ <!-- Hero Section -->
55
+ <section class="py-12 bg-gradient-to-r from-blue-50 to-gray-100">
56
+ <div class="container mx-auto px-4 flex flex-col md:flex-row items-center">
57
+ <div class="md:w-1/2 mb-8 md:mb-0">
58
+ <h2 class="text-4xl font-bold text-gray-800 mb-4">Acessórios Automotivos Premium</h2>
59
+ <p class="text-lg text-gray-600 mb-6">Melhore sua experiência ao volante com nossos produtos selecionados que combinam qualidade, estilo e funcionalidade.</p>
60
+ <div class="flex space-x-4">
61
+ <a href="#produtos" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg font-medium transition">Ver Produtos</a>
62
+ <a href="#ebook" class="bg-gray-800 hover:bg-gray-900 text-white px-6 py-3 rounded-lg font-medium transition">Comprar E-book</a>
63
+ </div>
64
+ </div>
65
+ <div class="md:w-1/2">
66
+ <img src="https://images.unsplash.com/photo-1494972308805-463bc619d34e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1473&q=80" alt="Carro com acessórios" class="rounded-lg shadow-xl w-full">
67
+ </div>
68
+ </div>
69
+ </section>
70
+
71
+ <!-- E-book Banner -->
72
+ <section id="ebook" class="ebook-banner py-8 text-white">
73
+ <div class="container mx-auto px-4 flex flex-col md:flex-row items-center justify-between">
74
+ <div class="md:w-2/3 mb-4 md:mb-0">
75
+ <h3 class="text-2xl font-bold mb-2">E-book Exclusivo!</h3>
76
+ <p class="text-blue-100">"Como Vender Seu Carro no Facebook Marketplace: O Guia Completo" - Aprenda estratégias comprovadas para vender seu carro mais rápido e pelo melhor preço.</p>
77
+ </div>
78
+ <div>
79
+ <button id="ebook-checkout-button" class="bg-white hover:bg-gray-100 text-blue-600 px-6 py-3 rounded-lg font-bold transition inline-block">Comprar Agora - R$ 29,90</button>
80
+ </div>
81
+ </div>
82
+ </section>
83
+
84
+ <!-- Products Section -->
85
+ <section id="produtos" class="py-12 bg-white">
86
+ <div class="container mx-auto px-4">
87
+ <h2 class="text-3xl font-bold text-center text-gray-800 mb-12">Nossos Produtos</h2>
88
+
89
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
90
+ <!-- Product 1 -->
91
+ <div class="product-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300 border border-gray-100">
92
+ <div class="relative overflow-hidden h-48">
93
+ <img src="https://images.unsplash.com/photo-1598515213692-5f252f75d786?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Suporte para celular" class="w-full h-full object-cover">
94
+ <div class="absolute top-2 right-2 bg-blue-600 text-white text-xs font-bold px-2 py-1 rounded">MAIS VENDIDO</div>
95
+ </div>
96
+ <div class="p-4">
97
+ <h3 class="font-bold text-lg mb-2 text-gray-800">Suporte Magnético para Celular</h3>
98
+ <p class="text-gray-600 text-sm mb-4">Ajustável 360°, compatível com todos smartphones, fixação forte e segura.</p>
99
+ <div class="flex justify-between items-center">
100
+ <span class="font-bold text-blue-600">R$ 59,90</span>
101
+ <button class="checkout-button bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded text-sm font-medium transition" data-product-id="prod_RtWCvFoNlzpFqU6X9XL0cnTUAi9XULgfqP7PiFrmkwMXfUQPhklK4scP2lLW7GuLqxW1KAOqeUuj8hSvcn00Yyi5DAzV" data-price-id="price_1RBaI8RtWCvFoNlzpFqU6X9XL0cnTUAi9XULgfqP7PiFrmkwMXfUQPhklK4scP2lLW7GuLqxW1KAOqeUuj8hSvcn00Yyi5DAzV">Comprar</button>
102
+ </div>
103
+ </div>
104
+ </div>
105
+
106
+ <!-- Product 2 -->
107
+ <div class="product-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300 border border-gray-100">
108
+ <div class="relative overflow-hidden h-48">
109
+ <img src="https://images.unsplash.com/photo-1607863686769-c1a485a19f93?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80" alt="Carregador wireless" class="w-full h-full object-cover">
110
+ </div>
111
+ <div class="p-4">
112
+ <h3 class="font-bold text-lg mb-2 text-gray-800">Carregador Wireless para Carro</h3>
113
+ <p class="text-gray-600 text-sm mb-4">15W rápido, compatível com Qi, design compacto que não ocupa espaço.</p>
114
+ <div class="flex justify-between items-center">
115
+ <span class="font-bold text-blue-600">R$ 129,90</span>
116
+ <button class="checkout-button bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded text-sm font-medium transition" data-product-id="prod_RtWCvFoNlzpFqU6X9XL0cnTUAi9XULgfqP7PiFrmkwMXfUQPhklK4scP2lLW7GuLqxW1KAOqeUuj8hSvcn00Yyi5DAzV" data-price-id="price_1RBaI8RtWCvFoNlzpFqU6X9XL0cnTUAi9XULgfqP7PiFrmkwMXfUQPhklK4scP2lLW7GuLqxW1KAOqeUuj8hSvcn00Yyi5DAzV">Comprar</button>
117
+ </div>
118
+ </div>
119
+ </div>
120
+
121
+ <!-- Product 3 -->
122
+ <div class="product-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300 border border-gray-100">
123
+ <div class="relative overflow-hidden h-48">
124
+ <img src="https://images.unsplash.com/photo-1587300003388-59208cc962cb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Organizador de assento" class="w-full h-full object-cover">
125
+ </div>
126
+ <div class="p-4">
127
+ <h3 class="font-bold text-lg mb-2 text-gray-800">Organizador para Banco Traseiro</h3>
128
+ <p class="text-gray-600 text-sm mb-4">7 bolsos espaçosos, material resistente, ajustável para qualquer veículo.</p>
129
+ <div class="flex justify-between items-center">
130
+ <span class="font-bold text-blue-600">R$ 79,90</span>
131
+ <button class="checkout-button bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded text-sm font-medium transition" data-product-id="prod_RtWCvFoNlzpFqU6X9XL0cnTUAi9XULgfqP7PiFrmkwMXfUQPhklK4scP2lLW7GuLqxW1KAOqeUuj8hSvcn00Yyi5DAzV" data-price-id="price_1RBaI8RtWCvFoNlzpFqU6X9XL0cnTUAi9XULgfqP7PiFrmkwMXfUQPhklK4scP2lLW7GuLqxW1KAOqeUuj8hSvcn00Yyi5DAzV">Comprar</button>
132
+ </div>
133
+ </div>
134
+ </div>
135
+
136
+ <!-- Product 4 -->
137
+ <div class="product-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300 border border-gray-100">
138
+ <div class="relative overflow-hidden h-48">
139
+ <img src="https://images.unsplash.com/photo-1605540436563-5bca919ae766?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1469&q=80" alt="Câmera de ré" class="w-full h-full object-cover">
140
+ </div>
141
+ <div class="p-4">
142
+ <h3 class="font-bold text-lg mb-2 text-gray-800">Câmera de Ré Sem Fio</h3>
143
+ <p class="text-gray-600 text-sm mb-4">Full HD, visão noturna, fácil instalação, compatível com maioria dos veículos.</p>
144
+ <div class="flex justify-between items-center">
145
+ <span class="font-bold text-blue-600">R$ 199,90</span>
146
+ <button class="checkout-button bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded text-sm font-medium transition" data-product-id="prod_RtWCvFoNlzpFqU6X9XL0cnTUAi9XULgfqP7PiFrmkwMXfUQPhklK4scP2lLW7GuLqxW1KAOqeUuj8hSvcn00Yyi5DAzV" data-price-id="price_1RBaI8RtWCvFoNlzpFqU6X9XL0cnTUAi9XULgfqP7PiFrmkwMXfUQPhklK4scP2lLW7GuLqxW1KAOqeUuj8hSvcn00Yyi5DAzV">Comprar</button>
147
+ </div>
148
+ </div>
149
+ </div>
150
+
151
+ <!-- Product 5 -->
152
+ <div class="product-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300 border border-gray-100">
153
+ <div class="relative overflow-hidden h-48">
154
+ <img src="https://images.unsplash.com/photo-1600861195091-690c92f1d2cc?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Purificador de ar" class="w-full h-full object-cover">
155
+ </div>
156
+ <div class="p-4">
157
+ <h3 class="font-bold text-lg mb-2 text-gray-800">Purificador de Ar para Carro</h3>
158
+ <p class="text-gray-600 text-sm mb-4">Ionizador, elimina odores e bactérias, USB recarregável, silencioso.</p>
159
+ <div class="flex justify-between items-center">
160
+ <span class="font-bold text-blue-600">R$ 89,90</span>
161
+ <button class="checkout-button bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded text-sm font-medium transition" data-product-id="prod_RtWCvFoNlzpFqU6X9XL0cnTUAi9XULgfqP7PiFrmkwMXfUQPhklK4scP2lLW7GuLqxW1KAOqeUuj8hSvcn00Yyi5DAzV" data-price-id="price_1RBaI8RtWCvFoNlzpFqU6X9XL0cnTUAi9XULgfqP7PiFrmkwMXfUQPhklK4scP2lLW7GuLqxW1KAOqeUuj8hSvcn00Yyi5DAzV">Comprar</button>
162
+ </div>
163
+ </div>
164
+ </div>
165
+
166
+ <!-- Product 6 -->
167
+ <div class="product-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300 border border-gray-100">
168
+ <div class="relative overflow-hidden h-48">
169
+ <img src="https://images.unsplash.com/photo-1595941069915-4ebc6e39a6ba?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1480&q=80" alt="Capa para volante" class="w-full h-full object-cover">
170
+ </div>
171
+ <div class="p-4">
172
+ <h3 class="font-bold text-lg mb-2 text-gray-800">Capa Térmica para Volante</h3>
173
+ <p class="text-gray-600 text-sm mb-4">Protege do sol, evita queimaduras, material premium, vários tamanhos.</p>
174
+ <div class="flex justify-between items-center">
175
+ <span class="font-bold text-blue-600">R$ 49,90</span>
176
+ <button class="checkout-button bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded text-sm font-medium transition" data-product-id="prod_RtWCvFoNlzpFqU6X9XL0cnTUAi9XULgfqP7PiFrmkwMXfUQPhklK4scP2lLW7GuLqxW1KAOqeUuj8hSvcn00Yyi5DAzV" data-price-id="price_1RBaI8RtWCvFoNlzpFqU6X9XL0cnTUAi9XULgfqP7PiFrmkwMXfUQPhklK4scP2lLW7GuLqxW1KAOqeUuj8hSvcn00Yyi5DAzV">Comprar</button>
177
+ </div>
178
+ </div>
179
+ </div>
180
+ </div>
181
+ </div>
182
+ </section>
183
+
184
+ <!-- Testimonials -->
185
+ <section class="py-12 bg-gray-50">
186
+ <div class="container mx-auto px-4">
187
+ <h2 class="text-3xl font-bold text-center text-gray-800 mb-12">O Que Nossos Clientes Dizem</h2>
188
+
189
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
190
+ <div class="bg-white p-6 rounded-lg shadow-sm border border-gray-100">
191
+ <div class="flex items-center mb-4">
192
+ <div class="text-yellow-400 mr-2">
193
+ <i class="fas fa-star"></i>
194
+ <i class="fas fa-star"></i>
195
+ <i class="fas fa-star"></i>
196
+ <i class="fas fa-star"></i>
197
+ <i class="fas fa-star"></i>
198
+ </div>
199
+ </div>
200
+ <p class="text-gray-600 mb-4">"Comprei o suporte magnético e é incrível! Muito prático e seguro, não preciso mais ficar procurando o celular no carro."</p>
201
+ <div class="flex items-center">
202
+ <div class="font-medium text-gray-800">Carlos S.</div>
203
+ </div>
204
+ </div>
205
+
206
+ <div class="bg-white p-6 rounded-lg shadow-sm border border-gray-100">
207
+ <div class="flex items-center mb-4">
208
+ <div class="text-yellow-400 mr-2">
209
+ <i class="fas fa-star"></i>
210
+ <i class="fas fa-star"></i>
211
+ <i class="fas fa-star"></i>
212
+ <i class="fas fa-star"></i>
213
+ <i class="fas fa-star"></i>
214
+ </div>
215
+ </div>
216
+ <p class="text-gray-600 mb-4">"O organizador de banco traseiro salvou minha vida! Agora as crianças têm tudo organizado durante as viagens."</p>
217
+ <div class="flex items-center">
218
+ <div class="font-medium text-gray-800">Ana L.</div>
219
+ </div>
220
+ </div>
221
+
222
+ <div class="bg-white p-6 rounded-lg shadow-sm border border-gray-100">
223
+ <div class="flex items-center mb-4">
224
+ <div class="text-yellow-400 mr-2">
225
+ <i class="fas fa-star"></i>
226
+ <i class="fas fa-star"></i>
227
+ <i class="fas fa-star"></i>
228
+ <i class="fas fa-star"></i>
229
+ <i class="fas fa-star-half-alt"></i>
230
+ </div>
231
+ </div>
232
+ <p class="text-gray-600 mb-4">"O e-book me ajudou a vender meu carro em 3 dias pelo preço que eu queria! Valeu cada centavo."</p>
233
+ <div class="flex items-center">
234
+ <div class="font-medium text-gray-800">Roberto M.</div>
235
+ </div>
236
+ </div>
237
+ </div>
238
+ </div>
239
+ </section>
240
+
241
+ <!-- CTA Section -->
242
+ <section class="py-12 bg-blue-600 text-white">
243
+ <div class="container mx-auto px-4 text-center">
244
+ <h2 class="text-3xl font-bold mb-6">Pronto para Melhorar Seu Carro?</h2>
245
+ <p class="text-xl mb-8 text-blue-100">Temos os melhores acessórios para tornar sua experiência de dirigir ainda melhor.</p>
246
+ <a href="https://wa.me/5541996619309" class="bg-white hover:bg-gray-100 text-blue-600 px-8 py-4 rounded-lg font-bold text-lg inline-block transition">Fale Conosco no WhatsApp</a>
247
+ </div>
248
+ </section>
249
+
250
+ <!-- Footer -->
251
+ <footer class="bg-gray-800 text-white py-8">
252
+ <div class="container mx-auto px-4">
253
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
254
+ <div>
255
+ <h3 class="text-lg font-bold mb-4 flex items-center">
256
+ <i class="fas fa-car mr-2"></i> I Wanna Buy Brasil
257
+ </h3>
258
+ <p class="text-gray-400">Acessórios automotivos premium para melhorar sua experiência no trânsito.</p>
259
+ </div>
260
+ <div>
261
+ <h3 class="text-lg font-bold mb-4">Links Úteis</h3>
262
+ <ul class="space-y-2">
263
+ <li><a href="#produtos" class="text-gray-400 hover:text-white transition">Produtos</a></li>
264
+ <li><a href="#ebook" class="text-gray-400 hover:text-white transition">E-book</a></li>
265
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Termos de Serviço</a></li>
266
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Política de Privacidade</a></li>
267
+ </ul>
268
+ </div>
269
+ <div>
270
+ <h3 class="text-lg font-bold mb-4">Contato</h3>
271
+ <ul class="space-y-2">
272
+ <li class="flex items-center">
273
+ <i class="fas fa-envelope mr-2 text-gray-400"></i>
274
+ <span class="text-gray-400">[email protected]</span>
275
+ </li>
276
+ <li class="flex items-center">
277
+ <i class="fas fa-phone mr-2 text-gray-400"></i>
278
+ <span class="text-gray-400">(41) 99661-9309</span>
279
+ </li>
280
+ </ul>
281
+ </div>
282
+ <div>
283
+ <h3 class="text-lg font-bold mb-4">Redes Sociais</h3>
284
+ <div class="flex space-x-4">
285
+ <a href="https://instagram.com/iwannabuybrasil" target="_blank" class="instagram-icon text-gray-400 hover:text-white text-xl transition">
286
+ <i class="fab fa-instagram"></i>
287
+ </a>
288
+ <a href="https://wa.me/5541996619309" target="_blank" class="whatsapp-icon text-gray-400 hover:text-white text-xl transition">
289
+ <i class="fab fa-whatsapp"></i>
290
+ </a>
291
+ <a href="#" class="text-gray-400 hover:text-white text-xl transition">
292
+ <i class="fab fa-facebook"></i>
293
+ </a>
294
+ </div>
295
+ </div>
296
+ </div>
297
+ <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400">
298
+ <p>© 2025 I Wanna Buy Brasil. Todos os direitos reservados.</p>
299
+ </div>
300
+ </div>
301
+ </footer>
302
+
303
+ <!-- WhatsApp Float Button -->
304
+ <a href="https://wa.me/5541996619309" target="_blank" class="fixed bottom-6 right-6 bg-green-500 hover:bg-green-600 text-white w-14 h-14 rounded-full flex items-center justify-center text-2xl shadow-lg transition">
305
+ <i class="fab fa-whatsapp"></i>
306
+ </a>
307
+
308
+ <script>
309
+ // Initialize Stripe with your publishable key
310
+ const stripe = Stripe('pk_test_51RBaI8RtWCvFoNlzpFqU6X9XL0cnTUAi9XULgfqP7PiFrmkwMXfUQPhklK4scP2lLW7GuLqxW1KAOqeUuj8hSvcn00Yyi5DAzV');
311
+
312
+ // E-book Checkout
313
+ document.getElementById('ebook-checkout-button').addEventListener('click', function() {
314
+ stripe.redirectToCheckout({
315
+ lineItems: [{
316
+ price: 'price_1RBaI8RtWCvFoNlzpFqU6X9XL0cnTUAi9XULgfqP7PiFrmkwMXfUQPhklK4scP2lLW7GuLqxW1KAOqeUuj8hSvcn00Yyi5DAzV', // Replace with your actual price ID for the ebook
317
+ quantity: 1,
318
+ }],
319
+ mode: 'payment',
320
+ successUrl: 'https://yourwebsite.com/success?session_id={CHECKOUT_SESSION_ID}',
321
+ cancelUrl: 'https://yourwebsite.com/canceled',
322
+ }).then(function(result) {
323
+ if (result.error) {
324
+ alert(result.error.message);
325
+ }
326
+ });
327
+ });
328
+
329
+ // Product Checkout Buttons
330
+ document.querySelectorAll('.checkout-button').forEach(button => {
331
+ button.addEventListener('click', function() {
332
+ const priceId = this.getAttribute('data-price-id');
333
+
334
+ stripe.redirectToCheckout({
335
+ lineItems: [{
336
+ price: priceId,
337
+ quantity: 1,
338
+ }],
339
+ mode: 'payment',
340
+ successUrl: 'https://yourwebsite.com/success?session_id={CHECKOUT_SESSION_ID}',
341
+ cancelUrl: 'https://yourwebsite.com/canceled',
342
+ }).then(function(result) {
343
+ if (result.error) {
344
+ alert(result.error.message);
345
+ }
346
+ });
347
+ });
348
+ });
349
+ </script>
350
+ <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=leobora/iwbbr" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
351
+ </html>