Spaces:

mahiatlinux
/

neo

Running

App Files Files Community

mahiatlinux commited on 2 days ago

Commit

eec4a02

verified ·

1 Parent(s): 47025de

looking good, make rouinde th more common, and also, insetad of website make a full blown dahsboard - Initial Deployment

Browse files

Files changed (2) hide show

README.md +7 -5
index.html +960 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Neo
-emoji: 🏃
-colorFrom: green
-colorTo: blue
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: neo
+emoji: 🐳
+colorFrom: pink
+colorTo: green
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,960 @@
-<!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>NEO | Digital Frontier</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="https://fonts.cdnfonts.com/css/satoshi">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        @import url('https://fonts.cdnfonts.com/css/satoshi');
+        :root {
+            --primary: #00f0ff;
+            --secondary: #7b2dff;
+            --tertiary: #ff2d7b;
+        }
+        body {
+            font-family: 'Satoshi', sans-serif;
+            background-color: #0a0a0a;
+            color: #FAFAFA;
+            letter-spacing: 0.05em;
+            line-height: 1.6;
+            -webkit-font-smoothing: antialiased;
+            overflow-x: hidden;
+        }
+        .gradient-text {
+            background: linear-gradient(90deg, var(--primary), var(--secondary));
+            -webkit-background-clip: text;
+            background-clip: text;
+            color: transparent;
+        }
+        .gradient-text-secondary {
+            background: linear-gradient(90deg, var(--secondary), var(--tertiary));
+            -webkit-background-clip: text;
+            background-clip: text;
+            color: transparent;
+        }
+        .gradient-border {
+            position: relative;
+        }
+        .gradient-border::before {
+            content: '';
+            position: absolute;
+            inset: 0;
+            border-radius: 50px;
+            padding: 1px;
+            background: linear-gradient(90deg, var(--primary), var(--secondary));
+            -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;
+            pointer-events: none;
+        }
+        .nav-link {
+            position: relative;
+        }
+        .nav-link::after {
+            content: '';
+            position: absolute;
+            width: 0;
+            height: 1px;
+            bottom: -2px;
+            left: 0;
+            background: linear-gradient(90deg, var(--primary), var(--secondary));
+            transition: width 0.3s ease;
+        }
+        .nav-link:hover::after {
+            width: 100%;
+        }
+        .btn-hover {
+            transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
+            border-radius: 50px;
+            backdrop-filter: blur(8px);
+            background-color: rgba(20, 20, 20, 0.6);
+            border: 1px solid rgba(255, 255, 255, 0.08);
+        }
+        .btn-hover:hover {
+            background-color: rgba(255, 255, 255, 0.05);
+            border: 1px solid rgba(0, 240, 255, 0.3);
+            transform: translateY(-2px);
+        }
+        .card-hover {
+            transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
+            border-radius: 16px;
+            backdrop-filter: blur(8px);
+            background-color: rgba(20, 20, 20, 0.6);
+            border: 1px solid rgba(255, 255, 255, 0.08);
+            overflow: hidden;
+        }
+        .card-hover:hover {
+            transform: translateY(-8px);
+            background-color: rgba(30, 30, 30, 0.8);
+            border: 1px solid rgba(0, 240, 255, 0.3);
+            box-shadow: 0 10px 30px rgba(0, 240, 255, 0.1);
+        }
+        .card-hover::before {
+            content: '';
+            position: absolute;
+            top: -50%;
+            left: -50%;
+            width: 200%;
+            height: 200%;
+            background: radial-gradient(circle, rgba(0,240,255,0.1) 0%, rgba(0,240,255,0) 70%);
+            opacity: 0;
+            transition: opacity 0.4s ease;
+        }
+        .card-hover:hover::before {
+            opacity: 1;
+        }
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(10px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+        .fade-in {
+            animation: fadeIn 0.6s ease forwards;
+        }
+        .delay-1 { animation-delay: 0.1s; }
+        .delay-2 { animation-delay: 0.2s; }
+        .delay-3 { animation-delay: 0.3s; }
+        .delay-4 { animation-delay: 0.4s; }
+        .grid-pattern {
+            background-image:
+                linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
+                linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
+            background-size: 40px 40px;
+        }
+        .hero-gradient {
+            background: radial-gradient(circle at 20% 50%, rgba(0,240,255,0.15) 0%, rgba(123,45,255,0.1) 50%, rgba(0,0,0,0) 70%);
+        }
+        .cursor-trail {
+            position: fixed;
+            width: 20px;
+            height: 20px;
+            border-radius: 50%;
+            background: radial-gradient(circle, var(--primary) 0%, rgba(0,240,255,0) 70%);
+            pointer-events: none;
+            z-index: 9999;
+            transform: translate(-50%, -50%);
+            opacity: 0;
+            transition: opacity 0.3s ease;
+        }
+        .marquee {
+            display: flex;
+            overflow: hidden;
+            white-space: nowrap;
+        }
+        .marquee-content {
+            display: inline-block;
+            animation: marquee 20s linear infinite;
+        }
+        @keyframes marquee {
+            0% { transform: translateX(0); }
+            100% { transform: translateX(-50%); }
+        }
+        .glow {
+            filter: drop-shadow(0 0 8px rgba(0, 240, 255, 0.6));
+        }
+        .input-field {
+            background: transparent;
+            border-bottom: 1px solid rgba(255,255,255,0.1);
+            transition: all 0.3s ease;
+        }
+        .input-field:focus {
+            border-bottom: 1px solid var(--primary);
+            outline: none;
+        }
+        .mobile-menu {
+            transform: translateX(100%);
+            transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
+        }
+        .mobile-menu.open {
+            transform: translateX(0);
+        }
+        .project-card {
+            perspective: 1000px;
+        }
+        .project-card-inner {
+            transition: transform 0.6s;
+            transform-style: preserve-3d;
+        }
+        .project-card:hover .project-card-inner {
+            transform: rotateY(15deg) rotateX(-5deg);
+        }
+        .scroll-indicator {
+            animation: bounce 2s infinite;
+        }
+        @keyframes bounce {
+            0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
+            40% { transform: translateY(-20px); }
+            60% { transform: translateY(-10px); }
+        }
+        /* New additions */
+        .particle {
+            position: absolute;
+            border-radius: 50%;
+            pointer-events: none;
+            z-index: -1;
+        }
+        .holographic-effect {
+            position: relative;
+            overflow: hidden;
+        }
+        .holographic-effect::after {
+            content: '';
+            position: absolute;
+            top: -50%;
+            left: -50%;
+            width: 200%;
+            height: 200%;
+            background: linear-gradient(
+                to bottom right,
+                rgba(0, 240, 255, 0.05),
+                rgba(123, 45, 255, 0.05),
+                rgba(255, 45, 123, 0.05)
+            );
+            transform: rotate(30deg);
+            animation: holographic 8s linear infinite;
+            z-index: -1;
+        }
+        @keyframes holographic {
+            0% { transform: translateY(0) rotate(30deg); }
+            100% { transform: translateY(-50%) rotate(30deg); }
+        }
+        .neon-pulse {
+            animation: neonPulse 2s infinite alternate;
+        }
+        @keyframes neonPulse {
+            from { box-shadow: 0 0 5px rgba(0, 240, 255, 0.5); }
+            to { box-shadow: 0 0 20px rgba(0, 240, 255, 0.8); }
+        }
+        .floating {
+            animation: floating 6s ease-in-out infinite;
+        }
+        @keyframes floating {
+            0% { transform: translateY(0px); }
+            50% { transform: translateY(-15px); }
+            100% { transform: translateY(0px); }
+        }
+        .grid-overlay {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-image:
+                linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
+                linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
+            background-size: 40px 40px;
+            pointer-events: none;
+        }
+        .terminal-window {
+            background: rgba(10, 10, 10, 0.8);
+            border: 1px solid rgba(0, 240, 255, 0.3);
+            border-radius: 8px;
+            box-shadow: 0 0 20px rgba(0, 240, 255, 0.2);
+            overflow: hidden;
+        }
+        .terminal-header {
+            background: rgba(20, 20, 20, 0.6);
+            padding: 8px 12px;
+            display: flex;
+            align-items: center;
+        }
+        .terminal-button {
+            width: 12px;
+            height: 12px;
+            border-radius: 50%;
+            margin-right: 6px;
+        }
+        .terminal-body {
+            padding: 16px;
+            font-family: monospace;
+            line-height: 1.5;
+        }
+        .terminal-prompt {
+            color: var(--primary);
+        }
+        .terminal-command {
+            color: #fff;
+        }
+        .terminal-response {
+            color: #aaa;
+        }
+        .tech-stack-item {
+            position: relative;
+            padding-left: 24px;
+        }
+        .tech-stack-item::before {
+            content: '▹';
+            position: absolute;
+            left: 0;
+            color: var(--primary);
+        }
+    </style>
+</head>
+<body class="min-h-screen grid-pattern">
+    <!-- Custom cursor -->
+    <div class="cursor-trail"></div>
+    <!-- Particle background -->
+    <div id="particles"></div>
+    <!-- Navigation -->
+    <nav class="fixed w-full py-6 px-6 md:px-12 z-50 text-white backdrop-blur-md bg-[#0a0a0a]/80 border-b border-[#2d2d2d]/20">
+        <div class="flex justify-between items-center">
+            <a href="#" class="text-2xl font-medium tracking-tight gradient-text flex items-center">
+                <span class="mr-2">NEO</span>
+                <span class="w-2 h-2 rounded-full bg-[#00f0ff] animate-pulse"></span>
+            </a>
+            <div class="hidden md:flex space-x-12">
+                <a href="#work" class="nav-link text-lg">Work</a>
+                <a href="#studio" class="nav-link text-lg">Studio</a>
+                <a href="#tech" class="nav-link text-lg">Tech</a>
+                <a href="#journal" class="nav-link text-lg">Journal</a>
+                <a href="#contact" class="nav-link text-lg">Contact</a>
+            </div>
+            <button id="menu-toggle" class="md:hidden text-2xl">
+                <i class="fas fa-bars"></i>
+            </button>
+        </div>
+    </nav>
+    <!-- Mobile Menu -->
+    <div id="mobile-menu" class="mobile-menu fixed inset-0 bg-[#0a0a0a] z-40 pt-24 px-6 flex flex-col items-center justify-center">
+        <div class="absolute top-6 right-6">
+            <button id="menu-close" class="text-2xl">
+                <i class="fas fa-times"></i>
+            </button>
+        </div>
+        <div class="flex flex-col items-center space-y-8 text-2xl">
+            <a href="#work" class="nav-link">Work</a>
+            <a href="#studio" class="nav-link">Studio</a>
+            <a href="#tech" class="nav-link">Tech</a>
+            <a href="#journal" class="nav-link">Journal</a>
+            <a href="#contact" class="nav-link">Contact</a>
+        </div>
+        <div class="absolute bottom-12 flex space-x-6">
+            <a href="#" class="text-xl hover:text-[#00f0ff] transition"><i class="fab fa-instagram"></i></a>
+            <a href="#" class="text-xl hover:text-[#00f0ff] transition"><i class="fab fa-linkedin"></i></a>
+            <a href="#" class="text-xl hover:text-[#00f0ff] transition"><i class="fab fa-twitter"></i></a>
+        </div>
+    </div>
+    <!-- Hero Section -->
+    <section class="h-screen flex items-center px-6 md:px-12 pt-24 hero-gradient relative overflow-hidden">
+        <div class="absolute inset-0 grid-overlay"></div>
+        <div class="absolute -top-20 -left-20 w-80 h-80 rounded-full bg-[#7b2dff] mix-blend-screen opacity-10 blur-3xl"></div>
+        <div class="absolute -bottom-20 -right-20 w-96 h-96 rounded-full bg-[#00f0ff] mix-blend-screen opacity-10 blur-3xl"></div>
+        <div class="w-full md:w-2/3 relative z-10">
+            <div class="terminal-window max-w-lg mb-12 fade-in delay-1">
+                <div class="terminal-header">
+                    <div class="terminal-button bg-[#ff5f56]"></div>
+                    <div class="terminal-button bg-[#ffbd2e]"></div>
+                    <div class="terminal-button bg-[#27c93f]"></div>
+                </div>
+                <div class="terminal-body">
+                    <p><span class="terminal-prompt">$</span> <span class="terminal-command">neo create --project="digital_frontier"</span></p>
+                    <p class="terminal-response">Initializing quantum design matrix...</p>
+                    <p class="terminal-response">Compiling immersive experiences...</p>
+                    <p class="terminal-response">Project ready at <span class="text-[#00f0ff]">neo.design/digital_frontier</span></p>
+                </div>
+            </div>
+            <h1 class="text-4xl md:text-6xl lg:text-7xl font-light tracking-tight leading-none mb-8 fade-in delay-2">
+                We <span class="gradient-text font-medium">orchestrate</span> digital experiences that <span class="gradient-text-secondary font-medium">resonate</span>.
+            </h1>
+            <p class="text-lg md:text-2xl font-light mb-12 max-w-2xl leading-relaxed fade-in delay-3">
+                At NEO, we blend quantum design principles with immersive technology to create interfaces that feel alive.
+            </p>
+            <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4 fade-in delay-4">
+                <a href="#work" class="px-8 py-4 text-lg font-medium btn-hover gradient-border flex items-center">
+                    <span>Explore Work</span>
+                    <i class="fas fa-arrow-right ml-2"></i>
+                </a>
+                <a href="#contact" class="px-8 py-4 bg-gradient-to-r from-[#00f0ff] to-[#7b2dff] text-black text-lg font-medium hover:opacity-90 transition flex items-center">
+                    <span>Start a Project</span>
+                    <i class="fas fa-bolt ml-2"></i>
+                </a>
+            </div>
+            <div class="absolute bottom-12 left-1/2 transform -translate-x-1/2 fade-in delay-4">
+                <div class="scroll-indicator flex flex-col items-center">
+                    <span class="text-sm mb-2">Scroll</span>
+                    <i class="fas fa-chevron-down text-lg"></i>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Marquee -->
+    <div class="py-6 bg-black text-white overflow-hidden border-t border-b border-[#2d2d2d]/20">
+        <div class="marquee">
+            <div class="marquee-content px-4 text-xl">
+                <span class="mx-8"><i class="fas fa-atom mr-2"></i> Quantum Design</span>
+                <span class="mx-8"><i class="fas fa-code mr-2"></i> Immersive Tech</span>
+                <span class="mx-8"><i class="fas fa-brain mr-2"></i> AI Integration</span>
+                <span class="mx-8"><i class="fas fa-vr-cardboard mr-2"></i> XR Experiences</span>
+                <span class="mx-8"><i class="fas fa-atom mr-2"></i> Quantum Design</span>
+                <span class="mx-8"><i class="fas fa-code mr-2"></i> Immersive Tech</span>
+                <span class="mx-8"><i class="fas fa-brain mr-2"></i> AI Integration</span>
+                <span class="mx-8"><i class="fas fa-vr-cardboard mr-2"></i> XR Experiences</span>
+            </div>
+        </div>
+    </div>
+    <!-- Featured Work -->
+    <section id="work" class="py-24 px-6 md:px-12 bg-[#111111] relative overflow-hidden">
+        <div class="absolute inset-0 grid-overlay"></div>
+        <div class="relative z-10">
+            <div class="mb-24">
+                <h2 class="text-3xl md:text-4xl font-light tracking-tight mb-4">Selected Work</h2>
+                <div class="h-px w-24 bg-gradient-to-r from-[#00f0ff] to-[#7b2dff]"></div>
+            </div>
+            <div class="grid md:grid-cols-2 gap-8">
+                <div class="project-card card-hover fade-in delay-1">
+                    <div class="project-card-inner">
+                        <div class="h-80 md:h-96 bg-gradient-to-br from-[#0a0a0a] to-[#1a1a1a] mb-6 flex items-center justify-center relative overflow-hidden">
+                            <div class="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1639762681057-408e52192e55?q=80&w=2232&auto=format&fit=crop')] bg-cover bg-center opacity-20"></div>
+                            <div class="text-center p-8 relative z-10">
+                                <div class="w-16 h-16 rounded-full bg-gradient-to-r from-[#00f0ff] to-[#7b2dff] mb-6 mx-auto flex items-center justify-center glow">
+                                    <i class="fas fa-atom text-xl"></i>
+                                </div>
+                                <h3 class="text-2xl font-light mb-2">Orbit Design System</h3>
+                                <p class="text-[#AAAAAA]">UI/UX, Design System</p>
+                                <div class="mt-6">
+                                    <span class="inline-block px-3 py-1 text-xs bg-[#0a0a0a] rounded-full border border-[#2d2d2d]">React</span>
+                                    <span class="inline-block px-3 py-1 text-xs bg-[#0a0a0a] rounded-full border border-[#2d2d2d] ml-2">Figma</span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="project-card card-hover fade-in delay-2">
+                    <div class="project-card-inner">
+                        <div class="h-80 md:h-96 bg-gradient-to-br from-[#0a0a0a] to-[#1a1a1a] mb-6 flex items-center justify-center relative overflow-hidden">
+                            <div class="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1555774698-0b77e0d5fac6?q=80&w=2340&auto=format&fit=crop')] bg-cover bg-center opacity-20"></div>
+                            <div class="text-center p-8 relative z-10">
+                                <div class="w-16 h-16 rounded-full bg-gradient-to-r from-[#00f0ff] to-[#7b2dff] mb-6 mx-auto flex items-center justify-center glow">
+                                    <i class="fas fa-mobile-screen text-xl"></i>
+                                </div>
+                                <h3 class="text-2xl font-light mb-2">Aether Mobile App</h3>
+                                <p class="text-[#AAAAAA]">Mobile, Interaction Design</p>
+                                <div class="mt-6">
+                                    <span class="inline-block px-3 py-1 text-xs bg-[#0a0a0a] rounded-full border border-[#2d2d2d]">Swift</span>
+                                    <span class="inline-block px-3 py-1 text-xs bg-[#0a0a0a] rounded-full border border-[#2d2d2d] ml-2">Kotlin</span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="project-card card-hover fade-in delay-3">
+                    <div class="project-card-inner">
+                        <div class="h-80 md:h-96 bg-gradient-to-br from-[#0a0a0a] to-[#1a1a1a] mb-6 flex items-center justify-center relative overflow-hidden">
+                            <div class="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1626785774573-4b799315345d?q=80&w=2342&auto=format&fit=crop')] bg-cover bg-center opacity-20"></div>
+                            <div class="text-center p-8 relative z-10">
+                                <div class="w-16 h-16 rounded-full bg-gradient-to-r from-[#00f0ff] to-[#7b2dff] mb-6 mx-auto flex items-center justify-center glow">
+                                    <i class="fas fa-palette text-xl"></i>
+                                </div>
+                                <h3 class="text-2xl font-light mb-2">Nova Identity</h3>
+                                <p class="text-[#AAAAAA]">Branding, Visual Identity</p>
+                                <div class="mt-6">
+                                    <span class="inline-block px-3 py-1 text-xs bg-[#0a0a0a] rounded-full border border-[#2d2d2d]">Illustrator</span>
+                                    <span class="inline-block px-3 py-1 text-xs bg-[#0a0a0a] rounded-full border border-[#2d2d2d] ml-2">After Effects</span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="project-card card-hover fade-in delay-4">
+                    <div class="project-card-inner">
+                        <div class="h-80 md:h-96 bg-gradient-to-br from-[#0a0a0a] to-[#1a1a1a] mb-6 flex items-center justify-center relative overflow-hidden">
+                            <div class="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1467232004584-a241de8bcf5d?q=80&w=2360&auto=format&fit=crop')] bg-cover bg-center opacity-20"></div>
+                            <div class="text-center p-8 relative z-10">
+                                <div class="w-16 h-16 rounded-full bg-gradient-to-r from-[#00f0ff] to-[#7b2dff] mb-6 mx-auto flex items-center justify-center glow">
+                                    <i class="fas fa-globe text-xl"></i>
+                                </div>
+                                <h3 class="text-2xl font-light mb-2">Lumen Web Platform</h3>
+                                <p class="text-[#AAAAAA]">Web, Dashboard Design</p>
+                                <div class="mt-6">
+                                    <span class="inline-block px-3 py-1 text-xs bg-[#0a0a0a] rounded-full border border-[#2d2d2d]">Next.js</span>
+                                    <span class="inline-block px-3 py-1 text-xs bg-[#0a0a0a] rounded-full border border-[#2d2d2d] ml-2">Three.js</span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="mt-24 text-center">
+                <a href="#" class="inline-block px-8 py-4 border border-[#2D2D2D] text-lg font-medium btn-hover gradient-border flex items-center mx-auto">
+                    <span>View All Projects</span>
+                    <i class="fas fa-arrow-right ml-2"></i>
+                </a>
+            </div>
+        </div>
+    </section>
+    <!-- Stats Section -->
+    <section class="py-16 px-6 md:px-12 bg-gradient-to-r from-[#0a0a0a] to-[#111111] relative overflow-hidden">
+        <div class="absolute inset-0 grid-overlay"></div>
+        <div class="relative z-10">
+            <div class="grid md:grid-cols-4 gap-8 text-center">
+                <div class="fade-in delay-1">
+                    <div class="text-4xl md:text-5xl font-light mb-4 gradient-text">24+</div>
+                    <p class="text-lg text-[#AAAAAA]">Projects Completed</p>
+                </div>
+                <div class="fade-in delay-2">
+                    <div class="text-4xl md:text-5xl font-light mb-4 gradient-text">15</div>
+                    <p class="text-lg text-[#AAAAAA]">Global Clients</p>
+                </div>
+                <div class="fade-in delay-3">
+                    <div class="text-4xl md:text-5xl font-light mb-4 gradient-text">8</div>
+                    <p class="text-lg text-[#AAAAAA]">Design Awards</p>
+                </div>
+                <div class="fade-in delay-4">
+                    <div class="text-4xl md:text-5xl font-light mb-4 gradient-text">100%</div>
+                    <p class="text-lg text-[#AAAAAA]">Client Satisfaction</p>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Tech Stack Section -->
+    <section id="tech" class="py-24 px-6 md:px-12 bg-[#0a0a0a] text-[#FAFAFA] relative overflow-hidden">
+        <div class="absolute inset-0 grid-overlay"></div>
+        <div class="relative z-10 max-w-6xl mx-auto">
+            <div class="mb-24">
+                <h2 class="text-3xl md:text-4xl font-light tracking-tight mb-4">Our Tech Stack</h2>
+                <div class="h-px w-24 bg-gradient-to-r from-[#00f0ff] to-[#7b2dff]"></div>
+            </div>
+            <div class="grid md:grid-cols-3 gap-12">
+                <div class="card-hover p-8 fade-in delay-1">
+                    <h3 class="text-2xl font-light mb-6 gradient-text">Frontend</h3>
+                    <ul class="space-y-4">
+                        <li class="tech-stack-item">React / Next.js</li>
+                        <li class="tech-stack-item">Vue / Nuxt</li>
+                        <li class="tech-stack-item">Three.js / WebGL</li>
+                        <li class="tech-stack-item">GSAP / Framer Motion</li>
+                        <li class="tech-stack-item">TailwindCSS</li>
+                    </ul>
+                </div>
+                <div class="card-hover p-8 fade-in delay-2">
+                    <h3 class="text-2xl font-light mb-6 gradient-text-secondary">Backend</h3>
+                    <ul class="space-y-4">
+                        <li class="tech-stack-item">Node.js / Express</li>
+                        <li class="tech-stack-item">Python / Django</li>
+                        <li class="tech-stack-item">GraphQL / Apollo</li>
+                        <li class="tech-stack-item">PostgreSQL / MongoDB</li>
+                        <li class="tech-stack-item">Firebase / Supabase</li>
+                    </ul>
+                </div>
+                <div class="card-hover p-8 fade-in delay-3">
+                    <h3 class="text-2xl font-light mb-6 gradient-text">Design</h3>
+                    <ul class="space-y-4">
+                        <li class="tech-stack-item">Figma / Sketch</li>
+                        <li class="tech-stack-item">Adobe Creative Suite</li>
+                        <li class="tech-stack-item">Blender / Cinema 4D</li>
+                        <li class="tech-stack-item">After Effects / Lottie</li>
+                        <li class="tech-stack-item">Procreate / Illustrator</li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- About Section -->
+    <section id="studio" class="py-24 px-6 md:px-12 bg-[#111111] text-[#FAFAFA] relative overflow-hidden">
+        <div class="absolute inset-0 grid-overlay"></div>
+        <div class="relative z-10 max-w-6xl mx-auto">
+            <h2 class="text-3xl md:text-4xl font-light tracking-tight mb-12">We craft digital experiences that transcend the ordinary.</h2>
+            <div class="grid md:grid-cols-2 gap-12">
+                <div>
+                    <p class="text-xl font-light mb-6 leading-relaxed">
+                        NEO is a digital design studio pushing the boundaries of interface design and interactive experiences. Founded in 2023, we combine technical precision with creative vision to build digital products that feel alive.
+                    </p>
+                    <p class="text-xl font-light leading-relaxed">
+                        Our team of designers, developers, and strategists work at the intersection of aesthetics and technology, creating experiences that are as functional as they are beautiful.
+                    </p>
+                </div>
+                <div>
+                    <p class="text-xl font-light mb-6 leading-relaxed">
+                        We partner with visionary brands to create digital products that stand the test of time—interfaces that are intuitive, immersive, and impossible to ignore.
+                    </p>
+                    <a href="#" class="inline-block px-8 py-4 border border-[#FAFAFA] text-lg font-medium text-[#FAFAFA] hover:bg-[#FAFAFA] hover:text-[#0a0a0a] transition flex items-center">
+                        <span>Our Approach</span>
+                        <i class="fas fa-arrow-right ml-2"></i>
+                    </a>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Journal Section -->
+    <section id="journal" class="py-24 px-6 md:px-12 bg-[#0a0a0a] relative overflow-hidden">
+        <div class="absolute inset-0 grid-overlay"></div>
+        <div class="relative z-10">
+            <div class="mb-24">
+                <h2 class="text-3xl md:text-4xl font-light tracking-tight mb-4">From the Journal</h2>
+                <div class="h-px w-24 bg-gradient-to-r from-[#00f0ff] to-[#7b2dff]"></div>
+            </div>
+            <div class="grid md:grid-cols-3 gap-8">
+                <article class="card-hover fade-in delay-1">
+                    <div class="h-64 bg-gradient-to-br from-[#0a0a0a] to-[#1a1a1a] mb-6 flex items-center justify-center relative overflow-hidden">
+                        <div class="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1635070041078-e363dbe005cb?q=80&w=2340&auto=format&fit=crop')] bg-cover bg-center opacity-20"></div>
+                        <i class="fas fa-feather-alt text-4xl text-[#00f0ff] relative z-10"></i>
+                    </div>
+                    <span class="text-sm text-[#7b2dff]">May 15, 2023</span>
+                    <h3 class="text-2xl font-light mt-2 mb-4">The Art of Digital Minimalism</h3>
+                    <p class="text-lg text-[#AAAAAA]">Exploring how stripping back leads to more meaningful digital experiences.</p>
+                    <a href="#" class="inline-block mt-4 text-[#00f0ff] hover:text-[#7b2dff] transition">Read Article <i class="fas fa-arrow-right ml-1"></i></a>
+                </article>
+                <article class="card-hover fade-in delay-2">
+                    <div class="h-64 bg-gradient-to-br from-[#0a0a0a] to-[#1a1a1a] mb-6 flex items-center justify-center relative overflow-hidden">
+                        <div class="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1618005198919-d3d4b5a92ead?q=80&w=2274&auto=format&fit=crop')] bg-cover bg-center opacity-20"></div>
+                        <i class="fas fa-font text-4xl text-[#7b2dff] relative z-10"></i>
+                    </div>
+                    <span class="text-sm text-[#00f0ff]">April 28, 2023</span>
+                    <h3 class="text-2xl font-light mt-2 mb-4">Typography as Interface</h3>
+                    <p class="text-lg text-[#AAAAAA]">How type choices can make or break digital product experiences.</p>
+                    <a href="#" class="inline-block mt-4 text-[#00f0ff] hover:text-[#7b2dff] transition">Read Article <i class="fas fa-arrow-right ml-1"></i></a>
+                </article>
+                <article class="card-hover fade-in delay-3">
+                    <div class="h-64 bg-gradient-to-br from-[#0a0a0a] to-[#1a1a1a] mb-6 flex items-center justify-center relative overflow-hidden">
+                        <div class="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1639762681057-408e52192e55?q=80&w=2232&auto=format&fit=crop')] bg-cover bg-center opacity-20"></div>
+                        <i class="fas fa-calculator text-4xl text-[#00f0ff] relative z-10"></i>
+                    </div>
+                    <span class="text-sm text-[#7b2dff]">March 12, 2023</span>
+                    <h3 class="text-2xl font-light mt-2 mb-4">The Mathematics of White Space</h3>
+                    <p class="text-lg text-[#AAAAAA]">Calculating the perfect ratios for harmonious digital layouts.</p>
+                    <a href="#" class="inline-block mt-4 text-[#00f0ff] hover:text-[#7b2dff] transition">Read Article <i class="fas fa-arrow-right ml-1"></i></a>
+                </article>
+            </div>
+        </div>
+    </section>
+    <!-- Testimonials -->
+    <section class="py-24 px-6 md:px-12 bg-[#111111] relative overflow-hidden">
+        <div class="absolute inset-0 grid-overlay"></div>
+        <div class="relative z-10 max-w-4xl mx-auto">
+            <div class="card-hover p-12 text-center">
+                <div class="w-16 h-16 rounded-full bg-gradient-to-r from-[#00f0ff] to-[#7b2dff] mb-8 mx-auto flex items-center justify-center glow">
+                    <i class="fas fa-quote-left text-xl"></i>
+                </div>
+                <p class="text-2xl font-light mb-8 leading-relaxed">
+                    "NEO transformed our digital presence with their forward-thinking approach. The interface they designed increased our engagement by 300% while maintaining perfect usability."
+                </p>
+                <div>
+                    <p class="text-lg font-medium">Sarah Chen</p>
+                    <p class="text-[#AAAAAA]">CEO, Lumen Technologies</p>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Contact Section -->
+    <section id="contact" class="py-24 px-6 md:px-12 bg-[#0a0a0a] relative overflow-hidden">
+        <div class="absolute inset-0 grid-overlay"></div>
+        <div class="relative z-10 max-w-6xl mx-auto">
+            <h2 class="text-3xl md:text-4xl font-light tracking-tight mb-12">Ready to create something extraordinary?</h2>
+            <div class="grid md:grid-cols-2 gap-12">
+                <div>
+                    <p class="text-xl font-light mb-6 leading-relaxed">
+                        Whether you have a project in mind or just want to explore possibilities, we'd love to hear from you.
+                    </p>
+                    <p class="text-xl font-light leading-relaxed mb-8">
+                        <a href="mailto:[email protected]" class="gradient-text underline">[email protected]</a><br>
+                        <span class="text-[#AAAAAA]">+1 (555) 123-4567</span>
+                    </p>
+                    <div class="flex space-x-6">
+                        <a href="#" class="text-2xl hover:text-[#00f0ff] transition"><i class="fab fa-instagram"></i></a>
+                        <a href="#" class="text-2xl hover:text-[#00f0ff] transition"><i class="fab fa-linkedin"></i></a>
+                        <a href="#" class="text-2xl hover:text-[#00f0ff] transition"><i class="fab fa-twitter"></i></a>
+                        <a href="#" class="text-2xl hover:text-[#00f0ff] transition"><i class="fab fa-dribbble"></i></a>
+                    </div>
+                </div>
+                <div>
+                    <form class="space-y-6">
+                        <div>
+                            <input type="text" placeholder="Name" class="w-full px-4 py-3 input-field text-lg font-light">
+                        </div>
+                        <div>
+                            <input type="email" placeholder="Email" class="w-full px-4 py-3 input-field text-lg font-light">
+                        </div>
+                        <div>
+                            <input type="text" placeholder="Company" class="w-full px-4 py-3 input-field text-lg font-light">
+                        </div>
+                        <div>
+                            <textarea placeholder="Tell us about your project" class="w-full px-4 py-3 input-field text-lg font-light h-32"></textarea>
+                        </div>
+                        <button type="submit" class="px-8 py-4 bg-gradient-to-r from-[#00f0ff] to-[#7b2dff] text-black text-lg font-medium hover:opacity-90 transition flex items-center justify-center">
+                            <span>Send Message</span>
+                            <i class="fas fa-paper-plane ml-2"></i>
+                        </button>
+                    </form>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Footer -->
+    <footer class="py-12 px-6 md:px-12 bg-black text-[#FAFAFA] relative overflow-hidden">
+        <div class="absolute inset-0 grid-overlay"></div>
+        <div class="relative z-10">
+            <div class="flex flex-col md:flex-row justify-between items-start md:items-center">
+                <div class="mb-8 md:mb-0">
+                    <p class="text-2xl font-medium tracking-tight mb-4 gradient-text">NEO</p>
+                    <p class="text-lg font-light">Digital design studio</p>
+                </div>
+                <div class="grid grid-cols-2 md:grid-cols-3 gap-8 md:gap-16">
+                    <div>
+                        <h4 class="text-lg font-light mb-4">Studio</h4>
+                        <ul class="space-y-2">
+                            <li><a href="#" class="text-[#AAAAAA] hover:text-[#00f0ff] transition">About</a></li>
+                            <li><a href="#" class="text-[#AAAAAA] hover:text-[#00f0ff] transition">Approach</a></li>
+                            <li><a href="#" class="text-[#AAAAAA] hover:text-[#00f0ff] transition">Team</a></li>
+                        </ul>
+                    </div>
+                    <div>
+                        <h4 class="text-lg font-light mb-4">Connect</h4>
+                        <ul class="space-y-2">
+                            <li><a href="#" class="text-[#AAAAAA] hover:text-[#00f0ff] transition">Instagram</a></li>
+                            <li><a href="#" class="text-[#AAAAAA] hover:text-[#00f0ff] transition">LinkedIn</a></li>
+                            <li><a href="#" class="text-[#AAAAAA] hover:text-[#00f0ff] transition">Twitter</a></li>
+                        </ul>
+                    </div>
+                    <div>
+                        <h4 class="text-lg font-light mb-4">Legal</h4>
+                        <ul class="space-y-2">
+                            <li><a href="#" class="text-[#AAAAAA] hover:text-[#00f0ff] transition">Privacy</a></li>
+                            <li><a href="#" class="text-[#AAAAAA] hover:text-[#00f0ff] transition">Terms</a></li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+            <div class="mt-24 pt-8 border-t border-[#2D2D2D]">
+                <p class="text-[#AAAAAA] text-center">© 2023 NEO Design Studio. All rights reserved.</p>
+            </div>
+        </div>
+    </footer>
+    <script>
+        // Custom cursor
+        const cursor = document.querySelector('.cursor-trail');
+        document.addEventListener('mousemove', (e) => {
+            cursor.style.left = e.clientX + 'px';
+            cursor.style.top = e.clientY + 'px';
+            cursor.style.opacity = '1';
+        });
+        document.addEventListener('mouseleave', () => {
+            cursor.style.opacity = '0';
+        });
+        // Mobile menu toggle
+        const menuToggle = document.getElementById('menu-toggle');
+        const menuClose = document.getElementById('menu-close');
+        const mobileMenu = document.getElementById('mobile-menu');
+        menuToggle.addEventListener('click', () => {
+            mobileMenu.classList.add('open');
+        });
+        menuClose.addEventListener('click', () => {
+            mobileMenu.classList.remove('open');
+        });
+        // Animation observer
+        const observer = new IntersectionObserver((entries) => {
+            entries.forEach(entry => {
+                if (entry.isIntersecting) {
+                    entry.target.classList.add('fade-in');
+                }
+            });
+        }, { threshold: 0.1 });
+        document.querySelectorAll('.card-hover, [class*="delay-"]').forEach(el => {
+            observer.observe(el);
+        });
+        // 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'
+                    });
+                }
+                // Close mobile menu if open
+                if (mobileMenu.classList.contains('open')) {
+                    mobileMenu.classList.remove('open');
+                }
+            });
+        });
+        // Add gradient border to buttons on hover
+        document.querySelectorAll('.btn-hover').forEach(btn => {
+            btn.addEventListener('mouseenter', () => {
+                btn.classList.add('gradient-border');
+            });
+            btn.addEventListener('mouseleave', () => {
+                btn.classList.remove('gradient-border');
+            });
+        });
+        // Parallax effect for project cards
+        document.querySelectorAll('.project-card').forEach(card => {
+            card.addEventListener('mousemove', (e) => {
+                const x = e.clientX - card.getBoundingClientRect().left;
+                const y = e.clientY - card.getBoundingClientRect().top;
+                const centerX = card.offsetWidth / 2;
+                const centerY = card.offsetHeight / 2;
+                const angleX = (y - centerY) / 20;
+                const angleY = (centerX - x) / 20;
+                card.querySelector('.project-card-inner').style.transform = `rotateX(${angleX}deg) rotateY(${angleY}deg)`;
+            });
+            card.addEventListener('mouseleave', () => {
+                card.querySelector('.project-card-inner').style.transform = 'rotateX(0) rotateY(0)';
+            });
+        });
+        // Particle background
+        function createParticles() {
+            const particlesContainer = document.getElementById('particles');
+            const particleCount = 30;
+            for (let i = 0; i < particleCount; i++) {
+                const particle = document.createElement('div');
+                particle.classList.add('particle');
+                // Random size between 2px and 6px
+                const size = Math.random() * 4 + 2;
+                particle.style.width = `${size}px`;
+                particle.style.height = `${size}px`;
+                // Random position
+                particle.style.left = `${Math.random() * 100}%`;
+                particle.style.top = `${Math.random() * 100}%`;
+                // Random color from gradient
+                const colors = ['#00f0ff', '#7b2dff', '#ff2d7b'];
+                const color = colors[Math.floor(Math.random() * colors.length)];
+                particle.style.backgroundColor = color;
+                // Random opacity
+                particle.style.opacity = Math.random() * 0.3 + 0.1;
+                // Random animation
+                const duration = Math.random() * 20 + 10;
+                particle.style.animation = `float ${duration}s infinite ease-in-out`;
+                particlesContainer.appendChild(particle);
+            }
+        }
+        // Terminal typing effect
+        function typeTerminal() {
+            const terminal = document.querySelector('.terminal-body');
+            const lines = terminal.querySelectorAll('p');
+            lines.forEach((line, index) => {
+                const text = line.textContent;
+                line.textContent = '';
+                setTimeout(() => {
+                    let i = 0;
+                    const typing = setInterval(() => {
+                        if (i < text.length) {
+                            line.textContent += text.charAt(i);
+                            i++;
+                        } else {
+                            clearInterval(typing);
+                        }
+                    }, 20);
+                }, index * 1000);
+            });
+        }
+        // Initialize effects
+        document.addEventListener('DOMContentLoaded', () => {
+            createParticles();
+            typeTerminal();
+        });
+    </script>
+<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=mahiatlinux/neo" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>