Hugging Face's logo

Spaces:
GMA2
/
hero-ex
Running

App Files Community
GMA2 commited on
Commit
e794ef0
·
verified ·
1 Parent(s): b34e809

Add 2 files

Browse files
Files changed (2) hide show
  1. index.html +216 -45
  2. prompts.txt +2 -1
index.html CHANGED
@@ -310,6 +310,93 @@
310
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
311
  }
312
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
313
  /* Responsive adjustments */
314
  @media (max-width: 768px) {
315
  .hero-title {
@@ -331,6 +418,9 @@
331
  </style>
332
  </head>
333
  <body class="bg-black text-white overflow-x-hidden">
 
 
 
334
  <!-- Custom cursor -->
335
  <div class="cursor-follower"></div>
336
 
@@ -352,14 +442,14 @@
352
  <div class="container mx-auto px-6 relative z-10">
353
  <div class="text-center">
354
  <h1 class="hero-title text-6xl md:text-8xl font-bold mb-6 leading-tight">
355
- <span class="gradient-text">IMMERSIVE</span>
356
  <br>
357
- <span class="text-white">EXPERIENCES</span>
358
  </h1>
359
- <p class="text-xl md:text-2xl max-w-3xl mx-auto mb-10 text-gray-300">
360
  We create boundary-pushing digital experiences that blend cutting-edge technology with captivating design.
361
  </p>
362
- <div class="flex flex-col sm:flex-row justify-center gap-4">
363
  <button class="interactive bg-white text-black px-8 py-4 rounded-full font-medium hover:bg-gray-200 transition-all duration-300 transform hover:scale-105 flex items-center gap-2">
364
  <i class="fas fa-play"></i> Play Demo
365
  </button>
@@ -381,13 +471,13 @@
381
  <div class="container mx-auto px-6">
382
  <div class="flex flex-col md:flex-row items-center gap-12">
383
  <div class="md:w-1/2">
384
- <h2 class="text-4xl md:text-6xl font-bold mb-8">
385
  <span class="gradient-text">Who</span> We Are
386
  </h2>
387
- <p class="text-xl text-gray-300 mb-8">
388
  A collective of designers, developers, and creatives pushing the boundaries of digital experiences. We specialize in immersive 3D environments, interactive installations, and cutting-edge web technologies.
389
  </p>
390
- <div class="audio-visualizer mb-8">
391
  <div class="audio-bar" style="--i:0"></div>
392
  <div class="audio-bar" style="--i:1"></div>
393
  <div class="audio-bar" style="--i:2"></div>
@@ -399,12 +489,12 @@
399
  <div class="audio-bar" style="--i:8"></div>
400
  <div class="audio-bar" style="--i:9"></div>
401
  </div>
402
- <button class="interactive bg-transparent border-2 border-blue-500 text-white px-8 py-3 rounded-full font-medium hover:bg-blue-500 transition-all duration-300">
403
  Our Story <i class="fas fa-arrow-right ml-2"></i>
404
  </button>
405
  </div>
406
  <div class="md:w-1/2">
407
- <div class="model-container glass-container" id="model-container-1">
408
  <!-- 3D model will be inserted here -->
409
  </div>
410
  </div>
@@ -415,13 +505,13 @@
415
  <!-- Services Section -->
416
  <section class="py-20 relative noise">
417
  <div class="container mx-auto px-6">
418
- <h2 class="text-4xl md:text-6xl font-bold mb-20 text-center">
419
  <span class="gradient-text">What</span> We Do
420
  </h2>
421
 
422
  <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
423
  <!-- Service Card 1 -->
424
- <div class="interactive-card glass-container rounded-2xl p-8">
425
  <div class="card-content">
426
  <div class="text-5xl mb-6 gradient-text">
427
  <i class="fas fa-vr-cardboard"></i>
@@ -430,14 +520,14 @@
430
  <p class="text-gray-300 mb-6">
431
  Virtual and augmented reality solutions that transport users to new dimensions.
432
  </p>
433
- <button class="interactive text-blue-400 hover:text-blue-300 transition-all duration-300 flex items-center gap-2">
434
  Learn more <i class="fas fa-arrow-right"></i>
435
  </button>
436
  </div>
437
  </div>
438
 
439
  <!-- Service Card 2 -->
440
- <div class="interactive-card glass-container rounded-2xl p-8">
441
  <div class="card-content">
442
  <div class="text-5xl mb-6 gradient-text">
443
  <i class="fas fa-cube"></i>
@@ -446,14 +536,14 @@
446
  <p class="text-gray-300 mb-6">
447
  Interactive 3D environments that run seamlessly in the browser.
448
  </p>
449
- <button class="interactive text-purple-400 hover:text-purple-300 transition-all duration-300 flex items-center gap-2">
450
  Learn more <i class="fas fa-arrow-right"></i>
451
  </button>
452
  </div>
453
  </div>
454
 
455
  <!-- Service Card 3 -->
456
- <div class="interactive-card glass-container rounded-2xl p-8">
457
  <div class="card-content">
458
  <div class="text-5xl mb-6 gradient-text">
459
  <i class="fas fa-headphones"></i>
@@ -462,7 +552,7 @@
462
  <p class="text-gray-300 mb-6">
463
  Synesthetic experiences that blend sound and visuals in perfect harmony.
464
  </p>
465
- <button class="interactive text-pink-400 hover:text-pink-300 transition-all duration-300 flex items-center gap-2">
466
  Learn more <i class="fas fa-arrow-right"></i>
467
  </button>
468
  </div>
@@ -474,7 +564,7 @@
474
  <!-- Projects Showcase -->
475
  <section class="py-20 relative noise">
476
  <div class="container mx-auto px-6">
477
- <h2 class="text-4xl md:text-6xl font-bold mb-20 text-center">
478
  <span class="gradient-text">Featured</span> Projects
479
  </h2>
480
 
@@ -482,17 +572,17 @@
482
  <!-- Project 1 -->
483
  <div class="flex flex-col md:flex-row items-center gap-12">
484
  <div class="md:w-1/2">
485
- <div class="model-container glass-container" id="model-container-2">
486
  <!-- 3D model will be inserted here -->
487
  </div>
488
  </div>
489
  <div class="md:w-1/2">
490
- <span class="text-blue-400 font-mono text-sm">VIRTUAL REALITY</span>
491
- <h3 class="text-3xl md:text-4xl font-bold mb-4">Neon Dreams</h3>
492
- <p class="text-gray-300 mb-6">
493
  An immersive VR experience that takes users through a cyberpunk-inspired dreamscape, blending interactive elements with stunning visuals.
494
  </p>
495
- <div class="flex gap-4">
496
  <button class="interactive bg-blue-500 text-white px-6 py-2 rounded-full text-sm font-medium hover:bg-blue-600 transition-all duration-300">
497
  View Case Study
498
  </button>
@@ -506,17 +596,17 @@
506
  <!-- Project 2 -->
507
  <div class="flex flex-col md:flex-row-reverse items-center gap-12">
508
  <div class="md:w-1/2">
509
- <div class="model-container glass-container" id="model-container-3">
510
  <!-- 3D model will be inserted here -->
511
  </div>
512
  </div>
513
  <div class="md:w-1/2">
514
- <span class="text-purple-400 font-mono text-sm">INTERACTIVE 3D</span>
515
- <h3 class="text-3xl md:text-4xl font-bold mb-4">Quantum Flux</h3>
516
- <p class="text-gray-300 mb-6">
517
  A browser-based 3D experience that visualizes quantum physics concepts in an interactive and engaging way.
518
  </p>
519
- <div class="flex gap-4">
520
  <button class="interactive bg-purple-500 text-white px-6 py-2 rounded-full text-sm font-medium hover:bg-purple-600 transition-all duration-300">
521
  View Case Study
522
  </button>
@@ -533,29 +623,29 @@
533
  <!-- Impact Section -->
534
  <section class="py-20 relative noise">
535
  <div class="container mx-auto px-6">
536
- <h2 class="text-4xl md:text-6xl font-bold mb-20 text-center">
537
  <span class="gradient-text">Our</span> Impact
538
  </h2>
539
 
540
  <div class="floating-grid mb-20">
541
- <div class="floating-item glass-container p-8 rounded-2xl">
542
  <div class="impact-number mb-4" data-count="150">0</div>
543
  <h3 class="text-xl font-bold mb-2">Projects Completed</h3>
544
  <p class="text-gray-300">Across various industries and platforms</p>
545
  </div>
546
- <div class="floating-item glass-container p-8 rounded-2xl">
547
  <div class="impact-number mb-4" data-count="98">0</div>
548
  <h3 class="text-xl font-bold mb-2">Client Satisfaction</h3>
549
  <p class="text-gray-300">Percentage of returning clients</p>
550
  </div>
551
- <div class="floating-item glass-container p-8 rounded-2xl">
552
  <div class="impact-number mb-4" data-count="25">0</div>
553
  <h3 class="text-xl font-bold mb-2">Awards Won</h3>
554
  <p class="text-gray-300">Industry recognition for excellence</p>
555
  </div>
556
  </div>
557
 
558
- <div class="glass-container p-12 rounded-3xl">
559
  <div class="flex flex-col md:flex-row items-center gap-12">
560
  <div class="md:w-1/2">
561
  <h3 class="text-3xl md:text-4xl font-bold mb-6">Transforming Digital Experiences</h3>
@@ -568,22 +658,22 @@
568
  </div>
569
  <div class="md:w-1/2">
570
  <div class="grid grid-cols-3 gap-4">
571
- <div class="glass-container p-6 rounded-xl flex items-center justify-center h-24">
572
  <img src="https://via.placeholder.com/100x50?text=Client+1" alt="Client Logo" class="client-logo max-h-12">
573
  </div>
574
- <div class="glass-container p-6 rounded-xl flex items-center justify-center h-24">
575
  <img src="https://via.placeholder.com/100x50?text=Client+2" alt="Client Logo" class="client-logo max-h-12">
576
  </div>
577
- <div class="glass-container p-6 rounded-xl flex items-center justify-center h-24">
578
  <img src="https://via.placeholder.com/100x50?text=Client+3" alt="Client Logo" class="client-logo max-h-12">
579
  </div>
580
- <div class="glass-container p-6 rounded-xl flex items-center justify-center h-24">
581
  <img src="https://via.placeholder.com/100x50?text=Client+4" alt="Client Logo" class="client-logo max-h-12">
582
  </div>
583
- <div class="glass-container p-6 rounded-xl flex items-center justify-center h-24">
584
  <img src="https://via.placeholder.com/100x50?text=Client+5" alt="Client Logo" class="client-logo max-h-12">
585
  </div>
586
- <div class="glass-container p-6 rounded-xl flex items-center justify-center h-24">
587
  <img src="https://via.placeholder.com/100x50?text=Client+6" alt="Client Logo" class="client-logo max-h-12">
588
  </div>
589
  </div>
@@ -596,12 +686,12 @@
596
  <!-- Testimonials Section -->
597
  <section class="py-20 relative noise">
598
  <div class="container mx-auto px-6">
599
- <h2 class="text-4xl md:text-6xl font-bold mb-20 text-center">
600
  <span class="gradient-text">Client</span> Testimonials
601
  </h2>
602
 
603
  <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
604
- <div class="testimonial-card glass-container p-8 rounded-2xl">
605
  <div class="text-yellow-400 text-2xl mb-4">
606
  <i class="fas fa-quote-left"></i>
607
  </div>
@@ -616,7 +706,7 @@
616
  </div>
617
  </div>
618
  </div>
619
- <div class="testimonial-card glass-container p-8 rounded-2xl">
620
  <div class="text-yellow-400 text-2xl mb-4">
621
  <i class="fas fa-quote-left"></i>
622
  </div>
@@ -631,7 +721,7 @@
631
  </div>
632
  </div>
633
  </div>
634
- <div class="testimonial-card glass-container p-8 rounded-2xl">
635
  <div class="text-yellow-400 text-2xl mb-4">
636
  <i class="fas fa-quote-left"></i>
637
  </div>
@@ -654,14 +744,14 @@
654
  <section class="py-20 relative noise">
655
  <div class="container mx-auto px-6">
656
  <div class="max-w-4xl mx-auto text-center">
657
- <h2 class="text-4xl md:text-6xl font-bold mb-8">
658
  <span class="gradient-text">Let's Create</span> Together
659
  </h2>
660
- <p class="text-xl text-gray-300 mb-12">
661
  Ready to bring your vision to life? Get in touch with our team to discuss your next immersive project.
662
  </p>
663
 
664
- <form class="grid grid-cols-1 md:grid-cols-2 gap-6 text-left glass-container p-8 rounded-2xl">
665
  <div>
666
  <label class="block text-gray-400 mb-2">Name</label>
667
  <input type="text" class="interactive w-full bg-gray-900/50 border border-gray-700 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-all duration-300">
@@ -1010,6 +1100,84 @@
1010
  });
