Hugging Face's logo

Spaces:
arthhh1
/
futuristico
Running

App Files Community
arthhh1 commited on
Commit
3beb34d
·
verified ·
1 Parent(s): 1254aec

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +383 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Futuristico
3
- emoji: 📚
4
- colorFrom: purple
5
- colorTo: blue
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: futuristico
3
+ emoji: 🐳
4
+ colorFrom: red
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,383 @@
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">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Angola Cor Arte - Tecnologia Corporativa 2050</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
+ @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=Roboto:wght@300;400;700&display=swap');
11
+
12
+ :root {
13
+ --primary: #00f0ff;
14
+ --secondary: #ff00e4;
15
+ --dark: #0a0a1a;
16
+ --light: #f0f0ff;
17
+ }
18
+
19
+ body {
20
+ font-family: 'Roboto', sans-serif;
21
+ background-color: var(--dark);
22
+ color: var(--light);
23
+ overflow-x: hidden;
24
+ }
25
+
26
+ h1, h2, h3, .logo {
27
+ font-family: 'Orbitron', sans-serif;
28
+ }
29
+
30
+ .gradient-text {
31
+ background: linear-gradient(90deg, var(--primary), var(--secondary));
32
+ -webkit-background-clip: text;
33
+ background-clip: text;
34
+ color: transparent;
35
+ }
36
+
37
+ .particle-bg {
38
+ position: absolute;
39
+ top: 0;
40
+ left: 0;
41
+ width: 100%;
42
+ height: 100%;
43
+ z-index: -1;
44
+ opacity: 0.3;
45
+ }
46
+
47
+ .product-card {
48
+ transition: all 0.3s ease;
49
+ transform-style: preserve-3d;
50
+ perspective: 1000px;
51
+ }
52
+
53
+ .product-card:hover {
54
+ transform: translateY(-10px) rotateX(5deg);
55
+ box-shadow: 0 20px 30px rgba(0, 240, 255, 0.3);
56
+ }
57
+
58
+ .product-card .product-image {
59
+ transition: all 0.5s ease;
60
+ }
61
+
62
+ .product-card:hover .product-image {
63
+ transform: scale(1.05) rotateY(10deg);
64
+ }
65
+
66
+ .modal {
67
+ transition: all 0.3s ease;
68
+ opacity: 0;
69
+ visibility: hidden;
70
+ }
71
+
72
+ .modal.active {
73
+ opacity: 1;
74
+ visibility: visible;
75
+ }
76
+
77
+ @keyframes float {
78
+ 0%, 100% { transform: translateY(0); }
79
+ 50% { transform: translateY(-20px); }
80
+ }
81
+
82
+ .floating {
83
+ animation: float 6s ease-in-out infinite;
84
+ }
85
+
86
+ .cart-item {
87
+ transition: all 0.3s ease;
88
+ }
89
+
90
+ .cart-item:hover {
91
+ background: rgba(0, 240, 255, 0.1);
92
+ }
93
+ </style>
94
+ </head>
95
+ <body>
96
+ <!-- Navigation -->
97
+ <nav class="bg-black bg-opacity-80 backdrop-blur-md fixed w-full z-50">
98
+ <div class="container mx-auto px-6 py-4">
99
+ <div class="flex justify-between items-center">
100
+ <div class="logo text-2xl font-bold gradient-text">ANGOLA COR ARTE</div>
101
+ <div class="hidden md:flex space-x-8">
102
+ <a href="#" class="text-white hover:text-cyan-300 transition">Home</a>
103
+ <a href="#products" class="text-white hover:text-cyan-300 transition">Produtos</a>
104
+ <a href="#about" class="text-white hover:text-cyan-300 transition">Sobre</a>
105
+ <a href="#contact" class="text-white hover:text-cyan-300 transition">Contato</a>
106
+ </div>
107
+ <div class="flex items-center space-x-4">
108
+ <button id="cart-btn" class="relative text-white hover:text-cyan-300 transition">
109
+ <i class="fas fa-shopping-cart text-xl"></i>
110
+ <span id="cart-count" class="absolute -top-2 -right-2 bg-cyan-500 text-black rounded-full w-5 h-5 flex items-center justify-center text-xs font-bold">0</span>
111
+ </button>
112
+ <button class="md:hidden text-white">
113
+ <i class="fas fa-bars text-xl"></i>
114
+ </button>
115
+ </div>
116
+ </div>
117
+ </div>
118
+ </nav>
119
+
120
+ <!-- Hero Section -->
121
+ <section class="relative h-screen flex items-center justify-center overflow-hidden pt-16">
122
+ <canvas id="particles" class="particle-bg"></canvas>
123
+ <div class="container mx-auto px-6 text-center z-10">
124
+ <h1 class="text-5xl md:text-7xl font-bold mb-6 gradient-text">TECNOLOGIA CORPORATIVA 2050</h1>
125
+ <p class="text-xl md:text-2xl mb-10 max-w-3xl mx-auto">Soluções avançadas para o escritório do futuro. Experiência 6D de compra adaptada para o presente.</p>
126
+ <div class="flex flex-wrap justify-center gap-4">
127
+ <a href="#products" class="px-8 py-3 bg-gradient-to-r from-cyan-500 to-purple-600 rounded-full font-bold hover:opacity-90 transition">Explorar Produtos</a>
128
+ <a href="#about" class="px-8 py-3 border border-cyan-500 text-cyan-500 rounded-full font-bold hover:bg-cyan-500 hover:bg-opacity-10 transition">Sobre Nós</a>
129
+ </div>
130
+ </div>
131
+ <div class="absolute bottom-10 left-0 right-0 flex justify-center">
132
+ <a href="#products" class="text-white animate-bounce">
133
+ <i class="fas fa-chevron-down text-2xl"></i>
134
+ </a>
135
+ </div>
136
+ </section>
137
+
138
+ <!-- Categories Section -->
139
+ <section id="products" class="py-20 bg-gradient-to-b from-black to-gray-900">
140
+ <div class="container mx-auto px-6">
141
+ <h2 class="text-4xl font-bold text-center mb-16 gradient-text">NOSSAS CATEGORIAS</h2>
142
+
143
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10">
144
+ <!-- Category 1 -->
145
+ <div class="product-card bg-gray-800 rounded-xl p-6 shadow-lg border border-gray-700">
146
+ <div class="product-image mb-6 overflow-hidden rounded-lg">
147
+ <img src="https://images.unsplash.com/photo-1593642632823-8f785ba67e45?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" alt="Portáteis Corporativos" class="w-full h-48 object-cover rounded-lg">
148
+ </div>
149
+ <h3 class="text-2xl font-bold mb-3 text-cyan-400">Portáteis Corporativos</h3>
150
+ <p class="text-gray-300 mb-4">Laptops com IA integrada para produtividade máxima.</p>
151
+ <button class="view-products px-4 py-2 bg-cyan-600 hover:bg-cyan-700 rounded-lg transition" data-category="laptops">Ver Produtos</button>
152
+ </div>
153
+
154
+ <!-- Category 2 -->
155
+ <div class="product-card bg-gray-800 rounded-xl p-6 shadow-lg border border-gray-700">
156
+ <div class="product-image mb-6 overflow-hidden rounded-lg">
157
+ <img src="https://images.unsplash.com/photo-1593508512255-86ab42a8e620?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" alt="Realidade Estendida" class="w-full h-48 object-cover rounded-lg">
158
+ </div>
159
+ <h3 class="text-2xl font-bold mb-3 text-purple-400">Realidade Estendida</h3>
160
+ <p class="text-gray-300 mb-4">Kits VR/AR empresariais para colaboração imersiva.</p>
161
+ <button class="view-products px-4 py-2 bg-purple-600 hover:bg-purple-700 rounded-lg transition" data-category="vr">Ver Produtos</button>
162
+ </div>
163
+
164
+ <!-- Category 3 -->
165
+ <div class="product-card bg-gray-800 rounded-xl p-6 shadow-lg border border-gray-700">
166
+ <div class="product-image mb-6 overflow-hidden rounded-lg">
167
+ <img src="https://images.unsplash.com/photo-1560954717-7c043a3bd8ea?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" alt="Energia de Fusão Portátil" class="w-full h-48 object-cover rounded-lg">
168
+ </div>
169
+ <h3 class="text-2xl font-bold mb-3 text-green-400">Energia de Fusão Portátil</h3>
170
+ <p class="text-gray-300 mb-4">Baterias de alta capacidade para operação contínua.</p>
171
+ <button class="view-products px-4 py-2 bg-green-600 hover:bg-green-700 rounded-lg transition" data-category="batteries">Ver Produtos</button>
172
+ </div>
173
+
174
+ <!-- Category 4 -->
175
+ <div class="product-card bg-gray-800 rounded-xl p-6 shadow-lg border border-gray-700">
176
+ <div class="product-image mb-6 overflow-hidden rounded-lg">
177
+ <img src="https://images.unsplash.com/photo-1517705008128-361805f42e86?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" alt="Escritório Neuroergonômico" class="w-full h-48 object-cover rounded-lg">
178
+ </div>
179
+ <h3 class="text-2xl font-bold mb-3 text-blue-400">Escritório Neuroergonômico</h3>
180
+ <p class="text-gray-300 mb-4">Cadeiras com biofeedback para conforto ideal.</p>
181
+ <button class="view-products px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded-lg transition" data-category="chairs">Ver Produtos</button>
182
+ </div>
183
+
184
+ <!-- Category 5 -->
185
+ <div class="product-card bg-gray-800 rounded-xl p-6 shadow-lg border border-gray-700">
186
+ <div class="product-image mb-6 overflow-hidden rounded-lg">
187
+ <img src="https://images.unsplash.com/photo-1551269901-5c5e14c25df7?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" alt="Displays Holográficos" class="w-full h-48 object-cover rounded-lg">
188
+ </div>
189
+ <h3 class="text-2xl font-bold mb-3 text-yellow-400">Displays Holográficos</h3>
190
+ <p class="text-gray-300 mb-4">Projetores 3D de mesa para visualização avançada.</p>
191
+ <button class="view-products px-4 py-2 bg-yellow-600 hover:bg-yellow-700 rounded-lg transition" data-category="displays">Ver Produtos</button>
192
+ </div>
193
+
194
+ <!-- Category 6 -->
195
+ <div class="product-card bg-gray-800 rounded-xl p-6 shadow-lg border border-gray-700">
196
+ <div class="product-image mb-6 overflow-hidden rounded-lg">
197
+ <img src="https://images.unsplash.com/photo-1550751827-4bd374c3f58b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" alt="Segurança Quântica" class="w-full h-48 object-cover rounded-lg">
198
+ </div>
199
+ <h3 class="text-2xl font-bold mb-3 text-red-400">Segurança Quântica</h3>
200
+ <p class="text-gray-300 mb-4">HDs criptográficos para proteção máxima de dados.</p>
201
+ <button class="view-products px-4 py-2 bg-red-600 hover:bg-red-700 rounded-lg transition" data-category="security">Ver Produtos</button>
202
+ </div>
203
+ </div>
204
+ </div>
205
+ </section>
206
+
207
+ <!-- Featured Products -->
208
+ <section class="py-20 bg-gray-900">
209
+ <div class="container mx-auto px-6">
210
+ <h2 class="text-4xl font-bold text-center mb-16 gradient-text">DESTAQUES</h2>
211
+
212
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
213
+ <!-- Product 1 -->
214
+ <div class="product-card bg-gray-800 rounded-xl p-6 shadow-lg border border-gray-700">
215
+ <div class="product-image mb-4 overflow-hidden rounded-lg relative">
216
+ <img src="https://images.unsplash.com/photo-1592899677977-9c10ca588bbd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" alt="Quantum Laptop X9" class="w-full h-48 object-cover rounded-lg">
217
+ <div class="absolute top-2 right-2 bg-cyan-600 text-xs font-bold px-2 py-1 rounded">NOVO</div>
218
+ </div>
219
+ <h3 class="text-xl font-bold mb-2 text-cyan-400">Quantum Laptop X9</h3>
220
+ <div class="flex items-center mb-2">
221
+ <div class="flex text-yellow-400">
222
+ <i class="fas fa-star"></i>
223
+ <i class="fas fa-star"></i>
224
+ <i class="fas fa-star"></i>
225
+ <i class="fas fa-star"></i>
226
+ <i class="fas fa-star-half-alt"></i>
227
+ </div>
228
+ <span class="text-gray-400 text-sm ml-2">(42)</span>
229
+ </div>
230
+ <p class="text-gray-300 text-sm mb-4">Processador quântico de 128 qbits com IA integrada.</p>
231
+ <div class="flex justify-between items-center">
232
+ <span class="text-xl font-bold">$4,299</span>
233
+ <button class="add-to-cart px-3 py-1 bg-cyan-600 hover:bg-cyan-700 rounded-lg transition text-sm" data-id="1" data-name="Quantum Laptop X9" data-price="4299" data-image="https://images.unsplash.com/photo-1592899677977-9c10ca588bbd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80">
234
+ <i class="fas fa-cart-plus"></i>
235
+ </button>
236
+ </div>
237
+ </div>
238
+
239
+ <!-- Product 2 -->
240
+ <div class="product-card bg-gray-800 rounded-xl p-6 shadow-lg border border-gray-700">
241
+ <div class="product-image mb-4 overflow-hidden rounded-lg relative">
242
+ <img src="https://images.unsplash.com/photo-1593508512255-86ab42a8e620?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" alt="Holosuite Pro" class="w-full h-48 object-cover rounded-lg">
243
+ </div>
244
+ <h3 class="text-xl font-bold mb-2 text-purple-400">Holosuite Pro</h3>
245
+ <div class="flex items-center mb-2">
246
+ <div class="flex text-yellow-400">
247
+ <i class="fas fa-star"></i>
248
+ <i class="fas fa-star"></i>
249
+ <i class="fas fa-star"></i>
250
+ <i class="fas fa-star"></i>
251
+ <i class="far fa-star"></i>
252
+ </div>
253
+ <span class="text-gray-400 text-sm ml-2">(36)</span>
254
+ </div>
255
+ <p class="text-gray-300 text-sm mb-4">Sistema de realidade estendida para reuniões holográficas.</p>
256
+ <div class="flex justify-between items-center">
257
+ <span class="text-xl font-bold">$3,599</span>
258
+ <button class="add-to-cart px-3 py-1 bg-purple-600 hover:bg-purple-700 rounded-lg transition text-sm" data-id="2" data-name="Holosuite Pro" data-price="3599" data-image="https://images.unsplash.com/photo-1593508512255-86ab42a8e620?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80">
259
+ <i class="fas fa-cart-plus"></i>
260
+ </button>
261
+ </div>
262
+ </div>
263
+
264
+ <!-- Product 3 -->
265
+ <div class="product-card bg-gray-800 rounded-xl p-6 shadow-lg border border-gray-700">
266
+ <div class="product-image mb-4 overflow-hidden rounded-lg relative">
267
+ <img src="https://images.unsplash.com/photo-1560954717-7c043a3bd8ea?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" alt="Fusion Core 5000" class="w-full h-48 object-cover rounded-lg">
268
+ <div class="absolute top-2 right-2 bg-green-600 text-xs font-bold px-2 py-1 rounded">ECO</div>
269
+ </div>
270
+ <h3 class="text-xl font-bold mb-2 text-green-400">Fusion Core 5000</h3>
271
+ <div class="flex items-center mb-2">
272
+ <div class="flex text-yellow-400">
273
+ <i class="fas fa-star"></i>
274
+ <i class="fas fa-star"></i>
275
+ <i class="fas fa-star"></i>
276
+ <i class="fas fa-star"></i>
277
+ <i class="fas fa-star"></i>
278
+ </div>
279
+ <span class="text-gray-400 text-sm ml-2">(58)</span>
280
+ </div>
281
+ <p class="text-gray-300 text-sm mb-4">Bateria de fusão portátil com 1 ano de autonomia.</p>
282
+ <div class="flex justify-between items-center">
283
+ <span class="text-xl font-bold">$2,899</span>
284
+ <button class="add-to-cart px-3 py-1 bg-green-600 hover:bg-green-700 rounded-lg transition text-sm" data-id="3" data-name="Fusion Core 5000" data-price="2899" data-image="https://images.unsplash.com/photo-1560954717-7c043a3bd8ea?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80">
285
+ <i class="fas fa-cart-plus"></i>
286
+ </button>
287
+ </div>
288
+ </div>
289
+
290
+ <!-- Product 4 -->
291
+ <div class="product-card bg-gray-800 rounded-xl p-6 shadow-lg border border-gray-700">
292
+ <div class="product-image mb-4 overflow-hidden rounded-lg relative">
293
+ <img src="https://images.unsplash.com/photo-1517705008128-361805f42e86?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" alt="NeuroChair Elite" class="w-full h-48 object-cover rounded-lg">
294
+ </div>
295
+ <h3 class="text-xl font-bold mb-2 text-blue-400">NeuroChair Elite</h3>
296
+ <div class="flex items-center mb-2">
297
+ <div class="flex text-yellow-400">
298
+ <i class="fas fa-star"></i>
299
+ <i class="fas fa-star"></i>
300
+ <i class="fas fa-star"></i>
301
+ <i class="fas fa-star"></i>
302
+ <i class="fas fa-star-half-alt"></i>
303
+ </div>
304
+ <span class="text-gray-400 text-sm ml-2">(47)</span>
305
+ </div>
306
+ <p class="text-gray-300 text-sm mb-4">Cadeira com biofeedback para postura perfeita.</p>
307
+ <div class="flex justify-between items-center">
308
+ <span class="text-xl font-bold">$1,799</span>
309
+ <button class="add-to-cart px-3 py-1 bg-blue-600 hover:bg-blue-700 rounded-lg transition text-sm" data-id="4" data-name="NeuroChair Elite" data-price="1799" data-image="https://images.unsplash.com/photo-1517705008128-361805f42e86?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80">
310
+ <i class="fas fa-cart-plus"></i>
311
+ </button>
312
+ </div>
313
+ </div>
314
+ </div>
315
+
316
+ <div class="text-center mt-12">
317
+ <button class="px-6 py-3 bg-gradient-to-r from-purple-600 to-cyan-500 rounded-full font-bold hover:opacity-90 transition">Ver Todos os Produtos</button>
318
+ </div>
319
+ </div>
320
+ </section>
321
+
322
+ <!-- About Section -->
323
+ <section id="about" class="py-20 bg-black">
324
+ <div class="container mx-auto px-6">
325
+ <div class="flex flex-col lg:flex-row items-center">
326
+ <div class="lg:w-1/2 mb-10 lg:mb-0 lg:pr-10">
327
+ <h2 class="text-4xl font-bold mb-6 gradient-text">SOBRE A ANGOLA COR ARTE</h2>
328
+ <p class="text-gray-300 mb-4">Na vanguarda da tecnologia corporativa desde 2045, a Angola Cor Arte redefine o conceito de produtividade com soluções que transcendem as expectativas convencionais.</p>
329
+ <p class="text-gray-300 mb-6">Nossa abordagem "6D" combina design futurista, funcionalidade inovadora e experiência personalizada para criar produtos que não apenas atendem, mas antecipam as necessidades do mercado.</p>
330
+ <div class="flex flex-wrap gap-4">
331
+ <div class="bg-gray-800 bg-opacity-50 p-4 rounded-lg border border-gray-700 flex-1 min-w-[200px]">
332
+ <div class="text-cyan-400 text-3xl mb-2">
333
+ <i class="fas fa-atom"></i>
334
+ </div>
335
+ <h3 class="font-bold mb-1">Tecnologia Quântica</h3>
336
+ <p class="text-gray-400 text-sm">Processadores que redefinem o possível</p>
337
+ </div>
338
+ <div class="bg-gray-800 bg-opacity-50 p-4 rounded-lg border border-gray-700 flex-1 min-w-[200px]">
339
+ <div class="text-purple-400 text-3xl mb-2">
340
+ <i class="fas fa-brain"></i>
341
+ </div>
342
+ <h3 class="font-bold mb-1">IA Integrada</h3>
343
+ <p class="text-gray-400 text-sm">Assistência inteligente em todos os produtos</p>
344
+ </div>
345
+ </div>
346
+ </div>
347
+ <div class="lg:w-1/2 relative">
348
+ <div class="bg-gradient-to-br from-cyan-500 to-purple-600 rounded-xl p-1 floating">
349
+ <img src="https://images.unsplash.com/photo-1551269901-5c5e14c25df7?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" alt="Escritório Futurista" class="w-full h-auto rounded-lg">
350
+ </div>
351
+ <div class="absolute -bottom-5 -left-5 w-32 h-32 bg-purple-600 rounded-full opacity-20 -z-10"></div>
352
+ <div class="absolute -top-5 -right-5 w-24 h-24 bg-cyan-600 rounded-full opacity-20 -z-10"></div>
353
+ </div>
354
+ </div>
355
+ </div>
356
+ </section>
357
+
358
+ <!-- Contact Section -->
359
+ <section id="contact" class="py-20 bg-gray-900">
360
+ <div class="container mx-auto px-6">
361
+ <h2 class="text-4xl font-bold text-center mb-16 gradient-text">ENTRE EM CONTATO</h2>
362
+
363
+ <div class="flex flex-col lg:flex-row gap-10">
364
+ <div class="lg:w-1/2">
365
+ <form id="contact-form" class="space-y-6">
366
+ <div>
367
+ <label for="name" class="block text-gray-300 mb-2">Nome</label>
368
+ <input type="text" id="name" class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-cyan-500" required>
369
+ </div>
370
+ <div>
371
+ <label for="email" class="block text-gray-300 mb-2">Email</label>
372
+ <input type="email" id="email" class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-cyan-500" required>
373
+ </div>
374
+ <div>
375
+ <label for="message" class="block text-gray-300 mb-2">Mensagem</label>
376
+ <textarea id="message" rows="5" class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-cyan-500" required></textarea>
377
+ </div>
378
+ <button type="submit" class="px-8 py-3 bg-gradient-to-r from-cyan-500 to-purple-600 rounded-full font-bold hover:opacity-90 transition w-full">Enviar Mensagem</button>
379
+ </form>
380
+ </div>
381
+ <div class="lg:w-1/2">
382
+ <
383
+ </html>