/* Proposta — Marketing e Social Media · Anebi Comunica */ const { useState, useEffect, useRef } = React; /* ---------- Icons (Lucide-style, stroke 1.5) ---------- */ const I = { Check: (p) => , Cross: (p) => , Plus: (p) => , Pin: (p) => , Calendar: (p) => , Clock: (p) => , Whatsapp: (p) => , ArrowRight: (p) => , Card: (p) => , Pix: (p) => , Loop: (p) => , Compass: (p) => , Instagram: (p) => , Linkedin: (p) => , Meta: (p) => , Google: (p) => , Play: (p) => , Pause: (p) => , Volume2: (p) => , VolumeX: (p) => , ChevronLeft: (p) => , ChevronRight: (p) => , Maximize: (p) => }; /* ---------- Data ---------- */ const OPTIONS = [ { id: 'gestao-distancia', tag: 'À DISTÂNCIA', name: 'Gestão de Instagram', nameEm: 'à distância', tagline: 'Para empresas e profissionais que precisam de estratégia e constância, independentemente da localização.', priceKey: 'price1', period: '/mês', includes: [ 'Gestão do Instagram', 'Planejamento estratégico trimestral', 'Entregas quinzenais de conteúdo', 'Sugestões de roteiros para vídeos', 'Edição dos vídeos enviados pelo cliente' ], btnText: 'Quero este plano' }, { id: 'gestao-presencial', tag: 'PRESENCIAL', featured: true, name: 'Gestão de Instagram', nameEm: 'presencial', tagline: 'Para quem busca uma produção mais completa, com acompanhamento presencial em Sinop, Vera, Santa Carmem ou Sorriso.', priceKey: 'price2', period: '/mês', includes: [ 'Gestão completa do Instagram', 'Planejamento estratégico trimestral', 'Entregas mensais de conteúdo', 'Planejamento de roteiros', 'Gravação e edição de vídeos', 'Análise mensal do perfil e do crescimento' ], addon: { title: 'Tráfego Pago (Opcional)', items: [ 'Gestão de anúncios: R$ 500/mês', 'Investimento recomendado em anúncios: a partir de R$ 500/mês' ] }, btnText: 'Quero este plano' }, { id: 'gestao-digital-completa', tag: 'MULTICANAL', name: 'Gestão Digital', nameEm: 'Completa', tagline: 'Para marcas que precisam organizar sua presença em diferentes canais digitais.', customPrice: 'Investimento sob consulta', includes: [ 'Instagram e Facebook', 'Perfil da Empresa no Google', 'Planejamento de conteúdo multicanal', 'Possibilidade de gestão para YouTube, TikTok e LinkedIn', 'Estratégia definida conforme as necessidades da marca' ], btnText: 'Solicitar proposta' }]; /* Detailed monthly breakdown for reference */ const BREAKDOWN = [ { item: 'Planejamento de conteúdo quinzenal', detail: 'Direcionamento de temas, linguagem e foco da quinzena', hours: '4h', cost: 'R$ 600' }, { item: 'Criação de conteúdo', detail: '2 carrosséis, 2 vídeos e 2 artes estáticas por quinzena', hours: '8h', cost: 'R$ 1.200' }, { item: 'Captação de conteúdo', detail: '1 captação por mês (foto e vídeo)', hours: '2h', cost: 'R$ 300' }, { item: 'Atendimento e gestão', detail: 'Gestão do perfil no dia a dia e acompanhamento', hours: '4h', cost: 'R$ 600' }, { item: 'Tráfego pago', detail: 'Campanhas no Meta (Instagram/Facebook) e Google', hours: '4h', cost: 'R$ 500' }, { item: 'Google Meu Negócio', detail: 'Otimização e atualização do perfil local', hours: '2h', cost: 'R$ 300' }]; const PORTFOLIO = [ { src: 'assets/portfolio/post-1.webp' }, { src: 'assets/portfolio/post-2.webp' }, { src: 'assets/portfolio/post-3.webp' }, { src: 'assets/portfolio/post-4.webp' }, { src: 'assets/portfolio/post-5.webp' }, { src: 'assets/portfolio/post-6.webp' }]; const REELS = [ { id: '1', title: 'Vídeo 1', src: 'assets/reels/optimized/1.mp4', poster: 'assets/reels/thumbs/1.webp' }, { id: '2', title: 'Vídeo 2', src: 'assets/reels/optimized/2.mp4', poster: 'assets/reels/thumbs/2.webp' }, { id: '3', title: 'Vídeo 3', src: 'assets/reels/optimized/3.mp4', poster: 'assets/reels/thumbs/3.webp' }, { id: '4', title: 'Vídeo 4', src: 'assets/reels/optimized/4.mp4', poster: 'assets/reels/thumbs/4.webp' }, { id: '5', title: 'Vídeo 5', src: 'assets/reels/optimized/5.mp4', poster: 'assets/reels/thumbs/5.webp' }, { id: '7', title: 'Vídeo 7', src: 'assets/reels/optimized/7.mp4', poster: 'assets/reels/thumbs/7.webp' }, { id: '8', title: 'Vídeo 8', src: 'assets/reels/optimized/8.mp4', poster: 'assets/reels/thumbs/8.webp' }, { id: '9', title: 'Vídeo 9', src: 'assets/reels/optimized/9.mp4', poster: 'assets/reels/thumbs/9.webp' }, { id: '10', title: 'Vídeo 10', src: 'assets/reels/optimized/10.mp4', poster: 'assets/reels/thumbs/10.webp' }, { id: '11', title: 'Vídeo 11', src: 'assets/reels/optimized/11.mp4', poster: 'assets/reels/thumbs/11.webp' } ]; const TESTIMONIALS = [ { quote: 'Passando para agradecer e enaltecer seu trabalho e dedicação de todos esses anos. Com toda certeza vc fez a diferença nas minhas postagens e stories. Sempre muito aberta e receptiva às minhas ideias e conteúdos. Obrigada pela ajuda e suporte desses quase 5 anos juntas.', name: 'Dra. Caroline Tavone', role: 'Médica', avatar: 'assets/depoimentos/caroline-tavone.jpg' }, { quote: 'O trabalho de vocês é consistente, criativo e de uma sensibilidade de enxergar as coisas, as frases, as mensagens... pegando a pessoa mais no coração do que no bolso. É um conteúdo que nos deixa à flor da pele. O aparecimento de clientes novos atraídos por essa divulgação no Instagram traz uma injeção de ânimo e um estímulo para a gente querer melhorar cada vez mais.', name: 'Dr. Edson Do Nascimento', role: 'Clínico Geral e Médico do Trabalho', avatar: 'assets/depoimentos/edson-do-nascimento.jpg' }, { quote: 'Eu fico de caraaaaaa em como vc consegue colocar um conteúdo tão bom sem ser fisioterapeuta.', name: 'Dra. Brenda Vaz', role: 'Fisioterapia Cardiopulmonar', avatar: 'assets/depoimentos/brenda-vaz.jpg' }, { quote: 'Gostaria de agradecer pelo trabalho e dar um feedback muito positivo. Estou muito tranquila com o Instagram estando na mão de vocês, porque vocês entenderam muito bem todas as nossas considerações. Está ficando muito bom e estamos muito felizes com o andamento do Instagram e das postagens.', name: 'Dra. Natali Folster', role: 'Fisioterapia Neurofuncional e Geriátrica', avatar: 'assets/depoimentos/natali-folster.jpg' }]; const FAQ = [ { q: 'Em quanto tempo vejo resultados?', a: 'Marketing é construção, não mágica. Os primeiros sinais, como consistência, organização do perfil e engajamento, aparecem nas primeiras semanas. Autoridade e crescimento estruturado se constroem com o tempo, mês a mês, sem exageros e sem promessas irreais.' }, { q: 'A verba de anúncios está incluída no valor?', a: 'Não. O valor da proposta cobre a estratégia, a criação e a gestão das campanhas. A verba investida diretamente nos anúncios (Meta e Google) é definida por você e vai direto para as plataformas, permitindo que você tenha controle total sobre quanto investir.' }, { q: 'Preciso aparecer nos vídeos e fotos?', a: 'O protagonismo da marca é seu, e a gente caminha junto. Direcionamos toda a captação, definindo o que gravar, como gravar e por quê, além de adaptar o formato ao seu conforto. Há marcas que aparecem muito e outras que trabalham bastidores e elementos visuais.' }, { q: 'Existe período mínimo de contrato?', a: 'Criamos um contrato e um planejamento pensados em 3 meses. Neste período avaliamos e cuidamos das redes e se nossa parceria for produtiva para ambas as partes, renovamos para igual período.' }, { q: 'Como funciona a captação de fotos e vídeos?', a: 'Para o plano de Gestão de Instagram presencial, o acompanhamento presencial e gravações acontecem em Sinop, Vera, Santa Carmem ou Sorriso com curadoria e direcionamento estratégico. Já na Gestão à distância, direcionamos os roteiros e editamos os vídeos enviados por você.' }, { q: 'Posso trocar de plano depois?', a: 'Sim, a rota é flexível. Começamos onde faz sentido para o seu momento e, conforme a marca cresce, podemos subir ou ajustar o escopo. Conversamos sobre isso sempre que necessário.' }]; /* ---------- Components ---------- */ const Navbar = ({ scrolled }) =>

