<!-- Firebase SDKs -->
<script src="https://www.gstatic.com/firebasejs/9.22.0/firebase-app-compat.js">
</script>
<script src="https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore-compat.js">
</script>
<style>
/* ===== RESET & VARIÁVEIS ===== */
:root {
--bg: #f3f2ee;
--paper: #faf9f6;
--black: #111;
--gray: #70706c;
--line: #d8d6d0;
--soft: #e8e6e0;
--white: #fff;
--max: 1180px;
}
* {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
margin: 0;
background: var(--bg);
color: var(--black);
font-family: Inter, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
}
a {
color: inherit;
text-decoration: none;
}
.container {
width: min(1120px, calc(100% - 40px));
margin: auto;
}
/* ===== NAV ===== */
nav {
height: 76px;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid var(--line);
}
.logo {
font-size: 13px;
font-weight: 800;
letter-spacing: .12em;
}
.nav-links {
display: flex;
gap: 28px;
}
.nav-links a {
font-size: 11px;
text-transform: uppercase;
letter-spacing: .12em;
color: var(--gray);
}
/* ===== HERO ===== */
.hero {
padding: 90px 0 70px;
}
.hero-grid {
display: grid;
grid-template-columns: 1.5fr .7fr;
gap: 80px;
align-items: end;
}
.eyebrow {
font-size: 10px;
text-transform: uppercase;
letter-spacing: .18em;
color: var(--gray);
margin-bottom: 22px;
}
h1 {
font-size: clamp(52px, 8vw, 108px);
line-height: .86;
letter-spacing: -.075em;
margin: 0;
font-weight: 800;
}
.hero-description {
max-width: 680px;
margin-top: 32px;
font-size: 20px;
line-height: 1.5;
color: #44433f;
}
.timer-card {
background: var(--black);
color: var(--white);
padding: 24px;
border-radius: 16px;
}
.timer-title {
font-size: 10px;
text-transform: uppercase;
letter-spacing: .16em;
color: #999;
margin-bottom: 16px;
}
.timer {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 5px;
}
.time {
background: #202020;
border-radius: 9px;
padding: 13px 4px;
text-align: center;
}
.time-number {
display: block;
font-size: 25px;
font-weight: 800;
letter-spacing: -.05em;
}
.time-label {
display: block;
margin-top: 4px;
font-size: 8px;
text-transform: uppercase;
color: #999;
}
/* ===== SECTIONS GERAIS ===== */
section {
padding: 90px 0;
border-top: 1px solid var(--line);
}
.section-grid {
display: grid;
grid-template-columns: .65fr 1.35fr;
gap: 80px;
}
.section-title {
font-size: clamp(34px, 5vw, 64px);
line-height: .94;
letter-spacing: -.06em;
margin: 0;
}
.text {
max-width: 680px;
color: #55534e;
font-size: 17px;
line-height: 1.65;
}
.text p {
margin-top: 0;
margin-bottom: 20px;
}
/* ===== GOAL ===== */
.goal-number {
font-size: clamp(70px, 10vw, 120px);
font-weight: 800;
letter-spacing: -.08em;
line-height: 1;
margin: 40px 0 20px;
}
.progress {
width: 100%;
height: 12px;
background: var(--soft);
border-radius: 100px;
overflow: hidden;
}
.progress-bar {
height: 100%;
width: 0%;
background: var(--black);
transition: width .5s ease;
}
.progress-info {
display: flex;
justify-content: space-between;
margin-top: 10px;
font-size: 11px;
color: var(--gray);
}
/* ===== REWARDS ===== */
.rewards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
}
.reward {
background: var(--paper);
border: 1px solid var(--line);
border-radius: 14px;
padding: 26px;
min-height: 260px;
display: flex;
flex-direction: column;
}
.reward-value {
font-size: 34px;
font-weight: 800;
letter-spacing: -.06em;
margin-bottom: 40px;
}
.reward h3 {
font-size: 18px;
margin: 0 0 10px;
}
.reward p {
margin: 0;
color: var(--gray);
font-size: 14px;
line-height: 1.55;
}
.reward-footer {
margin-top: auto;
padding-top: 20px;
font-size: 9px;
text-transform: uppercase;
letter-spacing: .14em;
color: var(--gray);
}
/* ===== SESSION ===== */
.session {
background: var(--black);
color: white;
border-radius: 22px;
padding: 50px;
}
.session-grid {
display: grid;
grid-template-columns: 1.2fr .8fr;
gap: 60px;
}
.session h2 {
font-size: clamp(42px, 6vw, 78px);
line-height: .9;
letter-spacing: -.07em;
margin: 0 0 25px;
}
.session p {
color: #aaa;
line-height: 1.65;
}
.session-specs {
margin-top: 35px;
display: grid;
grid-template-columns: 1fr 1fr;
}
.spec {
padding: 16px 0;
border-top: 1px solid #333;
font-size: 13px;
color: #aaa;
}
.spec strong {
display: block;
color: white;
margin-bottom: 4px;
}
.vacancies {
border: 1px solid #333;
border-radius: 14px;
padding: 25px;
align-self: start;
}
.vacancies-number {
font-size: 80px;
font-weight: 800;
letter-spacing: -.08em;
line-height: 1;
}
/* ===== PHOTO CARDS ===== */
.photo-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.photo {
aspect-ratio: 4 / 5;
position: relative;
overflow: hidden;
background: #aaa;
}
.photo span {
position: absolute;
bottom: 12px;
left: 12px;
color: white;
font-size: 10px;
letter-spacing: .16em;
text-transform: uppercase;
mix-blend-mode: difference;
}
.photo-1 {
background: linear-gradient(135deg, #dedbd3 0 30%, transparent 30%), radial-gradient(circle at 65% 35%, #222 0 15%, transparent 16%), #aaa;
}
.photo-2 {
background: linear-gradient(25deg, #111 0 25%, transparent 25%), radial-gradient(circle at 40% 60%, #bbb 0 15%, transparent 16%), #777;
}
.photo-3 {
background: linear-gradient(90deg, #d5d1c8 0 48%, #111 48% 53%, #999 53%);
}
.photo-4 {
background: radial-gradient(circle at 50% 40%, #111 0 15%, transparent 16%), linear-gradient(135deg, #eee, #888);
}
.photo-5 {
background: linear-gradient(180deg, #eee 0 65%, #222 65%);
}
.photo-6 {
background: linear-gradient(145deg, #111 0 42%, #d5d1c8 42% 70%, #777 70%);
}
/* ===== PROCESS ===== */
.process {
display: grid;
grid-template-columns: repeat(4, 1fr);
}
.process-step {
padding: 25px;
border-right: 1px solid var(--line);
min-height: 190px;
}
.process-step:last-child {
border-right: none;
}
.process-number {
color: var(--gray);
font-size: 11px;
margin-bottom: 55px;
}
.process-step h3 {
margin: 0 0 8px;
font-size: 20px;
}
.process-step p {
margin: 0;
color: var(--gray);
font-size: 13px;
}
/* ===== MILESTONES ===== */
.milestones {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 8px;
}
.milestone {
border: 1px solid var(--line);
background: var(--paper);
padding: 20px;
min-height: 140px;
}
.milestone strong {
display: block;
font-size: 23px;
margin-bottom: 30px;
}
.milestone span {
color: var(--gray);
font-size: 12px;
}
/* ===== TRANSPARENCY ===== */
.transparency {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
}
.money-list {
border-top: 1px solid var(--line);
}
.money-row {
display: flex;
justify-content: space-between;
padding: 17px 0;
border-bottom: 1px solid var(--line);
font-size: 14px;
}
.money-row span {
color: var(--gray);
}
/* ===== CTA ===== */
.cta {
background: var(--black);
color: white;
border-radius: 22px;
padding: 55px;
display: grid;
grid-template-columns: 1.2fr .8fr;
gap: 60px;
}
.cta h2 {
font-size: clamp(42px, 6vw, 75px);
line-height: .9;
letter-spacing: -.07em;
margin: 0;
}
.cta p {
color: #aaa;
max-width: 600px;
line-height: 1.6;
}
.contribute-box {
background: #1d1d1d;
border: 1px solid #333;
border-radius: 14px;
padding: 22px;
align-self: center;
}
.contribute-box label {
display: block;
font-size: 10px;
text-transform: uppercase;
letter-spacing: .13em;
color: #999;
margin-bottom: 10px;
}
.amount {
width: 100%;
background: #111;
border: 1px solid #333;
color: white;
padding: 15px;
border-radius: 9px;
outline: none;
margin-bottom: 10px;
}
.button {
width: 100%;
display: block;
padding: 16px;
border: none;
border-radius: 9px;
background: white;
color: black;
text-align: center;
font-weight: 800;
cursor: pointer;
}
.small {
margin-top: 12px;
color: #777;
font-size: 10px;
line-height: 1.5;
}
/* ===== NOVA SEÇÃO: CAPTURA ===== */
.capture-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: start;
}
.capture-form {
background: var(--paper);
border: 1px solid var(--line);
border-radius: 20px;
padding: 40px 35px;
}
.capture-form label {
display: block;
font-size: 11px;
text-transform: uppercase;
letter-spacing: .12em;
color: var(--gray);
margin-top: 18px;
margin-bottom: 6px;
}
.capture-form label:first-of-type {
margin-top: 0;
}
.capture-form input,
.capture-form select {
width: 100%;
padding: 14px 16px;
background: var(--white);
border: 1px solid var(--line);
border-radius: 10px;
font-size: 16px;
color: var(--black);
outline: none;
transition: border .2s;
}
.capture-form input:focus,
.capture-form select:focus {
border-color: var(--black);
}
.capture-form .button {
margin-top: 28px;
background: var(--black);
color: var(--white);
font-weight: 700;
letter-spacing: .06em;
border: none;
padding: 18px;
border-radius: 10px;
cursor: pointer;
transition: background .2s;
}
.capture-form .button:hover {
background: #2a2a2a;
}
.capture-form .button:disabled {
opacity: .5;
cursor: not-allowed;
}
.form-feedback {
margin-top: 16px;
font-size: 14px;
color: #2b7a4b;
display: none;
}
.form-feedback.error {
color: #b33;
}
.whatsapp-direct {
margin-top: 24px;
text-align: center;
}
.whatsapp-direct a {
display: inline-flex;
align-items: center;
gap: 10px;
background: #25d366;
color: white;
padding: 14px 28px;
border-radius: 40px;
font-weight: 700;
font-size: 16px;
letter-spacing: .03em;
transition: background .2s;
}
.whatsapp-direct a:hover {
background: #1ebe5a;
}
.whatsapp-direct a svg {
width: 24px;
height: 24px;
fill: white;
}
/* ===== FOOTER ===== */
footer {
padding: 35px 0 60px;
display: flex;
justify-content: space-between;
color: var(--gray);
font-size: 10px;
text-transform: uppercase;
letter-spacing: .12em;
}
/* ===== MOBILE ===== */
@media(max-width: 800px) {
.container {
width: min(100% - 28px, 1120px);
}
.nav-links {
display: none;
}
.hero-grid,
.section-grid,
.session-grid,
.transparency,
.cta,
.capture-grid {
grid-template-columns: 1fr;
}
.rewards {
grid-template-columns: 1fr 1fr;
}
.photo-grid {
grid-template-columns: 1fr 1fr;
}
.process {
grid-template-columns: 1fr 1fr;
}
.process-step {
border-bottom: 1px solid var(--line);
}
.milestones {
grid-template-columns: 1fr 1fr;
}
.capture-form {
padding: 28px 22px;
}
}
@media(max-width: 520px) {
.hero {
padding-top: 55px;
}
.rewards,
.photo-grid,
.process,
.milestones {
grid-template-columns: 1fr;
}
.session,
.cta {
padding: 28px;
}
.session-specs {
grid-template-columns: 1fr;
}
footer {
flex-direction: column;
gap: 10px;
}
}
</style>
<div class="container">
<!-- ==========================================
NAV
=========================================== -->
<nav>
<div class="logo">MOSCHIAT</div>
<div class="nav-links">
<a href="#projeto">Projeto</a>
<a href="#recompensas">Recompensas</a>
<a href="#processo">Processo</a>
<a href="#contribuir">Participar</a>
<a href="#captura">Contato</a>
</div>
</nav>
<!-- ==========================================
HERO
=========================================== -->
<header class="hero">
<div class="hero-grid">
<div>
<div class="eyebrow">MOSCHIAT / STUDY 001 / 2026</div>
<h1>Um som.<br>Uma imagem.<br>Um futuro.</h1>
<p class="hero-description">
Quero investir em uma ferramenta profissional para estudar
produção musical e transformar minhas experimentações em
música, imagem e audiovisual.
</p>
</div>
<div class="timer-card">
<div class="timer-title">Deal ends in</div>
<div class="timer">
<div class="time">
<span class="time-number" id="days">00</span>
<span class="time-label">Days</span>
</div>
<div class="time">
<span class="time-number" id="hours">00</span>
<span class="time-label">Hours</span>
</div>
<div class="time">
<span class="time-number" id="minutes">00</span>
<span class="time-label">Minutes</span>
</div>
<div class="time">
<span class="time-number" id="seconds">00</span>
<span class="time-label">Seconds</span>
</div>
</div>
</div>
</div>
</header>
<!-- ==========================================
PROJETO
=========================================== -->
<section id="projeto">
<div class="section-grid">
<div>
<div class="eyebrow">01 / O projeto</div>
<h2 class="section-title">Não é apenas uma compra.</h2>
</div>
<div class="text">
<p>
Esta campanha existe para financiar uma ferramenta que fará
parte diretamente do meu processo de estudo e criação:
o <strong>FL Studio All Plugins Edition</strong>.
</p>
<p>
Quero usar esse próximo ciclo para estudar produção musical,
explorar novas possibilidades sonoras e transformar essas
experimentações em uma linguagem que atravesse música,
fotografia e audiovisual.
</p>
<p>
Quem participa não está simplesmente entregando dinheiro.
Está ajudando a financiar uma etapa concreta desse processo
e recebe algo proporcional à contribuição.
</p>
<div class="goal-number">R$ 1.500</div>
<div class="progress">
<div class="progress-bar" id="progressBar"></div>
</div>
<div class="progress-info">
<span id="raised">R$ 0 arrecadados</span>
<span>Meta: R$ 1.500</span>
</div>
</div>
</div>
</section>
<!-- ==========================================
RECOMPENSAS
=========================================== -->
<section id="recompensas">
<div class="section-grid">
<div>
<div class="eyebrow">02 / Recompensas</div>
<h2 class="section-title">Financie.<br>Receba.<br>Participe.</h2>
</div>
<div>
<div class="rewards">
<article class="reward">
<div class="reward-value">Qualquer valor</div>
<h3>Participação</h3>
<p>Agradecimento + atualizações sobre o desenvolvimento da campanha.</p>
<div class="reward-footer">Sem valor mínimo</div>
</article>
<article class="reward">
<div class="reward-value">R$ 25+</div>
<h3>Edição digital</h3>
<p>Acesso ao pacote digital produzido durante a campanha.</p>
<div class="reward-footer">Digital</div>
</article>
<article class="reward">
<div class="reward-value">R$ 50+</div>
<h3>Audio / Image</h3>
<p>6 fotografias em alta resolução + 1 vídeo artístico de 15 segundos.</p>
<div class="reward-footer">Edition 001</div>
</article>
<article class="reward">
<div class="reward-value">R$ 100+</div>
<h3>Full Process</h3>
<p>Pacote completo + bastidores + extras do processo criativo.</p>
<div class="reward-footer">Behind the scenes</div>
</article>
<article class="reward">
<div class="reward-value">R$ 250+</div>
<h3>MOSCHIAT SESSION</h3>
<p>Ensaio fotográfico presencial de 20–50 minutos em Belo Horizonte, com direção artística.</p>
<div class="reward-footer">Apenas 5 vagas</div>
</article>
<article class="reward">
<div class="reward-value">R$ 500+</div>
<h3>Full Session</h3>
<p>Ensaio + pacote completo + experiência especial ligada ao projeto.</p>
<div class="reward-footer">Vagas limitadas</div>
</article>
</div>
</div>
</div>
</section>
<!-- ==========================================
MOSCHIAT SESSION
=========================================== -->
<section>
<div class="session">
<div class="session-grid">
<div>
<div class="eyebrow" style="color:#777">03 / R$ 250+</div>
<h2>MOSCHIAT<br>SESSION — 20/50</h2>
<p>
Um ensaio espontâneo de 20 a 50 minutos.
Fotografia externa, direção fotográfica,
seleção e tratamento das imagens.
</p>
<p>Belo Horizonte — região central ou local previamente combinado.</p>
<div class="session-specs">
<div class="spec"><strong>Duração</strong>20–50 minutos</div>
<div class="spec"><strong>Formato</strong>Fotografia externa</div>
<div class="spec"><strong>Local</strong>Belo Horizonte</div>
<div class="spec"><strong>Direção</strong>Direção fotográfica</div>
<div class="spec"><strong>Entrega</strong>Fotos digitais selecionadas</div>
<div class="spec"><strong>Data</strong>Combinada previamente</div>
</div>
</div>
<div class="vacancies">
<div class="eyebrow" style="color:#777">Disponibilidade</div>
<div class="vacancies-number">05</div>
<p>vagas de ensaio disponíveis nesta campanha.</p>
<p>Caso o conceito peça studio, uma opção próxima à região central será definida previamente. Eventuais custos de locação serão informados antes do ensaio.</p>
</div>
</div>
</div>
</section>
<!-- ==========================================
EDIÇÃO 001
=========================================== -->
<section>
<div class="section-grid">
<div>
<div class="eyebrow">04 / Edition 001</div>
<h2 class="section-title">Seis imagens.<br>Uma obra.</h2>
</div>
<div class="text">
<p>As seis fotografias não serão pensadas como imagens independentes. Cada uma representa uma etapa do mesmo experimento.</p>
</div>
</div>
<div class="photo-grid">
<div class="photo photo-1"><span>01 / Noise</span></div>
<div class="photo photo-2"><span>02 / Pulse</span></div>
<div class="photo photo-3"><span>03 / Frequency</span></div>
<div class="photo photo-4"><span>04 / Distortion</span></div>
<div class="photo photo-5"><span>05 / Silence</span></div>
<div class="photo photo-6"><span>06 / Release</span></div>
</div>
</section>
<!-- ==========================================
VIDEO
=========================================== -->
<section>
<div class="section-grid">
<div>
<div class="eyebrow">05 / Moving Image</div>
<h2 class="section-title">15 segundos podem dizer bastante.</h2>
</div>
<div class="text">
<p>O vídeo não será um anúncio explicando a campanha. Será uma pequena peça audiovisual.</p>
<p>Imagem, movimento, textura, corte e uma composição sonora experimental criada durante o processo.</p>
<p>A peça termina com:</p>
<p><strong>AJUDE A CONSTRUIR<br>O PRÓXIMO SOM.</strong></p>
</div>
</div>
</section>
<!-- ==========================================
PROCESSO
=========================================== -->
<section id="processo">
<div class="section-grid">
<div>
<div class="eyebrow">06 / Processo</div>
<h2 class="section-title">Dinheiro → ferramenta → estudo → obra.</h2>
</div>
<div>
<div class="process">
<div class="process-step">
<div class="process-number">01</div>
<h3>Acquire</h3>
<p>Aquisição do FL Studio All Plugins Edition.</p>
</div>
<div class="process-step">
<div class="process-number">02</div>
<h3>Study</h3>
<p>Estudo de produção, síntese, efeitos e composição.</p>
</div>
<div class="process-step">
<div class="process-number">03</div>
<h3>Transform</h3>
<p>Transformação das experimentações em imagem e audiovisual.</p>
</div>
<div class="process-step">
<div class="process-number">04</div>
<h3>Release</h3>
<p>Entrega da edição artística para quem participou.</p>
</div>
</div>
</div>
</div>
</section>
<!-- ==========================================
MARCOS
=========================================== -->
<section>
<div class="section-grid">
<div>
<div class="eyebrow">07 / Progress</div>
<h2 class="section-title">O progresso também vira obra.</h2>
</div>
<div>
<div class="milestones">
<div class="milestone"><strong>R$ 500</strong><span>Preview #01</span></div>
<div class="milestone"><strong>R$ 750</strong><span>Foto inédita</span></div>
<div class="milestone"><strong>R$ 1.000</strong><span>Preview do vídeo</span></div>
<div class="milestone"><strong>R$ 1.250</strong><span>Making of</span></div>
<div class="milestone"><strong>R$ 1.500</strong><span>Projeto completo</span></div>
</div>
</div>
</div>
</section>
<!-- ==========================================
TRANSPARÊNCIA
=========================================== -->
<section>
<div class="transparency">
<div>
<div class="eyebrow">08 / Transparência</div>
<h2 class="section-title">Para onde vai o dinheiro?</h2>
<div class="text">
<p>A meta desta campanha é financiar a aquisição do FL Studio All Plugins Edition.</p>
<p>A ferramenta será utilizada no próximo ciclo de estudos e produção musical.</p>
<p>Se houver taxas da plataforma de pagamento, elas devem ser consideradas separadamente na prestação de contas.</p>
</div>
</div>
<div class="money-list">
<div class="money-row"><span>Meta</span><strong>R$ 1.500</strong></div>
<div class="money-row"><span>Destino principal</span><strong>FL Studio</strong></div>
<div class="money-row"><span>Finalidade</span><strong>Estudo + produção</strong></div>
<div class="money-row"><span>Resultado</span><strong>Arte + audiovisual</strong></div>
<div class="money-row"><span>Taxas</span><strong>Informadas</strong></div>
</div>
</div>
</section>
<!-- ==========================================
CARD DIGITAL
=========================================== -->
<section>
<div class="section-grid">
<div>
<div class="eyebrow">09 / Digital Artifact</div>
<h2 class="section-title">MOSCHIAT<br>/ STUDY 001</h2>
</div>
<div class="text">
<p>A contribuição também pode receber uma peça digital concebida como uma edição de arte.</p>
<p><strong>AUDIO / IMAGE / EXPERIMENT</strong></p>
<p>6 photographic studies<br>+ 01 moving image<br>+ process archive</p>
<p>2026 / Edition 001</p>
</div>
</div>
</section>
<!-- ==========================================
CTA (contribuição financeira)
=========================================== -->
<section id="contribuir">
<div class="cta">
<div>
<div class="eyebrow" style="color:#777">10 / Participate</div>
<h2>Ajude a construir o próximo som.</h2>
<p>Qualquer valor participa da construção. Valores maiores desbloqueiam experiências e partes diferentes da edição artística.</p>
<p>O objetivo é simples: transformar uma ferramenta de estudo em música, imagem e audiovisual.</p>
</div>
<div class="contribute-box">
<label>Sua contribuição</label>
<input id="amount" class="amount" type="number" min="1" placeholder="Ex.: 50" />
<a class="button" href="#" onclick="contribute(event)">CONTRIBUIR</a>
<div class="small">Este botão deve ser conectado ao seu PIX, Mercado Pago ou plataforma de financiamento.</div>
</div>
</div>
</section>
<!-- ==========================================
NOVA SEÇÃO: CAPTURA DE LEADS + WHATSAPP
=========================================== -->
<section id="captura">
<div class="section-grid capture-grid">
<!-- coluna esquerda: texto -->
<div>
<div class="eyebrow">Fale com a MOSCHIAT</div>
<h2 class="section-title">Quer participar ou tirar dúvidas?</h2>
<div class="text">
<p>Preencha o formulário ao lado e entraremos em contato pelo WhatsApp para alinhar sua contribuição, agendar uma sessão ou responder qualquer pergunta.</p>
<p>Você também pode nos chamar diretamente clicando no botão abaixo.</p>
</div>
<div class="whatsapp-direct">
<a href="https://wa.me/5531999999999?text=Olá!%20Vi%20a%20campanha%20MOSCHIAT%20e%20gostaria%20de%20saber%20mais." target="_blank">
<!-- Ícone WhatsApp (SVG simples) -->
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M12.032 21.965c-1.917 0-3.78-.516-5.383-1.49l-4.76 1.558 1.593-4.616A9.931 9.931 0 0 1 2.032 12c0-5.514 4.486-10 10-10s10 4.486 10 10-4.486 10-10 10zm0-18.957c-4.951 0-8.977 4.026-8.977 8.977 0 1.582.413 3.124 1.197 4.455l-.78 2.266 2.34-.764a8.942 8.942 0 0 0 4.22 1.066c4.951 0 8.977-4.026 8.977-8.977s-4.026-8.977-8.977-8.977zm5.18 11.714c-.287.82-1.423 1.5-2.314 1.714-.609.146-1.258.22-1.9.22-.564 0-1.096-.103-1.61-.308-.292-.117-.595-.246-.906-.406-.155-.08-.315-.173-.473-.28-.387-.262-.775-.562-1.14-.927-.362-.363-.664-.752-.927-1.14-.107-.158-.2-.318-.28-.473-.16-.31-.289-.614-.406-.906-.205-.514-.308-1.046-.308-1.61 0-.642.074-1.291.22-1.9.214-.891.894-2.027 1.714-2.314.116-.04.232-.06.347-.06.243 0 .48.114.619.31.12.17.238.354.344.544.176.316.362.658.538 1.014.13.263.252.535.333.786.108.334-.064.677-.33.944l-.555.555c-.106.106-.15.24-.107.373.09.284.244.586.44.904.2.324.436.656.694.914.258.258.59.494.914.694.318.196.62.35.904.44.133.043.267-.001.373-.107l.555-.555c.267-.267.61-.438.944-.33.251.081.523.203.786.333.356.176.698.362 1.014.538.19.106.374.224.544.344.196.139.31.376.31.619 0 .115-.02.231-.06.347z"/>
</svg>
Fale agora no WhatsApp
</a>
</div>
</div>
<!-- coluna direita: formulário -->
<div class="capture-form">
<form id="leadForm" onsubmit="return handleLeadSubmit(event)">
<label for="leadName">Seu nome</label>
<input type="text" id="leadName" placeholder="Ex.: Ana Silva" required />
<label for="leadEmail">E-mail</label>
<input type="email" id="leadEmail" placeholder="ana@email.com" required />
<label for="leadWhats">WhatsApp (com DDD)</label>
<input type="tel" id="leadWhats" placeholder="31 99999-9999" required />
<label for="leadInterest">Interesse principal</label>
<select id="leadInterest">
<option value="Quero contribuir financeiramente">Quero contribuir financeiramente</option>
<option value="Quero agendar uma SESSION">Quero agendar uma SESSION</option>
<option value="Quero saber mais sobre o projeto">Quero saber mais sobre o projeto</option>
<option value="Outro">Outro</option>
</select>
<button type="submit" class="button" id="leadSubmitBtn">Enviar e falar no WhatsApp</button>
<div id="leadFeedback" class="form-feedback"></div>
</form>
</div>
</div>
</section>
<!-- ==========================================
FOOTER
=========================================== -->
<footer>
<span>MOSCHIAT / STUDY 001</span>
<span>AUDIO / IMAGE / EXPERIMENT / 2026</span>
</footer>
</div>
<!-- ==========================================
SCRIPTS
=========================================== -->
<script>
/* ==========================================
CONFIGURAÇÕES GERAIS
========================================== */
// --- DATA FINAL DA CAMPANHA ---
const deadline = new Date("2026-08-11T04:01:29-03:00").getTime();
// --- VALOR ARRECADADO ---
let raised = 0;
const goal = 1500;
// --- NÚMERO DO WHATSAPP (com DDD e país) ---
const WHATSAPP_NUMBER = "5531999999999"; // substitua pelo seu número
// --- MENSAGEM INICIAL PARA O WHATSAPP ---
function getWhatsAppMessage(data) {
return (
`Olá! Sou ${data.nome} e tenho interesse em "${data.interesse}".%0A` +
`Meu e-mail: ${data.email}%0A` +
`Meu WhatsApp: ${data.whatsapp}%0A%0A` +
`Gostaria de saber mais sobre a campanha MOSCHIAT.`
);
}
/* ==========================================
FIREBASE — CONFIGURE AQUI!
========================================== */
// Substitua com seus dados do Firebase
const firebaseConfig = {
apiKey: "YOUR_API_KEY",
authDomain: "YOUR_PROJECT.firebaseapp.com",
projectId: "YOUR_PROJECT_ID",
storageBucket: "YOUR_PROJECT.appspot.com",
messagingSenderId: "YOUR_SENDER_ID",
appId: "YOUR_APP_ID"
};
// Inicializa Firebase
firebase.initializeApp(firebaseConfig);
const db = firebase.firestore();
/* ==========================================
PROGRESSO
========================================== */
function updateProgress() {
const percentage = Math.min((raised / goal) * 100, 100);
document.getElementById("progressBar").style.width = percentage + "%";
document.getElementById("raised").textContent =
"R$ " + raised.toLocaleString("pt-BR") + " arrecadados";
}
updateProgress();
/* ==========================================
TEMPORIZADOR
========================================== */
function updateTimer() {
const now = Date.now();
const diff = Math.max(0, deadline - now);
const totalSeconds = Math.floor(diff / 1000);
const days = Math.floor(totalSeconds / 86400);
const hours = Math.floor((totalSeconds % 86400) / 3600);
const minutes = Math.floor((totalSeconds % 3600) / 60);
const seconds = totalSeconds % 60;
document.getElementById("days").textContent = String(days).padStart(2, "0");
document.getElementById("hours").textContent = String(hours).padStart(2, "0");
document.getElementById("minutes").textContent = String(minutes).padStart(2, "0");
document.getElementById("seconds").textContent = String(seconds).padStart(2, "0");
if (diff <= 0) {
document.querySelector(".timer-title").textContent = "Campaign closed";
}
}
updateTimer();
setInterval(updateTimer, 1000);
/* ==========================================
CONTRIBUIÇÃO FINANCEIRA (CTA)
========================================== */
function contribute(event) {
event.preventDefault();
const amount = Number(document.getElementById("amount").value);
if (!amount || amount < 1) {
alert("Digite o valor que deseja contribuir.");
return;
}
alert(
"Contribuição selecionada: R$ " + amount.toLocaleString("pt-BR") +
"\n\nAgora conecte este botão ao seu sistema de pagamento."
);
// Aqui você pode redirecionar para um link de pagamento
// window.location.href = "SEU_LINK_DE_PAGAMENTO";
}
/* ==========================================
FORMULÁRIO DE CAPTURA + WHATSAPP
========================================== */
const leadForm = document.getElementById("leadForm");
const leadSubmitBtn = document.getElementById("leadSubmitBtn");
const leadFeedback = document.getElementById("leadFeedback");
async function handleLeadSubmit(e) {
e.preventDefault();
// coleta os dados
const nome = document.getElementById("leadName").value.trim();
const email = document.getElementById("leadEmail").value.trim();
const whatsapp = document.getElementById("leadWhats").value.trim();
const interesse = document.getElementById("leadInterest").value;
// validação simples
if (!nome || !email || !whatsapp) {
showFeedback("Por favor, preencha todos os campos.", true);
return;
}
// desabilita botão para evitar múltiplos envios
leadSubmitBtn.disabled = true;
leadSubmitBtn.textContent = "Enviando...";
showFeedback("", false);
try {
// 1. Salva no Firestore
await db.collection("leads").add({
nome: nome,
email: email,
whatsapp: whatsapp,
interesse: interesse,
dataCadastro: firebase.firestore.FieldValue.serverTimestamp()
});
// 2. Constrói a mensagem para o WhatsApp
const msg = getWhatsAppMessage({ nome, email, whatsapp, interesse });
const url = `https://wa.me/${WHATSAPP_NUMBER}?text=${msg}`;
// 3. Redireciona para o WhatsApp
window.open(url, "_blank");
showFeedback("Dados enviados! Você será redirecionado para o WhatsApp.", false);
leadForm.reset();
} catch (err) {
console.error("Erro ao salvar lead:", err);
showFeedback("Ocorreu um erro ao enviar. Tente novamente ou fale diretamente pelo WhatsApp.", true);
} finally {
leadSubmitBtn.disabled = false;
leadSubmitBtn.textContent = "Enviar e falar no WhatsApp";
}
return false;
}
function showFeedback(msg, isError) {
leadFeedback.textContent = msg;
leadFeedback.style.display = msg ? "block" : "none";
leadFeedback.className = "form-feedback" + (isError ? " error" : "");
}
// Expor a função para o atributo onsubmit do formulário
window.handleLeadSubmit = handleLeadSubmit;
</script>
