Add 2 files

index.html

@@ -8,6 +8,7 @@
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/ScrollTrigger.min.js"></script>
     <style>
         /* Base styles */
         body {
@@ -55,16 +56,58 @@
             color: transparent;
         }
 
+        /* Glass morphism effect */
+        .glass-container {
+            background: rgba(10, 10, 15, 0.5);
+            backdrop-filter: blur(16px) saturate(180%);
+            -webkit-backdrop-filter: blur(16px) saturate(180%);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1);
+            position: relative;
+            overflow: hidden;
+        }
+
+        .glass-container::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 60%);
+            z-index: -1;
+        }
+
         /* Interactive cards */
         .interactive-card {
             position: relative;
             overflow: hidden;
             transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
             transform-style: preserve-3d;
+            background: rgba(15, 15, 20, 0.6);
+            backdrop-filter: blur(12px);
+            border: 1px solid rgba(255, 255, 255, 0.1);
         }
 
         .interactive-card:hover {
             transform: translateY(-10px) scale(1.02);
+            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
+        }
+
+        .interactive-card::after {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 60%);
+            opacity: 0;
+            transition: opacity 0.3s ease;
+        }
+
+        .interactive-card:hover::after {
+            opacity: 1;
         }
 
         .card-content {
@@ -154,8 +197,9 @@
             position: relative;
             border-radius: 20px;
             overflow: hidden;
-            background: rgba(255,255,255,0.05);
-            border: 1px solid rgba(255,255,255,0.1);
+            background: rgba(15, 15, 20, 0.6);
+            backdrop-filter: blur(12px);
+            border: 1px solid rgba(255, 255, 255, 0.1);
         }
 
         /* Audio visualizer */
@@ -216,6 +260,56 @@
             transition: width 0.1s ease;
         }
 
+        /* Impact numbers */
+        .impact-number {
+            font-size: 4rem;
+            font-weight: 700;
+            background: linear-gradient(90deg, #3b82f6, #8b5cf6);
+            -webkit-background-clip: text;
+            background-clip: text;
+            color: transparent;
+            line-height: 1;
+        }
+
+        /* Floating grid */
+        .floating-grid {
+            display: grid;
+            grid-template-columns: repeat(3, 1fr);
+            gap: 20px;
+            perspective: 1000px;
+        }
+
+        .floating-item {
+            position: relative;
+            transform-style: preserve-3d;
+            transition: transform 0.5s ease;
+        }
+
+        /* Client logos */
+        .client-logo {
+            filter: grayscale(100%) brightness(0.8);
+            transition: all 0.3s ease;
+            opacity: 0.7;
+        }
+
+        .client-logo:hover {
+            filter: grayscale(0%) brightness(1);
+            opacity: 1;
+        }
+
+        /* Testimonial cards */
+        .testimonial-card {
+            background: rgba(15, 15, 20, 0.6);
+            backdrop-filter: blur(12px);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            transition: all 0.4s ease;
+        }
+
+        .testimonial-card:hover {
+            transform: translateY(-10px);
+            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
+        }
+
         /* Responsive adjustments */
         @media (max-width: 768px) {
             .hero-title {
@@ -225,6 +319,14 @@
             .model-container {
                 height: 300px;
             }
+
+            .floating-grid {
+                grid-template-columns: 1fr;
+            }
+
+            .impact-number {
+                font-size: 3rem;
+            }
         }
     </style>
 </head>
@@ -302,7 +404,7 @@
                     </button>
                 </div>
                 <div class="md:w-1/2">
-                    <div class="model-container" id="model-container-1">
+                    <div class="model-container glass-container" id="model-container-1">
                         <!-- 3D model will be inserted here -->
                     </div>
                 </div>
@@ -319,7 +421,7 @@
             
             <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                 <!-- Service Card 1 -->
-                <div class="interactive-card bg-gradient-to-br from-blue-900/20 to-purple-900/20 rounded-2xl p-8 border border-gray-800/50 backdrop-blur-sm">
+                <div class="interactive-card glass-container rounded-2xl p-8">
                     <div class="card-content">
                         <div class="text-5xl mb-6 gradient-text">
                             <i class="fas fa-vr-cardboard"></i>
@@ -335,7 +437,7 @@
                 </div>
                 
                 <!-- Service Card 2 -->
-                <div class="interactive-card bg-gradient-to-br from-purple-900/20 to-pink-900/20 rounded-2xl p-8 border border-gray-800/50 backdrop-blur-sm">
+                <div class="interactive-card glass-container rounded-2xl p-8">
                     <div class="card-content">
                         <div class="text-5xl mb-6 gradient-text">
                             <i class="fas fa-cube"></i>
@@ -351,7 +453,7 @@
                 </div>
                 
                 <!-- Service Card 3 -->
-                <div class="interactive-card bg-gradient-to-br from-pink-900/20 to-blue-900/20 rounded-2xl p-8 border border-gray-800/50 backdrop-blur-sm">
+                <div class="interactive-card glass-container rounded-2xl p-8">
                     <div class="card-content">
                         <div class="text-5xl mb-6 gradient-text">
                             <i class="fas fa-headphones"></i>
@@ -380,7 +482,7 @@
                 <!-- Project 1 -->
                 <div class="flex flex-col md:flex-row items-center gap-12">
                     <div class="md:w-1/2">
-                        <div class="model-container" id="model-container-2">
+                        <div class="model-container glass-container" id="model-container-2">
                             <!-- 3D model will be inserted here -->
                         </div>
                     </div>
@@ -404,7 +506,7 @@
                 <!-- Project 2 -->
                 <div class="flex flex-col md:flex-row-reverse items-center gap-12">
                     <div class="md:w-1/2">
-                        <div class="model-container" id="model-container-3">
+                        <div class="model-container glass-container" id="model-container-3">
                             <!-- 3D model will be inserted here -->
                         </div>
                     </div>
@@ -428,6 +530,126 @@
         </div>
     </section>
 
+    <!-- Impact Section -->
+    <section class="py-20 relative noise">
+        <div class="container mx-auto px-6">
+            <h2 class="text-4xl md:text-6xl font-bold mb-20 text-center">
+                <span class="gradient-text">Our</span> Impact
+            </h2>
+
+            <div class="floating-grid mb-20">
+                <div class="floating-item glass-container p-8 rounded-2xl">
+                    <div class="impact-number mb-4" data-count="150">0</div>
+                    <h3 class="text-xl font-bold mb-2">Projects Completed</h3>
+                    <p class="text-gray-300">Across various industries and platforms</p>
+                </div>
+                <div class="floating-item glass-container p-8 rounded-2xl">
+                    <div class="impact-number mb-4" data-count="98">0</div>
+                    <h3 class="text-xl font-bold mb-2">Client Satisfaction</h3>
+                    <p class="text-gray-300">Percentage of returning clients</p>
+                </div>
+                <div class="floating-item glass-container p-8 rounded-2xl">
+                    <div class="impact-number mb-4" data-count="25">0</div>
+                    <h3 class="text-xl font-bold mb-2">Awards Won</h3>
+                    <p class="text-gray-300">Industry recognition for excellence</p>
+                </div>
+            </div>
+
+            <div class="glass-container p-12 rounded-3xl">
+                <div class="flex flex-col md:flex-row items-center gap-12">
+                    <div class="md:w-1/2">
+                        <h3 class="text-3xl md:text-4xl font-bold mb-6">Transforming Digital Experiences</h3>
+                        <p class="text-xl text-gray-300 mb-8">
+                            Our work has helped clients redefine their digital presence, creating memorable experiences that engage and inspire audiences worldwide.
+                        </p>
+                        <button class="interactive bg-gradient-to-r from-blue-500 to-purple-500 text-white px-8 py-3 rounded-full font-medium hover:from-blue-600 hover:to-purple-600 transition-all duration-300">
+                            See Case Studies <i class="fas fa-arrow-right ml-2"></i>
+                        </button>
+                    </div>
+                    <div class="md:w-1/2">
+                        <div class="grid grid-cols-3 gap-4">
+                            <div class="glass-container p-6 rounded-xl flex items-center justify-center h-24">
+                                <img src="https://via.placeholder.com/100x50?text=Client+1" alt="Client Logo" class="client-logo max-h-12">
+                            </div>
+                            <div class="glass-container p-6 rounded-xl flex items-center justify-center h-24">
+                                <img src="https://via.placeholder.com/100x50?text=Client+2" alt="Client Logo" class="client-logo max-h-12">
+                            </div>
+                            <div class="glass-container p-6 rounded-xl flex items-center justify-center h-24">
+                                <img src="https://via.placeholder.com/100x50?text=Client+3" alt="Client Logo" class="client-logo max-h-12">
+                            </div>
+                            <div class="glass-container p-6 rounded-xl flex items-center justify-center h-24">
+                                <img src="https://via.placeholder.com/100x50?text=Client+4" alt="Client Logo" class="client-logo max-h-12">
+                            </div>
+                            <div class="glass-container p-6 rounded-xl flex items-center justify-center h-24">
+                                <img src="https://via.placeholder.com/100x50?text=Client+5" alt="Client Logo" class="client-logo max-h-12">
+                            </div>
+                            <div class="glass-container p-6 rounded-xl flex items-center justify-center h-24">
+                                <img src="https://via.placeholder.com/100x50?text=Client+6" alt="Client Logo" class="client-logo max-h-12">
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Testimonials Section -->
+    <section class="py-20 relative noise">
+        <div class="container mx-auto px-6">
+            <h2 class="text-4xl md:text-6xl font-bold mb-20 text-center">
+                <span class="gradient-text">Client</span> Testimonials
+            </h2>
+
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+                <div class="testimonial-card glass-container p-8 rounded-2xl">
+                    <div class="text-yellow-400 text-2xl mb-4">
+                        <i class="fas fa-quote-left"></i>
+                    </div>
+                    <p class="text-gray-300 mb-6">
+                        "Their team transformed our digital presence completely. The immersive experience they created increased our engagement by 300%."
+                    </p>
+                    <div class="flex items-center gap-4">
+                        <div class="w-12 h-12 rounded-full bg-gradient-to-r from-blue-500 to-purple-500"></div>
+                        <div>
+                            <h4 class="font-bold">Sarah Johnson</h4>
+                            <p class="text-sm text-gray-400">CEO, TechCorp</p>
+                        </div>
+                    </div>
+                </div>
+                <div class="testimonial-card glass-container p-8 rounded-2xl">
+                    <div class="text-yellow-400 text-2xl mb-4">
+                        <i class="fas fa-quote-left"></i>
+                    </div>
+                    <p class="text-gray-300 mb-6">
+                        "The VR solution they developed for our training program has been revolutionary. Our employees are more engaged and retain information better."
+                    </p>
+                    <div class="flex items-center gap-4">
+                        <div class="w-12 h-12 rounded-full bg-gradient-to-r from-purple-500 to-pink-500"></div>
+                        <div>
+                            <h4 class="font-bold">Michael Chen</h4>
+                            <p class="text-sm text-gray-400">CTO, LearnTech</p>
+                        </div>
+                    </div>
+                </div>
+                <div class="testimonial-card glass-container p-8 rounded-2xl">
+                    <div class="text-yellow-400 text-2xl mb-4">
+                        <i class="fas fa-quote-left"></i>
+                    </div>
+                    <p class="text-gray-300 mb-6">
+                        "Working with them was a game-changer for our brand. Their innovative approach to 3D web experiences set us apart from competitors."
+                    </p>
+                    <div class="flex items-center gap-4">
+                        <div class="w-12 h-12 rounded-full bg-gradient-to-r from-pink-500 to-blue-500"></div>
+                        <div>
+                            <h4 class="font-bold">Emma Rodriguez</h4>
+                            <p class="text-sm text-gray-400">Marketing Director, StyleHub</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
     <!-- Contact Section -->
     <section class="py-20 relative noise">
         <div class="container mx-auto px-6">
@@ -439,7 +661,7 @@
                     Ready to bring your vision to life? Get in touch with our team to discuss your next immersive project.
                 </p>
                 
-                <form class="grid grid-cols-1 md:grid-cols-2 gap-6 text-left">
+                <form class="grid grid-cols-1 md:grid-cols-2 gap-6 text-left glass-container p-8 rounded-2xl">
                     <div>
                         <label class="block text-gray-400 mb-2">Name</label>
                         <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">
@@ -649,10 +871,80 @@
             });
         };
         
+        // Initialize impact number counters
+        const initImpactCounters = () => {
+            const counters = document.querySelectorAll('.impact-number');
+            const speed = 200;
+            
+            counters.forEach(counter => {
+                const target = +counter.getAttribute('data-count');
+                const count = +counter.innerText;
+                const increment = target / speed;
+                
+                if (count < target) {
+                    counter.innerText = Math.ceil(count + increment);
+                    setTimeout(initImpactCounters, 1);
+                } else {
+                    counter.innerText = target;
+                }
+            });
+        };
+        
+        // Initialize floating grid animations
+        const initFloatingGrid = () => {
+            const floatingItems = document.querySelectorAll('.floating-item');
+            
+            floatingItems.forEach((item, index) => {
+                // Initial animation
+                gsap.from(item, {
+                    scrollTrigger: {
+                        trigger: item,
+                        start: "top 80%",
+                        toggleActions: "play none none none"
+                    },
+                    y: 50,
+                    opacity: 0,
+                    duration: 0.8,
+                    delay: index * 0.1,
+                    ease: "power2.out"
+                });
+                
+                // Hover animation
+                item.addEventListener('mousemove', (e) => {
+                    const x = e.clientX - item.getBoundingClientRect().left;
+                    const y = e.clientY - item.getBoundingClientRect().top;
+                    
+                    const centerX = item.offsetWidth / 2;
+                    const centerY = item.offsetHeight / 2;
+                    
+                    const moveX = (x - centerX) / 20;
+                    const moveY = (y - centerY) / 20;
+                    
+                    gsap.to(item, {
+                        x: moveX,
+                        y: moveY,
+                        rotateX: -moveY,
+                        rotateY: moveX,
+                        duration: 0.5,
+                        ease: "power2.out"
+                    });
+                });
+                
+                item.addEventListener('mouseleave', () => {
+                    gsap.to(item, {
+                        x: 0,
+                        y: 0,
+                        rotateX: 0,
+                        rotateY: 0,
+                        duration: 0.5,
+                        ease: "elastic.out(1, 0.3)"
+                    });
+                });
+            });
+        };
+        
         // Initialize scroll animations
         const initScrollAnimations = () => {
-            gsap.registerPlugin(ScrollTrigger);
-            
             // Animate sections on scroll
             gsap.utils.toArray('section').forEach((section, i) => {
                 if (i > 0) { // Skip hero section
@@ -701,6 +993,22 @@
                     ease: "power2.out"
                 });
             });
+            
+            // Animate testimonial cards
+            gsap.utils.toArray('.testimonial-card').forEach((card, i) => {
+                gsap.from(card, {
+                    scrollTrigger: {
+                        trigger: card,
+                        start: "top 80%",
+                        toggleActions: "play none none none"
+                    },
+                    opacity: 0,
+                    y: 50,
+                    duration: 0.8,
+                    delay: i * 0.1,
+                    ease: "power2.out"
+                });
+            });
         };
         
         // Initialize everything when DOM is loaded
@@ -709,6 +1017,8 @@
             initCursorFollower();
             initScrollProgress();
             initAudio();
+            initImpactCounters();
+            initFloatingGrid();
             initScrollAnimations();
             
             // Add click sound to buttons
@@ -730,6 +1040,21 @@
                     audio.play().catch(e => console.log("Sound play failed:", e));
                 });
             });
+            
+            // Start impact counters when in view
+            const impactSection = document.querySelector('.impact-number');
+            if (impactSection) {
+                const observer = new IntersectionObserver((entries) => {
+                    entries.forEach(entry => {
+                        if (entry.isIntersecting) {
+                            initImpactCounters();
+                            observer.unobserve(entry.target);
+                        }
+                    });
+                }, { threshold: 0.5 });
+                
+                observer.observe(impactSection);
+            }
         });
     </script>
 <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=GMA2/hero-ex" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>

prompts.txt

@@ -5,4 +5,5 @@ add this second section <div class="framer-13uxw2p" data-framer-name="shape " st
 add this now import {noopReturn as t, defaults as i, isEasingGenerator as e, isEasingList as s, interpolate as a} from /*"@motionone/utils"*/ 'blob:https://project-41greio8c1druf3s6mhc.framercanvas.com/9380b8e6-de74-40c1-ad3c-86d348965543'; import {cubicBezier as n, steps as r} from /*"@motionone/easing"*/ 'blob:https://project-41greio8c1druf3s6mhc.framercanvas.com/73c737b7-407c-4458-b349-21655a8ea152'; const o = {     ease: n(.25, .1, .25, 1),     "ease-in": n(.42, 0, 1, 1),     "ease-in-out": n(.42, 0, .58, 1),     "ease-out": n(0, 0, .58, 1) }; const h = /\((.*?)\)/; function getEasingFunction(i) {     if ("function" === typeof i)         return i;     if (Array.isArray(i))         return n(...i);     if (o[i])         return o[i];     if (i.startsWith("steps")) {         const t = h.exec(i);         if (t) {             const i = t[1].split(",");             return r(parseFloat(i[0]), i[1].trim())         }     }     return t } class Animation {     constructor(n, r=[0, 1], {easing: o, duration: h=i.duration, delay: u=i.delay, endDelay: l=i.endDelay, repeat: m=i.repeat, offset: c, direction: p="normal"}={}) {         this.startTime = null;         this.rate = 1;         this.t = 0;         this.cancelTimestamp = null;         this.easing = t;         this.duration = 0;         this.totalDuration = 0;         this.repeat = 0;         this.playState = "idle";         this.finished = new Promise(( (t, i) => {             this.resolve = t;             this.reject = i         }         ));         o = o || i.easing;         if (e(o)) {             const t = o.createAnimation(r, ( () => "0"), true);             o = t.easing;             void 0 !== t.keyframes && (r = t.keyframes);             void 0 !== t.duration && (h = t.duration)         }         this.repeat = m;         this.easing = s(o) ? t : getEasingFunction(o);         this.updateDuration(h);         const d = a(r, c, s(o) ? o.map(getEasingFunction) : t);         this.tick = t => {             var i;             u = u;             let e = 0;             e = void 0 !== this.pauseTime ? this.pauseTime : (t - this.startTime) * this.rate;             this.t = e;             e /= 1e3;             e = Math.max(e - u, 0);             "finished" === this.playState && void 0 === this.pauseTime && (e = this.totalDuration);             const s = e / this.duration;             let a = Math.floor(s);             let r = s % 1;             !r && s >= 1 && (r = 1);             1 === r && a--;             const o = a % 2;             ("reverse" === p || "alternate" === p && o || "alternate-reverse" === p && !o) && (r = 1 - r);             const h = e >= this.totalDuration ? 1 : Math.min(r, 1);             const m = d(this.easing(h));             n(m);             const c = void 0 === this.pauseTime && ("finished" === this.playState || e >= this.totalDuration + l);             if (c) {                 this.playState = "finished";                 null === (i = this.resolve) || void 0 === i ? void 0 : i.call(this, m)             } else                 "idle" !== this.playState && (this.frameRequestId = requestAnimationFrame(this.tick))         }         ;         this.play()     }     play() {         const t = performance.now();         this.playState = "running";         void 0 !== this.pauseTime ? this.startTime = t - this.pauseTime : this.startTime || (this.startTime = t);         this.cancelTimestamp = this.startTime;         this.pauseTime = void 0;         this.frameRequestId = requestAnimationFrame(this.tick)     }     pause() {         this.playState = "paused";         this.pauseTime = this.t     }     finish() {         this.playState = "finished";         this.tick(0)     }     stop() {         var t;         this.playState = "idle";         void 0 !== this.frameRequestId && cancelAnimationFrame(this.frameRequestId);         null === (t = this.reject) || void 0 === t ? void 0 : t.call(this, false)     }     cancel() {         this.stop();         this.tick(this.cancelTimestamp)     }     reverse() {         this.rate *= -1     }     commitStyles() {}     updateDuration(t) {         this.duration = t;         this.totalDuration = t * (this.repeat + 1)     }     get currentTime() {         return this.t     }     set currentTime(t) {         void 0 !== this.pauseTime || 0 === this.rate ? this.pauseTime = t : this.startTime = performance.now() - t / this.rate     }     get playbackRate() {         return this.rate     }     set playbackRate(t) {         this.rate = t     } } export {Animation, getEasingFunction};  //# sourceMappingURL=https://ga.jspm.io/npm:@motionone/[email protected]/dist/index.es.js.map //# sourceURL=https://ga.jspm.io/npm:@motionone/[email protected]/dist/index.es.js
 create another section and have the tech cards follow scroll and zoom out
 can you add more sections and add these elements https://www.madeful.de/
-can you now add some of these elements from this site, sound, immersive, 3D etc. https://kodemedia.com/immersive
+can you now add some of these elements from this site, sound, immersive, 3D etc. https://kodemedia.com/immersive
+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