1011
  });
1012
  };
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1013
 
1014
  // Initialize everything when DOM is loaded
1015
  document.addEventListener('DOMContentLoaded', () => {
@@ -1020,6 +1188,9 @@
1020
  initImpactCounters();
1021
  initFloatingGrid();
1022
  initScrollAnimations();
 
 
 
1023
 
1024
  // Add click sound to buttons
1025
  const buttons = document.querySelectorAll('button');
 
310
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
311
  }
312
 
313
+ /* ===== NEW TRANSITIONS ===== */
314
+ /* Page transition overlay */
315
+ .transition-overlay {
316
+ position: fixed;
317
+ top: 0;
318
+ left: 0;
319
+ width: 100%;
320
+ height: 100%;
321
+ background: #000;
322
+ z-index: 9999;
323
+ transform: scaleY(0);
324
+ transform-origin: bottom;
325
+ pointer-events: none;
326
+ }
327
+
328
+ /* Smooth scroll container */
329
+ html {
330
+ scroll-behavior: smooth;
331
+ }
332
+
333
+ /* Text reveal animation */
334
+ .text-reveal {
335
+ overflow: hidden;
336
+ display: inline-block;
337
+ }
338
+
339
+ .text-reveal span {
340
+ display: inline-block;
341
+ transform: translateY(100%);
342
+ opacity: 0;
343
+ }
344
+
345
+ /* Image hover zoom */
346
+ .zoom-on-hover {
347
+ transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
348
+ will-change: transform;
349
+ }
350
+
351
+ .zoom-on-hover:hover {
352
+ transform: scale(1.03);
353
+ }
354
+
355
+ /* Underline animation */
356
+ .underline-animation {
357
+ position: relative;
358
+ display: inline-block;
359
+ }
360
+
361
+ .underline-animation::after {
362
+ content: '';
363
+ position: absolute;
364
+ bottom: -2px;
365
+ left: 0;
366
+ width: 0;
367
+ height: 1px;
368
+ background: currentColor;
369
+ transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
370
+ }
371
+
372
+ .underline-animation:hover::after {
373
+ width: 100%;
374
+ }
375
+
376
+ /* Section fade-in */
377
+ .section-fade-in {
378
+ opacity: 0;
379
+ transform: translateY(30px);
380
+ transition: opacity 1s ease, transform 1s ease;
381
+ }
382
+
383
+ .section-fade-in.visible {
384
+ opacity: 1;
385
+ transform: translateY(0);
386
+ }
387
+
388
+ /* Grid item animation */
389
+ .grid-item {
390
+ opacity: 0;
391
+ transform: translateY(20px);
392
+ transition: opacity 0.6s ease, transform 0.6s ease;
393
+ }
394
+
395
+ .grid-item.visible {
396
+ opacity: 1;
397
+ transform: translateY(0);
398
+ }
399
+
400
  /* Responsive adjustments */
401
  @media (max-width: 768px) {
402
  .hero-title {
 
418
  </style>
419
  </head>
420
  <body class="bg-black text-white overflow-x-hidden">
421
+ <!-- Page transition overlay -->
422
+ <div class="transition-overlay"></div>
423
+
424
  <!-- Custom cursor -->
425
  <div class="cursor-follower"></div>
426
 
 
442
  <div class="container mx-auto px-6 relative z-10">
443
  <div class="text-center">
444
  <h1 class="hero-title text-6xl md:text-8xl font-bold mb-6 leading-tight">
445
+ <span class="gradient-text text-reveal"><span>IMMERSIVE</span></span>
446
  <br>
447
+ <span class="text-white text-reveal"><span>EXPERIENCES</span></span>
448
  </h1>
449
+ <p class="text-xl md:text-2xl max-w-3xl mx-auto mb-10 text-gray-300 section-fade-in">
450
  We create boundary-pushing digital experiences that blend cutting-edge technology with captivating design.
451
  </p>
452
+ <div class="flex flex-col sm:flex-row justify-center gap-4 section-fade-in">
453
  <button class="interactive bg-white text-black px-8 py-4 rounded-full font-medium hover:bg-gray-200 transition-all duration-300 transform hover:scale-105 flex items-center gap-2">
454
  <i class="fas fa-play"></i> Play Demo
455
  </button>
 
471
  <div class="container mx-auto px-6">
472
  <div class="flex flex-col md:flex-row items-center gap-12">
473
  <div class="md:w-1/2">
474
+ <h2 class="text-4xl md:text-6xl font-bold mb-8 section-fade-in">
475
  <span class="gradient-text">Who</span> We Are
476
  </h2>
477
+ <p class="text-xl text-gray-300 mb-8 section-fade-in">
478
  A collective of designers, developers, and creatives pushing the boundaries of digital experiences. We specialize in immersive 3D environments, interactive installations, and cutting-edge web technologies.
479
  </p>
480
+ <div class="audio-visualizer mb-8 section-fade-in">
481
  <div class="audio-bar" style="--i:0"></div>
482
  <div class="audio-bar" style="--i:1"></div>
483
  <div class="audio-bar" style="--i:2"></div>
 
489
  <div class="audio-bar" style="--i:8"></div>
490
  <div class="audio-bar" style="--i:9"></div>
491
  </div>
492
+ <button class="interactive bg-transparent border-2 border-blue-500 text-white px-8 py-3 rounded-full font-medium hover:bg-blue-500 transition-all duration-300 section-fade-in">
493
  Our Story <i class="fas fa-arrow-right ml-2"></i>
494
  </button>
495
  </div>
496
  <div class="md:w-1/2">
497
+ <div class="model-container glass-container zoom-on-hover" id="model-container-1">
498
  <!-- 3D model will be inserted here -->
499
  </div>
500
  </div>
 
505
  <!-- Services Section -->
506
  <section class="py-20 relative noise">
507
  <div class="container mx-auto px-6">
508
+ <h2 class="text-4xl md:text-6xl font-bold mb-20 text-center section-fade-in">
509
  <span class="gradient-text">What</span> We Do
510
  </h2>
511
 
512
  <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
513
  <!-- Service Card 1 -->
514
+ <div class="interactive-card glass-container rounded-2xl p-8 grid-item">
515
  <div class="card-content">
516
  <div class="text-5xl mb-6 gradient-text">
517
  <i class="fas fa-vr-cardboard"></i>
 
520
  <p class="text-gray-300 mb-6">
521
  Virtual and augmented reality solutions that transport users to new dimensions.
522
  </p>
523
+ <button class="interactive text-blue-400 hover:text-blue-300 transition-all duration-300 flex items-center gap-2 underline-animation">
524
  Learn more <i class="fas fa-arrow-right"></i>
525
  </button>
526
  </div>
527
  </div>
528
 
529
  <!-- Service Card 2 -->
530
+ <div class="interactive-card glass-container rounded-2xl p-8 grid-item" style="transition-delay: 0.1s">
531
  <div class="card-content">
532
  <div class="text-5xl mb-6 gradient-text">
533
  <i class="fas fa-cube"></i>
 
536
  <p class="text-gray-300 mb-6">
537
  Interactive 3D environments that run seamlessly in the browser.
538
  </p>
539
+ <button class="interactive text-purple-400 hover:text-purple-300 transition-all duration-300 flex items-center gap-2 underline-animation">
540
  Learn more <i class="fas fa-arrow-right"></i>
541
  </button>
542
  </div>
543
  </div>
544
 
545
  <!-- Service Card 3 -->
546
+ <div class="interactive-card glass-container rounded-2xl p-8 grid-item" style="transition-delay: 0.2s">
547
  <div class="card-content">
548
  <div class="text-5xl mb-6 gradient-text">
549
  <i class="fas fa-headphones"></i>
 
552
  <p class="text-gray-300 mb-6">
553
  Synesthetic experiences that blend sound and visuals in perfect harmony.
554
  </p>
555
+ <button class="interactive text-pink-400 hover:text-pink-300 transition-all duration-300 flex items-center gap-2 underline-animation">
556
  Learn more <i class="fas fa-arrow-right"></i>
557
  </button>
558
  </div>
 
564
  <!-- Projects Showcase -->
565
  <section class="py-20 relative noise">
566
  <div class="container mx-auto px-6">
567
+ <h2 class="text-4xl md:text-6xl font-bold mb-20 text-center section-fade-in">
568
  <span class="gradient-text">Featured</span> Projects
569
  </h2>
570
 
 
572
  <!-- Project 1 -->
573
  <div class="flex flex-col md:flex-row items-center gap-12">
574
  <div class="md:w-1/2">
575
+ <div class="model-container glass-container zoom-on-hover grid-item" id="model-container-2">
576
  <!-- 3D model will be inserted here -->
577
  </div>
578
  </div>
579
  <div class="md:w-1/2">
580
+ <span class="text-blue-400 font-mono text-sm grid-item">VIRTUAL REALITY</span>
581
+ <h3 class="text-3xl md:text-4xl font-bold mb-4 grid-item" style="transition-delay: 0.1s">Neon Dreams</h3>
582
+ <p class="text-gray-300 mb-6 grid-item" style="transition-delay: 0.2s">
583
  An immersive VR experience that takes users through a cyberpunk-inspired dreamscape, blending interactive elements with stunning visuals.
584
  </p>
585
+ <div class="flex gap-4 grid-item" style="transition-delay: 0.3s">
586
  <button class="interactive bg-blue-500 text-white px-6 py-2 rounded-full text-sm font-medium hover:bg-blue-600 transition-all duration-300">
587
  View Case Study
588
  </button>
 
596
  <!-- Project 2 -->
597
  <div class="flex flex-col md:flex-row-reverse items-center gap-12">
598
  <div class="md:w-1/2">
599
+ <div class="model-container glass-container zoom-on-hover grid-item" id="model-container-3">
600
  <!-- 3D model will be inserted here -->
601
  </div>
602
  </div>
603
  <div class="md:w-1/2">
604
+ <span class="text-purple-400 font-mono text-sm grid-item">INTERACTIVE 3D</span>
605
+ <h3 class="text-3xl md:text-4xl font-bold mb-4 grid-item" style="transition-delay: 0.1s">Quantum Flux</h3>
606
+ <p class="text-gray-300 mb-6 grid-item" style="transition-delay: 0.2s">
607
  A browser-based 3D experience that visualizes quantum physics concepts in an interactive and engaging way.
608
  </p>
609
+ <div class="flex gap-4 grid-item" style="transition-delay: 0.3s">
610
  <button class="interactive bg-purple-500 text-white px-6 py-2 rounded-full text-sm font-medium hover:bg-purple-600 transition-all duration-300">
611
  View Case Study
612
  </button>
 
623
  <!-- Impact Section -->
624
  <section class="py-20 relative noise">
625
  <div class="container mx-auto px-6">
626
+ <h2 class="text-4xl md:text-6xl font-bold mb-20 text-center section-fade-in">
627
  <span class="gradient-text">Our</span> Impact
628
  </h2>
629
 
630
  <div class="floating-grid mb-20">
631
+ <div class="floating-item glass-container p-8 rounded-2xl grid-item">
632
  <div class="impact-number mb-4" data-count="150">0</div>
633
  <h3 class="text-xl font-bold mb-2">Projects Completed</h3>
634
  <p class="text-gray-300">Across various industries and platforms</p>
635
  </div>
636
+ <div class="floating-item glass-container p-8 rounded-2xl grid-item" style="transition-delay: 0.1s">
637
  <div class="impact-number mb-4" data-count="98">0</div>
638
  <h3 class="text-xl font-bold mb-2">Client Satisfaction</h3>
639
  <p class="text-gray-300">Percentage of returning clients</p>
640
  </div>
641
+ <div class="floating-item glass-container p-8 rounded-2xl grid-item" style="transition-delay: 0.2s">
642
  <div class="impact-number mb-4" data-count="25">0</div>
643
  <h3 class="text-xl font-bold mb-2">Awards Won</h3>
644
  <p class="text-gray-300">Industry recognition for excellence</p>
645
  </div>
646
  </div>
647
 
648
+ <div class="glass-container p-12 rounded-3xl section-fade-in">
649
  <div class="flex flex-col md:flex-row items-center gap-12">
650
  <div class="md:w-1/2">
651
  <h3 class="text-3xl md:text-4xl font-bold mb-6">Transforming Digital Experiences</h3>
 
658
  </div>
659
  <div class="md:w-1/2">
660
  <div class="grid grid-cols-3 gap-4">
661
+ <div class="glass-container p-6 rounded-xl flex items-center justify-center h-24 zoom-on-hover">
662
  <img src="https://via.placeholder.com/100x50?text=Client+1" alt="Client Logo" class="client-logo max-h-12">
663
  </div>
664
+ <div class="glass-container p-6 rounded-xl flex items-center justify-center h-24 zoom-on-hover">
665
  <img src="https://via.placeholder.com/100x50?text=Client+2" alt="Client Logo" class="client-logo max-h-12">
666
  </div>
667
+ <div class="glass-container p-6 rounded-xl flex items-center justify-center h-24 zoom-on-hover">
668
  <img src="https://via.placeholder.com/100x50?text=Client+3" alt="Client Logo" class="client-logo max-h-12">
669
  </div>
670
+ <div class="glass-container p-6 rounded-xl flex items-center justify-center h-24 zoom-on-hover">
671
  <img src="https://via.placeholder.com/100x50?text=Client+4" alt="Client Logo" class="client-logo max-h-12">
672
  </div>
673
+ <div class="glass-container p-6 rounded-xl flex items-center justify-center h-24 zoom-on-hover">
674
  <img src="https://via.placeholder.com/100x50?text=Client+5" alt="Client Logo" class="client-logo max-h-12">
675
  </div>
676
+ <div class="glass-container p-6 rounded-xl flex items-center justify-center h-24 zoom-on-hover">
677
  <img src="https://via.placeholder.com/100x50?text=Client+6" alt="Client Logo" class="client-logo max-h-12">
678
  </div>
679
  </div>
 
686
  <!-- Testimonials Section -->
687
  <section class="py-20 relative noise">
688
  <div class="container mx-auto px-6">
689
+ <h2 class="text-4xl md:text-6xl font-bold mb-20 text-center section-fade-in">
690
  <span class="gradient-text">Client</span> Testimonials
691
  </h2>
692
 
693
  <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
694
+ <div class="testimonial-card glass-container p-8 rounded-2xl grid-item">
695
  <div class="text-yellow-400 text-2xl mb-4">
696
  <i class="fas fa-quote-left"></i>
697
  </div>
 
706
  </div>
707
  </div>
708
  </div>
709
+ <div class="testimonial-card glass-container p-8 rounded-2xl grid-item" style="transition-delay: 0.1s">
710
  <div class="text-yellow-400 text-2xl mb-4">
711
  <i class="fas fa-quote-left"></i>
712
  </div>
 
721
  </div>
722
  </div>
723
  </div>
724
+ <div class="testimonial-card glass-container p-8 rounded-2xl grid-item" style="transition-delay: 0.2s">
725
  <div class="text-yellow-400 text-2xl mb-4">
726
  <i class="fas fa-quote-left"></i>
727
  </div>
 
744
  <section class="py-20 relative noise">
745
  <div class="container mx-auto px-6">
746
  <div class="max-w-4xl mx-auto text-center">
747
+ <h2 class="text-4xl md:text-6xl font-bold mb-8 section-fade-in">
748
  <span class="gradient-text">Let's Create</span> Together
749
  </h2>
750
+ <p class="text-xl text-gray-300 mb-12 section-fade-in">
751
  Ready to bring your vision to life? Get in touch with our team to discuss your next immersive project.
752
  </p>
753
 
754
+ <form class="grid grid-cols-1 md:grid-cols-2 gap-6 text-left glass-container p-8 rounded-2xl section-fade-in">
755
  <div>
756
  <label class="block text-gray-400 mb-2">Name</label>
757
  <input type="text" class="interactive w-full bg-gray-900/50 border border-gray-700 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-all duration-300">
 
1100
  });
1101
  });
1102
  };
1103
+
1104
+ // Initialize text reveal animations
1105
+ const initTextReveal = () => {
1106
+ const textReveals = document.querySelectorAll('.text-reveal span');
1107
+
1108
+ textReveals.forEach((span, i) => {
1109
+ gsap.to(span, {
1110
+ y: 0,
1111
+ opacity: 1,
1112
+ duration: 1.2,
1113
+ delay: i * 0.1,
1114
+ ease: "power3.out"
1115
+ });
1116
+ });
1117
+ };
1118
+
1119
+ // Initialize intersection observer for scroll animations
1120
+ const initIntersectionObserver = () => {
1121
+ const sections = document.querySelectorAll('.section-fade-in');
1122
+ const gridItems = document.querySelectorAll('.grid-item');
1123
+
1124
+ const observer = new IntersectionObserver((entries) => {
1125
+ entries.forEach(entry => {
1126
+ if (entry.isIntersecting) {
1127
+ entry.target.classList.add('visible');
1128
+ }
1129
+ });
1130
+ }, { threshold: 0.1 });
1131
+
1132
+ sections.forEach(section => observer.observe(section));
1133
+ gridItems.forEach(item => observer.observe(item));
1134
+ };
1135
+
1136
+ // Initialize page transition
1137
+ const initPageTransition = () => {
1138
+ const overlay = document.querySelector('.transition-overlay');
1139
+
1140
+ // Initial animation
1141
+ gsap.to(overlay, {
1142
+ scaleY: 0,
1143
+ duration: 1.2,
1144
+ ease: "expo.inOut",
1145
+ transformOrigin: "top"
1146
+ });
1147
+
1148
+ // Add click event for demo purposes
1149
+ const links = document.querySelectorAll('a, button');
1150
+ links.forEach(link => {
1151
+ link.addEventListener('click', (e) => {
1152
+ if (link.getAttribute('href') && link.getAttribute('href').startsWith('#')) {
1153
+ return; // Skip anchor links
1154
+ }
1155
+
1156
+ e.preventDefault();
1157
+
1158
+ gsap.to(overlay, {
1159
+ scaleY: 1,
1160
+ duration: 0.8,
1161
+ ease: "expo.in",
1162
+ transformOrigin: "bottom"
1163
+ });
1164
+
1165
+ setTimeout(() => {
1166
+ // In a real implementation, this would navigate to the link
1167
+ console.log("Would navigate to:", link.href || "button action");
1168
+
1169
+ // For demo, just reverse the animation
1170
+ gsap.to(overlay, {
1171
+ scaleY: 0,
1172
+ duration: 0.8,
1173
+ ease: "expo.out",
1174
+ transformOrigin: "top",
1175
+ delay: 0.5
1176
+ });
1177
+ }, 800);
1178
+ });
1179
+ });
1180
+ };
1181
 
1182
  // Initialize everything when DOM is loaded
1183
  document.addEventListener('DOMContentLoaded', () => {
 
1188
  initImpactCounters();
1189
  initFloatingGrid();
1190
  initScrollAnimations();
1191
+ initTextReveal();
1192
+ initIntersectionObserver();
1193
+ initPageTransition();
1194
 
1195
  // Add click sound to buttons
1196
  const buttons = document.querySelectorAll('button');
prompts.txt CHANGED
@@ -6,4 +6,5 @@ add this now import {noopReturn as t, defaults as i, isEasingGenerator as e, isE
6
  create another section and have the tech cards follow scroll and zoom out
7
  can you add more sections and add these elements https://www.madeful.de/
8
  can you now add some of these elements from this site, sound, immersive, 3D etc. https://kodemedia.com/immersive
9
- before the contact or let's create together section can you add some of the sections in and animations from this site in addition to what you already have. can you make all boxes and containers look like black glass with highlights as they move? https://www.altermind.studio/impact
 
 
6
  create another section and have the tech cards follow scroll and zoom out
7
  can you add more sections and add these elements https://www.madeful.de/
8
  can you now add some of these elements from this site, sound, immersive, 3D etc. https://kodemedia.com/immersive
9
+ before the contact or let's create together section can you add some of the sections in and animations from this site in addition to what you already have. can you make all boxes and containers look like black glass with highlights as they move? https://www.altermind.studio/impact
10
+ can you add some transitions like this site onto this site? https://gravura.webflow.io/