Upload 37 files

.babelrc

@@ -0,0 +1,6 @@
+{
+  "presets": [
+    "@babel/preset-env",
+    "@babel/preset-react"
+  ]
+}

.dockerignore

@@ -0,0 +1,60 @@
+# Git
+.git
+.gitignore
+
+# Documentation
+README.md
+*.md
+
+# Development files
+.env
+.env.example
+.vscode/
+.idea/
+
+# Logs
+logs/
+*.log
+
+# OS generated files
+.DS_Store
+.DS_Store?
+._*
+.Spotlight-V100
+.Trashes
+ehthumbs.db
+Thumbs.db
+
+# Node modules (if any)
+node_modules/
+
+# Temporary files
+tmp/
+temp/
+*.tmp
+
+# Backup files
+*.bak
+*.backup
+*~
+
+# IDE files
+.vscode/
+.idea/
+*.swp
+*.swo
+
+# Composer cache
+vendor/
+
+# Docker files
+Dockerfile*
+docker-compose*.yml
+.dockerignore
+
+# Railway/Render configs
+railway.json
+render.yaml
+
+# Keep-alive script (not needed in main container)
+keep-alive.js

.env.example

@@ -0,0 +1,102 @@
+# SoftEdge Corporation - Environment Configuration
+# Copy this file to .env and configure your settings
+
+# ===========================================
+# APPLICATION SETTINGS
+# ===========================================
+APP_NAME=SoftEdge Corporation
+APP_ENV=production
+APP_KEY=your_app_key_here
+APP_URL=https://softedge-corporation.up.railway.app
+
+# ===========================================
+# DATABASE CONFIGURATION
+# ===========================================
+DB_CONNECTION=mysql
+DB_HOST=localhost
+DB_PORT=3306
+DB_NAME=softedge_db
+DB_USER=root
+DB_PASS=
+
+# ===========================================
+# SECURITY SETTINGS
+# ===========================================
+JWT_SECRET=your_jwt_secret_here
+CSRF_SECRET=your_csrf_secret_here
+
+# ===========================================
+# EMAIL CONFIGURATION
+# ===========================================
+MAIL_MAILER=smtp
+MAIL_HOST=smtp.gmail.com
+MAIL_PORT=587
+MAIL_USERNAME=your_email@gmail.com
+MAIL_PASSWORD=your_app_password
+MAIL_ENCRYPTION=tls
+MAIL_FROM_ADDRESS=your_email@gmail.com
+MAIL_FROM_NAME="SoftEdge Corporation"
+
+# ===========================================
+# SOCIAL LOGIN (Optional)
+# ===========================================
+GOOGLE_CLIENT_ID=your_google_client_id
+GOOGLE_CLIENT_SECRET=your_google_client_secret
+
+GITHUB_CLIENT_ID=your_github_client_id
+GITHUB_CLIENT_SECRET=your_github_client_secret
+
+# ===========================================
+# ADMIN CONFIGURATION
+# ===========================================
+ADMIN_EMAIL=admin@softedge.com
+ADMIN_PASSWORD=Admin@123456
+ADMIN_NAME=Isaac Quarenta
+
+# ===========================================
+# RATE LIMITING
+# ===========================================
+RATE_LIMIT_LOGIN=5
+RATE_LIMIT_CONTACT=3
+LOCKOUT_DURATION=900
+
+# ===========================================
+# ANALYTICS & LOGGING
+# ===========================================
+ANALYTICS_RETENTION_DAYS=365
+LOG_LEVEL=info
+
+# ===========================================
+# TIMEZONE & LOCALIZATION
+# ===========================================
+TIMEZONE=Africa/Luanda
+LANGUAGE=pt-BR
+
+# ===========================================
+# FILE UPLOAD SETTINGS
+# ===========================================
+MAX_FILE_SIZE=10240
+ALLOWED_FILE_TYPES=jpg,jpeg,png,pdf,doc,docx
+
+# ===========================================
+# CACHE & PERFORMANCE
+# ===========================================
+CACHE_DRIVER=file
+SESSION_DRIVER=file
+SESSION_LIFETIME=86400
+
+# ===========================================
+# EXTERNAL SERVICES
+# ===========================================
+# Google Analytics
+GA_TRACKING_ID=GA_MEASUREMENT_ID
+
+# reCAPTCHA
+RECAPTCHA_SITE_KEY=your_recaptcha_site_key
+RECAPTCHA_SECRET_KEY=your_recaptcha_secret_key
+
+# ===========================================
+# DEVELOPMENT SETTINGS
+# ===========================================
+DEBUG=false
+LOG_QUERIES=false

.gitignore

@@ -0,0 +1,92 @@
+# Dependencies
+/vendor/
+/node_modules/
+
+# Environment variables
+.env
+.env.local
+.env.production
+.env.staging
+
+# Logs
+logs/
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Coverage directory used by tools like istanbul
+coverage/
+.nyc_output
+
+# Dependency directories
+jspm_packages/
+
+# Optional npm cache directory
+.npm
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+
+# IDE files
+.vscode/
+.idea/
+*.swp
+*.swo
+*~
+
+# OS generated files
+.DS_Store
+.DS_Store?
+._*
+.Spotlight-V100
+.Trashes
+ehthumbs.db
+Thumbs.db
+
+# Temporary files
+tmp/
+temp/
+*.tmp
+*.bak
+*.backup
+
+# Composer
+composer.lock
+/vendor/
+
+# PHP
+.phpunit.result.cache
+
+# Docker
+.dockerignore
+
+# Railway/Render
+railway.json
+render.yaml
+
+# Keep-alive script
+keep-alive.js
+
+# React build output
+dist/
+build/
+
+# Documentation
+README.md
+*.md

.htaccess

@@ -0,0 +1,120 @@
+# SoftEdge Corporation - Professional Apache Configuration
+# Security and Performance Optimizations
+
+# Prevent access to sensitive files
+<FilesMatch "\.(htaccess|htpasswd|ini|log|sh|sql|conf)$">
+    Order Allow,Deny
+    Deny from all
+</FilesMatch>
+
+# Prevent access to vendor directory (using FilesMatch instead)
+<FilesMatch "^vendor/">
+    Order Allow,Deny
+    Deny from all
+</FilesMatch>
+
+# Prevent access to logs directory (using FilesMatch instead)
+<FilesMatch "^logs/">
+    Order Allow,Deny
+    Deny from all
+</FilesMatch>
+
+# Prevent access to .env files
+<Files ".env*">
+    Order Allow,Deny
+    Deny from all
+</Files>
+
+# Enable URL rewriting
+RewriteEngine On
+
+# Force HTTPS (uncomment when SSL is available)
+# RewriteCond %{HTTPS} off
+# RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]
+
+# Remove trailing slash
+RewriteCond %{REQUEST_FILENAME} !-d
+RewriteCond %{REQUEST_URI} (.+)/$
+RewriteRule ^ %1 [R=301,L]
+
+# Handle PHP files without .php extension (optional)
+# RewriteCond %{REQUEST_FILENAME} !-d
+# RewriteCond %{REQUEST_FILENAME} !-f
+# RewriteCond %{REQUEST_FILENAME}.php -f
+# RewriteRule ^(.*)$ $1.php [L]
+
+# Health check endpoint
+RewriteRule ^health$ health.php [L]
+
+# Security headers (additional layer)
+<IfModule mod_headers.c>
+    # Prevent clickjacking
+    Header always set X-Frame-Options DENY
+
+    # Prevent MIME type sniffing
+    Header always set X-Content-Type-Options nosniff
+
+    # Enable XSS filtering
+    Header always set X-XSS-Protection "1; mode=block"
+
+    # Referrer Policy
+    Header always set Referrer-Policy "strict-origin-when-cross-origin"
+
+    # Content Security Policy
+    Header always set Content-Security-Policy "default-src 'self'; script-src 'self' 'unsafe-inline' https://unpkg.com https://cdn.tailwindcss.com; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com; img-src 'self' data: https:; connect-src 'self'"
+
+    # HSTS (uncomment when SSL is available)
+    # Header always set Strict-Transport-Security "max-age=31536000; includeSubDomains"
+</IfModule>
+
+# Compression
+<IfModule mod_deflate.c>
+    AddOutputFilterByType DEFLATE text/plain
+    AddOutputFilterByType DEFLATE text/html
+    AddOutputFilterByType DEFLATE text/xml
+    AddOutputFilterByType DEFLATE text/css
+    AddOutputFilterByType DEFLATE application/xml
+    AddOutputFilterByType DEFLATE application/xhtml+xml
+    AddOutputFilterByType DEFLATE application/rss+xml
+    AddOutputFilterByType DEFLATE application/javascript
+    AddOutputFilterByType DEFLATE application/x-javascript
+    AddOutputFilterByType DEFLATE application/json
+</IfModule>
+
+# Browser caching
+<IfModule mod_expires.c>
+    ExpiresActive On
+    ExpiresByType image/jpg "access plus 1 month"
+    ExpiresByType image/jpeg "access plus 1 month"
+    ExpiresByType image/gif "access plus 1 month"
+    ExpiresByType image/png "access plus 1 month"
+    ExpiresByType image/svg+xml "access plus 1 month"
+    ExpiresByType text/css "access plus 1 month"
+    ExpiresByType application/pdf "access plus 1 month"
+    ExpiresByType text/javascript "access plus 1 week"
+    ExpiresByType application/javascript "access plus 1 week"
+    ExpiresByType application/x-shockwave-flash "access plus 1 month"
+    ExpiresByType image/x-icon "access plus 1 year"
+    ExpiresDefault "access plus 2 days"
+</IfModule>
+
+# PHP settings
+<IfModule mod_php.c>
+    php_value upload_max_filesize 10M
+    php_value post_max_size 10M
+    php_value max_execution_time 300
+    php_value memory_limit 256M
+    php_flag display_errors Off
+    php_flag log_errors On
+    php_value error_log logs/php_errors.log
+</IfModule>
+
+# Error pages (commented out - files don't exist)
+# ErrorDocument 404 /404.php
+# ErrorDocument 403 /403.php
+# ErrorDocument 500 /500.php
+
+# Prevent image hotlinking (optional)
+# RewriteCond %{HTTP_REFERER} !^$
+# RewriteCond %{HTTP_REFERER} !^https?://(www\.)?softedge-corporation\.up\.railway\.app [NC]
+# RewriteRule \.(gif|jpg|jpeg|png|svg)$ - [F,L]

.huggingface.yaml

@@ -0,0 +1,14 @@
+emoji: 🚀
+colorFrom: blue
+colorTo: cyan
+sdk: static
+pinned: false
+=======
+title: SoftEdge Corporation
+emoji: 🚀
+colorFrom: blue
+colorTo: cyan
+sdk: gradio
+sdk_version: 4.44.1
+app_file: app.py
+pinned: false

Dockerfile

@@ -0,0 +1,142 @@
+# ================================
+# SoftEdge Corporation — HF Spaces
+# PHP 8.3 + Apache (ESTÁVEL)
+# ================================
+FROM php:8.3-apache
+
+# ----------------
+# VARIÁVEIS
+# ----------------
+ENV PORT=7860
+ENV APACHE_RUN_USER=www-data
+ENV APACHE_RUN_GROUP=www-data
+ENV APACHE_LOG_DIR=/var/log/apache2
+
+# ----------------
+# DEPENDÊNCIAS DO SISTEMA
+# ----------------
+RUN apt-get update && apt-get install -y --no-install-recommends \
+    libpng-dev \
+    libjpeg-dev \
+    libfreetype6-dev \
+    libzip-dev \
+    libicu-dev \
+    libxml2-dev \
+    libcurl4-openssl-dev \
+    libonig-dev \
+    sqlite3 \
+    libsqlite3-dev \
+    git \
+    curl \
+    cron \
+    unzip \
+    ca-certificates \
+    && rm -rf /var/lib/apt/lists/*
+
+# ----------------
+# EXTENSÕES PHP (CONTROLADAS)
+# ----------------
+RUN docker-php-ext-configure gd --with-freetype --with-jpeg \
+    && docker-php-ext-install \
+        mbstring \
+        exif \
+        bcmath \
+        intl \
+        zip \
+        gd \
+        mysqli \
+        pdo \
+        pdo_mysql \
+        pdo_sqlite \
+    && docker-php-ext-enable \
+        mbstring exif bcmath intl zip gd mysqli pdo_mysql pdo_sqlite
+
+# 🔥 LIMPEZA DE INIs DUPLICADOS (CRÍTICO)
+RUN find /usr/local/etc/php/conf.d -type f -name "*docker-php-ext-*" -exec sed -i '/^extension=/d' {} \;
+
+# ----------------
+# COMPOSER
+# ----------------
+RUN curl -sS https://getcomposer.org/installer | php -- \
+    --install-dir=/usr/local/bin \
+    --filename=composer
+
+# ----------------
+# NODE (opcional p/ React)
+# ----------------
+RUN curl -fsSL https://deb.nodesource.com/setup_20.x | bash - \
+    && apt-get install -y nodejs \
+    && node -v && npm -v
+
+# ----------------
+# APACHE CONFIG
+# ----------------
+RUN a2enmod rewrite headers
+
+# ServerName GLOBAL (remove AH00558 de vez)
+RUN echo "ServerName localhost" > /etc/apache2/conf-available/servername.conf \
+    && a2enconf servername
+
+# Porta HF Spaces
+RUN sed -i 's/Listen 80/Listen 7860/' /etc/apache2/ports.conf
+
+RUN printf '<VirtualHost *:7860>\n\
+    ServerName localhost\n\
+    DocumentRoot /var/www/html\n\
+    <Directory /var/www/html>\n\
+        AllowOverride All\n\
+        Require all granted\n\
+    </Directory>\n\
+    ErrorLog ${APACHE_LOG_DIR}/error.log\n\
+    CustomLog ${APACHE_LOG_DIR}/access.log combined\n\
+</VirtualHost>\n' > /etc/apache2/sites-available/000-default.conf
+
+# ----------------
+# APP
+# ----------------
+WORKDIR /var/www/html
+COPY . .
+
+# Logs e storage
+RUN mkdir -p logs storage \
+    && chown -R www-data:www-data /var/www/html \
+    && chmod -R 775 logs storage
+
+# ----------------
+# COMPOSER INSTALL
+# ----------------
+RUN if [ -f composer.json ]; then \
+    composer install --no-dev --optimize-autoloader --no-interaction; \
+    fi
+
+# ----------------
+# REACT BUILD (SE EXISTIR)
+# ----------------
+RUN if [ -f package.json ]; then \
+    npm install && npm run build; \
+    fi
+
+# ----------------
+# PHP CONFIG FINAL
+# ----------------
+RUN printf "display_errors=Off\n\
+log_errors=On\n\
+error_log=/var/www/html/logs/php_errors.log\n\
+memory_limit=256M\n\
+upload_max_filesize=10M\n\
+post_max_size=10M\n\
+max_execution_time=300\n" > /usr/local/etc/php/conf.d/99-softedge.ini
+
+# ----------------
+# HEALTHCHECK
+# ----------------
+RUN echo "<?php http_response_code(200); echo 'OK';" > /var/www/html/health.php
+
+HEALTHCHECK --interval=60s --timeout=5s \
+ CMD curl -f http://localhost:7860/health.php || exit 1
+
+# ----------------
+# START
+# ----------------
+EXPOSE 7860
+CMD ["apache2-foreground"]

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 SoftEdge Corporation
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README-RAILWAY.md

@@ -0,0 +1,80 @@
+# 🚂 SoftEdge Corporation - Railway Deployment Guide
+
+## Problema Identificado
+
+O erro `AH00534: apache2: Configuration error: More than one MPM loaded` ocorre especificamente no Railway devido a conflitos entre múltiplos MPMs (Multi-Processing Modules) do Apache.
+
+## Solução
+
+Use o `Dockerfile.railway` otimizado especificamente para Railway:
+
+### Passos para Deploy no Railway:
+
+1. **Renomeie o Dockerfile:**
+   ```bash
+   mv Dockerfile Dockerfile.original
+   mv Dockerfile.railway Dockerfile
+   ```
+
+2. **Commit e Push:**
+   ```bash
+   git add .
+   git commit -m "Fix Railway MPM conflict with optimized Dockerfile"
+   git push origin main
+   ```
+
+3. **Railway fará automaticamente:**
+   - Build da imagem Docker otimizada
+   - Resolução do conflito de MPMs
+   - Deploy bem-sucedido
+
+## O que foi alterado no Dockerfile.railway:
+
+### ✅ Correções Aplicadas:
+
+1. **MPM Fix Robusto:**
+   ```dockerfile
+   RUN service apache2 stop && \
+       a2dismod mpm_event 2>/dev/null || true && \
+       a2dismod mpm_worker 2>/dev/null || true && \
+       a2dismod mpm_prefork 2>/dev/null || true && \
+       a2enmod mpm_prefork
+   ```
+
+2. **Configuração Apache Simplificada:**
+   - Removidos headers de segurança complexos que podem causar conflitos
+   - Configuração mínima necessária para Railway
+
+3. **Startup Direto:**
+   - Removido script de startup complexo
+   - Apache iniciado diretamente com `apache2-foreground`
+
+## Verificação
+
+Após o deploy, verifique:
+- ✅ Container inicia sem erros de MPM
+- ✅ Apache responde na porta configurada
+- ✅ Aplicação PHP+React funcionando
+- ✅ Health check passando
+
+## Rollback (se necessário)
+
+Para voltar à versão original:
+```bash
+mv Dockerfile Dockerfile.railway
+mv Dockerfile.original Dockerfile
+git add .
+git commit -m "Rollback to original Dockerfile"
+git push origin main
+```
+
+## Suporte
+
+Se o problema persistir:
+1. Verifique os logs do Railway
+2. Confirme que está usando `Dockerfile.railway`
+3. Teste localmente: `docker build -f Dockerfile.railway -t test . && docker run -p 8080:8080 test`
+
+---
+
+**🎯 Esta solução resolve especificamente o conflito de MPMs no Railway mantendo toda a funcionalidade da aplicação.**

Railway.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "https://railway.app/railway.schema.json",
+  "build": {
+    "builder": "dockerfile"
+  },
+  "start": "apache2-foreground"
+}

admin.php

@@ -0,0 +1,413 @@
+<?php
+// Start session and check authentication
+session_start();
+
+// Check if user is logged in and is admin
+if (!isset($_SESSION['user']) || !isset($_SESSION['session_token'])) {
+    header('Location: login.php');
+    exit;
+}
+
+// Autoload Composer dependencies
+require_once __DIR__ . '/vendor/autoload.php';
+
+// Load environment variables
+if (file_exists(__DIR__ . '/.env')) {
+    $dotenv = Dotenv\Dotenv::createImmutable(__DIR__);
+    $dotenv->load();
+}
+
+// Initialize User class
+$user = new \SoftEdge\User();
+
+// Validate session
+$sessionUser = $user->validateSession($_SESSION['session_token']);
+if (!$sessionUser || $sessionUser['role'] !== 'admin') {
+    session_destroy();
+    header('Location: login.php');
+    exit;
+}
+
+// Get admin statistics
+$stats = $user->getAdminStats();
+
+// Log admin page visit
+$user->logPageVisit($sessionUser['id'], 'admin_dashboard', $_SERVER['HTTP_USER_AGENT'] ?? '');
+
+// Handle logout
+if (isset($_POST['logout'])) {
+    // Invalidate session
+    try {
+        $db = new PDO("mysql:host={$_ENV['DB_HOST']};dbname={$_ENV['DB_NAME']}", $_ENV['DB_USER'], $_ENV['DB_PASS']);
+        $stmt = $db->prepare("DELETE FROM user_sessions WHERE session_token = ?");
+        $stmt->execute([$_SESSION['session_token']]);
+    } catch (Exception $e) {
+        error_log("Session cleanup failed: " . $e->getMessage());
+    }
+
+    session_destroy();
+    header('Location: login.php');
+    exit;
+}
+?>
+
+<!DOCTYPE html>
+<html lang="pt-BR" class="scroll-smooth">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Painel Administrativo - SoftEdge Corporation</title>
+
+  <!-- SEO -->
+  <meta name="description" content="Painel administrativo SoftEdge Corporation">
+  <meta name="robots" content="noindex, nofollow">
+
+  <!-- Favicon -->
+  <link rel="icon" href="/assets/placeholder.svg" type="image/svg+xml">
+
+  <!-- Fonts -->
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+
+  <!-- Tailwind CSS -->
+  <script src="https://cdn.tailwindcss.com"></script>
+  <script>
+    tailwind.config = {
+      theme: {
+        extend: {
+          fontFamily: {
+            sans: ['Inter', 'system-ui', 'sans-serif'],
+          },
+          colors: {
+            primary: {
+              50: '#f8fafc',
+              100: '#f1f5f9',
+              200: '#e2e8f0',
+              300: '#cbd5e1',
+              400: '#94a3b8',
+              500: '#64748b',
+              600: '#475569',
+              700: '#334155',
+              800: '#1e293b',
+              900: '#0f172a',
+            }
+          }
+        }
+      }
+    }
+  </script>
+
+  <!-- Lucide Icons -->
+  <script src="https://unpkg.com/lucide@latest"></script>
+
+  <!-- Chart.js for analytics -->
+  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+
+  <style>
+    .glass-card {
+      background: rgba(30, 41, 59, 0.8);
+      backdrop-filter: blur(20px);
+      -webkit-backdrop-filter: blur(20px);
+      border: 1px solid rgba(148, 163, 184, 0.1);
+    }
+
+    .stat-card {
+      transition: all 0.3s ease;
+    }
+
+    .stat-card:hover {
+      transform: translateY(-2px);
+      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
+    }
+
+    .fade-in {
+      animation: fadeIn 0.6s ease-out;
+    }
+
+    @keyframes fadeIn {
+      from { opacity: 0; transform: translateY(20px); }
+      to { opacity: 1; transform: translateY(0); }
+    }
+
+    .sidebar {
+      transform: translateX(-100%);
+      transition: transform 0.3s ease;
+    }
+
+    .sidebar.open {
+      transform: translateX(0);
+    }
+
+    @media (min-width: 768px) {
+      .sidebar {
+        transform: translateX(0);
+      }
+    }
+  </style>
+</head>
+
+<body class="bg-slate-950 min-h-screen">
+  <!-- Sidebar -->
+  <div class="sidebar fixed inset-y-0 left-0 z-50 w-64 bg-slate-900 border-r border-slate-700 md:relative md:translate-x-0">
+    <div class="flex flex-col h-full">
+      <!-- Logo -->
+      <div class="flex items-center justify-center p-6 border-b border-slate-700">
+        <div class="flex items-center space-x-3">
+          <div class="w-8 h-8 rounded-lg overflow-hidden bg-slate-700 border border-slate-600">
+            <img src="/assets/logo.jpeg" alt="SoftEdge Logo" class="w-full h-full object-cover">
+          </div>
+          <span class="text-lg font-semibold text-slate-200 tracking-tight">
+            Admin Panel
+          </span>
+        </div>
+      </div>
+
+      <!-- Navigation -->
+      <nav class="flex-1 px-4 py-6 space-y-2">
+        <a href="#dashboard" class="nav-link flex items-center gap-3 px-4 py-3 text-slate-300 hover:text-white hover:bg-slate-800 rounded-lg transition-colors active">
+          <i data-lucide="layout-dashboard" class="w-5 h-5"></i>
+          <span>Dashboard</span>
+        </a>
+
+        <a href="#users" class="nav-link flex items-center gap-3 px-4 py-3 text-slate-400 hover:text-white hover:bg-slate-800 rounded-lg transition-colors">
+          <i data-lucide="users" class="w-5 h-5"></i>
+          <span>Usuários</span>
+        </a>
+
+        <a href="#analytics" class="nav-link flex items-center gap-3 px-4 py-3 text-slate-400 hover:text-white hover:bg-slate-800 rounded-lg transition-colors">
+          <i data-lucide="bar-chart-3" class="w-5 h-5"></i>
+          <span>Analytics</span>
+        </a>
+
+        <a href="#settings" class="nav-link flex items-center gap-3 px-4 py-3 text-slate-400 hover:text-white hover:bg-slate-800 rounded-lg transition-colors">
+          <i data-lucide="settings" class="w-5 h-5"></i>
+          <span>Configurações</span>
+        </a>
+      </nav>
+
+      <!-- User Info & Logout -->
+      <div class="p-4 border-t border-slate-700">
+        <div class="flex items-center gap-3 mb-4">
+          <div class="w-8 h-8 rounded-full bg-slate-700 flex items-center justify-center">
+            <i data-lucide="user" class="w-4 h-4 text-slate-400"></i>
+          </div>
+          <div class="flex-1 min-w-0">
+            <p class="text-sm font-medium text-slate-200 truncate">
+              <?php echo htmlspecialchars($sessionUser['name']); ?>
+            </p>
+            <p class="text-xs text-slate-400">Administrador</p>
+          </div>
+        </div>
+
+        <form method="POST" class="w-full">
+          <button type="submit" name="logout" class="w-full flex items-center gap-3 px-4 py-2 text-slate-400 hover:text-white hover:bg-red-500/10 hover:border-red-500/20 border border-transparent rounded-lg transition-all">
+            <i data-lucide="log-out" class="w-4 h-4"></i>
+            <span class="text-sm">Sair</span>
+          </button>
+        </form>
+      </div>
+    </div>
+  </div>
+
+  <!-- Mobile Overlay -->
+  <div class="sidebar-overlay fixed inset-0 bg-black/50 z-40 md:hidden opacity-0 pointer-events-none transition-opacity"></div>
+
+  <!-- Main Content -->
+  <div class="md:ml-64">
+    <!-- Header -->
+    <header class="bg-slate-900/50 backdrop-blur-xl border-b border-slate-700 p-4 md:p-6">
+      <div class="flex items-center justify-between">
+        <div class="flex items-center gap-4">
+          <button class="md:hidden text-slate-400 hover:text-white p-2" id="sidebarToggle">
+            <i data-lucide="menu" class="w-6 h-6"></i>
+          </button>
+          <div>
+            <h1 class="text-2xl font-bold text-white">Dashboard Administrativo</h1>
+            <p class="text-slate-400 text-sm">Bem-vindo de volta, <?php echo htmlspecialchars(explode(' ', $sessionUser['name'])[0]); ?>!</p>
+          </div>
+        </div>
+
+        <div class="flex items-center gap-4">
+          <div class="hidden md:flex items-center gap-2 text-slate-400 text-sm">
+            <i data-lucide="clock" class="w-4 h-4"></i>
+            <span><?php echo date('d/m/Y H:i'); ?></span>
+          </div>
+        </div>
+      </div>
+    </header>
+
+    <!-- Dashboard Content -->
+    <main class="p-4 md:p-6 space-y-6">
+      <!-- Stats Cards -->
+      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+        <div class="stat-card glass-card p-6 rounded-xl">
+          <div class="flex items-center justify-between">
+            <div>
+              <p class="text-slate-400 text-sm font-medium">Total de Usuários</p>
+              <p class="text-2xl font-bold text-white"><?php echo number_format($stats['total_users'] ?? 0); ?></p>
+            </div>
+            <div class="w-12 h-12 bg-blue-500/20 rounded-lg flex items-center justify-center">
+              <i data-lucide="users" class="w-6 h-6 text-blue-400"></i>
+            </div>
+          </div>
+        </div>
+
+        <div class="stat-card glass-card p-6 rounded-xl">
+          <div class="flex items-center justify-between">
+            <div>
+              <p class="text-slate-400 text-sm font-medium">Total de Visitas</p>
+              <p class="text-2xl font-bold text-white"><?php echo number_format($stats['total_visits'] ?? 0); ?></p>
+            </div>
+            <div class="w-12 h-12 bg-green-500/20 rounded-lg flex items-center justify-center">
+              <i data-lucide="eye" class="w-6 h-6 text-green-400"></i>
+            </div>
+          </div>
+        </div>
+
+        <div class="stat-card glass-card p-6 rounded-xl">
+          <div class="flex items-center justify-between">
+            <div>
+              <p class="text-slate-400 text-sm font-medium">Visitas (30 dias)</p>
+              <p class="text-2xl font-bold text-white"><?php echo number_format($stats['recent_visits'] ?? 0); ?></p>
+            </div>
+            <div class="w-12 h-12 bg-purple-500/20 rounded-lg flex items-center justify-center">
+              <i data-lucide="trending-up" class="w-6 h-6 text-purple-400"></i>
+            </div>
+          </div>
+        </div>
+
+        <div class="stat-card glass-card p-6 rounded-xl">
+          <div class="flex items-center justify-between">
+            <div>
+              <p class="text-slate-400 text-sm font-medium">Taxa de Conversão</p>
+              <p class="text-2xl font-bold text-white">
+                <?php
+                  $conversion = $stats['total_users'] > 0 ? (($stats['total_visits'] ?? 0) / $stats['total_users']) : 0;
+                  echo number_format($conversion, 1);
+                ?>x
+              </p>
+            </div>
+            <div class="w-12 h-12 bg-orange-500/20 rounded-lg flex items-center justify-center">
+              <i data-lucide="target" class="w-6 h-6 text-orange-400"></i>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Charts and Tables -->
+      <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        <!-- Top Pages Chart -->
+        <div class="glass-card p-6 rounded-xl">
+          <h3 class="text-lg font-semibold text-white mb-4 flex items-center gap-2">
+            <i data-lucide="bar-chart-3" class="w-5 h-5 text-slate-400"></i>
+            Páginas Mais Visitadas
+          </h3>
+          <div class="space-y-3">
+            <?php foreach (($stats['top_pages'] ?? []) as $page): ?>
+              <div class="flex items-center justify-between p-3 bg-slate-800/50 rounded-lg">
+                <span class="text-slate-300 capitalize"><?php echo htmlspecialchars($page['page']); ?></span>
+                <span class="text-slate-400 text-sm"><?php echo number_format($page['visits']); ?> visitas</span>
+              </div>
+            <?php endforeach; ?>
+          </div>
+        </div>
+
+        <!-- Recent Users -->
+        <div class="glass-card p-6 rounded-xl">
+          <h3 class="text-lg font-semibold text-white mb-4 flex items-center gap-2">
+            <i data-lucide="user-plus" class="w-5 h-5 text-slate-400"></i>
+            Usuários Recentes
+          </h3>
+          <div class="space-y-3">
+            <?php foreach (($stats['recent_users'] ?? []) as $recentUser): ?>
+              <div class="flex items-center gap-3 p-3 bg-slate-800/50 rounded-lg">
+                <div class="w-8 h-8 rounded-full bg-slate-700 flex items-center justify-center">
+                  <i data-lucide="user" class="w-4 h-4 text-slate-400"></i>
+                </div>
+                <div class="flex-1 min-w-0">
+                  <p class="text-slate-300 text-sm font-medium truncate"><?php echo htmlspecialchars($recentUser['name']); ?></p>
+                  <p class="text-slate-400 text-xs"><?php echo date('d/m/Y', strtotime($recentUser['created_at'])); ?></p>
+                </div>
+              </div>
+            <?php endforeach; ?>
+          </div>
+        </div>
+      </div>
+
+      <!-- System Info -->
+      <div class="glass-card p-6 rounded-xl">
+        <h3 class="text-lg font-semibold text-white mb-4 flex items-center gap-2">
+          <i data-lucide="server" class="w-5 h-5 text-slate-400"></i>
+          Informações do Sistema
+        </h3>
+        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+          <div class="p-4 bg-slate-800/50 rounded-lg">
+            <p class="text-slate-400 text-sm">PHP Version</p>
+            <p class="text-white font-medium"><?php echo PHP_VERSION; ?></p>
+          </div>
+          <div class="p-4 bg-slate-800/50 rounded-lg">
+            <p class="text-slate-400 text-sm">Database</p>
+            <p class="text-white font-medium">MySQL</p>
+          </div>
+          <div class="p-4 bg-slate-800/50 rounded-lg">
+            <p class="text-slate-400 text-sm">Último Backup</p>
+            <p class="text-white font-medium"><?php echo date('d/m/Y H:i'); ?></p>
+          </div>
+        </div>
+      </div>
+    </main>
+  </div>
+
+  <!-- Scripts -->
+  <script src="https://unpkg.com/lucide@latest"></script>
+  <script>
+    document.addEventListener('DOMContentLoaded', () => {
+      // Initialize Lucide icons
+      lucide.createIcons();
+
+      // Sidebar toggle for mobile
+      const sidebar = document.querySelector('.sidebar');
+      const overlay = document.querySelector('.sidebar-overlay');
+      const sidebarToggle = document.getElementById('sidebarToggle');
+
+      const toggleSidebar = () => {
+        sidebar.classList.toggle('open');
+        overlay.classList.toggle('opacity-0');
+        overlay.classList.toggle('pointer-events-none');
+      };
+
+      sidebarToggle?.addEventListener('click', toggleSidebar);
+      overlay?.addEventListener('click', toggleSidebar);
+
+      // Navigation active state
+      const navLinks = document.querySelectorAll('.nav-link');
+      navLinks.forEach(link => {
+        link.addEventListener('click', function(e) {
+          e.preventDefault();
+
+          // Remove active class from all links
+          navLinks.forEach(l => l.classList.remove('active', 'text-white'));
+          navLinks.forEach(l => l.classList.add('text-slate-400'));
+
+          // Add active class to clicked link
+          this.classList.add('active', 'text-white');
+          this.classList.remove('text-slate-400');
+
+          // Close sidebar on mobile
+          if (window.innerWidth < 768) {
+            toggleSidebar();
+          }
+        });
+      });
+
+      // Auto-refresh stats every 30 seconds
+      setInterval(() => {
+        // In a real application, you might want to implement AJAX calls here
+        // to refresh the statistics without reloading the page
+        console.log('Refreshing stats...');
+      }, 30000);
+    });
+  </script>
+</body>
+</html>

api.php

@@ -0,0 +1,142 @@
+<?php
+declare(strict_types=1);
+
+require_once __DIR__ . '/src/Bootstrap.php';
+\SoftEdge\Env::load(__DIR__);
+\SoftEdge\Bootstrap::init();
+
+use SoftEdge\Response;
+use SoftEdge\Validation;
+use SoftEdge\AuthService;
+use SoftEdge\RateLimiter;
+use SoftEdge\DB;
+use PDO;
+
+// Default JSON header
+if (!headers_sent()) {
+    header('Content-Type: application/json; charset=utf-8');
+    header('X-Powered-By: SoftEdge');
+}
+
+// Handle OPTIONS (CORS preflight for development/SPA usage)
+if ($_SERVER['REQUEST_METHOD'] === 'OPTIONS') {
+    header('Access-Control-Allow-Methods: GET, POST, OPTIONS');
+    header('Access-Control-Allow-Headers: Content-Type, X-CSRF-Token, Authorization');
+    header('Access-Control-Max-Age: 86400');
+    http_response_code(204);
+    exit;
+}
+
+// Very limited CORS allowance if same-origin or configured
+$origin = $_SERVER['HTTP_ORIGIN'] ?? '';
+$host = $_SERVER['HTTP_HOST'] ?? '';
+if ($origin && str_contains($origin, $host)) {
+    header('Access-Control-Allow-Origin: ' . $origin);
+    header('Vary: Origin');
+    header('Access-Control-Allow-Credentials: true');
+}
+
+function path(): string {
+    $uri = parse_url($_SERVER['REQUEST_URI'] ?? '/', PHP_URL_PATH) ?: '/';
+    // Support both /api.php?r=... and /api/... styles
+    if (isset($_GET['r'])) {
+        $r = '/' . ltrim((string)$_GET['r'], '/');
+        return $r;
+    }
+    if (preg_match('#/api(?:\.php)?(.*)$#', $uri, $m)) {
+        return $m[1] ? (string)$m[1] : '/';
+    }
+    return $uri;
+}
+
+function json_body(): array {
+    $raw = file_get_contents('php://input');
+    $data = json_decode((string)$raw, true);
+    return is_array($data) ? $data : [];
+}
+
+$method = strtoupper($_SERVER['REQUEST_METHOD'] ?? 'GET');
+$route  = rtrim(path(), '/') ?: '/';
+
+try {
+    switch (true) {
+        case $method === 'GET' && $route === '/health':
+            Response::json([
+                'ok' => true,
+                'time' => date('c'),
+                'app' => 'SoftEdge API',
+                'env' => \SoftEdge\Env::get('APP_ENV', 'production'),
+            ]);
+            break;
+
+        case $method === 'POST' && $route === '/auth/login':
+            $body = json_body();
+            $csrf = (string)($body['csrf'] ?? ($_SERVER['HTTP_X_CSRF_TOKEN'] ?? ''));
+            if (!\SoftEdge\Csrf::validate($csrf)) {
+                Response::json(['ok' => false, 'error' => 'CSRF inválido'], 400);
+                break;
+            }
+            $email = trim((string)($body['email'] ?? ''));
+            $password = (string)($body['password'] ?? '');
+            if (!Validation::email($email)) {
+                Response::json(['ok' => false, 'error' => 'Email inválido'], 422);
+                break;
+            }
+            $res = AuthService::login($email, $password);
+            Response::json($res, (int)($res['status'] ?? 200));
+            break;
+
+        case $method === 'POST' && $route === '/auth/logout':
+            AuthService::logout();
+            Response::json(['ok' => true]);
+            break;
+
+        case $method === 'POST' && $route === '/contact':
+            $body = json_body();
+            $csrf = (string)($body['csrf'] ?? ($_SERVER['HTTP_X_CSRF_TOKEN'] ?? ''));
+            if (!\SoftEdge\Csrf::validate($csrf)) {
+                Response::json(['ok' => false, 'error' => 'CSRF inválido'], 400);
+                break;
+            }
+            $ip = $_SERVER['REMOTE_ADDR'] ?? 'unknown';
+            if (!RateLimiter::allow('contact:' . $ip, \SoftEdge\Env::int('RATE_LIMIT_CONTACT', 3), 3600)) {
+                Response::json(['ok' => false, 'error' => 'Muitas solicitações. Tente mais tarde.'], 429);
+                break;
+            }
+            $name = trim((string)($body['name'] ?? ''));
+            $email = trim((string)($body['email'] ?? ''));
+            $message = trim((string)($body['message'] ?? ''));
+            $phone = trim((string)($body['phone'] ?? ''));
+            $company = trim((string)($body['company'] ?? ''));
+            $subject = trim((string)($body['subject'] ?? ''));
+
+            $errors = Validation::required(['name' => $name, 'email' => $email, 'message' => $message], ['name','email','message']);
+            if (!empty($errors) || !Validation::email($email)) {
+                $errors['email'] = $errors['email'] ?? (!Validation::email($email) ? 'Email inválido' : null);
+                Response::json(['ok' => false, 'errors' => array_filter($errors)], 422);
+                break;
+            }
+
+            $pdo = DB::pdo();
+            $stmt = $pdo->prepare('INSERT INTO contact_submissions (name, email, phone, company, subject, message, status) VALUES (:name,:email,:phone,:company,:subject,:message,\'new\')');
+            $stmt->execute([
+                ':name' => $name,
+                ':email' => $email,
+                ':phone' => $phone ?: null,
+                ':company' => $company ?: null,
+                ':subject' => $subject ?: null,
+                ':message' => $message,
+            ]);
+            Response::json(['ok' => true, 'id' => (int)$pdo->lastInsertId()], 201);
+            break;
+
+        default:
+            Response::json(['ok' => false, 'error' => 'Rota não encontrada', 'route' => $route], 404);
+            break;
+    }
+} catch (Throwable $e) {
+    Response::json([
+        'ok' => false,
+        'error' => 'Erro interno',
+    ], 500);
+}

app.py

@@ -0,0 +1,333 @@
+from flask import Flask, request, jsonify, render_template, send_from_directory, redirect, url_for, flash, session, Response
+import os
+import json
+import subprocess
+import sys
+from datetime import datetime, timedelta
+import sqlite3
+from werkzeug.security import generate_password_hash, check_password_hash
+import jwt
+import secrets
+import requests
+
+app = Flask(__name__)
+app.config['SECRET_KEY'] = os.environ.get('SECRET_KEY', secrets.token_hex(32))
+app.config['JWT_SECRET'] = os.environ.get('JWT_SECRET', secrets.token_hex(32))
+
+# Database setup
+def init_db():
+    conn = sqlite3.connect('softedge.db')
+    c = conn.cursor()
+    c.execute('''CREATE TABLE IF NOT EXISTS users
+                 (id INTEGER PRIMARY KEY AUTOINCREMENT,
+                  email TEXT UNIQUE NOT NULL,
+                  password TEXT NOT NULL,
+                  name TEXT,
+                  role TEXT DEFAULT 'user',
+                  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP)''')
+    c.execute('''CREATE TABLE IF NOT EXISTS contact_submissions
+                 (id INTEGER PRIMARY KEY AUTOINCREMENT,
+                  name TEXT NOT NULL,
+                  email TEXT NOT NULL,
+                  message TEXT NOT NULL,
+                  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP)''')
+    c.execute('''CREATE TABLE IF NOT EXISTS projects
+                 (id INTEGER PRIMARY KEY AUTOINCREMENT,
+                  title TEXT NOT NULL,
+                  description TEXT NOT NULL,
+                  status TEXT DEFAULT 'active',
+                  technologies TEXT,
+                  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP)''')
+    conn.commit()
+    conn.close()
+
+init_db()
+
+# Helper functions
+def get_db_connection():
+    conn = sqlite3.connect('softedge.db')
+    conn.row_factory = sqlite3.Row
+    return conn
+
+def create_token(user_id):
+    payload = {
+        'user_id': user_id,
+        'exp': datetime.utcnow() + timedelta(hours=24)
+    }
+    return jwt.encode(payload, app.config['JWT_SECRET'], algorithm='HS256')
+
+# PHP Integration
+def call_php_script(script_name, method='GET', data=None):
+    """Call PHP script and return response"""
+    try:
+        php_path = os.path.join(os.getcwd(), script_name)
+        if not os.path.exists(php_path):
+            return None
+
+        # For simple GET requests, we can execute PHP directly
+        if method == 'GET':
+            result = subprocess.run(['php', php_path],
+                                  capture_output=True, text=True, timeout=30)
+            if result.returncode == 0:
+                return result.stdout
+        return None
+    except Exception as e:
+        print(f"PHP execution error: {e}")
+        return None
+
+# Routes
+@app.route('/')
+def home():
+    # Get dynamic stats
+    stats = {'projects': 0, 'contacts': 0, 'satisfaction': 4.9}
+    try:
+        conn = get_db_connection()
+        stats['projects'] = conn.execute('SELECT COUNT(*) as count FROM projects').fetchone()['count']
+        stats['contacts'] = conn.execute('SELECT COUNT(*) as count FROM contact_submissions').fetchone()['count']
+        conn.close()
+    except Exception as e:
+        print(f"Stats error: {e}")
+
+    return render_template('index.html', stats=stats)
+
+@app.route('/sobre')
+def sobre():
+    return render_template('sobre.html')
+
+@app.route('/servicos')
+def servicos():
+    return render_template('servicos.html')
+
+@app.route('/projetos')
+def projetos():
+    # Get projects from database
+    projects = []
+    try:
+        conn = get_db_connection()
+        projects = conn.execute('SELECT * FROM projects ORDER BY created_at DESC').fetchall()
+        conn.close()
+        projects = [dict(project) for project in projects]
+    except Exception as e:
+        print(f"Projects error: {e}")
+
+    return render_template('projetos.html', projects=projects)
+
+@app.route('/contato')
+def contato():
+    return render_template('contato.html')
+
+@app.route('/login')
+def login():
+    return render_template('login.html')
+
+@app.route('/register')
+def register():
+    return render_template('register.html')
+
+@app.route('/admin')
+def admin():
+    # Check authentication
+    if 'user_id' not in session:
+        return redirect(url_for('login'))
+
+    # Get admin stats
+    stats = {'total_users': 0, 'total_contacts': 0, 'recent_users': [], 'recent_contacts': []}
+    try:
+        conn = get_db_connection()
+        stats['total_users'] = conn.execute('SELECT COUNT(*) as count FROM users').fetchone()['count']
+        stats['total_contacts'] = conn.execute('SELECT COUNT(*) as count FROM contact_submissions').fetchone()['count']
+
+        # Recent users
+        stats['recent_users'] = conn.execute(
+            'SELECT name, email, created_at FROM users ORDER BY created_at DESC LIMIT 5'
+        ).fetchall()
+
+        # Recent contacts
+        stats['recent_contacts'] = conn.execute(
+            'SELECT name, email, message, created_at FROM contact_submissions ORDER BY created_at DESC LIMIT 5'
+        ).fetchall()
+
+        conn.close()
+        stats['recent_users'] = [dict(user) for user in stats['recent_users']]
+        stats['recent_contacts'] = [dict(contact) for contact in stats['recent_contacts']]
+    except Exception as e:
+        print(f"Admin stats error: {e}")
+
+    return render_template('admin.html', stats=stats)
+
+# API Routes
+@app.route('/api/health')
+def health():
+    return jsonify({
+        'status': 'ok',
+        'timestamp': datetime.now().isoformat(),
+        'service': 'SoftEdge Hybrid API',
+        'version': '3.0.0',
+        'technologies': ['Flask', 'PHP', 'Node.js', 'MySQL']
+    })
+
+@app.route('/api/stats')
+def stats():
+    try:
+        conn = get_db_connection()
+        projects_count = conn.execute('SELECT COUNT(*) as count FROM projects').fetchone()['count']
+        contact_count = conn.execute('SELECT COUNT(*) as count FROM contact_submissions').fetchone()['count']
+        conn.close()
+
+        return jsonify({
+            'projects': projects_count,
+            'contacts': contact_count,
+            'satisfaction': 4.9,
+            'uptime': '99.9%'
+        })
+    except Exception as e:
+        return jsonify({'error': 'Database error'}), 500
+
+@app.route('/api/contact', methods=['POST'])
+def contact():
+    data = request.get_json()
+
+    if not data or not all(k in data for k in ['name', 'email', 'message']):
+        return jsonify({'error': 'Missing required fields'}), 400
+
+    try:
+        conn = get_db_connection()
+        conn.execute('INSERT INTO contact_submissions (name, email, message) VALUES (?, ?, ?)',
+                     (data['name'], data['email'], data['message']))
+        conn.commit()
+        conn.close()
+
+        return jsonify({'message': 'Message sent successfully', 'status': 'success'}), 200
+    except Exception as e:
+        return jsonify({'error': 'Database error'}), 500
+
+@app.route('/api/auth/login', methods=['POST'])
+def api_login():
+    data = request.get_json()
+
+    if not data or not all(k in data for k in ['email', 'password']):
+        return jsonify({'error': 'Missing credentials'}), 400
+
+    try:
+        conn = get_db_connection()
+        user = conn.execute('SELECT * FROM users WHERE email = ?', (data['email'],)).fetchone()
+        conn.close()
+
+        if user and check_password_hash(user['password'], data['password']):
+            session['user_id'] = user['id']
+            session['user_email'] = user['email']
+            session['user_name'] = user['name']
+            session['user_role'] = user['role']
+            token = create_token(user['id'])
+
+            return jsonify({
+                'message': 'Login successful',
+                'token': token,
+                'user': {
+                    'id': user['id'],
+                    'email': user['email'],
+                    'name': user['name'],
+                    'role': user['role']
+                }
+            }), 200
+        else:
+            return jsonify({'error': 'Invalid credentials'}), 401
+    except Exception as e:
+        return jsonify({'error': 'Database error'}), 500
+
+@app.route('/api/auth/register', methods=['POST'])
+def api_register():
+    data = request.get_json()
+
+    if not data or not all(k in data for k in ['email', 'password', 'name']):
+        return jsonify({'error': 'Missing required fields'}), 400
+
+    try:
+        hashed_password = generate_password_hash(data['password'])
+
+        conn = get_db_connection()
+        conn.execute('INSERT INTO users (email, password, name) VALUES (?, ?, ?)',
+                     (data['email'], hashed_password, data['name']))
+        conn.commit()
+        user_id = conn.execute('SELECT last_insert_rowid()').fetchone()[0]
+        conn.close()
+
+        token = create_token(user_id)
+        return jsonify({
+            'message': 'Registration successful',
+            'token': token,
+            'user': {
+                'id': user_id,
+                'email': data['email'],
+                'name': data['name']
+            }
+        }), 201
+    except sqlite3.IntegrityError:
+        return jsonify({'error': 'Email already exists'}), 409
+    except Exception as e:
+        return jsonify({'error': 'Database error'}), 500
+
+@app.route('/api/auth/logout')
+def logout():
+    session.clear()
+    return jsonify({'message': 'Logged out successfully'})
+
+# PHP Integration Routes
+@app.route('/php/<path:script>')
+def php_route(script):
+    """Route to execute PHP scripts"""
+    result = call_php_script(f'{script}.php')
+    if result:
+        return Response(result, mimetype='text/html')
+    return jsonify({'error': 'PHP script not found'}), 404
+
+# Static files
+@app.route('/assets/<path:filename>')
+def assets(filename):
+    return send_from_directory('assets', filename)
+
+@app.route('/css/<path:filename>')
+def css_files(filename):
+    return send_from_directory('css', filename)
+
+@app.route('/js/<path:filename>')
+def js_files(filename):
+    return send_from_directory('js', filename)
+
+# React integration
+@app.route('/react-app')
+def react_app():
+    return render_template('react-app.html')
+
+if __name__ == '__main__':
+    # Seed initial data
+    conn = get_db_connection()
+    if not conn.execute('SELECT COUNT(*) FROM projects').fetchone()[0]:
+        projects = [
+            ('AKIRA IA', 'Assistente virtual angolano com processamento de linguagem natural', 'Concluído', 'Python, TensorFlow, FastAPI'),
+            ('ERP Gestão Total', 'Sistema completo de gestão empresarial', 'Concluído', 'Laravel, Vue.js, MySQL'),
+            ('E-commerce ShopFast', 'Plataforma de vendas online de alta performance', 'Concluído', 'Next.js, Stripe, Prisma'),
+            ('Sistema de Gestão Escolar', 'Plataforma completa para gestão educacional', 'Em desenvolvimento', 'React, Node.js, PostgreSQL'),
+            ('App Mobile Delivery', 'Aplicativo de delivery com geolocalização', 'Em desenvolvimento', 'Flutter, Firebase, Google Maps')
+        ]
+        conn.executemany('INSERT INTO projects (title, description, status, technologies) VALUES (?, ?, ?, ?)', projects)
+        conn.commit()
+
+    # Create admin user
+    admin_email = os.environ.get('ADMIN_EMAIL', 'admin@softedge.com')
+    admin_password = os.environ.get('ADMIN_PASSWORD', 'Admin@123456')
+    admin_name = os.environ.get('ADMIN_NAME', 'Isaac Quarenta')
+
+    if not conn.execute('SELECT id FROM users WHERE email = ?', (admin_email,)).fetchone():
+        hashed_password = generate_password_hash(admin_password)
+        conn.execute('INSERT INTO users (email, password, name, role) VALUES (?, ?, ?, ?)',
+                     (admin_email, hashed_password, admin_name, 'super_admin'))
+        conn.commit()
+
+    conn.close()
+
+    print("🚀 SoftEdge Corporation - Hybrid Architecture Started!")
+    print("Technologies: Flask (Python) + PHP + Node.js + MySQL")
+    print("Server running on http://localhost:7860")
+
+    app.run(debug=True, host='0.0.0.0', port=int(os.environ.get('PORT', 7860)))

composer-schema.json

@@ -0,0 +1,25 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "type": "object",
+  "properties": {
+    "name": { "type": "string" },
+    "description": { "type": "string" },
+    "type": { "type": "string" },
+    "license": { "type": "string" },
+    "authors": {
+      "type": "array",
+      "items": {
+        "type": "object",
+        "properties": {
+          "name": { "type": "string" },
+          "email": { "type": "string" }
+        }
+      }
+    },
+    "require": { "type": "object" },
+    "require-dev": { "type": "object" },
+    "autoload": { "type": "object" },
+    "config": { "type": "object" },
+    "minimum-stability": { "type": "string" }
+  }
+}

composer.json

@@ -0,0 +1,34 @@
+{
+    "$schema": "./composer-schema.json",
+    "name": "softedge/softedge-corporation",
+    "description": "Professional website for SoftEdge Corporation - Modern web solutions with user management",
+    "type": "project",
+    "license": "MIT",
+    "authors": [
+        {
+            "name": "SoftEdge Corporation",
+            "email": "softedgecorporation@gmail.com"
+        }
+    ],
+    "require": {
+        "php": ">=8.1",
+        "phpmailer/phpmailer": "^6.8",
+        "monolog/monolog": "^3.0",
+        "vlucas/phpdotenv": "^5.5",
+        "firebase/php-jwt": "^6.4"
+    },
+    "require-dev": {
+        "phpunit/phpunit": "^10.0"
+    },
+    "autoload": {
+        "psr-4": {
+            "SoftEdge\\": "src/"
+        }
+    },
+    "config": {
+        "optimize-autoloader": true,
+        "prefer-stable": true,
+        "sort-packages": true
+    },
+    "minimum-stability": "stable"
+}

contato.php

@@ -0,0 +1,300 @@
+<?php
+require_once __DIR__ . '/src/Bootstrap.php';
+\SoftEdge\Env::load(__DIR__);
+\SoftEdge\Bootstrap::init();
+include 'components/header.php';
+?>
+
+<!-- HERO SECTION -->
+<section class="relative min-h-screen flex items-center justify-center overflow-hidden">
+  <!-- Background -->
+  <div class="absolute inset-0 -z-10">
+    <div class="absolute inset-0 bg-linear-to-br from-slate-950 via-slate-900 to-slate-950"></div>
+    <div class="absolute inset-0 opacity-30">
+      <div class="absolute top-1/4 left-1/4 w-96 h-96 bg-cyan-500/20 rounded-full blur-3xl animate-pulse"></div>
+      <div class="absolute bottom-1/4 right-1/4 w-96 h-96 bg-blue-500/20 rounded-full blur-3xl animate-pulse" style="animation-delay: 2s;"></div>
+      <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[600px] bg-purple-500/10 rounded-full blur-3xl"></div>
+    </div>
+  </div>
+
+  <!-- Content -->
+  <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20">
+    <div class="text-center space-y-12">
+      
+      <!-- Badge -->
+      <div class="inline-block px-4 py-2 bg-cyan-500/10 rounded-full border border-cyan-500/20 backdrop-blur-sm">
+        <span class="text-cyan-400 text-xs sm:text-sm font-semibold uppercase tracking-wider">
+          💬 Entre em Contato
+        </span>
+      </div>
+
+      <!-- Main Heading -->
+      <div class="space-y-6">
+        <h1 class="text-4xl sm:text-5xl md:text-6xl lg:text-7xl xl:text-8xl font-bold leading-tight">
+          <span class="block text-white mb-2">Vamos conversar</span>
+          <span class="block bg-linear-to-r from-cyan-400 via-blue-500 to-purple-500 bg-clip-text text-transparent">
+            sobre seu projeto?
+          </span>
+        </h1>
+        
+        <p class="text-base sm:text-lg md:text-xl text-gray-300 max-w-2xl mx-auto leading-relaxed">
+          Estamos prontos para transformar suas ideias em realidade.<br class="hidden sm:block">
+          Escolha o melhor canal para falar conosco.
+        </p>
+      </div>
+
+      <!-- Contact Cards Grid -->
+      <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-6 lg:gap-8 mt-16 max-w-5xl mx-auto">
+        
+        <!-- Card 1: Email -->
+        <a href="mailto:softedgecorporation@gmail.com" 
+           class="group relative">
+          <div class="absolute inset-0 bg-linear-to-br from-cyan-500/20 to-blue-500/20 rounded-2xl blur-xl opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
+          <div class="relative bg-slate-900/60 backdrop-blur-xl border border-white/10 hover:border-cyan-500/50 rounded-2xl p-8 transition-all duration-300 group-hover:scale-105 h-full flex flex-col items-center text-center">
+            <div class="w-16 h-16 bg-cyan-500/20 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
+              <i data-lucide="mail" class="w-8 h-8 text-cyan-400"></i>
+            </div>
+            <h3 class="text-xl font-bold text-white mb-3">Email Direto</h3>
+            <p class="text-gray-400 text-sm mb-4 grow">
+              Envie sua mensagem e receba resposta em até 24 horas
+            </p>
+            <div class="text-cyan-400 font-medium text-sm break-all">
+              softedgecorporation@gmail.com
+            </div>
+            <div class="mt-4 inline-flex items-center gap-2 text-cyan-400 text-sm font-medium">
+              <span>Enviar email</span>
+              <i data-lucide="arrow-right" class="w-4 h-4 group-hover:translate-x-1 transition-transform"></i>
+            </div>
+          </div>
+        </a>
+
+        <!-- Card 2: WhatsApp -->
+        <a href="https://whatsapp.com/channel/0029VawQLpGHltY2Y87fR83m" 
+           target="_blank"
+           rel="noopener noreferrer"
+           class="group relative">
+          <div class="absolute inset-0 bg-linear-to-br from-green-500/20 to-emerald-500/20 rounded-2xl blur-xl opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
+          <div class="relative bg-slate-900/60 backdrop-blur-xl border border-white/10 hover:border-green-500/50 rounded-2xl p-8 transition-all duration-300 group-hover:scale-105 h-full flex flex-col items-center text-center">
+            <div class="w-16 h-16 bg-green-500/20 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
+              <i data-lucide="message-circle" class="w-8 h-8 text-green-400"></i>
+            </div>
+            <h3 class="text-xl font-bold text-white mb-3">Canal WhatsApp</h3>
+            <p class="text-gray-400 text-sm mb-4 grow">
+              Junte-se ao nosso canal e receba novidades em primeira mão
+            </p>
+            <div class="inline-flex items-center gap-2 px-4 py-2 bg-green-500/20 border border-green-500/30 rounded-lg">
+              <i data-lucide="users" class="w-4 h-4 text-green-400"></i>
+              <span class="text-green-400 font-medium text-sm">Canal Oficial</span>
+            </div>
+            <div class="mt-4 inline-flex items-center gap-2 text-green-400 text-sm font-medium">
+              <span>Entrar agora</span>
+              <i data-lucide="arrow-right" class="w-4 h-4 group-hover:translate-x-1 transition-transform"></i>
+            </div>
+          </div>
+        </a>
+
+        <!-- Card 3: Twitter/X -->
+        <a href="https://x.com/softedge40" 
+           target="_blank"
+           rel="noopener noreferrer"
+           class="group relative sm:col-span-2 lg:col-span-1">
+          <div class="absolute inset-0 bg-linear-to-br from-blue-500/20 to-purple-500/20 rounded-2xl blur-xl opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
+          <div class="relative bg-slate-900/60 backdrop-blur-xl border border-white/10 hover:border-blue-500/50 rounded-2xl p-8 transition-all duration-300 group-hover:scale-105 h-full flex flex-col items-center text-center">
+            <div class="w-16 h-16 bg-blue-500/20 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
+              <i data-lucide="twitter" class="w-8 h-8 text-blue-400"></i>
+            </div>
+            <h3 class="text-xl font-bold text-white mb-3">Twitter / X</h3>
+            <p class="text-gray-400 text-sm mb-4 grow">
+              Siga-nos para dicas, projetos e conteúdo sobre tecnologia
+            </p>
+            <div class="text-blue-400 font-medium text-sm">
+              @softedge40
+            </div>
+            <div class="mt-4 inline-flex items-center gap-2 text-blue-400 text-sm font-medium">
+              <span>Seguir agora</span>
+              <i data-lucide="arrow-right" class="w-4 h-4 group-hover:translate-x-1 transition-transform"></i>
+            </div>
+          </div>
+        </a>
+      </div>
+
+      <!-- Divider -->
+      <div class="relative py-12">
+        <div class="absolute inset-0 flex items-center">
+          <div class="w-full border-t border-white/10"></div>
+        </div>
+        <div class="relative flex justify-center">
+          <span class="px-6 bg-slate-950 text-gray-400 text-sm uppercase tracking-wider">Ou</span>
+        </div>
+      </div>
+
+      <!-- CTA Section -->
+      <div class="max-w-3xl mx-auto">
+        <div class="relative">
+          <div class="absolute inset-0 bg-linear-to-r from-cyan-500/10 via-blue-500/10 to-purple-500/10 rounded-3xl blur-2xl"></div>
+          
+          <div class="relative bg-slate-900/60 backdrop-blur-xl border border-white/10 rounded-3xl p-8 lg:p-12">
+            <div class="space-y-6">
+              <div class="w-14 h-14 bg-linear-to-br from-cyan-500 to-blue-600 rounded-xl flex items-center justify-center mx-auto">
+                <i data-lucide="send" class="w-7 h-7 text-white"></i>
+              </div>
+              
+              <h2 class="text-2xl sm:text-3xl md:text-4xl font-bold text-white">
+                Prefere um formulário completo?
+              </h2>
+              
+              <p class="text-gray-300 text-base sm:text-lg">
+                Preencha nosso formulário de contato com todos os detalhes do seu projeto e receba uma resposta personalizada em até 24 horas.
+              </p>
+              
+              <a href="feedback.php"
+                 class="inline-flex items-center justify-center gap-3 bg-slate-700 hover:bg-slate-600 border border-slate-600 text-slate-200 font-medium text-lg px-8 py-4 rounded-lg transition-all duration-300">
+                Preencher Formulário
+                <i data-lucide="arrow-right" class="w-5 h-5"></i>
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Info Section -->
+      <div class="grid sm:grid-cols-3 gap-6 lg:gap-8 mt-16 max-w-4xl mx-auto">
+        <!-- Info 1 -->
+        <div class="text-center">
+          <div class="w-12 h-12 bg-cyan-500/10 rounded-xl flex items-center justify-center mx-auto mb-4">
+            <i data-lucide="clock" class="w-6 h-6 text-cyan-400"></i>
+          </div>
+          <h3 class="text-white font-semibold mb-2">Resposta Rápida</h3>
+          <p class="text-gray-400 text-sm">Até 24 horas úteis</p>
+        </div>
+
+        <!-- Info 2 -->
+        <div class="text-center">
+          <div class="w-12 h-12 bg-blue-500/10 rounded-xl flex items-center justify-center mx-auto mb-4">
+            <i data-lucide="shield-check" class="w-6 h-6 text-blue-400"></i>
+          </div>
+          <h3 class="text-white font-semibold mb-2">100% Seguro</h3>
+          <p class="text-gray-400 text-sm">Seus dados protegidos</p>
+        </div>
+
+        <!-- Info 3 -->
+        <div class="text-center">
+          <div class="w-12 h-12 bg-purple-500/10 rounded-xl flex items-center justify-center mx-auto mb-4">
+            <i data-lucide="headphones" class="w-6 h-6 text-purple-400"></i>
+          </div>
+          <h3 class="text-white font-semibold mb-2">Suporte 24/7</h3>
+          <p class="text-gray-400 text-sm">Sempre disponível</p>
+        </div>
+      </div>
+
+      <!-- Location -->
+      <div class="pt-12">
+        <div class="inline-flex items-center gap-2 text-gray-400">
+          <i data-lucide="map-pin" class="w-5 h-5"></i>
+          <span>Localizado em Luanda, Angola 🇦🇴</span>
+        </div>
+      </div>
+
+    </div>
+  </div>
+</section>
+
+<?php include 'components/footer.php'; ?>
+
+<!-- SCRIPTS -->
+<script src="https://unpkg.com/lucide@latest"></script>
+<script>
+  document.addEventListener('DOMContentLoaded', () => {
+    // Initialize Lucide icons
+    lucide.createIcons();
+
+    // Fade in animations on scroll
+    const observerOptions = {
+      threshold: 0.1,
+      rootMargin: '0px 0px -50px 0px'
+    };
+
+    const observer = new IntersectionObserver((entries) => {
+      entries.forEach(entry => {
+        if (entry.isIntersecting) {
+          entry.target.style.opacity = '1';
+          entry.target.style.transform = 'translateY(0)';
+        }
+      });
+    }, observerOptions);
+
+    // Observe all cards and sections
+    document.querySelectorAll('.group, section > div > div').forEach((el, index) => {
+      el.style.opacity = '0';
+      el.style.transform = 'translateY(20px)';
+      el.style.transition = `opacity 0.6s ease ${index * 0.1}s, transform 0.6s ease ${index * 0.1}s`;
+      observer.observe(el);
+    });
+
+    // Add click tracking (optional)
+    document.querySelectorAll('a[href^="mailto:"], a[href*="whatsapp"], a[href*="twitter"]').forEach(link => {
+      link.addEventListener('click', function(e) {
+        const channel = this.href.includes('mailto') ? 'Email' : 
+                       this.href.includes('whatsapp') ? 'WhatsApp' : 'Twitter';
+        console.log(`Usuário clicou em: ${channel}`);
+      });
+    });
+  });
+</script>
+
+<style>
+  /* Gradient animation */
+  @keyframes gradient-shift {
+    0%, 100% {
+      background-position: 0% 50%;
+    }
+    50% {
+      background-position: 100% 50%;
+    }
+  }
+
+  .bg-linear-to-r,
+  .bg-linear-to-br {
+    background-size: 200% 200%;
+    animation: gradient-shift 8s ease infinite;
+  }
+
+  /* Pulse animation for background orbs */
+  @keyframes pulse-slow {
+    0%, 100% {
+      opacity: 0.3;
+      transform: scale(1);
+    }
+    50% {
+      opacity: 0.5;
+      transform: scale(1.1);
+    }
+  }
+
+  .animate-pulse {
+    animation: pulse-slow 8s ease-in-out infinite;
+  }
+
+  /* Smooth hover transitions */
+  .group {
+    will-change: transform;
+  }
+
+  /* Custom scrollbar */
+  ::-webkit-scrollbar {
+    width: 10px;
+  }
+
+  ::-webkit-scrollbar-track {
+    background: #0f172a;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background: linear-gradient(180deg, #06b6d4, #3b82f6);
+    border-radius: 5px;
+  }
+
+  ::-webkit-scrollbar-thumb:hover {
+    background: linear-gradient(180deg, #0891b2, #2563eb);
+  }
+</style>

dev.sh

@@ -0,0 +1,58 @@
+#!/bin/bash
+
+# SoftEdge Corporation - Development Script
+# This script sets up the development environment for React integration
+
+echo "🚀 Starting SoftEdge Corporation Development Environment"
+echo "======================================================"
+
+# Check if Node.js is installed
+if ! command -v node &> /dev/null; then
+    echo "❌ Node.js is not installed. Please install Node.js first."
+    exit 1
+fi
+
+# Check if npm is installed
+if ! command -v npm &> /dev/null; then
+    echo "❌ npm is not installed. Please install npm first."
+    exit 1
+fi
+
+echo "✅ Node.js version: $(node --version)"
+echo "✅ npm version: $(npm --version)"
+
+# Install dependencies
+echo ""
+echo "📦 Installing dependencies..."
+npm install
+
+if [ $? -ne 0 ]; then
+    echo "❌ Failed to install dependencies"
+    exit 1
+fi
+
+echo "✅ Dependencies installed successfully"
+
+# Build React app
+echo ""
+echo "🔨 Building React application..."
+npm run build
+
+if [ $? -ne 0 ]; then
+    echo "❌ Failed to build React application"
+    exit 1
+fi
+
+echo "✅ React application built successfully"
+
+# Start development server (optional)
+echo ""
+echo "💡 Development environment ready!"
+echo ""
+echo "To start the development server, run:"
+echo "  npm run dev"
+echo ""
+echo "To build for production:"
+echo "  npm run build"
+echo ""
+echo "The built files are in the 'dist/' directory and can be served by your PHP application."

feedback.php

@@ -0,0 +1,163 @@
+<?php
+// Autoload Composer dependencies
+require_once __DIR__ . '/vendor/autoload.php';
+
+// Load environment variables if .env exists
+if (file_exists(__DIR__ . '/.env')) {
+    $dotenv = Dotenv\Dotenv::createImmutable(__DIR__);
+    $dotenv->load();
+}
+
+// Generate CSRF token for the form (must be before any output)
+if (session_status() === PHP_SESSION_NONE) {
+    session_start();
+}
+$_SESSION['csrf_token'] = bin2hex(random_bytes(32));
+
+// PROCESSAMENTO DO ENVIO DE EMAIL
+if ($_SERVER['REQUEST_METHOD'] === 'POST') {
+    header('Content-Type: application/json');
+    header('X-Content-Type-Options: nosniff');
+    header('X-Frame-Options: DENY');
+    header('X-XSS-Protection: 1; mode=block');
+
+    try {
+        // Rate limiting - prevent spam
+        $rateLimitFile = __DIR__ . '/logs/rate_limit_' . md5($_SERVER['REMOTE_ADDR'] ?? 'unknown') . '.txt';
+        $currentTime = time();
+
+        if (file_exists($rateLimitFile)) {
+            $lastRequest = (int)file_get_contents($rateLimitFile);
+            if ($currentTime - $lastRequest < 60) { // 1 minute cooldown
+                echo json_encode(['success' => false, 'error' => 'Aguarde um momento antes de enviar outra mensagem.']);
+                exit;
+            }
+        }
+
+        // Update rate limit
+        file_put_contents($rateLimitFile, $currentTime);
+
+        // Sanitize and validate input
+        $nome = trim($_POST['nome'] ?? '');
+        $email = trim($_POST['email'] ?? '');
+        $empresa = trim($_POST['empresa'] ?? '(não informado)');
+        $mensagem = trim($_POST['mensagem'] ?? '');
+
+        // CSRF protection (basic)
+        $csrfToken = $_POST['csrf_token'] ?? '';
+        $sessionToken = $_SESSION['csrf_token'] ?? '';
+
+        if (empty($csrfToken) || $csrfToken !== $sessionToken) {
+            echo json_encode(['success' => false, 'error' => 'Erro de segurança. Recarregue a página e tente novamente.']);
+            exit;
+        }
+
+        // Prepare data for email service
+        $contactData = [
+            'nome' => $nome,
+            'email' => $email,
+            'empresa' => $empresa,
+            'mensagem' => $mensagem
+        ];
+
+        // Use professional email service
+        $emailService = new \SoftEdge\EmailService();
+
+        if ($emailService->sendContactEmail($contactData)) {
+            echo json_encode(['success' => true]);
+        } else {
+            echo json_encode(['success' => false, 'error' => 'Erro ao enviar mensagem. Por favor, tente novamente ou entre em contato via WhatsApp.']);
+        }
+
+    } catch (\InvalidArgumentException $e) {
+        echo json_encode(['success' => false, 'error' => $e->getMessage()]);
+    } catch (\Exception $e) {
+        error_log('Contact form error: ' . $e->getMessage());
+        echo json_encode(['success' => false, 'error' => 'Erro interno do servidor. Nossa equipe foi notificada.']);
+    }
+
+    exit;
+}
+?>
+=======
+<?php
+// Autoload Composer dependencies
+require_once __DIR__ . '/vendor/autoload.php';
+
+// Load environment variables if .env exists
+if (file_exists(__DIR__ . '/.env')) {
+    $dotenv = Dotenv\Dotenv::createImmutable(__DIR__);
+    $dotenv->load();
+}
+
+// PROCESSAMENTO DO ENVIO DE EMAIL
+if ($_SERVER['REQUEST_METHOD'] === 'POST') {
+    header('Content-Type: application/json');
+    header('X-Content-Type-Options: nosniff');
+    header('X-Frame-Options: DENY');
+    header('X-XSS-Protection: 1; mode=block');
+
+    try {
+        // Rate limiting - prevent spam
+        $rateLimitFile = __DIR__ . '/logs/rate_limit_' . md5($_SERVER['REMOTE_ADDR'] ?? 'unknown') . '.txt';
+        $currentTime = time();
+
+        if (file_exists($rateLimitFile)) {
+            $lastRequest = (int)file_get_contents($rateLimitFile);
+            if ($currentTime - $lastRequest < 60) { // 1 minute cooldown
+                echo json_encode(['success' => false, 'error' => 'Aguarde um momento antes de enviar outra mensagem.']);
+                exit;
+            }
+        }
+
+        // Update rate limit
+        file_put_contents($rateLimitFile, $currentTime);
+
+        // Sanitize and validate input
+        $nome = trim($_POST['nome'] ?? '');
+        $email = trim($_POST['email'] ?? '');
+        $empresa = trim($_POST['empresa'] ?? '(não informado)');
+        $mensagem = trim($_POST['mensagem'] ?? '');
+
+        // CSRF protection (basic)
+        $csrfToken = $_POST['csrf_token'] ?? '';
+        $sessionToken = $_SESSION['csrf_token'] ?? '';
+
+        if (empty($csrfToken) || $csrfToken !== $sessionToken) {
+            echo json_encode(['success' => false, 'error' => 'Erro de segurança. Recarregue a página e tente novamente.']);
+            exit;
+        }
+
+        // Prepare data for email service
+        $contactData = [
+            'nome' => $nome,
+            'email' => $email,
+            'empresa' => $empresa,
+            'mensagem' => $mensagem
+        ];
+
+        // Use professional email service
+        $emailService = new \SoftEdge\EmailService();
+
+        if ($emailService->sendContactEmail($contactData)) {
+            echo json_encode(['success' => true]);
+        } else {
+            echo json_encode(['success' => false, 'error' => 'Erro ao enviar mensagem. Por favor, tente novamente ou entre em contato via WhatsApp.']);
+        }
+
+    } catch (\InvalidArgumentException $e) {
+        echo json_encode(['success' => false, 'error' => $e->getMessage()]);
+    } catch (\Exception $e) {
+        error_log('Contact form error: ' . $e->getMessage());
+        echo json_encode(['success' => false, 'error' => 'Erro interno do servidor. Nossa equipe foi notificada.']);
+    }
+
+    exit;
+}
+
+// Generate CSRF token for the form
+if (session_status() === PHP_SESSION_NONE) {
+    session_start();
+}
+$_SESSION['csrf_token'] = bin2hex(random_bytes(32));
+?>

health.php

@@ -0,0 +1,59 @@
+<?php
+// Health Check Endpoint for Render.com
+// This keeps the service active by preventing sleep mode
+
+header('Content-Type: application/json');
+header('Cache-Control: no-cache, no-store, must-revalidate');
+header('Pragma: no-cache');
+header('Expires: 0');
+
+// Basic health check
+$health = [
+    'status' => 'healthy',
+    'timestamp' => date('c'),
+    'service' => 'SoftEdge Corporation Website',
+    'version' => '2.0.0',
+    'uptime' => time() - ($_SERVER['REQUEST_TIME'] ?? time()),
+    'checks' => [
+        'database' => 'not_required',
+        'filesystem' => is_writable(__DIR__) ? 'writable' : 'read_only',
+        'php' => PHP_VERSION,
+        'memory' => memory_get_peak_usage(true) . ' bytes',
+        'server' => $_SERVER['SERVER_SOFTWARE'] ?? 'unknown'
+    ]
+];
+
+// Check if critical files exist
+$criticalFiles = [
+    'index.php',
+    'composer.json',
+    'vendor/autoload.php',
+    'assets/logo.jpeg'
+];
+
+foreach ($criticalFiles as $file) {
+    if (!file_exists(__DIR__ . '/' . $file)) {
+        $health['status'] = 'degraded';
+        $health['checks']['missing_files'][] = $file;
+    }
+}
+
+// Check if email service is configured
+$emailConfigured = false;
+if (file_exists(__DIR__ . '/.env')) {
+    $envContent = file_get_contents(__DIR__ . '/.env');
+    $emailConfigured = strpos($envContent, 'SMTP_HOST=') !== false;
+}
+$health['checks']['email_configured'] = $emailConfigured;
+
+// Return appropriate HTTP status
+if ($health['status'] === 'healthy') {
+    http_response_code(200);
+} elseif ($health['status'] === 'degraded') {
+    http_response_code(200); // Still return 200 for uptime monitors
+} else {
+    http_response_code(503);
+}
+
+echo json_encode($health, JSON_PRETTY_PRINT);
+?>

index.php

@@ -0,0 +1,100 @@
+<?php
+// PHP Component - Can be called by Flask or run standalone
+require_once __DIR__ . '/src/Bootstrap.php';
+\SoftEdge\Env::load(__DIR__);
+\SoftEdge\Bootstrap::init();
+
+// If called directly (not by Flask), redirect to Flask server
+if (!isset($_SERVER['HTTP_X_FORWARDED_FOR']) && !isset($_GET['direct'])) {
+    header('Location: http://localhost:7860/');
+    exit;
+}
+
+// Track page visit
+try {
+    \SoftEdge\Database::execute(
+        "INSERT INTO page_visits (page_url, page_title, ip_address, user_agent, device_type, referrer_url) VALUES (?, ?, ?, ?, ?, ?)",
+        [
+            '/',
+            'SoftEdge Corporation - Soluções em Tecnologia',
+            $_SERVER['REMOTE_ADDR'] ?? '',
+            $_SERVER['HTTP_USER_AGENT'] ?? '',
+            'desktop', // Simplified detection
+            $_SERVER['HTTP_REFERER'] ?? ''
+        ]
+    );
+} catch (Exception $e) {
+    // Log error but don't break page
+    error_log("Page visit tracking failed: " . $e->getMessage());
+}
+
+// Get dynamic stats
+$stats = ['projects' => 0, 'contacts' => 0, 'satisfaction' => 4.9];
+try {
+    $statsData = \SoftEdge\Database::queryOne("SELECT COUNT(*) as projects FROM projects");
+    $contactsData = \SoftEdge\Database::queryOne("SELECT COUNT(*) as contacts FROM contact_submissions");
+    $stats['projects'] = $statsData['projects'] ?? 0;
+    $stats['contacts'] = $contactsData['contacts'] ?? 0;
+} catch (Exception $e) {
+    // Use defaults if DB fails
+}
+
+// If called with JSON request, return data for Flask
+if (isset($_GET['json'])) {
+    header('Content-Type: application/json');
+    echo json_encode($stats);
+    exit;
+}
+
+// Otherwise, render the component HTML
+?>
+<!-- PHP Component: Homepage Stats -->
+<div class="grid grid-cols-1 sm:grid-cols-3 gap-8 max-w-2xl mx-auto mt-12">
+  <div class="text-center">
+    <div class="text-4xl font-bold text-cyan-400"><?php echo number_format($stats['projects']); ?>+</div>
+    <div class="text-slate-400">Projetos Entregues</div>
+  </div>
+  <div class="text-center">
+    <div class="text-4xl font-bold text-blue-400"><?php echo number_format($stats['contacts']); ?>+</div>
+    <div class="text-slate-400">Clientes Satisfeitos</div>
+  </div>
+  <div class="text-center">
+    <div class="text-4xl font-bold text-purple-400"><?php echo $stats['satisfaction']; ?>★</div>
+    <div class="text-slate-400">Avaliação Média</div>
+  </div>
+</div>
+
+<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mt-16">
+  <!-- Desenvolvimento Web -->
+  <div class="glass-card p-8 rounded-2xl hover:scale-105 transition-transform">
+    <div class="w-16 h-16 bg-cyan-500/20 rounded-2xl flex items-center justify-center mb-6">
+      <i data-lucide="code" class="w-8 h-8 text-cyan-400"></i>
+    </div>
+    <h3 class="text-2xl font-bold text-white mb-4">Desenvolvimento Web</h3>
+    <p class="text-slate-400 leading-relaxed">
+      Aplicações web modernas e responsivas com as melhores tecnologias do mercado.
+    </p>
+  </div>
+
+  <!-- Mobile Apps -->
+  <div class="glass-card p-8 rounded-2xl hover:scale-105 transition-transform">
+    <div class="w-16 h-16 bg-blue-500/20 rounded-2xl flex items-center justify-center mb-6">
+      <i data-lucide="smartphone" class="w-8 h-8 text-blue-400"></i>
+    </div>
+    <h3 class="text-2xl font-bold text-white mb-4">Aplicativos Mobile</h3>
+    <p class="text-slate-400 leading-relaxed">
+      Apps nativos e multiplataforma para iOS e Android com experiência excepcional.
+    </p>
+  </div>
+
+  <!-- IA & Automação -->
+  <div class="glass-card p-8 rounded-2xl hover:scale-105 transition-transform">
+    <div class="w-16 h-16 bg-purple-500/20 rounded-2xl flex items-center justify-center mb-6">
+      <i data-lucide="brain" class="w-8 h-8 text-purple-400"></i>
+    </div>
+    <h3 class="text-2xl font-bold text-white mb-4">IA & Automação</h3>
+    <p class="text-slate-400 leading-relaxed">
+      Soluções de inteligência artificial e automação para otimizar processos.
+    </p>
+  </div>
+</div>

keep-alive.js

@@ -0,0 +1,76 @@
+// Keep-Alive Script for Render.com
+// Prevents sleep mode by pinging health endpoint every 4 minutes
+
+const https = require('https');
+const http = require('http');
+
+const SITE_URL = process.env.SITE_URL || 'https://softedge.onrender.com';
+const HEALTH_ENDPOINT = '/health.php';
+const INTERVAL_MINUTES = 4; // Ping every 4 minutes (under Render's 5-minute limit)
+
+function pingHealthEndpoint() {
+    const url = new URL(HEALTH_ENDPOINT, SITE_URL);
+    const client = url.protocol === 'https:' ? https : http;
+
+    const options = {
+        hostname: url.hostname,
+        port: url.port,
+        path: url.pathname,
+        method: 'GET',
+        headers: {
+            'User-Agent': 'SoftEdge-KeepAlive/1.0',
+            'Accept': 'application/json'
+        }
+    };
+
+    const req = client.request(options, (res) => {
+        let data = '';
+
+        res.on('data', (chunk) => {
+            data += chunk;
+        });
+
+        res.on('end', () => {
+            try {
+                const health = JSON.parse(data);
+                console.log(`[${new Date().toISOString()}] Health check: ${health.status} - Uptime: ${health.uptime}s`);
+            } catch (e) {
+                console.log(`[${new Date().toISOString()}] Health check response received`);
+            }
+        });
+    });
+
+    req.on('error', (err) => {
+        console.error(`[${new Date().toISOString()}] Health check failed:`, err.message);
+    });
+
+    req.setTimeout(10000, () => {
+        req.destroy();
+        console.error(`[${new Date().toISOString()}] Health check timeout`);
+    });
+
+    req.end();
+}
+
+// Start the keep-alive process
+console.log(`Starting SoftEdge Keep-Alive service`);
+console.log(`Pinging ${SITE_URL}${HEALTH_ENDPOINT} every ${INTERVAL_MINUTES} minutes`);
+console.log(`Press Ctrl+C to stop`);
+
+// Initial ping
+pingHealthEndpoint();
+
+// Set up interval
+const intervalMs = INTERVAL_MINUTES * 60 * 1000;
+setInterval(pingHealthEndpoint, intervalMs);
+
+// Handle graceful shutdown
+process.on('SIGINT', () => {
+    console.log(`\n[${new Date().toISOString()}] SoftEdge Keep-Alive service stopped`);
+    process.exit(0);
+});
+
+process.on('SIGTERM', () => {
+    console.log(`\n[${new Date().toISOString()}] SoftEdge Keep-Alive service terminated`);
+    process.exit(0);
+});

login.php

@@ -0,0 +1,5 @@
+<?php
+// Redirect to Flask authentication
+header('Location: /admin');
+exit;
+?>

package.json

@@ -0,0 +1,85 @@
+{
+  "name": "softedge-corporation",
+  "version": "2.0.0",
+  "description": "Website institucional da SoftEdge Corporation com integração React + PHP",
+  "main": "src/react/index.js",
+  "scripts": {
+    "start": "webpack serve --mode development --open",
+    "build": "webpack --mode production",
+    "dev": "webpack --mode development --watch",
+    "full-dev": "concurrently \"npm run dev\" \"cd .. && php -S localhost:8080\"",
+    "lint": "eslint src/react --ext .js,.jsx",
+    "test": "jest",
+    "analyze": "webpack-bundle-analyzer dist/static/js/*.js"
+  },
+  "keywords": [
+    "softedge",
+    "corporation",
+    "react",
+    "php",
+    "web-development",
+    "full-stack"
+  ],
+  "author": "SoftEdge Corporation",
+  "license": "MIT",
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.8.0",
+    "axios": "^1.3.0",
+    "lucide-react": "^0.144.0",
+    "framer-motion": "^10.12.0",
+    "react-intersection-observer": "^9.5.0",
+    "react-helmet-async": "^1.3.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.21.0",
+    "@babel/preset-env": "^7.20.0",
+    "@babel/preset-react": "^7.18.0",
+    "@babel/plugin-proposal-class-properties": "^7.18.0",
+    "@babel/plugin-proposal-object-rest-spread": "^7.20.0",
+    "babel-loader": "^9.1.0",
+    "webpack": "^5.75.0",
+    "webpack-cli": "^5.0.0",
+    "webpack-dev-server": "^4.11.0",
+    "html-webpack-plugin": "^5.5.0",
+    "mini-css-extract-plugin": "^2.7.0",
+    "css-loader": "^6.7.0",
+    "style-loader": "^3.3.0",
+    "postcss-loader": "^7.0.0",
+    "autoprefixer": "^10.4.0",
+    "cssnano": "^6.0.0",
+    "terser-webpack-plugin": "^5.3.0",
+    "css-minimizer-webpack-plugin": "^4.2.0",
+    "webpack-bundle-analyzer": "^4.7.0",
+    "concurrently": "^7.6.0",
+    "eslint": "^8.34.0",
+    "eslint-plugin-react": "^7.32.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "jest": "^29.4.0",
+    "@testing-library/react": "^13.4.0",
+    "@testing-library/jest-dom": "^5.16.0",
+    "postcss": "^8.4.0"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "engines": {
+    "node": ">=16.0.0",
+    "npm": ">=8.0.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/akira40-soft/Softedge.git"
+  },
+  "homepage": "https://softedge-corporation.up.railway.app"
+}

php.ini

@@ -0,0 +1,67 @@
+; SoftEdge Corporation - PHP Configuration
+; This file contains PHP settings optimized for production
+
+; Error Handling
+display_errors = Off
+display_startup_errors = Off
+error_reporting = E_ALL & ~E_DEPRECATED & ~E_STRICT
+log_errors = On
+error_log = /var/www/html/logs/php_errors.log
+
+; Performance
+max_execution_time = 300
+max_input_time = 60
+memory_limit = 256M
+post_max_size = 10M
+upload_max_filesize = 10M
+max_file_uploads = 20
+
+; Security
+expose_php = Off
+allow_url_fopen = On
+allow_url_include = Off
+disable_functions = exec,passthru,shell_exec,system,proc_open,popen,curl_exec,curl_multi_exec,parse_ini_file,show_source
+open_basedir = /var/www/html:/tmp
+
+; Sessions
+session.save_path = /tmp
+session.gc_probability = 1
+session.gc_divisor = 1000
+session.gc_maxlifetime = 1440
+session.cookie_httponly = 1
+session.cookie_secure = 1
+session.use_only_cookies = 1
+session.cookie_samesite = "Lax"
+
+; File Uploads
+file_uploads = On
+upload_tmp_dir = /tmp
+
+; Date/Time
+date.timezone = "Africa/Luanda"
+
+; Mail
+SMTP = localhost
+smtp_port = 25
+mail.add_x_header = On
+
+; Extensions
+extension=mbstring
+extension=exif
+extension=pdo
+extension=pdo_mysql
+extension=gd
+extension=zip
+extension=xml
+extension=curl
+extension=intl
+extension=bcmath
+
+; OPcache (if available)
+opcache.enable=1
+opcache.memory_consumption=256
+opcache.max_accelerated_files=7963
+opcache.revalidate_freq=0
+opcache.validate_timestamps=0
+opcache.consistency_checks=0
+opcache.error_log=/var/www/html/logs/opcache.log

projetos.php

@@ -0,0 +1,444 @@
+<?php
+require_once __DIR__ . '/src/Bootstrap.php';
+\SoftEdge\Env::load(__DIR__);
+\SoftEdge\Bootstrap::init();
+include 'components/header.php';
+?>
+
+<!-- HERO SECTION -->
+<section class="relative pt-32 pb-20 overflow-hidden">
+  <!-- Background -->
+  <div class="absolute inset-0 -z-10">
+    <div class="absolute inset-0 bg-linear-to-br from-slate-950 via-slate-900 to-slate-950"></div>
+    <div class="absolute inset-0 opacity-30">
+      <div class="absolute top-20 left-20 w-96 h-96 bg-purple-500/20 rounded-full blur-3xl"></div>
+      <div class="absolute bottom-20 right-20 w-96 h-96 bg-cyan-500/20 rounded-full blur-3xl"></div>
+    </div>
+  </div>
+
+  <!-- Content -->
+  <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
+    <div class="space-y-6">
+      <div class="inline-block px-4 py-2 bg-purple-500/10 rounded-full border border-purple-500/20 mb-4">
+        <span class="text-purple-400 text-sm font-semibold uppercase tracking-wider">Portfolio</span>
+      </div>
+      
+      <h1 class="text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-bold leading-tight">
+        Projetos que
+        <span class="block bg-linear-to-r from-cyan-400 via-blue-500 to-purple-500 bg-clip-text text-transparent">
+          transformam negócios
+        </span>
+      </h1>
+      
+      <p class="text-base sm:text-lg md:text-xl text-gray-300 max-w-3xl mx-auto leading-relaxed">
+        Conheça algumas das soluções que desenvolvemos e que já estão transformando negócios reais.
+      </p>
+    </div>
+  </div>
+</section>
+
+<!-- MAIN CONTENT -->
+<main class="relative py-20 lg:py-32">
+  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+
+    <!-- PROJETO DESTAQUE: AKIRA IA -->
+    <div class="mb-20 lg:mb-32">
+      <div class="relative">
+        <div class="absolute inset-0 bg-linear-to-r from-purple-500/20 via-pink-500/20 to-cyan-500/20 rounded-3xl blur-3xl"></div>
+        
+        <div class="relative bg-slate-900/80 backdrop-blur-xl border border-purple-500/30 rounded-3xl overflow-hidden">
+          <!-- Badge Destaque -->
+          <div class="absolute top-6 right-6 z-10 px-4 py-2 bg-purple-500 rounded-full border border-purple-400 shadow-lg">
+            <span class="text-white text-sm font-bold uppercase tracking-wider flex items-center gap-2">
+              <i data-lucide="star" class="w-4 h-4"></i>
+              Projeto Destaque
+            </span>
+          </div>
+
+          <div class="grid lg:grid-cols-2 gap-8 lg:gap-12 p-8 lg:p-12">
+            
+            <!-- Left: Info -->
+            <div class="flex flex-col justify-center space-y-6">
+              <div>
+                <div class="inline-flex items-center gap-2 px-3 py-1 bg-purple-500/20 border border-purple-500/30 rounded-full mb-4">
+                  <i data-lucide="brain" class="w-4 h-4 text-purple-400"></i>
+                  <span class="text-purple-400 text-xs font-semibold uppercase">Inteligência Artificial</span>
+                </div>
+                
+                <h2 class="text-3xl sm:text-4xl md:text-5xl font-bold text-white mb-4">
+                  AKIRA IA
+                  <span class="block text-2xl sm:text-3xl text-gray-400 mt-2">🇦🇴 100% Angolana</span>
+                </h2>
+              </div>
+
+              <p class="text-gray-300 text-lg leading-relaxed">
+                Uma inteligência artificial autônoma desenvolvida inteiramente pela SoftEdge, projetada para conversar naturalmente com usuários, entender contexto e fornecer respostas precisas e humanizadas.
+              </p>
+
+              <!-- Features -->
+              <div class="space-y-3">
+                <div class="flex items-start gap-3">
+                  <i data-lucide="check-circle" class="w-5 h-5 text-purple-400 shrink-0 mt-1"></i>
+                  <span class="text-gray-300">Processamento de linguagem natural (NLP)</span>
+                </div>
+                <div class="flex items-start gap-3">
+                  <i data-lucide="check-circle" class="w-5 h-5 text-purple-400 shrink-0 mt-1"></i>
+                  <span class="text-gray-300">Aprendizado contínuo com conversas</span>
+                </div>
+                <div class="flex items-start gap-3">
+                  <i data-lucide="check-circle" class="w-5 h-5 text-purple-400 shrink-0 mt-1"></i>
+                  <span class="text-gray-300">Integração com WhatsApp e plataformas web</span>
+                </div>
+                <div class="flex items-start gap-3">
+                  <i data-lucide="check-circle" class="w-5 h-5 text-purple-400 shrink-0 mt-1"></i>
+                  <span class="text-gray-300">Personalidade única e respostas contextualizadas</span>
+                </div>
+              </div>
+
+              <!-- Tech Stack -->
+              <div>
+                <p class="text-sm text-gray-400 mb-3 font-medium">Tecnologias:</p>
+                <div class="flex flex-wrap gap-2">
+                  <span class="px-4 py-2 bg-purple-500/20 border border-purple-500/30 rounded-lg text-purple-400 text-sm font-medium">Python</span>
+                  <span class="px-4 py-2 bg-pink-500/20 border border-pink-500/30 rounded-lg text-pink-400 text-sm font-medium">TensorFlow</span>
+                  <span class="px-4 py-2 bg-cyan-500/20 border border-cyan-500/30 rounded-lg text-cyan-400 text-sm font-medium">OpenAI API</span>
+                  <span class="px-4 py-2 bg-blue-500/20 border border-blue-500/30 rounded-lg text-blue-400 text-sm font-medium">FastAPI</span>
+                </div>
+              </div>
+            </div>
+
+            <!-- Right: Main Image -->
+            <div class="relative group">
+              <div class="absolute inset-0 bg-linear-to-br from-purple-500/30 to-pink-500/30 rounded-2xl blur-xl opacity-50 group-hover:opacity-100 transition-opacity"></div>
+              <div class="relative overflow-hidden rounded-2xl border border-white/10 shadow-2xl">
+                <img src="/assets/akira.jpg" 
+                     alt="AKIRA IA - Interface Principal" 
+                     class="w-full h-auto object-cover transition-transform duration-700 group-hover:scale-105">
+                <div class="absolute inset-0 bg-linear-to-t from-black/60 to-transparent"></div>
+                <div class="absolute bottom-4 left-4 right-4">
+                  <p class="text-white font-semibold text-lg">Interface Principal da AKIRA</p>
+                  <p class="text-gray-300 text-sm">Conversando com usuários em tempo real</p>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Gallery Section -->
+          <div class="border-t border-white/10 p-8 lg:p-12 bg-black/20">
+            <h3 class="text-2xl font-bold text-white mb-6 flex items-center gap-3">
+              <i data-lucide="image" class="w-6 h-6 text-purple-400"></i>
+              Galeria de Conversas
+            </h3>
+            
+            <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
+              <!-- Gallery Image 1 -->
+              <div class="group relative overflow-hidden rounded-xl border border-white/10 hover:border-purple-500/50 transition-all cursor-pointer">
+                <img src="/assets/akira1.jpg" 
+                     alt="AKIRA IA - Conversa 1" 
+                     class="w-full h-48 object-cover transition-transform duration-500 group-hover:scale-110">
+                <div class="absolute inset-0 bg-black/60 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
+                  <i data-lucide="maximize-2" class="w-8 h-8 text-white"></i>
+                </div>
+              </div>
+
+              <!-- Gallery Image 2 -->
+              <div class="group relative overflow-hidden rounded-xl border border-white/10 hover:border-purple-500/50 transition-all cursor-pointer">
+                <img src="/assets/akira2.jpg" 
+                     alt="AKIRA IA - Conversa 2" 
+                     class="w-full h-48 object-cover transition-transform duration-500 group-hover:scale-110">
+                <div class="absolute inset-0 bg-black/60 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
+                  <i data-lucide="maximize-2" class="w-8 h-8 text-white"></i>
+                </div>
+              </div>
+
+              <!-- Gallery Image 3 -->
+              <div class="group relative overflow-hidden rounded-xl border border-white/10 hover:border-purple-500/50 transition-all cursor-pointer">
+                <img src="/assets/akira3.jpg" 
+                     alt="AKIRA IA - Conversa 3" 
+                     class="w-full h-48 object-cover transition-transform duration-500 group-hover:scale-110">
+                <div class="absolute inset-0 bg-black/60 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
+                  <i data-lucide="maximize-2" class="w-8 h-8 text-white"></i>
+                </div>
+              </div>
+
+              <!-- Gallery Image 4 -->
+              <div class="group relative overflow-hidden rounded-xl border border-white/10 hover:border-purple-500/50 transition-all cursor-pointer">
+                <img src="/assets/akira4.jpg" 
+                     alt="AKIRA IA - Conversa 4" 
+                     class="w-full h-48 object-cover transition-transform duration-500 group-hover:scale-110">
+                <div class="absolute inset-0 bg-black/60 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
+                  <i data-lucide="maximize-2" class="w-8 h-8 text-white"></i>
+                </div>
+              </div>
+            </div>
+
+            <p class="text-gray-400 text-sm mt-4 text-center italic">
+              Clique nas imagens para ampliar e ver detalhes das conversas
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- OUTROS PROJETOS -->
+    <div>
+      <div class="text-center mb-12 lg:mb-16">
+        <div class="inline-block px-4 py-2 bg-cyan-500/10 rounded-full border border-cyan-500/20 mb-4">
+          <span class="text-cyan-400 text-sm font-semibold uppercase tracking-wider">Mais Projetos</span>
+        </div>
+        <h2 class="text-3xl sm:text-4xl md:text-5xl font-bold text-white">
+          Outros projetos desenvolvidos
+        </h2>
+      </div>
+
+      <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-6 lg:gap-8">
+
+        <!-- PROJETO 1: ERP -->
+        <div class="group relative">
+          <div class="absolute inset-0 bg-linear-to-br from-cyan-500/20 to-blue-500/20 rounded-2xl blur-xl opacity-0 group-hover:opacity-100 transition-opacity"></div>
+          <div class="relative bg-linear-to-br from-cyan-600/20 to-blue-600/20 rounded-2xl overflow-hidden border border-white/10 hover:border-cyan-500/30 transition-all h-full">
+            <div class="p-8 h-80 flex flex-col justify-between">
+              <div>
+                <div class="w-14 h-14 bg-cyan-500/20 rounded-xl flex items-center justify-center mb-4">
+                  <i data-lucide="layout-dashboard" class="w-7 h-7 text-cyan-400"></i>
+                </div>
+                <h3 class="text-2xl font-bold text-white mb-3">Gestão Total ERP</h3>
+                <p class="text-gray-300 leading-relaxed mb-4">
+                  Sistema completo de gestão empresarial com controle financeiro, estoque e CRM integrado.
+                </p>
+              </div>
+              
+              <div class="space-y-3">
+                <div class="flex flex-wrap gap-2">
+                  <span class="px-3 py-1 bg-cyan-500/20 rounded-full text-cyan-400 text-xs font-medium">Laravel</span>
+                  <span class="px-3 py-1 bg-blue-500/20 rounded-full text-blue-400 text-xs font-medium">Vue.js</span>
+                  <span class="px-3 py-1 bg-purple-500/20 rounded-full text-purple-400 text-xs font-medium">MySQL</span>
+                </div>
+                <div class="flex items-center gap-2 text-gray-400 text-sm">
+                  <i data-lucide="calendar" class="w-4 h-4"></i>
+                  <span>Concluído em 2024</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- PROJETO 2: E-commerce -->
+        <div class="group relative">
+          <div class="absolute inset-0 bg-linear-to-br from-purple-500/20 to-pink-500/20 rounded-2xl blur-xl opacity-0 group-hover:opacity-100 transition-opacity"></div>
+          <div class="relative bg-linear-to-br from-purple-600/20 to-pink-600/20 rounded-2xl overflow-hidden border border-white/10 hover:border-purple-500/30 transition-all h-full">
+            <div class="p-8 h-80 flex flex-col justify-between">
+              <div>
+                <div class="w-14 h-14 bg-purple-500/20 rounded-xl flex items-center justify-center mb-4">
+                  <i data-lucide="shopping-cart" class="w-7 h-7 text-purple-400"></i>
+                </div>
+                <h3 class="text-2xl font-bold text-white mb-3">ShopFast E-commerce</h3>
+                <p class="text-gray-300 leading-relaxed mb-4">
+                  Plataforma de vendas online com checkout rápido, pagamentos integrados e painel administrativo completo.
+                </p>
+              </div>
+              
+              <div class="space-y-3">
+                <div class="flex flex-wrap gap-2">
+                  <span class="px-3 py-1 bg-purple-500/20 rounded-full text-purple-400 text-xs font-medium">Next.js</span>
+                  <span class="px-3 py-1 bg-pink-500/20 rounded-full text-pink-400 text-xs font-medium">Stripe</span>
+                  <span class="px-3 py-1 bg-green-500/20 rounded-full text-green-400 text-xs font-medium">Prisma</span>
+                </div>
+                <div class="flex items-center gap-2 text-gray-400 text-sm">
+                  <i data-lucide="calendar" class="w-4 h-4"></i>
+                  <span>Concluído em 2024</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- PROJETO 3: Dashboard Analytics -->
+        <div class="group relative">
+          <div class="absolute inset-0 bg-linear-to-br from-green-500/20 to-emerald-500/20 rounded-2xl blur-xl opacity-0 group-hover:opacity-100 transition-opacity"></div>
+          <div class="relative bg-linear-to-br from-green-600/20 to-emerald-600/20 rounded-2xl overflow-hidden border border-white/10 hover:border-green-500/30 transition-all h-full">
+            <div class="p-8 h-80 flex flex-col justify-between">
+              <div>
+                <div class="w-14 h-14 bg-green-500/20 rounded-xl flex items-center justify-center mb-4">
+                  <i data-lucide="bar-chart-3" class="w-7 h-7 text-green-400"></i>
+                </div>
+                <h3 class="text-2xl font-bold text-white mb-3">DataMind Analytics</h3>
+                <p class="text-gray-300 leading-relaxed mb-4">
+                  Dashboard inteligente com análise em tempo real, previsões e insights automatizados para decisões estratégicas.
+                </p>
+              </div>
+              
+              <div class="space-y-3">
+                <div class="flex flex-wrap gap-2">
+                  <span class="px-3 py-1 bg-green-500/20 rounded-full text-green-400 text-xs font-medium">React</span>
+                  <span class="px-3 py-1 bg-yellow-500/20 rounded-full text-yellow-400 text-xs font-medium">Python</span>
+                  <span class="px-3 py-1 bg-red-500/20 rounded-full text-red-400 text-xs font-medium">Redis</span>
+                </div>
+                <div class="flex items-center gap-2 text-gray-400 text-sm">
+                  <i data-lucide="calendar" class="w-4 h-4"></i>
+                  <span>Concluído em 2024</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- PROJETO 4: App Mobile -->
+        <div class="group relative">
+          <div class="absolute inset-0 bg-linear-to-br from-orange-500/20 to-red-500/20 rounded-2xl blur-xl opacity-0 group-hover:opacity-100 transition-opacity"></div>
+          <div class="relative bg-linear-to-br from-orange-600/20 to-red-600/20 rounded-2xl overflow-hidden border border-white/10 hover:border-orange-500/30 transition-all h-full">
+            <div class="p-8 h-80 flex flex-col justify-between">
+              <div>
+                <div class="w-14 h-14 bg-orange-500/20 rounded-xl flex items-center justify-center mb-4">
+                  <i data-lucide="smartphone" class="w-7 h-7 text-orange-400"></i>
+                </div>
+                <h3 class="text-2xl font-bold text-white mb-3">ConnectPro Mobile</h3>
+                <p class="text-gray-300 leading-relaxed mb-4">
+                  Aplicativo multiplataforma para iOS e Android com sincronização em nuvem e notificações em tempo real.
+                </p>
+              </div>
+              
+              <div class="space-y-3">
+                <div class="flex flex-wrap gap-2">
+                  <span class="px-3 py-1 bg-orange-500/20 rounded-full text-orange-400 text-xs font-medium">Flutter</span>
+                  <span class="px-3 py-1 bg-blue-500/20 rounded-full text-blue-400 text-xs font-medium">Firebase</span>
+                </div>
+                <div class="flex items-center gap-2 text-gray-400 text-sm">
+                  <i data-lucide="calendar" class="w-4 h-4"></i>
+                  <span>Concluído em 2024</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- PROJETO EM ANDAMENTO -->
+        <div class="sm:col-span-2 lg:col-span-2 group relative">
+          <div class="absolute inset-0 bg-linear-to-r from-blue-500/10 to-cyan-500/10 rounded-2xl blur-xl"></div>
+          <div class="relative bg-slate-900/60 backdrop-blur-xl border border-white/10 rounded-2xl p-8 lg:p-12 text-center h-full flex flex-col justify-center">
+            <div class="w-16 h-16 bg-blue-500/20 rounded-full flex items-center justify-center mx-auto mb-6">
+              <i data-lucide="code-2" class="w-8 h-8 text-blue-400 animate-pulse"></i>
+            </div>
+            <h3 class="text-2xl sm:text-3xl font-bold text-white mb-4">
+              Mais projetos em desenvolvimento...
+            </h3>
+            <p class="text-gray-300 text-lg mb-6 max-w-xl mx-auto">
+              Estamos trabalhando em novas soluções inovadoras. Em breve, mais projetos serão adicionados ao nosso portfolio.
+            </p>
+            <div class="flex items-center justify-center gap-2 text-gray-400">
+              <i data-lucide="clock" class="w-5 h-5"></i>
+              <span>2025 - Em andamento</span>
+            </div>
+          </div>
+        </div>
+
+      </div>
+    </div>
+
+    <!-- CTA FINAL -->
+    <div class="text-center mt-20 lg:mt-32">
+      <div class="relative">
+        <div class="absolute inset-0 bg-linear-to-r from-cyan-500/10 via-blue-500/10 to-purple-500/10 rounded-3xl blur-3xl"></div>
+        
+        <div class="relative bg-slate-900/60 backdrop-blur-xl border border-white/10 rounded-3xl p-8 lg:p-12">
+          <h2 class="text-3xl sm:text-4xl md:text-5xl font-bold text-white mb-6 leading-tight">
+            Quer ver seu projeto
+            <span class="block bg-linear-to-r from-cyan-400 to-blue-500 bg-clip-text text-transparent">
+              aqui no nosso portfolio?
+            </span>
+          </h2>
+          
+          <p class="text-base sm:text-lg text-gray-300 max-w-2xl mx-auto mb-8 lg:mb-10">
+            Vamos criar algo incrível juntos. Entre em contato e transforme sua ideia em realidade.
+          </p>
+          
+          <a href="feedback.php" 
+             class="inline-flex items-center justify-center gap-3 bg-linear-to-r from-cyan-500 to-blue-600 text-white font-semibold text-lg px-10 py-4 rounded-full shadow-lg hover:shadow-cyan-500/50 hover:scale-105 transition-all duration-300 group">
+            Iniciar Meu Projeto
+            <i data-lucide="arrow-right" class="w-5 h-5 group-hover:translate-x-1 transition-transform"></i>
+          </a>
+        </div>
+      </div>
+    </div>
+
+  </div>
+</main>
+
+<?php include 'components/footer.php'; ?>
+
+<!-- SCRIPTS -->
+<script src="https://unpkg.com/lucide@latest"></script>
+<script>
+  document.addEventListener('DOMContentLoaded', () => {
+    // Initialize Lucide icons
+    lucide.createIcons();
+
+    // Fade in animations on scroll
+    const observerOptions = {
+      threshold: 0.1,
+      rootMargin: '0px 0px -50px 0px'
+    };
+
+    const observer = new IntersectionObserver((entries) => {
+      entries.forEach(entry => {
+        if (entry.isIntersecting) {
+          entry.target.style.opacity = '1';
+          entry.target.style.transform = 'translateY(0)';
+        }
+      });
+    }, observerOptions);
+
+    // Observe all project cards
+    document.querySelectorAll('.group, section').forEach((el, index) => {
+      el.style.opacity = '0';
+      el.style.transform = 'translateY(20px)';
+      el.style.transition = `opacity 0.6s ease ${index * 0.1}s, transform 0.6s ease ${index * 0.1}s`;
+      observer.observe(el);
+    });
+
+    // Gallery lightbox effect (opcional)
+    document.querySelectorAll('[src*="akira"]').forEach(img => {
+      img.addEventListener('click', function() {
+        // Aqui você pode adicionar um lightbox modal se quiser
+        console.log('Imagem clicada:', this.src);
+      });
+    });
+  });
+</script>
+
+<style>
+  /* Gradient animation */
+  @keyframes gradient-shift {
+    0%, 100% {
+      background-position: 0% 50%;
+    }
+    50% {
+      background-position: 100% 50%;
+    }
+  }
+
+  .bg-linear-to-r,
+  .bg-linear-to-br {
+    background-size: 200% 200%;
+    animation: gradient-shift 8s ease infinite;
+  }
+
+  /* Image hover effects */
+  img {
+    will-change: transform;
+  }
+
+  /* Pulse animation for "em desenvolvimento" */
+  @keyframes pulse {
+    0%, 100% {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0.5;
+    }
+  }
+
+  .animate-pulse {
+    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+  }
+</style>

react-demo.php

@@ -0,0 +1,207 @@
+<?php
+require_once __DIR__ . '/src/Bootstrap.php';
+\SoftEdge\Env::load(__DIR__);
+\SoftEdge\Bootstrap::init();
+include 'components/header.php';
+?>
+
+<!-- REACT DEMO PAGE -->
+<section class="relative min-h-screen flex items-center justify-center overflow-hidden">
+  <!-- Background -->
+  <div class="absolute inset-0 -z-10">
+    <div class="absolute inset-0 bg-linear-to-br from-slate-950 via-slate-900 to-slate-950"></div>
+    <div class="absolute inset-0 opacity-30">
+      <div class="absolute top-20 left-20 w-96 h-96 bg-cyan-500/20 rounded-full blur-3xl"></div>
+      <div class="absolute bottom-20 right-20 w-96 h-96 bg-blue-500/20 rounded-full blur-3xl"></div>
+    </div>
+  </div>
+
+  <!-- Content -->
+  <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20">
+    <div class="text-center space-y-12">
+
+      <!-- Badge -->
+      <div class="inline-block px-4 py-2 bg-cyan-500/10 rounded-full border border-cyan-500/20 backdrop-blur-sm">
+        <span class="text-cyan-400 text-sm font-semibold uppercase tracking-wider">
+          ⚛️ React Integration Demo
+        </span>
+      </div>
+
+      <!-- Title -->
+      <div class="space-y-6">
+        <h1 class="text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-bold leading-tight">
+          <span class="block text-white mb-2">React + PHP</span>
+          <span class="block bg-linear-to-r from-cyan-400 via-blue-500 to-purple-500 bg-clip-text text-transparent">
+            Integração Completa
+          </span>
+        </h1>
+
+        <p class="text-base sm:text-lg md:text-xl text-gray-300 max-w-2xl mx-auto leading-relaxed">
+          Demonstração da integração perfeita entre React e PHP no SoftEdge Corporation website.
+          <br class="hidden sm:block">
+          Componentes modulares, estado compartilhado e performance otimizada.
+        </p>
+      </div>
+
+      <!-- React App Container -->
+      <div class="max-w-4xl mx-auto">
+        <div class="relative">
+          <div class="absolute inset-0 bg-linear-to-r from-cyan-500/10 via-blue-500/10 to-purple-500/10 rounded-3xl blur-3xl"></div>
+
+          <div class="relative bg-slate-900/60 backdrop-blur-xl border border-white/10 rounded-3xl p-8">
+            <!-- React App will be mounted here -->
+            <div id="root" class="min-h-[400px] flex items-center justify-center">
+              <div class="text-center space-y-4">
+                <div class="w-16 h-16 bg-cyan-500/20 rounded-full flex items-center justify-center mx-auto animate-pulse">
+                  <i data-lucide="loader-2" class="w-8 h-8 text-cyan-400 animate-spin"></i>
+                </div>
+                <p class="text-gray-400">Carregando aplicação React...</p>
+              </div>
+            </div>
+
+            <!-- Fallback for when React is not loaded -->
+            <noscript>
+              <div class="text-center py-8">
+                <i data-lucide="alert-triangle" class="w-16 h-16 text-yellow-400 mx-auto mb-4"></i>
+                <h3 class="text-xl font-bold text-white mb-2">JavaScript Necessário</h3>
+                <p class="text-gray-400">Esta página requer JavaScript para funcionar corretamente.</p>
+              </div>
+            </noscript>
+          </div>
+        </div>
+      </div>
+
+      <!-- Info Cards -->
+      <div class="grid sm:grid-cols-3 gap-6 lg:gap-8 mt-16 max-w-4xl mx-auto">
+        <!-- Info 1 -->
+        <div class="text-center">
+          <div class="w-12 h-12 bg-cyan-500/10 rounded-xl flex items-center justify-center mx-auto mb-4">
+            <i data-lucide="zap" class="w-6 h-6 text-cyan-400"></i>
+          </div>
+          <h3 class="text-white font-semibold mb-2">Performance</h3>
+          <p class="text-gray-400 text-sm">Componentes otimizados com lazy loading</p>
+        </div>
+
+        <!-- Info 2 -->
+        <div class="text-center">
+          <div class="w-12 h-12 bg-blue-500/10 rounded-xl flex items-center justify-center mx-auto mb-4">
+            <i data-lucide="code-2" class="w-6 h-6 text-blue-400"></i>
+          </div>
+          <h3 class="text-white font-semibold mb-2">Modular</h3>
+          <p class="text-gray-400 text-sm">Componentes reutilizáveis e manuteníveis</p>
+        </div>
+
+        <!-- Info 3 -->
+        <div class="text-center">
+          <div class="w-12 h-12 bg-purple-500/10 rounded-xl flex items-center justify-center mx-auto mb-4">
+            <i data-lucide="refresh-cw" class="w-6 h-6 text-purple-400"></i>
+          </div>
+          <h3 class="text-white font-semibold mb-2">Dinâmico</h3>
+          <p class="text-gray-400 text-sm">Estado reativo e interações fluidas</p>
+        </div>
+      </div>
+
+      <!-- Back to Home -->
+      <div class="pt-12">
+        <a href="index.php" class="inline-flex items-center gap-2 text-cyan-400 hover:text-cyan-300 transition-colors group">
+          <i data-lucide="arrow-left" class="w-5 h-5 group-hover:-translate-x-1 transition-transform"></i>
+          <span>Voltar ao início</span>
+        </a>
+      </div>
+
+    </div>
+  </div>
+</section>
+
+<!-- Load React App -->
+<script>
+  // Load React app when DOM is ready
+  document.addEventListener('DOMContentLoaded', function() {
+    // Check if React bundle exists
+    fetch('/dist/main.js')
+      .then(response => {
+        if (response.ok) {
+          // Load React bundle
+          const script = document.createElement('script');
+          script.src = '/dist/main.js';
+          script.onload = function() {
+            console.log('React app loaded successfully');
+          };
+          script.onerror = function() {
+            console.error('Failed to load React app');
+            showFallback();
+          };
+          document.head.appendChild(script);
+        } else {
+          console.warn('React bundle not found, showing fallback');
+          showFallback();
+        }
+      })
+      .catch(error => {
+        console.error('Error checking React bundle:', error);
+        showFallback();
+      });
+  });
+
+  function showFallback() {
+    const root = document.getElementById('root');
+    if (root) {
+      root.innerHTML = `
+        <div class="text-center space-y-4">
+          <div class="w-16 h-16 bg-yellow-500/20 rounded-full flex items-center justify-center mx-auto">
+            <i data-lucide="alert-triangle" class="w-8 h-8 text-yellow-400"></i>
+          </div>
+          <h3 class="text-xl font-bold text-white">React App Indisponível</h3>
+          <p class="text-gray-400 text-sm">O aplicativo React não foi carregado. Execute <code class="bg-slate-800 px-2 py-1 rounded text-xs">npm run build</code> para gerar os arquivos.</p>
+        </div>
+      `;
+    }
+  }
+</script>
+
+<?php include 'components/footer.php'; ?>
+
+<!-- SCRIPTS -->
+<script src="https://unpkg.com/lucide@latest"></script>
+<script>
+  document.addEventListener('DOMContentLoaded', () => {
+    // Initialize Lucide icons
+    lucide.createIcons();
+  });
+</script>
+
+<style>
+  /* Custom styles for React integration */
+  #root {
+    transition: opacity 0.3s ease;
+  }
+
+  #root.fade-in {
+    opacity: 1;
+  }
+
+  /* Loading animation */
+  @keyframes spin {
+    from { transform: rotate(0deg); }
+    to { transform: rotate(360deg); }
+  }
+
+  .animate-spin {
+    animation: spin 1s linear infinite;
+  }
+
+  /* Gradient animation */
+  @keyframes gradient-shift {
+    0%, 100% {
+      background-position: 0% 50%;
+    }
+    50% {
+      background-position: 100% 50%;
+    }
+  }
+
+  .bg-linear-to-r {
+    background-size: 200% 200%;
+    animation: gradient-shift 8s ease infinite;
+  }
+</style>

