Hugging Face's logo

Spaces:
antocarloss
/
expo-mix-brasil
Running

App Files Community
expo-mix-brasil / index.html
antocarloss's picture
antocarloss
ABAIXO DE "PROGRAMAÇÃO E EXPERIÊNCIAS" COOQUE FOTOS DE CONGRESSOS E ESPAÇOS DE EVENTOS - Initial Deployment
e91f79c verified
raw
history blame contribute delete
54.1 kB
 <!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Expo Mix Brasil 2025 | Moda, Design e Lifestyle</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&family=Playfair+Display:wght@400;500;600;700&display=swap');
body {
font-family: 'Montserrat', sans-serif;
}
.title-font {
font-family: 'Playfair Display', serif;
}
.hero-gradient {
background: linear-gradient(135deg, rgba(245,245,245,0.9) 0%, rgba(245,245,245,0.7) 100%), url('https://images.unsplash.com/photo-1492707892479-7bc8d5a4ee93?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1965&q=80');
background-size: cover;
background-position: center;
}
.section-divider {
position: relative;
height: 80px;
overflow: hidden;
}
.section-divider::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
height: 100%;
background: linear-gradient(135deg, #f5f5f5 0%, #e5e5e5 100%);
transform: skewY(-2deg);
transform-origin: top left;
z-index: -1;
}
.feature-icon {
width: 60px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
margin-bottom: 1rem;
}
.hover-scale {
transition: transform 0.3s ease;
}
.hover-scale:hover {
transform: scale(1.03);
}
.countdown-item {
min-width: 80px;
}
</style>
</head>
<body class="bg-white text-gray-800">
<!-- Hero Banner -->
<section class="hero-gradient py-20 md:py-32 px-4 md:px-0">
<div class="container mx-auto max-w-6xl px-4">
<div class="flex flex-col md:flex-row items-center">
<div class="md:w-1/2 mb-10 md:mb-0">
<div class="bg-white bg-opacity-90 p-8 rounded-lg shadow-lg">
<span class="text-sm font-semibold tracking-widest text-amber-700">24 A 28 DE SETEMBRO 2025</span>
<h1 class="title-font text-4xl md:text-5xl font-bold text-gray-900 mt-2 mb-4">Expo Mix Brasil 2025</h1>
<h2 class="text-xl md:text-2xl text-gray-700 mb-6">Moda, Design e Lifestyle reunidos em um só lugar</h2>
<p class="text-amber-800 font-medium mb-6 flex items-center">
<i class="fas fa-map-marker-alt mr-2"></i> Anápolis - GO
</p>
<div class="flex flex-col sm:flex-row gap-4">
<a href="#expositor" class="bg-black hover:bg-gray-800 text-white font-bold py-3 px-6 rounded-full transition duration-300 flex items-center justify-center">
<i class="fas fa-store mr-2"></i> Quero Ser Expositor
</a>
<a href="#catalogo" class="border-2 border-black hover:bg-black hover:text-white font-bold py-3 px-6 rounded-full transition duration-300 flex items-center justify-center">
<i class="fas fa-book-open mr-2"></i> Baixe o Catálogo
</a>
</div>
</div>
</div>
<div class="md:w-1/2 md:pl-12">
<div class="bg-white bg-opacity-90 p-8 rounded-lg shadow-lg">
<h3 class="title-font text-2xl font-bold text-gray-900 mb-4">Contagem Regressiva</h3>
<div class="flex justify-between mb-6" id="countdown">
<div class="countdown-item text-center">
<div class="text-3xl font-bold text-amber-700" id="days">00</div>
<div class="text-sm text-gray-600">Dias</div>
</div>
<div class="countdown-item text-center">
<div class="text-3xl font-bold text-amber-700" id="hours">00</div>
<div class="text-sm text-gray-600">Horas</div>
</div>
<div class="countdown-item text-center">
<div class="text-3xl font-bold text-amber-700" id="minutes">00</div>
<div class="text-sm text-gray-600">Minutos</div>
</div>
<div class="countdown-item text-center">
<div class="text-3xl font-bold text-amber-700" id="seconds">00</div>
<div class="text-sm text-gray-600">Segundos</div>
</div>
</div>
<div class="bg-amber-50 border-l-4 border-amber-400 p-4 mb-6">
<p class="text-amber-800 font-medium">
<i class="fas fa-info-circle mr-2"></i> Garanta seu espaço com condições especiais para reservas antecipadas!
</p>
</div>
<div class="flex flex-wrap gap-2">
<span class="bg-black text-white text-xs font-semibold px-3 py-1 rounded-full">MODA</span>
<span class="bg-black text-white text-xs font-semibold px-3 py-1 rounded-full">DESIGN</span>
<span class="bg-black text-white text-xs font-semibold px-3 py-1 rounded-full">LIFESTYLE</span>
<span class="bg-black text-white text-xs font-semibold px-3 py-1 rounded-full">JOIAS</span>
<span class="bg-black text-white text-xs font-semibold px-3 py-1 rounded-full">DECORAÇÃO</span>
</div>
</div>
<div class="mt-12">
<h3 class="title-font text-2xl font-bold text-gray-900 mb-6">Espaços para Congressos e Eventos</h3>
<div class="grid grid-cols-2 md:grid-cols-3 gap-4">
<div class="rounded-lg overflow-hidden hover-scale">
<img src="https://images.unsplash.com/photo-1492684223066-81342ee5ff30?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Auditório principal" class="w-full h-48 object-cover">
</div>
<div class="rounded-lg overflow-hidden hover-scale">
<img src="https://images.unsplash.com/photo-1505373877841-8d25f7d46678?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1412&q=80" alt="Sala de workshops" class="w-full h-48 object-cover">
</div>
<div class="rounded-lg overflow-hidden hover-scale">
<img src="https://images.unsplash.com/photo-1497366811353-6870744d04b2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1469&q=80" alt="Espaço para palestras" class="w-full h-48 object-cover">
</div>
<div class="rounded-lg overflow-hidden hover-scale">
<img src="https://images.unsplash.com/photo-1527529482837-4698179dc6ce?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Área de networking" class="w-full h-48 object-cover">
</div>
<div class="rounded-lg overflow-hidden hover-scale">
<img src="https://images.unsplash.com/photo-1541178735493-479c1a27ed24?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1471&q=80" alt="Espaço para coffee break" class="w-full h-48 object-cover">
</div>
<div class="rounded-lg overflow-hidden hover-scale">
<img src="https://images.unsplash.com/photo-1511578314322-379afb476865?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Sala VIP" class="w-full h-48 object-cover">
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- About Section -->
<section class="py-16 px-4 bg-white">
<div class="container mx-auto max-w-6xl">
<div class="text-center mb-16">
<span class="text-sm font-semibold tracking-widest text-amber-700">SOBRE O EVENTO</span>
<h2 class="title-font text-3xl md:text-4xl font-bold text-gray-900 mt-2 mb-4">A Maior Feira de Moda, Design e Lifestyle do Centro-Oeste</h2>
<div class="w-20 h-1 bg-amber-500 mx-auto"></div>
</div>
<div class="flex flex-col md:flex-row gap-12">
<div class="md:w-1/2">
<p class="text-lg text-gray-700 mb-6">
A ExpoMix Brasil é uma feira que conecta marcas de moda, design e lifestyle com lojistas, influenciadores e consumidores finais.
</p>
<p class="text-gray-600 mb-6">
Um espaço de networking, lançamentos e tendências em um dos maiores polos do setor no país. De 24 a 28 de Setembro em Anápolis-GO. Moda, inovação e negócios em um só lugar.
</p>
<div class="bg-gray-50 p-6 rounded-lg">
<h3 class="title-font text-xl font-bold text-gray-900 mb-3">Por que participar?</h3>
<ul class="space-y-3">
<li class="flex items-start">
<i class="fas fa-check-circle text-amber-600 mt-1 mr-3"></i>
<span class="text-gray-700">Divulgação da sua marca em mídias e redes sociais</span>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle text-amber-600 mt-1 mr-3"></i>
<span class="text-gray-700">Participação em rodadas de negócio</span>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle text-amber-600 mt-1 mr-3"></i>
<span class="text-gray-700">Catálogo digital e certificado oficial</span>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle text-amber-600 mt-1 mr-3"></i>
<span class="text-gray-700">Contato direto com compradores e influenciadores</span>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle text-amber-600 mt-1 mr-3"></i>
<span class="text-gray-700">Presença em um evento de alta visibilidade e curadoria</span>
</li>
</ul>
</div>
</div>
<div class="md:w-1/2">
<div class="grid grid-cols-2 gap-4">
<div class="rounded-lg overflow-hidden hover-scale">
<img src="https://images.unsplash.com/photo-1551232864-3f0890e580d9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="Moda" class="w-full h-full object-cover">
</div>
<div class="rounded-lg overflow-hidden hover-scale">
<img src="https://images.unsplash.com/photo-1616486338812-3dadae4b4ace?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1632&q=80" alt="Design" class="w-full h-full object-cover">
</div>
<div class="rounded-lg overflow-hidden hover-scale">
<img src="https://images.unsplash.com/photo-1607083206968-13611e3d76db?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=715&q=80" alt="Joias" class="w-full h-full object-cover">
</div>
<div class="rounded-lg overflow-hidden hover-scale">
<img src="https://images.unsplash.com/photo-1556911220-bff31c812dba?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=686&q=80" alt="Decoração" class="w-full h-full object-cover">
</div>
</div>
<div class="mt-8 bg-amber-50 p-6 rounded-lg">
<h3 class="title-font text-xl font-bold text-gray-900 mb-3">Edição 2024 em números</h3>
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 text-center">
<div>
<div class="text-3xl font-bold text-amber-700">R$ 15M+</div>
<div class="text-sm text-gray-600">Em negócios gerados</div>
</div>
<div>
<div class="text-3xl font-bold text-amber-700">500k</div>
<div class="text-sm text-gray-600">Peças vendidas</div>
</div>
<div>
<div class="text-3xl font-bold text-amber-700">600+</div>
<div class="text-sm text-gray-600">Profissionais envolvidos</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Objectives Section -->
<section class="py-16 px-4 bg-gray-50">
<div class="container mx-auto max-w-6xl">
<div class="text-center mb-16">
<span class="text-sm font-semibold tracking-widest text-amber-700">OBJETIVOS</span>
<h2 class="title-font text-3xl md:text-4xl font-bold text-gray-900 mt-2 mb-4">O que buscamos com a Expo Mix Brasil</h2>
<div class="w-20 h-1 bg-amber-500 mx-auto"></div>
</div>
<div class="grid md:grid-cols-3 gap-8">
<div class="bg-white p-8 rounded-lg shadow-sm hover-scale transition duration-300">
<div class="feature-icon bg-amber-100 text-amber-700 mx-auto">
<i class="fas fa-handshake text-2xl"></i>
</div>
<h3 class="title-font text-xl font-bold text-center text-gray-900 mb-3">Promover Negócios</h3>
<p class="text-gray-600 text-center">
Criar um ambiente propício para fechamento de negócios, lançamentos de coleções e fortalecimento de parcerias comerciais.
</p>
</div>
<div class="bg-white p-8 rounded-lg shadow-sm hover-scale transition duration-300">
<div class="feature-icon bg-amber-100 text-amber-700 mx-auto">
<i class="fas fa-chart-line text-2xl"></i>
</div>
<h3 class="title-font text-xl font-bold text-center text-gray-900 mb-3">Estimular o Comércio</h3>
<p class="text-gray-600 text-center">
Aquecer o comércio regional e nacional, conectando marcas a compradores de todo o país em um único evento.
</p>
</div>
<div class="bg-white p-8 rounded-lg shadow-sm hover-scale transition duration-300">
<div class="feature-icon bg-amber-100 text-amber-700 mx-auto">
<i class="fas fa-bullhorn text-2xl"></i>
</div>
<h3 class="title-font text-xl font-bold text-center text-gray-900 mb-3">Visibilidade</h3>
<p class="text-gray-600 text-center">
Oferecer exposição de marca através de mídia especializada, campanhas promocionais e ampla divulgação.
</p>
</div>
</div>
</div>
</section>
<!-- Target Audience Section -->
<section class="py-16 px-4 bg-white">
<div class="container mx-auto max-w-6xl">
<div class="text-center mb-16">
<span class="text-sm font-semibold tracking-widest text-amber-700">PÚBLICO-ALVO</span>
<h2 class="title-font text-3xl md:text-4xl font-bold text-gray-900 mt-2 mb-4">Quem participa da Expo Mix Brasil</h2>
<div class="w-20 h-1 bg-amber-500 mx-auto"></div>
</div>
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
<div class="bg-gray-50 p-6 rounded-lg hover-scale transition duration-300">
<div class="flex items-center mb-4">
<div class="bg-black text-white p-3 rounded-full mr-4">
<i class="fas fa-store"></i>
</div>
<h3 class="title-font text-lg font-bold text-gray-900">Lojistas</h3>
</div>
<p class="text-gray-600">
Lojistas de moda e decoração em busca das últimas tendências e melhores fornecedores.
</p>
</div>
<div class="bg-gray-50 p-6 rounded-lg hover-scale transition duration-300">
<div class="flex items-center mb-4">
<div class="bg-black text-white p-3 rounded-full mr-4">
<i class="fas fa-boxes"></i>
</div>
<h3 class="title-font text-lg font-bold text-gray-900">Atacadistas</h3>
</div>
<p class="text-gray-600">
Atacadistas e varejistas procurando ampliar seu portfólio com marcas inovadoras.
</p>
</div>
<div class="bg-gray-50 p-6 rounded-lg hover-scale transition duration-300">
<div class="flex items-center mb-4">
<div class="bg-black text-white p-3 rounded-full mr-4">
<i class="fas fa-users"></i>
</div>
<h3 class="title-font text-lg font-bold text-gray-900">Consumidores</h3>
</div>
<p class="text-gray-600">
Consumidores premium interessados em produtos exclusivos e lançamentos.
</p>
</div>
<div class="bg-gray-50 p-6 rounded-lg hover-scale transition duration-300">
<div class="flex items-center mb-4">
<div class="bg-black text-white p-3 rounded-full mr-4">
<i class="fas fa-star"></i>
</div>
<h3 class="title-font text-lg font-bold text-gray-900">Influenciadores</h3>
</div>
<p class="text-gray-600">
Influenciadores e formadores de opinião que buscam parcerias e novidades.
</p>
</div>
</div>
</div>
</section>
<!-- Structure Section -->
<section class="py-16 px-4 bg-gray-50">
<div class="container mx-auto max-w-6xl">
<div class="text-center mb-16">
<span class="text-sm font-semibold tracking-widest text-amber-700">ESTRUTURA E BENEFÍCIOS</span>
<h2 class="title-font text-3xl md:text-4xl font-bold text-gray-900 mt-2 mb-4">Tudo pensado para o seu conforto e sucesso</h2>
<div class="w-20 h-1 bg-amber-500 mx-auto"></div>
</div>
<div class="grid md:grid-cols-2 gap-12">
<div>
<h3 class="title-font text-2xl font-bold text-gray-900 mb-6">Estandes e Espaços</h3>
<div class="grid grid-cols-2 gap-4 mb-8">
<div class="rounded-lg overflow-hidden hover-scale">
<img src="https://images.unsplash.com/photo-1551232864-3f0890e580d9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="Stand de moda" class="w-full h-48 object-cover">
</div>
<div class="rounded-lg overflow-hidden hover-scale">
<img src="https://images.unsplash.com/photo-1616486338812-3dadae4b4ace?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1632&q=80" alt="Stand de design" class="w-full h-48 object-cover">
</div>
<div class="rounded-lg overflow-hidden hover-scale">
<img src="https://images.unsplash.com/photo-1607083206968-13611e3d76db?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=715&q=80" alt="Stand de joias" class="w-full h-48 object-cover">
</div>
<div class="rounded-lg overflow-hidden hover-scale">
<img src="https://images.unsplash.com/photo-1556911220-bff31c812dba?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=686&q=80" alt="Stand de decoração" class="w-full h-48 object-cover">
</div>
</div>
<div class="space-y-6">
<div class="flex">
<div class="flex-shrink-0 mr-4">
<div class="bg-amber-100 text-amber-700 rounded-full w-12 h-12 flex items-center justify-center">
<i class="fas fa-cube"></i>
</div>
</div>
<div>
<h4 class="title-font text-lg font-bold text-gray-900 mb-2">Estandes Personalizados</h4>
<p class="text-gray-600">
Espaços modulares que podem ser adaptados à identidade visual de cada marca, com diferentes tamanhos e layouts.
</p>
</div>
</div>
<div class="flex">
<div class="flex-shrink-0 mr-4">
<div class="bg-amber-100 text-amber-700 rounded-full w-12 h-12 flex items-center justify-center">
<i class="fas fa-utensils"></i>
</div>
</div>
<div>
<h4 class="title-font text-lg font-bold text-gray-900 mb-2">Praça de Alimentação</h4>
<p class="text-gray-600">
Área com diversas opções gastronômicas para que visitantes e expositores possam fazer suas refeições com conforto.
</p>
</div>
</div>
<div class="flex">
<div class="flex-shrink-0 mr-4">
<div class="bg-amber-100 text-amber-700 rounded-full w-12 h-12 flex items-center justify-center">
<i class="fas fa-child"></i>
</div>
</div>
<div>
<h4 class="title-font text-lg font-bold text-gray-900 mb-2">Espaço Kids</h4>
<p class="text-gray-600">
Ambiente seguro e divertido para as crianças, permitindo que pais possam visitar a feira com toda a família.
</p>
</div>
</div>
<div class="flex">
<div class="flex-shrink-0 mr-4">
<div class="bg-amber-100 text-amber-700 rounded-full w-12 h-12 flex items-center justify-center">
<i class="fas fa-couch"></i>
</div>
</div>
<div>
<h4 class="title-font text-lg font-bold text-gray-900 mb-2">Lounges Exclusivos</h4>
<p class="text-gray-600">
Áreas de descanso e networking com mobiliário confortável e ambiente sofisticado para reuniões e conexões.
</p>
</div>
</div>
</div>
</div>
<div>
<h3 class="title-font text-2xl font-bold text-gray-900 mb-6">Programação e Experiências</h3>
<div class="space-y-6">
<div class="flex">
<div class="flex-shrink-0 mr-4">
<div class="bg-amber-100 text-amber-700 rounded-full w-12 h-12 flex items-center justify-center">
<i class="fas fa-chalkboard-teacher"></i>
</div>
</div>
<div>
<h4 class="title-font text-lg font-bold text-gray-900 mb-2">Palestras e Workshops</h4>
<p class="text-gray-600">
Conteúdo exclusivo com especialistas do mercado sobre tendências, gestão, marketing e vendas no varejo de moda.
</p>
</div>
</div>
<div class="flex">
<div class="flex-shrink-0 mr-4">
<div class="bg-amber-100 text-amber-700 rounded-full w-12 h-12 flex items-center justify-center">
<i class="fas fa-walking"></i>
</div>
</div>
<div>
<h4 class="title-font text-lg font-bold text-gray-900 mb-2">Desfiles de Tendências</h4>
<p class="text-gray-600">
Apresentações das principais coleções e lançamentos das marcas participantes em um palco especialmente projetado.
</p>
</div>
</div>
<div class="flex">
<div class="flex-shrink-0 mr-4">
<div class="bg-amber-100 text-amber-700 rounded-full w-12 h-12 flex items-center justify-center">
<i class="fas fa-hands"></i>
</div>
</div>
<div>
<h4 class="title-font text-lg font-bold text-gray-900 mb-2">Experiências Sensoriais</h4>
<p class="text-gray-600">
Ambientes imersivos que permitem aos visitantes vivenciar as marcas através de múltiplos sentidos.
</p>
</div>
</div>
<div class="flex">
<div class="flex-shrink-0 mr-4">
<div class="bg-amber-100 text-amber-700 rounded-full w-12 h-12 flex items-center justify-center">
<i class="fas fa-network-wired"></i>
</div>
</div>
<div>
<h4 class="title-font text-lg font-bold text-gray-900 mb-2">Rodadas de Negócios</h4>
<p class="text-gray-600">
Encontros agendados entre expositores e compradores qualificados para potencializar os resultados comerciais.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Benefits Section -->
<section class="py-16 px-4 bg-white">
<div class="container mx-auto max-w-6xl">
<div class="text-center mb-16">
<span class="text-sm font-semibold tracking-widest text-amber-700">CONTRAPARTIDAS</span>
<h2 class="title-font text-3xl md:text-4xl font-bold text-gray-900 mt-2 mb-4">Benefícios para Expositores</h2>
<div class="w-20 h-1 bg-amber-500 mx-auto"></div>
</div>
<div class="grid md:grid-cols-3 gap-8">
<div class="border border-gray-200 rounded-lg p-8 hover:border-amber-400 hover-scale transition duration-300">
<div class="text-amber-600 text-4xl mb-4">
<i class="fas fa-globe"></i>
</div>
<h3 class="title-font text-xl font-bold text-gray-900 mb-3">Divulgação Digital</h3>
<p class="text-gray-600 mb-4">
Sua marca destacada no site oficial, redes sociais e catálogo digital da feira, com alcance nacional.
</p>
<ul class="space-y-2 text-gray-700">
<li class="flex items-start">
<i class="fas fa-check text-amber-500 mt-1 mr-2"></i>
<span>Destaque no site e redes sociais</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-amber-500 mt-1 mr-2"></i>
<span>Catálogo digital com informações da marca</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-amber-500 mt-1 mr-2"></i>
<span>Materiais para divulgação pré-evento</span>
</li>
</ul>
</div>
<div class="border border-gray-200 rounded-lg p-8 hover:border-amber-400 hover-scale transition duration-300">
<div class="text-amber-600 text-4xl mb-4">
<i class="fas fa-bullseye"></i>
</div>
<h3 class="title-font text-xl font-bold text-gray-900 mb-3">Ações Promocionais</h3>
<p class="text-gray-600 mb-4">
Participação em campanhas especiais e oportunidades exclusivas para engajar o público visitante.
</p>
<ul class="space-y-2 text-gray-700">
<li class="flex items-start">
<i class="fas fa-check text-amber-500 mt-1 mr-2"></i>
<span>Inclusão em rodadas de negócios</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-amber-500 mt-1 mr-2"></i>
<span>Oportunidades em ações promocionais</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-amber-500 mt-1 mr-2"></i>
<span>Participação em matérias e releases</span>
</li>
</ul>
</div>
<div class="border border-gray-200 rounded-lg p-8 hover:border-amber-400 hover-scale transition duration-300">
<div class="text-amber-600 text-4xl mb-4">
<i class="fas fa-award"></i>
</div>
<h3 class="title-font text-xl font-bold text-gray-900 mb-3">Reconhecimento</h3>
<p class="text-gray-600 mb-4">
Certificação e selos que validam sua participação como expositor oficial do maior evento do segmento.
</p>
<ul class="space-y-2 text-gray-700">
<li class="flex items-start">
<i class="fas fa-check text-amber-500 mt-1 mr-2"></i>
<span>Certificado de participação</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-amber-500 mt-1 mr-2"></i>
<span>Selo digital de expositor oficial</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-amber-500 mt-1 mr-2"></i>
<span>Menção em materiais institucionais</span>
</li>
</ul>
</div>
</div>
</div>
</section>
<!-- Partners Section -->
<section class="py-16 px-4 bg-gray-50">
<div class="container mx-auto max-w-6xl">
<div class="text-center mb-16">
<span class="text-sm font-semibold tracking-widest text-amber-700">PARCERIAS</span>
<h2 class="title-font text-3xl md:text-4xl font-bold text-gray-900 mt-2 mb-4">Apoio Institucional</h2>
<div class="w-20 h-1 bg-amber-500 mx-auto"></div>
</div>
<div class="bg-white p-8 rounded-lg shadow-sm">
<div class="flex flex-col md:flex-row items-center">
<div class="md:w-1/3 mb-8 md:mb-0">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5c/Brasao_Anapolis.svg/1200px-Brasao_Anapolis.svg.png" alt="Prefeitura de Anápolis" class="h-24 mx-auto">
</div>
<div class="md:w-2/3 md:pl-8">
<h3 class="title-font text-2xl font-bold text-gray-900 mb-4">Prefeitura Municipal de Anápolis</h3>
<p class="text-gray-600 mb-6">
Com o apoio essencial da Prefeitura de Anápolis, a Expo Mix Brasil conta com estrutura de qualidade, local privilegiado e ações sociais que beneficiam toda a comunidade.
</p>
<div class="flex flex-wrap gap-4">
<div class="bg-gray-100 px-4 py-2 rounded-full">
<span class="text-sm font-medium text-gray-700">Estrutura</span>
</div>
<div class="bg-gray-100 px-4 py-2 rounded-full">
<span class="text-sm font-medium text-gray-700">Localização</span>
</div>
<div class="bg-gray-100 px-4 py-2 rounded-full">
<span class="text-sm font-medium text-gray-700">Ações Sociais</span>
</div>
<div class="bg-gray-100 px-4 py-2 rounded-full">
<span class="text-sm font-medium text-gray-700">Segurança</span>
</div>
</div>
</div>
</div>
</div>
<div class="mt-12 grid grid-cols-2 md:grid-cols-4 gap-8">
<div class="flex items-center justify-center">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5c/Brasao_Anapolis.svg/1200px-Brasao_Anapolis.svg.png" alt="Anápolis" class="h-16 opacity-70 grayscale hover:opacity-100 hover:grayscale-0 transition duration-300">
</div>
<div class="flex items-center justify-center">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/05/Logo_do_Governo_de_Goi%C3%A1s.svg/1200px-Logo_do_Governo_de_Goi%C3%A1s.svg.png" alt="Goiás" class="h-16 opacity-70 grayscale hover:opacity-100 hover:grayscale-0 transition duration-300">
</div>
<div class="flex items-center justify-center">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/00/Logo_do_SENAI.svg/1200px-Logo_do_SENAI.svg.png" alt="SENAI" class="h-16 opacity-70 grayscale hover:opacity-100 hover:grayscale-0 transition duration-300">
</div>
<div class="flex items-center justify-center">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/78/Logo_do_Sebrae.svg/1200px-Logo_do_Sebrae.svg.png" alt="SEBRAE" class="h-16 opacity-70 grayscale hover:opacity-100 hover:grayscale-0 transition duration-300">
</div>
</div>
</div>
</section>
<!-- CTA Section -->
<section class="py-20 px-4 bg-amber-700">
<div class="container mx-auto max-w-4xl text-center">
<h2 class="title-font text-3xl md:text-4xl font-bold text-white mb-6">Sua marca no maior palco de moda do Centro-Oeste</h2>
<p class="text-xl text-amber-100 mb-8">
Garanta seu estande e faça parte deste evento exclusivo. Condições especiais para reservas antecipadas.
</p>
<div class="flex flex-col sm:flex-row justify-center gap-4">
<a href="#expositor" class="bg-black hover:bg-gray-800 text-white font-bold py-4 px-8 rounded-full transition duration-300 flex items-center justify-center">
<i class="fas fa-store mr-3"></i> Quero Ser Expositor
</a>
<a href="#contato" class="bg-white hover:bg-gray-100 text-black font-bold py-4 px-8 rounded-full transition duration-300 flex items-center justify-center">
<i class="fas fa-phone-alt mr-3"></i> Fale Conosco
</a>
</div>
</div>
</section>
<!-- Contact Section -->
<section class="py-16 px-4 bg-white" id="contato">
<div class="container mx-auto max-w-6xl">
<div class="text-center mb-16">
<span class="text-sm font-semibold tracking-widest text-amber-700">CONTATO</span>
<h2 class="title-font text-3xl md:text-4xl font-bold text-gray-900 mt-2 mb-4">Fale com nossa equipe</h2>
<div class="w-20 h-1 bg-amber-500 mx-auto"></div>
</div>
<div class="grid md:grid-cols-2 gap-12">
<div>
<h3 class="title-font text-2xl font-bold text-gray-900 mb-6">Informações de Contato</h3>
<div class="space-y-6">
<div class="flex items-start">
<div class="flex-shrink-0 bg-amber-100 rounded-full p-3 mr-4">
<i class="fas fa-phone-alt text-amber-700"></i>
</div>
<div>
<h4 class="title-font text-lg font-bold text-gray-900 mb-1">Telefones</h4>
<p class="text-gray-600">
<a href="tel:+55619993073003" class="hover:text-amber-700 transition duration-300">(61) 9 99307-3003</a><br>
<a href="tel:+55619998182140" class="hover:text-amber-700 transition duration-300">(61) 9 99818-2140</a>
</p>
</div>
</div>
<div class="flex items-start">
<div class="flex-shrink-0 bg-amber-100 rounded-full p-3 mr-4">
<i class="fas fa-envelope text-amber-700"></i>
</div>
<div>
<h4 class="title-font text-lg font-bold text-gray-900 mb-1">E-mail</h4>
<p class="text-gray-600">
<a href="mailto:[email protected]" class="hover:text-amber-700 transition duration-300">[email protected]</a>
</p>
</div>
</div>
<div class="flex items-start">
<div class="flex-shrink-0 bg-amber-100 rounded-full p-3 mr-4">
<i class="fas fa-globe text-amber-700"></i>
</div>
<div>
<h4 class="title-font text-lg font-bold text-gray-900 mb-1">Site</h4>
<p class="text-gray-600">
<a href="https://www.groupbuzz.com.br" target="_blank" class="hover:text-amber-700 transition duration-300">www.groupbuzz.com.br</a>
</p>
</div>
</div>
<div class="flex items-start">
<div class="flex-shrink-0 bg-amber-100 rounded-full p-3 mr-4">
<i class="fab fa-instagram text-amber-700"></i>
</div>
<div>
<h4 class="title-font text-lg font-bold text-gray-900 mb-1">Redes Sociais</h4>
<p class="text-gray-600">
<a href="https://instagram.com/expomixbrasil" target="_blank" class="hover:text-amber-700 transition duration-300">@expomixbrasil</a>
</p>
</div>
</div>
</div>
<div class="mt-8">
<h4 class="title-font text-lg font-bold text-gray-900 mb-3">Horário de Atendimento</h4>
<p class="text-gray-600">
Segunda a sexta, das 9h às 18h<br>
Sábados, das 9h às 12h
</p>
</div>
</div>
<div>
<h3 class="title-font text-2xl font-bold text-gray-900 mb-6">Envie sua mensagem</h3>
<form class="space-y-4">
<div>
<label for="name" class="block text-sm font-medium text-gray-700 mb-1">Nome</label>
<input type="text" id="name" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-amber-500 focus:border-amber-500">
</div>
<div>
<label for="email" class="block text-sm font-medium text-gray-700 mb-1">E-mail</label>
<input type="email" id="email" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-amber-500 focus:border-amber-500">
</div>
<div>
<label for="phone" class="block text-sm font-medium text-gray-700 mb-1">Telefone</label>
<input type="tel" id="phone" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-amber-500 focus:border-amber-500">
</div>
<div>
<label for="subject" class="block text-sm font-medium text-gray-700 mb-1">Assunto</label>
<select id="subject" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-amber-500 focus:border-amber-500">
<option>Selecione um assunto</option>
<option>Quero ser expositor</option>
<option>Solicitar catálogo</option>
<option>Parcerias</option>
<option>Outros</option>
</select>
</div>
<div>
<label for="message" class="block text-sm font-medium text-gray-700 mb-1">Mensagem</label>
<textarea id="message" rows="4" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-amber-500 focus:border-amber-500"></textarea>
</div>
<button type="submit" class="w-full bg-black hover:bg-gray-800 text-white font-bold py-3 px-6 rounded-lg transition duration-300">
Enviar Mensagem
</button>
</form>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="bg-gray-900 text-white py-12 px-4">
<div class="container mx-auto max-w-6xl">
<div class="grid md:grid-cols-4 gap-8">
<div>
<h3 class="title-font text-xl font-bold mb-4">Expo Mix Brasil</h3>
<p class="text-gray-400 mb-4">
O maior evento de moda, design e lifestyle do Centro-Oeste brasileiro.
</p>
<div class="flex space-x-4">
<a href="https://instagram.com/expomixbrasil" target="_blank" class="text-gray-400 hover:text-white transition duration-300">
<i class="fab fa-instagram text-xl"></i>
</a>
<a href="#" class="text-gray-400 hover:text-white transition duration-300">
<i class="fab fa-facebook-f text-xl"></i>
</a>
<a href="#" class="text-gray-400 hover:text-white transition duration-300">
<i class="fab fa-linkedin-in text-xl"></i>
</a>
</div>
</div>
<div>
<h3 class="title-font text-xl font-bold mb-4">Links Rápidos</h3>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Página Inicial</a></li>
<li><a href="#sobre" class="text-gray-400 hover:text-white transition duration-300">Sobre o Evento</a></li>
<li><a href="#expositor" class="text-gray-400 hover:text-white transition duration-300">Seja Expositor</a></li>
<li><a href="#programacao" class="text-gray-400 hover:text-white transition duration-300">Programação</a></li>
<li><a href="#contato" class="text-gray-400 hover:text-white transition duration-300">Contato</a></li>
</ul>
</div>
<div>
<h3 class="title-font text-xl font-bold mb-4">Informações</h3>
<ul class="space-y-2 text-gray-400">
<li class="flex items-start">
<i class="fas fa-calendar-alt mr-2 mt-1"></i>
<span>24 a 28 de setembro de 2025</span>
</li>
<li class="flex items-start">
<i class="fas fa-map-marker-alt mr-2 mt-1"></i>
<span>Anápolis - GO</span>
</li>
<li class="flex items-start">
<i class="fas fa-clock mr-2 mt-1"></i>
<span>Das 10h às 20h</span>
</li>
</ul>
</div>
<div>
<h3 class="title-font text-xl font-bold mb-4">Newsletter</h3>
<p class="text-gray-400 mb-4">
Receba novidades e informações sobre o evento.
</p>
<form class="flex">
<input type="email" placeholder="Seu e-mail" class="px-4 py-2 w-full rounded-l-lg focus:outline-none text-gray-900">
<button type="submit" class="bg-amber-600 hover:bg-amber-700 px-4 py-2 rounded-r-lg transition duration-300">
<i class="fas fa-paper-plane"></i>
</button>
</form>
</div>
</div>
<div class="border-t border-gray-800 mt-12 pt-8 text-center text-gray-400">
<p>&copy; 2025 Expo Mix Brasil. Todos os direitos reservados. Realização: <a href="https://www.groupbuzz.com.br" target="_blank" class="text-amber-500 hover:text-amber-400 transition duration-300">GroupBuzz</a></p>
</div>
</div>
</footer>
<script>
// Countdown Timer
function updateCountdown() {
const eventDate = new Date("September 24, 2025 10:00:00").getTime();
const now = new Date().getTime();
const distance = eventDate - now;
const days = Math.floor(distance / (1000 * 60 * 60 * 24));
const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((distance % (1000 * 60)) / 1000);
document.getElementById("days").innerHTML = days.toString().padStart(2, "0");
document.getElementById("hours").innerHTML = hours.toString().padStart(2, "0");
document.getElementById("minutes").innerHTML = minutes.toString().padStart(2, "0");
document.getElementById("seconds").innerHTML = seconds.toString().padStart(2, "0");
if (distance < 0) {
clearInterval(countdownTimer);
document.getElementById("countdown").innerHTML = "<div class='text-2xl font-bold text-amber-700'>O evento já começou!</div>";
}
}
updateCountdown();
const countdownTimer = setInterval(updateCountdown, 1000);
// Smooth scrolling for anchor links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
const targetId = this.getAttribute('href');
if (targetId === '#') return;
const targetElement = document.querySelector(targetId);
if (targetElement) {
targetElement.scrollIntoView({
behavior: 'smooth'
});
}
});
});
</script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=antocarloss/expo-mix-brasil" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>