; const Hero = ({ clientName, clientCompany, clientPhoto }) => { let name = clientName; let company = clientCompany; if (!company && name && name.includes(' - ')) { const parts = name.split(' - '); name = parts[0].trim(); company = parts.slice(1).join(' - ').trim(); } return (

{clientPhoto && (

{name && (

{name} {company && {company}}

)}

Proposta Exclusiva · 2026

Marketing e
social media

Posicionamento digital para quem valoriza autenticidade e autoridade.

); }; const About = () =>

Quem é a Anebi

A Anebi é um studio de branding, identidade visual e
posicionamento digital.

Ajudamos marcas a entenderem melhor quem são, o que comunicam e como querem ser percebidas.

Para nós, uma marca forte não precisa falar mais alto. Ela precisa falar com verdade. Por isso, criamos identidades e estratégias digitais que unem beleza, clareza e intenção, para que a marca não seja apenas vista, mas sentida e lembrada.

Porque, no fim, branding não é só sobre aparência. É sobre direção.

Atendimento Brasil e no Mundo 6 Anos de Experiência Auxiliamos + de 300 marcas Consultoria e Estratégia

; const OptionCard = ({ opt, tweaks, accent, onChoose }) => { const price = opt.priceKey ? tweaks[opt.priceKey] : null; return (

{opt.featured &&

Mais escolhido

}

{opt.tag && {opt.tag}}

{opt.name} {opt.nameEm}

{opt.category &&

{opt.category}

}

{opt.tagline}

{price ? <> R$ {price.toLocaleString('pt-BR')} {opt.period} : {opt.customPrice || 'Investimento sob consulta'}}

{(opt.hours || opt.cadence) && (

{opt.hours &&

{opt.hours}

} {opt.cadence &&

{opt.cadence}

}

)}

O que está incluso

{it}
{it}

{opt.addon && (

{opt.addon.title}

{it}

)}

); }; const Options = ({ tweaks, accent, onChoose }) =>

Planos mensais

Sua marca precisa apenas de publicações ou de um posicionamento completo?

Escolha a rota que faz mais sentido para o seu momento.

{OPTIONS.map((o) => )}

; const Breakdown = ({ tweaks, accent }) =>

Transparência

O que compõe a Rota Azul™.

Tudo formalizado antes de começar. Veja exatamente onde cada hora do seu mês é investida no plano mais completo.

O que entregamos Horas / mês Custo

{BREAKDOWN.map((b, i) =>

{b.item} {b.detail}

{b.hours}

{b.cost}

)}

Total trabalhado com vocêPosicionamento, conteúdo, gestão e tráfego

24h / mês

R$ {tweaks.price1.toLocaleString('pt-BR')}/mês

A verba investida em anúncios (Meta e Google) é definida por você e aplicada diretamente nas plataformas — não está inclusa na mensalidade.

; const Cycle = ({ accent }) =>

Como funciona

Criamos um contrato e um planejamento
pensados em 3 meses.

Neste período avaliamos e cuidamos das redes e se nossa parceria for produtiva para ambas as partes, renovamos para igual período.

; const ReelModal = ({ reels, activeIndex, onClose, onNavigate, accent }) => { const currentReel = reels[activeIndex]; const videoRef = useRef(null); const [isPlaying, setIsPlaying] = useState(true); const [isMuted, setIsMuted] = useState(false); const [progress, setProgress] = useState(0); useEffect(() => { const handleKeyDown = (e) => { if (e.key === 'Escape') onClose(); if (e.key === 'ArrowLeft' && activeIndex > 0) onNavigate(activeIndex - 1); if (e.key === 'ArrowRight' && activeIndex < reels.length - 1) onNavigate(activeIndex + 1); if (e.key === ' ') { e.preventDefault(); togglePlay(); } }; window.addEventListener('keydown', handleKeyDown); const originalOverflow = document.body.style.overflow; document.body.style.overflow = 'hidden'; return () => { window.removeEventListener('keydown', handleKeyDown); document.body.style.overflow = originalOverflow; }; }, [activeIndex, isPlaying]); useEffect(() => { setIsPlaying(true); setProgress(0); const video = videoRef.current; if (video) { video.currentTime = 0; video.play().catch(() => {}); } }, [activeIndex]); const togglePlay = () => { const video = videoRef.current; if (!video) return; if (isPlaying) { video.pause(); setIsPlaying(false); } else { video.play().catch(() => {}); setIsPlaying(true); } }; const handleTimeUpdate = () => { const video = videoRef.current; if (!video || !video.duration) return; setProgress((video.currentTime / video.duration) * 100); }; return (

e.stopPropagation()}> {activeIndex > 0 && ( )} {activeIndex < reels.length - 1 && ( )}

); }; const ReelCard = ({ item, index, isPlaying, onTogglePlay, isMuted, onToggleMute, onOpenModal }) => { const videoRef = useRef(null); useEffect(() => { const video = videoRef.current; if (!video) return; if (isPlaying) { const playPromise = video.play(); if (playPromise !== undefined) { playPromise.catch(() => {}); } } else { video.pause(); } }, [isPlaying]); useEffect(() => { const video = videoRef.current; if (!video) return; video.muted = isMuted; }, [isMuted]); return (

); }; const Portfolio = ({ accent }) => { const scrollRef = useRef(null); const reelsScrollRef = useRef(null); const [playingVideoId, setPlayingVideoId] = useState(null); const [isMuted, setIsMuted] = useState(true); const [modalIndex, setModalIndex] = useState(null); const items = [...PORTFOLIO, ...PORTFOLIO]; const scrollPortfolio = (direction) => { const el = scrollRef.current; if (!el) return; const item = el.querySelector('.portfolio-item'); const step = item ? item.offsetWidth + 16 : 320; el.scrollBy({ left: direction * step, behavior: 'smooth' }); }; const scrollReels = (direction) => { const el = reelsScrollRef.current; if (!el) return; const cardWidth = 280; el.scrollBy({ left: direction * cardWidth * 1.5, behavior: 'smooth' }); }; const togglePlay = (id) => { setPlayingVideoId((prev) => (prev === id ? null : id)); }; const handleOpenModal = (index) => { setPlayingVideoId(null); setModalIndex(index); }; return (

Portfólio

Alguns conteúdos feitos por nós.

{PORTFOLIO.map((p, i) => (

))}

{/* Subseção de Vídeos e Reels */}

Produção Audiovisual

Vídeos

Formatos dinâmicos e criativos para informar e posicionar sua marca
de acordo com o que o Instagram exige.

{REELS.map((reel, index) => ( togglePlay(reel.id)} isMuted={isMuted} onToggleMute={() => setIsMuted((m) => !m)} onOpenModal={handleOpenModal} /> ))}

{modalIndex !== null && ( setModalIndex(null)} onNavigate={(nextIdx) => setModalIndex(nextIdx)} accent={accent} /> )}

); }; const Testimonials = ({ accent }) =>

