Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Factorio2Stack SpaceAge - Transform Interplanetary Factories into Cloud Applications</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"> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| industrial: { | |
| 100: '#e5e7eb', | |
| 200: '#d1d5db', | |
| 300: '#9ca3af', | |
| 400: '#6b7280', | |
| 500: '#4b5563', | |
| 600: '#374151', | |
| 700: '#1f2937', | |
| 800: '#151a25', | |
| 900: '#0d1117', | |
| }, | |
| circuit: { | |
| 50: '#f0fdfa', | |
| 100: '#ccfbf1', | |
| 200: '#99f6e4', | |
| 300: '#5eead4', | |
| 400: '#2dd4bf', | |
| 500: '#14b8a6', | |
| 600: '#0d9488', | |
| 700: '#0f766e', | |
| 800: '#115e59', | |
| 900: '#134e4a', | |
| }, | |
| copper: { | |
| 50: '#fafaf9', | |
| 100: '#f5f5f4', | |
| 200: '#e7e5e4', | |
| 300: '#d6d3d1', | |
| 400: '#a8a29e', | |
| 500: '#78716c', | |
| 600: '#57534e', | |
| 700: '#44403c', | |
| 800: '#292524', | |
| 900: '#1c1917', | |
| }, | |
| coal: '#18181b', | |
| factory: '#ef4444', | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Exo+2:wght@400;500;600;700;800&family=Orbitron:wght@400;500;600;700&display=swap'); | |
| * { | |
| font-family: 'Exo 2', sans-serif; | |
| } | |
| .orbitron { | |
| font-family: 'Orbitron', sans-serif; | |
| letter-spacing: 1px; | |
| } | |
| .bg-circuit-pattern { | |
| background-image: radial-gradient(#0f766e 0.5px, transparent 0.5px), radial-gradient(#0f766e 0.5px, #0d1117 0.5px); | |
| background-size: 20px 20px; | |
| background-position: 0 0, 10px 10px; | |
| } | |
| .assembly-line { | |
| background-image: repeating-linear-gradient(45deg, #292524 0px, #292524 5px, #3f3b38 5px, #3f3b38 10px); | |
| } | |
| .transform-card { | |
| transition: all 0.4s ease; | |
| border: 1px solid #0f766e; | |
| box-shadow: 0 0 10px rgba(20, 184, 166, 0.2); | |
| } | |
| .transform-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 25px rgba(20, 184, 166, 0.4); | |
| } | |
| .code-snippet { | |
| position: relative; | |
| border-radius: 8px; | |
| overflow: hidden; | |
| background: linear-gradient(145deg, #1a1e28, #151a25); | |
| font-family: 'Courier New', monospace; | |
| box-shadow: inset 0 0 10px rgba(0,0,0,0.5); | |
| } | |
| .code-snippet:before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 3px; | |
| height: 100%; | |
| background: linear-gradient(to bottom, #10b981, #3b82f6); | |
| } | |
| .bordered-grid { | |
| background-image: | |
| linear-gradient(#0f766e 1px, transparent 1px), | |
| linear-gradient(90deg, #0f766e 1px, transparent 1px); | |
| background-size: 30px 30px; | |
| } | |
| .blinking-cursor { | |
| animation: blink 1s infinite; | |
| } | |
| @keyframes blink { | |
| 0%, 100% { opacity: 1; } | |
| 50% { opacity: 0; } | |
| } | |
| @keyframes float { | |
| 0% { transform: translateY(0px); } | |
| 50% { transform: translateY(-10px); } | |
| 100% { transform: translateY(0px); } | |
| } | |
| .floating { | |
| animation: float 6s ease-in-out infinite; | |
| } | |
| .blueprint-grid { | |
| background-image: | |
| linear-gradient(rgba(15, 118, 110, 0.1) 1px, transparent 1px), | |
| linear-gradient(90deg, rgba(15, 118, 110, 0.1) 1px, transparent 1px); | |
| background-size: 20px 20px; | |
| } | |
| .blueprint-grid-overlay { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background-image: | |
| linear-gradient(rgba(15, 118, 110, 0.1) 1px, transparent 1px), | |
| linear-gradient(90deg, rgba(15, 118, 110, 0.1) 1px, transparent 1px); | |
| background-size: 20px 20px; | |
| pointer-events: none; | |
| mix-blend-mode: overlay; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-industrial-900 text-industrial-100"> | |
| <!-- Navigation --> | |
| <nav class="border-b border-industrial-700 bg-industrial-800 backdrop-blur-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 items-center py-4 md:py-3"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 flex items-center"> | |
| <div class="bg-circuit-500 h-10 w-10 rounded flex items-center justify-center mr-2"> | |
| <i class="fas fa-microchip text-industrial-900 text-xl"></i> | |
| </div> | |
| <h1 class="orbitron text-xl md:text-2xl font-bold bg-gradient-to-r from-circuit-400 to-green-400 bg-clip-text text-transparent">Factorio2Stack</h1> | |
| </div> | |
| </div> | |
| <div class="hidden md:block"> | |
| <div class="ml-10 flex items-baseline space-x-6"> | |
| <a href="#" class="text-industrial-200 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Features</a> | |
| <a href="#" class="text-industrial-200 hover:text-white px-3 py-2 rounded-md text-sm font-medium">How It Works</a> | |
| <a href="#" class="text-industrial-200 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Pricing</a> | |
| <a href="#" class="text-industrial-200 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Showcase</a> | |
| </div> | |
| </div> | |
| <div class="flex items-center"> | |
| <button class="hidden md:block mr-4 orbitron text-circuit-400 hover:text-circuit-300 font-medium text-sm">Sign In</button> | |
| <button class="bg-circuit-600 hover:bg-circuit-500 text-white orbitron px-4 py-2 rounded-md text-sm font-medium transition duration-300">Sign Up Free</button> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section class="relative bg-industrial-900 overflow-hidden"> | |
| <div class="absolute inset-0 bg-[url('https://cdn.factorio.com/assets/img/web/factorio-cover-gds-2019-rgb.jpg')] bg-cover bg-center blur-sm opacity-20"></div> | |
| <div class="blueprint-grid-overlay"></div> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 md:py-28"> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center"> | |
| <div> | |
| <div class="inline-block bg-industrial-700 px-4 py-1 rounded-full mb-4"> | |
| <span class="text-xs orbitron tracking-wider text-circuit-400">AI-POWERED TRANSFORMATION</span> | |
| </div> | |
| <h1 class="text-4xl md:text-5xl lg:text-6xl font-extrabold tracking-tight text-white orbitron"> | |
| Transform <span class="text-circuit-400">Interplanetary</span> Factories<br> | |
| Into <span class="text-purple-400">Cloud-Native</span> Systems | |
| </h1> | |
| <p class="mt-6 text-lg text-industrial-300 max-w-2xl"> | |
| Our AI platform converts Space Age factories across planets into distributed cloud applications with native mod support. Maintain orbital synchronization between your game and production systems. | |
| </p> | |
| <div class="mt-10 flex flex-col sm:flex-row gap-4"> | |
| <button class="bg-circuit-600 hover:bg-circuit-500 text-white orbitron px-8 py-4 rounded-md font-medium text-lg transition duration-300"> | |
| Convert Your Base Now | |
| <i class="fas fa-arrow-right ml-2"></i> | |
| </button> | |
| <button class="bg-industrial-700 hover:bg-industrial-600 text-white orbitron px-8 py-4 rounded-md font-medium text-lg transition duration-300"> | |
| <i class="fab fa-youtube mr-2 text-red-400"></i> | |
| Watch Demo | |
| </button> | |
| </div> | |
| </div> | |
| <div class="relative"> | |
| <div class="bg-industrial-800 border border-industrial-700 rounded-xl p-8 transform-card floating"> | |
| <div class="flex justify-between mb-4"> | |
| <div class="text-sm font-medium text-industrial-400 orbitron">FACTORIO FACTORY</div> | |
| <div class="text-circuit-500"> | |
| <i class="fas fa-factory"></i> | |
| <i class="fas fa-exchange-alt mx-4"></i> | |
| <i class="fas fa-laptop-code"></i> | |
| </div> | |
| <div class="text-sm font-medium text-industrial-400 orbitron">WEB APPLICATION</div> | |
| </div> | |
| <div class="relative rounded-lg overflow-hidden bg-industrial-900 border border-industrial-700 h-64"> | |
| <div class="blueprint-grid h-full flex items-center justify-center"> | |
| <div class="text-center"> | |
| <div class="mb-3 mx-auto flex items-center justify-center"> | |
| <div class="h-16 w-16 rounded-full bg-circuit-800 flex items-center justify-center"> | |
| <i class="fas fa-robot text-circuit-400 text-2xl"></i> | |
| </div> | |
| </div> | |
| <div class="orbitron text-circuit-400">Drop your Factorio blueprint string here</div> | |
| <div class="text-xs text-industrial-500 mt-2">Or click to upload your save file</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-6 grid grid-cols-4 gap-4 text-center text-xs text-industrial-500 orbitron"> | |
| <div class="bg-industrial-800 border border-industrial-700 rounded py-2">Mega Base</div> | |
| <div class="bg-industrial-800 border border-industrial-700 rounded py-2">City Block</div> | |
| <div class="bg-industrial-800 border border-industrial-700 rounded py-2">Bot Network</div> | |
| <div class="bg-industrial-800 border border-industrial-700 rounded py-2">Nauvis Base</div> | |
| <div class="bg-industrial-800 border border-industrial-700 rounded py-2">Orbital Platform</div> | |
| <div class="bg-industrial-800 border border-industrial-700 rounded py-2">Interplanetary Network</div> | |
| </div> | |
| </div> | |
| <div class="absolute -top-4 -right-4 bg-circuit-700 text-white px-6 py-2 rounded-full orbitron"> | |
| <i class="fas fa-bolt mr-1 text-yellow-300"></i> REAL-TIME | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Transformation Process --> | |
| <section class="py-20 bg-industrial-800 relative"> | |
| <div class="absolute inset-0 bg-circuit-pattern opacity-5"></div> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative"> | |
| <div class="text-center mb-16"> | |
| <h2 class="orbitron text-3xl md:text-4xl font-bold text-white mb-4">Seamless <span class="text-circuit-400">Transformation</span> Process</h2> | |
| <p class="text-industrial-300 max-w-2xl mx-auto">Our proprietary conversion technology preserves your factory logic while adapting it to modern web architectures.</p> | |
| </div> | |
| <div class="flex flex-col md:flex-row justify-center items-center"> | |
| <!-- Step 1 --> | |
| <div class="flex flex-col items-center w-64 transform-card p-8 border border-industrial-700 rounded-xl bg-industrial-900"> | |
| <div class="w-16 h-16 rounded-full bg-circuit-800 flex items-center justify-center mb-6"> | |
| <span class="text-circuit-400 text-2xl">1</span> | |
| </div> | |
| <h3 class="orbitron text-white text-xl mb-3">Blueprint Analysis</h3> | |
| <p class="text-industrial-400 text-center text-sm">Upload your Factorio blueprint. Our AI analyzes logistics, automation, and production chains.</p> | |
| </div> | |
| <!-- Arrow --> | |
| <div class="py-10 md:py-0 md:px-6 text-circuit-500"> | |
| <i class="fas fa-arrow-right fa-2x"></i> | |
| </div> | |
| <!-- Step 2 --> | |
| <div class="flex flex-col items-center w-64 transform-card p-8 border border-industrial-700 rounded-xl bg-industrial-900"> | |
| <div class="w-16 h-16 rounded-full bg-circuit-800 flex items-center justify-center mb-6"> | |
| <span class="text-circuit-400 text-2xl">2</span> | |
| </div> | |
| <h3 class="orbitron text-white text-xl mb-3">Architecture Mapping</h3> | |
| <p class="text-industrial-400 text-center text-sm">Belts become APIs, assemblers transform into microservices, and logistics bots turn into message queues.</p> | |
| </div> | |
| <!-- Arrow --> | |
| <div class="py-10 md:py-0 md:px-6 text-circuit-500"> | |
| <i class="fas fa-arrow-right fa-2x"></i> | |
| </div> | |
| <!-- Step 3 --> | |
| <div class="flex flex-col items-center w-64 transform-card p-8 border border-industrial-700 rounded-xl bg-industrial-900"> | |
| <div class="w-16 h-16 rounded-full bg-circuit-800 flex items-center justify-center mb-6"> | |
| <span class="text-circuit-400 text-2xl">3</span> | |
| </div> | |
| <h3 class="orbitron text-white text-xl mb-3">Code Generation</h3> | |
| <p class="text-industrial-400 text-center text-sm">Get production-ready code in your choice of stack: React/Vue frontend with Node/Django backend.</p> | |
| </div> | |
| </div> | |
| <!-- Two-way Transformation --> | |
| <div class="mt-16 max-w-4xl mx-auto border border-industrial-700 rounded-xl bg-industrial-850 overflow-hidden"> | |
| <div class="p-6 md:p-8"> | |
| <div class="flex items-center"> | |
| <div class="bg-circuit-900 p-3 rounded-lg mr-4"> | |
| <i class="fas fa-exchange-alt fa-2x text-circuit-500"></i> | |
| </div> | |
| <div> | |
| <h3 class="orbitron text-white text-xl">Bi-Directional Conversion</h3> | |
| <p class="text-industrial-400 mt-2">After making changes to your application, convert it back to Factorio with updated blueprints. Keep your factory evolving!</p> | |
| </div> | |
| </div> | |
| <div class="mt-8 grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div class="code-snippet p-6"> | |
| <div class="text-xs text-industrial-500 mb-2">// Your Factorio Blueprint</div> | |
| <div class="text-industrial-300 text-sm"> | |
| <div>"blueprint": {</div> | |
| <div class="ml-4">"item": "blueprint",</div> | |
| <div class="ml-4">"label": "Main Bus Design",</div> | |
| <div class="ml-4">"entities": [</div> | |
| <div class="ml-6">{</div> | |
| <div class="ml-8">"entity_number": 1,</div> | |
| <div class="ml-8">"name": "assembling-machine-2",</div> | |
| <div class="ml-8">"position": { "x": 25.5, "y": -16 }</div> | |
| <div class="ml-6">},</div> | |
| <div class="ml-6">...</div> | |
| <div class="ml-4">]</div> | |
| <div>}</div> | |
| </div> | |
| </div> | |
| <div class="code-snippet p-6"> | |
| <div class="text-xs text-industrial-500 mb-2">// Generated React Component</div> | |
| <div class="text-industrial-300 text-sm"> | |
| <div>import React from 'react';</div> | |
| <div>import AssemblyLine from './AssemblyLine';</div><br> | |
| <div>const MainBusDesign = () => (</div> | |
| <div class="ml-4"><div className="main-bus"></div> | |
| <div class="ml-8"><AssemblyLine</div> | |
| <div class="ml-12">machineType="assembler-2"</div> | |
| <div class="ml-12">position={{ x: 25.5, y: -16 }}</div> | |
| <div class="ml-12">inputItems={['iron-plate', 'copper-plate']}</div> | |
| <div class="ml-12">outputItem="electronic-circuit"</div> | |
| <div class="ml-8">/></div> | |
| <div class="ml-4"></div></div> | |
| <div>);</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Power Features --> | |
| <section class="py-20 bg-industrial-900"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16"> | |
| <h2 class="orbitron text-3xl md:text-4xl font-bold text-white mb-4">Factory <span class="text-circuit-400">Automation</span> Features</h2> | |
| <p class="text-industrial-300 max-w-2xl mx-auto">Advanced capabilities that bridge the gap between factory design and software development</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <!-- Feature 1 --> | |
| <div class="transform-card bg-industrial-850 border border-industrial-700 rounded-xl p-8"> | |
| <div class="w-12 h-12 rounded-md bg-circuit-800 flex items-center justify-center mb-6"> | |
| <i class="fas fa-sync-alt text-circuit-400 text-xl"></i> | |
| </div> | |
| <h3 class="orbitron text-white text-xl mb-3">Real-Time Sync</h3> | |
| <p class="text-industrial-400 mb-4">Connect Factorio to your development environment. Changes in-game instantly reflect in your app's codebase.</p> | |
| <div class="bg-industrial-800 p-3 rounded-lg text-sm text-industrial-500 orbitron"> | |
| <span class="text-circuit-400">✓</span> Auto-commit to GitHub/GitLab | |
| </div> | |
| </div> | |
| <!-- Feature 2 --> | |
| <div class="transform-card bg-industrial-850 border border-industrial-700 rounded-xl p-8"> | |
| <div class="w-12 h-12 rounded-md bg-circuit-800 flex items-center justify-center mb-6"> | |
| <i class="fas fa-dna text-circuit-400 text-xl"></i> | |
| </div> | |
| <h3 class="orbitron text-white text-xl mb-3">Circuit Network API</h3> | |
| <p class="text-industrial-400 mb-4">Convert your circuit network conditions into API endpoints and webhook triggers automatically.</p> | |
| <div class="bg-industrial-800 p-3 rounded-lg text-sm text-industrial-500 orbitron"> | |
| <span class="text-circuit-400">✓</span> REST & GraphQL Support | |
| </div> | |
| </div> | |
| <!-- Feature 3 --> | |
| <div class="transform-card bg-industrial-850 border border-industrial-700 rounded-xl p-8"> | |
| <div class="w-12 h-12 rounded-md bg-circuit-800 flex items-center justify-center mb-6"> | |
| <i class="fas fa-server text-circuit-400 text-xl"></i> | |
| </div> | |
| <h3 class="orbitron text-white text-xl mb-3">Logistics Integration</h3> | |
| <p class="text-industrial-400 mb-4">Your robotic logistics network becomes a scalable microservices architecture with optimized routing.</p> | |
| <div class="bg-industrial-800 p-3 rounded-lg text-sm text-industrial-500 orbitron"> | |
| <span class="text-circuit-400">✓</span> Kubernetes/Docker Support | |
| </div> | |
| </div> | |
| <!-- Feature 4 --> | |
| <div class="transform-card bg-industrial-850 border border-industrial-700 rounded-xl p-8 relative overflow-hidden"> | |
| <div class="absolute inset-0 bg-[url('https://cdn.factorio.com/assets/img/blog/fff-373-platform-static-2240.png')] bg-cover bg-center opacity-20 blur-[1px]"></div> | |
| <div class="relative"> | |
| <div class="w-12 h-12 rounded-md bg-purple-900 flex items-center justify-center mb-6"> | |
| <i class="fas fa-rocket text-purple-400 text-xl"></i> | |
| </div> | |
| <h3 class="orbitron text-white text-xl mb-3">Interplanetary Systems</h3> | |
| <p class="text-industrial-400 mb-4">Space platforms become geo-distributed cloud regions with automatic interplanetary failover and latency optimization.</p> | |
| <div class="bg-industrial-800 p-3 rounded-lg text-sm text-industrial-500 orbitron"> | |
| <span class="text-purple-400">✓</span> Multi-Cloud Deployment | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Feature 5 - Mod Support --> | |
| <div class="transform-card bg-industrial-850 border border-industrial-700 rounded-xl p-8"> | |
| <div class="w-12 h-12 rounded-md bg-yellow-900 flex items-center justify-center mb-6"> | |
| <i class="fas fa-puzzle-piece text-yellow-400 text-xl"></i> | |
| </div> | |
| <h3 class="orbitron text-white text-xl mb-3">Enterprise Mod Support</h3> | |
| <p class="text-industrial-400 mb-4">Convert modded components into custom cloud services with full documentation and API generation.</p> | |
| <div class="bg-industrial-800 p-3 rounded-lg text-sm text-industrial-500 orbitron"> | |
| <span class="text-yellow-400">✓</span> Mod-to-Microservice Mapping | |
| </div> | |
| </div> | |
| <!-- Feature 6 - Space Logistics --> | |
| <div class="transform-card bg-industrial-850 border border-industrial-700 rounded-xl p-8"> | |
| <div class="w-12 h-12 rounded-md bg-blue-900 flex items-center justify-center mb-6"> | |
| <i class="fas fa-satellite-dish text-blue-400 text-xl"></i> | |
| </div> | |
| <h3 class="orbitron text-white text-xl mb-3">Orbital Networking</h3> | |
| <p class="text-industrial-400 mb-4">Space elevators and orbital logistics become global CDN endpoints and data synchronization services.</p> | |
| <div class="bg-industrial-800 p-3 rounded-lg text-sm text-industrial-500 orbitron"> | |
| <span class="text-blue-400">✓</span> Interplanetary Data Sync | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-16 bg-industrial-850 border border-industrial-700 rounded-xl overflow-hidden relative group"> | |
| <div class="absolute inset-0 bg-[url('https://i.redd.it/9lgryea3xf3e1.png')] bg-cover bg-center opacity-20 group-hover:opacity-30 transition-opacity duration-500"></div> | |
| <div class="absolute inset-0 bg-gradient-to-b from-industrial-900/30 via-industrial-900/70 to-industrial-900/90"></div> | |
| <div class="relative z-10"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-10 items-center"> | |
| <div class="p-8"> | |
| <div class="flex items-center mb-6"> | |
| <div class="bg-circuit-600 p-2 rounded-lg mr-4"> | |
| <i class="fas fa-server text-white text-xl"></i> | |
| </div> | |
| <div class="orbitron text-white text-xl md:text-2xl">Enterprise-Grade <span class="text-circuit-400">Space Infrastructure</span></div> | |
| </div> | |
| <p class="text-industrial-300 mb-6">We transform your factory components into robust cloud infrastructure:</p> | |
| <ul class="space-y-3"> | |
| <li class="flex items-center"> | |
| <div class="w-5 h-5 rounded-full bg-circuit-500 flex items-center justify-center mr-3"> | |
| <i class="fas fa-check text-xs text-industrial-900"></i> | |
| </div> | |
| <span class="text-industrial-300">Train networks → Message queues (RabbitMQ/Kafka)</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <div class="w-5 h-5 rounded-full bg-circuit-500 flex items-center justify-center mr-3"> | |
| <i class="fas fa-check text-xs text-industrial-900"></i> | |
| </div> | |
| <span class="text-industrial-300">Smelting arrays → Data processing pipelines</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <div class="w-5 h-5 rounded-full bg-circuit-500 flex items-center justify-center mr-3"> | |
| <i class="fas fa-check text-xs text-industrial-900"></i> | |
| </div> | |
| <span class="text-industrial-300">Power plants → Serverless function platforms</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="w-5 h-5 rounded-full bg-circuit-500 flex items-center justify-center mr-3 mt-1"> | |
| <i class="fas fa-check text-xs text-industrial-900"></i> | |
| </div> | |
| <span class="text-industrial-300">Combinators → Business logic modules with automatic documentation</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="w-5 h-5 rounded-full bg-purple-500 flex items-center justify-center mr-3 mt-1"> | |
| <i class="fas fa-check text-xs text-industrial-900"></i> | |
| </div> | |
| <span class="text-industrial-300">Space platforms → Geo-distributed cloud regions with automatic interplanetary sync</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="w-5 h-5 rounded-full bg-yellow-500 flex items-center justify-center mr-3 mt-1"> | |
| <i class="fas fa-check text-xs text-industrial-900"></i> | |
| </div> | |
| <span class="text-industrial-300">Modded components → Custom cloud services with full API docs</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="w-5 h-5 rounded-full bg-blue-500 flex items-center justify-center mr-3 mt-1"> | |
| <i class="fas fa-check text-xs text-industrial-900"></i> | |
| </div> | |
| <span class="text-industrial-300">Space elevators → Global CDN endpoints with edge caching</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="p-8 bg-industrial-900/50 border-l border-industrial-700 h-full flex items-center justify-center backdrop-blur-sm hover:backdrop-blur-md transition-all duration-300"> | |
| <div class="relative"> | |
| <div class="absolute inset-0 bordered-grid"></div> | |
| <div class="relative flex space-x-6 transform-card p-6 rounded-lg bg-industrial-900/70 border border-circuit-500/30 hover:border-circuit-500/50 transition-all duration-300"> | |
| <div class="text-center"> | |
| <div class="w-20 h-20 rounded-md bg-gradient-to-br from-circuit-700 to-circuit-900 flex flex-col items-center justify-center mb-3 mx-auto"> | |
| <i class="fas fa-train text-circuit-300 text-2xl mb-1"></i> | |
| <span class="text-[8px] orbitron text-circuit-400 uppercase tracking-wider">Train Network</span> | |
| </div> | |
| </div> | |
| <div class="flex items-center justify-center"> | |
| <div class="w-12 h-12 rounded-full bg-circuit-800 flex items-center justify-center animate-pulse"> | |
| <i class="fas fa-exchange-alt text-circuit-400 text-lg"></i> | |
| </div> | |
| </div> | |
| <div class="text-center"> | |
| <div class="w-20 h-20 rounded-md bg-gradient-to-br from-purple-700 to-purple-900 flex flex-col items-center justify-center mb-3 mx-auto"> | |
| <i class="fas fa-broadcast-tower text-purple-300 text-2xl mb-1"></i> | |
| <span class="text-[8px] orbitron text-purple-400 uppercase tracking-wider">Message Queue</span> | |
| </div> | |
| </div> | |
| <div class="absolute -bottom-2 left-1/2 -translate-x-1/2"> | |
| <div class="text-[6px] orbitron text-circuit-500 bg-industrial-800 px-2 py-1 rounded-full"> | |
| <i class="fas fa-bolt text-yellow-400 mr-1"></i> Kafka/RabbitMQ | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CTA Section --> | |
| <section class="py-24 bg-circuit-800 relative overflow-hidden"> | |
| <div class="absolute inset-0 bg-circuit-pattern opacity-10"></div> | |
| <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center relative"> | |
| <h2 class="orbitron text-3xl md:text-4xl font-bold text-white mb-4">Start Converting Your Factory</h2> | |
| <p class="text-industrial-200 text-lg max-w-2xl mx-auto mb-10"> | |
| Join thousands of engineers deploying interplanetary systems from their Space Age factories. Enterprise plans include full mod support and custom cloud integrations. | |
| </p> | |
| <div class="flex flex-col sm:flex-row justify-center gap-4"> | |
| <button class="bg-industrial-900 hover:bg-industrial-800 text-white orbitron px-8 py-4 rounded-md font-medium text-lg transition duration-300"> | |
| Free Conversion | |
| <i class="fas fa-play ml-2"></i> | |
| </button> | |
| <button class="bg-white hover:bg-industrial-100 text-circuit-800 orbitron px-8 py-4 rounded-md font-medium text-lg transition duration-300"> | |
| Enterprise Solutions | |
| <i class="fas fa-building ml-2"></i> | |
| </button> | |
| </div> | |
| <div class="mt-12 inline-flex items-center text-industrial-200 text-sm orbitron"> | |
| <i class="fas fa-infinity text-xl mr-2 text-circuit-400"></i> Unlimited planets • Full mod support • Enterprise API access • Interplanetary sync | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-industrial-950 pt-16 pb-12 border-t border-industrial-800"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="grid grid-cols-1 md:grid-cols-5 gap-8 mb-12"> | |
| <div class="col-span-2"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-circuit-500 h-8 w-8 rounded flex items-center justify-center mr-2"> | |
| <i class="fas fa-microchip text-industrial-900 text-lg"></i> | |
| </div> | |
| <h1 class="orbitron text-xl font-bold bg-gradient-to-r from-circuit-400 to-green-400 bg-clip-text text-transparent">Factorio2Stack</h1> | |
| </div> | |
| <p class="text-industrial-500 text-sm max-w-xs"> | |
| Transforming digital factories and space platforms into real-world applications since 2023. | |
| </p> | |
| <div class="flex space-x-4 mt-4"> | |
| <a href="#" class="text-industrial-500 hover:text-circuit-400"><i class="fab fa-github fa-lg"></i></a> | |
| <a href="#" class="text-industrial-500 hover:text-circuit-400"><i class="fab fa-discord fa-lg"></i></a> | |
| <a href="#" class="text-industrial-500 hover:text-circuit-400"><i class="fab fa-twitter fa-lg"></i></a> | |
| <a href="#" class="text-industrial-500 hover:text-circuit-400"><i class="fab fa-youtube fa-lg"></i></a> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 class="orbitron text-industrial-300 text-lg mb-4">Product</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-industrial-500 hover:text-industrial-300 text-sm">Features</a></li> | |
| <li><a href="#" class="text-industrial-500 hover:text-industrial-300 text-sm">How It Works</a></li> | |
| <li><a href="#" class="text-industrial-500 hover:text-industrial-300 text-sm">Pricing</a></li> | |
| <li><a href="#" class="text-industrial-500 hover:text-industrial-300 text-sm">Integrations</a></li> | |
| <li><a href="#" class="text-industrial-500 hover:text-industrial-300 text-sm">API</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="orbitron text-industrial-300 text-lg mb-4">Resources</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-industrial-500 hover:text-industrial-300 text-sm">Documentation</a></li> | |
| <li><a href="#" class="text-industrial-500 hover:text-industrial-300 text-sm">Community</a></li> | |
| <li><a href="#" class="text-industrial-500 hover:text-industrial-300 text-sm">Case Studies</a></li> | |
| <li><a href="#" class="text-industrial-500 hover:text-industrial-300 text-sm">Blog</a></li> | |
| <li><a href="#" class="text-industrial-500 hover:text-industrial-300 text-sm">Support</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="orbitron text-industrial-300 text-lg mb-4">Legal</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-industrial-500 hover:text-industrial-300 text-sm">Privacy</a></li> | |
| <li><a href="#" class="text-industrial-500 hover:text-industrial-300 text-sm">Terms</a></li> | |
| <li><a href="#" class="text-industrial-500 hover:text-industrial-300 text-sm">Cookie Policy</a></li> | |
| <li><a href="#" class="text-industrial-500 hover:text-industrial-300 text-sm">Security</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="border-t border-industrial-800 pt-8 flex flex-col md:flex-row justify-between items-center"> | |
| <p class="text-industrial-600 text-sm mb-4 md:mb-0">© 2023 Factorio2Stack. Not affiliated with Wube Software.</p> | |
| <div class="flex items-center"> | |
| <span class="text-industrial-600 text-sm orbitron mr-2">MADE WITH</span> | |
| <i class="fas fa-heart text-red-400 mx-1"></i> | |
| <i class="fas fa-microchip text-circuit-400 mx-1"></i> | |
| <i class="fas fa-tools text-copper-500 mx-1"></i> | |
| <span class="text-industrial-600 text-sm orbitron ml-2">IN FACTORIES</span> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <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=kamilr98/factorio2stack" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |