Hugging Face's logo

Spaces:
RoxyJune
/
stoodheaps-creative-studio
Running

App Files Community
RoxyJune commited on
Commit
88da943
·
verified ·
1 Parent(s): 932aab4

https://stood-heaps-13109763.figma.site

Browse files
Files changed (2) hide show
  1. README.md +8 -5
  2. index.html +366 -18
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
- title: Stoodheaps Creative Studio
3
- emoji: 🐨
4
- colorFrom: indigo
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: StoodHeaps Creative Studio 🎨
3
+ colorFrom: yellow
4
+ colorTo: gray
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://deepsite.hf.co).
index.html CHANGED
@@ -1,19 +1,367 @@
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>StoodHeaps Creative Studio</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <script src="https://unpkg.com/feather-icons"></script>
11
+ <script>
12
+ tailwind.config = {
13
+ theme: {
14
+ extend: {
15
+ colors: {
16
+ primary: {
17
+ 100: '#f0f9ff',
18
+ 200: '#e0f2fe',
19
+ 300: '#bae6fd',
20
+ 400: '#7dd3fc',
21
+ 500: '#38bdf8',
22
+ 600: '#0284c7',
23
+ 700: '#0369a1',
24
+ 800: '#075985',
25
+ 900: '#0c4a6e',
26
+ },
27
+ secondary: {
28
+ 100: '#f5f3ff',
29
+ 200: '#ede9fe',
30
+ 300: '#ddd6fe',
31
+ 400: '#c4b5fd',
32
+ 500: '#8b5cf6',
33
+ 600: '#7c3aed',
34
+ 700: '#6d28d9',
35
+ 800: '#5b21b6',
36
+ 900: '#4c1d95',
37
+ }
38
+ }
39
+ }
40
+ }
41
+ }
42
+ </script>
43
+ <style>
44
+ .hero-gradient {
45
+ background: linear-gradient(135deg, rgba(56,189,248,0.2) 0%, rgba(139,92,246,0.2) 100%);
46
+ }
47
+ .transition-slow {
48
+ transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
49
+ }
50
+ </style>
51
+ </head>
52
+ <body class="bg-gray-50 text-gray-900 dark:bg-gray-900 dark:text-gray-100 transition-slow">
53
+ <!-- Navigation -->
54
+ <nav class="fixed w-full z-50 bg-white/80 dark:bg-gray-900/80 backdrop-blur-md border-b border-gray-200 dark:border-gray-800">
55
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
56
+ <div class="flex justify-between h-16">
57
+ <div class="flex items-center">
58
+ <a href="#" class="flex items-center space-x-2">
59
+ <div class="w-8 h-8 rounded-full bg-primary-500"></div>
60
+ <span class="text-xl font-bold">StoodHeaps</span>
61
+ </a>
62
+ </div>
63
+ <div class="hidden md:flex items-center space-x-8">
64
+ <a href="#" class="text-sm font-medium hover:text-primary-500 transition-slow">Work</a>
65
+ <a href="#" class="text-sm font-medium hover:text-primary-500 transition-slow">Services</a>
66
+ <a href="#" class="text-sm font-medium hover:text-primary-500 transition-slow">About</a>
67
+ <a href="#" class="text-sm font-medium hover:text-primary-500 transition-slow">Contact</a>
68
+ </div>
69
+ <div class="flex items-center md:hidden">
70
+ <button id="mobile-menu-button" class="p-2">
71
+ <i data-feather="menu"></i>
72
+ </button>
73
+ </div>
74
+ </div>
75
+ </div>
76
+ </nav>
77
+
78
+ <!-- Mobile Menu -->
79
+ <div id="mobile-menu" class="hidden fixed inset-0 z-40 bg-white dark:bg-gray-900 pt-20 px-4">
80
+ <div class="flex flex-col space-y-6 text-center">
81
+ <a href="#" class="text-lg font-medium hover:text-primary-500 transition-slow">Work</a>
82
+ <a href="#" class="text-lg font-medium hover:text-primary-500 transition-slow">Services</a>
83
+ <a href="#" class="text-lg font-medium hover:text-primary-500 transition-slow">About</a>
84
+ <a href="#" class="text-lg font-medium hover:text-primary-500 transition-slow">Contact</a>
85
+ </div>
86
+ <button class="absolute top-4 right-4 p-2" id="close-mobile-menu">
87
+ <i data-feather="x"></i>
88
+ </button>
89
+ </div>
90
+
91
+ <!-- Hero Section -->
92
+ <section class="hero-gradient min-h-screen flex items-center pt-16">
93
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-24">
94
+ <div class="text-center">
95
+ <h1 class="text-5xl md:text-7xl font-bold mb-6">
96
+ <span class="bg-clip-text text-transparent bg-gradient-to-r from-primary-500 to-secondary-500">
97
+ Creative Studio
98
+ </span>
99
+ </h1>
100
+ <p class="text-xl md:text-2xl text-gray-600 dark:text-gray-300 max-w-3xl mx-auto mb-10">
101
+ We craft digital experiences that stand out and deliver results.
102
+ </p>
103
+ <div class="flex justify-center space-x-4">
104
+ <a href="#" class="px-6 py-3 bg-primary-500 hover:bg-primary-600 text-white font-medium rounded-full transition-slow">
105
+ View Our Work
106
+ </a>
107
+ <a href="#" class="px-6 py-3 border border-gray-300 dark:border-gray-700 hover:border-primary-500 text-gray-700 dark:text-gray-300 hover:text-primary-500 font-medium rounded-full transition-slow">
108
+ Get In Touch
109
+ </a>
110
+ </div>
111
+ </div>
112
+ </div>
113
+ </section>
114
+
115
+ <!-- Services Section -->
116
+ <section class="py-20 bg-white dark:bg-gray-900">
117
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
118
+ <div class="text-center mb-16">
119
+ <h2 class="text-3xl md:text-4xl font-bold mb-4">Our Services</h2>
120
+ <p class="text-gray-500 dark:text-gray-400 max-w-2xl mx-auto">
121
+ We offer a comprehensive suite of digital services to help your business thrive online.
122
+ </p>
123
+ </div>
124
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
125
+ <div class="bg-gray-50 dark:bg-gray-800 p-8 rounded-xl hover:shadow-lg transition-slow">
126
+ <div class="w-14 h-14 bg-primary-100 dark:bg-primary-900 rounded-lg flex items-center justify-center mb-6">
127
+ <i data-feather="layout" class="text-primary-500 w-6 h-6"></i>
128
+ </div>
129
+ <h3 class="text-xl font-bold mb-3">UI/UX Design</h3>
130
+ <p class="text-gray-600 dark:text-gray-400">
131
+ Beautiful, intuitive interfaces that delight users and drive engagement.
132
+ </p>
133
+ </div>
134
+ <div class="bg-gray-50 dark:bg-gray-800 p-8 rounded-xl hover:shadow-lg transition-slow">
135
+ <div class="w-14 h-14 bg-primary-100 dark:bg-primary-900 rounded-lg flex items-center justify-center mb-6">
136
+ <i data-feather="code" class="text-primary-500 w-6 h-6"></i>
137
+ </div>
138
+ <h3 class="text-xl font-bold mb-3">Web Development</h3>
139
+ <p class="text-gray-600 dark:text-gray-400">
140
+ Fast, responsive websites built with modern technologies.
141
+ </p>
142
+ </div>
143
+ <div class="bg-gray-50 dark:bg-gray-800 p-8 rounded-xl hover:shadow-lg transition-slow">
144
+ <div class="w-14 h-14 bg-primary-100 dark:bg-primary-900 rounded-lg flex items-center justify-center mb-6">
145
+ <i data-feather="bar-chart-2" class="text-primary-500 w-6 h-6"></i>
146
+ </div>
147
+ <h3 class="text-xl font-bold mb-3">Digital Strategy</h3>
148
+ <p class="text-gray-600 dark:text-gray-400">
149
+ Data-driven approaches to grow your online presence.
150
+ </p>
151
+ </div>
152
+ </div>
153
+ </div>
154
+ </section>
155
+
156
+ <!-- Portfolio Section -->
157
+ <section class="py-20 bg-gray-50 dark:bg-gray-800">
158
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
159
+ <div class="text-center mb-16">
160
+ <h2 class="text-3xl md:text-4xl font-bold mb-4">Featured Work</h2>
161
+ <p class="text-gray-500 dark:text-gray-400 max-w-2xl mx-auto">
162
+ Some of our recent projects that showcase our capabilities.
163
+ </p>
164
+ </div>
165
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
166
+ <div class="group relative overflow-hidden rounded-xl">
167
+ <img src="http://static.photos/technology/640x360/1" alt="Project 1" class="w-full h-64 object-cover transition-slow group-hover:scale-105">
168
+ <div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent flex items-end p-6">
169
+ <div>
170
+ <h3 class="text-white text-xl font-bold">E-commerce Platform</h3>
171
+ <p class="text-gray-300">UI/UX Design, Development</p>
172
+ </div>
173
+ </div>
174
+ </div>
175
+ <div class="group relative overflow-hidden rounded-xl">
176
+ <img src="http://static.photos/minimal/640x360/2" alt="Project 2" class="w-full h-64 object-cover transition-slow group-hover:scale-105">
177
+ <div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent flex items-end p-6">
178
+ <div>
179
+ <h3 class="text-white text-xl font-bold">Mobile App</h3>
180
+ <p class="text-gray-300">Product Design, Strategy</p>
181
+ </div>
182
+ </div>
183
+ </div>
184
+ <div class="group relative overflow-hidden rounded-xl">
185
+ <img src="http://static.photos/abstract/640x360/3" alt="Project 3" class="w-full h-64 object-cover transition-slow group-hover:scale-105">
186
+ <div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent flex items-end p-6">
187
+ <div>
188
+ <h3 class="text-white text-xl font-bold">Brand Identity</h3>
189
+ <p class="text-gray-300">Visual Design, Branding</p>
190
+ </div>
191
+ </div>
192
+ </div>
193
+ </div>
194
+ <div class="text-center mt-12">
195
+ <a href="#" class="inline-flex items-center px-6 py-3 border border-gray-300 dark:border-gray-700 rounded-full text-gray-700 dark:text-gray-300 hover:text-primary-500 hover:border-primary-500 transition-slow">
196
+ View All Projects
197
+ <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
198
+ </a>
199
+ </div>
200
+ </div>
201
+ </section>
202
+
203
+ <!-- Testimonials -->
204
+ <section class="py-20 bg-white dark:bg-gray-900">
205
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
206
+ <div class="text-center mb-16">
207
+ <h2 class="text-3xl md:text-4xl font-bold mb-4">Client Testimonials</h2>
208
+ <p class="text-gray-500 dark:text-gray-400 max-w-2xl mx-auto">
209
+ Don't just take our word for it - here's what our clients say.
210
+ </p>
211
+ </div>
212
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
213
+ <div class="bg-gray-50 dark:bg-gray-800 p-8 rounded-xl">
214
+ <div class="flex items-center mb-4">
215
+ <div class="w-12 h-12 rounded-full overflow-hidden mr-4">
216
+ <img src="http://static.photos/people/200x200/1" alt="Client 1" class="w-full h-full object-cover">
217
+ </div>
218
+ <div>
219
+ <h4 class="font-bold">Sarah Johnson</h4>
220
+ <p class="text-sm text-gray-500 dark:text-gray-400">CEO, TechStart</p>
221
+ </div>
222
+ </div>
223
+ <p class="text-gray-600 dark:text-gray-400 italic">
224
+ "The team at StoodHeaps transformed our online presence. Their design thinking approach resulted in a 40% increase in user engagement."
225
+ </p>
226
+ </div>
227
+ <div class="bg-gray-50 dark:bg-gray-800 p-8 rounded-xl">
228
+ <div class="flex items-center mb-4">
229
+ <div class="w-12 h-12 rounded-full overflow-hidden mr-4">
230
+ <img src="http://static.photos/people/200x200/2" alt="Client 2" class="w-full h-full object-cover">
231
+ </div>
232
+ <div>
233
+ <h4 class="font-bold">Michael Chen</h4>
234
+ <p class="text-sm text-gray-500 dark:text-gray-400">Marketing Director, BrandCo</p>
235
+ </div>
236
+ </div>
237
+ <p class="text-gray-600 dark:text-gray-400 italic">
238
+ "From concept to launch, the process was seamless. Their attention to detail and technical expertise is unmatched."
239
+ </p>
240
+ </div>
241
+ <div class="bg-gray-50 dark:bg-gray-800 p-8 rounded-xl">
242
+ <div class="flex items-center mb-4">
243
+ <div class="w-12 h-12 rounded-full overflow-hidden mr-4">
244
+ <img src="http://static.photos/people/200x200/3" alt="Client 3" class="w-full h-full object-cover">
245
+ </div>
246
+ <div>
247
+ <h4 class="font-bold">Emma Rodriguez</h4>
248
+ <p class="text-sm text-gray-500 dark:text-gray-400">Founder, GreenLife</p>
249
+ </div>
250
+ </div>
251
+ <p class="text-gray-600 dark:text-gray-400 italic">
252
+ "Working with StoodHeaps was a game-changer for our startup. They understood our vision and brought it to life beautifully."
253
+ </p>
254
+ </div>
255
+ </div>
256
+ </div>
257
+ </section>
258
+
259
+ <!-- CTA Section -->
260
+ <section class="py-24 bg-gradient-to-r from-primary-500 to-secondary-500 text-white">
261
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
262
+ <h2 class="text-3xl md:text-4xl font-bold mb-6">Ready to elevate your digital presence?</h2>
263
+ <p class="text-xl text-primary-100 max-w-2xl mx-auto mb-10">
264
+ Let's discuss how we can help you achieve your business goals through exceptional design and technology.
265
+ </p>
266
+ <a href="#" class="inline-flex items-center px-8 py-4 bg-white text-primary-600 font-bold rounded-full hover:bg-gray-100 transition-slow">
267
+ Get Started
268
+ <i data-feather="arrow-right" class="ml-2 w-5 h-5"></i>
269
+ </a>
270
+ </div>
271
+ </section>
272
+
273
+ <!-- Footer -->
274
+ <footer class="bg-gray-900 text-gray-400 py-12">
275
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
276
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
277
+ <div>
278
+ <a href="#" class="flex items-center space-x-2">
279
+ <div class="w-8 h-8 rounded-full bg-primary-500"></div>
280
+ <span class="text-xl font-bold text-white">StoodHeaps</span>
281
+ </a>
282
+ <p class="mt-4 text-sm">
283
+ Crafting digital experiences that make an impact.
284
+ </p>
285
+ </div>
286
+ <div>
287
+ <h4 class="text-white font-bold mb-4">Services</h4>
288
+ <ul class="space-y-2">
289
+ <li><a href="#" class="hover:text-white transition-slow">UI/UX Design</a></li>
290
+ <li><a href="#" class="hover:text-white transition-slow">Web Development</a></li>
291
+ <li><a href="#" class="hover:text-white transition-slow">Mobile Apps</a></li>
292
+ <li><a href="#" class="hover:text-white transition-slow">Branding</a></li>
293
+ </ul>
294
+ </div>
295
+ <div>
296
+ <h4 class="text-white font-bold mb-4">Company</h4>
297
+ <ul class="space-y-2">
298
+ <li><a href="#" class="hover:text-white transition-slow">About Us</a></li>
299
+ <li><a href="#" class="hover:text-white transition-slow">Work</a></li>
300
+ <li><a href="#" class="hover:text-white transition-slow">Careers</a></li>
301
+ <li><a href="#" class="hover:text-white transition-slow">Contact</a></li>
302
+ </ul>
303
+ </div>
304
+ <div>
305
+ <h4 class="text-white font-bold mb-4">Connect</h4>
306
+ <div class="flex space-x-4">
307
+ <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-primary-500 hover:text-white transition-slow">
308
+ <i data-feather="twitter"></i>
309
+ </a>
310
+ <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-primary-500 hover:text-white transition-slow">
311
+ <i data-feather="instagram"></i>
312
+ </a>
313
+ <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-primary-500 hover:text-white transition-slow">
314
+ <i data-feather="linkedin"></i>
315
+ </a>
316
+ <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-primary-500 hover:text-white transition-slow">
317
+ <i data-feather="dribbble"></i>
318
+ </a>
319
+ </div>
320
+ </div>
321
+ </div>
322
+ <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
323
+ <p class="text-sm">
324
+ © 2023 StoodHeaps Creative Studio. All rights reserved.
325
+ </p>
326
+ <div class="flex space-x-6 mt-4 md:mt-0">
327
+ <a href="#" class="text-sm hover:text-white transition-slow">Privacy Policy</a>
328
+ <a href="#" class="text-sm hover:text-white transition-slow">Terms of Service</a>
329
+ </div>
330
+ </div>
331
+ </div>
332
+ </footer>
333
+
334
+ <script>
335
+ // Mobile menu toggle
336
+ const mobileMenuButton = document.getElementById('mobile-menu-button');
337
+ const closeMobileMenu = document.getElementById('close-mobile-menu');
338
+ const mobileMenu = document.getElementById('mobile-menu');
339
+
340
+ mobileMenuButton.addEventListener('click', () => {
341
+ mobileMenu.classList.remove('hidden');
342
+ document.body.style.overflow = 'hidden';
343
+ });
344
+
345
+ closeMobileMenu.addEventListener('click', () => {
346
+ mobileMenu.classList.add('hidden');
347
+ document.body.style.overflow = '';
348
+ });
349
+
350
+ // Dark mode toggle
351
+ const darkModeToggle = document.getElementById('dark-mode-toggle');
352
+ const html = document.documentElement;
353
+
354
+ if (localStorage.getItem('darkMode') === 'true') {
355
+ html.classList.add('dark');
356
+ }
357
+
358
+ darkModeToggle?.addEventListener('click', () => {
359
+ html.classList.toggle('dark');
360
+ localStorage.setItem('darkMode', html.classList.contains('dark'));
361
+ });
362
+
363
+ // Feather icons
364
+ feather.replace();
365
+ </script>
366
+ </body>
367
  </html>