Depoimentos

O que nossos clientes contam.

{[...TESTIMONIALS, ...TESTIMONIALS].map((t, i) =>

"{t.quote}"

{t.avatar ? (

{ e.currentTarget.style.display = 'none'; }} /> ) : ( {t.name.charAt(0)} )}

{t.name} {t.role}

)}

; const FaqSection = ({ accent }) => { const [open, setOpen] = useState(0); return (

Perguntas frequentes

Tirando suas dúvidas.

{FAQ.map((item, i) =>

{item.a}

)}

); }; const Contact = ({ tweaks }) => { const clientText = tweaks.clientName ? ` (referente a ${tweaks.clientName})` : ''; const waMessage = encodeURIComponent(`Olá! Recebi a proposta de Marketing e Social Media${clientText} e gostaria de seguir adiante.`); const waUrl = `https://wa.me/${tweaks.whatsapp.replace(/\D/g, '')}?text=${waMessage}`; return (

Proposta válida por {tweaks.validity} dias a partir do recebimento

Vamos navegar juntos?

Nossa agenda funciona com um número limitado de marcas por mês, para cuidar de cada uma com a atenção que merece. Para garantir sua vaga, oriente a aprovação dentro do prazo da proposta.

Estamos ansiosos para começar com você!

Falar pelo WhatsApp Rever planos

); }; const FooterBlock = () => ; /* ---------- App ---------- */ const getQueryParam = (name, defaultValue) => { const urlParams = new URLSearchParams(window.location.search); return urlParams.get(name) || defaultValue; }; const getNumericQueryParam = (name, defaultValue) => { const urlParams = new URLSearchParams(window.location.search); const val = urlParams.get(name); if (!val) return defaultValue; const num = Number(val); return isNaN(num) ? defaultValue : num; }; const getAccentParam = () => { const urlParams = new URLSearchParams(window.location.search); let cor = urlParams.get("cor") || urlParams.get("accent"); if (!cor) return "#527EBC"; if (!cor.startsWith("#")) { if (/^[0-9A-Fa-f]{3}$|^[0-9A-Fa-f]{6}$/.test(cor)) { cor = "#" + cor; } } return cor; }; const TWEAK_DEFAULTS = { clientName: getQueryParam("cliente", getQueryParam("c", "Germano Wagner")), clientCompany: getQueryParam("empresa", "La Vitta - Soluções Auditivas e Reabilita"), clientPhoto: getQueryParam("foto", getQueryParam("f", "assets/cliente/La-Vitta.jpg")), price1: getNumericQueryParam("preco1", getNumericQueryParam("p1", 750)), price2: getNumericQueryParam("preco2", getNumericQueryParam("p2", 990)), price3: getNumericQueryParam("preco3", getNumericQueryParam("p3", 750)), validity: getNumericQueryParam("validade", getNumericQueryParam("v", 7)), whatsapp: getQueryParam("whatsapp", getQueryParam("w", "5566920018964")), accent: getAccentParam() }; const ACCENTS = ['#527EBC', '#3964A1', '#2E6A8E', '#5B5FC7']; const App = () => { const [tweaks] = useState(TWEAK_DEFAULTS); const accent = tweaks.accent; const [scrolled, setScrolled] = useState(false); useEffect(() => { const onScroll = () => setScrolled(window.scrollY > 60); window.addEventListener('scroll', onScroll); onScroll(); return () => window.removeEventListener('scroll', onScroll); }, []); useEffect(() => { const obs = new IntersectionObserver((entries) => { entries.forEach((e) => {if (e.isIntersecting) e.target.classList.add('visible');}); }, { threshold: 0.12 }); document.querySelectorAll('.reveal').forEach((el) => obs.observe(el)); return () => obs.disconnect(); }, []); useEffect(() => { document.documentElement.style.setProperty('--color-sage', accent); }, [accent]); const handleChoose = () => { const el = document.getElementById('contato'); if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' }); }; return ( <> ); }; ReactDOM.createRoot(document.getElementById('root')).render();

Marketing e social media

A Anebi é um studio de branding, identidade visual e posicionamento digital.