Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>AnyCoder - Modern Web Platform</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet"> | |
| <script src="https://unpkg.com/lucide@latest"></script> | |
| <style> | |
| * { | |
| font-family: 'Inter', sans-serif; | |
| } | |
| .font-mono { | |
| font-family: 'JetBrains Mono', monospace; | |
| } | |
| /* Custom Scrollbar */ | |
| ::-webkit-scrollbar { | |
| width: 8px; | |
| height: 8px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: #0f172a; | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: #334155; | |
| border-radius: 4px; | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: #475569; | |
| } | |
| /* Glassmorphism Effects */ | |
| .glass { | |
| background: rgba(15, 23, 42, 0.7); | |
| backdrop-filter: blur(20px); | |
| -webkit-backdrop-filter: blur(20px); | |
| border: 1px solid rgba(255, 255, 255, 0.08); | |
| } | |
| .glass-card { | |
| background: rgba(30, 41, 59, 0.4); | |
| backdrop-filter: blur(12px); | |
| border: 1px solid rgba(255, 255, 255, 0.05); | |
| transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); | |
| } | |
| .glass-card:hover { | |
| background: rgba(51, 65, 85, 0.5); | |
| transform: translateY(-4px); | |
| border-color: rgba(99, 102, 241, 0.3); | |
| box-shadow: 0 20px 40px -10px rgba(99, 102, 241, 0.2); | |
| } | |
| /* Animated Gradient Background */ | |
| .gradient-bg { | |
| background: linear-gradient(-45deg, #0f172a, #1e1b4b, #312e81, #0f172a); | |
| background-size: 400% 400%; | |
| animation: gradientShift 15s ease infinite; | |
| } | |
| @keyframes gradientShift { | |
| 0% { background-position: 0% 50%; } | |
| 50% { background-position: 100% 50%; } | |
| 100% { background-position: 0% 50%; } | |
| } | |
| /* Floating Animation */ | |
| .float { | |
| animation: float 6s ease-in-out infinite; | |
| } | |
| @keyframes float { | |
| 0%, 100% { transform: translateY(0px); } | |
| 50% { transform: translateY(-20px); } | |
| } | |
| /* Pulse Glow */ | |
| .pulse-glow { | |
| animation: pulseGlow 2s ease-in-out infinite; | |
| } | |
| @keyframes pulseGlow { | |
| 0%, 100% { box-shadow: 0 0 20px rgba(99, 102, 241, 0.3); } | |
| 50% { box-shadow: 0 0 40px rgba(99, 102, 241, 0.6); } | |
| } | |
| /* Text Gradient */ | |
| .text-gradient { | |
| background: linear-gradient(135deg, #818cf8 0%, #c084fc 50%, #f472b6 100%); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| /* Code Block Styling */ | |
| .code-block { | |
| background: #0d1117; | |
| border-radius: 12px; | |
| overflow: hidden; | |
| } | |
| .code-header { | |
| background: #161b22; | |
| padding: 12px 16px; | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .code-dot { | |
| width: 12px; | |
| height: 12px; | |
| border-radius: 50%; | |
| } | |
| /* Tab Active State */ | |
| .tab-active { | |
| background: rgba(99, 102, 241, 0.2); | |
| color: #818cf8; | |
| border-bottom: 2px solid #818cf8; | |
| } | |
| /* Smooth Scroll */ | |
| html { | |
| scroll-behavior: smooth; | |
| } | |
| /* Reveal Animation */ | |
| .reveal { | |
| opacity: 0; | |
| transform: translateY(30px); | |
| transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1); | |
| } | |
| .reveal.active { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| /* Custom Range Slider */ | |
| input[type="range"] { | |
| -webkit-appearance: none; | |
| appearance: none; | |
| background: transparent; | |
| cursor: pointer; | |
| } | |
| input[type="range"]::-webkit-slider-runnable-track { | |
| background: #334155; | |
| height: 6px; | |
| border-radius: 3px; | |
| } | |
| input[type="range"]::-webkit-slider-thumb { | |
| -webkit-appearance: none; | |
| appearance: none; | |
| margin-top: -5px; | |
| background: #818cf8; | |
| height: 16px; | |
| width: 16px; | |
| border-radius: 50%; | |
| transition: all 0.2s; | |
| } | |
| input[type="range"]::-webkit-slider-thumb:hover { | |
| transform: scale(1.2); | |
| box-shadow: 0 0 10px rgba(129, 140, 248, 0.5); | |
| } | |
| /* Loading Spinner */ | |
| .spinner { | |
| border: 3px solid rgba(255,255,255,0.1); | |
| border-left-color: #818cf8; | |
| border-radius: 50%; | |
| width: 24px; | |
| height: 24px; | |
| animation: spin 1s linear infinite; | |
| } | |
| @keyframes spin { | |
| to { transform: rotate(360deg); } | |
| } | |
| /* Tooltip */ | |
| .tooltip { | |
| position: relative; | |
| } | |
| .tooltip::after { | |
| content: attr(data-tip); | |
| position: absolute; | |
| bottom: 100%; | |
| left: 50%; | |
| transform: translateX(-50%) translateY(-8px); | |
| padding: 6px 12px; | |
| background: #1e293b; | |
| color: white; | |
| font-size: 12px; | |
| border-radius: 6px; | |
| white-space: nowrap; | |
| opacity: 0; | |
| visibility: hidden; | |
| transition: all 0.2s; | |
| } | |
| .tooltip:hover::after { | |
| opacity: 1; | |
| visibility: visible; | |
| } | |
| </style> | |
| </head> | |
| <body class="gradient-bg min-h-screen text-slate-200 overflow-x-hidden"> | |
| <!-- Navigation --> | |
| <nav class="fixed top-0 w-full z-50 glass border-b border-slate-800/50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex justify-between items-center h-16"> | |
| <div class="flex items-center gap-3"> | |
| <div class="w-10 h-10 rounded-xl bg-gradient-to-br from-indigo-500 to-purple-600 flex items-center justify-center pulse-glow"> | |
| <i data-lucide="code-2" class="w-5 h-5 text-white"></i> | |
| </div> | |
| <span class="text-xl font-bold text-white">AnyCoder</span> | |
| </div> | |
| <div class="hidden md:flex items-center gap-8"> | |
| <a href="#features" class="text-sm text-slate-400 hover:text-white transition-colors">Features</a> | |
| <a href="#playground" class="text-sm text-slate-400 hover:text-white transition-colors">Playground</a> | |
| <a href="#pricing" class="text-sm text-slate-400 hover:text-white transition-colors">Pricing</a> | |
| <a href="#docs" class="text-sm text-slate-400 hover:text-white transition-colors">Docs</a> | |
| </div> | |
| <div class="flex items-center gap-4"> | |
| <button id="themeToggle" class="p-2 rounded-lg hover:bg-slate-800 transition-colors tooltip" data-tip="Toggle Theme"> | |
| <i data-lucide="moon" class="w-5 h-5"></i> | |
| </button> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="hidden sm:flex items-center gap-2 px-4 py-2 bg-indigo-600 hover:bg-indigo-700 text-white text-sm font-medium rounded-lg transition-all hover:scale-105"> | |
| <span>Built with anycoder</span> | |
| <i data-lucide="external-link" class="w-4 h-4"></i> | |
| </a> | |
| <button class="md:hidden p-2" onclick="toggleMobileMenu()"> | |
| <i data-lucide="menu" class="w-6 h-6"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Mobile Menu --> | |
| <div id="mobileMenu" class="hidden md:hidden glass border-t border-slate-800/50"> | |
| <div class="px-4 py-4 space-y-3"> | |
| <a href="#features" class="block text-slate-400 hover:text-white py-2">Features</a> | |
| <a href="#playground" class="block text-slate-400 hover:text-white py-2">Playground</a> | |
| <a href="#pricing" class="block text-slate-400 hover:text-white py-2">Pricing</a> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="block text-indigo-400 py-2">Built with anycoder →</a> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section class="relative pt-32 pb-20 lg:pt-48 lg:pb-32 overflow-hidden"> | |
| <!-- Background Elements --> | |
| <div class="absolute inset-0 overflow-hidden pointer-events-none"> | |
| <div class="absolute -top-40 -right-40 w-96 h-96 bg-indigo-500/20 rounded-full blur-3xl"></div> | |
| <div class="absolute -bottom-40 -left-40 w-96 h-96 bg-purple-500/20 rounded-full blur-3xl"></div> | |
| <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[800px] bg-blue-500/10 rounded-full blur-3xl"></div> | |
| </div> | |
| <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="grid lg:grid-cols-2 gap-12 items-center"> | |
| <div class="text-center lg:text-left reveal active"> | |
| <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-indigo-500/10 border border-indigo-500/20 text-indigo-400 text-sm mb-6"> | |
| <span class="w-2 h-2 rounded-full bg-indigo-400 animate-pulse"></span> | |
| v2.0 Now Available | |
| </div> | |
| <h1 class="text-4xl sm:text-5xl lg:text-6xl font-bold leading-tight mb-6"> | |
| Build <span class="text-gradient">Intelligent</span><br> | |
| Applications Faster | |
| </h1> | |
| <p class="text-lg text-slate-400 mb-8 max-w-xl mx-auto lg:mx-0"> | |
| Harness the power of AI-driven code generation. Transform your ideas into production-ready applications with unprecedented speed and precision. | |
| </p> | |
| <div class="flex flex-col sm:flex-row gap-4 justify-center lg:justify-start"> | |
| <button onclick="scrollToSection('playground')" class="group px-8 py-4 bg-gradient-to-r from-indigo-600 to-purple-600 hover:from-indigo-700 hover:to-purple-700 text-white font-semibold rounded-xl transition-all hover:scale-105 flex items-center justify-center gap-2"> | |
| <span>Start Building</span> | |
| <i data-lucide="arrow-right" class="w-5 h-5 group-hover:translate-x-1 transition-transform"></i> | |
| </button> | |
| <button onclick="showDemo()" class="px-8 py-4 glass text-white font-semibold rounded-xl hover:bg-slate-800 transition-all flex items-center justify-center gap-2"> | |
| <i data-lucide="play" class="w-5 h-5"></i> | |
| <span>Watch Demo</span> | |
| </button> | |
| </div> | |
| <div class="mt-12 flex items-center gap-8 justify-center lg:justify-start"> | |
| <div class="text-center"> | |
| <div class="text-2xl font-bold text-white">50K+</div> | |
| <div class="text-sm text-slate-500">Developers</div> | |
| </div> | |
| <div class="w-px h-12 bg-slate-700"></div> | |
| <div class="text-center"> | |
| <div class="text-2xl font-bold text-white">1M+</div> | |
| <div class="text-sm text-slate-500">Projects</div> | |
| </div> | |
| <div class="w-px h-12 bg-slate-700"></div> | |
| <div class="text-center"> | |
| <div class="text-2xl font-bold text-white">99.9%</div> | |
| <div class="text-sm text-slate-500">Uptime</div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Interactive Code Preview --> | |
| <div class="relative float reveal active" style="transition-delay: 0.2s;"> | |
| <div class="code-block shadow-2xl shadow-indigo-500/20"> | |
| <div class="code-header"> | |
| <div class="code-dot bg-red-500"></div> | |
| <div class="code-dot bg-yellow-500"></div> | |
| <div class="code-dot bg-green-500"></div> | |
| <span class="ml-4 text-sm text-slate-400 font-mono">app.tsx</span> | |
| <div class="ml-auto flex items-center gap-2"> | |
| <button onclick="copyCode()" class="p-1.5 hover:bg-slate-700 rounded transition-colors tooltip" data-tip="Copy Code"> | |
| <i data-lucide="copy" class="w-4 h-4 text-slate-400"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="p-6 font-mono text-sm overflow-x-auto"> | |
| <pre id="typewriter" class="text-slate-300 leading-relaxed"></pre> | |
| <span class="inline-block w-2 h-5 bg-indigo-400 animate-pulse ml-1"></span> | |
| </div> | |
| </div> | |
| <!-- Floating Cards --> | |
| <div class="absolute -top-4 -right-4 glass-card p-4 rounded-xl shadow-xl"> | |
| <div class="flex items-center gap-3"> | |
| <div class="w-10 h-10 rounded-lg bg-green-500/20 flex items-center justify-center"> | |
| <i data-lucide="check-circle" class="w-5 h-5 text-green-400"></i> | |
| </div> | |
| <div> | |
| <div class="text-sm font-medium text-white">Build Success</div> | |
| <div class="text-xs text-slate-400">Deployed in 2.3s</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="absolute -bottom-4 -left-4 glass-card p-4 rounded-xl shadow-xl"> | |
| <div class="flex items-center gap-3"> | |
| <div class="w-10 h-10 rounded-lg bg-purple-500/20 flex items-center justify-center"> | |
| <i data-lucide="zap" class="w-5 h-5 text-purple-400"></i> | |
| </div> | |
| <div> | |
| <div class="text-sm font-medium text-white">AI Optimized</div> | |
| <div class="text-xs text-slate-400">98% performance</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Features Grid --> | |
| <section id="features" class="py-20 relative"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16 reveal"> | |
| <h2 class="text-3xl sm:text-4xl font-bold mb-4">Powerful <span class="text-gradient">Features</span></h2> | |
| <p class="text-slate-400 max-w-2xl mx-auto">Everything you need to build, deploy, and scale modern applications with AI assistance.</p> | |
| </div> | |
| <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <!-- Feature 1 --> | |
| <div class="glass-card p-6 rounded-2xl reveal" style="transition-delay: 0.1s;"> | |
| <div class="w-12 h-12 rounded-xl bg-indigo-500/20 flex items-center justify-center mb-4"> | |
| <i data-lucide="brain" class="w-6 h-6 text-indigo-400"></i> | |
| </div> | |
| <h3 class="text-lg font-semibold text-white mb-2">AI Code Generation</h3> | |
| <p class="text-slate-400 text-sm leading-relaxed">Generate production-ready code from natural language descriptions with context-aware suggestions.</p> | |
| </div> | |
| <!-- Feature 2 --> | |
| <div class="glass-card p-6 rounded-2xl reveal" style="transition-delay: 0.2s;"> | |
| <div class="w-12 h-12 rounded-xl bg-purple-500/20 flex items-center justify-center mb-4"> | |
| <i data-lucide="git-branch" class="w-6 h-6 text-purple-400"></i> | |
| </div> | |
| <h3 class="text-lg font-semibold text-white mb-2">Smart Version Control</h3> | |
| <p class="text-slate-400 text-sm leading-relaxed">Intelligent branching and merging with AI-powered conflict resolution and code review.</p> | |
| </div> | |
| <!-- Feature 3 --> | |
| <div class="glass-card p-6 rounded-2xl reveal" style="transition-delay: 0.3s;"> | |
| <div class="w-12 h-12 rounded-xl bg-pink-500/20 flex items-center justify-center mb-4"> | |
| <i data-lucide="shield-check" class="w-6 h-6 text-pink-400"></i> | |
| </div> | |
| <h3 class="text-lg font-semibold text-white mb-2">Security Scanning</h3> | |
| <p class="text-slate-400 text-sm leading-relaxed">Real-time vulnerability detection and automated security patches for your codebase.</p> | |
| </div> | |
| <!-- Feature 4 --> | |
| <div class="glass-card p-6 rounded-2xl reveal" style="transition-delay: 0.4s;"> | |
| <div class="w-12 h-12 rounded-xl bg-blue-500/20 flex items-center justify-center mb-4"> | |
| <i data-lucide="cloud" class="w-6 h-6 text-blue-400"></i> | |
| </div> | |
| <h3 class="text-lg font-semibold text-white mb-2">One-Click Deploy</h3> | |
| <p class="text-slate-400 text-sm leading-relaxed">Deploy to global edge networks with automatic SSL, CDN, and performance optimization.</p> | |
| </div> | |
| <!-- Feature 5 --> | |
| <div class="glass-card p-6 rounded-2xl reveal" style="transition-delay: 0.5s;"> | |
| <div class="w-12 h-12 rounded-xl bg-emerald-500/20 flex items-center justify-center mb-4"> | |
| <i data-lucide="users" class="w-6 h-6 text-emerald-400"></i> | |
| </div> | |
| <h3 class="text-lg font-semibold text-white mb-2">Team Collaboration</h3> | |
| <p class="text-slate-400 text-sm leading-relaxed">Real-time collaborative editing with AI-assisted pair programming and knowledge sharing.</p> | |
| </div> | |
| <!-- Feature 6 --> | |
| <div class="glass-card p-6 rounded-2xl reveal" style="transition-delay: 0.6s;"> | |
| <div class="w-12 h-12 rounded-xl bg-orange-500/20 flex items-center justify-center mb-4"> | |
| <i data-lucide="bar-chart-3" class="w-6 h-6 text-orange-400"></i> | |
| </div> | |
| <h3 class="text-lg font-semibold text-white mb-2">Analytics Dashboard</h3> | |
| <p class="text-slate-400 text-sm leading-relaxed">Comprehensive insights into code quality, performance metrics, and team productivity.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Interactive Playground --> | |
| <section id="playground" class="py-20 relative"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-12 reveal"> | |
| <h2 class="text-3xl sm:text-4xl font-bold mb-4">Try It <span class="text-gradient">Now</span></h2> | |
| <p class="text-slate-400 max-w-2xl mx-auto">Experience the power of AI-assisted coding in our interactive playground.</p> | |
| </div> | |
| <div class="glass rounded-2xl p-1 reveal"> | |
| <div class="bg-slate-900/50 rounded-xl overflow-hidden"> | |
| <!-- Toolbar --> | |
| <div class="flex items-center justify-between p-4 border-b border-slate-800"> | |
| <div class="flex items-center gap-4"> | |
| <div class="flex items-center gap-2"> | |
| <label class="text-sm text-slate-400">Language:</label> | |
| <select id="languageSelect" onchange="updatePlayground()" class="bg-slate-800 text-white text-sm rounded-lg px-3 py-1.5 border border-slate-700 focus:border-indigo-500 focus:outline-none"> | |
| <option value="javascript">JavaScript</option> | |
| <option value="python">Python</option> | |
| <option value="typescript">TypeScript</option> | |
| <option value="rust">Rust</option> | |
| </select> | |
| </div> | |
| <div class="flex items-center gap-2"> | |
| <label class="text-sm text-slate-400">Theme:</label> | |
| <select id="editorTheme" onchange="updateTheme()" class="bg-slate-800 text-white text-sm rounded-lg px-3 py-1.5 border border-slate-700 focus:border-indigo-500 focus:outline-none"> | |
| <option value="dark">Dark</option> | |
| <option value="light">Light</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div class="flex items-center gap-2"> | |
| <button onclick="resetCode()" class="p-2 hover:bg-slate-800 rounded-lg transition-colors tooltip" data-tip="Reset"> | |
| <i data-lucide="rotate-ccw" class="w-4 h-4 text-slate-400"></i> | |
| </button> | |
| <button onclick="runCode()" id="runBtn" class="flex items-center gap-2 px-4 py-2 bg-green-600 hover:bg-green-700 text-white text-sm font-medium rounded-lg transition-all"> | |
| <i data-lucide="play" class="w-4 h-4"></i> | |
| <span>Run</span> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Editor Area --> | |
| <div class="grid lg:grid-cols-2 divide-y lg:divide-y-0 lg:divide-x divide-slate-800"> | |
| <div class="p-4"> | |
| <textarea id="codeEditor" class="w-full h-80 bg-transparent text-slate-300 font-mono text-sm resize-none focus:outline-none" spellcheck="false">// Write your code here | |
| function fibonacci(n) { | |
| if (n <= 1) return n; | |
| return fibonacci(n - 1) + fibonacci(n - 2); | |
| } | |
| console.log("Fibonacci sequence:"); | |
| for (let i = 0; i < 10; i++) { | |
| console.log(`F(${i}) = ${fibonacci(i)}`); | |
| }</textarea> | |
| </div> | |
| <div class="p-4 bg-slate-950"> | |
| <div class="flex items-center justify-between mb-3"> | |
| <span class="text-sm text-slate-500 font-mono">Output</span> | |
| <button onclick="clearOutput()" class="text-xs text-slate-500 hover:text-slate-300">Clear</button> | |
| </div> | |
| <div id="outputArea" class="font-mono text-sm text-slate-300 h-80 overflow-auto"> | |
| <span class="text-slate-600">// Click Run to execute code...</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Pricing Section --> | |
| <section id="pricing" class="py-20 relative"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-12 reveal"> | |
| <h2 class="text-3xl sm:text-4xl font-bold mb-4">Simple <span class="text-gradient">Pricing</span></h2> | |
| <p class="text-slate-400 max-w-2xl mx-auto">Choose the plan that fits your needs. Upgrade or downgrade anytime.</p> | |
| <!-- Billing Toggle --> | |
| <div class="flex items-center justify-center gap-4 mt-8"> | |
| <span class="text-sm text-slate-400" id="monthlyLabel">Monthly</span> | |
| <button onclick="toggleBilling()" class="relative w-14 h-7 bg-slate-700 rounded-full transition-colors" id="billingToggle"> | |
| <div class="absolute top-1 left-1 w-5 h-5 bg-white rounded-full transition-transform" id="billingKnob"></div> | |
| </button> | |
| <span class="text-sm text-slate-400" id="yearlyLabel">Yearly <span class="text-green-400 text-xs">Save 20%</span></span> | |
| </div> | |
| </div> | |
| <div class="grid md:grid-cols-3 gap-6 max-w-5xl mx-auto"> | |
| <!-- Free Plan --> | |
| <div class="glass-card p-6 rounded-2xl reveal" style="transition-delay: 0.1s;"> | |
| <div class="mb-6"> | |
| <h3 class="text-lg font-semibold text-white mb-2">Starter</h3> | |
| <p class="text-slate-400 text-sm">Perfect for learning and small projects</p> | |
| </div> | |
| <div class="mb-6"> | |
| <span class="text-4xl font-bold text-white">$0</span> | |
| <span class="text-slate-400">/month</span> | |
| </div> | |
| <ul class="space-y-3 mb-6"> | |
| <li class="flex items-center gap-3 text-sm text-slate-300"> | |
| <i data-lucide="check" class="w-4 h-4 text-green-400"></i> | |
| 100 AI generations/month | |
| </li> | |
| <li class="flex items-center gap-3 text-sm text-slate-300"> | |
| <i data-lucide="check" class="w-4 h-4 text-green-400"></i> | |
| Community support | |
| </li> | |
| <li class="flex items-center gap-3 text-sm text-slate-300"> | |
| <i data-lucide="check" class="w-4 h-4 text-green-400"></i> | |
| Basic analytics | |
| </li> | |
| <li class="flex items-center gap-3 text-sm text-slate-500"> | |
| <i data-lucide="x" class="w-4 h-4"></i> | |
| Priority support | |
| </li> | |
| </ul> | |
| <button class="w-full py-3 border border-slate-600 text-white rounded-lg hover:bg-slate-800 transition-all">Get Started</button> | |
| </div> | |
| <!-- Pro Plan --> | |
| <div class="glass-card p-6 rounded-2xl border-indigo-500/30 relative reveal" style="transition-delay: 0.2s;"> | |
| <div class="absolute -top-3 left-1/2 -translate-x-1/2 px-3 py-1 bg-gradient-to-r from-indigo-600 to-purple-600 text-white text-xs font-medium rounded-full"> | |
| Most Popular | |
| </div> | |
| <div class="mb-6"> | |
| <h3 class="text-lg font-semibold text-white mb-2">Professional</h3> | |
| <p class="text-slate-400 text-sm">For serious developers and teams</p> | |
| </div> | |
| <div class="mb-6"> | |
| <span class="text-4xl font-bold text-white" id="proPrice">$29</span> | |
| <span class="text-slate-400">/month</span> | |
| </div> | |
| <ul class="space-y-3 mb-6"> | |
| <li class="flex items-center gap-3 text-sm text-slate-300"> | |
| <i data-lucide="check" class="w-4 h-4 text-green-400"></i> | |
| Unlimited AI generations | |
| </li> | |
| <li class="flex items-center gap-3 text-sm text-slate-300"> | |
| <i data-lucide="check" class="w-4 h-4 text-green-400"></i> | |
| Priority support | |
| </li> | |
| <li class="flex items-center gap-3 text-sm text-slate-300"> | |
| <i data-lucide="check" class="w-4 h-4 text-green-400"></i> | |
| Advanced analytics | |
| </li> | |
| <li class="flex items-center gap-3 text-sm text-slate-300"> | |
| <i data-lucide="check" class="w-4 h-4 text-green-400"></i> | |
| Team collaboration | |
| </li> | |
| </ul> | |
| <button class="w-full py-3 bg-gradient-to-r from-indigo-600 to-purple-600 text-white rounded-lg hover:opacity-90 transition-all">Start Free Trial</button> | |
| </div> | |
| <!-- Enterprise Plan --> | |
| <div class="glass-card p-6 rounded-2xl reveal" style="transition-delay: 0.3s;"> | |
| <div class="mb-6"> | |
| <h3 class="text-lg font-semibold text-white mb-2">Enterprise</h3> | |
| <p class="text-slate-400 text-sm">Custom solutions for large organizations</p> | |
| </div> | |
| <div class="mb-6"> | |
| <span class="text-4xl font-bold text-white">Custom</span> | |
| </div> | |
| <ul class="space-y-3 mb-6"> | |
| <li class="flex items-center gap-3 text-sm text-slate-300"> | |
| <i data-lucide="check" class="w-4 h-4 text-green-400"></i> | |
| Everything in Pro | |
| </li> | |
| <li class="flex items-center gap-3 text-sm text-slate-300"> | |
| <i data-lucide="check" class="w-4 h-4 text-green-400"></i> | |
| Dedicated infrastructure | |
| </li> | |
| <li class="flex items-center gap-3 text-sm text-slate-300"> | |
| <i data-lucide="check" class="w-4 h-4 text-green-400"></i> | |
| SLA guarantee | |
| </li> | |
| <li class="flex items-center gap-3 text-sm text-slate-300"> | |
| <i data-lucide="check" class="w-4 h-4 text-green-400"></i> | |
| Custom integrations | |
| </li> | |
| </ul> | |
| <button class="w-full py-3 border border-slate-600 text-white rounded-lg hover:bg-slate-800 transition-all">Contact Sales</button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials Marquee --> | |
| <section class="py-20 overflow-hidden"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mb-12"> | |
| <h2 class="text-3xl sm:text-4xl font-bold text-center mb-4">Loved by <span class="text-gradient">Developers</span></h2> | |
| </div> | |
| <div class="relative"> | |
| <div class="flex gap-6 animate-marquee" id="testimonialTrack"> | |
| <!-- Testimonials injected via JS --> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CTA Section --> | |
| <section class="py-20 relative"> | |
| <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="glass rounded-3xl p-8 sm:p-12 text-center relative overflow-hidden reveal"> | |
| <div class="absolute inset-0 bg-gradient-to-r from-indigo-600/20 to-purple-600/20"></div> | |
| <div class="relative z-10"> | |
| <h2 class="text-3xl sm:text-4xl font-bold text-white mb-4">Ready to Transform Your Workflow?</h2> | |
| <p class="text-slate-300 mb-8 max-w-xl mx-auto">Join thousands of developers who are already building faster and smarter with AnyCoder.</p> | |
| <div class="flex flex-col sm:flex-row gap-4 justify-center"> | |
| <button class="px-8 py-4 bg-white text-slate-900 font-semibold rounded-xl hover:bg-slate-100 transition-all"> | |
| Get Started Free | |
| </button> | |
| <button class="px-8 py-4 border border-white/20 text-white font-semibold rounded-xl hover:bg-white/10 transition-all"> | |
| Schedule Demo | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="border-t border-slate-800/50 py-12"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="grid md:grid-cols-4 gap-8 mb-8"> | |
| <div> | |
| <div class="flex items-center gap-2 mb-4"> | |
| <div class="w-8 h-8 rounded-lg bg-gradient-to-br from-indigo-500 to-purple-600 flex items-center justify-center"> | |
| <i data-lucide="code-2" class="w-4 h-4 text-white"></i> | |
| </div> | |
| <span class="text-lg font-bold text-white">AnyCoder</span> | |
| </div> | |
| <p class="text-slate-400 text-sm">Empowering developers with AI-driven tools for the future of software development.</p> | |
| </div> | |
| <div> | |
| <h4 class="text-white font-semibold mb-4">Product</h4> | |
| <ul class="space-y-2 text-sm text-slate-400"> | |
| <li><a href="#" class="hover:text-white transition-colors">Features</a></li> | |
| <li><a href="#" class="hover:text-white transition-colors">Pricing</a></li> | |
| <li><a href="#" class="hover:text-white transition-colors">Changelog</a></li> | |
| <li><a href="#" class="hover:text-white transition-colors">Roadmap</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-white font-semibold mb-4">Resources</h4> | |
| <ul class="space-y-2 text-sm text-slate-400"> | |
| <li><a href="#" class="hover:text-white transition-colors">Documentation</a></li> | |
| <li><a href="#" class="hover:text-white transition-colors">API Reference</a></li> | |
| <li><a href="#" class="hover:text-white transition-colors">Community</a></li> | |
| <li><a href="#" class="hover:text-white transition-colors">Blog</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-white font-semibold mb-4">Connect</h4> | |
| <div class="flex gap-3"> | |
| <a href="#" class="w-10 h-10 rounded-lg bg-slate-800 flex items-center justify-center hover:bg-slate-700 transition-colors"> | |
| <i data-lucide="github" class="w-5 h-5 text-slate-400"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 rounded-lg bg-slate-800 flex items-center justify-center hover:bg-slate-700 transition-colors"> | |
| <i data-lucide="twitter" class="w-5 h-5 text-slate-400"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 rounded-lg bg-slate-800 flex items-center justify-center hover:bg-slate-700 transition-colors"> | |
| <i data-lucide="linkedin" class="w-5 h-5 text-slate-400"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 rounded-lg bg-slate-800 flex items-center justify-center hover:bg-slate-700 transition-colors"> | |
| <i data-lucide="youtube" class="w-5 h-5 text-slate-400"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border-t border-slate-800/50 pt-8 flex flex-col sm:flex-row justify-between items-center gap-4"> | |
| <p class="text-slate-500 text-sm">© 2024 AnyCoder. All rights reserved.</p> | |
| <div class="flex gap-6 text-sm text-slate-500"> | |
| <a href="#" class="hover:text-white transition-colors">Privacy Policy</a> | |
| <a href="#" class="hover:text-white transition-colors">Terms of Service</a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- Toast Notification --> | |
| <div id="toast" class="fixed bottom-4 right-4 glass px-6 py-4 rounded-xl shadow-2xl transform translate-y-20 opacity-0 transition-all duration-300 z-50 flex items-center gap-3"> | |
| <i data-lucide="check-circle" class="w-5 h-5 text-green-400"></i> | |
| <span id="toastMessage" class="text-white text-sm">Action completed successfully!</span> | |
| </div> | |
| <script> | |
| // Initialize Lucide Icons | |
| lucide.createIcons(); | |
| // Typewriter Effect | |
| const codeSnippets = [ | |
| `import { useState } from 'react'; | |
| export default function App() { | |
| const [count, setCount] = useState(0); | |
| return ( | |
| <button onClick={() => setCount(c => c + 1)}> | |
| Count: {count} | |
| </button> | |
| ); | |
| }`, | |
| `async function fetchData() { | |
| const response = await fetch('/api/data'); | |
| const data = await response.json(); | |
| return data.map(item => ({ | |
| ...item, | |
| processed: true | |
| })); | |
| }`, | |
| `const fibonacci = (n) => { | |
| if (n <= 1) return n; | |
| return fibonacci(n - 1) + | |
| fibonacci(n - 2); | |
| }; | |
| console.log(fibonacci(10));` | |
| ]; | |
| let currentSnippet = 0; | |
| let charIndex = 0; | |
| let isDeleting = false; | |
| const typewriterElement = document.getElementById('typewriter'); | |
| function typeWriter() { | |
| const current = codeSnippets[currentSnippet]; | |
| if (isDeleting) { | |
| typewriterElement.textContent = current.substring(0, charIndex - 1); | |
| charIndex--; | |
| } else { | |
| typewriterElement.textContent = current.substring(0, charIndex + 1); | |
| charIndex++; | |
| } | |
| let typeSpeed = isDeleting ? 30 : 50; | |
| if (!isDeleting && charIndex === current.length) { | |
| typeSpeed = 2000; | |
| isDeleting = true; | |
| } else if (isDeleting && charIndex === 0) { | |
| isDeleting = false; | |
| currentSnippet = (currentSnippet + 1) % codeSnippets.length; | |
| typeSpeed = 500; | |
| } | |
| setTimeout(typeWriter, typeSpeed); | |
| } | |
| typeWriter(); | |
| // Scroll Reveal Animation | |
| const observerOptions = { | |
| threshold: 0.1, | |
| rootMargin: '0px 0px -50px 0px' | |
| }; | |
| const observer = new IntersectionObserver((entries) => { | |
| entries.forEach(entry => { | |
| if (entry.isIntersecting) { | |
| entry.target.classList.add('active'); | |
| } | |
| }); | |
| }, observerOptions); | |
| document.querySelectorAll('.reveal').forEach(el => observer.observe(el)); | |
| // Mobile Menu Toggle | |
| function toggleMobileMenu() { | |
| const menu = document.getElementById('mobileMenu'); | |
| menu.classList.toggle('hidden'); | |
| } | |
| // Smooth Scroll | |
| function scrollToSection(id) { | |
| document.getElementById(id).scrollIntoView({ behavior: 'smooth' }); | |
| } | |
| // Copy Code | |
| function copyCode() { | |
| const code = codeSnippets[0]; | |
| navigator.clipboard.writeText(code); | |
| showToast('Code copied to clipboard!'); | |
| } | |
| // Toast Notification | |
| function showToast(message) { | |
| const toast = document.getElementById('toast'); | |
| document.getElementById('toastMessage').textContent = message; | |
| toast.classList.remove('translate-y-20', 'opacity-0'); | |
| setTimeout(() => { | |
| toast.classList.add('translate-y-20', 'opacity-0'); | |
| }, 3000); | |
| } | |
| // Playground Functions | |
| const codeTemplates = { | |
| javascript: `// Write your code here | |
| function fibonacci(n) { | |
| if (n <= 1) return n; | |
| return fibonacci(n - 1) + fibonacci(n - 2); | |
| } | |
| console.log("Fibonacci sequence:"); | |
| for (let i = 0; i < 10; i++) { | |
| console.log(\`F(\${i}) = \${fibonacci(i)}\`); | |
| }`, | |
| python: `# Write your code here | |
| def fibonacci(n): | |
| if n <= 1: | |
| return n | |
| return fibonacci(n - 1) + fibonacci(n - 2) | |
| print("Fibonacci sequence:") | |
| for i in range(10): | |
| print(f"F({i}) = {fibonacci(i)}")`, | |
| typescript: `// Write your code here | |
| function fibonacci(n: number): number { | |
| if (n <= 1) return n; | |
| return fibonacci(n - 1) + fibonacci(n - 2); | |
| } | |
| console.log("Fibonacci sequence:"); | |
| for (let i: number = 0; i < 10; i++) { | |
| console.log(\`F(\${i}) = \${fibonacci(i)}\`); | |
| }`, | |
| rust: `// Write your code here | |
| fn fibonacci(n: u32) -> u32 { | |
| match n { | |
| 0 | 1 => n, | |
| _ => fibonacci(n - 1) + fibonacci(n - 2), | |
| } | |
| } | |
| fn main() { | |
| println!("Fibonacci sequence:"); | |
| for i in 0..10 { | |
| println!("F({}) = {}", i, fibonacci(i)); | |
| } | |
| }` | |
| }; | |
| function updatePlayground() { | |
| const lang = document.getElementById('languageSelect').value; | |
| document.getElementById('codeEditor').value = codeTemplates[lang]; | |
| } | |
| function updateTheme() { | |
| const theme = document.getElementById('editorTheme').value; | |
| const editor = document.getElementById('codeEditor'); | |
| const output = document.getElementById('outputArea'); | |
| if (theme === 'light') { | |
| editor.classList.remove('text-slate-300'); | |
| editor.classList.add('text-slate-800'); |