| <!DOCTYPE html>
|
| <html lang="pt-BR">
|
| <head>
|
| <meta charset="UTF-8">
|
| <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| <title>SoftEdge Corporation - React Fallback</title>
|
| <script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
|
| <script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
|
| <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
|
| <style>
|
| body {
|
| font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
| margin: 0;
|
| padding: 20px;
|
| background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%);
|
| color: white;
|
| min-height: 100vh;
|
| }
|
| .container {
|
| max-width: 800px;
|
| margin: 0 auto;
|
| background: rgba(30, 41, 59, 0.8);
|
| border-radius: 12px;
|
| padding: 30px;
|
| backdrop-filter: blur(10px);
|
| border: 1px solid rgba(148, 163, 184, 0.1);
|
| }
|
| .header {
|
| text-align: center;
|
| margin-bottom: 30px;
|
| }
|
| .nav {
|
| display: flex;
|
| gap: 10px;
|
| margin-bottom: 20px;
|
| flex-wrap: wrap;
|
| }
|
| .nav-btn {
|
| padding: 8px 16px;
|
| background: rgba(6, 182, 212, 0.1);
|
| border: 1px solid rgba(6, 182, 212, 0.3);
|
| border-radius: 6px;
|
| color: #06b6d4;
|
| cursor: pointer;
|
| transition: all 0.3s ease;
|
| }
|
| .nav-btn.active {
|
| background: #06b6d4;
|
| color: white;
|
| }
|
| .content {
|
| background: rgba(15, 23, 42, 0.5);
|
| border-radius: 8px;
|
| padding: 20px;
|
| min-height: 200px;
|
| }
|
| .feature-grid {
|
| display: grid;
|
| grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
| gap: 20px;
|
| margin-top: 20px;
|
| }
|
| .feature-card {
|
| background: rgba(30, 41, 59, 0.6);
|
| padding: 20px;
|
| border-radius: 8px;
|
| border: 1px solid rgba(148, 163, 184, 0.1);
|
| text-align: center;
|
| }
|
| .feature-card h3 {
|
| color: #06b6d4;
|
| margin-bottom: 10px;
|
| }
|
| </style>
|
| </head>
|
| <body>
|
| <div id="root"></div>
|
|
|
| <script type="text/babel">
|
| const { useState, useEffect } = React;
|
|
|
| function App() {
|
| const [currentSection, setCurrentSection] = useState('home');
|
| const [isVisible, setIsVisible] = useState(false);
|
|
|
| useEffect(() => {
|
| setTimeout(() => setIsVisible(true), 100);
|
| }, []);
|
|
|
| const sections = [
|
| { id: 'home', label: 'Início', icon: '🏠' },
|
| { id: 'services', label: 'Serviços', icon: '⚙️' },
|
| { id: 'projects', label: 'Projetos', icon: '📁' },
|
| { id: 'about', label: 'Sobre', icon: '👥' },
|
| { id: 'contact', label: 'Contato', icon: '📧' }
|
| ];
|
|
|
| const renderContent = () => {
|
| switch (currentSection) {
|
| case 'home':
|
| return (
|
| <div>
|
| <h2>🚀 Bem-vindo à SoftEdge Corporation</h2>
|
| <p>Transformamos ideias em soluções digitais inovadoras.</p>
|
| <div className="feature-grid">
|
| <div className="feature-card">
|
| <h3>⚡ Performance</h3>
|
| <p>Soluções otimizadas para máxima velocidade</p>
|
| </div>
|
| <div className="feature-card">
|
| <h3>🔒 Segurança</h3>
|
| <p>Proteção avançada e melhores práticas</p>
|
| </div>
|
| <div className="feature-card">
|
| <h3>📱 Responsivo</h3>
|
| <p>Experiência perfeita em todos os dispositivos</p>
|
| </div>
|
| </div>
|
| </div>
|
| );
|
|
|
| case 'services':
|
| return (
|
| <div>
|
| <h2>💼 Nossos Serviços</h2>
|
| <div className="feature-grid">
|
| <div className="feature-card">
|
| <h3>💻 Desenvolvimento Web</h3>
|
| <p>Sites, sistemas e aplicações web modernas</p>
|
| </div>
|
| <div className="feature-card">
|
| <h3>📱 Apps Mobile</h3>
|
| <p>Aplicativos nativos e híbridos</p>
|
| </div>
|
| <div className="feature-card">
|
| <h3>🤖 IA & Automação</h3>
|
| <p>Inteligência artificial e processos automatizados</p>
|
| </div>
|
| <div className="feature-card">
|
| <h3>☁️ Cloud Solutions</h3>
|
| <p>Migração e otimização para nuvem</p>
|
| </div>
|
| </div>
|
| </div>
|
| );
|
|
|
| case 'projects':
|
| return (
|
| <div>
|
| <h2>📂 Nossos Projetos</h2>
|
| <div className="feature-grid">
|
| <div className="feature-card">
|
| <h3>AKIRA IA</h3>
|
| <p>Assistente virtual inteligente</p>
|
| <div style={{marginTop: '10px'}}>
|
| <span style={{background: 'rgba(6, 182, 212, 0.2)', padding: '2px 8px', borderRadius: '4px', fontSize: '12px', color: '#06b6d4'}}>Python</span>
|
| <span style={{background: 'rgba(168, 85, 247, 0.2)', padding: '2px 8px', borderRadius: '4px', fontSize: '12px', color: '#a855f7', marginLeft: '5px'}}>TensorFlow</span>
|
| </div>
|
| </div>
|
| <div className="feature-card">
|
| <h3>ERP Gestão Total</h3>
|
| <p>Sistema completo de gestão empresarial</p>
|
| <div style={{marginTop: '10px'}}>
|
| <span style={{background: 'rgba(239, 68, 68, 0.2)', padding: '2px 8px', borderRadius: '4px', fontSize: '12px', color: '#ef4444'}}>Laravel</span>
|
| <span style={{background: 'rgba(59, 130, 246, 0.2)', padding: '2px 8px', borderRadius: '4px', fontSize: '12px', color: '#3b82f6', marginLeft: '5px'}}>Vue.js</span>
|
| </div>
|
| </div>
|
| <div className="feature-card">
|
| <h3>E-commerce ShopFast</h3>
|
| <p>Plataforma de vendas online</p>
|
| <div style={{marginTop: '10px'}}>
|
| <span style={{background: 'rgba(0, 0, 0, 0.2)', padding: '2px 8px', borderRadius: '4px', fontSize: '12px', color: '#ffffff'}}>Next.js</span>
|
| <span style={{background: 'rgba(139, 92, 246, 0.2)', padding: '2px 8px', borderRadius: '4px', fontSize: '12px', color: '#8b5cf6', marginLeft: '5px'}}>Stripe</span>
|
| </div>
|
| </div>
|
| </div>
|
| </div>
|
| );
|
|
|
| case 'about':
|
| return (
|
| <div>
|
| <h2>👥 Sobre Nós</h2>
|
| <p>Somos uma equipe apaixonada por tecnologia, criando soluções inovadoras desde 2023.</p>
|
| <div style={{marginTop: '20px'}}>
|
| <h3 style={{color: '#06b6d4', marginBottom: '15px'}}>Nossa Equipe</h3>
|
| <div style={{display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(150px, 1fr))', gap: '15px'}}>
|
| <div style={{textAlign: 'center'}}>
|
| <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>
|
| <div><strong>Isaac Quarenta</strong></div>
|
| <div style={{fontSize: '14px', color: '#94a3b8'}}>CEO & Developer</div>
|
| </div>
|
| <div style={{textAlign: 'center'}}>
|
| <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>
|
| <div><strong>José Lopes</strong></div>
|
| <div style={{fontSize: '14px', color: '#94a3b8'}}>Full Stack Dev</div>
|
| </div>
|
| <div style={{textAlign: 'center'}}>
|
| <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>
|
| <div><strong>Stefânio Costa</strong></div>
|
| <div style={{fontSize: '14px', color: '#94a3b8'}}>Designer & Frontend</div>
|
| </div>
|
| <div style={{textAlign: 'center'}}>
|
| <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>
|
| <div><strong>Tiago Rodrigues</strong></div>
|
| <div style={{fontSize: '14px', color: '#94a3b8'}}>DevOps & Backend</div>
|
| </div>
|
| </div>
|
| </div>
|
| </div>
|
| );
|
|
|
| case 'contact':
|
| return (
|
| <div>
|
| <h2>📧 Entre em Contato</h2>
|
| <p>Estamos prontos para transformar sua ideia em realidade!</p>
|
| <div style={{marginTop: '20px', display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(250px, 1fr))', gap: '20px'}}>
|
| <div style={{background: 'rgba(6, 182, 212, 0.1)', padding: '20px', borderRadius: '8px', border: '1px solid rgba(6, 182, 212, 0.2)'}}>
|
| <h3 style={{color: '#06b6d4', marginBottom: '10px'}}>💬 WhatsApp</h3>
|
| <p style={{fontSize: '14px', color: '#94a3b8'}}>Converse conosco em tempo real</p>
|
| <a href="https://whatsapp.com/channel/0029VawQLpGHltY2Y87fR83m" target="_blank" style={{color: '#06b6d4', textDecoration: 'none'}}>Entrar no canal →</a>
|
| </div>
|
| <div style={{background: 'rgba(168, 85, 247, 0.1)', padding: '20px', borderRadius: '8px', border: '1px solid rgba(168, 85, 247, 0.2)'}}>
|
| <h3 style={{color: '#a855f7', marginBottom: '10px'}}>📧 Email</h3>
|
| <p style={{fontSize: '14px', color: '#94a3b8'}}>Envie-nos uma mensagem</p>
|
| <a href="mailto:softedgecorporation@gmail.com" style={{color: '#a855f7', textDecoration: 'none'}}>Enviar email →</a>
|
| </div>
|
| </div>
|
| </div>
|
| );
|
|
|
| default:
|
| return <div><h2>Seção não encontrada</h2></div>;
|
| }
|
| };
|
|
|
| return (
|
| <div className={`app ${isVisible ? 'visible' : ''}`} style={{opacity: isVisible ? 1 : 0, transition: 'opacity 0.5s ease'}}>
|
| <div className="container">
|
| <div className="header">
|
| <h1 style={{color: '#06b6d4', marginBottom: '10px'}}>🚀 SoftEdge Corporation</h1>
|
| <p style={{color: '#94a3b8'}}>React + PHP Integration Demo</p>
|
| </div>
|
|
|
| <nav className="nav">
|
| {sections.map(section => (
|
| <button
|
| key={section.id}
|
| className={`nav-btn ${currentSection === section.id ? 'active' : ''}`}
|
| onClick={() => setCurrentSection(section.id)}
|
| >
|
| <span style={{marginRight: '5px'}}>{section.icon}</span>
|
| {section.label}
|
| </button>
|
| ))}
|
| </nav>
|
|
|
| <div className="content">
|
| {renderContent()}
|
| </div>
|
|
|
| <div style={{textAlign: 'center', marginTop: '30px', paddingTop: '20px', borderTop: '1px solid rgba(148, 163, 184, 0.1)'}}>
|
| <p style={{color: '#94a3b8', fontSize: '14px'}}>
|
| React + PHP = 💪 Potência Total • SoftEdge Corporation 2025
|
| </p>
|
| </div>
|
| </div>
|
| </div>
|
| );
|
| }
|
|
|
| const root = ReactDOM.createRoot(document.getElementById('root'));
|
| root.render(<App />);
|
| </script>
|
| </body>
|
| </html>
|
|
|
