Spaces:

arthhh1
/

teste

Running

App Files Files Community

arthhh1 commited on Apr 2, 2025

Commit

f1fca27

verified ·

1 Parent(s): 49e189b

Add 2 files

Browse files

Files changed (2) hide show

README.md +7 -5
index.html +762 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Teste
-emoji: 👁
-colorFrom: indigo
-colorTo: purple
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: teste
+emoji: 🐳
+colorFrom: red
+colorTo: green
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,762 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="pt-br">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Angola Cor Arte - O Futuro é um Holograma</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700;900&family=Roboto:wght@300;400;500;700&display=swap');
+        :root {
+            --primary-dark: #0a0a1a;
+            --primary-blue: #0a1a8a;
+            --neon-purple: #9d00ff;
+            --neon-blue: #00f0ff;
+            --reflective-silver: #e0e0e0;
+        }
+        body {
+            font-family: 'Roboto', sans-serif;
+            background-color: var(--primary-dark);
+            color: white;
+            overflow-x: hidden;
+        }
+        h1, h2, h3, h4, .logo, .nav-item {
+            font-family: 'Orbitron', sans-serif;
+        }
+        .holographic-effect {
+            position: relative;
+            overflow: hidden;
+        }
+        .holographic-effect::before {
+            content: '';
+            position: absolute;
+            top: -50%;
+            left: -50%;
+            width: 200%;
+            height: 200%;
+            background: linear-gradient(
+                to bottom right,
+                rgba(157, 0, 255, 0.1),
+                rgba(0, 240, 255, 0.1),
+                rgba(157, 0, 255, 0.1)
+            );
+            transform: rotate(30deg);
+            animation: hologram 6s linear infinite;
+            z-index: -1;
+        }
+        @keyframes hologram {
+            0% { transform: rotate(30deg) translateX(0); }
+            100% { transform: rotate(30deg) translateX(-50%); }
+        }
+        .neon-text {
+            text-shadow: 0 0 5px var(--neon-purple),
+                         0 0 10px var(--neon-purple),
+                         0 0 20px var(--neon-blue);
+        }
+        .neon-border {
+            box-shadow: 0 0 5px var(--neon-purple),
+                        0 0 10px var(--neon-purple),
+                        0 0 20px var(--neon-blue),
+                        inset 0 0 5px var(--neon-purple),
+                        inset 0 0 10px var(--neon-purple),
+                        inset 0 0 20px var(--neon-blue);
+        }
+        .particle-bg {
+            position: relative;
+            overflow: hidden;
+        }
+        .particle-bg::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-image: radial-gradient(circle, rgba(0, 240, 255, 0.1) 1px, transparent 1px);
+            background-size: 20px 20px;
+            z-index: -1;
+        }
+        .category-card:hover {
+            transform: translateY(-10px);
+            box-shadow: 0 10px 25px rgba(157, 0, 255, 0.5);
+        }
+        .product-card {
+            perspective: 1000px;
+        }
+        .product-inner {
+            transition: transform 0.6s;
+            transform-style: preserve-3d;
+        }
+        .product-card:hover .product-inner {
+            transform: rotateY(180deg);
+        }
+        .product-front, .product-back {
+            backface-visibility: hidden;
+            position: absolute;
+            width: 100%;
+            height: 100%;
+        }
+        .product-back {
+            transform: rotateY(180deg);
+        }
+        .cart-pulse {
+            animation: pulse 2s infinite;
+        }
+        @keyframes pulse {
+            0% { box-shadow: 0 0 0 0 rgba(157, 0, 255, 0.7); }
+            70% { box-shadow: 0 0 0 15px rgba(157, 0, 255, 0); }
+            100% { box-shadow: 0 0 0 0 rgba(157, 0, 255, 0); }
+        }
+        .floating {
+            animation: floating 3s ease-in-out infinite;
+        }
+        @keyframes floating {
+            0% { transform: translateY(0px); }
+            50% { transform: translateY(-15px); }
+            100% { transform: translateY(0px); }
+        }
+        .circuit-hover:hover ~ .particle-bg::before {
+            background-image: radial-gradient(circle, rgba(0, 240, 255, 0.3) 1px, transparent 1px);
+            animation: circuit 1s linear forwards;
+        }
+        @keyframes circuit {
+            0% { background-size: 20px 20px; }
+            100% { background-size: 15px 15px; }
+        }
+        .holographic-menu {
+            transform: translate3d(0, 0, 0);
+            perspective: 1000px;
+        }
+        .holographic-menu-item {
+            transition: all 0.3s ease;
+            transform-style: preserve-3d;
+        }
+        .holographic-menu-item:hover {
+            transform: translateY(-3px) translateZ(20px);
+            text-shadow: 0 0 8px var(--neon-purple);
+        }
+    </style>
+</head>
+<body class="min-h-screen">
+    <!-- Floating Header -->
+    <header class="fixed top-0 left-0 right-0 z-40 transition-all duration-500 bg-opacity-90 backdrop-blur-md bg-black" id="header">
+        <div class="container mx-auto px-4 py-3 flex justify-between items-center">
+            <div class="logo flex items-center">
+                <div class="w-10 h-10 rounded-full bg-gradient-to-br from-purple-600 to-blue-500 mr-2"></div>
+                <h1 class="text-2xl font-bold neon-text">Angola Cor Arte</h1>
+            </div>
+            <nav class="hidden md:flex space-x-8 holographic-menu">
+                <a href="#" class="nav-item text-white hover:text-purple-400 transition-colors holographic-menu-item">Home</a>
+                <a href="#" class="nav-item text-white hover:text-purple-400 transition-colors holographic-menu-item">Produtos</a>
+                <a href="#" class="nav-item text-white hover:text-purple-400 transition-colors holographic-menu-item">Tecnologias</a>
+                <a href="#" class="nav-item text-white hover:text-purple-400 transition-colors holographic-menu-item">Sobre Nós</a>
+                <a href="#" class="nav-item text-white hover:text-purple-400 transition-colors holographic-menu-item">Contato</a>
+            </nav>
+            <div class="flex items-center space-x-4">
+                <button class="relative">
+                    <i class="fas fa-search text-white text-xl hover:text-purple-400 transition-colors"></i>
+                </button>
+                <button class="relative" id="cart-btn">
+                    <i class="fas fa-shopping-cart text-white text-xl hover:text-purple-400 transition-colors"></i>
+                    <span class="absolute -top-2 -right-2 bg-purple-600 text-white text-xs font-bold rounded-full h-5 w-5 flex items-center justify-center cart-pulse">0</span>
+                </button>
+                <button class="md:hidden text-white text-xl" id="menu-btn">
+                    <i class="fas fa-bars"></i>
+                </button>
+            </div>
+        </div>
+    </header>
+    <!-- Mobile Menu -->
+    <div id="mobile-menu" class="fixed inset-0 bg-black bg-opacity-90 z-50 hidden flex flex-col items-center justify-center">
+        <button id="close-menu" class="absolute top-6 right-6 text-white text-2xl">
+            <i class="fas fa-times"></i>
+        </button>
+        <nav class="flex flex-col space-y-8 text-center">
+            <a href="#" class="nav-item text-2xl text-white hover:text-purple-400 transition-colors">Home</a>
+            <a href="#" class="nav-item text-2xl text-white hover:text-purple-400 transition-colors">Produtos</a>
+            <a href="#" class="nav-item text-2xl text-white hover:text-purple-400 transition-colors">Tecnologias</a>
+            <a href="#" class="nav-item text-2xl text-white hover:text-purple-400 transition-colors">Sobre Nós</a>
+            <a href="#" class="nav-item text-2xl text-white hover:text-purple-400 transition-colors">Contato</a>
+        </nav>
+    </div>
+    <!-- Hero Section -->
+    <section class="h-screen pt-20 particle-bg flex items-center justify-center relative overflow-hidden">
+        <div class="absolute inset-0 z-0">
+            <div class="absolute top-1/4 left-1/4 w-32 h-32 rounded-full bg-purple-600 opacity-20 blur-3xl"></div>
+            <div class="absolute bottom-1/3 right-1/4 w-40 h-40 rounded-full bg-blue-600 opacity-20 blur-3xl"></div>
+        </div>
+        <div class="container mx-auto px-4 z-10 flex flex-col md:flex-row items-center">
+            <div class="md:w-1/2 mb-10 md:mb-0">
+                <h2 class="text-4xl md:text-6xl font-bold mb-6 neon-text">O Futuro é um Holograma</h2>
+                <p class="text-xl md:text-2xl mb-8 text-gray-300">Explore nossa coleção de produtos high-tech que trazem o amanhã para o seu presente.</p>
+                <button class="px-8 py-3 bg-gradient-to-r from-purple-600 to-blue-500 rounded-full font-bold hover:opacity-90 transition-opacity neon-border">
+                    Explorar Produtos
+                </button>
+            </div>
+            <div class="md:w-1/2 flex justify-center">
+                <div class="relative w-64 h-64 md:w-80 md:h-80">
+                    <div class="absolute inset-0 rounded-full bg-gradient-to-br from-purple-600 to-blue-500 opacity-30 blur-xl"></div>
+                    <div class="relative w-full h-full flex items-center justify-center">
+                        <div class="holographic-effect w-48 h-48 md:w-64 md:h-64 bg-black bg-opacity-50 rounded-lg flex items-center justify-center neon-border">
+                            <img src="https://via.placeholder.com/300x300?text=Holograma" alt="Holographic Product" class="w-3/4 h-3/4 object-contain floating">
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="absolute bottom-10 left-0 right-0 flex justify-center">
+            <a href="#categories" class="text-white animate-bounce">
+                <i class="fas fa-chevron-down text-2xl"></i>
+            </a>
+        </div>
+    </section>
+    <!-- Categories Section -->
+    <section id="categories" class="py-20 bg-gradient-to-b from-black to-gray-900 particle-bg circuit-hover">
+        <div class="container mx-auto px-4">
+            <h2 class="text-3xl md:text-4xl font-bold text-center mb-16 neon-text">Nossas Categorias</h2>
+            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">
+                <!-- Category 1 -->
+                <div class="category-card bg-gray-900 rounded-xl p-6 transition-all duration-300 hover:neon-border">
+                    <div class="w-16 h-16 bg-purple-600 rounded-lg flex items-center justify-center mb-4 mx-auto">
+                        <i class="fas fa-brain text-2xl"></i>
+                    </div>
+                    <h3 class="text-xl font-bold text-center mb-2">NeuroLaptops</h3>
+                    <p class="text-gray-400 text-center">Computadores com interfaces neurais</p>
+                    <div class="absolute inset-0 hover-div hidden group-hover:block"></div>
+                </div>
+                <!-- Category 2 -->
+                <div class="category-card bg-gray-900 rounded-xl p-6 transition-all duration-300 hover:neon-border">
+                    <div class="w-16 h-16 bg-blue-600 rounded-lg flex items-center justify-center mb-4 mx-auto">
+                        <i class="fas fa-vr-cardboard text-2xl"></i>
+                    </div>
+                    <h3 class="text-xl font-bold text-center mb-2">Realidade Quântica</h3>
+                    <p class="text-gray-400 text-center">Óculos holográficos e luvas táteis</p>
+                </div>
+                <!-- Category 3 -->
+                <div class="category-card bg-gray-900 rounded-xl p-6 transition-all duration-300 hover:neon-border">
+                    <div class="w-16 h-16 bg-purple-600 rounded-lg flex items-center justify-center mb-4 mx-auto">
+                        <i class="fas fa-desktop text-2xl"></i>
+                    </div>
+                    <h3 class="text-xl font-bold text-center mb-2">Escritório Fluido</h3>
+                    <p class="text-gray-400 text-center">Mesas com projeção 3D integrada</p>
+                </div>
+                <!-- Category 4 -->
+                <div class="category-card bg-gray-900 rounded-xl p-6 transition-all duration-300 hover:neon-border">
+                    <div class="w-16 h-16 bg-blue-600 rounded-lg flex items-center justify-center mb-4 mx-auto">
+                        <i class="fas fa-solar-panel text-2xl"></i>
+                    </div>
+                    <h3 class="text-xl font-bold text-center mb-2">Energia do Espaço</h3>
+                    <p class="text-gray-400 text-center">Carregadores por indução solar</p>
+                </div>
+                <!-- Category 5 -->
+                <div class="category-card bg-gray-900 rounded-xl p-6 transition-all duration-300 hover:neon-border">
+                    <div class="w-16 h-16 bg-purple-600 rounded-lg flex items-center justify-center mb-4 mx-auto">
+                        <i class="fas fa-pen-fancy text-2xl"></i>
+                    </div>
+                    <h3 class="text-xl font-bold text-center mb-2">Papelaria Holográfica</h3>
+                    <p class="text-gray-400 text-center">Canetas 3D e cadernos digitais</p>
+                </div>
+                <!-- Category 6 -->
+                <div class="category-card bg-gray-900 rounded-xl p-6 transition-all duration-300 hover:neon-border">
+                    <div class="w-16 h-16 bg-blue-600 rounded-lg flex items-center justify-center mb-4 mx-auto">
+                        <i class="fas fa-music text-2xl"></i>
+                    </div>
+                    <h3 class="text-xl font-bold text-center mb-2">Áudio Imersivo</h3>
+                    <p class="text-gray-400 text-center">Alto-falantes com hologramas musicais</p>
+                </div>
+                <!-- Category 7 -->
+                <div class="category-card bg-gray-900 rounded-xl p-6 transition-all duration-300 hover:neon-border">
+                    <div class="w-16 h-16 bg-purple-600 rounded-lg flex items-center justify-center mb-4 mx-auto">
+                        <i class="fas fa-lock text-2xl"></i>
+                    </div>
+                    <h3 class="text-xl font-bold text-center mb-2">Segurança Cósmica</h3>
+                    <p class="text-gray-400 text-center">HDs com criptografia quântica</p>
+                </div>
+                <!-- Category 8 -->
+                <div class="category-card bg-gray-900 rounded-xl p-6 transition-all duration-300 hover:neon-border">
+                    <div class="w-16 h-16 bg-blue-600 rounded-lg flex items-center justify-center mb-4 mx-auto">
+                        <i class="fas fa-gamepad text-2xl"></i>
+                    </div>
+                    <h3 class="text-xl font-bold text-center mb-2">Gaming Multidimensional</h3>
+                    <p class="text-gray-400 text-center">Teclados com feedback tátil 3D</p>
+                </div>
+            </div>
+            <div class="text-center mt-12">
+                <button class="px-6 py-2 border border-purple-600 text-purple-400 rounded-full hover:bg-purple-600 hover:text-white transition-colors">
+                    Ver Todas as Categorias
+                </button>
+            </div>
+        </div>
+    </section>
+    <!-- Featured Products -->
+    <section class="py-20 bg-black particle-bg">
+        <div class="container mx-auto px-4">
+            <h2 class="text-3xl md:text-4xl font-bold text-center mb-16 neon-text">Produtos em Destaque</h2>
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+                <!-- Product 1 -->
+                <div class="product-card bg-gray-900 rounded-xl p-6 h-96 relative">
+                    <div class="product-inner w-full h-full">
+                        <div class="product-front flex flex-col">
+                            <div class="h-48 mb-4 flex items-center justify-center">
+                                <img src="https://via.placeholder.com/300x300?text=NeuroLaptop" alt="NeuroLaptop" class="h-full object-contain floating">
+                            </div>
+                            <h3 class="text-xl font-bold mb-2">NeuroLaptop X-9000</h3>
+                            <p class="text-gray-400 mb-4">Interface neural direta para produtividade máxima</p>
+                            <div class="mt-auto flex justify-between items-center">
+                                <span class="text-2xl font-bold text-purple-400">$3,999</span>
+                                <button class="px-4 py-2 bg-purple-600 rounded-full text-sm font-bold hover:bg-purple-700 transition-colors">
+                                    Adicionar ao Carrinho
+                                </button>
+                            </div>
+                        </div>
+                        <div class="product-back bg-gray-800 p-6 rounded-xl flex flex-col">
+                            <h3 class="text-xl font-bold mb-4">Especificações</h3>
+                            <ul class="text-gray-300 space-y-2 text-sm">
+                                <li><i class="fas fa-microchip mr-2 text-purple-400"></i> Processador Neural 12 núcleos</li>
+                                <li><i class="fas fa-memory mr-2 text-purple-400"></i> 32GB RAM Holográfica</li>
+                                <li><i class="fas fa-hdd mr-2 text-purple-400"></i> 2TB SSD Quântico</li>
+                                <li><i class="fas fa-eye mr-2 text-purple-400"></i> Tela Retina 8K HDR</li>
+                                <li><i class="fas fa-brain mr-2 text-purple-400"></i> Interface Neural Integrada</li>
+                            </ul>
+                            <button class="mt-auto px-4 py-2 border border-purple-600 text-purple-400 rounded-full text-sm font-bold hover:bg-purple-600 hover:text-white transition-colors">
+                                Ver em Realidade Aumentada
+                            </button>
+                        </div>
+                    </div>
+                </div>
+                <!-- Product 2 -->
+                <div class="product-card bg-gray-900 rounded-xl p-6 h-96 relative">
+                    <div class="product-inner w-full h-full">
+                        <div class="product-front flex flex-col">
+                            <div class="h-48 mb-4 flex items-center justify-center">
+                                <img src="https://via.placeholder.com/300x300?text=HoloGlasses" alt="HoloGlasses" class="h-full object-contain floating">
+                            </div>
+                            <h3 class="text-xl font-bold mb-2">Óculos Holográficos Q-Reality</h3>
+                            <p class="text-gray-400 mb-4">Experiência de realidade mista em 360°</p>
+                            <div class="mt-auto flex justify-between items-center">
+                                <span class="text-2xl font-bold text-blue-400">$1,799</span>
+                                <button class="px-4 py-2 bg-blue-600 rounded-full text-sm font-bold hover:bg-blue-700 transition-colors">
+                                    Adicionar ao Carrinho
+                                </button>
+                            </div>
+                        </div>
+                        <div class="product-back bg-gray-800 p-6 rounded-xl flex flex-col">
+                            <h3 class="text-xl font-bold mb-4">Especificações</h3>
+                            <ul class="text-gray-300 space-y-2 text-sm">
+                                <li><i class="fas fa-eye mr-2 text-blue-400"></i> Resolução 8K por olho</li>
+                                <li><i class="fas fa-satellite-dish mr-2 text-blue-400"></i> Rastreamento 360°</li>
+                                <li><i class="fas fa-hand-paper mr-2 text-blue-400"></i> Controle por gestos</li>
+                                <li><i class="fas fa-wifi mr-2 text-blue-400"></i> Conexão 6G integrada</li>
+                                <li><i class="fas fa-clock mr-2 text-blue-400"></i> 12h de bateria</li>
+                            </ul>
+                            <button class="mt-auto px-4 py-2 border border-blue-600 text-blue-400 rounded-full text-sm font-bold hover:bg-blue-600 hover:text-white transition-colors">
+                                Ver em Realidade Aumentada
+                            </button>
+                        </div>
+                    </div>
+                </div>
+                <!-- Product 3 -->
+                <div class="product-card bg-gray-900 rounded-xl p-6 h-96 relative">
+                    <div class="product-inner w-full h-full">
+                        <div class="product-front flex flex-col">
+                            <div class="h-48 mb-4 flex items-center justify-center">
+                                <img src="https://via.placeholder.com/300x300?text=HoloDesk" alt="HoloDesk" class="h-full object-contain floating">
+                            </div>
+                            <h3 class="text-xl font-bold mb-2">Mesa Holográfica Flux</h3>
+                            <p class="text-gray-400 mb-4">Superfície de trabalho com projeção 3D integrada</p>
+                            <div class="mt-auto flex justify-between items-center">
+                                <span class="text-2xl font-bold text-purple-400">$2,499</span>
+                                <button class="px-4 py-2 bg-purple-600 rounded-full text-sm font-bold hover:bg-purple-700 transition-colors">
+                                    Adicionar ao Carrinho
+                                </button>
+                            </div>
+                        </div>
+                        <div class="product-back bg-gray-800 p-6 rounded-xl flex flex-col">
+                            <h3 class="text-xl font-bold mb-4">Especificações</h3>
+                            <ul class="text-gray-300 space-y-2 text-sm">
+                                <li><i class="fas fa-border-all mr-2 text-purple-400"></i> Área de projeção 120x80cm</li>
+                                <li><i class="fas fa-touch mr-2 text-purple-400"></i> Sensível a toque e gestos</li>
+                                <li><i class="fas fa-users mr-2 text-purple-400"></i> Multi-usuário simultâneo</li>
+                                <li><i class="fas fa-plug mr-2 text-purple-400"></i> Carregamento sem fio integrado</li>
+                                <li><i class="fas fa-cog mr-2 text-purple-400"></i> Ajuste de altura automático</li>
+                            </ul>
+                            <button class="mt-auto px-4 py-2 border border-purple-600 text-purple-400 rounded-full text-sm font-bold hover:bg-purple-600 hover:text-white transition-colors">
+                                Ver em Realidade Aumenteda
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="text-center mt-12">
+                <button class="px-6 py-2 border border-purple-600 text-purple-400 rounded-full hover:bg-purple-600 hover:text-white transition-colors">
+                    Ver Todos os Produtos
+                </button>
+            </div>
+        </div>
+    </section>
+    <!-- Holographic Configurator -->
+    <section class="py-20 bg-gradient-to-b from-gray-900 to-black">
+        <div class="container mx-auto px-4">
+            <h2 class="text-3xl md:text-4xl font-bold text-center mb-16 neon-text">Configurador Holográfico</h2>
+            <div class="flex flex-col lg:flex-row items-center gap-12">
+                <div class="lg:w-1/2">
+                    <div class="holographic-effect w-full aspect-square max-w-lg mx-auto bg-black bg-opacity-50 rounded-lg flex items-center justify-center neon-border">
+                        <img src="https://via.placeholder.com/500x500?text=Configurador+3D" alt="Holographic Configurator" class="w-full h-full object-contain">
+                    </div>
+                </div>
+                <div class="lg:w-1/2">
+                    <h3 class="text-2xl font-bold mb-4">Personalize Seu Produto</h3>
+                    <p class="text-gray-300 mb-6">Use nosso configurador holográfico para criar o produto perfeito para suas necessidades. Todas as mudanças são refletidas em tempo real no modelo 3D.</p>
+                    <div class="space-y-6">
+                        <div>
+                            <label class="block text-gray-400 mb-2">Cor</label>
+                            <div class="flex space-x-4">
+                                <button class="w-8 h-8 rounded-full bg-purple-600 border-2 border-transparent hover:border-white transition-colors"></button>
+                                <button class="w-8 h-8 rounded-full bg-blue-600 border-2 border-transparent hover:border-white transition-colors"></button>
+                                <button class="w-8 h-8 rounded-full bg-black border-2 border-white"></button>
+                                <button class="w-8 h-8 rounded-full bg-gradient-to-r from-purple-600 to-blue-500 border-2 border-transparent hover:border-white transition-colors"></button>
+                            </div>
+                        </div>
+                        <div>
+                            <label class="block text-gray-400 mb-2">Textura</label>
+                            <div class="grid grid-cols-4 gap-3">
+                                <button class="h-10 rounded bg-gray-800 border border-gray-700 hover:border-purple-500 transition-colors" style="background-image: linear-gradient(45deg, #111827 25%, #1f2937 25%, #1f2937 50%, #111827 50%, #111827 75%, #1f2937 75%, #1f2937 100%); background-size: 8px 8px;"></button>
+                                <button class="h-10 rounded bg-gray-800 border border-gray-700 hover:border-purple-500 transition-colors" style="background-image: radial-gradient(circle, #3b82f6, #1e40af);"></button>
+                                <button class="h-10 rounded bg-gray-800 border border-gray-700 hover:border-purple-500 transition-colors" style="background-image: linear-gradient(to bottom right, #7c3aed 0%, #60a5fa 50%, #7c3aed 100%);"></button>
+                                <button class="h-10 rounded bg-gray-800 border border-gray-700 hover:border-purple-500 transition-colors" style="background: repeating-linear-gradient(90deg, transparent, transparent 2px, white 2px, white 4px);"></button>
+                            </div>
+                        </div>
+                        <div>
+                            <label for="components" class="block text-gray-400 mb-2">Componentes</label>
+                            <select id="components" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-2 text-white focus:outline-none focus:ring-2 focus:ring-purple-600">
+                                <option>Processador Neural Padrão (12 núcleos)</option>
+                                <option>Processador Neural Avançado (24 núcleos)</option>
+                                <option>Processador Neural Quântico (36 núcleos)</option>
+                            </select>
+                        </div>
+                        <button class="w-full py-3 bg-gradient-to-r from-purple-600 to-blue-500 rounded-full font-bold hover:opacity-90 transition-opacity neon-border mt-6">
+                            Solicitar Holograma de Cotação
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Virtual Fair -->
+    <section class="py-20 bg-black relative overflow-hidden">
+        <div class="absolute inset-0 z-0">
+            <div class="absolute top-0 left-0 w-full h-full opacity-5" style="background-image: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 100 100\" preserveAspectRatio=\"none\"><path d=\"M0,0 L100,100 M100,0 L0,100\" stroke=\"white\" stroke-width=\"0.5\"/></svg>'); background-size: 20px 20px;"></div>
+        </div>
+        <div class="container mx-auto px-4 relative z-10">
+            <h2 class="text-3xl md:text-4xl font-bold text-center mb-16 neon-text">Feira Virtual 2030</h2>
+            <div class="holographic-effect rounded-2xl overflow-hidden neon-border max-w-4xl mx-auto">
+                <div class="aspect-w-16 aspect-h-9 bg-black">
+                    <img src="https://via.placeholder.com/1200x675?text=Feira+Virtual+Holográfica" alt="Virtual Fair" class="w-full h-full object-cover">
+                </div>
+                <div class="bg-gradient-to-r from-purple-900 to-blue-900 p-6">
+                    <h3 class="text-xl font-bold mb-2">Visite Nossa Sala de Exposição Virtual</h3>
+                    <p class="text-gray-300 mb-4">Nossa feira virtual permite que você veja os produtos em ação - robôs dançando, laptops se auto-apresentando, e muito mais em um ambiente holográfico interativo.</p>
+                    <div class="flex flex-wrap gap-4">
+                        <button class="px-6 py-2 bg-white text-black rounded-full font-bold hover:bg-gray-200 transition-colors">
+                            Iniciar Tour
+                        </button>
+                        <button class="px-6 py-2 border border-white text-white rounded-full font-bold hover:bg-white hover:text-black transition-colors">
+                            Agendar Visita em Grupo
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Product Quiz -->
+    <section class="py-20 bg-gradient-to-b from-gray-900 to-black">
+        <div class="container mx-auto px-4 max-w-4xl">
+            <h2 class="text-3xl md:text-4xl font-bold text-center mb-16 neon-text">Quiz de Produtos</h2>
+            <div class="holographic-effect bg-gray-900 rounded-xl p-8 neon-border">
+                <div class="text-center mb-8">
+                    <div class="w-20 h-20 bg-purple-600 rounded-full flex items-center justify-center mx-auto mb-4 neon-border">
+                        <i class="fas fa-robot text-3xl"></i>
+                    </div>
+                    <h3 class="text-xl font-bold mb-2">Nosso Assistente Holográfico irá te ajudar a encontrar o produto perfeito</h3>
+                    <p class="text-gray-400">Responda algumas perguntas rápidas para receber recomendações personalizadas.</p>
+                </div>
+                <div class="space-y-6">
+                    <div>
+                        <label class="block text-gray-400 mb-2">1. Qual é o seu principal uso?</label>
+                        <select class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-2 text-white focus:outline-none focus:ring-2 focus:ring-purple-600">
+                            <option>Selecione uma opção</option>
+                            <option>Trabalho e produtividade</option>
+                            <option>Jogos e entretenimento</option>
+                            <option>Criação de conteúdo</option>
+                            <option>Realidade virtual/aumentada</option>
+                        </select>
+                    </div>
+                    <div>
+                        <label class="block text-gray-400 mb-2">2. Qual destes recursos é mais importante para você?</label>
+                        <div class="space-y-2">
+                            <label class="flex items-center space-x-3 cursor-pointer">
+                                <input type="radio" name="feature" class="form-radio text-purple-600 bg-gray-800 border-gray-700">
+                                <span>Performance extrema</span>
+                            </label>
+                            <label class="flex items-center space-x-3 cursor-pointer">
+                                <input type="radio" name="feature" class="form-radio text-purple-600 bg-gray-800 border-gray-700">
+                                <span>Inovação holográfica</span>
+                            </label>
+                            <label class="flex items-center space-x-3 cursor-pointer">
+                                <input type="radio" name="feature" class="form-radio text-purple-600 bg-gray-800 border-gray-700">
+                                <span>Ecodesign sustentável</span>
+                            </label>
+                            <label class="flex items-center space-x-3 cursor-pointer">
+                                <input type="radio" name="feature" class="form-radio text-purple-600 bg-gray-800 border-gray-700">
+                                <span>Soluções de segurança</span>
+                            </label>
+                        </div>
+                    </div>
+                    <div>
+                        <label class="block text-gray-400 mb-2">3. Conte-nos mais sobre suas necessidades</label>
+                        <textarea class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-2 text-white focus:outline-none focus:ring-2 focus:ring-purple-600 min-h-24"></textarea>
+                    </div>
+                    <button class="w-full py-3 bg-gradient-to-r from-purple-600 to-blue-500 rounded-full font-bold hover:opacity-90 transition-opacity neon-border mt-6">
+                        Obter Recomendações
+                    </button>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Footer -->
+    <footer class="bg-black py-12 border-t border-gray-800">
+        <div class="container mx-auto px-4">
+            <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
+                <div>
+                    <div class="flex items-center mb-4">
+                        <div class="w-8 h-8 rounded-full bg-gradient-to-br from-purple-600 to-blue-500 mr-2"></div>
+                        <h3 class="text-xl font-bold neon-text">Angola Cor Arte</h3>
+                    </div>
+                    <p class="text-gray-400">Escrevendo o futuro em 3D desde 2024. Seu projeto, nossa dimensão.</p>
+                </div>
+                <div>
+                    <h4 class="text-lg font-bold mb-4">Produtos</h4>
+                    <ul class="space-y-2">
+                        <li><a href="#" class="text-gray-400 hover:text-purple-400 transition-colors">NeuroLaptops</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-purple-400 transition-colors">Realidade Quântica</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-purple-400 transition-colors">Escritório Fluido</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-purple-400 transition-colors">Áudio Imersivo</a></li>
+                    </ul>
+                </div>
+                <div>
+                    <h4 class="text-lg font-bold mb-4">Links Úteis</h4>
+                    <ul class="space-y-2">
+                        <li><a href="#" class="text-gray-400 hover:text-purple-400 transition-colors">Sobre Nós</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-purple-400 transition-colors">Blog</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-purple-400 transition-colors">FAQ</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-purple-400 transition-colors">Contato</a></li>
+                    </ul>
+                </div>
+                <div>
+                    <h4 class="text-lg font-bold mb-4">Fique Conectado</h4>
+                    <div class="flex space-x-4 mb-4">
+                        <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center text-white hover:bg-purple-600 transition-colors">
+                            <i class="fab fa-facebook-f"></i>
+                        </a>
+                        <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center text-white hover:bg-blue-400 transition-colors">
+                            <i class="fab fa-twitter"></i>
+                        </a>
+                        <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center text-white hover:bg-gradient-to-r from-purple-600 to-pink-600 transition-colors">
+                            <i class="fab fa-instagram"></i>
+                        </a>
+                        <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center text-white hover:bg-blue-600 transition-colors">
+                            <i class="fab fa-linkedin-in"></i>
+                        </a>
+                    </div>
+                    <div>
+                        <label for="newsletter" class="block text-gray-400 mb-2">Assine nossa newsletter</label>
+                        <div class="flex">
+                            <input type="email" id="newsletter" placeholder="Seu email" class="bg-gray-800 border border-gray-700 rounded-l-lg px-4 py-2 text-white focus:outline-none focus:ring-2 focus:ring-purple-600 flex-grow">
+                            <button class="bg-purple-600 text-white px-4 rounded-r-lg hover:bg-purple-700 transition-colors">
+                                <i class="fas fa-paper-plane"></i>
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
+                <p class="text-gray-500 text-sm mb-4 md:mb-0">© 2024 Angola Cor Arte. Todos os direitos reservados.</p>
+                <div class="flex space-x-6">
+                    <a href="#" class="text-gray-500 hover:text-gray-400 transition-colors text-sm">Termos de Serviço</a>
+                    <a href="#" class="text-gray-500 hover:text-gray-400 transition-colors text-sm">Política de Privacidade</a>
+                    <a href="#" class="text-gray-500 hover:text-gray-400 transition-colors text-sm">Cookies</a>
+                </div>
+            </div>
+        </div>
+    </footer>
+    <!-- Shopping Cart Modal -->
+    <div id="cart-modal" class="fixed inset-0 bg-black bg-opacity-80 z-50 hidden flex justify-end">
+        <div class="w-full max-w-md bg-gray-900 h-full overflow-y-auto">
+            <div class="p-6">
+                <div class="flex justify-between items-center mb-6">
+                    <h3 class="text-xl font-bold neon-text">Seu Carrinho</h3>
+                    <button id="close-cart" class="text-gray-400 hover:text-white">
+                        <i class="fas fa-times text-xl"></i>
+                    </button>
+                </div>
+                <div class="h-64 flex items-center justify-center flex-col">
+                    <i class="fas fa-shopping-cart text-gray-700 text-5xl mb-4"></i>
+                    <p class="text-gray-400">Seu carrinho está vazio</p>
+                </div>
+                <div class="border-t border-gray-800 pt-6 mt-6">
+                    <div class="flex justify-between mb-2">
+                        <span class="text-gray-400">Subtotal</span>
+                        <span class="font-bold">$0.00</span>
+                    </div>
+                    <div class="flex justify-between mb-4">
+                        <span class="text-gray-400">Frete</span>
+                        <span class="font-bold">-</span>
+                    </div>
+                    <button class="w-full py-3 bg-gradient-to-r from-purple-600 to-blue-500 rounded-full font-bold hover:opacity-90 transition-opacity neon-border disabled:opacity-50" disabled>
+                        Finalizar Compra
+                    </button>
+                    <button class="w-full mt-4 py-2 border border-purple-600 text-purple-400 rounded-full font-bold hover:bg-purple-600 hover:text-white transition-colors">
+                        Libertar Cotação Holográfica
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+    <script>
+        // Mobile Menu Toggle
+        const menuBtn = document.getElementById('menu-btn');
+        const mobileMenu = document.getElementById('mobile-menu');
+        const closeMenu = document.getElementById('close-menu');
+        menuBtn.addEventListener('click', () => {
+            mobileMenu.classList.remove('hidden');
+            mobileMenu.classList.add('flex');
+        });
+        closeMenu.addEventListener('click', () => {
+            mobileMenu.classList.add('hidden');
+            mobileMenu.classList.remove('flex');
+        });
+        // Cart Modal Toggle
+        const cartBtn = document.getElementById('cart-btn');
+        const cartModal = document.getElementById('cart-modal');
+        const closeCart = document.getElementById('close-cart');
+        cartBtn.addEventListener('click', () => {
+            cartModal.classList.remove('hidden');
+            cartModal.classList.add('flex');
+        });
+        closeCart.addEventListener('click', () => {
+            cartModal.classList.add('hidden');
+            cartModal.classList.remove('flex');
+        });
+        // Header Scroll Effect
+        window.addEventListener('scroll', () => {
+            const header = document.getElementById('header');
+            if (window.scrollY > 50) {
+                header.classList.add('bg-black');
+                header.classList.add('shadow-lg');
+            } else {
+                header.classList.remove('bg-black');
+                header.classList.remove('shadow-lg');
+            }
+        });
+        // Remove loading screen (no longer needed as we removed the animation)
+        document.addEventListener('DOMContentLoaded', () => {
+            setTimeout(() => {
+                document.getElementById('loading').style.display = 'none';
+            }, 1000);
+        });
+        // Hover effect for categories to simulate circuit formation
+        const categories = document.querySelectorAll('.category-card');
+        categories.forEach(category => {
+            category.addEventListener('mouseenter', () => {
+                document.querySelector('.particle-bg.circuit-hover').classList.add('active');
+            });
+            category.addEventListener('mouseleave', () => {
+                document.querySelector('.particle-bg.circuit-hover').classList.remove('active');
+            });
+        });
+    </script>
+<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=arthhh1/teste" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body>
+</html>