Hugging Face's logo

Spaces:
Softedge
/
Corporations
Sleeping

App Files Community
akra35567 commited on
Commit
2f2f476
·
verified ·
1 Parent(s): fa61c2c

Upload 8 files

Browse files
Files changed (8) hide show
  1. templates/admin.html +328 -0
  2. templates/contato.html +576 -0
  3. templates/index.html +492 -0
  4. templates/login.html +296 -0
  5. templates/projetos.html +516 -0
  6. templates/register.html +367 -0
  7. templates/servicos.html +539 -0
  8. templates/sobre.html +485 -0
templates/admin.html ADDED
@@ -0,0 +1,328 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="pt-BR" class="scroll-smooth">
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
+ <title>Painel Administrativo - SoftEdge Corporation</title>
7
+
8
+ <!-- SEO & SOCIAL -->
9
+ <meta name="description" content="Painel administrativo SoftEdge Corporation. Gerencie projetos, usuários e estatísticas.">
10
+ <meta name="keywords" content="admin, painel, dashboard, softedge">
11
+
12
+ <!-- FAVICON -->
13
+ <link rel="icon" href="/assets/placeholder.svg" type="image/svg+xml">
14
+ <link rel="apple-touch-icon" href="/assets/placeholder.svg">
15
+ <meta property="og:image" content="/assets/placeholder.svg" />
16
+ <meta property="og:title" content="Painel Administrativo - SoftEdge Corporation" />
17
+ <meta property="og:description" content="Gerencie seu negócio digital" />
18
+
19
+ <!-- FONTS -->
20
+ <link rel="preconnect" href="https://fonts.googleapis.com">
21
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
22
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
23
+
24
+ <!-- TAILWIND CSS -->
25
+ <script src="https://cdn.tailwindcss.com"></script>
26
+ <script>
27
+ tailwind.config = {
28
+ theme: {
29
+ extend: {
30
+ fontFamily: {
31
+ sans: ['Inter', 'system-ui', 'sans-serif'],
32
+ },
33
+ colors: {
34
+ primary: {
35
+ 50: '#ecfeff',
36
+ 100: '#cffafe',
37
+ 500: '#06b6d4',
38
+ 600: '#0891b2',
39
+ 700: '#0e7490',
40
+ 900: '#164e63',
41
+ }
42
+ }
43
+ }
44
+ }
45
+ }
46
+ </script>
47
+
48
+ <!-- LUCIDE ICONS -->
49
+ <script src="https://unpkg.com/lucide@latest"></script>
50
+
51
+ <!-- CUSTOM CSS -->
52
+ <link href="/assets/css/style.css" rel="stylesheet">
53
+ </head>
54
+
55
+ <body class="min-h-screen bg-slate-950 text-white antialiased font-sans">
56
+ <!-- SIDEBAR -->
57
+ <div class="fixed inset-y-0 left-0 z-50 w-64 bg-slate-900 border-r border-slate-700 transform -translate-x-full lg:translate-x-0 transition-transform duration-300" id="sidebar">
58
+ <div class="flex items-center justify-between p-4 border-b border-slate-700">
59
+ <div class="flex items-center space-x-3">
60
+ <div class="w-8 h-8 rounded-lg overflow-hidden bg-linear-to-br from-cyan-500 to-blue-600 p-0.5">
61
+ <img src="/assets/logo.jpeg" alt="SoftEdge Logo" class="w-full h-full object-cover rounded-lg">
62
+ </div>
63
+ <span class="text-lg font-bold gradient-text">SoftEdge</span>
64
+ </div>
65
+ <button class="lg:hidden text-gray-400 hover:text-white" id="sidebar-close">
66
+ <i data-lucide="x" class="w-6 h-6"></i>
67
+ </button>
68
+ </div>
69
+
70
+ <nav class="p-4 space-y-2">
71
+ <a href="#dashboard" class="nav-link active flex items-center space-x-3 px-4 py-3 text-white bg-cyan-500/10 border-r-2 border-cyan-500 rounded-lg">
72
+ <i data-lucide="layout-dashboard" class="w-5 h-5"></i>
73
+ <span>Dashboard</span>
74
+ </a>
75
+ <a href="#projects" class="nav-link flex items-center space-x-3 px-4 py-3 text-gray-300 hover:text-white hover:bg-slate-800 rounded-lg transition-colors">
76
+ <i data-lucide="folder" class="w-5 h-5"></i>
77
+ <span>Projetos</span>
78
+ </a>
79
+ <a href="#users" class="nav-link flex items-center space-x-3 px-4 py-3 text-gray-300 hover:text-white hover:bg-slate-800 rounded-lg transition-colors">
80
+ <i data-lucide="users" class="w-5 h-5"></i>
81
+ <span>Usuários</span>
82
+ </a>
83
+ <a href="#messages" class="nav-link flex items-center space-x-3 px-4 py-3 text-gray-300 hover:text-white hover:bg-slate-800 rounded-lg transition-colors">
84
+ <i data-lucide="mail" class="w-5 h-5"></i>
85
+ <span>Mensagens</span>
86
+ </a>
87
+ <a href="#analytics" class="nav-link flex items-center space-x-3 px-4 py-3 text-gray-300 hover:text-white hover:bg-slate-800 rounded-lg transition-colors">
88
+ <i data-lucide="bar-chart" class="w-5 h-5"></i>
89
+ <span>Analytics</span>
90
+ </a>
91
+ <a href="#settings" class="nav-link flex items-center space-x-3 px-4 py-3 text-gray-300 hover:text-white hover:bg-slate-800 rounded-lg transition-colors">
92
+ <i data-lucide="settings" class="w-5 h-5"></i>
93
+ <span>Configurações</span>
94
+ </a>
95
+ </nav>
96
+
97
+ <div class="absolute bottom-4 left-4 right-4">
98
+ <form method="POST" action="/api/auth/logout">
99
+ <button type="submit" class="w-full flex items-center space-x-3 px-4 py-3 text-red-400 hover:text-red-300 hover:bg-red-500/10 rounded-lg transition-colors">
100
+ <i data-lucide="log-out" class="w-5 h-5"></i>
101
+ <span>Sair</span>
102
+ </button>
103
+ </form>
104
+ </div>
105
+ </div>
106
+
107
+ <!-- MAIN CONTENT -->
108
+ <div class="lg:ml-64">
109
+ <!-- HEADER -->
110
+ <header class="bg-slate-900 border-b border-slate-700 px-4 py-4 lg:px-8">
111
+ <div class="flex items-center justify-between">
112
+ <div class="flex items-center space-x-4">
113
+ <button class="lg:hidden text-gray-400 hover:text-white" id="sidebar-toggle">
114
+ <i data-lucide="menu" class="w-6 h-6"></i>
115
+ </button>
116
+ <h1 class="text-2xl font-bold text-white">Painel Administrativo</h1>
117
+ </div>
118
+
119
+ <div class="flex items-center space-x-4">
120
+ <div class="text-right">
121
+ <p class="text-sm text-gray-400">Bem-vindo,</p>
122
+ <p class="text-sm font-semibold text-white">Isaac Quarenta</p>
123
+ </div>
124
+ <div class="w-10 h-10 rounded-full bg-linear-to-br from-cyan-500 to-blue-600 flex items-center justify-center">
125
+ <span class="text-white font-bold text-sm">IQ</span>
126
+ </div>
127
+ </div>
128
+ </div>
129
+ </header>
130
+
131
+ <!-- DASHBOARD CONTENT -->
132
+ <main class="p-4 lg:p-8">
133
+ <!-- STATS CARDS -->
134
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
135
+ <div class="glass rounded-xl p-6">
136
+ <div class="flex items-center justify-between">
137
+ <div>
138
+ <p class="text-gray-400 text-sm">Total de Projetos</p>
139
+ <p class="text-2xl font-bold text-white">{{ stats.total_projects }}</p>
140
+ </div>
141
+ <div class="w-12 h-12 bg-blue-500/20 rounded-lg flex items-center justify-center">
142
+ <i data-lucide="folder" class="w-6 h-6 text-blue-400"></i>
143
+ </div>
144
+ </div>
145
+ </div>
146
+
147
+ <div class="glass rounded-xl p-6">
148
+ <div class="flex items-center justify-between">
149
+ <div>
150
+ <p class="text-gray-400 text-sm">Usuários Ativos</p>
151
+ <p class="text-2xl font-bold text-white">{{ stats.total_users }}</p>
152
+ </div>
153
+ <div class="w-12 h-12 bg-green-500/20 rounded-lg flex items-center justify-center">
154
+ <i data-lucide="users" class="w-6 h-6 text-green-400"></i>
155
+ </div>
156
+ </div>
157
+ </div>
158
+
159
+ <div class="glass rounded-xl p-6">
160
+ <div class="flex items-center justify-between">
161
+ <div>
162
+ <p class="text-gray-400 text-sm">Mensagens</p>
163
+ <p class="text-2xl font-bold text-white">{{ stats.total_contacts }}</p>
164
+ </div>
165
+ <div class="w-12 h-12 bg-purple-500/20 rounded-lg flex items-center justify-center">
166
+ <i data-lucide="mail" class="w-6 h-6 text-purple-400"></i>
167
+ </div>
168
+ </div>
169
+ </div>
170
+
171
+ <div class="glass rounded-xl p-6">
172
+ <div class="flex items-center justify-between">
173
+ <div>
174
+ <p class="text-gray-400 text-sm">Taxa de Satisfação</p>
175
+ <p class="text-2xl font-bold text-white">4.9★</p>
176
+ </div>
177
+ <div class="w-12 h-12 bg-yellow-500/20 rounded-lg flex items-center justify-center">
178
+ <i data-lucide="star" class="w-6 h-6 text-yellow-400"></i>
179
+ </div>
180
+ </div>
181
+ </div>
182
+ </div>
183
+
184
+ <!-- RECENT ACTIVITY -->
185
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8">
186
+ <!-- Recent Users -->
187
+ <div class="glass rounded-xl p-6">
188
+ <h3 class="text-xl font-bold text-white mb-4">Usuários Recentes</h3>
189
+ <div class="space-y-4">
190
+ {% for user in stats.recent_users %}
191
+ <div class="flex items-center space-x-3">
192
+ <div class="w-10 h-10 rounded-full bg-slate-700 flex items-center justify-center">
193
+ <span class="text-white font-bold text-sm">{{ user.name[0] }}</span>
194
+ </div>
195
+ <div class="flex-1">
196
+ <p class="text-white font-medium">{{ user.name }}</p>
197
+ <p class="text-gray-400 text-sm">{{ user.email }}</p>
198
+ </div>
199
+ <span class="text-xs text-gray-500">{{ user.created_at.strftime('%d/%m') }}</span>
200
+ </div>
201
+ {% endfor %}
202
+ </div>
203
+ </div>
204
+
205
+ <!-- Recent Messages -->
206
+ <div class="glass rounded-xl p-6">
207
+ <h3 class="text-xl font-bold text-white mb-4">Mensagens Recentes</h3>
208
+ <div class="space-y-4">
209
+ {% for contact in stats.recent_contacts %}
210
+ <div class="border-l-2 border-cyan-500 pl-4">
211
+ <p class="text-white font-medium">{{ contact.name }}</p>
212
+ <p class="text-gray-400 text-sm line-clamp-2">{{ contact.message }}</p>
213
+ <p class="text-xs text-gray-500 mt-1">{{ contact.created_at.strftime('%d/%m %H:%M') }}</p>
214
+ </div>
215
+ {% endfor %}
216
+ </div>
217
+ </div>
218
+ </div>
219
+
220
+ <!-- QUICK ACTIONS -->
221
+ <div class="glass rounded-xl p-6">
222
+ <h3 class="text-xl font-bold text-white mb-4">Ações Rápidas</h3>
223
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
224
+ <button class="bg-cyan-500 hover:bg-cyan-600 text-white font-semibold py-3 px-4 rounded-lg transition-colors flex items-center justify-center space-x-2">
225
+ <i data-lucide="plus" class="w-5 h-5"></i>
226
+ <span>Novo Projeto</span>
227
+ </button>
228
+ <button class="bg-blue-500 hover:bg-blue-600 text-white font-semibold py-3 px-4 rounded-lg transition-colors flex items-center justify-center space-x-2">
229
+ <i data-lucide="user-plus" class="w-5 h-5"></i>
230
+ <span>Adicionar Usuário</span>
231
+ </button>
232
+ <button class="bg-purple-500 hover:bg-purple-600 text-white font-semibold py-3 px-4 rounded-lg transition-colors flex items-center justify-center space-x-2">
233
+ <i data-lucide="download" class="w-5 h-5"></i>
234
+ <span>Exportar Dados</span>
235
+ </button>
236
+ </div>
237
+ </div>
238
+ </main>
239
+ </div>
240
+
241
+ <!-- SCRIPTS -->
242
+ <script src="https://unpkg.com/lucide@latest"></script>
243
+ <script>
244
+ document.addEventListener('DOMContentLoaded', function() {
245
+ // Initialize Lucide icons
246
+ lucide.createIcons();
247
+
248
+ // Sidebar toggle
249
+ const sidebar = document.getElementById('sidebar');
250
+ const sidebarToggle = document.getElementById('sidebar-toggle');
251
+ const sidebarClose = document.getElementById('sidebar-close');
252
+
253
+ sidebarToggle?.addEventListener('click', () => {
254
+ sidebar.classList.toggle('-translate-x-full');
255
+ });
256
+
257
+ sidebarClose?.addEventListener('click', () => {
258
+ sidebar.classList.add('-translate-x-full');
259
+ });
260
+
261
+ // Navigation
262
+ const navLinks = document.querySelectorAll('.nav-link');
263
+ navLinks.forEach(link => {
264
+ link.addEventListener('click', function(e) {
265
+ e.preventDefault();
266
+
267
+ // Update active state
268
+ navLinks.forEach(l => {
269
+ l.classList.remove('active', 'text-white', 'bg-cyan-500/10', 'border-r-2', 'border-cyan-500');
270
+ l.classList.add('text-gray-300');
271
+ });
272
+
273
+ this.classList.add('active', 'text-white', 'bg-cyan-500/10', 'border-r-2', 'border-cyan-500');
274
+ this.classList.remove('text-gray-300');
275
+
276
+ // Close sidebar on mobile
277
+ if (window.innerWidth < 1024) {
278
+ sidebar.classList.add('-translate-x-full');
279
+ }
280
+ });
281
+ });
282
+
283
+ // Auto-refresh stats every 30 seconds
284
+ setInterval(async () => {
285
+ try {
286
+ const response = await fetch('/api/stats');
287
+ const data = await response.json();
288
+
289
+ // Update stats if available
290
+ const projectStat = document.querySelector('.glass p:contains("Total de Projetos")').nextElementSibling;
291
+ if (projectStat) projectStat.textContent = data.projects + '+';
292
+ } catch (error) {
293
+ console.log('Stats refresh failed');
294
+ }
295
+ }, 30000);
296
+ });
297
+ </script>
298
+
299
+ <style>
300
+ .glass {
301
+ background: rgba(0, 0, 0, 0.8);
302
+ backdrop-filter: blur(20px);
303
+ -webkit-backdrop-filter: blur(20px);
304
+ border: 1px solid rgba(255, 255, 255, 0.1);
305
+ }
306
+
307
+ .gradient-text {
308
+ background: linear-gradient(135deg, #06b6d4, #3b82f6);
309
+ -webkit-background-clip: text;
310
+ -webkit-text-fill-color: transparent;
311
+ background-clip: text;
312
+ }
313
+
314
+ .nav-link.active {
315
+ background: rgba(6, 182, 212, 0.1) !important;
316
+ color: white !important;
317
+ border-right: 2px solid #06b6d4 !important;
318
+ }
319
+
320
+ .line-clamp-2 {
321
+ display: -webkit-box;
322
+ -webkit-line-clamp: 2;
323
+ -webkit-box-orient: vertical;
324
+ overflow: hidden;
325
+ }
326
+ </style>
327
+ </body>
328
+ </html>
templates/contato.html ADDED
@@ -0,0 +1,576 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="pt-BR" class="scroll-smooth">
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
+ <title>Contato - SoftEdge Corporation</title>
7
+
8
+ <!-- SEO & SOCIAL -->
9
+ <meta name="description" content="Entre em contato com a SoftEdge Corporation. Estamos prontos para transformar sua ideia em realidade. Desenvolvimento de software personalizado.">
10
+ <meta name="keywords" content="contato, softedge, desenvolvimento, software, angola">
11
+
12
+ <!-- FAVICON -->
13
+ <link rel="icon" href="/assets/placeholder.svg" type="image/svg+xml">
14
+ <link rel="apple-touch-icon" href="/assets/placeholder.svg">
15
+ <meta property="og:image" content="/assets/placeholder.svg" />
16
+ <meta property="og:title" content="Contato - SoftEdge Corporation" />
17
+ <meta property="og:description" content="Vamos conversar sobre seu projeto" />
18
+
19
+ <!-- FONTS -->
20
+ <link rel="preconnect" href="https://fonts.googleapis.com">
21
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
22
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
23
+
24
+ <!-- TAILWIND CSS -->
25
+ <script src="https://cdn.tailwindcss.com"></script>
26
+ <script>
27
+ tailwind.config = {
28
+ theme: {
29
+ extend: {
30
+ fontFamily: {
31
+ sans: ['Inter', 'system-ui', 'sans-serif'],
32
+ },
33
+ colors: {
34
+ primary: {
35
+ 50: '#ecfeff',
36
+ 100: '#cffafe',
37
+ 500: '#06b6d4',
38
+ 600: '#0891b2',
39
+ 700: '#0e7490',
40
+ 900: '#164e63',
41
+ }
42
+ }
43
+ }
44
+ }
45
+ }
46
+ </script>
47
+
48
+ <!-- LUCIDE ICONS -->
49
+ <script src="https://unpkg.com/lucide@latest"></script>
50
+
51
+ <!-- CUSTOM CSS -->
52
+ <link href="/assets/css/style.css" rel="stylesheet">
53
+ </head>
54
+
55
+ <body class="min-h-screen bg-linear-to-br from-slate-950 via-slate-900 to-slate-950 text-white antialiased font-sans">
56
+ <!-- HEADER -->
57
+ <header class="fixed top-0 left-0 right-0 z-50 glass">
58
+ <nav class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
59
+ <div class="flex items-center justify-between h-16">
60
+ <!-- Logo -->
61
+ <div class="flex items-center space-x-3">
62
+ <div class="w-10 h-10 rounded-xl overflow-hidden bg-linear-to-br from-cyan-500 to-blue-600 p-0.5">
63
+ <img src="/assets/logo.jpeg" alt="SoftEdge Logo" class="w-full h-full object-cover rounded-xl">
64
+ </div>
65
+ <span class="text-xl font-bold gradient-text">SoftEdge</span>
66
+ </div>
67
+
68
+ <!-- Desktop Navigation -->
69
+ <div class="hidden md:flex items-center space-x-8">
70
+ <a href="/" class="text-gray-300 hover:text-cyan-400 transition-colors">Início</a>
71
+ <a href="/sobre" class="text-gray-300 hover:text-cyan-400 transition-colors">Sobre</a>
72
+ <a href="/servicos" class="text-gray-300 hover:text-cyan-400 transition-colors">Serviços</a>
73
+ <a href="/projetos" class="text-gray-300 hover:text-cyan-400 transition-colors">Projetos</a>
74
+ <a href="/contato" class="text-white hover:text-cyan-400 transition-colors font-medium">Contato</a>
75
+ </div>
76
+
77
+ <!-- Mobile menu button -->
78
+ <button class="md:hidden text-white" id="mobile-menu-button">
79
+ <i data-lucide="menu" class="w-6 h-6"></i>
80
+ </button>
81
+ </div>
82
+
83
+ <!-- Mobile Navigation -->
84
+ <div class="md:hidden hidden" id="mobile-menu">
85
+ <div class="px-2 pt-2 pb-3 space-y-1 bg-slate-900/95 rounded-lg mt-2">
86
+ <a href="/" class="block px-3 py-2 text-gray-300 hover:text-cyan-400">Início</a>
87
+ <a href="/sobre" class="block px-3 py-2 text-gray-300 hover:text-cyan-400">Sobre</a>
88
+ <a href="/servicos" class="block px-3 py-2 text-gray-300 hover:text-cyan-400">Serviços</a>
89
+ <a href="/projetos" class="block px-3 py-2 text-gray-300 hover:text-cyan-400">Projetos</a>
90
+ <a href="/contato" class="block px-3 py-2 text-white font-medium">Contato</a>
91
+ </div>
92
+ </div>
93
+ </nav>
94
+ </header>
95
+
96
+ <!-- HERO SECTION -->
97
+ <section class="relative min-h-[60vh] flex items-center justify-center overflow-hidden pt-16">
98
+ <div class="absolute inset-0 -z-10">
99
+ <div class="absolute inset-0 bg-linear-to-br from-slate-950 via-slate-900 to-slate-950"></div>
100
+ <div class="absolute inset-0 opacity-20">
101
+ <div class="absolute top-20 left-20 w-96 h-96 bg-cyan-500/20 rounded-full blur-3xl"></div>
102
+ <div class="absolute bottom-20 right-20 w-96 h-96 bg-blue-500/20 rounded-full blur-3xl"></div>
103
+ </div>
104
+ </div>
105
+
106
+ <div class="relative max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
107
+ <div class="space-y-6">
108
+ <div class="inline-block px-4 py-2 bg-cyan-500/10 rounded-full border border-cyan-500/20">
109
+ <span class="text-cyan-400 text-sm font-semibold uppercase tracking-wider">Entre em Contato</span>
110
+ </div>
111
+
112
+ <h1 class="text-4xl sm:text-5xl md:text-6xl font-bold leading-tight">
113
+ Vamos <span class="gradient-text">conversar</span> sobre<br>
114
+ seu projeto
115
+ </h1>
116
+
117
+ <p class="text-lg sm:text-xl text-gray-400 max-w-2xl mx-auto">
118
+ Estamos prontos para transformar sua ideia em uma solução tecnológica excepcional.
119
+ </p>
120
+ </div>
121
+ </div>
122
+ </section>
123
+
124
+ <!-- MAIN CONTENT -->
125
+ <main class="relative py-20 lg:py-32">
126
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
127
+
128
+ <!-- CONTACT FORM & INFO -->
129
+ <div class="grid lg:grid-cols-2 gap-12 lg:gap-20 mb-32">
130
+
131
+ <!-- CONTACT FORM -->
132
+ <div>
133
+ <div class="glass rounded-2xl p-8">
134
+ <h2 class="text-2xl font-bold text-white mb-6">Envie sua mensagem</h2>
135
+
136
+ <form id="contact-form" class="space-y-6">
137
+ <div class="grid md:grid-cols-2 gap-6">
138
+ <div>
139
+ <label for="nome" class="block text-sm font-medium text-gray-300 mb-2">
140
+ Nome completo *
141
+ </label>
142
+ <input
143
+ type="text"
144
+ id="nome"
145
+ name="nome"
146
+ required
147
+ class="w-full px-4 py-3 bg-slate-800/50 border border-slate-600 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:border-transparent transition-colors"
148
+ placeholder="Seu nome completo"
149
+ >
150
+ </div>
151
+
152
+ <div>
153
+ <label for="email" class="block text-sm font-medium text-gray-300 mb-2">
154
+ Email *
155
+ </label>
156
+ <input
157
+ type="email"
158
+ id="email"
159
+ name="email"
160
+ required
161
+ class="w-full px-4 py-3 bg-slate-800/50 border border-slate-600 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:border-transparent transition-colors"
162
+ placeholder="seu@email.com"
163
+ >
164
+ </div>
165
+ </div>
166
+
167
+ <div>
168
+ <label for="empresa" class="block text-sm font-medium text-gray-300 mb-2">
169
+ Empresa/Projeto
170
+ </label>
171
+ <input
172
+ type="text"
173
+ id="empresa"
174
+ name="empresa"
175
+ class="w-full px-4 py-3 bg-slate-800/50 border border-slate-600 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:border-transparent transition-colors"
176
+ placeholder="Nome da empresa ou projeto"
177
+ >
178
+ </div>
179
+
180
+ <div>
181
+ <label for="assunto" class="block text-sm font-medium text-gray-300 mb-2">
182
+ Assunto *
183
+ </label>
184
+ <select
185
+ id="assunto"
186
+ name="assunto"
187
+ required
188
+ class="w-full px-4 py-3 bg-slate-800/50 border border-slate-600 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:border-transparent transition-colors"
189
+ >
190
+ <option value="">Selecione um assunto</option>
191
+ <option value="desenvolvimento-web">Desenvolvimento Web</option>
192
+ <option value="aplicativos-mobile">Aplicativos Mobile</option>
193
+ <option value="inteligencia-artificial">Inteligência Artificial</option>
194
+ <option value="cloud-devops">Cloud & DevOps</option>
195
+ <option value="consultoria">Consultoria Técnica</option>
196
+ <option value="suporte">Suporte & Manutenção</option>
197
+ <option value="outros">Outros</option>
198
+ </select>
199
+ </div>
200
+
201
+ <div>
202
+ <label for="mensagem" class="block text-sm font-medium text-gray-300 mb-2">
203
+ Mensagem *
204
+ </label>
205
+ <textarea
206
+ id="mensagem"
207
+ name="mensagem"
208
+ rows="5"
209
+ required
210
+ class="w-full px-4 py-3 bg-slate-800/50 border border-slate-600 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:border-transparent transition-colors resize-none"
211
+ placeholder="Conte-nos sobre seu projeto..."
212
+ ></textarea>
213
+ </div>
214
+
215
+ <button
216
+ type="submit"
217
+ id="submit-btn"
218
+ class="w-full bg-linear-to-r from-cyan-500 to-blue-600 hover:from-cyan-600 hover:to-blue-700 text-white font-bold py-3 px-4 rounded-lg transition-all duration-300 hover-lift disabled:opacity-50 disabled:cursor-not-allowed"
219
+ >
220
+ <span id="btn-text">Enviar Mensagem</span>
221
+ <i data-lucide="send" class="inline w-5 h-5 ml-2"></i>
222
+ </button>
223
+ </form>
224
+
225
+ <!-- SUCCESS MESSAGE -->
226
+ <div id="success-message" class="hidden mt-6 p-4 bg-green-500/10 border border-green-500/20 rounded-lg">
227
+ <div class="flex items-center">
228
+ <i data-lucide="check-circle" class="w-5 h-5 text-green-400 mr-3"></i>
229
+ <div>
230
+ <h3 class="text-green-400 font-semibold">Mensagem enviada!</h3>
231
+ <p class="text-green-300 text-sm">Entraremos em contato em até 24 horas.</p>
232
+ </div>
233
+ </div>
234
+ </div>
235
+
236
+ <!-- ERROR MESSAGE -->
237
+ <div id="error-message" class="hidden mt-6 p-4 bg-red-500/10 border border-red-500/20 rounded-lg">
238
+ <div class="flex items-center">
239
+ <i data-lucide="alert-circle" class="w-5 h-5 text-red-400 mr-3"></i>
240
+ <div>
241
+ <h3 class="text-red-400 font-semibold">Erro ao enviar</h3>
242
+ <p id="error-text" class="text-red-300 text-sm">Verifique os dados e tente novamente.</p>
243
+ </div>
244
+ </div>
245
+ </div>
246
+ </div>
247
+ </div>
248
+
249
+ <!-- CONTACT INFO -->
250
+ <div class="space-y-8">
251
+ <!-- Contact Methods -->
252
+ <div>
253
+ <h2 class="text-2xl font-bold text-white mb-6">Informações de Contato</h2>
254
+
255
+ <div class="space-y-6">
256
+ <!-- Email -->
257
+ <div class="flex items-start space-x-4">
258
+ <div class="w-12 h-12 bg-cyan-500/20 rounded-lg flex items-center justify-center flex-shrink-0">
259
+ <i data-lucide="mail" class="w-6 h-6 text-cyan-400"></i>
260
+ </div>
261
+ <div>
262
+ <h3 class="text-white font-semibold mb-1">Email</h3>
263
+ <a href="mailto:softedgecorporation@gmail.com" class="text-gray-400 hover:text-cyan-400 transition-colors">
264
+ softedgecorporation@gmail.com
265
+ </a>
266
+ <p class="text-sm text-gray-500 mt-1">Resposta em até 24 horas</p>
267
+ </div>
268
+ </div>
269
+
270
+ <!-- WhatsApp -->
271
+ <div class="flex items-start space-x-4">
272
+ <div class="w-12 h-12 bg-green-500/20 rounded-lg flex items-center justify-center flex-shrink-0">
273
+ <i data-lucide="message-circle" class="w-6 h-6 text-green-400"></i>
274
+ </div>
275
+ <div>
276
+ <h3 class="text-white font-semibold mb-1">WhatsApp</h3>
277
+ <a href="https://wa.me/244900000000" target="_blank" class="text-gray-400 hover:text-cyan-400 transition-colors">
278
+ +244 900 000 000
279
+ </a>
280
+ <p class="text-sm text-gray-500 mt-1">Resposta imediata</p>
281
+ </div>
282
+ </div>
283
+
284
+ <!-- Location -->
285
+ <div class="flex items-start space-x-4">
286
+ <div class="w-12 h-12 bg-purple-500/20 rounded-lg flex items-center justify-center flex-shrink-0">
287
+ <i data-lucide="map-pin" class="w-6 h-6 text-purple-400"></i>
288
+ </div>
289
+ <div>
290
+ <h3 class="text-white font-semibold mb-1">Localização</h3>
291
+ <p class="text-gray-400">Luanda, Angola</p>
292
+ <p class="text-sm text-gray-500 mt-1">Suporte remoto global</p>
293
+ </div>
294
+ </div>
295
+
296
+ <!-- Business Hours -->
297
+ <div class="flex items-start space-x-4">
298
+ <div class="w-12 h-12 bg-orange-500/20 rounded-lg flex items-center justify-center flex-shrink-0">
299
+ <i data-lucide="clock" class="w-6 h-6 text-orange-400"></i>
300
+ </div>
301
+ <div>
302
+ <h3 class="text-white font-semibold mb-1">Horário de Funcionamento</h3>
303
+ <div class="text-gray-400 text-sm space-y-1">
304
+ <p>Segunda - Sexta: 8h às 18h</p>
305
+ <p>Sábado: 9h às 13h</p>
306
+ <p class="text-gray-500">Horário de Angola (UTC+1)</p>
307
+ </div>
308
+ </div>
309
+ </div>
310
+ </div>
311
+ </div>
312
+
313
+ <!-- Why Choose Us -->
314
+ <div class="glass rounded-2xl p-8">
315
+ <h3 class="text-xl font-bold text-white mb-4">Por que nos escolher?</h3>
316
+ <div class="space-y-4">
317
+ <div class="flex items-start space-x-3">
318
+ <i data-lucide="check" class="w-5 h-5 text-green-400 mt-0.5 flex-shrink-0"></i>
319
+ <div>
320
+ <p class="text-white font-medium">Experiência Comprovada</p>
321
+ <p class="text-gray-400 text-sm">70+ projetos entregues com sucesso</p>
322
+ </div>
323
+ </div>
324
+
325
+ <div class="flex items-start space-x-3">
326
+ <i data-lucide="check" class="w-5 h-5 text-green-400 mt-0.5 flex-shrink-0"></i>
327
+ <div>
328
+ <p class="text-white font-medium">Suporte Completo</p>
329
+ <p class="text-gray-400 text-sm">Acompanhamento do início ao fim</p>
330
+ </div>
331
+ </div>
332
+
333
+ <div class="flex items-start space-x-3">
334
+ <i data-lucide="check" class="w-5 h-5 text-green-400 mt-0.5 flex-shrink-0"></i>
335
+ <div>
336
+ <p class="text-white font-medium">Tecnologias Modernas</p>
337
+ <p class="text-gray-400 text-sm">Sempre utilizando as melhores ferramentas</p>
338
+ </div>
339
+ </div>
340
+
341
+ <div class="flex items-start space-x-3">
342
+ <i data-lucide="check" class="w-5 h-5 text-green-400 mt-0.5 flex-shrink-0"></i>
343
+ <div>
344
+ <p class="text-white font-medium">Resultados Garantidos</p>
345
+ <p class="text-gray-400 text-sm">Foco em qualidade e satisfação</p>
346
+ </div>
347
+ </div>
348
+ </div>
349
+ </div>
350
+ </div>
351
+ </div>
352
+
353
+ <!-- FAQ SECTION -->
354
+ <div class="mb-32">
355
+ <div class="text-center mb-16">
356
+ <h2 class="text-3xl sm:text-4xl md:text-5xl font-bold text-white mb-6">
357
+ Perguntas <span class="gradient-text">Frequentes</span>
358
+ </h2>
359
+ <p class="text-gray-400 text-lg max-w-2xl mx-auto">
360
+ Tire suas dúvidas sobre nossos serviços e processos
361
+ </p>
362
+ </div>
363
+
364
+ <div class="max-w-4xl mx-auto space-y-6">
365
+ <div class="glass rounded-xl p-6">
366
+ <h3 class="text-lg font-semibold text-white mb-3">Quanto tempo leva para desenvolver um projeto?</h3>
367
+ <p class="text-gray-400">O prazo varia conforme a complexidade do projeto. Um site institucional pode levar 2-4 semanas, enquanto um sistema completo pode levar 3-6 meses. Fornecemos um cronograma detalhado após a análise dos requisitos.</p>
368
+ </div>
369
+
370
+ <div class="glass rounded-xl p-6">
371
+ <h3 class="text-lg font-semibold text-white mb-3">Vocês trabalham com manutenção após a entrega?</h3>
372
+ <p class="text-gray-400">Sim! Oferecemos planos de manutenção e suporte técnico contínuo. Incluímos 3 meses de suporte gratuito na entrega e oferecemos planos mensais/anuais para atualizações e correções.</p>
373
+ </div>
374
+
375
+ <div class="glass rounded-xl p-6">
376
+ <h3 class="text-lg font-semibold text-white mb-3">Como funciona o processo de desenvolvimento?</h3>
377
+ <p class="text-gray-400">Seguimos uma metodologia ágil: 1) Discovery e análise, 2) Design e prototipagem, 3) Desenvolvimento com sprints semanais, 4) Testes e deploy. Mantemos comunicação constante e entregas parciais para feedback.</p>
378
+ </div>
379
+
380
+ <div class="glass rounded-xl p-6">
381
+ <h3 class="text-lg font-semibold text-white mb-3">Trabalham com projetos fora de Angola?</h3>
382
+ <p class="text-gray-400">Sim! Atendemos clientes em todo o mundo. Utilizamos ferramentas de comunicação remota e podemos adaptar nossos horários para diferentes fusos horários. Já trabalhamos com clientes em Portugal, Brasil e outros países africanos.</p>
383
+ </div>
384
+ </div>
385
+ </div>
386
+
387
+ <!-- CTA SECTION -->
388
+ <div class="text-center">
389
+ <div class="glass rounded-3xl p-12 lg:p-16 max-w-4xl mx-auto">
390
+ <h2 class="text-3xl sm:text-4xl md:text-5xl font-bold text-white mb-6">
391
+ Pronto para <span class="gradient-text">começar</span>?
392
+ </h2>
393
+ <p class="text-gray-400 text-lg mb-8 max-w-2xl mx-auto">
394
+ Não perca tempo. Vamos transformar sua ideia em realidade hoje mesmo.
395
+ </p>
396
+ <div class="flex flex-col sm:flex-row gap-4 justify-center">
397
+ <a href="https://wa.me/244900000000" target="_blank" class="bg-green-500 hover:bg-green-600 text-white font-bold py-4 px-8 rounded-xl transition-all duration-300 hover-lift">
398
+ WhatsApp Agora
399
+ <i data-lucide="message-circle" class="inline w-5 h-5 ml-2"></i>
400
+ </a>
401
+ <a href="mailto:softedgecorporation@gmail.com" class="border border-cyan-500/30 text-cyan-400 hover:bg-cyan-500/10 font-semibold py-4 px-8 rounded-xl transition-all duration-300">
402
+ Enviar Email
403
+ </a>
404
+ </div>
405
+ </div>
406
+ </div>
407
+ </div>
408
+ </main>
409
+
410
+ <!-- FOOTER -->
411
+ <footer class="relative bg-slate-950/95 backdrop-blur-xl border-t border-white/5 mt-20 overflow-hidden">
412
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
413
+ <div class="grid md:grid-cols-4 gap-8">
414
+ <!-- Company Info -->
415
+ <div>
416
+ <div class="flex items-center space-x-3 mb-6">
417
+ <div class="w-12 h-12 rounded-xl overflow-hidden bg-linear-to-br from-cyan-500 to-blue-600 p-0.5">
418
+ <img src="/assets/logo.jpeg" alt="SoftEdge Logo" class="w-full h-full object-cover rounded-xl">
419
+ </div>
420
+ <span class="text-2xl font-bold gradient-text">SoftEdge</span>
421
+ </div>
422
+ <p class="text-gray-400 text-sm leading-relaxed">
423
+ Começamos com um sonho. Hoje desenvolvemos realidades lógicas e softwares mais amáveis.
424
+ </p>
425
+ </div>
426
+
427
+ <!-- Quick Links -->
428
+ <div>
429
+ <h3 class="text-white font-semibold mb-4">Navegação</h3>
430
+ <div class="space-y-2">
431
+ <a href="/" class="block text-gray-400 hover:text-cyan-400 transition-colors text-sm">Início</a>
432
+ <a href="/sobre" class="block text-gray-400 hover:text-cyan-400 transition-colors text-sm">Sobre</a>
433
+ <a href="/servicos" class="block text-gray-400 hover:text-cyan-400 transition-colors text-sm">Serviços</a>
434
+ <a href="/projetos" class="block text-gray-400 hover:text-cyan-400 transition-colors text-sm">Projetos</a>
435
+ <a href="/contato" class="block text-gray-400 hover:text-cyan-400 transition-colors text-sm">Contato</a>
436
+ </div>
437
+ </div>
438
+
439
+ <!-- Services -->
440
+ <div>
441
+ <h3 class="text-white font-semibold mb-4">Serviços</h3>
442
+ <div class="space-y-2">
443
+ <a href="/servicos" class="block text-gray-400 hover:text-cyan-400 transition-colors text-sm">Desenvolvimento Web</a>
444
+ <a href="/servicos" class="block text-gray-400 hover:text-cyan-400 transition-colors text-sm">Apps Mobile</a>
445
+ <a href="/servicos" class="block text-gray-400 hover:text-cyan-400 transition-colors text-sm">Inteligência Artificial</a>
446
+ <a href="/servicos" class="block text-gray-400 hover:text-cyan-400 transition-colors text-sm">Cloud & DevOps</a>
447
+ </div>
448
+ </div>
449
+
450
+ <!-- Contact -->
451
+ <div>
452
+ <h3 class="text-white font-semibold mb-4">Contato</h3>
453
+ <div class="space-y-3">
454
+ <a href="mailto:softedgecorporation@gmail.com" class="flex items-center text-gray-400 hover:text-cyan-400 transition-colors text-sm">
455
+ <i data-lucide="mail" class="w-4 h-4"></i>
456
+ <span class="ml-2">Email</span>
457
+ </a>
458
+ <a href="https://wa.me/244900000000" target="_blank" class="flex items-center text-gray-400 hover:text-cyan-400 transition-colors text-sm">
459
+ <i data-lucide="message-circle" class="w-4 h-4"></i>
460
+ <span class="ml-2">WhatsApp</span>
461
+ </a>
462
+ <div class="flex items-center text-gray-400 text-sm">
463
+ <i data-lucide="map-pin" class="w-4 h-4"></i>
464
+ <span class="ml-2">Luanda, Angola</span>
465
+ </div>
466
+ </div>
467
+ </div>
468
+ </div>
469
+
470
+ <div class="border-t border-white/5 mt-12 pt-8 text-center">
471
+ <p class="text-gray-400 text-sm">
472
+ © 2025 <span class="text-white font-semibold">SoftEdge Corporation</span>. Todos os direitos reservados.
473
+ </p>
474
+ </div>
475
+ </div>
476
+ </footer>
477
+
478
+ <!-- SCRIPTS -->
479
+ <script src="https://unpkg.com/lucide@latest"></script>
480
+ <script>
481
+ document.addEventListener('DOMContentLoaded', function() {
482
+ // Initialize Lucide icons
483
+ lucide.createIcons();
484
+
485
+ // Mobile menu toggle
486
+ const mobileMenuButton = document.getElementById('mobile-menu-button');
487
+ const mobileMenu = document.getElementById('mobile-menu');
488
+
489
+ mobileMenuButton.addEventListener('click', function() {
490
+ mobileMenu.classList.toggle('hidden');
491
+ });
492
+
493
+ // Contact form handling
494
+ const contactForm = document.getElementById('contact-form');
495
+ const submitBtn = document.getElementById('submit-btn');
496
+ const btnText = document.getElementById('btn-text');
497
+ const successMessage = document.getElementById('success-message');
498
+ const errorMessage = document.getElementById('error-message');
499
+ const errorText = document.getElementById('error-text');
500
+
501
+ contactForm.addEventListener('submit', async function(e) {
502
+ e.preventDefault();
503
+
504
+ // Show loading state
505
+ submitBtn.disabled = true;
506
+ btnText.textContent = 'Enviando...';
507
+
508
+ // Hide previous messages
509
+ successMessage.classList.add('hidden');
510
+ errorMessage.classList.add('hidden');
511
+
512
+ // Get form data
513
+ const formData = new FormData(contactForm);
514
+ const data = Object.fromEntries(formData.entries());
515
+
516
+ try {
517
+ const response = await fetch('/api/contact', {
518
+ method: 'POST',
519
+ headers: {
520
+ 'Content-Type': 'application/json',
521
+ },
522
+ body: JSON.stringify(data)
523
+ });
524
+
525
+ const result = await response.json();
526
+
527
+ if (response.ok) {
528
+ // Show success message
529
+ successMessage.classList.remove('hidden');
530
+
531
+ // Reset form
532
+ contactForm.reset();
533
+ } else {
534
+ // Show error message
535
+ errorText.textContent = result.error || 'Erro ao enviar mensagem';
536
+ errorMessage.classList.remove('hidden');
537
+ }
538
+ } catch (error) {
539
+ console.error('Error:', error);
540
+ errorText.textContent = 'Erro de conexão. Tente novamente.';
541
+ errorMessage.classList.remove('hidden');
542
+ } finally {
543
+ // Reset button state
544
+ submitBtn.disabled = false;
545
+ btnText.textContent = 'Enviar Mensagem';
546
+ }
547
+ });
548
+ });
549
+ </script>
550
+
551
+ <style>
552
+ .glass {
553
+ background: rgba(0, 0, 0, 0.8);
554
+ backdrop-filter: blur(20px);
555
+ -webkit-backdrop-filter: blur(20px);
556
+ border: 1px solid rgba(255, 255, 255, 0.1);
557
+ }
558
+
559
+ .gradient-text {
560
+ background: linear-gradient(135deg, #06b6d4, #3b82f6);
561
+ -webkit-background-clip: text;
562
+ -webkit-text-fill-color: transparent;
563
+ background-clip: text;
564
+ }
565
+
566
+ .hover-lift {
567
+ transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
568
+ }
569
+
570
+ .hover-lift:hover {
571
+ transform: translateY(-5px);
572
+ box-shadow: 0 20px 40px rgba(6, 182, 212, 0.2);
573
+ }
574
+ </style>
575
+ </body>
576
+ </html>
templates/index.html ADDED
@@ -0,0 +1,492 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="pt-BR" class="scroll-smooth">
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
+ <title>SoftEdge Corporation - Inovação em Tecnologia</title>
7
+
8
+ <!-- SEO & SOCIAL -->
9
+ <meta name="description" content="SoftEdge Corporation - Inovação em desenvolvimento de software, soluções digitais e consultoria tecnológica em Angola. Transformamos ideias em realidade.">
10
+ <meta name="keywords" content="software, tecnologia, desenvolvimento, Angola, Luanda, IA, React, Python, PHP">
11
+ <meta name="author" content="SoftEdge Corporation">
12
+
13
+ <!-- FAVICON -->
14
+ <link rel="icon" href="/assets/placeholder.svg" type="image/svg+xml">
15
+ <link rel="apple-touch-icon" href="/assets/placeholder.svg">
16
+ <meta property="og:image" content="/assets/placeholder.svg" />
17
+ <meta property="og:title" content="SoftEdge Corporation" />
18
+ <meta property="og:description" content="Soluções em tecnologia para transformar seu negócio" />
19
+ <meta name="twitter:image" content="/assets/placeholder.svg" />
20
+ <meta name="theme-color" content="#0891b2">
21
+
22
+ <!-- FONTS -->
23
+ <link rel="preconnect" href="https://fonts.googleapis.com">
24
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
25
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
26
+
27
+ <!-- TAILWIND CSS -->
28
+ <script src="https://cdn.tailwindcss.com"></script>
29
+ <script>
30
+ tailwind.config = {
31
+ theme: {
32
+ extend: {
33
+ fontFamily: {
34
+ sans: ['Inter', 'system-ui', 'sans-serif'],
35
+ },
36
+ colors: {
37
+ primary: {
38
+ 50: '#ecfeff',
39
+ 100: '#cffafe',
40
+ 500: '#06b6d4',
41
+ 600: '#0891b2',
42
+ 700: '#0e7490',
43
+ 900: '#164e63',
44
+ }
45
+ },
46
+ animation: {
47
+ 'fade-in': 'fadeIn 0.6s ease-out',
48
+ 'slide-up': 'slideUp 0.6s ease-out',
49
+ 'bounce-gentle': 'bounceGentle 2s infinite',
50
+ }
51
+ }
52
+ }
53
+ }
54
+ </script>
55
+
56
+ <!-- LUCIDE ICONS -->
57
+ <script src="https://unpkg.com/lucide@latest"></script>
58
+
59
+ <!-- CUSTOM CSS -->
60
+ <link href="/assets/css/style.css" rel="stylesheet">
61
+
62
+ <style>
63
+ /* Custom animations */
64
+ @keyframes fadeIn {
65
+ from { opacity: 0; transform: translateY(20px); }
66
+ to { opacity: 1; transform: translateY(0); }
67
+ }
68
+
69
+ @keyframes slideUp {
70
+ from { opacity: 0; transform: translateY(40px); }
71
+ to { opacity: 1; transform: translateY(0); }
72
+ }
73
+
74
+ @keyframes bounceGentle {
75
+ 0%, 100% { transform: translateY(0); }
76
+ 50% { transform: translateY(-10px); }
77
+ }
78
+
79
+ /* Glass effect */
80
+ .glass {
81
+ background: rgba(0, 0, 0, 0.8);
82
+ backdrop-filter: blur(20px);
83
+ -webkit-backdrop-filter: blur(20px);
84
+ border: 1px solid rgba(255, 255, 255, 0.1);
85
+ }
86
+
87
+ /* Gradient text */
88
+ .gradient-text {
89
+ background: linear-gradient(135deg, #06b6d4, #3b82f6);
90
+ -webkit-background-clip: text;
91
+ -webkit-text-fill-color: transparent;
92
+ background-clip: text;
93
+ }
94
+
95
+ /* Hover effects */
96
+ .hover-lift {
97
+ transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
98
+ }
99
+
100
+ .hover-lift:hover {
101
+ transform: translateY(-5px);
102
+ box-shadow: 0 20px 40px rgba(6, 182, 212, 0.2);
103
+ }
104
+
105
+ /* Typing animation */
106
+ .typing::after {
107
+ content: '|';
108
+ animation: blink 1s infinite;
109
+ }
110
+
111
+ @keyframes blink {
112
+ 0%, 50% { opacity: 1; }
113
+ 51%, 100% { opacity: 0; }
114
+ }
115
+ </style>
116
+ </head>
117
+
118
+ <body class="min-h-screen bg-linear-to-br from-slate-950 via-slate-900 to-slate-950 text-white antialiased font-sans">
119
+ <!-- HEADER -->
120
+ <header class="fixed top-0 left-0 right-0 z-50 glass">
121
+ <nav class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
122
+ <div class="flex items-center justify-between h-16">
123
+ <!-- Logo -->
124
+ <div class="flex items-center space-x-3">
125
+ <div class="w-10 h-10 rounded-xl overflow-hidden bg-linear-to-br from-cyan-500 to-blue-600 p-0.5">
126
+ <img src="/assets/logo.jpeg" alt="SoftEdge Logo" class="w-full h-full object-cover rounded-xl">
127
+ </div>
128
+ <span class="text-xl font-bold gradient-text">SoftEdge</span>
129
+ </div>
130
+
131
+ <!-- Desktop Navigation -->
132
+ <div class="hidden md:flex items-center space-x-8">
133
+ <a href="/" class="text-white hover:text-cyan-400 transition-colors font-medium">Início</a>
134
+ <a href="/sobre" class="text-gray-300 hover:text-cyan-400 transition-colors">Sobre</a>
135
+ <a href="/servicos" class="text-gray-300 hover:text-cyan-400 transition-colors">Serviços</a>
136
+ <a href="/projetos" class="text-gray-300 hover:text-cyan-400 transition-colors">Projetos</a>
137
+ <a href="/contato" class="text-gray-300 hover:text-cyan-400 transition-colors">Contato</a>
138
+ <a href="/react-app" class="bg-cyan-500 hover:bg-cyan-600 text-white px-4 py-2 rounded-lg transition-colors font-medium">
139
+ React App
140
+ </a>
141
+ </div>
142
+
143
+ <!-- Mobile menu button -->
144
+ <button class="md:hidden text-white" id="mobile-menu-button">
145
+ <i data-lucide="menu" class="w-6 h-6"></i>
146
+ </button>
147
+ </div>
148
+
149
+ <!-- Mobile Navigation -->
150
+ <div class="md:hidden hidden" id="mobile-menu">
151
+ <div class="px-2 pt-2 pb-3 space-y-1 bg-slate-900/95 rounded-lg mt-2">
152
+ <a href="/" class="block px-3 py-2 text-white font-medium">Início</a>
153
+ <a href="/sobre" class="block px-3 py-2 text-gray-300 hover:text-cyan-400">Sobre</a>
154
+ <a href="/servicos" class="block px-3 py-2 text-gray-300 hover:text-cyan-400">Serviços</a>
155
+ <a href="/projetos" class="block px-3 py-2 text-gray-300 hover:text-cyan-400">Projetos</a>
156
+ <a href="/contato" class="block px-3 py-2 text-gray-300 hover:text-cyan-400">Contato</a>
157
+ <a href="/react-app" class="block px-3 py-2 bg-cyan-500 text-white rounded-lg text-center">React App</a>
158
+ </div>
159
+ </div>
160
+ </nav>
161
+ </header>
162
+
163
+ <!-- HERO SECTION -->
164
+ <section class="relative min-h-screen flex items-center justify-center overflow-hidden pt-16">
165
+ <!-- Background -->
166
+ <div class="absolute inset-0 -z-10">
167
+ <div class="absolute inset-0 bg-linear-to-br from-slate-950 via-slate-900 to-slate-950"></div>
168
+ <div class="absolute inset-0 opacity-30">
169
+ <div class="absolute top-20 left-20 w-96 h-96 bg-cyan-500/20 rounded-full blur-3xl animate-pulse"></div>
170
+ <div class="absolute bottom-20 right-20 w-96 h-96 bg-blue-500/20 rounded-full blur-3xl animate-pulse" style="animation-delay: 1s;"></div>
171
+ <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-96 h-96 bg-purple-500/10 rounded-full blur-3xl animate-pulse" style="animation-delay: 2s;"></div>
172
+ </div>
173
+ </div>
174
+
175
+ <!-- Content -->
176
+ <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
177
+ <div class="space-y-8 animate-fade-in">
178
+ <!-- Badge -->
179
+ <div class="inline-block px-4 py-2 bg-cyan-500/10 rounded-full border border-cyan-500/20">
180
+ <span class="text-cyan-400 text-sm font-semibold uppercase tracking-wider">🚀 Inovação em Tecnologia</span>
181
+ </div>
182
+
183
+ <!-- Main Heading -->
184
+ <h1 class="text-5xl sm:text-6xl md:text-7xl lg:text-8xl font-bold leading-tight">
185
+ Do sonho<br>
186
+ <span class="gradient-text">à realidade lógica</span>
187
+ </h1>
188
+
189
+ <!-- Subtitle -->
190
+ <p class="text-lg sm:text-xl md:text-2xl text-gray-400 max-w-3xl mx-auto leading-relaxed">
191
+ Transformamos ideias em soluções digitais de excelência.
192
+ <span class="text-cyan-400 font-semibold">Desenvolvimento full-stack</span> com as tecnologias mais modernas.
193
+ </p>
194
+
195
+ <!-- CTA Buttons -->
196
+ <div class="flex flex-col sm:flex-row gap-4 justify-center items-center">
197
+ <a href="/contato" class="bg-linear-to-r from-cyan-500 to-blue-600 hover:from-cyan-600 hover:to-blue-700 text-white font-bold py-4 px-8 rounded-xl transition-all duration-300 hover-lift text-lg">
198
+ Começar Projeto
199
+ <i data-lucide="arrow-right" class="inline w-5 h-5 ml-2"></i>
200
+ </a>
201
+ <a href="/projetos" class="border border-cyan-500/30 text-cyan-400 hover:bg-cyan-500/10 font-semibold py-4 px-8 rounded-xl transition-all duration-300 text-lg">
202
+ Ver Projetos
203
+ </a>
204
+ </div>
205
+
206
+ <!-- Stats -->
207
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-8 mt-16 max-w-4xl mx-auto">
208
+ <div class="text-center">
209
+ <div class="text-3xl md:text-4xl font-bold gradient-text" id="projects-count">{{ stats.projects }}+</div>
210
+ <p class="text-gray-400 text-sm md:text-base">Projetos Entregues</p>
211
+ </div>
212
+ <div class="text-center">
213
+ <div class="text-3xl md:text-4xl font-bold gradient-text">{{ stats.contacts }}</div>
214
+ <p class="text-gray-400 text-sm md:text-base">Clientes Satisfeitos</p>
215
+ </div>
216
+ <div class="text-center">
217
+ <div class="text-3xl md:text-4xl font-bold gradient-text">{{ stats.satisfaction }}★</div>
218
+ <p class="text-gray-400 text-sm md:text-base">Satisfação</p>
219
+ </div>
220
+ <div class="text-center">
221
+ <div class="text-3xl md:text-4xl font-bold gradient-text">24/7</div>
222
+ <p class="text-gray-400 text-sm md:text-base">Suporte</p>
223
+ </div>
224
+ </div>
225
+ </div>
226
+ </div>
227
+
228
+ <!-- Scroll indicator -->
229
+ <div class="absolute bottom-8 left-1/2 -translate-x-1/2 animate-bounce-gentle">
230
+ <i data-lucide="chevron-down" class="w-8 h-8 text-cyan-400"></i>
231
+ </div>
232
+ </section>
233
+
234
+ <!-- SERVICES SECTION -->
235
+ <section class="py-20 lg:py-32 relative">
236
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
237
+ <div class="text-center mb-16">
238
+ <div class="inline-block px-4 py-2 bg-cyan-500/10 rounded-full border border-cyan-500/20 mb-4">
239
+ <span class="text-cyan-400 text-sm font-semibold uppercase tracking-wider">Nossos Serviços</span>
240
+ </div>
241
+ <h2 class="text-3xl sm:text-4xl md:text-5xl font-bold text-white mb-6">
242
+ Soluções <span class="gradient-text">Tecnológicas Completas</span>
243
+ </h2>
244
+ <p class="text-gray-400 text-lg max-w-2xl mx-auto">
245
+ Do conceito à implementação, oferecemos serviços end-to-end para transformar seu negócio digital.
246
+ </p>
247
+ </div>
248
+
249
+ <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
250
+ <!-- Service 1 -->
251
+ <div class="glass rounded-2xl p-8 hover-lift">
252
+ <div class="w-16 h-16 bg-cyan-500/20 rounded-2xl flex items-center justify-center mb-6">
253
+ <i data-lucide="code" class="w-8 h-8 text-cyan-400"></i>
254
+ </div>
255
+ <h3 class="text-xl font-bold text-white mb-4">Desenvolvimento Web</h3>
256
+ <p class="text-gray-400 mb-6">Aplicações web modernas com React, Next.js, PHP e Python. Performance e escalabilidade garantidas.</p>
257
+ <div class="flex flex-wrap gap-2">
258
+ <span class="px-3 py-1 bg-cyan-500/10 text-cyan-400 rounded-full text-sm">React</span>
259
+ <span class="px-3 py-1 bg-cyan-500/10 text-cyan-400 rounded-full text-sm">Next.js</span>
260
+ <span class="px-3 py-1 bg-cyan-500/10 text-cyan-400 rounded-full text-sm">PHP</span>
261
+ </div>
262
+ </div>
263
+
264
+ <!-- Service 2 -->
265
+ <div class="glass rounded-2xl p-8 hover-lift">
266
+ <div class="w-16 h-16 bg-blue-500/20 rounded-2xl flex items-center justify-center mb-6">
267
+ <i data-lucide="smartphone" class="w-8 h-8 text-blue-400"></i>
268
+ </div>
269
+ <h3 class="text-xl font-bold text-white mb-4">Aplicativos Mobile</h3>
270
+ <p class="text-gray-400 mb-6">Apps nativos e multiplataforma com Flutter e React Native. UX excepcional em todas as plataformas.</p>
271
+ <div class="flex flex-wrap gap-2">
272
+ <span class="px-3 py-1 bg-blue-500/10 text-blue-400 rounded-full text-sm">Flutter</span>
273
+ <span class="px-3 py-1 bg-blue-500/10 text-blue-400 rounded-full text-sm">React Native</span>
274
+ <span class="px-3 py-1 bg-blue-500/10 text-blue-400 rounded-full text-sm">Firebase</span>
275
+ </div>
276
+ </div>
277
+
278
+ <!-- Service 3 -->
279
+ <div class="glass rounded-2xl p-8 hover-lift">
280
+ <div class="w-16 h-16 bg-purple-500/20 rounded-2xl flex items-center justify-center mb-6">
281
+ <i data-lucide="brain" class="w-8 h-8 text-purple-400"></i>
282
+ </div>
283
+ <h3 class="text-xl font-bold text-white mb-4">Inteligência Artificial</h3>
284
+ <p class="text-gray-400 mb-6">Soluções de IA personalizadas com Python, TensorFlow e OpenAI. Automação e insights inteligentes.</p>
285
+ <div class="flex flex-wrap gap-2">
286
+ <span class="px-3 py-1 bg-purple-500/10 text-purple-400 rounded-full text-sm">Python</span>
287
+ <span class="px-3 py-1 bg-purple-500/10 text-purple-400 rounded-full text-sm">TensorFlow</span>
288
+ <span class="px-3 py-1 bg-purple-500/10 text-purple-400 rounded-full text-sm">OpenAI</span>
289
+ </div>
290
+ </div>
291
+
292
+ <!-- Service 4 -->
293
+ <div class="glass rounded-2xl p-8 hover-lift">
294
+ <div class="w-16 h-16 bg-green-500/20 rounded-2xl flex items-center justify-center mb-6">
295
+ <i data-lucide="cloud" class="w-8 h-8 text-green-400"></i>
296
+ </div>
297
+ <h3 class="text-xl font-bold text-white mb-4">Cloud & DevOps</h3>
298
+ <p class="text-gray-400 mb-6">Infraestrutura escalável com Docker, AWS e Railway. Deploy automatizado e monitoramento 24/7.</p>
299
+ <div class="flex flex-wrap gap-2">
300
+ <span class="px-3 py-1 bg-green-500/10 text-green-400 rounded-full text-sm">Docker</span>
301
+ <span class="px-3 py-1 bg-green-500/10 text-green-400 rounded-full text-sm">AWS</span>
302
+ <span class="px-3 py-1 bg-green-500/10 text-green-400 rounded-full text-sm">Railway</span>
303
+ </div>
304
+ </div>
305
+
306
+ <!-- Service 5 -->
307
+ <div class="glass rounded-2xl p-8 hover-lift">
308
+ <div class="w-16 h-16 bg-orange-500/20 rounded-2xl flex items-center justify-center mb-6">
309
+ <i data-lucide="database" class="w-8 h-8 text-orange-400"></i>
310
+ </div>
311
+ <h3 class="text-xl font-bold text-white mb-4">Consultoria Técnica</h3>
312
+ <p class="text-gray-400 mb-6">Análise de sistemas, arquitetura de software e otimização de performance. Expertise técnica completa.</p>
313
+ <div class="flex flex-wrap gap-2">
314
+ <span class="px-3 py-1 bg-orange-500/10 text-orange-400 rounded-full text-sm">Arquitetura</span>
315
+ <span class="px-3 py-1 bg-orange-500/10 text-orange-400 rounded-full text-sm">Performance</span>
316
+ <span class="px-3 py-1 bg-orange-500/10 text-orange-400 rounded-full text-sm">Segurança</span>
317
+ </div>
318
+ </div>
319
+
320
+ <!-- Service 6 -->
321
+ <div class="glass rounded-2xl p-8 hover-lift">
322
+ <div class="w-16 h-16 bg-pink-500/20 rounded-2xl flex items-center justify-center mb-6">
323
+ <i data-lucide="users" class="w-8 h-8 text-pink-400"></i>
324
+ </div>
325
+ <h3 class="text-xl font-bold text-white mb-4">Suporte & Manutenção</h3>
326
+ <p class="text-gray-400 mb-6">Suporte técnico contínuo, atualizações de segurança e melhorias constantes. Seu sistema sempre atualizado.</p>
327
+ <div class="flex flex-wrap gap-2">
328
+ <span class="px-3 py-1 bg-pink-500/10 text-pink-400 rounded-full text-sm">24/7</span>
329
+ <span class="px-3 py-1 bg-pink-500/10 text-pink-400 rounded-full text-sm">Monitoramento</span>
330
+ <span class="px-3 py-1 bg-pink-500/10 text-pink-400 rounded-full text-sm">Updates</span>
331
+ </div>
332
+ </div>
333
+ </div>
334
+ </div>
335
+ </section>
336
+
337
+ <!-- CTA SECTION -->
338
+ <section class="py-20 lg:py-32 relative">
339
+ <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
340
+ <div class="glass rounded-3xl p-12 lg:p-16">
341
+ <h2 class="text-3xl sm:text-4xl md:text-5xl font-bold text-white mb-6">
342
+ Pronto para <span class="gradient-text">transformar</span> sua ideia<br>
343
+ em realidade?
344
+ </h2>
345
+ <p class="text-gray-400 text-lg mb-8 max-w-2xl mx-auto">
346
+ Vamos conversar sobre seu projeto. Nossa equipe está pronta para ajudar você a alcançar seus objetivos tecnológicos.
347
+ </p>
348
+ <div class="flex flex-col sm:flex-row gap-4 justify-center">
349
+ <a href="/contato" class="bg-linear-to-r from-cyan-500 to-blue-600 hover:from-cyan-600 hover:to-blue-700 text-white font-bold py-4 px-8 rounded-xl transition-all duration-300 hover-lift">
350
+ Falar com Especialista
351
+ <i data-lucide="message-circle" class="inline w-5 h-5 ml-2"></i>
352
+ </a>
353
+ <a href="https://wa.me/244900000000" target="_blank" class="border border-cyan-500/30 text-cyan-400 hover:bg-cyan-500/10 font-semibold py-4 px-8 rounded-xl transition-all duration-300">
354
+ WhatsApp
355
+ <i data-lucide="phone" class="inline w-5 h-5 ml-2"></i>
356
+ </a>
357
+ </div>
358
+ </div>
359
+ </div>
360
+ </section>
361
+
362
+ <!-- FOOTER -->
363
+ <footer class="relative bg-slate-950/95 backdrop-blur-xl border-t border-white/5 mt-20 overflow-hidden">
364
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
365
+ <div class="grid md:grid-cols-4 gap-8">
366
+ <!-- Company Info -->
367
+ <div>
368
+ <div class="flex items-center space-x-3 mb-6">
369
+ <div class="w-12 h-12 rounded-xl overflow-hidden bg-linear-to-br from-cyan-500 to-blue-600 p-0.5">
370
+ <img src="/assets/logo.jpeg" alt="SoftEdge Logo" class="w-full h-full object-cover rounded-xl">
371
+ </div>
372
+ <span class="text-2xl font-bold gradient-text">SoftEdge</span>
373
+ </div>
374
+ <p class="text-gray-400 text-sm leading-relaxed">
375
+ Começamos com um sonho. Hoje desenvolvemos realidades lógicas e softwares mais amáveis.
376
+ </p>
377
+ </div>
378
+
379
+ <!-- Quick Links -->
380
+ <div>
381
+ <h3 class="text-white font-semibold mb-4">Navegação</h3>
382
+ <div class="space-y-2">
383
+ <a href="/" class="block text-gray-400 hover:text-cyan-400 transition-colors text-sm">Início</a>
384
+ <a href="/sobre" class="block text-gray-400 hover:text-cyan-400 transition-colors text-sm">Sobre</a>
385
+ <a href="/servicos" class="block text-gray-400 hover:text-cyan-400 transition-colors text-sm">Serviços</a>
386
+ <a href="/projetos" class="block text-gray-400 hover:text-cyan-400 transition-colors text-sm">Projetos</a>
387
+ <a href="/contato" class="block text-gray-400 hover:text-cyan-400 transition-colors text-sm">Contato</a>
388
+ </div>
389
+ </div>
390
+
391
+ <!-- Services -->
392
+ <div>
393
+ <h3 class="text-white font-semibold mb-4">Serviços</h3>
394
+ <div class="space-y-2">
395
+ <a href="/servicos" class="block text-gray-400 hover:text-cyan-400 transition-colors text-sm">Desenvolvimento Web</a>
396
+ <a href="/servicos" class="block text-gray-400 hover:text-cyan-400 transition-colors text-sm">Apps Mobile</a>
397
+ <a href="/servicos" class="block text-gray-400 hover:text-cyan-400 transition-colors text-sm">Inteligência Artificial</a>
398
+ <a href="/servicos" class="block text-gray-400 hover:text-cyan-400 transition-colors text-sm">Cloud & DevOps</a>
399
+ </div>
400
+ </div>
401
+
402
+ <!-- Contact -->
403
+ <div>
404
+ <h3 class="text-white font-semibold mb-4">Contato</h3>
405
+ <div class="space-y-3">
406
+ <a href="mailto:softedgecorporation@gmail.com" class="flex items-center text-gray-400 hover:text-cyan-400 transition-colors text-sm">
407
+ <i data-lucide="mail" class="w-4 h-4 mr-2"></i>
408
+ Email
409
+ </a>
410
+ <a href="https://wa.me/244900000000" target="_blank" class="flex items-center text-gray-400 hover:text-cyan-400 transition-colors text-sm">
411
+ <i data-lucide="message-circle" class="w-4 h-4 mr-2"></i>
412
+ WhatsApp
413
+ </a>
414
+ <div class="flex items-center text-gray-400 text-sm">
415
+ <i data-lucide="map-pin" class="w-4 h-4 mr-2"></i>
416
+ Luanda, Angola
417
+ </div>
418
+ </div>
419
+ </div>
420
+ </div>
421
+
422
+ <div class="border-t border-white/5 mt-12 pt-8 text-center">
423
+ <p class="text-gray-400 text-sm">
424
+ © 2025 <span class="text-white font-semibold">SoftEdge Corporation</span>. Todos os direitos reservados.
425
+ </p>
426
+ </div>
427
+ </div>
428
+ </footer>
429
+
430
+ <!-- SCRIPTS -->
431
+ <script src="https://unpkg.com/lucide@latest"></script>
432
+ <script>
433
+ document.addEventListener('DOMContentLoaded', function() {
434
+ // Initialize Lucide icons
435
+ lucide.createIcons();
436
+
437
+ // Mobile menu toggle
438
+ const mobileMenuButton = document.getElementById('mobile-menu-button');
439
+ const mobileMenu = document.getElementById('mobile-menu');
440
+
441
+ mobileMenuButton.addEventListener('click', function() {
442
+ mobileMenu.classList.toggle('hidden');
443
+ });
444
+
445
+ // Fetch and update stats
446
+ fetch('/api/stats')
447
+ .then(response => response.json())
448
+ .then(data => {
449
+ document.getElementById('projects-count').textContent = data.projects + '+';
450
+ })
451
+ .catch(error => console.log('Stats not available yet'));
452
+
453
+ // Smooth scrolling
454
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
455
+ anchor.addEventListener('click', function (e) {
456
+ e.preventDefault();
457
+ const target = document.querySelector(this.getAttribute('href'));
458
+ if (target) {
459
+ target.scrollIntoView({
460
+ behavior: 'smooth',
461
+ block: 'start'
462
+ });
463
+ }
464
+ });
465
+ });
466
+
467
+ // Intersection Observer for animations
468
+ const observerOptions = {
469
+ threshold: 0.1,
470
+ rootMargin: '0px 0px -100px 0px'
471
+ };
472
+
473
+ const observer = new IntersectionObserver((entries) => {
474
+ entries.forEach(entry => {
475
+ if (entry.isIntersecting) {
476
+ entry.target.style.opacity = '1';
477
+ entry.target.style.transform = 'translateY(0)';
478
+ }
479
+ });
480
+ }, observerOptions);
481
+
482
+ // Observe sections
483
+ document.querySelectorAll('section > div, .glass').forEach(el => {
484
+ el.style.opacity = '0';
485
+ el.style.transform = 'translateY(30px)';
486
+ el.style.transition = 'opacity 0.8s ease, transform 0.8s ease';
487
+ observer.observe(el);
488
+ });
489
+ });
490
+ </script>
491
+ </body>
492
+ </html>
templates/login.html ADDED
@@ -0,0 +1,296 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="pt-BR" class="scroll-smooth">
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
+ <title>Login - SoftEdge Corporation</title>
7
+
8
+ <!-- SEO & SOCIAL -->
9
+ <meta name="description" content="Acesse sua conta SoftEdge Corporation. Área restrita para clientes e administradores.">
10
+ <meta name="keywords" content="login, conta, softedge, acesso">
11
+
12
+ <!-- FAVICON -->
13
+ <link rel="icon" href="/assets/placeholder.svg" type="image/svg+xml">
14
+ <link rel="apple-touch-icon" href="/assets/placeholder.svg">
15
+ <meta property="og:image" content="/assets/placeholder.svg" />
16
+ <meta property="og:title" content="Login - SoftEdge Corporation" />
17
+ <meta property="og:description" content="Acesse sua conta" />
18
+
19
+ <!-- FONTS -->
20
+ <link rel="preconnect" href="https://fonts.googleapis.com">
21
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
22
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
23
+
24
+ <!-- TAILWIND CSS -->
25
+ <script src="https://cdn.tailwindcss.com"></script>
26
+ <script>
27
+ tailwind.config = {
28
+ theme: {
29
+ extend: {
30
+ fontFamily: {
31
+ sans: ['Inter', 'system-ui', 'sans-serif'],
32
+ },
33
+ colors: {
34
+ primary: {
35
+ 50: '#ecfeff',
36
+ 100: '#cffafe',
37
+ 500: '#06b6d4',
38
+ 600: '#0891b2',
39
+ 700: '#0e7490',
40
+ 900: '#164e63',
41
+ }
42
+ }
43
+ }
44
+ }
45
+ }
46
+ </script>
47
+
48
+ <!-- LUCIDE ICONS -->
49
+ <script src="https://unpkg.com/lucide@latest"></script>
50
+
51
+ <!-- CUSTOM CSS -->
52
+ <link href="/assets/css/style.css" rel="stylesheet">
53
+ </head>
54
+
55
+ <body class="min-h-screen bg-linear-to-br from-slate-950 via-slate-900 to-slate-950 text-white antialiased font-sans flex items-center justify-center p-4">
56
+ <!-- BACKGROUND -->
57
+ <div class="absolute inset-0 -z-10">
58
+ <div class="absolute inset-0 bg-linear-to-br from-slate-950 via-slate-900 to-slate-950"></div>
59
+ <div class="absolute inset-0 opacity-20">
60
+ <div class="absolute top-20 left-20 w-96 h-96 bg-cyan-500/20 rounded-full blur-3xl"></div>
61
+ <div class="absolute bottom-20 right-20 w-96 h-96 bg-blue-500/20 rounded-full blur-3xl"></div>
62
+ </div>
63
+ </div>
64
+
65
+ <!-- LOGIN FORM -->
66
+ <div class="w-full max-w-md">
67
+ <!-- HEADER -->
68
+ <div class="text-center mb-8">
69
+ <div class="flex items-center justify-center space-x-3 mb-6">
70
+ <div class="w-12 h-12 rounded-xl overflow-hidden bg-linear-to-br from-cyan-500 to-blue-600 p-0.5">
71
+ <img src="/assets/logo.jpeg" alt="SoftEdge Logo" class="w-full h-full object-cover rounded-xl">
72
+ </div>
73
+ <span class="text-2xl font-bold gradient-text">SoftEdge</span>
74
+ </div>
75
+ <h1 class="text-2xl font-bold text-white mb-2">Bem-vindo de volta</h1>
76
+ <p class="text-gray-400">Entre na sua conta para continuar</p>
77
+ </div>
78
+
79
+ <!-- FORM -->
80
+ <div class="glass rounded-2xl p-8">
81
+ <form id="login-form" class="space-y-6">
82
+ <div>
83
+ <label for="email" class="block text-sm font-medium text-gray-300 mb-2">
84
+ Email
85
+ </label>
86
+ <div class="relative">
87
+ <input
88
+ type="email"
89
+ id="email"
90
+ name="email"
91
+ required
92
+ class="w-full pl-12 pr-4 py-3 bg-slate-800/50 border border-slate-600 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:border-transparent transition-colors"
93
+ placeholder="seu@email.com"
94
+ >
95
+ <div class="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400">
96
+ <i data-lucide="mail" class="w-5 h-5"></i>
97
+ </div>
98
+ </div>
99
+ </div>
100
+
101
+ <div>
102
+ <label for="password" class="block text-sm font-medium text-gray-300 mb-2">
103
+ Senha
104
+ </label>
105
+ <div class="relative">
106
+ <input
107
+ type="password"
108
+ id="password"
109
+ name="password"
110
+ required
111
+ class="w-full pl-12 pr-12 py-3 bg-slate-800/50 border border-slate-600 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:border-transparent transition-colors"
112
+ placeholder="••••••••"
113
+ >
114
+ <div class="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400">
115
+ <i data-lucide="lock" class="w-5 h-5"></i>
116
+ </div>
117
+ <button type="button" class="absolute right-4 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-300" id="toggle-password">
118
+ <i data-lucide="eye" class="w-5 h-5"></i>
119
+ </button>
120
+ </div>
121
+ </div>
122
+
123
+ <div class="flex items-center justify-between">
124
+ <label class="flex items-center">
125
+ <input type="checkbox" class="w-4 h-4 bg-slate-800 border-slate-600 rounded focus:ring-cyan-500 focus:ring-2">
126
+ <span class="ml-2 text-sm text-gray-400">Lembrar-me</span>
127
+ </label>
128
+ <a href="#" class="text-sm text-cyan-400 hover:text-cyan-300 transition-colors">
129
+ Esqueceu a senha?
130
+ </a>
131
+ </div>
132
+
133
+ <button
134
+ type="submit"
135
+ id="login-btn"
136
+ class="w-full bg-linear-to-r from-cyan-500 to-blue-600 hover:from-cyan-600 hover:to-blue-700 text-white font-bold py-3 px-4 rounded-lg transition-all duration-300 hover-lift disabled:opacity-50 disabled:cursor-not-allowed"
137
+ >
138
+ <span id="btn-text">Entrar</span>
139
+ <i data-lucide="log-in" class="inline w-5 h-5 ml-2"></i>
140
+ </button>
141
+ </form>
142
+
143
+ <!-- SUCCESS MESSAGE -->
144
+ <div id="success-message" class="hidden mt-6 p-4 bg-green-500/10 border border-green-500/20 rounded-lg">
145
+ <div class="flex items-center">
146
+ <i data-lucide="check-circle" class="w-5 h-5 text-green-400 mr-3"></i>
147
+ <div>
148
+ <h3 class="text-green-400 font-semibold">Login realizado!</h3>
149
+ <p class="text-green-300 text-sm">Redirecionando...</p>
150
+ </div>
151
+ </div>
152
+ </div>
153
+
154
+ <!-- ERROR MESSAGE -->
155
+ <div id="error-message" class="hidden mt-6 p-4 bg-red-500/10 border border-red-500/20 rounded-lg">
156
+ <div class="flex items-center">
157
+ <i data-lucide="alert-circle" class="w-5 h-5 text-red-400 mr-3"></i>
158
+ <div>
159
+ <h3 class="text-red-400 font-semibold">Erro no login</h3>
160
+ <p id="error-text" class="text-red-300 text-sm">Verifique suas credenciais e tente novamente.</p>
161
+ </div>
162
+ </div>
163
+ </div>
164
+ </div>
165
+
166
+ <!-- FOOTER -->
167
+ <div class="text-center mt-8">
168
+ <p class="text-gray-400 text-sm">
169
+ Não tem uma conta?
170
+ <a href="/register" class="text-cyan-400 hover:text-cyan-300 transition-colors font-medium">
171
+ Criar conta
172
+ </a>
173
+ </p>
174
+ <div class="mt-6 pt-6 border-t border-slate-700">
175
+ <a href="/" class="text-gray-400 hover:text-cyan-400 transition-colors text-sm">
176
+ ← Voltar ao site
177
+ </a>
178
+ </div>
179
+ </div>
180
+
181
+ <!-- DEMO CREDENTIALS -->
182
+ <div class="mt-8 p-4 bg-slate-800/50 rounded-lg border border-slate-600">
183
+ <h3 class="text-sm font-semibold text-gray-300 mb-2">Credenciais de Demonstração:</h3>
184
+ <div class="text-xs text-gray-400 space-y-1">
185
+ <p><strong>Email:</strong> admin@softedge.com</p>
186
+ <p><strong>Senha:</strong> Admin@123456</p>
187
+ </div>
188
+ </div>
189
+ </div>
190
+
191
+ <!-- SCRIPTS -->
192
+ <script src="https://unpkg.com/lucide@latest"></script>
193
+ <script>
194
+ document.addEventListener('DOMContentLoaded', function() {
195
+ // Initialize Lucide icons
196
+ lucide.createIcons();
197
+
198
+ // Password toggle
199
+ const togglePassword = document.getElementById('toggle-password');
200
+ const passwordInput = document.getElementById('password');
201
+
202
+ togglePassword.addEventListener('click', function() {
203
+ const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';
204
+ passwordInput.setAttribute('type', type);
205
+
206
+ const icon = this.querySelector('i');
207
+ icon.setAttribute('data-lucide', type === 'password' ? 'eye' : 'eye-off');
208
+ lucide.createIcons();
209
+ });
210
+
211
+ // Login form handling
212
+ const loginForm = document.getElementById('login-form');
213
+ const loginBtn = document.getElementById('login-btn');
214
+ const btnText = document.getElementById('btn-text');
215
+ const successMessage = document.getElementById('success-message');
216
+ const errorMessage = document.getElementById('error-message');
217
+ const errorText = document.getElementById('error-text');
218
+
219
+ loginForm.addEventListener('submit', async function(e) {
220
+ e.preventDefault();
221
+
222
+ // Show loading state
223
+ loginBtn.disabled = true;
224
+ btnText.textContent = 'Entrando...';
225
+
226
+ // Hide previous messages
227
+ successMessage.classList.add('hidden');
228
+ errorMessage.classList.add('hidden');
229
+
230
+ // Get form data
231
+ const formData = new FormData(loginForm);
232
+ const data = Object.fromEntries(formData.entries());
233
+
234
+ try {
235
+ const response = await fetch('/api/auth/login', {
236
+ method: 'POST',
237
+ headers: {
238
+ 'Content-Type': 'application/json',
239
+ },
240
+ body: JSON.stringify(data)
241
+ });
242
+
243
+ const result = await response.json();
244
+
245
+ if (response.ok) {
246
+ // Show success message
247
+ successMessage.classList.remove('hidden');
248
+
249
+ // Redirect after delay
250
+ setTimeout(() => {
251
+ window.location.href = '/admin';
252
+ }, 1500);
253
+ } else {
254
+ // Show error message
255
+ errorText.textContent = result.error || 'Erro ao fazer login';
256
+ errorMessage.classList.remove('hidden');
257
+ }
258
+ } catch (error) {
259
+ console.error('Error:', error);
260
+ errorText.textContent = 'Erro de conexão. Tente novamente.';
261
+ errorMessage.classList.remove('hidden');
262
+ } finally {
263
+ // Reset button state
264
+ loginBtn.disabled = false;
265
+ btnText.textContent = 'Entrar';
266
+ }
267
+ });
268
+ });
269
+ </script>
270
+
271
+ <style>
272
+ .glass {
273
+ background: rgba(0, 0, 0, 0.8);
274
+ backdrop-filter: blur(20px);
275
+ -webkit-backdrop-filter: blur(20px);
276
+ border: 1px solid rgba(255, 255, 255, 0.1);
277
+ }
278
+
279
+ .gradient-text {
280
+ background: linear-gradient(135deg, #06b6d4, #3b82f6);
281
+ -webkit-background-clip: text;
282
+ -webkit-text-fill-color: transparent;
283
+ background-clip: text;
284
+ }
285
+
286
+ .hover-lift {
287
+ transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
288
+ }
289
+
290
+ .hover-lift:hover {
291
+ transform: translateY(-5px);
292
+ box-shadow: 0 20px 40px rgba(6, 182, 212, 0.2);
293
+ }
294
+ </style>
295
+ </body>
296
+ </html>
templates/projetos.html ADDED
@@ -0,0 +1,516 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="pt-BR" class="scroll-smooth">
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
+ <title>Projetos - SoftEdge Corporation</title>
7
+
8
+ <!-- SEO & SOCIAL -->
9
+ <meta name="description" content="Conheça nossos projetos: AKIRA IA, ERP Gestão Total, E-commerce ShopFast e muito mais. Soluções inovadoras em desenvolvimento de software.">
10
+ <meta name="keywords" content="projetos, portfólio, AKIRA IA, ERP, e-commerce, desenvolvimento">
11
+
12
+ <!-- FAVICON -->
13
+ <link rel="icon" href="/assets/placeholder.svg" type="image/svg+xml">
14
+ <link rel="apple-touch-icon" href="/assets/placeholder.svg">
15
+ <meta property="og:image" content="/assets/placeholder.svg" />
16
+ <meta property="og:title" content="Projetos - SoftEdge Corporation" />
17
+ <meta property="og:description" content="Conheça nosso portfólio de projetos inovadores" />
18
+
19
+ <!-- FONTS -->
20
+ <link rel="preconnect" href="https://fonts.googleapis.com">
21
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
22
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
23
+
24
+ <!-- TAILWIND CSS -->
25
+ <script src="https://cdn.tailwindcss.com"></script>
26
+ <script>
27
+ tailwind.config = {
28
+ theme: {
29
+ extend: {
30
+ fontFamily: {
31
+ sans: ['Inter', 'system-ui', 'sans-serif'],
32
+ },
33
+ colors: {
34
+ primary: {
35
+ 50: '#ecfeff',
36
+ 100: '#cffafe',
37
+ 500: '#06b6d4',
38
+ 600: '#0891b2',
39
+ 700: '#0e7490',
40
+ 900: '#164e63',
41
+ }
42
+ }
43
+ }
44
+ }
45
+ }
46
+ </script>
47
+
48
+ <!-- LUCIDE ICONS -->
49
+ <script src="https://unpkg.com/lucide@latest"></script>
50
+
51
+ <!-- CUSTOM CSS -->
52
+ <link href="/assets/css/style.css" rel="stylesheet">
53
+ </head>
54
+
55
+ <body class="min-h-screen bg-linear-to-br from-slate-950 via-slate-900 to-slate-950 text-white antialiased font-sans">
56
+ <!-- HEADER -->
57
+ <header class="fixed top-0 left-0 right-0 z-50 glass">
58
+ <nav class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
59
+ <div class="flex items-center justify-between h-16">
60
+ <!-- Logo -->
61
+ <div class="flex items-center space-x-3">
62
+ <div class="w-10 h-10 rounded-xl overflow-hidden bg-linear-to-br from-cyan-500 to-blue-600 p-0.5">
63
+ <img src="/assets/logo.jpeg" alt="SoftEdge Logo" class="w-full h-full object-cover rounded-xl">
64
+ </div>
65
+ <span class="text-xl font-bold gradient-text">SoftEdge</span>
66
+ </div>
67
+
68
+ <!-- Desktop Navigation -->
69
+ <div class="hidden md:flex items-center space-x-8">
70
+ <a href="/" class="text-gray-300 hover:text-cyan-400 transition-colors">Início</a>
71
+ <a href="/sobre" class="text-gray-300 hover:text-cyan-400 transition-colors">Sobre</a>
72
+ <a href="/servicos" class="text-gray-300 hover:text-cyan-400 transition-colors">Serviços</a>
73
+ <a href="/projetos" class="text-white hover:text-cyan-400 transition-colors font-medium">Projetos</a>
74
+ <a href="/contato" class="text-gray-300 hover:text-cyan-400 transition-colors">Contato</a>
75
+ </div>
76
+
77
+ <!-- Mobile menu button -->
78
+ <button class="md:hidden text-white" id="mobile-menu-button">
79
+ <i data-lucide="menu" class="w-6 h-6"></i>
80
+ </button>
81
+ </div>
82
+
83
+ <!-- Mobile Navigation -->
84
+ <div class="md:hidden hidden" id="mobile-menu">
85
+ <div class="px-2 pt-2 pb-3 space-y-1 bg-slate-900/95 rounded-lg mt-2">
86
+ <a href="/" class="block px-3 py-2 text-gray-300 hover:text-cyan-400">Início</a>
87
+ <a href="/sobre" class="block px-3 py-2 text-gray-300 hover:text-cyan-400">Sobre</a>
88
+ <a href="/servicos" class="block px-3 py-2 text-gray-300 hover:text-cyan-400">Serviços</a>
89
+ <a href="/projetos" class="block px-3 py-2 text-white font-medium">Projetos</a>
90
+ <a href="/contato" class="block px-3 py-2 text-gray-300 hover:text-cyan-400">Contato</a>
91
+ </div>
92
+ </div>
93
+ </nav>
94
+ </header>
95
+
96
+ <!-- HERO SECTION -->
97
+ <section class="relative min-h-[60vh] flex items-center justify-center overflow-hidden pt-16">
98
+ <div class="absolute inset-0 -z-10">
99
+ <div class="absolute inset-0 bg-linear-to-br from-slate-950 via-slate-900 to-slate-950"></div>
100
+ <div class="absolute inset-0 opacity-20">
101
+ <div class="absolute top-20 left-20 w-96 h-96 bg-cyan-500/20 rounded-full blur-3xl"></div>
102
+ <div class="absolute bottom-20 right-20 w-96 h-96 bg-blue-500/20 rounded-full blur-3xl"></div>
103
+ </div>
104
+ </div>
105
+
106
+ <div class="relative max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
107
+ <div class="space-y-6">
108
+ <div class="inline-block px-4 py-2 bg-cyan-500/10 rounded-full border border-cyan-500/20">
109
+ <span class="text-cyan-400 text-sm font-semibold uppercase tracking-wider">Nosso Portfólio</span>
110
+ </div>
111
+
112
+ <h1 class="text-4xl sm:text-5xl md:text-6xl font-bold leading-tight">
113
+ Projetos que <span class="gradient-text">transformam</span> ideias<br>
114
+ em realidade
115
+ </h1>
116
+
117
+ <p class="text-lg sm:text-xl text-gray-400 max-w-2xl mx-auto">
118
+ Conheça nossas soluções inovadoras que já impactaram diversos setores e clientes.
119
+ </p>
120
+ </div>
121
+ </div>
122
+ </section>
123
+
124
+ <!-- PROJECTS GRID -->
125
+ <main class="relative py-20 lg:py-32">
126
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
127
+
128
+ <!-- FILTERS -->
129
+ <div class="flex flex-wrap justify-center gap-4 mb-16">
130
+ <button class="filter-btn active px-6 py-3 bg-cyan-500/20 text-cyan-400 rounded-full border border-cyan-500/30 hover:bg-cyan-500/30 transition-colors" data-filter="all">
131
+ Todos os Projetos
132
+ </button>
133
+ <button class="filter-btn px-6 py-3 bg-slate-700/50 text-gray-300 rounded-full border border-slate-600 hover:bg-slate-600/50 transition-colors" data-filter="ai">
134
+ Inteligência Artificial
135
+ </button>
136
+ <button class="filter-btn px-6 py-3 bg-slate-700/50 text-gray-300 rounded-full border border-slate-600 hover:bg-slate-600/50 transition-colors" data-filter="web">
137
+ Desenvolvimento Web
138
+ </button>
139
+ <button class="filter-btn px-6 py-3 bg-slate-700/50 text-gray-300 rounded-full border border-slate-600 hover:bg-slate-600/50 transition-colors" data-filter="mobile">
140
+ Aplicativos Mobile
141
+ </button>
142
+ <button class="filter-btn px-6 py-3 bg-slate-700/50 text-gray-300 rounded-full border border-slate-600 hover:bg-slate-600/50 transition-colors" data-filter="erp">
143
+ Sistemas ERP
144
+ </button>
145
+ </div>
146
+
147
+ <!-- PROJECTS -->
148
+ <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8" id="projects-grid">
149
+ {% for project in projects %}
150
+ <!-- Project Card -->
151
+ <div class="project-card glass rounded-2xl overflow-hidden hover-lift group" data-category="{{ 'ai' if 'TensorFlow' in project.technologies else 'web' if 'React' in project.technologies else 'erp' if 'Laravel' in project.technologies else 'mobile' }}">
152
+ <!-- Project Image -->
153
+ <div class="relative h-48 bg-gradient-to-br from-cyan-500/20 to-blue-500/20">
154
+ <img src="/assets/projeto.jpg" alt="{{ project.title }}" class="w-full h-full object-cover opacity-80 group-hover:opacity-100 transition-opacity">
155
+ <div class="absolute top-4 right-4">
156
+ <span class="px-3 py-1 bg-{{ 'green' if project.status == 'Concluído' else 'yellow' }}-500/20 text-{{ 'green' if project.status == 'Concluído' else 'yellow' }}-400 text-xs font-semibold rounded-full border border-{{ 'green' if project.status == 'Concluído' else 'yellow' }}-500/30">
157
+ {{ project.status }}
158
+ </span>
159
+ </div>
160
+ </div>
161
+
162
+ <!-- Project Content -->
163
+ <div class="p-6">
164
+ <h3 class="text-xl font-bold text-white mb-3 group-hover:text-cyan-400 transition-colors">
165
+ {{ project.title }}
166
+ </h3>
167
+ <p class="text-gray-400 text-sm leading-relaxed mb-4">
168
+ {{ project.description }}
169
+ </p>
170
+
171
+ <!-- Technologies -->
172
+ <div class="flex flex-wrap gap-2">
173
+ {% for tech in project.technologies.split(', ') %}
174
+ <span class="px-2 py-1 bg-slate-700/50 text-gray-300 text-xs rounded-md">
175
+ {{ tech.strip() }}
176
+ </span>
177
+ {% endfor %}
178
+ </div>
179
+ </div>
180
+ </div>
181
+ {% endfor %}
182
+
183
+ <!-- AKIRA IA -->
184
+ <div class="project-card glass rounded-2xl overflow-hidden hover-lift group" data-category="ai">
185
+ <div class="relative h-48 bg-gradient-to-br from-purple-500/20 to-pink-500/20">
186
+ <img src="/assets/akira.jpg" alt="AKIRA IA" class="w-full h-full object-cover opacity-80 group-hover:opacity-100 transition-opacity">
187
+ <div class="absolute top-4 right-4">
188
+ <span class="px-3 py-1 bg-green-500/20 text-green-400 text-xs font-semibold rounded-full border border-green-500/30">
189
+ Concluído
190
+ </span>
191
+ </div>
192
+ </div>
193
+ <div class="p-6">
194
+ <h3 class="text-xl font-bold text-white mb-3 group-hover:text-cyan-400 transition-colors">
195
+ AKIRA IA
196
+ </h3>
197
+ <p class="text-gray-400 text-sm leading-relaxed mb-4">
198
+ Assistente virtual angolano com processamento de linguagem natural avançado.
199
+ </p>
200
+ <div class="flex flex-wrap gap-2">
201
+ <span class="px-2 py-1 bg-slate-700/50 text-gray-300 text-xs rounded-md">Python</span>
202
+ <span class="px-2 py-1 bg-slate-700/50 text-gray-300 text-xs rounded-md">TensorFlow</span>
203
+ <span class="px-2 py-1 bg-slate-700/50 text-gray-300 text-xs rounded-md">FastAPI</span>
204
+ </div>
205
+ </div>
206
+ </div>
207
+
208
+ <!-- ERP Gestão Total -->
209
+ <div class="project-card glass rounded-2xl overflow-hidden hover-lift group" data-category="erp">
210
+ <div class="relative h-48 bg-gradient-to-br from-blue-500/20 to-cyan-500/20">
211
+ <img src="/assets/projeto.jpg" alt="ERP Gestão Total" class="w-full h-full object-cover opacity-80 group-hover:opacity-100 transition-opacity">
212
+ <div class="absolute top-4 right-4">
213
+ <span class="px-3 py-1 bg-green-500/20 text-green-400 text-xs font-semibold rounded-full border border-green-500/30">
214
+ Concluído
215
+ </span>
216
+ </div>
217
+ </div>
218
+ <div class="p-6">
219
+ <h3 class="text-xl font-bold text-white mb-3 group-hover:text-cyan-400 transition-colors">
220
+ ERP Gestão Total
221
+ </h3>
222
+ <p class="text-gray-400 text-sm leading-relaxed mb-4">
223
+ Sistema completo de gestão empresarial com módulos integrados.
224
+ </p>
225
+ <div class="flex flex-wrap gap-2">
226
+ <span class="px-2 py-1 bg-slate-700/50 text-gray-300 text-xs rounded-md">Laravel</span>
227
+ <span class="px-2 py-1 bg-slate-700/50 text-gray-300 text-xs rounded-md">Vue.js</span>
228
+ <span class="px-2 py-1 bg-slate-700/50 text-gray-300 text-xs rounded-md">MySQL</span>
229
+ </div>
230
+ </div>
231
+ </div>
232
+
233
+ <!-- E-commerce ShopFast -->
234
+ <div class="project-card glass rounded-2xl overflow-hidden hover-lift group" data-category="web">
235
+ <div class="relative h-48 bg-gradient-to-br from-green-500/20 to-blue-500/20">
236
+ <img src="/assets/projeto.jpg" alt="E-commerce ShopFast" class="w-full h-full object-cover opacity-80 group-hover:opacity-100 transition-opacity">
237
+ <div class="absolute top-4 right-4">
238
+ <span class="px-3 py-1 bg-green-500/20 text-green-400 text-xs font-semibold rounded-full border border-green-500/30">
239
+ Concluído
240
+ </span>
241
+ </div>
242
+ </div>
243
+ <div class="p-6">
244
+ <h3 class="text-xl font-bold text-white mb-3 group-hover:text-cyan-400 transition-colors">
245
+ E-commerce ShopFast
246
+ </h3>
247
+ <p class="text-gray-400 text-sm leading-relaxed mb-4">
248
+ Plataforma de vendas online de alta performance com integração de pagamentos.
249
+ </p>
250
+ <div class="flex flex-wrap gap-2">
251
+ <span class="px-2 py-1 bg-slate-700/50 text-gray-300 text-xs rounded-md">Next.js</span>
252
+ <span class="px-2 py-1 bg-slate-700/50 text-gray-300 text-xs rounded-md">Stripe</span>
253
+ <span class="px-2 py-1 bg-slate-700/50 text-gray-300 text-xs rounded-md">Prisma</span>
254
+ </div>
255
+ </div>
256
+ </div>
257
+
258
+ <!-- Sistema de Gestão Escolar -->
259
+ <div class="project-card glass rounded-2xl overflow-hidden hover-lift group" data-category="web">
260
+ <div class="relative h-48 bg-gradient-to-br from-orange-500/20 to-red-500/20">
261
+ <img src="/assets/projeto.jpg" alt="Sistema de Gestão Escolar" class="w-full h-full object-cover opacity-80 group-hover:opacity-100 transition-opacity">
262
+ <div class="absolute top-4 right-4">
263
+ <span class="px-3 py-1 bg-yellow-500/20 text-yellow-400 text-xs font-semibold rounded-full border border-yellow-500/30">
264
+ Em desenvolvimento
265
+ </span>
266
+ </div>
267
+ </div>
268
+ <div class="p-6">
269
+ <h3 class="text-xl font-bold text-white mb-3 group-hover:text-cyan-400 transition-colors">
270
+ Sistema de Gestão Escolar
271
+ </h3>
272
+ <p class="text-gray-400 text-sm leading-relaxed mb-4">
273
+ Plataforma completa para gestão educacional com acompanhamento de alunos.
274
+ </p>
275
+ <div class="flex flex-wrap gap-2">
276
+ <span class="px-2 py-1 bg-slate-700/50 text-gray-300 text-xs rounded-md">React</span>
277
+ <span class="px-2 py-1 bg-slate-700/50 text-gray-300 text-xs rounded-md">Node.js</span>
278
+ <span class="px-2 py-1 bg-slate-700/50 text-gray-300 text-xs rounded-md">PostgreSQL</span>
279
+ </div>
280
+ </div>
281
+ </div>
282
+
283
+ <!-- App Mobile Delivery -->
284
+ <div class="project-card glass rounded-2xl overflow-hidden hover-lift group" data-category="mobile">
285
+ <div class="relative h-48 bg-gradient-to-br from-pink-500/20 to-purple-500/20">
286
+ <img src="/assets/projeto.jpg" alt="App Mobile Delivery" class="w-full h-full object-cover opacity-80 group-hover:opacity-100 transition-opacity">
287
+ <div class="absolute top-4 right-4">
288
+ <span class="px-3 py-1 bg-yellow-500/20 text-yellow-400 text-xs font-semibold rounded-full border border-yellow-500/30">
289
+ Em desenvolvimento
290
+ </span>
291
+ </div>
292
+ </div>
293
+ <div class="p-6">
294
+ <h3 class="text-xl font-bold text-white mb-3 group-hover:text-cyan-400 transition-colors">
295
+ App Mobile Delivery
296
+ </h3>
297
+ <p class="text-gray-400 text-sm leading-relaxed mb-4">
298
+ Aplicativo de delivery com geolocalização e rastreamento em tempo real.
299
+ </p>
300
+ <div class="flex flex-wrap gap-2">
301
+ <span class="px-2 py-1 bg-slate-700/50 text-gray-300 text-xs rounded-md">Flutter</span>
302
+ <span class="px-2 py-1 bg-slate-700/50 text-gray-300 text-xs rounded-md">Firebase</span>
303
+ <span class="px-2 py-1 bg-slate-700/50 text-gray-300 text-xs rounded-md">Google Maps</span>
304
+ </div>
305
+ </div>
306
+ </div>
307
+ </div>
308
+
309
+ <!-- CTA SECTION -->
310
+ <div class="text-center mt-20">
311
+ <div class="glass rounded-3xl p-12 lg:p-16 max-w-4xl mx-auto">
312
+ <h2 class="text-3xl sm:text-4xl md:text-5xl font-bold text-white mb-6">
313
+ Tem um projeto em <span class="gradient-text">mente</span>?
314
+ </h2>
315
+ <p class="text-gray-400 text-lg mb-8 max-w-2xl mx-auto">
316
+ Vamos transformar sua ideia em uma solução tecnológica inovadora. Nossa equipe está pronta para o desafio.
317
+ </p>
318
+ <div class="flex flex-col sm:flex-row gap-4 justify-center">
319
+ <a href="/contato" class="bg-linear-to-r from-cyan-500 to-blue-600 hover:from-cyan-600 hover:to-blue-700 text-white font-bold py-4 px-8 rounded-xl transition-all duration-300 hover-lift">
320
+ Iniciar Projeto
321
+ <i data-lucide="rocket" class="inline w-5 h-5 ml-2"></i>
322
+ </a>
323
+ <a href="/servicos" class="border border-cyan-500/30 text-cyan-400 hover:bg-cyan-500/10 font-semibold py-4 px-8 rounded-xl transition-all duration-300">
324
+ Nossos Serviços
325
+ </a>
326
+ </div>
327
+ </div>
328
+ </div>
329
+ </div>
330
+ </main>
331
+
332
+ <!-- FOOTER -->
333
+ <footer class="relative bg-slate-950/95 backdrop-blur-xl border-t border-white/5 mt-20 overflow-hidden">
334
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
335
+ <div class="grid md:grid-cols-4 gap-8">
336
+ <!-- Company Info -->
337
+ <div>
338
+ <div class="flex items-center space-x-3 mb-6">
339
+ <div class="w-12 h-12 rounded-xl overflow-hidden bg-linear-to-br from-cyan-500 to-blue-600 p-0.5">
340
+ <img src="/assets/logo.jpeg" alt="SoftEdge Logo" class="w-full h-full object-cover rounded-xl">
341
+ </div>
342
+ <span class="text-2xl font-bold gradient-text">SoftEdge</span>
343
+ </div>
344
+ <p class="text-gray-400 text-sm leading-relaxed">
345
+ Começamos com um sonho. Hoje desenvolvemos realidades lógicas e softwares mais amáveis.
346
+ </p>
347
+ </div>
348
+
349
+ <!-- Quick Links -->
350
+ <div>
351
+ <h3 class="text-white font-semibold mb-4">Navegação</h3>
352
+ <div class="space-y-2">
353
+ <a href="/" class="block text-gray-400 hover:text-cyan-400 transition-colors text-sm">Início</a>
354
+ <a href="/sobre" class="block text-gray-400 hover:text-cyan-400 transition-colors text-sm">Sobre</a>
355
+ <a href="/servicos" class="block text-gray-400 hover:text-cyan-400 transition-colors text-sm">Serviços</a>
356
+ <a href="/projetos" class="block text-gray-400 hover:text-cyan-400 transition-colors text-sm">Projetos</a>
357
+ <a href="/contato" class="block text-gray-400 hover:text-cyan-400 transition-colors text-sm">Contato</a>
358
+ </div>
359
+ </div>
360
+
361
+ <!-- Services -->
362
+ <div>
363
+ <h3 class="text-white font-semibold mb-4">Serviços</h3>
364
+ <div class="space-y-2">
365
+ <a href="/servicos" class="block text-gray-400 hover:text-cyan-400 transition-colors text-sm">Desenvolvimento Web</a>
366
+ <a href="/servicos" class="block text-gray-400 hover:text-cyan-400 transition-colors text-sm">Apps Mobile</a>
367
+ <a href="/servicos" class="block text-gray-400 hover:text-cyan-400 transition-colors text-sm">Inteligência Artificial</a>
368
+ <a href="/servicos" class="block text-gray-400 hover:text-cyan-400 transition-colors text-sm">Cloud & DevOps</a>
369
+ </div>
370
+ </div>
371
+
372
+ <!-- Contact -->
373
+ <div>
374
+ <h3 class="text-white font-semibold mb-4">Contato</h3>
375
+ <div class="space-y-3">
376
+ <a href="mailto:softedgecorporation@gmail.com" class="flex items-center text-gray-400 hover:text-cyan-400 transition-colors text-sm">
377
+ <i data-lucide="mail" class="w-4 h-4 mr-2"></i>
378
+ Email
379
+ </a>
380
+ <a href="https://wa.me/244900000000" target="_blank" class="flex items-center text-gray-400 hover:text-cyan-400 transition-colors text-sm">
381
+ <i data-lucide="message-circle" class="w-4 h-4 mr-2"></i>
382
+ WhatsApp
383
+ </a>
384
+ <div class="flex items-center text-gray-400 text-sm">
385
+ <i data="lucide" class="w-4 h-4 mr-2"></i>
386
+ Luanda, Angola
387
+ </div>
388
+ </div>
389
+ </div>
390
+ </div>
391
+
392
+ <div class="border-t border-white/5 mt-12 pt-8 text-center">
393
+ <p class="text-gray-400 text-sm">
394
+ © 2025 <span class="text-white font-semibold">SoftEdge Corporation</span>. Todos os direitos reservados.
395
+ </p>
396
+ </div>
397
+ </div>
398
+ </footer>
399
+
400
+ <!-- SCRIPTS -->
401
+ <script src="https://unpkg.com/lucide@latest"></script>
402
+ <script>
403
+ document.addEventListener('DOMContentLoaded', function() {
404
+ // Initialize Lucide icons
405
+ lucide.createIcons();
406
+
407
+ // Mobile menu toggle
408
+ const mobileMenuButton = document.getElementById('mobile-menu-button');
409
+ const mobileMenu = document.getElementById('mobile-menu');
410
+
411
+ mobileMenuButton.addEventListener('click', function() {
412
+ mobileMenu.classList.toggle('hidden');
413
+ });
414
+
415
+ // Project filtering
416
+ const filterButtons = document.querySelectorAll('.filter-btn');
417
+ const projectCards = document.querySelectorAll('.project-card');
418
+
419
+ filterButtons.forEach(button => {
420
+ button.addEventListener('click', function() {
421
+ const filter = this.getAttribute('data-filter');
422
+
423
+ // Update active button
424
+ filterButtons.forEach(btn => btn.classList.remove('active', 'bg-cyan-500/20', 'text-cyan-400', 'border-cyan-500/30'));
425
+ filterButtons.forEach(btn => btn.classList.add('bg-slate-700/50', 'text-gray-300', 'border-slate-600'));
426
+ this.classList.add('active', 'bg-cyan-500/20', 'text-cyan-400', 'border-cyan-500/30');
427
+ this.classList.remove('bg-slate-700/50', 'text-gray-300', 'border-slate-600');
428
+
429
+ // Filter projects
430
+ projectCards.forEach(card => {
431
+ if (filter === 'all' || card.getAttribute('data-category') === filter) {
432
+ card.style.display = 'block';
433
+ card.style.opacity = '0';
434
+ card.style.transform = 'scale(0.9)';
435
+ setTimeout(() => {
436
+ card.style.opacity = '1';
437
+ card.style.transform = 'scale(1)';
438
+ }, 100);
439
+ } else {
440
+ card.style.display = 'none';
441
+ }
442
+ });
443
+ });
444
+ });
445
+
446
+ // Smooth scrolling
447
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
448
+ anchor.addEventListener('click', function (e) {
449
+ e.preventDefault();
450
+ const target = document.querySelector(this.getAttribute('href'));
451
+ if (target) {
452
+ target.scrollIntoView({
453
+ behavior: 'smooth',
454
+ block: 'start'
455
+ });
456
+ }
457
+ });
458
+ });
459
+
460
+ // Intersection Observer for animations
461
+ const observerOptions = {
462
+ threshold: 0.1,
463
+ rootMargin: '0px 0px -100px 0px'
464
+ };
465
+
466
+ const observer = new IntersectionObserver((entries) => {
467
+ entries.forEach(entry => {
468
+ if (entry.isIntersecting) {
469
+ entry.target.style.opacity = '1';
470
+ entry.target.style.transform = 'translateY(0)';
471
+ }
472
+ });
473
+ }, observerOptions);
474
+
475
+ // Observe project cards
476
+ document.querySelectorAll('.project-card').forEach(card => {
477
+ card.style.opacity = '0';
478
+ card.style.transform = 'translateY(30px)';
479
+ card.style.transition = 'opacity 0.8s ease, transform 0.8s ease';
480
+ observer.observe(card);
481
+ });
482
+ });
483
+ </script>
484
+
485
+ <style>
486
+ .glass {
487
+ background: rgba(0, 0, 0, 0.8);
488
+ backdrop-filter: blur(20px);
489
+ -webkit-backdrop-filter: blur(20px);
490
+ border: 1px solid rgba(255, 255, 255, 0.1);
491
+ }
492
+
493
+ .gradient-text {
494
+ background: linear-gradient(135deg, #06b6d4, #3b82f6);
495
+ -webkit-background-clip: text;
496
+ -webkit-text-fill-color: transparent;
497
+ background-clip: text;
498
+ }
499
+
500
+ .hover-lift {
501
+ transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
502
+ }
503
+
504
+ .hover-lift:hover {
505
+ transform: translateY(-5px);
506
+ box-shadow: 0 20px 40px rgba(6, 182, 212, 0.2);
507
+ }
508
+
509
+ .filter-btn.active {
510
+ background: rgba(6, 182, 212, 0.2) !important;
511
+ color: #06b6d4 !important;
512
+ border-color: rgba(6, 182, 212, 0.3) !important;
513
+ }
514
+ </style>
515
+ </body>
516
+ </html>
templates/register.html ADDED
@@ -0,0 +1,367 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="pt-BR" class="scroll-smooth">
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
+ <title>Criar Conta - SoftEdge Corporation</title>
7
+
8
+ <!-- SEO & SOCIAL -->
9
+ <meta name="description" content="Crie sua conta na SoftEdge Corporation. Acesse recursos exclusivos, acompanhe seus projetos e muito mais.">
10
+ <meta name="keywords" content="registrar, conta, softedge, cadastro">
11
+
12
+ <!-- FAVICON -->
13
+ <link rel="icon" href="/assets/placeholder.svg" type="image/svg+xml">
14
+ <link rel="apple-touch-icon" href="/assets/placeholder.svg">
15
+ <meta property="og:image" content="/assets/placeholder.svg" />
16
+ <meta property="og:title" content="Criar Conta - SoftEdge Corporation" />
17
+ <meta property="og:description" content="Junte-se à nossa comunidade" />
18
+
19
+ <!-- FONTS -->
20
+ <link rel="preconnect" href="https://fonts.googleapis.com">
21
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
22
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
23
+
24
+ <!-- TAILWIND CSS -->
25
+ <script src="https://cdn.tailwindcss.com"></script>
26
+ <script>
27
+ tailwind.config = {
28
+ theme: {
29
+ extend: {
30
+ fontFamily: {
31
+ sans: ['Inter', 'system-ui', 'sans-serif'],
32
+ },
33
+ colors: {
34
+ primary: {
35
+ 50: '#ecfeff',
36
+ 100: '#cffafe',
37
+ 500: '#06b6d4',
38
+ 600: '#0891b2',
39
+ 700: '#0e7490',
40
+ 900: '#164e63',
41
+ }
42
+ }
43
+ }
44
+ }
45
+ }
46
+ </script>
47
+
48
+ <!-- LUCIDE ICONS -->
49
+ <script src="https://unpkg.com/lucide@latest"></script>
50
+
51
+ <!-- CUSTOM CSS -->
52
+ <link href="/assets/css/style.css" rel="stylesheet">
53
+ </head>
54
+
55
+ <body class="min-h-screen bg-linear-to-br from-slate-950 via-slate-900 to-slate-950 text-white antialiased font-sans flex items-center justify-center p-4">
56
+ <!-- BACKGROUND -->
57
+ <div class="absolute inset-0 -z-10">
58
+ <div class="absolute inset-0 bg-linear-to-br from-slate-950 via-slate-900 to-slate-950"></div>
59
+ <div class="absolute inset-0 opacity-20">
60
+ <div class="absolute top-20 left-20 w-96 h-96 bg-cyan-500/20 rounded-full blur-3xl"></div>
61
+ <div class="absolute bottom-20 right-20 w-96 h-96 bg-blue-500/20 rounded-full blur-3xl"></div>
62
+ </div>
63
+ </div>
64
+
65
+ <!-- REGISTER FORM -->
66
+ <div class="w-full max-w-md">
67
+ <!-- HEADER -->
68
+ <div class="text-center mb-8">
69
+ <div class="flex items-center justify-center space-x-3 mb-6">
70
+ <div class="w-12 h-12 rounded-xl overflow-hidden bg-linear-to-br from-cyan-500 to-blue-600 p-0.5">
71
+ <img src="/assets/logo.jpeg" alt="SoftEdge Logo" class="w-full h-full object-cover rounded-xl">
72
+ </div>
73
+ <span class="text-2xl font-bold gradient-text">SoftEdge</span>
74
+ </div>
75
+ <h1 class="text-2xl font-bold text-white mb-2">Criar conta</h1>
76
+ <p class="text-gray-400">Junte-se à nossa comunidade tecnológica</p>
77
+ </div>
78
+
79
+ <!-- FORM -->
80
+ <div class="glass rounded-2xl p-8">
81
+ <form id="register-form" class="space-y-6">
82
+ <div>
83
+ <label for="name" class="block text-sm font-medium text-gray-300 mb-2">
84
+ Nome completo *
85
+ </label>
86
+ <div class="relative">
87
+ <input
88
+ type="text"
89
+ id="name"
90
+ name="name"
91
+ required
92
+ class="w-full pl-12 pr-4 py-3 bg-slate-800/50 border border-slate-600 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:border-transparent transition-colors"
93
+ placeholder="Seu nome completo"
94
+ >
95
+ <div class="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400">
96
+ <i data-lucide="user" class="w-5 h-5"></i>
97
+ </div>
98
+ </div>
99
+ </div>
100
+
101
+ <div>
102
+ <label for="email" class="block text-sm font-medium text-gray-300 mb-2">
103
+ Email *
104
+ </label>
105
+ <div class="relative">
106
+ <input
107
+ type="email"
108
+ id="email"
109
+ name="email"
110
+ required
111
+ class="w-full pl-12 pr-4 py-3 bg-slate-800/50 border border-slate-600 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:border-transparent transition-colors"
112
+ placeholder="seu@email.com"
113
+ >
114
+ <div class="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400">
115
+ <i data-lucide="mail" class="w-5 h-5"></i>
116
+ </div>
117
+ </div>
118
+ </div>
119
+
120
+ <div>
121
+ <label for="password" class="block text-sm font-medium text-gray-300 mb-2">
122
+ Senha *
123
+ </label>
124
+ <div class="relative">
125
+ <input
126
+ type="password"
127
+ id="password"
128
+ name="password"
129
+ required
130
+ minlength="8"
131
+ class="w-full pl-12 pr-12 py-3 bg-slate-800/50 border border-slate-600 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:border-transparent transition-colors"
132
+ placeholder="••••••••"
133
+ >
134
+ <div class="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400">
135
+ <i data-lucide="lock" class="w-5 h-5"></i>
136
+ </div>
137
+ <button type="button" class="absolute right-4 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-300" id="toggle-password">
138
+ <i data-lucide="eye" class="w-5 h-5"></i>
139
+ </button>
140
+ </div>
141
+ <p class="text-xs text-gray-500 mt-1">Mínimo 8 caracteres</p>
142
+ </div>
143
+
144
+ <div>
145
+ <label for="confirm-password" class="block text-sm font-medium text-gray-300 mb-2">
146
+ Confirmar senha *
147
+ </label>
148
+ <div class="relative">
149
+ <input
150
+ type="password"
151
+ id="confirm-password"
152
+ name="confirm_password"
153
+ required
154
+ minlength="8"
155
+ class="w-full pl-12 pr-12 py-3 bg-slate-800/50 border border-slate-600 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:border-transparent transition-colors"
156
+ placeholder="••••••••"
157
+ >
158
+ <div class="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400">
159
+ <i data-lucide="lock" class="w-5 h-5"></i>
160
+ </div>
161
+ <button type="button" class="absolute right-4 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-300" id="toggle-confirm-password">
162
+ <i data-lucide="eye" class="w-5 h-5"></i>
163
+ </button>
164
+ </div>
165
+ </div>
166
+
167
+ <div class="flex items-center">
168
+ <input
169
+ type="checkbox"
170
+ id="terms"
171
+ name="terms"
172
+ required
173
+ class="w-4 h-4 bg-slate-800 border-slate-600 rounded focus:ring-cyan-500 focus:ring-2"
174
+ >
175
+ <label for="terms" class="ml-2 text-sm text-gray-400">
176
+ Concordo com os
177
+ <a href="#" class="text-cyan-400 hover:text-cyan-300">Termos de Uso</a> e
178
+ <a href="#" class="text-cyan-400 hover:text-cyan-300">Política de Privacidade</a>
179
+ </label>
180
+ </div>
181
+
182
+ <button
183
+ type="submit"
184
+ id="register-btn"
185
+ class="w-full bg-linear-to-r from-cyan-500 to-blue-600 hover:from-cyan-600 hover:to-blue-700 text-white font-bold py-3 px-4 rounded-lg transition-all duration-300 hover-lift disabled:opacity-50 disabled:cursor-not-allowed"
186
+ >
187
+ <span id="btn-text">Criar Conta</span>
188
+ <i data-lucide="user-plus" class="inline w-5 h-5 ml-2"></i>
189
+ </button>
190
+ </form>
191
+
192
+ <!-- SUCCESS MESSAGE -->
193
+ <div id="success-message" class="hidden mt-6 p-4 bg-green-500/10 border border-green-500/20 rounded-lg">
194
+ <div class="flex items-center">
195
+ <i data-lucide="check-circle" class="w-5 h-5 text-green-400 mr-3"></i>
196
+ <div>
197
+ <h3 class="text-green-400 font-semibold">Conta criada!</h3>
198
+ <p class="text-green-300 text-sm">Redirecionando para o login...</p>
199
+ </div>
200
+ </div>
201
+ </div>
202
+
203
+ <!-- ERROR MESSAGE -->
204
+ <div id="error-message" class="hidden mt-6 p-4 bg-red-500/10 border border-red-500/20 rounded-lg">
205
+ <div class="flex items-center">
206
+ <i data-lucide="alert-circle" class="w-5 h-5 text-red-400 mr-3"></i>
207
+ <div>
208
+ <h3 class="text-red-400 font-semibold">Erro no cadastro</h3>
209
+ <p id="error-text" class="text-red-300 text-sm">Verifique os dados e tente novamente.</p>
210
+ </div>
211
+ </div>
212
+ </div>
213
+ </div>
214
+
215
+ <!-- FOOTER -->
216
+ <div class="text-center mt-8">
217
+ <p class="text-gray-400 text-sm">
218
+ Já tem uma conta?
219
+ <a href="/login" class="text-cyan-400 hover:text-cyan-300 transition-colors font-medium">
220
+ Fazer login
221
+ </a>
222
+ </p>
223
+ <div class="mt-6 pt-6 border-t border-slate-700">
224
+ <a href="/" class="text-gray-400 hover:text-cyan-400 transition-colors text-sm">
225
+ ← Voltar ao site
226
+ </a>
227
+ </div>
228
+ </div>
229
+ </div>
230
+
231
+ <!-- SCRIPTS -->
232
+ <script src="https://unpkg.com/lucide@latest"></script>
233
+ <script>
234
+ document.addEventListener('DOMContentLoaded', function() {
235
+ // Initialize Lucide icons
236
+ lucide.createIcons();
237
+
238
+ // Password toggle functions
239
+ function setupPasswordToggle(buttonId, inputId) {
240
+ const toggleBtn = document.getElementById(buttonId);
241
+ const input = document.getElementById(inputId);
242
+
243
+ toggleBtn.addEventListener('click', function() {
244
+ const type = input.getAttribute('type') === 'password' ? 'text' : 'password';
245
+ input.setAttribute('type', type);
246
+
247
+ const icon = this.querySelector('i');
248
+ icon.setAttribute('data-lucide', type === 'password' ? 'eye' : 'eye-off');
249
+ lucide.createIcons();
250
+ });
251
+ }
252
+
253
+ setupPasswordToggle('toggle-password', 'password');
254
+ setupPasswordToggle('toggle-confirm-password', 'confirm-password');
255
+
256
+ // Password confirmation validation
257
+ const password = document.getElementById('password');
258
+ const confirmPassword = document.getElementById('confirm-password');
259
+ const registerBtn = document.getElementById('register-btn');
260
+
261
+ function validatePasswords() {
262
+ if (confirmPassword.value && password.value !== confirmPassword.value) {
263
+ confirmPassword.setCustomValidity('As senhas não coincidem');
264
+ } else {
265
+ confirmPassword.setCustomValidity('');
266
+ }
267
+ }
268
+
269
+ password.addEventListener('input', validatePasswords);
270
+ confirmPassword.addEventListener('input', validatePasswords);
271
+
272
+ // Register form handling
273
+ const registerForm = document.getElementById('register-form');
274
+ const btnText = document.getElementById('btn-text');
275
+ const successMessage = document.getElementById('success-message');
276
+ const errorMessage = document.getElementById('error-message');
277
+ const errorText = document.getElementById('error-text');
278
+
279
+ registerForm.addEventListener('submit', async function(e) {
280
+ e.preventDefault();
281
+
282
+ // Validate passwords match
283
+ if (password.value !== confirmPassword.value) {
284
+ errorText.textContent = 'As senhas não coincidem';
285
+ errorMessage.classList.remove('hidden');
286
+ return;
287
+ }
288
+
289
+ // Show loading state
290
+ registerBtn.disabled = true;
291
+ btnText.textContent = 'Criando conta...';
292
+
293
+ // Hide previous messages
294
+ successMessage.classList.add('hidden');
295
+ errorMessage.classList.add('hidden');
296
+
297
+ // Get form data
298
+ const formData = new FormData(registerForm);
299
+ const data = Object.fromEntries(formData.entries());
300
+
301
+ // Remove confirm_password from data
302
+ delete data.confirm_password;
303
+ delete data.terms;
304
+
305
+ try {
306
+ const response = await fetch('/api/auth/register', {
307
+ method: 'POST',
308
+ headers: {
309
+ 'Content-Type': 'application/json',
310
+ },
311
+ body: JSON.stringify(data)
312
+ });
313
+
314
+ const result = await response.json();
315
+
316
+ if (response.ok) {
317
+ // Show success message
318
+ successMessage.classList.remove('hidden');
319
+
320
+ // Redirect after delay
321
+ setTimeout(() => {
322
+ window.location.href = '/login';
323
+ }, 2000);
324
+ } else {
325
+ // Show error message
326
+ errorText.textContent = result.error || 'Erro ao criar conta';
327
+ errorMessage.classList.remove('hidden');
328
+ }
329
+ } catch (error) {
330
+ console.error('Error:', error);
331
+ errorText.textContent = 'Erro de conexão. Tente novamente.';
332
+ errorMessage.classList.remove('hidden');
333
+ } finally {
334
+ // Reset button state
335
+ registerBtn.disabled = false;
336
+ btnText.textContent = 'Criar Conta';
337
+ }
338
+ });
339
+ });
340
+ </script>
341
+
342
+ <style>
343
+ .glass {
344
+ background: rgba(0, 0, 0, 0.8);
345
+ backdrop-filter: blur(20px);
346
+ -webkit-backdrop-filter: blur(20px);
347
+ border: 1px solid rgba(255, 255, 255, 0.1);
348
+ }
349
+
350
+ .gradient-text {
351
+ background: linear-gradient(135deg, #06b6d4, #3b82f6);
352
+ -webkit-background-clip: text;
353
+ -webkit-text-fill-color: transparent;
354
+ background-clip: text;
355
+ }
356
+
357
+ .hover-lift {
358
+ transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
359
+ }
360
+
361
+ .hover-lift:hover {
362
+ transform: translateY(-5px);
363
+ box-shadow: 0 20px 40px rgba(6, 182, 212, 0.2);
364
+ }
365
+ </style>
366
+ </body>
367
+ </html>
templates/servicos.html ADDED
@@ -0,0 +1,539 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="pt-BR" class="scroll-smooth">
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
+ <title>Serviços - SoftEdge Corporation</title>
7
+
8
+ <!-- SEO & SOCIAL -->
9
+ <meta name="description" content="Conheça nossos serviços especializados: Desenvolvimento Web, Mobile, IA, Cloud & DevOps. Soluções tecnológicas completas para seu negócio.">
10
+ <meta name="keywords" content="serviços, desenvolvimento web, mobile, IA, cloud, devops, tecnologia">
11
+
12
+ <!-- FAVICON -->
13
+ <link rel="icon" href="/assets/placeholder.svg" type="image/svg+xml">
14
+ <link rel="apple-touch-icon" href="/assets/placeholder.svg">
15
+ <meta property="og:image" content="/assets/placeholder.svg" />
16
+ <meta property="og:title" content="Serviços - SoftEdge Corporation" />
17
+ <meta property="og:description" content="Soluções tecnológicas completas para seu negócio" />
18
+
19
+ <!-- FONTS -->
20
+ <link rel="preconnect" href="https://fonts.googleapis.com">
21
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
22
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
23
+
24
+ <!-- TAILWIND CSS -->
25
+ <script src="https://cdn.tailwindcss.com"></script>
26
+ <script>
27
+ tailwind.config = {
28
+ theme: {
29
+ extend: {
30
+ fontFamily: {
31
+ sans: ['Inter', 'system-ui', 'sans-serif'],
32
+ },
33
+ colors: {
34
+ primary: {
35
+ 50: '#ecfeff',
36
+ 100: '#cffafe',
37
+ 500: '#06b6d4',
38
+ 600: '#0891b2',
39
+ 700: '#0e7490',
40
+ 900: '#164e63',
41
+ }
42
+ }
43
+ }
44
+ }
45
+ }
46
+ </script>
47
+
48
+ <!-- LUCIDE ICONS -->
49
+ <script src="https://unpkg.com/lucide@latest"></script>
50
+
51
+ <!-- CUSTOM CSS -->
52
+ <link href="/assets/css/style.css" rel="stylesheet">
53
+ </head>
54
+
55
+ <body class="min-h-screen bg-linear-to-br from-slate-950 via-slate-900 to-slate-950 text-white antialiased font-sans">
56
+ <!-- HEADER -->
57
+ <header class="fixed top-0 left-0 right-0 z-50 glass">
58
+ <nav class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
59
+ <div class="flex items-center justify-between h-16">
60
+ <!-- Logo -->
61
+ <div class="flex items-center space-x-3">
62
+ <div class="w-10 h-10 rounded-xl overflow-hidden bg-linear-to-br from-cyan-500 to-blue-600 p-0.5">
63
+ <img src="/assets/logo.jpeg" alt="SoftEdge Logo" class="w-full h-full object-cover rounded-xl">
64
+ </div>
65
+ <span class="text-xl font-bold gradient-text">SoftEdge</span>
66
+ </div>
67
+
68
+ <!-- Desktop Navigation -->
69
+ <div class="hidden md:flex items-center space-x-8">
70
+ <a href="/" class="text-gray-300 hover:text-cyan-400 transition-colors">Início</a>
71
+ <a href="/sobre" class="text-gray-300 hover:text-cyan-400 transition-colors">Sobre</a>
72
+ <a href="/servicos" class="text-white hover:text-cyan-400 transition-colors font-medium">Serviços</a>
73
+ <a href="/projetos" class="text-gray-300 hover:text-cyan-400 transition-colors">Projetos</a>
74
+ <a href="/contato" class="text-gray-300 hover:text-cyan-400 transition-colors">Contato</a>
75
+ </div>
76
+
77
+ <!-- Mobile menu button -->
78
+ <button class="md:hidden text-white" id="mobile-menu-button">
79
+ <i data-lucide="menu" class="w-6 h-6"></i>
80
+ </button>
81
+ </div>
82
+
83
+ <!-- Mobile Navigation -->
84
+ <div class="md:hidden hidden" id="mobile-menu">
85
+ <div class="px-2 pt-2 pb-3 space-y-1 bg-slate-900/95 rounded-lg mt-2">
86
+ <a href="/" class="block px-3 py-2 text-gray-300 hover:text-cyan-400">Início</a>
87
+ <a href="/sobre" class="block px-3 py-2 text-gray-300 hover:text-cyan-400">Sobre</a>
88
+ <a href="/servicos" class="block px-3 py-2 text-white font-medium">Serviços</a>
89
+ <a href="/projetos" class="block px-3 py-2 text-gray-300 hover:text-cyan-400">Projetos</a>
90
+ <a href="/contato" class="block px-3 py-2 text-gray-300 hover:text-cyan-400">Contato</a>
91
+ </div>
92
+ </div>
93
+ </nav>
94
+ </header>
95
+
96
+ <!-- HERO SECTION -->
97
+ <section class="relative min-h-[60vh] flex items-center justify-center overflow-hidden pt-16">
98
+ <div class="absolute inset-0 -z-10">
99
+ <div class="absolute inset-0 bg-linear-to-br from-slate-950 via-slate-900 to-slate-950"></div>
100
+ <div class="absolute inset-0 opacity-20">
101
+ <div class="absolute top-20 left-20 w-96 h-96 bg-cyan-500/20 rounded-full blur-3xl"></div>
102
+ <div class="absolute bottom-20 right-20 w-96 h-96 bg-blue-500/20 rounded-full blur-3xl"></div>
103
+ </div>
104
+ </div>
105
+
106
+ <div class="relative max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
107
+ <div class="space-y-6">
108
+ <div class="inline-block px-4 py-2 bg-cyan-500/10 rounded-full border border-cyan-500/20">
109
+ <span class="text-cyan-400 text-sm font-semibold uppercase tracking-wider">Nossos Serviços</span>
110
+ </div>
111
+
112
+ <h1 class="text-4xl sm:text-5xl md:text-6xl font-bold leading-tight">
113
+ Soluções <span class="gradient-text">Tecnológicas</span> Completas
114
+ </h1>
115
+
116
+ <p class="text-lg sm:text-xl text-gray-400 max-w-2xl mx-auto">
117
+ Do conceito à implementação, oferecemos serviços end-to-end para transformar seu negócio digital.
118
+ </p>
119
+ </div>
120
+ </div>
121
+ </section>
122
+
123
+ <!-- SERVICES GRID -->
124
+ <main class="relative py-20 lg:py-32">
125
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
126
+
127
+ <!-- SERVICE CARDS -->
128
+ <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8 mb-32">
129
+
130
+ <!-- Desenvolvimento Web -->
131
+ <div class="glass rounded-2xl p-8 hover-lift group">
132
+ <div class="w-16 h-16 bg-cyan-500/20 rounded-2xl flex items-center justify-center mb-6 group-hover:bg-cyan-500/30 transition-colors">
133
+ <i data-lucide="code" class="w-8 h-8 text-cyan-400"></i>
134
+ </div>
135
+ <h3 class="text-2xl font-bold text-white mb-4">Desenvolvimento Web</h3>
136
+ <p class="text-gray-400 mb-6 leading-relaxed">
137
+ Aplicações web modernas e responsivas com as melhores tecnologias do mercado. Performance e escalabilidade garantidas.
138
+ </p>
139
+ <div class="space-y-3 mb-6">
140
+ <div class="flex items-center text-sm text-gray-300">
141
+ <i data-lucide="check" class="w-4 h-4 text-green-400 mr-2"></i>
142
+ React, Next.js, Vue.js
143
+ </div>
144
+ <div class="flex items-center text-sm text-gray-300">
145
+ <i data-lucide="check" class="w-4 h-4 text-green-400 mr-2"></i>
146
+ PHP, Python, Node.js
147
+ </div>
148
+ <div class="flex items-center text-sm text-gray-300">
149
+ <i data-lucide="check" class="w-4 h-4 text-green-400 mr-2"></i>
150
+ APIs REST & GraphQL
151
+ </div>
152
+ </div>
153
+ <div class="flex flex-wrap gap-2">
154
+ <span class="px-3 py-1 bg-cyan-500/10 text-cyan-400 rounded-full text-sm">React</span>
155
+ <span class="px-3 py-1 bg-cyan-500/10 text-cyan-400 rounded-full text-sm">Next.js</span>
156
+ <span class="px-3 py-1 bg-cyan-500/10 text-cyan-400 rounded-full text-sm">PHP</span>
157
+ </div>
158
+ </div>
159
+
160
+ <!-- Aplicativos Mobile -->
161
+ <div class="glass rounded-2xl p-8 hover-lift group">
162
+ <div class="w-16 h-16 bg-blue-500/20 rounded-2xl flex items-center justify-center mb-6 group-hover:bg-blue-500/30 transition-colors">
163
+ <i data-lucide="smartphone" class="w-8 h-8 text-blue-400"></i>
164
+ </div>
165
+ <h3 class="text-2xl font-bold text-white mb-4">Aplicativos Mobile</h3>
166
+ <p class="text-gray-400 mb-6 leading-relaxed">
167
+ Apps nativos e multiplataforma com Flutter e React Native. UX excepcional em todas as plataformas.
168
+ </p>
169
+ <div class="space-y-3 mb-6">
170
+ <div class="flex items-center text-sm text-gray-300">
171
+ <i data-lucide="check" class="w-4 h-4 text-green-400 mr-2"></i>
172
+ iOS & Android nativo
173
+ </div>
174
+ <div class="flex items-center text-sm text-gray-300">
175
+ <i data-lucide="check" class="w-4 h-4 text-green-400 mr-2"></i>
176
+ Flutter & React Native
177
+ </div>
178
+ <div class="flex items-center text-sm text-gray-300">
179
+ <i data-lucide="check" class="w-4 h-4 text-green-400 mr-2"></i>
180
+ Firebase & App Store
181
+ </div>
182
+ </div>
183
+ <div class="flex flex-wrap gap-2">
184
+ <span class="px-3 py-1 bg-blue-500/10 text-blue-400 rounded-full text-sm">Flutter</span>
185
+ <span class="px-3 py-1 bg-blue-500/10 text-blue-400 rounded-full text-sm">React Native</span>
186
+ <span class="px-3 py-1 bg-blue-500/10 text-blue-400 rounded-full text-sm">Firebase</span>
187
+ </div>
188
+ </div>
189
+
190
+ <!-- Inteligência Artificial -->
191
+ <div class="glass rounded-2xl p-8 hover-lift group">
192
+ <div class="w-16 h-16 bg-purple-500/20 rounded-2xl flex items-center justify-center mb-6 group-hover:bg-purple-500/30 transition-colors">
193
+ <i data-lucide="brain" class="w-8 h-8 text-purple-400"></i>
194
+ </div>
195
+ <h3 class="text-2xl font-bold text-white mb-4">Inteligência Artificial</h3>
196
+ <p class="text-gray-400 mb-6 leading-relaxed">
197
+ Soluções de IA personalizadas com Python, TensorFlow e OpenAI. Automação e insights inteligentes.
198
+ </p>
199
+ <div class="space-y-3 mb-6">
200
+ <div class="flex items-center text-sm text-gray-300">
201
+ <i data-lucide="check" class="w-4 h-4 text-green-400 mr-2"></i>
202
+ Machine Learning
203
+ </div>
204
+ <div class="flex items-center text-sm text-gray-300">
205
+ <i data-lucide="check" class="w-4 h-4 text-green-400 mr-2"></i>
206
+ Processamento de Linguagem
207
+ </div>
208
+ <div class="flex items-center text-sm text-gray-300">
209
+ <i data-lucide="check" class="w-4 h-4 text-green-400 mr-2"></i>
210
+ Chatbots & Assistentes
211
+ </div>
212
+ </div>
213
+ <div class="flex flex-wrap gap-2">
214
+ <span class="px-3 py-1 bg-purple-500/10 text-purple-400 rounded-full text-sm">Python</span>
215
+ <span class="px-3 py-1 bg-purple-500/10 text-purple-400 rounded-full text-sm">TensorFlow</span>
216
+ <span class="px-3 py-1 bg-purple-500/10 text-purple-400 rounded-full text-sm">OpenAI</span>
217
+ </div>
218
+ </div>
219
+
220
+ <!-- Cloud & DevOps -->
221
+ <div class="glass rounded-2xl p-8 hover-lift group">
222
+ <div class="w-16 h-16 bg-green-500/20 rounded-2xl flex items-center justify-center mb-6 group-hover:bg-green-500/30 transition-colors">
223
+ <i data-lucide="cloud" class="w-8 h-8 text-green-400"></i>
224
+ </div>
225
+ <h3 class="text-2xl font-bold text-white mb-4">Cloud & DevOps</h3>
226
+ <p class="text-gray-400 mb-6 leading-relaxed">
227
+ Infraestrutura escalável com Docker, AWS e Railway. Deploy automatizado e monitoramento 24/7.
228
+ </p>
229
+ <div class="space-y-3 mb-6">
230
+ <div class="flex items-center text-sm text-gray-300">
231
+ <i data-lucide="check" class="w-4 h-4 text-green-400 mr-2"></i>
232
+ Containers & Kubernetes
233
+ </div>
234
+ <div class="flex items-center text-sm text-gray-300">
235
+ <i data-lucide="check" class="w-4 h-4 text-green-400 mr-2"></i>
236
+ CI/CD Pipelines
237
+ </div>
238
+ <div class="flex items-center text-sm text-gray-300">
239
+ <i data-lucide="check" class="w-4 h-4 text-green-400 mr-2"></i>
240
+ Monitoramento & Logs
241
+ </div>
242
+ </div>
243
+ <div class="flex flex-wrap gap-2">
244
+ <span class="px-3 py-1 bg-green-500/10 text-green-400 rounded-full text-sm">Docker</span>
245
+ <span class="px-3 py-1 bg-green-500/10 text-green-400 rounded-full text-sm">AWS</span>
246
+ <span class="px-3 py-1 bg-green-500/10 text-green-400 rounded-full text-sm">Railway</span>
247
+ </div>
248
+ </div>
249
+
250
+ <!-- Consultoria Técnica -->
251
+ <div class="glass rounded-2xl p-8 hover-lift group">
252
+ <div class="w-16 h-16 bg-orange-500/20 rounded-2xl flex items-center justify-center mb-6 group-hover:bg-orange-500/30 transition-colors">
253
+ <i data-lucide="database" class="w-8 h-8 text-orange-400"></i>
254
+ </div>
255
+ <h3 class="text-2xl font-bold text-white mb-4">Consultoria Técnica</h3>
256
+ <p class="text-gray-400 mb-6 leading-relaxed">
257
+ Análise de sistemas, arquitetura de software e otimização de performance. Expertise técnica completa.
258
+ </p>
259
+ <div class="space-y-3 mb-6">
260
+ <div class="flex items-center text-sm text-gray-300">
261
+ <i data-lucide="check" class="w-4 h-4 text-green-400 mr-2"></i>
262
+ Arquitetura de Software
263
+ </div>
264
+ <div class="flex items-center text-sm text-gray-300">
265
+ <i data-lucide="check" class="w-4 h-4 text-green-400 mr-2"></i>
266
+ Code Review & Refactoring
267
+ </div>
268
+ <div class="flex items-center text-sm text-gray-300">
269
+ <i data-lucide="check" class="w-4 h-4 text-green-400 mr-2"></i>
270
+ Performance Optimization
271
+ </div>
272
+ </div>
273
+ <div class="flex flex-wrap gap-2">
274
+ <span class="px-3 py-1 bg-orange-500/10 text-orange-400 rounded-full text-sm">Arquitetura</span>
275
+ <span class="px-3 py-1 bg-orange-500/10 text-orange-400 rounded-full text-sm">Performance</span>
276
+ <span class="px-3 py-1 bg-orange-500/10 text-orange-400 rounded-full text-sm">Segurança</span>
277
+ </div>
278
+ </div>
279
+
280
+ <!-- Suporte & Manutenção -->
281
+ <div class="glass rounded-2xl p-8 hover-lift group">
282
+ <div class="w-16 h-16 bg-pink-500/20 rounded-2xl flex items-center justify-center mb-6 group-hover:bg-pink-500/30 transition-colors">
283
+ <i data-lucide="users" class="w-8 h-8 text-pink-400"></i>
284
+ </div>
285
+ <h3 class="text-2xl font-bold text-white mb-4">Suporte & Manutenção</h3>
286
+ <p class="text-gray-400 mb-6 leading-relaxed">
287
+ Suporte técnico contínuo, atualizações de segurança e melhorias constantes. Seu sistema sempre atualizado.
288
+ </p>
289
+ <div class="space-y-3 mb-6">
290
+ <div class="flex items-center text-sm text-gray-300">
291
+ <i data-lucide="check" class="w-4 h-4 text-green-400 mr-2"></i>
292
+ Suporte 24/7
293
+ </div>
294
+ <div class="flex items-center text-sm text-gray-300">
295
+ <i data-lucide="check" class="w-4 h-4 text-green-400 mr-2"></i>
296
+ Updates de Segurança
297
+ </div>
298
+ <div class="flex items-center text-sm text-gray-300">
299
+ <i data-lucide="check" class="w-4 h-4 text-green-400 mr-2"></i>
300
+ Backup & Recovery
301
+ </div>
302
+ </div>
303
+ <div class="flex flex-wrap gap-2">
304
+ <span class="px-3 py-1 bg-pink-500/10 text-pink-400 rounded-full text-sm">24/7</span>
305
+ <span class="px-3 py-1 bg-pink-500/10 text-pink-400 rounded-full text-sm">Monitoramento</span>
306
+ <span class="px-3 py-1 bg-pink-500/10 text-pink-400 rounded-full text-sm">Updates</span>
307
+ </div>
308
+ </div>
309
+ </div>
310
+
311
+ <!-- PROCESS SECTION -->
312
+ <div class="mb-32">
313
+ <div class="text-center mb-16">
314
+ <h2 class="text-3xl sm:text-4xl md:text-5xl font-bold text-white mb-6">
315
+ Nosso <span class="gradient-text">Processo</span>
316
+ </h2>
317
+ <p class="text-gray-400 text-lg max-w-2xl mx-auto">
318
+ Metodologia comprovada para entregar projetos de alta qualidade no prazo
319
+ </p>
320
+ </div>
321
+
322
+ <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
323
+ <!-- Discovery -->
324
+ <div class="text-center">
325
+ <div class="w-16 h-16 bg-cyan-500/20 rounded-2xl flex items-center justify-center mx-auto mb-4">
326
+ <span class="text-2xl font-bold text-cyan-400">1</span>
327
+ </div>
328
+ <h3 class="text-xl font-bold text-white mb-3">Discovery</h3>
329
+ <p class="text-gray-400 text-sm leading-relaxed">
330
+ Análise detalhada dos requisitos, pesquisa de mercado e planejamento estratégico do projeto.
331
+ </p>
332
+ </div>
333
+
334
+ <!-- Design -->
335
+ <div class="text-center">
336
+ <div class="w-16 h-16 bg-blue-500/20 rounded-2xl flex items-center justify-center mx-auto mb-4">
337
+ <span class="text-2xl font-bold text-blue-400">2</span>
338
+ </div>
339
+ <h3 class="text-xl font-bold text-white mb-3">Design</h3>
340
+ <p class="text-gray-400 text-sm leading-relaxed">
341
+ Criação de wireframes, protótipos interativos e design system completo e acessível.
342
+ </p>
343
+ </div>
344
+
345
+ <!-- Development -->
346
+ <div class="text-center">
347
+ <div class="w-16 h-16 bg-purple-500/20 rounded-2xl flex items-center justify-center mx-auto mb-4">
348
+ <span class="text-2xl font-bold text-purple-400">3</span>
349
+ </div>
350
+ <h3 class="text-xl font-bold text-white mb-3">Development</h3>
351
+ <p class="text-gray-400 text-sm leading-relaxed">
352
+ Desenvolvimento ágil com sprints semanais, code reviews e testes automatizados.
353
+ </p>
354
+ </div>
355
+
356
+ <!-- Launch -->
357
+ <div class="text-center">
358
+ <div class="w-16 h-16 bg-green-500/20 rounded-2xl flex items-center justify-center mx-auto mb-4">
359
+ <span class="text-2xl font-bold text-green-400">4</span>
360
+ </div>
361
+ <h3 class="text-xl font-bold text-white mb-3">Launch</h3>
362
+ <p class="text-gray-400 text-sm leading-relaxed">
363
+ Deploy em produção, monitoramento contínuo e suporte pós-lançamento completo.
364
+ </p>
365
+ </div>
366
+ </div>
367
+ </div>
368
+
369
+ <!-- CTA SECTION -->
370
+ <div class="text-center">
371
+ <div class="glass rounded-3xl p-12 lg:p-16 max-w-4xl mx-auto">
372
+ <h2 class="text-3xl sm:text-4xl md:text-5xl font-bold text-white mb-6">
373
+ Pronto para <span class="gradient-text">começar</span> seu projeto?
374
+ </h2>
375
+ <p class="text-gray-400 text-lg mb-8 max-w-2xl mx-auto">
376
+ Vamos discutir sua ideia e criar uma solução personalizada para suas necessidades específicas.
377
+ </p>
378
+ <div class="flex flex-col sm:flex-row gap-4 justify-center">
379
+ <a href="/contato" class="bg-linear-to-r from-cyan-500 to-blue-600 hover:from-cyan-600 hover:to-blue-700 text-white font-bold py-4 px-8 rounded-xl transition-all duration-300 hover-lift">
380
+ Solicitar Orçamento
381
+ <i data-lucide="calculator" class="inline w-5 h-5 ml-2"></i>
382
+ </a>
383
+ <a href="/projetos" class="border border-cyan-500/30 text-cyan-400 hover:bg-cyan-500/10 font-semibold py-4 px-8 rounded-xl transition-all duration-300">
384
+ Ver Portfólio
385
+ </a>
386
+ </div>
387
+ </div>
388
+ </div>
389
+ </div>
390
+ </main>
391
+
392
+ <!-- FOOTER -->
393
+ <footer class="relative bg-slate-950/95 backdrop-blur-xl border-t border-white/5 mt-20 overflow-hidden">
394
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
395
+ <div class="grid md:grid-cols-4 gap-8">
396
+ <!-- Company Info -->
397
+ <div>
398
+ <div class="flex items-center space-x-3 mb-6">
399
+ <div class="w-12 h-12 rounded-xl overflow-hidden bg-linear-to-br from-cyan-500 to-blue-600 p-0.5">
400
+ <img src="/assets/logo.jpeg" alt="SoftEdge Logo" class="w-full h-full object-cover rounded-xl">
401
+ </div>
402
+ <span class="text-2xl font-bold gradient-text">SoftEdge</span>
403
+ </div>
404
+ <p class="text-gray-400 text-sm leading-relaxed">
405
+ Começamos com um sonho. Hoje desenvolvemos realidades lógicas e softwares mais amáveis.
406
+ </p>
407
+ </div>
408
+
409
+ <!-- Quick Links -->
410
+ <div>
411
+ <h3 class="text-white font-semibold mb-4">Navegação</h3>
412
+ <div class="space-y-2">
413
+ <a href="/" class="block text-gray-400 hover:text-cyan-400 transition-colors text-sm">Início</a>
414
+ <a href="/sobre" class="block text-gray-400 hover:text-cyan-400 transition-colors text-sm">Sobre</a>
415
+ <a href="/servicos" class="block text-gray-400 hover:text-cyan-400 transition-colors text-sm">Serviços</a>
416
+ <a href="/projetos" class="block text-gray-400 hover:text-cyan-400 transition-colors text-sm">Projetos</a>
417
+ <a href="/contato" class="block text-gray-400 hover:text-cyan-400 transition-colors text-sm">Contato</a>
418
+ </div>
419
+ </div>
420
+
421
+ <!-- Services -->
422
+ <div>
423
+ <h3 class="text-white font-semibold mb-4">Serviços</h3>
424
+ <div class="space-y-2">
425
+ <a href="/servicos" class="block text-gray-400 hover:text-cyan-400 transition-colors text-sm">Desenvolvimento Web</a>
426
+ <a href="/servicos" class="block text-gray-400 hover:text-cyan-400 transition-colors text-sm">Apps Mobile</a>
427
+ <a href="/servicos" class="block text-gray-400 hover:text-cyan-400 transition-colors text-sm">Inteligência Artificial</a>
428
+ <a href="/servicos" class="block text-gray-400 hover:text-cyan-400 transition-colors text-sm">Cloud & DevOps</a>
429
+ </div>
430
+ </div>
431
+
432
+ <!-- Contact -->
433
+ <div>
434
+ <h3 class="text-white font-semibold mb-4">Contato</h3>
435
+ <div class="space-y-3">
436
+ <a href="mailto:softedgecorporation@gmail.com" class="flex items-center text-gray-400 hover:text-cyan-400 transition-colors text-sm">
437
+ <i data-lucide="mail" class="w-4 h-4 mr-2"></i>
438
+ Email
439
+ </a>
440
+ <a href="https://wa.me/244900000000" target="_blank" class="flex items-center text-gray-400 hover:text-cyan-400 transition-colors text-sm">
441
+ <i data-lucide="message-circle" class="w-4 h-4 mr-2"></i>
442
+ WhatsApp
443
+ </a>
444
+ <div class="flex items-center text-gray-400 text-sm">
445
+ <i data-lucide="map-pin" class="w-4 h-4 mr-2"></i>
446
+ Luanda, Angola
447
+ </div>
448
+ </div>
449
+ </div>
450
+ </div>
451
+
452
+ <div class="border-t border-white/5 mt-12 pt-8 text-center">
453
+ <p class="text-gray-400 text-sm">
454
+ © 2025 <span class="text-white font-semibold">SoftEdge Corporation</span>. Todos os direitos reservados.
455
+ </p>
456
+ </div>
457
+ </div>
458
+ </footer>
459
+
460
+ <!-- SCRIPTS -->
461
+ <script src="https://unpkg.com/lucide@latest"></script>
462
+ <script>
463
+ document.addEventListener('DOMContentLoaded', function() {
464
+ // Initialize Lucide icons
465
+ lucide.createIcons();
466
+
467
+ // Mobile menu toggle
468
+ const mobileMenuButton = document.getElementById('mobile-menu-button');
469
+ const mobileMenu = document.getElementById('mobile-menu');
470
+
471
+ mobileMenuButton.addEventListener('click', function() {
472
+ mobileMenu.classList.toggle('hidden');
473
+ });
474
+
475
+ // Smooth scrolling
476
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
477
+ anchor.addEventListener('click', function (e) {
478
+ e.preventDefault();
479
+ const target = document.querySelector(this.getAttribute('href'));
480
+ if (target) {
481
+ target.scrollIntoView({
482
+ behavior: 'smooth',
483
+ block: 'start'
484
+ });
485
+ }
486
+ });
487
+ });
488
+
489
+ // Intersection Observer for animations
490
+ const observerOptions = {
491
+ threshold: 0.1,
492
+ rootMargin: '0px 0px -100px 0px'
493
+ };
494
+
495
+ const observer = new IntersectionObserver((entries) => {
496
+ entries.forEach(entry => {
497
+ if (entry.isIntersecting) {
498
+ entry.target.style.opacity = '1';
499
+ entry.target.style.transform = 'translateY(0)';
500
+ }
501
+ });
502
+ }, observerOptions);
503
+
504
+ // Observe sections
505
+ document.querySelectorAll('section > div, .glass').forEach(el => {
506
+ el.style.opacity = '0';
507
+ el.style.transform = 'translateY(30px)';
508
+ el.style.transition = 'opacity 0.8s ease, transform 0.8s ease';
509
+ observer.observe(el);
510
+ });
511
+ });
512
+ </script>
513
+
514
+ <style>
515
+ .glass {
516
+ background: rgba(0, 0, 0, 0.8);
517
+ backdrop-filter: blur(20px);
518
+ -webkit-backdrop-filter: blur(20px);
519
+ border: 1px solid rgba(255, 255, 255, 0.1);
520
+ }
521
+
522
+ .gradient-text {
523
+ background: linear-gradient(135deg, #06b6d4, #3b82f6);
524
+ -webkit-background-clip: text;
525
+ -webkit-text-fill-color: transparent;
526
+ background-clip: text;
527
+ }
528
+
529
+ .hover-lift {
530
+ transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
531
+ }
532
+
533
+ .hover-lift:hover {
534
+ transform: translateY(-5px);
535
+ box-shadow: 0 20px 40px rgba(6, 182, 212, 0.2);
536
+ }
537
+ </style>
538
+ </body>
539
+ </html>
templates/sobre.html ADDED
@@ -0,0 +1,485 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="pt-BR" class="scroll-smooth">
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
+ <title>Sobre Nós - SoftEdge Corporation</title>
7
+
8
+ <!-- SEO & SOCIAL -->
9
+ <meta name="description" content="Conheça a história da SoftEdge Corporation. Uma empresa angolana de desenvolvimento de software focada em inovação e excelência técnica.">
10
+ <meta name="keywords" content="sobre, softedge, historia, equipe, angola, desenvolvimento">
11
+
12
+ <!-- FAVICON -->
13
+ <link rel="icon" href="/assets/placeholder.svg" type="image/svg+xml">
14
+ <link rel="apple-touch-icon" href="/assets/placeholder.svg">
15
+ <meta property="og:image" content="/assets/placeholder.svg" />
16
+ <meta property="og:title" content="Sobre Nós - SoftEdge Corporation" />
17
+ <meta property="og:description" content="Conheça nossa história e equipe" />
18
+
19
+ <!-- FONTS -->
20
+ <link rel="preconnect" href="https://fonts.googleapis.com">
21
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
22
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
23
+
24
+ <!-- TAILWIND CSS -->
25
+ <script src="https://cdn.tailwindcss.com"></script>
26
+ <script>
27
+ tailwind.config = {
28
+ theme: {
29
+ extend: {
30
+ fontFamily: {
31
+ sans: ['Inter', 'system-ui', 'sans-serif'],
32
+ },
33
+ colors: {
34
+ primary: {
35
+ 50: '#ecfeff',
36
+ 100: '#cffafe',
37
+ 500: '#06b6d4',
38
+ 600: '#0891b2',
39
+ 700: '#0e7490',
40
+ 900: '#164e63',
41
+ }
42
+ }
43
+ }
44
+ }
45
+ }
46
+ </script>
47
+
48
+ <!-- LUCIDE ICONS -->
49
+ <script src="https://unpkg.com/lucide@latest"></script>
50
+
51
+ <!-- CUSTOM CSS -->
52
+ <link href="/assets/css/style.css" rel="stylesheet">
53
+ </head>
54
+
55
+ <body class="min-h-screen bg-linear-to-br from-slate-950 via-slate-900 to-slate-950 text-white antialiased font-sans">
56
+ <!-- HEADER -->
57
+ <header class="fixed top-0 left-0 right-0 z-50 glass">
58
+ <nav class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
59
+ <div class="flex items-center justify-between h-16">
60
+ <!-- Logo -->
61
+ <div class="flex items-center space-x-3">
62
+ <div class="w-10 h-10 rounded-xl overflow-hidden bg-linear-to-br from-cyan-500 to-blue-600 p-0.5">
63
+ <img src="/assets/logo.jpeg" alt="SoftEdge Logo" class="w-full h-full object-cover rounded-xl">
64
+ </div>
65
+ <span class="text-xl font-bold gradient-text">SoftEdge</span>
66
+ </div>
67
+
68
+ <!-- Desktop Navigation -->
69
+ <div class="hidden md:flex items-center space-x-8">
70
+ <a href="/" class="text-gray-300 hover:text-cyan-400 transition-colors">Início</a>
71
+ <a href="/sobre" class="text-white hover:text-cyan-400 transition-colors font-medium">Sobre</a>
72
+ <a href="/servicos" class="text-gray-300 hover:text-cyan-400 transition-colors">Serviços</a>
73
+ <a href="/projetos" class="text-gray-300 hover:text-cyan-400 transition-colors">Projetos</a>
74
+ <a href="/contato" class="text-gray-300 hover:text-cyan-400 transition-colors">Contato</a>
75
+ </div>
76
+
77
+ <!-- Mobile menu button -->
78
+ <button class="md:hidden text-white" id="mobile-menu-button">
79
+ <i data-lucide="menu" class="w-6 h-6"></i>
80
+ </button>
81
+ </div>
82
+
83
+ <!-- Mobile Navigation -->
84
+ <div class="md:hidden hidden" id="mobile-menu">
85
+ <div class="px-2 pt-2 pb-3 space-y-1 bg-slate-900/95 rounded-lg mt-2">
86
+ <a href="/" class="block px-3 py-2 text-gray-300 hover:text-cyan-400">Início</a>
87
+ <a href="/sobre" class="block px-3 py-2 text-white font-medium">Sobre</a>
88
+ <a href="/servicos" class="block px-3 py-2 text-gray-300 hover:text-cyan-400">Serviços</a>
89
+ <a href="/projetos" class="block px-3 py-2 text-gray-300 hover:text-cyan-400">Projetos</a>
90
+ <a href="/contato" class="block px-3 py-2 text-gray-300 hover:text-cyan-400">Contato</a>
91
+ </div>
92
+ </div>
93
+ </nav>
94
+ </header>
95
+
96
+ <!-- HERO SECTION -->
97
+ <section class="relative min-h-[60vh] flex items-center justify-center overflow-hidden pt-16">
98
+ <div class="absolute inset-0 -z-10">
99
+ <div class="absolute inset-0 bg-linear-to-br from-slate-950 via-slate-900 to-slate-950"></div>
100
+ <div class="absolute inset-0 opacity-20">
101
+ <div class="absolute top-20 left-20 w-96 h-96 bg-cyan-500/20 rounded-full blur-3xl"></div>
102
+ <div class="absolute bottom-20 right-20 w-96 h-96 bg-blue-500/20 rounded-full blur-3xl"></div>
103
+ </div>
104
+ </div>
105
+
106
+ <div class="relative max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
107
+ <div class="space-y-6">
108
+ <div class="inline-block px-4 py-2 bg-cyan-500/10 rounded-full border border-cyan-500/20">
109
+ <span class="text-cyan-400 text-sm font-semibold uppercase tracking-wider">Sobre a SoftEdge</span>
110
+ </div>
111
+
112
+ <h1 class="text-4xl sm:text-5xl md:text-6xl font-bold leading-tight">
113
+ Começamos com<br>
114
+ <span class="gradient-text">um sonho</span>
115
+ </h1>
116
+
117
+ <p class="text-lg sm:text-xl text-gray-400 max-w-2xl mx-auto">
118
+ Hoje desenvolvemos realidades lógicas e softwares que as pessoas amam usar.
119
+ </p>
120
+ </div>
121
+ </div>
122
+ </section>
123
+
124
+ <!-- MAIN CONTENT -->
125
+ <main class="relative py-20 lg:py-32">
126
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
127
+
128
+ <!-- OUR STORY -->
129
+ <div class="grid lg:grid-cols-2 gap-12 lg:gap-20 items-center mb-32">
130
+ <div class="space-y-8">
131
+ <div class="inline-block px-4 py-2 bg-cyan-500/10 rounded-full border border-cyan-500/20">
132
+ <span class="text-cyan-400 text-sm font-semibold uppercase tracking-wider">Nossa História</span>
133
+ </div>
134
+
135
+ <div class="space-y-6 text-gray-300 text-base sm:text-lg leading-relaxed">
136
+ <p>
137
+ Tudo começou em <span class="text-cyan-400 font-semibold">2023</span>, quando quatro amigos decidiram que o mundo precisava de softwares mais <span class="text-white font-medium">humanos</span>.
138
+ </p>
139
+
140
+ <p>
141
+ <span class="text-white font-bold text-xl">Isaac Quarenta</span> <span class="text-gray-400 text-sm">(CEO & Fundador)</span> juntou forças com os co-fundadores
142
+ <span class="text-white font-semibold">José Lopes</span> <span class="text-gray-400 text-sm">(CTO)</span>,
143
+ <span class="text-white font-semibold">Stefânio Costa</span> <span class="text-gray-400 text-sm">(Senior Developer)</span> e
144
+ <span class="text-white font-semibold">Tiago Rodrigues</span> <span class="text-gray-400 text-sm">(Designer & UX)</span>.
145
+ </p>
146
+
147
+ <p>
148
+ Nossa missão é clara: <span class="text-cyan-400 font-semibold">transformar ideias em soluções tecnológicas</span> que fazem a diferença no mundo digital angolano e africano.
149
+ </p>
150
+ </div>
151
+ </div>
152
+
153
+ <div class="relative">
154
+ <div class="glass rounded-2xl p-8">
155
+ <img src="/assets/equipe.jpg" alt="Equipe SoftEdge" class="w-full rounded-xl">
156
+ <div class="mt-4 text-center">
157
+ <p class="text-gray-400 text-sm">Nossa equipe apaixonada por tecnologia</p>
158
+ </div>
159
+ </div>
160
+ </div>
161
+ </div>
162
+
163
+ <!-- MISSION, VISION, VALUES -->
164
+ <div class="mb-32">
165
+ <div class="text-center mb-16">
166
+ <h2 class="text-3xl sm:text-4xl md:text-5xl font-bold text-white mb-6">
167
+ Missão, Visão <span class="gradient-text">& Valores</span>
168
+ </h2>
169
+ <p class="text-gray-400 text-lg max-w-2xl mx-auto">
170
+ Os princípios que guiam nossas decisões e ações todos os dias
171
+ </p>
172
+ </div>
173
+
174
+ <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
175
+ <!-- Mission -->
176
+ <div class="glass rounded-2xl p-8 hover-lift">
177
+ <div class="w-16 h-16 bg-cyan-500/20 rounded-2xl flex items-center justify-center mb-6">
178
+ <i data-lucide="target" class="w-8 h-8 text-cyan-400"></i>
179
+ </div>
180
+ <h3 class="text-2xl font-bold text-white mb-4">Missão</h3>
181
+ <p class="text-gray-400 leading-relaxed">
182
+ Guiar empresas angolanas e africanas na transformação digital, desenvolvendo soluções tecnológicas inovadoras que impulsionam o crescimento e a eficiência.
183
+ </p>
184
+ </div>
185
+
186
+ <!-- Vision -->
187
+ <div class="glass rounded-2xl p-8 hover-lift">
188
+ <div class="w-16 h-16 bg-blue-500/20 rounded-2xl flex items-center justify-center mb-6">
189
+ <i data-lucide="eye" class="w-8 h-8 text-blue-400"></i>
190
+ </div>
191
+ <h3 class="text-2xl font-bold text-white mb-4">Visão</h3>
192
+ <p class="text-gray-400 leading-relaxed">
193
+ Ser a referência em desenvolvimento de software na África, reconhecida pela excelência técnica, inovação constante e impacto positivo na sociedade.
194
+ </p>
195
+ </div>
196
+
197
+ <!-- Values -->
198
+ <div class="glass rounded-2xl p-8 hover-lift md:col-span-2 lg:col-span-1">
199
+ <div class="w-16 h-16 bg-purple-500/20 rounded-2xl flex items-center justify-center mb-6">
200
+ <i data-lucide="heart" class="w-8 h-8 text-purple-400"></i>
201
+ </div>
202
+ <h3 class="text-2xl font-bold text-white mb-4">Valores</h3>
203
+ <div class="space-y-3">
204
+ <div class="flex items-center text-gray-400">
205
+ <i data-lucide="check" class="w-4 h-4 text-green-400 mr-3"></i>
206
+ <span>Inovação constante</span>
207
+ </div>
208
+ <div class="flex items-center text-gray-400">
209
+ <i data-lucide="check" class="w-4 h-4 text-green-400 mr-3"></i>
210
+ <span>Excelência técnica</span>
211
+ </div>
212
+ <div class="flex items-center text-gray-400">
213
+ <i data-lucide="check" class="w-4 h-4 text-green-400 mr-3"></i>
214
+ <span>Compromisso com resultados</span>
215
+ </div>
216
+ </div>
217
+ </div>
218
+ </div>
219
+ </div>
220
+
221
+ <!-- TEAM SECTION -->
222
+ <div class="mb-32">
223
+ <div class="text-center mb-16">
224
+ <h2 class="text-3xl sm:text-4xl md:text-5xl font-bold text-white mb-6">
225
+ Nossa <span class="gradient-text">Equipe</span>
226
+ </h2>
227
+ <p class="text-gray-400 text-lg max-w-2xl mx-auto">
228
+ Conheça as pessoas apaixonadas por tecnologia que fazem a SoftEdge acontecer
229
+ </p>
230
+ </div>
231
+
232
+ <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
233
+ <!-- Isaac Quarenta -->
234
+ <div class="glass rounded-2xl p-6 text-center hover-lift">
235
+ <div class="w-20 h-20 bg-linear-to-br from-cyan-500 to-blue-600 rounded-full flex items-center justify-center mx-auto mb-4">
236
+ <span class="text-white font-bold text-xl">IQ</span>
237
+ </div>
238
+ <h3 class="text-xl font-bold text-white mb-2">Isaac Quarenta</h3>
239
+ <p class="text-cyan-400 font-medium mb-3">CEO & Fundador</p>
240
+ <p class="text-gray-400 text-sm leading-relaxed">
241
+ Líder visionário com experiência em desenvolvimento de software e gestão de equipes técnicas.
242
+ </p>
243
+ </div>
244
+
245
+ <!-- José Lopes -->
246
+ <div class="glass rounded-2xl p-6 text-center hover-lift">
247
+ <div class="w-20 h-20 bg-linear-to-br from-blue-500 to-purple-600 rounded-full flex items-center justify-center mx-auto mb-4">
248
+ <span class="text-white font-bold text-xl">JL</span>
249
+ </div>
250
+ <h3 class="text-xl font-bold text-white mb-2">José Lopes</h3>
251
+ <p class="text-blue-400 font-medium mb-3">CTO</p>
252
+ <p class="text-gray-400 text-sm leading-relaxed">
253
+ Especialista em arquitetura de sistemas e tecnologias emergentes, com foco em escalabilidade.
254
+ </p>
255
+ </div>
256
+
257
+ <!-- Stefânio Costa -->
258
+ <div class="glass rounded-2xl p-6 text-center hover-lift">
259
+ <div class="w-20 h-20 bg-linear-to-br from-purple-500 to-pink-600 rounded-full flex items-center justify-center mx-auto mb-4">
260
+ <span class="text-white font-bold text-xl">SC</span>
261
+ </div>
262
+ <h3 class="text-xl font-bold text-white mb-2">Stefânio Costa</h3>
263
+ <p class="text-purple-400 font-medium mb-3">Senior Developer</p>
264
+ <p class="text-gray-400 text-sm leading-relaxed">
265
+ Desenvolvedor full-stack com expertise em backend, Python e bancos de dados de alta performance.
266
+ </p>
267
+ </div>
268
+
269
+ <!-- Tiago Rodrigues -->
270
+ <div class="glass rounded-2xl p-6 text-center hover-lift">
271
+ <div class="w-20 h-20 bg-linear-to-br from-pink-500 to-red-600 rounded-full flex items-center justify-center mx-auto mb-4">
272
+ <span class="text-white font-bold text-xl">TR</span>
273
+ </div>
274
+ <h3 class="text-xl font-bold text-white mb-2">Tiago Rodrigues</h3>
275
+ <p class="text-pink-400 font-medium mb-3">Designer & UX</p>
276
+ <p class="text-gray-400 text-sm leading-relaxed">
277
+ Criativo e inovador, especialista em design de interfaces e experiência do usuário excepcional.
278
+ </p>
279
+ </div>
280
+ </div>
281
+ </div>
282
+
283
+ <!-- STATS SECTION -->
284
+ <div class="mb-32">
285
+ <div class="text-center mb-16">
286
+ <h2 class="text-3xl sm:text-4xl md:text-5xl font-bold text-white mb-6">
287
+ Números que <span class="gradient-text">orgulham</span>
288
+ </h2>
289
+ <p class="text-gray-400 text-lg max-w-2xl mx-auto">
290
+ Resultados concretos que refletem nosso compromisso com a excelência
291
+ </p>
292
+ </div>
293
+
294
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
295
+ <div class="text-center">
296
+ <div class="text-4xl md:text-5xl font-bold gradient-text mb-2">70+</div>
297
+ <p class="text-gray-400">Projetos Entregues</p>
298
+ </div>
299
+ <div class="text-center">
300
+ <div class="text-4xl md:text-5xl font-bold gradient-text mb-2">50+</div>
301
+ <p class="text-gray-400">Clientes Satisfeitos</p>
302
+ </div>
303
+ <div class="text-center">
304
+ <div class="text-4xl md:text-5xl font-bold gradient-text mb-2">4.9★</div>
305
+ <p class="text-gray-400">Avaliação Média</p>
306
+ </div>
307
+ <div class="text-center">
308
+ <div class="text-4xl md:text-5xl font-bold gradient-text mb-2">24/7</div>
309
+ <p class="text-gray-400">Suporte Disponível</p>
310
+ </div>
311
+ </div>
312
+ </div>
313
+
314
+ <!-- CTA SECTION -->
315
+ <div class="text-center">
316
+ <div class="glass rounded-3xl p-12 lg:p-16 max-w-4xl mx-auto">
317
+ <h2 class="text-3xl sm:text-4xl md:text-5xl font-bold text-white mb-6">
318
+ Faça parte da nossa <span class="gradient-text">história</span>
319
+ </h2>
320
+ <p class="text-gray-400 text-lg mb-8 max-w-2xl mx-auto">
321
+ Estamos sempre em busca de novos desafios e oportunidades para crescer juntos.
322
+ Vamos conversar sobre seu próximo projeto?
323
+ </p>
324
+ <div class="flex flex-col sm:flex-row gap-4 justify-center">
325
+ <a href="/contato" class="bg-linear-to-r from-cyan-500 to-blue-600 hover:from-cyan-600 hover:to-blue-700 text-white font-bold py-4 px-8 rounded-xl transition-all duration-300 hover-lift">
326
+ Vamos Conversar
327
+ <i data-lucide="message-circle" class="inline w-5 h-5 ml-2"></i>
328
+ </a>
329
+ <a href="/projetos" class="border border-cyan-500/30 text-cyan-400 hover:bg-cyan-500/10 font-semibold py-4 px-8 rounded-xl transition-all duration-300">
330
+ Ver Nossos Projetos
331
+ </a>
332
+ </div>
333
+ </div>
334
+ </div>
335
+ </div>
336
+ </main>
337
+
338
+ <!-- FOOTER -->
339
+ <footer class="relative bg-slate-950/95 backdrop-blur-xl border-t border-white/5 mt-20 overflow-hidden">
340
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
341
+ <div class="grid md:grid-cols-4 gap-8">
342
+ <!-- Company Info -->
343
+ <div>
344
+ <div class="flex items-center space-x-3 mb-6">
345
+ <div class="w-12 h-12 rounded-xl overflow-hidden bg-linear-to-br from-cyan-500 to-blue-600 p-0.5">
346
+ <img src="/assets/logo.jpeg" alt="SoftEdge Logo" class="w-full h-full object-cover rounded-xl">
347
+ </div>
348
+ <span class="text-2xl font-bold gradient-text">SoftEdge</span>
349
+ </div>
350
+ <p class="text-gray-400 text-sm leading-relaxed">
351
+ Começamos com um sonho. Hoje desenvolvemos realidades lógicas e softwares mais amáveis.
352
+ </p>
353
+ </div>
354
+
355
+ <!-- Quick Links -->
356
+ <div>
357
+ <h3 class="text-white font-semibold mb-4">Navegação</h3>
358
+ <div class="space-y-2">
359
+ <a href="/" class="block text-gray-400 hover:text-cyan-400 transition-colors text-sm">Início</a>
360
+ <a href="/sobre" class="block text-gray-400 hover:text-cyan-400 transition-colors text-sm">Sobre</a>
361
+ <a href="/servicos" class="block text-gray-400 hover:text-cyan-400 transition-colors text-sm">Serviços</a>
362
+ <a href="/projetos" class="block text-gray-400 hover:text-cyan-400 transition-colors text-sm">Projetos</a>
363
+ <a href="/contato" class="block text-gray-400 hover:text-cyan-400 transition-colors text-sm">Contato</a>
364
+ </div>
365
+ </div>
366
+
367
+ <!-- Services -->
368
+ <div>
369
+ <h3 class="text-white font-semibold mb-4">Serviços</h3>
370
+ <div class="space-y-2">
371
+ <a href="/servicos" class="block text-gray-400 hover:text-cyan-400 transition-colors text-sm">Desenvolvimento Web</a>
372
+ <a href="/servicos" class="block text-gray-400 hover:text-cyan-400 transition-colors text-sm">Apps Mobile</a>
373
+ <a href="/servicos" class="block text-gray-400 hover:text-cyan-400 transition-colors text-sm">Inteligência Artificial</a>
374
+ <a href="/servicos" class="block text-gray-400 hover:text-cyan-400 transition-colors text-sm">Cloud & DevOps</a>
375
+ </div>
376
+ </div>
377
+
378
+ <!-- Contact -->
379
+ <div>
380
+ <h3 class="text-white font-semibold mb-4">Contato</h3>
381
+ <div class="space-y-3">
382
+ <a href="mailto:softedgecorporation@gmail.com" class="flex items-center text-gray-400 hover:text-cyan-400 transition-colors text-sm">
383
+ <i data-lucide="mail" class="w-4 h-4"></i>
384
+ <span class="ml-2">Email</span>
385
+ </a>
386
+ <a href="https://wa.me/244900000000" target="_blank" class="flex items-center text-gray-400 hover:text-cyan-400 transition-colors text-sm">
387
+ <i data-lucide="message-circle" class="w-4 h-4"></i>
388
+ <span class="ml-2">WhatsApp</span>
389
+ </a>
390
+ <div class="flex items-center text-gray-400 text-sm">
391
+ <i data-lucide="map-pin" class="w-4 h-4"></i>
392
+ <span class="ml-2">Luanda, Angola</span>
393
+ </div>
394
+ </div>
395
+ </div>
396
+ </div>
397
+
398
+ <div class="border-t border-white/5 mt-12 pt-8 text-center">
399
+ <p class="text-gray-400 text-sm">
400
+ © 2025 <span class="text-white font-semibold">SoftEdge Corporation</span>. Todos os direitos reservados.
401
+ </p>
402
+ </div>
403
+ </div>
404
+ </footer>
405
+
406
+ <!-- SCRIPTS -->
407
+ <script src="https://unpkg.com/lucide@latest"></script>
408
+ <script>
409
+ document.addEventListener('DOMContentLoaded', function() {
410
+ // Initialize Lucide icons
411
+ lucide.createIcons();
412
+
413
+ // Mobile menu toggle
414
+ const mobileMenuButton = document.getElementById('mobile-menu-button');
415
+ const mobileMenu = document.getElementById('mobile-menu');
416
+
417
+ mobileMenuButton.addEventListener('click', function() {
418
+ mobileMenu.classList.toggle('hidden');
419
+ });
420
+
421
+ // Smooth scrolling
422
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
423
+ anchor.addEventListener('click', function (e) {
424
+ e.preventDefault();
425
+ const target = document.querySelector(this.getAttribute('href'));
426
+ if (target) {
427
+ target.scrollIntoView({
428
+ behavior: 'smooth',
429
+ block: 'start'
430
+ });
431
+ }
432
+ });
433
+ });
434
+
435
+ // Intersection Observer for animations
436
+ const observerOptions = {
437
+ threshold: 0.1,
438
+ rootMargin: '0px 0px -100px 0px'
439
+ };
440
+
441
+ const observer = new IntersectionObserver((entries) => {
442
+ entries.forEach(entry => {
443
+ if (entry.isIntersecting) {
444
+ entry.target.style.opacity = '1';
445
+ entry.target.style.transform = 'translateY(0)';
446
+ }
447
+ });
448
+ }, observerOptions);
449
+
450
+ // Observe sections
451
+ document.querySelectorAll('section > div, .glass').forEach(el => {
452
+ el.style.opacity = '0';
453
+ el.style.transform = 'translateY(30px)';
454
+ el.style.transition = 'opacity 0.8s ease, transform 0.8s ease';
455
+ observer.observe(el);
456
+ });
457
+ });
458
+ </script>
459
+
460
+ <style>
461
+ .glass {
462
+ background: rgba(0, 0, 0, 0.8);
463
+ backdrop-filter: blur(20px);
464
+ -webkit-backdrop-filter: blur(20px);
465
+ border: 1px solid rgba(255, 255, 255, 0.1);
466
+ }
467
+
468
+ .gradient-text {
469
+ background: linear-gradient(135deg, #06b6d4, #3b82f6);
470
+ -webkit-background-clip: text;
471
+ -webkit-text-fill-color: transparent;
472
+ background-clip: text;
473
+ }
474
+
475
+ .hover-lift {
476
+ transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
477
+ }
478
+
479
+ .hover-lift:hover {
480
+ transform: translateY(-5px);
481
+ box-shadow: 0 20px 40px rgba(6, 182, 212, 0.2);
482
+ }
483
+ </style>
484
+ </body>
485
+ </html>