Hugging Face's logo

Spaces:
wirenation62
/
banco-do-brasil
Running

App Files Community
wirenation62 commited on
Commit
fa8529e
·
verified ·
1 Parent(s): f16b7d2

create a clone Banco do Brasil supporter website - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +301 -18
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Banco Do Brasil
3
- emoji: 😻
4
- colorFrom: blue
5
- colorTo: pink
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: banco-do-brasil
3
+ emoji: 🐳
4
+ colorFrom: purple
5
+ colorTo: green
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,302 @@
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>Banco do Brasil - Suporte</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://unpkg.com/feather-icons"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
11
+ <style>
12
+ .bb-gradient {
13
+ background: linear-gradient(135deg, #002A5E 0%, #004A8D 100%);
14
+ }
15
+ .bb-yellow {
16
+ background-color: #FECB00;
17
+ }
18
+ .bb-blue {
19
+ background-color: #002A5E;
20
+ }
21
+ .hover-scale {
22
+ transition: transform 0.3s ease;
23
+ }
24
+ .hover-scale:hover {
25
+ transform: scale(1.03);
26
+ }
27
+ </style>
28
+ </head>
29
+ <body class="font-['Inter'] bg-gray-50">
30
+ <!-- Header -->
31
+ <header class="bb-gradient text-white shadow-md">
32
+ <div class="container mx-auto px-4 py-3">
33
+ <div class="flex items-center justify-between">
34
+ <div class="flex items-center space-x-4">
35
+ <img src="https://www.bb.com.br/pbb/img/logo-banco-do-brasil.svg" alt="Banco do Brasil" class="h-12">
36
+ <span class="text-xl font-semibold hidden md:block">Suporte</span>
37
+ </div>
38
+ <nav class="hidden md:flex space-x-6">
39
+ <a href="#" class="hover:text-yellow-300 transition">Início</a>
40
+ <a href="#" class="hover:text-yellow-300 transition">Conta Digital</a>
41
+ <a href="#" class="hover:text-yellow-300 transition">Cartões</a>
42
+ <a href="#" class="hover:text-yellow-300 transition">Investimentos</a>
43
+ <a href="#" class="hover:text-yellow-300 transition">Contato</a>
44
+ </nav>
45
+ <button class="md:hidden">
46
+ <i data-feather="menu"></i>
47
+ </button>
48
+ </div>
49
+ </div>
50
+ </header>
51
+
52
+ <!-- Hero Section -->
53
+ <section class="bb-gradient text-white py-16">
54
+ <div class="container mx-auto px-4">
55
+ <div class="max-w-3xl mx-auto text-center">
56
+ <h1 class="text-4xl md:text-5xl font-bold mb-6">Como podemos ajudar você hoje?</h1>
57
+ <div class="relative max-w-xl mx-auto">
58
+ <input type="text" placeholder="Digite sua dúvida ou problema..."
59
+ class="w-full py-4 px-6 rounded-full text-gray-800 focus:outline-none focus:ring-2 focus:ring-yellow-400">
60
+ <button class="bb-yellow absolute right-2 top-1/2 transform -translate-y-1/2 p-2 rounded-full">
61
+ <i data-feather="search" class="text-gray-800"></i>
62
+ </button>
63
+ </div>
64
+ </div>
65
+ </div>
66
+ </section>
67
+
68
+ <!-- Quick Actions -->
69
+ <section class="py-12 bg-white">
70
+ <div class="container mx-auto px-4">
71
+ <h2 class="text-2xl font-bold text-gray-800 mb-8 text-center">Acesse rapidamente</h2>
72
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
73
+ <a href="#" class="bg-white rounded-lg shadow-md p-6 hover-scale hover:shadow-lg transition">
74
+ <div class="bb-blue text-white p-3 rounded-full w-12 h-12 flex items-center justify-center mb-4">
75
+ <i data-feather="smartphone"></i>
76
+ </div>
77
+ <h3 class="font-semibold text-lg mb-2">App BB</h3>
78
+ <p class="text-gray-600">Baixe e configure nosso aplicativo</p>
79
+ </a>
80
+ <a href="#" class="bg-white rounded-lg shadow-md p-6 hover-scale hover:shadow-lg transition">
81
+ <div class="bb-blue text-white p-3 rounded-full w-12 h-12 flex items-center justify-center mb-4">
82
+ <i data-feather="credit-card"></i>
83
+ </div>
84
+ <h3 class="font-semibold text-lg mb-2">Cartões</h3>
85
+ <p class="text-gray-600">Bloqueio, desbloqueio e faturas</p>
86
+ </a>
87
+ <a href="#" class="bg-white rounded-lg shadow-md p-6 hover-scale hover:shadow-lg transition">
88
+ <div class="bb-blue text-white p-3 rounded-full w-12 h-12 flex items-center justify-center mb-4">
89
+ <i data-feather="lock"></i>
90
+ </div>
91
+ <h3 class="font-semibold text-lg mb-2">Segurança</h3>
92
+ <p class="text-gray-600">Proteja sua conta e dados</p>
93
+ </a>
94
+ <a href="#" class="bg-white rounded-lg shadow-md p-6 hover-scale hover:shadow-lg transition">
95
+ <div class="bb-blue text-white p-3 rounded-full w-12 h-12 flex items-center justify-center mb-4">
96
+ <i data-feather="dollar-sign"></i>
97
+ </div>
98
+ <h3 class="font-semibold text-lg mb-2">Investimentos</h3>
99
+ <p class="text-gray-600">Acompanhe seus rendimentos</p>
100
+ </a>
101
+ </div>
102
+ </div>
103
+ </section>
104
+
105
+ <!-- FAQ Section -->
106
+ <section class="py-12 bg-gray-50">
107
+ <div class="container mx-auto px-4">
108
+ <h2 class="text-2xl font-bold text-gray-800 mb-8 text-center">Perguntas frequentes</h2>
109
+ <div class="max-w-3xl mx-auto space-y-4">
110
+ <div class="bg-white rounded-lg shadow-md overflow-hidden">
111
+ <button class="w-full flex justify-between items-center p-6 text-left">
112
+ <span class="font-medium">Como acessar minha conta pelo Internet Banking?</span>
113
+ <i data-feather="chevron-down" class="transform transition-transform duration-300"></i>
114
+ </button>
115
+ <div class="px-6 pb-6 hidden">
116
+ <p class="text-gray-600">Para acessar sua conta pelo Internet Banking, siga estes passos:</p>
117
+ <ol class="list-decimal pl-5 mt-2 space-y-2 text-gray-600">
118
+ <li>Acesse www.bb.com.br</li>
119
+ <li>Clique em "Internet Banking" no menu superior</li>
120
+ <li>Insira seu CPF e senha</li>
121
+ <li>Digite a senha de 6 dígitos enviada para seu celular</li>
122
+ <li>Clique em "Acessar"</li>
123
+ </ol>
124
+ </div>
125
+ </div>
126
+ <div class="bg-white rounded-lg shadow-md overflow-hidden">
127
+ <button class="w-full flex justify-between items-center p-6 text-left">
128
+ <span class="font-medium">Como bloquear meu cartão perdido ou roubado?</span>
129
+ <i data-feather="chevron-down" class="transform transition-transform duration-300"></i>
130
+ </button>
131
+ <div class="px-6 pb-6 hidden">
132
+ <p class="text-gray-600">Você pode bloquear seu cartão das seguintes formas:</p>
133
+ <ul class="list-disc pl-5 mt-2 space-y-2 text-gray-600">
134
+ <li>Pelo App BB: Menu > Cartões > Bloquear Cartão</li>
135
+ <li>Pelo Internet Banking: Cartões > Bloquear Cartão</li>
136
+ <li>Ligando para a Central de Atendimento: 4004-0001 (capitais) ou 0800-729-0001 (demais localidades)</li>
137
+ </ul>
138
+ </div>
139
+ </div>
140
+ <div class="bg-white rounded-lg shadow-md overflow-hidden">
141
+ <button class="w-full flex justify-between items-center p-6 text-left">
142
+ <span class="font-medium">Como cadastrar uma nova senha do Internet Banking?</span>
143
+ <i data-feather="chevron-down" class="transform transition-transform duration-300"></i>
144
+ </button>
145
+ <div class="px-6 pb-6 hidden">
146
+ <p class="text-gray-600">Para cadastrar uma nova senha:</p>
147
+ <ol class="list-decimal pl-5 mt-2 space-y-2 text-gray-600">
148
+ <li>Acesse o Internet Banking</li>
149
+ <li>Clique em "Esqueci minha senha"</li>
150
+ <li>Informe seu CPF e clique em "Continuar"</li>
151
+ <li>Digite a senha de 6 dígitos enviada para seu celular</li>
152
+ <li>Crie uma nova senha seguindo as instruções de segurança</li>
153
+ </ol>
154
+ </div>
155
+ </div>
156
+ </div>
157
+ </div>
158
+ </section>
159
+
160
+ <!-- Contact Section -->
161
+ <section class="py-12 bg-white">
162
+ <div class="container mx-auto px-4">
163
+ <div class="max-w-4xl mx-auto bg-gray-50 rounded-xl shadow-md overflow-hidden">
164
+ <div class="md:flex">
165
+ <div class="md:w-1/2 bb-blue text-white p-8">
166
+ <h2 class="text-2xl font-bold mb-6">Fale conosco</h2>
167
+ <div class="space-y-6">
168
+ <div class="flex items-start space-x-4">
169
+ <div class="bb-yellow text-gray-800 p-2 rounded-full">
170
+ <i data-feather="phone"></i>
171
+ </div>
172
+ <div>
173
+ <h3 class="font-semibold">Telefone</h3>
174
+ <p class="text-gray-300">4004-0001 (Capitais)</p>
175
+ <p class="text-gray-300">0800 729 0001 (Demais localidades)</p>
176
+ </div>
177
+ </div>
178
+ <div class="flex items-start space-x-4">
179
+ <div class="bb-yellow text-gray-800 p-2 rounded-full">
180
+ <i data-feather="mail"></i>
181
+ </div>
182
+ <div>
183
+ <h3 class="font-semibold">E-mail</h3>
184
+ <p class="text-gray-300">faleconosco@bb.com.br</p>
185
+ </div>
186
+ </div>
187
+ <div class="flex items-start space-x-4">
188
+ <div class="bb-yellow text-gray-800 p-2 rounded-full">
189
+ <i data-feather="map-pin"></i>
190
+ </div>
191
+ <div>
192
+ <h3 class="font-semibold">Agências</h3>
193
+ <p class="text-gray-300">Encontre a agência mais próxima</p>
194
+ </div>
195
+ </div>
196
+ </div>
197
+ </div>
198
+ <div class="md:w-1/2 p-8">
199
+ <h3 class="text-xl font-semibold mb-6">Envie sua mensagem</h3>
200
+ <form class="space-y-4">
201
+ <div>
202
+ <label for="name" class="block text-sm font-medium text-gray-700 mb-1">Nome completo</label>
203
+ <input type="text" id="name" class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:ring-2 focus:ring-yellow-400 focus:border-yellow-400">
204
+ </div>
205
+ <div>
206
+ <label for="email" class="block text-sm font-medium text-gray-700 mb-1">E-mail</label>
207
+ <input type="email" id="email" class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:ring-2 focus:ring-yellow-400 focus:border-yellow-400">
208
+ </div>
209
+ <div>
210
+ <label for="subject" class="block text-sm font-medium text-gray-700 mb-1">Assunto</label>
211
+ <select id="subject" class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:ring-2 focus:ring-yellow-400 focus:border-yellow-400">
212
+ <option>Selecione um assunto</option>
213
+ <option>Conta corrente</option>
214
+ <option>Cartões</option>
215
+ <option>Investimentos</option>
216
+ <option>Internet Banking</option>
217
+ <option>Outros</option>
218
+ </select>
219
+ </div>
220
+ <div>
221
+ <label for="message" class="block text-sm font-medium text-gray-700 mb-1">Mensagem</label>
222
+ <textarea id="message" rows="4" class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:ring-2 focus:ring-yellow-400 focus:border-yellow-400"></textarea>
223
+ </div>
224
+ <button type="submit" class="bb-yellow text-gray-800 font-medium py-3 px-6 rounded-lg hover:bg-yellow-500 transition w-full">Enviar mensagem</button>
225
+ </form>
226
+ </div>
227
+ </div>
228
+ </div>
229
+ </div>
230
+ </section>
231
+
232
+ <!-- Footer -->
233
+ <footer class="bb-blue text-white py-8">
234
+ <div class="container mx-auto px-4">
235
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
236
+ <div>
237
+ <h3 class="font-semibold text-lg mb-4">Banco do Brasil</h3>
238
+ <ul class="space-y-2">
239
+ <li><a href="#" class="hover:text-yellow-300 transition">Sobre o BB</a></li>
240
+ <li><a href="#" class="hover:text-yellow-300 transition">Relação com investidores</a></li>
241
+ <li><a href="#" class="hover:text-yellow-300 transition">Sustentabilidade</a></li>
242
+ <li><a href="#" class="hover:text-yellow-300 transition">Carreiras</a></li>
243
+ </ul>
244
+ </div>
245
+ <div>
246
+ <h3 class="font-semibold text-lg mb-4">Produtos</h3>
247
+ <ul class="space-y-2">
248
+ <li><a href="#" class="hover:text-yellow-300 transition">Conta corrente</a></li>
249
+ <li><a href="#" class="hover:text-yellow-300 transition">Cartões</a></li>
250
+ <li><a href="#" class="hover:text-yellow-300 transition">Empréstimos</a></li>
251
+ <li><a href="#" class="hover:text-yellow-300 transition">Investimentos</a></li>
252
+ </ul>
253
+ </div>
254
+ <div>
255
+ <h3 class="font-semibold text-lg mb-4">Ajuda</h3>
256
+ <ul class="space-y-2">
257
+ <li><a href="#" class="hover:text-yellow-300 transition">Central de ajuda</a></li>
258
+ <li><a href="#" class="hover:text-yellow-300 transition">Termos de uso</a></li>
259
+ <li><a href="#" class="hover:text-yellow-300 transition">Política de privacidade</a></li>
260
+ <li><a href="#" class="hover:text-yellow-300 transition">Segurança</a></li>
261
+ </ul>
262
+ </div>
263
+ <div>
264
+ <h3 class="font-semibold text-lg mb-4">Siga o BB</h3>
265
+ <div class="flex space-x-4">
266
+ <a href="#" class="bb-yellow text-gray-800 p-2 rounded-full hover:bg-yellow-500 transition">
267
+ <i data-feather="facebook"></i>
268
+ </a>
269
+ <a href="#" class="bb-yellow text-gray-800 p-2 rounded-full hover:bg-yellow-500 transition">
270
+ <i data-feather="twitter"></i>
271
+ </a>
272
+ <a href="#" class="bb-yellow text-gray-800 p-2 rounded-full hover:bg-yellow-500 transition">
273
+ <i data-feather="instagram"></i>
274
+ </a>
275
+ <a href="#" class="bb-yellow text-gray-800 p-2 rounded-full hover:bg-yellow-500 transition">
276
+ <i data-feather="linkedin"></i>
277
+ </a>
278
+ </div>
279
+ </div>
280
+ </div>
281
+ <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400">
282
+ <p>© 2023 Banco do Brasil. Todos os direitos reservados.</p>
283
+ </div>
284
+ </div>
285
+ </footer>
286
+
287
+ <script>
288
+ feather.replace();
289
+
290
+ // FAQ accordion functionality
291
+ document.querySelectorAll('.bg-white button').forEach(button => {
292
+ button.addEventListener('click', () => {
293
+ const content = button.nextElementSibling;
294
+ const icon = button.querySelector('i');
295
+
296
+ content.classList.toggle('hidden');
297
+ icon.classList.toggle('rotate-180');
298
+ });
299
+ });
300
+ </script>
301
+ </body>
302
  </html>