ci: atualiza arquitetura da pipeline para fluxos paralelos e testes unitarios

.dockerignore

@@ -0,0 +1,5 @@
+node_modules
+npm-debug.log
+.env
+.git
+.gitea

.gitea/workflows/deploy.yaml

@@ -1,121 +0,0 @@
-name: "DevSecOps Enterprise Pipeline"
-on:
-  push:
-    branches: [ main ]
-
-jobs:
-  security-gate-and-deploy:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout Code
-        uses: actions/checkout@v3
-        with:
-          fetch-depth: 0
-
-      # ==========================================
-      # ETAPA 1: TESTES ESTÁTICOS DE SEGURANÇA
-      # ==========================================
-
-      # 1.1. SECRET SCANNING (Protege contra novas fugas de chaves)
-      - name: Gitleaks Scan
-        run: |
-          curl -sL https://github.com/gitleaks/gitleaks/releases/download/v8.18.2/gitleaks_8.18.2_linux_x64.tar.gz | tar -xz -C /tmp
-          /tmp/gitleaks protect --source . --verbose --redact --staged --exit-code 1
-
-      # 1.2. SCA - Verifica vulnerabilidades conhecidas no Nginx
-      - name: Scan Docker Image Vulnerabilities (Trivy)
-        run: |
-          curl -sfL https://raw.githubusercontent.com/aquasecurity/trivy/main/contrib/install.sh | sh -s -- -b /usr/local/bin
-          trivy image --severity HIGH,CRITICAL nginx:alpine
-
-      # 1.3. SAST - Análise de Código Fonte
-      - name: SonarQube Analysis
-        run: |
-          curl -sL https://binaries.sonarsource.com/Distribution/sonar-scanner-cli/sonar-scanner-cli-5.0.1.3006-linux.zip -o sonar-scanner.zip
-          unzip -q sonar-scanner.zip
-          ./sonar-scanner-5.0.1.3006-linux/bin/sonar-scanner \
-            -Dsonar.projectKey=website-test \
-            -Dsonar.sources=. \
-            -Dsonar.host.url=http://51.89.40.2:9000 \
-            -Dsonar.token=${{ secrets.SONAR_TOKEN }} \
-            -Dsonar.qualitygate.wait=true
-
-      # ==========================================
-      # ETAPA 2: SANDBOX (AMBIENTE DE TESTE DINÂMICO)
-      # ==========================================
-
-      - name: Criar Sandbox Temporária
-        run: |
-          # Remover qualquer resíduo de sandbox anterior
-          docker rm -f website-test-sandbox || true
-          
-          # Criamos a Sandbox. Como o ZAP vai aceder pela rede interna do Docker, 
-          # já não precisamos de expor portas para o exterior (muito mais seguro)!
-          docker run -d --name website-test-sandbox nginx:alpine
-          
-          # Copiar o index.html atual para a Sandbox
-          docker cp index.html website-test-sandbox:/usr/share/nginx/html/index.html
-          
-          # Aguardar 5 segundos para o servidor Nginx iniciar
-          sleep 5
-
-      # ==========================================
-      # ETAPA 3: DAST - TESTE DINÂMICO (OWASP ZAP)
-      # ==========================================
-
-      # Ataca a Sandbox usando a rede interna do Docker (--link) e o nome do container
-      - name: OWASP ZAP Baseline Scan
-        run: |
-          mkdir -p qatests
-          chmod 777 qatests
-          
-          # Usamos o --link para o container do ZAP conseguir "ver" o container da sandbox diretamente
-          docker run --user root \
-            --link website-test-sandbox:website-test-sandbox \
-            -v $(pwd)/qatests:/zap/wrk/:rw \
-            -t ghcr.io/zaproxy/zaproxy:stable zap-baseline.py \
-            -t http://website-test-sandbox \
-            -r report.html
-
-      # Garante que a Sandbox é desmantelada mesmo que o passo do ZAP falhe
-      - name: Destruir Sandbox
-        if: always()
-        run: |
-          docker rm -f website-test-sandbox || true
-
-      # ==========================================
-      # ETAPA 4: DEPLOY EM PRODUÇÃO (SÓ SE TUDO PASSAR)
-      # ==========================================
-
-      - name: Hardened Deploy (Produção - Porta 3000)
-        run: |
-          # Backup do ficheiro anterior em Produção
-          docker exec website-test-backend tar -czf /tmp/index_backup.tar.gz -C /usr/share/nginx/html index.html || true
-          
-          # Limpar a pasta de produção e copiar o novo código aprovado
-          docker exec website-test-backend sh -c "rm -rf /usr/share/nginx/html/*"
-          docker cp index.html website-test-backend:/usr/share/nginx/html/index.html
-          
-          # Aplicar Hardening de permissões
-          docker exec website-test-backend chown root:root /usr/share/nginx/html/index.html
-          docker exec website-test-backend chmod 444 /usr/share/nginx/html/index.html
-          
-          # Testar se o site responde localmente em produção
-          docker exec website-test-backend curl --silent --show-error --fail http://localhost:80 || exit 1
-
-      # ==========================================
-      # ETAPA 5: ARTEFACTOS E NOTIFICAÇÕES
-      # ==========================================
-
-      # Guarda o relatório interativo gerado pelo OWASP ZAP para poderes descarregar no Gitea
-      - name: Guardar Relatorio ZAP
-        if: always()
-        uses: actions/upload-artifact@v3
-        with:
-          name: owasp-zap-report
-          path: qatests/report.html
-
-      - name: Slack/Discord Notification
-        if: always()
-        run: |
-          echo "Pipeline finalizada com status: ${{ job.status }}"

.gitea/workflows/deploy.yml

