Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>CoderzPark Technologies - Immersive 3D Experience</title> | |
| <link rel="icon" type="image/x-icon" href="https://coderzpark.com/assets/Logo3.png"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <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.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/loaders/GLTFLoader.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: '#00ffff', | |
| secondary: '#ff00ff', | |
| accent: '#ffff00', | |
| neon: '#00ff00' | |
| }, | |
| animation: { | |
| 'glow': 'glow 2s ease-in-out infinite alternate', | |
| 'float-3d': 'float3d 6s ease-in-out infinite', | |
| 'rotate-3d': 'rotate3d 20s linear infinite', | |
| 'pulse-3d': 'pulse3d 3s ease-in-out infinite', | |
| 'slide-in-3d': 'slideIn3d 1s ease-out', | |
| 'fade-up-3d': 'fadeUp3d 1s ease-out' | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;800;900&display=swap'); | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: 'Orbitron', monospace; | |
| background: radial-gradient(ellipse at center, #0a0e27 0%, #000000 100%); | |
| color: #ffffff; | |
| overflow-x: hidden; | |
| perspective: 1000px; | |
| } | |
| #threejs-container { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| z-index: -1; | |
| } | |
| .section-3d { | |
| position: relative; | |
| z-index: 10; | |
| padding: 150px 0; | |
| min-height: 100vh; | |
| display: flex; | |
| align-items: center; | |
| transform-style: preserve-3d; | |
| } | |
| .card-3d { | |
| background: linear-gradient(135deg, rgba(0, 255, 255, 0.1), rgba(255, 0, 255, 0.1)); | |
| backdrop-filter: blur(20px); | |
| border: 2px solid transparent; | |
| background-clip: padding-box; | |
| border-radius: 30px; | |
| transform-style: preserve-3d; | |
| transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); | |
| box-shadow: | |
| 0 20px 60px rgba(0, 255, 255, 0.3), | |
| 0 0 100px rgba(255, 0, 255, 0.2), | |
| inset 0 0 30px rgba(255, 255, 255, 0.1); | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .card-3d::before { | |
| content: ''; | |
| position: absolute; | |
| top: -2px; | |
| left: -2px; | |
| right: -2px; | |
| bottom: -2px; | |
| background: linear-gradient(45deg, #00ffff, #ff00ff, #ffff00, #00ff00); | |
| border-radius: 30px; | |
| z-index: -1; | |
| opacity: 0; | |
| transition: opacity 0.5s ease; | |
| animation: borderRotate 3s linear infinite; | |
| } | |
| .card-3d:hover::before { | |
| opacity: 1; | |
| } | |
| .card-3d:hover { | |
| transform: translateY(-20px) rotateX(10deg) rotateY(10deg) scale(1.05); | |
| box-shadow: | |
| 0 40px 80px rgba(0, 255, 255, 0.5), | |
| 0 0 150px rgba(255, 0, 255, 0.4), | |
| inset 0 0 50px rgba(255, 255, 255, 0.2); | |
| } | |
| .glass-button { | |
| background: linear-gradient(135deg, rgba(0, 255, 255, 0.2), rgba(255, 0, 255, 0.2)); | |
| backdrop-filter: blur(20px); | |
| border: 2px solid rgba(255, 255, 255, 0.3); | |
| border-radius: 50px; | |
| transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); | |
| position: relative; | |
| overflow: hidden; | |
| transform-style: preserve-3d; | |
| } | |
| .glass-button::before { | |
| content: ''; | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| width: 0; | |
| height: 0; | |
| background: radial-gradient(circle, rgba(255, 255, 255, 0.3), transparent); | |
| transform: translate(-50%, -50%); | |
| transition: width 0.6s, height 0.6s; | |
| } | |
| .glass-button:hover::before { | |
| width: 300px; | |
| height: 300px; | |
| } | |
| .glass-button:hover { | |
| transform: translateY(-5px) translateZ(20px) rotateX(-5deg); | |
| box-shadow: | |
| 0 20px 40px rgba(0, 255, 255, 0.4), | |
| 0 0 60px rgba(255, 0, 255, 0.3), | |
| inset 0 0 20px rgba(255, 255, 255, 0.2); | |
| border-color: #00ffff; | |
| } | |
| .neon-text { | |
| text-shadow: | |
| 0 0 10px #00ffff, | |
| 0 0 20px #00ffff, | |
| 0 0 30px #00ffff, | |
| 0 0 40px #ff00ff, | |
| 0 0 50px #ff00ff, | |
| 0 0 60px #ff00ff; | |
| animation: glow 2s ease-in-out infinite alternate; | |
| } | |
| .floating-element { | |
| animation: float3d 8s ease-in-out infinite; | |
| transform-style: preserve-3d; | |
| } | |
| .rotating-element { | |
| animation: rotate3d 15s linear infinite; | |
| transform-style: preserve-3d; | |
| } | |
| .hexagon-bg { | |
| background-image: | |
| linear-gradient(30deg, #0a0e27 12%, transparent 12.5%, transparent 87%, #0a0e27 87.5%, #0a0e27), | |
| linear-gradient(150deg, #0a0e27 12%, transparent 12.5%, transparent 87%, #0a0e27 87.5%, #0a0e27), | |
| linear-gradient(30deg, #0a0e27 12%, transparent 12.5%, transparent 87%, #0a0e27 87.5%, #0a0e27), | |
| linear-gradient(150deg, #0a0e27 12%, transparent 12.5%, transparent 87%, #0a0e27 87.5%, #0a0e27), | |
| linear-gradient(60deg, #0a0e27 25%, transparent 25.5%, transparent 75%, #0a0e27 75%, #0a0e27), | |
| linear-gradient(60deg, #0a0e27 25%, transparent 25.5%, transparent 75%, #0a0e27 75%, #0a0e27); | |
| background-size: 80px 140px; | |
| background-position: 0 0, 0 0, 40px 70px, 40px 70px, 0 0, 40px 70px; | |
| } | |
| .cyber-grid { | |
| background-image: | |
| linear-gradient(rgba(0, 255, 255, 0.1) 1px, transparent 1px), | |
| linear-gradient(90deg, rgba(0, 255, 255, 0.1) 1px, transparent 1px); | |
| background-size: 50px 50px; | |
| animation: gridMove 10s linear infinite; | |
| } | |
| .text-3d { | |
| transform: translateZ(50px); | |
| text-shadow: | |
| 0 1px 0 #ccc, | |
| 0 2px 0 #c9c9c9, | |
| 0 3px 0 #bbb, | |
| 0 4px 0 #b9b9b9, | |
| 0 5px 0 #aaa, | |
| 0 6px 1px rgba(0,0,0,.1), | |
| 0 0 5px rgba(0,0,0,.1), | |
| 0 1px 3px rgba(0,0,0,.3), | |
| 0 3px 5px rgba(0,0,0,.2), | |
| 0 5px 10px rgba(0,0,0,.25), | |
| 0 10px 10px rgba(0,0,0,.2), | |
| 0 20px 20px rgba(0,0,0,.15); | |
| } | |
| @keyframes glow { | |
| from { filter: brightness(1) drop-shadow(0 0 20px #00ffff); } | |
| to { filter: brightness(1.2) drop-shadow(0 0 30px #ff00ff); } | |
| } | |
| @keyframes float3d { | |
| 0%, 100% { transform: translateY(0) rotateX(0) rotateY(0); } | |
| 25% { transform: translateY(-30px) rotateX(5deg) rotateY(5deg); } | |
| 50% { transform: translateY(-20px) rotateX(-5deg) rotateY(-5deg); } | |
| 75% { transform: translateY(-40px) rotateX(3deg) rotateY(-3deg); } | |
| } | |
| @keyframes rotate3d { | |
| from { transform: rotateX(0) rotateY(0) rotateZ(0); } | |
| to { transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg); } | |
| } | |
| @keyframes borderRotate { | |
| 0% { transform: rotate(0deg); } | |
| 100% { transform: rotate(360deg); } | |
| } | |
| @keyframes gridMove { | |
| 0% { background-position: 0 0; } | |
| 100% { background-position: 50px 50px; } | |
| } | |
| @keyframes slideIn3d { | |
| from { | |
| opacity: 0; | |
| transform: translateX(-100px) rotateY(-90deg); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateX(0) rotateY(0); | |
| } | |
| } | |
| @keyframes fadeUp3d { | |
| from { | |
| opacity: 0; | |
| transform: translateY(50px) translateZ(-100px) rotateX(45deg); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0) translateZ(0) rotateX(0); | |
| } | |
| } | |
| .perspective-container { | |
| perspective: 1000px; | |
| transform-style: preserve-3d; | |
| } | |
| .transform-3d-hover { | |
| transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); | |
| transform-style: preserve-3d; | |
| } | |
| .transform-3d-hover:hover { | |
| transform: translateZ(50px) rotateX(10deg) rotateY(10deg); | |
| } | |
| .hologram { | |
| position: relative; | |
| background: linear-gradient(45deg, transparent 30%, rgba(0, 255, 255, 0.1) 50%, transparent 70%); | |
| background-size: 200% 200%; | |
| animation: hologram 3s ease-in-out infinite; | |
| } | |
| @keyframes hologram { | |
| 0% { background-position: 200% 200%; } | |
| 100% { background-position: -200% -200%; } | |
| } | |
| .loading-screen { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: #000; | |
| z-index: 9999; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| transition: opacity 1s ease-out; | |
| } | |
| .loader-3d { | |
| width: 100px; | |
| height: 100px; | |
| position: relative; | |
| transform-style: preserve-3d; | |
| animation: rotate3d 2s linear infinite; | |
| } | |
| .loader-face { | |
| position: absolute; | |
| width: 100px; | |
| height: 100px; | |
| border: 2px solid #00ffff; | |
| background: rgba(0, 255, 255, 0.1); | |
| } | |
| .loader-face:nth-child(1) { transform: translateZ(50px); } | |
| .loader-face:nth-child(2) { transform: rotateY(90deg) translateZ(50px); } | |
| .loader-face:nth-child(3) { transform: rotateY(180deg) translateZ(50px); } | |
| .loader-face:nth-child(4) { transform: rotateY(-90deg) translateZ(50px); } | |
| .loader-face:nth-child(5) { transform: rotateX(90deg) translateZ(50px); } | |
| .loader-face:nth-child(6) { transform: rotateX(-90deg) translateZ(50px); } | |
| </style> | |
| </head> | |
| <body class="bg-black text-white"> | |
| <!-- Loading Screen --> | |
| <div id="loadingScreen" class="loading-screen"> | |
| <div class="loader-3d"> | |
| <div class="loader-face"></div> | |
| <div class="loader-face"></div> | |
| <div class="loader-face"></div> | |
| <div class="loader-face"></div> | |
| <div class="loader-face"></div> | |
| <div class="loader-face"></div> | |
| </div> | |
| </div> | |
| <!-- Three.js Canvas --> | |
| <div id="threejs-container"></div> | |
| <!-- Animated Background Grid --> | |
| <div class="fixed inset-0 cyber-grid opacity-20 pointer-events-none"></div> | |
| <!-- 3D Navigation Header --> | |
| <header class="fixed top-0 w-full z-50 py-6 transform-3d-hover"> | |
| <div class="container mx-auto px-4"> | |
| <div class="glass-button p-6 flex justify-between items-center hologram"> | |
| <div class="flex items-center transform-3d-hover"> | |
| <div class="relative"> | |
| <img src="https://coderzpark.com/assets/Logo3.png" alt="CoderzPark Logo" class="h-12 floating-element"> | |
| <div class="absolute inset-0 w-12 h-12 bg-primary rounded-full blur-xl opacity-50 animate-pulse"></div> | |
| </div> | |
| <span class="ml-4 text-2xl font-black neon-text tracking-wider">CODERZPARK</span> | |
| </div> | |
| <nav class="hidden lg:flex space-x-12"> | |
| <a href="#home" class="relative group py-2"> | |
| <span class="text-lg font-semibold hover:text-primary transition-all duration-300 group-hover:translate-z-20">HOME</span> | |
| <div class="absolute bottom-0 left-0 w-0 h-0.5 bg-primary transition-all duration-300 group-hover:w-full"></div> | |
| </a> | |
| <a href="#about" class="relative group py-2"> | |
| <span class="text-lg font-semibold hover:text-secondary transition-all duration-300">ABOUT</span> | |
| <div class="absolute bottom-0 left-0 w-0 h-0.5 bg-secondary transition-all duration-300 group-hover:w-full"></div> | |
| </a> | |
| <a href="#services" class="relative group py-2"> | |
| <span class="text-lg font-semibold hover:text-accent transition-all duration-300">SERVICES</span> | |
| <div class="absolute bottom-0 left-0 w-0 h-0.5 bg-accent transition-all duration-300 group-hover:w-full"></div> | |
| </a> | |
| <a href="#portfolio" class="relative group py-2"> | |
| <span class="text-lg font-semibold hover:text-neon transition-all duration-300">PORTFOLIO</span> | |
| <div class="absolute bottom-0 left-0 w-0 h-0.5 bg-neon transition-all duration-300 group-hover:w-full"></div> | |
| </a> | |
| <a href="#contact" class="relative group py-2"> | |
| <span class="text-lg font-semibold hover:text-primary transition-all duration-300">CONTACT</span> | |
| <div class="absolute bottom-0 left-0 w-0 h-0.5 bg-primary transition-all duration-300 group-hover:w-full"></div> | |
| </a> | |
| </nav> | |
| <div class="flex items-center space-x-4"> | |
| <button class="glass-button px-8 py-3 rounded-full font-bold text-lg hover:bg-primary hover:scale-110 transition-all duration-300 transform-3d-hover"> | |
| <span class="flex items-center"> | |
| <i data-feather="zap" class="w-5 h-5 mr-2"></i> | |
| GET STARTED | |
| </span> | |
| </button> | |
| <button id="menuToggle" class="lg:hidden glass-button p-3 rounded-full"> | |
| <i data-feather="menu" class="w-6 h-6"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- 3D Hero Section --> | |
| <section id="home" class="section-3d"> | |
| <div class="container mx-auto px-4"> | |
| <div class="max-w-6xl mx-auto text-center perspective-container"> | |
| <div class="floating-element"> | |
| <div class="inline-block"> | |
| <h1 class="text-6xl md:text-8xl lg:text-9xl font-black mb-8 neon-text tracking-tighter transform-3d-hover"> | |
| <span class="block bg-gradient-to-r from-primary via-secondary to-accent bg-clip-text text-transparent animate-pulse">SOFTWARE</span> | |
| <span class="block bg-gradient-to-r from-accent via-neon to-primary bg-clip-text text-transparent animate-pulse" style="animation-delay: 0.5s;">DEVELOPMENT</span> | |
| </h1> | |
| <div class="absolute top-0 left-0 w-full h-full blur-3xl opacity-50"> | |
| <h1 class="text-6xl md:text-8xl lg:text-9xl font-black neon-text tracking-tighter"> | |
| <span class="block">SOFTWARE</span> | |
| <span class="block">DEVELOPMENT</span> | |
| </h1> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="text-xl md:text-3xl lg:text-4xl mb-12 text-cyan-300 max-w-4xl mx-auto leading-relaxed transform-3d-hover"> | |
| <span class="font-semibold">CRAFTING IMMERSIVE</span><br> | |
| <span class="text-2xl md:text-4xl lg:text-5xl font-black neon-text">3D DIGITAL EXPERIENCES</span><br> | |
| <span class="text-lg md:text-xl">WITH CUTTING-EDGE TECHNOLOGY</span> | |
| </p> | |
| <div class="flex flex-col sm:flex-row justify-center gap-6 mb-16"> | |
| <button class="glass-button px-12 py-6 rounded-full text-xl font-bold hover:bg-primary hover:scale-110 transition-all duration-500 transform-3d-hover group"> | |
| <span class="flex items-center"> | |
| <i data-feather="rocket" class="w-6 h-6 mr-3 group-hover:animate-bounce"></i> | |
| EXPLORE WORK | |
| </span> | |
| </button> | |
| <button class="glass-button px-12 py-6 rounded-full text-xl font-bold border-2 border-primary hover:bg-primary hover:scale-110 transition-all duration-500 transform-3d-hover group"> | |
| <span class="flex items-center"> | |
| <i data-feather="message-circle" class="w-6 h-6 mr-3 group-hover:animate-pulse"></i> | |
| CONTACT US | |
| </span> | |
| </button> | |
| </div> | |
| <!-- 3D Stats Cards --> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-6 mt-20"> | |
| <div class="card-3d p-6 transform-3d-hover"> | |
| <div class="text-4xl md:text-5xl font-black text-primary mb-2 rotating-element">500+</div> | |
| <div class="text-sm md:text-base text-cyan-300">PROJECTS</div> | |
| </div> | |
| <div class="card-3d p-6 transform-3d-hover" style="animation-delay: 0.2s;"> | |
| <div class="text-4xl md:text-5xl font-black text-secondary mb-2 rotating-element">300+</div> | |
| <div class="text-sm md:text-base text-pink-300">CLIENTS</div> | |
| </div> | |
| <div class="card-3d p-6 transform-3d-hover" style="animation-delay: 0.4s;"> | |
| <div class="text-4xl md:text-5xl font-black text-accent mb-2 rotating-element">50+</div> | |
| <div class="text-sm md:text-base text-yellow-300">EXPERTS</div> | |
| </div> | |
| <div class="card-3d p-6 transform-3d-hover" style="animation-delay: 0.6s;"> | |
| <div class="text-4xl md:text-5xl font-black text-neon mb-2 rotating-element">10+</div> | |
| <div class="text-sm md:text-base text-green-300">YEARS</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- 3D About Section --> | |
| <section id="about" class="section-3d hexagon-bg"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-20"> | |
| <h2 class="text-5xl md:text-7xl font-black mb-8 neon-text transform-3d-hover">ABOUT US</h2> | |
| <div class="w-32 h-1 bg-gradient-to-r from-primary via-secondary to-accent mx-auto mb-8 rounded-full animate-pulse"></div> | |
| <p class="text-2xl md:text-3xl text-cyan-300 max-w-5xl mx-auto leading-relaxed transform-3d-hover"> | |
| <span class="font-bold">PIONEERS IN 3D WEB EXPERIENCES</span><br> | |
| Blending creativity with cutting-edge technology to build immersive digital solutions that redefine the future | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center"> | |
| <div class="relative perspective-container"> | |
| <div class="card-3d p-10 transform-3d-hover hologram"> | |
| <div class="absolute top-0 right-0 w-20 h-20 bg-primary rounded-full blur-2xl opacity-50 animate-pulse"></div> | |
| <h3 class="text-3xl md:text-4xl font-black mb-8 bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent"> | |
| INNOVATIVE 3D SOLUTIONS | |
| </h3> | |
| <p class="text-lg md:text-xl text-cyan-200 mb-8 leading-relaxed"> | |
| At CoderzPark, we specialize in creating cutting-edge 3D web experiences that captivate users and deliver exceptional results. Our team combines artistic vision with technical expertise to push the boundaries of what's possible in digital space. | |
| </p> | |
| <div class="space-y-6"> | |
| <div class="flex items-center transform-3d-hover"> | |
| <div class="w-6 h-6 bg-primary rounded-full mr-6 animate-pulse"></div> | |
| <span class="text-lg font-semibold text-cyan-300">Immersive 3D web applications</span> | |
| </div> | |
| <div class="flex items-center transform-3d-hover" style="animation-delay: 0.2s;"> | |
| <div class="w-6 h-6 bg-secondary rounded-full mr-6 animate-pulse"></div> | |
| <span class="text-lg font-semibold text-pink-300">Real-time rendering technology</span> | |
| </div> | |
| <div class="flex items-center transform-3d-hover" style="animation-delay: 0.4s;"> | |
| <div class="w-6 h-6 bg-accent rounded-full mr-6 animate-pulse"></div> | |
| <span class="text-lg font-semibold text-yellow-300">Interactive user experiences</span> | |
| </div> | |
| <div class="flex items-center transform-3d-hover" style="animation-delay: 0.6s;"> | |
| <div class="w-6 h-6 bg-neon rounded-full mr-6 animate-pulse"></div> | |
| <span class="text-lg font-semibold text-green-300">Advanced AR/VR integration</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="relative perspective-container"> | |
| <div class="card-3d p-10 floating-element hologram"> | |
| <div class="absolute -top-10 -right-10 w-32 h-32 bg-secondary rounded-full blur-3xl opacity-30 animate-pulse"></div> | |
| <div class="grid grid-cols-2 gap-8"> | |
| <div class="text-center transform-3d-hover"> | |
| <div class="text-5xl md:text-6xl font-black text-primary mb-4 rotating-element">500+</div> | |
| <div class="text-lg font-bold text-cyan-300">PROJECTS</div> | |
| <div class="text-sm text-cyan-200 mt-2">COMPLETED</div> | |
| </div> | |
| <div class="text-center transform-3d-hover" style="animation-delay: 0.2s;"> | |
| <div class="text-5xl md:text-6xl font-black text-secondary mb-4 rotating-element">300+</div> | |
| <div class="text-lg font-bold text-pink-300">HAPPY</div> | |
| <div class="text-sm text-pink-200 mt-2">CLIENTS</div> | |
| </div> | |
| <div class="text-center transform-3d-hover" style="animation-delay: 0.4s;"> | |
| <div class="text-5xl md:text-6xl font-black text-accent mb-4 rotating-element">50+</div> | |
| <div class="text-lg font-bold text-yellow-300">EXPERT</div> | |
| <div class="text-sm text-yellow-200 mt-2">DEVELOPERS</div> | |
| </div> | |
| <div class="text-center transform-3d-hover" style="animation-delay: 0.6s;"> | |
| <div class="text-5xl md:text-6xl font-black text-neon mb-4 rotating-element">10+</div> | |
| <div class="text-lg font-bold text-green-300">YEARS OF</div> | |
| <div class="text-sm text-green-200 mt-2">EXPERIENCE</div> | |
| </div> | |
| </div> | |
| <div class="mt-10 text-center"> | |
| <button class="glass-button px-8 py-4 rounded-full font-bold hover:bg-primary hover:scale-110 transition-all duration-300 transform-3d-hover"> | |
| <span class="flex items-center justify-center"> | |
| <i data-feather="award" class="w-5 h-5 mr-2"></i> | |
| VIEW CERTIFICATIONS | |
| </span> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- 3D Services Section --> | |
| <section id="services" class="section-3d cyber-grid"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-20"> | |
| <h2 class="text-5xl md:text-7xl font-black mb-8 neon-text transform-3d-hover">OUR 3D SERVICES</h2> | |
| <div class="w-32 h-1 bg-gradient-to-r from-primary via-secondary to-accent mx-auto mb-8 rounded-full animate-pulse"></div> | |
| <p class="text-2xl md:text-3xl text-cyan-300 max-w-5xl mx-auto leading-relaxed transform-3d-hover"> | |
| <span class="font-bold">COMPREHENSIVE 3D DEVELOPMENT</span><br> | |
| Transforming ideas into immersive digital realities with cutting-edge technology | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10"> | |
| <!-- Service 1 --> | |
| <div class="card-3d p-8 transform-3d-hover hologram floating-element"> | |
| <div class="relative mb-8"> | |
| <div class="w-24 h-24 mx-auto rounded-full bg-gradient-to-r from-primary to-cyan-500 flex items-center justify-center"> | |
| <i data-feather="box" class="w-12 h-12 text-white"></i> | |
| </div> | |
| <div class="absolute inset-0 w-24 h-24 mx-auto rounded-full bg-primary blur-2xl opacity-50 animate-pulse"></div> | |
| </div> | |
| <h3 class="text-2xl md:text-3xl font-black mb-6 bg-gradient-to-r from-primary to-cyan-500 bg-clip-text text-transparent">3D MODELING</h3> | |
| <p class="text-lg text-cyan-200 mb-6 leading-relaxed"> | |
| Creating detailed 3D models with photorealistic quality for products, environments, and characters. | |
| </p> | |
| <ul class="space-y-3 text-cyan-300"> | |
| <li class="flex items-center"> | |
| <div class="w-2 h-2 bg-primary rounded-full mr-3 animate-pulse"></div> | |
| <span class="font-semibold">Product visualization</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <div class="w-2 h-2 bg-primary rounded-full mr-3 animate-pulse"></div> | |
| <span class="font-semibold">Architectural modeling</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <div class="w-2 h-2 bg-primary rounded-full mr-3 animate-pulse"></div> | |
| <span class="font-semibold">Character design</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <!-- Service 2 --> | |
| <div class="card-3d p-8 transform-3d-hover hologram floating-element" style="animation-delay: 0.2s;"> | |
| <div class="relative mb-8"> | |
| <div class="w-24 h-24 mx-auto rounded-full bg-gradient-to-r from-secondary to-pink-500 flex items-center justify-center"> | |
| <i data-feather="globe" class="w-12 h-12 text-white"></i> | |
| </div> | |
| <div class="absolute inset-0 w-24 h-24 mx-auto rounded-full bg-secondary blur-2xl opacity-50 animate-pulse"></div> | |
| </div> | |
| <h3 class="text-2xl md:text-3xl font-black mb-6 bg-gradient-to-r from-secondary to-pink-500 bg-clip-text text-transparent">WEBGL INTEGRATION</h3> | |
| <p class="text-lg text-pink-200 mb-6 leading-relaxed"> | |
| Seamlessly integrating 3D graphics into websites for immersive user experiences. | |
| </p> | |
| <ul class="space-y-3 text-pink-300"> | |
| <li class="flex items-center"> | |
| <div class="w-2 h-2 bg-secondary rounded-full mr-3 animate-pulse"></div> | |
| <span class="font-semibold">Interactive 3D websites</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <div class="w-2 h-2 bg-secondary rounded-full mr-3 animate-pulse"></div> | |
| <span class="font-semibold">Real-time rendering</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <div class="w-2 h-2 bg-secondary rounded-full mr-3 animate-pulse"></div> | |
| <span class="font-semibold">Cross-platform compatibility</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <!-- Service 3 --> | |
| <div class="card-3d p-8 transform-3d-hover hologram floating-element" style="animation-delay: 0.4s;"> | |
| <div class="relative mb-8"> | |
| <div class="w-24 h-24 mx-auto rounded-full bg-gradient-to-r from-accent to-yellow-500 flex items-center justify-center"> | |
| <i data-feather="play" class="w-12 h-12 text-white"></i> | |
| </div> | |
| <div class="absolute inset-0 w-24 h-24 mx-auto rounded-full bg-accent blur-2xl opacity-50 animate-pulse"></div> | |
| </div> | |
| <h3 class="text-2xl md:text-3xl font-black mb-6 bg-gradient-to-r from-accent to-yellow-500 bg-clip-text text-transparent">3D ANIMATION</h3> | |
| <p class="text-lg text-yellow-200 mb-6 leading-relaxed"> | |
| Creating stunning animations and motion graphics for marketing, education, and entertainment. | |
| </p> | |
| <ul class="space-y-3 text-yellow-300"> | |
| <li class="flex items-center"> | |
| <div class="w-2 h-2 bg-accent rounded-full mr-3 animate-pulse"></div> | |
| <span class="font-semibold">Product animations</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <div class="w-2 h-2 bg-accent rounded-full mr-3 animate-pulse"></div> | |
| <span class="font-semibold">Explainer videos</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <div class="w-2 h-2 bg-accent rounded-full mr-3 animate-pulse"></div> | |
| <span class="font-semibold">Interactive storytelling</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <!-- Service 4 --> | |
| <div class="card-3d p-8 transform-3d-hover hologram floating-element" style="animation-delay: 0.6s;"> | |
| <div class="relative mb-8"> | |
| <div class="w-24 h-24 mx-auto rounded-full bg-gradient-to-r from-neon to-green-500 flex items-center justify-center"> | |
| <i data-feather="smartphone" class="w-12 h-12 text-white"></i> | |
| </div> | |
| <div class="absolute inset-0 w-24 h-24 mx-auto rounded-full bg-neon blur-2xl opacity-50 animate-pulse"></div> | |
| </div> | |
| <h3 class="text-2xl md:text-3xl font-black mb-6 bg-gradient-to-r from-neon to-green-500 bg-clip-text text-transparent">AR/VR SOLUTIONS</h3> | |
| <p class="text-lg text-green-200 mb-6 leading-relaxed"> | |
| Developing augmented and virtual reality experiences for training, marketing, and entertainment. | |
| </p> | |
| <ul class="space-y-3 text-green-300"> | |
| <li class="flex items-center"> | |
| <div class="w-2 h-2 bg-neon rounded-full mr-3 animate-pulse"></div> | |
| <span class="font-semibold">AR product visualization</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <div class="w-2 h-2 bg-neon rounded-full mr-3 animate-pulse"></div> | |
| <span class="font-semibold">VR training simulations</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <div class="w-2 h-2 bg-neon rounded-full mr-3 animate-pulse"></div> | |
| <span class="font-semibold">Mixed reality experiences</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <!-- Service 5 --> | |
| <div class="card-3d p-8 transform-3d-hover hologram floating-element" style="animation-delay: 0.8s;"> | |
| <div class="relative mb-8"> | |
| <div class="w-24 h-24 mx-auto rounded-full bg-gradient-to-r from-primary to-purple-500 flex items-center justify-center"> | |
| <i data-feather="code" class="w-12 h-12 text-white"></i> | |
| </div> | |
| <div class="absolute inset-0 w-24 h-24 mx-auto rounded-full bg-primary blur-2xl opacity-50 animate-pulse"></div> | |
| </div> | |
| <h3 class="text-2xl md:text-3xl font-black mb-6 bg-gradient-to-r from-primary to-purple-500 bg-clip-text text-transparent">GAME DEVELOPMENT</h3> | |
| <p class="text-lg text-purple-200 mb-6 leading-relaxed"> | |
| Creating immersive 3D games for web, mobile, and desktop platforms with engaging gameplay. | |
| </p> | |
| <ul class="space-y-3 text-purple-300"> | |
| <li class="flex items-center"> | |
| <div class="w-2 h-2 bg-primary rounded-full mr-3 animate-pulse"></div> | |
| <span class="font-semibold">3D game design</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <div class="w-2 h-2 bg-primary rounded-full mr-3 animate-pulse"></div> | |
| <span class="font-semibold">Multiplayer experiences</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <div class="w-2 h-2 bg-primary rounded-full mr-3 animate-pulse"></div> | |
| <span class="font-semibold">Cross-platform deployment</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <!-- Service 6 --> | |
| <div class="card-3d p-8 transform-3d-hover hologram floating-element" style="animation-delay: 1s;"> | |
| <div class="relative mb-8"> | |
| <div class="w-24 h-24 mx-auto rounded-full bg-gradient-to-r from-secondary to-orange-500 flex items-center justify-center"> | |
| <i data-feather="monitor" class="w-12 h-12 text-white"></i> | |
| </div> | |
| <div class="absolute inset-0 w-24 h-24 mx-auto rounded-full bg-secondary blur-2xl opacity-50 animate-pulse"></div> | |
| </div> | |
| <h3 class="text-2xl md:text-3xl font-black mb-6 bg-gradient-to-r from-secondary to-orange-500 bg-clip-text text-transparent">3D VISUALIZATION</h3> | |
| <p class="text-lg text-orange-200 mb-6 leading-relaxed"> | |
| Transforming data and concepts into interactive 3D visualizations for better understanding. | |
| </p> | |
| <ul class="space-y-3 text-orange-300"> | |
| <li class="flex items-center"> | |
| <div class="w-2 h-2 bg-secondary rounded-full mr-3 animate-pulse"></div> | |
| <span class="font-semibold">Scientific visualization</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <div class="w-2 h-2 bg-secondary rounded-full mr-3 animate-pulse"></div> | |
| <span class="font-semibold">Data representation</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <div class="w-2 h-2 bg-secondary rounded-full mr-3 animate-pulse"></div> | |
| <span class="font-semibold">Architectural walkthroughs</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- 3D Portfolio Section --> | |
| <section id="portfolio" class="section-3d hexagon-bg"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-20"> | |
| <h2 class="text-5xl md:text-7xl font-black mb-8 neon-text transform-3d-hover">3D PROJECTS</h2> | |
| <div class="w-32 h-1 bg-gradient-to-r from-primary via-secondary to-accent mx-auto mb-8 rounded-full animate-pulse"></div> | |
| <p class="text-2xl md:text-3xl text-cyan-300 max-w-5xl mx-auto leading-relaxed transform-3d-hover"> | |
| <span class="font-bold">CUTTING-EDGE 3D PORTFOLIO</span><br> | |
| Explore our showcase of immersive digital experiences that push boundaries | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-12"> | |
| <!-- Project 1 --> | |
| <div class="card-3d overflow-hidden transform-3d-hover hologram floating-element"> | |
| <div class="relative h-80 bg-gradient-to-br from-primary via-cyan-500 to-blue-600 flex items-center justify-center"> | |
| <div class="text-8xl animate-bounce">🎮</div> | |
| <div class="absolute inset-0 bg-black opacity-20"></div> | |
| <div class="absolute top-4 right-4 glass-button px-4 py-2 rounded-full text-sm font-bold"> | |
| VR/AR | |
| </div> | |
| </div> | |
| <div class="p-8"> | |
| <h3 class="text-2xl md:text-3xl font-black mb-4 bg-gradient-to-r from-primary to-cyan-500 bg-clip-text text-transparent">VIRTUAL REALITY GAME</h3> | |
| <p class="text-lg text-cyan-200 mb-6 leading-relaxed"> | |
| An immersive VR experience that transports players to a fantasy world with realistic physics and stunning visuals. | |
| </p> | |
| <div class="flex items-center justify-between"> | |
| <button class="glass-button px-6 py-3 rounded-full font-bold hover:bg-primary hover:scale-110 transition-all duration-300"> | |
| <span class="flex items-center"> | |
| <i data-feather="eye" class="w-5 h-5 mr-2"></i> | |
| VIEW PROJECT | |
| </span> | |
| </button> | |
| <div class="flex space-x-2"> | |
| <span class="text-cyan-400 font-bold">UNITY</span> | |
| <span class="text-pink-400 font-bold">WEBGL</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Project 2 --> | |
| <div class="card-3d overflow-hidden transform-3d-hover hologram floating-element" style="animation-delay: 0.2s;"> | |
| <div class="relative h-80 bg-gradient-to-br from-secondary via-pink-500 to-purple-600 flex items-center justify-center"> | |
| <div class="text-8xl animate-bounce" style="animation-delay: 0.3s;">🏢</div> | |
| <div class="absolute inset-0 bg-black opacity-20"></div> | |
| <div class="absolute top-4 right-4 glass-button px-4 py-2 rounded-full text-sm font-bold"> | |
| ARCHVIZ | |
| </div> | |
| </div> | |
| <div class="p-8"> | |
| <h3 class="text-2xl md:text-3xl font-black mb-4 bg-gradient-to-r from-secondary to-pink-500 bg-clip-text text-transparent">ARCHITECTURAL VISUALIZATION</h3> | |
| <p class="text-lg text-pink-200 mb-6 leading-relaxed"> | |
| Real-time 3D walkthrough of a modern skyscraper with interactive design elements and photorealistic rendering. | |
| </p> | |
| <div class="flex items-center justify-between"> | |
| <button class="glass-button px-6 py-3 rounded-full font-bold hover:bg-secondary hover:scale-110 transition-all duration-300"> | |
| <span class="flex items-center"> | |
| <i data-feather="eye" class="w-5 h-5 mr-2"></i> | |
| VIEW PROJECT | |
| </span> | |
| </button> | |
| <div class="flex space-x-2"> | |
| <span class="text-pink-400 font-bold">THREE.JS</span> | |
| <span class="text-yellow-400 font-bold">BLENDER</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Project 3 --> | |
| <div class="card-3d overflow-hidden transform-3d-hover hologram floating-element" style="animation-delay: 0.4s;"> | |
| <div class="relative h-80 bg-gradient-to-br from-accent via-yellow-500 to-orange-600 flex items-center justify-center"> | |
| <div class="text-8xl animate-bounce" style="animation-delay: 0.6s;">🚗</div> | |
| <div class="absolute inset-0 bg-black opacity-20"></div> | |
| <div class="absolute top-4 right-4 glass-button px-4 py-2 rounded-full text-sm font-bold"> | |
| PRODUCT | |
| </div> | |
| </div> | |
| <div class="p-8"> | |
| <h3 class="text-2xl md:text-3xl font-black mb-4 bg-gradient-to-r from-accent to-yellow-500 bg-clip-text text-transparent">PRODUCT CONFIGURATOR</h3> | |
| <p class="text-lg text-yellow-200 mb-6 leading-relaxed"> | |
| Interactive 3D car configurator allowing customers to customize and visualize vehicles in real-time. | |
| </p> | |
| <div class="flex items-center justify-between"> | |
| <button class="glass-button px-6 py-3 rounded-full font-bold hover:bg-accent hover:scale-110 transition-all duration-300"> | |
| <span class="flex items-center"> | |
| <i data-feather="eye" class="w-5 h-5 mr-2"></i> | |
| VIEW PROJECT | |
| </span> | |
| </button> | |
| <div class="flex space-x-2"> | |
| <span class="text-yellow-400 font-bold">REACT</span> | |
| <span class="text-green-400 font-bold">WEBXR</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center mt-16"> | |
| <button class="glass-button px-12 py-6 rounded-full text-xl font-bold hover:bg-primary hover:scale-110 transition-all duration-300 transform-3d-hover"> | |
| <span class="flex items-center"> | |
| <i data-feather="grid" class="w-6 h-6 mr-3"></i> | |
| VIEW ALL PROJECTS | |
| </span> | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- 3D Contact Section --> | |
| <section id="contact" class="section-3d cyber-grid"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-20"> | |
| <h2 class="text-5xl md:text-7xl font-black mb-8 neon-text transform-3d-hover">GET IN TOUCH</h2> | |
| <div class="w-32 h-1 bg-gradient-to-r from-primary via-secondary to-accent mx-auto mb-8 rounded-full animate-pulse"></div> | |
| <p class="text-2xl md:text-3xl text-cyan-300 max-w-5xl mx-auto leading-relaxed transform-3d-hover"> | |
| <span class="font-bold">READY TO CREATE SOMETHING AMAZING?</span><br> | |
| Let's discuss your 3D project ideas and bring them to life | |
| </p> | |
| </div> | |
| <div class="max-w-6xl mx-auto"> | |
| <div class="card-3d p-12 hologram transform-3d-hover"> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-16"> | |
| <div> | |
| <h3 class="text-3xl md:text-4xl font-black mb-10 bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">CONTACT INFORMATION</h3> | |
| <div class="space-y-8"> | |
| <div class="flex items-start transform-3d-hover"> | |
| <div class="relative"> | |
| <div class="w-16 h-16 rounded-full bg-gradient-to-r from-primary to-cyan-500 flex items-center justify-center"> | |
| <i data-feather="mail" class="w-8 h-8 text-white"></i> | |
| </div> | |
| <div class="absolute inset-0 w-16 h-16 rounded-full bg-primary blur-2xl opacity-50 animate-pulse"></div> | |
| </div> | |
| <div class="ml-6"> | |
| <h4 class="text-xl font-bold text-cyan-300 mb-2">EMAIL</h4> | |
| <p class="text-lg text-cyan-200 font-semibold">contact@coderzpark.com</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start transform-3d-hover" style="animation-delay: 0.2s;"> | |
| <div class="relative"> | |
| <div class="w-16 h-16 rounded-full bg-gradient-to-r from-secondary to-pink-500 flex items-center justify-center"> | |
| <i data-feather="phone" class="w-8 h-8 text-white"></i> | |
| </div> | |
| <div class="absolute inset-0 w-16 h-16 rounded-full bg-secondary blur-2xl opacity-50 animate-pulse"></div> | |
| </div> | |
| <div class="ml-6"> | |
| <h4 class="text-xl font-bold text-pink-300 mb-2">PHONE</h4> | |
| <p class="text-lg text-pink-200 font-semibold">+92-3008338373</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start transform-3d-hover" style="animation-delay: 0.4s;"> | |
| <div class="relative"> | |
| <div class="w-16 h-16 rounded-full bg-gradient-to-r from-accent to-yellow-500 flex items-center justify-center"> | |
| <i data-feather="map-pin" class="w-8 h-8 text-white"></i> | |
| </div> | |
| <div class="absolute inset-0 w-16 h-16 rounded-full bg-accent blur-2xl opacity-50 animate-pulse"></div> | |
| </div> | |
| <div class="ml-6"> | |
| <h4 class="text-xl font-bold text-yellow-300 mb-2">LOCATION</h4> | |
| <p class="text-lg text-yellow-200 font-semibold">LG-4 City Plaza Satellite Town<br/>C Block, Sargodha Pakistan</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-12"> | |
| <h4 class="text-xl font-bold text-cyan-300 mb-6">FOLLOW US</h4> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="w-12 h-12 rounded-full glass-button flex items-center justify-center hover:bg-primary hover:scale-110 transition-all duration-300 transform-3d-hover"> | |
| <i data-feather="facebook" class="w-6 h-6"></i> | |
| </a> | |
| <a href="#" class="w-12 h-12 rounded-full glass-button flex items-center justify-center hover:bg-secondary hover:scale-110 transition-all duration-300 transform-3d-hover"> | |
| <i data-feather="twitter" class="w-6 h-6"></i> | |
| </a> | |
| <a href="#" class="w-12 h-12 rounded-full glass-button flex items-center justify-center hover:bg-accent hover:scale-110 transition-all duration-300 transform-3d-hover"> | |
| <i data-feather="linkedin" class="w-6 h-6"></i> | |
| </a> | |
| <a href="#" class="w-12 h-12 rounded-full glass-button flex items-center justify-center hover:bg-neon hover:scale-110 transition-all duration-300 transform-3d-hover"> | |
| <i data-feather="instagram" class="w-6 h-6"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-3xl md:text-4xl font-black mb-10 bg-gradient-to-r from-accent to-neon bg-clip-text text-transparent">SEND US A MESSAGE</h3> | |
| <form class="space-y-6"> | |
| <div class="transform-3d-hover"> | |
| <input type="text" placeholder="YOUR NAME" class="w-full p-5 bg-black bg-opacity-50 rounded-xl border-2 border-cyan-500 focus:border-primary focus:outline-none text-cyan-100 placeholder-cyan-400 font-semibold text-lg transition-all duration-300"> | |
| </div> | |
| <div class="transform-3d-hover" style="animation-delay: 0.2s;"> | |
| <input type="email" placeholder="YOUR EMAIL" class="w-full p-5 bg-black bg-opacity-50 rounded-xl border-2 border-pink-500 focus:border-secondary focus:outline-none text-pink-100 placeholder-pink-400 font-semibold text-lg transition-all duration-300"> | |
| </div> | |
| <div class="transform-3d-hover" style="animation-delay: 0.4s;"> | |
| <textarea placeholder="YOUR MESSAGE" rows="6" class="w-full p-5 bg-black bg-opacity-50 rounded-xl border-2 border-yellow-500 focus:border-accent focus:outline-none text-yellow-100 placeholder-yellow-400 font-semibold text-lg transition-all duration-300 resize-none"></textarea> | |
| </div> | |
| <button type="submit" class="glass-button w-full py-5 rounded-xl font-bold text-lg hover:bg-primary hover:scale-105 transition-all duration-300 transform-3d-hover"> | |
| <span class="flex items-center justify-center"> | |
| <i data-feather="send" class="w-6 h-6 mr-3"></i> | |
| SEND MESSAGE | |
| </span> | |
| </button> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- 3D Footer --> | |
| <footer class="py-16 border-t border-cyan-800 cyber-gradient"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12"> | |
| <div> | |
| <div class="flex items-center mb-8 transform-3d-hover"> | |
| <div class="relative"> | |
| <img src="https://coderzpark.com/assets/Logo3.png" alt="CoderzPark Logo" class="h-14 floating-element"> | |
| <div class="absolute inset-0 w-14 h-14 bg-primary rounded-full blur-xl opacity-50 animate-pulse"></div> | |
| </div> | |
| <span class="ml-4 text-2xl font-black neon-text tracking-wider">CODERZPARK</span> | |
| </div> | |
| <p class="text-cyan-300 mb-8 text-lg leading-relaxed"> | |
| Pioneering 3D web experiences with innovative technology and creative solutions that redefine digital boundaries. | |
| </p> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="w-12 h-12 rounded-full glass-button flex items-center justify-center hover:bg-primary hover:scale-110 transition-all duration-300 transform-3d-hover"> | |
| <i data-feather="facebook" class="w-6 h-6"></i> | |
| </a> | |
| <a href="#" class="w-12 h-12 rounded-full glass-button flex items-center justify-center hover:bg-secondary hover:scale-110 transition-all duration-300 transform-3d-hover"> | |
| <i data-feather="twitter" class="w-6 h-6"></i> | |
| </a> | |
| <a href="#" class="w-12 h-12 rounded-full glass-button flex items-center justify-center hover:bg-accent hover:scale-110 transition-all duration-300 transform-3d-hover"> | |
| <i data-feather="linkedin" class="w-6 h-6"></i> | |
| </a> | |
| <a href="#" class="w-12 h-12 rounded-full glass-button flex items-center justify-center hover:bg-neon hover:scale-110 transition-all duration-300 transform-3d-hover"> | |
| <i data-feather="instagram" class="w-6 h-6"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-xl font-black mb-8 bg-gradient-to-r from-primary to-cyan-500 bg-clip-text text-transparent">QUICK LINKS</h3> | |
| <ul class="space-y-4"> | |
| <li><a href="#home" class="text-cyan-300 hover:text-primary transition-all duration-300 font-semibold transform-3d-hover inline-block">HOME</a></li> | |
| <li><a href="#about" class="text-cyan-300 hover:text-secondary transition-all duration-300 font-semibold transform-3d-hover inline-block">ABOUT</a></li> | |
| <li><a href="#services" class="text-cyan-300 hover:text-accent transition-all duration-300 font-semibold transform-3d-hover inline-block">SERVICES</a></li> | |
| <li><a href="#portfolio" class="text-cyan-300 hover:text-neon transition-all duration-300 font-semibold transform-3d-hover inline-block">PORTFOLIO</a></li> | |
| <li><a href="#contact" class="text-cyan-300 hover:text-primary transition-all duration-300 font-semibold transform-3d-hover inline-block">CONTACT</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-xl font-black mb-8 bg-gradient-to-r from-secondary to-pink-500 bg-clip-text text-transparent">SERVICES</h3> | |
| <ul class="space-y-4"> | |
| <li><a href="#" class="text-pink-300 hover:text-secondary transition-all duration-300 font-semibold transform-3d-hover inline-block">3D MODELING</a></li> | |
| <li><a href="#" class="text-pink-300 hover:text-primary transition-all duration-300 font-semibold transform-3d-hover inline-block">WEBGL INTEGRATION</a></li> | |
| <li><a href="#" class="text-pink-300 hover:text-accent transition-all duration-300 font-semibold transform-3d-hover inline-block">3D ANIMATION</a></li> | |
| <li><a href="#" class="text-pink-300 hover:text-neon transition-all duration-300 font-semibold transform-3d-hover inline-block">AR/VR SOLUTIONS</a></li> | |
| <li><a href="#" class="text-pink-300 hover:text-secondary transition-all duration-300 font-semibold transform-3d-hover inline-block">GAME DEVELOPMENT</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-xl font-black mb-8 bg-gradient-to-r from-accent to-yellow-500 bg-clip-text text-transparent">NEWSLETTER</h3> | |
| <p class="text-yellow-300 mb-6 text-lg leading-relaxed"> | |
| Subscribe to our newsletter for the latest updates and cutting-edge 3D insights. | |
| </p> | |
| <div class="flex transform-3d-hover"> | |
| <input type="email" placeholder="YOUR EMAIL" class="flex-grow p-4 bg-black bg-opacity-50 rounded-l-xl border-2 border-yellow-500 focus:border-accent focus:outline-none text-yellow-100 placeholder-yellow-400 font-semibold transition-all duration-300"> | |
| <button class="glass-button px-6 rounded-r-xl hover:bg-accent hover:scale-110 transition-all duration-300"> | |
| <i data-feather="send" class="w-6 h-6"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border-t border-cyan-800 mt-16 pt-8 text-center"> | |
| <p class="text-cyan-300 text-lg font-semibold"> | |
| All rights reserved © 2025 <span class="neon-text font-black">CODERZPARK TECHNOLOGIES</span> | |
| </p> | |
| <p class="text-cyan-400 mt-2"> | |
| Crafting the Future of 3D Web Experiences | |
| </p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Initialize GSAP and ScrollTrigger | |
| gsap.registerPlugin(ScrollTrigger); | |
| // Loading screen animation | |
| window.addEventListener('load', () => { | |
| setTimeout(() => { | |
| const loadingScreen = document.getElementById('loadingScreen'); | |
| loadingScreen.style.opacity = '0'; | |
| setTimeout(() => { | |
| loadingScreen.style.display = 'none'; | |
| }, 1000); | |
| }, 2000); | |
| }); | |
| // Initialize Feather icons | |
| feather.replace(); | |
| // Mobile menu toggle | |
| const menuToggle = document.getElementById('menuToggle'); | |
| let mobileMenuOpen = false; | |
| menuToggle.addEventListener('click', () => { | |
| mobileMenuOpen = !mobileMenuOpen; | |
| // Add mobile menu logic here | |
| }); | |
| // Enhanced smooth scrolling with parallax | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function(e) { | |
| e.preventDefault(); | |
| const targetId = this.getAttribute('href'); | |
| if(targetId === '#') return; | |
| const targetElement = document.querySelector(targetId); | |
| if(targetElement) { | |
| const offset = 150; | |
| const targetPosition = targetElement.offsetTop - offset; | |
| window.scrollTo({ | |
| top: targetPosition, | |
| behavior: 'smooth' | |
| }); | |
| } | |
| }); | |
| }); | |
| // Advanced Three.js 3D Background | |
| document.addEventListener('DOMContentLoaded', () => { | |
| const container = document.getElementById('threejs-container'); | |
| // Scene setup with fog | |
| const scene = new THREE.Scene(); | |
| scene.fog = new THREE.FogExp2(0x0a0e27, 0.001); | |
| const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); | |
| const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true }); | |
| renderer.setSize(window.innerWidth, window.innerHeight); | |
| renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2)); | |
| renderer.shadowMap.enabled = true; | |
| renderer.shadowMap.type = THREE.PCFSoftShadowMap; | |
| container.appendChild(renderer.domElement); | |
| // Enhanced orbit controls | |
| const controls = new THREE.OrbitControls(camera, renderer.domElement); | |
| controls.enableDamping = true; | |
| controls.dampingFactor = 0.05; | |
| controls.rotateSpeed = 0.5; | |
| controls.enableZoom = false; | |
| controls.autoRotate = true; | |
| controls.autoRotateSpeed = 0.5; | |
| // Create advanced geometric shapes with materials | |
| const shapes = []; | |
| const geometryTypes = [ | |
| new THREE.IcosahedronGeometry(1, 1), | |
| new THREE.TorusKnotGeometry(0.8, 0.3, 128, 16), | |
| new THREE.OctahedronGeometry(1.2, 0), | |
| new THREE.DodecahedronGeometry(1, 0), | |
| new THREE.TetrahedronGeometry(1.5, 0), | |
| new THREE.TorusGeometry(1, 0.4, 16, 100) | |
| ]; | |
| // Enhanced materials with emissive properties | |
| const materials = [ | |
| new THREE.MeshPhongMaterial({ | |
| color: 0x00ffff, | |
| emissive: 0x00ffff, | |
| emissiveIntensity: 0.2, | |
| transparent: true, | |
| opacity: 0.8, | |
| shininess: 100, | |
| specular: 0xffffff | |
| }), | |
| new THREE.MeshPhongMaterial({ | |
| color: 0xff00ff, | |
| emissive: 0xff00ff, | |
| emissiveIntensity: 0.2, | |
| transparent: true, | |
| opacity: 0.8, | |
| shininess: 100, | |
| specular: 0xffffff | |
| }), | |
| new THREE.MeshPhongMaterial({ | |
| color: 0xffff00, | |
| emissive: 0xffff00, | |
| emissiveIntensity: 0.2, | |
| transparent: true, | |
| opacity: 0.8, | |
| shininess: 100, | |
| specular: 0xffffff | |
| }), | |
| new THREE.MeshPhongMaterial({ | |
| color: 0x00ff00, | |
| emissive: 0x00ff00, | |
| emissiveIntensity: 0.2, | |
| transparent: true, | |
| opacity: 0.8, | |
| shininess: 100, | |
| specular: 0xffffff | |
| }) | |
| ]; | |
| for (let i = 0; i < 80; i++) { | |
| const geometry = geometryTypes[Math.floor(Math.random() * geometryTypes.length)]; | |
| const material = materials[Math.floor(Math.random() * materials.length)].clone(); | |
| // Add some color variation | |
| material.color.setHSL(Math.random(), 1, 0.5); | |
| material.emissive.setHSL(Math.random(), 1, 0.3); | |
| const shape = new THREE.Mesh(geometry, material); | |
| shape.position.x = (Math.random() - 0.5) * 150; | |
| shape.position.y = (Math.random() - 0.5) * 150; | |
| shape.position.z = (Math.random() - 0.5) * 150; | |
| shape.rotationSpeed = { | |
| x: (Math.random() - 0.5) * 0.02, | |
| y: (Math.random() - 0.5) * 0.02, | |
| z: (Math.random() - 0.5) * 0.02 | |
| }; | |
| shape.scale.setScalar(Math.random() * 0.8 + 0.2); | |
| shape.castShadow = true; | |
| shape.receiveShadow = true; | |
| scene.add(shape); | |
| shapes.push(shape); | |
| } | |
| // Enhanced lighting setup | |
| const ambientLight = new THREE.AmbientLight(0x404040, 0.5); | |
| scene.add(ambientLight); | |
| const directionalLight = new THREE.DirectionalLight(0xffffff, 1); | |
| directionalLight.position.set(10, 10, 5); | |
| directionalLight.castShadow = true; | |
| directionalLight.shadow.camera.near = 0.1; | |
| directionalLight.shadow.camera.far = 50; | |
| directionalLight.shadow.camera.left = -30; | |
| directionalLight.shadow.camera.right = 30; | |
| directionalLight.shadow.camera.top = 30; | |
| directionalLight.shadow.camera.bottom = -30; | |
| scene.add(directionalLight); | |
| // Multiple colored point lights | |
| const pointLights = [ | |
| { color: 0x00ffff, position: [20, 20, 20], intensity: 1 }, | |
| { color: 0xff00ff, position: [-20, -20, -20], intensity: 1 }, | |
| { color: 0xffff00, position: [0, 30, 0], intensity: 0.8 }, | |
| { color: 0x00ff00, position: [30, 0, 30], intensity: 0.8 } | |
| ]; | |
| pointLights.forEach(lightData => { | |
| const light = new THREE.PointLight(lightData.color, lightData.intensity, 100); | |
| light.position.set(...lightData.position); | |
| scene.add(light); | |
| // Add light helper for debugging (optional) | |
| // const helper = new THREE.PointLightHelper(light, 1); | |
| // scene.add(helper); | |
| }); | |
| // Camera position | |
| camera.position.z = 50; | |
| // Handle window resize | |
| window.addEventListener('resize', () => { | |
| camera.aspect = window.innerWidth / window.innerHeight; | |
| camera.updateProjectionMatrix(); | |
| renderer.setSize(window.innerWidth, window.innerHeight); | |
| }, { passive: true }); | |
| // Enhanced particle system | |
| function createAdvancedParticles() { | |
| const particleCount = 500; | |
| const geometry = new THREE.BufferGeometry(); | |
| const positions = new Float32Array(particleCount * 3); | |
| const colors = new Float32Array(particleCount * 3); | |
| const sizes = new Float32Array(particleCount); | |
| for (let i = 0; i < particleCount; i++) { | |
| positions[i * 3] = (Math.random() - 0.5) * 200; | |
| positions[i * 3 + 1] = (Math.random() - 0.5) * 200; | |
| positions[i * 3 + 2] = (Math.random() - 0.5) * 200; | |
| const color = new THREE.Color(); | |
| color.setHSL(Math.random(), 1, 0.5); | |
| colors[i * 3] = color.r; | |
| colors[i * 3 + 1] = color.g; | |
| colors[i * 3 + 2] = color.b; | |
| sizes[i] = Math.random() * 2 + 0.5; | |
| } | |
| geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3)); | |
| geometry.setAttribute('color', new THREE.BufferAttribute(colors, 3)); | |
| geometry.setAttribute('size', new THREE.BufferAttribute(sizes, 1)); | |
| const material = new THREE.PointsMaterial({ | |
| size: 1, | |
| vertexColors: true, | |
| transparent: true, | |
| opacity: 0.8, | |
| blending: THREE.AdditiveBlending, | |
| depthWrite: false | |
| }); | |
| const particles = new THREE.Points(geometry, material); | |
| scene.add(particles); | |
| return particles; | |
| } | |
| const particles = createAdvancedParticles(); | |
| // Mouse interaction | |
| let mouseX = 0; | |
| let mouseY = 0; | |
| document.addEventListener('mousemove', (event) => { | |
| mouseX = (event.clientX / window.innerWidth) * 2 - 1; | |
| mouseY = -(event.clientY / window.innerHeight) * 2 + 1; | |
| }); | |
| // Enhanced animation loop | |
| const clock = new THREE.Clock(); | |
| function animate() { | |
| requestAnimationFrame(animate); | |
| const elapsedTime = clock.getElapsedTime(); | |
| // Rotate shapes with enhanced patterns | |
| shapes.forEach((shape, index) => { | |
| shape.rotation.x += shape.rotationSpeed.x; | |
| shape.rotation.y += shape.rotationSpeed.y; | |
| shape.rotation.z += shape.rotationSpeed.z; | |
| // Complex movement patterns | |
| const time = elapsedTime * 0.5; | |
| shape.position.x += Math.sin(time + index) * 0.01; | |
| shape.position.y += Math.cos(time + index * 0.5) * 0.01; | |
| shape.position.z += Math.sin(time * 0.5 + index * 0.3) * 0.01; | |
| // Pulsing effect | |
| const scale = 1 + Math.sin(time + index) * 0.1; | |
| shape.scale.setScalar(scale * (Math.random() * 0.8 + 0.2)); | |
| }); | |
| // Animate particles | |
| if (particles) { | |
| particles.rotation.y += 0.001; | |
| particles.rotation.x += 0.0005; | |
| const positions = particles.geometry.attributes.position.array; | |
| for (let i = 0; i < positions.length; i += 3) { | |
| positions[i + 1] += Math.sin(elapsedTime + i) * 0.01; | |
| } | |
| particles.geometry.attributes.position.needsUpdate = true; | |
| } | |
| // Mouse influence on camera | |
| camera.position.x += (mouseX * 10 - camera.position.x) * 0.05; | |
| camera.position.y += (mouseY * 10 - camera.position.y) * 0.05; | |
| camera.lookAt(scene.position); | |
| controls.update(); | |
| renderer.render(scene, camera); | |
| } | |
| animate(); | |
| // GSAP Animations for scroll-based effects | |
| gsap.utils.toArray('.card-3d').forEach((card, index) => { | |
| gsap.from(card, { | |
| scrollTrigger: { | |
| trigger: card, | |
| start: 'top 80%', | |
| end: 'bottom 20%', | |
| toggleActions: 'play reverse play reverse' | |
| }, | |
| opacity: 0, | |
| y: 100, | |
| rotationX: -30, | |
| duration: 1, | |
| delay: index * 0.1, | |
| ease: 'power3.out' | |
| }); | |
| }); | |
| gsap.utils.toArray('.floating-element').forEach(element => { | |
| gsap.to(element, { | |
| scrollTrigger: { | |
| trigger: element, | |
| start: 'top bottom', | |
| end: 'bottom top', | |
| toggleActions: 'play reverse play reverse' | |
| }, | |
| y: -50, | |
| duration: 2, | |
| ease: 'power1.inOut' | |
| }); | |
| }); | |
| // Form submission handling | |
| const contactForm = document.querySelector('form'); | |
| if (contactForm) { | |
| contactForm.addEventListener('submit', (e) => { | |
| e.preventDefault(); | |
| // Add submission animation | |
| gsap.to(contactForm, { | |
| scale: 0.95, | |
| duration: 0.1, | |
| yoyo: true, | |
| repeat: 1, | |
| ease: 'power2.inOut', | |
| onComplete: () => { | |
| // Show success message | |
| const successMessage = document.createElement('div'); | |
| successMessage.className = 'fixed top-20 right-4 glass-button px-6 py-4 rounded-lg text-green-400 font-bold z-50'; | |
| successMessage.textContent = 'Message sent successfully!'; | |
| document.body.appendChild(successMessage); | |
| gsap.from(successMessage, { | |
| x: 100, | |
| opacity: 0, | |
| duration: 0.5, | |
| ease: 'power3.out' | |
| }); | |
| setTimeout(() => { | |
| gsap.to(successMessage, { | |
| x: 100, | |
| opacity: 0, | |
| duration: 0.5, | |
| ease: 'power3.in', | |
| onComplete: () => { | |
| successMessage.remove(); | |
| } | |
| }); | |
| }, 3000); | |
| contactForm.reset(); | |
| } | |
| }); | |
| }); | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> | |