| | <!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> |
