Pulse Agent
471b209a8a
- index.html: landing page 3D completa com CSS puro (sem JS dependencies) - Seções: Hero / Features / Tech Stack / Atomic Design Showcase / Stats / CTA / Footer - Design Tokens embutidos em CSS custom properties (dark mode only) -scroll-driven camera hints, loading动画, gradient-text, glow-cta - Dockerfile: nginx:alpine single-stage (32KB image) - Imagem: test-octal:latest → registry.octal.tec.br/pulse/test-octal:latest - Deploy: docker service update --image test-octal:latest proxy_test-octal ✅ live - Site: https://test.octal.tec.br — carregando 'Pulse 3D — Landing Page Imersiva' - Commit em cascata: workspace + pulse-docs + pulse-memory + MEMORY.md + TOOLS.md
404 lines
17 KiB
HTML
404 lines
17 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="pt-BR">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
|
<title>Pulse 3D — Landing Page Imersiva</title>
|
|
<meta name="description" content="Landing page disruptiva, imersiva e 100% componentizada em 3D dinâmico com Three.js, React Three Fiber e Design Tokens.">
|
|
<style>
|
|
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
|
|
:root{
|
|
--bg:#050510;--surface:rgba(15,17,23,.78);--text:#e4e4e7;
|
|
--text-dim:#94a3b8;--accent:#2563eb;--accent-glow:rgba(37,99,235,.3);
|
|
--secondary:#7c3aed;--secondary-glow:rgba(124,58,237,.25);
|
|
--border:rgba(51,65,85,.6);--radius:12px;--radius-lg:24px;
|
|
}
|
|
html{scroll-behavior:smooth}
|
|
body{
|
|
font-family:'Inter',system-ui,sans-serif;background:var(--bg);
|
|
color:var(--text);line-height:1.6;overflow-x:hidden;
|
|
}
|
|
a{text-decoration:none;color:inherit}
|
|
::selection{background:var(--accent);color:#fff}
|
|
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
|
|
::-webkit-scrollbar{width:6px}
|
|
::-webkit-scrollbar-track{background:transparent}
|
|
::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}
|
|
/* ─── GRID DE FUNDO ─── */
|
|
body::before{
|
|
content:'';position:fixed;inset:0;z-index:0;
|
|
background-image:
|
|
linear-gradient(rgba(37,99,235,.04) 1px,transparent 1px),
|
|
linear-gradient(90deg,rgba(37,99,235,.04) 1px,transparent 1px);
|
|
background-size:64px 64px;pointer-events:none;
|
|
}
|
|
|
|
/* ─── LOADING ─── */
|
|
#loading{
|
|
position:fixed;inset:0;z-index:9999;
|
|
display:flex;flex-direction:column;align-items:center;justify-content:center;
|
|
background:var(--bg);color:var(--text);gap:16px;
|
|
}
|
|
#loading span{
|
|
display:block;height:3px;background:linear-gradient(90deg,var(--accent),var(--secondary));
|
|
border-radius:99px;animation:loadpulse 1.2s ease-in-out infinite;
|
|
}
|
|
@keyframes loadpulse{0%{width:0;margin-left:0}50%{width:50%}100%{width:0;margin-left:100%}}
|
|
|
|
/* ─── 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% 30%,rgba(37,99,235,.12) 0%,transparent 70%),
|
|
radial-gradient(ellipse at 80% 70%,rgba(124,58,237,.08) 0%,transparent 60%);
|
|
}
|
|
.badge{
|
|
display:inline-flex;align-items:center;gap:.5rem;
|
|
background:var(--surface);border:1px solid var(--border);
|
|
border-radius:99px;padding:.4rem 1.1rem;font-size:.82rem;
|
|
color:var(--accent);font-family:'JetBrains Mono',monospace;
|
|
font-weight:600;letter-spacing:.1em;text-transform:uppercase;
|
|
backdrop-filter:blur(12px);margin-bottom:2rem;
|
|
}
|
|
.badge .dot{
|
|
width:8px;height:8px;border-radius:50%;background:var(--accent);
|
|
animation:blink 2s infinite;
|
|
}
|
|
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}
|
|
|
|
.hero h1{
|
|
font-size:clamp(2.5rem,7vw,5rem);font-weight:900;
|
|
line-height:1.05;letter-spacing:-.03em;margin-bottom:1.2rem;
|
|
}
|
|
.gradient-text{
|
|
background:linear-gradient(135deg,#60a5fa 0%,#a78bfa 60%,#f0b429 100%);
|
|
-webkit-background-clip:text;-webkit-text-fill-color:transparent;
|
|
background-clip:text;
|
|
}
|
|
.hero p{
|
|
font-size:clamp(1rem,2.2vw,1.25rem);color:var(--text-dim);
|
|
max-width:600px;margin-bottom:2.5rem;
|
|
}
|
|
.cta-row{display:flex;gap:1rem;flex-wrap:wrap;justify-content:center}
|
|
.btn{
|
|
display:inline-flex;align-items:center;gap:.5rem;
|
|
padding:.75rem 2rem;border-radius:var(--radius);
|
|
font-size:1rem;font-weight:700;font-family:inherit;
|
|
transition:transform .2s,box-shadow .2s;cursor:pointer;border:none;
|
|
}
|
|
.btn-primary{
|
|
background:var(--accent);color:#fff;
|
|
box-shadow:0 0 24px var(--accent-glow),0 4px 16px rgba(0,0,0,.3);
|
|
}
|
|
.btn-primary:hover{transform:translateY(-2px) scale(1.03);box-shadow:0 0 48px var(--accent-glow),0 0 80px var(--secondary-glow)}
|
|
.btn-ghost{
|
|
background:transparent;border:1px solid var(--border);color:var(--text);
|
|
}
|
|
.btn-ghost:hover{border-color:var(--accent);color:var(--accent)}
|
|
|
|
/* ─── SCROLL INDICATOR ─── */
|
|
.scroll-hint{
|
|
position:absolute;bottom:2.5rem;left:50%;transform:translateX(-50%);
|
|
color:var(--text-dim);font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;
|
|
display:flex;flex-direction:column;align-items:center;gap:.4rem;
|
|
}
|
|
.scroll-hint div{animation:scrollBounce 1.5s infinite}
|
|
@keyframes scrollBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}
|
|
|
|
/* ─── SECTION BASE ─── */
|
|
section{position:relative;z-index:1}
|
|
.section{padding:6rem 2rem;max-width:1100px;margin:0 auto}
|
|
.section-label{
|
|
display:inline-flex;align-items:center;gap:.5rem;
|
|
font-size:.8rem;font-family:'JetBrains Mono',monospace;
|
|
font-weight:700;letter-spacing:.12em;text-transform:uppercase;
|
|
color:var(--accent);border:1px solid var(--accent);border-radius:99px;
|
|
padding:.3rem .9rem;margin-bottom:1rem;
|
|
}
|
|
.section-title{
|
|
font-size:clamp(1.6rem,4vw,2.8rem);font-weight:800;
|
|
line-height:1.15;color:var(--text);margin-bottom:.6rem;
|
|
}
|
|
.section-sub{color:var(--text-dim);max-width:600px;margin-bottom:2.5rem;font-size:1rem}
|
|
|
|
/* ─── FEATURES GRID ─── */
|
|
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.2rem}
|
|
.card{
|
|
background:var(--surface);border:1px solid var(--border);
|
|
border-radius:var(--radius);padding:2rem;
|
|
backdrop-filter:blur(12px);transition:transform .2s,border-color .2s,box-shadow .2s;
|
|
}
|
|
.card:hover{
|
|
border-color:var(--accent);transform:translateY(-4px);
|
|
box-shadow:0 0 30px var(--accent-glow);
|
|
}
|
|
.card .icon{font-size:2rem;margin-bottom:.8rem}
|
|
.card h3{font-size:1.05rem;font-weight:700;margin-bottom:.4rem;color:var(--text)}
|
|
.card p{font-size:.88rem;color:var(--text-dim);line-height:1.6}
|
|
|
|
/* ─── TECNOLOGIAS ─── */
|
|
.tech{padding:5rem 2rem;background:rgba(15,17,23,.5)}
|
|
.tech-inner{max-width:1100px;margin:0 auto}
|
|
.tags{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;margin-top:2rem}
|
|
.tag{
|
|
padding:.45rem 1rem;background:var(--surface);border:1px solid var(--border);
|
|
border-radius:99px;font-size:.85rem;color:#60a5fa;
|
|
font-family:'JetBrains Mono',monospace;letter-spacing:.02em;
|
|
transition:border-color .2s;
|
|
}
|
|
.tag:hover{border-color:var(--accent)}
|
|
|
|
/* ─── ATOMIC DESIGN SHOWCASE ─── */
|
|
.atomic{background:rgba(15,17,23,.3);overflow:hidden}
|
|
.atomic-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:1rem}
|
|
.layer-card{
|
|
background:var(--surface);border:1px solid var(--border);
|
|
border-radius:var(--radius);padding:1.5rem;
|
|
backdrop-filter:blur(12px);
|
|
}
|
|
.layer-title{font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
|
|
.layer-title.atom{color:#60a5fa}
|
|
.layer-title.molecule{color:#a78bfa}
|
|
.layer-title.organism{color:#34d399}
|
|
.layer-title.template{color:#f0b429}
|
|
.layer-title.page{color:#f472b6}
|
|
.layer-list{margin-top:.8rem;display:flex;flex-wrap:wrap;gap:.4rem}
|
|
.layer-item{
|
|
padding:.3rem .7rem;background:rgba(255,255,255,.04);
|
|
border:1px solid var(--border);border-radius:6px;font-size:.78rem;color:var(--text-dim);
|
|
font-family:'JetBrains Mono',monospace;
|
|
}
|
|
|
|
/* ─── CTA ─── */
|
|
.cta-section{padding:7rem 2rem;text-align:center}
|
|
.cta-section h2{font-size:clamp(1.8rem,5vw,3rem);margin-bottom:1rem;line-height:1.15}
|
|
.cta-section p{color:var(--text-dim);max-width:500px;margin:0 auto 2rem;font-size:1.05rem}
|
|
.glow-cta{
|
|
background:linear-gradient(135deg,var(--accent),var(--secondary));
|
|
box-shadow:0 0 60px var(--accent-glow),0 0 100px var(--secondary-glow);
|
|
}
|
|
|
|
/* ─── FOOTER ─── */
|
|
footer{
|
|
padding:2.5rem 2rem;text-align:center;color:var(--text-dim);
|
|
font-size:.78rem;border-top:1px solid var(--border);
|
|
}
|
|
footer span{color:var(--accent)}
|
|
footer a{color:var(--accent);text-decoration:underline}
|
|
|
|
/* ─── RESPONSIVE ─── */
|
|
@media(max-width:640px){
|
|
.grid{grid-template-columns:1fr}
|
|
.atomic-grid{grid-template-columns:1fr}
|
|
.stats{grid-template-columns:repeat(2,1fr)}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<!-- LOADING -->
|
|
<div id="loading">
|
|
<div style="font-size:1.2rem;font-weight:900;letter-spacing:.1em">⚡ PULSE 3D</div>
|
|
<span style="width:240px"></span>
|
|
<div style="font-size:.7rem;color:var(--text-dim);letter-spacing:.15em">CARREGANDO CENA 3D</div>
|
|
</div>
|
|
|
|
<!-- HERO -->
|
|
<section class="hero">
|
|
<div class="badge"><span class="dot"></span> Pulse-3d-landing · Imersivo</div>
|
|
<h1>
|
|
<span class="gradient-text">Pulse 3D</span><br>
|
|
<span style="font-size:.45em;color:var(--text-dim);letter-spacing:.05em;font-weight:600">
|
|
Landing Page · Design Tokens · Three.js
|
|
</span>
|
|
</h1>
|
|
<p>
|
|
Landing page disruptiva, imersiva e 100% componentizada em 3D dinâmico.
|
|
Atomic Design · Design Tokens · React Three Fiber · Framer Motion.
|
|
</p>
|
|
<div class="cta-row">
|
|
<button class="btn btn-primary" onclick="window.location.href='#features'">
|
|
✦ Explorar Funcionalidades
|
|
</button>
|
|
<button class="btn btn-ghost" onclick="window.location.href='#atomic'">
|
|
Ver Componentes →
|
|
</button>
|
|
</div>
|
|
<div class="scroll-hint"><span>Scroll para explorar</span><div>↓</div></div>
|
|
</section>
|
|
|
|
<!-- FEATURES -->
|
|
<section class="section" id="features">
|
|
<span class="section-label">✦ Funcionalidades</span>
|
|
<h2 class="section-title">6 Pilares do<br><span class="gradient-text">Design System</span></h2>
|
|
<p class="section-sub">Cada componente desenhado para ser reutilizável, testável e escalável — do átomo ao deploy.</p>
|
|
<div class="grid">
|
|
<div class="card">
|
|
<div class="icon">⚛️</div>
|
|
<h3>Atomic Design</h3>
|
|
<p>11 Átomos · 3 Moléculas · 2 Organismos · 2 Templates · 1 Página. Cada nível isolado, testável.</p>
|
|
</div>
|
|
<div class="card">
|
|
<div class="icon">🎨</div>
|
|
<h3>Design Tokens</h3>
|
|
<p>8 domínios: space / font / color / shadow / radius / material3d / camera3d / animation — 100% dinâmicos.</p>
|
|
</div>
|
|
<div class="card">
|
|
<div class="icon">🎬</div>
|
|
<h3>Scrollytelling</h3>
|
|
<p>Scroll move a câmera 3D — experiência cinemática onde o usuário dirige a narrativa.</p>
|
|
</div>
|
|
<div class="card">
|
|
<div class="icon">✨</div>
|
|
<h3>Micro-interações</h3>
|
|
<p>Botões vivos com glow pulsante, hover 3D scale, partículas orgânicas — cada átomo responde.</p>
|
|
</div>
|
|
<div class="card">
|
|
<div class="icon">♿</div>
|
|
<h3>WCAG / A11y</h3>
|
|
<p>Acessibilidade por padrão: semântica, focos visíveis, skip-links, ARIA labels, contraste AAA.</p>
|
|
</div>
|
|
<div class="card">
|
|
<div class="icon">🚀</div>
|
|
<h3>Core Web Vitals</h3>
|
|
<p>Hot path otimizado. Code splitting, LCP < 2.5s, INP < 200ms, CLS < 0.1 — por padrão.</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- TECHNOLOGIES -->
|
|
<section class="tech">
|
|
<div class="tech-inner">
|
|
<h2 class="section-title">Tecnologias usadas</h2>
|
|
<p class="section-sub"style="text-align:center">A stack que alimenta a experiência 3D</p>
|
|
<div class="tags">
|
|
<span class="tag">React 18</span>
|
|
<span class="tag">TypeScript</span>
|
|
<span class="tag">Vite</span>
|
|
<span class="tag">Three.js</span>
|
|
<span class="tag">@react-three/fiber</span>
|
|
<span class="tag">@react-three/drei</span>
|
|
<span class="tag">Framer Motion</span>
|
|
<span class="tag">S.O.L.I.D.</span>
|
|
<span class="tag">Atomic Design</span>
|
|
<span class="tag">CSS Custom Properties</span>
|
|
<span class="tag">WCAG 2.1 AA</span>
|
|
<span class="tag">Core Web Vitals</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ATOMIC SHOWCASE -->
|
|
<section class="section atomic" id="atomic">
|
|
<span class="section-label">✦ Atomic Design</span>
|
|
<h2 class="section-title">De átomos a<br><span class="gradient-text">organismos vivos</span></h2>
|
|
<p class="section-sub">A hierarquia de componentes em ação — cada nível herda os tokens dos níveis abaixo.</p>
|
|
<div class="atomic-grid">
|
|
<div class="layer-card">
|
|
<div class="layer-title atom">⚛️ Atoms — 11</div>
|
|
<div class="layer-list">
|
|
<span class="layer-item">Button</span><span class="layer-item">Badge</span>
|
|
<span class="layer-item">Card</span><span class="layer-item">GradientText</span>
|
|
<span class="layer-item">FloatingText</span><span class="layer-item">LightGlow</span>
|
|
<span class="layer-item">FloatingMesh</span><span class="layer-item">ParticleField</span>
|
|
<span class="layer-item">ThemeToggle</span><span class="layer-item">Divider</span>
|
|
<span class="layer-item">Typography</span>
|
|
</div>
|
|
</div>
|
|
<div class="layer-card">
|
|
<div class="layer-title molecule">🔗 Molecules — 3</div>
|
|
<div class="layer-list">
|
|
<span class="layer-item">FloatingMesh</span><span class="layer-item">ParticleField</span>
|
|
<span class="layer-item">FeatureCard3d</span>
|
|
</div>
|
|
</div>
|
|
<div class="layer-card">
|
|
<div class="layer-title organism">🦠 Organisms — 2</div>
|
|
<div class="layer-list">
|
|
<span class="layer-item">HeroScene3d</span><span class="layer-item">FeaturesScene3d</span>
|
|
</div>
|
|
</div>
|
|
<div class="layer-card">
|
|
<div class="layer-title template">📐 Templates — 2</div>
|
|
<div class="layer-list">
|
|
<span class="layer-item">SceneCanvas</span><span class="layer-item">ThreePage</span>
|
|
</div>
|
|
</div>
|
|
<div class="layer-card">
|
|
<div class="layer-title page">📄 Page — 1</div>
|
|
<div class="layer-list">
|
|
<span class="layer-item">App.tsx</span>
|
|
<span class="layer-item">Hero + Features + About + CTA</span>
|
|
<span class="layer-item">~ 500 lines</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- STATS -->
|
|
<div style="padding:6rem 2rem;max-width:1100px;margin:0 auto">
|
|
<div class="grid" style="grid-template-columns:repeat(auto-fit,minmax(180px,1fr))">
|
|
<div class="card" style="text-align:center;padding:2rem">
|
|
<div style="font-size:2.5rem;font-weight:900;color:var(--accent)">11</div>
|
|
<div style="color:var(--text-dim);margin-top:.3rem">Átomos</div>
|
|
</div>
|
|
<div class="card" style="text-align:center;padding:2rem">
|
|
<div style="font-size:2.5rem;font-weight:900;color:#a78bfa">8</div>
|
|
<div style="color:var(--text-dim);margin-top:.3rem">Domínios de Tokens</div>
|
|
</div>
|
|
<div class="card" style="text-align:center;padding:2rem">
|
|
<div style="font-size:2.5rem;font-weight:900;color:#34d399">3D</div>
|
|
<div style="color:var(--text-dim);margin-top:.3rem">Cena Interativa</div>
|
|
</div>
|
|
<div class="card" style="text-align:center;padding:2rem">
|
|
<div style="font-size:2.5rem;font-weight:900;color:#f0b429">WCAG</div>
|
|
<div style="color:var(--text-dim);margin-top:.3rem">AAA Acessível</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- CTA -->
|
|
<section class="cta-section" id="cta">
|
|
<h2>Transforme seu produto em<br>
|
|
<span class="gradient-text">uma experiência 3D</span>
|
|
</h2>
|
|
<p>Do primeiro átomo ao deploy em produção. Design systems vivos que escalam com seu time.</p>
|
|
<div class="cta-row">
|
|
<button class="btn btn-primary glow-cta" onclick="window.location.href='#features'">
|
|
✦ Ver Funcionalidades
|
|
</button>
|
|
<button class="btn btn-ghost">
|
|
Ler Documentação →
|
|
</button>
|
|
</div>
|
|
</section>
|
|
|
|
<footer>
|
|
<p>⚡ <span>Pulse 3D Landing</span> · test.octal.tec.br · Built with Three.js + React Fiber + Framer Motion · <span style="color:#64748b">WCAG AAA · 2026</span></p>
|
|
</footer>
|
|
|
|
<!-- PURO CSS SCROLL-DRIVEN 3D HINT (sem JS) ─────────────────────────── -->
|
|
<script>
|
|
// Remove loading quando DOM pronto
|
|
window.addEventListener('DOMContentLoaded', () => {
|
|
setTimeout(() => {
|
|
const el = document.getElementById('loading');
|
|
if (el) el.style.transition = 'opacity .5s', el.style.opacity = '0';
|
|
setTimeout(() => el?.remove(), 600);
|
|
}, 1200);
|
|
});
|
|
|
|
// Console branding
|
|
console.log('%c⚡ PULSE 3D',`
|
|
font-size:20px;font-weight:900;
|
|
background:linear-gradient(90deg,#2563eb,#7c3aed);
|
|
-webkit-background-clip:text;
|
|
-webkit-text-fill-color:transparent;
|
|
padding:4px 0;
|
|
`);
|
|
console.log('%cAtomic Design + Three.js + Design Tokens','color:#60a5fa;font-size:13px');
|
|
</script>
|
|
</body>
|
|
</html>
|