Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>DeepSite AI - AI-Powered Web 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> | |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| background-color: #f9fafb; | |
| } | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #6e8efb, #a777e3); | |
| } | |
| .hero-text { | |
| background: linear-gradient(90deg, #4f46e5, #a855f7); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| } | |
| .feature-card: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); | |
| } | |
| .pricing-card:hover { | |
| transform: scale(1.03); | |
| } | |
| .ai-chat-container { | |
| height: 500px; | |
| background-color: #f3f4f6; | |
| border-radius: 12px; | |
| box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); | |
| } | |
| .chat-message { | |
| max-width: 80%; | |
| padding: 12px 16px; | |
| border-radius: 18px; | |
| margin-bottom: 12px; | |
| } | |
| .user-message { | |
| background-color: #4f46e5; | |
| color: white; | |
| margin-left: auto; | |
| border-bottom-right-radius: 4px; | |
| } | |
| .ai-message { | |
| background-color: white; | |
| color: #1f2937; | |
| margin-right: auto; | |
| border-bottom-left-radius: 4px; | |
| box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); | |
| } | |
| .typing-indicator span { | |
| display: inline-block; | |
| width: 8px; | |
| height: 8px; | |
| background-color: #9ca3af; | |
| border-radius: 50%; | |
| margin-right: 4px; | |
| animation: bounce 1.4s infinite ease-in-out; | |
| } | |
| .typing-indicator span:nth-child(2) { | |
| animation-delay: 0.2s; | |
| } | |
| .typing-indicator span:nth-child(3) { | |
| animation-delay: 0.4s; | |
| } | |
| @keyframes bounce { | |
| 0%, 80%, 100% { transform: translateY(0); } | |
| 40% { transform: translateY(-6px); } | |
| } | |
| .floating { | |
| animation: floating 6s ease-in-out infinite; | |
| } | |
| @keyframes floating { | |
| 0% { transform: translateY(0px); } | |
| 50% { transform: translateY(-15px); } | |
| 100% { transform: translateY(0px); } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Navigation --> | |
| <nav class="bg-white shadow-sm sticky top-0 z-50"> | |
| <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-robot text-indigo-600 text-2xl mr-2"></i> | |
| <span class="text-xl font-bold text-gray-900">DeepSite<span class="text-indigo-600">AI</span></span> | |
| </div> | |
| <div class="hidden sm:ml-6 sm:flex sm:space-x-8"> | |
| <a href="#" class="border-indigo-500 text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Home</a> | |
| <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Features</a> | |
| <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Solutions</a> | |
| <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Pricing</a> | |
| <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Resources</a> | |
| </div> | |
| </div> | |
| <div class="hidden sm:ml-6 sm:flex sm:items-center"> | |
| <button class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-md text-sm font-medium transition duration-150 ease-in-out">Get Started</button> | |
| </div> | |
| <div class="-mr-2 flex items-center sm:hidden"> | |
| <button type="button" class="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-indigo-500" aria-controls="mobile-menu" aria-expanded="false" id="mobile-menu-button"> | |
| <span class="sr-only">Open main menu</span> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Mobile menu --> | |
| <div class="hidden sm:hidden" id="mobile-menu"> | |
| <div class="pt-2 pb-3 space-y-1"> | |
| <a href="#" class="bg-indigo-50 border-indigo-500 text-indigo-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Home</a> | |
| <a href="#" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Features</a> | |
| <a href="#" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Solutions</a> | |
| <a href="#" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Pricing</a> | |
| <a href="#" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Resources</a> | |
| <div class="mt-4 pl-3 pr-4"> | |
| <button class="w-full bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-md text-base font-medium transition duration-150 ease-in-out">Get Started</button> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <div class="relative overflow-hidden"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="relative z-10 pb-8 bg-white sm:pb-16 md:pb-20 lg:max-w-2xl lg:w-full lg:pb-28 xl:pb-32"> | |
| <div class="pt-10 mx-auto max-w-7xl px-4 sm:pt-12 sm:px-6 md:pt-16 lg:pt-20 lg:px-8 xl:pt-28"> | |
| <div class="sm:text-center lg:text-left"> | |
| <h1 class="text-4xl tracking-tight font-extrabold text-gray-900 sm:text-5xl md:text-6xl"> | |
| <span class="block">Build Smarter Websites with</span> | |
| <span class="hero-text block">Artificial Intelligence</span> | |
| </h1> | |
| <p class="mt-3 text-base text-gray-500 sm:mt-5 sm:text-lg sm:max-w-xl sm:mx-auto md:mt-5 md:text-xl lg:mx-0"> | |
| DeepSite AI empowers you to create, optimize, and scale your web presence with cutting-edge AI technology. | |
| </p> | |
| <div class="mt-5 sm:mt-8 sm:flex sm:justify-center lg: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-white bg-indigo-600 hover:bg-indigo-700 md:py-4 md:text-lg md:px-10"> | |
| Start Free Trial | |
| </a> | |
| </div> | |
| <div class="mt-3 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-indigo-700 bg-indigo-100 hover:bg-indigo-200 md:py-4 md:text-lg md:px-10"> | |
| Live Demo | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="lg:absolute lg:inset-y-0 lg:right-0 lg:w-1/2"> | |
| <div class="h-56 w-full sm:h-72 md:h-96 lg:w-full lg:h-full relative"> | |
| <div class="absolute inset-0 gradient-bg opacity-90"></div> | |
| <div class="absolute inset-0 flex items-center justify-center p-10"> | |
| <div class="ai-chat-container w-full p-6 flex flex-col"> | |
| <div class="flex-1 overflow-y-auto mb-4 space-y-4" id="chat-messages"> | |
| <div class="chat-message ai-message"> | |
| <p>Hello! I'm your AI assistant. How can I help you build your website today?</p> | |
| </div> | |
| <div class="chat-message user-message"> | |
| <p>I need a modern landing page for my SaaS product</p> | |
| </div> | |
| <div class="chat-message ai-message"> | |
| <p>Great! I can generate a responsive landing page template for you. What's your primary color scheme?</p> | |
| </div> | |
| <div class="chat-message ai-message"> | |
| <div class="typing-indicator"> | |
| <span></span> | |
| <span></span> | |
| <span></span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="relative"> | |
| <input type="text" placeholder="Ask the AI anything about web development..." class="w-full p-4 pr-12 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent"> | |
| <button class="absolute right-3 top-1/2 transform -translate-y-1/2 text-indigo-600 hover:text-indigo-800"> | |
| <i class="fas fa-paper-plane text-xl"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Features Section --> | |
| <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-indigo-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"> | |
| AI-Powered Web Development | |
| </p> | |
| <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto"> | |
| Our platform leverages artificial intelligence to simplify every aspect of web development. | |
| </p> | |
| </div> | |
| <div class="mt-10"> | |
| <div class="grid grid-cols-1 gap-10 sm:grid-cols-2 lg:grid-cols-3"> | |
| <!-- Feature 1 --> | |
| <div class="feature-card transition-all duration-300 ease-in-out bg-white rounded-lg shadow-md overflow-hidden p-6"> | |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white mb-4"> | |
| <i class="fas fa-magic text-xl"></i> | |
| </div> | |
| <h3 class="text-lg font-medium text-gray-900 mb-2">AI Design Assistant</h3> | |
| <p class="text-gray-500"> | |
| Get personalized design recommendations based on your content and industry trends. | |
| </p> | |
| </div> | |
| <!-- Feature 2 --> | |
| <div class="feature-card transition-all duration-300 ease-in-out bg-white rounded-lg shadow-md overflow-hidden p-6"> | |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white mb-4"> | |
| <i class="fas fa-code text-xl"></i> | |
| </div> | |
| <h3 class="text-lg font-medium text-gray-900 mb-2">Smart Code Generation</h3> | |
| <p class="text-gray-500"> | |
| Automatically generate clean, responsive code from your design specifications. | |
| </p> | |
| </div> | |
| <!-- Feature 3 --> | |
| <div class="feature-card transition-all duration-300 ease-in-out bg-white rounded-lg shadow-md overflow-hidden p-6"> | |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white mb-4"> | |
| <i class="fas fa-chart-line text-xl"></i> | |
| </div> | |
| <h3 class="text-lg font-medium text-gray-900 mb-2">Performance Optimization</h3> | |
| <p class="text-gray-500"> | |
| AI analyzes and improves your site speed, SEO, and accessibility in real-time. | |
| </p> | |
| </div> | |
| <!-- Feature 4 --> | |
| <div class="feature-card transition-all duration-300 ease-in-out bg-white rounded-lg shadow-md overflow-hidden p-6"> | |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white mb-4"> | |
| <i class="fas fa-robot text-xl"></i> | |
| </div> | |
| <h3 class="text-lg font-medium text-gray-900 mb-2">Content Generation</h3> | |
| <p class="text-gray-500"> | |
| Create engaging, SEO-friendly content tailored to your audience with AI. | |
| </p> | |
| </div> | |
| <!-- Feature 5 --> | |
| <div class="feature-card transition-all duration-300 ease-in-out bg-white rounded-lg shadow-md overflow-hidden p-6"> | |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white mb-4"> | |
| <i class="fas fa-shield-alt text-xl"></i> | |
| </div> | |
| <h3 class="text-lg font-medium text-gray-900 mb-2">Security Monitoring</h3> | |
| <p class="text-gray-500"> | |
| Continuous AI-powered security scanning and vulnerability detection. | |
| </p> | |
| </div> | |
| <!-- Feature 6 --> | |
| <div class="feature-card transition-all duration-300 ease-in-out bg-white rounded-lg shadow-md overflow-hidden p-6"> | |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white mb-4"> | |
| <i class="fas fa-users text-xl"></i> | |
| </div> | |
| <h3 class="text-lg font-medium text-gray-900 mb-2">User Behavior Analysis</h3> | |
| <p class="text-gray-500"> | |
| Understand visitor behavior and optimize conversion paths with AI insights. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- AI Demo Section --> | |
| <div class="relative bg-gray-50 py-16 overflow-hidden"> | |
| <div class="hidden lg:block lg:absolute lg:inset-y-0 lg:h-full lg:w-full"> | |
| <div class="relative h-full text-lg max-w-prose mx-auto" aria-hidden="true"> | |
| <svg class="absolute top-12 left-full transform translate-x-32" width="404" height="384" fill="none" viewBox="0 0 404 384"> | |
| <defs> | |
| <pattern id="74b3fd99-0a6f-4271-bef2-e80eeafdf357" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse"> | |
| <rect x="0" y="0" width="4" height="4" class="text-gray-200" fill="currentColor" /> | |
| </pattern> | |
| </defs> | |
| <rect width="404" height="384" fill="url(#74b3fd99-0a6f-4271-bef2-e80eeafdf357)" /> | |
| </svg> | |
| <svg class="absolute top-1/2 right-full transform -translate-y-1/2 -translate-x-32" width="404" height="384" fill="none" viewBox="0 0 404 384"> | |
| <defs> | |
| <pattern id="f210dbf6-a58d-4871-961e-36d5016a0f49" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse"> | |
| <rect x="0" y="0" width="4" height="4" class="text-gray-200" fill="currentColor" /> | |
| </pattern> | |
| </defs> | |
| <rect width="404" height="384" fill="url(#f210dbf6-a58d-4871-961e-36d5016a0f49)" /> | |
| </svg> | |
| <svg class="absolute bottom-12 left-full transform translate-x-32" width="404" height="384" fill="none" viewBox="0 0 404 384"> | |
| <defs> | |
| <pattern id="d3eb07ae-5182-43e6-857d-35c643af9034" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse"> | |
| <rect x="0" y="0" width="4" height="4" class="text-gray-200" fill="currentColor" /> | |
| </pattern> | |
| </defs> | |
| <rect width="404" height="384" fill="url(#d3eb07ae-5182-43e6-857d-35c643af9034)" /> | |
| </svg> | |
| </div> | |
| </div> | |
| <div class="relative px-4 sm:px-6 lg:px-8"> | |
| <div class="text-lg max-w-prose mx-auto"> | |
| <h2 class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl"> | |
| Experience the Power of AI | |
| </h2> | |
| <p class="mt-8 text-xl text-gray-500 leading-8"> | |
| Our AI can generate complete website components in seconds. Try it yourself by describing what you need: | |
| </p> | |
| </div> | |
| <div class="mt-6 max-w-3xl mx-auto"> | |
| <div class="bg-white shadow rounded-lg overflow-hidden"> | |
| <div class="px-4 py-5 sm:p-6"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-indigo-500 rounded-md p-3"> | |
| <i class="fas fa-lightbulb text-white text-xl"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="text-lg leading-6 font-medium text-gray-900">AI Component Generator</h3> | |
| <p class="mt-1 text-sm text-gray-500"> | |
| Describe a website component you'd like to create | |
| </p> | |
| </div> | |
| </div> | |
| <div class="mt-5"> | |
| <textarea rows="3" class="shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border-gray-300 rounded-md p-4 border" placeholder="e.g. A modern pricing section with three tiers, gradient buttons, and toggle for annual/monthly pricing..."></textarea> | |
| </div> | |
| <div class="mt-5"> | |
| <button type="button" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"> | |
| <i class="fas fa-bolt mr-2"></i> | |
| Generate with AI | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-12 max-w-3xl mx-auto"> | |
| <div class="bg-white shadow rounded-lg overflow-hidden"> | |
| <div class="px-4 py-5 sm:p-6"> | |
| <h3 class="text-lg leading-6 font-medium text-gray-900 mb-4">AI Generated Result</h3> | |
| <div class="bg-gray-50 p-4 rounded-md border border-gray-200"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h4 class="font-medium">Pricing Section</h4> | |
| <div class="flex items-center"> | |
| <span class="text-sm font-medium text-gray-500 mr-2">Annual</span> | |
| <div class="relative inline-block w-10 mr-2 align-middle select-none"> | |
| <input type="checkbox" name="toggle" id="toggle" class="toggle-checkbox absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer"/> | |
| <label for="toggle" class="toggle-label block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer"></label> | |
| </div> | |
| <span class="text-sm font-medium text-indigo-600">Monthly</span> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 gap-4 sm:grid-cols-3"> | |
| <!-- Pricing Tier 1 --> | |
| <div class="border border-gray-200 rounded-lg p-6"> | |
| <h5 class="text-lg font-medium mb-2">Starter</h5> | |
| <p class="text-gray-500 text-sm mb-4">Perfect for small projects</p> | |
| <div class="mb-4"> | |
| <span class="text-3xl font-bold">$19</span> | |
| <span class="text-gray-500">/month</span> | |
| </div> | |
| <ul class="space-y-2 mb-6"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-2"></i> | |
| <span>5 Projects</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-2"></i> | |
| <span>10GB Storage</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-2"></i> | |
| <span>Basic Analytics</span> | |
| </li> | |
| </ul> | |
| <button class="w-full bg-gradient-to-r from-indigo-500 to-purple-600 text-white py-2 px-4 rounded-md hover:opacity-90 transition">Get Started</button> | |
| </div> | |
| <!-- Pricing Tier 2 --> | |
| <div class="border-2 border-indigo-500 rounded-lg p-6 relative"> | |
| <div class="absolute top-0 right-0 bg-indigo-500 text-white text-xs font-bold px-2 py-1 rounded-bl-lg rounded-tr-lg">POPULAR</div> | |
| <h5 class="text-lg font-medium mb-2">Professional</h5> | |
| <p class="text-gray-500 text-sm mb-4">For growing businesses</p> | |
| <div class="mb-4"> | |
| <span class="text-3xl font-bold">$49</span> | |
| <span class="text-gray-500">/month</span> | |
| </div> | |
| <ul class="space-y-2 mb-6"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-2"></i> | |
| <span>Unlimited Projects</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-2"></i> | |
| <span>50GB Storage</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-2"></i> | |
| <span>Advanced Analytics</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-2"></i> | |
| <span>Priority Support</span> | |
| </li> | |
| </ul> | |
| <button class="w-full bg-gradient-to-r from-indigo-500 to-purple-600 text-white py-2 px-4 rounded-md hover:opacity-90 transition">Get Started</button> | |
| </div> | |
| <!-- Pricing Tier 3 --> | |
| <div class="border border-gray-200 rounded-lg p-6"> | |
| <h5 class="text-lg font-medium mb-2">Enterprise</h5> | |
| <p class="text-gray-500 text-sm mb-4">For large organizations</p> | |
| <div class="mb-4"> | |
| <span class="text-3xl font-bold">$99</span> | |
| <span class="text-gray-500">/month</span> | |
| </div> | |
| <ul class="space-y-2 mb-6"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-2"></i> | |
| <span>Unlimited Projects</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-2"></i> | |
| <span>500GB Storage</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-2"></i> | |
| <span>Premium Analytics</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-2"></i> | |
| <span>24/7 Support</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-2"></i> | |
| <span>Custom Domains</span> | |
| </li> | |
| </ul> | |
| <button class="w-full bg-gradient-to-r from-indigo-500 to-purple-600 text-white py-2 px-4 rounded-md hover:opacity-90 transition">Get Started</button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-4 flex justify-between items-center"> | |
| <span class="text-sm text-gray-500">AI-generated in 2.3 seconds</span> | |
| <div> | |
| <button class="text-sm text-indigo-600 hover:text-indigo-800 mr-4"> | |
| <i class="fas fa-code mr-1"></i> Get Code | |
| </button> | |
| <button class="text-sm text-indigo-600 hover:text-indigo-800"> | |
| <i class="fas fa-redo mr-1"></i> Regenerate | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Pricing Section --> | |
| <div class="bg-gray-50 pt-12 pb-24"> | |
| <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">Simple, transparent pricing</h2> | |
| <p class="mt-5 text-xl text-gray-500 text-center max-w-2xl mx-auto"> | |
| Choose the perfect plan for your needs. All plans include our AI-powered features. | |
| </p> | |
| <div class="relative mt-6 bg-white rounded-lg p-0.5 flex self-center border border-gray-200"> | |
| <button type="button" class="relative bg-white border-gray-200 rounded-md shadow-sm py-2 px-4 text-sm font-medium text-gray-700 whitespace-nowrap focus:outline-none focus:ring-2 focus:ring-indigo-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-4 text-sm font-medium text-gray-700 whitespace-nowrap focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:z-10 sm:w-auto sm:px-8"> | |
| Annual 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"> | |
| <!-- Basic Plan --> | |
| <div class="pricing-card transition-all duration-300 ease-in-out 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">Basic</h3> | |
| <p class="mt-4 text-sm text-gray-500"> | |
| Perfect for individuals and small projects | |
| </p> | |
| <div class="mt-8"> | |
| <p class="text-4xl font-extrabold text-gray-900">$19</p> | |
| <p class="mt-2 text-sm text-gray-500">per month</p> | |
| </div> | |
| <button class="mt-8 block w-full bg-gray-800 border border-gray-800 rounded-md py-2 text-sm font-semibold text-white text-center hover:bg-gray-900"> | |
| 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 h-5 w-5 text-green-500"> | |
| <i class="fas fa-check"></i> | |
| </div> | |
| <p class="ml-3 text-sm text-gray-700">5 AI-generated pages</p> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0 h-5 w-5 text-green-500"> | |
| <i class="fas fa-check"></i> | |
| </div> | |
| <p class="ml-3 text-sm text-gray-700">Basic AI design assistant</p> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0 h-5 w-5 text-green-500"> | |
| <i class="fas fa-check"></i> | |
| </div> | |
| <p class="ml-3 text-sm text-gray-700">Standard performance optimization</p> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0 h-5 w-5 text-green-500"> | |
| <i class="fas fa-check"></i> | |
| </div> | |
| <p class="ml-3 text-sm text-gray-700">Email support</p> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <!-- Pro Plan --> | |
| <div class="pricing-card transition-all duration-300 ease-in-out border-2 border-indigo-500 rounded-lg shadow-sm divide-y divide-gray-200"> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-start"> | |
| <h3 class="text-lg leading-6 font-medium text-gray-900">Professional</h3> | |
| <p class="bg-indigo-100 text-indigo-800 rounded-full text-xs font-semibold px-3 py-1">MOST POPULAR</p> | |
| </div> | |
| <p class="mt-4 text-sm text-gray-500"> | |
| For growing businesses with more complex needs | |
| </p> | |
| <div class="mt-8"> | |
| <p class="text-4xl font-extrabold text-gray-900">$49</p> | |
| <p class="mt-2 text-sm text-gray-500">per month</p> | |
| </div> | |
| <button class="mt-8 block w-full bg-indigo-600 border border-indigo-600 rounded-md py-2 text-sm font-semibold text-white text-center hover:bg-indigo-700"> | |
| 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 h-5 w-5 text-green-500"> | |
| <i class="fas fa-check"></i> | |
| </div> | |
| <p class="ml-3 text-sm text-gray-700">20 AI-generated pages</p> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0 h-5 w-5 text-green-500"> | |
| <i class="fas fa-check"></i> | |
| </div> | |
| <p class="ml-3 text-sm text-gray-700">Advanced AI design assistant</p> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0 h-5 w-5 text-green-500"> | |
| <i class="fas fa-check"></i> | |
| </div> | |
| <p class="ml-3 text-sm text-gray-700">Premium performance optimization</p> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0 h-5 w-5 text-green-500"> | |
| <i class="fas fa-check"></i> | |
| </div> | |
| <p class="ml-3 text-sm text-gray-700">AI content generation</p> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0 h-5 w-5 text-green-500"> | |
| <i class="fas fa-check"></i> | |
| </div> | |
| <p class="ml-3 text-sm text-gray-700">Priority email & chat support</p> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <!-- Enterprise Plan --> | |
| <div class="pricing-card transition-all duration-300 ease-in-out 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 large organizations with custom requirements | |
| </p> | |
| <div class="mt-8"> | |
| <p class="text-4xl font-extrabold text-gray-900">$99</p> | |
| <p class="mt-2 text-sm text-gray-500">per month</p> | |
| </div> | |
| <button class="mt-8 block w-full bg-gray-800 border border-gray-800 rounded-md py-2 text-sm font-semibold text-white text-center hover:bg-gray-900"> | |
| 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 h-5 w-5 text-green-500"> | |
| <i class="fas fa-check"></i> | |
| </div> | |
| <p class="ml-3 text-sm text-gray-700">Unlimited AI-generated pages</p> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0 h-5 w-5 text-green-500"> | |
| <i class="fas fa-check"></i> | |
| </div> | |
| <p class="ml-3 text-sm text-gray-700">Premium AI design assistant</p> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0 h-5 w-5 text-green-500"> | |
| <i class="fas fa-check"></i> | |
| </div> | |
| <p class="ml-3 text-sm text-gray-700">Enterprise-grade optimization</p> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0 h-5 w-5 text-green-500"> | |
| <i class="fas fa-check"></i> | |
| </div> | |
| <p class="ml-3 text-sm text-gray-700">AI content generation & localization</p> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0 h-5 w-5 text-green-500"> | |
| <i class="fas fa-check"></i> | |
| </div> | |
| <p class="ml-3 text-sm text-gray-700">24/7 phone & priority support</p> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0 h-5 w-5 text-green-500"> | |
| <i class="fas fa-check"></i> | |
| </div> | |
| <p class="ml-3 text-sm text-gray-700">Custom AI model training</p> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Testimonials --> | |
| <div class="bg-white py-16 sm:py-24"> | |
| <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-indigo-600 font-semibold tracking-wide uppercase">Testimonials</h2> | |
| <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl"> | |
| Trusted by developers worldwide | |
| </p> | |
| </div> | |
| <div class="mt-10"> | |
| <div class="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3"> | |
| <!-- Testimonial 1 --> | |
| <div class="bg-gray-50 p-6 rounded-lg"> | |
| <div class="flex items-center mb-4"> | |
| <div class="flex-shrink-0"> | |
| <img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt=""> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="text-sm font-bold text-gray-900">Sarah Johnson</h4> | |
| <p class="text-sm text-gray-500">Frontend Developer</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-600 italic"> | |
| "DeepSite AI has completely transformed our workflow. What used to take days now takes hours, and the quality is consistently better than what we could produce manually." | |
| </p> | |
| <div class="mt-4 flex"> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| </div> | |
| </div> | |
| <!-- Testimonial 2 --> | |
| <div class="bg-gray-50 p-6 rounded-lg"> | |
| <div class="flex items-center mb-4"> | |
| <div class="flex-shrink-0"> | |
| <img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1519244703995-f4e0f30006d5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt=""> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="text-sm font-bold text-gray-900">Michael Chen</h4> | |
| <p class="text-sm text-gray-500">CTO, TechStart</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-600 italic"> | |
| "The AI-generated code is clean, efficient, and well-documented. It's like having an entire team of senior developers available 24/7." | |
| </p> | |
| <div class="mt-4 flex"> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| </div> | |
| </div> | |
| <!-- Testimonial 3 --> | |
| <div class="bg-gray-50 p-6 rounded-lg"> | |
| <div class="flex items-center mb-4"> | |
| <div class="flex-shrink-0"> | |
| <img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt=""> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="text-sm font-bold text-gray-900">David Rodriguez</h4> | |
| <p class="text-sm text-gray-500">Product Manager</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-600 italic"> | |
| "Our conversion rates improved by 35% after implementing the AI-optimized designs. The data-driven approach makes all the difference." | |
| </p> | |
| <div class="mt-4 flex"> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- CTA Section --> | |
| <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">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-indigo-600 bg-white hover:bg-indigo-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-indigo-600 bg-opacity-60 hover:bg-opacity-70"> | |
| <i class="fas fa-play-circle mr-2"></i> | |
| Watch demo | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Footer --> | |
| <footer class="bg-white"> | |
| <div class="max-w-7xl mx-auto py-12 px-4 overflow-hidden sm:px-6 lg:px-8"> | |
| <nav class="-mx-5 -my-2 flex flex-wrap justify-center" aria-label="Footer"> | |
| <div class="px-5 py-2"> | |
| <a href="#" class="text-base text-gray-500 hover:text-gray-900">About</a> | |
| </div> | |
| <div class="px-5 py-2"> | |
| <a href="#" class="text-base text-gray-500 hover:text-gray-900">Blog</a> | |
| </div> | |
| <div class="px-5 py-2"> | |
| <a href="#" class="text-base text-gray-500 hover:text-gray-900">Jobs</a> | |
| </div> | |
| <div class="px-5 py-2"> | |
| <a href="#" class="text-base text-gray-500 hover:text-gray-900">Press</a> | |
| </div> | |
| <div class="px-5 py-2"> | |
| <a href="#" class="text-base text-gray-500 hover:text-gray-900">Accessibility</a> | |
| </div> | |
| <div class="px-5 py-2"> | |
| <a href="#" class="text-base text-gray-500 hover:text-gray-900">Partners</a> | |
| </div> | |
| </nav> | |
| <div class="mt-8 flex justify-center space-x-6"> | |
| <a href="#" class="text-gray-400 hover:text-gray-500"> | |
| <span class="sr-only">Facebook</span> | |
| <i class="fab fa-facebook-f"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-gray-500"> | |
| <span class="sr-only">Instagram</span> | |
| <i class="fab fa-instagram"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-gray-500"> | |
| <span class="sr-only">Twitter</span> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-gray-500"> | |
| <span class="sr-only">GitHub</span> | |
| <i class="fab fa-github"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-gray-500"> | |
| <span class="sr-only">LinkedIn</span> | |
| <i class="fab fa-linkedin-in"></i> | |
| </a> | |
| </div> | |
| <p class="mt-8 text-center text-base text-gray-400"> | |
| © 2023 DeepSite AI. All rights reserved. | |
| </p> | |
| </div> | |
| </footer> | |
| <script> | |
| // Mobile menu toggle | |
| document.getElementById('mobile-menu-button').addEventListener('click', function() { | |
| const menu = document.getElementById('mobile-menu'); | |
| if (menu.classList.contains('hidden')) { | |
| menu.classList.remove('hidden'); | |
| } else { | |
| menu.classList.add('hidden'); | |
| } | |
| }); | |
| // Simulate AI typing in chat | |
| setTimeout(function() { | |
| const chatMessages = document.getElementById('chat-messages'); | |
| const typingIndicator = document.querySelector('.typing-indicator'); | |
| if (typingIndicator) { | |
| typingIndicator.remove(); | |
| const aiResponse = document.createElement('div'); | |
| aiResponse.className = 'chat-message ai-message'; | |
| aiResponse.innerHTML = '<p>I recommend using a blue-purple gradient with clean white sections. Would you like me to generate a mockup?</p>'; | |
| chatMessages.appendChild(aiResponse); | |
| chatMessages.scrollTop = chatMessages.scrollHeight; | |
| } | |
| }, 2000); | |
| // Pricing toggle animation | |
| const toggle = document.getElementById('toggle'); | |
| if (toggle) { | |
| toggle.addEventListener('change', function() { | |
| const pricingCards = document.querySelectorAll('.pricing-card'); | |
| pricingCards.forEach(card => { | |
| card.classList.add('transform'); | |
| card.classList.add('transition'); | |
| card.classList.add('duration-300'); | |
| card.classList.add('ease-in-out'); | |
| setTimeout(() => { | |
| card.classList.remove('transform'); | |
| card.classList.remove('transition'); | |
| card.classList.remove('duration-300'); | |
| card.classList.remove('ease-in-out'); | |
| }, 300); | |
| }); | |
| }); | |
| } | |
| </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=Wasghington/kakttusdeep-ai" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |