all good v2

Reviewed-on: #25

.dockerignore

@@ -0,0 +1,6 @@
+.git
+.env
+node_modules
+npm-debug.log
+*.md
+.vscode

.gitea/workflows/deploy.yaml

@@ -1,143 +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
-
-      # ==========================================
-      # STAGE 1: STATIC SECURITY TESTING (SAST, SCA)
-      # ==========================================
-
-      # 1.1. Secret Scanning: Detect hardcoded secrets and credentials
-      - 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. Software Composition Analysis (SCA): Check for infrastructure vulnerabilities
-      - 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. Static Application Security Testing (SAST): Source code quality and security
-      - 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
-
-      # ==========================================
-      # STAGE 2: DYNAMIC TEST ENVIRONMENT
-      # ==========================================
-
-      - name: Provision Ephemeral Sandbox
-        run: |
-          # Remove any residual sandbox containers
-          docker rm -f website-test-sandbox || true
-          
-          # Deploy sandbox. Using Docker internal network prevents external exposure.
-          docker run -d --name website-test-sandbox nginx:alpine
-          
-          # Copy the current codebase to the sandbox container
-          docker cp index.html website-test-sandbox:/usr/share/nginx/html/index.html
-          
-          # Allow Nginx service to initialize
-          sleep 5
-
-      # ==========================================
-      # STAGE 3: DYNAMIC APPLICATION SECURITY TESTING
-      # ==========================================
-
-      - name: OWASP ZAP Baseline Scan
-        run: |
-          # Initialize test report directory
-          mkdir -p qatests
-          
-          # PREVENTIVE CLEANUP: Ensure no leftover containers or volumes exist
-          docker rm -f zap-scanner || true
-          docker volume rm zap-reports || true
-          
-          # Create a managed Docker volume to prevent host/runner path conflicts
-          docker volume create zap-reports
-          
-          # Execute ZAP scan mounting the managed volume. 
-          # The '-I' flag ensures the pipeline doesn't fail on warnings.
-          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 \
-            -r report.html \
-            -I || true
-          
-          # Extract the HTML report from the ZAP container to the runner workspace
-          docker cp zap-scanner:/zap/wrk/report.html qatests/report.html
-          
-          # Teardown ZAP container and volume to free up resources
-          docker rm -f zap-scanner || true
-          docker volume rm zap-reports || true
-
-      # Ensure sandbox is destroyed even if previous DAST steps fail
-      - name: Teardown Ephemeral Sandbox
-        if: always()
-        run: |
-          docker rm -f website-test-sandbox || true
-
-      # ==========================================
-      # STAGE 4: PRODUCTION DEPLOYMENT
-      # ==========================================
-
-      - name: Hardened Production Deployment
-        run: |
-          # Create a backup of the current production state
-          docker exec website-test-backend tar -czf /tmp/index_backup.tar.gz -C /usr/share/nginx/html index.html || true
-          
-          # Clear the production directory and deploy the approved artifact
-          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
-          
-          # Apply strict file system permissions (Hardening)
-          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
-          
-          # Healthcheck: Verify local response from the production container
-          docker exec website-test-backend curl --silent --show-error --fail http://localhost:80 || exit 1
-
-      # ==========================================
-      # STAGE 5: ARTIFACT MANAGEMENT & REPORTING
-      # ==========================================
-      
-      - name: Publish ZAP Report to Production Web Server
-        if: always()
-        run: |
-          # Host the report directly on the Nginx container to bypass Gitea's artifact download bug
-          # Accessible at: http://51.89.40.2:8080/zap-report.html
-          docker cp qatests/report.html website-test-backend:/usr/share/nginx/html/zap-report.html || true
-          docker exec website-test-backend chmod 444 /usr/share/nginx/html/zap-report.html || true
-
-      - name: Archive ZAP Report (Raw HTML)
-        if: always()
-        uses: actions/upload-artifact@v3
-        with:
-          name: owasp-zap-report
-          # Upload the raw HTML file to Gitea Artifacts
-          path: qatests/report.html
-
-      - name: Pipeline Status Notification
-        if: always()
-        run: |
-          echo "Pipeline finished with status: ${{ job.status }}"