@@ -0,0 +1,147 @@
+name: "DevSecOps Enterprise Pipeline"
+
+# ALTERADO: Agora a pipeline reage a QUALQUER alteração em QUALQUER branch,
+# permitindo a automação total sem intervenção manual.
+on:
+  push:
+    branches: ["*"] # Escuta todas as branches
+  pull_request:
+    branches: [ main ]
+
+jobs:
+  security-gate-and-deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - name: 0. Checkout Code
+        uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+
+      # ==========================================
+      # ETAPA 1: VALIDACAO FUNCIONAL (TESTES UNITÁRIOS)
+      # Correm SEMPRE, em qualquer branch.
+      # ==========================================
+      - name: 1.1. Setup Node.js Environment
+        uses: actions/setup-node@v3
+        with:
+          node-version: '18'
+
+      - name: 1.2. Run Unit Tests (Jest)
+        run: |
+          echo ">>> A instalar dependências e a correr testes funcionais..."
+          # Ajusta para a pasta onde tens o teu package.json (ex: cd backend && npm install)
+          npm install
+          npm test
+
+      - name: 1.3. Build Application Image
+        run: docker build -f backend/Dockerfile -t apex-solutions:latest .
+
+      # ==========================================
+      # ETAPA 2: ANÁLISE ESTÁTICA RÁPIDA (SAST, SCA)
+      # Correm SEMPRE, a cada commit de qualquer branch secundária.
+      # ==========================================
+
+      - name: 2.1. Secret Scanning (Gitleaks)
+        run: |
+          curl -sL https://github.com/gitleaks/gitleaks/releases/download/v8.18.2/gitleaks_8.18.2_linux_x64.tar.gz | tar -xz -C /tmp
+          /tmp/gitleaks detect --source . --verbose --redact --log-opts="-1" --exit-code 1
+
+      - name: 2.2. Software Composition Analysis (Trivy)
+        run: |
+          curl -sfL https://raw.githubusercontent.com/aquasecurity/trivy/main/contrib/install.sh | sh -s -- -b /usr/local/bin
+          trivy image --severity HIGH,CRITICAL --format table --output trivy-report.txt apex-solutions:latest
+          trivy image --severity HIGH,CRITICAL --exit-code 1 apex-solutions:latest
+
+      - name: 2.3. Archive Trivy Report
+        if: always()
+        uses: actions/upload-artifact@v3
+        with:
+          name: trivy-sca-report
+          path: trivy-report.txt
+
+      - name: 2.4. Static Application Security Testing (SonarQube)
+        run: |
+          curl -sL https://binaries.sonarsource.com/Distribution/sonar-scanner-cli/sonar-scanner-cli-5.0.1.3006-linux.zip -o sonar-scanner.zip
+          unzip -q sonar-scanner.zip
+          ./sonar-scanner-5.0.1.3006-linux/bin/sonar-scanner \
+            -Dsonar.projectKey=website-test \
+            -Dsonar.sources=. \
+            -Dsonar.host.url=https://sonar.each-cs.com \
+            -Dsonar.token=${{ secrets.SONAR_TOKEN }} \
+            -Dsonar.qualitygate.wait=true
+
+      # ==========================================
+      # ETAPA 3: ANÁLISE DINÂMICA (DAST - OWASP ZAP)
+      # CRÍTICO: O condicional 'if' garante que este bloco SÓ corre na branch 'main'
+      # ==========================================
+
+      - name: 3.1. Provision Ephemeral Sandbox
+        if: github.ref == 'refs/heads/main'
+        run: |
+          docker rm -f website-test-sandbox || true
+          docker run -d --name website-test-sandbox apex-solutions:latest
+          sleep 5
+
+      - name: 3.2. OWASP ZAP Baseline Scan
+        if: github.ref == 'refs/heads/main'
+        run: |
+          mkdir -p qatests
+          docker rm -f zap-scanner || true
+          docker volume rm zap-reports || true
+          docker volume create zap-reports
+          
+          docker run --user root --name zap-scanner \
+            --link website-test-sandbox:website-test-sandbox \
+            -v zap-reports:/zap/wrk/:rw \
+            -t ghcr.io/zaproxy/zaproxy:stable zap-baseline.py \
+            -t http://website-test-sandbox:3000 \
+            -r report.html \
+            -I
+          
+          docker cp zap-scanner:/zap/wrk/report.html qatests/report.html
+          docker rm -f zap-scanner || true
+          docker volume rm zap-reports || true
+
+      - name: 3.3. Teardown Ephemeral Sandbox
+        if: always() && github.ref == 'refs/heads/main'
+        run: |
+          docker rm -f website-test-sandbox || true
+
+      # ==========================================
+      # ETAPA 4: DEPLOY SEGURO VIA SSH
+      # CRÍTICO: Só executa se passar em TUDO e for um push final na branch 'main'
+      # ==========================================
+
+      - name: 4.1. Hardened Production Deployment via SSH
+        if: github.ref == 'refs/heads/main' && github.event_name == 'push'
+        uses: appleboy/ssh-action@v1.0.0
+        with:
+          host: ${{ secrets.SSH_HOST }}
+          username: ${{ secrets.SSH_USER }}
+          key: ${{ secrets.SSH_PRIVATE_KEY }}
+          script: |
+            echo ">>> A iniciar o Deploy Remoto em Produção via SSH..."
+            cd /opt/website-test
+            git pull origin main
+            
+            # Tratamento do .env em produção usando os Secrets do Gitea
+            echo "PORT=3000" > .env
+            echo "API_SECRET=${{ secrets.API_SECRET_PROD }}" >> .env
+            
+            # Reconstrói a imagem e reinicia o serviço refletindo o espelho da main
+            docker build -f backend/Dockerfile -t apex-solutions:production .
+            docker stop portal-corporativo || true
+            docker rm portal-corporativo || true
+            docker run -d -p 3000:3000 --env-file .env --name portal-corporativo apex-solutions:production
+            echo ">>> Deploy em Produção finalizado com sucesso!"
+
+      # ==========================================
+      # ETAPA 5: GESTÃO DE ARTEFACTOS
+      # ==========================================
+
+      - name: Archive ZAP Report (Raw HTML)
+        if: always() && github.ref == 'refs/heads/main'
+        uses: actions/upload-artifact@v3
+        with:
+          name: owasp-zap-report
+          path: qatests/report.html

.gitignore

@@ -0,0 +1,4 @@
+node_modules/
+.env
+*.backup
+.DS_Store

README.md

