| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>DeepSite | AI Solutions</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| <style> |
| .gradient-bg { |
| background: linear-gradient(135deg, #6e8efb 0%, #a777e3 100%); |
| } |
| .card-hover:hover { |
| transform: translateY(-5px); |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); |
| } |
| .wave-shape { |
| position: absolute; |
| bottom: 0; |
| left: 0; |
| width: 100%; |
| overflow: hidden; |
| line-height: 0; |
| } |
| .wave-shape svg { |
| position: relative; |
| display: block; |
| width: calc(100% + 1.3px); |
| height: 150px; |
| } |
| .wave-shape .shape-fill { |
| fill: #FFFFFF; |
| } |
| @keyframes float { |
| 0% { transform: translateY(0px); } |
| 50% { transform: translateY(-10px); } |
| 100% { transform: translateY(0px); } |
| } |
| .floating { |
| animation: float 6s ease-in-out infinite; |
| } |
| </style> |
| </head> |
| <body class="font-sans antialiased text-gray-800"> |
| |
| <nav class="bg-white shadow-sm fixed w-full z-10"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="flex justify-between h-16"> |
| <div class="flex items-center"> |
| <div class="flex-shrink-0 flex items-center"> |
| <i class="fas fa-brain text-purple-600 text-2xl mr-2"></i> |
| <span class="text-xl font-bold text-gray-900">DeepSite</span> |
| </div> |
| </div> |
| <div class="hidden md:ml-6 md:flex md:items-center md:space-x-8"> |
| <a href="#" class="text-gray-900 hover:text-purple-600 px-3 py-2 text-sm font-medium">Home</a> |
| <a href="#" class="text-gray-500 hover:text-purple-600 px-3 py-2 text-sm font-medium">Solutions</a> |
| <a href="#" class="text-gray-500 hover:text-purple-600 px-3 py-2 text-sm font-medium">API</a> |
| <a href="#" class="text-gray-500 hover:text-purple-600 px-3 py-2 text-sm font-medium">Docs</a> |
| <a href="#" class="text-gray-500 hover:text-purple-600 px-3 py-2 text-sm font-medium">Contact</a> |
| <button class="ml-8 inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white gradient-bg hover:opacity-90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500"> |
| Get Started |
| </button> |
| </div> |
| <div class="-mr-2 flex items-center md:hidden"> |
| <button type="button" class="bg-white inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-purple-500" aria-expanded="false"> |
| <span class="sr-only">Open main menu</span> |
| <i class="fas fa-bars"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
| </nav> |
|
|
| |
| <div class="gradient-bg pt-32 pb-20 relative overflow-hidden"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="lg:grid lg:grid-cols-2 lg:gap-8 items-center"> |
| <div class="mt-10 mx-auto max-w-md sm:max-w-lg lg:mt-0 lg:mx-0"> |
| <h1 class="text-4xl tracking-tight font-extrabold text-white sm:text-5xl sm:leading-tight lg:text-6xl"> |
| Advanced AI <br> |
| <span class="text-purple-200">Solutions</span> for Everyone |
| </h1> |
| <p class="mt-3 text-base text-purple-100 sm:mt-5 sm:text-lg sm:max-w-xl"> |
| Harness the power of deep learning with our cutting-edge models and APIs. Simple integration, powerful results. |
| </p> |
| <div class="mt-10 sm:flex sm:justify-start"> |
| <div class="rounded-md shadow"> |
| <a href="#" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-purple-600 bg-white hover:bg-gray-50 md:py-4 md:text-lg md:px-10"> |
| Explore API |
| </a> |
| </div> |
| <div class="mt-3 rounded-md shadow sm:mt-0 sm:ml-3"> |
| <a href="#" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-purple-500 bg-opacity-60 hover:bg-opacity-70 md:py-4 md:text-lg md:px-10"> |
| Live Demo |
| </a> |
| </div> |
| </div> |
| </div> |
| <div class="hidden lg:block relative floating"> |
| <img class="w-full max-w-lg mx-auto" src="https://images.unsplash.com/photo-1620712943543-bcc4688e7485?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" alt="AI illustration"> |
| </div> |
| </div> |
| </div> |
| <div class="wave-shape"> |
| <svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none"> |
| <path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z" class="shape-fill"></path> |
| </svg> |
| </div> |
| </div> |
|
|
| |
| <div class="py-12 bg-white"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="lg:text-center"> |
| <h2 class="text-base text-purple-600 font-semibold tracking-wide uppercase">Features</h2> |
| <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl"> |
| Powerful AI Capabilities |
| </p> |
| <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto"> |
| Our platform offers state-of-the-art deep learning models ready for integration. |
| </p> |
| </div> |
|
|
| <div class="mt-10"> |
| <div class="grid grid-cols-1 gap-10 sm:grid-cols-2 lg:grid-cols-3"> |
| |
| <div class="card-hover transition-all duration-300 ease-in-out bg-gray-50 rounded-lg p-6"> |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-purple-500 text-white"> |
| <i class="fas fa-bolt text-xl"></i> |
| </div> |
| <div class="mt-5"> |
| <h3 class="text-lg leading-6 font-medium text-gray-900">Fast Processing</h3> |
| <p class="mt-2 text-base text-gray-500"> |
| Optimized models deliver results in milliseconds, perfect for real-time applications. |
| </p> |
| </div> |
| </div> |
| |
| |
| <div class="card-hover transition-all duration-300 ease-in-out bg-gray-50 rounded-lg p-6"> |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-purple-500 text-white"> |
| <i class="fas fa-shield-alt text-xl"></i> |
| </div> |
| <div class="mt-5"> |
| <h3 class="text-lg leading-6 font-medium text-gray-900">Secure API</h3> |
| <p class="mt-2 text-base text-gray-500"> |
| Enterprise-grade security with OAuth 2.0 and encrypted data transmission. |
| </p> |
| </div> |
| </div> |
| |
| |
| <div class="card-hover transition-all duration-300 ease-in-out bg-gray-50 rounded-lg p-6"> |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-purple-500 text-white"> |
| <i class="fas fa-chart-line text-xl"></i> |
| </div> |
| <div class="mt-5"> |
| <h3 class="text-lg leading-6 font-medium text-gray-900">Scalable</h3> |
| <p class="mt-2 text-base text-gray-500"> |
| Automatically scales to handle millions of requests without performance degradation. |
| </p> |
| </div> |
| </div> |
| |
| |
| <div class="card-hover transition-all duration-300 ease-in-out bg-gray-50 rounded-lg p-6"> |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-purple-500 text-white"> |
| <i class="fas fa-code text-xl"></i> |
| </div> |
| <div class="mt-5"> |
| <h3 class="text-lg leading-6 font-medium text-gray-900">Multiple SDKs</h3> |
| <p class="mt-2 text-base text-gray-500"> |
| Client libraries available for Python, JavaScript, Java, and more. |
| </p> |
| </div> |
| </div> |
| |
| |
| <div class="card-hover transition-all duration-300 ease-in-out bg-gray-50 rounded-lg p-6"> |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-purple-500 text-white"> |
| <i class="fas fa-cogs text-xl"></i> |
| </div> |
| <div class="mt-5"> |
| <h3 class="text-lg leading-6 font-medium text-gray-900">Custom Models</h3> |
| <p class="mt-2 text-base text-gray-500"> |
| Need something specific? We can train custom models for your unique requirements. |
| </p> |
| </div> |
| </div> |
| |
| |
| <div class="card-hover transition-all duration-300 ease-in-out bg-gray-50 rounded-lg p-6"> |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-purple-500 text-white"> |
| <i class="fas fa-headset text-xl"></i> |
| </div> |
| <div class="mt-5"> |
| <h3 class="text-lg leading-6 font-medium text-gray-900">24/7 Support</h3> |
| <p class="mt-2 text-base text-gray-500"> |
| Our team of AI experts is available around the clock to assist you. |
| </p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="py-16 bg-gray-50 overflow-hidden"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="lg:grid lg:grid-cols-2 lg:gap-8 lg:items-center"> |
| <div class="relative lg:row-start-1"> |
| <div class="relative text-base mx-auto max-w-prose lg:max-w-none"> |
| <figure> |
| <div class="aspect-w-12 aspect-h-7 lg:aspect-none"> |
| <img class="rounded-lg shadow-lg object-cover object-center" src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" alt="Code example" width="1184" height="1376"> |
| </div> |
| </figure> |
| </div> |
| </div> |
| <div class="mt-8 lg:mt-0"> |
| <div class="text-base max-w-prose mx-auto lg:max-w-none"> |
| <h2 class="text-base text-purple-600 font-semibold tracking-wide uppercase">Try it now</h2> |
| <h3 class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl"> |
| Simple API 9Integration |
| </h3> |
| </div> |
| <div class="mt-5 prose prose-purple text-gray-500 mx-auto lg:max-w-none lg:row-start-1 lg:col-start-1"> |
| <p> |
| Our API is designed for developers who need powerful AI capabilities without the complexity. Here's how easy it is to get started: |
| </p> |
| <div class="mt-6 bg-gray-800 rounded-lg p-4 overflow-x-auto"> |
| <pre class="text-gray-200 text-sm"><code>import requests |
|
|
| url = "https://api.deepsite.ai/v1/predict" |
| headers = { |
| "Authorization": "Bearer YOUR_API_KEY", |
| "Content-Type": "application/json" |
| } |
| data = { |
| "input": "Your input data here" |
| } |
|
|
| response = requests.post(url, headers=headers, json=data) |
| print(response.json())</code></pre> |
| </div> |
| <p class="mt-4"> |
| With just a few lines of code, you can integrate our AI models into your application. |
| </p> |
| </div> |
| <div class="mt-8 flex flex-col sm:flex-row gap-4"> |
| <a href="#" class="inline-flex items-center px-4 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white gradient-bg hover:opacity-90"> |
| Get API Key |
| <i class="fas fa-arrow-right ml-2"></i> |
| </a> |
| <a href="#" class="inline-flex items-center px-4 py-3 border border-transparent text-base font-medium rounded-md text-purple-600 bg-white hover:bg-gray-50 border-gray-300 shadow-sm"> |
| <i class="fas fa-book mr-2"></i> |
| Documentation |
| </a> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="py-16 bg-white"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="sm:flex sm:flex-col sm:align-center"> |
| <h2 class="text-3xl font-extrabold text-gray-900 text-center">Flexible Pricing Plans</h2> |
| <p class="mt-5 text-xl text-gray-500 text-center max-w-2xl mx-auto"> |
| Choose the plan that fits your needs. Scale up or down as required. |
| </p> |
| <div class="relative mt-6 bg-gray-100 rounded-lg p-0.5 flex self-center"> |
| <button type="button" class="relative bg-white border-gray-200 rounded-md shadow-sm py-2 px-6 border text-sm font-medium text-gray-900 whitespace-nowrap focus:outline-none focus:ring-2 focus:ring-purple-500 focus:z-10 sm:w-auto sm:px-8"> |
| Monthly billing |
| </button> |
| <button type="button" class="ml-0.5 relative border border-transparent rounded-md py-2 px-6 text-sm font-medium text-gray-700 whitespace-nowrap focus:outline-none focus:ring-2 focus:ring-purple-500 focus:z-10 sm:w-auto sm:px-8"> |
| Yearly billing |
| </button> |
| </div> |
| </div> |
|
|
| <div class="mt-12 space-y-4 sm:mt-16 sm:space-y-0 sm:grid sm:grid-cols-3 sm:gap-6 lg:max-w-4xl lg:mx-auto xl:max-w-none xl:mx-0"> |
| |
| <div class="card-hover border border-gray-200 rounded-lg shadow-sm divide-y divide-gray-200"> |
| <div class="p-6"> |
| <h3 class="text-lg leading-6 font-medium text-gray-900">Starter</h3> |
| <p class="mt-4 text-sm text-gray-500"> |
| Perfect for small projects and testing. |
| </p> |
| <p class="mt-8"> |
| <span class="text-4xl font-extrabold text-gray-900">$29</span> |
| <span class="text-base font-medium text-gray-500">/mo</span> |
| </p> |
| <button class="mt-8 block w-full py-3 px-6 border border-gray-300 rounded-md text-center text-sm font-medium text-gray-700 hover:bg-gray-50"> |
| Get started |
| </button> |
| </div> |
| <div class="pt-6 pb-8 px-6"> |
| <h4 class="text-xs font-medium text-gray-900 tracking-wide uppercase">What's included</h4> |
| <ul class="mt-6 space-y-4"> |
| <li class="flex items-start"> |
| <div class="flex-shrink-0"> |
| <i class="fas fa-check text-green-500"></i> |
| </div> |
| <p class="ml-3 text-sm text-gray-500">10,000 API calls/month</p> |
| </li> |
| <li class="flex items-start"> |
| <div class="flex-shrink-0"> |
| <i class="fas fa-check text-green-500"></i> |
| </div> |
| <p class="ml-3 text-sm text-gray-500">Standard models</p> |
| </li> |
| <li class="flex items-start"> |
| <div class="flex-shrink-0"> |
| <i class="fas fa-check text-green-500"></i> |
| </div> |
| <p class="ml-3 text-sm text-gray-500">Email support</p> |
| </li> |
| <li class="flex items-start"> |
| <div class="flex-shrink-0"> |
| <i class="fas fa-check text-green-500"></i> |
| </div> |
| <p class="ml-3 text-sm text-gray-500">Basic analytics</p> |
| </li> |
| </ul> |
| </div> |
| </div> |
|
|
| |
| <div class="card-hover border-2 border-purple-500 rounded-lg shadow-sm divide-y divide-gray-200 transform scale-105 z-10"> |
| <div class="p-6"> |
| <div class="absolute top-0 right-0 -mt-4 -mr-4 bg-purple-500 text-white text-xs font-semibold px-3 py-1 rounded-full"> |
| Popular |
| </div> |
| <h3 class="text-lg leading-6 font-medium text-gray-900">Pro</h3> |
| <p class="mt-4 text-sm text-gray-500"> |
| For growing businesses with higher demands. |
| </p> |
| <p class="mt-8"> |
| <span class="text-4xl font-extrabold text-gray-900">$99</span> |
| <span class="text-base font-medium text-gray-500">/mo</span> |
| </p> |
| <button class="mt-8 block w-full py-3 px-6 border border-transparent rounded-md text-center text-sm font-medium text-white gradient-bg hover:opacity-90"> |
| Get started |
| </button> |
| </div> |
| <div class="pt-6 pb-8 px-6"> |
| <h4 class="text-xs font-medium text-gray-900 tracking-wide uppercase">What's included</h4> |
| <ul class="mt-6 space-y-4"> |
| <li class="flex items-start"> |
| <div class="flex-shrink-0"> |
| <i class="fas fa-check text-green-500"></i> |
| </div> |
| <p class="ml-3 text-sm text-gray-500">100,000 API calls/month</p> |
| </li> |
| <li class="flex items-start"> |
| <div class="flex-shrink-0"> |
| <i class="fas fa-check text-green-500"></i> |
| </div> |
| <p class="ml-3 text-sm text-gray-500">Advanced models</p> |
| </li> |
| <li class="flex items-start"> |
| <div class="flex-shrink-0"> |
| <i class="fas fa-check text-green-500"></i> |
| </div> |
| <p class="ml-3 text-sm text-gray-500">Priority support</p> |
| </li> |
| <li class="flex items-start"> |
| <div class="flex-shrink-0"> |
| <i class="fas fa-check text-green-500"></i> |
| </div> |
| <p class="ml-3 text-sm text-gray-500">Detailed analytics</p> |
| </li> |
| <li class="flex items-start"> |
| <div class="flex-shrink-0"> |
| <i class="fas fa-check text-green-500"></i> |
| </div> |
| <p class="ml-3 text-sm text-gray-500">Custom SLA</p> |
| </li> |
| </ul> |
| </div> |
| </div> |
|
|
| |
| <div class="card-hover border border-gray-200 rounded-lg shadow-sm divide-y divide-gray-200"> |
| <div class="p-6"> |
| <h3 class="text-lg leading-6 font-medium text-gray-900">Enterprise</h3> |
| <p class="mt-4 text-sm text-gray-500"> |
| For organizations with mission-critical needs. |
| </p> |
| <p class="mt-8"> |
| <span class="text-4xl font-extrabold text-gray-900">Custom</span> |
| </p> |
| <button class="mt-8 block w-full py-3 px-6 border border-gray-300 rounded-md text-center text-sm font-medium text-gray-700 hover:bg-gray-50"> |
| Contact sales |
| </button> |
| </div> |
| <div class="pt-6 pb-8 px-6"> |
| <h4 class="text-xs font-medium text-gray-900 tracking-wide uppercase">What's included</h4> |
| <ul class="mt-6 space-y-4"> |
| <li class="flex items-start"> |
| <div class="flex-shrink-0"> |
| <i class="fas fa-check text-green-500"></i> |
| </div> |
| <p class="ml-3 text-sm text-gray-500">Unlimited API calls</p> |
| </li> |
| <li class="flex items-start"> |
| <div class="flex-shrink-0"> |
| <i class="fas fa-check text-green-500"></i> |
| </div> |
| <p class="ml-3 text-sm text-gray-500">Premium models</p> |
| </li> |
| <li class="flex items-start"> |
| <div class="flex-shrink-0"> |
| <i class="fas fa-check text-green-500"></i> |
| </div> |
| <p class="ml-3 text-sm text-gray-500">24/7 dedicated support</p> |
| </li> |
| <li class="flex items-start"> |
| <div class="flex-shrink-0"> |
| <i class="fas fa-check text-green-500"></i> |
| </div> |
| <p class="ml-3 text-sm text-gray-500">Custom analytics</p> |
| </li> |
| <li class="flex items-start"> |
| <div class="flex-shrink-0"> |
| <i class="fas fa-check text-green-500"></i> |
| </div> |
| <p class="ml-3 text-sm text-gray-500">On-premise options</p> |
| </li> |
| <li class="flex items-start"> |
| <div class="flex-shrink-0"> |
| <i class="fas fa-check text-green-500"></i> |
| </div> |
| <p class="ml-3 text-sm text-gray-500">Custom model training</p> |
| </li> |
| </ul> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="gradient-bg"> |
| <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8 lg:flex lg:items-center lg:justify-between"> |
| <h2 class="text-3xl font-extrabold tracking-tight text-white sm:text-4xl"> |
| <span class="block">Ready to dive in?</span> |
| <span class="block text-purple-200">Start your free trial today.</span> |
| </h2> |
| <div class="mt-8 flex lg:mt-0 lg:flex-shrink-0"> |
| <div class="inline-flex rounded-md shadow"> |
| <a href="#" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-purple-600 bg-white hover:bg-gray-50"> |
| Get started |
| </a> |
| </div> |
| <div class="ml-3 inline-flex rounded-md shadow"> |
| <a href="#" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-purple-500 bg-opacity-60 hover:bg-opacity-70"> |
| Live demo |
| </a> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <footer class="bg-white"> |
| <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8"> |
| <div class="xl:grid xl:grid-cols-3 xl:gap-8"> |
| <div class="space-y-8 xl:col-span-1"> |
| <div class="flex items-center"> |
| <i class="fas fa-brain text-purple-600 text-2xl mr-2"></i> |
| <span class="text-xl font-bold text-gray-900">DeepSite</span> |
| </div> |
| <p class="text-gray-500 text-base"> |
| Advanced AI solutions for developers and businesses. |
| </p> |
| <div class="flex space-x-6"> |
| <a href="#" class="text-gray-400 hover:text-gray-500"> |
| <i class="fab fa-twitter text-xl"></i> |
| </a> |
| <a href="#" class="text-gray-400 hover:text-gray-500"> |
| <i class="fab fa-github text-xl"></i> |
| </a> |
| <a href="#" class="text-gray-400 hover:text-gray-500"> |
| <i class="fab fa-linkedin text-xl"></i> |
| </a> |
| </div> |
| </div> |
| <div class="mt-12 grid grid-cols-2 gap-8 xl:mt-0 xl:col-span-2"> |
| <div class="md:grid md:grid-cols-2 md:gap-8"> |
| <div> |
| <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase"> |
| Solutions |
| </h3> |
| <ul class="mt-4 space-y-4"> |
| <li> |
| <a href="#" class="text-base text-gray-500 hover:text-gray-900"> |
| Computer Vision |
| </a> |
| </li> |
| <li> |
| <a href="#" class="text-base text-gray-500 hover:text-gray-900"> |
| Natural Language |
| </a> |
| </li> |
| <li> |
| <a href="#" class="text-base text-gray-500 hover:text-gray-900"> |
| Recommendation |
| </a> |
| </li> |
| <li> |
| <a href="#" class="text-base text-gray-500 hover:text-gray-900"> |
| Forecasting |
| </a> |
| </li> |
| </ul> |
| </div> |
| <div class="mt-12 md:mt-0"> |
| <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase"> |
| Support |
| </h3> |
| <ul class="mt-4 space-y-4"> |
| <li> |
| <a href="#" class="text-base text-gray-500 hover:text-gray-900"> |
| Documentation |
| </a> |
| </li> |
| <li> |
| <a href="#" class="text-base text-gray-500 hover:text-gray-900"> |
| Guides |
| </a> |
| </li> |
| <li> |
| <a href="#" class="text-base text-gray-500 hover:text-gray-900"> |
| API Status |
| </a> |
| </li> |
| <li> |
| <a href="#" class="text-base text-gray-500 hover:text-gray-900"> |
| Contact |
| </a> |
| </li> |
| </ul> |
| </div> |
| </div> |
| <div class="md:grid md:grid-cols-2 md:gap-8"> |
| <div> |
| <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase"> |
| Company |
| </h3> |
| <ul class="mt-4 space-y-4"> |
| <li> |
| <a href="#" class="text-base text-gray-500 hover:text-gray-900"> |
| About |
| </a> |
| </li> |
| <li> |
| <a href="#" class="text-base text-gray-500 hover:text-gray-900"> |
| Blog |
| </a> |
| </li> |
| <li> |
| <a href="#" class="text-base text-gray-500 hover:text-gray-900"> |
| Careers |
| </a> |
| </li> |
| <li> |
| <a href="#" class="text-base text-gray-500 hover:text-gray-900"> |
| Press |
| </a> |
| </li> |
| </ul> |
| </div> |
| <div class="mt-12 md:mt-0"> |
| <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase"> |
| Legal |
| </h3> |
| <ul class="mt-4 space-y-4"> |
| <li> |
| <a href="#" class="text-base text-gray-500 hover:text-gray-900"> |
| Privacy |
| </a> |
| </li> |
| <li> |
| <a href="#" class="text-base text-gray-500 hover:text-gray-900"> |
| Terms |
| </a> |
| </li> |
| <li> |
| <a href="#" class="text-base text-gray-500 hover:text-gray-900"> |
| Security |
| </a> |
| </li> |
| </ul> |
| </div> |
| </div> |
| </div> |
| </div> |
| <div class="mt-12 border-t border-gray-200 pt-8"> |
| <p class="text-base text-gray-400 xl:text-center"> |
| © 2023 DeepSite AI. All rights reserved. |
| </p> |
| </div> |
| </div> |
| </footer> |
|
|
| <script> |
| |
| document.querySelector('[aria-expanded="false"]').addEventListener('click', function() { |
| const expanded = this.getAttribute('aria-expanded') === 'true' || false; |
| this.setAttribute('aria-expanded', !expanded); |
| |
| }); |
| |
| |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
| anchor.addEventListener('click', function (e) { |
| e.preventDefault(); |
| document.querySelector(this.getAttribute('href')).scrollIntoView({ |
| behavior: 'smooth' |
| }); |
| }); |
| }); |
| |
| |
| const monthlyButton = document.querySelector('button:first-of-type'); |
| const yearlyButton = document.querySelector('button:last-of-type'); |
| |
| monthlyButton.addEventListener('click', function() { |
| this.classList.add('bg-white', 'border-gray-200', 'text-gray-900'); |
| this.classList.remove('border-transparent', 'text-gray-700'); |
| yearlyButton.classList.add('border-transparent', 'text-gray-700'); |
| yearlyButton.classList.remove('bg-white', 'border-gray-200', 'text-gray-900'); |
| |
| }); |
| |
| yearlyButton.addEventListener('click', function() { |
| this.classList.add('bg-white', 'border-gray-200', 'text-gray-900'); |
| this.classList.remove('border-transparent', 'text-gray-700'); |
| monthlyButton.classList.add('border-transparent', 'text-gray-700'); |
| monthlyButton.classList.remove('bg-white', 'border-gray-200', 'text-gray-900'); |
| |
| }); |
| </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=akram2019/deepsite" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