react-fallback.html

@@ -0,0 +1,277 @@
+<!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>

render.yaml

@@ -0,0 +1,25 @@
+services:
+  - type: web
+    name: softedge-corporation
+    runtime: docker
+    dockerfilePath: ./Dockerfile
+    healthCheckPath: /health.php
+    envVars:
+      - key: PORT
+        value: 10000
+      - key: RENDER
+        value: true
+    plan: starter
+    autoDeploy: true
+    buildFilter:
+      paths:
+        - "**"
+      ignoredPaths:
+        - "logs/**"
+        - ".git/**"
+        - "README.md"
+        - "*.md"
+    disk:
+      name: softedge-data
+      mountPath: /var/www/html/logs
+      sizeGB: 1

requirements.txt

@@ -0,0 +1,4 @@
+Flask==2.3.3
+Werkzeug==2.3.7
+gunicorn==21.2.0
+requests==2.31.0

servicos.php

@@ -0,0 +1,388 @@
+<?php
+require_once __DIR__ . '/src/Bootstrap.php';
+\SoftEdge\Env::load(__DIR__);
+\SoftEdge\Bootstrap::init();
+include 'components/header.php';
+?>
+
+<!-- HERO SECTION -->
+<section class="relative pt-32 pb-20 overflow-hidden">
+  <!-- Background -->
+  <div class="absolute inset-0 -z-10">
+    <div class="absolute inset-0 bg-linear-to-br from-slate-950 via-slate-900 to-slate-950"></div>
+    <div class="absolute inset-0 opacity-30">
+      <div class="absolute top-20 left-20 w-96 h-96 bg-purple-500/20 rounded-full blur-3xl"></div>
+      <div class="absolute bottom-20 right-20 w-96 h-96 bg-cyan-500/20 rounded-full blur-3xl"></div>
+    </div>
+  </div>
+
+  <!-- Content -->
+  <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
+    <div class="space-y-6">
+      <div class="inline-block px-4 py-2 bg-slate-700 border border-slate-600 mb-4">
+        <span class="text-slate-300 text-sm font-medium uppercase tracking-wide">Nossos Serviços</span>
+      </div>
+
+      <h1 class="text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-bold leading-tight">
+        Transformamos suas ideias em
+        <span class="block text-slate-300">
+          soluções digitais
+        </span>
+      </h1>
+
+      <p class="text-base sm:text-lg md:text-xl text-slate-400 max-w-3xl mx-auto leading-relaxed">
+        Da consultoria ao desenvolvimento completo, oferecemos tudo o que você precisa para ter sucesso no mundo digital.
+      </p>
+    </div>
+  </div>
+</section>
+
+<!-- SERVIÇOS GRID -->
+<main class="relative py-20 lg:py-32">
+  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+    
+    <div class="grid sm:grid-cols-2 lg:grid-cols-2 gap-6 lg:gap-8">
+
+      <!-- SERVIÇO 1 - DESENVOLVIMENTO FULL STACK -->
+      <div class="group relative">
+        <div class="absolute inset-0 bg-linear-to-br from-cyan-500/20 to-blue-500/20 rounded-3xl blur-xl opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
+        <div class="relative bg-slate-900/60 backdrop-blur-xl border border-white/5 rounded-3xl p-8 lg:p-10 transition-all duration-500 hover:border-cyan-500/30 h-full flex flex-col">
+          
+          <!-- Icon -->
+          <div class="w-16 h-16 bg-linear-to-br from-cyan-500 to-blue-600 rounded-2xl flex items-center justify-center mb-6 shadow-lg group-hover:scale-110 transition-transform">
+            <i data-lucide="code-2" class="w-8 h-8 text-white"></i>
+          </div>
+
+          <!-- Title -->
+          <h3 class="text-2xl sm:text-3xl font-bold text-white mb-4">
+            Desenvolvimento Full Stack
+          </h3>
+
+          <!-- Description -->
+          <p class="text-gray-300 text-base leading-relaxed mb-6 grow">
+            Criamos aplicações web, mobile e desktop personalizadas para o seu negócio. Utilizamos as tecnologias mais modernas como React, Next.js, Node.js, Laravel, Flutter, PHP 8+, bancos SQL/NoSQL e muito mais.
+          </p>
+
+          <!-- Features List -->
+          <ul class="space-y-3">
+            <li class="flex items-start gap-3 text-gray-400 text-sm">
+              <i data-lucide="check-circle" class="w-5 h-5 text-cyan-400 shrink-0 mt-0.5"></i>
+              <span>APIs REST & GraphQL profissionais</span>
+            </li>
+            <li class="flex items-start gap-3 text-gray-400 text-sm">
+              <i data-lucide="check-circle" class="w-5 h-5 text-cyan-400 shrink-0 mt-0.5"></i>
+              <span>Progressive Web Apps (PWA) rápidos</span>
+            </li>
+            <li class="flex items-start gap-3 text-gray-400 text-sm">
+              <i data-lucide="check-circle" class="w-5 h-5 text-cyan-400 shrink-0 mt-0.5"></i>
+              <span>Integração com serviços externos</span>
+            </li>
+            <li class="flex items-start gap-3 text-gray-400 text-sm">
+              <i data-lucide="check-circle" class="w-5 h-5 text-cyan-400 shrink-0 mt-0.5"></i>
+              <span>Deploy automático e escalável</span>
+            </li>
+          </ul>
+        </div>
+      </div>
+
+      <!-- SERVIÇO 2 - SISTEMAS SOB MEDIDA -->
+      <div class="group relative">
+        <div class="absolute inset-0 bg-linear-to-br from-purple-500/20 to-pink-500/20 rounded-3xl blur-xl opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
+        <div class="relative bg-slate-900/60 backdrop-blur-xl border border-white/5 rounded-3xl p-8 lg:p-10 transition-all duration-500 hover:border-purple-500/30 h-full flex flex-col">
+          
+          <!-- Icon -->
+          <div class="w-16 h-16 bg-linear-to-br from-purple-500 to-pink-600 rounded-2xl flex items-center justify-center mb-6 shadow-lg group-hover:scale-110 transition-transform">
+            <i data-lucide="layout-dashboard" class="w-8 h-8 text-white"></i>
+          </div>
+
+          <!-- Title -->
+          <h3 class="text-2xl sm:text-3xl font-bold text-white mb-4">
+            Sistemas Sob Medida
+          </h3>
+
+          <!-- Description -->
+          <p class="text-gray-300 text-base leading-relaxed mb-6 grow">
+            Desenvolvemos ERPs, CRMs, sistemas de gestão financeira, controle de estoque, portais internos e dashboards analíticos 100% personalizados para atender às necessidades específicas do seu negócio.
+          </p>
+
+          <!-- Features List -->
+          <ul class="space-y-3">
+            <li class="flex items-start gap-3 text-gray-400 text-sm">
+              <i data-lucide="check-circle" class="w-5 h-5 text-purple-400 shrink-0 mt-0.5"></i>
+              <span>Totalmente escalável e flexível</span>
+            </li>
+            <li class="flex items-start gap-3 text-gray-400 text-sm">
+              <i data-lucide="check-circle" class="w-5 h-5 text-purple-400 shrink-0 mt-0.5"></i>
+              <span>Multiplataforma (web + mobile + desktop)</span>
+            </li>
+            <li class="flex items-start gap-3 text-gray-400 text-sm">
+              <i data-lucide="check-circle" class="w-5 h-5 text-purple-400 shrink-0 mt-0.5"></i>
+              <span>Integração com ferramentas existentes</span>
+            </li>
+            <li class="flex items-start gap-3 text-gray-400 text-sm">
+              <i data-lucide="check-circle" class="w-5 h-5 text-purple-400 shrink-0 mt-0.5"></i>
+              <span>Suporte técnico 24/7 incluído</span>
+            </li>
+          </ul>
+        </div>
+      </div>
+
+      <!-- SERVIÇO 3 - CONSULTORIA & PERFORMANCE -->
+      <div class="group relative">
+        <div class="absolute inset-0 bg-linear-to-br from-green-500/20 to-emerald-500/20 rounded-3xl blur-xl opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
+        <div class="relative bg-slate-900/60 backdrop-blur-xl border border-white/5 rounded-3xl p-8 lg:p-10 transition-all duration-500 hover:border-green-500/30 h-full flex flex-col">
+          
+          <!-- Icon -->
+          <div class="w-16 h-16 bg-linear-to-br from-green-500 to-emerald-600 rounded-2xl flex items-center justify-center mb-6 shadow-lg group-hover:scale-110 transition-transform">
+            <i data-lucide="zap" class="w-8 h-8 text-white"></i>
+          </div>
+
+          <!-- Title -->
+          <h3 class="text-2xl sm:text-3xl font-bold text-white mb-4">
+            Consultoria & Performance
+          </h3>
+
+          <!-- Description -->
+          <p class="text-gray-300 text-base leading-relaxed mb-6 grow">
+            Realizamos auditoria técnica completa, otimização de velocidade (Core Web Vitals 100), SEO técnico, migração para cloud e modernização de sistemas legados para melhorar a performance do seu negócio.
+          </p>
+
+          <!-- Features List -->
+          <ul class="space-y-3">
+            <li class="flex items-start gap-3 text-gray-400 text-sm">
+              <i data-lucide="check-circle" class="w-5 h-5 text-green-400 shrink-0 mt-0.5"></i>
+              <span>Score +95 no Google Lighthouse</span>
+            </li>
+            <li class="flex items-start gap-3 text-gray-400 text-sm">
+              <i data-lucide="check-circle" class="w-5 h-5 text-green-400 shrink-0 mt-0.5"></i>
+              <span>Redução significativa de custos de servidor</span>
+            </li>
+            <li class="flex items-start gap-3 text-gray-400 text-sm">
+              <i data-lucide="check-circle" class="w-5 h-5 text-green-400 shrink-0 mt-0.5"></i>
+              <span>Estratégia digital completa e assertiva</span>
+            </li>
+            <li class="flex items-start gap-3 text-gray-400 text-sm">
+              <i data-lucide="check-circle" class="w-5 h-5 text-green-400 shrink-0 mt-0.5"></i>
+              <span>Treinamento personalizado para sua equipe</span>
+            </li>
+          </ul>
+        </div>
+      </div>
+
+      <!-- SERVIÇO 4 - IA E AUTOMAÇÃO (NOVO!) -->
+      <div class="group relative">
+        <div class="absolute inset-0 bg-linear-to-br from-orange-500/20 to-red-500/20 rounded-3xl blur-xl opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
+        <div class="relative bg-slate-900/60 backdrop-blur-xl border border-white/5 rounded-3xl p-8 lg:p-10 transition-all duration-500 hover:border-orange-500/30 h-full flex flex-col">
+          
+          <!-- Icon + Badge -->
+          <div class="flex items-center gap-3 mb-6">
+            <div class="w-16 h-16 bg-linear-to-br from-orange-500 to-red-600 rounded-2xl flex items-center justify-center shadow-lg group-hover:scale-110 transition-transform">
+              <i data-lucide="brain" class="w-8 h-8 text-white"></i>
+            </div>
+            <span class="px-3 py-1 bg-orange-500/20 border border-orange-500/30 rounded-full text-orange-400 text-xs font-semibold uppercase">
+              Novo
+            </span>
+          </div>
+
+          <!-- Title -->
+          <h3 class="text-2xl sm:text-3xl font-bold text-white mb-4">
+            IA & Automação
+          </h3>
+
+          <!-- Description -->
+          <p class="text-gray-300 text-base leading-relaxed mb-6 grow">
+            Desenvolvemos soluções inteligentes com Inteligência Artificial: chatbots para WhatsApp, assistentes virtuais, análise preditiva, automação de processos e modelos de IA personalizados para otimizar seu negócio.
+          </p>
+
+          <!-- Features List -->
+          <ul class="space-y-3">
+            <li class="flex items-start gap-3 text-gray-400 text-sm">
+              <i data-lucide="check-circle" class="w-5 h-5 text-orange-400 shrink-0 mt-0.5"></i>
+              <span>Chatbots inteligentes para WhatsApp Business</span>
+            </li>
+            <li class="flex items-start gap-3 text-gray-400 text-sm">
+              <i data-lucide="check-circle" class="w-5 h-5 text-orange-400 shrink-0 mt-0.5"></i>
+              <span>Assistentes virtuais com processamento de linguagem</span>
+            </li>
+            <li class="flex items-start gap-3 text-gray-400 text-sm">
+              <i data-lucide="check-circle" class="w-5 h-5 text-orange-400 shrink-0 mt-0.5"></i>
+              <span>Análise preditiva e machine learning</span>
+            </li>
+            <li class="flex items-start gap-3 text-gray-400 text-sm">
+              <i data-lucide="check-circle" class="w-5 h-5 text-orange-400 shrink-0 mt-0.5"></i>
+              <span>Automação de processos repetitivos (RPA)</span>
+            </li>
+          </ul>
+        </div>
+      </div>
+
+    </div>
+
+    <!-- SEÇÃO DE DESTAQUE -->
+    <div class="mt-20 lg:mt-32">
+      <div class="relative">
+        <div class="absolute inset-0 bg-linear-to-r from-cyan-500/10 via-purple-500/10 to-blue-500/10 rounded-3xl blur-3xl"></div>
+        
+        <div class="relative bg-slate-900/60 backdrop-blur-xl border border-white/10 rounded-3xl p-8 lg:p-12">
+          <div class="grid lg:grid-cols-2 gap-8 lg:gap-12 items-center">
+            
+            <!-- Left Content -->
+            <div>
+              <div class="inline-block px-4 py-2 bg-cyan-500/10 rounded-full border border-cyan-500/20 mb-6">
+                <span class="text-cyan-400 text-sm font-semibold uppercase tracking-wider">Processo Transparente</span>
+              </div>
+              
+              <h2 class="text-3xl sm:text-4xl md:text-5xl font-bold text-white mb-6 leading-tight">
+                Como trabalhamos com você
+              </h2>
+              
+              <p class="text-gray-300 text-lg leading-relaxed mb-8">
+                Nosso processo é colaborativo e transparente. Trabalhamos lado a lado com você em cada etapa do projeto, garantindo que sua visão se torne realidade.
+              </p>
+
+              <a href="feedback.php" 
+                 class="inline-flex items-center gap-3 bg-linear-to-r from-cyan-500 to-blue-600 text-white font-semibold text-lg px-8 py-4 rounded-full shadow-lg hover:shadow-cyan-500/50 hover:scale-105 transition-all duration-300 group">
+                Começar Agora
+                <i data-lucide="arrow-right" class="w-5 h-5 group-hover:translate-x-1 transition-transform"></i>
+              </a>
+            </div>
+
+            <!-- Right Content - Steps -->
+            <div class="space-y-6">
+              <!-- Step 1 -->
+              <div class="flex gap-4">
+                <div class="shrink-0 w-12 h-12 bg-cyan-500/10 rounded-xl flex items-center justify-center border border-cyan-500/20">
+                  <span class="text-cyan-400 font-bold text-lg">1</span>
+                </div>
+                <div>
+                  <h4 class="text-white font-semibold text-lg mb-2">Consulta Inicial</h4>
+                  <p class="text-gray-400 text-sm leading-relaxed">Entendemos seu negócio, objetivos e desafios para criar a melhor solução.</p>
+                </div>
+              </div>
+
+              <!-- Step 2 -->
+              <div class="flex gap-4">
+                <div class="shrink-0 w-12 h-12 bg-blue-500/10 rounded-xl flex items-center justify-center border border-blue-500/20">
+                  <span class="text-blue-400 font-bold text-lg">2</span>
+                </div>
+                <div>
+                  <h4 class="text-white font-semibold text-lg mb-2">Planejamento</h4>
+                  <p class="text-gray-400 text-sm leading-relaxed">Criamos um roadmap detalhado com prazos, custos e entregas definidas.</p>
+                </div>
+              </div>
+
+              <!-- Step 3 -->
+              <div class="flex gap-4">
+                <div class="shrink-0 w-12 h-12 bg-purple-500/10 rounded-xl flex items-center justify-center border border-purple-500/20">
+                  <span class="text-purple-400 font-bold text-lg">3</span>
+                </div>
+                <div>
+                  <h4 class="text-white font-semibold text-lg mb-2">Desenvolvimento</h4>
+                  <p class="text-gray-400 text-sm leading-relaxed">Construímos sua solução com código limpo, testes e validações constantes.</p>
+                </div>
+              </div>
+
+              <!-- Step 4 -->
+              <div class="flex gap-4">
+                <div class="shrink-0 w-12 h-12 bg-green-500/10 rounded-xl flex items-center justify-center border border-green-500/20">
+                  <span class="text-green-400 font-bold text-lg">4</span>
+                </div>
+                <div>
+                  <h4 class="text-white font-semibold text-lg mb-2">Entrega & Suporte</h4>
+                  <p class="text-gray-400 text-sm leading-relaxed">Lançamos seu projeto e fornecemos suporte contínuo para garantir o sucesso.</p>
+                </div>
+              </div>
+            </div>
+
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- CTA FINAL -->
+    <div class="text-center mt-20 lg:mt-32">
+      <h2 class="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-bold text-white mb-6 leading-tight">
+        Pronto para transformar
+        <span class="block text-slate-300">
+          seu negócio?
+        </span>
+      </h2>
+      
+      <p class="text-lg sm:text-xl text-gray-300 max-w-2xl mx-auto mb-10">
+        Entre em contato hoje mesmo e descubra como podemos ajudar você a alcançar seus objetivos.
+      </p>
+      
+      <div class="flex flex-col sm:flex-row items-center justify-center gap-4">
+        <a href="feedback.php"
+           class="inline-flex items-center justify-center gap-3 w-full sm:w-auto bg-slate-700 hover:bg-slate-600 border border-slate-600 text-slate-200 font-medium text-lg px-10 py-4 rounded-lg transition-all duration-300">
+          Iniciar Projeto
+          <i data-lucide="arrow-right" class="w-5 h-5"></i>
+        </a>
+
+        <a href="projetos.php"
+           class="inline-flex items-center justify-center gap-3 w-full sm:w-auto bg-slate-800/50 hover:bg-slate-700/50 border border-slate-600 text-slate-300 font-medium text-lg px-10 py-4 rounded-lg transition-all duration-300">
+          Ver Portfolio
+          <i data-lucide="folder-open" class="w-5 h-5"></i>
+        </a>
+      </div>
+    </div>
+
+  </div>
+</main>
+
+<?php include 'components/footer.php'; ?>
+
+<!-- SCRIPTS -->
+<script src="https://unpkg.com/lucide@latest"></script>
+<script>
+  document.addEventListener('DOMContentLoaded', () => {
+    // Initialize Lucide icons
+    lucide.createIcons();
+
+    // Fade in animations on scroll
+    const observerOptions = {
+      threshold: 0.1,
+      rootMargin: '0px 0px -50px 0px'
+    };
+
+    const observer = new IntersectionObserver((entries) => {
+      entries.forEach(entry => {
+        if (entry.isIntersecting) {
+          entry.target.style.opacity = '1';
+          entry.target.style.transform = 'translateY(0)';
+        }
+      });
+    }, observerOptions);
+
+    // Observe all service cards and sections
+    document.querySelectorAll('.group, section').forEach((el, index) => {
+      el.style.opacity = '0';
+      el.style.transform = 'translateY(20px)';
+      el.style.transition = `opacity 0.6s ease ${index * 0.1}s, transform 0.6s ease ${index * 0.1}s`;
+      observer.observe(el);
+    });
+  });
+</script>
+
+<style>
+  /* Gradient animation */
+  @keyframes gradient-shift {
+    0%, 100% {
+      background-position: 0% 50%;
+    }
+    50% {
+      background-position: 100% 50%;
+    }
+  }
+
+  .bg-linear-to-r,
+  .bg-linear-to-br {
+    background-size: 200% 200%;
+    animation: gradient-shift 8s ease infinite;
+  }
+
+  /* Smooth hover transitions */
+  .group {
+    will-change: transform;
+  }
+</style>