@@ -0,0 +1 @@
+> Teste de fluxo 100% automatizado: Branch criada a partir da main atualizada.

backend/Dockerfile

@@ -0,0 +1,9 @@
+FROM node:18-alpine
+WORKDIR /usr/src/app/backend
+COPY backend/package*.json ./
+RUN npm install --omit=dev
+WORKDIR /usr/src/app
+COPY backend/ ./backend/
+COPY frontend/ ./frontend/
+EXPOSE 3000
+CMD ["node", "backend/server.js"]

backend/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "corporate-portal",
+  "version": "2.0.0",
+  "description": "Multi-page Corporate Portal for DevSecOps PoC",
+  "main": "server.js",
+  "scripts": {
+    "start": "node server.js"
+  },
+  "dependencies": {
+    "cors": "^2.8.5",
+    "express": "^4.18.2",
+    "nodemailer": "^6.9.3"
+  }
+}

backend/server.js

@@ -0,0 +1,90 @@
+const express = require('express');
+const cors = require('cors');
+const path = require('path');
+const nodemailer = require('nodemailer');
+
+const app = express();
+const PORT = process.env.PORT || 3000;
+
+app.use(cors());
+app.use(express.json());
+app.use(express.urlencoded({ extended: true }));
+
+// Serve a pasta frontend
+app.use(express.static(path.join(__dirname, '../frontend'), { extensions: ['html'] }));
+
+// Rotas das 4 páginas
+app.get('/', (req, res) => res.sendFile(path.join(__dirname, '../frontend/index.html')));
+app.get('/about', (req, res) => res.sendFile(path.join(__dirname, '../frontend/about.html')));
+app.get('/careers', (req, res) => res.sendFile(path.join(__dirname, '../frontend/careers.html')));
+app.get('/contact', (req, res) => res.sendFile(path.join(__dirname, '../frontend/contact.html')));
+
+// Configuração do transporte de E-mail
+const transporter = nodemailer.createTransport({
+    host: 'mail.limpezascleanandcare.com',
+    port: 465,
+    secure: true, 
+    auth: {
+        user: 'teste@limpezascleanandcare.com', 
+        pass: 'HTC?D=}5&cHoTrH=' 
+    },
+    tls: {
+        rejectUnauthorized: false // Ignora avisos de certificado no servidor SMTP
+    }
+});
+
+// Endpoint do Formulário de Contacto (Com Recetor Dinâmico)
+app.post('/api/contact', async (req, res) => {
+    const { firstName, lastName, email, company, message } = req.body;
+
+    if (!email || !message) {
+        return res.status(400).json({ error: 'Email and message are required.' });
+    }
+
+    try {
+        // Construção do Email - Agora enviado para o e-mail inserido no formulário
+        const mailOptions = {
+            from: '"Apex Solutions" <teste@limpezascleanandcare.com>', // Remetente fixo válido
+            to: email, // RECETOR DINÂMICO (Vem diretamente do campo Email Address)
+            subject: `Confirmation: We received your request, ${firstName}!`,
+            html: `
+                <div style="font-family: Arial, sans-serif; padding: 20px; color: #333; max-width: 600px; margin: 0 auto; border: 1px solid #e2e8f0; border-radius: 8px;">
+                    <h2 style="color: #2563eb;">Hello ${firstName} ${lastName},</h2>
+                    <p style="font-size: 15px; line-height: 1.5; color: #475569;">
+                        Thank you for reaching out to <strong>Apex Solutions</strong>. This is an automated confirmation to let you know that we have successfully received your inquiry.
+                    </p>
+                    
+                    <div style="margin: 20px 0; background: #f8fafc; padding: 15px; border-left: 4px solid #2563eb; border-radius: 4px;">
+                        <h4 style="margin: 0 0 10px 0; color: #1e293b;">Summary of your submission:</h4>
+                        <p style="margin: 5px 0; font-size: 14px;"><strong>Subject/Company:</strong> ${company || 'Not specified'}</p>
+                        <p style="margin: 10px 0 0 0; font-size: 14px; font-style: italic; color: #64748b;">"${message}"</p>
+                    </div>
+
+                    <p style="font-size: 15px; line-height: 1.5; color: #475569;">
+                        Our advisory team will review your details and get back to you within 24 business hours.
+                    </p>
+                    
+                    <hr style="border: 0; border-top: 1px solid #e2e8f0; margin: 20px 0;" />
+                    
+                    <p style="font-size: 12px; color: #94a3b8; text-align: center; margin: 0;">
+                        Best regards,<br>
+                        <strong>Apex Solutions Corporate Team</strong>
+                    </p>
+                </div>
+            `
+        };
+
+        // Envia o e-mail real
+        const info = await transporter.sendMail(mailOptions);
+        console.log(`[Email Sent Automatically to ${email}] Message ID: ${info.messageId}`);
+        
+        res.status(200).json({ success: true, message: 'Thank you! A confirmation email has been dispatched to your address.' });
+    } catch (error) {
+        console.error(`[Email Error]:`, error);
+        res.status(500).json({ error: 'Internal server error. Could not send confirmation email.' });
+    }
+});
+
+app.listen(PORT, () => {
+    console.log(`[Apex Server] Running on port ${PORT}`);
+});

frontend/about.html

@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>About Us | Apex Solutions</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+</head>
+<body class="bg-gray-50 text-gray-800 font-sans antialiased flex flex-col min-h-screen">
+
+    <nav class="bg-slate-900 text-white shadow-lg sticky top-0 z-50">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="flex items-center justify-between h-20">
+                <div class="flex items-center">
+                    <a href="/" class="font-bold text-2xl tracking-tighter hover:opacity-80 transition-opacity">Apex<span class="text-blue-500">Solutions</span></a>
+                </div>
+                <div class="hidden md:block">
+                    <div class="ml-10 flex items-baseline space-x-4">
+                        <a href="about.html" class="bg-blue-600 text-white px-4 py-2 rounded-md text-sm font-medium">About Us</a>
+                        <a href="careers.html" class="text-gray-300 hover:bg-slate-700 hover:text-white px-4 py-2 rounded-md text-sm font-medium transition-colors">Careers</a>
+                        <a href="contact.html" class="text-gray-300 hover:bg-slate-700 hover:text-white px-4 py-2 rounded-md text-sm font-medium transition-colors">Contact</a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </nav>
+
+    <main class="flex-grow max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
+        <article class="prose prose-lg prose-blue max-w-none">
+            <h1 class="text-4xl font-extrabold text-slate-900 mb-8">Who We Are</h1>
+            <p class="text-xl text-gray-600 mb-8">Founded in 2005, Apex Solutions started with a simple idea: business services should be accessible, transparent, and driven by results. Today, we are proud to be a trusted partner for companies around the world.</p>
+
+            <h2 class="text-2xl font-bold text-slate-800 mt-12 mb-4">Our Mission</h2>
+            <p class="text-gray-600 mb-6 leading-relaxed">Our mission is to empower organizations by providing them with the tools, strategies, and support they need to thrive in a competitive landscape. We believe in creating sustainable growth through ethical business practices and continuous improvement.</p>
+
+            <h2 class="text-2xl font-bold text-slate-800 mt-12 mb-4">Our Core Values</h2>
+            <ul class="list-disc pl-6 text-gray-600 mb-6 space-y-2">
+                <li><strong>Integrity:</strong> We do what is right, not what is easy. Honesty is the foundation of all our client relationships.</li>
+                <li><strong>Innovation:</strong> We continuously seek new ways to solve old problems, staying ahead of market trends.</li>
+                <li><strong>Excellence:</strong> We strive for perfection in every project, delivering high-quality results consistently.</li>
+                <li><strong>Collaboration:</strong> We work closely with our clients, believing that the best solutions come from teamwork.</li>
+            </ul>
+        </article>
+    </main>
+
+    <footer class="bg-slate-900 text-slate-400 py-12 text-center">
+        <p>&copy; 2026 Apex Solutions. All rights reserved.</p>
+    </footer>
+</body>
+</html>

frontend/careers.html

@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Careers | Apex Solutions</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+</head>
+<body class="bg-gray-50 text-gray-800 font-sans antialiased flex flex-col min-h-screen">
+
+    <nav class="bg-slate-900 text-white shadow-lg sticky top-0 z-50">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="flex items-center justify-between h-20">
+                <div class="flex items-center">
+                    <a href="/" class="font-bold text-2xl tracking-tighter hover:opacity-80 transition-opacity">Apex<span class="text-blue-500">Solutions</span></a>
+                </div>
+                <div class="hidden md:block">
+                    <div class="ml-10 flex items-baseline space-x-4">
+                        <a href="about.html" class="text-gray-300 hover:bg-slate-700 hover:text-white px-4 py-2 rounded-md text-sm font-medium transition-colors">About Us</a>
+                        <a href="careers.html" class="bg-blue-600 text-white px-4 py-2 rounded-md text-sm font-medium">Careers</a>
+                        <a href="contact.html" class="text-gray-300 hover:bg-slate-700 hover:text-white px-4 py-2 rounded-md text-sm font-medium transition-colors">Contact</a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </nav>
+
+    <main class="flex-grow max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
+        <div class="text-center mb-16">
+            <h1 class="text-4xl font-extrabold text-slate-900 mb-4">Join Our Team</h1>
+            <p class="text-xl text-gray-600">We are always looking for passionate individuals to help us build the future.</p>
+        </div>
+
+        <h2 class="text-2xl font-bold text-slate-800 mb-6">Open Positions</h2>
+        <div class="space-y-4">
+            <div class="bg-white p-6 rounded-lg shadow-sm border border-gray-200 flex justify-between items-center hover:border-blue-500 transition-colors">
+                <div>
+                    <h3 class="text-lg font-bold text-slate-900">Senior Business Analyst</h3>
+                    <p class="text-gray-500 text-sm mt-1">Full-Time &bull; Remote (Europe) &bull; Consulting Dept.</p>
+                </div>
+                <a href="contact.html" class="text-blue-600 font-semibold hover:underline">Apply Now &rarr;</a>
+            </div>
+            
+            <div class="bg-white p-6 rounded-lg shadow-sm border border-gray-200 flex justify-between items-center hover:border-blue-500 transition-colors">
+                <div>
+                    <h3 class="text-lg font-bold text-slate-900">Account Executive</h3>
+                    <p class="text-gray-500 text-sm mt-1">Full-Time &bull; New York, USA &bull; Sales Dept.</p>
+                </div>
+                <a href="contact.html" class="text-blue-600 font-semibold hover:underline">Apply Now &rarr;</a>
+            </div>
+
+            <div class="bg-white p-6 rounded-lg shadow-sm border border-gray-200 flex justify-between items-center hover:border-blue-500 transition-colors">
+                <div>
+                    <h3 class="text-lg font-bold text-slate-900">Customer Success Manager</h3>
+                    <p class="text-gray-500 text-sm mt-1">Part-Time &bull; London, UK &bull; Support Dept.</p>
+                </div>
+                <a href="contact.html" class="text-blue-600 font-semibold hover:underline">Apply Now &rarr;</a>
+            </div>
+        </div>
+    </main>
+
+    <footer class="bg-slate-900 text-slate-400 py-12 text-center">
+        <p>&copy; 2026 Apex Solutions. All rights reserved.</p>
+    </footer>
+</body>
+</html>

frontend/contact.html

