Upload 8 files

Dockerfile

@@ -0,0 +1,41 @@
+# Dockerfile — SoftEdge Corporation (2025)
+FROM php:8.3-apache
+
+# Fix Apache MPM issue - disable all MPMs except prefork
+RUN a2dismod mpm_event mpm_worker && \
+    a2enmod mpm_prefork rewrite
+
+# Instala apenas o necessário (super leve)
+RUN apt-get update && \
+    apt-get install -y --no-install-recommends \
+        libpng-dev \
+        libonig-dev \
+        libjpeg-dev \
+        libfreetype6-dev \
+        && docker-php-ext-configure gd --with-freetype --with-jpeg \
+        && docker-php-ext-install -j$(nproc) \
+            mbstring \
+            exif \
+            pcntl \
+            bcmath \
+            gd \
+        && apt-get clean \
+        && rm -rf /var/lib/apt/lists/*
+
+# Copia o site
+WORKDIR /var/www/html
+COPY . .
+
+# Permissões corretas
+RUN chown -R www-data:www-data /var/www/html && \
+    chmod -R 755 /var/www/html
+
+# Configura Apache pra rodar na porta do Railway
+ENV PORT=8080
+EXPOSE $PORT
+
+# Substitui a porta padrão do Apache pela variável do Railway
+RUN sed -i "s/80/$PORT/g" /etc/apache2/sites-available/000-default.conf /etc/apache2/ports.conf
+
+# Start Apache em foreground
+CMD ["apache2-foreground"]

Railway.json

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

contato.php

@@ -0,0 +1,295 @@
+<?php 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-gradient-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-gradient-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-gradient-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 flex-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-gradient-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 flex-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-gradient-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 flex-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-gradient-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-gradient-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-gradient-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">
+                Preencher Formulário
+                <i data-lucide="arrow-right" class="w-5 h-5 group-hover:translate-x-1 transition-transform"></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-gradient-to-r,
+  .bg-gradient-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>

feedback.php

@@ -0,0 +1,339 @@
+<?php
+// PROCESSAMENTO DO ENVIO DE EMAIL
+if ($_SERVER['REQUEST_METHOD'] === 'POST') {
+  header('Content-Type: application/json');
+
+  $nome    = trim($_POST['nome'] ?? '');
+  $email   = trim($_POST['email'] ?? '');
+  $empresa = trim($_POST['empresa'] ?? '(não informado)');
+  $mensagem = trim($_POST['mensagem'] ?? '');
+
+  // Validação
+  if (empty($nome) || empty($email) || empty($mensagem)) {
+    echo json_encode(['success' => false, 'error' => 'Por favor, preencha todos os campos obrigatórios.']);
+    exit;
+  }
+
+  if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
+    echo json_encode(['success' => false, 'error' => 'E-mail inválido. Verifique e tente novamente.']);
+    exit;
+  }
+
+  // Configuração do email
+  $to      = "softedgecorporation@gmail.com";
+  $subject = "🚀 Novo Contato do Site - " . $nome;
+  
+  $body    = "═══════════════════════════════════════\n";
+  $body   .= "  NOVO CONTATO DO SITE SOFTEDGE\n";
+  $body   .= "═══════════════════════════════════════\n\n";
+  $body   .= "👤 NOME:\n   " . $nome . "\n\n";
+  $body   .= "📧 E-MAIL:\n   " . $email . "\n\n";
+  $body   .= "🏢 EMPRESA/PROJETO:\n   " . $empresa . "\n\n";
+  $body   .= "💬 MENSAGEM:\n   " . str_replace("\n", "\n   ", $mensagem) . "\n\n";
+  $body   .= "═══════════════════════════════════════\n";
+  $body   .= "📅 Data: " . date('d/m/Y H:i:s') . "\n";
+  $body   .= "🌐 IP: " . $_SERVER['REMOTE_ADDR'] . "\n";
+  $body   .= "═══════════════════════════════════════\n";
+  
+  $headers  = "From: noreply@softedge-corporation.com\r\n";
+  $headers .= "Reply-To: $email\r\n";
+  $headers .= "Content-Type: text/plain; charset=UTF-8\r\n";
+  $headers .= "X-Mailer: PHP/" . phpversion();
+
+  // Tentar enviar
+  if (mail($to, $subject, $body, $headers)) {
+    echo json_encode(['success' => true]);
+  } else {
+    // Se mail() falhar, tente com um método alternativo (opcional)
+    error_log("Falha no envio de email para: $to");
+    echo json_encode(['success' => false, 'error' => 'Erro ao enviar mensagem. Por favor, tente novamente ou entre em contato via WhatsApp.']);
+  }
+  exit;
+}
+?>
+
+<?php 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-gradient-to-br from-slate-950 via-slate-900 to-slate-950"></div>
+    <div class="absolute inset-0 opacity-30">
+      <div class="absolute top-20 right-20 w-96 h-96 bg-cyan-500/20 rounded-full blur-3xl"></div>
+      <div class="absolute bottom-20 left-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-6">
+      <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">Entre em Contato</span>
+      </div>
+      
+      <h1 class="text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-bold leading-tight">
+        Vamos <span class="bg-gradient-to-r from-cyan-400 via-blue-500 to-purple-500 bg-clip-text text-transparent">construir juntos</span>?
+      </h1>
+      
+      <p class="text-base sm:text-lg md:text-xl text-gray-300 max-w-2xl mx-auto leading-relaxed">
+        Conte-nos sobre seu projeto, ideia ou desafio.<br class="hidden sm:block">
+        Respondemos em até 24 horas.
+      </p>
+    </div>
+  </div>
+</section>
+
+<!-- MAIN CONTENT -->
+<main class="relative pb-20 lg:pb-32">
+  <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
+
+    <!-- MENSAGEM DE SUCESSO -->
+    <div id="success-message" class="hidden">
+      <div class="relative">
+        <div class="absolute inset-0 bg-gradient-to-r from-green-500/20 via-emerald-500/20 to-teal-500/20 rounded-3xl blur-2xl"></div>
+        <div class="relative bg-slate-900/80 backdrop-blur-xl border border-green-500/30 rounded-3xl p-12 lg:p-16 text-center">
+          <div class="w-20 h-20 mx-auto mb-6 bg-green-500/20 rounded-full flex items-center justify-center">
+            <i data-lucide="check-circle" class="w-12 h-12 text-green-400"></i>
+          </div>
+          <h2 class="text-3xl sm:text-4xl md:text-5xl font-bold text-white mb-4">
+            Mensagem enviada!
+          </h2>
+          <p class="text-lg sm:text-xl text-gray-300 mb-8">
+            Recebemos sua mensagem e entraremos em contato em até 24 horas.<br class="hidden sm:block">
+            Obrigado pela confiança! 🚀
+          </p>
+          <a href="index.php" 
+             class="inline-flex items-center gap-2 text-cyan-400 hover:text-cyan-300 font-medium transition-colors">
+            <i data-lucide="arrow-left" class="w-5 h-5"></i>
+            Voltar ao início
+          </a>
+        </div>
+      </div>
+    </div>
+
+    <!-- FORMULÁRIO -->
+    <form id="feedback-form" method="POST" class="relative">
+      <div class="absolute inset-0 bg-gradient-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">
+          
+          <!-- Nome e Email -->
+          <div class="grid sm:grid-cols-2 gap-6">
+            <div>
+              <label for="nome" class="block text-sm font-medium text-gray-300 mb-2">
+                Nome completo *
+              </label>
+              <input 
+                type="text" 
+                id="nome"
+                name="nome" 
+                placeholder="João Silva" 
+                required 
+                class="w-full px-4 py-3.5 bg-slate-800/50 border border-white/10 rounded-xl text-white placeholder-gray-500 focus:border-cyan-500/50 focus:ring-2 focus:ring-cyan-500/20 outline-none transition-all">
+            </div>
+            
+            <div>
+              <label for="email" class="block text-sm font-medium text-gray-300 mb-2">
+                E-mail *
+              </label>
+              <input 
+                type="email" 
+                id="email"
+                name="email" 
+                placeholder="joao@exemplo.com" 
+                required 
+                class="w-full px-4 py-3.5 bg-slate-800/50 border border-white/10 rounded-xl text-white placeholder-gray-500 focus:border-cyan-500/50 focus:ring-2 focus:ring-cyan-500/20 outline-none transition-all">
+            </div>
+          </div>
+
+          <!-- Empresa -->
+          <div>
+            <label for="empresa" class="block text-sm font-medium text-gray-300 mb-2">
+              Empresa ou projeto <span class="text-gray-500">(opcional)</span>
+            </label>
+            <input 
+              type="text" 
+              id="empresa"
+              name="empresa" 
+              placeholder="Nome da sua empresa" 
+              class="w-full px-4 py-3.5 bg-slate-800/50 border border-white/10 rounded-xl text-white placeholder-gray-500 focus:border-cyan-500/50 focus:ring-2 focus:ring-cyan-500/20 outline-none transition-all">
+          </div>
+
+          <!-- Mensagem -->
+          <div>
+            <label for="mensagem" class="block text-sm font-medium text-gray-300 mb-2">
+              Mensagem *
+            </label>
+            <textarea 
+              id="mensagem"
+              name="mensagem" 
+              rows="6" 
+              placeholder="Conte-nos sobre seu projeto, ideia ou como podemos ajudar..."
+              required 
+              class="w-full px-4 py-3.5 bg-slate-800/50 border border-white/10 rounded-xl text-white placeholder-gray-500 focus:border-cyan-500/50 focus:ring-2 focus:ring-cyan-500/20 outline-none transition-all resize-none"></textarea>
+          </div>
+
+          <!-- Submit Button -->
+          <button 
+            type="submit" 
+            class="w-full bg-gradient-to-r from-cyan-500 to-blue-600 text-white font-semibold text-lg px-8 py-4 rounded-xl shadow-lg hover:shadow-cyan-500/50 hover:scale-[1.02] transition-all duration-300 flex items-center justify-center gap-3 group">
+            <span id="button-text">Enviar Mensagem</span>
+            <i data-lucide="send" class="w-5 h-5 group-hover:translate-x-1 transition-transform"></i>
+          </button>
+
+          <!-- Info -->
+          <p class="text-center text-sm text-gray-400 mt-4">
+            Responderemos em até 24 horas úteis
+          </p>
+        </div>
+      </div>
+    </form>
+
+    <!-- CONTATO ALTERNATIVO -->
+    <div class="mt-16 text-center">
+      <p class="text-gray-400 mb-6">Prefere outro canal?</p>
+      <div class="flex flex-wrap items-center justify-center gap-4">
+        <a href="mailto:softedgecorporation@gmail.com" 
+           class="inline-flex items-center gap-2 px-6 py-3 bg-slate-800/50 hover:bg-slate-700/50 border border-white/10 rounded-xl text-white transition-all">
+          <i data-lucide="mail" class="w-5 h-5 text-cyan-400"></i>
+          <span class="text-sm">Email direto</span>
+        </a>
+        
+        <a href="https://whatsapp.com/channel/0029VawQLpGHltY2Y87fR83m" 
+           target="_blank"
+           rel="noopener noreferrer"
+           class="inline-flex items-center gap-2 px-6 py-3 bg-green-600/20 hover:bg-green-600/30 border border-green-500/30 rounded-xl text-white transition-all">
+          <i data-lucide="message-circle" class="w-5 h-5 text-green-400"></i>
+          <span class="text-sm">WhatsApp</span>
+        </a>
+      </div>
+    </div>
+
+  </div>
+</main>
+
+<?php include 'components/footer.php'; ?>
+
+<!-- SCRIPTS -->
+<script src="https://unpkg.com/lucide@latest"></script>
+<script>
+  document.addEventListener('DOMContentLoaded', () => {
+    lucide.createIcons();
+
+    // Form submission
+    const form = document.getElementById('feedback-form');
+    const successMessage = document.getElementById('success-message');
+    const buttonText = document.getElementById('button-text');
+
+    form.addEventListener('submit', async function(e) {
+      e.preventDefault();
+      
+      const button = this.querySelector('button[type="submit"]');
+      const originalContent = button.innerHTML;
+      
+      // Loading state
+      button.innerHTML = '<i data-lucide="loader-2" class="w-5 h-5 animate-spin mx-auto"></i>';
+      button.disabled = true;
+      lucide.createIcons();
+
+      try {
+        const formData = new FormData(this);
+        const response = await fetch('feedback.php', {
+          method: 'POST',
+          body: formData
+        });
+
+        const data = await response.json();
+
+        if (data.success) {
+          // Hide form and show success message
+          form.style.opacity = '0';
+          form.style.transform = 'scale(0.95)';
+          form.style.transition = 'all 0.5s ease';
+          
+          setTimeout(() => {
+            form.classList.add('hidden');
+            successMessage.classList.remove('hidden');
+            successMessage.style.opacity = '0';
+            successMessage.style.transform = 'scale(0.95)';
+            
+            setTimeout(() => {
+              successMessage.style.opacity = '1';
+              successMessage.style.transform = 'scale(1)';
+              successMessage.style.transition = 'all 0.5s ease';
+            }, 50);
+            
+            lucide.createIcons();
+          }, 500);
+        } else {
+          // Show error
+          alert('❌ ' + data.error);
+          button.innerHTML = originalContent;
+          button.disabled = false;
+          lucide.createIcons();
+        }
+      } catch (error) {
+        console.error('Erro:', error);
+        alert('❌ Erro ao enviar mensagem. Por favor, tente novamente ou entre em contato via WhatsApp.');
+        button.innerHTML = originalContent;
+        button.disabled = false;
+        lucide.createIcons();
+      }
+    });
+
+    // Auto-resize textarea
+    const textarea = document.getElementById('mensagem');
+    textarea.addEventListener('input', function() {
+      this.style.height = 'auto';
+      this.style.height = this.scrollHeight + 'px';
+    });
+  });
+</script>
+
+<style>
+  /* Input animations */
+  input:focus,
+  textarea:focus {
+    transform: translateY(-2px);
+  }
+
+  /* Smooth transitions */
+  input,
+  textarea,
+  button {
+    transition: all 0.3s ease;
+  }
+
+  /* Placeholder styling */
+  ::placeholder {
+    color: #6b7280;
+  }
+
+  /* Loading animation */
+  @keyframes spin {
+    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-gradient-to-r {
+    background-size: 200% 200%;
+    animation: gradient-shift 8s ease infinite;
+  }
+</style>

index.php

@@ -0,0 +1,68 @@
+# Dockerfile NGINX + PHP-FPM - ALTERNATIVA SEM APACHE
+FROM php:8.3-fpm
+
+# Instala NGINX e dependências
+RUN apt-get update && \
+    apt-get install -y --no-install-recommends \
+        nginx \
+        libpng-dev \
+        libonig-dev \
+        libjpeg-dev \
+        libfreetype6-dev \
+        && docker-php-ext-configure gd --with-freetype --with-jpeg \
+        && docker-php-ext-install -j$(nproc) \
+            mbstring \
+            exif \
+            pcntl \
+            bcmath \
+            gd \
+        && apt-get clean \
+        && rm -rf /var/lib/apt/lists/*
+
+# Configuração do NGINX
+RUN echo 'server {\n\
+    listen $PORT;\n\
+    server_name _;\n\
+    root /var/www/html;\n\
+    index index.php index.html;\n\
+    \n\
+    location / {\n\
+        try_files $uri $uri/ /index.php?$query_string;\n\
+    }\n\
+    \n\
+    location ~ \.php$ {\n\
+        fastcgi_pass 127.0.0.1:9000;\n\
+        fastcgi_index index.php;\n\
+        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;\n\
+        include fastcgi_params;\n\
+    }\n\
+    \n\
+    location ~ /\.ht {\n\
+        deny all;\n\
+    }\n\
+}\n\
+' > /etc/nginx/sites-available/default
+
+# Copia o site
+WORKDIR /var/www/html
+COPY . .
+
+# Permissões
+RUN chown -R www-data:www-data /var/www/html && \
+    chmod -R 755 /var/www/html
+
+# Configura porta
+ENV PORT=8080
+EXPOSE $PORT
+
+# Script de inicialização
+RUN echo '#!/bin/bash\n\
+# Substitui $PORT na config do NGINX\n\
+sed -i "s/\$PORT/'$PORT'/g" /etc/nginx/sites-available/default\n\
+# Inicia PHP-FPM em background\n\
+php-fpm -D\n\
+# Inicia NGINX em foreground\n\
+nginx -g "daemon off;"\n\
+' > /start.sh && chmod +x /start.sh
+
+CMD ["/start.sh"]

projetos.php

@@ -0,0 +1,439 @@
+<?php 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-gradient-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-gradient-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-gradient-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 flex-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 flex-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 flex-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 flex-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-gradient-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-gradient-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-gradient-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-gradient-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-gradient-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-gradient-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-gradient-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-gradient-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-gradient-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-gradient-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-gradient-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-gradient-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-gradient-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-gradient-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-gradient-to-r,
+  .bg-gradient-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>

servicos.php

@@ -0,0 +1,383 @@
+<?php 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-gradient-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">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 bg-gradient-to-r from-cyan-400 via-blue-500 to-purple-500 bg-clip-text text-transparent">
+          soluções digitais
+        </span>
+      </h1>
+      
+      <p class="text-base sm:text-lg md:text-xl text-gray-300 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-gradient-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-gradient-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 flex-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 flex-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 flex-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 flex-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 flex-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-gradient-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-gradient-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 flex-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 flex-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 flex-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 flex-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 flex-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-gradient-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-gradient-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 flex-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 flex-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 flex-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 flex-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 flex-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-gradient-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-gradient-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 flex-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 flex-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 flex-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 flex-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 flex-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-gradient-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-gradient-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="flex-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="flex-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="flex-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="flex-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 bg-gradient-to-r from-cyan-400 to-blue-500 bg-clip-text text-transparent">
+          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-gradient-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 Projeto
+          <i data-lucide="arrow-right" class="w-5 h-5 group-hover:translate-x-1 transition-transform"></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 backdrop-blur-xl border border-white/10 text-white font-semibold text-lg px-10 py-4 rounded-full 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-gradient-to-r,
+  .bg-gradient-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,285 @@
+<?php 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-gradient-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="bg-gradient-to-r from-cyan-400 via-blue-500 to-purple-500 bg-clip-text text-transparent">
+          à realidade lógica
+        </span>
+      </h1>
+      
+      <p class="text-lg sm:text-xl md:text-2xl text-gray-300 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-gradient-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 inesquecíveis.
+          </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-gradient-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/equipe.jpg" 
+                     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-gradient-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-gradient-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-gradient-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-gradient-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-gradient-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-gradient-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-gradient-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-gradient-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-gradient-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-gradient-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-gradient-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-gradient-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">
+          Falar com a gente
+          <i data-lucide="arrow-right" class="w-5 h-5 group-hover:translate-x-1 transition-transform"></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-gradient-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>