Hugging Face's logo

Spaces:
aworkimmersive
/
digital-frontiers
Running

App Files Community
aworkimmersive commited on
Commit
174cf45
·
verified ·
1 Parent(s): 368e85b

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +697 -19
  3. prompts.txt +2 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Digital Frontiers
3
- emoji: 👀
4
- colorFrom: pink
5
- colorTo: red
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: digital-frontiers
3
+ emoji: 🐳
4
+ colorFrom: green
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,697 @@
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>Digital Frontiers | Creative Tech Solutions</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
11
+
12
+ body {
13
+ font-family: 'Inter', sans-serif;
14
+ background-color: #f8fafc;
15
+ }
16
+
17
+ .gradient-bg {
18
+ background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 50%, #ec4899 100%);
19
+ }
20
+
21
+ .service-card:hover {
22
+ transform: translateY(-5px);
23
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
24
+ }
25
+
26
+ .tech-grid {
27
+ display: grid;
28
+ grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
29
+ gap: 1.5rem;
30
+ }
31
+
32
+ .portfolio-item {
33
+ transition: all 0.3s ease;
34
+ overflow: hidden;
35
+ }
36
+
37
+ .portfolio-item:hover {
38
+ transform: scale(1.03);
39
+ }
40
+
41
+ .portfolio-overlay {
42
+ position: absolute;
43
+ top: 0;
44
+ left: 0;
45
+ right: 0;
46
+ bottom: 0;
47
+ background: rgba(0,0,0,0.7);
48
+ display: flex;
49
+ flex-direction: column;
50
+ justify-content: center;
51
+ align-items: center;
52
+ opacity: 0;
53
+ transition: opacity 0.3s ease;
54
+ }
55
+
56
+ .portfolio-item:hover .portfolio-overlay {
57
+ opacity: 1;
58
+ }
59
+
60
+ .contact-input:focus {
61
+ outline: none;
62
+ box-shadow: 0 0 0 2px #8b5cf6;
63
+ }
64
+
65
+ .marquee {
66
+ white-space: nowrap;
67
+ overflow: hidden;
68
+ box-sizing: border-box;
69
+ }
70
+
71
+ .marquee span {
72
+ display: inline-block;
73
+ padding-left: 100%;
74
+ animation: marquee 15s linear infinite;
75
+ }
76
+
77
+ @keyframes marquee {
78
+ 0% { transform: translate(0, 0); }
79
+ 100% { transform: translate(-100%, 0); }
80
+ }
81
+ </style>
82
+ </head>
83
+ <body>
84
+ <!-- Navigation -->
85
+ <nav class="bg-white shadow-sm sticky top-0 z-50">
86
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
87
+ <div class="flex justify-between h-16">
88
+ <div class="flex items-center">
89
+ <div class="flex-shrink-0 flex items-center">
90
+ <i class="fas fa-cube text-blue-500 text-2xl mr-2"></i>
91
+ <span class="text-xl font-bold text-gray-900">Digital Frontiers</span>
92
+ </div>
93
+ </div>
94
+ <div class="hidden md:ml-6 md:flex md:items-center md:space-x-8">
95
+ <a href="#services" class="text-gray-500 hover:text-gray-900 px-3 py-2 text-sm font-medium">Services</a>
96
+ <a href="#portfolio" class="text-gray-500 hover:text-gray-900 px-3 py-2 text-sm font-medium">Portfolio</a>
97
+ <a href="#approach" class="text-gray-500 hover:text-gray-900 px-3 py-2 text-sm font-medium">Approach</a>
98
+ <a href="#contact" class="text-gray-500 hover:text-gray-900 px-3 py-2 text-sm font-medium">Contact</a>
99
+ <a href="#contact" class="bg-blue-600 text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-blue-700 transition-colors">Start Project</a>
100
+ </div>
101
+ <div class="-mr-2 flex items-center md:hidden">
102
+ <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500" aria-controls="mobile-menu" aria-expanded="false" id="mobile-menu-button">
103
+ <span class="sr-only">Open main menu</span>
104
+ <i class="fas fa-bars text-xl"></i>
105
+ </button>
106
+ </div>
107
+ </div>
108
+ </div>
109
+
110
+ <!-- Mobile menu -->
111
+ <div class="hidden md:hidden" id="mobile-menu">
112
+ <div class="pt-2 pb-3 space-y-1">
113
+ <a href="#services" class="block px-3 py-2 text-base font-medium text-gray-500 hover:text-gray-900 hover:bg-gray-50">Services</a>
114
+ <a href="#portfolio" class="block px-3 py-2 text-base font-medium text-gray-500 hover:text-gray-900 hover:bg-gray-50">Portfolio</a>
115
+ <a href="#approach" class="block px-3 py-2 text-base font-medium text-gray-500 hover:text-gray-900 hover:bg-gray-50">Approach</a>
116
+ <a href="#contact" class="block px-3 py-2 text-base font-medium text-gray-500 hover:text-gray-900 hover:bg-gray-50">Contact</a>
117
+ <a href="#contact" class="block w-full text-left px-3 py-2 text-base font-medium text-blue-600 hover:text-blue-800 hover:bg-blue-50">Start Project</a>
118
+ </div>
119
+ </div>
120
+ </nav>
121
+
122
+ <!-- Hero Section -->
123
+ <div class="gradient-bg text-white">
124
+ <div class="max-w-7xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:px-8">
125
+ <div class="text-center">
126
+ <h1 class="text-4xl font-extrabold tracking-tight sm:text-5xl lg:text-6xl">
127
+ Bridging Tech & Education Through Creativity
128
+ </h1>
129
+ <p class="mt-6 max-w-2xl mx-auto text-xl">
130
+ Transforming complex digital concepts into accessible experiences through 3D, sound, video, game development, VR, photography, and immersive exhibitions.
131
+ </p>
132
+ <div class="mt-10 flex justify-center space-x-4">
133
+ <a href="#contact" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-blue-700 bg-white hover:bg-gray-100 transition-colors">
134
+ Get in Touch
135
+ </a>
136
+ <a href="#portfolio" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-blue-600 bg-opacity-60 hover:bg-opacity-70 transition-colors">
137
+ View Work
138
+ </a>
139
+ </div>
140
+ </div>
141
+ </div>
142
+ </div>
143
+
144
+ <!-- Tech Marquee -->
145
+ <div class="bg-gray-100 py-4 overflow-hidden">
146
+ <div class="marquee">
147
+ <span class="text-lg font-medium text-gray-700">
148
+ <i class="fas fa-cube mx-4"></i> 3D Modeling & Animation •
149
+ <i class="fas fa-headphones mx-4"></i> Sound Design •
150
+ <i class="fas fa-video mx-4"></i> Video Production •
151
+ <i class="fas fa-gamepad mx-4"></i> Game Development •
152
+ <i class="fas fa-vr-cardboard mx-4"></i> Virtual Reality •
153
+ <i class="fas fa-camera mx-4"></i> Photography •
154
+ <i class="fas fa-images mx-4"></i> Exhibition Design •
155
+ </span>
156
+ </div>
157
+ </div>
158
+
159
+ <!-- Services Section -->
160
+ <div id="services" class="py-12 bg-white">
161
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
162
+ <div class="lg:text-center">
163
+ <h2 class="text-base text-blue-600 font-semibold tracking-wide uppercase">Services</h2>
164
+ <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
165
+ Digital Creative Solutions
166
+ </p>
167
+ <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto">
168
+ Specialized services tailored to make technology accessible and engaging
169
+ </p>
170
+ </div>
171
+
172
+ <div class="mt-20 tech-grid">
173
+ <div class="service-card bg-white rounded-lg shadow-md overflow-hidden transition-transform duration-300">
174
+ <div class="p-6">
175
+ <div class="flex items-center">
176
+ <div class="flex-shrink-0 bg-blue-100 p-3 rounded-full">
177
+ <i class="fas fa-cube text-blue-600 text-xl"></i>
178
+ </div>
179
+ <div class="ml-5">
180
+ <h3 class="text-lg font-medium text-gray-900">3D Modeling & Animation</h3>
181
+ </div>
182
+ </div>
183
+ <div class="mt-4">
184
+ <p class="text-base text-gray-500">
185
+ Creating immersive 3D environments and animations that simplify complex concepts for educational purposes.
186
+ </p>
187
+ </div>
188
+ </div>
189
+ </div>
190
+
191
+ <div class="service-card bg-white rounded-lg shadow-md overflow-hidden transition-transform duration-300">
192
+ <div class="p-6">
193
+ <div class="flex items-center">
194
+ <div class="flex-shrink-0 bg-purple-100 p-3 rounded-full">
195
+ <i class="fas fa-headphones text-purple-600 text-xl"></i>
196
+ </div>
197
+ <div class="ml-5">
198
+ <h3 class="text-lg font-medium text-gray-900">Sound Design</h3>
199
+ </div>
200
+ </div>
201
+ <div class="mt-4">
202
+ <p class="text-base text-gray-500">
203
+ Crafting auditory experiences that enhance learning through spatial audio, soundscapes, and interactive sound design.
204
+ </p>
205
+ </div>
206
+ </div>
207
+ </div>
208
+
209
+ <div class="service-card bg-white rounded-lg shadow-md overflow-hidden transition-transform duration-300">
210
+ <div class="p-6">
211
+ <div class="flex items-center">
212
+ <div class="flex-shrink-0 bg-pink-100 p-3 rounded-full">
213
+ <i class="fas fa-video text-pink-600 text-xl"></i>
214
+ </div>
215
+ <div class="ml-5">
216
+ <h3 class="text-lg font-medium text-gray-900">Video Production</h3>
217
+ </div>
218
+ </div>
219
+ <div class="mt-4">
220
+ <p class="text-base text-gray-500">
221
+ Producing engaging video content that combines live action with digital elements to tell compelling educational stories.
222
+ </p>
223
+ </div>
224
+ </div>
225
+ </div>
226
+
227
+ <div class="service-card bg-white rounded-lg shadow-md overflow-hidden transition-transform duration-300">
228
+ <div class="p-6">
229
+ <div class="flex items-center">
230
+ <div class="flex-shrink-0 bg-green-100 p-3 rounded-full">
231
+ <i class="fas fa-gamepad text-green-600 text-xl"></i>
232
+ </div>
233
+ <div class="ml-5">
234
+ <h3 class="text-lg font-medium text-gray-900">Game Development</h3>
235
+ </div>
236
+ </div>
237
+ <div class="mt-4">
238
+ <p class="text-base text-gray-500">
239
+ Designing educational games that make learning interactive, rewarding, and accessible to diverse audiences.
240
+ </p>
241
+ </div>
242
+ </div>
243
+ </div>
244
+
245
+ <div class="service-card bg-white rounded-lg shadow-md overflow-hidden transition-transform duration-300">
246
+ <div class="p-6">
247
+ <div class="flex items-center">
248
+ <div class="flex-shrink-0 bg-indigo-100 p-3 rounded-full">
249
+ <i class="fas fa-vr-cardboard text-indigo-600 text-xl"></i>
250
+ </div>
251
+ <div class="ml-5">
252
+ <h3 class="text-lg font-medium text-gray-900">Virtual Reality</h3>
253
+ </div>
254
+ </div>
255
+ <div class="mt-4">
256
+ <p class="text-base text-gray-500">
257
+ Developing VR experiences that transport learners into immersive environments for hands-on education.
258
+ </p>
259
+ </div>
260
+ </div>
261
+ </div>
262
+
263
+ <div class="service-card bg-white rounded-lg shadow-md overflow-hidden transition-transform duration-300">
264
+ <div class="p-6">
265
+ <div class="flex items-center">
266
+ <div class="flex-shrink-0 bg-yellow-100 p-3 rounded-full">
267
+ <i class="fas fa-camera text-yellow-600 text-xl"></i>
268
+ </div>
269
+ <div class="ml-5">
270
+ <h3 class="text-lg font-medium text-gray-900">Photography & Exhibitions</h3>
271
+ </div>
272
+ </div>
273
+ <div class="mt-4">
274
+ <p class="text-base text-gray-500">
275
+ Creating visual narratives and exhibition designs that blend physical and digital elements for impactful learning spaces.
276
+ </p>
277
+ </div>
278
+ </div>
279
+ </div>
280
+ </div>
281
+ </div>
282
+ </div>
283
+
284
+ <!-- Portfolio Section -->
285
+ <div id="portfolio" class="py-12 bg-gray-50">
286
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
287
+ <div class="lg:text-center">
288
+ <h2 class="text-base text-blue-600 font-semibold tracking-wide uppercase">Work</h2>
289
+ <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
290
+ Recent Projects
291
+ </p>
292
+ <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto">
293
+ Examples of how we've made technology accessible through creative solutions
294
+ </p>
295
+ </div>
296
+
297
+ <div class="mt-10 grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
298
+ <!-- Project 1 -->
299
+ <div class="portfolio-item relative rounded-lg overflow-hidden shadow-md transition-transform duration-300">
300
+ <img src="https://images.unsplash.com/photo-1639762681057-408e52192e55?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" alt="VR Education Project" class="w-full h-64 object-cover">
301
+ <div class="portfolio-overlay">
302
+ <h3 class="text-white text-xl font-bold">VR Science Lab</h3>
303
+ <p class="text-gray-300 mt-2 text-center px-4">Interactive virtual reality environment for chemistry education</p>
304
+ <button class="mt-4 px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors">
305
+ View Case Study
306
+ </button>
307
+ </div>
308
+ </div>
309
+
310
+ <!-- Project 2 -->
311
+ <div class="portfolio-item relative rounded-lg overflow-hidden shadow-md transition-transform duration-300">
312
+ <img src="https://images.unsplash.com/photo-1626785774573-4b799315345d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" alt="3D Animation Project" class="w-full h-64 object-cover">
313
+ <div class="portfolio-overlay">
314
+ <h3 class="text-white text-xl font-bold">Anatomy Explorer</h3>
315
+ <p class="text-gray-300 mt-2 text-center px-4">3D interactive model of human anatomy for medical students</p>
316
+ <button class="mt-4 px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors">
317
+ View Case Study
318
+ </button>
319
+ </div>
320
+ </div>
321
+
322
+ <!-- Project 3 -->
323
+ <div class="portfolio-item relative rounded-lg overflow-hidden shadow-md transition-transform duration-300">
324
+ <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" alt="Exhibition Design" class="w-full h-64 object-cover">
325
+ <div class="portfolio-overlay">
326
+ <h3 class="text-white text-xl font-bold">Digital Heritage</h3>
327
+ <p class="text-gray-300 mt-2 text-center px-4">Mixed media exhibition blending photography and AR for cultural education</p>
328
+ <button class="mt-4 px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors">
329
+ View Case Study
330
+ </button>
331
+ </div>
332
+ </div>
333
+ </div>
334
+
335
+ <div class="mt-10 text-center">
336
+ <a href="#" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 transition-colors">
337
+ <i class="fas fa-images mr-2"></i> View Full Portfolio
338
+ </a>
339
+ </div>
340
+ </div>
341
+ </div>
342
+
343
+ <!-- Approach Section -->
344
+ <div id="approach" class="py-12 bg-white">
345
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
346
+ <div class="lg:text-center">
347
+ <h2 class="text-base text-blue-600 font-semibold tracking-wide uppercase">Methodology</h2>
348
+ <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
349
+ Our Creative Process
350
+ </p>
351
+ <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto">
352
+ How we transform complex tech into accessible learning experiences
353
+ </p>
354
+ </div>
355
+
356
+ <div class="mt-20">
357
+ <div class="space-y-10 lg:space-y-0 lg:grid lg:grid-cols-3 lg:gap-x-8 lg:gap-y-10">
358
+ <!-- Step 1 -->
359
+ <div class="relative">
360
+ <div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white">
361
+ <span class="text-xl font-bold">1</span>
362
+ </div>
363
+ <div class="ml-16">
364
+ <h3 class="text-lg leading-6 font-medium text-gray-900">Understanding Barriers</h3>
365
+ <p class="mt-2 text-base text-gray-500">
366
+ We begin by identifying the specific challenges your audience faces with technology and education.
367
+ </p>
368
+ </div>
369
+ </div>
370
+
371
+ <!-- Step 2 -->
372
+ <div class="relative">
373
+ <div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white">
374
+ <span class="text-xl font-bold">2</span>
375
+ </div>
376
+ <div class="ml-16">
377
+ <h3 class="text-lg leading-6 font-medium text-gray-900">Creative Ideation</h3>
378
+ <p class="mt-2 text-base text-gray-500">
379
+ Our team brainstorms innovative solutions that leverage the right mix of digital mediums.
380
+ </p>
381
+ </div>
382
+ </div>
383
+
384
+ <!-- Step 3 -->
385
+ <div class="relative">
386
+ <div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white">
387
+ <span class="text-xl font-bold">3</span>
388
+ </div>
389
+ <div class="ml-16">
390
+ <h3 class="text-lg leading-6 font-medium text-gray-900">Prototype & Test</h3>
391
+ <p class="mt-2 text-base text-gray-500">
392
+ We create interactive prototypes and test them with real users to ensure accessibility.
393
+ </p>
394
+ </div>
395
+ </div>
396
+
397
+ <!-- Step 4 -->
398
+ <div class="relative">
399
+ <div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white">
400
+ <span class="text-xl font-bold">4</span>
401
+ </div>
402
+ <div class="ml-16">
403
+ <h3 class="text-lg leading-6 font-medium text-gray-900">Production</h3>
404
+ <p class="mt-2 text-base text-gray-500">
405
+ Our specialists craft the final product with attention to both technical excellence and educational value.
406
+ </p>
407
+ </div>
408
+ </div>
409
+
410
+ <!-- Step 5 -->
411
+ <div class="relative">
412
+ <div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white">
413
+ <span class="text-xl font-bold">5</span>
414
+ </div>
415
+ <div class="ml-16">
416
+ <h3 class="text-lg leading-6 font-medium text-gray-900">Implementation Support</h3>
417
+ <p class="mt-2 text-base text-gray-500">
418
+ We provide training and resources to ensure successful deployment and adoption.
419
+ </p>
420
+ </div>
421
+ </div>
422
+
423
+ <!-- Step 6 -->
424
+ <div class="relative">
425
+ <div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white">
426
+ <span class="text-xl font-bold">6</span>
427
+ </div>
428
+ <div class="ml-16">
429
+ <h3 class="text-lg leading-6 font-medium text-gray-900">Iterative Improvement</h3>
430
+ <p class="mt-2 text-base text-gray-500">
431
+ We gather feedback and continuously refine the experience based on real-world usage.
432
+ </p>
433
+ </div>
434
+ </div>
435
+ </div>
436
+ </div>
437
+ </div>
438
+ </div>
439
+
440
+ <!-- Testimonials -->
441
+ <div class="py-12 bg-gray-50">
442
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
443
+ <div class="lg:text-center">
444
+ <h2 class="text-base text-blue-600 font-semibold tracking-wide uppercase">Testimonials</h2>
445
+ <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
446
+ What Our Clients Say
447
+ </p>
448
+ </div>
449
+
450
+ <div class="mt-10 grid grid-cols-1 gap-8 md:grid-cols-2">
451
+ <div class="bg-white p-6 rounded-lg shadow-md">
452
+ <div class="flex items-center">
453
+ <div class="flex-shrink-0">
454
+ <img class="h-12 w-12 rounded-full" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
455
+ </div>
456
+ <div class="ml-4">
457
+ <h4 class="text-sm font-semibold text-gray-900">Sarah Johnson</h4>
458
+ <p class="text-sm text-gray-500">Education Director, Science Museum</p>
459
+ </div>
460
+ </div>
461
+ <div class="mt-4">
462
+ <p class="text-gray-600">
463
+ "The VR learning modules completely transformed how our visitors engage with complex scientific concepts. Attendance for our educational programs has increased by 40% since implementation."
464
+ </p>
465
+ </div>
466
+ </div>
467
+
468
+ <div class="bg-white p-6 rounded-lg shadow-md">
469
+ <div class="flex items-center">
470
+ <div class="flex-shrink-0">
471
+ <img class="h-12 w-12 rounded-full" src="https://images.unsplash.com/photo-1519244703995-f4e0f30006d5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
472
+ </div>
473
+ <div class="ml-4">
474
+ <h4 class="text-sm font-semibold text-gray-900">Michael Chen</h4>
475
+ <p class="text-sm text-gray-500">CEO, EdTech Startup</p>
476
+ </div>
477
+ </div>
478
+ <div class="mt-4">
479
+ <p class="text-gray-600">
480
+ "Working with Digital Frontiers allowed us to create an accessible learning game that actually engages our neurodiverse students. Their understanding of both technology and education is unparalleled."
481
+ </p>
482
+ </div>
483
+ </div>
484
+ </div>
485
+ </div>
486
+ </div>
487
+
488
+ <!-- Contact Section -->
489
+ <div id="contact" class="py-12 bg-white">
490
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
491
+ <div class="lg:text-center">
492
+ <h2 class="text-base text-blue-600 font-semibold tracking-wide uppercase">Get in Touch</h2>
493
+ <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
494
+ Let's Create Something Meaningful
495
+ </p>
496
+ <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto">
497
+ Ready to make technology accessible through creative solutions? Reach out to discuss your project.
498
+ </p>
499
+ </div>
500
+
501
+ <div class="mt-10 flex flex-col lg:flex-row">
502
+ <div class="lg:w-1/2">
503
+ <form class="space-y-6">
504
+ <div>
505
+ <label for="name" class="block text-sm font-medium text-gray-700">Your Name</label>
506
+ <div class="mt-1">
507
+ <input id="name" name="name" type="text" required class="contact-input py-3 px-4 block w-full shadow-sm focus:ring-blue-500 focus:border-blue-500 border-gray-300 rounded-md">
508
+ </div>
509
+ </div>
510
+
511
+ <div>
512
+ <label for="email" class="block text-sm font-medium text-gray-700">Email Address</label>
513
+ <div class="mt-1">
514
+ <input id="email" name="email" type="email" required class="contact-input py-3 px-4 block w-full shadow-sm focus:ring-blue-500 focus:border-blue-500 border-gray-300 rounded-md">
515
+ </div>
516
+ </div>
517
+
518
+ <div>
519
+ <label for="project" class="block text-sm font-medium text-gray-700">Project Type</label>
520
+ <div class="mt-1">
521
+ <select id="project" name="project" class="contact-input py-3 px-4 block w-full shadow-sm focus:ring-blue-500 focus:border-blue-500 border-gray-300 rounded-md">
522
+ <option>3D Modeling & Animation</option>
523
+ <option>Sound Design</option>
524
+ <option>Video Production</option>
525
+ <option>Game Development</option>
526
+ <option>Virtual Reality</option>
527
+ <option>Photography & Exhibition</option>
528
+ <option>Other</option>
529
+ </select>
530
+ </div>
531
+ </div>
532
+
533
+ <div>
534
+ <label for="message" class="block text-sm font-medium text-gray-700">Project Details</label>
535
+ <div class="mt-1">
536
+ <textarea id="message" name="message" rows="4" class="contact-input py-3 px-4 block w-full shadow-sm focus:ring-blue-500 focus:border-blue-500 border-gray-300 rounded-md"></textarea>
537
+ </div>
538
+ </div>
539
+
540
+ <div>
541
+ <button type="submit" class="w-full flex justify-center py-3 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors">
542
+ Send Message
543
+ </button>
544
+ </div>
545
+ </form>
546
+ </div>
547
+
548
+ <div class="lg:w-1/2 lg:pl-12 mt-10 lg:mt-0">
549
+ <div class="bg-gray-50 p-6 rounded-lg">
550
+ <h3 class="text-lg font-medium text-gray-900">Contact Information</h3>
551
+ <div class="mt-4 space-y-4">
552
+ <div class="flex items-start">
553
+ <div class="flex-shrink-0">
554
+ <i class="fas fa-envelope text-blue-500"></i>
555
+ </div>
556
+ <div class="ml-3">
557
+ <p class="text-sm font-medium text-gray-500">Email</p>
558
+ <p class="text-sm text-gray-900">[email protected]</p>
559
+ </div>
560
+ </div>
561
+
562
+ <div class="flex items-start">
563
+ <div class="flex-shrink-0">
564
+ <i class="fas fa-phone-alt text-blue-500"></i>
565
+ </div>
566
+ <div class="ml-3">
567
+ <p class="text-sm font-medium text-gray-500">Phone</p>
568
+ <p class="text-sm text-gray-900">+1 (555) 123-4567</p>
569
+ </div>
570
+ </div>
571
+
572
+ <div class="flex items-start">
573
+ <div class="flex-shrink-0">
574
+ <i class="fas fa-map-marker-alt text-blue-500"></i>
575
+ </div>
576
+ <div class="ml-3">
577
+ <p class="text-sm font-medium text-gray-500">Based in</p>
578
+ <p class="text-sm text-gray-900">Portland, OR (Working remotely worldwide)</p>
579
+ </div>
580
+ </div>
581
+ </div>
582
+
583
+ <div class="mt-8">
584
+ <h3 class="text-lg font-medium text-gray-900">Connect With Us</h3>
585
+ <div class="mt-4 flex space-x-4">
586
+ <a href="#" class="text-gray-500 hover:text-gray-700">
587
+ <i class="fab fa-twitter text-xl"></i>
588
+ </a>
589
+ <a href="#" class="text-gray-500 hover:text-gray-700">
590
+ <i class="fab fa-instagram text-xl"></i>
591
+ </a>
592
+ <a href="#" class="text-gray-500 hover:text-gray-700">
593
+ <i class="fab fa-linkedin text-xl"></i>
594
+ </a>
595
+ <a href="#" class="text-gray-500 hover:text-gray-700">
596
+ <i class="fab fa-behance text-xl"></i>
597
+ </a>
598
+ </div>
599
+ </div>
600
+ </div>
601
+ </div>
602
+ </div>
603
+ </div>
604
+ </div>
605
+
606
+ <!-- Footer -->
607
+ <footer class="bg-gray-900 text-white">
608
+ <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
609
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
610
+ <div>
611
+ <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Services</h3>
612
+ <div class="mt-4 space-y-4">
613
+ <a href="#" class="text-base text-gray-300 hover:text-white block">3D & Animation</a>
614
+ <a href="#" class="text-base text-gray-300 hover:text-white block">Sound Design</a>
615
+ <a href="#" class="text-base text-gray-300 hover:text-white block">Video Production</a>
616
+ <a href="#" class="text-base text-gray-300 hover:text-white block">Game Development</a>
617
+ </div>
618
+ </div>
619
+
620
+ <div>
621
+ <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Portfolio</h3>
622
+ <div class="mt-4 space-y-4">
623
+ <a href="#" class="text-base text-gray-300 hover:text-white block">VR Experiences</a>
624
+ <a href="#" class="text-base text-gray-300 hover:text-white block">Educational Games</a>
625
+ <a href="#" class="text-base text-gray-300 hover:text-white block">Exhibition Design</a>
626
+ <a href="#" class="text-base text-gray-300 hover:text-white block">All Projects</a>
627
+ </div>
628
+ </div>
629
+
630
+ <div>
631
+ <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Company</h3>
632
+ <div class="mt-4 space-y-4">
633
+ <a href="#" class="text-base text-gray-300 hover:text-white block">About</a>
634
+ <a href="#" class="text-base text-gray-300 hover:text-white block">Approach</a>
635
+ <a href="#" class="text-base text-gray-300 hover:text-white block">Testimonials</a>
636
+ <a href="#" class="text-base text-gray-300 hover:text-white block">Contact</a>
637
+ </div>
638
+ </div>
639
+
640
+ <div>
641
+ <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Legal</h3>
642
+ <div class="mt-4 space-y-4">
643
+ <a href="#" class="text-base text-gray-300 hover:text-white block">Privacy</a>
644
+ <a href="#" class="text-base text-gray-300 hover:text-white block">Terms</a>
645
+ <a href="#" class="text-base text-gray-300 hover:text-white block">Cookie Policy</a>
646
+ </div>
647
+ </div>
648
+ </div>
649
+
650
+ <div class="mt-12 border-t border-gray-800 pt-8 flex flex-col md:flex-row justify-between items-center">
651
+ <div class="flex items-center">
652
+ <i class="fas fa-cube text-blue-500 text-2xl mr-2"></i>
653
+ <span class="text-xl font-bold">Digital Frontiers</span>
654
+ </div>
655
+ <p class="mt-4 md:mt-0 text-base text-gray-400">
656
+ &copy; 2023 Digital Frontiers. All rights reserved.
657
+ </p>
658
+ </div>
659
+ </div>
660
+ </footer>
661
+
662
+ <script>
663
+ // Mobile menu toggle
664
+ document.getElementById('mobile-menu-button').addEventListener('click', function() {
665
+ const menu = document.getElementById('mobile-menu');
666
+ if (menu.classList.contains('hidden')) {
667
+ menu.classList.remove('hidden');
668
+ } else {
669
+ menu.classList.add('hidden');
670
+ }
671
+ });
672
+
673
+ // Smooth scrolling for anchor links
674
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
675
+ anchor.addEventListener('click', function (e) {
676
+ e.preventDefault();
677
+
678
+ const targetId = this.getAttribute('href');
679
+ if (targetId === '#') return;
680
+
681
+ const targetElement = document.querySelector(targetId);
682
+ if (targetElement) {
683
+ targetElement.scrollIntoView({
684
+ behavior: 'smooth'
685
+ });
686
+
687
+ // Close mobile menu if open
688
+ const mobileMenu = document.getElementById('mobile-menu');
689
+ if (!mobileMenu.classList.contains('hidden')) {
690
+ mobileMenu.classList.add('hidden');
691
+ }
692
+ }
693
+ });
694
+ });
695
+ </script>
696
+ <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=aworkimmersive/digital-frontiers" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
697
+ </html>
prompts.txt ADDED
@@ -0,0 +1,2 @@
 
 
 
1
+ i creator content for short form video, charging by the second and not the amount...we are small and easy to contact and connect with.
2
+ I'm a digital creative who works freelance and brings digital tech to those who find education a challenge, using 3D, Sound, Video, Game Dev, and VR Working with photography and echibition