347 lines
21 KiB
PHP
347 lines
21 KiB
PHP
<?php
|
||
declare(strict_types=1);
|
||
@date_default_timezone_set('Europe/Lisbon');
|
||
$projectName = $_SERVER['PROJECT_NAME'] ?? 'pg Web e APP Designer';
|
||
$projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? 'Design e desenvolvimento de websites, aplicações web e mobile em Portugal.';
|
||
$projectImageUrl = $_SERVER['PROJECT_IMAGE_URL'] ?? '';
|
||
$now = date('Y-m-d H:i:s');
|
||
?>
|
||
<!doctype html>
|
||
<html lang="pt-PT">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title><?= htmlspecialchars($projectName, ENT_QUOTES, 'UTF-8') ?> | Websites e aplicações digitais</title>
|
||
<?php if ($projectDescription): ?>
|
||
<meta name="description" content="<?= htmlspecialchars($projectDescription, ENT_QUOTES, 'UTF-8') ?>">
|
||
<meta property="og:description" content="<?= htmlspecialchars($projectDescription, ENT_QUOTES, 'UTF-8') ?>">
|
||
<meta property="twitter:description" content="<?= htmlspecialchars($projectDescription, ENT_QUOTES, 'UTF-8') ?>">
|
||
<?php endif; ?>
|
||
<meta property="og:title" content="<?= htmlspecialchars($projectName, ENT_QUOTES, 'UTF-8') ?>">
|
||
<meta property="og:type" content="website">
|
||
<meta name="twitter:card" content="summary_large_image">
|
||
<meta name="twitter:title" content="<?= htmlspecialchars($projectName, ENT_QUOTES, 'UTF-8') ?>">
|
||
<?php if ($projectImageUrl): ?>
|
||
<meta property="og:image" content="<?= htmlspecialchars($projectImageUrl, ENT_QUOTES, 'UTF-8') ?>">
|
||
<meta property="twitter:image" content="<?= htmlspecialchars($projectImageUrl, ENT_QUOTES, 'UTF-8') ?>">
|
||
<?php endif; ?>
|
||
<link rel="icon" type="image/svg+xml" href="assets/images/favicon.svg">
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||
<link rel="stylesheet" href="assets/css/fonts.css?v=2026062603">
|
||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
||
<link rel="stylesheet" href="assets/css/custom.css?v=2026062603">
|
||
</head>
|
||
<body data-bs-theme="dark">
|
||
<a class="skip-link" href="#conteudo">Saltar para o conteúdo</a>
|
||
|
||
<div class="site-shell">
|
||
<video id="heroVideo" class="hero-video" muted playsinline preload="metadata" aria-hidden="true">
|
||
<source src="https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260328_083109_283f3553-e28f-428b-a723-d639c617eb2b.mp4" type="video/mp4">
|
||
</video>
|
||
<div class="video-scrim" aria-hidden="true"></div>
|
||
|
||
<header class="site-header sticky-top">
|
||
<nav class="navbar navbar-expand-lg py-3" aria-label="Navegação principal">
|
||
<div class="container-xl px-3 px-lg-4">
|
||
<a class="navbar-brand brand-mark" href="#home" aria-label="pg Web e APP Designer início">pg Web e APP Designer<sup>®</sup></a>
|
||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mainNav" aria-controls="mainNav" aria-expanded="false" aria-label="Abrir navegação">
|
||
<span class="navbar-toggler-icon"></span>
|
||
</button>
|
||
<div class="collapse navbar-collapse" id="mainNav">
|
||
<ul class="navbar-nav mx-auto mb-2 mb-lg-0 gap-lg-2">
|
||
<li class="nav-item"><a class="nav-link active" href="#home">Início</a></li>
|
||
<li class="nav-item"><a class="nav-link" href="#servicos">Serviços</a></li>
|
||
<li class="nav-item"><a class="nav-link" href="#portfolio">Portfólio</a></li>
|
||
<li class="nav-item"><a class="nav-link" href="#ferramentas">Ferramentas</a></li>
|
||
<li class="nav-item"><a class="nav-link" href="#processo">Processo</a></li>
|
||
<li class="nav-item"><a class="nav-link" href="#testemunhos">Testemunhos</a></li>
|
||
<li class="nav-item"><a class="nav-link" href="#contacto">Contacto</a></li>
|
||
</ul>
|
||
<div class="d-flex align-items-center gap-2">
|
||
<button id="themeToggle" class="btn btn-ghost btn-sm" type="button" aria-label="Alternar dark mode">Modo claro</button>
|
||
<a class="btn btn-primary-dark" href="#contacto">Começar projecto</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
</header>
|
||
|
||
<main id="conteudo">
|
||
<section id="home" class="hero-section min-vh-100 d-flex align-items-center">
|
||
<div class="container-xl px-3 px-lg-4 position-relative z-2">
|
||
<div class="row justify-content-center text-center">
|
||
<div class="col-12 col-xl-11">
|
||
<p class="eyebrow animate-rise">Websites · Web Apps · Mobile UI</p>
|
||
<h1 class="hero-title animate-rise">Da ideia ao produto digital: websites e apps com presença, clareza e performance.</h1>
|
||
<p class="hero-copy animate-rise delay-1 mx-auto">Crio experiências digitais para marcas, freelancers e negócios que querem transformar uma primeira impressão num pedido de contacto real.</p>
|
||
<div class="hero-actions animate-rise delay-2 d-flex flex-column flex-sm-row justify-content-center gap-3">
|
||
<a class="btn btn-primary-dark btn-lg" href="#contacto">Começar projecto</a>
|
||
<a class="btn btn-outline-soft btn-lg" href="#servicos">Ver serviços</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="stats-panel animate-rise delay-2" aria-label="Métricas do estúdio">
|
||
<div><strong>8+</strong><span>projectos entregues</span></div>
|
||
<div><strong>3+</strong><span>anos de experiência</span></div>
|
||
<div><strong>5+</strong><span>clientes satisfeitos</span></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="servicos" class="section-pad">
|
||
<div class="container-xl px-3 px-lg-4">
|
||
<div class="section-heading">
|
||
<p class="eyebrow">O que eu faço</p>
|
||
<h2>Uma entrega completa, pensada para lançar e evoluir o teu produto digital.</h2>
|
||
<p>Da estratégia à manutenção, cada fase é tratada com detalhe para que o resultado seja bonito, rápido e fácil de usar.</p>
|
||
</div>
|
||
<div class="row g-3 g-lg-4">
|
||
<?php
|
||
$services = [
|
||
['01', 'Estratégia Digital', 'Alinhamento de objectivos, público, mensagens principais e prioridades para criar um plano simples de execução.'],
|
||
['02', 'Branding de Marca', 'Desde a ideia inicial até ao tom visual: nome, posicionamento, referências, identidade e coerência para o digital.'],
|
||
['03', 'UX/UI Design', 'Desenho de fluxos, wireframes e interfaces responsivas com foco em conversão, leitura e experiência.'],
|
||
['04', 'Websites One‑Page', 'Páginas rápidas e elegantes para apresentar serviços, captar leads e comunicar confiança desde o primeiro scroll.'],
|
||
['05', 'Aplicações Web', 'Dashboards, áreas reservadas, formulários e ferramentas à medida com lógica de negócio clara e segura.'],
|
||
['06', 'Mobile UI', 'Interfaces para apps mobile com navegação intuitiva, componentes consistentes e adaptação a vários ecrãs.'],
|
||
['07', 'SEO Técnico', 'Estrutura semântica, performance, metadados e boas práticas para melhorar a descoberta orgânica.'],
|
||
['08', 'Suporte e Manutenção', 'Acompanhamento após entrega: correcções, melhorias, backups, actualizações e evolução contínua.'],
|
||
];
|
||
foreach ($services as $service): ?>
|
||
<div class="col-12 col-md-6 col-xl-3">
|
||
<article class="service-card h-100">
|
||
<span><?= htmlspecialchars($service[0], ENT_QUOTES, 'UTF-8') ?></span>
|
||
<h3><?= htmlspecialchars($service[1], ENT_QUOTES, 'UTF-8') ?></h3>
|
||
<p><?= htmlspecialchars($service[2], ENT_QUOTES, 'UTF-8') ?></p>
|
||
</article>
|
||
</div>
|
||
<?php endforeach; ?>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="portfolio" class="section-pad portfolio-section">
|
||
<div class="container-xl px-3 px-lg-4">
|
||
<div class="section-heading">
|
||
<p class="eyebrow">Portfólio</p>
|
||
<h2>Projectos digitais com foco em clareza, confiança e resultados.</h2>
|
||
<p>Uma selecção curta com exactamente os projectos principais: website, web apps, comunidade e IA. Sem projectos extra.</p>
|
||
</div>
|
||
|
||
<article class="project-featured" aria-labelledby="portfolio-veigas-title">
|
||
<div class="project-visual real-estate-visual" aria-hidden="true">
|
||
<span class="visual-orb"></span>
|
||
<div class="mock-browser">
|
||
<div class="mock-top"><span></span><span></span><span></span></div>
|
||
<div class="mock-hero"></div>
|
||
<div class="mock-lines"><i></i><i></i><i></i></div>
|
||
</div>
|
||
<strong>+320%</strong>
|
||
</div>
|
||
<div class="project-content">
|
||
<span class="project-type">Web site em destaque</span>
|
||
<h3 id="portfolio-veigas-title">Agência Imobiliária da Veigas</h3>
|
||
<p>Redesenho completo do web site e da experiência digital para tornar a presença online mais rápida, clara e orientada à captação de contactos.</p>
|
||
<div class="project-metric"><strong>+320%</strong><span>aumento de tráfego gerado</span></div>
|
||
<a class="project-link" href="https://imoveisdeportugal.pt/" target="_blank" rel="noopener">Ver projecto</a>
|
||
</div>
|
||
</article>
|
||
|
||
<div class="row g-3 g-lg-4 mt-4" aria-label="Outros projectos do portfólio">
|
||
<div class="col-12 col-md-6 col-xl-3">
|
||
<article class="project-card h-100">
|
||
<div class="project-thumb fitflow-visual" aria-hidden="true"><span>FF</span><i></i></div>
|
||
<span class="project-type">Web App</span>
|
||
<h3>FitFlow</h3>
|
||
<p>Experiência digital para acompanhar rotinas, progresso e fluxos de treino com uma interface limpa.</p>
|
||
<a class="project-link" href="https://fitflow.paulogomes.pt/" target="_blank" rel="noopener">Abrir Web App</a>
|
||
</article>
|
||
</div>
|
||
<div class="col-12 col-md-6 col-xl-3">
|
||
<article class="project-card h-100">
|
||
<div class="project-thumb community-visual" aria-hidden="true"><span>?</span><i></i></div>
|
||
<span class="project-type">Comunidade</span>
|
||
<h3>Perdidos e Achados</h3>
|
||
<p>Plataforma comunitária para aproximar pessoas, objectos perdidos e informação útil num só lugar.</p>
|
||
<a class="project-link" href="https://perdidoseachados.paulogomes.pt/" target="_blank" rel="noopener">Ver comunidade</a>
|
||
</article>
|
||
</div>
|
||
<div class="col-12 col-md-6 col-xl-3">
|
||
<article class="project-card h-100">
|
||
<div class="project-thumb ocr-visual" aria-hidden="true"><span>OCR</span><i></i></div>
|
||
<span class="project-type">Web site de IA</span>
|
||
<h3>Imagem com texto: OCR to Image</h3>
|
||
<p>Interface orientada à conversão de imagens com texto em conteúdo legível, simples e directo.</p>
|
||
<a class="project-link" href="https://ocrtoimage.paulogomes.pt/" target="_blank" rel="noopener">Ver web site de IA</a>
|
||
</article>
|
||
</div>
|
||
<div class="col-12 col-md-6 col-xl-3">
|
||
<article class="project-card h-100">
|
||
<div class="project-thumb moto-visual" aria-hidden="true"><span>↗</span><i></i></div>
|
||
<span class="project-type">Web App</span>
|
||
<h3>Moto trips - As minhas aventuras sobre rodas</h3>
|
||
<p>Web app para organizar viagens, memórias e aventuras em duas rodas com estética editorial.</p>
|
||
<a class="project-link" href="https://mototrips.paulogomes.pt/" target="_blank" rel="noopener">Ver Moto trips</a>
|
||
</article>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="ferramentas" class="section-pad section-quiet">
|
||
<div class="container-xl px-3 px-lg-4">
|
||
<div class="row align-items-end g-4">
|
||
<div class="col-lg-6">
|
||
<p class="eyebrow">Ferramentas de desenvolvimento</p>
|
||
<h2 class="section-title">Stack moderna, leve e preparada para produção.</h2>
|
||
</div>
|
||
<div class="col-lg-6">
|
||
<p class="section-copy">Escolho tecnologia consoante o projecto: protótipos rápidos, websites em alojamento próprio, aplicações React ou integrações com PHP/MySQL.</p>
|
||
</div>
|
||
</div>
|
||
<div class="tool-grid mt-4">
|
||
<span>HTML5</span><span>CSS3</span><span>JavaScript</span><span>TypeScript</span><span>React</span><span>Vite</span><span>Tailwind CSS</span><span>Bootstrap</span><span>PHP</span><span>MySQL</span><span>WordPress</span><span>Git</span>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="processo" class="section-pad">
|
||
<div class="container-xl px-3 px-lg-4">
|
||
<div class="section-heading compact">
|
||
<p class="eyebrow">Processo</p>
|
||
<h2>Um caminho simples para sair da ideia e chegar ao lançamento.</h2>
|
||
</div>
|
||
<div class="timeline">
|
||
<div><strong>01</strong><h3>Descoberta</h3><p>Entendo o negócio, objectivos, referências e restrições.</p></div>
|
||
<div><strong>02</strong><h3>Direcção</h3><p>Defino estrutura, conteúdo, navegação e prioridades visuais.</p></div>
|
||
<div><strong>03</strong><h3>Construção</h3><p>Implemento, testo responsividade e preparo a publicação.</p></div>
|
||
<div><strong>04</strong><h3>Evolução</h3><p>Recolho feedback e planeio melhorias após o lançamento.</p></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="testemunhos" class="section-pad testimonials-section section-quiet">
|
||
<div class="container-xl px-3 px-lg-4">
|
||
<div class="section-heading compact">
|
||
<p class="eyebrow">Testemunhos</p>
|
||
<h2>Experiências digitais criadas com proximidade, detalhe e foco no resultado.</h2>
|
||
</div>
|
||
<div class="testimonial-grid">
|
||
<article class="testimonial-card">
|
||
<blockquote>"O redesenho tornou a navegação mais simples, a marca mais clara e a comunicação muito mais profissional."</blockquote>
|
||
<footer><strong>Cliente de imobiliário</strong><span>Website e experiência digital</span></footer>
|
||
</article>
|
||
<article class="testimonial-card">
|
||
<blockquote>"A página ficou rápida, bonita e fácil de usar. O processo foi directo e sempre bem explicado."</blockquote>
|
||
<footer><strong>Fundador de comunidade</strong><span>Produto digital e lançamento</span></footer>
|
||
</article>
|
||
<article class="testimonial-card">
|
||
<blockquote>"Transformou uma ideia pouco estruturada numa web app com identidade, fluxo claro e pronta a evoluir."</blockquote>
|
||
<footer><strong>Criador independente</strong><span>Web app à medida</span></footer>
|
||
</article>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="contacto" class="section-pad contact-section">
|
||
<div class="container-xl px-3 px-lg-4">
|
||
<div class="row g-4 g-xl-5 align-items-stretch">
|
||
<div class="col-lg-5">
|
||
<div class="contact-card h-100">
|
||
<p class="eyebrow">Contacto</p>
|
||
<h2>Vamos falar sobre o teu próximo projecto?</h2>
|
||
<p class="section-copy">Envia uma mensagem com o essencial. Recebes resposta para marcar uma conversa e percebermos o melhor ponto de partida.</p>
|
||
<ul class="contact-list">
|
||
<li><span>Email</span><a href="mailto:ola@paulogomes.pt">ola@paulogomes.pt</a></li>
|
||
<li><span>Telemóvel</span><a href="tel:+351917890864">+351 917 890 864</a><small><em>Chamada para a rede móvel nacional</em></small></li>
|
||
<li><span>Localização</span><strong>Almada - Portugal</strong></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="col-lg-7">
|
||
<form id="contactForm" class="form-card" novalidate>
|
||
<div class="d-flex justify-content-between align-items-start gap-3 mb-4">
|
||
<div>
|
||
<p class="eyebrow mb-2">Pedido rápido</p>
|
||
<h2 class="h3 mb-0">Contacto</h2>
|
||
</div>
|
||
<span class="secure-pill">Resposta por email</span>
|
||
</div>
|
||
<div id="formAlert" class="alert d-none" role="alert" aria-live="polite"></div>
|
||
<input type="text" name="website" class="visually-hidden" tabindex="-1" autocomplete="off" aria-hidden="true">
|
||
<div class="row g-3">
|
||
<div class="col-md-6">
|
||
<label class="form-label" for="name">Nome</label>
|
||
<input class="form-control" id="name" name="name" type="text" autocomplete="name" maxlength="120" required>
|
||
</div>
|
||
<div class="col-md-6">
|
||
<label class="form-label" for="email">Email</label>
|
||
<input class="form-control" id="email" name="email" type="email" autocomplete="email" maxlength="160" required>
|
||
</div>
|
||
<div class="col-md-6">
|
||
<label class="form-label" for="phone">Telemóvel <span>opcional</span></label>
|
||
<input class="form-control" id="phone" name="phone" type="tel" autocomplete="tel" maxlength="40">
|
||
</div>
|
||
<div class="col-md-6">
|
||
<label class="form-label" for="project_type">Tipo de projecto</label>
|
||
<select class="form-select" id="project_type" name="project_type" required>
|
||
<option value="">Seleccionar</option>
|
||
<option>Website institucional</option>
|
||
<option>Landing page</option>
|
||
<option>Aplicação web</option>
|
||
<option>Aplicação mobile</option>
|
||
<option>Branding de Marca</option>
|
||
<option>Manutenção</option>
|
||
</select>
|
||
</div>
|
||
<div class="col-12">
|
||
<label class="form-label" for="message">Detalhe da mensagem</label>
|
||
<textarea class="form-control" id="message" name="message" rows="5" maxlength="1800" placeholder="Conta-me o que queres construir, prazo e objectivo principal." required></textarea>
|
||
<div class="form-text">Mínimo 20 caracteres. Não incluas palavras-passe ou dados sensíveis.</div>
|
||
</div>
|
||
<div class="col-12 d-flex flex-column flex-sm-row gap-3 align-items-sm-center justify-content-between pt-2">
|
||
<button id="submitBtn" class="btn btn-primary-dark btn-lg" type="submit">Enviar mensagem</button>
|
||
<small class="muted-note">Ao enviar, o pedido é guardado e enviado por email para pg Web e APP Designer.</small>
|
||
</div>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
|
||
<footer class="site-footer">
|
||
<div class="container-xl px-3 px-lg-4 d-flex flex-column flex-md-row justify-content-between gap-2">
|
||
<span>© <?= date('Y') ?> pg Web e APP Designer. Todos os direitos reservados.</span>
|
||
<span>PHP <?= htmlspecialchars(PHP_VERSION, ENT_QUOTES, 'UTF-8') ?> · Lisboa <?= htmlspecialchars($now, ENT_QUOTES, 'UTF-8') ?></span>
|
||
</div>
|
||
</footer>
|
||
</div>
|
||
|
||
<div class="toast-container position-fixed bottom-0 end-0 p-3">
|
||
<div id="siteToast" class="toast align-items-center" role="status" aria-live="polite" aria-atomic="true">
|
||
<div class="d-flex">
|
||
<div id="toastBody" class="toast-body">Mensagem enviada.</div>
|
||
<button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Fechar"></button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="cookieBanner" class="cookie-banner" role="dialog" aria-live="polite" aria-label="Aviso de cookies">
|
||
<div>
|
||
<strong>Privacidade e cookies</strong>
|
||
<p>Este website usa cookies e dados técnicos para compreender como é utilizado, melhorar a experiência, medir desempenho e ajudar a encontrar problemas de navegação. Não vendemos dados pessoais.</p>
|
||
</div>
|
||
<div class="cookie-actions">
|
||
<button id="cookieDecline" class="btn btn-outline-soft btn-sm" type="button">Continuar sem aceitar</button>
|
||
<button id="cookieAccept" class="btn btn-primary-dark btn-sm" type="button">Aceitar</button>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
|
||
<script src="assets/js/main.js?v=2026062603" defer></script>
|
||
</body>
|
||
</html>
|