Hugging Face's logo

Spaces:
bamburra
/
pluginco1
Running

App Files Community
bamburra commited on
Commit
8af25e6
·
verified ·
1 Parent(s): 41b7296

Crie uma landing page profissional, responsiva e altamente persuasiva para a agência criativa PluginCo. A página deve ser focada em conversão, com linguagem simples (sem jargões técnicos), apelo emocional e comercial. O site deve destacar a capacidade da agência de ajudar negócios a atrair mais clientes, aumentar suas vendas e reduzir custos por meio de soluções criativas, tecnológicas e personalizadas. 🎯 Objetivo da página: Apresentar a PluginCo como uma agência de alto impacto que entrega resultados reais. Explicar como ela ajuda empresas a vender mais e se posicionar melhor. Destacar diferenciais tecnológicos (sem mencionar “inteligência artificial” diretamente). Guiar o visitante até uma ação clara: solicitar uma proposta personalizada. ✍️ Tom de voz: Claro, direto, persuasivo e acessível. Evitar termos técnicos; explicar conceitos de forma simples. Transmitir segurança, inovação, eficiência e sofisticação. Sutilmente futurista: destaque que o cliente estará “à frente do tempo”. 🧱 Estrutura da landing page: 1. Seção Hero com headline forte "Você não precisa de um site bonito. Você precisa de um site que vende." Subheadline: "A PluginCo cria experiências digitais que atraem clientes, aumentam resultados e colocam o seu negócio na frente." Botão CTA: Solicite sua proposta 2. O que fazemos por você Texto simples e direto: "Enquanto você foca no seu trabalho, o seu site trabalha por você — 24 horas por dia, atraindo e convertendo novos clientes." Benefícios listados: Textos que despertam interesse Visual que impressiona de primeira Site leve, rápido e adaptado a todos os dispositivos Estrutura organizada que guia o cliente até a ação 3. Como levamos clientes até você "Mais que um site. Uma estratégia completa para atrair e converter." Caminho do cliente explicado (funil de vendas simplificado): Ele encontra você Se interessa pelo que você oferece Entra em contato e compra Tomada de decisão baseada em dados (sem mencionar IA diretamente): Sabemos o que funciona, o que atrai, o que converte Otimizamos constantemente para resultados reais 4. Eficiência e economia "Você gasta menos com marketing mal feito — e fatura mais com ações certeiras." Otimização de tempo e investimento Clareza nos dados e decisões baseadas em resultado Menos tentativa e erro, mais crescimento sustentável 5. Como funciona (onboarding simplificado) Conversamos sobre o seu negócio Criamos um plano sob medida Desenvolvemos e lançamos o seu novo site Analisamos o desempenho Você acompanha tudo com clareza 6. Depoimentos e prova social “A PluginCo transformou meu site em uma ferramenta real de vendas. Nunca mais fiquei no escuro sobre o que funciona.” — Cliente satisfeito 7. Chamada final para ação “Seu site atual está ajudando você a crescer ou só está ocupando espaço na internet?” Botão CTA: Solicite agora sua proposta personalizada 🎨 Paleta de cores (inspirada no site da Apple): Branco Puro – #FFFFFF (fundo principal) Cinza Neutro Claro – #F5F5F7 (seções secundárias) Preto Suave / Grafite – #1D1D1F (títulos) Cinza Médio – #6E6E73 (texto secundário) Cinza Azulado Profundo – #2C2C2E (rodapé ou fundo escuro) Acento Vibrante Amarelo Elegante – #FFD60A (botões e elementos de destaque) - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +6 -4
  2. index.html +509 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Pluginco1
3
- emoji: 🌍
4
- colorFrom: red
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: pluginco1
3
+ emoji: 🐳
4
+ colorFrom: blue
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,509 @@
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>PluginCo - Soluções Digitais que Vendem</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
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
11
+
12
+ body {
13
+ font-family: 'Inter', sans-serif;
14
+ scroll-behavior: smooth;
15
+ }
16
+
17
+ .hero-gradient {
18
+ background: linear-gradient(135deg, rgba(255,214,10,0.1) 0%, rgba(255,255,255,1) 100%);
19
+ }
20
+
21
+ .feature-card:hover {
22
+ transform: translateY(-5px);
23
+ box-shadow: 0 10px 25px rgba(0,0,0,0.1);
24
+ }
25
+
26
+ .testimonial-card {
27
+ box-shadow: 0 4px 6px rgba(0,0,0,0.05);
28
+ }
29
+
30
+ .btn-primary {
31
+ transition: all 0.3s ease;
32
+ }
33
+
34
+ .btn-primary:hover {
35
+ transform: translateY(-2px);
36
+ box-shadow: 0 5px 15px rgba(255,214,10,0.3);
37
+ }
38
+
39
+ .funnel-step::after {
40
+ content: '';
41
+ position: absolute;
42
+ top: 50%;
43
+ right: -30px;
44
+ transform: translateY(-50%);
45
+ width: 20px;
46
+ height: 20px;
47
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23FFD60A'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M13 5l7 7-7 7M5 5l7 7-7 7' /%3E%3C/svg%3E");
48
+ background-repeat: no-repeat;
49
+ background-position: center;
50
+ }
51
+
52
+ .funnel-step:last-child::after {
53
+ display: none;
54
+ }
55
+
56
+ @media (max-width: 768px) {
57
+ .funnel-step::after {
58
+ display: none;
59
+ }
60
+ }
61
+ </style>
62
+ </head>
63
+ <body class="bg-white text-gray-800">
64
+ <!-- Header/Navigation -->
65
+ <header class="sticky top-0 z-50 bg-white shadow-sm">
66
+ <div class="container mx-auto px-4 py-4 flex justify-between items-center">
67
+ <div class="flex items-center">
68
+ <span class="text-2xl font-bold text-[#1D1D1F]">Plugin<span class="text-[#FFD60A]">Co</span></span>
69
+ </div>
70
+ <nav class="hidden md:flex space-x-8">
71
+ <a href="#services" class="text-[#6E6E73] hover:text-[#1D1D1F] transition">O que fazemos</a>
72
+ <a href="#process" class="text-[#6E6E73] hover:text-[#1D1D1F] transition">Como funciona</a>
73
+ <a href="#results" class="text-[#6E6E73] hover:text-[#1D1D1F] transition">Resultados</a>
74
+ <a href="#contact" class="text-[#6E6E73] hover:text-[#1D1D1F] transition">Contato</a>
75
+ </nav>
76
+ <button class="md:hidden text-[#1D1D1F]">
77
+ <i class="fas fa-bars text-xl"></i>
78
+ </button>
79
+ </div>
80
+ </header>
81
+
82
+ <!-- Hero Section -->
83
+ <section class="hero-gradient py-20 md:py-32 px-4">
84
+ <div class="container mx-auto flex flex-col md:flex-row items-center">
85
+ <div class="md:w-1/2 mb-12 md:mb-0">
86
+ <h1 class="text-4xl md:text-5xl font-bold text-[#1D1D1F] mb-6 leading-tight">
87
+ Você não precisa de um site bonito.<br>
88
+ <span class="text-[#FFD60A]">Você precisa de um site que vende.</span>
89
+ </h1>
90
+ <p class="text-xl text-[#6E6E73] mb-8">
91
+ A PluginCo cria experiências digitais que atraem clientes, aumentam resultados e colocam o seu negócio na frente.
92
+ </p>
93
+ <a href="#contact" class="btn-primary inline-block bg-[#FFD60A] text-[#1D1D1F] font-semibold px-8 py-4 rounded-lg text-lg">
94
+ Solicite sua proposta <i class="fas fa-arrow-right ml-2"></i>
95
+ </a>
96
+ </div>
97
+ <div class="md:w-1/2 md:pl-12">
98
+ <img src="https://images.unsplash.com/photo-1551434678-e076c223a692?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Equipe criativa trabalhando" class="rounded-xl shadow-xl w-full">
99
+ </div>
100
+ </div>
101
+ </section>
102
+
103
+ <!-- Services Section -->
104
+ <section id="services" class="py-20 bg-[#F5F5F7]">
105
+ <div class="container mx-auto px-4">
106
+ <div class="text-center mb-16">
107
+ <h2 class="text-3xl md:text-4xl font-bold text-[#1D1D1F] mb-4">
108
+ Enquanto você foca no seu trabalho,<br>
109
+ <span class="text-[#FFD60A]">o seu site trabalha por você</span>
110
+ </h2>
111
+ <p class="text-xl text-[#6E6E73] max-w-3xl mx-auto">
112
+ 24 horas por dia, atraindo e convertendo novos clientes.
113
+ </p>
114
+ </div>
115
+
116
+ <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
117
+ <div class="feature-card bg-white p-8 rounded-xl transition duration-300">
118
+ <div class="w-14 h-14 bg-[#FFD60A]/10 rounded-full flex items-center justify-center mb-6">
119
+ <i class="fas fa-magic text-[#FFD60A] text-2xl"></i>
120
+ </div>
121
+ <h3 class="text-xl font-bold text-[#1D1D1F] mb-3">Textos que despertam interesse</h3>
122
+ <p class="text-[#6E6E73]">Conteúdo estratégico que fala diretamente com seu cliente ideal e o convida a agir.</p>
123
+ </div>
124
+
125
+ <div class="feature-card bg-white p-8 rounded-xl transition duration-300">
126
+ <div class="w-14 h-14 bg-[#FFD60A]/10 rounded-full flex items-center justify-center mb-6">
127
+ <i class="fas fa-eye text-[#FFD60A] text-2xl"></i>
128
+ </div>
129
+ <h3 class="text-xl font-bold text-[#1D1D1F] mb-3">Visual que impressiona de primeira</h3>
130
+ <p class="text-[#6E6E73]">Design moderno e profissional que cria uma ótima primeira impressão.</p>
131
+ </div>
132
+
133
+ <div class="feature-card bg-white p-8 rounded-xl transition duration-300">
134
+ <div class="w-14 h-14 bg-[#FFD60A]/10 rounded-full flex items-center justify-center mb-6">
135
+ <i class="fas fa-bolt text-[#FFD60A] text-2xl"></i>
136
+ </div>
137
+ <h3 class="text-xl font-bold text-[#1D1D1F] mb-3">Site leve, rápido e adaptado</h3>
138
+ <p class="text-[#6E6E73]">Otimizado para todos os dispositivos e carregamento ultrarrápido.</p>
139
+ </div>
140
+
141
+ <div class="feature-card bg-white p-8 rounded-xl transition duration-300">
142
+ <div class="w-14 h-14 bg-[#FFD60A]/10 rounded-full flex items-center justify-center mb-6">
143
+ <i class="fas fa-project-diagram text-[#FFD60A] text-2xl"></i>
144
+ </div>
145
+ <h3 class="text-xl font-bold text-[#1D1D1F] mb-3">Estrutura que guia o cliente</h3>
146
+ <p class="text-[#6E6E73]">Caminho claro até a ação que você deseja, seja comprar ou entrar em contato.</p>
147
+ </div>
148
+ </div>
149
+ </div>
150
+ </section>
151
+
152
+ <!-- Process Section -->
153
+ <section id="process" class="py-20 bg-white">
154
+ <div class="container mx-auto px-4">
155
+ <div class="text-center mb-16">
156
+ <h2 class="text-3xl md:text-4xl font-bold text-[#1D1D1F] mb-4">
157
+ Mais que um site.<br>
158
+ <span class="text-[#FFD60A]">Uma estratégia completa</span> para atrair e converter.
159
+ </h2>
160
+ </div>
161
+
162
+ <div class="flex flex-col md:flex-row justify-center items-center md:items-start mb-16">
163
+ <div class="funnel-step relative md:w-1/3 px-4 py-6 text-center">
164
+ <div class="w-20 h-20 bg-[#FFD60A] rounded-full flex items-center justify-center mx-auto mb-4">
165
+ <i class="fas fa-search text-white text-2xl"></i>
166
+ </div>
167
+ <h3 class="text-xl font-bold text-[#1D1D1F] mb-2">Ele encontra você</h3>
168
+ <p class="text-[#6E6E73]">Atraímos as pessoas certas com estratégias precisas.</p>
169
+ </div>
170
+
171
+ <div class="funnel-step relative md:w-1/3 px-4 py-6 text-center">
172
+ <div class="w-20 h-20 bg-[#FFD60A] rounded-full flex items-center justify-center mx-auto mb-4">
173
+ <i class="fas fa-heart text-white text-2xl"></i>
174
+ </div>
175
+ <h3 class="text-xl font-bold text-[#1D1D1F] mb-2">Se interessa pelo que você oferece</h3>
176
+ <p class="text-[#6E6E73]">Apresentamos sua solução de forma irresistível.</p>
177
+ </div>
178
+
179
+ <div class="funnel-step relative md:w-1/3 px-4 py-6 text-center">
180
+ <div class="w-20 h-20 bg-[#FFD60A] rounded-full flex items-center justify-center mx-auto mb-4">
181
+ <i class="fas fa-shopping-cart text-white text-2xl"></i>
182
+ </div>
183
+ <h3 class="text-xl font-bold text-[#1D1D1F] mb-2">Entra em contato e compra</h3>
184
+ <p class="text-[#6E6E73]">Facilitamos a decisão com chamadas claras para ação.</p>
185
+ </div>
186
+ </div>
187
+
188
+ <div class="bg-[#F5F5F7] rounded-xl p-8 md:p-12 max-w-4xl mx-auto">
189
+ <div class="flex flex-col md:flex-row items-center">
190
+ <div class="md:w-1/2 mb-6 md:mb-0 md:pr-8">
191
+ <h3 class="text-2xl font-bold text-[#1D1D1F] mb-4">Tomada de decisão baseada em dados</h3>
192
+ <p class="text-[#6E6E73] mb-4">
193
+ Sabemos o que funciona, o que atrai, o que converte. Nossas soluções são constantemente otimizadas para entregar resultados reais.
194
+ </p>
195
+ <ul class="space-y-3">
196
+ <li class="flex items-start">
197
+ <i class="fas fa-check text-[#FFD60A] mt-1 mr-2"></i>
198
+ <span class="text-[#6E6E73]">Análise contínua de desempenho</span>
199
+ </li>
200
+ <li class="flex items-start">
201
+ <i class="fas fa-check text-[#FFD60A] mt-1 mr-2"></i>
202
+ <span class="text-[#6E6E73]">Ajustes inteligentes para melhorar resultados</span>
203
+ </li>
204
+ <li class="flex items-start">
205
+ <i class="fas fa-check text-[#FFD60A] mt-1 mr-2"></i>
206
+ <span class="text-[#6E6E73]">Relatórios claros e acionáveis</span>
207
+ </li>
208
+ </ul>
209
+ </div>
210
+ <div class="md:w-1/2">
211
+ <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Dashboard analítico" class="rounded-lg shadow-md w-full">
212
+ </div>
213
+ </div>
214
+ </div>
215
+ </div>
216
+ </section>
217
+
218
+ <!-- Efficiency Section -->
219
+ <section class="py-20 bg-[#F5F5F7]">
220
+ <div class="container mx-auto px-4">
221
+ <div class="flex flex-col md:flex-row items-center">
222
+ <div class="md:w-1/2 mb-12 md:mb-0 md:pr-12">
223
+ <h2 class="text-3xl md:text-4xl font-bold text-[#1D1D1F] mb-6">
224
+ Você gasta menos com marketing mal feito —<br>
225
+ <span class="text-[#FFD60A]">e fatura mais com ações certeiras.</span>
226
+ </h2>
227
+ <p class="text-xl text-[#6E6E73] mb-8">
228
+ Otimizamos seu tempo e investimento com decisões baseadas em resultados reais, não em palpites.
229
+ </p>
230
+ <div class="space-y-6">
231
+ <div class="flex items-start">
232
+ <div class="bg-[#FFD60A]/10 p-3 rounded-lg mr-4">
233
+ <i class="fas fa-chart-line text-[#FFD60A] text-xl"></i>
234
+ </div>
235
+ <div>
236
+ <h4 class="text-lg font-semibold text-[#1D1D1F] mb-1">Clareza nos dados</h4>
237
+ <p class="text-[#6E6E73]">Saiba exatamente o que está funcionando e onde melhorar.</p>
238
+ </div>
239
+ </div>
240
+ <div class="flex items-start">
241
+ <div class="bg-[#FFD60A]/10 p-3 rounded-lg mr-4">
242
+ <i class="fas fa-stopwatch text-[#FFD60A] text-xl"></i>
243
+ </div>
244
+ <div>
245
+ <h4 class="text-lg font-semibold text-[#1D1D1F] mb-1">Otimização de tempo</h4>
246
+ <p class="text-[#6E6E73]">Foque no que realmente importa enquanto cuidamos do seu digital.</p>
247
+ </div>
248
+ </div>
249
+ <div class="flex items-start">
250
+ <div class="bg-[#FFD60A]/10 p-3 rounded-lg mr-4">
251
+ <i class="fas fa-seedling text-[#FFD60A] text-xl"></i>
252
+ </div>
253
+ <div>
254
+ <h4 class="text-lg font-semibold text-[#1D1D1F] mb-1">Crescimento sustentável</h4>
255
+ <p class="text-[#6E6E73]">Menos tentativa e erro, mais estratégias comprovadas.</p>
256
+ </div>
257
+ </div>
258
+ </div>
259
+ </div>
260
+ <div class="md:w-1/2">
261
+ <img src="https://images.unsplash.com/photo-1521791136064-7986c2920216?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1469&q=80" alt="Pessoas analisando gráficos" class="rounded-xl shadow-lg w-full">
262
+ </div>
263
+ </div>
264
+ </div>
265
+ </section>
266
+
267
+ <!-- How It Works Section -->
268
+ <section id="results" class="py-20 bg-white">
269
+ <div class="container mx-auto px-4">
270
+ <div class="text-center mb-16">
271
+ <h2 class="text-3xl md:text-4xl font-bold text-[#1D1D1F] mb-4">
272
+ Simples, transparente e <span class="text-[#FFD60A]">focado em resultados</span>
273
+ </h2>
274
+ <p class="text-xl text-[#6E6E73] max-w-3xl mx-auto">
275
+ Nosso processo foi criado para garantir que seu novo site comece a trabalhar para você o mais rápido possível.
276
+ </p>
277
+ </div>
278
+
279
+ <div class="grid md:grid-cols-5 gap-8 max-w-5xl mx-auto">
280
+ <div class="md:col-span-1 flex flex-col items-center text-center">
281
+ <div class="w-16 h-16 bg-[#FFD60A] rounded-full flex items-center justify-center mb-4 text-white font-bold text-xl">1</div>
282
+ <h3 class="font-semibold text-[#1D1D1F]">Conversamos</h3>
283
+ <p class="text-sm text-[#6E6E73] mt-1">Sobre seu negócio e objetivos</p>
284
+ </div>
285
+ <div class="md:col-span-1 flex flex-col items-center text-center">
286
+ <div class="w-16 h-16 bg-[#FFD60A] rounded-full flex items-center justify-center mb-4 text-white font-bold text-xl">2</div>
287
+ <h3 class="font-semibold text-[#1D1D1F]">Criamos</h3>
288
+ <p class="text-sm text-[#6E6E73] mt-1">Um plano sob medida</p>
289
+ </div>
290
+ <div class="md:col-span-1 flex flex-col items-center text-center">
291
+ <div class="w-16 h-16 bg-[#FFD60A] rounded-full flex items-center justify-center mb-4 text-white font-bold text-xl">3</div>
292
+ <h3 class="font-semibold text-[#1D1D1F]">Desenvolvemos</h3>
293
+ <p class="text-sm text-[#6E6E73] mt-1">E lançamos seu novo site</p>
294
+ </div>
295
+ <div class="md:col-span-1 flex flex-col items-center text-center">
296
+ <div class="w-16 h-16 bg-[#FFD60A] rounded-full flex items-center justify-center mb-4 text-white font-bold text-xl">4</div>
297
+ <h3 class="font-semibold text-[#1D1D1F]">Analisamos</h3>
298
+ <p class="text-sm text-[#6E6E73] mt-1">O desempenho continuamente</p>
299
+ </div>
300
+ <div class="md:col-span-1 flex flex-col items-center text-center">
301
+ <div class="w-16 h-16 bg-[#FFD60A] rounded-full flex items-center justify-center mb-4 text-white font-bold text-xl">5</div>
302
+ <h3 class="font-semibold text-[#1D1D1F]">Você acompanha</h3>
303
+ <p class="text-sm text-[#6E6E73] mt-1">Tudo com clareza</p>
304
+ </div>
305
+ </div>
306
+ </div>
307
+ </section>
308
+
309
+ <!-- Testimonials Section -->
310
+ <section class="py-20 bg-[#F5F5F7]">
311
+ <div class="container mx-auto px-4">
312
+ <div class="text-center mb-16">
313
+ <h2 class="text-3xl md:text-4xl font-bold text-[#1D1D1F] mb-4">
314
+ O que nossos clientes <span class="text-[#FFD60A]">estão dizendo</span>
315
+ </h2>
316
+ </div>
317
+
318
+ <div class="grid md:grid-cols-3 gap-8 max-w-6xl mx-auto">
319
+ <div class="testimonial-card bg-white p-8 rounded-xl">
320
+ <div class="flex items-center mb-4">
321
+ <div class="w-12 h-12 bg-[#FFD60A]/10 rounded-full flex items-center justify-center mr-4">
322
+ <i class="fas fa-user text-[#FFD60A]"></i>
323
+ </div>
324
+ <div>
325
+ <h4 class="font-semibold text-[#1D1D1F]">Carlos Mendes</h4>
326
+ <p class="text-sm text-[#6E6E73]">Loja de Suplementos</p>
327
+ </div>
328
+ </div>
329
+ <p class="text-[#6E6E73] italic">
330
+ "A PluginCo transformou meu site em uma ferramenta real de vendas. Em 3 meses, nossas vendas online aumentaram 180%. Nunca mais fiquei no escuro sobre o que funciona."
331
+ </p>
332
+ <div class="mt-4 text-[#FFD60A]">
333
+ <i class="fas fa-star"></i>
334
+ <i class="fas fa-star"></i>
335
+ <i class="fas fa-star"></i>
336
+ <i class="fas fa-star"></i>
337
+ <i class="fas fa-star"></i>
338
+ </div>
339
+ </div>
340
+
341
+ <div class="testimonial-card bg-white p-8 rounded-xl">
342
+ <div class="flex items-center mb-4">
343
+ <div class="w-12 h-12 bg-[#FFD60A]/10 rounded-full flex items-center justify-center mr-4">
344
+ <i class="fas fa-user text-[#FFD60A]"></i>
345
+ </div>
346
+ <div>
347
+ <h4 class="font-semibold text-[#1D1D1F]">Ana Beatriz</h4>
348
+ <p class="text-sm text-[#6E6E73]">Clínica Odontológica</p>
349
+ </div>
350
+ </div>
351
+ <p class="text-[#6E6E73] italic">
352
+ "Finalmente encontrei uma agência que entrega o que promete. Nosso site agora atrai pacientes qualificados todos os dias. O retorno foi tão bom que já contratamos outros serviços."
353
+ </p>
354
+ <div class="mt-4 text-[#FFD60A]">
355
+ <i class="fas fa-star"></i>
356
+ <i class="fas fa-star"></i>
357
+ <i class="fas fa-star"></i>
358
+ <i class="fas fa-star"></i>
359
+ <i class="fas fa-star"></i>
360
+ </div>
361
+ </div>
362
+
363
+ <div class="testimonial-card bg-white p-8 rounded-xl">
364
+ <div class="flex items-center mb-4">
365
+ <div class="w-12 h-12 bg-[#FFD60A]/10 rounded-full flex items-center justify-center mr-4">
366
+ <i class="fas fa-user text-[#FFD60A]"></i>
367
+ </div>
368
+ <div>
369
+ <h4 class="font-semibold text-[#1D1D1F]">Ricardo Almeida</h4>
370
+ <p class="text-sm text-[#6E6E73]">Consultoria Financeira</p>
371
+ </div>
372
+ </div>
373
+ <p class="text-[#6E6E73] italic">
374
+ "Depois de anos jogando dinheiro fora com sites que não vendiam, a PluginCo mostrou como um site estratégico pode ser. Em 6 meses, triplicamos nossa taxa de conversão."
375
+ </p>
376
+ <div class="mt-4 text-[#FFD60A]">
377
+ <i class="fas fa-star"></i>
378
+ <i class="fas fa-star"></i>
379
+ <i class="fas fa-star"></i>
380
+ <i class="fas fa-star"></i>
381
+ <i class="fas fa-star-half-alt"></i>
382
+ </div>
383
+ </div>
384
+ </div>
385
+ </div>
386
+ </section>
387
+
388
+ <!-- Final CTA Section -->
389
+ <section id="contact" class="py-20 bg-[#2C2C2E] text-white">
390
+ <div class="container mx-auto px-4 text-center">
391
+ <h2 class="text-3xl md:text-4xl font-bold mb-6">
392
+ Seu site atual está ajudando você a crescer<br>
393
+ <span class="text-[#FFD60A]">ou só está ocupando espaço na internet?</span>
394
+ </h2>
395
+ <p class="text-xl text-gray-300 mb-8 max-w-3xl mx-auto">
396
+ Não perca mais tempo e dinheiro com um site que não entrega resultados. Vamos conversar sobre como podemos transformar sua presença digital em uma máquina de vendas.
397
+ </p>
398
+ <a href="#contact-form" class="btn-primary inline-block bg-[#FFD60A] text-[#1D1D1F] font-semibold px-8 py-4 rounded-lg text-lg mb-12">
399
+ Solicite agora sua proposta personalizada <i class="fas fa-arrow-right ml-2"></i>
400
+ </a>
401
+
402
+ <div id="contact-form" class="bg-white rounded-xl shadow-xl p-8 max-w-2xl mx-auto text-left">
403
+ <h3 class="text-2xl font-bold text-[#1D1D1F] mb-6">Vamos começar</h3>
404
+ <form class="space-y-6">
405
+ <div class="grid md:grid-cols-2 gap-6">
406
+ <div>
407
+ <label for="name" class="block text-[#6E6E73] mb-2">Seu nome</label>
408
+ <input type="text" id="name" class="w-full px-4 py-3 border border-[#F5F5F7] rounded-lg focus:outline-none focus:ring-2 focus:ring-[#FFD60A] focus:border-transparent" placeholder="Como prefere ser chamado">
409
+ </div>
410
+ <div>
411
+ <label for="email" class="block text-[#6E6E73] mb-2">Seu e-mail</label>
412
+ <input type="email" id="email" class="w-full px-4 py-3 border border-[#F5F5F7] rounded-lg focus:outline-none focus:ring-2 focus:ring-[#FFD60A] focus:border-transparent" placeholder="Seu melhor e-mail">
413
+ </div>
414
+ </div>
415
+ <div>
416
+ <label for="business" class="block text-[#6E6E73] mb-2">Seu negócio</label>
417
+ <input type="text" id="business" class="w-full px-4 py-3 border border-[#F5F5F7] rounded-lg focus:outline-none focus:ring-2 focus:ring-[#FFD60A] focus:border-transparent" placeholder="O que você faz?">
418
+ </div>
419
+ <div>
420
+ <label for="message" class="block text-[#6E6E73] mb-2">Como podemos ajudar?</label>
421
+ <textarea id="message" rows="4" class="w-full px-4 py-3 border border-[#F5F5F7] rounded-lg focus:outline-none focus:ring-2 focus:ring-[#FFD60A] focus:border-transparent" placeholder="Fale um pouco sobre seus objetivos"></textarea>
422
+ </div>
423
+ <button type="submit" class="w-full bg-[#FFD60A] text-[#1D1D1F] font-semibold px-6 py-4 rounded-lg hover:bg-[#FFD60A]/90 transition">
424
+ Enviar solicitação <i class="fas fa-paper-plane ml-2"></i>
425
+ </button>
426
+ </form>
427
+ </div>
428
+ </div>
429
+ </section>
430
+
431
+ <!-- Footer -->
432
+ <footer class="bg-[#1D1D1F] text-white py-12">
433
+ <div class="container mx-auto px-4">
434
+ <div class="flex flex-col md:flex-row justify-between items-center">
435
+ <div class="mb-6 md:mb-0">
436
+ <span class="text-2xl font-bold">Plugin<span class="text-[#FFD60A]">Co</span></span>
437
+ <p class="text-[#6E6E73] mt-2">Soluções digitais que vendem.</p>
438
+ </div>
439
+ <div class="flex space-x-6">
440
+ <a href="#" class="text-[#6E6E73] hover:text-white transition">
441
+ <i class="fab fa-facebook-f"></i>
442
+ </a>
443
+ <a href="#" class="text-[#6E6E73] hover:text-white transition">
444
+ <i class="fab fa-instagram"></i>
445
+ </a>
446
+ <a href="#" class="text-[#6E6E73] hover:text-white transition">
447
+ <i class="fab fa-linkedin-in"></i>
448
+ </a>
449
+ <a href="#" class="text-[#6E6E73] hover:text-white transition">
450
+ <i class="fab fa-whatsapp"></i>
451
+ </a>
452
+ </div>
453
+ </div>
454
+ <div class="border-t border-[#2C2C2E] mt-8 pt-8 flex flex-col md:flex-row justify-between">
455
+ <div class="text-[#6E6E73] text-sm mb-4 md:mb-0">
456
+ &copy; 2023 PluginCo. Todos os direitos reservados.
457
+ </div>
458
+ <div class="flex space-x-6">
459
+ <a href="#" class="text-[#6E6E73] hover:text-white transition text-sm">Termos de uso</a>
460
+ <a href="#" class="text-[#6E6E73] hover:text-white transition text-sm">Política de privacidade</a>
461
+ <a href="#" class="text-[#6E6E73] hover:text-white transition text-sm">FAQ</a>
462
+ </div>
463
+ </div>
464
+ </div>
465
+ </footer>
466
+
467
+ <script>
468
+ // Smooth scrolling for anchor links
469
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
470
+ anchor.addEventListener('click', function (e) {
471
+ e.preventDefault();
472
+
473
+ document.querySelector(this.getAttribute('href')).scrollIntoView({
474
+ behavior: 'smooth'
475
+ });
476
+ });
477
+ });
478
+
479
+ // Form submission
480
+ const form = document.querySelector('form');
481
+ if(form) {
482
+ form.addEventListener('submit', function(e) {
483
+ e.preventDefault();
484
+
485
+ // Get form values
486
+ const name = document.getElementById('name').value;
487
+ const email = document.getElementById('email').value;
488
+
489
+ // Simple validation
490
+ if(name && email) {
491
+ // Here you would typically send the data to your server
492
+ alert(`Obrigado, ${name}! Sua solicitação foi enviada. Entraremos em contato em breve pelo e-mail ${email}.`);
493
+ form.reset();
494
+ } else {
495
+ alert('Por favor, preencha pelo menos seu nome e e-mail.');
496
+ }
497
+ });
498
+ }
499
+
500
+ // Mobile menu toggle (would need more implementation)
501
+ const mobileMenuButton = document.querySelector('.md\\:hidden');
502
+ if(mobileMenuButton) {
503
+ mobileMenuButton.addEventListener('click', function() {
504
+ alert('Menu mobile seria aberto aqui em uma implementação completa.');
505
+ });
506
+ }
507
+ </script>
508
+ <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=bamburra/pluginco1" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
509
+ </html>