antocarloss/expomix2 at main

3.72 kB

1 contributor

faça o site como esse html: <!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; background:linear-gradient(to bottom, rgba(0,0,0,.45), rgba(0,0,0,.35)), url('assets/page1_img1.png') center/cover no-repeat;} .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 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>  <header class="hero"> <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>  <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="assets/page1_img2.png" alt="Estandes e visitantes do evento"/> </div> </div> </section>  <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>  <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="assets/page2_img1.png" alt="Ambiente do evento com expositores"/> </div> </div> </section>  <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="assets/page2_img2.png" alt="Mapa/estrutura da feira"/> </div> </div> </section>  <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="assets/page3_img1.png" alt="Ações e experiências"/> </div> </div> </section>  <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="assets/page3_img2.png" alt="Parcerias institucionais"/> </div> </div> </section>  <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> - Initial Deployment

fb55648 verified 4 months ago