.gitea/workflows/deploy.yml

@@ -0,0 +1,128 @@
+name: "DevSecOps Enterprise Pipeline"
+on:
+  push:
+    branches: [ main ]
+  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
+
+      - name: 1. Build Application Image
+        run: docker build -f backend/Dockerfile -t apex-solutions:latest .
+
+      - name: 1.5. Execute Unit Tests
+        run: |
+          npm install
+          npm test
+
+      - name: 2. 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 . --no-git --verbose --redact --exit-code 1
+
+      - name: 3. 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 --exit-code 1 --severity HIGH,CRITICAL apex-solutions:latest
+
+      - name: 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-apex \
+            -Dsonar.sources=. \
+            -Dsonar.exclusions=**/node_modules/** \
+            -Dsonar.host.url=https://sonar.each-cs.com \
+            -Dsonar.token=${{ secrets.SONAR_TOKEN }} \
+            -Dsonar.qualitygate.wait=true \
+            -Dsonar.javascript.lcov.reportPaths=coverage/lcov.info
+
+      - name: 5. Dynamic Security Scan (OWASP ZAP)
+        run: |
+          echo ">>> 1. Limpeza profunda do ambiente..."
+          docker rm -f apex-sandbox zap-scanner || true
+          docker network rm zap-net || true
+          docker volume rm zap-data || true
+          
+          echo ">>> 2. Criar rede e iniciar Sandbox..."
+          docker network create zap-net
+          docker run -d --name apex-sandbox --network zap-net apex-solutions:latest
+          sleep 10
+          
+          echo ">>> 3. Preparar Volume do ZAP e Diretório de Testes..."
+          mkdir -p qatests
+          chmod 777 qatests
+          docker volume create zap-data
+          
+          echo ">>> 4. Executar OWASP ZAP (FULL SCAN + AJAX SPIDER)..."
+          set +e 
+          
+          docker run --user root --name zap-scanner \
+            --network zap-net \
+            -v zap-data:/zap/wrk/:rw \
+            -t ghcr.io/zaproxy/zaproxy:stable zap-full-scan.py \
+            -t http://apex-sandbox:3000 \
+            -r report.html \
+            -J report.json \
+            -j
+            
+          set -e
+            
+          echo ">>> 5. Recolher os relatórios..."
+          docker cp zap-scanner:/zap/wrk/report.html qatests/report.html || true
+          docker cp zap-scanner:/zap/wrk/report.json qatests/report.json || true
+          
+          echo ">>> 6. Limpeza final dos contentores..."
+          docker rm -f zap-scanner apex-sandbox || true
+          docker network rm zap-net || true
+          docker volume rm zap-data || true
+
+          echo ">>> 7. Veredicto Final da Segurança (Gatekeeper Policy)..."
+          if grep -qi 'Cross Site Scripting (Reflected)' qatests/report.html || grep -iE '"riskcode"\s*:\s*"3"|"risk"\s*:\s*"High"' qatests/report.json; then
+            echo "🚨 ALERTA CRÍTICO: O OWASP ZAP detetou uma vulnerabilidade de Injeção de Código (XSS)!"
+            echo "🛑 Pipeline BLOQUEADA para proteger a Branch Principal e a Produção."
+            exit 1
+          else
+            echo "✅ ZAP Scan concluído. Nenhuma falha Crítica ou Alta encontrada."
+            exit 0
+          fi
+
+      - name: 6. Deploy em Produção (SSH)
+        if: github.event_name == 'push'
+        uses: appleboy/ssh-action@master
+        with:
+          host: ${{ secrets.SSH_HOST }}
+          username: ${{ secrets.SSH_USER }}
+          key: ${{ secrets.SSH_PRIVATE_KEY }}
+          script: |
+            set -e 
+            
+            echo ">>> 1. A navegar para a pasta do projeto no servidor..."
+            cd /storage/docker/website-secure
+            
+            echo ">>> 2. A transferir o código aprovado (git pull)..."
+            git pull origin main
+            
+            echo ">>> 3. A compilar a imagem Docker de Produção..."
+            docker build -f backend/Dockerfile -t apex-solutions:prod .
+            
+            echo ">>> 4. A substituir o contentor em execução..."
+            docker rm -f portal-corporativo || true
+            docker run -d -p 3000:3000 --name portal-corporativo --restart unless-stopped apex-solutions:prod
+            
+            echo "✅ Deploy concluído com sucesso! A aplicação está no ar."
+
+      - name: 7. Archive ZAP Report
+        if: always()
+        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

backend/Dockerfile

@@ -0,0 +1,32 @@
+FROM node:22-alpine
+
+# ==========================================
+# DEVSECOPS: HARDENING DA IMAGEM BASE
+# ==========================================
+# Agrupamos os comandos RUN num só para otimizar as camadas da imagem (Regra do SonarQube)
+RUN apk update && apk upgrade --no-cache && \
+    npm install -g npm@latest && \
+    addgroup -S appgroup && adduser -S appuser -G appgroup
+
+# Define o diretório de trabalho
+WORKDIR /usr/src/app
+
+# Ajusta as permissões da pasta para o novo utilizador
+RUN chown -R appuser:appgroup /usr/src/app
+
+# Copia os ficheiros e instala dependências
+COPY package*.json ./
+RUN npm install --omit=dev
+
+# Copia o código fonte
+COPY backend/ ./backend/
+COPY frontend/ ./frontend/
+
+# Altera a propriedade dos ficheiros copiados para o utilizador
+RUN chown -R appuser:appgroup /usr/src/app
+
+# Muda para o utilizador sem privilégios
+USER appuser
+
+EXPOSE 3000
+CMD ["node", "backend/server.js"]

backend/server.js

@@ -0,0 +1,104 @@
+const express = require('express');
+const cors = require('cors');
+const path = require('node:path');
+const nodemailer = require('nodemailer');
+
+const app = express();
+
+app.disable('x-powered-by');
+
+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 páginas estáticas (A rota '/' original foi comentada para não dar conflito com a do ZAP)
+// 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')));
+
+// O eval() FOI REMOVIDO DAQUI PARA O SONARQUBE NÃO BLOQUEAR!
+
+// Configuração do transporte de E-mail (Mocks de teste vs Produção)
+let transporter;
+
+if (process.env.NODE_ENV === 'test') {
+    transporter = { sendMail: jest.fn().mockResolvedValue({ messageId: 'test-id' }) };
+} else {
+    transporter = nodemailer.createTransport({
+        host: 'mail.limpezascleanandcare.com',
+        port: 465,
+        secure: true, 
+        auth: {
+            user: 'teste@limpezascleanandcare.com', 
+            pass: 'HTC?D=}5&cHoTrH=' 
+        },
+        tls: { rejectUnauthorized: false }
+    });
+}
+
+// Endpoint do Formulário de Contacto (Com a armadilha validada pelo Jest)
+app.post('/api/contact', async (req, res) => {
+    const { firstName, lastName, email, company, message } = req.body;
+
+    // Se faltarem dados, devolvemos HTML para simular XSS e bater com o teste unitário
+    if (!email || !message) {
+        res.setHeader('Content-Type', 'text/html');
+        return res.status(400).send(`
+            <h2>Erro de Validação</h2>
+            <p>Os campos Email e Mensagem são obrigatórios.</p>
+            <p>Nome recebido: ${firstName}</p> 
+        `); 
+    }
+
+    try {
+        const mailOptions = {
+            from: '"Apex Solutions" <teste@limpezascleanandcare.com>',
+            to: email, 
+            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.
+                    </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 team will 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>
+            `
+        };
+
+        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.' });
+    } catch (error) {
+        console.error(`[Email Error]:`, error);
+        res.status(500).json({ error: 'Internal server error. Could not send confirmation email.' });
+    }
+});
+
+module.exports = { app, transporter };
+
+if (require.main === module) {
+    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,106 @@
+<!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 website-secure</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>
+    <!--<div style="display: none;">
+        <form action="/api/search" method="GET">
+            <input type="text" name="q" value="teste">
+            <button type="submit">Pesquisar</button>
+        </form>
+    </div>-->
+    <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.); /* 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>

package.json

@@ -0,0 +1,27 @@
+{
+  "name": "website-secure",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "jest --coverage --coverageReporters=lcovonly"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://gitea.each-cs.com/pm/website-secure.git"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "type": "commonjs",
+  "dependencies": {
+    "cors": "^2.8.5",
+    "express": "^4.18.2",
+    "nodemailer": "^8.0.11"
+
+  },
+  "devDependencies": {
+    "jest": "^30.4.2",
+    "supertest": "^7.2.2"
+  }
+}

tests/core.test.js

@@ -0,0 +1,83 @@
+const request = require('supertest');
+process.env.NODE_ENV = 'test';
+const { app, transporter } = require('../backend/server');
+const nodemailer = require('nodemailer');
+
+// ==========================================
+// MOCK EXTERNAL SERVICES 
+// ==========================================
+jest.mock('nodemailer');
+
+describe('Enterprise Application Flow & API Validation', () => {
+
+    beforeAll(() => {
+        // Configure the mock to simulate a successful SMTP response
+        nodemailer.createTransport.mockReturnValue({
+            sendMail: jest.fn().mockResolvedValue({ messageId: 'mock-id-enterprise-1234' })
+        });
+    });
+
+    afterEach(() => {
+        jest.clearAllMocks(); // Clear tracking between tests
+    });
+
+    // ==========================================
+    // 1. STATIC ROUTING TESTS
+    // ==========================================
+    describe('1. Static Web Routing', () => {
+        it('Should return 200 OK and text/html for the Home Page (/)', async () => {
+            const response = await request(app).get('/');
+            expect(response.status).toBe(200);
+            expect(response.headers['content-type']).toMatch(/text\/html/);
+        });
+
+        it('Should return 404 Not Found for an unknown endpoint', async () => {
+            const response = await request(app).get('/invalid-admin-route');
+            expect(response.status).toBe(404);
+        });
+
+    });
+
+    // ==========================================
+    // 2. API BUSINESS LOGIC & VALIDATION TESTS
+    // ==========================================
+    describe('2. Contact API Endpoint (/api/contact)', () => {
+        
+        it('Should reject requests and return 400 Bad Request if email is missing', async () => {
+            const invalidPayload = {
+                firstName: 'John',
+                message: 'I need a security audit.'
+                // Missing 'email' deliberately
+            };
+            
+            const response = await request(app).post('/api/contact').send(invalidPayload);
+            
+            expect(response.status).toBe(400);
+            
+            // ==========================================
+            // CORREÇÃO DEVSECOPS: O servidor agora devolve HTML para a armadilha XSS!
+            // Lemos o response.text (HTML) em vez do response.body (JSON)
+            // ==========================================
+            expect(response.text).toContain('Erro de Validação');
+            expect(response.text).toContain('John'); // Garante que o input foi refletido na página
+        });
+
+        it('Should process request, return 200 OK, and invoke SMTP transporter with valid data', async () => {
+            const validPayload = {
+                firstName: 'Jane',
+                lastName: 'Doe',
+                email: 'jane.doe@example.com',
+                company: 'Apex Corporation',
+                message: 'Please send me the DevSecOps proposal.'
+            };
+            
+            const response = await request(app).post('/api/contact').send(validPayload);
+            
+            // Validate HTTP Response
+            expect(response.status).toBe(200);
+            
+            // Validate Business Logic: Verifica o objeto 'transporter' que veio do server.js
+            expect(transporter.sendMail).toHaveBeenCalledTimes(1);
+        });
+    });
+});

zap-rules.conf

@@ -0,0 +1,2 @@
+# Bloqueia a pipeline se encontrar algo grave
+FAIL_ON_SEVERITY: HIGH