Hugging Face's logo

Spaces:
j3r4
/
sonic-waves-jeronimo
Running

App Files Community
sonic-waves-jeronimo
File size: 14,576 Bytes
2bebdef
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
 
<!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>