Spaces:
Running
Running
| <html lang="en" class="scroll-smooth"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Center for Strategic and Development Studies</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/animejs@3.2.1/lib/anime.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Space Grotesk', sans-serif; | |
| background-color: #050510; | |
| color: #e0e0ff; | |
| overflow-x: hidden; | |
| background-image: radial-gradient(circle at 50% 50%, rgba(61, 141, 255, 0.06) 0%, transparent 70%); | |
| } | |
| .gradient-text { | |
| background: linear-gradient(90deg, #3d8dff 0%, #8b5cf6 50%, #d946ef 100%); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| font-weight: 700; | |
| } | |
| .glow { | |
| text-shadow: 0 0 15px rgba(61, 141, 255, 0.6); | |
| } | |
| .nav-link::after { | |
| content: ''; | |
| display: block; | |
| width: 0; | |
| height: 2px; | |
| background: linear-gradient(90deg, #3d8dff, #8b5cf6); | |
| transition: width 0.3s; | |
| } | |
| .nav-link:hover::after { | |
| width: 100%; | |
| } | |
| .futuristic-card { | |
| backdrop-filter: blur(16px); | |
| background: rgba(10, 15, 30, 0.8); | |
| border: 1px solid rgba(255, 255, 255, 0.08); | |
| transition: all 0.3s ease; | |
| box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2); | |
| border-radius: 12px; | |
| } | |
| .futuristic-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 15px 30px rgba(61, 141, 255, 0.15); | |
| border-color: rgba(61, 141, 255, 0.3); | |
| } | |
| .timeline-item::before { | |
| content: ''; | |
| position: absolute; | |
| left: -24px; | |
| top: 0; | |
| width: 12px; | |
| height: 12px; | |
| border-radius: 50%; | |
| background: linear-gradient(135deg, #3d8dff, #8b5cf6); | |
| box-shadow: 0 0 0 4px rgba(15, 23, 42, 0.7); | |
| } | |
| .scroll-indicator { | |
| animation: bounce 2s infinite; | |
| } | |
| @keyframes bounce { | |
| 0%, 20%, 50%, 80%, 100% {transform: translateY(0);} | |
| 40% {transform: translateY(-20px);} | |
| 60% {transform: translateY(-10px);} | |
| } | |
| .gradient-border { | |
| position: relative; | |
| } | |
| .gradient-border::before { | |
| content: ''; | |
| position: absolute; | |
| top: -1px; | |
| left: -1px; | |
| right: -1px; | |
| bottom: -1px; | |
| border-radius: 0.75rem; | |
| background: linear-gradient(90deg, #3d8dff, #8b5cf6, #d946ef); | |
| z-index: -1; | |
| opacity: 0.6; | |
| transition: opacity 0.3s ease; | |
| } | |
| .gradient-border:hover::before { | |
| opacity: 0.8; | |
| } | |
| </style> | |
| </head> | |
| <body class="antialiased"> | |
| <!-- Vanta.js Background --> | |
| <div id="vanta-bg" class="fixed inset-0 -z-10"></div> | |
| <!-- Navigation --> | |
| <nav class="fixed w-full backdrop-blur-md bg-black/50 border-b border-white/10 z-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex items-center justify-between h-16"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 font-bold text-xl gradiant-text glow"> | |
| CSDS<span class="text-white">Asia</span> | |
| </div> | |
| </div> | |
| <div class="hidden md:block"> | |
| <div class="ml-10 flex items-center space-x-8"> | |
| <a href="#home" class="nav-link text-white hover:text-blue-300 px-3 py-2 rounded-md text-sm font-medium">Home</a> | |
| <a href="#vision" class="nav-link text-white hover:text-purple-300 px-3 py-2 rounded-md text-sm font-medium">Vision</a> | |
| <a href="#technologies" class="nav-link text-white hover:text-pink-300 px-3 py-2 rounded-md text-sm font-medium">Activities</a> | |
| <a href="#timeline" class="nav-link text-white hover:text-indigo-300 px-3 py-2 rounded-md text-sm font-medium">Timeline</a> | |
| <a href="#contact" class="nav-link text-white hover:text-cyan-300 px-3 py-2 rounded-md text-sm font-medium">Contact</a> | |
| <a href="links.html" class="nav-link text-white hover:text-green-300 px-3 py-2 rounded-md text-sm font-medium">Resources</a> | |
| </div> | |
| </div> | |
| <div class="md:hidden"> | |
| <button id="mobile-menu-button" class="text-white hover:text-gray-300 focus:outline-none"> | |
| <i data-feather="menu"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Mobile menu --> | |
| <div id="mobile-menu" class="hidden md:hidden bg-black/90 border-t border-white/10"> | |
| <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3"> | |
| <a href="#home" class="block px-3 py-2 rounded-md text-base font-medium text-white hover:bg-white/10">Home</a> | |
| <a href="#vision" class="block px-3 py-2 rounded-md text-base font-medium text-white hover:bg-white/10">Vision</a> | |
| <a href="#technologies" class="block px-3 py-2 rounded-md text-base font-medium text-white hover:bg-white/10">Activities</a> | |
| <a href="#timeline" class="block px-3 py-2 rounded-md text-base font-medium text-white hover:bg-white/10">Timeline</a> | |
| <a href="#contact" class="block px-3 py-2 rounded-md text-base font-medium text-white hover:bg-white/10">Contact</a> | |
| <a href="links.html" class="block px-3 py-2 rounded-md text-base font-medium text-white hover:bg-white/10">Resources</a> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section id="home" class="min-h-screen flex items-center justify-center pt-16 px-4 sm:px-6 lg:px-8"> | |
| <div class="max-w-6xl mx-auto text-center"> | |
| <h1 class="text-5xl md:text-7xl font-bold mb-6 leading-tight"> | |
| <span class="gradient-text glow">Center for Strategic and Development Studies</span> | |
| <span class="text-white">Asia</span> | |
| </h1> | |
| <p class="text-xl md:text-2xl text-white/90 max-w-3xl mx-auto mb-12"> | |
| Exploring the frontiers of governance, law and its transformative impact on society and businesses. | |
| </p> | |
| <div class="flex flex-col sm:flex-row justify-center gap-4"> | |
| <a href="#vision" class="px-8 py-3 bg-gradient-to-r from-blue-500 to-purple-600 rounded-full font-medium text-white hover:opacity-90 transition duration-300 shadow-lg"> | |
| Explore the Vision | |
| </a> | |
| <a href="#contact" class="px-8 py-3 border border-white/20 rounded-full font-medium text-white hover:bg-white/10 transition duration-300"> | |
| Join the Movement | |
| </a> | |
| </div> | |
| <div class="mt-24 scroll-indicator"> | |
| <a href="#vision" class="inline-block animate-bounce"> | |
| <i data-feather="chevron-down" class="text-white w-8 h-8"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Vision Section --> | |
| <section id="vision" class="py-20 px-4 sm:px-6 lg:px-8 bg-gradient-to-b from-black/0 to-black/50"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-4xl md:text-5xl font-bold mb-4"> | |
| <span class="gradient-text">Our Singularity</span> | |
| <span class="text-white">Vision</span> | |
| </h2> | |
| <p class="text-xl text-white/80 max-w-3xl mx-auto"> | |
| We envision a future where technology accelerates human potential beyond Earth's boundaries. | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <div class="futuristic-card p-8 rounded-xl"> | |
| <div class="w-14 h-14 bg-gradient-to-r from-blue-500 to-purple-600 rounded-lg flex items-center justify-center mb-6"> | |
| <i data-feather="globe" class="w-6 h-6 text-white"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-white mb-4">Interplanetary Civilization</h3> | |
| <p class="text-white/70"> | |
| Sustainable habitats on Mars and lunar bases as stepping stones to interstellar expansion. | |
| </p> | |
| </div> | |
| <div class="futuristic-card p-8 rounded-xl"> | |
| <div class="w-14 h-14 bg-gradient-to-r from-purple-500 to-pink-600 rounded-lg flex items-center justify-center mb-6"> | |
| <i data-feather="cpu" class="w-6 h-6 text-white"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-white mb-4">AI-Human Symbiosis</h3> | |
| <p class="text-white/70"> | |
| Neural interfaces and augmented cognition creating a seamless blend of biological and artificial intelligence. | |
| </p> | |
| </div> | |
| <div class="futuristic-card p-8 rounded-xl"> | |
| <div class="w-14 h-14 bg-gradient-to-r from-pink-500 to-red-600 rounded-lg flex items-center justify-center mb-6"> | |
| <i data-feather="activity" class="w-6 h-6 text-white"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-white mb-4">Planetary Restoration</h3> | |
| <p class="text-white/70"> | |
| Advanced climate engineering reversing ecological damage and establishing planetary equilibrium. | |
| </p> | |
| </div> | |
| <div class="futuristic-card p-8 rounded-xl"> | |
| <div class="w-14 h-14 bg-gradient-to-r from-red-500 to-orange-600 rounded-lg flex items-center justify-center mb-6"> | |
| <i data-feather="zap" class="w-6 h-6 text-white"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-white mb-4">Quantum Revolution</h3> | |
| <p class="text-white/70"> | |
| Quantum computing solving currently intractable problems in medicine, materials science, and cosmology. | |
| </p> | |
| </div> | |
| <div class="futuristic-card p-8 rounded-xl"> | |
| <div class="w-14 h-14 bg-gradient-to-r from-orange-500 to-yellow-600 rounded-lg flex items-center justify-center mb-6"> | |
| <i data-feather="users" class="w-6 h-6 text-white"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-white mb-4">Post-Scarcity Society</h3> | |
| <p class="text-white/70"> | |
| Molecular manufacturing and fusion energy eliminating material constraints on human flourishing. | |
| </p> | |
| </div> | |
| <div class="futuristic-card p-8 rounded-xl"> | |
| <div class="w-14 h-14 bg-gradient-to-r from-yellow-500 to-green-600 rounded-lg flex items-center justify-center mb-6"> | |
| <i data-feather="star" class="w-6 h-6 text-white"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-white mb-4">Cosmic Consciousness</h3> | |
| <p class="text-white/70"> | |
| Expanded awareness through neuroscience advances unlocking higher states of consciousness. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Technologies Section --> | |
| <section id="technologies" class="py-20 px-4 sm:px-6 lg:px-8 bg-black/30"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-4xl md:text-5xl font-bold mb-4"> | |
| <span class="gradient-text">Breakthrough</span> | |
| <span class="text-white">Technologies</span> | |
| </h2> | |
| <p class="text-xl text-white/80 max-w-3xl mx-auto"> | |
| The foundational innovations that will define the next era of civilization. | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 mb-16"> | |
| <div class="gradient-border p-1 rounded-xl"> | |
| <div class="futuristic-card p-8 rounded-lg h-full"> | |
| <h3 class="text-2xl font-bold text-white mb-6">Quantum Communication Network</h3> | |
| <div class="flex items-center mb-6"> | |
| <div class="w-16 h-16 bg-blue-900/30 rounded-lg flex items-center justify-center mr-4"> | |
| <i data-feather="radio" class="w-8 h-8 text-blue-400"></i> | |
| </div> | |
| <p class="text-white/80"> | |
| Instantaneous data transfer across solar systems using quantum entanglement principles. | |
| </p> | |
| </div> | |
| <div class="flex"> | |
| <span class="inline-block px-3 py-1 rounded-full text-xs font-semibold bg-blue-900/30 text-blue-400 mr-2">Space</span> | |
| <span class="inline-block px-3 py-1 rounded-full text-xs font-semibold bg-purple-900/30 text-purple-400">Quantum</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="gradient-border p-1 rounded-xl"> | |
| <div class="futuristic-card p-8 rounded-lg h-full"> | |
| <h3 class="text-2xl font-bold text-white mb-6">Neural Lace Integration</h3> | |
| <div class="flex items-center mb-6"> | |
| <div class="w-16 h-16 bg-purple-900/30 rounded-lg flex items-center justify-center mr-4"> | |
| <i data-feather="cpu" class="w-8 h-8 text-purple-400"></i> | |
| </div> | |
| <p class="text-white/80"> | |
| Nanoscale mesh that integrates with the human brain, enabling direct neural interface with AI systems. | |
| </p> | |
| </div> | |
| <div class="flex"> | |
| <span class="inline-block px-3 py-1 rounded-full text-xs font-semibold bg-pink-900/30 text-pink-400 mr-2">Biotech</span> | |
| <span class="inline-block px-3 py-1 rounded-full text-xs font-semibold bg-indigo-900/30 text-indigo-400">AI</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="gradient-border p-1 rounded-xl"> | |
| <div class="futuristic-card p-8 rounded-lg h-full"> | |
| <h3 class="text-2xl font-bold text-white mb-6">Atmospheric Reprogramming</h3> | |
| <div class="flex items-center mb-6"> | |
| <div class="w-16 h-16 bg-green-900/30 rounded-lg flex items-center justify-center mr-4"> | |
| <i data-feather="wind" class="w-8 h-8 text-green-400"></i> | |
| </div> | |
| <p class="text-white/80"> | |
| Nanobot swarms that modify atmospheric composition to reverse climate change effects. | |
| </p> | |
| </div> | |
| <div class="flex"> | |
| <span class="inline-block px-3 py-1 rounded-full text-xs font-semibold bg-green-900/30 text-green-400 mr-2">Climate</span> | |
| <span class="inline-block px-3 py-1 rounded-full text-xs font-semibold bg-teal-900/30 text-teal-400">Nano</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="gradient-border p-1 rounded-xl"> | |
| <div class="futuristic-card p-8 rounded-lg h-full"> | |
| <h3 class="text-2xl font-bold text-white mb-6">Dyson Swarm Energy</h3> | |
| <div class="flex items-center mb-6"> | |
| <div class="w-16 h-16 bg-yellow-900/30 rounded-lg flex items-center justify-center mr-4"> | |
| <i data-feather="sun" class="w-8 h-8 text-yellow-400"></i> | |
| </div> | |
| <p class="text-white/80"> | |
| Orbital solar collectors harvesting near-unlimited energy from our star. | |
| </p> | |
| </div> | |
| <div class="flex"> | |
| <span class="inline-block px-3 py-1 rounded-full text-xs font-semibold bg-yellow-900/30 text-yellow-400 mr-2">Energy</span> | |
| <span class="inline-block px-3 py-1 rounded-full text-xs font-semibold bg-orange-900/30 text-orange-400">Space</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center"> | |
| <a href="technologies.html" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-full text-white bg-gradient-to-r from-blue-500 to-purple-600 hover:opacity-90 shadow-lg"> | |
| Explore All Technologies | |
| <i data-feather="arrow-right" class="ml-2 w-5 h-5"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Timeline Section --> | |
| <section id="timeline" class="py-20 px-4 sm:px-6 lg:px-8 bg-gradient-to-b from-black/30 to-black/50"> | |
| <div class="max-w-4xl mx-auto"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-4xl md:text-5xl font-bold mb-4"> | |
| <span class="gradient-text">Singularity</span> | |
| <span class="text-white">Timeline</span> | |
| </h2> | |
| <p class="text-xl text-white/80 max-w-3xl mx-auto"> | |
| Projected milestones on humanity's journey to technological transcendence. | |
| </p> | |
| </div> | |
| <div class="relative"> | |
| <!-- Timeline line --> | |
| <div class="absolute left-4 md:left-1/2 h-full w-0.5 bg-gradient-to-b from-blue-500 to-purple-600 -z-10"></div> | |
| <!-- Timeline items --> | |
| <div class="space-y-12"> | |
| <!-- Item 1 --> | |
| <div class="relative pl-12 md:pl-0 md:pr-12 md:odd:pl-12 md:text-right"> | |
| <div class="timeline-item"> | |
| <div class="futuristic-card p-6 rounded-xl"> | |
| <span class="text-sm font-semibold text-blue-400">2025-2035</span> | |
| <h3 class="text-xl font-bold text-white mt-1 mb-2">Artificial General Intelligence Emergence</h3> | |
| <p class="text-white/70"> | |
| The first true AGI systems achieve human-level cognition across diverse domains. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Item 2 --> | |
| <div class="relative pl-12"> | |
| <div class="timeline-item"> | |
| <div class="futuristic-card p-6 rounded-xl"> | |
| <span class="text-sm font-semibold text-purple-400">2035-2045</span> | |
| <h3 class="text-xl font-bold text-white mt-1 mb-2">Mars Permanent Settlement</h3> | |
| <p class="text-white/70"> | |
| Self-sustaining colony established with over 10,000 residents living under domes. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Item 3 --> | |
| <div class="relative pl-12 md:pl-0 md:pr-12 md:odd:pl-12 md:text-right"> | |
| <div class="timeline-item"> | |
| <div class="futuristic-card p-6 rounded-xl"> | |
| <span class="text-sm font-semibold text-pink-400">2045-2055</span> | |
| <h3 class="text-xl font-bold text-white mt-1 mb-2">Human-Machine Merger</h3> | |
| <p class="text-white/70"> | |
| Neural interfaces become ubiquitous, blurring the line between human and artificial cognition. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Item 4 --> | |
| <div class="relative pl-12"> | |
| <div class="timeline-item"> | |
| <div class="futuristic-card p-6 rounded-xl"> | |
| <span class="text-sm font-semibold text-green-400">2055-2075</span> | |
| <h3 class="text-xl font-bold text-white mt-1 mb-2">Climate Restoration Completion</h3> | |
| <p class="text-white/70"> | |
| Atmospheric CO2 levels returned to pre-industrial levels through advanced geoengineering. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Item 5 --> | |
| <div class="relative pl-12 md:pl-0 md:pr-12 md:odd:pl-12 md:text-right"> | |
| <div class="timeline-item"> | |
| <div class="futuristic-card p-6 rounded-xl"> | |
| <span class="text-sm font-semibold text-yellow-400">2075-2100</span> | |
| <h3 class="text-xl font-bold text-white mt-1 mb-2">Interstellar Probes Launch</h3> | |
| <p class="text-white/70"> | |
| First light-sail missions to nearby star systems with AI-driven exploration systems. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact Section --> | |
| <section id="contact" class="py-20 px-4 sm:px-6 lg:px-8 bg-black/40"> | |
| <div class="max-w-4xl mx-auto"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-4xl md:text-5xl font-bold mb-4"> | |
| <span class="gradient-text">Join the</span> | |
| <span class="text-white">Evolution</span> | |
| </h2> | |
| <p class="text-xl text-white/80 max-w-3xl mx-auto"> | |
| Connect with our network of visionaries, scientists, and future-shapers. | |
| </p> | |
| </div> | |
| <div class="futuristic-card p-8 rounded-xl"> | |
| <form class="space-y-6"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div> | |
| <label for="name" class="block text-sm font-medium text-white/80 mb-1">Full Name</label> | |
| <input type="text" id="name" class="w-full px-4 py-3 bg-white/5 border border-white/10 rounded-lg text-white placeholder-white/30 focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| </div> | |
| <div> | |
| <label for="email" class="block text-sm font-medium text-white/80 mb-1">Email Address</label> | |
| <input type="email" id="email" class="w-full px-4 py-3 bg-white/5 border border-white/10 rounded-lg text-white placeholder-white/30 focus:outline-none focus:ring-2 focus:ring-purple-500"> | |
| </div> | |
| </div> | |
| <div> | |
| <label for="interest" class="block text-sm font-medium text-white/80 mb-1">Area of Interest</label> | |
| <select id="interest" class="w-full px-4 py-3 bg-white/5 border border-white/10 rounded-lg text-white placeholder-white/30 focus:outline-none focus:ring-2 focus:ring-pink-500 appearance-none"> | |
| <option>Select your interest</option> | |
| <option>AI Development</option> | |
| <option>Space Colonization</option> | |
| <option>Quantum Computing</option> | |
| <option>Neural Interfaces</option> | |
| <option>Climate Restoration</option> | |
| <option>Investment Opportunities</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label for="message" class="block text-sm font-medium text-white/80 mb-1">Your Message</label> | |
| <textarea id="message" rows="4" class="w-full px-4 py-3 bg-white/5 border border-white/10 rounded-lg text-white placeholder-white/30 focus:outline-none focus:ring-2 focus:ring-indigo-500"></textarea> | |
| </div> | |
| <div> | |
| <button type="submit" class="w-full px-6 py-3 bg-gradient-to-r from-blue-500 to-purple-600 rounded-lg font-medium text-white hover:opacity-90 transition duration-300 shadow-lg"> | |
| Submit Application | |
| </button> | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="py-12 px-4 sm:px-6 lg:px-8 border-t border-white/10"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="mb-6 md:mb-0"> | |
| <div class="font-bold text-xl gradiant-text glow"> | |
| Singularity<span class="text-white">Horizon</span> | |
| </div> | |
| <p class="text-white/60 mt-2 text-sm"> | |
| Exploring the frontiers of human potential. | |
| </p> | |
| </div> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="text-white/60 hover:text-blue-400 transition duration-300"> | |
| <i data-feather="twitter"></i> | |
| </a> | |
| <a href="#" class="text-white/60 hover:text-purple-400 transition duration-300"> | |
| <i data-feather="linkedin"></i> | |
| </a> | |
| <a href="#" class="text-white/60 hover:text-pink-400 transition duration-300"> | |
| <i data-feather="github"></i> | |
| </a> | |
| <a href="#" class="text-white/60 hover:text-green-400 transition duration-300"> | |
| <i data-feather="youtube"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div class="mt-8 pt-8 border-t border-white/10 flex flex-col md:flex-row justify-between items-center"> | |
| <p class="text-white/50 text-sm text-center md:text-left"> | |
| © 2025-2045 Center for Strategic and Development Studies. All rights reserved. | |
| </p> | |
| <div class="mt-4 md:mt-0 flex space-x-6"> | |
| <a href="#" class="text-white/60 hover:text-white text-sm">Privacy Policy</a> | |
| <a href="#" class="text-white/60 hover:text-white text-sm">Terms of Service</a> | |
| <a href="#" class="text-white/60 hover:text-white text-sm">Contact</a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Initialize Vanta.js background | |
| VANTA.GLOBE({ | |
| el: "#vanta-bg", | |
| mouseControls: true, | |
| touchControls: true, | |
| gyroControls: false, | |
| minHeight: 200.00, | |
| minWidth: 200.00, | |
| scale: 1.00, | |
| scaleMobile: 1.00, | |
| color: 0x3d8dff, | |
| backgroundColor: 0x0a0a16, | |
| size: 0.8 | |
| }); | |
| // Mobile menu toggle | |
| document.getElementById('mobile-menu-button').addEventListener('click', function() { | |
| const menu = document.getElementById('mobile-menu'); | |
| menu.classList.toggle('hidden'); | |
| }); | |
| // Smooth scrolling for navigation links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function(e) { | |
| e.preventDefault(); | |
| document.querySelector(this.getAttribute('href')).scrollIntoView({ | |
| behavior: 'smooth' | |
| }); | |
| }); | |
| }); | |
| // Initialize Feather Icons | |
| feather.replace(); | |
| // Animation for futuristic cards on scroll | |
| document.addEventListener('DOMContentLoaded', function() { | |
| anime({ | |
| targets: '.futuristic-card', | |
| translateY: [50, 0], | |
| opacity: [0, 1], | |
| duration: 1000, | |
| delay: anime.stagger(100), | |
| easing: 'easeOutExpo' | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |