Spaces:
Running
Running
| <html lang="pt-BR" class="scroll-smooth"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Jeronimo Cruz | Audio Professional</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: '#4f46e5', // Indigo 600 | |
| secondary: '#0f172a', // Slate 900 | |
| accent: '#818cf8', // Indigo 400 | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| </head> | |
| <body class="bg-secondary text-slate-200 font-sans antialiased selection:bg-primary selection:text-white"> | |
| <!-- Navbar Component --> | |
| <custom-navbar></custom-navbar> | |
| <!-- Hero Section --> | |
| <section class="relative h-screen flex items-center justify-center overflow-hidden"> | |
| <!-- Background Image with Overlay --> | |
| <div class="absolute inset-0 z-0"> | |
| <img src="https://static.photos/technology/1920x1080/92" alt="Studio Background" class="w-full h-full object-cover opacity-30"> | |
| <div class="absolute inset-0 bg-gradient-to-b from-secondary/80 via-secondary/50 to-secondary"></div> | |
| </div> | |
| <div class="relative z-10 container mx-auto px-6 text-center"> | |
| <span class="inline-block py-1 px-3 rounded-full bg-primary/20 border border-primary/50 text-accent text-sm font-semibold mb-4 animate-pulse"> | |
| Disponível para novos projetos | |
| </span> | |
| <h1 class="text-5xl md:text-7xl font-bold text-white mb-6 tracking-tight leading-tight"> | |
| Jerônimo de Souza <span class="text-primary">Cruz</span> | |
| </h1> | |
| <p class="text-xl md:text-2xl text-slate-400 mb-8 max-w-2xl mx-auto"> | |
| Especialista em captação e pós-produção de som para obras audiovisuais. Transformando ruído em arte. | |
| </p> | |
| <div class="flex flex-col sm:flex-row gap-4 justify-center"> | |
| <a href="#portfolio" class="px-8 py-4 bg-primary hover:bg-indigo-700 text-white rounded-lg font-semibold transition-all duration-300 shadow-lg shadow-indigo-500/30 flex items-center justify-center gap-2"> | |
| <i data-feather="play-circle" class="w-5 h-5"></i> Ver Portfolio | |
| </a> | |
| <a href="#contact" class="px-8 py-4 bg-transparent border border-slate-600 hover:border-white text-white hover:bg-white/10 rounded-lg font-semibold transition-all duration-300 flex items-center justify-center gap-2"> | |
| <i data-feather="message-circle" class="w-5 h-5"></i> Fale Comigo | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Scroll Down Indicator --> | |
| <div class="absolute bottom-10 left-1/2 transform -translate-x-1/2 animate-bounce"> | |
| <a href="#about" class="text-slate-400 hover:text-white transition-colors"> | |
| <i data-feather="chevron-down" class="w-8 h-8"></i> | |
| </a> | |
| </div> | |
| </section> | |
| <!-- About Section --> | |
| <section id="about" class="py-24 bg-secondary relative"> | |
| <div class="container mx-auto px-6"> | |
| <div class="flex flex-col md:flex-row items-center gap-12"> | |
| <div class="w-full md:w-1/2"> | |
| <div class="relative"> | |
| <div class="absolute -inset-4 bg-primary/20 rounded-xl blur-lg"></div> | |
| <img src="https://static.photos/people/640x800/15" alt="Jeronimo Cruz" class="relative rounded-xl shadow-2xl w-full object-cover grayscale hover:grayscale-0 transition-all duration-500"> | |
| </div> | |
| </div> | |
| <div class="w-full md:w-1/2"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-white mb-6 flex items-center gap-3"> | |
| <i data-feather="user" class="text-primary"></i> Sobre Mim | |
| </h2> | |
| <p class="text-slate-400 text-lg leading-relaxed mb-6"> | |
| Olá, sou Jerônimo de Souza Cruz. Aqui lhe apresento alguns dos meus trabalhos de captação e pós-produção de som para obras audiovisuais. | |
| </p> | |
| <p class="text-slate-400 text-lg leading-relaxed mb-8"> | |
| Com paixão pela fidelidade sonora e atenção aos detalhes, meu objetivo é elevar a qualidade de qualquer projeto, sejam filmes curtos, dublagens ou publicidade. Esteja à vontade e obrigado pela visita! | |
| </p> | |
| <div class="grid grid-cols-2 gap-4"> | |
| <div class="bg-slate-800 p-4 rounded-lg border border-slate-700"> | |
| <h4 class="text-primary font-bold text-xl mb-1">Pós-produção</h4> | |
| <p class="text-sm text-slate-500">Mixagem & Mastering</p> | |
| </div> | |
| <div class="bg-slate-800 p-4 rounded-lg border border-slate-700"> | |
| <h4 class="text-primary font-bold text-xl mb-1">Captação</h4> | |
| <p class="text-sm text-slate-500">Gravação em Locação</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Portfolio Section --> | |
| <section id="portfolio" class="py-24 bg-slate-900"> | |
| <div class="container mx-auto px-6"> | |
| <div class="text-center mb-16"> | |
| <span class="text-primary font-semibold tracking-wider uppercase text-sm">Meus Trabalhos</span> | |
| <h2 class="text-3xl md:text-4xl font-bold text-white mt-2 mb-4">Portfolio & Serviços</h2> | |
| <div class="w-20 h-1 bg-primary mx-auto rounded-full"></div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8"> | |
| <!-- Card 1: Curta-Metragens --> | |
| <a href="#contact" class="group relative bg-slate-800 rounded-xl overflow-hidden shadow-lg hover:shadow-primary/20 transition-all duration-300 hover:-translate-y-2 border border-slate-700"> | |
| <div class="h-48 overflow-hidden"> | |
| <img src="https://static.photos/nature/640x360/45" alt="Curta-Metragens" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500"> | |
| </div> | |
| <div class="p-6"> | |
| <div class="w-12 h-12 bg-primary/20 rounded-lg flex items-center justify-center text-primary mb-4 group-hover:bg-primary group-hover:text-white transition-colors"> | |
| <i data-feather="film" class="w-6 h-6"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-white mb-2">Curta-Metragens</h3> | |
| <p class="text-slate-400 text-sm">Design sonoro imersivo para narrativas cinematográficas.</p> | |
| </div> | |
| </a> | |
| <!-- Card 2: Dublagem --> | |
| <a href="#contact" class="group relative bg-slate-800 rounded-xl overflow-hidden shadow-lg hover:shadow-primary/20 transition-all duration-300 hover:-translate-y-2 border border-slate-700"> | |
| <div class="h-48 overflow-hidden"> | |
| <img src="https://static.photos/technology/640x360/22" alt="Dublagem" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500"> | |
| </div> | |
| <div class="p-6"> | |
| <div class="w-12 h-12 bg-primary/20 rounded-lg flex items-center justify-center text-primary mb-4 group-hover:bg-primary group-hover:text-white transition-colors"> | |
| <i data-feather="mic" class="w-6 h-6"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-white mb-2">Dublagem</h3> | |
| <p class="text-slate-400 text-sm">Estúdio profissional para gravação e edição de vozes.</p> | |
| </div> | |
| </a> | |
| <!-- Card 3: Publicidade --> | |
| <a href="#contact" class="group relative bg-slate-800 rounded-xl overflow-hidden shadow-lg hover:shadow-primary/20 transition-all duration-300 hover:-translate-y-2 border border-slate-700"> | |
| <div class="h-48 overflow-hidden"> | |
| <img src="https://static.photos/office/640x360/88" alt="Publicidade" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500"> | |
| </div> | |
| <div class="p-6"> | |
| <div class="w-12 h-12 bg-primary/20 rounded-lg flex items-center justify-center text-primary mb-4 group-hover:bg-primary group-hover:text-white transition-colors"> | |
| <i data-feather="tv" class="w-6 h-6"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-white mb-2">Publicidade</h3> | |
| <p class="text-slate-400 text-sm">Jingles, spots comerciais e trilhas para marcas.</p> | |
| </div> | |
| </a> | |
| <!-- Card 4: Teatro --> | |
| <a href="#contact" class="group relative bg-slate-800 rounded-xl overflow-hidden shadow-lg hover:shadow-primary/20 transition-all duration-300 hover:-translate-y-2 border border-slate-700"> | |
| <div class="h-48 overflow-hidden"> | |
| <img src="https://static.photos/cityscape/640x360/12" alt="Teatro" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500"> | |
| </div> | |
| <div class="p-6"> | |
| <div class="w-12 h-12 bg-primary/20 rounded-lg flex items-center justify-center text-primary mb-4 group-hover:bg-primary group-hover:text-white transition-colors"> | |
| <i data-feather="aperture" class="w-6 h-6"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-white mb-2">Teatro</h3> | |
| <p class="text-slate-400 text-sm">Reforço sonoro e efeitos ao vivo para espetáculos.</p> | |
| </div> | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact Section --> | |
| <section id="contact" class="py-24 bg-secondary relative overflow-hidden"> | |
| <!-- Decorative Elements --> | |
| <div class="absolute top-0 right-0 w-64 h-64 bg-primary/10 rounded-full blur-3xl -translate-y-1/2 translate-x-1/2"></div> | |
| <div class="absolute bottom-0 left-0 w-64 h-64 bg-accent/10 rounded-full blur-3xl translate-y-1/2 -translate-x-1/2"></div> | |
| <div class="container mx-auto px-6 relative z-10"> | |
| <div class="max-w-4xl mx-auto bg-slate-800/50 backdrop-blur-lg border border-slate-700 rounded-2xl p-8 md:p-12 shadow-2xl"> | |
| <div class="text-center mb-10"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-white mb-4">Vamos trabalhar juntos?</h2> | |
| <p class="text-slate-400">Entre em contato para discutir seu próximo projeto de áudio.</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8"> | |
| <div class="space-y-6"> | |
| <a href="https://wa.me/5511986124561?text=Ol%C3%A1+Jeronimo%2C+tudo+bem%3F+Tenho+um+projeto+sobre+o+qual+gostaria+de+lhe+falar%2C+podemos+conversar%3F" target="_blank" class="flex items-center gap-4 p-4 rounded-xl bg-slate-700/50 hover:bg-primary hover:text-white transition-all duration-300 group"> | |
| <div class="w-12 h-12 bg-slate-800 rounded-full flex items-center justify-center group-hover:bg-white/20 transition-colors"> | |
| <i data-feather="message-circle" class="text-green-400 group-hover:text-white w-5 h-5"></i> | |
| </div> | |
| <div> | |
| <p class="text-sm text-slate-400 group-hover:text-green-100">WhatsApp</p> | |
| <p class="font-bold">+55 (11) 986-124-561</p> | |
| </div> | |
| </a> | |
| <a href="mailto:jeronimo.cruz@gmail.com" class="flex items-center gap-4 p-4 rounded-xl bg-slate-700/50 hover:bg-primary hover:text-white transition-all duration-300 group"> | |
| <div class="w-12 h-12 bg-slate-800 rounded-full flex items-center justify-center group-hover:bg-white/20 transition-colors"> | |
| <i data-feather="mail" class="text-red-400 group-hover:text-white w-5 h-5"></i> | |
| </div> | |
| <div> | |
| <p class="text-sm text-slate-400 group-hover:text-red-100">Email</p> | |
| <p class="font-bold">jeronimo.cruz@gmail.com</p> | |
| </div> | |
| </a> | |
| </div> | |
| <div class="flex flex-col justify-center space-y-4"> | |
| <p class="text-slate-300 text-sm"> | |
| Estou disponível para freelancers e contratos fixos. Respondo normalmente em até 24h. | |
| </p> | |
| <a href="https://wa.me/5511986124561?text=Ol%C3%A1+Jeronimo%2C+tudo+bem%3F+Tenho+um+projeto+sobre+o+qual+gostaria+de+lhe+falar%2C+podemos+conversar%3F" class="w-full py-4 bg-primary hover:bg-indigo-700 text-white rounded-lg font-bold text-center transition-all duration-300 shadow-lg shadow-indigo-500/25"> | |
| Iniciar Conversa no WhatsApp | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer Component --> | |
| <custom-footer></custom-footer> | |
| <!-- Scripts --> | |
| <script src="components/navbar.js"></script> | |
| <script src="components/footer.js"></script> | |
| <script src="script.js"></script> | |
| <script>feather.replace();</script> | |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> | |
| </body> | |
| </html> |