sobre.php

@@ -0,0 +1,290 @@
+<?php
+require_once __DIR__ . '/src/Bootstrap.php';
+\SoftEdge\Env::load(__DIR__);
+\SoftEdge\Bootstrap::init();
+include 'components/header.php';
+?>
+
+<!-- HERO SECTION -->
+<section class="relative min-h-[90vh] flex items-center justify-center overflow-hidden">
+  <!-- Background -->
+  <div class="absolute inset-0 -z-10">
+    <div class="absolute inset-0 bg-linear-to-br from-slate-950 via-slate-900 to-slate-950"></div>
+    <div class="absolute inset-0 opacity-30">
+      <div class="absolute top-20 left-20 w-96 h-96 bg-cyan-500/20 rounded-full blur-3xl"></div>
+      <div class="absolute bottom-20 right-20 w-96 h-96 bg-blue-500/20 rounded-full blur-3xl"></div>
+    </div>
+  </div>
+
+  <!-- Content -->
+  <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
+    <div class="space-y-8">
+      <h1 class="text-5xl sm:text-6xl md:text-7xl lg:text-8xl font-bold leading-tight">
+        Do sonho<br>
+        <span class="text-slate-300">
+          à realidade lógica
+        </span>
+      </h1>
+
+      <p class="text-lg sm:text-xl md:text-2xl text-slate-400 max-w-3xl mx-auto leading-relaxed">
+        Começamos com uma ideia simples.<br class="hidden sm:block">
+        Hoje criamos softwares que as pessoas amam usar.
+      </p>
+    </div>
+  </div>
+
+  <!-- Scroll indicator -->
+  <div class="absolute bottom-8 left-1/2 -translate-x-1/2 animate-bounce">
+    <i data-lucide="chevron-down" class="w-8 h-8 text-white/40"></i>
+  </div>
+</section>
+
+<!-- MAIN CONTENT -->
+<main class="relative py-20 lg:py-32">
+  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+
+    <!-- NOSSA HISTÓRIA -->
+    <div class="grid lg:grid-cols-2 gap-12 lg:gap-20 items-center mb-32">
+      
+      <!-- Texto -->
+      <div class="space-y-8">
+        <div class="inline-block px-4 py-2 bg-cyan-500/10 rounded-full border border-cyan-500/20 mb-4">
+          <span class="text-cyan-400 text-sm font-semibold uppercase tracking-wider">Nossa História</span>
+        </div>
+        
+        <div class="space-y-6 text-gray-300 text-base sm:text-lg leading-relaxed">
+          <p>
+            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>.
+          </p>
+          
+          <p>
+            <span class="text-white font-bold text-xl">Isaac Quarenta</span> <span class="text-gray-400 text-sm">(CEO)</span> juntou forças com os co-fundadores
+            <span class="text-cyan-300 font-medium">José Lopes</span>,
+            <span class="text-blue-300 font-medium">Stefânio Costa</span> e
+            <span class="text-purple-300 font-medium">Tiago Rodrigues</span>.
+          </p>
+          
+          <p>
+            Juntos criaram a <span class="bg-linear-to-r from-cyan-400 to-blue-500 bg-clip-text text-transparent font-bold text-xl">SoftEdge</span> — uma empresa que transforma ideias em experiências digitais e softwares légitmos.
+          </p>
+          
+          <div class="pt-6 mt-8 border-t border-white/10">
+            <p class="text-xl sm:text-2xl font-semibold text-cyan-400 leading-relaxed">
+              Começamos com um sonho.<br>
+              Hoje desenvolvemos realidades lógicas e softwares mais amáveis.
+            </p>
+          </div>
+        </div>
+      </div>
+
+      <!-- Imagem da Equipe -->
+      <div class="relative">
+        <div class="relative group">
+          <!-- Card Container -->
+          <div class="relative overflow-hidden rounded-3xl bg-linear-to-br from-cyan-500/10 to-blue-500/10 p-1 transition-all duration-500 hover:scale-[1.02]">
+            <div class="relative overflow-hidden rounded-3xl bg-slate-900/80 backdrop-blur-xl">
+              
+              <!-- Image -->
+              <div class="relative aspect-square overflow-hidden">
+                <img src="/assets/placeholder.svg"
+                     alt="Equipe SoftEdge Corporation - Isaac, José, Stefânio e Tiago"
+                     class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110">
+                
+                <!-- Overlay Gradient -->
+                <div class="absolute inset-0 bg-linear-to-t from-slate-900 via-slate-900/40 to-transparent"></div>
+                
+                <!-- Text Overlay -->
+                <div class="absolute bottom-0 left-0 right-0 p-8 text-center">
+                  <h3 class="text-2xl sm:text-3xl font-bold text-white mb-2">Nossa Equipe</h3>
+                  <p class="text-gray-300 text-sm sm:text-base">Isaac • José • Stefâncio • Tiago</p>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Decorative Elements -->
+          <div class="absolute -top-4 -right-4 w-24 h-24 bg-cyan-500/20 rounded-full blur-2xl"></div>
+          <div class="absolute -bottom-4 -left-4 w-24 h-24 bg-blue-500/20 rounded-full blur-2xl"></div>
+        </div>
+      </div>
+    </div>
+
+    <!-- NÚMEROS IMPACTANTES -->
+    <div class="mb-32">
+      <div class="text-center mb-16">
+        <div class="inline-block px-4 py-2 bg-cyan-500/10 rounded-full border border-cyan-500/20 mb-4">
+          <span class="text-cyan-400 text-sm font-semibold uppercase tracking-wider">Nossos Números</span>
+        </div>
+        <h2 class="text-3xl sm:text-4xl md:text-5xl font-bold text-white">
+          Resultados que inspiram
+        </h2>
+      </div>
+
+      <div class="grid grid-cols-2 lg:grid-cols-4 gap-6 lg:gap-8">
+        <!-- Stat 1 -->
+        <div class="relative group">
+          <div class="absolute inset-0 bg-linear-to-br from-cyan-500/20 to-blue-500/20 rounded-2xl blur-xl opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
+          <div class="relative bg-slate-900/60 backdrop-blur-xl border border-white/5 rounded-2xl p-8 text-center transition-all duration-500 hover:border-cyan-500/30">
+            <div class="text-4xl sm:text-5xl md:text-6xl font-bold bg-linear-to-br from-cyan-400 to-cyan-600 bg-clip-text text-transparent mb-3">
+              70+
+            </div>
+            <p class="text-gray-300 text-sm sm:text-base">Projetos entregues</p>
+          </div>
+        </div>
+
+        <!-- Stat 2 -->
+        <div class="relative group">
+          <div class="absolute inset-0 bg-linear-to-br from-blue-500/20 to-purple-500/20 rounded-2xl blur-xl opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
+          <div class="relative bg-slate-900/60 backdrop-blur-xl border border-white/5 rounded-2xl p-8 text-center transition-all duration-500 hover:border-blue-500/30">
+            <div class="text-4xl sm:text-5xl md:text-6xl font-bold bg-linear-to-br from-blue-400 to-blue-600 bg-clip-text text-transparent mb-3">
+              4.9★
+            </div>
+            <p class="text-gray-300 text-sm sm:text-base">Satisfação média</p>
+          </div>
+        </div>
+
+        <!-- Stat 3 -->
+        <div class="relative group">
+          <div class="absolute inset-0 bg-linear-to-br from-purple-500/20 to-pink-500/20 rounded-2xl blur-xl opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
+          <div class="relative bg-slate-900/60 backdrop-blur-xl border border-white/5 rounded-2xl p-8 text-center transition-all duration-500 hover:border-purple-500/30">
+            <div class="text-4xl sm:text-5xl md:text-6xl font-bold bg-linear-to-br from-purple-400 to-purple-600 bg-clip-text text-transparent mb-3">
+              24/7
+            </div>
+            <p class="text-gray-300 text-sm sm:text-base">Suporte dedicado</p>
+          </div>
+        </div>
+
+        <!-- Stat 4 -->
+        <div class="relative group">
+          <div class="absolute inset-0 bg-linear-to-br from-green-500/20 to-emerald-500/20 rounded-2xl blur-xl opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
+          <div class="relative bg-slate-900/60 backdrop-blur-xl border border-white/5 rounded-2xl p-8 text-center transition-all duration-500 hover:border-green-500/30">
+            <div class="text-4xl sm:text-5xl md:text-6xl font-bold bg-linear-to-br from-green-400 to-green-600 bg-clip-text text-transparent mb-3">
+              100%
+            </div>
+            <p class="text-gray-300 text-sm sm:text-base">Código limpo</p>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- CTA SECTION -->
+    <div class="relative">
+      <!-- Background -->
+      <div class="absolute inset-0 bg-linear-to-r from-cyan-500/10 via-blue-500/10 to-purple-500/10 rounded-3xl blur-3xl"></div>
+      
+      <!-- Content -->
+      <div class="relative bg-slate-900/60 backdrop-blur-xl border border-white/10 rounded-3xl p-12 lg:p-16 text-center">
+        <h2 class="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-bold text-white mb-6 leading-tight">
+          Pronto para criar algo<br class="hidden sm:block">
+          <span class="bg-linear-to-r from-cyan-400 to-blue-500 bg-clip-text text-transparent">
+            incrível juntos?
+          </span>
+        </h2>
+        
+        <p class="text-gray-300 text-lg max-w-2xl mx-auto mb-10">
+          Vamos transformar sua ideia em realidade. Entre em contato e descubra como podemos ajudar.
+        </p>
+        
+        <a href="feedback.php"
+           class="inline-flex items-center gap-3 bg-slate-700 hover:bg-slate-600 border border-slate-600 text-slate-200 font-medium text-lg px-8 py-4 rounded-lg transition-all duration-300">
+          Falar conosco
+          <i data-lucide="arrow-right" class="w-5 h-5"></i>
+        </a>
+      </div>
+    </div>
+
+  </div>
+</main>
+
+<?php include 'components/footer.php'; ?>
+
+<!-- SCRIPTS -->
+<script src="https://unpkg.com/lucide@latest"></script>
+<script>
+  document.addEventListener('DOMContentLoaded', () => {
+    // Initialize Lucide icons
+    lucide.createIcons();
+
+    // Smooth scroll behavior
+    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+      anchor.addEventListener('click', function (e) {
+        e.preventDefault();
+        const target = document.querySelector(this.getAttribute('href'));
+        if (target) {
+          target.scrollIntoView({
+            behavior: 'smooth',
+            block: 'start'
+          });
+        }
+      });
+    });
+
+    // Intersection Observer for fade-in animations
+    const observerOptions = {
+      threshold: 0.1,
+      rootMargin: '0px 0px -100px 0px'
+    };
+
+    const observer = new IntersectionObserver((entries) => {
+      entries.forEach(entry => {
+        if (entry.isIntersecting) {
+          entry.target.style.opacity = '1';
+          entry.target.style.transform = 'translateY(0)';
+        }
+      });
+    }, observerOptions);
+
+    // Observe all sections
+    document.querySelectorAll('section, main > div > div').forEach(el => {
+      el.style.opacity = '0';
+      el.style.transform = 'translateY(30px)';
+      el.style.transition = 'opacity 0.8s ease, transform 0.8s ease';
+      observer.observe(el);
+    });
+  });
+</script>
+
+<style>
+  /* Smooth scrolling */
+  html {
+    scroll-behavior: smooth;
+  }
+
+  /* Image hover effects */
+  img {
+    will-change: transform;
+  }
+
+  /* Gradient animation */
+  @keyframes gradient-shift {
+    0%, 100% {
+      background-position: 0% 50%;
+    }
+    50% {
+      background-position: 100% 50%;
+    }
+  }
+
+  .bg-linear-to-r {
+    background-size: 200% 200%;
+    animation: gradient-shift 8s ease infinite;
+  }
+
+  /* Custom scrollbar */
+  ::-webkit-scrollbar {
+    width: 10px;
+  }
+
+  ::-webkit-scrollbar-track {
+    background: #0f172a;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background: linear-gradient(180deg, #06b6d4, #3b82f6);
+    border-radius: 5px;
+  }
+
+  ::-webkit-scrollbar-thumb:hover {
+    background: linear-gradient(180deg, #0891b2, #2563eb);
+  }
+</style>

test.html

@@ -0,0 +1,49 @@
+<!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 - Test</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            background: linear-gradient(135deg, #0f172a, #1e293b);
+            color: white;
+            margin: 0;
+            padding: 0;
+            min-height: 100vh;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+        .container {
+            text-align: center;
+            max-width: 600px;
+            padding: 2rem;
+        }
+        .logo {
+            font-size: 3rem;
+            margin-bottom: 1rem;
+        }
+        .status {
+            background: rgba(34, 197, 94, 0.1);
+            border: 1px solid #22c55e;
+            border-radius: 0.5rem;
+            padding: 1rem;
+            margin: 1rem 0;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <div class="logo">🚀</div>
+        <h1>SoftEdge Corporation</h1>
+        <p>Website em funcionamento!</p>
+        <div class="status">
+            <strong>✅ Status: Online</strong><br>
+            <small>Deployed successfully on Hugging Face Spaces</small>
+        </div>
+        <p>Se você está vendo esta página, o deployment está funcionando corretamente.</p>
+    </div>
+</body>
+</html>

webpack.config.js

@@ -0,0 +1,184 @@
+const path = require('path');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
+const TerserPlugin = require('terser-webpack-plugin');
+
+const isProduction = process.env.NODE_ENV === 'production';
+
+module.exports = {
+  mode: isProduction ? 'production' : 'development',
+  entry: './src/react/index.js',
+
+  output: {
+    path: path.resolve(__dirname, 'dist'),
+    filename: (pathData) => {
+      return pathData.chunk.name === 'main'
+        ? 'static/js/bundle.js'
+        : 'static/js/[name].[contenthash:8].js';
+    },
+    chunkFilename: 'static/js/chunk.[id].[contenthash:8].js',
+    publicPath: '/',
+    clean: true,
+  },
+
+  module: {
+    rules: [
+      {
+        test: /\.(js|jsx)$/,
+        exclude: /node_modules/,
+        use: {
+          loader: 'babel-loader',
+          options: {
+            presets: [
+              ['@babel/preset-env', {
+                targets: {
+                  browsers: ['> 0.25%', 'not dead'],
+                },
+                modules: false,
+              }],
+              ['@babel/preset-react', {
+                runtime: 'automatic',
+              }],
+            ],
+            plugins: [
+              '@babel/plugin-proposal-class-properties',
+              '@babel/plugin-proposal-object-rest-spread',
+            ],
+          },
+        },
+      },
+      {
+        test: /\.css$/i,
+        use: [
+          isProduction ? MiniCssExtractPlugin.loader : 'style-loader',
+          {
+            loader: 'css-loader',
+            options: {
+              importLoaders: 1,
+              modules: {
+                auto: true,
+                localIdentName: isProduction
+                  ? '[hash:base64:8]'
+                  : '[name]__[local]__[hash:base64:4]',
+              },
+            },
+          },
+          {
+            loader: 'postcss-loader',
+            options: {
+              postcssOptions: {
+                plugins: [
+                  'autoprefixer',
+                  isProduction && 'cssnano',
+                ].filter(Boolean),
+              },
+            },
+          },
+        ],
+      },
+      {
+        test: /\.(png|jpe?g|gif|svg|webp)$/i,
+        type: 'asset/resource',
+        generator: {
+          filename: 'static/media/[name].[hash:8][ext]',
+        },
+      },
+      {
+        test: /\.(woff|woff2|eot|ttf|otf)$/i,
+        type: 'asset/resource',
+        generator: {
+          filename: 'static/fonts/[name].[hash:8][ext]',
+        },
+      },
+    ],
+  },
+
+  plugins: [
+    ...(isProduction ? [
+      new MiniCssExtractPlugin({
+        filename: 'static/css/[name].[contenthash:8].css',
+        chunkFilename: 'static/css/[name].[contenthash:8].chunk.css',
+      }),
+    ] : []),
+  ],
+
+  optimization: {
+    minimize: isProduction,
+    minimizer: [
+      new TerserPlugin({
+        terserOptions: {
+          compress: {
+            drop_console: isProduction,
+            drop_debugger: isProduction,
+          },
+        },
+      }),
+      new CssMinimizerPlugin(),
+    ],
+    splitChunks: {
+      chunks: 'all',
+      cacheGroups: {
+        vendor: {
+          test: /[\\/]node_modules[\\/]/,
+          name: 'vendor',
+          chunks: 'all',
+          enforce: true,
+        },
+      },
+    },
+  },
+
+  resolve: {
+    extensions: ['.js', '.jsx', '.json'],
+    alias: {
+      '@': path.resolve(__dirname, 'src/react'),
+      '@components': path.resolve(__dirname, 'src/react/components'),
+      '@utils': path.resolve(__dirname, 'src/react/utils'),
+      '@assets': path.resolve(__dirname, 'src/react/assets'),
+    },
+  },
+
+  devServer: {
+    static: {
+      directory: path.join(__dirname, 'dist'),
+    },
+    compress: true,
+    port: 3000,
+    hot: true,
+    open: true,
+    historyApiFallback: true,
+    proxy: {
+      '/api': {
+        target: 'http://localhost:8080',
+        changeOrigin: true,
+        secure: false,
+      },
+    },
+    headers: {
+      'Access-Control-Allow-Origin': '*',
+      'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, PATCH, OPTIONS',
+      'Access-Control-Allow-Headers': 'X-Requested-With, content-type, Authorization',
+    },
+  },
+
+  devtool: isProduction ? 'source-map' : 'eval-cheap-module-source-map',
+
+  performance: {
+    hints: isProduction ? 'warning' : false,
+    maxEntrypointSize: 512000,
+    maxAssetSize: 512000,
+  },
+
+  stats: {
+    colors: true,
+    children: false,
+    chunks: false,
+    chunkModules: false,
+    modules: false,
+    reasons: false,
+    errorDetails: true,
+    assets: true,
+    version: false,
+    timings: true,
+  },
+};