Hugging Face's logo

Spaces:
jonesfernandes
/
zescalhas
Running

App Files Community
jonesfernandes commited on
Commit
019b467
·
verified ·
1 Parent(s): 11063c0

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +274 -19
  3. prompts.txt +0 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Zescalhas
3
- emoji: 🔥
4
- colorFrom: blue
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: zescalhas
3
+ emoji: 🐳
4
+ colorFrom: red
5
+ colorTo: green
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,274 @@
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>Z&S Calhas e Vedações - Soluções Profissionais em Telhados</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@700&family=Roboto:wght@400;500&display=swap" rel="stylesheet">
9
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
10
+ <script>
11
+ tailwind.config = {
12
+ theme: {
13
+ extend: {
14
+ colors: {
15
+ primary: '#F57C00',
16
+ secondary: '#D9D9D9',
17
+ dark: '#000000',
18
+ light: '#FFFFFF',
19
+ },
20
+ fontFamily: {
21
+ heading: ['Montserrat', 'sans-serif'],
22
+ body: ['Roboto', 'sans-serif'],
23
+ },
24
+ }
25
+ }
26
+ }
27
+ </script>
28
+ <style>
29
+ .title-line {
30
+ display: block;
31
+ width: 30%;
32
+ height: 4px;
33
+ background-color: #F57C00;
34
+ margin: 12px auto 0;
35
+ }
36
+
37
+ .service-card:hover {
38
+ transform: translateY(-5px);
39
+ box-shadow: 0 10px 25px rgba(245, 124, 0, 0.2);
40
+ }
41
+
42
+ .gallery-item:hover img {
43
+ transform: scale(1.05);
44
+ }
45
+
46
+ .gallery-overlay {
47
+ opacity: 0;
48
+ transition: opacity 0.3s ease;
49
+ }
50
+
51
+ .gallery-item:hover .gallery-overlay {
52
+ opacity: 1;
53
+ }
54
+
55
+ .testimonial-card {
56
+ transition: all 0.3s ease;
57
+ }
58
+
59
+ .testimonial-card:hover {
60
+ transform: translateY(-5px);
61
+ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
62
+ }
63
+
64
+ .btn-primary:hover {
65
+ filter: brightness(110%);
66
+ }
67
+
68
+ @keyframes fadeIn {
69
+ from { opacity: 0; }
70
+ to { opacity: 1; }
71
+ }
72
+
73
+ .animate-fadeIn {
74
+ animation: fadeIn 1s ease-in-out;
75
+ }
76
+ </style>
77
+ </head>
78
+ <body class="font-body bg-dark text-light">
79
+ <!-- Header -->
80
+ <header class="fixed w-full bg-dark/90 backdrop-blur-sm z-50 border-b border-primary">
81
+ <div class="container mx-auto px-4 py-4 flex justify-between items-center">
82
+ <div class="flex items-center">
83
+ <div class="w-12 h-12 bg-primary rounded-lg flex items-center justify-center mr-3">
84
+ <span class="text-2xl font-bold text-dark">Z&S</span>
85
+ </div>
86
+ <h1 class="text-xl font-heading font-bold">Z&S Calhas e Vedações</h1>
87
+ </div>
88
+ <nav class="hidden md:block">
89
+ <ul class="flex space-x-8">
90
+ <li><a href="#home" class="hover:text-primary transition-colors">Home</a></li>
91
+ <li><a href="#servicos" class="hover:text-primary transition-colors">Serviços</a></li>
92
+ <li><a href="#sobre" class="hover:text-primary transition-colors">Sobre Nós</a></li>
93
+ <li><a href="#diferenciais" class="hover:text-primary transition-colors">Diferenciais</a></li>
94
+ <li><a href="#depoimentos" class="hover:text-primary transition-colors">Depoimentos</a></li>
95
+ <li><a href="#contato" class="hover:text-primary transition-colors">Contato</a></li>
96
+ </ul>
97
+ </nav>
98
+ <button class="md:hidden text-2xl">
99
+ <i class="fas fa-bars"></i>
100
+ </button>
101
+ </div>
102
+ </header>
103
+
104
+ <!-- Hero Section -->
105
+ <section id="home" class="relative pt-24 pb-32 md:pt-32 md:pb-40 bg-black">
106
+ <div class="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1600585154340-be6161a56a0c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80')] bg-cover bg-center opacity-70"></div>
107
+ <div class="container mx-auto px-4 relative z-10 text-center">
108
+ <h2 class="text-4xl md:text-6xl font-heading font-bold mb-6 animate-fadeIn">Soluções Profissionais em Calhas e Vedações</h2>
109
+ <div class="title-line mx-auto"></div>
110
+ <p class="text-xl md:text-2xl max-w-3xl mx-auto mt-8 mb-12">Proteção e qualidade para seu telhado com materiais premium e instalação especializada</p>
111
+ <a href="#contato" class="btn-primary inline-block bg-primary text-dark font-bold px-8 py-4 rounded-lg text-lg hover:brightness-110 transition-all">Solicite um Orçamento</a>
112
+ </div>
113
+ </section>
114
+
115
+ <!-- Serviços Section -->
116
+ <section id="servicos" class="py-20 bg-light text-dark">
117
+ <div class="container mx-auto px-4">
118
+ <h2 class="text-3xl md:text-4xl font-heading font-bold text-center mb-4">Nossos Serviços</h2>
119
+ <div class="title-line mx-auto"></div>
120
+ <p class="text-center max-w-2xl mx-auto mb-16 mt-8">Oferecemos soluções completas para proteção e vedação de telhados</p>
121
+
122
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
123
+ <!-- Service 1 -->
124
+ <div class="service-card bg-white rounded-xl p-8 shadow-lg transition-all duration-300">
125
+ <div class="w-16 h-16 bg-primary rounded-full flex items-center justify-center mb-6">
126
+ <i class="fas fa-home text-2xl text-dark"></i>
127
+ </div>
128
+ <h3 class="text-xl font-heading font-bold mb-4">Instalação de Calhas</h3>
129
+ <p class="text-secondary mb-4">Instalação profissional de calhas em alumínio, galvanizado ou PVC, garantindo perfeita drenagem de águas pluviais.</p>
130
+ <a href="#" class="text-primary font-bold flex items-center">
131
+ Saiba mais <i class="fas fa-arrow-right ml-2"></i>
132
+ </a>
133
+ </div>
134
+
135
+ <!-- Service 2 -->
136
+ <div class="service-card bg-white rounded-xl p-8 shadow-lg transition-all duration-300">
137
+ <div class="w-16 h-16 bg-primary rounded-full flex items-center justify-center mb-6">
138
+ <i class="fas fa-tools text-2xl text-dark"></i>
139
+ </div>
140
+ <h3 class="text-xl font-heading font-bold mb-4">Manutenção de Calhas</h3>
141
+ <p class="text-secondary mb-4">Limpeza, reparos e substituição de calhas danificadas para manter seu sistema de drenagem sempre eficiente.</p>
142
+ <a href="#" class="text-primary font-bold flex items-center">
143
+ Saiba mais <i class="fas fa-arrow-right ml-2"></i>
144
+ </a>
145
+ </div>
146
+
147
+ <!-- Service 3 -->
148
+ <div class="service-card bg-white rounded-xl p-8 shadow-lg transition-all duration-300">
149
+ <div class="w-16 h-16 bg-primary rounded-full flex items-center justify-center mb-6">
150
+ <i class="fas fa-shield-alt text-2xl text-dark"></i>
151
+ </div>
152
+ <h3 class="text-xl font-heading font-bold mb-4">Vedações de Telhados</h3>
153
+ <p class="text-secondary mb-4">Soluções profissionais para vedação de telhados, eliminando infiltrações e garantindo proteção contra intempéries.</p>
154
+ <a href="#" class="text-primary font-bold flex items-center">
155
+ Saiba mais <i class="fas fa-arrow-right ml-2"></i>
156
+ </a>
157
+ </div>
158
+
159
+ <!-- Service 4 -->
160
+ <div class="service-card bg-white rounded-xl p-8 shadow-lg transition-all duration-300">
161
+ <div class="w-16 h-16 bg-primary rounded-full flex items-center justify-center mb-6">
162
+ <i class="fas fa-tint text-2xl text-dark"></i>
163
+ </div>
164
+ <h3 class="text-xl font-heading font-bold mb-4">Rufos e Pingadeiras</h3>
165
+ <p class="text-secondary mb-4">Instalação de rufos e pingadeiras para direcionamento correto da água e proteção das paredes contra umidade.</p>
166
+ <a href="#" class="text-primary font-bold flex items-center">
167
+ Saiba mais <i class="fas fa-arrow-right ml-2"></i>
168
+ </a>
169
+ </div>
170
+
171
+ <!-- Service 5 -->
172
+ <div class="service-card bg-white rounded-xl p-8 shadow-lg transition-all duration-300">
173
+ <div class="w-16 h-16 bg-primary rounded-full flex items-center justify-center mb-6">
174
+ <i class="fas fa-snowflake text-2xl text-dark"></i>
175
+ </div>
176
+ <h3 class="text-xl font-heading font-bold mb-4">Proteção Contra Gelo</h3>
177
+ <p class="text-secondary mb-4">Sistemas especiais para regiões frias, prevenindo formação de gelo nas calhas e danos estruturais.</p>
178
+ <a href="#" class="text-primary font-bold flex items-center">
179
+ Saiba mais <i class="fas fa-arrow-right ml-2"></i>
180
+ </a>
181
+ </div>
182
+
183
+ <!-- Service 6 -->
184
+ <div class="service-card bg-white rounded-xl p-8 shadow-lg transition-all duration-300">
185
+ <div class="w-16 h-16 bg-primary rounded-full flex items-center justify-center mb-6">
186
+ <i class="fas fa-lightbulb text-2xl text-dark"></i>
187
+ </div>
188
+ <h3 class="text-xl font-heading font-bold mb-4">Consultoria Técnica</h3>
189
+ <p class="text-secondary mb-4">Análise técnica personalizada para identificar a melhor solução em calhas e vedação para sua propriedade.</p>
190
+ <a href="#" class="text-primary font-bold flex items-center">
191
+ Saiba mais <i class="fas fa-arrow-right ml-2"></i>
192
+ </a>
193
+ </div>
194
+ </div>
195
+ </div>
196
+ </section>
197
+
198
+ <!-- Diferenciais Section -->
199
+ <section id="diferenciais" class="py-20 bg-dark text-light">
200
+ <div class="container mx-auto px-4">
201
+ <h2 class="text-3xl md:text-4xl font-heading font-bold text-center mb-4">Nossos Diferenciais</h2>
202
+ <div class="title-line mx-auto"></div>
203
+ <p class="text-center max-w-2xl mx-auto mb-16 mt-8">O que nos torna a melhor escolha para seus projetos de calhas e vedação</p>
204
+
205
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
206
+ <!-- Diferencial 1 -->
207
+ <div class="bg-dark border border-primary rounded-xl p-8 text-center hover:bg-dark/80 transition-all">
208
+ <div class="w-20 h-20 bg-primary rounded-full flex items-center justify-center mx-auto mb-6">
209
+ <i class="fas fa-award text-3xl text-dark"></i>
210
+ </div>
211
+ <h3 class="text-xl font-heading font-bold mb-4">Materiais Premium</h3>
212
+ <p class="text-secondary">Utilizamos apenas materiais de primeira linha, com garantia de durabilidade e resistência às intempéries.</p>
213
+ </div>
214
+
215
+ <!-- Diferencial 2 -->
216
+ <div class="bg-dark border border-primary rounded-xl p-8 text-center hover:bg-dark/80 transition-all">
217
+ <div class="w-20 h-20 bg-primary rounded-full flex items-center justify-center mx-auto mb-6">
218
+ <i class="fas fa-user-tie text-3xl text-dark"></i>
219
+ </div>
220
+ <h3 class="text-xl font-heading font-bold mb-4">Equipe Especializada</h3>
221
+ <p class="text-secondary">Profissionais com mais de 15 anos de experiência, treinados nas melhores técnicas de instalação e vedação.</p>
222
+ </div>
223
+
224
+ <!-- Diferencial 3 -->
225
+ <div class="bg-dark border border-primary rounded-xl p-8 text-center hover:bg-dark/80 transition-all">
226
+ <div class="w-20 h-20 bg-primary rounded-full flex items-center justify-center mx-auto mb-6">
227
+ <i class="fas fa-shield-alt text-3xl text-dark"></i>
228
+ </div>
229
+ <h3 class="text-xl font-heading font-bold mb-4">Garantia Extendida</h3>
230
+ <p class="text-secondary">Oferecemos garantia de 5 anos em todos os nossos serviços, comprovando nossa confiança no trabalho realizado.</p>
231
+ </div>
232
+ </div>
233
+ </div>
234
+ </section>
235
+
236
+ <!-- Sobre Nós Section -->
237
+ <section id="sobre" class="py-20 bg-light text-dark">
238
+ <div class="container mx-auto px-4">
239
+ <div class="flex flex-col lg:flex-row items-center">
240
+ <div class="lg:w-1/2 mb-12 lg:mb-0 lg:pr-12">
241
+ <h2 class="text-3xl md:text-4xl font-heading font-bold mb-4">Sobre Nós</h2>
242
+ <div class="title-line"></div>
243
+ <p class="mt-8 mb-6">A Z&S Calhas e Vedações nasceu da paixão por soluções eficientes em construção civil, com foco especial em proteção de telhados e edificações.</p>
244
+ <p class="mb-6">Desde 2008, temos orgulho de oferecer serviços de excelência em instalação e manutenção de calhas, vedação de telhados e sistemas de drenagem pluvial.</p>
245
+ <p class="mb-8">Nossa missão é proteger seu patrimônio com soluções duráveis e eficientes, utilizando materiais de qualidade e técnicas comprovadas.</p>
246
+
247
+ <div class="flex flex-wrap gap-4">
248
+ <div class="bg-primary text-dark px-6 py-3 rounded-lg font-bold">+15 Anos de Experiência</div>
249
+ <div class="bg-primary text-dark px-6 py-3 rounded-lg font-bold">+500 Projetos Concluídos</div>
250
+ <div class="bg-primary text-dark px-6 py-3 rounded-lg font-bold">100% Satisfação</div>
251
+ </div>
252
+ </div>
253
+ <div class="lg:w-1/2">
254
+ <div class="relative rounded-xl overflow-hidden shadow-xl">
255
+ <img src="https://images.unsplash.com/photo-1600585152220-90363fe7e115?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Equipe Z&S Calhas" class="w-full h-auto">
256
+ <div class="absolute inset-0 bg-primary/20"></div>
257
+ </div>
258
+ </div>
259
+ </div>
260
+ </div>
261
+ </section>
262
+
263
+ <!-- Galeria Section -->
264
+ <section class="py-20 bg-dark text-light">
265
+ <div class="container mx-auto px-4">
266
+ <h2 class="text-3xl md:text-4xl font-heading font-bold text-center mb-4">Nossos Trabalhos</h2>
267
+ <div class="title-line mx-auto"></div>
268
+ <p class="text-center max-w-2xl mx-auto mb-16 mt-8">Confira alguns dos nossos projetos recentes de instalação e manutenção de calhas</p>
269
+
270
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
271
+ <!-- Item 1 -->
272
+ <div class="gallery-item relative rounded-xl overflow-hidden h-64">
273
+ <img src="https://images.unsplash.com/photo-1605276374104-dee2a0ed3cd6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8
274
+ </html>
prompts.txt ADDED
File without changes