Spaces:

Meghatron
/

deepsite-project-xd7d8

Running

App Files Files Community

Meghatron commited on Mar 17

Commit

8281a77

verified ·

1 Parent(s): f3b528a

Initial DeepSite commit

Browse files

Files changed (3) hide show

README.md +9 -6
index.html +648 -19
script.js +235 -0

README.md CHANGED Viewed

@@ -1,10 +1,13 @@
 ---
-title: Deepsite Project Xd7d8
-emoji: 💻
-colorFrom: indigo
-colorTo: green
 sdk: static
-pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: DeepSite Project
+colorFrom: purple
+colorTo: purple
 sdk: static
+emoji: 🖥️
+tags:
+  - deepsite-v4
 ---
+# DeepSite Project
+This project has been created with [DeepSite](https://deepsite.hf.co) AI Vibe Coding.

index.html CHANGED Viewed

@@ -1,19 +1,648 @@
-<!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" class="scroll-smooth">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Neural Nexus | Future of AI Awareness</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/lucide@latest"></script>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    fontFamily: {
+                        sans: ['Inter', 'sans-serif'],
+                        display: ['Space Grotesk', 'sans-serif'],
+                    },
+                    colors: {
+                        neural: {
+                            dark: '#0a0a0f',
+                            surface: '#13131f',
+                            purple: '#8b5cf6',
+                            cyan: '#06b6d4',
+                            pink: '#ec4899',
+                            blue: '#3b82f6',
+                        }
+                    },
+                    animation: {
+                        'gradient-x': 'gradient-x 15s ease infinite',
+                        'float': 'float 6s ease-in-out infinite',
+                        'pulse-glow': 'pulse-glow 2s ease-in-out infinite',
+                        'spin-slow': 'spin 20s linear infinite',
+                    },
+                    keyframes: {
+                        'gradient-x': {
+                            '0%, 100%': {
+                                'background-size': '200% 200%',
+                                'background-position': 'left center'
+                            },
+                            '50%': {
+                                'background-size': '200% 200%',
+                                'background-position': 'right center'
+                            },
+                        },
+                        'float': {
+                            '0%, 100%': { transform: 'translateY(0)' },
+                            '50%': { transform: 'translateY(-20px)' },
+                        },
+                        'pulse-glow': {
+                            '0%, 100%': { opacity: 0.5, transform: 'scale(1)' },
+                            '50%': { opacity: 0.8, transform: 'scale(1.05)' },
+                        }
+                    }
+                }
+            }
+        }
+    </script>
+    <style>
+        body {
+            background-color: #0a0a0f;
+            color: #ffffff;
+            overflow-x: hidden;
+        }
+        .gradient-text {
+            background: linear-gradient(135deg, #8b5cf6 0%, #06b6d4 50%, #ec4899 100%);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+        }
+        .glass-card {
+            background: rgba(19, 19, 31, 0.6);
+            backdrop-filter: blur(20px);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
+        }
+        .glow-border {
+            position: relative;
+        }
+        .glow-border::before {
+            content: '';
+            position: absolute;
+            inset: -2px;
+            border-radius: inherit;
+            padding: 2px;
+            background: linear-gradient(135deg, #8b5cf6, #06b6d4, #ec4899);
+            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+            mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+            -webkit-mask-composite: xor;
+            mask-composite: exclude;
+            opacity: 0;
+            transition: opacity 0.3s;
+        }
+        .glow-border:hover::before {
+            opacity: 1;
+        }
+        .grid-bg {
+            background-image:
+                linear-gradient(rgba(139, 92, 246, 0.03) 1px, transparent 1px),
+                linear-gradient(90deg, rgba(139, 92, 246, 0.03) 1px, transparent 1px);
+            background-size: 50px 50px;
+        }
+        .noise-bg {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            pointer-events: none;
+            z-index: 50;
+            opacity: 0.03;
+            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
+        }
+        .mouse-glow {
+            position: fixed;
+            width: 400px;
+            height: 400px;
+            background: radial-gradient(circle, rgba(139, 92, 246, 0.15) 0%, transparent 70%);
+            pointer-events: none;
+            z-index: 40;
+            transform: translate(-50%, -50%);
+            transition: all 0.1s ease;
+        }
+        .scramble-text {
+            font-family: 'Space Grotesk', monospace;
+        }
+        .resource-card {
+            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+        }
+        .resource-card:hover {
+            transform: translateY(-8px) scale(1.02);
+        }
+        .newsletter-input {
+            background: rgba(255, 255, 255, 0.05);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            transition: all 0.3s;
+        }
+        .newsletter-input:focus {
+            border-color: #8b5cf6;
+            box-shadow: 0 0 20px rgba(139, 92, 246, 0.3);
+            outline: none;
+        }
+        .btn-primary {
+            background: linear-gradient(135deg, #8b5cf6 0%, #06b6d4 100%);
+            transition: all 0.3s;
+            position: relative;
+            overflow: hidden;
+        }
+        .btn-primary::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: -100%;
+            width: 100%;
+            height: 100%;
+            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
+            transition: left 0.5s;
+        }
+        .btn-primary:hover::before {
+            left: 100%;
+        }
+        .btn-primary:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 10px 30px -10px rgba(139, 92, 246, 0.5);
+        }
+    </style>
+</head>
+<body class="antialiased selection:bg-neural-purple selection:text-white">
+    <!-- Noise Overlay -->
+    <div class="noise-bg"></div>
+    <!-- Mouse Glow Effect -->
+    <div class="mouse-glow" id="mouseGlow"></div>
+    <!-- Navigation -->
+    <nav class="fixed top-0 w-full z-50 glass-card border-b border-white/5">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="flex justify-between items-center h-20">
+                <div class="flex items-center gap-3 group cursor-pointer">
+                    <div class="w-10 h-10 rounded-xl bg-gradient-to-br from-neural-purple to-neural-cyan flex items-center justify-center transform group-hover:rotate-12 transition-transform">
+                        <i data-lucide="brain-circuit" class="w-6 h-6 text-white"></i>
+                    </div>
+                    <span class="font-display font-bold text-2xl tracking-tight">
+                        Neural<span class="gradient-text">Nexus</span>
+                    </span>
+                </div>
+                <div class="hidden md:flex items-center gap-8">
+                    <a href="#awareness" class="text-sm font-medium text-gray-400 hover:text-white transition-colors">Awareness</a>
+                    <a href="#resources" class="text-sm font-medium text-gray-400 hover:text-white transition-colors">Resources</a>
+                    <a href="#newsletter" class="text-sm font-medium text-gray-400 hover:text-white transition-colors">Newsletter</a>
+                    <a href="#community" class="text-sm font-medium text-gray-400 hover:text-white transition-colors">Community</a>
+                </div>
+                <div class="flex items-center gap-4">
+                    <button class="hidden md:block text-sm font-medium text-gray-400 hover:text-white transition-colors">Sign In</button>
+                    <button class="btn-primary px-6 py-2.5 rounded-full text-sm font-semibold text-white">
+                        Get Started
+                    </button>
+                    <button class="md:hidden text-white" id="mobileMenuBtn">
+                        <i data-lucide="menu" class="w-6 h-6"></i>
+                    </button>
+                </div>
+            </div>
+        </div>
+        <!-- Mobile Menu -->
+        <div class="md:hidden hidden glass-card border-t border-white/5" id="mobileMenu">
+            <div class="px-4 py-6 space-y-4">
+                <a href="#awareness" class="block text-base font-medium text-gray-400 hover:text-white">Awareness</a>
+                <a href="#resources" class="block text-base font-medium text-gray-400 hover:text-white">Resources</a>
+                <a href="#newsletter" class="block text-base font-medium text-gray-400 hover:text-white">Newsletter</a>
+                <a href="#community" class="block text-base font-medium text-gray-400 hover:text-white">Community</a>
+            </div>
+        </div>
+    </nav>
+    <!-- Hero Section -->
+    <section class="relative min-h-screen flex items-center justify-center pt-20 overflow-hidden grid-bg">
+        <!-- Background Elements -->
+        <div class="absolute inset-0 overflow-hidden">
+            <div class="absolute top-1/4 left-1/4 w-96 h-96 bg-neural-purple/20 rounded-full blur-3xl animate-pulse-glow"></div>
+            <div class="absolute bottom-1/4 right-1/4 w-96 h-96 bg-neural-cyan/20 rounded-full blur-3xl animate-pulse-glow" style="animation-delay: 1s;"></div>
+            <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-[800px] h-[800px] bg-neural-pink/10 rounded-full blur-3xl animate-spin-slow"></div>
+        </div>
+        <div class="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
+            <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full glass-card border border-neural-purple/30 mb-8 animate-float">
+                <span class="w-2 h-2 rounded-full bg-green-400 animate-pulse"></span>
+                <span class="text-sm font-medium text-gray-300">Weekly AI Insights Drop Every Monday</span>
+                <i data-lucide="arrow-right" class="w-4 h-4 text-neural-purple"></i>
+            </div>
+            <h1 class="font-display font-bold text-5xl md:text-7xl lg:text-8xl leading-tight mb-6">
+                Decode the <br />
+                <span class="scramble-text gradient-text" id="scrambleText">FUTURE</span>
+            </h1>
+            <p class="max-w-2xl mx-auto text-lg md:text-xl text-gray-400 mb-10 leading-relaxed">
+                Stay ahead of the curve with cutting-edge AI awareness, curated learning resources,
+                and insider tips delivered weekly to your inbox.
+            </p>
+            <div class="flex flex-col sm:flex-row gap-4 justify-center items-center mb-12">
+                <button class="btn-primary px-8 py-4 rounded-full text-base font-semibold text-white flex items-center gap-2 group" onclick="document.getElementById('newsletter').scrollIntoView({behavior: 'smooth'})">
+                    Subscribe to Newsletter
+                    <i data-lucide="zap" class="w-5 h-5 group-hover:animate-pulse"></i>
+                </button>
+                <button class="px-8 py-4 rounded-full text-base font-semibold text-white border border-white/20 hover:bg-white/5 transition-all flex items-center gap-2" onclick="document.getElementById('resources').scrollIntoView({behavior: 'smooth'})">
+                    Explore Resources
+                    <i data-lucide="arrow-down" class="w-5 h-5"></i>
+                </button>
+            </div>
+            <!-- Trust Indicators -->
+            <div class="flex flex-wrap justify-center gap-8 text-sm text-gray-500 font-medium">
+                <div class="flex items-center gap-2">
+                    <i data-lucide="shield-check" class="w-4 h-4 text-neural-cyan"></i>
+                    <span>Trusted by 50K+ readers</span>
+                </div>
+                <div class="flex items-center gap-2">
+                    <i data-lucide="lock" class="w-4 h-4 text-neural-purple"></i>
+                    <span>No spam, ever</span>
+                </div>
+                <div class="flex items-center gap-2">
+                    <i data-lucide="refresh-cw" class="w-4 h-4 text-neural-pink"></i>
+                    <span>Unsubscribe anytime</span>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- AI Awareness Section -->
+    <section id="awareness" class="py-24 relative">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="text-center mb-16">
+                <h2 class="font-display font-bold text-4xl md:text-5xl mb-4">
+                    Why <span class="gradient-text">AI Awareness</span> Matters
+                </h2>
+                <p class="text-gray-400 max-w-2xl mx-auto text-lg">
+                    Artificial Intelligence is reshaping every industry. Understanding its impact
+                    isn't optional—it's essential for future-proofing your career and life.
+                </p>
+            </div>
+            <div class="grid md:grid-cols-3 gap-8">
+                <!-- Card 1 -->
+                <div class="glass-card glow-border rounded-2xl p-8 resource-card group">
+                    <div class="w-14 h-14 rounded-xl bg-gradient-to-br from-neural-purple/20 to-neural-purple/5 flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
+                        <i data-lucide="trending-up" class="w-7 h-7 text-neural-purple"></i>
+                    </div>
+                    <h3 class="font-display font-semibold text-xl mb-3 text-white">Rapid Evolution</h3>
+                    <p class="text-gray-400 leading-relaxed mb-4">
+                        AI capabilities are doubling every 6 months. Stay informed about breakthroughs
+                        before they become mainstream.
+                    </p>
+                    <a href="#" class="text-neural-purple font-medium flex items-center gap-1 hover:gap-2 transition-all">
+                        Learn more <i data-lucide="arrow-right" class="w-4 h-4"></i>
+                    </a>
+                </div>
+                <!-- Card 2 -->
+                <div class="glass-card glow-border rounded-2xl p-8 resource-card group">
+                    <div class="w-14 h-14 rounded-xl bg-gradient-to-br from-neural-cyan/20 to-neural-cyan/5 flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
+                        <i data-lucide="briefcase" class="w-7 h-7 text-neural-cyan"></i>
+                    </div>
+                    <h3 class="font-display font-semibold text-xl mb-3 text-white">Career Impact</h3>
+                    <p class="text-gray-400 leading-relaxed mb-4">
+                        85% of jobs will be augmented by AI by 2025. Discover how to leverage AI
+                        rather than be replaced by it.
+                    </p>
+                    <a href="#" class="text-neural-cyan font-medium flex items-center gap-1 hover:gap-2 transition-all">
+                        Explore careers <i data-lucide="arrow-right" class="w-4 h-4"></i>
+                    </a>
+                </div>
+                <!-- Card 3 -->
+                <div class="glass-card glow-border rounded-2xl p-8 resource-card group">
+                    <div class="w-14 h-14 rounded-xl bg-gradient-to-br from-neural-pink/20 to-neural-pink/5 flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
+                        <i data-lucide="scale" class="w-7 h-7 text-neural-pink"></i>
+                    </div>
+                    <h3 class="font-display font-semibold text-xl mb-3 text-white">Ethical Considerations</h3>
+                    <p class="text-gray-400 leading-relaxed mb-4">
+                        Navigate the moral complexities of AI deployment. Privacy, bias, and
+                        autonomy are battles being fought now.
+                    </p>
+                    <a href="#" class="text-neural-pink font-medium flex items-center gap-1 hover:gap-2 transition-all">
+                        Read ethics guide <i data-lucide="arrow-right" class="w-4 h-4"></i>
+                    </a>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Learning Resources Section -->
+    <section id="resources" class="py-24 relative overflow-hidden">
+        <div class="absolute inset-0 bg-gradient-to-b from-transparent via-neural-purple/5 to-transparent"></div>
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
+            <div class="flex flex-col md:flex-row justify-between items-end mb-16 gap-6">
+                <div class="max-w-2xl">
+                    <h2 class="font-display font-bold text-4xl md:text-5xl mb-4">
+                        Curated <span class="gradient-text">Learning Paths</span>
+                    </h2>
+                    <p class="text-gray-400 text-lg">
+                        Hand-picked resources ranging from beginner-friendly introductions
+                        to advanced technical deep dives.
+                    </p>
+                </div>
+                <button class="px-6 py-3 rounded-full border border-white/20 text-white font-medium hover:bg-white/5 transition-all flex items-center gap-2">
+                    View All Resources
+                    <i data-lucide="external-link" class="w-4 h-4"></i>
+                </button>
+            </div>
+            <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
+                <!-- Resource 1 -->
+                <div class="glass-card rounded-2xl overflow-hidden resource-card group cursor-pointer">
+                    <div class="h-48 bg-gradient-to-br from-neural-purple to-blue-600 relative overflow-hidden">
+                        <img src="https://static.photos/technology/640x360/42" alt="AI Basics" class="w-full h-full object-cover opacity-50 mix-blend-overlay group-hover:scale-110 transition-transform duration-500">
+                        <div class="absolute inset-0 bg-gradient-to-t from-neural-dark to-transparent"></div>
+                        <div class="absolute top-4 right-4 px-3 py-1 rounded-full bg-white/10 backdrop-blur-md text-xs font-semibold text-white border border-white/20">
+                            Beginner
+                        </div>
+                    </div>
+                    <div class="p-6">
+                        <div class="flex items-center gap-2 mb-3">
+                            <i data-lucide="book-open" class="w-4 h-4 text-neural-purple"></i>
+                            <span class="text-xs font-medium text-gray-400">Foundation Course</span>
+                        </div>
+                        <h3 class="font-display font-semibold text-lg mb-2 text-white group-hover:text-neural-purple transition-colors">AI Fundamentals 101</h3>
+                        <p class="text-sm text-gray-400 mb-4">Master the basics of machine learning, neural networks, and data science.</p>
+                        <div class="flex items-center justify-between">
+                            <span class="text-xs text-gray-500">12 lessons • 4 hours</span>
+                            <i data-lucide="arrow-up-right" class="w-5 h-5 text-gray-400 group-hover:text-neural-purple transition-colors"></i>
+                        </div>
+                    </div>
+                </div>
+                <!-- Resource 2 -->
+                <div class="glass-card rounded-2xl overflow-hidden resource-card group cursor-pointer">
+                    <div class="h-48 bg-gradient-to-br from-neural-cyan to-teal-600 relative overflow-hidden">
+                        <img src="https://static.photos/technology/640x360/88" alt="Prompt Engineering" class="w-full h-full object-cover opacity-50 mix-blend-overlay group-hover:scale-110 transition-transform duration-500">
+                        <div class="absolute inset-0 bg-gradient-to-t from-neural-dark to-transparent"></div>
+                        <div class="absolute top-4 right-4 px-3 py-1 rounded-full bg-white/10 backdrop-blur-md text-xs font-semibold text-white border border-white/20">
+                            Intermediate
+                        </div>
+                    </div>
+                    <div class="p-6">
+                        <div class="flex items-center gap-2 mb-3">
+                            <i data-lucide="terminal" class="w-4 h-4 text-neural-cyan"></i>
+                            <span class="text-xs font-medium text-gray-400">Practical Guide</span>
+                        </div>
+                        <h3 class="font-display font-semibold text-lg mb-2 text-white group-hover:text-neural-cyan transition-colors">Prompt Engineering Mastery</h3>
+                        <p class="text-sm text-gray-400 mb-4">Learn to communicate effectively with LLMs and generative AI models.</p>
+                        <div class="flex items-center justify-between">
+                            <span class="text-xs text-gray-500">8 lessons • 3 hours</span>
+                            <i data-lucide="arrow-up-right" class="w-5 h-5 text-gray-400 group-hover:text-neural-cyan transition-colors"></i>
+                        </div>
+                    </div>
+                </div>
+                <!-- Resource 3 -->
+                <div class="glass-card rounded-2xl overflow-hidden resource-card group cursor-pointer">
+                    <div class="h-48 bg-gradient-to-br from-neural-pink to-rose-600 relative overflow-hidden">
+                        <img src="https://static.photos/technology/640x360/156" alt="AI Ethics" class="w-full h-full object-cover opacity-50 mix-blend-overlay group-hover:scale-110 transition-transform duration-500">
+                        <div class="absolute inset-0 bg-gradient-to-t from-neural-dark to-transparent"></div>
+                        <div class="absolute top-4 right-4 px-3 py-1 rounded-full bg-white/10 backdrop-blur-md text-xs font-semibold text-white border border-white/20">
+                            Advanced
+                        </div>
+                    </div>
+                    <div class="p-6">
+                        <div class="flex items-center gap-2 mb-3">
+                            <i data-lucide="shield" class="w-4 h-4 text-neural-pink"></i>
+                            <span class="text-xs font-medium text-gray-400">Case Studies</span>
+                        </div>
+                        <h3 class="font-display font-semibold text-lg mb-2 text-white group-hover:text-neural-pink transition-colors">AI Ethics & Governance</h3>
+                        <p class="text-sm text-gray-400 mb-4">Deep dive into bias mitigation, responsible AI, and regulatory frameworks.</p>
+                        <div class="flex items-center justify-between">
+                            <span class="text-xs text-gray-500">6 lessons • 5 hours</span>
+                            <i data-lucide="arrow-up-right" class="w-5 h-5 text-gray-400 group-hover:text-neural-pink transition-colors"></i>
+                        </div>
+                    </div>
+                </div>
+                <!-- Resource 4 -->
+                <div class="glass-card rounded-2xl overflow-hidden resource-card group cursor-pointer">
+                    <div class="h-48 bg-gradient-to-br from-orange-500 to-yellow-500 relative overflow-hidden">
+                        <img src="https://static.photos/technology/640x360/203" alt="Future Trends" class="w-full h-full object-cover opacity-50 mix-blend-overlay group-hover:scale-110 transition-transform duration-500">
+                        <div class="absolute inset-0 bg-gradient-to-t from-neural-dark to-transparent"></div>
+                        <div class="absolute top-4 right-4 px-3 py-1 rounded-full bg-white/10 backdrop-blur-md text-xs font-semibold text-white border border-white/20">
+                            Expert
+                        </div>
+                    </div>
+                    <div class="p-6">
+                        <div class="flex items-center gap-2 mb-3">
+                            <i data-lucide="sparkles" class="w-4 h-4 text-orange-400"></i>
+                            <span class="text-xs font-medium text-gray-400">Future Forward</span>
+                        </div>
+                        <h3 class="font-display font-semibold text-lg mb-2 text-white group-hover:text-orange-400 transition-colors">Emerging Tech 2024</h3>
+                        <p class="text-sm text-gray-400 mb-4">Explore AGI, quantum ML, and the next frontier of artificial intelligence.</p>
+                        <div class="flex items-center justify-between">
+                            <span class="text-xs text-gray-500">10 lessons • 6 hours</span>
+                            <i data-lucide="arrow-up-right" class="w-5 h-5 text-gray-400 group-hover:text-orange-400 transition-colors"></i>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Newsletter Section -->
+    <section id="newsletter" class="py-24 relative">
+        <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="glass-card rounded-3xl p-8 md:p-16 relative overflow-hidden">
+                <!-- Decorative Elements -->
+                <div class="absolute top-0 right-0 w-64 h-64 bg-neural-purple/20 rounded-full blur-3xl"></div>
+                <div class="absolute bottom-0 left-0 w-64 h-64 bg-neural-cyan/20 rounded-full blur-3xl"></div>
+                <div class="relative z-10 text-center">
+                    <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-white/5 border border-white/10 mb-6">
+                        <i data-lucide="mail" class="w-4 h-4 text-neural-purple"></i>
+                        <span class="text-sm font-medium text-gray-300">Weekly Digest</span>
+                    </div>
+                    <h2 class="font-display font-bold text-4xl md:text-5xl mb-4">
+                        Get AI Tips in Your Inbox
+                    </h2>
+                    <p class="text-gray-400 text-lg mb-8 max-w-2xl mx-auto">
+                        Join 50,000+ forward-thinkers receiving weekly curated AI insights,
+                        tool recommendations, and exclusive learning resources.
+                    </p>
+                    <form class="max-w-md mx-auto mb-8" id="newsletterForm">
+                        <div class="flex flex-col sm:flex-row gap-3">
+                            <input
+                                type="email"
+                                placeholder="enter your email"
+                                class="newsletter-input flex-1 px-6 py-4 rounded-full text-white placeholder-gray-500"
+                                required
+                            >
+                            <button
+                                type="submit"
+                                class="btn-primary px-8 py-4 rounded-full font-semibold text-white whitespace-nowrap flex items-center justify-center gap-2"
+                                id="submitBtn"
+                            >
+                                <span>Subscribe</span>
+                                <i data-lucide="send" class="w-4 h-4"></i>
+                            </button>
+                        </div>
+                        <p class="text-xs text-gray-500 mt-3 text-left sm:text-center">
+                            We respect your privacy. Unsubscribe at any time.
+                        </p>
+                    </form>
+                    <div class="flex flex-wrap justify-center gap-6 text-sm text-gray-400">
+                        <div class="flex items-center gap-2">
+                            <i data-lucide="check-circle" class="w-4 h-4 text-green-400"></i>
+                            <span>Weekly curated content</span>
+                        </div>
+                        <div class="flex items-center gap-2">
+                            <i data-lucide="check-circle" class="w-4 h-4 text-green-400"></i>
+                            <span>Exclusive tool discounts</span>
+                        </div>
+                        <div class="flex items-center gap-2">
+                            <i data-lucide="check-circle" class="w-4 h-4 text-green-400"></i>
+                            <span>Community access</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Community/Stats Section -->
+    <section id="community" class="py-24 relative overflow-hidden">
+        <div class="absolute inset-0 grid-bg opacity-30"></div>
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
+            <div class="grid md:grid-cols-4 gap-8 mb-16">
+                <div class="text-center">
+                    <div class="font-display font-bold text-4xl md:text-5xl gradient-text mb-2 counter" data-target="50000">0</div>
+                    <div class="text-gray-400 font-medium">Active Learners</div>
+                </div>
+                <div class="text-center">
+                    <div class="font-display font-bold text-4xl md:text-5xl gradient-text mb-2 counter" data-target="120">0</div>
+                    <div class="text-gray-400 font-medium">Weekly Issues</div>
+                </div>
+                <div class="text-center">
+                    <div class="font-display font-bold text-4xl md:text-5xl gradient-text mb-2 counter" data-target="350">0</div>
+                    <div class="text-gray-400 font-medium">Curated Resources</div>
+                </div>
+                <div class="text-center">
+                    <div class="font-display font-bold text-4xl md:text-5xl gradient-text mb-2 counter" data-target="98">0</div>
+                    <div class="text-gray-400 font-medium">% Satisfaction</div>
+                </div>
+            </div>
+            <div class="glass-card rounded-2xl p-8 md:p-12 text-center">
+                <h3 class="font-display font-bold text-2xl md:text-3xl mb-4">Join the Community</h3>
+                <p class="text-gray-400 mb-8 max-w-2xl mx-auto">
+                    Connect with fellow AI enthusiasts, share insights, and get early access to new features
+                    and exclusive content.
+                </p>
+                <div class="flex flex-col sm:flex-row gap-4 justify-center">
+                    <button class="px-8 py-3 rounded-full bg-white/5 border border-white/10 text-white font-medium hover:bg-white/10 transition-all flex items-center justify-center gap-2">
+                        <i data-lucide="message-circle" class="w-5 h-5"></i>
+                        Join Discord
+                    </button>
+                    <button class="px-8 py-3 rounded-full bg-white/5 border border-white/10 text-white font-medium hover:bg-white/10 transition-all flex items-center justify-center gap-2">
+                        <i data-lucide="twitter" class="w-5 h-5"></i>
+                        Follow on X
+                    </button>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Footer -->
+    <footer class="border-t border-white/5 py-12 relative">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="grid md:grid-cols-4 gap-8 mb-12">
+                <div class="md:col-span-2">
+                    <div class="flex items-center gap-3 mb-4">
+                        <div class="w-8 h-8 rounded-lg bg-gradient-to-br from-neural-purple to-neural-cyan flex items-center justify-center">
+                            <i data-lucide="brain-circuit" class="w-5 h-5 text-white"></i>
+                        </div>
+                        <span class="font-display font-bold text-xl">Neural<span class="gradient-text">Nexus</span></span>
+                    </div>
+                    <p class="text-gray-400 text-sm max-w-sm mb-6">
+                        Empowering the next generation of AI-literate professionals through
+                        awareness, education, and community.
+                    </p>
+                    <div class="flex gap-4">
+                        <a href="#" class="w-10 h-10 rounded-full bg-white/5 flex items-center justify-center text-gray-400 hover:text-white hover:bg-white/10 transition-all">
+                            <i data-lucide="twitter" class="w-5 h-5"></i>
+                        </a>
+                        <a href="#" class="w-10 h-10 rounded-full bg-white/5 flex items-center justify-center text-gray-400 hover:text-white hover:bg-white/10 transition-all">
+                            <i data-lucide="github" class="w-5 h-5"></i>
+                        </a>
+                        <a href="#" class="w-10 h-10 rounded-full bg-white/5 flex items-center justify-center text-gray-400 hover:text-white hover:bg-white/10 transition-all">
+                            <i data-lucide="linkedin" class="w-5 h-5"></i>
+                        </a>
+                        <a href="#" class="w-10 h-10 rounded-full bg-white/5 flex items-center justify-center text-gray-400 hover:text-white hover:bg-white/10 transition-all">
+                            <i data-lucide="youtube" class="w-5 h-5"></i>
+                        </a>
+                    </div>
+                </div>
+                <div>
+                    <h4 class="font-semibold text-white mb-4">Platform</h4>
+                    <ul class="space-y-2 text-sm text-gray-400">
+                        <li><a href="#" class="hover:text-white transition-colors">Resources</a></li>
+                        <li><a href="#" class="hover:text-white transition-colors">Newsletter</a></li>
+                        <li><a href="#" class="hover:text-white transition-colors">Community</a></li>
+                        <li><a href="#" class="hover:text-white transition-colors">Pricing</a></li>
+                    </ul>
+                </div>
+                <div>
+                    <h4 class="font-semibold text-white mb-4">Company</h4>
+                    <ul class="space-y-2 text-sm text-gray-400">
+                        <li><a href="#" class="hover:text-white transition-colors">About</a></li>
+                        <li><a href="#" class="hover:text-white transition-colors">Blog</a></li>
+                        <li><a href="#" class="hover:text-white transition-colors">Careers</a></li>
+                        <li><a href="#" class="hover:text-white transition-colors">Contact</a></li>
+                    </ul>
+                </div>
+            </div>
+            <div class="border-t border-white/5 pt-8 flex flex-col md:flex-row justify-between items-center gap-4">
+                <p class="text-sm text-gray-500">© 2024 Neural Nexus. All rights reserved.</p>
+                <div class="flex gap-6 text-sm text-gray-500">
+                    <a href="#" class="hover:text-white transition-colors">Privacy Policy</a>
+                    <a href="#" class="hover:text-white transition-colors">Terms of Service</a>
+                    <a href="#" class="hover:text-white transition-colors">Cookie Settings</a>
+                </div>
+            </div>
+        </div>
+    </footer>
+    <script src="script.js"></script>
+    <script>
+        lucide.createIcons();
+    </script>
+<script src="https://deepsite.hf.co/deepsite-badge.js"></script>
+</body>
+</html>

script.js ADDED Viewed

	@@ -0,0 +1,235 @@

+// Mouse glow effect
+document.addEventListener('mousemove', (e) => {
+    const glow = document.getElementById('mouseGlow');
+    if (glow) {
+        glow.style.left = e.clientX + 'px';
+        glow.style.top = e.clientY + 'px';
+    }
+});
+// Text scramble effect
+class TextScramble {
+    constructor(el) {
+        this.el = el;
+        this.chars = '!<>-_\\/[]{}—=+*^?#________';
+        this.update = this.update.bind(this);
+    }
+    setText(newText) {
+        const oldText = this.el.innerText;
+        const length = Math.max(oldText.length, newText.length);
+        const promise = new Promise((resolve) => this.resolve = resolve);
+        this.queue = [];
+        for (let i = 0; i < length; i++) {
+            const from = oldText[i] || '';
+            const to = newText[i] || '';
+            const start = Math.floor(Math.random() * 40);
+            const end = start + Math.floor(Math.random() * 40);
+            this.queue.push({ from, to, start, end });
+        }
+        cancelAnimationFrame(this.frameRequest);
+        this.frame = 0;
+        this.update();
+        return promise;
+    }
+    update() {
+        let output = '';
+        let complete = 0;
+        for (let i = 0, n = this.queue.length; i < n; i++) {
+            let { from, to, start, end, char } = this.queue[i];
+            if (this.frame >= end) {
+                complete++;
+                output += to;
+            } else if (this.frame >= start) {
+                if (!char || Math.random() < 0.28) {
+                    char = this.randomChar();
+                    this.queue[i].char = char;
+                }
+                output += `<span class="text-neural-purple">${char}</span>`;
+            } else {
+                output += from;
+            }
+        }
+        this.el.innerHTML = output;
+        if (complete === this.queue.length) {
+            this.resolve();
+        } else {
+            this.frameRequest = requestAnimationFrame(this.update);
+            this.frame++;
+        }
+    }
+    randomChar() {
+        return this.chars[Math.floor(Math.random() * this.chars.length)];
+    }
+}
+// Initialize scramble effect
+const phrases = ['FUTURE', 'INTELLIGENCE', 'POSSIBILITIES', 'EVOLUTION', 'TOMORROW'];
+let counter = 0;
+const el = document.getElementById('scrambleText');
+const fx = new TextScramble(el);
+const next = () => {
+    fx.setText(phrases[counter]).then(() => {
+        setTimeout(next, 3000);
+    });
+    counter = (counter + 1) % phrases.length;
+};
+if (el) {
+    setTimeout(next, 2000);
+}
+// Mobile menu toggle
+const mobileMenuBtn = document.getElementById('mobileMenuBtn');
+const mobileMenu = document.getElementById('mobileMenu');
+if (mobileMenuBtn && mobileMenu) {
+    mobileMenuBtn.addEventListener('click', () => {
+        mobileMenu.classList.toggle('hidden');
+    });
+}
+// Newsletter form handling
+const newsletterForm = document.getElementById('newsletterForm');
+const submitBtn = document.getElementById('submitBtn');
+if (newsletterForm) {
+    newsletterForm.addEventListener('submit', (e) => {
+        e.preventDefault();
+        const email = newsletterForm.querySelector('input[type="email"]').value;
+        // Simulate submission
+        submitBtn.innerHTML = '<span class="animate-spin inline-block w-4 h-4 border-2 border-white border-t-transparent rounded-full mr-2"></span>Subscribing...';
+        submitBtn.disabled = true;
+        setTimeout(() => {
+            submitBtn.innerHTML = '<i data-lucide="check" class="w-4 h-4 mr-2"></i>Subscribed!';
+            submitBtn.classList.remove('btn-primary');
+            submitBtn.classList.add('bg-green-500');
+            lucide.createIcons();
+            // Reset after 3 seconds
+            setTimeout(() => {
+                submitBtn.innerHTML = '<span>Subscribe</span><i data-lucide="send" class="w-4 h-4"></i>';
+                submitBtn.classList.add('btn-primary');
+                submitBtn.classList.remove('bg-green-500');
+                submitBtn.disabled = false;
+                newsletterForm.reset();
+                lucide.createIcons();
+            }, 3000);
+        }, 1500);
+    });
+}
+// Counter animation
+const counters = document.querySelectorAll('.counter');
+const animateCounter = (counter) => {
+    const target = parseInt(counter.getAttribute('data-target'));
+    const duration = 2000;
+    const increment = target / (duration / 16);
+    let current = 0;
+    const updateCounter = () => {
+        current += increment;
+        if (current < target) {
+            counter.innerText = Math.floor(current).toLocaleString();
+            requestAnimationFrame(updateCounter);
+        } else {
+            counter.innerText = target.toLocaleString() + (target === 98 ? '%' : '+');
+        }
+    };
+    updateCounter();
+};
+// Intersection Observer for counters
+const observerOptions = {
+    threshold: 0.5
+};
+const observer = new IntersectionObserver((entries) => {
+    entries.forEach(entry => {
+        if (entry.isIntersecting) {
+            if (entry.target.classList.contains('counter')) {
+                animateCounter(entry.target);
+                observer.unobserve(entry.target);
+            }
+        }
+    });
+}, observerOptions);
+counters.forEach(counter => observer.observe(counter));
+// Smooth scroll for anchor links
+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',
+                block: 'start'
+            });
+            // Close mobile menu if open
+            if (mobileMenu && !mobileMenu.classList.contains('hidden')) {
+                mobileMenu.classList.add('hidden');
+            }
+        }
+    });
+});
+// Scroll reveal animation
+const revealElements = document.querySelectorAll('.resource-card');
+const revealObserver = new IntersectionObserver((entries) => {
+    entries.forEach((entry, index) => {
+        if (entry.isIntersecting) {
+            setTimeout(() => {
+                entry.target.style.opacity = '1';
+                entry.target.style.transform = 'translateY(0)';
+            }, index * 100);
+            revealObserver.unobserve(entry.target);
+        }
+    });
+}, { threshold: 0.1 });
+revealElements.forEach((el, index) => {
+    el.style.opacity = '0';
+    el.style.transform = 'translateY(20px)';
+    el.style.transition = 'all 0.6s ease-out';
+    revealObserver.observe(el);
+});
+// Parallax effect for hero section
+window.addEventListener('scroll', () => {
+    const scrolled = window.pageYOffset;
+    const parallaxElements = document.querySelectorAll('.animate-float');
+    parallaxElements.forEach((el, index) => {
+        const speed = 0.5 + (index * 0.1);
+        el.style.transform = `translateY(${scrolled * speed}px)`;
+    });
+});
+// Add glow effect to cards on mouse move
+document.querySelectorAll('.glass-card').forEach(card => {
+    card.addEventListener('mousemove', (e) => {
+        const rect = card.getBoundingClientRect();
+        const x = e.clientX - rect.left;
+        const y = e.clientY - rect.top;
+        card.style.background = `radial-gradient(circle at ${x}px ${y}px, rgba(139, 92, 246, 0.1), rgba(19, 19, 31, 0.6))`;
+    });
+    card.addEventListener('mouseleave', () => {
+        card.style.background = 'rgba(19, 19, 31, 0.6)';
+    });
+});