Spaces:
Running
Running
| <html lang="en" class="scroll-smooth"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>VortexCode - Build Faster, Scale Better</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| indigo: { | |
| 400: '#818cf8', | |
| 500: '#6366f1', | |
| 600: '#4f46e5', | |
| 900: '#312e81', | |
| }, | |
| purple: { | |
| 500: '#a855f7', | |
| 600: '#9333ea', | |
| }, | |
| dark: { | |
| 900: '#0f172a', | |
| 800: '#1e293b', | |
| 700: '#334155', | |
| } | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| </head> | |
| <body class="bg-dark-900 text-gray-100 font-sans antialiased overflow-x-hidden"> | |
| <!-- Navbar Component --> | |
| <custom-navbar></custom-navbar> | |
| <!-- Hero Section --> | |
| <section class="relative pt-32 pb-20 lg:pt-48 lg:pb-32 overflow-hidden"> | |
| <div class="absolute inset-0 z-0"> | |
| <div class="absolute inset-0 bg-gradient-to-br from-indigo-900/40 via-dark-900 to-purple-900/20"></div> | |
| <div class="absolute top-0 left-1/4 w-96 h-96 bg-indigo-500/10 rounded-full blur-3xl"></div> | |
| <div class="absolute bottom-0 right-1/4 w-96 h-96 bg-purple-500/10 rounded-full blur-3xl"></div> | |
| </div> | |
| <div class="container mx-auto px-6 relative z-10 text-center"> | |
| <div class="inline-block px-4 py-1.5 mb-6 border border-indigo-500/30 rounded-full bg-indigo-500/10 backdrop-blur-sm"> | |
| <span class="text-indigo-300 text-sm font-medium tracking-wide">🚀 VortexCode 2.0 is now live</span> | |
| </div> | |
| <h1 class="text-5xl md:text-7xl font-bold mb-6 leading-tight"> | |
| Build the Future of <br> | |
| <span class="text-transparent bg-clip-text bg-gradient-to-r from-indigo-400 to-purple-500">Software Development</span> | |
| </h1> | |
| <p class="text-lg md:text-xl text-gray-400 mb-10 max-w-2xl mx-auto"> | |
| Accelerate your workflow with our all-in-one platform. Integrate seamlessly, scale effortlessly, and deploy with confidence. | |
| </p> | |
| <div class="flex flex-col sm:flex-row justify-center gap-4"> | |
| <a href="#signup" class="px-8 py-4 bg-gradient-to-r from-indigo-600 to-purple-600 rounded-lg font-semibold text-white shadow-lg shadow-indigo-500/25 hover:shadow-indigo-500/40 transition-all transform hover:-translate-y-1"> | |
| Start Free Trial | |
| </a> | |
| <a href="#api-docs" class="px-8 py-4 bg-dark-800 border border-dark-700 rounded-lg font-semibold text-gray-300 hover:bg-dark-700 transition-colors flex items-center justify-center gap-2 group"> | |
| <i data-feather="book-open" class="w-4 h-4 text-indigo-400 group-hover:text-white transition-colors"></i> | |
| Read the Docs | |
| </a> | |
| </div> | |
| <!-- Demo Video Placeholder --> | |
| <div class="mt-16 mx-auto max-w-4xl rounded-2xl border border-dark-700 bg-dark-800 shadow-2xl overflow-hidden relative group"> | |
| <div class="absolute inset-0 bg-indigo-900/10 group-hover:bg-transparent transition-colors pointer-events-none"></div> | |
| <img src="http://static.photos/technology/1024x576/42" alt="Dashboard Preview" class="w-full h-auto opacity-90"> | |
| <div class="absolute inset-0 flex items-center justify-center"> | |
| <button class="w-20 h-20 bg-white/10 backdrop-blur-md rounded-full flex items-center justify-center border border-white/20 hover:bg-indigo-500/80 hover:scale-110 transition-all duration-300"> | |
| <i data-feather="play" class="w-8 h-8 text-white fill-current ml-1"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Trusted By / Integrations Logos --> | |
| <section class="py-10 border-y border-dark-800 bg-dark-900/50"> | |
| <div class="container mx-auto px-6 text-center"> | |
| <p class="text-sm font-semibold text-gray-500 uppercase tracking-widest mb-8">Trusted by innovative teams at</p> | |
| <div class="flex flex-wrap justify-center gap-12 opacity-60 grayscale hover:grayscale-0 transition-all duration-500"> | |
| <!-- Using feather icons as logo placeholders for simplicity and visual consistency --> | |
| <div class="flex items-center gap-2 text-2xl font-bold text-white"><i data-feather="box"></i> AcmeCorp</div> | |
| <div class="flex items-center gap-2 text-2xl font-bold text-white"><i data-feather="hexagon"></i> Polygon</div> | |
| <div class="flex items-center gap-2 text-2xl font-bold text-white"><i data-feather="layers"></i> Stack</div> | |
| <div class="flex items-center gap-2 text-2xl font-bold text-white"><i data-feather="triangle"></i> Delta</div> | |
| <div class="flex items-center gap-2 text-2xl font-bold text-white"><i data-feather="circle"></i> Orbit</div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Features Comparison Table --> | |
| <section id="features" class="py-24 relative"> | |
| <div class="container mx-auto px-6"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-5xl font-bold mb-4">Choose Your Power</h2> | |
| <p class="text-gray-400">Compare plans and find the perfect fit for your team.</p> | |
| <a href="pricing.html" class="inline-flex items-center text-indigo-400 font-medium hover:text-indigo-300 transition-colors mt-4"> | |
| View detailed pricing <i data-feather="arrow-right" class="w-4 h-4 ml-2"></i> | |
| </a> | |
| </div> | |
| <div class="overflow-x-auto rounded-xl border border-dark-700 bg-dark-800/50 backdrop-blur-sm"> | |
| <table class="w-full text-left border-collapse"> | |
| <thead> | |
| <tr class="border-b border-dark-700 bg-dark-800"> | |
| <th class="p-6 text-lg font-semibold">Features</th> | |
| <th class="p-6 text-lg font-semibold text-indigo-400">Starter</th> | |
| <th class="p-6 text-lg font-semibold text-purple-400 relative"> | |
| Pro | |
| <span class="absolute top-2 right-2 text-xs bg-purple-600 text-white px-2 py-0.5 rounded-full">Popular</span> | |
| </th> | |
| <th class="p-6 text-lg font-semibold">Enterprise</th> | |
| </tr> | |
| </thead> | |
| <tbody class="divide-y divide-dark-700"> | |
| <tr class="hover:bg-dark-700/30 transition-colors"> | |
| <td class="p-6 text-gray-300">Projects</td> | |
| <td class="p-6 text-gray-400">Up to 3</td> | |
| <td class="p-6 text-white">Unlimited</td> | |
| <td class="p-6 text-white">Unlimited</td> | |
| </tr> | |
| <tr class="hover:bg-dark-700/30 transition-colors"> | |
| <td class="p-6 text-gray-300">Team Members</td> | |
| <td class="p-6 text-gray-400">1</td> | |
| <td class="p-6 text-white">Up to 10</td> | |
| <td class="p-6 text-white">Unlimited</td> | |
| </tr> | |
| <tr class="hover:bg-dark-700/30 transition-colors"> | |
| <td class="p-6 text-gray-300">API Access</td> | |
| <td class="p-6 text-center"><i data-feather="x" class="w-5 h-5 text-red-400 mx-auto"></i></td> | |
| <td class="p-6 text-center"><i data-feather="check" class="w-5 h-5 text-green-400 mx-auto"></i></td> | |
| <td class="p-6 text-center"><i data-feather="check" class="w-5 h-5 text-green-400 mx-auto"></i></td> | |
| </tr> | |
| <tr class="hover:bg-dark-700/30 transition-colors"> | |
| <td class="p-6 text-gray-300">Advanced Analytics</td> | |
| <td class="p-6 text-center"><i data-feather="x" class="w-5 h-5 text-red-400 mx-auto"></i></td> | |
| <td class="p-6 text-center"><i data-feather="check" class="w-5 h-5 text-green-400 mx-auto"></i></td> | |
| <td class="p-6 text-center"><i data-feather="check" class="w-5 h-5 text-green-400 mx-auto"></i></td> | |
| </tr> | |
| <tr class="hover:bg-dark-700/30 transition-colors"> | |
| <td class="p-6 text-gray-300">24/7 Priority Support</td> | |
| <td class="p-6 text-center"><i data-feather="x" class="w-5 h-5 text-red-400 mx-auto"></i></td> | |
| <td class="p-6 text-center"><i data-feather="x" class="w-5 h-5 text-red-400 mx-auto"></i></td> | |
| <td class="p-6 text-center"><i data-feather="check" class="w-5 h-5 text-green-400 mx-auto"></i></td> | |
| </tr> | |
| <tr class="bg-dark-800/80"> | |
| <td class="p-6"></td> | |
| <td class="p-6"> | |
| <a href="pricing.html" class="block w-full py-2 px-4 rounded border border-dark-600 text-white hover:border-indigo-500 transition-colors text-center">Get Started</a> | |
| </td> | |
| <td class="p-6"> | |
| <a href="pricing.html" class="block w-full py-2 px-4 rounded bg-purple-600 text-white font-medium hover:bg-purple-700 transition-colors shadow-lg shadow-purple-500/20 text-center">Get Pro</a> | |
| </td> | |
| <td class="p-6"> | |
| <a href="pricing.html" class="block w-full py-2 px-4 rounded border border-dark-600 text-white hover:border-purple-500 transition-colors text-center">Contact Sales</a> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Integrations --> | |
| <section class="py-24 bg-dark-800/30"> | |
| <div class="container mx-auto px-6"> | |
| <div class="flex flex-col md:flex-row items-center gap-12"> | |
| <div class="md:w-1/2"> | |
| <h2 class="text-3xl md:text-5xl font-bold mb-6">Seamless <br><span class="text-indigo-400">Integrations</span></h2> | |
| <p class="text-gray-400 text-lg mb-8">Connect VortexCode with the tools you already use. From Slack to GitHub, we fit right into your existing ecosystem.</p> | |
| <a href="#" class="inline-flex items-center text-indigo-400 font-medium hover:text-indigo-300 transition-colors"> | |
| View all 100+ integrations <i data-feather="arrow-right" class="w-4 h-4 ml-2"></i> | |
| </a> | |
| </div> | |
| <div class="md:w-1/2 grid grid-cols-3 gap-4"> | |
| <!-- Integration Cards --> | |
| <div class="col-span-2 bg-dark-800 p-6 rounded-xl border border-dark-700 flex items-center justify-between hover:border-indigo-500/50 transition-colors"> | |
| <div class="flex items-center gap-4"> | |
| <div class="bg-white p-2 rounded"><i data-feather="git-branch" class="text-black"></i></div> | |
| <span class="font-bold">GitHub</span> | |
| </div> | |
| <i data-feather="check-circle" class="text-green-500"></i> | |
| </div> | |
| <div class="bg-dark-800 p-6 rounded-xl border border-dark-700 flex items-center justify-between hover:border-purple-500/50 transition-colors"> | |
| <div class="flex items-center gap-2"> | |
| <div class="bg-[#4A154B] p-2 rounded"><i data-feather="hash" class="text-white"></i></div> | |
| <span class="font-bold text-sm">Slack</span> | |
| </div> | |
| </div> | |
| <div class="bg-dark-800 p-6 rounded-xl border border-dark-700 flex items-center justify-between hover:border-blue-500/50 transition-colors"> | |
| <div class="flex items-center gap-2"> | |
| <div class="bg-blue-500 p-2 rounded"><i data-feather="trello" class="text-white"></i></div> | |
| <span class="font-bold text-sm">Trello</span> | |
| </div> | |
| </div> | |
| <div class="col-span-2 bg-dark-800 p-6 rounded-xl border border-dark-700 flex items-center justify-between hover:border-yellow-500/50 transition-colors"> | |
| <div class="flex items-center gap-4"> | |
| <div class="bg-[#430098] p-2 rounded"><i data-feather="alert-circle" class="text-white"></i></div> | |
| <span class="font-bold">Jira</span> | |
| </div> | |
| <i data-feather="check-circle" class="text-green-500"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- API Documentation Link --> | |
| <section id="api-docs" class="py-24 relative overflow-hidden"> | |
| <!-- Decorative Background --> | |
| <div class="absolute top-0 right-0 w-1/2 h-full bg-gradient-to-l from-indigo-900/10 to-transparent pointer-events-none"></div> | |
| <div class="container mx-auto px-6"> | |
| <div class="flex flex-col lg:flex-row gap-16 items-center"> | |
| <div class="lg:w-1/2"> | |
| <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-indigo-500/10 text-indigo-400 text-sm font-medium mb-4 border border-indigo-500/20"> | |
| <i data-feather="code" class="w-4 h-4"></i> Developer First | |
| </div> | |
| <h2 class="text-3xl md:text-5xl font-bold mb-6">Powerful API, <br>Simple to use</h2> | |
| <p class="text-gray-400 text-lg mb-8">Build custom workflows on top of VortexCode. Our RESTful API is robust, well-documented, and ready to scale with your application.</p> | |
| <div class="flex flex-col sm:flex-row gap-4"> | |
| <a href="#" class="px-6 py-3 bg-white text-dark-900 font-bold rounded-lg hover:bg-gray-100 transition-colors"> | |
| Read Documentation | |
| </a> | |
| <a href="#" class="px-6 py-3 border border-dark-700 text-white font-medium rounded-lg hover:bg-dark-800 transition-colors flex items-center justify-center gap-2"> | |
| API Reference <i data-feather="external-link" class="w-4 h-4"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Code Snippet Mockup --> | |
| <div class="lg:w-1/2 w-full"> | |
| <div class="bg-[#1e1e1e] rounded-xl shadow-2xl border border-dark-700 overflow-hidden font-mono text-sm"> | |
| <div class="flex items-center px-4 py-3 bg-[#252526] border-b border-dark-700"> | |
| <div class="flex gap-2"> | |
| <div class="w-3 h-3 rounded-full bg-red-500"></div> | |
| <div class="w-3 h-3 rounded-full bg-yellow-500"></div> | |
| <div class="w-3 h-3 rounded-full bg-green-500"></div> | |
| </div> | |
| <div class="ml-4 text-gray-400 text-xs">fetch_example.js</div> | |
| </div> | |
| <div class="p-6 overflow-x-auto"> | |
| <pre><code class="language-javascript"><span class="text-purple-400">const</span> response = <span class="text-purple-400">await</span> <span class="text-yellow-300">fetch</span>(<span class="text-green-400">'https://api.vortexcode.com/v1/projects'</span>, { | |
| <span class="text-blue-300">method</span>: <span class="text-green-400">'POST'</span>, | |
| <span class="text-blue-300">headers</span>: { | |
| <span class="text-green-400">'Authorization'</span>: <span class="text-green-400">`Bearer ${API_KEY}`</span>, | |
| <span class="text-green-400">'Content-Type'</span>: <span class="text-green-400">'application/json'</span> | |
| }, | |
| <span class="text-blue-300">body</span>: JSON.<span class="text-yellow-300">stringify</span>({ | |
| <span class="text-blue-300">name</span>: <span class="text-green-400">'My Awesome Project'</span>, | |
| <span class="text-blue-300">framework</span>: <span class="text-green-400">'react'</span> | |
| }) | |
| }); | |
| <span class="text-blue-300">const</span> project = <span class="text-purple-400">await</span> response.<span class="text-yellow-300">json</span>(); | |
| console.<span class="text-yellow-300">log</span>(project.id);</code></pre> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Use Cases --> | |
| <section class="py-24 bg-dark-800/30"> | |
| <div class="container mx-auto px-6"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-5xl font-bold mb-4">Built for every use case</h2> | |
| <p class="text-gray-400">Discover how teams leverage VortexCode to ship faster.</p> | |
| </div> | |
| <div class="grid md:grid-cols-3 gap-8"> | |
| <!-- Use Case 1 --> | |
| <div class="group bg-dark-900 border border-dark-700 rounded-2xl p-8 hover:border-indigo-500/50 transition-all duration-300 hover:-translate-y-2"> | |
| <div class="w-12 h-12 bg-indigo-500/10 rounded-lg flex items-center justify-center mb-6 group-hover:bg-indigo-500/20 transition-colors"> | |
| <i data-feather="zap" class="w-6 h-6 text-indigo-400"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3 text-white">Rapid Prototyping</h3> | |
| <p class="text-gray-400 leading-relaxed">Turn ideas into functional prototypes in minutes using our pre-built component library and boilerplates.</p> | |
| </div> | |
| <!-- Use Case 2 --> | |
| <div class="group bg-dark-900 border border-dark-700 rounded-2xl p-8 hover:border-purple-500/50 transition-all duration-300 hover:-translate-y-2"> | |
| <div class="w-12 h-12 bg-purple-500/10 rounded-lg flex items-center justify-center mb-6 group-hover:bg-purple-500/20 transition-colors"> | |
| <i data-feather="users" class="w-6 h-6 text-purple-400"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3 text-white">Team Collaboration</h3> | |
| <p class="text-gray-400 leading-relaxed">Real-time editing, commenting, and version control ensure your entire team stays on the same page.</p> | |
| </div> | |
| <!-- Use Case 3 --> | |
| <div class="group bg-dark-900 border border-dark-700 rounded-2xl p-8 hover:border-pink-500/50 transition-all duration-300 hover:-translate-y-2"> | |
| <div class="w-12 h-12 bg-pink-500/10 rounded-lg flex items-center justify-center mb-6 group-hover:bg-pink-500/20 transition-colors"> | |
| <i data-feather="bar-chart-2" class="w-6 h-6 text-pink-400"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3 text-white">Performance Monitoring</h3> | |
| <p class="text-gray-400 leading-relaxed">Get deep insights into your application's performance with built-in analytics and error tracking.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Security Certifications --> | |
| <section class="py-24"> | |
| <div class="container mx-auto px-6"> | |
| <div class="bg-gradient-to-r from-indigo-900/40 to-purple-900/40 rounded-3xl border border-indigo-500/20 p-8 md:p-16 flex flex-col md:flex-row items-center gap-12"> | |
| <div class="md:w-1/2 text-center md:text-left"> | |
| <div class="inline-flex items-center justify-center w-16 h-16 bg-green-500/20 rounded-full mb-6"> | |
| <i data-feather="shield" class="w-8 h-8 text-green-400"></i> | |
| </div> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4">Enterprise-Grade Security</h2> | |
| <p class="text-gray-300 text-lg">Your data security is our top priority. We comply with the strictest international standards to ensure your code remains safe.</p> | |
| </div> | |
| <div class="md:w-1/2 grid grid-cols-2 gap-6"> | |
| <div class="bg-dark-900/60 p-6 rounded-xl border border-white/10 text-center"> | |
| <div class="text-3xl mb-2">🔒</div> | |
| <h4 class="font-bold text-white">SOC 2 Type II</h4> | |
| <p class="text-sm text-gray-400 mt-2">Certified Compliant</p> | |
| </div> | |
| <div class="bg-dark-900/60 p-6 rounded-xl border border-white/10 text-center"> | |
| <div class="text-3xl mb-2">🌍</div> | |
| <h4 class="font-bold text-white">GDPR Ready</h4> | |
| <p class="text-sm text-gray-400 mt-2">Data Protection</p> | |
| </div> | |
| <div class="bg-dark-900/60 p-6 rounded-xl border border-white/10 text-center"> | |
| <div class="text-3xl mb-2">🔑</div> | |
| <h4 class="font-bold text-white">ISO 27001</h4> | |
| <p class="text-sm text-gray-400 mt-2">Information Security</p> | |
| </div> | |
| <div class="bg-dark-900/60 p-6 rounded-xl border border-white/10 text-center"> | |
| <div class="text-3xl mb-2">🛡️</div> | |
| <h4 class="font-bold text-white">SSO / SAML</h4> | |
| <p class="text-sm text-gray-400 mt-2">Advanced Access</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Customer Stories --> | |
| <section class="py-24 bg-dark-800/30"> | |
| <div class="container mx-auto px-6"> | |
| <h2 class="text-3xl md:text-5xl font-bold mb-16 text-center">Loved by Developers</h2> | |
| <div class="grid md:grid-cols-2 gap-8 max-w-5xl mx-auto"> | |
| <!-- Testimonial 1 --> | |
| <div class="bg-dark-900 p-8 rounded-2xl border border-dark-700 relative"> | |
| <i data-feather="quote" class="absolute top-6 right-6 text-dark-700 w-8 h-8"></i> | |
| <div class="flex items-center gap-4 mb-6"> | |
| <img src="http://static.photos/people/200x200/12" alt="Sarah J" class="w-12 h-12 rounded-full border-2 border-indigo-500"> | |
| <div> | |
| <h4 class="font-bold text-white">Sarah Jenkins</h4> | |
| <p class="text-xs text-indigo-400">CTO at TechFlow</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-300 italic">"VortexCode completely transformed our development pipeline. We've cut our deployment time by 50%. The API is a dream to work with."</p> | |
| <div class="flex gap-1 mt-4 text-yellow-400"> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| </div> | |
| </div> | |
| <!-- Testimonial 2 --> | |
| <div class="bg-dark-900 p-8 rounded-2xl border border-dark-700 relative"> | |
| <i data-feather="quote" class="absolute top-6 right-6 text-dark-700 w-8 h-8"></i> | |
| <div class="flex items-center gap-4 mb-6"> | |
| <img src="http://static.photos/people/200x200/35" alt="David R" class="w-12 h-12 rounded-full border-2 border-purple-500"> | |
| <div> | |
| <h4 class="font-bold text-white">David Ross</h4> | |
| <p class="text-xs text-purple-400">Lead Engineer at StartUp</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-300 italic">"The dark mode UI is gorgeous, and the performance is unmatched. It's exactly the tool I wished existed during my late-night coding sessions."</p> | |
| <div class="flex gap-1 mt-4 text-yellow-400"> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Free Trial Signup --> | |
| <section id="signup" class="py-24 relative overflow-hidden"> | |
| <div class="absolute inset-0 z-0"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-indigo-900/20 to-transparent pointer-events-none"></div> | |
| </div> | |
| <div class="container mx-auto px-6 relative z-10"> | |
| <div class="bg-dark-800 border border-indigo-500/30 rounded-3xl p-8 md:p-16 text-center max-w-4xl mx-auto shadow-2xl shadow-indigo-500/10"> | |
| <h2 class="text-3xl md:text-5xl font-bold mb-6">Ready to accelerate?</h2> | |
| <p class="text-gray-400 text-lg mb-10 max-w-2xl mx-auto">Join thousands of developers building the future. Start your 14-day free trial today. No credit card required.</p> | |
| <form class="max-w-md mx-auto flex flex-col sm:flex-row gap-4"> | |
| <input type="email" placeholder="Enter your work email" class="flex-1 bg-dark-900 border border-dark-700 text-white px-6 py-4 rounded-lg focus:outline-none focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 transition-all"> | |
| <button type="button" class="px-8 py-4 bg-gradient-to-r from-indigo-600 to-purple-600 text-white font-bold rounded-lg hover:shadow-lg hover:shadow-indigo-500/30 transition-all transform hover:-translate-y-0.5"> | |
| Get Started | |
| </button> | |
| </form> | |
| <p class="text-xs text-gray-500 mt-4">By signing up, you agree to our Terms of Service and Privacy Policy.</p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer Component --> | |
| <custom-footer></custom-footer> | |
| <!-- Component Scripts --> | |
| <script src="components/navbar.js"></script> | |
| <script src="components/footer.js"></script> | |
| <!-- Global Script --> | |
| <script src="script.js"></script> | |
| <script>feather.replace();</script> | |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> | |
| </body> | |
| </html> |