Spaces:

GXSNetwork
/

gih

Running

App Files Files Community

retire commited on Oct 10, 2025

Commit

d5a0660

verified ·

1 Parent(s): f01177e

make it professional for competition website

Browse files

Files changed (2) hide show

README.md +9 -5
index.html +872 -18

README.md CHANGED Viewed

@@ -1,10 +1,14 @@
 ---
-title: Undefined
-emoji: 📉
-colorFrom: blue
-colorTo: yellow
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: undefined
+colorFrom: purple
+colorTo: pink
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://deepsite.hf.co).

index.html CHANGED Viewed

@@ -1,19 +1,873 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
 </html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Beyond Singularity Portal</title>
+    <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://cdn.jsdelivr.net/npm/three@0.132.2/build/three.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/three@0.132.2/examples/js/controls/OrbitControls.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/three@0.132.2/examples/js/loaders/GLTFLoader.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/animejs@3.2.1/lib/anime.min.js"></script>
+<style>
+        @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=Rajdhani:wght@300;500;700&family=Major+Mono+Display&display=swap');
+        @keyframes scanline {
+            0% { transform: translateY(-100%); }
+            100% { transform: translateY(100vh); }
+        }
+        @keyframes glitch {
+            0%, 80% { text-shadow: none; }
+            85% { text-shadow: -1px 0 var(--neon-purple), 1px 0 var(--neon-blue); }
+            90% { text-shadow: 1px 0 var(--neon-purple), -1px 0 var(--neon-blue); }
+            95% { text-shadow: none; }
+            100% { text-shadow: none; }
+        }
+:root {
+            --neon-blue: #0ff0fc;
+            --neon-purple: #9d00ff;
+            --dark-space: #0a0a20;
+        }
+        body {
+            font-family: 'Rajdhani', sans-serif;
+            background-color: var(--dark-space);
+            color: white;
+            overflow-x: hidden;
+        }
+        h1, h2, h3, h4, .nav-item {
+            font-family: 'Orbitron', sans-serif;
+        }
+        .neon-text-blue {
+            text-shadow: 0 0 10px rgba(15, 240, 252, 0.8),
+                         0 0 20px rgba(15, 240, 252, 0.6),
+                         0 0 30px rgba(15, 240, 252, 0.4);
+            color: var(--neon-blue);
+            position: relative;
+        }
+        .neon-text-blue::after {
+            content: '';
+            position: absolute;
+            left: 0;
+            bottom: -2px;
+            width: 100%;
+            height: 1px;
+            background: var(--neon-blue);
+            box-shadow: 0 0 5px var(--neon-blue);
+            animation: pulse 2s infinite;
+        }
+        .neon-text-purple {
+            text-shadow: 0 0 10px rgba(157, 0, 255, 0.8),
+                         0 0 20px rgba(157, 0, 255, 0.6),
+                         0 0 30px rgba(157, 0, 255, 0.4);
+            color: var(--neon-purple);
+            animation: glitch 5s infinite;
+        }
+.neon-border-blue {
+            box-shadow: 0 0 15px rgba(15, 240, 252, 0.6);
+            border: 1px solid var(--neon-blue);
+        }
+        .neon-border-purple {
+            box-shadow: 0 0 15px rgba(157, 0, 255, 0.6);
+            border: 1px solid var(--neon-purple);
+        }
+        .card-hover:hover {
+            transform: translateY(-10px);
+            box-shadow: 0 0 30px rgba(15, 240, 252, 0.4);
+        }
+        .nav-item {
+            position: relative;
+        }
+        .nav-item::after {
+            content: '';
+            position: absolute;
+            width: 0;
+            height: 2px;
+            bottom: -5px;
+            left: 0;
+            background-color: var(--neon-blue);
+            transition: width 0.3s ease;
+        }
+        .nav-item:hover::after {
+            width: 100%;
+        }
+        .section-divider {
+            height: 1px;
+            background: linear-gradient(90deg, transparent, var(--neon-blue), transparent);
+        }
+    </style>
+</head>
+<body>
+        <div id="vanta-bg" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1;"></div>
+<div class="fixed inset-0 pointer-events-none" style="
+        background:
+            radial-gradient(circle at center, rgba(15,240,252,0.02) 0%, transparent 70%),
+            linear-gradient(rgba(10,10,32,0.1) 1px, transparent 1px);
+        background-size: 100% 3px, 100% 100%;
+        z-index: 0;
+        animation: scanline 8s linear infinite;
+    "></div>
+    <div class="fixed inset-0 pointer-events-none z-10" style="
+        background:
+            linear-gradient(135deg, rgba(15,240,252,0.03) 0%, transparent 20%, transparent 80%, rgba(157,0,255,0.03) 100%);
+    "></div>
+<!-- Main Container -->
+    <div class="relative min-h-screen flex flex-col">
+        <!-- Navigation -->
+        <nav class="py-6 px-4 md:px-12 backdrop-blur-md bg-opacity-50 bg-black z-50">
+            <div class="container mx-auto flex justify-between items-center">
+                <div class="flex items-center space-x-3 neon-text-blue group">
+                    <div class="w-8 h-8 relative">
+                        <div class="absolute inset-0 rounded-full border-2 border-blue-400 animate-pulse"></div>
+                        <div class="absolute inset-1 rounded-full border-2 border-purple-400 animate-pulse" style="animation-delay: 0.5s"></div>
+                        <div class="absolute inset-0.5 rounded-full border border-white/30 animate-ping" style="animation-delay: 1s"></div>
+                    </div>
+                    <span class="text-2xl font-bold tracking-tighter" style="font-family: 'Major Mono Display', monospace;">QUANTUMSYNTH_ARENA</span>
+</div>
+                <div class="hidden md:flex space-x-8">
+                    <a href="#ai-civilizations" class="nav-item text-lg uppercase tracking-wider hover:text-white transition-colors neon-text-purple">AI Civilizations</a>
+                    <a href="#space-colonization" class="nav-item text-lg uppercase tracking-wider hover:text-white transition-colors neon-text-blue">Space Colonization</a>
+                    <a href="#quantum-societies" class="nav-item text-lg uppercase tracking-wider hover:text-white transition-colors neon-text-purple">Quantum Societies</a>
+                    <a href="#climate-tech" class="nav-item text-lg uppercase tracking-wider hover:text-white transition-colors neon-text-blue">Climate Tech</a>
+                </div>
+                <button class="md:hidden focus:outline-none" id="mobile-menu-button">
+                    <i data-feather="menu" class="w-8 h-8 neon-text-blue"></i>
+                </button>
+            </div>
+            <!-- Mobile Menu -->
+            <div class="md:hidden hidden py-4 px-4 bg-black bg-opacity-90 mt-2 rounded-lg" id="mobile-menu">
+                <div class="flex flex-col space-y-4">
+                    <a href="#ai-civilizations" class="nav-item text-lg uppercase tracking-wider neon-text-purple">AI Civilizations</a>
+                    <a href="#space-colonization" class="nav-item text-lg uppercase tracking-wider neon-text-blue">Space Colonization</a>
+                    <a href="#quantum-societies" class="nav-item text-lg uppercase tracking-wider neon-text-purple">Quantum Societies</a>
+                    <a href="#climate-tech" class="nav-item text-lg uppercase tracking-wider neon-text-blue">Climate Tech</a>
+                </div>
+            </div>
+        </nav>
+        <!-- Hero Section -->
+        <section class="flex-grow flex items-center justify-center py-20 px-4 md:px-12 relative z-10">
+            <div class="container mx-auto text-center">
+                <div class="relative">
+                    <div class="absolute inset-0 bg-gradient-to-r from-blue-500/20 to-purple-600/20 blur-3xl -z-10"></div>
+                    <h1 class="text-5xl md:text-7xl font-bold mb-6 font-mono tracking-tighter">
+                        <div class="neon-text-blue inline-block relative">
+                            <span class="absolute -left-3 -top-3 text-xs opacity-70 font-mono">[COMPETITION_ID]</span>
+                            <span class="blinking-cursor">QUANTUMSYNTH_</span>CHALLENGE
+                            <span class="absolute -right-3 -bottom-3 text-xs opacity-70 font-mono">[2024]</span>
+                        </div>
+                        <div class="neon-text-purple inline-block relative ml-4">
+                            <span class="absolute -left-3 -top-3 text-xs opacity-70 font-mono">[DIVISION]</span>
+                            TECH_LEADERSHIP_
+                            <span class="absolute -right-3 -bottom-3 text-xs opacity-70 font-mono">[ROUND_1]</span>
+                        </div>
+                        <div class="neon-text-blue inline-block relative ml-4">
+                            <span class="absolute -left-3 -top-3 text-xs opacity-70 font-mono">[T+0]</span>
+                            INNOVATION[AI]
+                            <span class="absolute -right-3 -bottom-3 text-xs opacity-70 font-mono">[FINAL_STAGE]</span>
+                        </div>
+</h1>
+                </div>
+<div class="relative max-w-3xl mx-auto mb-10">
+                    <div class="absolute -inset-1 bg-gradient-to-r from-blue-500 to-purple-600 rounded-lg blur-xl opacity-30 animate-pulse"></div>
+                    <div class="relative bg-black/90 p-6 rounded-lg border border-gray-800 backdrop-blur-sm neon-border-blue">
+                        <div class="terminal-line">
+                            <span class="text-blue-400 font-mono">[NEURAL_NET]</span>
+                            <span class="typing-text" data-text="Initializing competition systems..."></span>
+                        </div>
+                        <div class="terminal-line delay-500">
+                            <span class="text-purple-400 font-mono">[JUDGES]</span> <span class="typing-text" data-text="Synchronizing evaluation criteria..."></span>
+                        </div>
+                        <div class="terminal-line delay-1000">
+                            <span class="text-blue-400 font-mono">[TEAMS]</span> <span class="typing-text" data-text="Loading participant data..."></span>
+</div>
+                        <div class="flex items-center mt-4">
+                            <div class="h-2 w-2 rounded-full bg-green-500 animate-pulse mr-2"></div>
+                        <span class="text-xs font-mono text-green-400">COMPETITION_READY</span>
+                        <span class="mx-2 text-xs opacity-70">|</span>
+                        <span class="text-xs font-mono opacity-70">TEAMS_REGISTERED: 24</span>
+</div>
+                    </div>
+                </div>
+                <div class="relative group">
+                    <div class="absolute -inset-1 bg-gradient-to-r from-blue-500 to-purple-600 rounded-full blur-md opacity-75 group-hover:opacity-100 transition-opacity duration-300"></div>
+                    <a href="#ai-civilizations" class="relative px-8 py-3 bg-black/80 neon-border-blue rounded-full text-lg uppercase tracking-wider neon-text-blue hover:bg-opacity-100 transition-all cursor-pointer inline-block">
+                        JOIN_COMPETITION
+</a>
+                </div>
+</div>
+        </section>
+    </div>
+    <!-- AI Civilizations Section -->
+    <section id="ai-civilizations" class="py-20 px-4 md:px-12 bg-black bg-opacity-70 relative section-focus">
+<div class="container mx-auto">
+            <div class="flex flex-col md:flex-row items-center mb-16">
+                <div class="md:w-1/2 mb-10 md:mb-0">
+                <div class="relative">
+                    <div class="absolute -left-8 -top-4 w-16 h-16 bg-blue-500/20 rounded-full filter blur-xl"></div>
+                    <h2 class="text-3xl md:text-5xl font-bold mb-6 neon-text-purple relative">
+                        <span class="absolute -left-6 top-1/2 transform -translate-y-1/2 text-2xl opacity-70">[TECH]</span>
+                        INNOVATION_CHALLENGE
+                    </h2>
+                </div>
+                <p class="text-lg md:text-xl mb-6 bg-black/50 p-4 rounded-lg border border-gray-800 backdrop-blur-sm">
+                    <span class="neon-text-blue">[MISSION]</span> Push the boundaries of quantum computing and AI,<br>
+                    <span class="neon-text-purple">[PRIZE]</span> $50,000 and industry mentorship for winning teams.
+                </p>
+<ul class="space-y-3 mb-8">
+                        <li class="flex items-start">
+                            <i data-feather="check-circle" class="w-5 h-5 mr-3 neon-text-blue mt-1"></i>
+                            <span>Real-world quantum computing challenges</span>
+                        </li>
+                        <li class="flex items-start">
+                            <i data-feather="check-circle" class="w-5 h-5 mr-3 neon-text-blue mt-1"></i>
+                            <span>Cutting-edge AI development competitions</span>
+                        </li>
+                        <li class="flex items-start">
+                            <i data-feather="check-circle" class="w-5 h-5 mr-3 neon-text-blue mt-1"></i>
+                            <span>Industry expert judging panel</span>
+                        </li>
+</ul>
+                    <div class="relative group">
+                        <div class="absolute -inset-0.5 bg-blue-500/30 rounded-full blur-sm group-hover:blur-md transition-all duration-300"></div>
+                        <a href="/aifuture.html" class="relative px-6 py-2 bg-black/80 border border-blue-400 rounded-full text-sm uppercase tracking-wider text-blue-400 hover:bg-blue-900/30 transition-all inline-block">
+                            VIEW_CHALLENGES
+</a>
+                    </div>
+</div>
+                <div class="md:w-1/2 flex justify-center">
+                    <div class="relative w-full max-w-lg">
+                        <img src="http://static.photos/technology/1024x576/1" alt="AI City" class="rounded-lg neon-border-blue w-full h-auto">
+                        <div class="absolute -bottom-5 -right-5 bg-black bg-opacity-80 neon-border-purple p-4 rounded-lg w-48">
+                            <h4 class="text-sm font-bold neon-text-purple mb-2">Neural Metropolis</h4>
+                            <p class="text-xs">First fully autonomous AI city (est. 2107)</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mt-16">
+                <div class="bg-black bg-opacity-50 p-6 rounded-lg neon-border-blue transition-all duration-300 card-hover">
+                    <div class="flex items-center mb-4">
+                        <div class="p-3 rounded-full bg-blue-900 bg-opacity-40 mr-4">
+                            <i data-feather="activity" class="w-6 h-6 neon-text-blue"></i>
+                        </div>
+                        <h3 class="text-xl font-bold neon-text-blue">Living Architecture</h3>
+                    </div>
+                    <p class="text-sm">
+                        Buildings constructed with programmable matter that can reshape themselves based on needs,
+                        creating the ultimate adaptive living spaces.
+                    </p>
+                </div>
+                <div class="bg-black bg-opacity-50 p-6 rounded-lg neon-border-purple transition-all duration-300 card-hover">
+                    <div class="flex items-center mb-4">
+                        <div class="p-3 rounded-full bg-purple-900 bg-opacity-40 mr-4">
+                            <i data-feather="users" class="w-6 h-6 neon-text-purple"></i>
+                        </div>
+                        <h3 class="text-xl font-bold neon-text-purple">Hybrid Societies</h3>
+                    </div>
+                    <p class="text-sm">
+                        Humans, AI, and robots coexisting seamlessly with shared governance systems and collective consciousness networks.
+                    </p>
+                </div>
+                <div class="bg-black bg-opacity-50 p-6 rounded-lg neon-border-blue transition-all duration-300 card-hover">
+                    <div class="flex items-center mb-4">
+                        <div class="p-3 rounded-full bg-blue-900 bg-opacity-40 mr-4">
+                            <i data-feather="brain" class="w-6 h-6 neon-text-blue"></i>
+                        </div>
+                        <h3 class="text-xl font-bold neon-text-blue">Mind Uploading</h3>
+                    </div>
+                    <p class="text-sm">
+                        Digital consciousness transfer allowing humans to exist in both biological and synthetic forms,
+                        achieving practical immortality.
+                    </p>
+                </div>
+            </div>
+        </div>
+    </section>
+    <div class="section-divider"></div>
+    <!-- Space Colonization Section -->
+    <section id="space-colonization" class="py-20 px-4 md:px-12 bg-black bg-opacity-70 relative section-focus">
+<div class="container mx-auto">
+            <div class="text-center mb-16">
+                <div class="relative">
+                    <div class="absolute -right-8 -top-4 w-16 h-16 bg-purple-500/20 rounded-full filter blur-xl"></div>
+                    <h2 class="text-3xl md:text-5xl font-bold mb-6 neon-text-blue">
+                        <span class="text-base align-top mr-2 opacity-70">[EVENT]</span>COMPETITION_TIMELINE
+                    </h2>
+                </div>
+                <p class="text-lg md:text-xl max-w-4xl mx-auto bg-black/50 p-4 rounded-lg border border-gray-800 backdrop-blur-sm">
+                    <span class="neon-text-purple">[PHASE_1]</span> Online qualification rounds and submissions,<br>
+                    <span class="neon-text-blue">[PHASE_2]</span> Live finals with industry leaders and investors.
+                </p>
+</div>
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
+                <div class="bg-black bg-opacity-50 p-6 rounded-lg neon-border-purple h-full transition-all duration-300 card-hover">
+                    <div class="mb-4 relative h-40">
+                        <img src="http://static.photos/space/640x360/1" alt="Mars Colony" class="w-full h-full object-cover rounded-lg">
+                        <div class="absolute top-2 left-2 bg-black bg-opacity-70 px-2 py-1 rounded text-xs neon-text-blue">
+                            Terraforming Phase 3
+                        </div>
+                    </div>
+                    <h3 class="text-xl font-bold neon-text-purple mb-2">Qualification Round</h3>
+                    <p class="text-sm mb-4">
+                        Submit your project proposal and technical documentation for initial evaluation.
+                    </p>
+                    <div class="flex justify-between text-xs neon-text-blue">
+                        <span>Deadline: June 15</span>
+                        <span>Teams: 24</span>
+</div>
+                </div>
+                <div class="bg-black bg-opacity-50 p-6 rounded-lg neon-border-blue h-full transition-all duration-300 card-hover">
+                    <div class="mb-4 relative h-40">
+                        <img src="http://static.photos/space/640x360/2" alt="Space Elevator" class="w-full h-full object-cover rounded-lg">
+                        <div class="absolute top-2 left-2 bg-black bg-opacity-70 px-2 py-1 rounded text-xs neon-text-purple">
+                            Operational
+                        </div>
+                    </div>
+                    <h3 class="text-xl font-bold neon-text-blue mb-2">Semi-Finals</h3>
+                    <p class="text-sm mb-4">
+                        Develop working prototypes and present to technical judges.
+                    </p>
+                    <div class="flex justify-between text-xs neon-text-purple">
+                        <span>Date: July 20</span>
+                        <span>Teams: 12</span>
+</div>
+                </div>
+                <div class="bg-black bg-opacity-50 p-6 rounded-lg neon-border-purple h-full transition-all duration-300 card-hover">
+                    <div class="mb-4 relative h-40">
+                        <img src="http://static.photos/space/640x360/3" alt="Generation Ship" class="w-full h-full object-cover rounded-lg">
+                        <div class="absolute top-2 left-2 bg-black bg-opacity-70 px-2 py-1 rounded text-xs neon-text-blue">
+                            En route to Proxima Centauri
+                        </div>
+                    </div>
+                    <h3 class="text-xl font-bold neon-text-purple mb-2">Grand Finals</h3>
+                    <p class="text-sm mb-4">
+                        Live presentations to industry leaders and investors.
+                    </p>
+                    <div class="flex justify-between text-xs neon-text-blue">
+                        <span>Date: August 15</span>
+                        <span>Teams: 6</span>
+</div>
+                </div>
+                <div class="bg-black bg-opacity-50 p-6 rounded-lg neon-border-blue h-full transition-all duration-300 card-hover">
+                    <div class="mb-4 relative h-40">
+                        <img src="http://static.photos/space/640x360/4" alt="Dyson Swarm" class="w-full h-full object-cover rounded-lg">
+                        <div class="absolute top-2 left-2 bg-black bg-opacity-70 px-2 py-1 rounded text-xs neon-text-purple">
+                            Construction Phase 2
+                        </div>
+                    </div>
+                    <h3 class="text-xl font-bold neon-text-blue mb-2">Awards Ceremony</h3>
+                    <p class="text-sm mb-4">
+                        Winners announced and prize distribution.
+                    </p>
+                    <div class="flex justify-between text-xs neon-text-purple">
+                        <span>Date: August 16</span>
+                        <span>Prize: $50,000</span>
+</div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <div class="section-divider"></div>
+    <!-- Quantum Societies Section -->
+    <section id="quantum-societies" class="py-20 px-4 md:px-12 bg-black bg-opacity-70 relative section-focus">
+<div class="container mx-auto">
+            <div class="flex flex-col md:flex-row items-center mb-16">
+                <div class="md:w-1/2 mb-10 md:mb-0">
+                <div class="relative">
+                    <div class="absolute -left-8 -top-4 w-16 h-16 bg-blue-500/20 rounded-full filter blur-xl"></div>
+                    <h2 class="text-3xl md:text-5xl font-bold mb-6 neon-text-purple">
+                        <span class="text-base align-top mr-2 opacity-70">[JUDGES]</span>EXPERT_PANEL
+                    </h2>
+                </div>
+                <p class="text-lg md:text-xl mb-6 bg-black/50 p-4 rounded-lg border border-gray-800 backdrop-blur-sm">
+                    <span class="neon-text-blue">[CRITERIA]</span> Innovation, technical excellence, and real-world impact,<br>
+                    <span class="neon-text-purple">[PANEL]</span> Industry leaders from top tech companies and research institutions.
+                </p>
+<div class="grid grid-cols-2 gap-4 mb-8">
+                        <div class="p-4 bg-black bg-opacity-40 rounded-lg neon-border-blue">
+                            <div class="text-3xl font-bold neon-text-blue mb-2">6</div>
+                            <div class="text-sm">Industry Experts</div>
+                            <div class="text-xs neon-text-purple">Judges</div>
+</div>
+                        <div class="p-4 bg-black bg-opacity-40 rounded-lg neon-border-purple">
+                            <div class="text-3xl font-bold neon-text-purple mb-2">3</div>
+                            <div class="text-sm">Evaluation</div>
+                            <div class="text-xs neon-text-blue">Rounds</div>
+</div>
+                    </div>
+                    <a href="/aifuture.html#timeline" class="px-6 py-2 bg-transparent border border-blue-400 rounded-full text-sm uppercase tracking-wider text-blue-400 hover:bg-opacity-20 hover:bg-blue-900 transition-all inline-block">
+                        MEET_JUDGES
+</a>
+</div>
+                <div class="md:w-1/2 flex justify-center">
+                    <div class="relative w-full max-w-lg">
+                        <div class="aspect-w-16 aspect-h-9">
+                            <img src="http://static.photos/technology/1024x576/2" alt="Quantum Computer" class="rounded-lg neon-border-purple w-full h-auto">
+                        </div>
+                        <div class="absolute -bottom-5 -left-5 bg-black bg-opacity-80 neon-border-blue p-4 rounded-lg w-48">
+                            <h4 class="text-sm font-bold neon-text-blue mb-2">Q-Net Core</h4>
+                            <p class="text-xs">Planetary Quantum Network</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
+                <div class="bg-gradient-to-br from-blue-900 to-purple-900 bg-opacity-40 p-6 rounded-lg neon-border-blue transition-all duration-300 card-hover">
+                    <h3 class="text-xl font-bold neon-text-blue mb-4">Technical Excellence</h3>
+                    <p class="mb-4">
+                        Solutions will be evaluated based on technical sophistication,
+                        innovation in implementation, and robustness of the approach.
+                    </p>
+                    <div class="flex items-center text-sm">
+                        <i data-feather="code" class="w-4 h-4 mr-2 neon-text-purple"></i>
+                        <span>Weight: 40%</span>
+                        <span class="mx-2">|</span>
+                        <span>Criteria #1</span>
+                    </div>
+</div>
+                <div class="bg-gradient-to-br from-purple-900 to-blue-900 bg-opacity-40 p-6 rounded-lg neon-border-purple transition-all duration-300 card-hover">
+                    <h3 class="text-xl font-bold neon-text-purple mb-4">Real-world Impact</h3>
+                    <p class="mb-4">
+                        Projects will be judged on their potential to solve actual problems
+                        and create meaningful improvements in technology or society.
+                    </p>
+                    <div class="flex items-center text-sm">
+                        <i data-feather="award" class="w-4 h-4 mr-2 neon-text-blue"></i>
+                        <span>Weight: 30%</span>
+                        <span class="mx-2">|</span>
+                        <span>Criteria #2</span>
+                    </div>
+</div>
+            </div>
+        </div>
+    </section>
+    <div class="section-divider"></div>
+    <!-- Climate Tech Section -->
+    <section id="climate-tech" class="py-20 px-4 md:px-12 bg-black bg-opacity-70 relative section-focus">
+<div class="container mx-auto">
+            <div class="text-center mb-16">
+                <div class="relative">
+                    <div class="absolute -right-8 -top-4 w-16 h-16 bg-purple-500/20 rounded-full filter blur-xl"></div>
+                    <h2 class="text-3xl md:text-5xl font-bold mb-6 neon-text-blue">
+                        <span class="text-base align-top mr-2 opacity-70">[PRIZES]</span>AWARDS_AND_BENEFITS
+                    </h2>
+                </div>
+                <p class="text-lg md:text-xl max-w-4xl mx-auto bg-black/50 p-4 rounded-lg border border-gray-800 backdrop-blur-sm">
+                    <span class="neon-text-purple">[GRAND_PRIZE]</span> $50,000 cash and mentorship program,<br>
+                    <span class="neon-text-blue">[BENEFITS]</span> All finalists receive investor introductions and media coverage.
+                </p>
+</div>
+            <div class="flex flex-col md:flex-row items-stretch gap-8">
+                <div class="md:w-1/3 bg-black bg-opacity-50 p-6 rounded-lg neon-border-purple transition-all duration-300 card-hover">
+                    <div class="mb-4 h-40 bg-gradient-to-b from-blue-900 to-purple-900 rounded-lg flex items-center justify-center">
+                        <i data-feather="wind" class="w-16 h-16 neon-text-blue"></i>
+                    </div>
+                    <h3 class="text-xl font-bold neon-text-purple mb-3">Grand Prize</h3>
+                    <p class="text-sm mb-4">
+                        $50,000 cash award, year-long mentorship program with industry leaders,
+                        and guaranteed investment meeting with top VCs.
+                    </p>
+                    <div class="w-full bg-gray-800 rounded-full h-2 mb-2">
+                        <div class="bg-blue-500 h-2 rounded-full" style="width: 95%"></div>
+                    </div>
+                    <div class="flex justify-between text-xs neon-text-blue">
+                        <span>Teams</span>
+                        <span>1 Winner</span>
+</div>
+                </div>
+                <div class="md:w-1/3 bg-black bg-opacity-50 p-6 rounded-lg neon-border-blue transition-all duration-300 card-hover">
+                    <div class="mb-4 h-40 bg-gradient-to-b from-purple-900 to-blue-900 rounded-lg flex items-center justify-center">
+                        <i data-feather="droplet" class="w-16 h-16 neon-text-purple"></i>
+                    </div>
+                    <h3 class="text-xl font-bold neon-text-blue mb-3">Runner-up</h3>
+                    <p class="text-sm mb-4">
+                        $15,000 cash award, 6-month mentorship, and participation in
+                        exclusive demo days with potential investors.
+                    </p>
+                    <div class="w-full bg-gray-800 rounded-full h-2 mb-2">
+                        <div class="bg-purple-500 h-2 rounded-full" style="width: 85%"></div>
+                    </div>
+                    <div class="flex justify-between text-xs neon-text-purple">
+                        <span>Teams</span>
+                        <span>2 Winners</span>
+</div>
+                </div>
+                <div class="md:w-1/3 bg-black bg-opacity-50 p-6 rounded-lg neon-border-purple transition-all duration-300 card-hover">
+                    <div class="mb-4 h-40 bg-gradient-to-b from-blue-900 to-purple-900 rounded-lg flex items-center justify-center">
+                        <i data-feather="sun" class="w-16 h-16 neon-text-blue"></i>
+                    </div>
+                    <h3 class="text-xl font-bold neon-text-purple mb-3">Finalists</h3>
+                    <p class="text-sm mb-4">
+                        All finalists receive $5,000, media features, and invitations
+                        to exclusive tech networking events with industry leaders.
+                    </p>
+                    <div class="w-full bg-gray-800 rounded-full h-2 mb-2">
+                        <div class="bg-blue-500 h-2 rounded-full" style="width: 75%"></div>
+                    </div>
+                    <div class="flex justify-between text-xs neon-text-blue">
+                        <span>Teams</span>
+                        <span>6 Finalists</span>
+</div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Call to Action -->
+    <section id="call-to-action" class="py-20 px-4 md:px-12 bg-gradient-to-b from-blue-900 to-purple-900 bg-opacity-70 relative section-focus">
+<div class="container mx-auto text-center">
+            <div class="relative">
+                <div class="absolute inset-0 bg-gradient-to-r from-blue-500/20 to-purple-600/20 blur-3xl -z-10"></div>
+                <h2 class="text-3xl md:text-5xl font-bold mb-6 neon-text-blue">
+                    <span class="text-base align-top mr-2 opacity-70">[REGISTER]</span>COMPETITION_ENTRY
+                </h2>
+            </div>
+            <p class="text-lg md:text-2xl max-w-3xl mx-auto mb-10 bg-black/50 p-6 rounded-lg border border-gray-800 backdrop-blur-sm">
+                <span class="neon-text-purple">[DEADLINE]</span> Team registration closes June 1, 2024<br>
+                <span class="neon-text-blue">[REQUIREMENTS]</span> Teams of 3-5 participants with technical backgrounds.
+            </p>
+<div class="flex flex-col sm:flex-row justify-center gap-4">
+</div>
+        </div>
+    </section>
+    <!-- Footer -->
+    <footer class="py-10 px-4 md:px-12 bg-black bg-opacity-90">
+        <div class="container mx-auto">
+            <div class="flex flex-col md:flex-row justify-between items-center">
+                <div class="mb-6 md:mb-0">
+                    <div class="flex items-center space-x-2 neon-text-blue group">
+                        <div class="relative">
+                            <i data-feather="cpu" class="w-6 h-6 group-hover:text-purple-400 transition-colors"></i>
+                            <div class="absolute -inset-1 rounded-full bg-blue-500/10 blur-sm group-hover:bg-purple-500/10 transition-all"></div>
+                        </div>
+                    <span class="text-xl font-bold">QUANTUMSYNTH_ARENA</span>
+</div>
+<p class="text-sm mt-2 max-w-md">
+                        Quantum computing and AI innovation competition pushing
+                        the boundaries of technology and human potential.
+</p>
+                </div>
+                <div class="flex space-x-6">
+                    <a href="https://www.dwarkainternationalschool.com/" target="_blank" class="neon-text-blue hover:text-white transition-colors">
+                        <i data-feather="globe" class="w-5 h-5"></i>
+                    </a>
+                </div>
+</div>
+            <div class="border-t border-gray-800 mt-8 pt-8 text-center">
+                    <p class="text-sm neon-text-purple">
+                        <span class="opacity-70">[COMPETITION]</span> © 2024 QuantumSynth Arena<br>
+                        <span class="opacity-70">[CONTACT]</span> info@quantumsyntharena.tech
+</p>
+<p class="text-xs mt-2 neon-text-blue">
+                    "Pushing the Boundaries of Innovation."
+</p>
+            </div>
+</div>
+    </footer>
+    <style>
+        @keyframes typing {
+            from { width: 0 }
+            to { width: 100% }
+        }
+        @keyframes blink-caret {
+            from, to { border-color: transparent }
+            50% { border-color: var(--neon-blue) }
+        }
+        .blinking-cursor {
+            border-right: 3px solid var(--neon-blue);
+            animation: blink-caret 0.75s step-end infinite;
+        }
+        .terminal-line {
+            overflow: hidden;
+            white-space: nowrap;
+            margin: 0 0 10px;
+        }
+        .typing-text {
+            display: inline-block;
+            overflow: hidden;
+            animation: typing 3s steps(40, end);
+        }
+        .delay-500 {
+            animation-delay: 1.5s;
+        }
+        .delay-1000 {
+            animation-delay: 3s;
+        }
+        /* New scroll animation styles */
+        .section-focus {
+            opacity: 0.4;
+            filter: blur(2px);
+            transform: scale(0.95);
+            transition: all 0.6s ease-out;
+        }
+        .section-active {
+            opacity: 1;
+            filter: blur(0);
+            transform: scale(1);
+        }
+        .section-next {
+            opacity: 0.5;
+            filter: blur(1px);
+            transform: scale(0.98);
+        }
+    </style>
+<script>
+        // Three.js 3D Scene with Scroll Animation
+        let scene, camera, renderer, controls;
+        let scrollY = 0;
+        let nodes = [];
+        let lines = [];
+        function init3D() {
+// Create scene
+            scene = new THREE.Scene();
+            scene.background = new THREE.Color(0x0a0a20);
+            // Add ambient and directional lights
+            const ambientLight = new THREE.AmbientLight(0x9d00ff, 0.5);
+            scene.add(ambientLight);
+            const directionalLight = new THREE.DirectionalLight(0x0ff0fc, 1);
+            directionalLight.position.set(1, 1, 1);
+            scene.add(directionalLight);
+            // Create camera
+            camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
+            camera.position.z = 5;
+            // Create renderer
+            renderer = new THREE.WebGLRenderer({ antialias: true });
+            renderer.setSize(window.innerWidth, window.innerHeight);
+            document.getElementById('vanta-bg').appendChild(renderer.domElement);
+            // Add orbit controls
+            controls = new THREE.OrbitControls(camera, renderer.domElement);
+            controls.enableDamping = true;
+            controls.dampingFactor = 0.25;
+            controls.enableZoom = false;
+            // Create 3D objects
+            create3DScene();
+            // Handle window resize
+            window.addEventListener('resize', onWindowResize);
+            // Start animation loop
+            animate();
+        }
+        function create3DScene() {
+            // Create floating neural network nodes
+            const geometry = new THREE.SphereGeometry(0.1, 32, 32);
+            const material = new THREE.MeshBasicMaterial({
+                color: 0x9d00ff,
+                transparent: true,
+                opacity: 0.8
+            });
+            // Create nodes and connections
+            nodes = [];
+            lines = [];
+            for (let i = 0; i < 50; i++) {
+const node = new THREE.Mesh(geometry, material.clone());
+                node.position.set(
+                    (Math.random() - 0.5) * 10,
+                    (Math.random() - 0.5) * 10,
+                    (Math.random() - 0.5) * 10
+                );
+                node.userData.speed = Math.random() * 0.01 + 0.005;
+                node.userData.direction = new THREE.Vector3(
+                    Math.random() - 0.5,
+                    Math.random() - 0.5,
+                    Math.random() - 0.5
+                ).normalize();
+                scene.add(node);
+                nodes.push(node);
+            // Add connections
+            if (i > 0) {
+                const lineMaterial = new THREE.LineBasicMaterial({
+                    color: 0x0ff0fc,
+                    transparent: true,
+                    opacity: 0.3
+                });
+                const lineGeometry = new THREE.BufferGeometry().setFromPoints([
+                    nodes[Math.floor(Math.random() * i)].position,
+                    node.position
+                ]);
+                const line = new THREE.Line(lineGeometry, lineMaterial);
+                scene.add(line);
+                lines.push(line);
+            }
+}
+            // Add central glowing sphere
+            const centerSphere = new THREE.Mesh(
+                new THREE.SphereGeometry(0.5, 32, 32),
+                new THREE.MeshBasicMaterial({
+                    color: 0x0ff0fc,
+                    transparent: true,
+                    opacity: 0.7
+                })
+            );
+            centerSphere.userData.isCenter = true;
+            scene.add(centerSphere);
+}
+        function onWindowResize() {
+            camera.aspect = window.innerWidth / window.innerHeight;
+            camera.updateProjectionMatrix();
+            renderer.setSize(window.innerWidth, window.innerHeight);
+        }
+        function animate() {
+            requestAnimationFrame(animate);
+            // Calculate scroll progress (0 to 1)
+            const scrollProgress = scrollY / (document.body.scrollHeight - window.innerHeight);
+            // Update nodes based on scroll
+            nodes.forEach((node, i) => {
+                const scrollEffect = 1 + Math.sin(scrollProgress * Math.PI * 2 + i * 0.1) * 0.5;
+                node.scale.set(scrollEffect, scrollEffect, scrollEffect);
+                // Add some subtle movement
+                const time = Date.now() * 0.001;
+                node.position.x += Math.sin(time * 0.1 + i) * 0.01;
+                node.position.y += Math.cos(time * 0.15 + i) * 0.01;
+                node.position.z += Math.sin(time * 0.2 + i) * 0.01;
+            });
+            // Update lines opacity based on scroll
+            lines.forEach(line => {
+                line.material.opacity = 0.3 + Math.sin(scrollProgress * Math.PI) * 0.2;
+            });
+            // Rotate central sphere based on scroll
+            scene.traverse(obj => {
+                if (obj.userData.isCenter) {
+                    obj.rotation.y = scrollProgress * Math.PI * 2;
+                }
+            });
+            // Update camera position based on scroll
+            camera.position.z = 5 + Math.sin(scrollProgress * Math.PI) * 3;
+            camera.position.y = Math.sin(scrollProgress * Math.PI) * 2;
+            controls.update();
+            renderer.render(scene, camera);
+        }
+        // Track scroll position
+        window.addEventListener('scroll', () => {
+            scrollY = window.scrollY;
+        });
+        // Initialize 3D scene and other effects
+        document.addEventListener('DOMContentLoaded', function() {
+            init3D();
+            // Set up scroll animations
+            const sections = document.querySelectorAll('section');
+            function checkScroll() {
+                const middleOfViewport = window.innerHeight / 2;
+                sections.forEach(section => {
+                    const rect = section.getBoundingClientRect();
+                    const sectionMiddle = rect.top + rect.height / 2;
+                    const distanceFromCenter = Math.abs(middleOfViewport - sectionMiddle);
+                    if (distanceFromCenter < window.innerHeight * 0.3) {
+                        // Active section
+                        section.classList.add('section-active');
+                        section.classList.remove('section-focus', 'section-next');
+                    } else if (distanceFromCenter < window.innerHeight * 0.6) {
+                        // Next section (semi-focused)
+                        section.classList.add('section-next');
+                        section.classList.remove('section-active', 'section-focus');
+                    } else {
+                        // Distant sections (blurred)
+                        section.classList.add('section-focus');
+                        section.classList.remove('section-active', 'section-next');
+                    }
+                });
+            }
+            // Initial check
+            checkScroll();
+            // Check on scroll
+            window.addEventListener('scroll', checkScroll);
+const typingElements = document.querySelectorAll('.typing-text');
+            typingElements.forEach(el => {
+                const text = el.getAttribute('data-text');
+                el.style.width = '0';
+                el.textContent = text;
+                setTimeout(() => {
+                    el.style.animation = `typing 3s steps(${text.length}, end)`;
+                    el.style.width = '100%';
+                }, 100);
+            });
+            // Initialize other components
+            feather.replace();
+            // Mobile menu toggle
+            document.getElementById('mobile-menu-button').addEventListener('click', function() {
+                const menu = document.getElementById('mobile-menu');
+                menu.classList.toggle('hidden');
+            });
+            // Smooth scrolling
+            document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+                anchor.addEventListener('click', function(e) {
+                    e.preventDefault();
+                    const target = document.querySelector(this.getAttribute('href'));
+                    if (target) {
+                        target.scrollIntoView({ behavior: 'smooth' });
+                        document.getElementById('mobile-menu').classList.add('hidden');
+                    }
+                });
+            });
+            // Intersection Observer for animations
+            const observer = new IntersectionObserver((entries) => {
+                entries.forEach(entry => {
+                    if (entry.isIntersecting) {
+                        entry.target.classList.add('animate-fadeInUp');
+                    }
+                });
+            }, { threshold: 0.1 });
+            document.querySelectorAll('.card-hover').forEach(card => {
+                observer.observe(card);
+            });
+        });
+    </script>
+</body>
 </html>