` ou `<meta>` — isso é gerenciado em campos separados da página. Você é responsável por: ### Hierarquia de headings ```html  <h1>Sua propriedade merece lotar.</h1>  <h2>Como trabalhamos</h2>  <h3>Análise de Viabilidade</h3> ``` **Nunca pule níveis** (não vai de H1 direto para H4). ### Textos semânticos ```html  <div class="header"><div class="title">Título</div></div>  <header><h2>Título</h2></header> ``` Use: `<header>`, `<main>`, `<section>`, `<article>`, `<aside>`, `<footer>`, `<nav>`. ### Texto rico em conteúdo Para SEO, blocos textuais devem ter **conteúdo real** com palavras-chave naturais. Nada de Lorem Ipsum em produção. Palavras-chave principais do Host Studio: - "análise airbnb" - "rentabilidade aluguel temporada" - "fotografia airbnb" - "anúncio airbnb" - "consultoria airbnb brasil" - "análise rentabilidade airbnb" - "foto staging temporada" - "consultoria pricelabs" - "PriceLabs" Use **naturalmente** em H2, parágrafos e alt de imagens. Sem stuffing. --- ## 9. PADRÕES VISUAIS COMUNS Esses são padrões que o Host Studio usa repetidamente — bom copiar e adaptar: ### Container padrão ```html <section class="hs-block hs-block-meu-bloco"> <style> .hs-block-meu-bloco { background: var(--hs-color-bg-light); padding: var(--hs-section-pad) 24px; } .hs-block-meu-bloco .container { max-width: var(--hs-max-width); margin: 0 auto; } </style> <div class="container">  </div> </section> ``` ### Hero com vídeo de fundo ```html <section class="hs-block hs-block-hero"> <style> .hs-block-hero { position: relative; min-height: 100vh; display: flex; align-items: center; overflow: hidden; color: #fafaf8; } .hs-block-hero .bg-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; } .hs-block-hero .overlay { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(0,0,0,.6), rgba(0,0,0,.3)); z-index: 1; } .hs-block-hero .content { position: relative; z-index: 2; max-width: 1280px; margin: 0 auto; padding: 0 24px; } .hs-block-hero h1 { font-family: var(--hs-font-serif); font-weight: 300; font-size: clamp(40px, 7vw, 84px); line-height: 1.05; margin-bottom: 24px; } .hs-block-hero .cta { display: inline-flex; align-items: center; gap: 8px; padding: 14px 28px; background: var(--hs-color-accent); color: #fff; text-decoration: none; font-size: 13px; letter-spacing: .04em; transition: .2s; } .hs-block-hero .cta:hover { background: #7a5e3f; transform: translateY(-1px); } </style> <video class="bg-video" autoplay muted loop playsinline poster="{{galeria.hero-poster}}"> <source src="{{galeria.hero-video}}" type="video/mp4"> </video> <div class="overlay"></div> <div class="content"> <h1>Sua propriedade merece lotar.</h1> <a href="/contato" class="cta">Começar agora →</a> </div> </section> ``` ### Grid de 3 colunas (manifesto / serviços) ```html <section class="hs-block hs-block-3cols"> <style> .hs-block-3cols { padding: 80px 24px; background: #fafaf8; } .hs-block-3cols .grid { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; } .hs-block-3cols .col h3 { font-family: var(--hs-font-serif); font-size: 28px; font-weight: 300; margin-bottom: 16px; } .hs-block-3cols .col p { font-size: 15px; line-height: 1.7; color: #555; } @media (max-width: 768px) { .hs-block-3cols .grid { grid-template-columns: 1fr; gap: 32px; } } </style> <div class="grid"> <div class="col"> <h3>Análise de Viabilidade</h3> <p>Relatório completo de posicionamento...</p> </div>  </div> </section> ``` ### Antes e depois com slider (Existe biblioteca pronta, pode usar: img-comparison-slider via CDN) ```html <section class="hs-block hs-block-antes-depois"> <script src="https://cdn.jsdelivr.net/npm/img-comparison-slider@8/dist/index.js" defer></script> <style> .hs-block-antes-depois { padding: 80px 24px; } .hs-block-antes-depois img-comparison-slider { max-width: 1024px; margin: 0 auto; display: block; } </style> <img-comparison-slider> <img slot="first" src="{{galeria.antes-piscina}}" alt="Foto antes do staging"> <img slot="second" src="{{galeria.depois-piscina}}" alt="Foto depois do staging"> </img-comparison-slider> </section> ``` ### CTA final ```html <section class="hs-block hs-block-cta-final"> <style> .hs-block-cta-final { padding: 100px 24px; background: var(--hs-color-bg); color: #fafaf8; text-align: center; } .hs-block-cta-final h2 { font-family: var(--hs-font-serif); font-size: clamp(36px, 5vw, 56px); font-weight: 300; max-width: 720px; margin: 0 auto 32px; } .hs-block-cta-final .ctas { display: inline-flex; gap: 12px; flex-wrap: wrap; justify-content: center; } .hs-block-cta-final a { padding: 14px 28px; text-decoration: none; font-size: 13px; letter-spacing: .04em; transition: .2s; } .hs-block-cta-final .primary { background: var(--hs-color-accent); color: #fff; } .hs-block-cta-final .secondary { border: 1px solid rgba(255,255,255,.3); color: #fafaf8; } </style> <h2>Pronto para começar?</h2> <div class="ctas"> <a href="/contato" class="primary">Fazer um orçamento</a> <a href="https://wa.me/{{empresa.whatsapp}}" class="secondary" target="_blank">WhatsApp</a> </div> </section> ``` --- ## 10. ANIMAÇÕES RICAS (referência Apple) Sites tipo Apple usam principalmente: ### Scroll-triggered animations ```html <section class="hs-block hs-block-anim"> <script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/ScrollTrigger.min.js"></script> <style> .hs-block-anim .item { opacity: 0; transform: translateY(40px); } </style> <div class="item">Conteúdo 1</div> <div class="item">Conteúdo 2</div> <script> (function() { gsap.registerPlugin(ScrollTrigger); gsap.utils.toArray('.hs-block-anim .item').forEach(el => { gsap.to(el, { opacity: 1, y: 0, duration: 1, scrollTrigger: { trigger: el, start: 'top 80%' } }); }); })(); </script> </section> ``` ### Pinning + scrubbing (efeito Apple) Bloco fica fixo na tela enquanto o usuário scrolla, e um vídeo/animação avança com o scroll: ```javascript gsap.registerPlugin(ScrollTrigger); ScrollTrigger.create({ trigger: '.hs-block-pinned', start: 'top top', end: '+=2000', pin: true, scrub: 1, onUpdate: self => { video.currentTime = self.progress * video.duration; } }); ``` ### Parallax ```css .hs-block-parallax { background-image: url('{{galeria.bg-mountain}}'); background-attachment: fixed; background-size: cover; min-height: 60vh; } ``` --- ## 11. ACESSIBILIDADE (importante para SEO) ```html  <img src="..." alt="Descrição">  <a href="/contato">Falar com a equipe</a>     <label for="email">Seu email</label> <input type="email" id="email" name="email" required>  <button aria-label="Fechar menu" onclick="...">×</button> ``` --- ## 12. CHECKLIST ANTES DE ENTREGAR UM BLOCO Quando você (IA) gerar um bloco, valide: ``` [ ] Tem comentário  [ ] Tag externa <section class="hs-block hs-block-NOME-UNICO"> [ ] CSS prefixado com .hs-block-NOME-UNICO (não vaza) [ ] JavaScript em IIFE (não polui global) [ ] Imagens via {{galeria.nome}} (não URLs hardcoded) [ ] Alt em todas as imagens [ ] Mobile responsivo testado (até 360px de largura) [ ] Headings em ordem (H1 → H2 → H3, sem pular) [ ] Animações usam transform/opacity (não top/left) [ ] Vídeos com poster, muted, playsinline [ ] Links externos com rel="noopener" e target="_blank" quando aplicável [ ] Sem console.log() esquecidos [ ] Sem eval(), document.write(), innerHTML com input externo ``` --- ## 13. EXEMPLO COMPLETO DE PROMPT Quando pedir um bloco novo, use este formato: ``` Crie um bloco "Depoimentos" para a página Home. Contexto: - 3 depoimentos de clientes - Cada um com: nome, foto, propriedade, citação - Layout em carrossel mobile, grid 3 colunas desktop - Cores: fundo claro, accent caramelo em destaques Conteúdo: 1. Maria Silva · Chácara Atibaia · "Aumentei a ocupação em 40% no primeiro trimestre." 2. João Santos · Casa Ibiúna · "O relatório me mostrou exatamente onde eu estava errando." 3. Ana Costa · Sítio Cotia · "Trabalho profissional do início ao fim." Imagens já cadastradas na galeria: - depoimento-maria - depoimento-joao - depoimento-ana Seguir as Instruções de Criação de Páginas anexadas. ``` A IA deve responder com **apenas o bloco completo** seguindo o template padrão. --- ## 14. O QUE FAZER COM O HTML GERADO 1. Copia o HTML inteiro do bloco 2. Vai em **Admin → Configurações → Editor do Site → Páginas** 3. Seleciona a página (ou cria nova) 4. Clica em **+ Adicionar bloco** 5. Cola o HTML 6. Define nome interno do bloco e ordem 7. Salva como **rascunho** 8. Clica em **Pré-visualizar** 9. Se estiver bom, clica em **Publicar** --- ## 15. CHECKLIST DE SEO QUANDO CRIAR PÁGINA NOVA Além dos blocos, preencher na aba SEO da página: ``` [ ] Title (50–60 caracteres, com palavra-chave principal) [ ] Description (150–160 caracteres, com call-to-action) [ ] OG Image (1200×630px, em alta qualidade) [ ] Canonical URL (geralmente a própria URL) [ ] Schema.org type (LocalBusiness, Service, Article, FAQPage) [ ] Slug amigável (/analise-airbnb-sao-roque, não /page-42) [ ] H1 único na página presente em algum bloco [ ] Pré-visualização de compartilhamento OK no preview ``` --- ## RESUMO ULTRA RÁPIDO Quando uma IA for criar bloco/página para o Host Studio: 1. **Sempre** prefixar CSS com `.hs-block-NOME-UNICO` 2. **Sempre** usar `{{galeria.X}}` para imagens 3. **Sempre** usar IIFE em JavaScript 4. **Nunca** tocar em `<head>`, `<title>`, `<meta>`, trackers 5. **Nunca** inventar variáveis fora da lista permitida 6. **Sempre** mobile responsivo 7. **Sempre** alt em imagens, headings em ordem 8. Inspiração visual: Apple, Kinfolk, Architectural Digest Boa criação.

# Host Studio · Instruções para Criação de Páginas e Blocos > **Este documento é o contrato entre você (humano) e qualquer IA (Claude, Cursor, GPT) que vai gerar HTML para o site público.** > Compartilhe este arquivo inteiro com a IA antes de pedir qualquer página ou bloco novo. --- ## 1. CONTEXTO RÁPIDO Host Studio é uma marca operada por dois sócios — **Thales Stravino** (administradora *Reserva Star*) e **Regina** (administradora *Ellas Destino Temporada*) — que vende serviços para proprietários de aluguel por temporada. Análise/Anúncio/Consultoria são online (Brasil); Foto Staging é presencial (São Paulo e entorno). O site público transmite **autoridade técnica + cuidado editorial** — referências visuais: Apple, Kinfolk, Architectural Digest. O site é **modular por blocos**. Cada página é uma sequência de blocos HTML independentes salvos no Supabase. Você (IA) gera **um bloco por vez** ou **uma página inteira como sequência de blocos**, nunca código que afete o sistema admin ou layout global. --- ## 2. O QUE VOCÊ PODE ALTERAR ### ✅ Permitido Dentro do HTML de **um bloco**, você tem total liberdade para: - Estrutura HTML (`

`, `

`, etc) - Estilos via `

``` **Regras:** - `NOME-UNICO` deve ser **descritivo e único** (ex: `hero-home`, `manifesto-3-colunas`, `cta-orcamento`) - A classe `.hs-block` é obrigatória — o sistema reconhece blocos por ela - Comentário inicial `` é obrigatório para versionamento --- ## 4. VARIÁVEIS DISPONÍVEIS Use placeholders no formato `{{categoria.chave}}`. O sistema substitui antes de renderizar. ### Empresa (sempre disponível) ``` {{empresa.nome}} ex: "Host Studio" {{empresa.razao_social}} ex: "Reserva Star Rental Homes LTDA" {{empresa.cidade}} ex: "São Paulo, SP" {{empresa.email}} ex: "contato@hoststudio.com.br" {{empresa.telefone}} ex: "(11) 99999-9999" {{empresa.whatsapp}} ex: "5511999999999" {{empresa.site}} ex: "hoststudio.com.br" {{empresa.instagram}} ex: "@hoststudio" ``` ### Galeria (você precisa cadastrar a imagem antes) ``` {{galeria.NOME_DA_IMAGEM}} ex: {{galeria.hero-piscina-sunset}} ``` Se a imagem não existir, o sistema mostra placeholder cinza e avisa no console. ### Página atual ``` {{pagina.slug}} ex: "home" {{pagina.titulo}} ex: "Home" {{pagina.url_completa}} ex: "https://hoststudio.com.br/" ``` ### Data e hora ``` {{data.hoje}} ex: "16 de maio de 2026" {{data.ano}} ex: "2026" {{data.mes_extenso}} ex: "maio" ``` **Nunca use placeholders inventados.** Se precisa de variável nova, peça pra adicionar antes. --- ## 5. CSS — ESCOPO E PADRÕES ### Escopo obrigatório Todo CSS deve estar prefixado com a classe do bloco para não vazar: ```css /* ❌ ERRADO — afeta o site inteiro */ h2 { font-size: 48px; } .titulo { color: red; } /* ✅ CERTO — afeta só este bloco */ .hs-block-meu-bloco h2 { font-size: 48px; } .hs-block-meu-bloco .titulo { color: red; } ``` ### Design system (use, mas não obrigatório) Variáveis CSS globais já disponíveis: ```css :root { --hs-color-bg: #0B0A08; /* fundo escuro */ --hs-color-bg-light: #fafaf8; /* off-white */ --hs-color-text: #1a1a18; /* texto principal */ --hs-color-accent: #9B7B52; /* caramelo */ --hs-color-success: #1D9E75; /* verde */ --hs-color-error: #D85A30; /* vermelho */ --hs-color-warning: #BA7517; /* laranja */ --hs-color-divider: #ebe8e0; /* linha clara */ --hs-font-serif: 'Cormorant Garamond', Georgia, serif; --hs-font-sans: 'DM Sans', system-ui, sans-serif; --hs-max-width: 1280px; /* container máximo */ --hs-section-pad: 80px; /* padding vertical de seção */ } ``` Use quando quiser consistência. Sobrescreva quando o bloco pedir. ### Tipografia padrão ```css h1, h2, h3 { font-family: var(--hs-font-serif); font-weight: 300; line-height: 1.15; } p, span, a { font-family: var(--hs-font-sans); } ``` ### Responsividade obrigatória ```css .hs-block-meu-bloco { padding: 80px 24px; } @media (max-width: 768px) { .hs-block-meu-bloco { padding: 48px 20px; } .hs-block-meu-bloco h1 { font-size: 36px; } } ``` **Mobile-first** ou **desktop com breakpoint** — qualquer um, mas mobile precisa funcionar bem. --- ## 6. JAVASCRIPT — REGRAS ### Escopo isolado com IIFE ```javascript (function() { // todo código aqui dentro const block = document.querySelector('.hs-block-meu-bloco'); // ... })(); ``` Sem IIFE, variáveis poluem global e podem conflitar com outros blocos. ### Bibliotecas permitidas via CDN Apenas de domínios confiáveis: ``` ✅ cdn.jsdelivr.net ✅ unpkg.com ✅ cdnjs.cloudflare.com ✅ esm.sh ✅ fonts.googleapis.com (fonts) ✅ fonts.gstatic.com (fonts) ``` **Bibliotecas recomendadas para animação rica:** ```html ``` ### Performance - Animações: use `transform` e `opacity` (não `top`/`left`/`width`/`height`) - Scripts pesados: carregue com `defer` ou dentro de `IntersectionObserver` - Imagens decorativas: `loading="lazy"` (a galeria já injeta isso automaticamente) - Vídeos de fundo: `