| <!DOCTYPE html> |
| <html lang="en" data-theme="dark"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Anycoder — What I'm Capable Of</title> |
| <script src="https://cdn.tailwindcss.com"></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=Outfit:wght@300;400;500;600;700;800;900&family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@300;400;500;600&display=swap" rel="stylesheet"> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"> |
| <script> |
| tailwind.config = { |
| darkMode: 'class', |
| theme: { |
| extend: { |
| fontFamily: { |
| display: ['Outfit', 'system-ui', 'sans-serif'], |
| body: ['Space Grotesk', 'system-ui', 'sans-serif'], |
| mono: ['JetBrains Mono', 'monospace'], |
| }, |
| colors: { |
| void: { |
| 950: '#030308', |
| 900: '#070711', |
| 850: '#0a0a18', |
| 800: '#0f0f1f', |
| 750: '#13132a', |
| 700: '#181830', |
| 650: '#1e1e3a', |
| 600: '#252545', |
| 550: '#2d2d55', |
| }, |
| neon: { |
| blue: '#6366f1', |
| cyan: '#22d3ee', |
| violet: '#a855f7', |
| rose: '#f43f5e', |
| amber: '#f59e0b', |
| emerald: '#10b981', |
| } |
| } |
| } |
| } |
| } |
| </script> |
| <style> |
| :root { |
| --glow-blue: rgba(99, 102, 241, 0.5); |
| --glow-cyan: rgba(34, 211, 238, 0.4); |
| --glow-violet: rgba(168, 85, 247, 0.4); |
| --glow-rose: rgba(244, 63, 94, 0.35); |
| } |
| * { |
| margin: 0; |
| padding: 0; |
| box-sizing: border-box; |
| } |
| html { |
| scroll-behavior: smooth; |
| } |
| body { |
| background-color: #030308; |
| color: #e2e8f0; |
| overflow-x: hidden; |
| font-family: 'Space Grotesk', system-ui, sans-serif; |
| } |
| |
| |
| #particle-canvas { |
| position: fixed; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| z-index: 0; |
| pointer-events: none; |
| opacity: 0.7; |
| } |
| |
| |
| .noise-overlay { |
| position: fixed; |
| inset: 0; |
| z-index: 1; |
| pointer-events: none; |
| opacity: 0.03; |
| background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"); |
| background-repeat: repeat; |
| background-size: 256px; |
| } |
| |
| |
| .glass { |
| background: rgba(15, 15, 31, 0.6); |
| backdrop-filter: blur(20px) saturate(1.2); |
| -webkit-backdrop-filter: blur(20px) saturate(1.2); |
| border: 1px solid rgba(255,255,255,0.06); |
| } |
| .glass-strong { |
| background: rgba(15, 15, 31, 0.8); |
| backdrop-filter: blur(30px) saturate(1.3); |
| -webkit-backdrop-filter: blur(30px) saturate(1.3); |
| border: 1px solid rgba(255,255,255,0.08); |
| } |
| .glass-card { |
| background: rgba(18, 18, 40, 0.5); |
| backdrop-filter: blur(16px); |
| -webkit-backdrop-filter: blur(16px); |
| border: 1px solid rgba(255,255,255,0.05); |
| transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); |
| } |
| .glass-card:hover { |
| background: rgba(18, 18, 40, 0.7); |
| border-color: rgba(99, 102, 241, 0.3); |
| transform: translateY(-4px) scale(1.01); |
| box-shadow: 0 20px 60px -10px rgba(99, 102, 241, 0.15), 0 0 40px -10px rgba(34, 211, 238, 0.1); |
| } |
| |
| |
| .blob { |
| position: absolute; |
| border-radius: 50%; |
| filter: blur(80px); |
| opacity: 0.25; |
| pointer-events: none; |
| } |
| |
| |
| @keyframes float { |
| 0%, 100% { transform: translateY(0px) rotate(0deg); } |
| 33% { transform: translateY(-15px) rotate(1deg); } |
| 66% { transform: translateY(8px) rotate(-0.5deg); } |
| } |
| .animate-float { |
| animation: float 6s ease-in-out infinite; |
| } |
| @keyframes pulse-ring { |
| 0% { transform: scale(1); opacity: 1; } |
| 100% { transform: scale(2.5); opacity: 0; } |
| } |
| .pulse-ring { |
| animation: pulse-ring 2.5s ease-out infinite; |
| } |
| @keyframes slideUp { |
| from { opacity: 0; transform: translateY(50px); } |
| to { opacity: 1; transform: translateY(0); } |
| } |
| .slide-up { |
| animation: slideUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards; |
| opacity: 0; |
| } |
| |
| |
| .glow-border { |
| position: relative; |
| } |
| .glow-border::before { |
| content: ''; |
| position: absolute; |
| inset: -1px; |
| border-radius: inherit; |
| background: linear-gradient(135deg, var(--glow-blue), var(--glow-violet), var(--glow-cyan)); |
| opacity: 0; |
| transition: opacity 0.4s; |
| z-index: -1; |
| filter: blur(8px); |
| } |
| .glow-border:hover::before { |
| opacity: 0.6; |
| } |
| |
| |
| .terminal-line { |
| font-family: 'JetBrains Mono', monospace; |
| opacity: 0; |
| } |
| .terminal-cursor { |
| display: inline-block; |
| width: 8px; |
| height: 1.1em; |
| background: var(--neon-cyan); |
| animation: blink 1s step-end infinite; |
| vertical-align: text-bottom; |
| margin-left: 2px; |
| } |
| @keyframes blink { 50% { opacity: 0; } } |
| |
| |
| ::-webkit-scrollbar { |
| width: 6px; |
| } |
| ::-webkit-scrollbar-track { |
| background: transparent; |
| } |
| ::-webkit-scrollbar-thumb { |
| background: rgba(99, 102, 241, 0.3); |
| border-radius: 3px; |
| } |
| ::-webkit-scrollbar-thumb:hover { |
| background: rgba(99, 102, 241, 0.5); |
| } |
| |
| |
| .chat-bubble { |
| max-width: 85%; |
| padding: 12px 16px; |
| border-radius: 16px; |
| font-size: 0.875rem; |
| line-height: 1.6; |
| animation: bubbleIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; |
| opacity: 0; |
| } |
| @keyframes bubbleIn { |
| from { opacity: 0; transform: translateY(16px) scale(0.9); } |
| to { opacity: 1; transform: translateY(0) scale(1); } |
| } |
| .chat-user { |
| background: rgba(99, 102, 241, 0.2); |
| border: 1px solid rgba(99, 102, 241, 0.2); |
| margin-left: auto; |
| border-bottom-right-radius: 4px; |
| } |
| .chat-ai { |
| background: rgba(34, 211, 238, 0.08); |
| border: 1px solid rgba(34, 211, 238, 0.15); |
| margin-right: auto; |
| border-bottom-left-radius: 4px; |
| } |
| |
| |
| .progress-track { |
| height: 4px; |
| background: rgba(255,255,255,0.05); |
| border-radius: 2px; |
| overflow: hidden; |
| } |
| .progress-fill { |
| height: 100%; |
| border-radius: 2px; |
| background: linear-gradient(90deg, #6366f1, #22d3ee); |
| transform-origin: left; |
| transform: scaleX(0); |
| transition: transform 1.5s cubic-bezier(0.4, 0, 0.2, 1); |
| } |
| .progress-fill.in-view { transform: scaleX(1); } |
| |
| |
| .reveal { |
| opacity: 0; |
| transform: translateY(40px); |
| transition: all 0.9s cubic-bezier(0.16, 1, 0.3, 1); |
| } |
| .reveal.in-view { |
| opacity: 1; |
| transform: translateY(0); |
| } |
| .reveal-delay-1 { transition-delay: 0.1s; } |
| .reveal-delay-2 { transition-delay: 0.2s; } |
| .reveal-delay-3 { transition-delay: 0.3s; } |
| .reveal-delay-4 { transition-delay: 0.4s; } |
| .reveal-delay-5 { transition-delay: 0.5s; } |
| |
| |
| @keyframes marquee { |
| 0% { transform: translateX(0); } |
| 100% { transform: translateX(-50%); } |
| } |
| .marquee-track { |
| animation: marquee 30s linear infinite; |
| } |
| |
| |
| .shimmer-text { |
| background: linear-gradient(90deg, #e2e8f0 0%, #22d3ee 25%, #a855f7 50%, #22d3ee 75%, #e2e8f0 100%); |
| background-size: 200% auto; |
| -webkit-background-clip: text; |
| background-clip: text; |
| -webkit-text-fill-color: transparent; |
| animation: shimmer 4s linear infinite; |
| } |
| @keyframes shimmer { |
| 0% { background-position: 200% center; } |
| 100% { background-position: -200% center; } |
| } |
| |
| |
| @keyframes orbit { |
| from { transform: rotate(0deg) translateX(var(--orbit-radius)) rotate(0deg); } |
| to { transform: rotate(360deg) translateX(var(--orbit-radius)) rotate(-360deg); } |
| } |
| .orbit-item { |
| position: absolute; |
| animation: orbit var(--orbit-duration) linear infinite; |
| } |
| |
| |
| .magnetic-zone { |
| perspective: 1000px; |
| } |
| .magnetic-card { |
| transform-style: preserve-3d; |
| transition: transform 0.15s ease-out; |
| } |
| </style> |
| </head> |
| <body> |
|
|
| |
| <canvas id="particle-canvas"></canvas> |
| |
| <div class="noise-overlay"></div> |
|
|
| |
| <nav class="fixed top-0 left-0 right-0 z-50 glass-strong"> |
| <div class="max-w-7xl mx-auto px-6 py-4 flex items-center justify-between"> |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="flex items-center gap-3 group"> |
| <div class="relative w-10 h-10"> |
| <div class="absolute inset-0 rounded-xl bg-gradient-to-br from-indigo-500 via-violet-500 to-cyan-400 opacity-80 group-hover:opacity-100 transition-opacity"></div> |
| <div class="absolute inset-[2px] rounded-[10px] bg-void-900 flex items-center justify-center"> |
| <span class="font-display font-bold text-lg text-white">A</span> |
| </div> |
| </div> |
| <div class="leading-tight"> |
| <div class="font-display font-bold text-white text-base tracking-tight">anycoder</div> |
| <div class="text-xs text-slate-400 font-mono">Built with anycoder</div> |
| </div> |
| </a> |
| <div class="hidden md:flex items-center gap-1"> |
| <a href="#capabilities" class="px-4 py-2 rounded-lg text-sm text-slate-400 hover:text-white hover:bg-white/5 transition-all">Capabilities</a> |
| <a href="#showcase" class="px-4 py-2 rounded-lg text-sm text-slate-400 hover:text-white hover:bg-white/5 transition-all">Showcase</a> |
| <a href="#demo" class="px-4 py-2 rounded-lg text-sm text-slate-400 hover:text-white hover:bg-white/5 transition-all">Interactive</a> |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="ml-4 px-5 py-2.5 rounded-xl bg-gradient-to-r from-indigo-500 to-violet-500 text-white text-sm font-semibold hover:from-indigo-400 hover:to-violet-400 transition-all shadow-lg shadow-indigo-500/20"> |
| Try it Live <i class="fas fa-external-link-alt ml-1.5 text-xs"></i> |
| </a> |
| </div> |
| <button id="mobile-menu-btn" class="md:hidden text-white p-2 rounded-lg hover:bg-white/5"> |
| <i class="fas fa-bars"></i> |
| </button> |
| </div> |
| |
| <div id="mobile-menu" class="hidden md:hidden glass border-t border-white/5 px-6 py-4"> |
| <a href="#capabilities" class="block py-2 text-sm text-slate-300 hover:text-white">Capabilities</a> |
| <a href="#showcase" class="block py-2 text-sm text-slate-300 hover:text-white">Showcase</a> |
| <a href="#demo" class="block py-2 text-sm text-slate-300 hover:text-white">Interactive</a> |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="block mt-2 py-2 px-4 rounded-lg bg-indigo-500/20 text-indigo-300 text-sm text-center">Try it Live</a> |
| </div> |
| </nav> |
|
|
| |
| <section class="relative z-10 min-h-screen flex items-center justify-center px-6 overflow-hidden"> |
| |
| <div class="absolute inset-0 pointer-events-none"> |
| <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[500px] h-[500px]"> |
| <div class="orbit-item w-3 h-3 rounded-full bg-neon-blue shadow-[0_0_15px_#6366f1]" style="--orbit-radius:250px; --orbit-duration:20s; top:50%; left:50%; margin:-6px;"></div> |
| <div class="orbit-item w-2 h-2 rounded-full bg-neon-cyan shadow-[0_0_12px_#22d3ee]" style="--orbit-radius:200px; --orbit-duration:15s; animation-delay:-5s; top:50%; left:50%; margin:-4px;"></div> |
| <div class="orbit-item w-2.5 h-2.5 rounded-full bg-neon-violet shadow-[0_0_12px_#a855f7]" style="--orbit-radius:300px; --orbit-duration:25s; animation-delay:-10s; top:50%; left:50%; margin:-5px;"></div> |
| </div> |
| </div> |
|
|
| <div class="relative z-10 text-center max-w-4xl mx-auto pt-20"> |
| |
| <div class="inline-flex items-center gap-2 px-4 py-1.5 rounded-full glass mb-8 slide-up"> |
| <span class="w-2 h-2 rounded-full bg-neon-emerald animate-pulse"></span> |
| <span class="text-xs font-mono text-slate-300 uppercase tracking-wider">AI-Powered Assistant</span> |
| </div> |
|
|
| |
| <h1 class="font-display text-5xl sm:text-6xl md:text-7xl lg:text-8xl font-900 leading-[0.95] tracking-tight mb-6 slide-up" style="animation-delay:0.15s"> |
| <span class="text-white">What I'm</span><br> |
| <span class="shimmer-text">Capable Of</span> |
| </h1> |
|
|
| |
| <p class="text-lg sm:text-xl text-slate-400 max-w-2xl mx-auto leading-relaxed mb-10 slide-up" style="animation-delay:0.3s"> |
| A <span class="text-neon-cyan font-semibold">multimodal AI</span> that codes, reasons, creates, and solves. |
| From raw data to working apps — I bridge the gap between imagination and execution. |
| </p> |
|
|
| |
| <div class="flex flex-col sm:flex-row gap-4 justify-center items-center slide-up" style="animation-delay:0.45s"> |
| <a href="#capabilities" class="px-8 py-4 rounded-2xl bg-gradient-to-r from-indigo-500 via-violet-500 to-cyan-400 text-white font-semibold shadow-2xl shadow-indigo-500/25 hover:shadow-indigo-500/40 transition-all hover:-translate-y-0.5 group"> |
| Explore My Powers |
| <i class="fas fa-arrow-down ml-2 text-sm group-hover:translate-y-1 transition-transform inline-block"></i> |
| </a> |
| <a href="#demo" class="px-8 py-4 rounded-2xl glass text-white font-semibold hover:bg-white/10 transition-all border border-white/10 hover:border-white/20"> |
| See Me in Action |
| </a> |
| </div> |
|
|
| |
| <div class="mt-16 max-w-3xl mx-auto slide-up" style="animation-delay:0.6s"> |
| <div class="glass-strong rounded-2xl overflow-hidden shadow-2xl shadow-black/40"> |
| <div class="flex items-center gap-2 px-5 py-3 bg-void-750/80 border-b border-white/5"> |
| <span class="w-3 h-3 rounded-full bg-red-500/80"></span> |
| <span class="w-3 h-3 rounded-full bg-amber-500/80"></span> |
| <span class="w-3 h-3 rounded-full bg-emerald-500/80"></span> |
| <span class="ml-auto text-xs font-mono text-slate-500">anycoder@terminal</span> |
| </div> |
| <div class="p-5 font-mono text-sm text-left space-y-1.5" id="hero-terminal"> |
| <div class="terminal-line text-slate-400"> |
| <span class="text-neon-violet">anycoder</span><span class="text-slate-500"> ~ </span> |
| <span id="typing-text"></span><span class="terminal-cursor"></span> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="absolute bottom-8 left-1/2 -translate-x-1/2 flex flex-col items-center gap-2 opacity-50"> |
| <span class="text-[10px] font-mono text-slate-500 uppercase tracking-widest">Scroll</span> |
| <div class="w-px h-8 bg-gradient-to-b from-neon-cyan to-transparent"></div> |
| </div> |
| </section> |
|
|
| |
| <div class="relative z-10 py-8 overflow-hidden border-y border-white/5 bg-void-900/50"> |
| <div class="flex marquee-track whitespace-nowrap"> |
| <span class="inline-flex items-center gap-8 px-8"> |
| <span class="text-slate-500 font-mono text-sm uppercase tracking-widest">Code Generation</span> |
| <span class="text-neon-cyan text-xs">◆</span> |
| <span class="text-slate-500 font-mono text-sm uppercase tracking-widest">Data Analysis</span> |
| <span class="text-neon-violet text-xs">◆</span> |
| <span class="text-slate-500 font-mono text-sm uppercase tracking-widest">Image Processing</span> |
| <span class="text-neon-rose text-xs">◆</span> |
| <span class="text-slate-500 font-mono text-sm uppercase tracking-widest">Mathematics</span> |
| <span class="text-neon-amber text-xs">◆</span> |
| <span class="text-slate-500 font-mono text-sm uppercase tracking-widest">Reasoning</span> |
| <span class="text-neon-emerald text-xs">◆</span> |
| <span class="text-slate-500 font-mono text-sm uppercase tracking-widest">Creative Writing</span> |
| <span class="text-neon-blue text-xs">◆</span> |
| <span class="text-slate-500 font-mono text-sm uppercase tracking-widest">Debugging</span> |
| <span class="text-neon-cyan text-xs">◆</span> |
| <span class="text-slate-500 font-mono text-sm uppercase tracking-widest">Translation</span> |
| <span class="text-neon-violet text-xs">◆</span> |
| <span class="text-slate-500 font-mono text-sm uppercase tracking-widest">Architecture Design</span> |
| <span class="text-neon-rose text-xs">◆</span> |
| <span class="text-slate-500 font-mono text-sm uppercase tracking-widest">API Integration</span> |
| <span class="text-neon-amber text-xs">◆</span> |
| </span> |
| <span class="inline-flex items-center gap-8 px-8"> |
| <span class="text-slate-500 font-mono text-sm uppercase tracking-widest">Code Generation</span> |
| <span class="text-neon-cyan text-xs">◆</span> |
| <span class="text-slate-500 font-mono text-sm uppercase tracking-widest">Data Analysis</span> |
| <span class="text-neon-violet text-xs">◆</span> |
| <span class="text-slate-500 font-mono text-sm uppercase tracking-widest">Image Processing</span> |
| <span class="text-neon-rose text-xs">◆</span> |
| <span class="text-slate-500 font-mono text-sm uppercase tracking-widest">Mathematics</span> |
| <span class="text-neon-amber text-xs">◆</span> |
| <span class="text-slate-500 font-mono text-sm uppercase tracking-widest">Reasoning</span> |
| <span class="text-neon-emerald text-xs">◆</span> |
| <span class="text-slate-500 font-mono text-sm uppercase tracking-widest">Creative Writing</span> |
| <span class="text-neon-blue text-xs">◆</span> |
| <span class="text-slate-500 font-mono text-sm uppercase tracking-widest">Debugging</span> |
| <span class="text-neon-cyan text-xs">◆</span> |
| <span class="text-slate-500 font-mono text-sm uppercase tracking-widest">Translation</span> |
| <span class="text-neon-violet text-xs">◆</span> |
| <span class="text-slate-500 font-mono text-sm uppercase tracking-widest">Architecture Design</span> |
| <span class="text-neon-rose text-xs">◆</span> |
| <span class="text-slate-500 font-mono text-sm uppercase tracking-widest">API Integration</span> |
| <span class="text-neon-amber text-xs">◆</span> |
| </span> |
| </div> |
| </div> |
|
|
| |
| <section id="capabilities" class="relative z-10 px-6 py-24"> |
| <div class="max-w-7xl mx-auto"> |
| <div class="text-center mb-16 reveal"> |
| <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-indigo-500/10 border border-indigo-500/20 mb-4"> |
| <span class="w-1.5 h-1.5 rounded-full bg-neon-indigo"></span> |
| <span class="text-xs font-mono text-indigo-300 uppercase tracking-wider">Skill Matrix</span> |
| </div> |
| <h2 class="font-display text-4xl md:text-5xl font-bold text-white mb-4">Core Capabilities</h2> |
| <p class="text-slate-400 max-w-lg mx-auto">I process and generate across multiple domains. Click any tile to expand and see what I can do.</p> |
| </div> |
|
|
| <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 magnetic-zone"> |
| |
| <div class="glass-card rounded-2xl p-0 overflow-hidden reveal reveal-delay-1" data-capability="code"> |
| <div class="p-5 pb-4"> |
| <div class="flex items-start justify-between mb-4"> |
| <div class="w-12 h-12 rounded-xl bg-indigo-500/15 flex items-center justify-center"> |
| <i class="fas fa-code text-indigo-400 text-lg"></i> |
| </div> |
| <span class="text-[10px] font-mono text-slate-500 border border-slate-700/50 px-2 py-0.5 rounded">v2.4</span> |
| </div> |
| <h3 class="font-display font-semibold text-lg text-white mb-1">Code Generation</h3> |
| <p class="text-slate-400 text-sm leading-relaxed">Generate, refactor, and debug code in 30+ languages. From one-liners to full-stack architectures.</p> |
| </div> |
| <div class="px-5 pb-5"> |
| <div class="rounded-xl bg-void-900/80 border border-white/5 p-3 font-mono text-xs"> |
| <div class="text-slate-500 mb-1">// Example: React hook</div> |
| <div><span class="text-neon-violet">const</span> <span class="text-neon-cyan">useDebounce</span> = <span class="text-slate-300">(</span><span class="text-neon-amber">value</span>, <span class="text-neon-amber">delay</span><span class="text-slate-300">)</span> => <span class="text-slate-300">{</span></div> |
| <div class="pl-3"><span class="text-neon-violet">const</span> [<span class="text-neon-amber">debounced</span>, <span class="text-neon-amber">setDebounced</span>] = <span class="text-neon-cyan">useState</span><span class="text-slate-300">(</span><span class="text-neon-amber">value</span><span class="text-slate-300">);</span></div> |
| <div class="pl-3 text-neon-emerald">/* ...implementation */</div> |
| <div class="text-slate-300">};</div> |
| </div> |
| </div> |
| <div class="flex items-center gap-2 px-5 pb-4"> |
| <span class="text-xs text-slate-500 font-mono">30+ languages</span> |
| <span class="w-1 h-1 rounded-full bg-slate-600"></span> |
| <span class="text-xs text-slate-500 font-mono">Full-stack</span> |
| <span class="w-1 h-1 rounded-full bg-slate-600"></span> |
| <span class="text-xs text-slate-500 font-mono">Debugging</span> |
| </div> |
| </div> |
|
|
| <div class="glass-card rounded-2xl p-0 overflow-hidden reveal reveal-delay-2" data-capability="analysis"> |
| <div class="p-5 pb-4"> |
| <div class="flex items-start justify-between mb-4"> |
| <div class="w-12 h-12 rounded-xl bg-cyan-500/15 flex items-center justify-center"> |
| <i class="fas fa-chart-line text-cyan-400 text-lg"></i> |
| </div> |
| <span class="text-[10px] font-mono text-slate-500 border border-slate-700/50 px-2 py-0.5 rounded">v1.8</span> |
| </div> |
| <h3 class="font-display font-semibold text-lg text-white mb-1">Data & Analytics</h3> |
| <p class="text-slate-400 text-sm leading-relaxed">Parse CSVs, build visualizations, compute statistics, and derive actionable insights from raw data.</p> |
| </div> |
| <div class="px-5 pb-5"> |
| <div class="rounded-xl bg-void-900/80 border border-white/5 p-3 font-mono text-xs space-y-1"> |
| <div class="flex justify-between"><span class="text-slate-500">dataset.csv</span><span class="text-slate-600">12.4 MB</span></div> |
| <div class="h-px bg-white/5 my-2"></div> |
| <div class="flex gap-1 items-end h-16 px-1"> |
| <div class="flex-1 rounded-t bg-neon-cyan/30" style="height:40%"></div> |
| <div class="flex-1 rounded-t bg-neon-cyan/50" style="height:65%"></div> |
| <div class="flex-1 rounded-t bg-neon-cyan/70" style="height:85%"></div> |
| <div class="flex-1 rounded-t bg-neon-cyan/40" style="height:55%"></div> |
| <div class="flex-1 rounded-t bg-neon-cyan/90" style="height:100%"></div> |
| <div class="flex-1 rounded-t bg-neon-cyan/35" style="height:45%"></div> |
| <div class="flex-1 rounded-t bg-neon-cyan/60" style="height:72%"></div> |
| <div class="flex-1 rounded-t bg-neon-cyan/45" style="height:58%"></div> |
| </div> |
| <div class="flex justify-between text-[10px] text-slate-500 mt-1"> |
| <span>Q1</span><span>Q2</span><span>Q3</span><span>Q4</span> |
| </div> |
| </div> |
| </div> |
| <div class="flex items-center gap-2 px-5 pb-4"> |
| <span class="text-xs text-slate-500 font-mono">CSV / JSON</span> |
| <span class="w-1 h-1 rounded-full bg-slate-600"></span> |
| <span class="text-xs text-slate-500 font-mono">Visualization</span> |
| <span class="w-1 h-1 rounded-full bg-slate-600"></span> |
| <span class="text-xs text-slate-500 font-mono">Stats</span> |
| </div> |
| </div> |
|
|
| <div class="glass-card rounded-2xl p-0 overflow-hidden reveal reveal-delay-3" data-capability="vision"> |
| <div class="p-5 pb-4"> |
| <div class="flex items-start justify-between mb-4"> |
| <div class="w-12 h-12 rounded-xl bg-violet-500/15 flex items-center justify-center"> |
| <i class="fas fa-eye text-violet-400 text-lg"></i> |
| </div> |
| <span class="text-[10px] font-mono text-slate-500 border border-slate-700/50 px-2 py-0.5 rounded">v3.1</span> |
| </div> |
| <h3 class="font-display font-semibold text-lg text-white mb-1">Computer Vision</h3> |
| <p class="text-slate-400 text-sm leading-relaxed">Analyze images, detect objects, read text (OCR), and describe visual content with precision.</p> |
| </div> |
| <div class="px-5 pb-5"> |
| <div class="rounded-xl bg-void-900/80 border border-white/5 p-3 font-mono text-xs"> |
| <div class="grid grid-cols-3 gap-1.5 mb-2"> |
| <div class="aspect-square rounded bg-violet-500/20 border border-violet-500/20 flex items-center justify-center"><i class="fas fa-image text-violet-400 text-xs"></i></div> |
| <div class="aspect-square rounded bg-void-750"></div> |
| <div class="aspect-square rounded bg-void-750"></div> |
| <div class="aspect-square rounded bg-void-750"></div> |
| <div class="aspect-square rounded bg-void-750"></div> |
| <div class="aspect-square rounded bg-void-750"></div> |
| </div> |
| <div class="space-y-1"> |
| <div class="flex items-center gap-2"><div class="w-20 h-1.5 rounded-full bg-white/10 overflow-hidden"><div class="h-full w-[92%] rounded-full bg-violet-400"></div></div><span class="text-[10px] text-slate-400">cat: 92%</span></div> |
| <div class="flex items-center gap-2"><div class="w-20 h-1.5 rounded-full bg-white/10 overflow-hidden"><div class="h-full w-[87%] rounded-full bg-violet-400"></div></div><span class="text-[10px] text-slate-400">indoor: 87%</span></div> |
| <div class="flex items-center gap-2"><div class="w-20 h-1.5 rounded-full bg-white/10 overflow-hidden"><div class="h-full w-[64%] rounded-full bg-violet-400"></div></div><span class="text-[10px] text-slate-400">furniture: 64%</span></div> |
| </div> |
| </div> |
| </div> |
| <div class="flex items-center gap-2 px-5 pb-4"> |
| <span class="text-xs text-slate-500 font-mono">Object Detection</span> |
| <span class="w-1 h-1 rounded-full bg-slate-600"></span> |
| <span class="text-xs text-slate-500 font-mono">OCR</span> |
| <span class="w-1 h-1 rounded-full bg-slate-600"></span> |
| <span class="text-xs text-slate-500 font-mono">Captioning</span> |
| </div> |
| </div> |
|
|
| <div class="glass-card rounded-2xl p-0 overflow-hidden reveal reveal-delay-1" data-capability="math"> |
| <div class="p-5 pb-4"> |
| <div class="flex items-start justify-between mb-4"> |
| <div class="w-12 h-12 rounded-xl bg-amber-500/15 flex items-center justify-center"> |
| <i class="fas fa-square-root-alt text-amber-400 text-lg"></i> |
| </div> |
| <span class="text-[10px] font-mono text-slate-500 border border-slate-700/50 px-2 py-0.5 rounded">v2.0</span> |
| </div> |
| <h3 class="font-display font-semibold text-lg text-white mb-1">Mathematics</h3> |
| <p class="text-slate-400 text-sm leading-relaxed">Solve equations, prove theorems, work through calculus, linear algebra, and probability step-by-step.</p> |
| </div> |
| <div class="px-5 pb-5"> |
| <div class="rounded-xl bg-void-900/80 border border-white/5 p-3 font-mono text-xs space-y-1"> |
| <div class="text-slate-500">∫(3x² + 2x - 5) dx</div> |
| <div class="text-amber-400/60">= x³ + x² - 5x + C</div> |
| <div class="h-px bg-white/5 my-2"></div> |
| <div class="text-slate-500">det(A) where A = [[2,3],[1,4]]</div> |
| <div class="text-amber-400/60">= (2)(4) - (3)(1) = 5</div> |
| </div> |
| </div> |
| <div class="flex items-center gap-2 px-5 pb-4"> |
| <span class="text-xs text-slate-500 font-mono">Calculus</span> |
| <span class="w-1 h-1 rounded-full bg-slate-600"></span> |
| <span class="text-xs text-slate-500 font-mono">Algebra</span> |
| <span class="w-1 h-1 rounded-full bg-slate-600"></span> |
| <span class="text-xs text-slate-500 font-mono">Statistics</span> |
| </div> |
| </div> |
|
|
| <div class="glass-card rounded-2xl p-0 overflow-hidden reveal reveal-delay-2" data-capability="writing"> |
| <div class="p-5 pb-4"> |
| <div class="flex items-start justify-between mb-4"> |
| <div class="w-12 h-12 rounded-xl bg-rose-500/15 flex items-center justify-center"> |
| <i class="fas fa-pen-fancy text-rose-400 text-lg"></i> |
| </div> |
| <span class="text-[10px] font-mono text-slate-500 border border-slate-700/50 px-2 py-0.5 rounded">v1.5</span> |
| </div> |
| <h3 class="font-display font-semibold text-lg text-white mb-1">Creative Writing</h3> |
| <p class="text-slate-400 text-sm leading-relaxed">Compose poetry, scripts, marketing copy, and long-form narratives. Adapt tone for any audience.</p> |
| </div> |
| <div class="px-5 pb-5"> |
| <div class="rounded-xl bg-void-900/80 border border-white/5 p-3 font-mono text-xs leading-relaxed text-slate-300"> |
| <span class="text-rose-400/60">Draft v3</span> — tone: professional<br> |
| "In an era defined by rapid digital transformation, organizations that harness AI-driven insights gain a decisive competitive edge..." |
| </div> |
| </div> |
| <div class="flex items-center gap-2 px-5 pb-4"> |
| <span class="text-xs text-slate-500 font-mono">Copywriting</span> |
| <span class="w-1 h-1 rounded-full bg-slate-600"></span> |
| <span class="text-xs text-slate-500 font-mono">Poetry</span> |
| <span class="w-1 h-1 rounded-full bg-slate-600"></span> |
| <span class="text-xs text-slate-500 font-mono">Scripts</span> |
| </div> |
| </div> |
|
|
| <div class="glass-card rounded-2xl p-0 overflow-hidden reveal reveal-delay-3" data-capability="reasoning"> |
| <div class="p-5 pb-4"> |
| <div class="flex items-start justify-between mb-4"> |
| <div class="w-12 h-12 rounded-xl bg-emerald-500/15 flex items-center justify-center"> |
| <i class="fas fa-brain text-emerald-400 text-lg"></i> |
| </div> |
| <span class="text-[10px] font-mono text-slate-500 border border-slate-700/50 px-2 py-0.5 rounded">v4.0</span> |
| </div> |
| <h3 class="font-display font-semibold text-lg text-white mb-1">Reasoning & Logic</h3> |
| <p class="text-slate-400 text-sm leading-relaxed">Tackle complex logical puzzles, compare strategies, weigh trade-offs, and make reasoned recommendations.</p> |
| </div> |
| <div class="px-5 pb-5"> |
| <div class="rounded-xl bg-void-900/80 border border-white |
