Modificar .gitea/workflows/deploy.yaml

atualizar deploy file 2x

.dockerignore

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

.gitea/workflows/deploy.yaml

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

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

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

README.md

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

backend/Dockerfile

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

@@ -1,14 +0,0 @@
-{
-  "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

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

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

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

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

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

@@ -1,474 +0,0 @@
-/* =========================================================
-   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

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