|
|
<!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>
|
|
|
|
