| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Aureon - No caminho do que deve ser</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script> |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/ScrollTrigger.min.js"></script> |
| <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&family=Orbitron:wght@400;500;600;700&display=swap"> |
| <style> |
| body { |
| font-family: 'Montserrat', sans-serif; |
| background-color: #000000; |
| color: #FFFFFF; |
| overflow-x: hidden; |
| } |
| |
| .logo-text { |
| font-family: 'Orbitron', sans-serif; |
| font-weight: 500; |
| } |
| |
| .gold-gradient { |
| background: linear-gradient(90deg, rgba(255,215,0,0.1) 0%, rgba(255,215,0,0.3) 50%, rgba(255,215,0,0.1) 100%); |
| } |
| |
| .gold-border { |
| border: 1px solid rgba(255,215,0,0.3); |
| } |
| |
| .gold-text { |
| color: #FFD700; |
| } |
| |
| .gold-hover:hover { |
| color: #FFD700; |
| transition: all 0.3s ease; |
| } |
| |
| .particle { |
| position: absolute; |
| background-color: rgba(255,215,0,0.3); |
| border-radius: 50%; |
| pointer-events: none; |
| } |
| |
| .floating { |
| animation: floating 6s ease-in-out infinite; |
| } |
| |
| @keyframes floating { |
| 0% { transform: translateY(0px); } |
| 50% { transform: translateY(-15px); } |
| 100% { transform: translateY(0px); } |
| } |
| |
| .pulse { |
| animation: pulse 4s ease infinite; |
| } |
| |
| @keyframes pulse { |
| 0% { opacity: 0.3; } |
| 50% { opacity: 1; } |
| 100% { opacity: 0.3; } |
| } |
| |
| .menu-item { |
| position: relative; |
| } |
| |
| .menu-item:after { |
| content: ''; |
| position: absolute; |
| width: 0; |
| height: 1px; |
| bottom: 0; |
| left: 0; |
| background-color: #FFD700; |
| transition: width 0.3s ease; |
| } |
| |
| .menu-item:hover:after { |
| width: 100%; |
| } |
| |
| .logo-glow { |
| text-shadow: 0 0 10px rgba(255,215,0,0.5); |
| animation: glow 4s ease infinite; |
| } |
| |
| @keyframes glow { |
| 0% { text-shadow: 0 0 10px rgba(255,215,0,0.5); } |
| 50% { text-shadow: 0 0 20px rgba(255,215,0,0.8); } |
| 100% { text-shadow: 0 0 10px rgba(255,215,0,0.5); } |
| } |
| |
| .canvas-container { |
| position: absolute; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| z-index: -1; |
| opacity: 0.3; |
| } |
| |
| .testimonial-card { |
| backdrop-filter: blur(10px); |
| background: rgba(0,0,0,0.5); |
| transition: all 0.5s ease; |
| } |
| |
| .testimonial-card:hover { |
| transform: translateY(-10px); |
| box-shadow: 0 10px 20px rgba(255,215,0,0.2); |
| } |
| </style> |
| </head> |
| <body class="min-h-screen"> |
| |
| <div class="canvas-container"> |
| <canvas id="particleCanvas"></canvas> |
| </div> |
| |
| |
| <nav class="fixed w-full z-50"> |
| <div class="container mx-auto px-6 py-4 flex justify-between items-center"> |
| <div class="logo-text text-2xl gold-text logo-glow">AUREON</div> |
| <div class="hidden md:flex space-x-8"> |
| <a href="#" class="text-white hover:text-gold-500 transition duration-300 menu-item">Home</a> |
| <a href="#" class="text-white hover:text-gold-500 transition duration-300 menu-item">About</a> |
| <a href="#" class="text-white hover:text-gold-500 transition duration-300 menu-item">Work</a> |
| <a href="#" class="text-white hover:text-gold-500 transition duration-300 menu-item">Contact</a> |
| </div> |
| <button class="md:hidden focus:outline-none"> |
| <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path> |
| </svg> |
| </button> |
| </div> |
| </nav> |
| |
| |
| <section class="min-h-screen flex items-center justify-center relative overflow-hidden"> |
| <div class="container mx-auto px-6 text-center"> |
| <div class="logo-text text-6xl md:text-8xl font-medium mb-8 gold-text logo-glow floating">AUREON</div> |
| <p class="text-xl md:text-2xl text-white max-w-2xl mx-auto mb-12">No caminho do que deve ser</p> |
| |
| <div class="w-full max-w-4xl mx-auto h-px gold-gradient my-16"></div> |
| |
| <div class="relative"> |
| <div class="absolute -inset-1 gold-gradient rounded-lg blur opacity-75"></div> |
| <div class="relative bg-black rounded-lg p-8"> |
| <p class="text-white text-lg md:text-xl">Existência. Evolução. Autenticidade.</p> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="absolute bottom-0 left-0 w-full h-32 overflow-hidden"> |
| <div class="absolute bottom-0 left-0 w-full h-full gold-gradient opacity-20"></div> |
| <div class="absolute bottom-0 left-0 w-full h-1 gold-gradient"></div> |
| </div> |
| </section> |
| |
| |
| <section class="py-20 relative overflow-hidden"> |
| <div class="container mx-auto px-6"> |
| <div class="flex flex-col md:flex-row items-center"> |
| <div class="md:w-1/2 mb-12 md:mb-0"> |
| <h2 class="text-3xl md:text-4xl font-medium mb-6 gold-text">Potencial em constante evolução</h2> |
| <p class="text-white text-lg mb-8">Formas que se transformam organicamente, representando o crescimento natural e o potencial ilimitado.</p> |
| <div class="w-32 h-px gold-gradient"></div> |
| </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 gold-border pulse" style="animation-delay: 0s;"></div> |
| <div class="absolute inset-8 rounded-full gold-border pulse" style="animation-delay: 0.5s;"></div> |
| <div class="absolute inset-16 rounded-full gold-border pulse" style="animation-delay: 1s;"></div> |
| <div class="absolute inset-24 rounded-full gold-border pulse" style="animation-delay: 1.5s;"></div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
| |
| |
| <section class="py-20 relative"> |
| <div class="container mx-auto px-6"> |
| <h2 class="text-3xl md:text-4xl font-medium mb-16 text-center gold-text">Vozes da Experiência</h2> |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8"> |
| |
| <div class="testimonial-card gold-border rounded-lg p-6 floating" style="animation-delay: 0s;"> |
| <p class="text-white mb-4">"Com a Aureon, percebi possibilidades que não havia notado antes. Simples, fluida, autêntica."</p> |
| <p class="gold-text font-medium">Ana M., Designer</p> |
| </div> |
| |
| |
| <div class="testimonial-card gold-border rounded-lg p-6 floating" style="animation-delay: 0.5s;"> |
| <p class="text-white mb-4">"O que realmente importa é a experiência. Cada interação com a Aureon faz sentido."</p> |
| <p class="gold-text font-medium">Lucas T., Engenheiro</p> |
| </div> |
| |
| |
| <div class="testimonial-card gold-border rounded-lg p-6 floating" style="animation-delay: 1s;"> |
| <p class="text-white mb-4">"Ela não tenta ser o que não é. E é isso que a torna diferente."</p> |
| <p class="gold-text font-medium">Camila R., Empreendedora</p> |
| </div> |
| |
| |
| <div class="testimonial-card gold-border rounded-lg p-6 floating" style="animation-delay: 1.5s;"> |
| <p class="text-white mb-4">"Trabalhar com essa visão me mostrou que o progresso não precisa ser barulhento para ser real."</p> |
| <p class="gold-text font-medium">Rafael S., Criador de Conteúdo</p> |
| </div> |
| </div> |
| </div> |
| </section> |
| |
| |
| <footer class="py-12 relative"> |
| <div class="container mx-auto px-6"> |
| <div class="flex flex-col md:flex-row justify-between items-center"> |
| <div class="logo-text text-2xl gold-text mb-6 md:mb-0">AUREON</div> |
| <div class="flex space-x-6"> |
| <a href="#" class="text-white gold-hover">Instagram</a> |
| <a href="#" class="text-white gold-hover">Twitter</a> |
| <a href="#" class="text-white gold-hover">LinkedIn</a> |
| </div> |
| </div> |
| <div class="w-full h-px gold-gradient my-8"></div> |
| <p class="text-white text-center text-sm">© 2023 Aureon. Todos os direitos reservados.</p> |
| </div> |
| </footer> |
| |
| <script> |
| |
| const canvas = document.getElementById('particleCanvas'); |
| const ctx = canvas.getContext('2d'); |
| |
| canvas.width = window.innerWidth; |
| canvas.height = window.innerHeight; |
| |
| let particles = []; |
| const particleCount = window.innerWidth < 768 ? 30 : 80; |
| |
| class Particle { |
| constructor() { |
| this.x = Math.random() * canvas.width; |
| this.y = Math.random() * canvas.height; |
| this.size = Math.random() * 3 + 1; |
| this.speedX = Math.random() * 1 - 0.5; |
| this.speedY = Math.random() * 1 - 0.5; |
| this.color = `rgba(255, 215, 0, ${Math.random() * 0.5 + 0.1})`; |
| } |
| |
| update() { |
| this.x += this.speedX; |
| this.y += this.speedY; |
| |
| if (this.x < 0 || this.x > canvas.width) this.speedX *= -1; |
| if (this.y < 0 || this.y > canvas.height) this.speedY *= -1; |
| } |
| |
| draw() { |
| ctx.fillStyle = this.color; |
| ctx.beginPath(); |
| ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2); |
| ctx.fill(); |
| } |
| } |
| |
| function init() { |
| particles = []; |
| for (let i = 0; i < particleCount; i++) { |
| particles.push(new Particle()); |
| } |
| } |
| |
| function animate() { |
| ctx.clearRect(0, 0, canvas.width, canvas.height); |
| |
| for (let i = 0; i < particles.length; i++) { |
| particles[i].update(); |
| particles[i].draw(); |
| } |
| |
| connect(); |
| requestAnimationFrame(animate); |
| } |
| |
| function connect() { |
| let opacity = 0.1; |
| for (let a = 0; a < particles.length; a++) { |
| for (let b = a; b < particles.length; b++) { |
| let distance = Math.pow(particles[a].x - particles[b].x, 2) + |
| Math.pow(particles[a].y - particles[b].y, 2); |
| |
| if (distance < (canvas.width / 4) * (canvas.height / 4)) { |
| opacity = 1 - (distance / 20000); |
| ctx.strokeStyle = `rgba(255, 215, 0, ${opacity})`; |
| ctx.lineWidth = 1; |
| ctx.beginPath(); |
| ctx.moveTo(particles[a].x, particles[a].y); |
| ctx.lineTo(particles[b].x, particles[b].y); |
| ctx.stroke(); |
| } |
| } |
| } |
| } |
| |
| window.addEventListener('resize', function() { |
| canvas.width = window.innerWidth; |
| canvas.height = window.innerHeight; |
| init(); |
| }); |
| |
| |
| document.addEventListener('mousemove', function(e) { |
| const mouseX = e.clientX; |
| const mouseY = e.clientY; |
| |
| particles.forEach(particle => { |
| const dx = mouseX - particle.x; |
| const dy = mouseY - particle.y; |
| const distance = Math.sqrt(dx * dx + dy * dy); |
| |
| if (distance < 100) { |
| particle.speedX = dx * 0.02; |
| particle.speedY = dy * 0.02; |
| } |
| }); |
| }); |
| |
| |
| init(); |
| animate(); |
| |
| |
| gsap.registerPlugin(ScrollTrigger); |
| |
| gsap.utils.toArray('.floating').forEach(element => { |
| gsap.to(element, { |
| y: 15, |
| duration: 3, |
| repeat: -1, |
| yoyo: true, |
| ease: "sine.inOut" |
| }); |
| }); |
| |
| gsap.utils.toArray('.pulse').forEach(element => { |
| gsap.to(element, { |
| opacity: 0.3, |
| duration: 4, |
| repeat: -1, |
| yoyo: true, |
| ease: "sine.inOut" |
| }); |
| }); |
| |
| |
| gsap.utils.toArray('section').forEach(section => { |
| gsap.from(section, { |
| scrollTrigger: { |
| trigger: section, |
| start: "top 80%", |
| toggleActions: "play none none none" |
| }, |
| opacity: 0, |
| y: 50, |
| duration: 1 |
| }); |
| }); |
| </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=vzrx/tmp1" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
