Hugging Face's logo

Spaces:
bahgatbigo
/
vibes
Running

App Files Community
bahgatbigo commited on
Commit
e429e8a
·
verified ·
1 Parent(s): 5a1e3b8

continue - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +687 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Vibes
3
- emoji: 🔥
4
- colorFrom: gray
5
- colorTo: blue
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: vibes
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,687 @@
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" class="scroll-smooth">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Vibe Studio - Building the next generation of intuitive technology</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
9
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
10
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
11
+ <style>
12
+ :root {
13
+ --primary-600: #7c3aed;
14
+ --primary-700: #6d28d9;
15
+ --accent-400: #f59e0b;
16
+ --accent-500: #d97706;
17
+ --neutral-800: #1f2937;
18
+ --neutral-900: #111827;
19
+ }
20
+
21
+ body {
22
+ font-family: 'Inter', sans-serif;
23
+ background: linear-gradient(135deg, #0f0f0f 0%, #1a1a2e 100%);
24
+ }
25
+
26
+ .font-mono {
27
+ font-family: 'JetBrains Mono', monospace;
28
+ }
29
+
30
+ .hero-headline {
31
+ opacity: 0;
32
+ transform: translateY(30px);
33
+ }
34
+
35
+ .hero-subtext {
36
+ opacity: 0;
37
+ transform: translateY(30px);
38
+ }
39
+
40
+ .hero-cta {
41
+ opacity: 0;
42
+ transform: translateY(30px);
43
+ }
44
+
45
+ .fade-in {
46
+ opacity: 0;
47
+ transform: translateY(30px);
48
+ }
49
+
50
+ .slide-in {
51
+ opacity: 0;
52
+ transform: translateX(-30px);
53
+ }
54
+
55
+ .vibe-card {
56
+ background: linear-gradient(135deg, rgba(124, 58, 237, 0.1) 0%, rgba(245, 158, 11, 0.1) 100%);
57
+ border: 1px solid rgba(124, 58, 237, 0.2);
58
+ backdrop-filter: blur(10px);
59
+ transition: all 0.3s ease;
60
+ }
61
+
62
+ .vibe-card:hover {
63
+ transform: translateY(-5px);
64
+ box-shadow: 0 20px 40px rgba(124, 58, 237, 0.3);
65
+ }
66
+
67
+ .portfolio-grid {
68
+ display: grid;
69
+ grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
70
+ gap: 1.5rem;
71
+ }
72
+
73
+ .portfolio-item {
74
+ background: rgba(17, 24, 39, 0.8);
75
+ border: 1px solid rgba(124, 58, 237, 0.3);
76
+ border-radius: 12px;
77
+ overflow: hidden;
78
+ transition: all 0.3s ease;
79
+ }
80
+
81
+ .portfolio-item:hover {
82
+ transform: scale(1.02);
83
+ box-shadow: 0 10px 30px rgba(124, 58, 237, 0.4);
84
+ }
85
+
86
+ .gradient-text {
87
+ background: linear-gradient(135deg, #7c3aed, #f59e0b);
88
+ -webkit-background-clip: text;
89
+ -webkit-text-fill-color: transparent;
90
+ background-clip: text;
91
+ }
92
+
93
+ .btn-primary {
94
+ background: linear-gradient(135deg, #7c3aed, #6d28d9);
95
+ transition: all 0.3s ease;
96
+ }
97
+
98
+ .btn-primary:hover {
99
+ background: linear-gradient(135deg, #6d28d9, #5b21b6);
100
+ transform: translateY(-2px);
101
+ box-shadow: 0 10px 25px rgba(124, 58, 237, 0.4);
102
+ }
103
+
104
+ .nav-link {
105
+ position: relative;
106
+ transition: color 0.3s ease;
107
+ }
108
+
109
+ .nav-link::after {
110
+ content: '';
111
+ position: absolute;
112
+ bottom: -4px;
113
+ left: 0;
114
+ width: 0;
115
+ height: 2px;
116
+ background: linear-gradient(90deg, #7c3aed, #f59e0b);
117
+ transition: width 0.3s ease;
118
+ }
119
+
120
+ .nav-link:hover::after {
121
+ width: 100%;
122
+ }
123
+
124
+ .mobile-menu {
125
+ transform: translateX(-100%);
126
+ transition: transform 0.3s ease;
127
+ }
128
+
129
+ .mobile-menu.active {
130
+ transform: translateX(0);
131
+ }
132
+
133
+ .typing-effect {
134
+ border-right: 2px solid #7c3aed;
135
+ animation: blink 1s infinite;
136
+ }
137
+
138
+ @keyframes blink {
139
+ 0%, 50% { border-color: #7c3aed; }
140
+ 51%, 100% { border-color: transparent; }
141
+ }
142
+
143
+ .process-step {
144
+ position: relative;
145
+ padding: 2rem;
146
+ border-radius: 12px;
147
+ background: rgba(17, 24, 39, 0.6);
148
+ border: 1px solid rgba(124, 58, 237, 0.2);
149
+ transition: all 0.3s ease;
150
+ }
151
+
152
+ .process-step:hover {
153
+ transform: translateY(-10px);
154
+ box-shadow: 0 15px 35px rgba(124, 58, 237, 0.3);
155
+ }
156
+
157
+ .process-step::before {
158
+ content: attr(data-step);
159
+ position: absolute;
160
+ top: -10px;
161
+ left: 20px;
162
+ background: linear-gradient(135deg, #7c3aed, #f59e0b);
163
+ color: white;
164
+ padding: 0.5rem 1rem;
165
+ border-radius: 20px;
166
+ font-size: 0.875rem;
167
+ font-weight: 600;
168
+ }
169
+ </style>
170
+ </head>
171
+ <body class="text-white">
172
+ <!-- Navigation -->
173
+ <nav class="fixed top-0 w-full z-50 bg-black/20 backdrop-blur-md border-b border-white/10">
174
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
175
+ <div class="flex justify-between items-center h-16">
176
+ <div class="flex items-center">
177
+ <span class="text-2xl font-bold gradient-text">Vibe Studio</span>
178
+ </div>
179
+
180
+ <!-- Desktop Navigation -->
181
+ <div class="hidden md:flex space-x-8">
182
+ <a href="#home" class="nav-link text-gray-300 hover:text-white">Home</a>
183
+ <a href="#thesis" class="nav-link text-gray-300 hover:text-white">Our Vibe</a>
184
+ <a href="#portfolio" class="nav-link text-gray-300 hover:text-white">Portfolio</a>
185
+ <a href="#careers" class="nav-link text-gray-300 hover:text-white">Join Us</a>
186
+ <a href="#insights" class="nav-link text-gray-300 hover:text-white">Insights</a>
187
+ </div>
188
+
189
+ <!-- Mobile Menu Button -->
190
+ <button id="mobile-menu-btn" class="md:hidden">
191
+ <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
192
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
193
+ </svg>
194
+ </button>
195
+ </div>
196
+ </div>
197
+
198
+ <!-- Mobile Menu -->
199
+ <div id="mobile-menu" class="mobile-menu fixed inset-0 bg-black/95 z-40 md:hidden">
200
+ <div class="flex flex-col items-center justify-center h-full space-y-8">
201
+ <a href="#home" class="text-2xl text-gray-300 hover:text-white">Home</a>
202
+ <a href="#thesis" class="text-2xl text-gray-300 hover:text-white">Our Vibe</a>
203
+ <a href="#portfolio" class="text-2xl text-gray-300 hover:text-white">Portfolio</a>
204
+ <a href="#careers" class="text-2xl text-gray-300 hover:text-white">Join Us</a>
205
+ <a href="#insights" class="text-2xl text-gray-300 hover:text-white">Insights</a>
206
+ </div>
207
+ </div>
208
+ </nav>
209
+
210
+ <!-- Hero Section -->
211
+ <section id="home" class="min-h-screen flex items-center justify-center relative overflow-hidden">
212
+ <!-- Background Elements -->
213
+ <div class="absolute inset-0">
214
+ <div class="absolute top-1/4 left-1/4 w-96 h-96 bg-purple-600/20 rounded-full blur-3xl animate-pulse"></div>
215
+ <div class="absolute bottom-1/4 right-1/4 w-96 h-96 bg-amber-500/20 rounded-full blur-3xl animate-pulse delay-1000"></div>
216
+ </div>
217
+
218
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center relative z-10">
219
+ <h1 class="hero-headline text-5xl md:text-7xl font-bold mb-6">
220
+ <span class="block">We don't just build startups,</span>
221
+ <span class="gradient-text">we build vibes</span>
222
+ </h1>
223
+
224
+ <p class="hero-subtext text-xl md:text-2xl text-gray-300 mb-8 max-w-3xl mx-auto">
225
+ Vibe Startup Studio: Where ideas meet execution with the right energy
226
+ </p>
227
+
228
+ <div class="hero-cta flex flex-col sm:flex-row gap-4 justify-center">
229
+ <button class="btn-primary px-8 py-4 rounded-lg font-semibold text-white">
230
+ Explore Our Vibe
231
+ </button>
232
+ <button class="border border-purple-600 text-purple-400 px-8 py-4 rounded-lg font-semibold hover:bg-purple-600/20 transition-all">
233
+ View Portfolio
234
+ </button>
235
+ </div>
236
+
237
+ <!-- Process Steps -->
238
+ <div class="mt-20 grid md:grid-cols-3 gap-8 max-w-4xl mx-auto">
239
+ <div class="process-step fade-in" data-step="01">
240
+ <h3 class="text-xl font-bold mb-2">Ideate</h3>
241
+ <p class="text-gray-400">Transform ideas into viable products with AI-powered validation</p>
242
+ </div>
243
+ <div class="process-step fade-in" data-step="02">
244
+ <h3 class="text-xl font-bold mb-2">Build</h3>
245
+ <p class="text-gray-400">Rapid development with cutting-edge AI tools and frameworks</p>
246
+ </div>
247
+ <div class="process-step fade-in" data-step="03">
248
+ <h3 class="text-xl font-bold mb-2">Launch</h3>
249
+ <p class="text-gray-400">Deploy, scale, and optimize for maximum impact</p>
250
+ </div>
251
+ </div>
252
+ </div>
253
+ </section>
254
+
255
+ <!-- Our Vibe Section -->
256
+ <section id="thesis" class="py-20 md:py-32">
257
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
258
+ <div class="text-center mb-16">
259
+ <h2 class="text-4xl md:text-5xl font-bold mb-6 fade-in">Our Vibe: The Philosophy</h2>
260
+ <p class="text-xl text-gray-300 max-w-3xl mx-auto fade-in">
261
+ We believe technology should be intuitive, human, and positively impactful
262
+ </p>
263
+ </div>
264
+
265
+ <div class="grid md:grid-cols-2 gap-12 items-center">
266
+ <div class="fade-in">
267
+ <h3 class="text-3xl font-bold mb-6">The Future We're Building</h3>
268
+ <p class="text-gray-300 mb-6 text-lg">
269
+ At Vibe Studio, we're not just creating companies—we're crafting experiences that redefine how humans interact with technology. Our focus spans three revolutionary domains:
270
+ </p>
271
+
272
+ <div class="space-y-4">
273
+ <div class="vibe-card p-6 rounded-lg">
274
+ <h4 class="text-xl font-bold text-purple-400 mb-2">Future of Work</h4>
275
+ <p class="text-gray-300">AI-powered tools that augment human creativity and productivity</p>
276
+ </div>
277
+
278
+ <div class="vibe-card p-6 rounded-lg">
279
+ <h4 class="text-xl font-bold text-amber-400 mb-2">Digital Wellness</h4>
280
+ <p class="text-gray-300">Mental health solutions powered by empathetic AI</p>
281
+ </div>
282
+
283
+ <div class="vibe-card p-6 rounded-lg">
284
+ <h4 class="text-xl font-bold text-purple-400 mb-2">Creative AI</h4>
285
+ <p class="text-gray-300">Tools that empower creators to push boundaries</p>
286
+ </div>
287
+ </div>
288
+ </div>
289
+
290
+ <div class="fade-in">
291
+ <div class="relative">
292
+ <div class="bg-gradient-to-br from-purple-600/20 to-amber-500/20 rounded-2xl p-8">
293
+ <h4 class="text-2xl font-bold mb-4">Our Core Beliefs</h4>
294
+ <ul class="space-y-4 text-gray-300">
295
+ <li class="flex items-start">
296
+ <span class="text-purple-400 mr-3">→</span>
297
+ Technology should amplify human potential, not replace it
298
+ </li>
299
+ <li class="flex items-start">
300
+ <span class="text-amber-400 mr-3">→</span>
301
+ Every product must have a soul and purpose
302
+ </li>
303
+ <li class="flex items-start">
304
+ <span class="text-purple-400 mr-3">→</span>
305
+ AI should be a creative partner, not just a tool
306
+ </li>
307
+ <li class="flex items-start">
308
+ <span class="text-amber-400 mr-3">→</span>
309
+ Build for the future, but stay grounded in human needs
310
+ </li>
311
+ </ul>
312
+ </div>
313
+ </div>
314
+ </div>
315
+ </div>
316
+ </div>
317
+ </section>
318
+
319
+ <!-- Portfolio Section -->
320
+ <section id="portfolio" class="py-20 md:py-32 bg-gray-900/50">
321
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
322
+ <div class="text-center mb-16">
323
+ <h2 class="text-4xl md:text-5xl font-bold mb-6 fade-in">Our Portfolio</h2>
324
+ <p class="text-xl text-gray-300 max-w-3xl mx-auto fade-in">
325
+ From concept to launch, these are the startups we've built with the right vibe
326
+ </p>
327
+ </div>
328
+
329
+ <div class="portfolio-grid">
330
+ <!-- Featured Projects -->
331
+ <div class="portfolio-item fade-in">
332
+ <div class="p-6">
333
+ <div class="flex items-center justify-between mb-4">
334
+ <h3 class="text-xl font-bold">3aqlmasr.com</h3>
335
+ <span class="text-purple-400 text-sm">AI Platform</span>
336
+ </div>
337
+ <p class="text-gray-400 mb-4">AI-powered platform for Egyptian public figures and insights</p>
338
+ <a href="https://3aqlmasr.com" class="text-purple-400 hover:text-purple-300">Explore →</a>
339
+ </div>
340
+ </div>
341
+
342
+ <div class="portfolio-item fade-in">
343
+ <div class="p-6">
344
+ <div class="flex items-center justify-between mb-4">
345
+ <h3 class="text-xl font-bold">7al.app</h3>
346
+ <span class="text-amber-400 text-sm">Healthcare AI</span>
347
+ </div>
348
+ <p class="text-gray-400 mb-4">AI-driven medical diagnosis and health companion</p>
349
+ <a href="https://7al.app" class="text-purple-400 hover:text-purple-300">Explore →</a>
350
+ </div>
351
+ </div>
352
+
353
+ <div class="portfolio-item fade-in">
354
+ <div class="p-6">
355
+ <div class="flex items-center justify-between mb-4">
356
+ <h3 class="text-xl font-bold">aigame.diy</h3>
357
+ <span class="text-purple-400 text-sm">Game Dev</span>
358
+ </div>
359
+ <p class="text-gray-400 mb-4">AI tool to create personalized video games instantly</p>
360
+ <a href="https://aigame.diy" class="text-purple-400 hover:text-purple-300">Explore →</a>
361
+ </div>
362
+ </div>
363
+
364
+ <div class="portfolio-item fade-in">
365
+ <div class="p-6">
366
+ <div class="flex items-center justify-between mb-4">
367
+ <h3 class="text-xl font-bold">bahgat.ai</h3>
368
+ <span class="text-amber-400 text-sm">Personal AI</span>
369
+ </div>
370
+ <p class="text-gray-400 mb-4">Your personalized AI assistant by Bahgat</p>
371
+ <a href="https://bahgat.ai" class="text-purple-400 hover:text-purple-300">Explore →</a>
372
+ </div>
373
+ </div>
374
+
375
+ <div class="portfolio-item fade-in">
376
+ <div class="p-6">
377
+ <div class="flex items-center justify-between mb-4">
378
+ <h3 class="text-xl font-bold">mo7amy.live</h3>
379
+ <span class="text-purple-400 text-sm">Legal AI</span>
380
+ </div>
381
+ <p class="text-gray-400 mb-4">Live AI legal assistance in Arabic</p>
382
+ <a href="https://mo7amy.live" class="text-purple-400 hover:text-purple-300">Explore →</a>
383
+ </div>
384
+ </div>
385
+
386
+ <div class="portfolio-item fade-in">
387
+ <div class="p-6">
388
+ <div class="flex items-center justify-between mb-4">
389
+ <h3 class="text-xl font-bold">bebsata.live</h3>
390
+ <span class="text-amber-400 text-sm">Streaming</span>
391
+ </div>
392
+ <p class="text-gray-400 mb-4">AI-powered live streaming platform for simple content</p>
393
+ <a href="https://bebsata.live" class="text-purple-400 hover:text-purple-300">Explore →</a>
394
+ </div>
395
+ </div>
396
+ </div>
397
+
398
+ <div class="text-center mt-12">
399
+ <button class="btn-primary px-8 py-3 rounded-lg font-semibold">
400
+ View All 50+ Projects
401
+ </button>
402
+ </div>
403
+ </div>
404
+ </section>
405
+
406
+ <!-- Careers Section -->
407
+ <section id="careers" class="py-20 md:py-32">
408
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
409
+ <div class="text-center mb-16">
410
+ <h2 class="text-4xl md:text-5xl font-bold mb-6 fade-in">Join Our Vibe</h2>
411
+ <p class="text-xl text-gray-300 max-w-3xl mx-auto fade-in">
412
+ We're not hiring employees—we're seeking co-creators of the future
413
+ </p>
414
+ </div>
415
+
416
+ <div class="grid md:grid-cols-2 gap-12">
417
+ <div class="fade-in">
418
+ <h3 class="text-3xl font-bold mb-6">Founders in Residence Program</h3>
419
+ <p class="text-gray-300 mb-6 text-lg">
420
+ Join our 12-month program to build your startup with full support:
421
+ </p>
422
+
423
+ <ul class="space-y-3 text-gray-300">
424
+ <li class="flex items-start">
425
+ <span class="text-purple-400 mr-3">✓</span>
426
+ Full funding and resources
427
+ </li>
428
+ <li class="flex items-start">
429
+ <span class="text-purple-400 mr-3">✓</span>
430
+ AI-powered development tools
431
+ </li>
432
+ <li class="flex items-start">
433
+ <span class="text-purple-400 mr-3">✓</span>
434
+ Access to our network of experts
435
+ </li>
436
+ <li class="flex items-start">
437
+ <span class="text-purple-400 mr-3">✓</span>
438
+ Equity partnership model
439
+ </li>
440
+ </ul>
441
+
442
+ <button class="btn-primary px-6 py-3 rounded-lg font-semibold mt-6">
443
+ Apply as Founder
444
+ </button>
445
+ </div>
446
+
447
+ <div class="fade-in">
448
+ <h3 class="text-3xl font-bold mb-6">Engineers & Designers</h3>
449
+ <p class="text-gray-300 mb-6 text-lg">
450
+ Shape the future with cutting-edge AI technology. We're looking for:
451
+ </p>
452
+
453
+ <div class="grid grid-cols-2 gap-4">
454
+ <div class="vibe-card p-4 rounded-lg text-center">
455
+ <h4 class="font-bold">AI Engineers</h4>
456
+ <p class="text-sm text-gray-400">ML/LLM specialists</p>
457
+ </div>
458
+ <div class="vibe-card p-4 rounded-lg text-center">
459
+ <h4 class="font-bold">Product Designers</h4>
460
+ <p class="text-sm text-gray-400">AI-native experiences</p>
461
+ </div>
462
+ <div class="vibe-card p-4 rounded-lg text-center">
463
+ <h4 class="font-bold">Full-stack Devs</h4>
464
+ <p class="text-sm text-gray-400">Next.js & Python</p>
465
+ </div>
466
+ <div class="vibe-card p-4 rounded-lg text-center">
467
+ <h4 class="font-bold">Growth Hackers</h4>
468
+ <p class="text-sm text-gray-400">AI-first growth</p>
469
+ </div>
470
+ </div>
471
+
472
+ <button class="border border-purple-600 text-purple-400 px-6 py-3 rounded-lg font-semibold hover:bg-purple-600/20 transition-all mt-6">
473
+ View Open Positions
474
+ </button>
475
+ </div>
476
+ </div>
477
+ </div>
478
+ </section>
479
+
480
+ <!-- Insights Section -->
481
+ <section id="insights" class="py-20 md:py-32 bg-gray-900/50">
482
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
483
+ <div class="text-center mb-16">
484
+ <h2 class="text-4xl md:text-5xl font-bold mb-6 fade-in">The Vibe Magazine</h2>
485
+ <p class="text-xl text-gray-300 max-w-3xl mx-auto fade-in">
486
+ Our digital publication exploring startup culture, tech trends, and founder stories
487
+ </p>
488
+ </div>
489
+
490
+ <div class="grid md:grid-cols-3 gap-8">
491
+ <article class="vibe-card p-6 rounded-lg fade-in">
492
+ <img src="https://images.unsplash.com/photo-1677442136019-21780ecad995?w=400&h=200&fit=crop" alt="AI Future" class="w-full h-48 object-cover rounded-lg mb-4">
493
+ <h3 class="text-xl font-bold mb-2">The Future of AI-First Startups</h3>
494
+ <p class="text-gray-400 mb-4">How AI is reshaping the startup landscape and what it means for founders.</p>
495
+ <a href="#" class="text-purple-400 hover:text-purple-300">Read More →</a>
496
+ </article>
497
+
498
+ <article class="vibe-card p-6 rounded-lg fade-in">
499
+ <img src="https://images.unsplash.com/photo-1555949963-ff9fe0c870eb?w=400&h=200&fit=crop" alt="Digital Wellness" class="w-full h-48 object-cover rounded-lg mb-4">
500
+ <h3 class="text-xl font-bold mb-2">Digital Wellness in the AI Age</h3>
501
+ <p class="text-gray-400 mb-4">Exploring how AI can enhance rather than harm our mental wellbeing.</p>
502
+ <a href="#" class="text-purple-400 hover:text-purple-300">Read More →</a>
503
+ </article>
504
+
505
+ <article class="vibe-card p-6 rounded-lg fade-in">
506
+ <img src="https://images.unsplash.com/photo-1558346490-a72e53ae2d4f?w=400&h=200&fit=crop" alt="Creative AI" class="w-full h-48 object-cover rounded-lg mb-4">
507
+ <h3 class="text-xl font-bold mb-2">Creative AI: Beyond Automation</h3>
508
+ <p class="text-gray-400 mb-4">How AI is becoming a creative partner rather than just a tool.</p>
509
+ <a href="#" class="text-purple-400 hover:text-purple-300">Read More →</a>
510
+ </article>
511
+ </div>
512
+
513
+ <div class="text-center mt-12">
514
+ <button class="btn-primary px-8 py-3 rounded-lg font-semibold">
515
+ Subscribe to Vibe Report
516
+ </button>
517
+ </div>
518
+ </div>
519
+ </section>
520
+
521
+ <!-- Footer -->
522
+ <footer class="py-16 bg-black/50 border-t border-white/10">
523
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
524
+ <div class="grid md:grid-cols-4 gap-8">
525
+ <div>
526
+ <h3 class="text-2xl font-bold gradient-text mb-4">Vibe Studio</h3>
527
+ <p class="text-gray-400">Building the next generation of intuitive technology.</p>
528
+ </div>
529
+
530
+ <div>
531
+ <h4 class="font-bold mb-4">Ventures</h4>
532
+ <ul class="space-y-2 text-gray-400">
533
+ <li><a href="#" class="hover:text-white">AI Platforms</a></li>
534
+ <li><a href="#" class="hover:text-white">Healthcare AI</a></li>
535
+ <li><a href="#" class="hover:text-white">Creative Tools</a></li>
536
+ <li><a href="#" class="hover:text-white">E-commerce AI</a></li>
537
+ </ul>
538
+ </div>
539
+
540
+ <div>
541
+ <h4 class="font-bold mb-4">Company</h4>
542
+ <ul class="space-y-2 text-gray-400">
543
+ <li><a href="#" class="hover:text-white">Our Vibe</a></li>
544
+ <li><a href="#" class="hover:text-white">Careers</a></li>
545
+ <li><a href="#" class="hover:text-white">Blog</a></li>
546
+ <li><a href="#" class="hover:text-white">Contact</a></li>
547
+ </ul>
548
+ </div>
549
+
550
+ <div>
551
+ <h4 class="font-bold mb-4">Connect</h4>
552
+ <div class="flex space-x-4">
553
+ <a href="#" class="text-gray-400 hover:text-white">Twitter</a>
554
+ <a href="#" class="text-gray-400 hover:text-white">LinkedIn</a>
555
+ <a href="#" class="text-gray-400 hover:text-white">GitHub</a>
556
+ </div>
557
+ </div>
558
+ </div>
559
+
560
+ <div class="mt-12 pt-8 border-t border-white/10 text-center text-gray-400">
561
+ <p>&copy; 2024 Vibe Studio. Building the future, one vibe at a time.</p>
562
+ </div>
563
+ </div>
564
+ </footer>
565
+
566
+ <script>
567
+ // Mobile Menu Toggle
568
+ const mobileMenuBtn = document.getElementById('mobile-menu-btn');
569
+ const mobileMenu = document.getElementById('mobile-menu');
570
+
571
+ mobileMenuBtn.addEventListener('click', () => {
572
+ mobileMenu.classList.toggle('active');
573
+ });
574
+
575
+ // Close mobile menu when clicking a link
576
+ mobileMenu.querySelectorAll('a').forEach(link => {
577
+ link.addEventListener('click', () => {
578
+ mobileMenu.classList.remove('active');
579
+ });
580
+ });
581
+
582
+ // Smooth scrolling for navigation links
583
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
584
+ anchor.addEventListener('click', function (e) {
585
+ e.preventDefault();
586
+ const target = document.querySelector(this.getAttribute('href'));
587
+ if (target) {
588
+ target.scrollIntoView({
589
+ behavior: 'smooth',
590
+ block: 'start'
591
+ });
592
+ }
593
+ });
594
+ });
595
+
596
+ // GSAP Animations
597
+ if (typeof gsap !== 'undefined') {
598
+ gsap.registerPlugin(ScrollTrigger);
599
+
600
+ // Hero animations
601
+ gsap.timeline()
602
+ .to('.hero-headline', { opacity: 1, y: 0, duration: 1, ease: "power2.out" })
603
+ .to('.hero-subtext', { opacity: 1, y: 0, duration: 1, ease: "power2.out" }, "-=0.5")
604
+ .to('.hero-cta', { opacity: 1, y: 0, duration: 1, ease: "power2.out" }, "-=0.5");
605
+
606
+ // Scroll-triggered animations
607
+ gsap.utils.toArray('.fade-in').forEach(element => {
608
+ gsap.fromTo(element, {
609
+ opacity: 0,
610
+ y: 30
611
+ }, {
612
+ opacity: 1,
613
+ y: 0,
614
+ duration: 1,
615
+ ease: "power2.out",
616
+ scrollTrigger: {
617
+ trigger: element,
618
+ start: "top 95%",
619
+ toggleActions: "play none none reverse"
620
+ }
621
+ });
622
+ });
623
+
624
+ gsap.utils.toArray('.slide-in').forEach(element => {
625
+ gsap.fromTo(element, {
626
+ opacity: 0,
627
+ x: -30
628
+ }, {
629
+ opacity: 1,
630
+ x: 0,
631
+ duration: 1,
632
+ ease: "power2.out",
633
+ scrollTrigger: {
634
+ trigger: element,
635
+ start: "top 95%",
636
+ toggleActions: "play none none reverse"
637
+ }
638
+ });
639
+ });
640
+ }
641
+
642
+ // Typing effect
643
+ const typingElement = document.getElementById('typing');
644
+ const words = ['vibes', 'dreams', 'futures', 'realities'];
645
+ let wordIndex = 0;
646
+ let charIndex = 0;
647
+ let isDeleting = false;
648
+
649
+ function typeWriter() {
650
+ const currentWord = words[wordIndex];
651
+
652
+ if (isDeleting) {
653
+ typingElement.textContent = currentWord.substring(0, charIndex - 1);
654
+ charIndex--;
655
+ } else {
656
+ typingElement.textContent = currentWord.substring(0, charIndex + 1);
657
+ charIndex++;
658
+ }
659
+
660
+ if (!isDeleting && charIndex === currentWord.length) {
661
+ setTimeout(() => isDeleting = true, 2000);
662
+ } else if (isDeleting && charIndex === 0) {
663
+ isDeleting = false;
664
+ wordIndex = (wordIndex + 1) % words.length;
665
+ }
666
+
667
+ setTimeout(typeWriter, isDeleting ? 100 : 150);
668
+ }
669
+
670
+ typeWriter();
671
+
672
+ // Portfolio filtering functionality (enhanced)
673
+ const portfolioItems = document.querySelectorAll('.portfolio-item');
674
+
675
+ // Add hover effects
676
+ portfolioItems.forEach(item => {
677
+ item.addEventListener('mouseenter', () => {
678
+ item.style.transform = 'translateY(-10px) scale(1.02)';
679
+ });
680
+
681
+ item.addEventListener('mouseleave', () => {
682
+ item.style.transform = 'translateY(0) scale(1)';
683
+ });
684
+ });
685
+ </script>
686
+ <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=bahgatbigo/vibes" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
687
+ </html>