transforme o meu site em uma landing-page para apresentar o meu trabalho e atair novos clientes.

README.md

@@ -1,10 +1,13 @@
 ---
-title: Sonic Waves Jeronimo
-emoji: ⚡
-colorFrom: yellow
-colorTo: pink
+title: Sonic Waves Jeronimo 🎧
+colorFrom: pink
+colorTo: gray
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

components/footer.js

@@ -0,0 +1,68 @@
+class CustomFooter extends HTMLElement {
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                footer {
+                    background: #0f172a;
+                    border-top: 1px solid rgba(255,255,255,0.05);
+                    padding: 4rem 0;
+                    text-align: center;
+                }
+
+                .content {
+                    max-width: 1280px;
+                    margin: 0 auto;
+                    padding: 0 1.5rem;
+                }
+
+                .social-links {
+                    display: flex;
+                    justify-content: center;
+                    gap: 1.5rem;
+                    margin-bottom: 2rem;
+                }
+
+                .social-icon {
+                    color: #64748b;
+                    transition: color 0.3s, transform 0.2s;
+                    text-decoration: none;
+                }
+
+                .social-icon:hover {
+                    color: #4f46e5;
+                    transform: translateY(-3px);
+                }
+
+                p {
+                    color: #64748b;
+                    font-size: 0.875rem;
+                    margin-bottom: 0.5rem;
+                }
+
+                .heart {
+                    color: #ef4444;
+                }
+            </style>
+            <footer>
+                <div class="content">
+                    <div class="social-links">
+                        <a href="https://www.instagram.com/" target="_blank" class="social-icon">
+                            <i data-feather="instagram"></i>
+                        </a>
+                        <a href="https://www.linkedin.com/" target="_blank" class="social-icon">
+                            <i data-feather="linkedin"></i>
+                        </a>
+                        <a href="https://vimeo.com/" target="_blank" class="social-icon">
+                            <i data-feather="video"></i>
+                        </a>
+                    </div>
+                    <p>&copy; 2023 Jeronimo Cruz. Todos os direitos reservados.</p>
+                    <p>Desenvolvido com <span class="heart">❤</span> e Som.</p>
+                </div>
+            </footer>
+        `;
+    }
+}
+
+customElements.define('custom-footer', CustomFooter);

components/navbar.js

@@ -0,0 +1,145 @@
+class CustomNavbar extends HTMLElement {
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                :host {
+                    display: block;
+                    position: fixed;
+                    top: 0;
+                    left: 0;
+                    width: 100%;
+                    z-index: 50;
+                    transition: all 0.3s ease;
+                    background: rgba(15, 23, 42, 0.8);
+                    backdrop-filter: blur(12px);
+                    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+                }
+
+                nav {
+                    max-width: 1280px;
+                    margin: 0 auto;
+                    padding: 1.5rem;
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: center;
+                }
+
+                .logo {
+                    font-size: 1.5rem;
+                    font-weight: 700;
+                    color: #ffffff;
+                    text-decoration: none;
+                    display: flex;
+                    align-items: center;
+                    gap: 0.5rem;
+                }
+
+                .logo span {
+                    color: #4f46e5;
+                }
+
+                .nav-links {
+                    display: flex;
+                    gap: 2rem;
+                    list-style: none;
+                    margin: 0;
+                    padding: 0;
+                }
+
+                .nav-link {
+                    color: #94a3b8;
+                    text-decoration: none;
+                    font-weight: 500;
+                    transition: color 0.2s;
+                    font-size: 1rem;
+                }
+
+                .nav-link:hover, .nav-link.active {
+                    color: #ffffff;
+                }
+                
+                .nav-link.active {
+                    color: #4f46e5;
+                }
+
+                /* Mobile Menu */
+                .mobile-menu-btn {
+                    display: none;
+                    background: none;
+                    border: none;
+                    cursor: pointer;
+                    color: white;
+                }
+
+                @media (max-width: 768px) {
+                    .nav-links {
+                        display: none;
+                        flex-direction: column;
+                        position: absolute;
+                        top: 100%;
+                        left: 0;
+                        width: 100%;
+                        background: #0f172a;
+                        padding: 1.5rem;
+                        border-bottom: 1px solid rgba(255,255,255,0.1);
+                        text-align: center;
+                    }
+
+                    .nav-links.open {
+                        display: flex;
+                        animation: slideDown 0.3s ease-out forwards;
+                    }
+
+                    .mobile-menu-btn {
+                        display: block;
+                    }
+
+                    @keyframes slideDown {
+                        from { opacity: 0; transform: translateY(-10px); }
+                        to { opacity: 1; transform: translateY(0); }
+                    }
+                }
+            </style>
+            <nav>
+                <a href="/" class="logo">
+                    <i data-feather="headphones" style="width: 24px; height: 24px; color: #4f46e5;"></i>
+                    Jeronimo<span>Cruz</span>
+                </a>
+                <button class="mobile-menu-btn" id="menuToggle">
+                    <i data-feather="menu"></i>
+                </button>
+                <ul class="nav-links" id="navLinks">
+                    <li><a href="#home" class="nav-link">Início</a></li>
+                    <li><a href="#about" class="nav-link">Sobre</a></li>
+                    <li><a href="#portfolio" class="nav-link">Portfolio</a></li>
+                    <li><a href="#contact" class="nav-link">Contato</a></li>
+                </ul>
+            </nav>
+        `;
+
+        // Mobile Menu Logic
+        const menuBtn = this.shadowRoot.getElementById('menuToggle');
+        const navLinks = this.shadowRoot.getElementById('navLinks');
+        
+        menuBtn.addEventListener('click', () => {
+            navLinks.classList.toggle('open');
+            // Toggle icon
+            const icon = menuBtn.querySelector('i');
+            if (navLinks.classList.contains('open')) {
+                 // In a real scenario we might swap the icon to 'x', 
+                 // but feather.replace() needs to be called. 
+                 // For simplicity, we just toggle the class.
+            }
+        });
+
+        // Close mobile menu when clicking a link
+        navLinks.querySelectorAll('a').forEach(link => {
+            link.addEventListener('click', () => {
+                navLinks.classList.remove('open');
+            });
+        });
+    }
+}
+
+customElements.define('custom-navbar', CustomNavbar);

