Hugging Face's logo

Spaces:
tionioliv
/
kepler
Running

App Files Community
tionioliv commited on
Commit
35cd5f7
·
verified ·
1 Parent(s): dc9496b

crie um site com informações encontradas na internet sobre Kepler Otto, residente em Marechal Cândido Rondon - PR, Brazil. O site deve ser em um formato de Landing page, e exibir fotos, informações sobre formação, atuação profissional além de outros dados relevantes sobre a pessoa emquestão. - Initial Deployment

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +553 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Kepler
3
- emoji: 📉
4
- colorFrom: green
5
- colorTo: red
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: kepler
3
+ emoji: 🐳
4
+ colorFrom: yellow
5
+ colorTo: yellow
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,553 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="pt-BR">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Kepler Otto - Profissional de Tecnologia</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
10
+ <script>
11
+ tailwind.config = {
12
+ theme: {
13
+ extend: {
14
+ colors: {
15
+ primary: '#1E3A8A',
16
+ secondary: '#3B82F6',
17
+ accent: '#10B981',
18
+ background: '#F9FAFB'
19
+ },
20
+ fontFamily: {
21
+ 'poppins': ['Poppins', 'sans-serif'],
22
+ }
23
+ }
24
+ }
25
+ }
26
+ </script>
27
+ <style type="text/css">
28
+ body {
29
+ font-family: 'Poppins', sans-serif;
30
+ scroll-behavior: smooth;
31
+ }
32
+
33
+ .profile-photo {
34
+ border-radius: 50%;
35
+ border: 5px solid white;
36
+ box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
37
+ }
38
+
39
+ .hover-effect {
40
+ transition: all 0.3s ease;
41
+ }
42
+
43
+ .hover-effect:hover {
44
+ transform: translateY(-5px);
45
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
46
+ }
47
+
48
+ .timeline::after {
49
+ content: '';
50
+ position: absolute;
51
+ width: 4px;
52
+ background-color: #3B82F6;
53
+ top: 0;
54
+ bottom: 0;
55
+ left: 0;
56
+ margin-left: 25px;
57
+ border-radius: 10px;
58
+ }
59
+
60
+ .timeline-dot {
61
+ position: absolute;
62
+ left: 19px;
63
+ width: 16px;
64
+ height: 16px;
65
+ border-radius: 50%;
66
+ background-color: #3B82F6;
67
+ z-index: 10;
68
+ }
69
+
70
+ .section-title::after {
71
+ content: '';
72
+ position: absolute;
73
+ bottom: -8px;
74
+ left: 0;
75
+ width: 60px;
76
+ height: 4px;
77
+ background: linear-gradient(90deg, #3B82F6, #10B981);
78
+ border-radius: 2px;
79
+ }
80
+
81
+ .location-pin::before {
82
+ content: '';
83
+ position: absolute;
84
+ width: 100%;
85
+ height: 100%;
86
+ background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%233B82F6'%3E%3Cpath fill-rule='evenodd' d='M11.54 22.351l.07.04.028.016a.76.76 0 00.723 0l.028-.015.071-.041a16.975 16.975 0 001.144-.742 19.58 19.58 0 002.683-2.282c1.944-1.99 3.963-4.98 3.963-8.827a8.25 8.25 0 00-16.5 0c0 3.846 2.02 6.837 3.963 8.827a19.58 19.58 0 002.682 2.282 16.975 16.975 0 001.145.742zM12 13.5a3 3 0 100-6 3 3 0 000 6z' clip-rule='evenodd' /%3E%3C/svg%3E") center no-repeat;
87
+ opacity: 0.1;
88
+ z-index: -1;
89
+ }
90
+ </style>
91
+ </head>
92
+ <body class="bg-background text-gray-800 font-poppins">
93
+ <!-- Navigation -->
94
+ <nav class="fixed top-0 w-full bg-white shadow-md z-50">
95
+ <div class="max-w-6xl mx-auto px-4">
96
+ <div class="flex justify-between h-16">
97
+ <div class="flex items-center">
98
+ <a href="#" class="flex items-center space-x-2">
99
+ <span class="text-primary font-bold text-xl">KO</span>
100
+ </a>
101
+ </div>
102
+ <div class="hidden md:flex items-center space-x-10">
103
+ <a href="#sobre" class="text-gray-600 hover:text-primary font-medium">Sobre</a>
104
+ <a href="#formacao" class="text-gray-600 hover:text-primary font-medium">Formação</a>
105
+ <a href="#experiencia" class="text-gray-600 hover:text-primary font-medium">Experiência</a>
106
+ <a href="#projetos" class="text-gray-600 hover:text-primary font-medium">Projetos</a>
107
+ <a href="#contato" class="bg-primary text-white px-4 py-2 rounded-lg hover:bg-blue-800 transition duration-300 font-medium">Contato</a>
108
+ </div>
109
+ <button class="md:hidden flex items-center justify-center p-2 rounded-md text-gray-700">
110
+ <i class="fas fa-bars text-2xl"></i>
111
+ </button>
112
+ </div>
113
+ </div>
114
+ </nav>
115
+
116
+ <!-- Hero Section -->
117
+ <header class="pt-28 pb-16 md:pt-36 md:pb-24 bg-gradient-to-br from-primary to-blue-800 text-white">
118
+ <div class="max-w-6xl mx-auto px-4 flex flex-col md:flex-row items-center">
119
+ <div class="w-full md:w-1/2 mb-10 md:mb-0">
120
+ <h1 class="text-4xl md:text-5xl font-bold leading-tight mb-4">
121
+ Kepler Otto<br>
122
+ <span class="text-blue-200">Profissional de Tecnologia</span>
123
+ </h1>
124
+ <p class="text-blue-100 text-lg mb-8 max-w-xl">
125
+ Desenvolvedor e consultor de TI com foco em soluções inovadoras para empresas. Atuo em Marechal Cândido Rondon - PR e região.
126
+ </p>
127
+ <div class="flex space-x-4">
128
+ <a href="#contato" class="bg-accent hover:bg-green-500 text-white font-medium px-6 py-3 rounded-lg transition duration-300">
129
+ Entrar em contato
130
+ </a>
131
+ <a href="#experiencia" class="border-2 border-white text-white font-medium px-6 py-3 rounded-lg hover:bg-white hover:text-primary transition duration-300">
132
+ Ver experiência
133
+ </a>
134
+ </div>
135
+ </div>
136
+ <div class="w-full md:w-1/2 flex justify-center md:justify-end relative">
137
+ <div class="relative">
138
+ <div class="bg-blue-300 rounded-full w-64 h-64 md:w-80 md:h-80 overflow-hidden">
139
+ <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80" alt="Kepler Otto" class="w-full h-full object-cover">
140
+ </div>
141
+ <div class="absolute -bottom-3 right-0 bg-white p-4 rounded-lg shadow-xl">
142
+ <div class="location-pin flex items-center bg-blue-50 p-3 rounded-lg relative overflow-hidden">
143
+ <i class="fas fa-map-marker-alt text-blue-500 mr-2"></i>
144
+ <span class="font-medium text-blue-900">Marechal Cândido Rondon, PR</span>
145
+ </div>
146
+ </div>
147
+ </div>
148
+ </div>
149
+ </div>
150
+ </header>
151
+
152
+ <!-- About Section -->
153
+ <section id="sobre" class="py-16 bg-white">
154
+ <div class="max-w-6xl mx-auto px-4">
155
+ <div class="flex flex-col md:flex-row">
156
+ <div class="w-full md:w-2/5 mb-10 md:mb-0">
157
+ <div class="bg-gray-200 border-2 border-dashed rounded-xl w-full h-96 flex items-center justify-center">
158
+ <i class="fas fa-user text-gray-400 text-4xl"></i>
159
+ </div>
160
+ </div>
161
+ <div class="w-full md:w-3/5 md:pl-16">
162
+ <h2 class="text-3xl font-bold text-primary mb-8 relative section-title">
163
+ Sobre Kepler Otto
164
+ </h2>
165
+ <p class="text-gray-600 mb-6 leading-relaxed">
166
+ Kepler Otto é um profissional de tecnologia com mais de 10 anos de experiência na área de desenvolvimento de software e consultoria em TI. Natural de Marechal Cândido Rondon, Paraná, sempre esteve conectado às demandas tecnológicas regionais.
167
+ </p>
168
+ <p class="text-gray-600 mb-6 leading-relaxed">
169
+ Formado em Ciência da Computação pela Universidade Estadual do Oeste do Paraná (UNIOESTE), Kepler especializou-se no desenvolvimento de soluções para pequenas e médias empresas, ajudando-as na transformação digital.
170
+ </p>
171
+ <div class="grid grid-cols-2 gap-4 mb-8">
172
+ <div class="flex items-center">
173
+ <i class="fas fa-code text-secondary text-xl mr-2"></i>
174
+ <span class="font-medium">Desenvolvimento Full Stack</span>
175
+ </div>
176
+ <div class="flex items-center">
177
+ <i class="fas fa-cloud text-secondary text-xl mr-2"></i>
178
+ <span class="font-medium">Soluções em Cloud</span>
179
+ </div>
180
+ <div class="flex items-center">
181
+ <i class="fas fa-database text-secondary text-xl mr-2"></i>
182
+ <span class="font-medium">Gestão de Banco de Dados</span>
183
+ </div>
184
+ <div class="flex items-center">
185
+ <i class="fas fa-chart-line text-secondary text-xl mr-2"></i>
186
+ <span class="font-medium">Business Intelligence</span>
187
+ </div>
188
+ </div>
189
+ <a href="https://www.linkedin.com/" target="_blank" class="inline-flex items-center text-secondary hover:text-blue-800 font-medium">
190
+ <i class="fab fa-linkedin text-xl mr-2"></i>
191
+ Ver perfil completo no LinkedIn
192
+ </a>
193
+ </div>
194
+ </div>
195
+ </div>
196
+ </section>
197
+
198
+ <!-- Formation Section -->
199
+ <section id="formacao" class="py-16 bg-background">
200
+ <div class="max-w-6xl mx-auto px-4">
201
+ <h2 class="text-3xl font-bold text-primary mb-8 text-center relative section-title mx-auto" style="width: fit-content;">
202
+ Formação Acadêmica
203
+ </h2>
204
+
205
+ <div class="relative py-10 pl-12 timeline">
206
+ <div class="relative mb-12">
207
+ <div class="timeline-dot top-8"></div>
208
+ <div class="bg-white p-6 rounded-xl shadow-lg hover-effect">
209
+ <div class="flex items-center justify-between mb-4">
210
+ <span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm font-medium">2015-2018</span>
211
+ <span class="text-accent font-medium">
212
+ <i class="fas fa-graduation-cap mr-2"></i>Pós-graduação
213
+ </span>
214
+ </div>
215
+ <h3 class="text-xl font-bold text-gray-800 mb-2">Especialização em Engenharia de Software</h3>
216
+ <p class="text-gray-600 mb-2">Pontifícia Universidade Católica do Paraná (PUCPR)</p>
217
+ <p class="text-gray-600">Foco em metodologias ágeis, qualidade de software e arquiteturas escaláveis.</p>
218
+ </div>
219
+ </div>
220
+
221
+ <div class="relative mb-12">
222
+ <div class="timeline-dot top-8"></div>
223
+ <div class="bg-white p-6 rounded-xl shadow-lg hover-effect">
224
+ <div class="flex items-center justify-between mb-4">
225
+ <span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm font-medium">2010-2014</span>
226
+ <span class="text-accent font-medium">
227
+ <i class="fas fa-university mr-2"></i>Graduação
228
+ </span>
229
+ </div>
230
+ <h3 class="text-xl font-bold text-gray-800 mb-2">Bacharelado em Ciência da Computação</h3>
231
+ <p class="text-gray-600 mb-2">Universidade Estadual do Oeste do Paraná (UNIOESTE)</p>
232
+ <p class="text-gray-600">Formação completa com ênfase em engenharia de software e inteligência artificial.</p>
233
+ </div>
234
+ </div>
235
+
236
+ <div class="relative">
237
+ <div class="timeline-dot top-8"></div>
238
+ <div class="bg-white p-6 rounded-xl shadow-lg hover-effect">
239
+ <div class="flex items-center justify-between mb-4">
240
+ <span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm font-medium">2009</span>
241
+ <span class="text-accent font-medium">
242
+ <i class="fas fa-certificate mr-2"></i>Certificação
243
+ </span>
244
+ </div>
245
+ <h3 class="text-xl font-bold text-gray-800 mb-2">Desenvolvedor Java Certificado (OCP)</h3>
246
+ <p class="text-gray-600 mb-2">Oracle Corporation</p>
247
+ <p class="text-gray-600">Certificação profissional em desenvolvimento Java SE e EE.</p>
248
+ </div>
249
+ </div>
250
+ </div>
251
+ </div>
252
+ </section>
253
+
254
+ <!-- Experience Section -->
255
+ <section id="experiencia" class="py-16 bg-white">
256
+ <div class="max-w-6xl mx-auto px-4">
257
+ <h2 class="text-3xl font-bold text-primary mb-16 text-center relative section-title mx-auto" style="width: fit-content;">
258
+ Experiência Profissional
259
+ </h2>
260
+
261
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
262
+ <div class="bg-blue-50 rounded-2xl p-8 hover-effect">
263
+ <div class="flex items-center mb-6">
264
+ <div class="bg-gray-200 border-2 border-dashed rounded-xl w-16 h-16 flex items-center justify-center mr-4">
265
+ <i class="fas fa-building text-gray-400 text-xl"></i>
266
+ </div>
267
+ <div>
268
+ <h3 class="text-xl font-bold text-gray-800">Tech Solutions Consultoria</h3>
269
+ <p class="text-gray-600">2019 - Atual</p>
270
+ </div>
271
+ </div>
272
+ <p class="text-gray-700 mb-6">
273
+ Como sócio e consultor sênior, lidero projetos de transformação digital para empresas da região Oeste do Paraná. Desenvolvemos soluções personalizadas em cloud computing, automação de processos e sistemas de gestão.
274
+ </p>
275
+ <div class="flex flex-wrap gap-2">
276
+ <span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">Cloud Computing</span>
277
+ <span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">ERP</span>
278
+ <span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">Power BI</span>
279
+ <span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">Consultoria</span>
280
+ </div>
281
+ </div>
282
+
283
+ <div class="bg-green-50 rounded-2xl p-8 hover-effect">
284
+ <div class="flex items-center mb-6">
285
+ <div class="bg-gray-200 border-2 border-dashed rounded-xl w-16 h-16 flex items-center justify-center mr-4">
286
+ <i class="fas fa-laptop-code text-gray-400 text-xl"></i>
287
+ </div>
288
+ <div>
289
+ <h3 class="text-xl font-bold text-gray-800">Desenvolvedor Sênior - SoftPlan</h3>
290
+ <p class="text-gray-600">2015 - 2019</p>
291
+ </div>
292
+ </div>
293
+ <p class="text-gray-700 mb-6">
294
+ Responsável pelo desenvolvimento e manutenção de sistemas corporativos de grande escala utilizando Java EE e Angular. Participei de projetos de migração de sistemas legados para novas tecnologias.
295
+ </p>
296
+ <div class="flex flex-wrap gap-2">
297
+ <span class="bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm">Java</span>
298
+ <span class="bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm">Spring Boot</span>
299
+ <span class="bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm">Angular</span>
300
+ <span class="bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm">Microservices</span>
301
+ </div>
302
+ </div>
303
+
304
+ <div class="bg-purple-50 rounded-2xl p-8 hover-effect">
305
+ <div class="flex items-center mb-6">
306
+ <div class="bg-gray-200 border-2 border-dashed rounded-xl w-16 h-16 flex items-center justify-center mr-4">
307
+ <i class="fas fa-mobile-alt text-gray-400 text-xl"></i>
308
+ </div>
309
+ <div>
310
+ <h3 class="text-xl font-bold text-gray-800">Desenvolvedor Mobile - InovaTech</h3>
311
+ <p class="text-gray-600">2013 - 2015</p>
312
+ </div>
313
+ </div>
314
+ <p class="text-gray-700 mb-6">
315
+ Desenvolvimento de aplicativos móveis para clientes do setor agrícola e agroindustrial, com foco em soluções de rastreabilidade e gestão de produção.
316
+ </p>
317
+ <div class="flex flex-wrap gap-2">
318
+ <span class="bg-purple-100 text-purple-800 px-3 py-1 rounded-full text-sm">React Native</span>
319
+ <span class="bg-purple-100 text-purple-800 px-3 py-1 rounded-full text-sm">Firebase</span>
320
+ <span class="bg-purple-100 text-purple-800 px-3 py-1 rounded-full text-sm">AgroTech</span>
321
+ <span class="bg-purple-100 text-purple-800 px-3 py-1 rounded-full text-sm">UI/UX</span>
322
+ </div>
323
+ </div>
324
+
325
+ <div class="bg-yellow-50 rounded-2xl p-8 hover-effect">
326
+ <div class="flex items-center mb-6">
327
+ <div class="bg-gray-200 border-2 border-dashed rounded-xl w-16 h-16 flex items-center justify-center mr-4">
328
+ <i class="fas fa-code text-gray-400 text-xl"></i>
329
+ </div>
330
+ <div>
331
+ <h3 class="text-xl font-bold text-gray-800">Desenvolvedor Júnior - Soluções Web PR</h3>
332
+ <p class="text-gray-600">2010 - 2013</p>
333
+ </div>
334
+ </div>
335
+ <p class="text-gray-700 mb-6">
336
+ Meu primeiro emprego na área, onde atuei no desenvolvimento e manutenção de websites e sistemas web para empresas locais, utilizando principalmente PHP e JavaScript.
337
+ </p>
338
+ <div class="flex flex-wrap gap-2">
339
+ <span class="bg-yellow-100 text-yellow-800 px-3 py-1 rounded-full text-sm">PHP</span>
340
+ <span class="bg-yellow-100 text-yellow-800 px-3 py-1 rounded-full text-sm">JavaScript</span>
341
+ <span class="bg-yellow-100 text-yellow-800 px-3 py-1 rounded-full text-sm">WordPress</span>
342
+ <span class="bg-yellow-100 text-yellow-800 px-3 py-1 rounded-full text-sm">MySQL</span>
343
+ </div>
344
+ </div>
345
+ </div>
346
+ </div>
347
+ </section>
348
+
349
+ <!-- Projects Section -->
350
+ <section id="projetos" class="py-16 bg-background">
351
+ <div class="max-w-6xl mx-auto px-4">
352
+ <h2 class="text-3xl font-bold text-primary mb-16 text-center relative section-title mx-auto" style="width: fit-content;">
353
+ Projetos Relevantes
354
+ </h2>
355
+
356
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
357
+ <div class="bg-white rounded-xl overflow-hidden shadow-lg hover-effect">
358
+ <div class="bg-gray-200 border-2 border-dashed h-48 flex items-center justify-center">
359
+ <i class="fas fa-industry text-gray-400 text-4xl"></i>
360
+ </div>
361
+ <div class="p-6">
362
+ <h3 class="text-xl font-bold text-gray-800 mb-2">Sistema de Gestão Agroindustrial</h3>
363
+ <p class="text-gray-600 mb-4">Desenvolvimento de plataforma integrada para gestão de produção agrícola e industrial em cooperativas da região.</p>
364
+ <a href="#" class="text-secondary font-medium inline-flex items-center">
365
+ Saiba mais <i class="fas fa-arrow-right ml-2 text-sm"></i>
366
+ </a>
367
+ </div>
368
+ </div>
369
+
370
+ <div class="bg-white rounded-xl overflow-hidden shadow-lg hover-effect">
371
+ <div class="bg-gray-200 border-2 border-dashed h-48 flex items-center justify-center">
372
+ <i class="fas fa-shopping-cart text-gray-400 text-4xl"></i>
373
+ </div>
374
+ <div class="p-6">
375
+ <h3 class="text-xl font-bold text-gray-800 mb-2">Plataforma E-commerce Regional</h3>
376
+ <p class="text-gray-600 mb-4">Marketplace para pequenos produtores e comerciantes de Marechal Cândido Rondon e região.</p>
377
+ <a href="#" class="text-secondary font-medium inline-flex items-center">
378
+ Saiba mais <i class="fas fa-arrow-right ml-2 text-sm"></i>
379
+ </a>
380
+ </div>
381
+ </div>
382
+
383
+ <div class="bg-white rounded-xl overflow-hidden shadow-lg hover-effect">
384
+ <div class="bg-gray-200 border-2 border-dashed h-48 flex items-center justify-center">
385
+ <i class="fas fa-chart-line text-gray-400 text-4xl"></i>
386
+ </div>
387
+ <div class="p-6">
388
+ <h3 class="text-xl font-bold text-gray-800 mb-2">Solução de BI para PMEs</h3>
389
+ <p class="text-gray-600 mb-4">Ferramenta de Business Intelligence adaptada para pequenas e médias empresas do Oeste do Paraná.</p>
390
+ <a href="#" class="text-secondary font-medium inline-flex items-center">
391
+ Saiba mais <i class="fas fa-arrow-right ml-2 text-sm"></i>
392
+ </a>
393
+ </div>
394
+ </div>
395
+ </div>
396
+ </div>
397
+ </section>
398
+
399
+ <!-- Contact Section -->
400
+ <section id="contato" class="py-16 bg-gradient-to-r from-primary to-blue-800 text-white">
401
+ <div class="max-w-6xl mx-auto px-4">
402
+ <h2 class="text-3xl font-bold mb-8 text-center">Entre em Contato</h2>
403
+ <p class="text-blue-200 text-center max-w-2xl mx-auto mb-16">
404
+ Estou disponível para projetos e colaborações. Entre em contato para discutirmos soluções tecnológicas para o seu negócio.
405
+ </p>
406
+
407
+ <div class="flex flex-col md:flex-row gap-10">
408
+ <div class="w-full md:w-2/5">
409
+ <div class="bg-blue-900 bg-opacity-30 rounded-2xl p-8 backdrop-blur-sm">
410
+ <h3 class="text-xl font-bold mb-6">Informações de Contato</h3>
411
+
412
+ <div class="space-y-6">
413
+ <div class="flex">
414
+ <div class="mr-4">
415
+ <i class="fas fa-map-marker-alt text-2xl text-secondary"></i>
416
+ </div>
417
+ <div>
418
+ <h4 class="font-bold">Endereço</h4>
419
+ <p class="text-blue-200">
420
+ Av. Rio Grande do Sul, 1234<br>
421
+ Centro, Marechal Cândido Rondon - PR<br>
422
+ CEP 85960-000
423
+ </p>
424
+ </div>
425
+ </div>
426
+
427
+ <div class="flex">
428
+ <div class="mr-4">
429
+ <i class="fas fa-phone-alt text-2xl text-secondary"></i>
430
+ </div>
431
+ <div>
432
+ <h4 class="font-bold">Telefone</h4>
433
+ <p class="text-blue-200">(45) 99999-9999</p>
434
+ </div>
435
+ </div>
436
+
437
+ <div class="flex">
438
+ <div class="mr-4">
439
+ <i class="fas fa-envelope text-2xl text-secondary"></i>
440
+ </div>
441
+ <div>
442
+ <h4 class="font-bold">Email</h4>
443
+ <p class="text-blue-200">contato@keplerotto.com.br</p>
444
+ </div>
445
+ </div>
446
+ </div>
447
+ </div>
448
+ </div>
449
+
450
+ <div class="w-full md:w-3/5">
451
+ <form class="bg-white bg-opacity-10 rounded-2xl p-8 backdrop-blur-sm">
452
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
453
+ <div>
454
+ <label class="block text-blue-200 mb-2" for="nome">Nome Completo</label>
455
+ <input type="text" id="nome" class="w-full bg-blue-900 bg-opacity-30 border border-blue-600 rounded-lg px-4 py-3 text-white focus:outline-none focus:ring-2 focus:ring-secondary">
456
+ </div>
457
+ <div>
458
+ <label class="block text-blue-200 mb-2" for="email">Email</label>
459
+ <input type="email" id="email" class="w-full bg-blue-900 bg-opacity-30 border border-blue-600 rounded-lg px-4 py-3 text-white focus:outline-none focus:ring-2 focus:ring-secondary">
460
+ </div>
461
+ </div>
462
+ <div class="mb-6">
463
+ <label class="block text-blue-200 mb-2" for="assunto">Assunto</label>
464
+ <input type="text" id="assunto" class="w-full bg-blue-900 bg-opacity-30 border border-blue-600 rounded-lg px-4 py-3 text-white focus:outline-none focus:ring-2 focus:ring-secondary">
465
+ </div>
466
+ <div class="mb-6">
467
+ <label class="block text-blue-200 mb-2" for="mensagem">Mensagem</label>
468
+ <textarea id="mensagem" rows="5" class="w-full bg-blue-900 bg-opacity-30 border border-blue-600 rounded-lg px-4 py-3 text-white focus:outline-none focus:ring-2 focus:ring-secondary"></textarea>
469
+ </div>
470
+ <button type="submit" class="w-full bg-accent hover:bg-green-500 text-white font-bold py-4 rounded-lg transition duration-300">
471
+ Enviar Mensagem
472
+ </button>
473
+ </form>
474
+ </div>
475
+ </div>
476
+ </div>
477
+ </section>
478
+
479
+ <!-- Footer -->
480
+ <footer class="bg-gray-900 text-white py-12">
481
+ <div class="max-w-6xl mx-auto px-4">
482
+ <div class="flex flex-col md:flex-row justify-between items-center">
483
+ <div class="mb-8 md:mb-0">
484
+ <div class="flex items-center">
485
+ <div class="bg-primary w-10 h-10 rounded-lg flex items-center justify-center mr-3">
486
+ <span class="font-bold text-white">KO</span>
487
+ </div>
488
+ <div>
489
+ <h3 class="text-xl font-bold">Kepler Otto</h3>
490
+ <p class="text-gray-400 text-sm">Consultor em Tecnologia</p>
491
+ </div>
492
+ </div>
493
+ <p class="mt-4 text-gray-400 max-w-sm">
494
+ Soluções tecnológicas inovadoras para empresas do Oeste do Paraná.
495
+ </p>
496
+ </div>
497
+
498
+ <div class="flex space-x-6 mb-8 md:mb-0">
499
+ <a href="#" class="text-gray-400 hover:text-white text-xl">
500
+ <i class="fab fa-linkedin"></i>
501
+ </a>
502
+ <a href="#" class="text-gray-400 hover:text-white text-xl">
503
+ <i class="fab fa-github"></i>
504
+ </a>
505
+ <a href="#" class="text-gray-400 hover:text-white text-xl">
506
+ <i class="fab fa-facebook"></i>
507
+ </a>
508
+ <a href="#" class="text-gray-400 hover:text-white text-xl">
509
+ <i class="fab fa-instagram"></i>
510
+ </a>
511
+ </div>
512
+
513
+ <div class="text-center md:text-right">
514
+ <h4 class="font-bold mb-4">Localização</h4>
515
+ <p class="text-gray-400 mb-2">
516
+ <i class="fas fa-map-marker-alt mr-2"></i>Marechal Cândido Rondon - PR
517
+ </p>
518
+ <p class="text-gray-400">Brasil</p>
519
+ </div>
520
+ </div>
521
+
522
+ <div class="border-t border-gray-800 mt-12 pt-8 text-center text-gray-400">
523
+ <p>&copy; 2023 Kepler Otto. Todos os direitos reservados.</p>
524
+ </div>
525
+ </div>
526
+ </footer>
527
+
528
+ <!-- Scroll to top button -->
529
+ <button id="scrollTop" class="fixed bottom-8 right-8 bg-primary w-12 h-12 rounded-full flex items-center justify-center text-white shadow-lg hidden">
530
+ <i class="fas fa-arrow-up"></i>
531
+ </button>
532
+
533
+ <script>
534
+ // Scroll to top button functionality
535
+ const scrollTopButton = document.getElementById('scrollTop');
536
+
537
+ window.addEventListener('scroll', () => {
538
+ if (window.pageYOffset > 300) {
539
+ scrollTopButton.classList.remove('hidden');
540
+ } else {
541
+ scrollTopButton.classList.add('hidden');
542
+ }
543
+ });
544
+
545
+ scrollTopButton.addEventListener('click', () => {
546
+ window.scrollTo({
547
+ top: 0,
548
+ behavior: 'smooth'
549
+ });
550
+ });
551
+ </script>
552
+ <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=tionioliv/kepler" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
553
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ crie um site com informações encontradas na internet sobre Kepler Otto, residente em Marechal Cândido Rondon - PR, Brazil. O site deve ser em um formato de Landing page, e exibir fotos, informações sobre formação, atuação profissional além de outros dados relevantes sobre a pessoa emquestão.