Ricardo Carneiro
a1242cdaaf
All checks were successful
Build and Deploy KVMote Landing Page / build (push) Successful in 34s
Build and Deploy n8ngo Landing Page / build (push) Successful in 47s
Build and Deploy KVMote Landing Page / deploy (push) Successful in 15s
Build and Deploy n8ngo Landing Page / deploy (push) Successful in 11s
Build and Deploy JobMaker / build (push) Successful in 41s
Build and Deploy JobMaker / deploy (push) Successful in 13s
Build and Deploy JobMaker / notify (push) Successful in 1s
- Add n8ngo/ and kvmote/ subfolders with Dockerfiles, nginx configs and static files - Add dedicated Gitea workflows for each landing page (ports 8084/8085) - Add paths-ignore to jobmaker workflow so it only triggers on its own files - Add .dockerignore to keep landing page folders out of jobmaker image Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
808 lines
25 KiB
HTML
808 lines
25 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="pt-BR">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>KVMote — Dois PCs, Um Teclado, Zero Bagunça</title>
|
||
<style>
|
||
:root {
|
||
--dark: #0d1117;
|
||
--dark-2: #161b22;
|
||
--blue: #1e40af;
|
||
--blue-hi: #3b82f6;
|
||
--yellow: #f59e0b;
|
||
--yellow-l:#fcd34d;
|
||
--white: #f0f6fc;
|
||
--ink: #000000;
|
||
}
|
||
|
||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||
|
||
body {
|
||
background: var(--dark);
|
||
color: var(--white);
|
||
font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
|
||
overflow-x: hidden;
|
||
}
|
||
|
||
/* ─── UTILITY ─── */
|
||
.ink-box {
|
||
border: 3px solid var(--ink);
|
||
box-shadow: 5px 5px 0 var(--ink);
|
||
}
|
||
|
||
/* ─── HERO ─── */
|
||
.hero {
|
||
min-height: 100vh;
|
||
background: linear-gradient(135deg, #050810 0%, #0d1f4a 45%, #050810 100%);
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
align-items: center;
|
||
gap: 3rem;
|
||
padding: 5rem 8% 4rem;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
/* dot-grid texture */
|
||
.hero::before {
|
||
content: '';
|
||
position: absolute;
|
||
inset: 0;
|
||
background-image: radial-gradient(circle, rgba(255,255,255,0.07) 1px, transparent 1px);
|
||
background-size: 28px 28px;
|
||
pointer-events: none;
|
||
}
|
||
|
||
/* speed-lines top-right */
|
||
.hero::after {
|
||
content: '';
|
||
position: absolute;
|
||
top: -60px;
|
||
right: -60px;
|
||
width: 340px;
|
||
height: 340px;
|
||
background: conic-gradient(
|
||
from 200deg,
|
||
transparent 0deg,
|
||
rgba(245,158,11,0.08) 2deg,
|
||
transparent 4deg,
|
||
transparent 8deg,
|
||
rgba(245,158,11,0.06) 10deg,
|
||
transparent 12deg
|
||
);
|
||
border-radius: 50%;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.hero-text { position: relative; z-index: 1; }
|
||
|
||
.hero-badge {
|
||
display: inline-block;
|
||
background: var(--yellow);
|
||
color: var(--ink);
|
||
font-weight: 900;
|
||
font-size: 0.7rem;
|
||
letter-spacing: 3px;
|
||
text-transform: uppercase;
|
||
padding: 0.3rem 0.9rem;
|
||
border: 2px solid var(--ink);
|
||
box-shadow: 3px 3px 0 var(--ink);
|
||
margin-bottom: 1.6rem;
|
||
}
|
||
|
||
.hero h1 {
|
||
font-size: clamp(2.4rem, 4.5vw, 3.8rem);
|
||
font-weight: 900;
|
||
line-height: 1.1;
|
||
color: var(--white);
|
||
text-shadow: 4px 4px 0 var(--ink);
|
||
margin-bottom: 1.4rem;
|
||
}
|
||
|
||
.hero h1 em {
|
||
font-style: normal;
|
||
color: var(--yellow);
|
||
}
|
||
|
||
.hero-sub {
|
||
font-size: 1.05rem;
|
||
color: #94a3b8;
|
||
line-height: 1.7;
|
||
max-width: 460px;
|
||
margin-bottom: 2.2rem;
|
||
}
|
||
|
||
.hero-cta {
|
||
display: inline-block;
|
||
background: var(--yellow);
|
||
color: var(--ink);
|
||
font-weight: 900;
|
||
font-size: 1rem;
|
||
padding: 0.9rem 2rem;
|
||
border: 3px solid var(--ink);
|
||
box-shadow: 6px 6px 0 var(--ink);
|
||
text-decoration: none;
|
||
transition: transform 0.1s, box-shadow 0.1s;
|
||
letter-spacing: 0.5px;
|
||
}
|
||
|
||
.hero-cta:hover {
|
||
transform: translate(-2px, -2px);
|
||
box-shadow: 8px 8px 0 var(--ink);
|
||
}
|
||
|
||
.hero-image-wrap {
|
||
position: relative;
|
||
z-index: 1;
|
||
display: flex;
|
||
justify-content: center;
|
||
}
|
||
|
||
.hero-image-wrap img {
|
||
width: 100%;
|
||
max-width: 500px;
|
||
border: 4px solid var(--ink);
|
||
box-shadow: 10px 10px 0 var(--ink), 0 0 60px rgba(59,130,246,0.2);
|
||
display: block;
|
||
}
|
||
|
||
/* corner label on the comic */
|
||
.comic-label {
|
||
position: absolute;
|
||
top: -14px;
|
||
left: 20px;
|
||
background: var(--yellow);
|
||
color: var(--ink);
|
||
font-size: 0.7rem;
|
||
font-weight: 900;
|
||
text-transform: uppercase;
|
||
letter-spacing: 2px;
|
||
padding: 0.2rem 0.6rem;
|
||
border: 2px solid var(--ink);
|
||
}
|
||
|
||
/* ─── YELLOW STRIP ─── */
|
||
.strip {
|
||
background: var(--yellow);
|
||
border-top: 3px solid var(--ink);
|
||
border-bottom: 3px solid var(--ink);
|
||
padding: 0.9rem 0;
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.strip-track {
|
||
display: inline-flex;
|
||
gap: 3rem;
|
||
animation: scroll-strip 22s linear infinite;
|
||
}
|
||
|
||
.strip-track span {
|
||
font-weight: 900;
|
||
color: var(--ink);
|
||
font-size: 0.9rem;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 0.4rem;
|
||
}
|
||
|
||
@keyframes scroll-strip {
|
||
from { transform: translateX(0); }
|
||
to { transform: translateX(-50%); }
|
||
}
|
||
|
||
/* ─── FEATURES ─── */
|
||
.features {
|
||
padding: 5rem 8%;
|
||
background: var(--dark-2);
|
||
}
|
||
|
||
.section-label {
|
||
text-align: center;
|
||
margin-bottom: 0.6rem;
|
||
}
|
||
|
||
.section-label span {
|
||
display: inline-block;
|
||
background: var(--blue);
|
||
color: #fff;
|
||
font-size: 0.7rem;
|
||
font-weight: 900;
|
||
letter-spacing: 3px;
|
||
text-transform: uppercase;
|
||
padding: 0.25rem 0.8rem;
|
||
border: 2px solid var(--ink);
|
||
}
|
||
|
||
.section-title {
|
||
font-size: clamp(1.6rem, 3vw, 2.2rem);
|
||
font-weight: 900;
|
||
text-align: center;
|
||
color: var(--white);
|
||
text-shadow: 3px 3px 0 var(--ink);
|
||
margin-bottom: 3rem;
|
||
}
|
||
|
||
.section-title em {
|
||
font-style: normal;
|
||
color: var(--yellow);
|
||
}
|
||
|
||
.features-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
|
||
gap: 1.5rem;
|
||
max-width: 1000px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.feature-card {
|
||
background: var(--dark);
|
||
border: 3px solid var(--ink);
|
||
box-shadow: 5px 5px 0 var(--ink);
|
||
padding: 1.6rem;
|
||
transition: transform 0.15s, box-shadow 0.15s;
|
||
}
|
||
|
||
.feature-card:hover {
|
||
transform: translate(-2px, -2px);
|
||
box-shadow: 7px 7px 0 var(--ink);
|
||
}
|
||
|
||
.feature-icon { font-size: 2.2rem; margin-bottom: 0.9rem; }
|
||
|
||
.feature-card h3 {
|
||
font-size: 1rem;
|
||
font-weight: 900;
|
||
color: var(--yellow);
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
|
||
.feature-card p {
|
||
font-size: 0.88rem;
|
||
color: #94a3b8;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
/* ─── HOW IT WORKS ─── */
|
||
.how {
|
||
padding: 5rem 8%;
|
||
background: var(--dark);
|
||
}
|
||
|
||
.steps {
|
||
display: grid;
|
||
grid-template-columns: 1fr auto 1fr auto 1fr;
|
||
align-items: start;
|
||
gap: 1rem;
|
||
max-width: 860px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.step { text-align: center; }
|
||
|
||
.step-num {
|
||
width: 58px;
|
||
height: 58px;
|
||
background: var(--blue);
|
||
border: 3px solid var(--ink);
|
||
box-shadow: 4px 4px 0 var(--ink);
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 1.4rem;
|
||
font-weight: 900;
|
||
margin: 0 auto 1rem;
|
||
}
|
||
|
||
.step h3 {
|
||
font-weight: 900;
|
||
font-size: 0.95rem;
|
||
margin-bottom: 0.4rem;
|
||
color: var(--white);
|
||
}
|
||
|
||
.step p {
|
||
font-size: 0.85rem;
|
||
color: #94a3b8;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.step-arrow {
|
||
font-size: 1.8rem;
|
||
color: var(--yellow);
|
||
font-weight: 900;
|
||
padding-top: 1rem;
|
||
align-self: center;
|
||
}
|
||
|
||
/* ─── PRICING ─── */
|
||
.pricing {
|
||
padding: 5rem 8%;
|
||
background: var(--dark-2);
|
||
}
|
||
|
||
.pricing-inner {
|
||
max-width: 680px;
|
||
margin: 0 auto;
|
||
text-align: center;
|
||
}
|
||
|
||
.pricing-card {
|
||
background: var(--dark);
|
||
border: 3px solid var(--ink);
|
||
box-shadow: 8px 8px 0 var(--ink);
|
||
padding: 2.5rem;
|
||
margin-top: 2rem;
|
||
text-align: left;
|
||
}
|
||
|
||
.price-tag {
|
||
font-size: 2.8rem;
|
||
font-weight: 900;
|
||
color: var(--yellow);
|
||
text-shadow: 3px 3px 0 var(--ink);
|
||
line-height: 1;
|
||
}
|
||
|
||
.price-sub {
|
||
color: #94a3b8;
|
||
font-size: 0.9rem;
|
||
margin-top: 0.4rem;
|
||
margin-bottom: 1.8rem;
|
||
padding-bottom: 1.5rem;
|
||
border-bottom: 2px dashed #334155;
|
||
}
|
||
|
||
.price-items {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0.8rem;
|
||
}
|
||
|
||
.price-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.75rem;
|
||
font-size: 0.92rem;
|
||
}
|
||
|
||
.check {
|
||
color: var(--yellow);
|
||
font-size: 1.1rem;
|
||
font-weight: 900;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.price-note {
|
||
margin-top: 1.5rem;
|
||
padding-top: 1.2rem;
|
||
border-top: 2px dashed #334155;
|
||
font-size: 0.82rem;
|
||
color: #64748b;
|
||
text-align: center;
|
||
}
|
||
|
||
/* ─── HID CALLOUT ─── */
|
||
.hid-callout {
|
||
background: var(--dark);
|
||
padding: 4rem 8%;
|
||
border-bottom: 3px solid var(--ink);
|
||
}
|
||
|
||
.hid-inner {
|
||
max-width: 860px;
|
||
margin: 0 auto;
|
||
display: grid;
|
||
grid-template-columns: auto 1fr;
|
||
gap: 2rem;
|
||
align-items: center;
|
||
background: linear-gradient(135deg, #0f2a5c, #1e3a8a);
|
||
border: 3px solid var(--ink);
|
||
box-shadow: 7px 7px 0 var(--ink);
|
||
padding: 2.5rem;
|
||
}
|
||
|
||
.hid-icon-wrap {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 0.5rem;
|
||
}
|
||
|
||
.hid-icon {
|
||
font-size: 4rem;
|
||
line-height: 1;
|
||
}
|
||
|
||
.hid-tag {
|
||
background: var(--yellow);
|
||
color: var(--ink);
|
||
font-size: 0.6rem;
|
||
font-weight: 900;
|
||
letter-spacing: 2px;
|
||
text-transform: uppercase;
|
||
padding: 0.15rem 0.5rem;
|
||
border: 2px solid var(--ink);
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.hid-text h3 {
|
||
font-size: 1.3rem;
|
||
font-weight: 900;
|
||
color: var(--white);
|
||
margin-bottom: 0.6rem;
|
||
text-shadow: 2px 2px 0 var(--ink);
|
||
}
|
||
|
||
.hid-text h3 em {
|
||
font-style: normal;
|
||
color: var(--yellow);
|
||
}
|
||
|
||
.hid-text p {
|
||
color: #93c5fd;
|
||
font-size: 0.92rem;
|
||
line-height: 1.65;
|
||
}
|
||
|
||
.hid-text p strong {
|
||
color: var(--white);
|
||
}
|
||
|
||
/* ─── RAFFLE ─── */
|
||
.raffle {
|
||
padding: 5rem 8%;
|
||
background: var(--dark);
|
||
border-top: 3px solid var(--ink);
|
||
}
|
||
|
||
.raffle-inner {
|
||
max-width: 760px;
|
||
margin: 0 auto;
|
||
text-align: center;
|
||
}
|
||
|
||
.raffle-card {
|
||
background: linear-gradient(135deg, #1c0a00, #3b1700);
|
||
border: 3px solid var(--ink);
|
||
box-shadow: 8px 8px 0 var(--ink);
|
||
padding: 3rem 2.5rem;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
/* confetti dots */
|
||
.raffle-card::before {
|
||
content: '';
|
||
position: absolute;
|
||
inset: 0;
|
||
background-image:
|
||
radial-gradient(circle, rgba(245,158,11,0.15) 2px, transparent 2px),
|
||
radial-gradient(circle, rgba(255,255,255,0.06) 1px, transparent 1px);
|
||
background-size: 40px 40px, 20px 20px;
|
||
background-position: 0 0, 10px 10px;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.raffle-emoji {
|
||
font-size: 3.5rem;
|
||
margin-bottom: 1rem;
|
||
position: relative;
|
||
}
|
||
|
||
.raffle-card h3 {
|
||
font-size: clamp(1.5rem, 3vw, 2rem);
|
||
font-weight: 900;
|
||
color: var(--yellow);
|
||
text-shadow: 3px 3px 0 var(--ink);
|
||
margin-bottom: 0.8rem;
|
||
position: relative;
|
||
}
|
||
|
||
.raffle-card p {
|
||
color: #d97706;
|
||
font-size: 0.95rem;
|
||
line-height: 1.7;
|
||
max-width: 520px;
|
||
margin: 0 auto 1.8rem;
|
||
position: relative;
|
||
}
|
||
|
||
.raffle-card p strong {
|
||
color: var(--yellow-l);
|
||
}
|
||
|
||
.raffle-badges {
|
||
display: flex;
|
||
justify-content: center;
|
||
gap: 1rem;
|
||
flex-wrap: wrap;
|
||
position: relative;
|
||
}
|
||
|
||
.raffle-badge {
|
||
background: var(--yellow);
|
||
color: var(--ink);
|
||
font-weight: 900;
|
||
font-size: 0.8rem;
|
||
padding: 0.4rem 1rem;
|
||
border: 2px solid var(--ink);
|
||
box-shadow: 3px 3px 0 var(--ink);
|
||
letter-spacing: 0.5px;
|
||
}
|
||
|
||
/* ─── FORM SECTION ─── */
|
||
.form-section {
|
||
padding: 5rem 8%;
|
||
background: #f1f5f9;
|
||
border-top: 4px solid var(--ink);
|
||
border-bottom: 4px solid var(--ink);
|
||
}
|
||
|
||
.form-header {
|
||
text-align: center;
|
||
margin-bottom: 2.5rem;
|
||
}
|
||
|
||
.form-header h2 {
|
||
font-size: clamp(1.6rem, 3vw, 2.2rem);
|
||
font-weight: 900;
|
||
color: #0d1117;
|
||
text-shadow: 3px 3px 0 rgba(0,0,0,0.12);
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
|
||
.form-header h2 em {
|
||
font-style: normal;
|
||
color: #1e40af;
|
||
}
|
||
|
||
.form-header p {
|
||
color: #475569;
|
||
font-size: 0.95rem;
|
||
}
|
||
|
||
.form-wrap {
|
||
max-width: 680px;
|
||
margin: 0 auto;
|
||
background: #ffffff;
|
||
border: 3px solid var(--ink);
|
||
box-shadow: 8px 8px 0 var(--ink);
|
||
padding: 2rem 2.5rem;
|
||
}
|
||
|
||
/* ─── FOOTER ─── */
|
||
footer {
|
||
background: #000;
|
||
padding: 1.8rem 8%;
|
||
text-align: center;
|
||
font-size: 0.83rem;
|
||
color: #6b7280;
|
||
border-top: 3px solid var(--yellow);
|
||
}
|
||
|
||
footer strong { color: var(--yellow); }
|
||
|
||
/* ─── RESPONSIVE ─── */
|
||
@media (max-width: 820px) {
|
||
.hero {
|
||
grid-template-columns: 1fr;
|
||
text-align: center;
|
||
padding: 4rem 6% 3rem;
|
||
gap: 2rem;
|
||
}
|
||
.hero-sub { margin: 0 auto 2rem; }
|
||
.hero-image-wrap { order: -1; }
|
||
.hero-image-wrap img { max-width: 340px; }
|
||
|
||
.steps {
|
||
grid-template-columns: 1fr;
|
||
gap: 2rem;
|
||
}
|
||
.step-arrow { display: none; }
|
||
|
||
.form-wrap { padding: 1.5rem; }
|
||
|
||
.hid-inner {
|
||
grid-template-columns: 1fr;
|
||
text-align: center;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<!-- ══════════ HERO ══════════ -->
|
||
<section class="hero">
|
||
<div class="hero-text">
|
||
<div class="hero-badge">⚡ Early Access — Hardware + Software</div>
|
||
<h1>Dois PCs.<br>Um teclado.<br><em>Zero bagunça.</em></h1>
|
||
<p class="hero-sub">
|
||
KVMote deixa você controlar dois computadores com o mesmo teclado e mouse — sem software no PC cliente, sem assinatura, sem fio entre as máquinas.
|
||
</p>
|
||
<a href="#form" class="hero-cta">Quero ser notificado quando lançar →</a>
|
||
</div>
|
||
|
||
<div class="hero-image-wrap">
|
||
<span class="comic-label">A história do KVMote</span>
|
||
<img src="quadrinhos_kvmote.png" alt="Quadrinho: O problema, a solução, a conexão e o fluxo do KVMote">
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ══════════ STRIP ══════════ -->
|
||
<div class="strip">
|
||
<div class="strip-track">
|
||
<span>🔌 Plug & Play — sem drivers</span>
|
||
<span>📡 Sem fio via BLE</span>
|
||
<span>⌨️ Teclado + Mouse + Clipboard</span>
|
||
<span>🚫 Zero software no PC cliente</span>
|
||
<span>💳 Pagamento único — sem assinatura</span>
|
||
<span>🔒 Funciona em PCs corporativos</span>
|
||
<!-- duplicado para loop contínuo -->
|
||
<span>🔌 Plug & Play — sem drivers</span>
|
||
<span>📡 Sem fio via BLE</span>
|
||
<span>⌨️ Teclado + Mouse + Clipboard</span>
|
||
<span>🚫 Zero software no PC cliente</span>
|
||
<span>💳 Pagamento único — sem assinatura</span>
|
||
<span>🔒 Funciona em PCs corporativos</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ══════════ HID CALLOUT ══════════ -->
|
||
<section class="hid-callout">
|
||
<div class="hid-inner">
|
||
<div class="hid-icon-wrap">
|
||
<div class="hid-icon">⌨️</div>
|
||
<div class="hid-tag">USB HID</div>
|
||
</div>
|
||
<div class="hid-text">
|
||
<h3>O PC que você quer controlar te vê como um <em>teclado e mouse normais</em></h3>
|
||
<p>
|
||
O KVMote aparece para o Windows como um periférico USB padrão — <strong>sem alertas de segurança, sem driver para instalar, sem aprovação do TI.</strong>
|
||
Funciona em qualquer PC: corporativo bloqueado, notebook pessoal, máquina de trabalho remoto.
|
||
Para o sistema operacional, é só mais um teclado plugado.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ══════════ FEATURES ══════════ -->
|
||
<section class="features">
|
||
<div class="section-label"><span>Por que o KVMote?</span></div>
|
||
<h2 class="section-title">Diferente de tudo que você <em>já usou</em></h2>
|
||
<div class="features-grid">
|
||
<div class="feature-card">
|
||
<div class="feature-icon">🔒</div>
|
||
<h3>Zero software no cliente</h3>
|
||
<p>O PC cliente enxerga apenas um teclado + mouse USB padrão. Funciona em Windows corporativo bloqueado, sem instalar nada.</p>
|
||
</div>
|
||
<div class="feature-card">
|
||
<div class="feature-icon">📡</div>
|
||
<h3>Sem fio de verdade</h3>
|
||
<p>Comunicação por BLE (Bluetooth Low Energy). Sem cabos entre os PCs, sem configuração de rede, sem IP.</p>
|
||
</div>
|
||
<div class="feature-card">
|
||
<div class="feature-icon">📋</div>
|
||
<h3>Clipboard compartilhado</h3>
|
||
<p>Copie no host, cole no cliente com Ctrl+V. Suporte a PT-BR com acentos e múltiplos layouts de teclado.</p>
|
||
</div>
|
||
<div class="feature-card">
|
||
<div class="feature-icon">⚡</div>
|
||
<h3>Hardware compacto</h3>
|
||
<p>Dispositivo pequeno e discreto baseado em ESP32-S3. Sem drivers proprietários, sem dongles extras.</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ══════════ HOW IT WORKS ══════════ -->
|
||
<section class="how">
|
||
<div class="section-label"><span>Como funciona</span></div>
|
||
<h2 class="section-title">Três passos e você está <em>no controle</em></h2>
|
||
<div class="steps">
|
||
<div class="step">
|
||
<div class="step-num">1</div>
|
||
<h3>Conecte o hardware</h3>
|
||
<p>Plugue o dispositivo KVMote na porta USB do PC cliente. Nenhum driver necessário.</p>
|
||
</div>
|
||
<div class="step-arrow">→</div>
|
||
<div class="step">
|
||
<div class="step-num">2</div>
|
||
<h3>Abra o app no host</h3>
|
||
<p>Execute o KVMote.exe no seu PC principal. Detecção automática via BLE — sem parear manualmente.</p>
|
||
</div>
|
||
<div class="step-arrow">→</div>
|
||
<div class="step">
|
||
<div class="step-num">3</div>
|
||
<h3>Leve o cursor à borda</h3>
|
||
<p>Empurre o mouse para a borda configurada e o controle migra para o outro PC. Simples assim.</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ══════════ PRICING ══════════ -->
|
||
<section class="pricing">
|
||
<div class="pricing-inner">
|
||
<div class="section-label"><span>Previsão de preço</span></div>
|
||
<h2 class="section-title">Hardware + Software,<br><em>pagamento único</em></h2>
|
||
<div class="pricing-card">
|
||
<div class="price-tag">R$ 189 – 299</div>
|
||
<div class="price-sub">Preço único · sem assinatura · sem mensalidade</div>
|
||
<div class="price-items">
|
||
<div class="price-item"><span class="check">✦</span> Hardware ESP32-S3 pronto para uso</div>
|
||
<div class="price-item"><span class="check">✦</span> Aplicativo KVMote para Windows (incluso)</div>
|
||
<div class="price-item"><span class="check">✦</span> Controle de teclado, mouse e clipboard</div>
|
||
<div class="price-item"><span class="check">✦</span> Suporte a PT-BR ABNT2 e US International</div>
|
||
<div class="price-item"><span class="check">✦</span> Atualizações de firmware e software incluídas</div>
|
||
</div>
|
||
<p class="price-note">
|
||
O preço final depende do feedback de vocês. Responda o formulário abaixo e ajude a definir.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ══════════ RAFFLE ══════════ -->
|
||
<section class="raffle">
|
||
<div class="raffle-inner">
|
||
<div class="raffle-card">
|
||
<div class="raffle-emoji">🎁</div>
|
||
<h3>Sorteio de 2 dispositivos KVMote</h3>
|
||
<p>
|
||
Se validarmos que o produto vale a pena para vocês, vamos sortear
|
||
<strong>2 unidades do hardware KVMote</strong> entre todos que se inscreverem com um email válido.
|
||
Sem pegadinha. Quem se inscrever no formulário abaixo já está participando.
|
||
</p>
|
||
<div class="raffle-badges">
|
||
<div class="raffle-badge">🎯 2 unidades sorteadas</div>
|
||
<div class="raffle-badge">📧 Basta ter email válido</div>
|
||
<div class="raffle-badge">✅ Inscrição = participação</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ══════════ FORM ══════════ -->
|
||
<section class="form-section" id="form">
|
||
<div class="form-header">
|
||
<h2>Inscreva-se e <em>concorra!</em></h2>
|
||
<p>Preencha abaixo para participar do sorteio e nos ajudar a definir o produto. Leva menos de 1 minuto.</p>
|
||
</div>
|
||
<div class="form-wrap">
|
||
<iframe
|
||
data-tally-src="https://tally.so/embed/44vbdO?alignLeft=1&hideTitle=1&transparentBackground=1&dynamicHeight=1"
|
||
loading="lazy"
|
||
width="100%"
|
||
height="721"
|
||
frameborder="0"
|
||
marginheight="0"
|
||
marginwidth="0"
|
||
title="KVMote">
|
||
</iframe>
|
||
<script>
|
||
var d = document, w = "https://tally.so/widgets/embed.js",
|
||
v = function () {
|
||
"undefined" != typeof Tally
|
||
? Tally.loadEmbeds()
|
||
: d.querySelectorAll("iframe[data-tally-src]:not([src])").forEach(function (e) { e.src = e.dataset.tallySrc; });
|
||
};
|
||
if ("undefined" != typeof Tally) v();
|
||
else if (d.querySelector('script[src="' + w + '"]') == null) {
|
||
var s = d.createElement("script");
|
||
s.src = w; s.onload = v; s.onerror = v;
|
||
d.body.appendChild(s);
|
||
}
|
||
</script>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ══════════ FOOTER ══════════ -->
|
||
<footer>
|
||
<strong>KVMote</strong> — KVM over Bluetooth · Projeto independente · Em desenvolvimento
|
||
</footer>
|
||
|
||
</body>
|
||
</html>
|