@@ -0,0 +1,117 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Contact Us | Apex Solutions</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+</head>
+<body class="bg-gray-50 text-gray-800 font-sans antialiased flex flex-col min-h-screen">
+
+    <nav class="bg-slate-900 text-white shadow-lg sticky top-0 z-50">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="flex items-center justify-between h-20">
+                <div class="flex items-center">
+                    <a href="/" class="font-bold text-2xl tracking-tighter hover:opacity-80 transition-opacity">Apex<span class="text-blue-500">Solutions</span></a>
+                </div>
+                <div class="hidden md:block">
+                    <div class="ml-10 flex items-baseline space-x-4">
+                        <a href="about.html" class="text-gray-300 hover:bg-slate-700 hover:text-white px-4 py-2 rounded-md text-sm font-medium transition-colors">About Us</a>
+                        <a href="careers.html" class="text-gray-300 hover:bg-slate-700 hover:text-white px-4 py-2 rounded-md text-sm font-medium transition-colors">Careers</a>
+                        <a href="contact.html" class="bg-blue-600 text-white px-4 py-2 rounded-md text-sm font-medium">Contact</a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </nav>
+
+    <main class="flex-grow max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 py-16 w-full">
+        <div class="bg-white rounded-xl shadow-md border border-gray-100 overflow-hidden">
+            <div class="bg-slate-900 px-8 py-10 text-white">
+                <h2 class="text-3xl font-bold mb-2">Get in Touch</h2>
+                <p class="text-slate-300">Have a question or want to work together? Leave your details below and we will get back to you.</p>
+            </div>
+            
+            <form id="contactForm" class="p-8 space-y-6">
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                    <div>
+                        <label for="firstName" class="block text-sm font-medium text-gray-700 mb-1">First Name</label>
+                        <input type="text" id="firstName" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500" required>
+                    </div>
+                    <div>
+                        <label for="lastName" class="block text-sm font-medium text-gray-700 mb-1">Last Name</label>
+                        <input type="text" id="lastName" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500" required>
+                    </div>
+                </div>
+
+                <div>
+                    <label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email Address</label>
+                    <input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500" placeholder="you@example.com" required>
+                </div>
+
+                <div>
+                    <label for="company" class="block text-sm font-medium text-gray-700 mb-1">Company / Subject</label>
+                    <input type="text" id="company" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500">
+                </div>
+
+                <div>
+                    <label for="message" class="block text-sm font-medium text-gray-700 mb-1">Message</label>
+                    <textarea id="message" rows="5" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500" placeholder="How can we help you?" required></textarea>
+                </div>
+
+                <div id="formStatus" class="hidden rounded-md p-4 mb-4 text-sm font-medium"></div>
+
+                <button type="submit" id="submitBtn" class="w-full bg-blue-600 text-white font-bold py-3 px-4 rounded-md hover:bg-blue-700 transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
+                    Send Message
+                </button>
+            </form>
+        </div>
+    </main>
+
+    <footer class="bg-slate-900 text-slate-400 py-12 text-center">
+        <p>&copy; 2026 Apex Solutions. All rights reserved.</p>
+    </footer>
+
+    <script>
+        document.getElementById('contactForm').addEventListener('submit', async (e) => {
+            e.preventDefault();
+            const btn = document.getElementById('submitBtn');
+            const statusDiv = document.getElementById('formStatus');
+            
+            btn.disabled = true;
+            btn.textContent = 'Sending...';
+            statusDiv.classList.add('hidden');
+
+            const data = {
+                firstName: document.getElementById('firstName').value,
+                lastName: document.getElementById('lastName').value,
+                email: document.getElementById('email').value,
+                company: document.getElementById('company').value,
+                message: document.getElementById('message').value,
+            };
+
+            try {
+                const response = await fetch('/api/contact', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify(data)
+                });
+                
+                const result = await response.json();
+                
+                statusDiv.classList.remove('hidden', 'bg-red-50', 'text-red-800');
+                statusDiv.classList.add('bg-green-50', 'text-green-800');
+                statusDiv.textContent = result.message;
+                e.target.reset();
+            } catch (err) {
+                statusDiv.classList.remove('hidden', 'bg-green-50', 'text-green-800');
+                statusDiv.classList.add('bg-red-50', 'text-red-800');
+                statusDiv.textContent = 'Connection error. Please try again later.';
+            } finally {
+                btn.disabled = false;
+                btn.textContent = 'Send Message';
+            }
+        });
+    </script>
+</body>
+</html>

frontend/index.html

@@ -0,0 +1,101 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Home | Apex Solutions</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <style>
+        html { scroll-behavior: smooth; } /* Animação suave ao clicar no link de serviços */
+    </style>
+</head>
+<body class="bg-gray-50 text-gray-800 font-sans antialiased flex flex-col min-h-screen">
+
+    <nav class="bg-slate-900 text-white shadow-lg sticky top-0 z-50">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="flex items-center justify-between h-20">
+                <div class="flex items-center">
+                    <a href="/" class="font-bold text-2xl tracking-tighter hover:opacity-80 transition-opacity">Apex<span class="text-blue-500">Solutions</span></a>
+                </div>
+                <div class="hidden md:block">
+                    <div class="ml-10 flex items-baseline space-x-4">
+                        <a href="about.html" class="text-gray-300 hover:bg-slate-700 hover:text-white px-4 py-2 rounded-md text-sm font-medium transition-colors">About Us</a>
+                        <a href="careers.html" class="text-gray-300 hover:bg-slate-700 hover:text-white px-4 py-2 rounded-md text-sm font-medium transition-colors">Careers</a>
+                        <a href="contact.html" class="text-gray-300 hover:bg-slate-700 hover:text-white px-4 py-2 rounded-md text-sm font-medium transition-colors">Contact</a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </nav>
+
+    <main class="flex-grow">
+        <div class="bg-white border-b border-gray-200">
+            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-24 lg:py-32">
+                <h1 class="text-4xl tracking-tight font-extrabold text-gray-900 sm:text-5xl md:text-6xl">
+                    <span class="block">Innovative Solutions for</span>
+                    <span class="block text-blue-600">Modern Businesses</span>
+                </h1>
+                <p class="mt-6 max-w-2xl text-lg text-gray-500 leading-relaxed">
+                    At Apex Solutions, we deliver high-quality business consulting, technology services, and strategic insights. We help organizations across the globe achieve their goals through operational excellence and digital transformation.
+                </p>
+                <div class="mt-10 flex gap-4">
+                    <a href="#services" class="px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700">Explore Services</a>
+                    <a href="contact.html" class="px-8 py-3 border border-gray-300 text-base font-medium rounded-md text-slate-700 bg-white hover:bg-gray-50">Get in Touch</a>
+                </div>
+            </div>
+        </div>
+
+        <div id="services" class="bg-slate-50 border-b border-gray-200">
+            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20">
+                <h2 class="text-4xl font-extrabold text-slate-900 mb-4">Our Services</h2>
+                <p class="text-xl text-gray-600 mb-12 max-w-3xl">Comprehensive solutions designed to elevate your business operations and drive meaningful results.</p>
+
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
+                    <div class="bg-white p-8 rounded-xl shadow-sm border border-gray-200">
+                        <div class="w-12 h-12 bg-blue-100 text-blue-600 rounded-lg flex items-center justify-center font-bold text-xl mb-4">1</div>
+                        <h3 class="text-2xl font-bold text-slate-800 mb-3">Management Consulting</h3>
+                        <p class="text-gray-600">We analyze your current organizational structure and provide actionable strategies to improve efficiency, reduce costs, and accelerate business growth.</p>
+                    </div>
+                    <div class="bg-white p-8 rounded-xl shadow-sm border border-gray-200">
+                        <div class="w-12 h-12 bg-blue-100 text-blue-600 rounded-lg flex items-center justify-center font-bold text-xl mb-4">2</div>
+                        <h3 class="text-2xl font-bold text-slate-800 mb-3">Technology Integration</h3>
+                        <p class="text-gray-600">Upgrade your legacy systems. We help you implement modern software solutions, CRM systems, and cloud-based applications tailored to your specific industry.</p>
+                    </div>
+                    <div class="bg-white p-8 rounded-xl shadow-sm border border-gray-200">
+                        <div class="w-12 h-12 bg-blue-100 text-blue-600 rounded-lg flex items-center justify-center font-bold text-xl mb-4">3</div>
+                        <h3 class="text-2xl font-bold text-slate-800 mb-3">Financial Advisory</h3>
+                        <p class="text-gray-600">Expert guidance on capital allocation, risk management, and financial restructuring to ensure your company remains profitable in volatile markets.</p>
+                    </div>
+                    <div class="bg-white p-8 rounded-xl shadow-sm border border-gray-200">
+                        <div class="w-12 h-12 bg-blue-100 text-blue-600 rounded-lg flex items-center justify-center font-bold text-xl mb-4">4</div>
+                        <h3 class="text-2xl font-bold text-slate-800 mb-3">Human Resources Support</h3>
+                        <p class="text-gray-600">From talent acquisition to employee retention programs, we provide full-scale HR solutions to build and maintain a strong corporate culture.</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
+            <h2 class="text-3xl font-bold text-gray-900 mb-8">Why Choose Us?</h2>
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+                <div class="bg-white p-6 rounded-lg shadow-sm border border-gray-100">
+                    <h3 class="text-xl font-semibold text-slate-900 mb-3">Global Reach</h3>
+                    <p class="text-gray-600 leading-relaxed">With offices in over 20 countries, our international presence allows us to understand diverse markets and deliver tailored solutions that meet local and global demands.</p>
+                </div>
+                <div class="bg-white p-6 rounded-lg shadow-sm border border-gray-100">
+                    <h3 class="text-xl font-semibold text-slate-900 mb-3">Proven Expertise</h3>
+                    <p class="text-gray-600 leading-relaxed">Our team consists of industry veterans and certified professionals dedicated to providing top-tier service. We bring decades of combined experience to every project we undertake.</p>
+                </div>
+                <div class="bg-white p-6 rounded-lg shadow-sm border border-gray-100">
+                    <h3 class="text-xl font-semibold text-slate-900 mb-3">Customer First</h3>
+                    <p class="text-gray-600 leading-relaxed">Your success is our success. We prioritize transparent communication, rapid response times, and a commitment to exceeding expectations in everything we do.</p>
+                </div>
+            </div>
+        </div>
+    </main>
+
+    <footer class="bg-slate-900 text-slate-400 py-12 text-center">
+        <p>&copy; 2026 Apex Solutions. All rights reserved.</p>
+    </footer>
+</body>
+</html>

frontend/style.css

@@ -0,0 +1,474 @@
+/* =========================================================
+   1. RESET E VARIÁVEIS
+   ========================================================= */
+:root {
+    --primary-color: #0f172a;
+    --accent-color: #3b82f6;
+    --bg-color: #f8fafc;
+    --card-bg: #ffffff;
+    --text-main: #334155;
+    --text-muted: #64748b;
+}
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: 'Inter', sans-serif;
+}
+
+body {
+    background-color: var(--bg-color);
+    color: var(--text-main);
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+}
+
+.container {
+    max-width: 900px; 
+    margin: 0 auto;
+    padding: 0 40px; 
+}
+
+/* =========================================================
+   2. NAVEGAÇÃO E RODAPÉ
+   ========================================================= */
+.navbar {
+    background-color: rgba(15, 23, 42, 0.95); /* Cor escura com 5% de transparência */
+    backdrop-filter: blur(8px); /* Cria o efeito de vidro desfocado */
+    color: white;
+    padding: 20px 0; 
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); /* Sombra mais suave e espalhada */
+    position: sticky; /* Fixa a barra no topo */
+    top: 0;
+    z-index: 1000; /* Garante que a barra fica sempre por cima do conteúdo */
+}
+
+.navbar .container {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.logo {
+    font-size: 24px;
+    font-weight: 700;
+    letter-spacing: -0.5px; /* Junta ligeiramente as letras para um look corporativo */
+}
+
+.logo span {
+    color: var(--accent-color);
+}
+
+.navbar ul {
+    list-style: none;
+    display: flex;
+    gap: 10px; /* Reduzido o gap para acomodar o padding dos novos botões */
+}
+
+.navbar a {
+    color: #cbd5e1;
+    text-decoration: none;
+    font-weight: 500;
+    padding: 8px 16px; /* Transforma o link num botão clicável com espaço interno */
+    border-radius: 6px; /* Cantos arredondados */
+    transition: all 0.3s ease; /* Transição suave de cores e fundos */
+}
+
+/* Efeito ao passar o rato (Hover) */
+.navbar a:hover {
+    color: white;
+    background-color: rgba(255, 255, 255, 0.1); /* Fundo branco muito subtil */
+}
+
+/* Estado da página atual (Active) */
+.navbar a.active {
+    color: white;
+    background-color: var(--accent-color);
+    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.4); /* Sombra azul ao redor do botão ativo */
+}
+
+footer {
+    background-color: white;
+    text-align: center;
+    padding: 40px 20px; 
+    color: var(--text-muted);
+    font-size: 14px;
+    border-top: 1px solid #e2e8f0;
+}
+
+/* =========================================================
+   3. ESTRUTURA GERAL (MAIN & INTRO)
+   ========================================================= */
+main {
+    flex-grow: 1;
+    padding: 80px 20px; 
+}
+
+.intro {
+    margin-bottom: 40px; 
+    border-bottom: 1px solid #e2e8f0;
+    padding-bottom: 20px;
+}
+
+.intro h2 {
+    font-size: 28px;
+    color: var(--primary-color);
+    margin-bottom: 5px;
+}
+
+.intro p {
+    color: var(--text-muted);
+}
+
+/* --- Lógica de View (Single Page App) --- */
+.view-section.hidden {
+    display: none;
+}
+.view-section.active {
+    display: block;
+    animation: fadeIn 0.4s ease-in-out;
+}
+
+@keyframes fadeIn {
+    from { opacity: 0; transform: translateY(10px); }
+    to { opacity: 1; transform: translateY(0); }
+}
+
+/* =========================================================
+   4. COMPONENTES (Cartões, Tabelas, Formulários)
+   ========================================================= */
+
+/* --- Diretório: Grelha de Cartões --- */
+.grid-colaboradores {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+    gap: 20px;
+}
+
+.cartao {
+    background: var(--card-bg);
+    border-radius: 8px;
+    padding: 20px;
+    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+    display: flex;
+    align-items: center;
+    gap: 15px;
+    transition: transform 0.2s, box-shadow 0.2s;
+    border: 1px solid #e2e8f0;
+}
+
+.cartao:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+}
+
+.avatar {
+    width: 50px;
+    height: 50px;
+    background-color: var(--accent-color);
+    color: white;
+    border-radius: 50%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 20px;
+    font-weight: bold;
+}
+
+.info h3 {
+    font-size: 16px;
+    color: var(--primary-color);
+}
+
+.cargo {
+    font-size: 14px;
+    font-weight: 600;
+    color: var(--accent-color);
+    margin: 2px 0;
+}
+
+.departamento {
+    font-size: 13px;
+    color: var(--text-muted);
+}
+
+.email {
+    font-size: 13px;
+    color: var(--text-muted);
+    text-decoration: none;
+    display: inline-block;
+    margin-top: 5px;
+}
+
+.email:hover {
+    color: var(--accent-color);
+    text-decoration: underline;
+}
+
+/* --- Departamentos: Tabela --- */
+.table-container {
+    background: var(--card-bg);
+    border-radius: 8px;
+    border: 1px solid #e2e8f0;
+    overflow: hidden;
+    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
+}
+
+.data-table {
+    width: 100%;
+    border-collapse: collapse;
+    text-align: left;
+}
+
+.data-table th {
+    background-color: #f1f5f9;
+    color: var(--primary-color);
+    padding: 15px;
+    font-size: 14px;
+    border-bottom: 2px solid #e2e8f0;
+}
+
+.data-table td {
+    padding: 15px;
+    border-bottom: 1px solid #e2e8f0;
+    color: var(--text-main);
+    font-size: 14px;
+}
+
+.data-table tr:last-child td {
+    border-bottom: none;
+}
+
+.data-table tr:hover td {
+    background-color: #f8fafc;
+}
+
+.badge {
+    background-color: #dcfce7;
+    color: #166534;
+    padding: 4px 8px;
+    border-radius: 12px;
+    font-size: 12px;
+    font-weight: 600;
+}
+
+.text-center {
+    text-align: center;
+}
+
+/* --- Definições: Cartões e Botões --- */
+.settings-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+    gap: 20px;
+}
+
+.settings-card {
+    background: var(--card-bg);
+    border-radius: 8px;
+    padding: 25px;
+    border: 1px solid #e2e8f0;
+    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
+}
+
+.settings-card h3 {
+    color: var(--primary-color);
+    margin-bottom: 10px;
+}
+
+.settings-card p {
+    color: var(--text-muted);
+    font-size: 14px;
+    margin-bottom: 20px;
+    min-height: 40px;
+}
+
+.btn-outline {
+    background: transparent;
+    color: var(--accent-color);
+    border: 1px solid var(--accent-color);
+    padding: 8px 16px;
+    border-radius: 6px;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.2s;
+    width: 100%;
+    margin-top: 0;
+}
+
+.btn-outline:hover {
+    background: var(--accent-color);
+    color: white;
+}
+
+/* --- Formulário de Contacto --- */
+.divisor {
+    border: 0;
+    height: 1px;
+    background: #e2e8f0;
+    margin: 40px 0;
+}
+
+.contacto-suporte {
+    background: var(--card-bg);
+    padding: 30px;
+    border-radius: 8px;
+    border: 1px solid #e2e8f0;
+    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
+}
+
+.contacto-suporte h2 {
+    color: var(--primary-color);
+    margin-bottom: 5px;
+}
+
+.contacto-suporte p {
+    color: var(--text-muted);
+    margin-bottom: 20px;
+    font-size: 14px;
+}
+
+.formulario {
+    display: flex;
+    flex-direction: column;
+    gap: 15px;
+    max-width: 600px;
+}
+
+.grupo-input {
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+}
+
+.grupo-input label {
+    font-weight: 600;
+    font-size: 14px;
+    color: var(--text-main);
+}
+
+.grupo-input input,
+.grupo-input textarea {
+    padding: 10px 12px;
+    border: 1px solid #cbd5e1;
+    border-radius: 6px;
+    font-size: 14px;
+    outline: none;
+    transition: border-color 0.2s;
+    font-family: inherit;
+}
+
+.grupo-input input:focus,
+.grupo-input textarea:focus {
+    border-color: var(--accent-color);
+    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+}
+
+button[type="submit"] {
+    background-color: var(--accent-color);
+    color: white;
+    border: none;
+    padding: 12px 20px;
+    border-radius: 6px;
+    font-weight: 600;
+    cursor: pointer;
+    transition: background-color 0.2s;
+    margin-top: 10px;
+}
+
+button[type="submit"]:hover {
+    background-color: #2563eb;
+}
+
+button[type="submit"]:disabled {
+    background-color: #94a3b8;
+    cursor: not-allowed;
+}
+
+/* Status da Mensagem / Notificações */
+.status-oculto {
+    display: none;
+}
+
+.status-visivel {
+    display: block;
+    padding: 10px;
+    border-radius: 6px;
+    margin-top: 15px;
+    font-size: 14px;
+    font-weight: 600;
+    text-align: center;
+}
+
+.status-sucesso {
+    background-color: #dcfce7;
+    color: #166534;
+    border: 1px solid #bbf7d0;
+}
+
+.status-erro {
+    background-color: #fee2e2;
+    color: #991b1b;
+    border: 1px solid #fecaca;
+}
+
+/* =========================================================
+   5. RESPONSIVIDADE (Mobile & Tablets)
+   ========================================================= */
+@media (max-width: 768px) {
+    main {
+        padding: 40px 15px; 
+    }
+    
+    .container {
+        padding: 0 15px; 
+    }
+
+   .navbar {
+        padding: 15px 0; 
+    }
+
+    .navbar .container {
+        flex-direction: column;
+        gap: 15px;
+    }
+
+    .navbar ul {
+        flex-wrap: wrap;
+        justify-content: center;
+        gap: 5px;
+    }
+
+    .navbar a {
+        padding: 6px 12px;
+        font-size: 14px;
+    }
+
+    .intro h2 {
+        font-size: 24px;
+    }
+    
+    .intro p {
+        font-size: 14px;
+    }
+
+    .grid-colaboradores {
+        grid-template-columns: 1fr;
+    }
+
+    .settings-grid {
+        grid-template-columns: 1fr;
+    }
+
+    .table-container {
+        overflow-x: auto; 
+        -webkit-overflow-scrolling: touch; 
+    }
+
+    .data-table th, .data-table td {
+        white-space: nowrap; 
+        padding: 10px;
+    }
+}

