Spaces:
Running
Running
File size: 22,798 Bytes
a41e5f3 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
construa o melhor site, na pegada street, jovem e etc, segue esse html como exemplo <!doctype html> <html lang="pt-br"> <head> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width, initial-scale=1"/> <title>ExpoMix 2025 · Feira Multissetorial</title> <meta name="description" content="ExpoMix 2025 · Moda, design e lifestyle. Networking, lançamentos e oportunidades de negócio."/> <style> :root{ --color-primary:#AD9570; --color-primary-2:#DFC586; --color-secondary:#5F889E; --color-text:#3C4851; --color-title:#1F1915; --color-bg:#FFFFFF; --color-surface:#D5E3E0; --color-accent-1:#9FC0C3; --color-accent-2:#CBCCBD; --radius:16px; --maxw:1200px; } *{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial;color:var(--color-text);background:var(--color-bg);line-height:1.6} a{color:inherit;text-decoration:none} .container{max-width:var(--maxw);margin:0 auto;padding:0 20px} .btn{display:inline-block;padding:12px 20px;border-radius:999px;background:var(--color-primary);color:#fff;font-weight:600;border:1px solid transparent;transition:all .2s ease} .btn:hover{background:var(--color-primary-2);transform:translateY(-1px)} .btn-outline{background:transparent;color:var(--color-primary);border-color:var(--color-primary)} .btn-outline:hover{background:var(--color-primary);color:#fff} .nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.8);backdrop-filter:saturate(150%) blur(8px);border-bottom:1px solid var(--color-accent-2)} .nav-inner{display:flex;align-items:center;justify-content:space-between;height:64px} .nav a{margin:0 10px;font-weight:600} .hero{position:relative;min-height:70vh;display:flex;align-items:center;color:#fff} .hero h1{font-size:clamp(28px,5vw,52px);margin:0 0 10px;color:#fff} .hero p{font-size:clamp(16px,2.2vw,20px);max-width:820px;margin:0 0 24px} .section{padding:72px 0} .section.alt{background:var(--color-surface)} .grid{display:grid;gap:20px} .grid.cols-3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))} .card{background:#fff;border:1px solid var(--color-accent-2);border-radius:var(--radius);padding:20px;box-shadow:0 6px 18px rgba(0,0,0,.04)} .h2{color:var(--color-title);font-size:clamp(22px,3.3vw,36px);margin:0 0 12px} .lead{font-size:18px;color:#2f3b44;max-width:900px} .small{opacity:.9;font-size:14px} .imgbanner{border-radius:var(--radius);border:1px solid var(--color-accent-2);overflow:hidden} .imgbanner img{width:100%;height:auto;display:block} table{width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--color-accent-2);border-radius:var(--radius);overflow:hidden} th,td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--color-accent-2);background:#fff} th{background:#f5f7f7;font-weight:700} tbody tr:last-child td{border-bottom:none} .badge{display:inline-block;padding:6px 10px;border-radius:999px;background:var(--color-accent-1);color:#0b1d22;font-weight:600} </style> </head> <body> <!-- NAV --> <nav class="nav"> <div class="container nav-inner"> <div style="display:flex;align-items:center;gap:10px"> <span class="badge">ExpoMix</span> <strong>Feira Multissetorial 2025</strong> </div> <div> <a href="#sobre">Sobre</a> <a href="#objetivos">Objetivos</a> <a href="#estrutura">Estrutura</a> <a href="#parcerias">Parcerias</a> <a href="#contato" class="btn" style="margin-left:10px">Contato</a> </div> </div> </nav> <!-- HERO --> <header class="hero" style="background-image:linear-gradient(to bottom, rgba(0,0,0,.45), rgba(0,0,0,.35)), url('data:image/png;base64,{{BASE64_PAGE1_IMG1}}'); background-position:center; background-size:cover;"> <div class="container"> <h1>ExpoMix 2025 · Feira Multissetorial</h1> <p class="lead">Feira voltada ao universo da moda, design e lifestyle. Lançamentos, networking e oportunidades de negócios para marcas, lojistas, influenciadores e consumidores.</p> <div style="display:flex;gap:12px;flex-wrap:wrap"> <a href="#contato" class="btn">Quero Expor</a> <a href="#programacao" class="btn btn-outline">Quero Participar</a> </div> </div> </header> <!-- SOBRE --> <section id="sobre" class="section"> <div class="container"> <h2 class="h2">Sobre o Evento</h2> <p class="lead">Feira multissetorial que reúne segmentos de <strong>acessórios</strong>, <strong>vestuário</strong>, <strong>cama, mesa e banho</strong>, <strong>joias</strong> e <strong>artigos de decoração</strong>. Promove oportunidades de negócio, lançamentos e conexões reais entre marcas, lojistas e público final.</p> <div class="grid cols-3" style="margin-top:20px"> <div class="card"><strong>Networking</strong><br/>Rodadas de negócios e relacionamento com o ecossistema regional e nacional.</div> <div class="card"><strong>Lançamentos</strong><br/>Espaço ideal para coleções e produtos exclusivos.</div> <div class="card"><strong>Visibilidade</strong><br/>Ações promocionais, mídia e presença digital dos expositores.</div> </div> <div class="imgbanner" style="margin-top:24px"> <img src="data:image/png;base64,{{BASE64_PAGE1_IMG2}}" alt="Estandes e visitantes do evento"/> </div> </div> </section> <!-- OBJETIVOS --> <section id="objetivos" class="section alt"> <div class="container"> <h2 class="h2">Objetivos</h2> <div class="grid cols-3"> <div class="card"><strong>Players do Mercado</strong><p>Reunir marcas e profissionais de moda e decoração.</p></div> <div class="card"><strong>Comércio em Movimento</strong><p>Estimular vendas diretas ao consumidor e novos canais B2B.</p></div> <div class="card"><strong>Parcerias & Influência</strong><p>Fomentar parcerias entre lojistas, marcas e influenciadores.</p></div> <div class="card"><strong>Visibilidade</strong><p>Gerar presença de marca com campanhas on/offline.</p></div> <div class="card"><strong>Experiências</strong><p>Desfiles, workshops e trilhas de conteúdo sobre tendências.</p></div> <div class="card"><strong>Infra Completa</strong><p>Recepção, segurança, limpeza e gestão dedicada de expositores.</p></div> </div> </div> </section> <!-- JUSTIFICATIVA --> <section id="justificativa" class="section"> <div class="container"> <h2 class="h2">Por que agora?</h2> <p class="lead">O Centro-Oeste é um polo econômico dinâmico em moda, joias e decoração. A ExpoMix 2025 responde à demanda por um espaço qualificado para exposição, venda e troca de experiências — conectando marcas regionais e nacionais a um público qualificado.</p> <div class="imgbanner" style="margin-top:24px"> <img src="data:image/png;base64,{{BASE64_PAGE2_IMG1}}" alt="Ambiente do evento com expositores"/> </div> </div> </section> <!-- ESTRUTURA --> <section id="estrutura" class="section alt"> <div class="container"> <h2 class="h2">Estrutura</h2> <p class="small">Estande básico 3x3m, carpete, testeira com nome em letra padrão e divisórias. Estandes personalizados sob consulta.</p> <table style="margin-top:12px"> <thead><tr><th>Tipo</th><th>Descrição</th></tr></thead> <tbody> <tr><td>Estande Padrão</td><td>3x3m, carpete, testeira padronizada, divisórias.</td></tr> <tr><td>Personalizado</td><td>Projeto especial, metragem maior e ambientação diferenciada.</td></tr> <tr><td>Condições</td><td>Promocionais para fechamentos antecipados com consultor comercial.</td></tr> </tbody> </table> <div class="imgbanner" style="margin-top:24px"> <img src="data:image/png;base64,{{BASE64_PAGE2_IMG2}}" alt="Mapa/estrutura da feira"/> </div> </div> </section> <!-- PLANO DE AÇÃO --> <section id="programacao" class="section"> <div class="container"> <h2 class="h2">Plano de Ação</h2> <div class="grid cols-3"> <div class="card"><strong>Captação</strong><br/>Prospecção ativa e curadoria de marcas alinhadas.</div> <div class="card"><strong>Infra</strong><br/>Montagem de estandes, convivência, praça de alimentação, kids e lounges.</div> <div class="card"><strong>Comunicação</strong><br/>Campanhas on/off, influenciadores, imprensa e mídias locais.</div> <div class="card"><strong>Programação</strong><br/>Palestras, desfiles, workshops e experiências sensoriais.</div> <div class="card"><strong>Operacional</strong><br/>Recepção, segurança, limpeza, apoio técnico e gestão.</div> </div> <div class="imgbanner" style="margin-top:24px"> <img src="data:image/png;base64,{{BASE64_PAGE3_IMG1}}" alt="Ações e experiências"/> </div> </div> </section> <!-- PARCERIAS --> <section id="parcerias" class="section alt"> <div class="container"> <h2 class="h2">Parcerias & Contrapartidas</h2> <div class="grid cols-3"> <div class="card"><strong>Expositores</strong><br/>Divulgação nas redes, catálogo digital, rodadas e selo oficial.</div> <div class="card"><strong>Prefeitura</strong><br/>Apoio institucional, logística e ações sociais convergentes.</div> <div class="card"><strong>Economia Local</strong><br/>Geração de empregos diretos e indiretos e fortalecimento do setor.</div> </div> <div class="imgbanner" style="margin-top:24px"> <img src="data:image/png;base64,{{BASE64_PAGE3_IMG2}}" alt="Parcerias institucionais"/> </div> </div> </section> <!-- CONTATO --> <section id="contato" class="section"> <div class="container"> <h2 class="h2">Contato</h2> <p>Expositores e parceiros:</p> <p><strong>Telefone:</strong> (61) 9 99307-3003 · (61) 9 99818-2140</p> <p><strong>E-mail:</strong> <a href="mailto:contato@groupbuzz.com.br">contato@groupbuzz.com.br</a></p> <p><strong>Site:</strong> <a href="https://www.groupbuzz.com.br" target="_blank" rel="noopener">www.groupbuzz.com.br</a></p> <form style="margin-top:16px" onsubmit="event.preventDefault(); alert('Enviado! Em produção, integrar com backend/CRM.');"> <div class="grid" style="grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px"> <input required placeholder="Nome" style="padding:12px;border-radius:10px;border:1px solid var(--color-accent-2)"/> <input required type="email" placeholder="E-mail" style="padding:12px;border-radius:10px;border:1px solid var(--color-accent-2)"/> <input placeholder="Telefone/WhatsApp" style="padding:12px;border-radius:10px;border:1px solid var(--color-accent-2)"/> <input placeholder="Empresa" style="padding:12px;border-radius:10px;border:1px solid var(--color-accent-2)"/> </div> <textarea placeholder="Mensagem" rows="5" style="margin-top:12px;width:100%;padding:12px;border-radius:10px;border:1px solid var(--color-accent-2)"></textarea> <div style="margin-top:12px"><button class="btn" type="submit">Enviar</button></div> </form> </div> </section> <footer class="footer"> <div class="container"> <div style="display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px"> <div>© 2025 ExpoMix · Feira Multissetorial</div> <div><a href="#topo">Voltar ao topo</a></div> </div> </div> </footer> </body> </html>
Crie um site street, jovem e urbano para o evento ExpoMix 2025 – Feira Multissetorial. A direção de arte deve replicar a estética da imagem enviada (fundo rosa com textura/grunge, tipografia editorial laranja e detalhes manuscritos). Use exatamente estas imagens que forneci: banner-principal-site (1).jpg (hero principal, menina pulando com intervenções “handwritten”) 1.png, 2.png, 3.png (apoio nas dobras internas) Identidade Visual (copie a pegada da arte) Cores: Laranja vivo para títulos e CTA (#ff5a1f ou próximo) Rosa/lilás com textura manchada no fundo (#f2cfe6 ~ #f6e6f2) Azul/turquesa suave para datas/detalhes (#0c79a8 ~ #108db6) Texturas: aplique papel/grunge no fundo do site (leve, sem poluir). Gestos street: adicione rabiscos/linha à mão (asteriscos, setas, palavras curtas) em laranja, como na arte do banner. Tipografia: Títulos: serifada editorial (estilo high-fashion; tracking levemente reduzido) Textos: sans-serif limpa (alta legibilidade) Botões/CTAs: cantos levemente arredondados, sólido laranja, hover com leve zoom. Estrutura (mesmas dobras do PDF) Dobra 1 — Hero (full-bleed, street) Background: banner-principal-site (1).jpg Título grande: ExpoMix 2025 (laranja) Subtítulo: Feira Multissetorial (à direita, como na arte, se possível) CTA: Quero participar → https://wa.me/55619993073003 Adicione elementos “handwritten” (ex.: moda, decor, casa, agro, pet, shop) em volta da figura, discretos, como overlay SVG/PNG. Dobra 2 — Sobre o Evento Fundo: textura rosa. Coluna esquerda: título Sobre o evento + parágrafo curto explicando que é uma feira multissetorial de moda, design e lifestyle, com expositores de acessórios, vestuário, cama/mesa/banho, joias e decoração; foco em oportunidades de negócio e networking. Coluna direita: imagem 1.png. Inclua mini-bullets com ícones (shopping bag/estrela). Dobra 3 — Objetivos Layout 2 colunas: texto + 2.png. Bullets (com ícone check): reunir players regionais, estimular vendas diretas, lançamentos/novidades, networking e visibilidade de marcas. Dobra 4 — Justificativa Fundo branco suave. Texto destacando a força econômica do Centro-Oeste e a necessidade de um espaço qualificado para exposição, vendas e troca de experiências. Imagem lateral 3.png. Dobra 5 — Público-Alvo Cards em grid (4 itens): Consumidores de moda/decor/lifestyle Lojistas e marcas regionais/nacionais Influenciadores Empreendedores/investidores Dobra 6 — Estrutura Grid com ícones grandes: Estande básico 3x3m Estandes personalizados/maiores Áreas de convivência/networking Praça de alimentação e espaço kids Dobra 7 — Plano de Ação Fundo rosa texturizado, visual bem gráfico (use ícones + setas). Tópicos: Captação de expositores e curadoria de marcas Infraestrutura (montagem de estandes, lounges, etc.) Campanhas on/offline e influenciadores Programação paralela (palestras, desfiles, workshops, experiências sensoriais) Operacional (recepção, segurança, limpeza, apoio técnico, gestão de expositores) Dobra 8 — Contrapartida aos Expositores Lista com badges: estande montado, divulgação nas redes e site, catálogo digital, rodadas de negócios, ações promocionais, certificado + selo de expositor oficial. Dobra 9 — Parceria Municipal Bloco enxuto: apoio institucional (uso de marca da prefeitura, local adequado, orientações de liberações, apoio logístico, ações sociais). Dobra 10 — Contato Fundo laranja; texto branco, ícones grandes: (61) 9 99307-3003 (61) 9 99818-2140 contato@groupbuzz.com.br www.groupbuzz.com.br CTA final: Quero expor na ExpoMix → https://wa.me/55619993073003 Botão WhatsApp flutuante (fixo). Requisitos de UX/UI Totalmente responsivo (mobile-first; hero com recorte seguro para 375–430px). Animações suaves: fade-in nos títulos, parallax leve no hero. Espaçamento generoso, contraste alto, acessibilidade (aria-labels em CTAs). Sem emojis. Carregar imagens em webp quando possível, mantendo as originais como fallback. SEO/Metas Title: ExpoMix 2025 – Feira Multissetorial de Moda, Decor e Lifestyle Description: Evento multissetorial com expositores, lançamentos, networking e experiências. OG tags usando o hero; favicon simples (letra “E” em laranja sobre fundo rosa).
na home principal coloque "Moda • Decor • Lifestyle ExpoMix 2025 Feira multissetorial voltada ao universo da moda, design e lifestyle. Lançamentos, networking e oportunidades de negócios para marcas, lojistas e consumidores. 24–28 SET Anápolis–GO botões: quero expor | quero participar"
na aba de "Estrutura" ao inves dos icones em cima dos titulos, deixe espaço para colocar imagens
na aba de "contrapartida aos expositores" coloque em cima dos topicos um espaço para colocar imagem
na aba de "público-alvo" coloque imagem em cada uma caixinha abaixo do titulo para colocar imagens referentes ao titulo
coloque um espaço para imagem tambem na dobra "plano de ação" coloque o espaço para imagem abaixo do titulo de cada caixinha
Crie um banner para a dobra principal de um site com fundo lilás suave. No plano de fundo, espalhe de forma orgânica e aleatória as palavras “Objetivos”, “Justificativa” e “Público Alvo” em cor laranja vibrante, estilo manuscrito, semelhante a rascunhos criativos. As palavras devem ficar distribuídas de forma leve e descontraída, como elementos gráficos que compõem o cenário, sem roubar a atenção do texto principal. O estilo deve seguir o mesmo mantendo uma estética moderna, minimalista e jovem.
na aba "justificativa" Espalhe de forma orgânica e aleatória as palavras “moda”, “shop”, “casa”, “agro”, “pet” e “decoração” em cor laranja vibrante, no estilo manuscrito/desenhado, simulando rascunhos criativos. As palavras devem aparecer como elementos soltos e leves no fundo, bem distribuídas nas laterais e cantos da tela, sem competir com o texto principal. O estilo deve ser moderno, jovem e descontraído, seguindo a identidade visual da ExpoMix.
na aba "estrutura" Espalhe de forma orgânica e aleatória as palavras “moda”, “shop”, “casa”, “agro”, “pet” e “decoração” em cor laranja vibrante, no estilo manuscrito/desenhado, simulando rascunhos criativos. As palavras devem aparecer como elementos soltos e leves no fundo, bem distribuídas nas laterais e cantos da tela, sem competir com o texto principal. O estilo deve ser moderno, jovem e descontraído, seguindo a identidade visual da ExpoMix.
na aba "estrutura" Espalhe de forma orgânica e aleatória as palavras “moda”, “shop”, “casa”, “agro”, “pet” e “decoração” em cor laranja vibrante, no estilo manuscrito/desenhado, simulando rascunhos criativos. As palavras devem aparecer como elementos soltos e leves no fundo, bem distribuídas nas laterais e cantos da tela, sem competir com o texto principal. O estilo deve ser moderno, jovem e descontraído, seguindo a identidade visual da ExpoMix.
na aba "estrutura" faça Espalhe de forma orgânica e aleatória as palavras “moda”, “shop”, “casa”, “agro”, “pet” e “decoração” em cor laranja vibrante, no estilo manuscrito/desenhado, simulando rascunhos criativos. As palavras devem aparecer como elementos soltos e leves no fundo, bem distribuídas nas laterais e cantos da tela, sem competir com o texto principal. O estilo deve ser moderno, jovem e descontraído, seguindo a identidade visual da ExpoMix.
na aba "publico alvo" deixe um espaço para imagem em cada caixinha apos o titulo
na aba "publico alvo" deixe um espaço para imagem em cada caixinha apos o titulo
na aba "publico alvo" deixe um espaço para imagem em cada caixinha apos o titulo
na aba objetivos nos icones ao inves de checks para marcar os icones, coloque icones relacionados a moda
na aba de "publico alvo" Use como background um fundo com a cor lilás suave (tom idêntico ao da imagem de referência da ExpoMix). O fundo deve ser uniforme, sem gradiente forte, apenas com uma leve textura para não ficar chapado, mantendo a estética moderna e clean.
deixe mais visual a dobra "parceria municipal"
faça uma dobra abaixo da dobra "sobre o evento" com o espaço reservado so para uma imagem
crie uma dobra abaixo do "sobre o evento" com espaço para imagem
na aba "estrutura" faça Espalhe de forma orgânica e aleatória as palavras “moda”, “shop”, “casa”, “agro”, “pet” e “decoração” em cor laranja vibrante, no estilo manuscrito/desenhado, simulando rascunhos criativos. As palavras devem aparecer como elementos soltos e leves no fundo, bem distribuídas nas laterais e cantos da tela, sem competir com o texto principal. O estilo deve ser moderno, jovem e descontraído, seguindo a identidade visual da ExpoMix.
na aba "publico alvo" deixe um espaço para imagem em cada caixinha apos o titulo
na aba "publico alvo" deixe um espaço para imagem em cada caixinha apos o titulo
na aba "publico alvo" deixe um espaço para imagem em cada caixinha apos o titulo
na aba objetivos nos icones ao inves de checks para marcar os icones, coloque icones relacionados a moda
na aba de "publico alvo" Use como background um fundo com a cor lilás suave (tom idêntico ao da imagem de referência da ExpoMix). O fundo deve ser uniforme, sem gradiente forte, apenas com uma leve textura para não ficar chapado, mantendo a estética moderna e clean.
deixe mais visual a dobra "parceria municipal"
faça uma dobra abaixo da dobra "sobre o evento" com o espaço reservado so para uma imagem
crie uma dobra abaixo do "sobre o evento" com espaço para imagem
Crie uma seção (dobra) de tabela de preços para stands da ExpoMix.
O layout deve ser moderno, limpo e responsivo, com fundo claro e blocos destacados.
Divida em 2 colunas principais:
1. **Stand 3x3**
- Espaço para o título: "Stand 3x3"
- Espaço para inserir o preço (em destaque grande)
- Lista de benefícios (mínimo 3 itens), como: "Localização estratégica", "Visibilidade garantida", "Estrutura básica inclusa"
- Botão de ação: "Reservar Stand"
2. **Stand Personalizado**
- Espaço para o título: "Stand Personalizado"
- Espaço para inserir o preço (em destaque grande)
- Lista de benefícios (mínimo 3 itens), como: "Projeto sob medida", "Destaque exclusivo", "Maior área de exposição"
- Botão de ação: "Solicitar Orçamento"
Adicione um título geral no topo da dobra:
**"Escolha seu Stand e participe da ExpoMix"**
Abaixo do título, insira um subtítulo curto e atrativo:
*"Do básico ao exclusivo, temos a opção certa para o seu negócio."*
Use ícones simples ao lado de cada benefício (como check, estrela ou destaque visual).
As caixas de cada plano devem ter bordas arredondadas, sombra suave e destaque no hover.
Coloque nessa seção de preços dos stands um espaço para imagem dos stands
coloque o icone do whatsapp com o texto "Garanta já os seus estandes na ExpoMix 2025" no número 556198301-5330" |