|
|
<!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> |
