|
|
<!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"> |
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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"> |
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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"> |
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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 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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
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'); |
|
|
}); |
|
|
|
|
|
|
|
|
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'); |
|
|
}); |
|
|
|
|
|
|
|
|
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'); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
document.addEventListener('DOMContentLoaded', () => { |
|
|
setTimeout(() => { |
|
|
document.getElementById('loading').style.display = 'none'; |
|
|
}, 1000); |
|
|
}); |
|
|
|
|
|
|
|
|
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> |