index.html

@@ -1,61 +0,0 @@
-<!DOCTYPE html>
-<html lang="pt">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-	<title>Nexus Solutions | Segurança e Inovação 2026</title>
-    <script src="https://cdn.tailwindcss.com"></script>
-</head>
-<body class="bg-gray-50 text-gray-900 font-sans">
-    <nav class="sticky top-0 bg-white/90 backdrop-blur-sm z-50 border-b border-gray-100 py-4 px-6 flex justify-between items-center">
-        <div class="text-2xl font-black text-blue-700 tracking-tighter">NEXUS<span class="text-gray-400">.</span></div>
-        <div class="hidden md:flex space-x-8 font-medium text-gray-600">
-            <a href="#" class="hover:text-blue-600 transition">Serviços</a>
-            <a href="#" class="hover:text-blue-600 transition">Sobre</a>
-            <a href="#" class="bg-blue-600 text-white px-5 py-2 rounded-full hover:bg-blue-700 transition">Contactar</a>
-        </div>
-    </nav>
-
-    <header class="py-24 px-6 text-center bg-white border-b border-gray-100">
-        <h1 class="text-5xl md:text-7xl font-extrabold mb-6 leading-tight">
-            Elevamos o seu negócio<br> com <span class="text-blue-600">tecnologia de ponta.</span>
-        </h1>
-        <p class="text-xl text-gray-600 mb-10 max-w-2xl mx-auto">
-            Soluções digitais à medida para empresas que querem liderar a transformação digital no mercado atual.
-        </p>
-        <button class="bg-gray-900 text-white px-10 py-4 rounded-xl font-bold hover:bg-gray-800 transition">Começar Projeto</button>
-    </header>
-
-    <section class="max-w-6xl mx-auto py-20 px-6">
-        <h2 class="text-3xl font-bold text-center mb-16">O que fazemos</h2>
-        <div class="grid md:grid-cols-3 gap-10">
-            <div class="bg-white p-8 rounded-2xl shadow-sm hover:shadow-xl transition-shadow border border-gray-100">
-                <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mb-6 text-blue-600 font-bold">01</div>
-                <h3 class="text-xl font-bold mb-3">Desenvolvimento Web</h3>
-                <p class="text-gray-600">Criamos plataformas robustas, escaláveis e com design moderno focado na experiência do utilizador.</p>
-            </div>
-            <div class="bg-white p-8 rounded-2xl shadow-sm hover:shadow-xl transition-shadow border border-gray-100">
-                <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center mb-6 text-green-600 font-bold">02</div>
-                <h3 class="text-xl font-bold mb-3">Automação de Processos</h3>
-                <p class="text-gray-600">Eliminamos tarefas repetitivas e aumentamos a produtividade da sua equipa com soluções inteligentes.</p>
-            </div>
-            <div class="bg-white p-8 rounded-2xl shadow-sm hover:shadow-xl transition-shadow border border-gray-100">
-                <div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mb-6 text-purple-600 font-bold">03</div>
-                <h3 class="text-xl font-bold mb-3">Consultoria IT</h3>
-                <p class="text-gray-600">Estratégias tecnológicas desenhadas para garantir que o seu negócio está sempre um passo à frente.</p>
-            </div>
-        </div>
-    </section>
-
-    <footer class="bg-gray-900 text-white py-12 px-6 text-center">
-        <div class="text-2xl font-black mb-6">NEXUS.</div>
-        <p class="text-gray-400 mb-4">&copy; 2026 Nexus Solutions. Todos os direitos reservados.</p>
-        <div class="space-x-6 text-sm text-gray-500">
-            <a href="#">Privacidade</a>
-            <a href="#">Termos</a>
-            <a href="#">LinkedIn</a>
-        </div>
-    </footer>
-
-</body>
-</html>