Hugging Face's logo

Spaces:
Softedge
/
Corporations
Sleeping

App Files Community
akra35567 commited on
Commit
0c6d697
·
verified ·
1 Parent(s): 66dd59b

Upload react-fallback.html

Browse files
Files changed (1) hide show
  1. react-fallback.html +277 -0
react-fallback.html ADDED
@@ -0,0 +1,277 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="pt-BR">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>SoftEdge Corporation - React Fallback</title>
7
+ <script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
8
+ <script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
9
+ <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
10
+ <style>
11
+ body {
12
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
13
+ margin: 0;
14
+ padding: 20px;
15
+ background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%);
16
+ color: white;
17
+ min-height: 100vh;
18
+ }
19
+ .container {
20
+ max-width: 800px;
21
+ margin: 0 auto;
22
+ background: rgba(30, 41, 59, 0.8);
23
+ border-radius: 12px;
24
+ padding: 30px;
25
+ backdrop-filter: blur(10px);
26
+ border: 1px solid rgba(148, 163, 184, 0.1);
27
+ }
28
+ .header {
29
+ text-align: center;
30
+ margin-bottom: 30px;
31
+ }
32
+ .nav {
33
+ display: flex;
34
+ gap: 10px;
35
+ margin-bottom: 20px;
36
+ flex-wrap: wrap;
37
+ }
38
+ .nav-btn {
39
+ padding: 8px 16px;
40
+ background: rgba(6, 182, 212, 0.1);
41
+ border: 1px solid rgba(6, 182, 212, 0.3);
42
+ border-radius: 6px;
43
+ color: #06b6d4;
44
+ cursor: pointer;
45
+ transition: all 0.3s ease;
46
+ }
47
+ .nav-btn.active {
48
+ background: #06b6d4;
49
+ color: white;
50
+ }
51
+ .content {
52
+ background: rgba(15, 23, 42, 0.5);
53
+ border-radius: 8px;
54
+ padding: 20px;
55
+ min-height: 200px;
56
+ }
57
+ .feature-grid {
58
+ display: grid;
59
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
60
+ gap: 20px;
61
+ margin-top: 20px;
62
+ }
63
+ .feature-card {
64
+ background: rgba(30, 41, 59, 0.6);
65
+ padding: 20px;
66
+ border-radius: 8px;
67
+ border: 1px solid rgba(148, 163, 184, 0.1);
68
+ text-align: center;
69
+ }
70
+ .feature-card h3 {
71
+ color: #06b6d4;
72
+ margin-bottom: 10px;
73
+ }
74
+ </style>
75
+ </head>
76
+ <body>
77
+ <div id="root"></div>
78
+
79
+ <script type="text/babel">
80
+ const { useState, useEffect } = React;
81
+
82
+ function App() {
83
+ const [currentSection, setCurrentSection] = useState('home');
84
+ const [isVisible, setIsVisible] = useState(false);
85
+
86
+ useEffect(() => {
87
+ setTimeout(() => setIsVisible(true), 100);
88
+ }, []);
89
+
90
+ const sections = [
91
+ { id: 'home', label: 'Início', icon: '🏠' },
92
+ { id: 'services', label: 'Serviços', icon: '⚙️' },
93
+ { id: 'projects', label: 'Projetos', icon: '📁' },
94
+ { id: 'about', label: 'Sobre', icon: '👥' },
95
+ { id: 'contact', label: 'Contato', icon: '📧' }
96
+ ];
97
+
98
+ const renderContent = () => {
99
+ switch (currentSection) {
100
+ case 'home':
101
+ return (
102
+ <div>
103
+ <h2>🚀 Bem-vindo à SoftEdge Corporation</h2>
104
+ <p>Transformamos ideias em soluções digitais inovadoras.</p>
105
+ <div className="feature-grid">
106
+ <div className="feature-card">
107
+ <h3>⚡ Performance</h3>
108
+ <p>Soluções otimizadas para máxima velocidade</p>
109
+ </div>
110
+ <div className="feature-card">
111
+ <h3>🔒 Segurança</h3>
112
+ <p>Proteção avançada e melhores práticas</p>
113
+ </div>
114
+ <div className="feature-card">
115
+ <h3>📱 Responsivo</h3>
116
+ <p>Experiência perfeita em todos os dispositivos</p>
117
+ </div>
118
+ </div>
119
+ </div>
120
+ );
121
+
122
+ case 'services':
123
+ return (
124
+ <div>
125
+ <h2>💼 Nossos Serviços</h2>
126
+ <div className="feature-grid">
127
+ <div className="feature-card">
128
+ <h3>💻 Desenvolvimento Web</h3>
129
+ <p>Sites, sistemas e aplicações web modernas</p>
130
+ </div>
131
+ <div className="feature-card">
132
+ <h3>📱 Apps Mobile</h3>
133
+ <p>Aplicativos nativos e híbridos</p>
134
+ </div>
135
+ <div className="feature-card">
136
+ <h3>🤖 IA & Automação</h3>
137
+ <p>Inteligência artificial e processos automatizados</p>
138
+ </div>
139
+ <div className="feature-card">
140
+ <h3>☁️ Cloud Solutions</h3>
141
+ <p>Migração e otimização para nuvem</p>
142
+ </div>
143
+ </div>
144
+ </div>
145
+ );
146
+
147
+ case 'projects':
148
+ return (
149
+ <div>
150
+ <h2>📂 Nossos Projetos</h2>
151
+ <div className="feature-grid">
152
+ <div className="feature-card">
153
+ <h3>AKIRA IA</h3>
154
+ <p>Assistente virtual inteligente</p>
155
+ <div style={{marginTop: '10px'}}>
156
+ <span style={{background: 'rgba(6, 182, 212, 0.2)', padding: '2px 8px', borderRadius: '4px', fontSize: '12px', color: '#06b6d4'}}>Python</span>
157
+ <span style={{background: 'rgba(168, 85, 247, 0.2)', padding: '2px 8px', borderRadius: '4px', fontSize: '12px', color: '#a855f7', marginLeft: '5px'}}>TensorFlow</span>
158
+ </div>
159
+ </div>
160
+ <div className="feature-card">
161
+ <h3>ERP Gestão Total</h3>
162
+ <p>Sistema completo de gestão empresarial</p>
163
+ <div style={{marginTop: '10px'}}>
164
+ <span style={{background: 'rgba(239, 68, 68, 0.2)', padding: '2px 8px', borderRadius: '4px', fontSize: '12px', color: '#ef4444'}}>Laravel</span>
165
+ <span style={{background: 'rgba(59, 130, 246, 0.2)', padding: '2px 8px', borderRadius: '4px', fontSize: '12px', color: '#3b82f6', marginLeft: '5px'}}>Vue.js</span>
166
+ </div>
167
+ </div>
168
+ <div className="feature-card">
169
+ <h3>E-commerce ShopFast</h3>
170
+ <p>Plataforma de vendas online</p>
171
+ <div style={{marginTop: '10px'}}>
172
+ <span style={{background: 'rgba(0, 0, 0, 0.2)', padding: '2px 8px', borderRadius: '4px', fontSize: '12px', color: '#ffffff'}}>Next.js</span>
173
+ <span style={{background: 'rgba(139, 92, 246, 0.2)', padding: '2px 8px', borderRadius: '4px', fontSize: '12px', color: '#8b5cf6', marginLeft: '5px'}}>Stripe</span>
174
+ </div>
175
+ </div>
176
+ </div>
177
+ </div>
178
+ );
179
+
180
+ case 'about':
181
+ return (
182
+ <div>
183
+ <h2>👥 Sobre Nós</h2>
184
+ <p>Somos uma equipe apaixonada por tecnologia, criando soluções inovadoras desde 2023.</p>
185
+ <div style={{marginTop: '20px'}}>
186
+ <h3 style={{color: '#06b6d4', marginBottom: '15px'}}>Nossa Equipe</h3>
187
+ <div style={{display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(150px, 1fr))', gap: '15px'}}>
188
+ <div style={{textAlign: 'center'}}>
189
+ <div style={{width: '50px', height: '50px', background: 'rgba(6, 182, 212, 0.2)', borderRadius: '50%', display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto 10px', fontSize: '20px'}}>I</div>
190
+ <div><strong>Isaac Quarenta</strong></div>
191
+ <div style={{fontSize: '14px', color: '#94a3b8'}}>CEO & Developer</div>
192
+ </div>
193
+ <div style={{textAlign: 'center'}}>
194
+ <div style={{width: '50px', height: '50px', background: 'rgba(168, 85, 247, 0.2)', borderRadius: '50%', display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto 10px', fontSize: '20px'}}>J</div>
195
+ <div><strong>José Lopes</strong></div>
196
+ <div style={{fontSize: '14px', color: '#94a3b8'}}>Full Stack Dev</div>
197
+ </div>
198
+ <div style={{textAlign: 'center'}}>
199
+ <div style={{width: '50px', height: '50px', background: 'rgba(236, 72, 153, 0.2)', borderRadius: '50%', display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto 10px', fontSize: '20px'}}>S</div>
200
+ <div><strong>Stefânio Costa</strong></div>
201
+ <div style={{fontSize: '14px', color: '#94a3b8'}}>Designer & Frontend</div>
202
+ </div>
203
+ <div style={{textAlign: 'center'}}>
204
+ <div style={{width: '50px', height: '50px', background: 'rgba(34, 197, 94, 0.2)', borderRadius: '50%', display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto 10px', fontSize: '20px'}}>T</div>
205
+ <div><strong>Tiago Rodrigues</strong></div>
206
+ <div style={{fontSize: '14px', color: '#94a3b8'}}>DevOps & Backend</div>
207
+ </div>
208
+ </div>
209
+ </div>
210
+ </div>
211
+ );
212
+
213
+ case 'contact':
214
+ return (
215
+ <div>
216
+ <h2>📧 Entre em Contato</h2>
217
+ <p>Estamos prontos para transformar sua ideia em realidade!</p>
218
+ <div style={{marginTop: '20px', display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(250px, 1fr))', gap: '20px'}}>
219
+ <div style={{background: 'rgba(6, 182, 212, 0.1)', padding: '20px', borderRadius: '8px', border: '1px solid rgba(6, 182, 212, 0.2)'}}>
220
+ <h3 style={{color: '#06b6d4', marginBottom: '10px'}}>💬 WhatsApp</h3>
221
+ <p style={{fontSize: '14px', color: '#94a3b8'}}>Converse conosco em tempo real</p>
222
+ <a href="https://whatsapp.com/channel/0029VawQLpGHltY2Y87fR83m" target="_blank" style={{color: '#06b6d4', textDecoration: 'none'}}>Entrar no canal →</a>
223
+ </div>
224
+ <div style={{background: 'rgba(168, 85, 247, 0.1)', padding: '20px', borderRadius: '8px', border: '1px solid rgba(168, 85, 247, 0.2)'}}>
225
+ <h3 style={{color: '#a855f7', marginBottom: '10px'}}>📧 Email</h3>
226
+ <p style={{fontSize: '14px', color: '#94a3b8'}}>Envie-nos uma mensagem</p>
227
+ <a href="mailto:softedgecorporation@gmail.com" style={{color: '#a855f7', textDecoration: 'none'}}>Enviar email →</a>
228
+ </div>
229
+ </div>
230
+ </div>
231
+ );
232
+
233
+ default:
234
+ return <div><h2>Seção não encontrada</h2></div>;
235
+ }
236
+ };
237
+
238
+ return (
239
+ <div className={`app ${isVisible ? 'visible' : ''}`} style={{opacity: isVisible ? 1 : 0, transition: 'opacity 0.5s ease'}}>
240
+ <div className="container">
241
+ <div className="header">
242
+ <h1 style={{color: '#06b6d4', marginBottom: '10px'}}>🚀 SoftEdge Corporation</h1>
243
+ <p style={{color: '#94a3b8'}}>React + PHP Integration Demo</p>
244
+ </div>
245
+
246
+ <nav className="nav">
247
+ {sections.map(section => (
248
+ <button
249
+ key={section.id}
250
+ className={`nav-btn ${currentSection === section.id ? 'active' : ''}`}
251
+ onClick={() => setCurrentSection(section.id)}
252
+ >
253
+ <span style={{marginRight: '5px'}}>{section.icon}</span>
254
+ {section.label}
255
+ </button>
256
+ ))}
257
+ </nav>
258
+
259
+ <div className="content">
260
+ {renderContent()}
261
+ </div>
262
+
263
+ <div style={{textAlign: 'center', marginTop: '30px', paddingTop: '20px', borderTop: '1px solid rgba(148, 163, 184, 0.1)'}}>
264
+ <p style={{color: '#94a3b8', fontSize: '14px'}}>
265
+ React + PHP = 💪 Potência Total • SoftEdge Corporation 2025
266
+ </p>
267
+ </div>
268
+ </div>
269
+ </div>
270
+ );
271
+ }
272
+
273
+ const root = ReactDOM.createRoot(document.getElementById('root'));
274
+ root.render(<App />);
275
+ </script>
276
+ </body>
277
+ </html>