Spaces:
Running
Running
looking good, make rouinde th more common, and also, insetad of website make a full blown dahsboard - Initial Deployment
eec4a02
verified
| <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> |