LIMATEC commited on
Commit
97fc46e
·
verified ·
1 Parent(s): f4b050c

🔧 Prestação de Serviços em Manutenção Industrial Especialistas em Máquinas para Garrafas PET, Estamparia e Sistemas Mecânicos Seja bem-vindo à TECNOPACK, referência em soluções industriais completas. Somos especializados em manutenção preventiva e corretiva para máquinas e equipamentos voltados ao setor de embalagens, especialmente no segmento de garrafas PET. Nosso compromisso é garantir que sua produção funcione com máxima eficiência, evitando paradas inesperadas e reduzindo custos operacionais com um serviço técnico de alto padrão. 🛠️ Manutenção Preventiva A manutenção preventiva é o pilar da produtividade. Através de um planejamento técnico estruturado, realizamos: Inspeções regulares em pontos críticos do equipamento Lubrificação de componentes móveis Reaperto de parafusos e conexões mecânicas Limpeza técnica detalhada Substituição de peças desgastadas antes da falha Acompanhamento com relatórios técnicos periódicos Tudo isso com foco em prolongar a vida útil dos equipamentos, melhorar o desempenho das máquinas e assegurar a segurança operacional. 🔩 Manutenção Corretiva Mesmo com a melhor prevenção, falhas podem ocorrer — e é nesse momento que a equipe especializada da TECNOPACK atua com agilidade e precisão. Nossos serviços de manutenção corretiva incluem: Reparos rápidos e eficientes em peças danificadas ou quebradas Ajustes finos em subconjuntos e componentes críticos Diagnóstico técnico de falhas com equipamentos específicos Substituição emergencial de peças Correções em sistemas de sopro, moldagem e estamparia Restauramos o funcionamento da sua linha de produção com o menor tempo de inatividade possível. 🧩 Áreas de Atuação Especializadas Trabalhamos com foco em diversas áreas da indústria de transformação de plásticos, especialmente: Máquinas para sopro e moldagem de garrafas PET Equipamentos de estiramento e resfriamento Sistemas de estamparia de tampas e pré-formas Prensas hidráulicas e pneumáticas Esteiras, alimentadores, motoredutores e subconjuntos auxiliares Se você possui uma linha de produção industrial no segmento PET, saiba que a TECNOPACK tem experiência prática em cada etapa do processo. 📈 Por Que Escolher a TECNOPACK? ✔ Equipe técnica qualificada e experiente ✔ Atendimento rápido e personalizado ✔ Relatórios técnicos completos ✔ Compromisso com prazos e resultados ✔ Cobertura regional e nacional ✔ Excelência em manutenção industrial 📞 Entre em Contato Está enfrentando falhas em sua linha de produção? Precisa evitar paradas inesperadas? Fale com a equipe da TECNOPACK agora mesmo e solicite um diagnóstico técnico ou agende uma visita: 📧 Email: contato@tecnopack.com.br 📱 WhatsApp: (00) 00000-0000 ☎ Telefone: (00) 0000-0000 TECNOPACK — Tecnologia, Precisão e Confiabilidade no seu processo industrial. - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +485 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Tecnopack
3
- emoji: 👁
4
- colorFrom: yellow
5
- colorTo: pink
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: tecnopack
3
+ emoji: 🐳
4
+ colorFrom: gray
5
+ colorTo: yellow
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,485 @@
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>TECNOPACK - Manutenção Industrial Especializada</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ .hero-gradient {
11
+ background: linear-gradient(135deg, #1e3a8a 0%, #0ea5e9 100%);
12
+ }
13
+ .service-card:hover {
14
+ transform: translateY(-5px);
15
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
16
+ }
17
+ .floating {
18
+ animation: floating 3s ease-in-out infinite;
19
+ }
20
+ @keyframes floating {
21
+ 0% { transform: translateY(0px); }
22
+ 50% { transform: translateY(-10px); }
23
+ 100% { transform: translateY(0px); }
24
+ }
25
+ </style>
26
+ </head>
27
+ <body class="font-sans bg-gray-50">
28
+ <!-- Header/Navigation -->
29
+ <header class="bg-white shadow-md sticky top-0 z-50">
30
+ <div class="container mx-auto px-4 py-3 flex justify-between items-center">
31
+ <div class="flex items-center">
32
+ <div class="bg-blue-600 text-white p-2 rounded-lg mr-3">
33
+ <i class="fas fa-cogs text-2xl"></i>
34
+ </div>
35
+ <h1 class="text-xl md:text-2xl font-bold text-blue-800">TECNOPACK</h1>
36
+ </div>
37
+ <nav class="hidden md:flex space-x-8">
38
+ <a href="#servicos" class="text-gray-700 hover:text-blue-600 font-medium">Serviços</a>
39
+ <a href="#sobre" class="text-gray-700 hover:text-blue-600 font-medium">Sobre Nós</a>
40
+ <a href="#vantagens" class="text-gray-700 hover:text-blue-600 font-medium">Vantagens</a>
41
+ <a href="#contato" class="text-gray-700 hover:text-blue-600 font-medium">Contato</a>
42
+ </nav>
43
+ <button class="md:hidden text-gray-700" id="mobile-menu-button">
44
+ <i class="fas fa-bars text-2xl"></i>
45
+ </button>
46
+ </div>
47
+ <!-- Mobile Menu -->
48
+ <div class="md:hidden hidden bg-white w-full py-2 px-4 shadow-lg" id="mobile-menu">
49
+ <a href="#servicos" class="block py-2 text-gray-700 hover:text-blue-600">Serviços</a>
50
+ <a href="#sobre" class="block py-2 text-gray-700 hover:text-blue-600">Sobre Nós</a>
51
+ <a href="#vantagens" class="block py-2 text-gray-700 hover:text-blue-600">Vantagens</a>
52
+ <a href="#contato" class="block py-2 text-gray-700 hover:text-blue-600">Contato</a>
53
+ </div>
54
+ </header>
55
+
56
+ <!-- Hero Section -->
57
+ <section class="hero-gradient text-white py-16 md:py-24">
58
+ <div class="container mx-auto px-4 flex flex-col md:flex-row items-center">
59
+ <div class="md:w-1/2 mb-10 md:mb-0">
60
+ <h2 class="text-3xl md:text-5xl font-bold mb-6">Manutenção Industrial Especializada</h2>
61
+ <p class="text-lg md:text-xl mb-8">Soluções completas para máquinas de garrafas PET, estamparia e sistemas mecânicos. Maximize sua produção com nossa expertise técnica.</p>
62
+ <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
63
+ <a href="#contato" class="bg-white text-blue-600 hover:bg-gray-100 font-bold py-3 px-6 rounded-lg text-center transition duration-300">
64
+ <i class="fas fa-phone-alt mr-2"></i> Fale Conosco
65
+ </a>
66
+ <a href="#servicos" class="bg-transparent border-2 border-white hover:bg-blue-800 font-bold py-3 px-6 rounded-lg text-center transition duration-300">
67
+ <i class="fas fa-tools mr-2"></i> Nossos Serviços
68
+ </a>
69
+ </div>
70
+ </div>
71
+ <div class="md:w-1/2 flex justify-center">
72
+ <img src="https://images.unsplash.com/photo-1581094794329-c8112a89af12?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
73
+ alt="Máquinas industriais"
74
+ class="rounded-lg shadow-xl floating max-w-full h-auto md:max-w-md">
75
+ </div>
76
+ </div>
77
+ </section>
78
+
79
+ <!-- Services Section -->
80
+ <section id="servicos" class="py-16 bg-white">
81
+ <div class="container mx-auto px-4">
82
+ <div class="text-center mb-16">
83
+ <h2 class="text-3xl md:text-4xl font-bold text-blue-800 mb-4">Nossos Serviços</h2>
84
+ <div class="w-20 h-1 bg-blue-600 mx-auto mb-6"></div>
85
+ <p class="text-gray-600 max-w-3xl mx-auto">Especialistas em manutenção preventiva e corretiva para máquinas e equipamentos voltados ao setor de embalagens PET.</p>
86
+ </div>
87
+
88
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 gap-8">
89
+ <!-- Preventive Maintenance -->
90
+ <div class="service-card bg-gray-50 rounded-xl p-8 shadow-md transition duration-300 border-l-4 border-blue-600">
91
+ <div class="bg-blue-100 text-blue-600 w-16 h-16 rounded-full flex items-center justify-center mb-6">
92
+ <i class="fas fa-shield-alt text-2xl"></i>
93
+ </div>
94
+ <h3 class="text-2xl font-bold text-gray-800 mb-4">Manutenção Preventiva</h3>
95
+ <p class="text-gray-600 mb-4">O pilar da produtividade industrial com planejamento técnico estruturado para evitar falhas e paradas inesperadas.</p>
96
+ <ul class="space-y-2 text-gray-600">
97
+ <li class="flex items-start">
98
+ <i class="fas fa-check-circle text-blue-500 mt-1 mr-2"></i>
99
+ <span>Inspeções regulares em pontos críticos</span>
100
+ </li>
101
+ <li class="flex items-start">
102
+ <i class="fas fa-check-circle text-blue-500 mt-1 mr-2"></i>
103
+ <span>Lubrificação de componentes móveis</span>
104
+ </li>
105
+ <li class="flex items-start">
106
+ <i class="fas fa-check-circle text-blue-500 mt-1 mr-2"></i>
107
+ <span>Reaperto de parafusos e conexões</span>
108
+ </li>
109
+ <li class="flex items-start">
110
+ <i class="fas fa-check-circle text-blue-500 mt-1 mr-2"></i>
111
+ <span>Substituição programada de peças</span>
112
+ </li>
113
+ </ul>
114
+ </div>
115
+
116
+ <!-- Corrective Maintenance -->
117
+ <div class="service-card bg-gray-50 rounded-xl p-8 shadow-md transition duration-300 border-l-4 border-blue-600">
118
+ <div class="bg-blue-100 text-blue-600 w-16 h-16 rounded-full flex items-center justify-center mb-6">
119
+ <i class="fas fa-wrench text-2xl"></i>
120
+ </div>
121
+ <h3 class="text-2xl font-bold text-gray-800 mb-4">Manutenção Corretiva</h3>
122
+ <p class="text-gray-600 mb-4">Atuação ágil e precisa para reparos emergenciais que restauram sua produção com o menor tempo de inatividade.</p>
123
+ <ul class="space-y-2 text-gray-600">
124
+ <li class="flex items-start">
125
+ <i class="fas fa-check-circle text-blue-500 mt-1 mr-2"></i>
126
+ <span>Reparos rápidos em peças danificadas</span>
127
+ </li>
128
+ <li class="flex items-start">
129
+ <i class="fas fa-check-circle text-blue-500 mt-1 mr-2"></i>
130
+ <span>Ajustes finos em componentes críticos</span>
131
+ </li>
132
+ <li class="flex items-start">
133
+ <i class="fas fa-check-circle text-blue-500 mt-1 mr-2"></i>
134
+ <span>Diagnóstico técnico especializado</span>
135
+ </li>
136
+ <li class="flex items-start">
137
+ <i class="fas fa-check-circle text-blue-500 mt-1 mr-2"></i>
138
+ <span>Substituição emergencial de peças</span>
139
+ </li>
140
+ </ul>
141
+ </div>
142
+ </div>
143
+ </div>
144
+ </section>
145
+
146
+ <!-- About Section -->
147
+ <section id="sobre" class="py-16 bg-gray-50">
148
+ <div class="container mx-auto px-4">
149
+ <div class="flex flex-col lg:flex-row items-center">
150
+ <div class="lg:w-1/2 mb-10 lg:mb-0 lg:pr-10">
151
+ <img src="https://images.unsplash.com/photo-1516387938699-a93567ec168e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1471&q=80"
152
+ alt="Equipe TECNOPACK"
153
+ class="rounded-lg shadow-xl w-full">
154
+ </div>
155
+ <div class="lg:w-1/2">
156
+ <h2 class="text-3xl md:text-4xl font-bold text-blue-800 mb-6">Sobre a TECNOPACK</h2>
157
+ <div class="w-20 h-1 bg-blue-600 mb-6"></div>
158
+ <p class="text-gray-600 mb-6">Somos referência em soluções industriais completas, especializados em manutenção para máquinas e equipamentos voltados ao setor de embalagens, especialmente no segmento de garrafas PET.</p>
159
+
160
+ <div class="mb-8">
161
+ <h3 class="text-xl font-bold text-gray-800 mb-4">Áreas de Atuação Especializadas</h3>
162
+ <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
163
+ <div class="flex items-start">
164
+ <div class="bg-blue-100 text-blue-600 rounded-full p-2 mr-3">
165
+ <i class="fas fa-bottle-water text-sm"></i>
166
+ </div>
167
+ <span class="text-gray-600">Máquinas para sopro de garrafas PET</span>
168
+ </div>
169
+ <div class="flex items-start">
170
+ <div class="bg-blue-100 text-blue-600 rounded-full p-2 mr-3">
171
+ <i class="fas fa-industry text-sm"></i>
172
+ </div>
173
+ <span class="text-gray-600">Equipamentos de estamparia</span>
174
+ </div>
175
+ <div class="flex items-start">
176
+ <div class="bg-blue-100 text-blue-600 rounded-full p-2 mr-3">
177
+ <i class="fas fa-compress text-sm"></i>
178
+ </div>
179
+ <span class="text-gray-600">Prensas hidráulicas e pneumáticas</span>
180
+ </div>
181
+ <div class="flex items-start">
182
+ <div class="bg-blue-100 text-blue-600 rounded-full p-2 mr-3">
183
+ <i class="fas fa-cogs text-sm"></i>
184
+ </div>
185
+ <span class="text-gray-600">Sistemas mecânicos auxiliares</span>
186
+ </div>
187
+ </div>
188
+ </div>
189
+
190
+ <div class="bg-blue-50 border-l-4 border-blue-600 p-4 rounded-r-lg">
191
+ <p class="text-blue-800 font-medium italic">
192
+ <i class="fas fa-quote-left text-blue-400 mr-2"></i>
193
+ Nosso compromisso é garantir que sua produção funcione com máxima eficiência, evitando paradas inesperadas e reduzindo custos operacionais.
194
+ </p>
195
+ </div>
196
+ </div>
197
+ </div>
198
+ </div>
199
+ </section>
200
+
201
+ <!-- Advantages Section -->
202
+ <section id="vantagens" class="py-16 bg-white">
203
+ <div class="container mx-auto px-4">
204
+ <div class="text-center mb-16">
205
+ <h2 class="text-3xl md:text-4xl font-bold text-blue-800 mb-4">Por Que Escolher a TECNOPACK?</h2>
206
+ <div class="w-20 h-1 bg-blue-600 mx-auto mb-6"></div>
207
+ <p class="text-gray-600 max-w-3xl mx-auto">Excelência técnica e compromisso com resultados que fazem a diferença na sua produção.</p>
208
+ </div>
209
+
210
+ <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
211
+ <div class="bg-gray-50 p-8 rounded-xl shadow-sm hover:shadow-md transition duration-300">
212
+ <div class="bg-blue-100 text-blue-600 w-14 h-14 rounded-full flex items-center justify-center mb-6">
213
+ <i class="fas fa-user-tie text-xl"></i>
214
+ </div>
215
+ <h3 class="text-xl font-bold text-gray-800 mb-3">Equipe Qualificada</h3>
216
+ <p class="text-gray-600">Técnicos especializados com anos de experiência em manutenção industrial para garrafas PET.</p>
217
+ </div>
218
+
219
+ <div class="bg-gray-50 p-8 rounded-xl shadow-sm hover:shadow-md transition duration-300">
220
+ <div class="bg-blue-100 text-blue-600 w-14 h-14 rounded-full flex items-center justify-center mb-6">
221
+ <i class="fas fa-clock text-xl"></i>
222
+ </div>
223
+ <h3 class="text-xl font-bold text-gray-800 mb-3">Atendimento Rápido</h3>
224
+ <p class="text-gray-600">Resposta ágil para emergências e manutenções programadas com cumprimento rigoroso de prazos.</p>
225
+ </div>
226
+
227
+ <div class="bg-gray-50 p-8 rounded-xl shadow-sm hover:shadow-md transition duration-300">
228
+ <div class="bg-blue-100 text-blue-600 w-14 h-14 rounded-full flex items-center justify-center mb-6">
229
+ <i class="fas fa-chart-line text-xl"></i>
230
+ </div>
231
+ <h3 class="text-xl font-bold text-gray-800 mb-3">Relatórios Técnicos</h3>
232
+ <p class="text-gray-600">Documentação completa com diagnóstico, ações realizadas e recomendações para otimização.</p>
233
+ </div>
234
+
235
+ <div class="bg-gray-50 p-8 rounded-xl shadow-sm hover:shadow-md transition duration-300">
236
+ <div class="bg-blue-100 text-blue-600 w-14 h-14 rounded-full flex items-center justify-center mb-6">
237
+ <i class="fas fa-map-marked-alt text-xl"></i>
238
+ </div>
239
+ <h3 class="text-xl font-bold text-gray-800 mb-3">Cobertura Nacional</h3>
240
+ <p class="text-gray-600">Atendimento em todo território nacional com equipes regionais estrategicamente posicionadas.</p>
241
+ </div>
242
+
243
+ <div class="bg-gray-50 p-8 rounded-xl shadow-sm hover:shadow-md transition duration-300">
244
+ <div class="bg-blue-100 text-blue-600 w-14 h-14 rounded-full flex items-center justify-center mb-6">
245
+ <i class="fas fa-certificate text-xl"></i>
246
+ </div>
247
+ <h3 class="text-xl font-bold text-gray-800 mb-3">Padrão de Qualidade</h3>
248
+ <p class="text-gray-600">Processos padronizados que garantem a excelência em cada serviço prestado.</p>
249
+ </div>
250
+
251
+ <div class="bg-gray-50 p-8 rounded-xl shadow-sm hover:shadow-md transition duration-300">
252
+ <div class="bg-blue-100 text-blue-600 w-14 h-14 rounded-full flex items-center justify-center mb-6">
253
+ <i class="fas fa-headset text-xl"></i>
254
+ </div>
255
+ <h3 class="text-xl font-bold text-gray-800 mb-3">Suporte Personalizado</h3>
256
+ <p class="text-gray-600">Soluções adaptadas às necessidades específicas da sua linha de produção.</p>
257
+ </div>
258
+ </div>
259
+ </div>
260
+ </section>
261
+
262
+ <!-- Contact Section -->
263
+ <section id="contato" class="py-16 bg-blue-800 text-white">
264
+ <div class="container mx-auto px-4">
265
+ <div class="text-center mb-16">
266
+ <h2 class="text-3xl md:text-4xl font-bold mb-4">Entre em Contato</h2>
267
+ <div class="w-20 h-1 bg-white mx-auto mb-6"></div>
268
+ <p class="max-w-3xl mx-auto">Está enfrentando falhas em sua linha de produção? Precisa evitar paradas inesperadas? Fale com a equipe TECNOPACK agora mesmo.</p>
269
+ </div>
270
+
271
+ <div class="flex flex-col lg:flex-row gap-10">
272
+ <div class="lg:w-1/2">
273
+ <form class="space-y-6">
274
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
275
+ <div>
276
+ <label for="nome" class="block mb-2 font-medium">Nome</label>
277
+ <input type="text" id="nome" class="w-full px-4 py-3 rounded-lg bg-blue-700 border border-blue-600 focus:outline-none focus:ring-2 focus:ring-white placeholder-blue-300">
278
+ </div>
279
+ <div>
280
+ <label for="empresa" class="block mb-2 font-medium">Empresa</label>
281
+ <input type="text" id="empresa" class="w-full px-4 py-3 rounded-lg bg-blue-700 border border-blue-600 focus:outline-none focus:ring-2 focus:ring-white placeholder-blue-300">
282
+ </div>
283
+ </div>
284
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
285
+ <div>
286
+ <label for="email" class="block mb-2 font-medium">Email</label>
287
+ <input type="email" id="email" class="w-full px-4 py-3 rounded-lg bg-blue-700 border border-blue-600 focus:outline-none focus:ring-2 focus:ring-white placeholder-blue-300">
288
+ </div>
289
+ <div>
290
+ <label for="telefone" class="block mb-2 font-medium">Telefone</label>
291
+ <input type="tel" id="telefone" class="w-full px-4 py-3 rounded-lg bg-blue-700 border border-blue-600 focus:outline-none focus:ring-2 focus:ring-white placeholder-blue-300">
292
+ </div>
293
+ </div>
294
+ <div>
295
+ <label for="mensagem" class="block mb-2 font-medium">Mensagem</label>
296
+ <textarea id="mensagem" rows="4" class="w-full px-4 py-3 rounded-lg bg-blue-700 border border-blue-600 focus:outline-none focus:ring-2 focus:ring-white placeholder-blue-300"></textarea>
297
+ </div>
298
+ <button type="submit" class="bg-white text-blue-800 hover:bg-gray-100 font-bold py-3 px-6 rounded-lg transition duration-300 w-full md:w-auto">
299
+ <i class="fas fa-paper-plane mr-2"></i> Enviar Mensagem
300
+ </button>
301
+ </form>
302
+ </div>
303
+
304
+ <div class="lg:w-1/2">
305
+ <div class="bg-blue-700 p-8 rounded-xl h-full">
306
+ <h3 class="text-2xl font-bold mb-6">Informações de Contato</h3>
307
+
308
+ <div class="space-y-6">
309
+ <div class="flex items-start">
310
+ <div class="bg-blue-600 p-3 rounded-full mr-4">
311
+ <i class="fas fa-envelope text-white"></i>
312
+ </div>
313
+ <div>
314
+ <h4 class="font-bold mb-1">Email</h4>
315
+ <a href="mailto:contato@tecnopack.com.br" class="text-blue-200 hover:text-white">contato@tecnopack.com.br</a>
316
+ </div>
317
+ </div>
318
+
319
+ <div class="flex items-start">
320
+ <div class="bg-blue-600 p-3 rounded-full mr-4">
321
+ <i class="fas fa-phone-alt text-white"></i>
322
+ </div>
323
+ <div>
324
+ <h4 class="font-bold mb-1">Telefone</h4>
325
+ <a href="tel:00000000000" class="text-blue-200 hover:text-white">(00) 0000-0000</a>
326
+ </div>
327
+ </div>
328
+
329
+ <div class="flex items-start">
330
+ <div class="bg-blue-600 p-3 rounded-full mr-4">
331
+ <i class="fab fa-whatsapp text-white"></i>
332
+ </div>
333
+ <div>
334
+ <h4 class="font-bold mb-1">WhatsApp</h4>
335
+ <a href="https://wa.me/5500000000000" class="text-blue-200 hover:text-white">(00) 00000-0000</a>
336
+ </div>
337
+ </div>
338
+
339
+ <div class="flex items-start">
340
+ <div class="bg-blue-600 p-3 rounded-full mr-4">
341
+ <i class="fas fa-map-marker-alt text-white"></i>
342
+ </div>
343
+ <div>
344
+ <h4 class="font-bold mb-1">Endereço</h4>
345
+ <p class="text-blue-200">Av. Industrial, 1234 - Centro Industrial<br>CEP 00000-000 - Cidade/Estado</p>
346
+ </div>
347
+ </div>
348
+ </div>
349
+
350
+ <div class="mt-8 pt-6 border-t border-blue-600">
351
+ <h4 class="font-bold mb-4">Redes Sociais</h4>
352
+ <div class="flex space-x-4">
353
+ <a href="#" class="bg-blue-600 hover:bg-blue-500 w-10 h-10 rounded-full flex items-center justify-center transition duration-300">
354
+ <i class="fab fa-linkedin-in"></i>
355
+ </a>
356
+ <a href="#" class="bg-blue-600 hover:bg-blue-500 w-10 h-10 rounded-full flex items-center justify-center transition duration-300">
357
+ <i class="fab fa-facebook-f"></i>
358
+ </a>
359
+ <a href="#" class="bg-blue-600 hover:bg-blue-500 w-10 h-10 rounded-full flex items-center justify-center transition duration-300">
360
+ <i class="fab fa-instagram"></i>
361
+ </a>
362
+ <a href="#" class="bg-blue-600 hover:bg-blue-500 w-10 h-10 rounded-full flex items-center justify-center transition duration-300">
363
+ <i class="fab fa-youtube"></i>
364
+ </a>
365
+ </div>
366
+ </div>
367
+ </div>
368
+ </div>
369
+ </div>
370
+ </div>
371
+ </section>
372
+
373
+ <!-- Footer -->
374
+ <footer class="bg-gray-900 text-gray-400 py-12">
375
+ <div class="container mx-auto px-4">
376
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
377
+ <div>
378
+ <div class="flex items-center mb-4">
379
+ <div class="bg-blue-600 text-white p-2 rounded-lg mr-3">
380
+ <i class="fas fa-cogs"></i>
381
+ </div>
382
+ <h3 class="text-xl font-bold text-white">TECNOPACK</h3>
383
+ </div>
384
+ <p class="mb-4">Tecnologia, Precisão e Confiabilidade no seu processo industrial.</p>
385
+ <p>&copy; 2023 TECNOPACK. Todos os direitos reservados.</p>
386
+ </div>
387
+
388
+ <div>
389
+ <h4 class="text-lg font-bold text-white mb-4">Serviços</h4>
390
+ <ul class="space-y-2">
391
+ <li><a href="#" class="hover:text-white transition duration-300">Manutenção Preventiva</a></li>
392
+ <li><a href="#" class="hover:text-white transition duration-300">Manutenção Corretiva</a></li>
393
+ <li><a href="#" class="hover:text-white transition duration-300">Diagnóstico Técnico</a></li>
394
+ <li><a href="#" class="hover:text-white transition duration-300">Otimização de Processos</a></li>
395
+ </ul>
396
+ </div>
397
+
398
+ <div>
399
+ <h4 class="text-lg font-bold text-white mb-4">Áreas de Atuação</h4>
400
+ <ul class="space-y-2">
401
+ <li><a href="#" class="hover:text-white transition duration-300">Máquinas PET</a></li>
402
+ <li><a href="#" class="hover:text-white transition duration-300">Estamparia</a></li>
403
+ <li><a href="#" class="hover:text-white transition duration-300">Prensas Hidráulicas</a></li>
404
+ <li><a href="#" class="hover:text-white transition duration-300">Sistemas Mecânicos</a></li>
405
+ </ul>
406
+ </div>
407
+
408
+ <div>
409
+ <h4 class="text-lg font-bold text-white mb-4">Links Úteis</h4>
410
+ <ul class="space-y-2">
411
+ <li><a href="#" class="hover:text-white transition duration-300">Política de Privacidade</a></li>
412
+ <li><a href="#" class="hover:text-white transition duration-300">Termos de Serviço</a></li>
413
+ <li><a href="#" class="hover:text-white transition duration-300">FAQ</a></li>
414
+ <li><a href="#" class="hover:text-white transition duration-300">Blog</a></li>
415
+ </ul>
416
+ </div>
417
+ </div>
418
+
419
+ <div class="pt-6 border-t border-gray-800 text-center">
420
+ <p>Desenvolvido com <i class="fas fa-heart text-red-500"></i> para a indústria brasileira</p>
421
+ </div>
422
+ </div>
423
+ </footer>
424
+
425
+ <!-- Back to Top Button -->
426
+ <button id="back-to-top" class="fixed bottom-6 right-6 bg-blue-600 text-white w-12 h-12 rounded-full shadow-lg flex items-center justify-center opacity-0 invisible transition-all duration-300">
427
+ <i class="fas fa-arrow-up"></i>
428
+ </button>
429
+
430
+ <!-- WhatsApp Float Button -->
431
+ <a href="https://wa.me/5500000000000" class="fixed bottom-6 left-6 bg-green-500 text-white w-14 h-14 rounded-full shadow-lg flex items-center justify-center hover:bg-green-600 transition duration-300 z-40">
432
+ <i class="fab fa-whatsapp text-2xl"></i>
433
+ </a>
434
+
435
+ <script>
436
+ // Mobile Menu Toggle
437
+ const mobileMenuButton = document.getElementById('mobile-menu-button');
438
+ const mobileMenu = document.getElementById('mobile-menu');
439
+
440
+ mobileMenuButton.addEventListener('click', () => {
441
+ mobileMenu.classList.toggle('hidden');
442
+ });
443
+
444
+ // Back to Top Button
445
+ const backToTopButton = document.getElementById('back-to-top');
446
+
447
+ window.addEventListener('scroll', () => {
448
+ if (window.pageYOffset > 300) {
449
+ backToTopButton.classList.remove('opacity-0', 'invisible');
450
+ backToTopButton.classList.add('opacity-100', 'visible');
451
+ } else {
452
+ backToTopButton.classList.remove('opacity-100', 'visible');
453
+ backToTopButton.classList.add('opacity-0', 'invisible');
454
+ }
455
+ });
456
+
457
+ backToTopButton.addEventListener('click', () => {
458
+ window.scrollTo({ top: 0, behavior: 'smooth' });
459
+ });
460
+
461
+ // Smooth scrolling for anchor links
462
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
463
+ anchor.addEventListener('click', function(e) {
464
+ e.preventDefault();
465
+
466
+ const targetId = this.getAttribute('href');
467
+ if (targetId === '#') return;
468
+
469
+ const targetElement = document.querySelector(targetId);
470
+ if (targetElement) {
471
+ window.scrollTo({
472
+ top: targetElement.offsetTop - 80,
473
+ behavior: 'smooth'
474
+ });
475
+
476
+ // Close mobile menu if open
477
+ if (!mobileMenu.classList.contains('hidden')) {
478
+ mobileMenu.classList.add('hidden');
479
+ }
480
+ }
481
+ });
482
+ });
483
+ </script>
484
+ <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=LIMATEC/tecnopack" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
485
+ </html>