Hugging Face's logo

Spaces:
LimenAlex
/
signa-1
Running

App Files Community
LimenAlex commited on
Commit
f200fa1
·
verified ·
1 Parent(s): eb6fd84

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +6 -4
  2. index.html +689 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Signa 1
3
- emoji: ⚡
4
  colorFrom: red
5
- colorTo: gray
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: signa-1
3
+ emoji: 🐳
4
  colorFrom: red
5
+ colorTo: purple
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,689 @@
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="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>VistaSIGN | Premium Window Enhancements That Get You Noticed</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
+ <script>
10
+ tailwind.config = {
11
+ theme: {
12
+ extend: {
13
+ colors: {
14
+ primary: '#1d4ed8',
15
+ secondary: '#3b82f6',
16
+ accent: '#10b981',
17
+ dark: '#1e293b',
18
+ light: '#f8fafc'
19
+ },
20
+ fontFamily: {
21
+ sans: ['Inter', 'sans-serif'],
22
+ display: ['Bebas Neue', 'sans-serif']
23
+ }
24
+ }
25
+ }
26
+ }
27
+ </script>
28
+ <style>
29
+ @import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@300;400;500;600;700&display=swap');
30
+
31
+ body {
32
+ font-family: 'Inter', sans-serif;
33
+ overflow-x: hidden;
34
+ }
35
+
36
+ .hero-gradient {
37
+ background: linear-gradient(135deg, rgba(29,78,216,0.95) 0%, rgba(59,130,246,0.95) 100%), url('https://images.unsplash.com/photo-1600585152220-90363fe7e115?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80') no-repeat center center;
38
+ background-size: cover;
39
+ }
40
+
41
+ .sign-animation {
42
+ animation: float 6s ease-in-out infinite;
43
+ }
44
+
45
+ @keyframes float {
46
+ 0% { transform: translateY(0px); }
47
+ 50% { transform: translateY(-20px); }
48
+ 100% { transform: translateY(0px); }
49
+ }
50
+
51
+ .panel {
52
+ transition: all 0.3s ease;
53
+ }
54
+
55
+ .panel:hover {
56
+ transform: translateY(-10px);
57
+ box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);
58
+ }
59
+
60
+ .testimonial-card {
61
+ background: linear-gradient(135deg, rgba(255,255,255,0.9) 0%, rgba(248,250,252,0.9) 100%);
62
+ backdrop-filter: blur(10px);
63
+ }
64
+
65
+ .neon-effect {
66
+ text-shadow: 0 0 10px rgba(59,130,246,0.5);
67
+ }
68
+
69
+ .flip-card {
70
+ perspective: 1000px;
71
+ }
72
+
73
+ .flip-card-inner {
74
+ transition: transform 0.8s;
75
+ transform-style: preserve-3d;
76
+ }
77
+
78
+ .flip-card:hover .flip-card-inner {
79
+ transform: rotateY(180deg);
80
+ }
81
+
82
+ .flip-card-front, .flip-card-back {
83
+ position: absolute;
84
+ width: 100%;
85
+ height: 100%;
86
+ backface-visibility: hidden;
87
+ }
88
+
89
+ .flip-card-back {
90
+ transform: rotateY(180deg);
91
+ }
92
+ </style>
93
+ </head>
94
+ <body class="bg-light text-dark">
95
+ <!-- Navigation -->
96
+ <nav class="fixed w-full z-50 bg-white/90 backdrop-blur-md shadow-sm">
97
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
98
+ <div class="flex justify-between h-20 items-center">
99
+ <div class="flex items-center">
100
+ <div class="text-3xl font-bold text-primary font-display">VistaSIGN</div>
101
+ </div>
102
+ <div class="hidden md:flex space-x-8">
103
+ <a href="#" class="text-dark hover:text-primary font-medium transition">Home</a>
104
+ <a href="#" class="text-dark hover:text-primary font-medium transition">Services</a>
105
+ <a href="#" class="text-dark hover:text-primary font-medium transition">Portfolio</a>
106
+ <a href="#" class="text-dark hover:text-primary font-medium transition">Process</a>
107
+ <a href="#" class="text-dark hover:text-primary font-medium transition">About</a>
108
+ <a href="#" class="text-dark hover:text-primary font-medium transition">Contact</a>
109
+ </div>
110
+ <div class="md:hidden">
111
+ <button type="button" class="text-dark hover:text-primary focus:outline-none">
112
+ <i class="fas fa-bars text-2xl"></i>
113
+ </button>
114
+ </div>
115
+ <div class="hidden md:block">
116
+ <button class="bg-primary hover:bg-secondary text-white px-6 py-2 rounded-full font-medium transition transform hover:scale-105">
117
+ Free Quote
118
+ </button>
119
+ </div>
120
+ </div>
121
+ </div>
122
+ </nav>
123
+
124
+ <!-- Hero Section -->
125
+ <section class="hero-gradient min-h-screen flex items-center text-white pt-20">
126
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20">
127
+ <div class="flex flex-col md:flex-row items-center gap-12">
128
+ <div class="md:w-1/2">
129
+ <h1 class="text-6xl font-bold mb-6 leading-tight font-display neon-effect">Your Storefront Deserves Better Than Paper</h1>
130
+ <p class="text-xl mb-8">Transform your business visibility with premium window signage that customers notice, remember, and talk about.</p>
131
+ <div class="flex flex-col sm:flex-row gap-4">
132
+ <button class="bg-white text-primary hover:bg-gray-100 px-8 py-4 rounded-full font-bold transition transform hover:scale-105 shadow-lg">
133
+ Get Your Free Design
134
+ </button>
135
+ <button class="border-2 border-white text-white hover:bg-white/10 px-8 py-4 rounded-full font-bold transition transform hover:scale-105">
136
+ <i class="fas fa-play mr-2"></i> Watch Our Process
137
+ </button>
138
+ </div>
139
+ </div>
140
+ <div class="md:w-1/2 relative sign-animation">
141
+ <img src="https://images.unsplash.com/photo-1598301257982-0cf014dabbcd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Premium window signage" class="rounded-2xl shadow-2xl border-8 border-white">
142
+ <div class="absolute -bottom-6 -right-6 bg-white p-4 rounded-lg shadow-xl">
143
+ <div class="text-primary font-bold text-2xl">"Our sales increased 30% after new signage!"</div>
144
+ </div>
145
+ </div>
146
+ </div>
147
+ </div>
148
+ </section>
149
+
150
+ <!-- Client Logos -->
151
+ <section class="py-12 bg-gray-50">
152
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
153
+ <div class="text-center mb-12">
154
+ <h2 class="text-3xl font-bold mb-4 font-display">Trusted By Industry Leaders</h2>
155
+ <p class="text-lg text-gray-600 max-w-3xl mx-auto">From boutique shops to national retail chains, we create signage that delivers results</p>
156
+ </div>
157
+ <div class="grid grid-cols-2 md:grid-cols-5 gap-8">
158
+ <div class="flex items-center justify-center">
159
+ <div class="text-4xl font-bold text-gray-700">NIKE</div>
160
+ </div>
161
+ <div class="flex items-center justify-center">
162
+ <div class="text-4xl font-bold text-red-600">ZARA</div>
163
+ </div>
164
+ <div class="flex items-center justify-center">
165
+ <div class="text-4xl font-bold text-green-600">STARBUCKS</div>
166
+ </div>
167
+ <div class="flex items-center justify-center">
168
+ <div class="text-4xl font-bold text-yellow-600">MC DONALD'S</div>
169
+ </div>
170
+ <div class="flex items-center justify-center">
171
+ <div class="text-4xl font-bold text-blue-600">APPLE</div>
172
+ </div>
173
+ </div>
174
+ </div>
175
+ </section>
176
+
177
+ <!-- Services Section -->
178
+ <section class="py-20">
179
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
180
+ <div class="text-center mb-16">
181
+ <div class="text-accent text-sm font-bold mb-2">OUR SERVICES</div>
182
+ <h2 class="text-4xl font-bold mb-4 font-display">Signage That Makes Your Business Shine</h2>
183
+ <p class="text-lg text-gray-600 max-w-3xl mx-auto">We replace amateurish paper signs with professional installations that enhance your brand and drive foot traffic</p>
184
+ </div>
185
+ <div class="grid md:grid-cols-3 gap-8">
186
+ <!-- Service 1 -->
187
+ <div class="panel bg-white rounded-xl overflow-hidden shadow-lg">
188
+ <div class="h-60 bg-gradient-to-r from-primary to-secondary flex items-center justify-center text-white text-5xl">
189
+ <i class="fas fa-store-alt"></i>
190
+ </div>
191
+ <div class="p-8">
192
+ <h3 class="text-xl font-bold mb-3">Premium Window Graphics</h3>
193
+ <p class="text-gray-600 mb-5">Full-color digitally printed films that transform your windows into billboards without blocking natural light.</p>
194
+ <ul class="space-y-2 mb-6">
195
+ <li class="flex items-center"><i class="fas fa-check-circle text-accent mr-2"></i> UV resistant materials</li>
196
+ <li class="flex items-center"><i class="fas fa-check-circle text-accent mr-2"></i> Easy installation</li>
197
+ <li class="flex items-center"><i class="fas fa-check-circle text-accent mr-2"></i> Removable without residue</li>
198
+ </ul>
199
+ <button class="text-primary font-medium hover:text-secondary transition">
200
+ View Samples <i class="fas fa-arrow-right ml-1"></i>
201
+ </button>
202
+ </div>
203
+ </div>
204
+
205
+ <!-- Service 2 -->
206
+ <div class="panel bg-white rounded-xl overflow-hidden shadow-lg">
207
+ <div class="h-60 bg-gradient-to-r from-amber-500 to-pink-500 flex items-center justify-center text-white text-5xl">
208
+ <i class="fas fa-scroll"></i>
209
+ </div>
210
+ <div class="p-8">
211
+ <h3 class="text-xl font-bold mb-3">Custom Decals & Lettering</h3>
212
+ <p class="text-gray-600 mb-5">Precision-cut vinyl that gives your business instant curb appeal with elegant dimensional lettering.</p>
213
+ <ul class="space-y-2 mb-6">
214
+ <li class="flex items-center"><i class="fas fa-check-circle text-accent mr-2"></i> No cheap paper signs</li>
215
+ <li class="flex items-center"><i class="fas fa-check-circle text-accent mr-2"></i> Professional finishes</li>
216
+ <li class="flex items-center"><i class="fas fa-check-circle text-accent mr-2"></i> Lasts for years, not days</li>
217
+ </ul>
218
+ <button class="text-primary font-medium hover:text-secondary transition">
219
+ View Samples <i class="fas fa-arrow-right ml-1"></i>
220
+ </button>
221
+ </div>
222
+ </div>
223
+
224
+ <!-- Service 3 -->
225
+ <div class="panel bg-white rounded-xl overflow-hidden shadow-lg">
226
+ <div class="h-60 bg-gradient-to-r from-purple-500 to-accent flex items-center justify-center text-white text-5xl">
227
+ <i class="fas fa-lightbulb"></i>
228
+ </div>
229
+ <div class="p-8">
230
+ <h3 class="text-xl font-bold mb-3">Illuminated Signage</h3>
231
+ <p class="text-gray-600 mb-5">Backlit channel letters and LED displays that make your business impossible to ignore at night.</p>
232
+ <ul class="space-y-2 mb-6">
233
+ <li class="flex items-center"><i class="fas fa-check-circle text-accent mr-2"></i> Energy efficient LED</li>
234
+ <li class="flex items-center"><i class="fas fa-check-circle text-accent mr-2"></i> All-weather durability</li>
235
+ <li class="flex items-center"><i class="fas fa-check-circle text-accent mr-2"></i> 24/7 visibility</li>
236
+ </ul>
237
+ <button class="text-primary font-medium hover:text-secondary transition">
238
+ View Samples <i class="fas fa-arrow-right ml-1"></i>
239
+ </button>
240
+ </div>
241
+ </div>
242
+ </div>
243
+ </div>
244
+ </section>
245
+
246
+ <!-- Value Proposition -->
247
+ <section class="py-20 bg-primary text-white">
248
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
249
+ <div class="flex flex-col md:flex-row items-center gap-12">
250
+ <div class="md:w-1/2">
251
+ <img src="https://images.unsplash.com/photo-1602722053023-20d7a407bbd2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Professional signage installation" class="rounded-2xl shadow-2xl border-8 border-white/20">
252
+ </div>
253
+ <div class="md:w-1/2">
254
+ <div class="text-accent text-sm font-bold mb-2">WHY CHOOSE US</div>
255
+ <h2 class="text-4xl font-bold mb-6 font-display">Your Business Deserves <span class="text-secondary">More Than Just Signs</span></h2>
256
+ <p class="text-lg mb-8 opacity-90">We create functional art that enhances your storefront and attracts customers. No more temporary paper signs that peel, fade, or look unprofessional.</p>
257
+
258
+ <div class="space-y-6">
259
+ <div class="flex gap-4">
260
+ <div class="w-12 h-12 bg-secondary/20 rounded-full flex items-center justify-center text-secondary">
261
+ <i class="fas fa-money-bill-wave text-2xl"></i>
262
+ </div>
263
+ <div>
264
+ <h4 class="font-bold text-xl mb-1">Increase Foot Traffic</h4>
265
+ <p class="opacity-80">72% of businesses report immediate increase in visitors after professional signage installation</p>
266
+ </div>
267
+ </div>
268
+
269
+ <div class="flex gap-4">
270
+ <div class="w-12 h-12 bg-secondary/20 rounded-full flex items-center justify-center text-secondary">
271
+ <i class="fas fa-medal text-2xl"></i>
272
+ </div>
273
+ <div>
274
+ <h4 class="font-bold text-xl mb-1">Premium Materials</h4>
275
+ <p class="opacity-80">We use only commercial-grade materials designed to withstand years of exposure</p>
276
+ </div>
277
+ </div>
278
+
279
+ <div class="flex gap-4">
280
+ <div class="w-12 h-12 bg-secondary/20 rounded-full flex items-center justify-center text-secondary">
281
+ <i class="fas fa-truck text-2xl"></i>
282
+ </div>
283
+ <div>
284
+ <h4 class="font-bold text-xl mb-1">Fast Turnaround</h4>
285
+ <p class="opacity-80">Most standard projects completed within 5 business days from approval</p>
286
+ </div>
287
+ </div>
288
+ </div>
289
+ </div>
290
+ </div>
291
+ </div>
292
+ </section>
293
+
294
+ <!-- Portfolio Section -->
295
+ <section class="py-20">
296
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
297
+ <div class="text-center mb-16">
298
+ <div class="text-accent text-sm font-bold mb-2">OUR WORK</div>
299
+ <h2 class="text-4xl font-bold mb-4 font-display">Transformations That Speak Volumes</h2>
300
+ <p class="text-lg text-gray-600 max-w-3xl mx-auto">See how we've helped businesses just like yours upgrade from temporary fixes to permanent solutions</p>
301
+ </div>
302
+
303
+ <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
304
+ <!-- Project 1 - Flip Card -->
305
+ <div class="flip-card h-96">
306
+ <div class="flip-card-inner h-full rounded-xl shadow-lg">
307
+ <div class="flip-card-front bg-white rounded-xl overflow-hidden">
308
+ <img src="https://images.unsplash.com/photo-1544717305-2782549b5136?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=987&q=80" alt="Before - Coffee shop window" class="h-48 w-full object-cover">
309
+ <div class="p-6">
310
+ <h3 class="font-bold text-xl mb-2">Before: Paper Sale Signs</h3>
311
+ <p class="text-gray-600 mb-4">Generic sale signs taped to windows create a cluttered, temporary appearance that detracts from brand value.</p>
312
+ <div class="text-primary font-medium">Swipe to see After <i class="fas fa-arrow-right ml-1"></i></div>
313
+ </div>
314
+ </div>
315
+ <div class="flip-card-back bg-primary text-white rounded-xl overflow-hidden relative">
316
+ <img src="https://images.unsplash.com/photo-1588207416474-c5efb2f2d263?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=987&q=80" alt="After - Coffee shop window" class="h-48 w-full object-cover">
317
+ <div class="p-6">
318
+ <h3 class="font-bold text-xl mb-2 text-accent">After: Premium Window Perf</h3>
319
+ <p class="mb-4 opacity-90">Strategic placement of professionally designed graphics maintains visibility while enhancing the café's atmosphere.</p>
320
+ <div class="absolute bottom-6 left-6 right-6 text-center">
321
+ <span class="bg-accent text-white px-3 py-1 rounded-full text-xs font-bold">+28% FOOT TRAFFIC</span>
322
+ </div>
323
+ </div>
324
+ </div>
325
+ </div>
326
+ </div>
327
+
328
+ <!-- Project 2 - Flip Card -->
329
+ <div class="flip-card h-96">
330
+ <div class="flip-card-inner h-full rounded-xl shadow-lg">
331
+ <div class="flip-card-front bg-white rounded-xl overflow-hidden">
332
+ <img src="https://images.unsplash.com/photo-1607082348824-0a96f2a4b9da?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Before - Clothing store" class="h-48 w-full object-cover">
333
+ <div class="p-6">
334
+ <h3 class="font-bold text-xl mb-2">Before: Faded Vinyl Lettering</h3>
335
+ <p class="text-gray-600 mb-4">Peeling letters and faded graphics make businesses appear neglected and unprofessional.</p>
336
+ <div class="text-primary font-medium">Swipe to see After <i class="fas fa-arrow-right ml-1"></i></div>
337
+ </div>
338
+ </div>
339
+ <div class="flip-card-back bg-primary text-white rounded-xl overflow-hidden relative">
340
+ <img src="https://images.unsplash.com/photo-1556740738-b6a63e27c4df?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="After - Clothing store" class="h-48 w-full object-cover">
341
+ <div class="p-6">
342
+ <h3 class="font-bold text-xl mb-2 text-accent">After: Fresh Dimensional Lettering</h3>
343
+ <p class="mb-4 opacity-90">Crisp, modern typography with depth and illumination creates a premium shopping experience.</p>
344
+ <div class="absolute bottom-6 left-6 right-6 text-center">
345
+ <span class="bg-accent text-white px-3 py-1 rounded-full text-xs font-bold">5-YEAR WARRANTY</span>
346
+ </div>
347
+ </div>
348
+ </div>
349
+ </div>
350
+ </div>
351
+
352
+ <!-- Project 3 - Flip Card -->
353
+ <div class="flip-card h-96">
354
+ <div class="flip-card-inner h-full rounded-xl shadow-lg">
355
+ <div class="flip-card-front bg-white rounded-xl overflow-hidden">
356
+ <img src="https://images.unsplash.com/photo-1495474472287-4d71bcdd2085?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Before - Cafe window" class="h-48 w-full object-cover">
357
+ <div class="p-6">
358
+ <h3 class="font-bold text-xl mb-2">Before: Blank Glass Wasted</h3>
359
+ <p class="text-gray-600 mb-4">Untouched windows represent missed opportunities to communicate with potential customers walking by.</p>
360
+ <div class="text-primary font-medium">Swipe to see After <i class="fas fa-arrow-right ml-1"></i></div>
361
+ </div>
362
+ </div>
363
+ <div class="flip-card-back bg-primary text-white rounded-xl overflow-hidden relative">
364
+ <img src="https://images.unsplash.com/photo-1519162808019-7de1683fa2ad?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1012&q=80" alt="After - Cafe window" class="h-48 w-full object-cover">
365
+ <div class="p-6">
366
+ <h3 class="font-bold text-xl mb-2 text-accent">After: Strategic Window Graphics</h3>
367
+ <p class="mb-4 opacity-90">Custom window perf allows natural light while transforming glass into advertising space that entices customers.</p>
368
+ <div class="absolute bottom-6 left-6 right-6 text-center">
369
+ <span class="bg-accent text-white px-3 py-1 rounded-full text-xs font-bold">+22% CONVERSION RATE</span>
370
+ </div>
371
+ </div>
372
+ </div>
373
+ </div>
374
+ </div>
375
+ </div>
376
+
377
+ <div class="text-center mt-12">
378
+ <button class="bg-primary hover:bg-secondary text-white px-8 py-4 rounded-full font-bold transition transform hover:scale-105 shadow-lg">
379
+ View Full Portfolio
380
+ </button>
381
+ </div>
382
+ </div>
383
+ </section>
384
+
385
+ <!-- Process Section -->
386
+ <section class="py-20 bg-gray-50">
387
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
388
+ <div class="text-center mb-16">
389
+ <div class="text-accent text-sm font-bold mb-2">HOW IT WORKS</div>
390
+ <h2 class="text-4xl font-bold mb-4 font-display">Simple Process, Exceptional Results</h2>
391
+ <p class="text-lg text-gray-600 max-w-3xl mx-auto">From your initial consultation to final installation, we make upgrading your signage effortless</p>
392
+ </div>
393
+
394
+ <div class="relative">
395
+ <div class="hidden md:block absolute h-full border-r-2 border-dashed border-gray-300 left-1/2 top-0 -ml-1"></div>
396
+
397
+ <div class="grid gap-16">
398
+ <!-- Step 1 -->
399
+ <div class="relative flex md:flex-row flex-col items-center gap-8">
400
+ <div class="md:w-1/2 md:pr-16 md:text-right">
401
+ <div class="h-16 w-16 bg-primary rounded-full flex items-center justify-center text-white font-bold text-xl absolute md:-right-8 -left-4 top-8 z-10 shadow-lg">1</div>
402
+ <h3 class="text-2xl font-bold mb-3 font-display">Discovery & Design</h3>
403
+ <p class="text-gray-600">We start with understanding your business needs, brand guidelines, and vision for your space. Our designers then create 3 custom concepts for your review.</p>
404
+ </div>
405
+ <div class="md:w-1/2 md:pl-16 hidden md:block">
406
+ <img src="https://images.unsplash.com/photo-1522202176988-66273c2fd55f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Design meeting" class="rounded-xl shadow-lg">
407
+ </div>
408
+ </div>
409
+
410
+ <!-- Step 2 -->
411
+ <div class="relative flex md:flex-row-reverse flex-col items-center gap-8">
412
+ <div class="md:w-1/2 md:pl-16 md:text-left">
413
+ <div class="h-16 w-16 bg-primary rounded-full flex items-center justify-center text-white font-bold text-xl absolute md:-left-8 -left-4 top-8 z-10 shadow-lg">2</div>
414
+ <h3 class="text-2xl font-bold mb-3 font-display">Material Selection</h3>
415
+ <p class="text-gray-600">We guide you through our premium material options to find the perfect combination of durability, aesthetics, and budget for your signage needs.</p>
416
+ </div>
417
+ <div class="md:w-1/2 md:pr-16 hidden md:block">
418
+ <img src="https://images.unsplash.com/photo-1581291518633-83b4ebd1d83e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Material samples" class="rounded-xl shadow-lg">
419
+ </div>
420
+ </div>
421
+
422
+ <!-- Step 3 -->
423
+ <div class="relative flex md:flex-row flex-col items-center gap-8">
424
+ <div class="md:w-1/2 md:pr-16 md:text-right">
425
+ <div class="h-16 w-16 bg-primary rounded-full flex items-center justify-center text-white font-bold text-xl absolute md:-right-8 -left-4 top-8 z-10 shadow-lg">3</div>
426
+ <h3 class="text-2xl font-bold mb-3 font-display">Precision Production</h3>
427
+ <p class="text-gray-600">Our state-of-the-art printing and fabrication equipment ensures your signage meets exact specifications with vibrant colors and crisp details.</p>
428
+ </div>
429
+ <div class="md:w-1/2 md:pl-16 hidden md:block">
430
+ <img src="https://images.unsplash.com/photo-1597852074816-d933c7d2b988?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Sign production" class="rounded-xl shadow-lg">
431
+ </div>
432
+ </div>
433
+
434
+ <!-- Step 4 -->
435
+ <div class="relative flex md:flex-row-reverse flex-col items-center gap-8">
436
+ <div class="md:w-1/2 md:pl-16 md:text-left">
437
+ <div class="h-16 w-16 bg-primary rounded-full flex items-center justify-center text-white font-bold text-xl absolute md:-left-8 -left-4 top-8 z-10 shadow-lg">4</div>
438
+ <h3 class="text-2xl font-bold mb-3 font-display">Professional Installation</h3>
439
+ <p class="text-gray-600">Our certified installers handle everything from surface prep to final placement, ensuring flawless application that will last for years.</p>
440
+ </div>
441
+ <div class="md:w-1/2 md:pr-16 hidden md:block">
442
+ <img src="https://images.unsplash.com/photo-1600618528240-fb9fc964b853?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Installation" class="rounded-xl shadow-lg">
443
+ </div>
444
+ </div>
445
+ </div>
446
+ </div>
447
+ </div>
448
+ </section>
449
+
450
+ <!-- Testimonials -->
451
+ <section class="py-20">
452
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
453
+ <div class="text-center mb-16">
454
+ <div class="text-accent text-sm font-bold mb-2">SATISFIED CLIENTS</div>
455
+ <h2 class="text-4xl font-bold mb-4 font-display">What Our Clients Say</h2>
456
+ <p class="text-lg text-gray-600 max-w-3xl mx-auto">Don't just take our word for it - hear from business owners who've transformed their storefronts</p>
457
+ </div>
458
+
459
+ <div class="grid md:grid-cols-3 gap-8">
460
+ <div class="testimonial-card p-8 rounded-xl border border-gray-100 relative">
461
+ <div class="absolute -top-5 -left-5 bg-primary h-10 w-10 rounded-full flex items-center justify-center text-white">
462
+ <i class="fas fa-quote-left"></i>
463
+ </div>
464
+ <p class="mb-6 italic text-gray-700">"Our old paper signs made us look like we were going out of business. Since VistaSIGN installed our window graphics, customers actually comment on how professional we look. Worth every penny!"</p>
465
+ <div class="flex items-center gap-4">
466
+ <img src="https://randomuser.me/api/portraits/women/46.jpg" alt="Sarah Johnson" class="w-12 h-12 rounded-full">
467
+ <div>
468
+ <div class="font-bold">Sarah Johnson</div>
469
+ <div class="text-sm text-gray-500">Owner, Bloom Café</div>
470
+ </div>
471
+ </div>
472
+ </div>
473
+
474
+ <div class="testimonial-card p-8 rounded-xl border border-gray-100 relative">
475
+ <div class="absolute -top-5 -left-5 bg-primary h-10 w-10 rounded-full flex items-center justify-center text-white">
476
+ <i class="fas fa-quote-left"></i>
477
+ </div>
478
+ <p class="mb-6 italic text-gray-700">"I was shocked how much difference proper signage made. The week after installation, walk-in traffic increased 35%. Wish I'd done this years ago instead of using cheap temporary signs."</p>
479
+ <div class="flex items-center gap-4">
480
+ <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Michael Chen" class="w-12 h-12 rounded-full">
481
+ <div>
482
+ <div class="font-bold">Michael Chen</div>
483
+ <div class="text-sm text-gray-500">Manager, FitLife Gym</div>
484
+ </div>
485
+ </div>
486
+ </div>
487
+
488
+ <div class="testimonial-card p-8 rounded-xl border border-gray-100 relative">
489
+ <div class="absolute -top-5 -left-5 bg-primary h-10 w-10 rounded-full flex items-center justify-center text-white">
490
+ <i class="fas fa-quote-left"></i>
491
+ </div>
492
+ <p class="mb-6 italic text-gray-700">"The quality is exceptional - our decals have been up for 3 years through Chicago winters and still look brand new. Now my competitors are copying our look!"</p>
493
+ <div class="flex items-center gap-4">
494
+ <img src="https://randomuser.me/api/portraits/women/63.jpg" alt="Elena Rodriguez" class="w-12 h-12 rounded-full">
495
+ <div>
496
+ <div class="font-bold">Elena Rodriguez</div>
497
+ <div class="text-sm text-gray-500">CEO, Urban Nail Bar</div>
498
+ </div>
499
+ </div>
500
+ </div>
501
+ </div>
502
+ </div>
503
+ </section>
504
+
505
+ <!-- CTA Section -->
506
+ <section class="py-20 bg-primary text-white">
507
+ <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
508
+ <h2 class="text-4xl font-bold mb-6 font-display neon-effect">Ready to Upgrade From <span class="line-through opacity-70">Paper Signs</span> to Premium Signage?</h2>
509
+ <p class="text-xl mb-8 opacity-90">Schedule your free consultation and see how professional signage can transform your business visibility</p>
510
+
511
+ <div class="bg-white rounded-xl p-8 shadow-2xl max-w-2xl mx-auto">
512
+ <form class="grid md:grid-cols-2 gap-6">
513
+ <div>
514
+ <label for="name" class="block text-left text-dark font-medium mb-2">Your Name</label>
515
+ <input type="text" id="name" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-primary focus:border-transparent">
516
+ </div>
517
+ <div>
518
+ <label for="business" class="block text-left text-dark font-medium mb-2">Business Name</label>
519
+ <input type="text" id="business" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-primary focus:border-transparent">
520
+ </div>
521
+ <div>
522
+ <label for="email" class="block text-left text-dark font-medium mb-2">Email</label>
523
+ <input type="email" id="email" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-primary focus:border-transparent">
524
+ </div>
525
+ <div>
526
+ <label for="phone" class="block text-left text-dark font-medium mb-2">Phone</label>
527
+ <input type="tel" id="phone" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-primary focus:border-transparent">
528
+ </div>
529
+ <div class="md:col-span-2">
530
+ <label for="project" class="block text-left text-dark font-medium mb-2">Project Details</label>
531
+ <textarea id="project" rows="3" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-primary focus:border-transparent"></textarea>
532
+ </div>
533
+ <div class="md:col-span-2">
534
+ <button type="submit" class="w-full bg-primary hover:bg-secondary text-white px-6 py-4 rounded-lg font-bold transition transform hover:scale-[1.01] shadow-lg">
535
+ Request Free Quote
536
+ </button>
537
+ </div>
538
+ </form>
539
+ </div>
540
+ </div>
541
+ </section>
542
+
543
+ <!-- FAQ Section -->
544
+ <section class="py-20 bg-gray-50">
545
+ <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
546
+ <div class="text-center mb-16">
547
+ <div class="text-accent text-sm font-bold mb-2">FAQ</div>
548
+ <h2 class="text-4xl font-bold mb-4 font-display">Common Questions</h2>
549
+ <p class="text-lg text-gray-600 max-w-3xl mx-auto">Everything you need to know about professional signage solutions</p>
550
+ </div>
551
+
552
+ <div class="space-y-6">
553
+ <div class="bg-white rounded-xl p-6 shadow-md">
554
+ <button class="flex justify-between items-center w-full text-left">
555
+ <h3 class="text-lg font-bold">How long does window signage last?</h3>
556
+ <i class="fas fa-chevron-down text-primary transition-transform"></i>
557
+ </button>
558
+ <div class="mt-4 text-gray-600 hidden">
559
+ <p>Our premium window graphics are designed to last 3-5 years on average, with some installations lasting even longer. We use UV-resistant inks and laminated overlays to prevent fading, and our materials are designed to withstand extreme temperatures without peeling or cracking.</p>
560
+ </div>
561
+ </div>
562
+
563
+ <div class="bg-white rounded-xl p-6 shadow-md">
564
+ <button class="flex justify-between items-center w-full text-left">
565
+ <h3 class="text-lg font-bold">Can you remove old signage before installing new?</h3>
566
+ <i class="fas fa-chevron-down text-primary transition-transform"></i>
567
+ </button>
568
+ <div class="mt-4 text-gray-600 hidden">
569
+ <p>Absolutely. Our installation team specializes in complete signage transformations, which includes safe removal of existing signs without damaging your windows or surfaces. We handle disposal of all old materials as part of our service.</p>
570
+ </div>
571
+ </div>
572
+
573
+ <div class="bg-white rounded-xl p-6 shadow-md">
574
+ <button class="flex justify-between items-center w-full text-left">
575
+ <h3 class="text-lg font-bold">What's the difference between cheap signs and professional signage?</h3>
576
+ <i class="fas fa-chevron-down text-primary transition-transform"></i>
577
+ </button>
578
+ <div class="mt-4 text-gray-600 hidden">
579
+ <p>Professional signage uses commercial-grade materials with proper UV protection, laminated finishes, and precision cutting. The difference shows in durability (years vs months), visual impact (vibrant colors that don't fade), and brand perception (makes your business look established rather than temporary). In most cases, professional signage actually costs less over time than repeatedly replacing cheap signs.</p>
580
+ </div>
581
+ </div>
582
+
583
+ <div class="bg-white rounded-xl p-6 shadow-md">
584
+ <button class="flex justify-between items-center w-full text-left">
585
+ <h3 class="text-lg font-bold">Do you offer design services or do I need my own artwork?</h3>
586
+ <i class="fas fa-chevron-down text-primary transition-transform"></i>
587
+ </button>
588
+ <div class="mt-4 text-gray-600 hidden">
589
+ <p>We include full design services with every project at no extra cost. Our designers will create 3 custom concepts based on your brand guidelines, or we can work from your existing artwork if you prefer. Either way, you'll receive proofs for approval before anything goes to production.</p>
590
+ </div>
591
+ </div>
592
+
593
+ <div class="bg-white rounded-xl p-6 shadow-md">
594
+ <button class="flex justify-between items-center w-full text-left">
595
+ <h3 class="text-lg font-bold">How soon can you install after I approve the design?</h3>
596
+ <i class="fas fa-chevron-down text-primary transition-transform"></i>
597
+ </button>
598
+ <div class="mt-4 text-gray-600 hidden">
599
+ <p>Most standard projects can be installed within 5-7 business days after final approval. For urgent projects, we offer 48-hour rush service (additional fees apply). Installation timing may vary based on project complexity and seasonal demand.</p>
600
+ </div>
601
+ </div>
602
+ </div>
603
+ </div>
604
+ </section>
605
+
606
+ <!-- Footer -->
607
+ <footer class="bg-dark text-white pt-20 pb-10">
608
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
609
+ <div class="grid md:grid-cols-4 gap-12 mb-16">
610
+ <div>
611
+ <div class="text-3xl font-bold text-white font-display mb-4">VistaSIGN</div>
612
+ <p class="text-gray-400 mb-6">Transforming businesses through premium signage solutions since 2012.</p>
613
+ <div class="flex space-x-4">
614
+ <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-facebook-f"></i></a>
615
+ <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-instagram"></i></a>
616
+ <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-linkedin-in"></i></a>
617
+ <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-pinterest-p"></i></a>
618
+ </div>
619
+ </div>
620
+ <div>
621
+ <h4 class="text-lg font-bold mb-4">Services</h4>
622
+ <ul class="space-y-2">
623
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Window Graphics</a></li>
624
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Dimensional Lettering</a></li>
625
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Vehicle Wraps</a></li>
626
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Lighted Signs</a></li>
627
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Trade Show Displays</a></li>
628
+ </ul>
629
+ </div>
630
+ <div>
631
+ <h4 class="text-lg font-bold mb-4">Quick Links</h4>
632
+ <ul class="space-y-2">
633
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Portfolio</a></li>
634
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Process</a></li>
635
+ <li><a href="#" class="text-gray-400 hover:text-white transition">About Us</a></li>
636
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Testimonials</a></li>
637
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Careers</a></li>
638
+ </ul>
639
+ </div>
640
+ <div>
641
+ <h4 class="text-lg font-bold mb-4">Contact</h4>
642
+ <ul class="space-y-2">
643
+ <li class="flex items-center"><i class="fas fa-map-marker-alt text-gray-400 mr-3"></i> <span class="text-gray-400">123 Signage Blvd, Suite 200<br>Chicago, IL 60601</span></li>
644
+ <li class="flex items-center"><i class="fas fa-phone text-gray-400 mr-3"></i> <span class="text-gray-400">(312) 555-1212</span></li>
645
+ <li class="flex items-center"><i class="fas fa-envelope text-gray-400 mr-3"></i> <span class="text-gray-400">hello@vistasign.com</span></li>
646
+ </ul>
647
+ </div>
648
+ </div>
649
+ <div class="pt-8 border-t border-gray-800 flex flex-col md:flex-row justify-between items-center">
650
+ <p class="text-gray-500 mb-4 md:mb-0">© 2025 VistaSIGN. All rights reserved.</p>
651
+ <div class="flex space-x-6">
652
+ <a href="#" class="text-gray-500 hover:text-white transition">Privacy Policy</a>
653
+ <a href="#" class="text-gray-500 hover:text-white transition">Terms of Service</a>
654
+ <a href="#" class="text-gray-500 hover:text-white transition">Accessibility</a>
655
+ </div>
656
+ </div>
657
+ </div>
658
+ </footer>
659
+
660
+ <script>
661
+ // FAQ Accordion
662
+ document.querySelectorAll('.bg-white button').forEach(button => {
663
+ button.addEventListener('click', () => {
664
+ const content = button.nextElementSibling;
665
+ const icon = button.querySelector('i');
666
+
667
+ if (content.classList.contains('hidden')) {
668
+ content.classList.remove('hidden');
669
+ icon.classList.add('rotate-180');
670
+ } else {
671
+ content.classList.add('hidden');
672
+ icon.classList.remove('rotate-180');
673
+ }
674
+ });
675
+ });
676
+
677
+ // Simple scroll animation
678
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
679
+ anchor.addEventListener('click', function (e) {
680
+ e.preventDefault();
681
+
682
+ document.querySelector(this.getAttribute('href')).scrollIntoView({
683
+ behavior: 'smooth'
684
+ });
685
+ });
686
+ });
687
+ </script>
688
+ <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=LimenAlex/signa-1" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
689
+ </html>