Initial commit: Substituição pelo portal Apex Solutions

.dockerignore

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

.gitignore

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

backend/Dockerfile

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

backend/package.json

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

backend/server.js

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

frontend/about.html

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

frontend/careers.html

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

frontend/contact.html

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

frontend/index.html

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

frontend/style.css

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