feat(test-octal): landing page Octal Technology — deployment Docker Swarm funcional
- Dominio: https://test.octal.tec.br (HTTP 200 + HTTPS ativo) - Stack: proxy (Nginx + Caddy Docker Proxy auto-discovery) - Rede: public (overlay) - Modelo: extraido do stack git (gitea) — labels Caddy + restart on-failure
This commit is contained in:
Pulse Agent
@@ -0,0 +1,19 @@
|
||||
# test-octal — Landing Page Octal Technology
|
||||
|
||||
Domínio: https://test.octal.tec.br
|
||||
|
||||
## Stack
|
||||
- Nginx Alpine com imagem custom (test-octal:latest)
|
||||
- Proxy reverso: Caddy Docker Proxy
|
||||
- Rede: public (overlay Swarm)
|
||||
|
||||
## Deploy
|
||||
```bash
|
||||
docker stack deploy -c /opt/proxy-stack-v4.yml proxy
|
||||
```
|
||||
|
||||
## Aprendizado
|
||||
- **Caddy Docker Proxy** usa auto-discovery por labels — adicionar label `caddy=<domain>` faz o proxy configurar sozinho
|
||||
- **Certificado Let's Encrypt** obtido automaticamente pelo Caddy
|
||||
- **Bind mounts** nao funcionam no Docker Swarm para paths arbitrarios — usar imagem custom ou configs
|
||||
- **Modelo seguido**: stack git (gitea) — referencia funcional confirmada
|
||||
@@ -0,0 +1,288 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="pt-BR">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Octal Technology — Inovação Digital</title>
|
||||
<meta name="description" content="Soluções tecnológicas de ponta — softwares, automação e inteligência artificial para o futuro.">
|
||||
<style>
|
||||
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
:root {
|
||||
--bg: #0a0a0f;
|
||||
--bg2: #111118;
|
||||
--surface: #1a1a24;
|
||||
--text: #e4e4eb;
|
||||
--muted: #8888a0;
|
||||
--primary: #6c5ce7;
|
||||
--primary-glow: rgba(108, 92, 231, 0.25);
|
||||
--accent: #00cec9;
|
||||
--border: rgba(255,255,255,0.07);
|
||||
--radius: 12px;
|
||||
}
|
||||
html { scroll-behavior: smooth; }
|
||||
body {
|
||||
font-family: 'Segoe UI', system-ui, sans-serif;
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
line-height: 1.6;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
a { text-decoration: none; color: inherit; }
|
||||
|
||||
/* ─── HERO ─── */
|
||||
.hero {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
padding: 2rem;
|
||||
position: relative;
|
||||
background: radial-gradient(ellipse at 50% 0%, rgba(108,92,231,0.18) 0%, transparent 70%);
|
||||
}
|
||||
.hero::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E") repeat;
|
||||
pointer-events: none;
|
||||
}
|
||||
.hero > * { position: relative; z-index: 1; }
|
||||
|
||||
.badge {
|
||||
display: inline-flex; align-items: center; gap: 0.5rem;
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 99px;
|
||||
padding: 0.35rem 1rem;
|
||||
font-size: 0.82rem; color: var(--muted);
|
||||
margin-bottom: 2rem;
|
||||
backdrop-filter: blur(8px);
|
||||
}
|
||||
.badge .dot {
|
||||
width: 8px; height: 8px; border-radius: 50%;
|
||||
background: #00cec9;
|
||||
animation: blink 2s infinite;
|
||||
}
|
||||
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0.3} }
|
||||
|
||||
.hero h1 {
|
||||
font-size: clamp(2.4rem, 7vw, 4.5rem);
|
||||
font-weight: 800;
|
||||
line-height: 1.1;
|
||||
background: linear-gradient(135deg, #fff 30%, #6c5ce7 80%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
margin-bottom: 1.2rem;
|
||||
}
|
||||
.hero p {
|
||||
font-size: clamp(1rem, 2.5vw, 1.3rem);
|
||||
color: var(--muted);
|
||||
max-width: 580px;
|
||||
margin-bottom: 2.5rem;
|
||||
}
|
||||
.cta-row { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; }
|
||||
.btn {
|
||||
display: inline-flex; align-items: center; gap: 0.5rem;
|
||||
padding: 0.75rem 1.8rem; border-radius: 8px;
|
||||
font-size: 1rem; font-weight: 600;
|
||||
transition: transform 0.15s ease, box-shadow 0.15s ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
.btn-primary {
|
||||
background: var(--primary);
|
||||
color: #fff;
|
||||
box-shadow: 0 0 24px var(--primary-glow);
|
||||
}
|
||||
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 0 40px var(--primary-glow); }
|
||||
.btn-ghost {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
color: var(--text);
|
||||
}
|
||||
.btn-ghost:hover { border-color: var(--primary); color: #fff; }
|
||||
|
||||
/* ─── STATS ─── */
|
||||
.stats {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
|
||||
gap: 1rem;
|
||||
padding: 2rem;
|
||||
}
|
||||
.stat {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
padding: 1.5rem;
|
||||
text-align: center;
|
||||
backdrop-filter: blur(8px);
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
.stat:hover { transform: translateY(-3px); }
|
||||
.stat strong { font-size: 2rem; display: block; color: var(--primary); line-height: 1; }
|
||||
.stat span { font-size: 0.85rem; color: var(--muted); }
|
||||
|
||||
/* ─── SERVICES ─── */
|
||||
.services { padding: 5rem 2rem; max-width: 1100px; margin: 0 auto; }
|
||||
.section-title { font-size: 2rem; font-weight: 700; margin-bottom: 0.5rem; }
|
||||
.section-sub { color: var(--muted); margin-bottom: 2.5rem; }
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
|
||||
gap: 1.2rem;
|
||||
}
|
||||
.card {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
padding: 2rem;
|
||||
transition: transform 0.2s, border-color 0.2s;
|
||||
cursor: default;
|
||||
}
|
||||
.card:hover { border-color: var(--primary); transform: translateY(-3px); }
|
||||
.card-icon { font-size: 2.2rem; margin-bottom: 1rem; }
|
||||
.card h3 { font-size: 1.15rem; margin-bottom: 0.5rem; }
|
||||
.card p { color: var(--muted); font-size: 0.9rem; }
|
||||
|
||||
/* ─── TECH STACK ─── */
|
||||
.tech { padding: 5rem 2rem; background: var(--bg2); }
|
||||
.tech-inner { max-width: 1100px; margin: 0 auto; }
|
||||
.tags { display: flex; flex-wrap: wrap; gap: 0.65rem; justify-content: center; margin-top: 2rem; }
|
||||
.tag {
|
||||
padding: 0.45rem 1rem;
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 99px;
|
||||
font-size: 0.88rem;
|
||||
color: var(--accent);
|
||||
font-family: monospace;
|
||||
letter-spacing: 0.03em;
|
||||
}
|
||||
|
||||
/* ─── CTA ─── */
|
||||
.cta-section {
|
||||
padding: 6rem 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
.cta-section h2 { font-size: 2rem; margin-bottom: 1rem; }
|
||||
.cta-section p { color: var(--muted); max-width: 500px; margin: 0 auto 2.5rem; }
|
||||
|
||||
/* ─── FOOTER ─── */
|
||||
footer {
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
color: var(--muted);
|
||||
font-size: 0.82rem;
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
footer a { color: var(--primary); }
|
||||
|
||||
/* ─── RESPONSIVE ─── */
|
||||
@media (max-width: 640px) {
|
||||
.hero h1 { font-size: 2rem; }
|
||||
.stats { grid-template-columns: repeat(2, 1fr); }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- HERO -->
|
||||
<section class="hero">
|
||||
<div class="badge"><span class="dot"></span> Disponível para projetos</div>
|
||||
<h1>Octal Technology</h1>
|
||||
<p>Transformamos ideias em soluções digitais. Software de ponta, automação inteligente e inovação contínua.</p>
|
||||
<div class="cta-row">
|
||||
<a class="btn btn-primary" href="#servicos">↓ Começar</a>
|
||||
<a class="btn btn-ghost" href="#stack">Tech Stack →</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- STATS -->
|
||||
<div class="stats">
|
||||
<div class="stat"><strong>99%</strong><span>Disponibilidade</span></div>
|
||||
<div class="stat"><strong>24/7</strong><span>Monitoramento</span></div>
|
||||
<div class="stat"><strong>10+</strong><span>Stacks ativas</span></div>
|
||||
<div class="stat"><strong>Open</strong><span>Source-first</span></div>
|
||||
</div>
|
||||
|
||||
<!-- SERVICOS -->
|
||||
<section class="services" id="servicos">
|
||||
<h2 class="section-title">O que fazemos</h2>
|
||||
<p class="section-sub">Do conceito ao deploy — cobertura completa de tecnologia.</p>
|
||||
<div class="grid">
|
||||
<div class="card">
|
||||
<div class="card-icon">⚡</div>
|
||||
<h3>Desenvolvimento Web</h3>
|
||||
<p>Aplicações Next.js, React, Vue — performáticas, acessíveis e escaláveis.</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-icon">🧠</div>
|
||||
<h3>IA & Automação</h3>
|
||||
<p>Integração de LLMs, agentes autônomos e pipelines inteligentes de dados.</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-icon">🗄️</div>
|
||||
<h3>Backend & APIs</h3>
|
||||
<p>Node.js, FastAPI, PostgreSQL — arquitetura limpa, tipada e produtiva.</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-icon">☸️</div>
|
||||
<h3>DevOps & Cloud</h3>
|
||||
<p>Docker Swarm, CI/CD, Kubernetes — infraestrutura como código.</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-icon">🛡️</div>
|
||||
<h3>Segurança</h3>
|
||||
<p>Auditoria de código, varredura de dependências, hardening de infra.</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-icon">🔬</div>
|
||||
<h3>Pesquisa & Prototipação</h3>
|
||||
<p>Spikes tecnológicos, provas de conceito e roadmaps de inovação.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- TECH STACK -->
|
||||
<section class="tech" id="stack">
|
||||
<div class="tech-inner">
|
||||
<h2 class="section-title">Tech Stack</h2>
|
||||
<p class="section-sub">As ferramentas que usamos dia a dia.</p>
|
||||
<div class="tags">
|
||||
<span class="tag">TypeScript</span>
|
||||
<span class="tag">Next.js</span>
|
||||
<span class="tag">React</span>
|
||||
<span class="tag">Vue 3</span>
|
||||
<span class="tag">Node.js</span>
|
||||
<span class="tag">Python</span>
|
||||
<span class="tag">FastAPI</span>
|
||||
<span class="tag">PostgreSQL</span>
|
||||
<span class="tag">Docker</span>
|
||||
<span class="tag">Swarm</span>
|
||||
<span class="tag">Kubernetes</span>
|
||||
<span class="tag">Redis</span>
|
||||
<span class="tag">Vitest</span>
|
||||
<span class="tag">Playwright</span>
|
||||
<span class="tag">OpenAI</span>
|
||||
<span class="tag">Gitea</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CTA -->
|
||||
<section class="cta-section">
|
||||
<h2>Vamos conversar?</h2>
|
||||
<p>Conte-nos sobre seu projeto. Nós resolvemos o resto.</p>
|
||||
<a class="btn btn-primary" href="mailto:contato@test.octal.tec.br">✉ Entrar em contato</a>
|
||||
</section>
|
||||
|
||||
<!-- FOOTER -->
|
||||
<footer>
|
||||
<p>Octa️ © 2026 — test.octal.tec.br · Built with ♥ by Pulse Agent</p>
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user