index.html

@@ -1,19 +1,231 @@
-<!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" 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>

script.js

@@ -0,0 +1,44 @@
+document.addEventListener('DOMContentLoaded', () => {
+    // Smooth scrolling for anchor links
+    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+        anchor.addEventListener('click', function (e) {
+            e.preventDefault();
+            const targetId = this.getAttribute('href');
+            const targetElement = document.querySelector(targetId);
+            
+            if (targetElement) {
+                const headerOffset = 80;
+                const elementPosition = targetElement.getBoundingClientRect().top;
+                const offsetPosition = elementPosition + window.pageYOffset - headerOffset;
+        
+                window.scrollTo({
+                    top: offsetPosition,
+                    behavior: "smooth"
+                });
+            }
+        });
+    });
+
+    // Intersection Observer for scroll animations
+    const observerOptions = {
+        root: null,
+        rootMargin: '0px',
+        threshold: 0.1
+    };
+
+    const observer = new IntersectionObserver((entries, observer) => {
+        entries.forEach(entry => {
+            if (entry.isIntersecting) {
+                entry.target.classList.add('animate-fade-in-up');
+                observer.unobserve(entry.target);
+            }
+        });
+    }, observerOptions);
+
+    // Select elements to animate
+    const animatedElements = document.querySelectorAll('section > div');
+    animatedElements.forEach(el => {
+        el.style.opacity = '0'; // Initially hidden
+        observer.observe(el);
+    });
+});

style.css

@@ -1,28 +1,51 @@
+/* Base Styles */
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
 }
 
-h1 {
-	font-size: 16px;
-	margin-top: 0;
+/* Custom Scrollbar */
+::-webkit-scrollbar {
+    width: 10px;
 }
 
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+::-webkit-scrollbar-track {
+    background: #0f172a;
 }
 
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+::-webkit-scrollbar-thumb {
+    background: #334155;
+    border-radius: 5px;
 }
 
-.card p:last-child {
-	margin-bottom: 0;
+::-webkit-scrollbar-thumb:hover {
+    background: #4f46e5;
 }
+
+/* Utility animations */
+@keyframes fade-in-up {
+    from {
+        opacity: 0;
+        transform: translateY(20px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.animate-fade-in-up {
+    animation: fade-in-up 0.8s ease-out forwards;
+}
+
+/* Selection color override if not using Tailwind plugin */
+::selection {
+    background: #4f46e5;
+    color: #ffffff;
+}
+
+/* Smooth focus outlines for accessibility */
+*:focus-visible {
+    outline: 2px solid #4f46e5;
+    outline-offset: 2px;
+}