تم را مدرن تر کن ومحتوا را افزایش بده محتوای خلاقانه ی سه بعدی اضافه کن

index.html

@@ -24,10 +24,13 @@
     
     <!-- Three.js for 3D elements -->
     <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/controls/OrbitControls.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/loaders/GLTFLoader.js"></script>
     
     <!-- GSAP for advanced animations -->
     <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/ScrollTrigger.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/ScrollToPlugin.min.js"></script>
     
     <!-- Custom styling -->
     <style>
@@ -108,6 +111,81 @@
             height: 100%;
             z-index: -1;
         }
+
+        .particle-network {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            z-index: -1;
+        }
+
+        .floating-3d {
+            transform-style: preserve-3d;
+            animation: float3d 6s ease-in-out infinite;
+        }
+
+        @keyframes float3d {
+            0%, 100% { transform: translate3d(0, 0, 0) rotate3d(1, 1, 1, 0deg); }
+            50% { transform: translate3d(0, -20px, 0) rotate3d(1, 1, 1, 5deg); }
+        }
+
+        .neon-glow {
+            box-shadow: 0 0 10px #6366f1, 0 0 20px #6366f1, 0 0 30px #6366f1;
+        }
+
+        .hologram-effect {
+            background: linear-gradient(45deg, transparent 30%, rgba(99, 102, 241, 0.1), rgba(245, 158, 11, 0.1);
+            backdrop-filter: blur(10px);
+            border: 1px solid rgba(255, 255, 255, 0.2);
+            position: relative;
+            overflow: hidden;
+        }
+
+        .hologram-effect::before {
+            content: '';
+            position: absolute;
+            top: -50%;
+            left: -50%;
+            width: 200%;
+            height: 200%;
+            background: conic-gradient(from 0deg, transparent, rgba(99, 102, 241, 0.5), transparent 70%);
+            animation: hologram 3s linear infinite;
+        }
+
+        @keyframes hologram {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+
+        .cyber-grid {
+            background-image: 
+                linear-gradient(rgba(99, 102, 241, 0.1) 1px, transparent 1px),
+                linear-gradient(90deg, rgba(99, 102, 241, 0.1) 1px, transparent 1px);
+            background-size: 50px 50px;
+        }
+
+        .matrix-rain {
+            position: relative;
+            overflow: hidden;
+        }
+
+        .matrix-rain::after {
+            content: '';
+            position: absolute;
+            top: -100%;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: linear-gradient(transparent 70%, rgba(99, 102, 241, 0.3);
+            animation: matrixFall 2s linear infinite;
+        }
+
+        @keyframes matrixFall {
+            0% { transform: translateY(-100%); }
+            100% { transform: translateY(100%); }
+        }
         
         .section-divider {
             height: 100px;
@@ -153,6 +231,7 @@
                     <a href="#services" class="font-medium hover:text-indigo-600 transition-colors">Services</a>
                     <a href="#team" class="font-medium hover:text-indigo-600 transition-colors">Team</a>
                     <a href="#projects" class="font-medium hover:text-indigo-600 transition-colors">Projects</a>
+                    <a href="#showcase" class="font-medium hover:text-indigo-600 transition-colors">3D Showcase</a>
                     <a href="#contact" class="font-medium hover:text-indigo-600 transition-colors">Contact</a>
                 </div>
                 
@@ -166,9 +245,10 @@
     <!-- Hero Section with 3D Background -->
     <section id="home" class="relative min-h-screen flex items-center justify-center overflow-hidden">
         <div id="three-container"></div>
+        <div class="particle-network"></div>
         <div class="container mx-auto px-4 text-center z-10">
-            <h1 class="text-5xl md:text-7xl font-bold mb-6">
-                <span class="text-gradient">SuperNova</span>
+            <h1 class="text-5xl md:text-7xl font-bold mb-6 floating-3d">
+                <span class="text-gradient neon-glow">SuperNova</span>
             </h1>
             <p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto text-gray-600">
                 We transform complex ideas into <span class="font-semibold text-indigo-600">stellar digital experiences</span> that push the boundaries of innovation
@@ -177,7 +257,7 @@
                 Elite Programming Collective
             </div>
             <div class="flex flex-col sm:flex-row gap-4 justify-center">
-                <button class="px-8 py-3 bg-indigo-600 text-white rounded-full font-medium hover:bg-indigo-700 transition-colors shadow-lg">
+                <button class="px-8 py-3 bg-indigo-600 text-white rounded-full font-medium hover:bg-indigo-700 transition-colors shadow-lg neon-glow">
                     Explore Our Work
                 </button>
                 <button class="px-8 py-3 border-2 border-indigo-600 text-indigo-600 rounded-full font-medium hover:bg-indigo-50 transition-colors">
@@ -186,6 +266,19 @@
             </div>
         </div>
         
+        <!-- Interactive 3D Elements -->
+        <div class="absolute top-20 right-10 w-32 h-32 floating-3d">
+            <div class="w-full h-full bg-gradient-to-r from-indigo-500 to-purple-600 rounded-full flex items-center justify-center neon-glow">
+                <i data-feather="cpu" class="text-white text-2xl"></i>
+            </div>
+        </div>
+        
+        <div class="absolute bottom-32 left-10 w-24 h-24 floating-3d" style="animation-delay: 1s">
+                <div class="w-full h-full bg-gradient-to-r from-amber-500 to-orange-600 rounded-full flex items-center justify-center neon-glow">
+                <i data-feather="zap" class="text-white text-xl"></i>
+            </div>
+        </div>
+        
         <div class="absolute bottom-10 left-1/2 transform -translate-x-1/2">
             <div class="floating">
                 <i data-feather="chevron-down" class="text-gray-400"></i>
@@ -193,6 +286,82 @@
         </div>
     </section>
 
+    <!-- Interactive 3D Showcase Section -->
+    <section id="showcase" class="py-20 bg-gradient-to-br from-gray-900 via-purple-900 to-indigo-900 text-white relative overflow-hidden">
+        <div class="cyber-grid absolute inset-0"></div>
+        <div class="container mx-auto px-4 relative z-10">
+            <div class="text-center mb-16">
+                <h2 class="text-4xl font-bold mb-4">3D Interactive Showcase</h2>
+                <p class="text-xl max-w-2xl mx-auto">Experience our capabilities through immersive 3D demonstrations</p>
+        </div>
+        
+        <div class="max-w-6xl mx-auto">
+            <div class="grid md:grid-cols-2 gap-12 items-center">
+                <div class="hologram-effect rounded-2xl p-8">
+                <div id="showcase-container" class="w-full h-96 bg-black/30 rounded-xl flex items-center justify-center">
+                    <div class="text-center">
+                        <i data-feather="cube" class="w-16 h-16 mx-auto mb-4 text-indigo-400"></i>
+                        <h3 class="text-2xl font-bold mb-4">Interactive 3D Models</h3>
+                        <p class="text-gray-300 mb-6">Drag to rotate, scroll to zoom</h3>
+                        <p class="text-sm text-gray-400">Powered by Three.js</p>
+                    </div>
+                </div>
+                
+                <div>
+                    <h3 class="text-3xl font-bold mb-6">Real-time 3D Visualization</h3>
+                    <p class="text-lg text-gray-300 mb-6">
+                    Explore our projects in stunning 3D detail. Each model showcases the technical excellence and creative vision that defines SuperNova.
+                    </p>
+                    <div class="grid grid-cols-2 gap-4">
+                        <div class="bg-white/10 rounded-lg p-4 backdrop-blur-sm">
+                        <h4 class="font-bold text-lg mb-3">Features:</h4>
+                        <ul class="space-y-2 text-gray-300">
+                            <li class="flex items-center">
+                                <i data-feather="rotate-cw" class="w-4 h-4 mr-2 text-indigo-400"></i>
+                                <span>360° Product Views</span>
+                            </li>
+                            <li class="flex items-center">
+                                <i data-feather="zoom-in" class="w-4 h-4 mr-2 text-amber-400"></i>
+                                <span>Interactive Prototypes</span>
+                            </li>
+                            <li class="flex items-center">
+                                <i data-feather="layers" class="w-4 h-4 mr-2 text-green-400"></i>
+                                <span>Real-time Animations</span>
+                            </li>
+                            <li class="flex items-center">
+                                <i data-feather="code" class="w-4 h-4 mr-2 text-purple-400"></i>
+                                <span>WebGL Powered</span>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+            
+            <div class="grid md:grid-cols-3 gap-6 mt-12">
+                        <div class="bg-white/5 rounded-xl p-6 backdrop-blur-sm border border-white/10">
+                        <div class="w-12 h-12 rounded-full bg-indigo-500/20 flex items-center justify-center mr-4">
+                            <i data-feather="eye" class="text-indigo-400"></i>
+                        <h4 class="font-bold mt-3">Architecture Visualization</h4>
+                        <p class="text-sm text-gray-400 mt-2">3D building models with interactive elements</p>
+                        </div>
+                        <div class="bg-white/5 rounded-xl p-6 backdrop-blur-sm border border-white/10">
+                        <div class="w-12 h-12 rounded-full bg-amber-500/20 flex items-center justify-center mr-4">
+                            <i data-feather="box" class="text-amber-400"></i>
+                        <h4 class="font-bold mt-3">Product Design</h4>
+                        <p class="text-sm text-gray-400 mt-2">Detailed 3D product showcases</p>
+                        </div>
+                        <div class="bg-white/5 rounded-xl p-6 backdrop-blur-sm border border-white/10">
+                        <div class="w-12 h-12 rounded-full bg-green-500/20 flex items-center justify-center mr-4">
+                            <i data-feather="globe" class="text-green-400"></i>
+                        <h4 class="font-bold mt-3">Data Visualization</h4>
+                        <p class="text-sm text-gray-400 mt-2">Interactive data in 3D space</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
     <!-- About Section -->
     <section id="about" class="py-20 bg-white">
         <div class="container mx-auto px-4">
@@ -295,8 +464,8 @@
         </div>
     </section>
 
-    <!-- Services Section -->
-    <section id="services" class="py-20 bg-gray-50">
+    <!-- Services Section with 3D Icons -->
+    <section id="services" class="py-20 bg-gradient-to-tr from-indigo-50 via-white to-amber-50">
         <div class="section-divider"></div>
         <div class="container mx-auto px-4 -mt-20">
             <div class="text-center mb-16">
@@ -306,9 +475,9 @@
             
             <div class="grid md:grid-cols-3 gap-8">
                 <!-- Service 1 -->
-                <div class="bg-white rounded-2xl p-8 shadow-lg card-hover">
-                    <div class="w-16 h-16 rounded-full bg-indigo-100 flex items-center justify-center mb-6">
-                        <i data-feather="globe" class="text-indigo-600 text-2xl"></i>
+                <div class="bg-white/80 backdrop-blur-sm rounded-2xl p-8 shadow-xl card-hover floating-3d">
+                    <div class="w-20 h-20 rounded-full bg-gradient-to-r from-indigo-500 to-purple-600 flex items-center justify-center mb-6 neon-glow">
+                        <i data-feather="globe" class="text-white text-3xl"></i>
                     </div>
                     <h3 class="text-2xl font-bold mb-4">Web Development</h3>
                     <p class="text-gray-600 mb-6">From responsive websites to complex web applications, we build digital experiences that engage users and drive results.</p>
@@ -329,9 +498,9 @@
                 </div>
                 
                 <!-- Service 2 -->
-                <div class="bg-white rounded-2xl p-8 shadow-lg card-hover">
-                    <div class="w-16 h-16 rounded-full bg-amber-100 flex items-center justify-center mb-6">
-                        <i data-feather="smartphone" class="text-amber-600 text-2xl"></i>
+                <div class="bg-white/80 backdrop-blur-sm rounded-2xl p-8 shadow-xl card-hover floating-3d" style="animation-delay: 0.5s">
+                    <div class="w-20 h-20 rounded-full bg-gradient-to-r from-amber-500 to-orange-600 flex items-center justify-center mb-6 neon-glow">
+                        <i data-feather="smartphone" class="text-white text-3xl"></i>
                     </div>
                     <h3 class="text-2xl font-bold mb-4">Mobile Development</h3>
                     <p class="text-gray-600 mb-6">Native and cross-platform mobile applications that deliver seamless experiences across iOS and Android devices.</p>
@@ -352,9 +521,9 @@
                 </div>
                 
                 <!-- Service 3 -->
-                <div class="bg-white rounded-2xl p-8 shadow-lg card-hover">
-                    <div class="w-16 h-16 rounded-full bg-purple-100 flex items-center justify-center mb-6">
-                        <i data-feather="database" class="text-purple-600 text-2xl"></i>
+                <div class="bg-white/80 backdrop-blur-sm rounded-2xl p-8 shadow-xl card-hover floating-3d" style="animation-delay: 1s">
+                    <div class="w-20 h-20 rounded-full bg-gradient-to-r from-purple-500 to-pink-600 flex items-center justify-center mb-6 neon-glow">
+                        <i data-feather="database" class="text-white text-3xl"></i>
                     </div>
                     <h3 class="text-2xl font-bold mb-4">Backend & API</h3>
                     <p class="text-gray-600 mb-6">Robust server architecture, database design, and API development to power your applications with reliability and scale.</p>
@@ -850,43 +1019,120 @@
         // Initialize Feather Icons
         feather.replace();
         
-        // Initialize Three.js 3D background
+        // Advanced Three.js 3D Scene
         document.addEventListener('DOMContentLoaded', function() {
-            // Three.js scene setup for hero section
+            // Main Hero Scene
             const scene = new THREE.Scene();
             const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
-            const renderer = new THREE.WebGLRenderer({ alpha: true });
+            const renderer = new THREE.WebGLRenderer({ 
+                alpha: true,
+                antialias: true
+            });
             renderer.setSize(window.innerWidth, window.innerHeight);
+            renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
             document.getElementById('three-container').appendChild(renderer.domElement);
             
-            // Create stars
+            // Enhanced stars with different sizes and colors
             const starGeometry = new THREE.BufferGeometry();
-            const starCount = 5000;
+            const starCount = 8000;
             const positions = new Float32Array(starCount * 3);
+            const colors = new Float32Array(starCount * 3);
+            const sizes = new Float32Array(starCount);
             
-            for (let i = 0; i < starCount * 3; i++) {
-                positions[i] = (Math.random() - 0.5) * 2000;
+            const color = new THREE.Color();
+            
+            for (let i = 0; i < starCount; i++) {
+                const i3 = i * 3;
+                positions[i3] = (Math.random() - 0.5) * 3000;
+                positions[i3 + 1] = (Math.random() - 0.5) * 3000;
+                positions[i3 + 2] = (Math.random() - 0.5) * 3000;
+                
+                // Color variation
+                const hue = Math.random() * 0.1 + 0.6; // Blue to purple range
+                color.setHSL(hue, 0.8, 0.5 + Math.random() * 0.5);
+                colors[i3] = color.r;
+                colors[i3 + 1] = color.g;
+                colors[i3 + 2] = color.b;
+                
+                // Size variation
+                sizes[i] = Math.random() * 3 + 1;
             }
             
             starGeometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
+            starGeometry.setAttribute('color', new THREE.BufferAttribute(colors, 3));
+            starGeometry.setAttribute('size', new THREE.BufferAttribute(sizes, 1));
             
             const starMaterial = new THREE.PointsMaterial({
-                color: 0xffffff,
                 size: 2,
-                sizeAttenuation: true
+                sizeAttenuation: true,
+                vertexColors: true,
+                transparent: true
             });
             
             const stars = new THREE.Points(starGeometry, starMaterial);
             scene.add(stars);
             
+            // Add floating geometric shapes
+            const geometry = new THREE.IcosahedronGeometry(50, 0);
+            const material = new THREE.MeshPhongMaterial({
+                    color: 0x6366f1,
+                    transparent: true,
+                    opacity: 0.7
+                });
+            const mesh = new THREE.Mesh(geometry, material);
+            mesh.position.set(100, 100, -200);
+            scene.add(mesh);
+            
+            // Add ambient light
+            const ambientLight = new THREE.AmbientLight(0x404040, 0.4);
+            scene.add(ambientLight);
+            
+            // Add directional light
+            const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
+            directionalLight.position.set(1, 1, 1);
+            scene.add(directionalLight);
+            
             camera.position.z = 1;
             
-            // Animation
+            // Particle Network Animation
+            const particleScene = new THREE.Scene();
+            const particleCamera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
+            
+            // Create particle system
+            const particleCount = 1500;
+            const particleGeometry = new THREE.BufferGeometry();
+            const particlePositions = new Float32Array(particleCount * 3);
+            
+            for (let i = 0; i < particleCount * 3; i++) {
+                particlePositions[i] = (Math.random() - 0.5) * 2000;
+            }
+            
+            particleGeometry.setAttribute('position', new THREE.BufferAttribute(particlePositions, 3));
+            
+            const particleMaterial = new THREE.PointsMaterial({
+                color: 0x6366f1,
+                size: 2,
+                transparent: true,
+                opacity: 0.6
+                });
+            
+            const particles = new THREE.Points(particleGeometry, particleMaterial);
+            particleScene.add(particles);
+            
+            // Animation function
             function animate() {
                 requestAnimationFrame(animate);
                 
-                stars.rotation.x += 0.0001;
-                stars.rotation.y += 0.0002;
+                // Rotate stars
+                stars.rotation.x += 0.0002;
+                stars.rotation.y += 0.0003;
+                
+                // Animate floating mesh
+                mesh.rotation.x += 0.005;
+                mesh.rotation.y += 0.008;
+                
+                // Animate particles
+                particles.rotation.y += 0.001;
                 
                 renderer.render(scene, camera);
             }
@@ -901,40 +1147,91 @@
             });
             
             // GSAP animations for scroll-triggered elements
-            gsap.registerPlugin(ScrollTrigger);
+            gsap.registerPlugin(ScrollTrigger, ScrollToPlugin);
             
-            // Animate elements on scroll
+            // Enhanced scroll animations
             gsap.utils.toArray('.card-hover').forEach(card => {
                 gsap.from(card, {
                     scrollTrigger: {
                         trigger: card,
-                        start: "top 80%",
-                        end: "bottom 20%",
+                        start: "top 85%",
+                        end: "bottom 15%",
                         toggleActions: "play none none reverse"
                     },
-                    y: 50,
+                    y: 80,
                     opacity: 0,
-                    duration: 1,
-                    ease: "power2.out"
+                    duration: 1.2,
+                    ease: "power3.out"
                 });
             });
             
-            // Animate stats counters
-            const counters = document.querySelectorAll('.text-4xl');
-            counters.forEach(counter => {
-                const target = parseInt(counter.textContent);
-                gsap.to(counter, {
-                    scrollTrigger: {
-                        trigger: counter,
-                        start: "top 80%",
-                        toggleActions: "play none none reverse"
-                    },
-                    innerText: target,
-                    duration: 2,
-                    snap: { innerText: 1 },
-                    stagger: 1
+            // 3D Showcase Scene
+            const showcaseScene = new THREE.Scene();
+            const showcaseCamera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
+            const showcaseRenderer = new THREE.WebGLRenderer({ 
+                alpha: true,
+                antialias: true
+            });
+            
+            if (document.getElementById('showcase-container')) {
+                showcaseRenderer.setSize(document.getElementById('showcase-container').offsetWidth, 
+                document.getElementById('showcase-container').offsetHeight
+                );
+                document.getElementById('showcase-container').appendChild(showcaseRenderer.domElement);
+                
+                // Add showcase objects
+                const showcaseGeometry = new THREE.TorusKnotGeometry(10, 3, 100, 16);
+                const showcaseMaterial = new THREE.MeshPhysicalMaterial({
+                    color: 0x6366f1,
+                    metalness: 0.8,
+                    roughness: 0.2,
+                    clearcoat: 1,
+                    clearcoatRoughness: 0.1
                 });
+                const showcaseMesh = new THREE.Mesh(showcaseGeometry, showcaseMaterial);
+                showcaseScene.add(showcaseMesh);
+                
+                // Add showcase lighting
+                const showcaseLight = new THREE.DirectionalLight(0xffffff, 1);
+                showcaseLight.position.set(5, 5, 5);
+                showcaseScene.add(showcaseLight);
+                
+                showcaseCamera.position.z = 30;
+                
+                function animateShowcase() {
+                    requestAnimationFrame(animateShowcase);
+                    showcaseMesh.rotation.x += 0.01;
+                    showcaseMesh.rotation.y += 0.005;
+                
+                showcaseRenderer.render(showcaseScene, showcaseCamera);
+            }
+            
+            // Interactive cursor effects
+            document.addEventListener('mousemove', function(e) {
+                const mouseX = e.clientX / window.innerWidth - 0.5;
+                const mouseY = e.clientY / window.innerHeight - 0.5;
+                
+                if (mesh) {
+                    mesh.rotation.y = mouseX * 0.5;
+                    mesh.rotation.x = mouseY * 0.5;
+                }
             });
+            
+            // Enhanced typewriter effect
+            const typewriterElement = document.querySelector('.typewriter');
+            if (typewriterElement) {
+                const text = typewriterElement.textContent;
+                typewriterElement.textContent = '';
+                let i = 0;
+                
+                function typeWriter() {
+                    if (i < text.length) {
+                        typewriterElement.textContent += text.charAt(i);
+                    i++;
+                    setTimeout(typeWriter, 100);
+                }
+                typeWriter();
+            }
         });
     </script>
 </body>