Hugging Face's logo

Spaces:
antocarloss
/
expomix-final
Running

App Files Community
antocarloss commited on
Commit
22f6fcb
·
verified ·
1 Parent(s): 31508bc

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. - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +6 -4
  2. index.html +534 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Expomix Final
3
- emoji: 🏢
4
  colorFrom: pink
5
- colorTo: indigo
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: expomix-final
3
+ emoji: 🐳
4
  colorFrom: pink
5
+ colorTo: pink
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,534 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="pt-BR">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>ExpoMix 2025 – Feira Multissetorial de Moda, Decor e Lifestyle</title>
7
+ <meta name="description" content="Evento multissetorial com expositores, lançamentos, networking e experiências.">
8
+ <meta property="og:title" content="ExpoMix 2025 – Feira Multissetorial de Moda, Decor e Lifestyle">
9
+ <meta property="og:description" content="Evento multissetorial com expositores, lançamentos, networking e experiências.">
10
+ <meta property="og:image" content="banner-principal-site (1).jpg">
11
+ <meta property="og:type" content="website">
12
+ <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22 fill=%22%23ff5a1f%22>E</text></svg>">
13
+ <script src="https://cdn.tailwindcss.com"></script>
14
+ <script src="https://unpkg.com/feather-icons"></script>
15
+ <style>
16
+ @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700;900&family=Inter:wght@300;400;500;600&display=swap');
17
+
18
+ body {
19
+ font-family: 'Inter', sans-serif;
20
+ background-color: #f6e6f2;
21
+ background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxkZWZzPjxwYXR0ZXJuIGlkPSJwYXR0ZXJuIiB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHBhdHRlcm5Vbml0cz0idXNlclNwYWNlT25Vc2UiIHBhdHRlcm5UcmFuc2Zvcm09InJvdGF0ZSg0NSkiPjxyZWN0IHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0icmdiYSgyNTUsMjU1LDI1NSwwLjA1KSIvPjwvcGF0dGVybj48L2RlZnM+PHJlY3QgZmlsbD0idXJsKCNwYXR0ZXJuKSIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIvPjwvc3ZnPg==');
22
+ }
23
+
24
+ .handwritten {
25
+ font-family: 'Caveat', cursive;
26
+ color: #ff5a1f;
27
+ }
28
+
29
+ .serif-title {
30
+ font-family: 'Playfair Display', serif;
31
+ letter-spacing: -0.5px;
32
+ }
33
+
34
+ .bg-grunge {
35
+ background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxkZWZzPjxmaWx0ZXIgaWQ9Im5vaXNlIiB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIj48ZmVUdXJidWxlbmNlIHR5cGU9ImZyYWN0YWxOb2lzZSIgYmFzZUZyZXF1ZW5jeT0iMC4wNSIgbnVtT2N0YXZlcz0iMTAiIHN0aXRjaFRpbGVzPSJzdGl0Y2giLz48L2ZpbHRlcj48L2RlZnM+PHJlY3QgZmlsdGVyPSJ1cmwoI25vaXNlKSIgb3BhY2l0eT0iMC4wNSIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIvPjwvc3ZnPg==');
36
+ }
37
+
38
+ .btn-orange {
39
+ background-color: #ff5a1f;
40
+ transition: all 0.3s ease;
41
+ }
42
+
43
+ .btn-orange:hover {
44
+ transform: scale(1.05);
45
+ box-shadow: 0 4px 15px rgba(255, 90, 31, 0.4);
46
+ }
47
+
48
+ .text-blue {
49
+ color: #108db6;
50
+ }
51
+
52
+ .bg-blue {
53
+ background-color: #108db6;
54
+ }
55
+
56
+ .fade-in {
57
+ animation: fadeIn 1s ease-in-out;
58
+ }
59
+
60
+ @keyframes fadeIn {
61
+ from { opacity: 0; transform: translateY(20px); }
62
+ to { opacity: 1; transform: translateY(0); }
63
+ }
64
+
65
+ .handwritten-element {
66
+ position: absolute;
67
+ font-family: 'Caveat', cursive;
68
+ color: #ff5a1f;
69
+ font-size: 1.2rem;
70
+ transform: rotate(-5deg);
71
+ opacity: 0.9;
72
+ pointer-events: none;
73
+ z-index: 1;
74
+ }
75
+
76
+ .parallax {
77
+ background-attachment: fixed;
78
+ background-position: center;
79
+ background-repeat: no-repeat;
80
+ background-size: cover;
81
+ }
82
+
83
+ @media (max-width: 768px) {
84
+ .parallax {
85
+ background-attachment: scroll;
86
+ }
87
+ }
88
+ </style>
89
+ </head>
90
+ <body class="overflow-x-hidden">
91
+ <!-- WhatsApp Floating Button -->
92
+ <a href="https://wa.me/55619993073003" aria-label="Contato via WhatsApp" class="fixed bottom-6 right-6 z-50 bg-green-500 text-white p-4 rounded-full shadow-lg hover:bg-green-600 transition-all duration-300 hover:scale-110">
93
+ <i data-feather="message-circle" class="w-6 h-6"></i>
94
+ </a>
95
+
96
+ <!-- Hero Section -->
97
+ <section class="relative h-screen w-full overflow-hidden" style="background-color: #f0e6ff;">
98
+ <div class="absolute inset-0 flex items-center justify-center">
99
+ <div class="container mx-auto px-4 text-center relative z-10">
100
+ <p class="text-xl md:text-2xl lg:text-3xl font-light text-gray-700 mb-2 fade-in">Moda • Decor • Lifestyle</p>
101
+ <h1 class="serif-title text-5xl md:text-7xl lg:text-8xl font-bold text-[#ff5a1f] mb-4 fade-in">ExpoMix 2025</h1>
102
+ <p class="text-lg md:text-xl lg:text-2xl font-light text-gray-700 max-w-2xl mx-auto mb-8 fade-in" style="animation-delay: 0.3s;">
103
+ Feira multissetorial voltada ao universo da moda, design e lifestyle. Lançamentos, networking e oportunidades de negócios para marcas, lojistas e consumidores.
104
+ </p>
105
+ <p class="text-xl font-bold text-gray-700 mb-8 fade-in" style="animation-delay: 0.4s;">24–28 SET | Anápolis–GO</p>
106
+ <div class="flex flex-col sm:flex-row justify-center gap-4 fade-in" style="animation-delay: 0.6s;">
107
+ <a href="https://wa.me/55619993073003" class="btn-orange inline-block text-white font-bold py-3 px-8 rounded-md text-lg">Quero expor</a>
108
+ <a href="https://wa.me/55619993073003" class="bg-white text-[#ff5a1f] inline-block font-bold py-3 px-8 rounded-md text-lg hover:bg-gray-100 transition-colors">Quero participar</a>
109
+ </div>
110
+ </div>
111
+ </div>
112
+
113
+ <!-- Handwritten background elements -->
114
+ <div class="handwritten-element" style="top: 20%; left: 10%; transform: rotate(-15deg); opacity: 0.6; font-size: 2.5rem;">Objetivos</div>
115
+ <div class="handwritten-element" style="top: 30%; right: 15%; transform: rotate(5deg); opacity: 0.5; font-size: 2.2rem;">Público Alvo</div>
116
+ <div class="handwritten-element" style="bottom: 25%; left: 20%; transform: rotate(-8deg); opacity: 0.4; font-size: 2.8rem;">Justificativa</div>
117
+ <div class="handwritten-element" style="bottom: 35%; right: 10%; transform: rotate(12deg); opacity: 0.3; font-size: 2rem;">Objetivos</div>
118
+ <div class="handwritten-element" style="top: 25%; left: 25%; transform: rotate(-5deg); opacity: 0.5; font-size: 2.3rem;">Público Alvo</div>
119
+ <div class="handwritten-element" style="bottom: 30%; right: 25%; transform: rotate(8deg); opacity: 0.4; font-size: 2.5rem;">Justificativa</div>
120
+ </section>
121
+
122
+ <!-- About Section -->
123
+ <section class="py-16 bg-grunge">
124
+ <div class="container mx-auto px-4">
125
+ <div class="flex flex-col lg:flex-row items-center gap-12">
126
+ <div class="lg:w-1/2 fade-in">
127
+ <h2 class="serif-title text-4xl font-bold text-[#ff5a1f] mb-6">Sobre o evento</h2>
128
+ <p class="text-lg mb-6">A ExpoMix é uma feira multissetorial que reúne os principais expositores de moda, design e lifestyle em um único espaço. Com foco em acessórios, vestuário, cama/mesa/banho, joias e decoração, o evento proporciona oportunidades únicas de negócio e networking.</p>
129
+
130
+ <div class="space-y-3">
131
+ <div class="flex items-center">
132
+ <i data-feather="shopping-bag" class="text-[#ff5a1f] mr-3"></i>
133
+ <span>Diversidade de segmentos em um só lugar</span>
134
+ </div>
135
+ <div class="flex items-center">
136
+ <i data-feather="star" class="text-[#ff5a1f] mr-3"></i>
137
+ <span>Experiências exclusivas para visitantes</span>
138
+ </div>
139
+ </div>
140
+ </div>
141
+ <div class="lg:w-1/2 fade-in" style="animation-delay: 0.3s;">
142
+ <img src="1.png" alt="Sobre a ExpoMix" class="w-full rounded-lg shadow-xl">
143
+ </div>
144
+ </div>
145
+ </div>
146
+ </section>
147
+
148
+ <!-- Objectives Section -->
149
+ <section class="py-16 bg-white">
150
+ <div class="container mx-auto px-4">
151
+ <div class="flex flex-col lg:flex-row items-center gap-12">
152
+ <div class="lg:w-1/2 order-2 lg:order-1 fade-in" style="animation-delay: 0.3s;">
153
+ <img src="2.png" alt="Objetivos da ExpoMix" class="w-full rounded-lg shadow-xl">
154
+ </div>
155
+ <div class="lg:w-1/2 order-1 lg:order-2 fade-in">
156
+ <h2 class="serif-title text-4xl font-bold text-[#ff5a1f] mb-6">Objetivos</h2>
157
+
158
+ <div class="space-y-4">
159
+ <div class="flex items-start">
160
+ <i data-feather="check" class="text-[#ff5a1f] mr-3 mt-1"></i>
161
+ <span>Reunir os principais players regionais em um único espaço</span>
162
+ </div>
163
+ <div class="flex items-start">
164
+ <i data-feather="check" class="text-[#ff5a1f] mr-3 mt-1"></i>
165
+ <span>Estimular vendas diretas entre expositores e visitantes</span>
166
+ </div>
167
+ <div class="flex items-start">
168
+ <i data-feather="check" class="text-[#ff5a1f] mr-3 mt-1"></i>
169
+ <span>Promover lançamentos e novidades do mercado</span>
170
+ </div>
171
+ <div class="flex items-start">
172
+ <i data-feather="check" class="text-[#ff5a1f] mr-3 mt-1"></i>
173
+ <span>Oportunidades de networking e visibilidade para marcas</span>
174
+ </div>
175
+ </div>
176
+ </div>
177
+ </div>
178
+ </div>
179
+ </section>
180
+
181
+ <!-- Justification Section -->
182
+ <section class="py-16 bg-gray-50 relative overflow-hidden">
183
+ <div class="container mx-auto px-4 relative z-10">
184
+ <!-- Handwritten background elements -->
185
+ <div class="handwritten-element" style="top: 10%; left: 5%; transform: rotate(-12deg); opacity: 0.6; font-size: 2rem;">moda</div>
186
+ <div class="handwritten-element" style="top: 25%; right: 8%; transform: rotate(8deg); opacity: 0.5; font-size: 2.5rem;">shop</div>
187
+ <div class="handwritten-element" style="bottom: 20%; left: 7%; transform: rotate(-5deg); opacity: 0.4; font-size: 2.2rem;">casa</div>
188
+ <div class="handwritten-element" style="bottom: 30%; right: 5%; transform: rotate(15deg); opacity: 0.3; font-size: 1.8rem;">agro</div>
189
+ <div class="handwritten-element" style="top: 15%; left: 20%; transform: rotate(-8deg); opacity: 0.5; font-size: 2.3rem;">pet</div>
190
+ <div class="handwritten-element" style="bottom: 15%; right: 20%; transform: rotate(10deg); opacity: 0.4; font-size: 2.4rem;">decoração</div>
191
+ <div class="flex flex-col lg:flex-row items-center gap-12">
192
+ <div class="lg:w-1/2 fade-in">
193
+ <h2 class="serif-title text-4xl font-bold text-[#ff5a1f] mb-6">Justificativa</h2>
194
+ <p class="text-lg mb-4">A região Centro-Oeste apresenta um crescimento econômico consistente, com destaque para os setores de moda, decoração e lifestyle. No entanto, faltam espaços qualificados que reúnam expositores e compradores em um ambiente profissional e inspirador.</p>
195
+ <p class="text-lg">A ExpoMix surge para preencher essa lacuna, oferecendo uma plataforma completa para exposição, vendas e troca de experiências entre marcas e consumidores finais.</p>
196
+ </div>
197
+ <div class="lg:w-1/2 fade-in" style="animation-delay: 0.3s;">
198
+ <img src="3.png" alt="Justificativa da ExpoMix" class="w-full rounded-lg shadow-xl">
199
+ </div>
200
+ </div>
201
+ </div>
202
+ </section>
203
+
204
+ <!-- Target Audience Section -->
205
+ <section class="py-16 bg-grunge">
206
+ <div class="container mx-auto px-4">
207
+ <h2 class="serif-title text-4xl font-bold text-[#ff5a1f] mb-12 text-center fade-in">Público-Alvo</h2>
208
+
209
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
210
+ <div class="bg-white p-6 rounded-lg shadow-md hover:shadow-xl transition-shadow duration-300 fade-in">
211
+ <div class="text-blue text-4xl mb-4">
212
+ <i data-feather="shopping-bag"></i>
213
+ </div>
214
+ <h3 class="serif-title text-xl font-bold mb-2">Consumidores</h3>
215
+ <p>Público interessado em moda, decor e lifestyle, em busca de novidades e experiências exclusivas.</p>
216
+ </div>
217
+
218
+ <div class="bg-white p-6 rounded-lg shadow-md hover:shadow-xl transition-shadow duration-300 fade-in" style="animation-delay: 0.2s;">
219
+ <div class="text-blue text-4xl mb-4">
220
+ <i data-feather="tag"></i>
221
+ </div>
222
+ <h3 class="serif-title text-xl font-bold mb-2">Lojistas e Marcas</h3>
223
+ <p>Varejistas regionais e nacionais em busca de novos fornecedores e parcerias comerciais.</p>
224
+ </div>
225
+
226
+ <div class="bg-white p-6 rounded-lg shadow-md hover:shadow-xl transition-shadow duration-300 fade-in" style="animation-delay: 0.4s;">
227
+ <div class="text-blue text-4xl mb-4">
228
+ <i data-feather="users"></i>
229
+ </div>
230
+ <h3 class="serif-title text-xl font-bold mb-2">Influenciadores</h3>
231
+ <p>Criadores de conteúdo e formadores de opinião dos segmentos abordados no evento.</p>
232
+ </div>
233
+
234
+ <div class="bg-white p-6 rounded-lg shadow-md hover:shadow-xl transition-shadow duration-300 fade-in" style="animation-delay: 0.6s;">
235
+ <div class="text-blue text-4xl mb-4">
236
+ <i data-feather="briefcase"></i>
237
+ </div>
238
+ <h3 class="serif-title text-xl font-bold mb-2">Empreendedores</h3>
239
+ <p>Investidores e empresários buscando oportunidades no mercado de moda e lifestyle.</p>
240
+ </div>
241
+ </div>
242
+ </div>
243
+ </section>
244
+
245
+ <!-- Structure Section -->
246
+ <section class="py-16 bg-white">
247
+ <div class="container mx-auto px-4">
248
+ <h2 class="serif-title text-4xl font-bold text-[#ff5a1f] mb-12 text-center fade-in">Estrutura</h2>
249
+
250
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
251
+ <div class="text-center fade-in">
252
+ <div class="mb-4 h-40 bg-gray-100 rounded-lg flex items-center justify-center">
253
+ <span class="text-gray-400">Imagem Estande Básico</span>
254
+ </div>
255
+ <h3 class="serif-title text-xl font-bold mb-2">Estande Básico</h3>
256
+ <p>Estandes modulares de 3x3m, com estrutura completa e personalização opcional.</p>
257
+ </div>
258
+
259
+ <div class="text-center fade-in" style="animation-delay: 0.2s;">
260
+ <div class="mb-4 h-40 bg-gray-100 rounded-lg flex items-center justify-center">
261
+ <span class="text-gray-400">Imagem Estandes Personalizados</span>
262
+ </div>
263
+ <h3 class="serif-title text-xl font-bold mb-2">Estandes Personalizados</h3>
264
+ <p>Espaços maiores com projetos exclusivos para marcas que desejam maior impacto.</p>
265
+ </div>
266
+
267
+ <div class="text-center fade-in" style="animation-delay: 0.4s;">
268
+ <div class="mb-4 h-40 bg-gray-100 rounded-lg flex items-center justify-center">
269
+ <span class="text-gray-400">Imagem Áreas de Networking</span>
270
+ </div>
271
+ <h3 class="serif-title text-xl font-bold mb-2">Áreas de Networking</h3>
272
+ <p>Lounges e espaços de convivência para reuniões e conexões entre participantes.</p>
273
+ </div>
274
+
275
+ <div class="text-center fade-in" style="animation-delay: 0.6s;">
276
+ <div class="mb-4 h-40 bg-gray-100 rounded-lg flex items-center justify-center">
277
+ <span class="text-gray-400">Imagem Espaço Kids</span>
278
+ </div>
279
+ <h3 class="serif-title text-xl font-bold mb-2">Espaço Kids</h3>
280
+ <p>Área recreativa para crianças, permitindo que os pais aproveitem o evento com tranquilidade.</p>
281
+ </div>
282
+ </div>
283
+ </div>
284
+ </section>
285
+
286
+ <!-- Action Plan Section -->
287
+ <section class="py-16 bg-grunge">
288
+ <div class="container mx-auto px-4">
289
+ <h2 class="serif-title text-4xl font-bold text-[#ff5a1f] mb-12 text-center fade-in">Plano de Ação</h2>
290
+
291
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
292
+ <div class="bg-white p-6 rounded-lg shadow-md fade-in">
293
+ <div class="mb-4 h-40 bg-gray-100 rounded-lg flex items-center justify-center">
294
+ <span class="text-gray-400">Imagem Captação</span>
295
+ </div>
296
+ <div class="flex items-center mb-4">
297
+ <div class="bg-blue text-white p-3 rounded-full mr-4">
298
+ <i data-feather="search" class="w-6 h-6"></i>
299
+ </div>
300
+ <h3 class="serif-title text-xl font-bold">Captação e Curadoria</h3>
301
+ </div>
302
+ <p>Seleção estratégica de expositores alinhados ao perfil do evento e às expectativas do público.</p>
303
+ </div>
304
+
305
+ <div class="bg-white p-6 rounded-lg shadow-md fade-in" style="animation-delay: 0.2s;">
306
+ <div class="mb-4 h-40 bg-gray-100 rounded-lg flex items-center justify-center">
307
+ <span class="text-gray-400">Imagem Infraestrutura</span>
308
+ </div>
309
+ <div class="flex items-center mb-4">
310
+ <div class="bg-blue text-white p-3 rounded-full mr-4">
311
+ <i data-feather="tool" class="w-6 h-6"></i>
312
+ </div>
313
+ <h3 class="serif-title text-xl font-bold">Infraestrutura</h3>
314
+ </div>
315
+ <p>Montagem de estandes, lounges e toda a estrutura necessária para o conforto dos participantes.</p>
316
+ </div>
317
+
318
+ <div class="bg-white p-6 rounded-lg shadow-md fade-in" style="animation-delay: 0.4s;">
319
+ <div class="mb-4 h-40 bg-gray-100 rounded-lg flex items-center justify-center">
320
+ <span class="text-gray-400">Imagem Comunicação</span>
321
+ </div>
322
+ <div class="flex items-center mb-4">
323
+ <div class="bg-blue text-white p-3 rounded-full mr-4">
324
+ <i data-feather="megaphone" class="w-6 h-6"></i>
325
+ </div>
326
+ <h3 class="serif-title text-xl font-bold">Comunicação</h3>
327
+ </div>
328
+ <p>Campanhas online e offline com influenciadores para ampliar o alcance do evento.</p>
329
+ </div>
330
+
331
+ <div class="bg-white p-6 rounded-lg shadow-md fade-in" style="animation-delay: 0.6s;">
332
+ <div class="mb-4 h-40 bg-gray-100 rounded-lg flex items-center justify-center">
333
+ <span class="text-gray-400">Imagem Programação</span>
334
+ </div>
335
+ <div class="flex items-center mb-4">
336
+ <div class="bg-blue text-white p-3 rounded-full mr-4">
337
+ <i data-feather="calendar" class="w-6 h-6"></i>
338
+ </div>
339
+ <h3 class="serif-title text-xl font-bold">Programação</h3>
340
+ </div>
341
+ <p>Palestras, desfiles, workshops e experiências sensoriais para engajar o público.</p>
342
+ </div>
343
+
344
+ <div class="bg-white p-6 rounded-lg shadow-md fade-in" style="animation-delay: 0.8s;">
345
+ <div class="mb-4 h-40 bg-gray-100 rounded-lg flex items-center justify-center">
346
+ <span class="text-gray-400">Imagem Operacional</span>
347
+ </div>
348
+ <div class="flex items-center mb-4">
349
+ <div class="bg-blue text-white p-3 rounded-full mr-4">
350
+ <i data-feather="clipboard" class="w-6 h-6"></i>
351
+ </div>
352
+ <h3 class="serif-title text-xl font-bold">Operacional</h3>
353
+ </div>
354
+ <p>Recepção, segurança, limpeza, apoio técnico e gestão de expositores durante todo o evento.</p>
355
+ </div>
356
+
357
+ <div class="bg-white p-6 rounded-lg shadow-md fade-in" style="animation-delay: 1s;">
358
+ <div class="mb-4 h-40 bg-gray-100 rounded-lg flex items-center justify-center">
359
+ <span class="text-gray-400">Imagem Pós-Evento</span>
360
+ </div>
361
+ <div class="flex items-center mb-4">
362
+ <div class="bg-blue text-white p-3 rounded-full mr-4">
363
+ <i data-feather="arrow-right" class="w-6 h-6"></i>
364
+ </div>
365
+ <h3 class="serif-title text-xl font-bold">Pós-Evento</h3>
366
+ </div>
367
+ <p>Relatórios de desempenho, feedback dos participantes e planejamento para a próxima edição.</p>
368
+ </div>
369
+ </div>
370
+ </div>
371
+ </section>
372
+
373
+ <!-- Benefits Section -->
374
+ <section class="py-16 bg-white">
375
+ <div class="container mx-auto px-4">
376
+ <h2 class="serif-title text-4xl font-bold text-[#ff5a1f] mb-12 text-center fade-in">Contrapartida aos Expositores</h2>
377
+
378
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
379
+ <div class="text-center p-4 rounded-lg border border-gray-200 fade-in">
380
+ <div class="mb-4 h-24 bg-gray-100 rounded-lg flex items-center justify-center">
381
+ <span class="text-gray-400">Imagem Estande</span>
382
+ </div>
383
+ <div class="flex items-start">
384
+ <div class="bg-blue text-white p-2 rounded-full mr-4">
385
+ <i data-feather="check" class="w-4 h-4"></i>
386
+ </div>
387
+ <span>Estande montado e equipado</span>
388
+ </div>
389
+ </div>
390
+
391
+ <div class="text-center p-4 rounded-lg border border-gray-200 fade-in" style="animation-delay: 0.1s;">
392
+ <div class="mb-4 h-24 bg-gray-100 rounded-lg flex items-center justify-center">
393
+ <span class="text-gray-400">Imagem Divulgação</span>
394
+ </div>
395
+ <div class="flex items-start">
396
+ <div class="bg-blue text-white p-2 rounded-full mr-4">
397
+ <i data-feather="check" class="w-4 h-4"></i>
398
+ </div>
399
+ <span>Divulgação nas redes sociais e site</span>
400
+ </div>
401
+ </div>
402
+
403
+ <div class="text-center p-4 rounded-lg border border-gray-200 fade-in" style="animation-delay: 0.2s;">
404
+ <div class="mb-4 h-24 bg-gray-100 rounded-lg flex items-center justify-center">
405
+ <span class="text-gray-400">Imagem Catálogo</span>
406
+ </div>
407
+ <div class="flex items-start">
408
+ <div class="bg-blue text-white p-2 rounded-full mr-4">
409
+ <i data-feather="check" class="w-4 h-4"></i>
410
+ </div>
411
+ <span>Catálogo digital com todas as marcas</span>
412
+ </div>
413
+ </div>
414
+
415
+ <div class="text-center p-4 rounded-lg border border-gray-200 fade-in" style="animation-delay: 0.3s;">
416
+ <div class="mb-4 h-24 bg-gray-100 rounded-lg flex items-center justify-center">
417
+ <span class="text-gray-400">Imagem Negócios</span>
418
+ </div>
419
+ <div class="flex items-start">
420
+ <div class="bg-blue text-white p-2 rounded-full mr-4">
421
+ <i data-feather="check" class="w-4 h-4"></i>
422
+ </div>
423
+ <span>Rodadas de negócios programadas</span>
424
+ </div>
425
+ </div>
426
+
427
+ <div class="text-center p-4 rounded-lg border border-gray-200 fade-in" style="animation-delay: 0.4s;">
428
+ <div class="mb-4 h-24 bg-gray-100 rounded-lg flex items-center justify-center">
429
+ <span class="text-gray-400">Imagem Promoções</span>
430
+ </div>
431
+ <div class="flex items-start">
432
+ <div class="bg-blue text-white p-2 rounded-full mr-4">
433
+ <i data-feather="check" class="w-4 h-4"></i>
434
+ </div>
435
+ <span>Ações promocionais durante o evento</span>
436
+ </div>
437
+ </div>
438
+
439
+ <div class="text-center p-4 rounded-lg border border-gray-200 fade-in" style="animation-delay: 0.5s;">
440
+ <div class="mb-4 h-24 bg-gray-100 rounded-lg flex items-center justify-center">
441
+ <span class="text-gray-400">Imagem Certificado</span>
442
+ </div>
443
+ <div class="flex items-start">
444
+ <div class="bg-blue text-white p-2 rounded-full mr-4">
445
+ <i data-feather="check" class="w-4 h-4"></i>
446
+ </div>
447
+ <span>Certificado + selo de expositor oficial</span>
448
+ </div>
449
+ </div>
450
+ </div>
451
+ </div>
452
+ </section>
453
+
454
+ <!-- Partnership Section -->
455
+ <section class="py-16 bg-gray-50">
456
+ <div class="container mx-auto px-4 max-w-3xl text-center fade-in">
457
+ <h2 class="serif-title text-4xl font-bold text-[#ff5a1f] mb-6">Parceria Municipal</h2>
458
+ <p class="text-lg mb-6">A ExpoMix conta com o apoio institucional da Prefeitura Municipal, que disponibiliza o local adequado, orientações para liberações necessárias e apoio logístico para a realização do evento.</p>
459
+ <p class="text-lg">Além disso, o evento contempla ações sociais que beneficiam a comunidade local, reforçando nosso compromisso com o desenvolvimento regional.</p>
460
+ </div>
461
+ </section>
462
+
463
+ <!-- Contact Section -->
464
+ <section class="py-16 bg-[#ff5a1f] text-white">
465
+ <div class="container mx-auto px-4">
466
+ <h2 class="serif-title text-4xl font-bold mb-12 text-center fade-in">Contato</h2>
467
+
468
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
469
+ <div class="text-center fade-in">
470
+ <div class="text-4xl mb-4">
471
+ <i data-feather="phone"></i>
472
+ </div>
473
+ <p class="font-bold">(61) 9 99307-3003</p>
474
+ </div>
475
+
476
+ <div class="text-center fade-in" style="animation-delay: 0.2s;">
477
+ <div class="text-4xl mb-4">
478
+ <i data-feather="phone"></i>
479
+ </div>
480
+ <p class="font-bold">(61) 9 99818-2140</p>
481
+ </div>
482
+
483
+ <div class="text-center fade-in" style="animation-delay: 0.4s;">
484
+ <div class="text-4xl mb-4">
485
+ <i data-feather="mail"></i>
486
+ </div>
487
+ <p class="font-bold">contato@groupbuzz.com.br</p>
488
+ </div>
489
+
490
+ <div class="text-center fade-in" style="animation-delay: 0.6s;">
491
+ <div class="text-4xl mb-4">
492
+ <i data-feather="globe"></i>
493
+ </div>
494
+ <p class="font-bold">www.groupbuzz.com.br</p>
495
+ </div>
496
+ </div>
497
+
498
+ <div class="text-center mt-12 fade-in">
499
+ <a href="https://wa.me/55619993073003" class="btn-orange inline-block text-white font-bold py-4 px-12 rounded-md text-lg border-2 border-white">Quero expor na ExpoMix</a>
500
+ </div>
501
+ </div>
502
+ </section>
503
+
504
+ <!-- Footer -->
505
+ <footer class="py-8 bg-gray-900 text-white text-center">
506
+ <div class="container mx-auto px-4">
507
+ <p>© 2025 ExpoMix – Feira Multissetorial. Todos os direitos reservados.</p>
508
+ </div>
509
+ </footer>
510
+
511
+ <script>
512
+ feather.replace();
513
+
514
+ // Add handwritten elements dynamically
515
+ document.addEventListener('DOMContentLoaded', function() {
516
+ // Add more handwritten elements if needed
517
+ const handwrittenWords = ['novidades', 'tendências', 'inspiração', 'conexões', 'oportunidades', 'criatividade'];
518
+
519
+ // Add animation to elements when they come into view
520
+ const observer = new IntersectionObserver((entries) => {
521
+ entries.forEach(entry => {
522
+ if (entry.isIntersecting) {
523
+ entry.target.classList.add('fade-in');
524
+ }
525
+ });
526
+ }, { threshold: 0.1 });
527
+
528
+ document.querySelectorAll('.fade-in').forEach(el => {
529
+ observer.observe(el);
530
+ });
531
+ });
532
+ </script>
533
+ <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/expomix-final" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
534
+ </html>