Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>AI.PIMP.IO - AI Model Management & Content Creation</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=Poppins:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Poppins', sans-serif; | |
| } | |
| .gradient-text { | |
| background: linear-gradient(90deg, #8339B6 0%, #FF66FF 100%); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| } | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #8339B6 0%, #FF66FF 100%); | |
| } | |
| .card-hover { | |
| transition: all 0.3s ease; | |
| } | |
| .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); | |
| } | |
| .interface-container { | |
| background: linear-gradient(145deg, #1e1e2e 0%, #2a2a3a 100%); | |
| border-radius: 20px; | |
| box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); | |
| } | |
| .interface-tab { | |
| transition: all 0.3s ease; | |
| } | |
| .interface-tab.active { | |
| background: rgba(255, 255, 255, 0.1); | |
| border-left: 3px solid #FF66FF; | |
| } | |
| .interface-content { | |
| min-height: 400px; | |
| } | |
| .generation-preview { | |
| background: linear-gradient(-45deg, #3a3a4a, #2a2a3a); | |
| background-size: 400% 400%; | |
| animation: gradient 15s ease infinite; | |
| } | |
| @keyframes gradient { | |
| 0% { background-position: 0% 50%; } | |
| 50% { background-position: 100% 50%; } | |
| 100% { background-position: 0% 50%; } | |
| } | |
| .glow { | |
| box-shadow: 0 0 15px rgba(255, 102, 255, 0.5); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50"> | |
| <!-- Navigation --> | |
| <nav class="bg-white shadow-sm"> | |
| <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"> | |
| <div class="w-10 h-10 rounded-full gradient-bg flex items-center justify-center text-white"> | |
| <i class="fas fa-arrow-up text-lg"></i> | |
| </div> | |
| <span class="ml-3 text-xl font-bold gradient-text">AI.PIMP.IO</span> | |
| </div> | |
| <div class="hidden sm:ml-6 sm:flex sm:space-x-8"> | |
| <a href="#" class="border-purple-500 text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Home</a> | |
| <a href="#features" 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="#interface" 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">Interface</a> | |
| <a href="#pricing" 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> | |
| </div> | |
| </div> | |
| <div class="hidden sm:ml-6 sm:flex sm:items-center"> | |
| <a href="#" class="gradient-bg text-white px-4 py-2 rounded-md text-sm font-medium hover:opacity-90 transition">Get Started</a> | |
| </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-purple-500" aria-controls="mobile-menu" aria-expanded="false"> | |
| <span class="sr-only">Open main menu</span> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Mobile menu --> | |
| <div class="sm:hidden hidden" id="mobile-menu"> | |
| <div class="pt-2 pb-3 space-y-1"> | |
| <a href="#" class="bg-purple-50 border-purple-500 text-purple-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Home</a> | |
| <a href="#features" 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="#interface" 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">Interface</a> | |
| <a href="#pricing" 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> | |
| <div class="mt-4 pl-3 pr-4"> | |
| <a href="#" class="gradient-bg text-white block w-full px-4 py-2 rounded-md text-base font-medium text-center">Get Started</a> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <div class="relative bg-white 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"> | |
| <main class="mt-10 mx-auto max-w-7xl px-4 sm:mt-12 sm:px-6 md:mt-16 lg:mt-20 lg:px-8 xl:mt-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">AI Content Creation</span> | |
| <span class="block gradient-text">Powered to Perfection</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"> | |
| The ultimate AI model management and content generation tool with advanced workflows, LoRA integration, and real-time processing. | |
| </p> | |
| <div class="mt-5 sm:mt-8 sm:flex sm:justify-center lg:justify-start"> | |
| <div class="rounded-md shadow"> | |
| <a href="#" class="gradient-bg text-white w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md hover:opacity-90 md:py-4 md:text-lg md:px-10"> | |
| Start Generating | |
| </a> | |
| </div> | |
| <div class="mt-3 sm:mt-0 sm:ml-3"> | |
| <a href="#features" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-purple-700 bg-purple-100 hover:bg-purple-200 md:py-4 md:text-lg md:px-10"> | |
| Learn More | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| </div> | |
| </div> | |
| <div class="lg:absolute lg:inset-y-0 lg:right-0 lg:w-1/2 hidden lg:block"> | |
| <div class="h-56 w-full sm:h-72 md:h-96 lg:w-full lg:h-full interface-container flex items-center justify-center p-10"> | |
| <!-- Interface Preview --> | |
| <div class="w-full h-full bg-gray-900 rounded-lg overflow-hidden shadow-xl"> | |
| <div class="flex h-full"> | |
| <!-- Sidebar --> | |
| <div class="w-16 bg-gray-800 flex flex-col items-center py-4"> | |
| <div class="w-10 h-10 rounded-full gradient-bg flex items-center justify-center text-white mb-6"> | |
| <i class="fas fa-arrow-up text-lg"></i> | |
| </div> | |
| <div class="space-y-6"> | |
| <button class="text-gray-400 hover:text-white p-2 rounded-lg"> | |
| <i class="fas fa-tachometer-alt text-lg"></i> | |
| </button> | |
| <button class="text-white bg-gray-700 p-2 rounded-lg glow"> | |
| <i class="fas fa-magic text-lg"></i> | |
| </button> | |
| <button class="text-gray-400 hover:text-white p-2 rounded-lg"> | |
| <i class="fas fa-layer-group text-lg"></i> | |
| </button> | |
| <button class="text-gray-400 hover:text-white p-2 rounded-lg"> | |
| <i class="fas fa-project-diagram text-lg"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Main Content --> | |
| <div class="flex-1 bg-gray-900 p-4"> | |
| <div class="bg-gray-800 rounded-lg h-full p-4 generation-preview flex flex-col"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="text-white font-medium">Content Generation</h3> | |
| <button class="text-xs bg-purple-600 text-white px-3 py-1 rounded">Generate</button> | |
| </div> | |
| <div class="flex-1 grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <!-- Prompt Area --> | |
| <div class="bg-gray-700 rounded-lg p-4"> | |
| <label class="text-xs text-gray-300 mb-1 block">Prompt</label> | |
| <textarea class="w-full bg-gray-800 text-white text-sm rounded p-2 h-32" placeholder="Describe what you want to generate..."></textarea> | |
| </div> | |
| <!-- Settings --> | |
| <div class="bg-gray-700 rounded-lg p-4"> | |
| <label class="text-xs text-gray-300 mb-1 block">Settings</label> | |
| <div class="space-y-3"> | |
| <div> | |
| <label class="text-xs text-gray-300 mb-1 block">Model</label> | |
| <select class="w-full bg-gray-800 text-white text-sm rounded p-2"> | |
| <option>SDXL 1.0</option> | |
| <option>Realistic Vision</option> | |
| <option>Anime Model</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="text-xs text-gray-300 mb-1 block">LoRA</label> | |
| <select class="w-full bg-gray-800 text-white text-sm rounded p-2"> | |
| <option>Character Style 1</option> | |
| <option>Art Style 2</option> | |
| </select> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Results Preview --> | |
| <div class="mt-4 bg-gray-800 rounded-lg p-3"> | |
| <div class="flex space-x-3 overflow-x-auto pb-2"> | |
| <div class="flex-shrink-0 w-24 h-24 bg-gray-700 rounded flex items-center justify-center text-gray-500"> | |
| <i class="fas fa-image"></i> | |
| </div> | |
| <div class="flex-shrink-0 w-24 h-24 bg-gray-700 rounded flex items-center justify-center text-gray-500"> | |
| <i class="fas fa-image"></i> | |
| </div> | |
| <div class="flex-shrink-0 w-24 h-24 bg-gray-700 rounded flex items-center justify-center text-gray-500"> | |
| <i class="fas fa-image"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Features Section --> | |
| <div id="features" 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 gradient-text 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"> | |
| Advanced AI Content Creation | |
| </p> | |
| <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto"> | |
| Everything you need to create stunning AI-generated content with precision and control. | |
| </p> | |
| </div> | |
| <div class="mt-10"> | |
| <div class="space-y-10 md:space-y-0 md:grid md:grid-cols-2 md:gap-x-8 md:gap-y-10"> | |
| <!-- Feature 1 --> | |
| <div class="card-hover relative bg-white p-6 rounded-lg shadow-md border border-gray-100"> | |
| <div class="absolute -top-5 -left-5 w-12 h-12 rounded-full gradient-bg flex items-center justify-center text-white"> | |
| <i class="fas fa-magic"></i> | |
| </div> | |
| <h3 class="text-lg font-medium text-gray-900 mb-2 mt-4">Powerful Generation</h3> | |
| <p class="mt-1 text-sm text-gray-500"> | |
| Generate high-quality images, videos, and text with advanced AI models and customizable parameters. | |
| </p> | |
| </div> | |
| <!-- Feature 2 --> | |
| <div class="card-hover relative bg-white p-6 rounded-lg shadow-md border border-gray-100"> | |
| <div class="absolute -top-5 -left-5 w-12 h-12 rounded-full gradient-bg flex items-center justify-center text-white"> | |
| <i class="fas fa-layer-group"></i> | |
| </div> | |
| <h3 class="text-lg font-medium text-gray-900 mb-2 mt-4">LoRA Management</h3> | |
| <p class="mt-1 text-sm text-gray-500"> | |
| Easily manage and apply LoRA models for fine-tuned style and character generation. | |
| </p> | |
| </div> | |
| <!-- Feature 3 --> | |
| <div class="card-hover relative bg-white p-6 rounded-lg shadow-md border border-gray-100"> | |
| <div class="absolute -top-5 -left-5 w-12 h-12 rounded-full gradient-bg flex items-center justify-center text-white"> | |
| <i class="fas fa-project-diagram"></i> | |
| </div> | |
| <h3 class="text-lg font-medium text-gray-900 mb-2 mt-4">Workflow Automation</h3> | |
| <p class="mt-1 text-sm text-gray-500"> | |
| Create and save complex workflows for repeatable, high-quality content generation. | |
| </p> | |
| </div> | |
| <!-- Feature 4 --> | |
| <div class="card-hover relative bg-white p-6 rounded-lg shadow-md border border-gray-100"> | |
| <div class="absolute -top-5 -left-5 w-12 h-12 rounded-full gradient-bg flex items-center justify-center text-white"> | |
| <i class="fas fa-exchange-alt"></i> | |
| </div> | |
| <h3 class="text-lg font-medium text-gray-900 mb-2 mt-4">Face Swap</h3> | |
| <p class="mt-1 text-sm text-gray-500"> | |
| Advanced face swapping technology with precise control over blending and positioning. | |
| </p> | |
| </div> | |
| <!-- Feature 5 --> | |
| <div class="card-hover relative bg-white p-6 rounded-lg shadow-md border border-gray-100"> | |
| <div class="absolute -top-5 -left-5 w-12 h-12 rounded-full gradient-bg flex items-center justify-center text-white"> | |
| <i class="fas fa-expand-arrows-alt"></i> | |
| </div> | |
| <h3 class="text-lg font-medium text-gray-900 mb-2 mt-4">Image Upscaling</h3> | |
| <p class="mt-1 text-sm text-gray-500"> | |
| Enhance low-resolution images with AI-powered upscaling while preserving details. | |
| </p> | |
| </div> | |
| <!-- Feature 6 --> | |
| <div class="card-hover relative bg-white p-6 rounded-lg shadow-md border border-gray-100"> | |
| <div class="absolute -top-5 -left-5 w-12 h-12 rounded-full gradient-bg flex items-center justify-center text-white"> | |
| <i class="fas fa-plug"></i> | |
| </div> | |
| <h3 class="text-lg font-medium text-gray-900 mb-2 mt-4">Plugin System</h3> | |
| <p class="mt-1 text-sm text-gray-500"> | |
| Extend functionality with custom plugins and community-developed extensions. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Interface Section --> | |
| <div id="interface" class="py-12 bg-gray-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="lg:text-center mb-12"> | |
| <h2 class="text-base gradient-text font-semibold tracking-wide uppercase">Interface</h2> | |
| <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl"> | |
| Intuitive & Powerful Control | |
| </p> | |
| <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto"> | |
| Designed for both beginners and professionals with a clean, organized interface. | |
| </p> | |
| </div> | |
| <div class="interface-container mx-auto p-1 rounded-2xl max-w-5xl"> | |
| <div class="bg-gray-900 rounded-xl overflow-hidden"> | |
| <!-- Interface Tabs --> | |
| <div class="flex border-b border-gray-700"> | |
| <button class="interface-tab active px-4 py-3 text-sm font-medium text-white flex items-center"> | |
| <i class="fas fa-magic mr-2"></i> Generation | |
| </button> | |
| <button class="interface-tab px-4 py-3 text-sm font-medium text-gray-400 hover:text-white flex items-center"> | |
| <i class="fas fa-layer-group mr-2"></i> LoRAs | |
| </button> | |
| <button class="interface-tab px-4 py-3 text-sm font-medium text-gray-400 hover:text-white flex items-center"> | |
| <i class="fas fa-project-diagram mr-2"></i> Workflows | |
| </button> | |
| <button class="interface-tab px-4 py-3 text-sm font-medium text-gray-400 hover:text-white flex items-center"> | |
| <i class="fas fa-plug mr-2"></i> Plugins | |
| </button> | |
| </div> | |
| <!-- Interface Content --> | |
| <div class="interface-content p-6"> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> | |
| <!-- Left Column --> | |
| <div class="md:col-span-1 bg-gray-800 rounded-lg p-4"> | |
| <h3 class="text-white font-medium mb-4">Settings</h3> | |
| <div class="space-y-4"> | |
| <div> | |
| <label class="text-xs text-gray-300 mb-1 block">Model</label> | |
| <select class="w-full bg-gray-700 text-white text-sm rounded p-2"> | |
| <option>SDXL 1.0</option> | |
| <option>Realistic Vision</option> | |
| <option>Anime Model</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="text-xs text-gray-300 mb-1 block">Main LoRA</label> | |
| <select class="w-full bg-gray-700 text-white text-sm rounded p-2"> | |
| <option>Character Style 1</option> | |
| <option>Art Style 2</option> | |
| </select> | |
| <div class="mt-2"> | |
| <input type="range" min="0" max="1" step="0.01" value="0.75" class="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer"> | |
| <div class="flex justify-between text-xs text-gray-400 mt-1"> | |
| <span>0</span> | |
| <span>0.75</span> | |
| <span>1</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="text-xs text-gray-300 mb-1 block">Resolution</label> | |
| <div class="grid grid-cols-2 gap-2"> | |
| <button class="bg-gray-700 text-white text-xs py-2 rounded">512x512</button> | |
| <button class="bg-purple-600 text-white text-xs py-2 rounded">1024x1024</button> | |
| <button class="bg-gray-700 text-white text-xs py-2 rounded">768x1024</button> | |
| <button class="bg-gray-700 text-white text-xs py-2 rounded">1024x768</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Middle Column --> | |
| <div class="md:col-span-2 bg-gray-800 rounded-lg p-4"> | |
| <h3 class="text-white font-medium mb-4">Prompt</h3> | |
| <textarea class="w-full bg-gray-700 text-white rounded p-3 h-40" placeholder="Describe what you want to generate..."></textarea> | |
| <div class="mt-4 flex justify-between items-center"> | |
| <div class="flex space-x-2"> | |
| <button class="bg-gray-700 text-white p-2 rounded-lg"> | |
| <i class="fas fa-magic text-sm"></i> | |
| </button> | |
| <button class="bg-gray-700 text-white p-2 rounded-lg"> | |
| <i class="fas fa-bolt text-sm"></i> | |
| </button> | |
| </div> | |
| <button class="gradient-bg text-white px-4 py-2 rounded text-sm font-medium"> | |
| Generate <i class="fas fa-arrow-right ml-1"></i> | |
| </button> | |
| </div> | |
| <div class="mt-6"> | |
| <h3 class="text-white font-medium mb-4">Results</h3> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-3"> | |
| <div class="bg-gray-700 rounded-lg aspect-square flex items-center justify-center text-gray-500"> | |
| <i class="fas fa-image text-2xl"></i> | |
| </div> | |
| <div class="bg-gray-700 rounded-lg aspect-square flex items-center justify-center text-gray-500"> | |
| <i class="fas fa-image text-2xl"></i> | |
| </div> | |
| <div class="bg-gray-700 rounded-lg aspect-square flex items-center justify-center text-gray-500"> | |
| <i class="fas fa-image text-2xl"></i> | |
| </div> | |
| <div class="bg-gray-700 rounded-lg aspect-square flex items-center justify-center text-gray-500"> | |
| <i class="fas fa-image text-2xl"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Pricing Section --> | |
| <div id="pricing" class="bg-white py-12"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="lg:text-center mb-12"> | |
| <h2 class="text-base gradient-text font-semibold tracking-wide uppercase">Pricing</h2> | |
| <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl"> | |
| Choose Your Plan | |
| </p> | |
| <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto"> | |
| Flexible pricing options for creators of all levels. | |
| </p> | |
| </div> | |
| <div class="mt-10 space-y-12 lg:space-y-0 lg:grid lg:grid-cols-3 lg:gap-x-8"> | |
| <!-- Basic Plan --> | |
| <div class="card-hover relative p-8 bg-white border border-gray-200 rounded-2xl shadow-sm flex flex-col"> | |
| <div class="flex-1"> | |
| <h3 class="text-xl font-semibold text-gray-900">Basic</h3> | |
| <p class="mt-4 flex items-baseline text-gray-900"> | |
| <span class="text-5xl font-extrabold tracking-tight">$19</span> | |
| <span class="ml-1 text-xl font-semibold">/month</span> | |
| </p> | |
| <p class="mt-6 text-gray-500">Perfect for getting started with AI content creation.</p> | |
| <ul role="list" class="mt-6 space-y-4"> | |
| <li class="flex"> | |
| <i class="fas fa-check text-purple-500 mt-1 mr-2"></i> | |
| <span class="text-gray-500">100 generations/month</span> | |
| </li> | |
| <li class="flex"> | |
| <i class="fas fa-check text-purple-500 mt-1 mr-2"></i> | |
| <span class="text-gray-500">5 LoRA slots</span> | |
| </li> | |
| <li class="flex"> | |
| <i class="fas fa-check text-purple-500 mt-1 mr-2"></i> | |
| <span class="text-gray-500">Basic workflows</span> | |
| </li> | |
| <li class="flex"> | |
| <i class="fas fa-check text-purple-500 mt-1 mr-2"></i> | |
| <span class="text-gray-500">Community support</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <a href="#" class="mt-8 block w-full py-3 px-6 border border-transparent rounded-md text-center font-medium gradient-bg text-white hover:opacity-90"> | |
| Get started | |
| </a> | |
| </div> | |
| <!-- Pro Plan --> | |
| <div class="card-hover relative p-8 bg-white border-2 border-purple-500 rounded-2xl shadow-xl flex flex-col transform scale-105 z-10"> | |
| <div class="absolute top-0 right-0 -mt-4 -mr-4 px-3 py-1 bg-purple-500 text-white text-xs font-bold rounded-full">POPULAR</div> | |
| <div class="flex-1"> | |
| <h3 class="text-xl font-semibold text-gray-900">Pro</h3> | |
| <p class="mt-4 flex items-baseline text-gray-900"> | |
| <span class="text-5xl font-extrabold tracking-tight">$49</span> | |
| <span class="ml-1 text-xl font-semibold">/month</span> | |
| </p> | |
| <p class="mt-6 text-gray-500">For serious creators who need more power.</p> | |
| <ul role="list" class="mt-6 space-y-4"> | |
| <li class="flex"> | |
| <i class="fas fa-check text-purple-500 mt-1 mr-2"></i> | |
| <span class="text-gray-500">500 generations/month</span> | |
| </li> | |
| <li class="flex"> | |
| <i class="fas fa-check text-purple-500 mt-1 mr-2"></i> | |
| <span class="text-gray-500">20 LoRA slots</span> | |
| </li> | |
| <li class="flex"> | |
| <i class="fas fa-check text-purple-500 mt-1 mr-2"></i> | |
| <span class="text-gray-500">Advanced workflows</span> | |
| </li> | |
| <li class="flex"> | |
| <i class="fas fa-check text-purple-500 mt-1 mr-2"></i> | |
| <span class="text-gray-500">Priority support</span> | |
| </li> | |
| <li class="flex"> | |
| <i class="fas fa-check text-purple-500 mt-1 mr-2"></i> | |
| <span class="text-gray-500">Commercial license</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <a href="#" class="mt-8 block w-full py-3 px-6 border border-transparent rounded-md text-center font-medium gradient-bg text-white hover:opacity-90"> | |
| Get started | |
| </a> | |
| </div> | |
| <!-- Enterprise Plan --> | |
| <div class="card-hover relative p-8 bg-white border border-gray-200 rounded-2xl shadow-sm flex flex-col"> | |
| <div class="flex-1"> | |
| <h3 class="text-xl font-semibold text-gray-900">Enterprise</h3> | |
| <p class="mt-4 flex items-baseline text-gray-900"> | |
| <span class="text-5xl font-extrabold tracking-tight">$199</span> | |
| <span class="ml-1 text-xl font-semibold">/month</span> | |
| </p> | |
| <p class="mt-6 text-gray-500">For professional studios and agencies.</p> | |
| <ul role="list" class="mt-6 space-y-4"> | |
| <li class="flex"> | |
| <i class="fas fa-check text-purple-500 mt-1 mr-2"></i> | |
| <span class="text-gray-500">Unlimited generations</span> | |
| </li> | |
| <li class="flex"> | |
| <i class="fas fa-check text-purple-500 mt-1 mr-2"></i> | |
| <span class="text-gray-500">Unlimited LoRA slots</span> | |
| </li> | |
| <li class="flex"> | |
| <i class="fas fa-check text-purple-500 mt-1 mr-2"></i> | |
| <span class="text-gray-500">Custom workflows</span> | |
| </li> | |
| <li class="flex"> | |
| <i class="fas fa-check text-purple-500 mt-1 mr-2"></i> | |
| <span class="text-gray-500">24/7 dedicated support</span> | |
| </li> | |
| <li class="flex"> | |
| <i class="fas fa-check text-purple-500 mt-1 mr-2"></i> | |
| <span class="text-gray-500">White-label options</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <a href="#" class="mt-8 block w-full py-3 px-6 border border-transparent rounded-md text-center font-medium gradient-bg text-white hover:opacity-90"> | |
| Get started | |
| </a> | |
| </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 creating with AI.PIMP.IO 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-purple-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-600 bg-opacity-60 hover:bg-opacity-70"> | |
| Learn more | |
| </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">Home</a> | |
| </div> | |
| <div class="px-5 py-2"> | |
| <a href="#features" class="text-base text-gray-500 hover:text-gray-900">Features</a> | |
| </div> | |
| <div class="px-5 py-2"> | |
| <a href="#interface" class="text-base text-gray-500 hover:text-gray-900">Interface</a> | |
| </div> | |
| <div class="px-5 py-2"> | |
| <a href="#pricing" class="text-base text-gray-500 hover:text-gray-900">Pricing</a> | |
| </div> | |
| <div class="px-5 py-2"> | |
| <a href="#" class="text-base text-gray-500 hover:text-gray-900">Docs</a> | |
| </div> | |
| <div class="px-5 py-2"> | |
| <a href="#" class="text-base text-gray-500 hover:text-gray-900">Privacy</a> | |
| </div> | |
| <div class="px-5 py-2"> | |
| <a href="#" class="text-base text-gray-500 hover:text-gray-900">Terms</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">Twitter</span> | |
| <i class="fab fa-twitter"></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">GitHub</span> | |
| <i class="fab fa-github"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-gray-500"> | |
| <span class="sr-only">Discord</span> | |
| <i class="fab fa-discord"></i> | |
| </a> | |
| </div> | |
| <p class="mt-8 text-center text-base text-gray-400"> | |
| © 2023 AI.PIMP.IO. All rights reserved. | |
| </p> | |
| </div> | |
| </footer> | |
| <script> | |
| // Mobile menu toggle | |
| document.querySelector('[aria-controls="mobile-menu"]').addEventListener('click', function() { | |
| const menu = document.getElementById('mobile-menu'); | |
| menu.classList.toggle('hidden'); | |
| }); | |
| // Smooth scrolling for anchor links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| const targetId = this.getAttribute('href'); | |
| if (targetId === '#') return; | |
| const targetElement = document.querySelector(targetId); | |
| if (targetElement) { | |
| targetElement.scrollIntoView({ | |
| behavior: 'smooth' | |
| }); | |
| // Close mobile menu if open | |
| const mobileMenu = document.getElementById('mobile-menu'); | |
| if (!mobileMenu.classList.contains('hidden')) { | |
| mobileMenu.classList.add('hidden'); | |
| } | |
| } | |
| }); | |
| }); | |
| // Interface tab switching | |
| const interfaceTabs = document.querySelectorAll('.interface-tab'); | |
| interfaceTabs.forEach(tab => { | |
| tab.addEventListener('click', function() { | |
| interfaceTabs.forEach(t => t.classList.remove('active')); | |
| this.classList.add('active'); | |
| }); | |
| }); | |
| </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=bigckck/ccigantool" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |