Hugging Face's logo

Spaces:
natana
/
wow
Running

App Files Community
natana commited on
Commit
17f66aa
·
verified ·
1 Parent(s): c41274d

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +464 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Wow
3
- emoji: 📚
4
- colorFrom: green
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: wow
3
+ emoji: 🐳
4
+ colorFrom: yellow
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,464 @@
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>NOVA | Minimal Luxury Design</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
+ silver: {
15
+ 100: '#f5f7fa',
16
+ 200: '#e4e7eb',
17
+ 300: '#cbd2d9',
18
+ 400: '#9aa5b1',
19
+ 500: '#7b8794',
20
+ 600: '#616e7c',
21
+ 700: '#52606d',
22
+ 800: '#3e4c59',
23
+ 900: '#323f4b',
24
+ },
25
+ platinum: '#e5e4e2',
26
+ },
27
+ fontFamily: {
28
+ sans: ['Inter', 'sans-serif'],
29
+ serif: ['Playfair Display', 'serif'],
30
+ },
31
+ }
32
+ }
33
+ }
34
+ </script>
35
+ <style>
36
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:wght@400;500;600;700&display=swap');
37
+
38
+ body {
39
+ overflow-x: hidden;
40
+ }
41
+
42
+ .hero-gradient {
43
+ background: linear-gradient(135deg, rgba(245,247,250,0.98) 0%, rgba(255,255,255,0.9) 100%);
44
+ }
45
+
46
+ .nav-link::after {
47
+ content: '';
48
+ display: block;
49
+ width: 0;
50
+ height: 1px;
51
+ background: #000;
52
+ transition: width .3s;
53
+ }
54
+
55
+ .nav-link:hover::after {
56
+ width: 100%;
57
+ }
58
+
59
+ .card-hover {
60
+ transition: all 0.3s ease;
61
+ }
62
+
63
+ .card-hover:hover {
64
+ transform: translateY(-8px);
65
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
66
+ }
67
+
68
+ .text-stroke {
69
+ -webkit-text-stroke: 1px #000;
70
+ color: transparent;
71
+ }
72
+
73
+ .scroll-down {
74
+ animation: bounce 2s infinite;
75
+ }
76
+
77
+ @keyframes bounce {
78
+ 0%, 20%, 50%, 80%, 100% {
79
+ transform: translateY(0);
80
+ }
81
+ 40% {
82
+ transform: translateY(-10px);
83
+ }
84
+ 60% {
85
+ transform: translateY(-5px);
86
+ }
87
+ }
88
+ </style>
89
+ </head>
90
+ <body class="font-sans bg-white text-gray-900 antialiased">
91
+ <!-- Navigation -->
92
+ <nav class="fixed w-full z-50 bg-white bg-opacity-90 backdrop-blur-sm border-b border-silver-200">
93
+ <div class="max-w-7xl mx-auto px-6 py-4 flex justify-between items-center">
94
+ <a href="#" class="text-2xl font-serif font-bold tracking-tight">NOVA</a>
95
+ <div class="hidden md:flex space-x-10">
96
+ <a href="#" class="nav-link text-sm uppercase tracking-wider">Work</a>
97
+ <a href="#" class="nav-link text-sm uppercase tracking-wider">Studio</a>
98
+ <a href="#" class="nav-link text-sm uppercase tracking-wider">Journal</a>
99
+ <a href="#" class="nav-link text-sm uppercase tracking-wider">Contact</a>
100
+ </div>
101
+ <div class="flex items-center space-x-4">
102
+ <button class="md:hidden text-gray-900">
103
+ <i class="fas fa-bars text-xl"></i>
104
+ </button>
105
+ <div class="hidden md:flex items-center space-x-2">
106
+ <span class="text-xs tracking-widest">EN</span>
107
+ <i class="fas fa-chevron-down text-xs"></i>
108
+ </div>
109
+ </div>
110
+ </div>
111
+ </nav>
112
+
113
+ <!-- Hero Section -->
114
+ <section class="min-h-screen hero-gradient flex items-center pt-20">
115
+ <div class="max-w-7xl mx-auto px-6 py-20 md:py-32">
116
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
117
+ <div class="space-y-8">
118
+ <h1 class="text-5xl md:text-7xl font-serif font-bold leading-tight">
119
+ <span class="block">Elegance</span>
120
+ <span class="block text-silver-600">Redefined</span>
121
+ </h1>
122
+ <p class="text-lg md:text-xl text-silver-600 max-w-lg leading-relaxed">
123
+ We craft digital experiences that blend minimalism with sophistication, creating timeless designs that stand out.
124
+ </p>
125
+ <div class="flex space-x-6 pt-4">
126
+ <a href="#" class="px-8 py-3 bg-black text-white text-sm uppercase tracking-wider hover:bg-gray-900 transition duration-300">
127
+ Explore Work
128
+ </a>
129
+ <a href="#" class="px-8 py-3 border border-black text-sm uppercase tracking-wider hover:bg-black hover:text-white transition duration-300">
130
+ Our Studio
131
+ </a>
132
+ </div>
133
+ </div>
134
+ <div class="relative">
135
+ <div class="absolute -top-12 -right-12 w-64 h-64 bg-silver-100 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob"></div>
136
+ <div class="absolute -bottom-12 -left-12 w-64 h-64 bg-silver-200 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-2000"></div>
137
+ <div class="relative">
138
+ <img src="https://images.unsplash.com/photo-1616486338812-3dadae4b4ace?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1600&q=80"
139
+ alt="Minimal design"
140
+ class="w-full h-auto object-cover rounded-lg shadow-xl">
141
+ <div class="absolute -bottom-6 -right-6 bg-white p-6 shadow-lg">
142
+ <span class="block text-xs uppercase tracking-widest text-silver-500">Featured Project</span>
143
+ <span class="block font-serif text-xl mt-1">Horizon UI</span>
144
+ </div>
145
+ </div>
146
+ </div>
147
+ </div>
148
+ <div class="mt-20 text-center scroll-down">
149
+ <span class="block text-xs tracking-widest mb-2">SCROLL</span>
150
+ <i class="fas fa-chevron-down animate-bounce"></i>
151
+ </div>
152
+ </div>
153
+ </section>
154
+
155
+ <!-- Clients Section -->
156
+ <section class="py-20 bg-silver-100">
157
+ <div class="max-w-7xl mx-auto px-6">
158
+ <div class="text-center mb-16">
159
+ <span class="text-xs uppercase tracking-widest text-silver-500">Collaborations</span>
160
+ <h2 class="text-3xl md:text-4xl font-serif font-bold mt-4">Selected Clients</h2>
161
+ </div>
162
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
163
+ <div class="flex justify-center items-center h-24 opacity-70 hover:opacity-100 transition duration-300">
164
+ <span class="text-2xl font-serif font-bold">VOGUE</span>
165
+ </div>
166
+ <div class="flex justify-center items-center h-24 opacity-70 hover:opacity-100 transition duration-300">
167
+ <span class="text-2xl font-serif font-bold">APPLE</span>
168
+ </div>
169
+ <div class="flex justify-center items-center h-24 opacity-70 hover:opacity-100 transition duration-300">
170
+ <span class="text-2xl font-serif font-bold">HERMÈS</span>
171
+ </div>
172
+ <div class="flex justify-center items-center h-24 opacity-70 hover:opacity-100 transition duration-300">
173
+ <span class="text-2xl font-serif font-bold">BALENCIAGA</span>
174
+ </div>
175
+ </div>
176
+ </div>
177
+ </section>
178
+
179
+ <!-- Projects Section -->
180
+ <section class="py-20">
181
+ <div class="max-w-7xl mx-auto px-6">
182
+ <div class="flex justify-between items-end mb-16">
183
+ <div>
184
+ <span class="text-xs uppercase tracking-widest text-silver-500">Portfolio</span>
185
+ <h2 class="text-3xl md:text-4xl font-serif font-bold mt-4">Recent Works</h2>
186
+ </div>
187
+ <a href="#" class="hidden md:flex items-center space-x-2 group">
188
+ <span class="text-sm uppercase tracking-widest group-hover:underline">View All</span>
189
+ <i class="fas fa-arrow-right text-xs transition-transform group-hover:translate-x-1"></i>
190
+ </a>
191
+ </div>
192
+
193
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
194
+ <!-- Project 1 -->
195
+ <div class="card-hover">
196
+ <div class="overflow-hidden rounded-lg">
197
+ <img src="https://images.unsplash.com/photo-1558655146-d09347e92766?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1600&q=80"
198
+ alt="Project 1"
199
+ class="w-full h-96 object-cover transition-transform duration-700 hover:scale-105">
200
+ </div>
201
+ <div class="mt-6">
202
+ <span class="text-xs uppercase tracking-widest text-silver-500">Web Design</span>
203
+ <h3 class="text-2xl font-serif font-bold mt-2">Monochrome</h3>
204
+ <p class="text-silver-600 mt-2">A luxury fashion e-commerce experience</p>
205
+ </div>
206
+ </div>
207
+
208
+ <!-- Project 2 -->
209
+ <div class="card-hover">
210
+ <div class="overflow-hidden rounded-lg">
211
+ <img src="https://images.unsplash.com/photo-1560493676-04071c5f467b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1600&q=80"
212
+ alt="Project 2"
213
+ class="w-full h-96 object-cover transition-transform duration-700 hover:scale-105">
214
+ </div>
215
+ <div class="mt-6">
216
+ <span class="text-xs uppercase tracking-widest text-silver-500">Branding</span>
217
+ <h3 class="text-2xl font-serif font-bold mt-2">Atelier</h3>
218
+ <p class="text-silver-600 mt-2">Visual identity for a design studio</p>
219
+ </div>
220
+ </div>
221
+ </div>
222
+
223
+ <div class="mt-12 text-center md:hidden">
224
+ <a href="#" class="inline-flex items-center space-x-2 group">
225
+ <span class="text-sm uppercase tracking-widest group-hover:underline">View All Projects</span>
226
+ <i class="fas fa-arrow-right text-xs transition-transform group-hover:translate-x-1"></i>
227
+ </a>
228
+ </div>
229
+ </div>
230
+ </section>
231
+
232
+ <!-- About Section -->
233
+ <section class="py-20 bg-black text-white">
234
+ <div class="max-w-7xl mx-auto px-6">
235
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
236
+ <div>
237
+ <img src="https://images.unsplash.com/photo-1522202176988-66273c2fd55f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1600&q=80"
238
+ alt="Our Studio"
239
+ class="w-full h-auto object-cover rounded-lg">
240
+ </div>
241
+ <div class="space-y-8">
242
+ <span class="text-xs uppercase tracking-widest text-silver-400">About Us</span>
243
+ <h2 class="text-3xl md:text-4xl font-serif font-bold">Design Philosophy</h2>
244
+ <p class="text-silver-300 text-lg leading-relaxed">
245
+ Founded in 2015, NOVA is a boutique design studio specializing in minimal, sophisticated digital experiences.
246
+ We believe in the power of restraint, where every element serves a purpose.
247
+ </p>
248
+ <div class="grid grid-cols-2 gap-8 pt-4">
249
+ <div>
250
+ <span class="text-4xl font-serif font-bold">18+</span>
251
+ <span class="block text-sm text-silver-300 mt-2">International Awards</span>
252
+ </div>
253
+ <div>
254
+ <span class="text-4xl font-serif font-bold">50+</span>
255
+ <span class="block text-sm text-silver-300 mt-2">Satisfied Clients</span>
256
+ </div>
257
+ </div>
258
+ <a href="#" class="inline-flex items-center space-x-2 group mt-8">
259
+ <span class="text-sm uppercase tracking-widest group-hover:underline">Our Story</span>
260
+ <i class="fas fa-arrow-right text-xs transition-transform group-hover:translate-x-1"></i>
261
+ </a>
262
+ </div>
263
+ </div>
264
+ </div>
265
+ </section>
266
+
267
+ <!-- Testimonials -->
268
+ <section class="py-20 bg-silver-100">
269
+ <div class="max-w-4xl mx-auto px-6 text-center">
270
+ <span class="text-xs uppercase tracking-widest text-silver-500">Testimonials</span>
271
+ <h2 class="text-3xl md:text-4xl font-serif font-bold mt-4 mb-12">Client Experiences</h2>
272
+
273
+ <div class="relative">
274
+ <div class="absolute -top-12 -left-12 w-32 h-32 bg-silver-200 rounded-full mix-blend-multiply filter blur-xl opacity-50"></div>
275
+ <div class="absolute -bottom-12 -right-12 w-32 h-32 bg-silver-300 rounded-full mix-blend-multiply filter blur-xl opacity-50"></div>
276
+
277
+ <div class="relative bg-white p-12 rounded-lg shadow-sm">
278
+ <div class="text-5xl font-serif font-bold text-silver-200 mb-8">"</div>
279
+ <p class="text-xl text-silver-700 leading-relaxed mb-8">
280
+ Working with NOVA was transformative for our brand. Their ability to distill complex ideas into elegant, minimal designs is unparalleled. The result exceeded our expectations.
281
+ </p>
282
+ <div class="flex flex-col items-center">
283
+ <img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=200&q=80"
284
+ alt="Client"
285
+ class="w-16 h-16 rounded-full object-cover mb-4">
286
+ <span class="font-medium">Sarah Johnson</span>
287
+ <span class="text-sm text-silver-500">Creative Director, Hermès</span>
288
+ </div>
289
+ </div>
290
+ </div>
291
+ </div>
292
+ </section>
293
+
294
+ <!-- Journal Section -->
295
+ <section class="py-20">
296
+ <div class="max-w-7xl mx-auto px-6">
297
+ <div class="flex justify-between items-end mb-16">
298
+ <div>
299
+ <span class="text-xs uppercase tracking-widest text-silver-500">Insights</span>
300
+ <h2 class="text-3xl md:text-4xl font-serif font-bold mt-4">From The Journal</h2>
301
+ </div>
302
+ <a href="#" class="hidden md:flex items-center space-x-2 group">
303
+ <span class="text-sm uppercase tracking-widest group-hover:underline">All Articles</span>
304
+ <i class="fas fa-arrow-right text-xs transition-transform group-hover:translate-x-1"></i>
305
+ </a>
306
+ </div>
307
+
308
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
309
+ <!-- Article 1 -->
310
+ <div class="card-hover border border-silver-200 rounded-lg overflow-hidden">
311
+ <div class="h-64 overflow-hidden">
312
+ <img src="https://images.unsplash.com/photo-1545239351-ef35f43d514b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1600&q=80"
313
+ alt="Article 1"
314
+ class="w-full h-full object-cover transition-transform duration-700 hover:scale-105">
315
+ </div>
316
+ <div class="p-6">
317
+ <span class="text-xs uppercase tracking-widest text-silver-500">Design • May 2023</span>
318
+ <h3 class="text-xl font-serif font-bold mt-2">The Art of Subtraction</h3>
319
+ <p class="text-silver-600 mt-3 mb-4">Exploring how minimal design creates more impactful user experiences.</p>
320
+ <a href="#" class="text-sm font-medium flex items-center space-x-2 group">
321
+ <span>Read More</span>
322
+ <i class="fas fa-arrow-right text-xs transition-transform group-hover:translate-x-1"></i>
323
+ </a>
324
+ </div>
325
+ </div>
326
+
327
+ <!-- Article 2 -->
328
+ <div class="card-hover border border-silver-200 rounded-lg overflow-hidden">
329
+ <div class="h-64 overflow-hidden">
330
+ <img src="https://images.unsplash.com/photo-1454165804606-c3aa57c482dc?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1600&q=80"
331
+ alt="Article 2"
332
+ class="w-full h-full object-cover transition-transform duration-700 hover:scale-105">
333
+ </div>
334
+ <div class="p-6">
335
+ <span class="text-xs uppercase tracking-widest text-silver-500">Branding • April 2023</span>
336
+ <h3 class="text-xl font-serif font-bold mt-2">Typography as Identity</h3>
337
+ <p class="text-silver-600 mt-3 mb-4">How type choices define luxury brands in the digital space.</p>
338
+ <a href="#" class="text-sm font-medium flex items-center space-x-2 group">
339
+ <span>Read More</span>
340
+ <i class="fas fa-arrow-right text-xs transition-transform group-hover:translate-x-1"></i>
341
+ </a>
342
+ </div>
343
+ </div>
344
+
345
+ <!-- Article 3 -->
346
+ <div class="card-hover border border-silver-200 rounded-lg overflow-hidden">
347
+ <div class="h-64 overflow-hidden">
348
+ <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1600&q=80"
349
+ alt="Article 3"
350
+ class="w-full h-full object-cover transition-transform duration-700 hover:scale-105">
351
+ </div>
352
+ <div class="p-6">
353
+ <span class="text-xs uppercase tracking-widest text-silver-500">Strategy • March 2023</span>
354
+ <h3 class="text-xl font-serif font-bold mt-2">Digital Luxury in 2023</h3>
355
+ <p class="text-silver-600 mt-3 mb-4">Key trends shaping high-end digital experiences this year.</p>
356
+ <a href="#" class="text-sm font-medium flex items-center space-x-2 group">
357
+ <span>Read More</span>
358
+ <i class="fas fa-arrow-right text-xs transition-transform group-hover:translate-x-1"></i>
359
+ </a>
360
+ </div>
361
+ </div>
362
+ </div>
363
+
364
+ <div class="mt-12 text-center md:hidden">
365
+ <a href="#" class="inline-flex items-center space-x-2 group">
366
+ <span class="text-sm uppercase tracking-widest group-hover:underline">View All Articles</span>
367
+ <i class="fas fa-arrow-right text-xs transition-transform group-hover:translate-x-1"></i>
368
+ </a>
369
+ </div>
370
+ </div>
371
+ </section>
372
+
373
+ <!-- CTA Section -->
374
+ <section class="py-32 bg-silver-900 text-white">
375
+ <div class="max-w-4xl mx-auto px-6 text-center">
376
+ <span class="text-xs uppercase tracking-widest text-silver-400">Get In Touch</span>
377
+ <h2 class="text-3xl md:text-5xl font-serif font-bold mt-4 mb-8">Let's Create Something Remarkable</h2>
378
+ <p class="text-silver-300 text-lg max-w-2xl mx-auto leading-relaxed mb-12">
379
+ We're currently accepting new projects. Reach out to discuss how we can help elevate your digital presence.
380
+ </p>
381
+ <a href="#" class="px-10 py-4 bg-white text-black text-sm uppercase tracking-wider hover:bg-silver-100 transition duration-300 inline-flex items-center">
382
+ <span>Start a Project</span>
383
+ <i class="fas fa-arrow-right ml-4 text-xs transition-transform group-hover:translate-x-1"></i>
384
+ </a>
385
+ </div>
386
+ </section>
387
+
388
+ <!-- Footer -->
389
+ <footer class="bg-black text-white py-16">
390
+ <div class="max-w-7xl mx-auto px-6">
391
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-12">
392
+ <div>
393
+ <h3 class="text-2xl font-serif font-bold mb-6">NOVA</h3>
394
+ <p class="text-silver-400 text-sm leading-relaxed">
395
+ A boutique design studio specializing in minimal, sophisticated digital experiences for luxury brands worldwide.
396
+ </p>
397
+ </div>
398
+
399
+ <div>
400
+ <h4 class="text-sm uppercase tracking-widest text-silver-500 mb-6">Studio</h4>
401
+ <ul class="space-y-3">
402
+ <li><a href="#" class="text-silver-300 hover:text-white text-sm">About</a></li>
403
+ <li><a href="#" class="text-silver-300 hover:text-white text-sm">Team</a></li>
404
+ <li><a href="#" class="text-silver-300 hover:text-white text-sm">Careers</a></li>
405
+ <li><a href="#" class="text-silver-300 hover:text-white text-sm">Contact</a></li>
406
+ </ul>
407
+ </div>
408
+
409
+ <div>
410
+ <h4 class="text-sm uppercase tracking-widest text-silver-500 mb-6">Work</h4>
411
+ <ul class="space-y-3">
412
+ <li><a href="#" class="text-silver-300 hover:text-white text-sm">Portfolio</a></li>
413
+ <li><a href="#" class="text-silver-300 hover:text-white text-sm">Case Studies</a></li>
414
+ <li><a href="#" class="text-silver-300 hover:text-white text-sm">Process</a></li>
415
+ </ul>
416
+ </div>
417
+
418
+ <div>
419
+ <h4 class="text-sm uppercase tracking-widest text-silver-500 mb-6">Connect</h4>
420
+ <ul class="space-y-3">
421
+ <li><a href="#" class="text-silver-300 hover:text-white text-sm">Instagram</a></li>
422
+ <li><a href="#" class="text-silver-300 hover:text-white text-sm">LinkedIn</a></li>
423
+ <li><a href="#" class="text-silver-300 hover:text-white text-sm">Twitter</a></li>
424
+ <li><a href="#" class="text-silver-300 hover:text-white text-sm">Dribbble</a></li>
425
+ </ul>
426
+ </div>
427
+ </div>
428
+
429
+ <div class="border-t border-silver-900 mt-16 pt-10 flex flex-col md:flex-row justify-between items-center">
430
+ <span class="text-silver-500 text-sm">© 2023 NOVA Design Studio. All rights reserved.</span>
431
+ <div class="flex space-x-6 mt-6 md:mt-0">
432
+ <a href="#" class="text-silver-500 hover:text-white text-sm">Privacy Policy</a>
433
+ <a href="#" class="text-silver-500 hover:text-white text-sm">Terms of Service</a>
434
+ </div>
435
+ </div>
436
+ </div>
437
+ </footer>
438
+
439
+ <script>
440
+ // Simple animation for scroll down arrow
441
+ document.addEventListener('DOMContentLoaded', function() {
442
+ // Smooth scroll for anchor links
443
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
444
+ anchor.addEventListener('click', function (e) {
445
+ e.preventDefault();
446
+
447
+ document.querySelector(this.getAttribute('href')).scrollIntoView({
448
+ behavior: 'smooth'
449
+ });
450
+ });
451
+ });
452
+
453
+ // Mobile menu toggle would go here
454
+ // This is just a placeholder for the functionality
455
+ const mobileMenuButton = document.querySelector('button.md\\:hidden');
456
+ if(mobileMenuButton) {
457
+ mobileMenuButton.addEventListener('click', function() {
458
+ alert('Mobile menu would open here in a full implementation');
459
+ });
460
+ }
461
+ });
462
+ </script>
463
+ <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=natana/wow" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
464
+ </html>