Upload 3 files

src/react/App.css

@@ -0,0 +1,536 @@
+/* SoftEdge Corporation - React Components Styles */
+
+.react-app {
+  opacity: 0;
+  transform: translateY(20px);
+  transition: all 0.6s ease;
+}
+
+.react-app.visible {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.react-container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 2rem;
+  background: rgba(30, 41, 59, 0.8);
+  backdrop-filter: blur(20px);
+  border-radius: 1rem;
+  border: 1px solid rgba(148, 163, 184, 0.1);
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+}
+
+.react-header {
+  text-align: center;
+  margin-bottom: 2rem;
+  padding-bottom: 1rem;
+  border-bottom: 1px solid rgba(148, 163, 184, 0.2);
+}
+
+.react-header h3 {
+  color: #06b6d4;
+  font-size: 1.5rem;
+  font-weight: 600;
+  margin-bottom: 0.5rem;
+}
+
+.react-header p {
+  color: #94a3b8;
+  font-size: 0.9rem;
+}
+
+/* Navigation */
+.react-nav {
+  display: flex;
+  gap: 0.5rem;
+  margin-bottom: 2rem;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+
+.nav-item {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.75rem 1rem;
+  background: rgba(51, 65, 85, 0.5);
+  border: 1px solid rgba(148, 163, 184, 0.2);
+  border-radius: 0.5rem;
+  color: #cbd5e1;
+  font-size: 0.9rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.nav-item:hover {
+  background: rgba(6, 182, 212, 0.1);
+  border-color: rgba(6, 182, 212, 0.3);
+  color: #06b6d4;
+  transform: translateY(-2px);
+}
+
+.nav-item.active {
+  background: linear-gradient(135deg, rgba(6, 182, 212, 0.2), rgba(59, 130, 246, 0.2));
+  border-color: rgba(6, 182, 212, 0.4);
+  color: #06b6d4;
+  box-shadow: 0 0 20px rgba(6, 182, 212, 0.2);
+}
+
+.nav-icon {
+  font-size: 1rem;
+}
+
+/* Content */
+.content-container {
+  min-height: 400px;
+}
+
+.content-section {
+  text-align: center;
+}
+
+.content-section h2 {
+  color: #f1f5f9;
+  font-size: 2rem;
+  font-weight: 700;
+  margin-bottom: 1rem;
+  background: linear-gradient(135deg, #06b6d4, #3b82f6);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.content-section > p {
+  color: #94a3b8;
+  font-size: 1.1rem;
+  margin-bottom: 2rem;
+  max-width: 600px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+/* Feature Grid */
+.feature-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: 1.5rem;
+  margin-top: 2rem;
+}
+
+.feature-card {
+  background: rgba(51, 65, 85, 0.5);
+  border: 1px solid rgba(148, 163, 184, 0.2);
+  border-radius: 0.75rem;
+  padding: 1.5rem;
+  transition: all 0.3s ease;
+}
+
+.feature-card:hover {
+  transform: translateY(-5px);
+  border-color: rgba(6, 182, 212, 0.3);
+  box-shadow: 0 10px 25px rgba(6, 182, 212, 0.1);
+}
+
+.feature-icon {
+  font-size: 2rem;
+  margin-bottom: 1rem;
+}
+
+.feature-card h3 {
+  color: #f1f5f9;
+  font-size: 1.25rem;
+  font-weight: 600;
+  margin-bottom: 0.5rem;
+}
+
+.feature-card p {
+  color: #94a3b8;
+  font-size: 0.9rem;
+  line-height: 1.5;
+}
+
+/* Services Grid */
+.services-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: 1.5rem;
+  margin-top: 2rem;
+}
+
+.service-card {
+  background: rgba(51, 65, 85, 0.5);
+  border: 1px solid rgba(148, 163, 184, 0.2);
+  border-radius: 0.75rem;
+  padding: 1.5rem;
+  transition: all 0.3s ease;
+  text-align: left;
+}
+
+.service-card:hover {
+  transform: translateY(-5px);
+  border-color: rgba(6, 182, 212, 0.3);
+  box-shadow: 0 10px 25px rgba(6, 182, 212, 0.1);
+}
+
+.service-icon {
+  font-size: 2.5rem;
+  margin-bottom: 1rem;
+}
+
+.service-card h3 {
+  color: #f1f5f9;
+  font-size: 1.25rem;
+  font-weight: 600;
+  margin-bottom: 0.5rem;
+}
+
+.service-card p {
+  color: #94a3b8;
+  font-size: 0.9rem;
+  line-height: 1.5;
+  margin-bottom: 1rem;
+}
+
+.tech-stack {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+.tech-tag {
+  background: rgba(6, 182, 212, 0.1);
+  color: #06b6d4;
+  padding: 0.25rem 0.75rem;
+  border-radius: 9999px;
+  font-size: 0.75rem;
+  font-weight: 500;
+  border: 1px solid rgba(6, 182, 212, 0.2);
+}
+
+/* Projects Grid */
+.projects-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
+  gap: 1.5rem;
+  margin-top: 2rem;
+}
+
+.project-card {
+  background: rgba(51, 65, 85, 0.5);
+  border: 1px solid rgba(148, 163, 184, 0.2);
+  border-radius: 0.75rem;
+  padding: 1.5rem;
+  transition: all 0.3s ease;
+  text-align: left;
+}
+
+.project-card:hover {
+  transform: translateY(-5px);
+  border-color: rgba(147, 51, 234, 0.3);
+  box-shadow: 0 10px 25px rgba(147, 51, 234, 0.1);
+}
+
+.project-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-bottom: 1rem;
+}
+
+.project-header h3 {
+  color: #f1f5f9;
+  font-size: 1.25rem;
+  font-weight: 600;
+  flex: 1;
+}
+
+.status {
+  padding: 0.25rem 0.75rem;
+  border-radius: 9999px;
+  font-size: 0.75rem;
+  font-weight: 500;
+  text-transform: uppercase;
+}
+
+.status.concluído {
+  background: rgba(34, 197, 94, 0.1);
+  color: #22c55e;
+  border: 1px solid rgba(34, 197, 94, 0.2);
+}
+
+.status.em-andamento {
+  background: rgba(251, 191, 36, 0.1);
+  color: #fbbf24;
+  border: 1px solid rgba(251, 191, 36, 0.2);
+}
+
+.project-card p {
+  color: #94a3b8;
+  font-size: 0.9rem;
+  line-height: 1.5;
+  margin-bottom: 1rem;
+}
+
+/* About Section */
+.about-content {
+  max-width: 800px;
+  margin: 0 auto;
+}
+
+.team-section {
+  margin-bottom: 2rem;
+}
+
+.team-section h3 {
+  color: #f1f5f9;
+  font-size: 1.5rem;
+  font-weight: 600;
+  margin-bottom: 1.5rem;
+  text-align: center;
+}
+
+.team-members {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 1rem;
+}
+
+.team-member {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  background: rgba(51, 65, 85, 0.5);
+  border: 1px solid rgba(148, 163, 184, 0.2);
+  border-radius: 0.5rem;
+  padding: 1rem;
+  transition: all 0.3s ease;
+}
+
+.team-member:hover {
+  border-color: rgba(6, 182, 212, 0.3);
+  transform: translateY(-2px);
+}
+
+.member-avatar {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  background: linear-gradient(135deg, #06b6d4, #3b82f6);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  font-weight: 600;
+  font-size: 1.1rem;
+}
+
+.member-info h4 {
+  color: #f1f5f9;
+  font-size: 1rem;
+  font-weight: 600;
+  margin-bottom: 0.25rem;
+}
+
+.member-info p {
+  color: #94a3b8;
+  font-size: 0.8rem;
+}
+
+.mission-section h3 {
+  color: #f1f5f9;
+  font-size: 1.5rem;
+  font-weight: 600;
+  margin-bottom: 1rem;
+  text-align: center;
+}
+
+.mission-section p {
+  color: #94a3b8;
+  font-size: 1rem;
+  line-height: 1.6;
+  text-align: center;
+}
+
+/* Contact Form */
+.contact-form {
+  max-width: 500px;
+  margin: 0 auto;
+  background: rgba(51, 65, 85, 0.5);
+  border: 1px solid rgba(148, 163, 184, 0.2);
+  border-radius: 0.75rem;
+  padding: 2rem;
+}
+
+.form-group {
+  margin-bottom: 1.5rem;
+  text-align: left;
+}
+
+.form-group label {
+  display: block;
+  color: #f1f5f9;
+  font-size: 0.9rem;
+  font-weight: 500;
+  margin-bottom: 0.5rem;
+}
+
+.form-group input,
+.form-group textarea {
+  width: 100%;
+  padding: 0.75rem;
+  background: rgba(30, 41, 59, 0.5);
+  border: 1px solid rgba(148, 163, 184, 0.2);
+  border-radius: 0.5rem;
+  color: #f1f5f9;
+  font-size: 0.9rem;
+  transition: all 0.3s ease;
+}
+
+.form-group input:focus,
+.form-group textarea:focus {
+  outline: none;
+  border-color: rgba(6, 182, 212, 0.4);
+  box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.1);
+}
+
+.submit-btn {
+  width: 100%;
+  padding: 0.75rem;
+  background: linear-gradient(135deg, #06b6d4, #3b82f6);
+  color: white;
+  border: none;
+  border-radius: 0.5rem;
+  font-size: 1rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.submit-btn:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 5px 15px rgba(6, 182, 212, 0.3);
+}
+
+.success-message {
+  text-align: center;
+  padding: 2rem;
+  background: rgba(34, 197, 94, 0.1);
+  border: 1px solid rgba(34, 197, 94, 0.2);
+  border-radius: 0.75rem;
+}
+
+.success-message h3 {
+  color: #22c55e;
+  font-size: 1.25rem;
+  margin-bottom: 0.5rem;
+}
+
+.success-message p {
+  color: #94a3b8;
+  margin-bottom: 1rem;
+}
+
+.success-message button {
+  padding: 0.5rem 1rem;
+  background: rgba(34, 197, 94, 0.2);
+  color: #22c55e;
+  border: 1px solid rgba(34, 197, 94, 0.3);
+  border-radius: 0.5rem;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.success-message button:hover {
+  background: rgba(34, 197, 94, 0.3);
+}
+
+/* Footer */
+.react-footer {
+  text-align: center;
+  margin-top: 2rem;
+  padding-top: 1rem;
+  border-top: 1px solid rgba(148, 163, 184, 0.2);
+}
+
+.react-footer p {
+  color: #94a3b8;
+  font-size: 0.9rem;
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+  .react-container {
+    padding: 1rem;
+  }
+
+  .react-nav {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .nav-item {
+    justify-content: center;
+  }
+
+  .feature-grid,
+  .services-grid,
+  .projects-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .team-members {
+    grid-template-columns: 1fr;
+  }
+
+  .content-section h2 {
+    font-size: 1.5rem;
+  }
+}
+
+/* Animations */
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(30px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.content-section {
+  animation: fadeInUp 0.6s ease-out;
+}
+
+.react-nav {
+  animation: fadeInUp 0.6s ease-out 0.2s both;
+}
+
+/* Loading states */
+.loading {
+  opacity: 0.7;
+  pointer-events: none;
+}
+
+.loading::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 20px;
+  height: 20px;
+  margin: -10px 0 0 -10px;
+  border: 2px solid rgba(6, 182, 212, 0.3);
+  border-top: 2px solid #06b6d4;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}

src/react/App.js

@@ -0,0 +1,369 @@
+import React, { useState, useEffect } from 'react';
+import './App.css';
+
+// Componente principal da aplicação React
+function App() {
+  const [currentSection, setCurrentSection] = useState('home');
+  const [isVisible, setIsVisible] = useState(false);
+
+  useEffect(() => {
+    // Animação de entrada
+    setTimeout(() => setIsVisible(true), 100);
+
+    // Detectar seção atual baseada na URL
+    const path = window.location.pathname;
+    if (path.includes('servicos')) setCurrentSection('services');
+    else if (path.includes('projetos')) setCurrentSection('projects');
+    else if (path.includes('sobre')) setCurrentSection('about');
+    else if (path.includes('contato')) setCurrentSection('contact');
+    else setCurrentSection('home');
+  }, []);
+
+  return (
+    <div className={`react-app ${isVisible ? 'visible' : ''}`}>
+      <div className="react-container">
+        <div className="react-header">
+          <h3>🚀 SoftEdge Corporation - React Integration</h3>
+          <p>Componentes React integrados com PHP</p>
+        </div>
+
+        <div className="react-content">
+          <Navigation currentSection={currentSection} onNavigate={setCurrentSection} />
+          <ContentSection section={currentSection} />
+        </div>
+
+        <div className="react-footer">
+          <p>React + PHP = 💪 Potência Total</p>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// Componente de navegação
+function Navigation({ currentSection, onNavigate }) {
+  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: '📧' }
+  ];
+
+  return (
+    <nav className="react-nav">
+      {sections.map(section => (
+        <button
+          key={section.id}
+          className={`nav-item ${currentSection === section.id ? 'active' : ''}`}
+          onClick={() => onNavigate(section.id)}
+        >
+          <span className="nav-icon">{section.icon}</span>
+          <span className="nav-label">{section.label}</span>
+        </button>
+      ))}
+    </nav>
+  );
+}
+
+// Componente de conteúdo dinâmico
+function ContentSection({ section }) {
+  const [stats, setStats] = useState(null);
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    if (section === 'stats') {
+      fetchStats();
+    }
+  }, [section]);
+
+  const fetchStats = async () => {
+    setLoading(true);
+    try {
+      // Simular chamada para API PHP
+      const response = await fetch('/api.php?r=stats');
+      const data = await response.json();
+      setStats(data);
+    } catch (error) {
+      console.error('Erro ao buscar estatísticas:', error);
+      // Dados mock para demonstração
+      setStats({
+        projects: 70,
+        satisfaction: 4.9,
+        support: '24/7',
+        codeQuality: '100%'
+      });
+    }
+    setLoading(false);
+  };
+
+  const renderContent = () => {
+    switch (section) {
+      case 'home':
+        return (
+          <div className="content-section">
+            <h2>Bem-vindo à SoftEdge Corporation</h2>
+            <p>Transformamos ideias em soluções digitais de excelência.</p>
+            <div className="feature-grid">
+              <div className="feature-card">
+                <div className="feature-icon">🚀</div>
+                <h3>Desenvolvimento Full Stack</h3>
+                <p>Tecnologias modernas para aplicações completas</p>
+              </div>
+              <div className="feature-card">
+                <div className="feature-icon">🤖</div>
+                <h3>IA & Automação</h3>
+                <p>Inteligência artificial para otimizar processos</p>
+              </div>
+              <div className="feature-card">
+                <div className="feature-icon">⚡</div>
+                <h3>Performance</h3>
+                <p>Otimização e consultoria especializada</p>
+              </div>
+            </div>
+          </div>
+        );
+
+      case 'services':
+        return (
+          <div className="content-section">
+            <h2>Nossos Serviços</h2>
+            <div className="services-grid">
+              <ServiceCard
+                icon="💻"
+                title="Desenvolvimento Web"
+                description="Aplicações web modernas com React, Next.js e PHP"
+                technologies={['React', 'Next.js', 'PHP', 'MySQL']}
+              />
+              <ServiceCard
+                icon="📱"
+                title="Aplicativos Mobile"
+                description="Apps nativos e multiplataforma"
+                technologies={['Flutter', 'React Native', 'Firebase']}
+              />
+              <ServiceCard
+                icon="🧠"
+                title="Inteligência Artificial"
+                description="Soluções de IA personalizadas"
+                technologies={['Python', 'TensorFlow', 'OpenAI']}
+              />
+              <ServiceCard
+                icon="☁️"
+                title="Cloud & DevOps"
+                description="Deploy e infraestrutura escalável"
+                technologies={['Docker', 'AWS', 'Railway', 'Render']}
+              />
+            </div>
+          </div>
+        );
+
+      case 'projects':
+        return (
+          <div className="content-section">
+            <h2>Projetos em Destaque</h2>
+            <div className="projects-grid">
+              <ProjectCard
+                title="AKIRA IA"
+                description="Assistente virtual angolano com processamento de linguagem natural"
+                status="Concluído"
+                technologies={['Python', 'TensorFlow', 'FastAPI']}
+              />
+              <ProjectCard
+                title="ERP Gestão Total"
+                description="Sistema completo de gestão empresarial"
+                status="Concluído"
+                technologies={['Laravel', 'Vue.js', 'MySQL']}
+              />
+              <ProjectCard
+                title="E-commerce ShopFast"
+                description="Plataforma de vendas online de alta performance"
+                status="Concluído"
+                technologies={['Next.js', 'Stripe', 'Prisma']}
+              />
+            </div>
+          </div>
+        );
+
+      case 'about':
+        return (
+          <div className="content-section">
+            <h2>Sobre a SoftEdge</h2>
+            <div className="about-content">
+              <div className="team-section">
+                <h3>Nossa Equipe</h3>
+                <div className="team-members">
+                  <TeamMember name="Isaac Quarenta" role="CEO & Fundador" />
+                  <TeamMember name="José Lopes" role="CTO" />
+                  <TeamMember name="Stefânio Costa" role="Desenvolvedor Senior" />
+                  <TeamMember name="Tiago Rodrigues" role="Designer & UX" />
+                </div>
+              </div>
+              <div className="mission-section">
+                <h3>Nossa Missão</h3>
+                <p>Transformar ideias em soluções tecnológicas que fazem a diferença no mundo digital.</p>
+              </div>
+            </div>
+          </div>
+        );
+
+      case 'contact':
+        return (
+          <div className="content-section">
+            <h2>Entre em Contato</h2>
+            <ContactForm />
+          </div>
+        );
+
+      default:
+        return (
+          <div className="content-section">
+            <h2>Seção não encontrada</h2>
+            <p>Selecione uma seção no menu de navegação.</p>
+          </div>
+        );
+    }
+  };
+
+  return (
+    <div className="content-container">
+      {renderContent()}
+    </div>
+  );
+}
+
+// Componentes auxiliares
+function ServiceCard({ icon, title, description, technologies }) {
+  return (
+    <div className="service-card">
+      <div className="service-icon">{icon}</div>
+      <h3>{title}</h3>
+      <p>{description}</p>
+      <div className="tech-stack">
+        {technologies.map(tech => (
+          <span key={tech} className="tech-tag">{tech}</span>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+function ProjectCard({ title, description, status, technologies }) {
+  return (
+    <div className="project-card">
+      <div className="project-header">
+        <h3>{title}</h3>
+        <span className={`status ${status.toLowerCase()}`}>{status}</span>
+      </div>
+      <p>{description}</p>
+      <div className="tech-stack">
+        {technologies.map(tech => (
+          <span key={tech} className="tech-tag">{tech}</span>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+function TeamMember({ name, role }) {
+  return (
+    <div className="team-member">
+      <div className="member-avatar">
+        <span>{name.charAt(0)}</span>
+      </div>
+      <div className="member-info">
+        <h4>{name}</h4>
+        <p>{role}</p>
+      </div>
+    </div>
+  );
+}
+
+function ContactForm() {
+  const [formData, setFormData] = useState({
+    name: '',
+    email: '',
+    message: ''
+  });
+  const [submitted, setSubmitted] = useState(false);
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    try {
+      const response = await fetch('/api.php?r=contact', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(formData)
+      });
+
+      if (response.ok) {
+        setSubmitted(true);
+        setFormData({ name: '', email: '', message: '' });
+      }
+    } catch (error) {
+      console.error('Erro ao enviar formulário:', error);
+    }
+  };
+
+  const handleChange = (e) => {
+    setFormData({
+      ...formData,
+      [e.target.name]: e.target.value
+    });
+  };
+
+  if (submitted) {
+    return (
+      <div className="success-message">
+        <h3>✅ Mensagem enviada com sucesso!</h3>
+        <p>Entraremos em contato em breve.</p>
+        <button onClick={() => setSubmitted(false)}>Enviar outra mensagem</button>
+      </div>
+    );
+  }
+
+  return (
+    <form className="contact-form" onSubmit={handleSubmit}>
+      <div className="form-group">
+        <label htmlFor="name">Nome</label>
+        <input
+          type="text"
+          id="name"
+          name="name"
+          value={formData.name}
+          onChange={handleChange}
+          required
+        />
+      </div>
+
+      <div className="form-group">
+        <label htmlFor="email">Email</label>
+        <input
+          type="email"
+          id="email"
+          name="email"
+          value={formData.email}
+          onChange={handleChange}
+          required
+        />
+      </div>
+
+      <div className="form-group">
+        <label htmlFor="message">Mensagem</label>
+        <textarea
+          id="message"
+          name="message"
+          value={formData.message}
+          onChange={handleChange}
+          rows="5"
+          required
+        />
+      </div>
+
+      <button type="submit" className="submit-btn">Enviar Mensagem</button>
+    </form>
+  );
+}
+
+export default App;

src/react/index.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+import './App.css';
+
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);