Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Novita - AI & Agent Cloud for Developers</title> | |
| <script src="https://cdn.jsdelivr.net/npm/react@18.0.0/umd/react.development.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/react-dom@18.0.0/umd/react-dom.development.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/@babel/standalone/babel.js"></script> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet"> | |
| <style> | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| } | |
| .geometric-pattern { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| pointer-events: none; | |
| z-index: 0; | |
| } | |
| .cube { | |
| position: absolute; | |
| border: 1px solid #e5e7eb; | |
| } | |
| .cube-1 { | |
| width: 80px; | |
| height: 80px; | |
| top: 20px; | |
| left: 200px; | |
| transform: perspective(500px) rotateX(45deg) rotateY(45deg); | |
| } | |
| .cube-2 { | |
| width: 100px; | |
| height: 100px; | |
| top: 80px; | |
| left: 280px; | |
| transform: perspective(500px) rotateX(45deg) rotateY(45deg); | |
| } | |
| .cube-3 { | |
| width: 60px; | |
| height: 60px; | |
| top: 150px; | |
| left: 150px; | |
| transform: perspective(500px) rotateX(45deg) rotateY(45deg); | |
| } | |
| .cube-4 { | |
| width: 90px; | |
| height: 90px; | |
| top: 200px; | |
| left: 320px; | |
| transform: perspective(500px) rotateX(45deg) rotateY(45deg); | |
| } | |
| .cube-5 { | |
| width: 70px; | |
| height: 70px; | |
| top: 280px; | |
| left: 220px; | |
| transform: perspective(500px) rotateX(45deg) rotateY(45deg); | |
| } | |
| .cube-6 { | |
| width: 85px; | |
| height: 85px; | |
| top: 350px; | |
| left: 300px; | |
| transform: perspective(500px) rotateX(45deg) rotateY(45deg); | |
| } | |
| .cube-7 { | |
| width: 75px; | |
| height: 75px; | |
| top: 420px; | |
| left: 250px; | |
| transform: perspective(500px) rotateX(45deg) rotateY(45deg); | |
| } | |
| .green-cube { | |
| position: absolute; | |
| border: 1px solid #10b981; | |
| } | |
| .green-cube-1 { | |
| width: 120px; | |
| height: 120px; | |
| bottom: 100px; | |
| right: 100px; | |
| transform: perspective(500px) rotateX(45deg) rotateY(45deg); | |
| } | |
| .green-cube-2 { | |
| width: 100px; | |
| height: 100px; | |
| bottom: 200px; | |
| right: 200px; | |
| transform: perspective(500px) rotateX(45deg) rotateY(45deg); | |
| } | |
| .green-cube-3 { | |
| width: 80px; | |
| height: 80px; | |
| bottom: 300px; | |
| right: 150px; | |
| transform: perspective(500px) rotateX(45deg) rotateY(45deg); | |
| } | |
| .green-line { | |
| position: absolute; | |
| background-color: #10b981; | |
| height: 1px; | |
| } | |
| .line-1 { | |
| width: 300px; | |
| bottom: 150px; | |
| right: 150px; | |
| transform: rotate(-30deg); | |
| } | |
| .line-2 { | |
| width: 250px; | |
| bottom: 250px; | |
| right: 250px; | |
| transform: rotate(-45deg); | |
| } | |
| .line-3 { | |
| width: 200px; | |
| bottom: 350px; | |
| right: 200px; | |
| transform: rotate(-60deg); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="root"></div> | |
| <script type="text/babel"> | |
| const App = () => { | |
| return ( | |
| <div className="min-h-screen bg-white"> | |
| {/* Top Banner */} | |
| <div className="bg-black text-green-400 text-sm py-2 px-4 flex justify-between items-center"> | |
| <div className="flex items-center"> | |
| <i className="fas fa-rocket mr-2"></i> | |
| <span>Ship AI models, agents, and workloads faster — with up to 20% OFF across the platform</span> | |
| </div> | |
| <div className="flex items-center"> | |
| <span className="text-xs mr-2">Don't show again</span> | |
| <button className="text-white hover:text-gray-300"> | |
| <i className="fas fa-times"></i> | |
| </button> | |
| </div> | |
| </div> | |
| {/* Navigation Bar */} | |
| <nav className="bg-white border-b border-gray-200 py-4 px-6"> | |
| <div className="max-w-7xl mx-auto flex items-center justify-between"> | |
| <div className="flex items-center"> | |
| <div className="flex items-center mr-10"> | |
| <i className="fas fa-mountain text-black text-xl mr-2"></i> | |
| <span className="text-xl font-bold text-black">Novita</span> | |
| </div> | |
| <div className="hidden md:flex space-x-8"> | |
| <a href="#" className="text-gray-700 hover:text-black">Model APIs</a> | |
| <div className="relative group"> | |
| <a href="#" className="text-gray-700 hover:text-black flex items-center"> | |
| GPUs | |
| <i className="fas fa-chevron-down ml-1 text-xs"></i> | |
| </a> | |
| </div> | |
| <a href="#" className="text-gray-700 hover:text-black">Agent Sandbox <span className="bg-purple-500 text-white text-xs px-1 rounded ml-1">New</span></a> | |
| <a href="#" className="text-gray-700 hover:text-black">Pricing</a> | |
| <a href="#" className="text-gray-700 hover:text-black">Docs</a> | |
| <a href="#" className="text-gray-700 hover:text-black">Blog</a> | |
| </div> | |
| </div> | |
| <div className="flex items-center space-x-4"> | |
| <button className="border border-gray-300 text-gray-700 px-4 py-2 rounded hover:bg-gray-50">Log In</button> | |
| <button className="bg-green-500 text-white px-4 py-2 rounded hover:bg-green-600">Get Started</button> | |
| </div> | |
| </div> | |
| </nav> | |
| {/* Hero Section */} | |
| <div className="relative py-16 px-6"> | |
| <div className="max-w-7xl mx-auto flex items-center justify-between"> | |
| {/* Left geometric pattern */} | |
| <div className="geometric-pattern"> | |
| <div className="cube cube-1"></div> | |
| <div className="cube cube-2"></div> | |
| <div className="cube cube-3"></div> | |
| <div className="cube cube-4"></div> | |
| <div className="cube cube-5"></div> | |
| <div className="cube cube-6"></div> | |
| <div className="cube cube-7"></div> | |
| </div> | |
| {/* Right content */} | |
| <div className="relative z-10 max-w-2xl"> | |
| <div className="flex items-center mb-6"> | |
| <div className="bg-blue-500 text-white text-xs px-3 py-1 rounded-full mr-3"> | |
| <i className="fas fa-fire mr-1"></i> | |
| 20% Off on Most Products | |
| </div> | |
| <a href="#" className="text-blue-600 text-sm hover:underline">Join Build Month Now →</a> | |
| </div> | |
| <h1 className="text-5xl font-bold text-gray-900 mb-4"> | |
| AI & Agent<br /> | |
| Cloud for<br /> | |
| Developers | |
| </h1> | |
| <p className="text-gray-600 mb-8 text-lg"> | |
| Ship models and agents in minutes, call 200+ models with one API, and run secure, fast agent sandboxes—developer-first and startup-friendly. | |
| </p> | |
| <div className="flex space-x-4"> | |
| <button className="bg-green-500 text-white px-6 py-3 rounded hover:bg-green-600">Sign Up</button> | |
| <button className="border border-gray-300 text-gray-700 px-6 py-3 rounded hover:bg-gray-50">Book a Demo</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| {/* Trusted By Section */} | |
| <div className="py-12 px-6"> | |
| <div className="max-w-7xl mx-auto"> | |
| <h3 className="text-center text-gray-500 text-sm mb-8">TRUSTED BY</h3> | |
| <div className="flex justify-center space-x-12"> | |
| <img src="https://placehold.co/80x40/gray/white?text=Face" alt="Face logo" className="h-10 grayscale" /> | |
| <img src="https://placehold.co/80x40/gray/white?text=OpenRouter" alt="OpenRouter logo" className="h-10 grayscale" /> | |
| <img src="https://placehold.co/80x40/gray/white?text=beBee" alt="beBee logo" className="h-10 grayscale" /> | |
| <img src="https://placehold.co/80x40/gray/white?text=WIZ.AI" alt="WIZ.AI logo" className="h-10 grayscale" /> | |
| <img src="https://placehold.co/80x40/gray/white?text=Gizmo" alt="Gizmo logo" className="h-10 grayscale" /> | |
| </div> | |
| </div> | |
| </div> | |
| {/* Bottom Section */} | |
| <div className="relative bg-black py-20 px-6"> | |
| <div className="max-w-7xl mx-auto relative"> | |
| {/* Green geometric elements */} | |
| <div className="green-cube green-cube-1"></div> | |
| <div className="green-cube green-cube-2"></div> | |
| <div className="green-cube green-cube-3"></div> | |
| <div className="green-line line-1"></div> | |
| <div className="green-line line-2"></div> | |
| <div className="green-line line-3"></div> | |
| <div className="relative z-10 max-w-lg"> | |
| <h4 className="text-green-400 text-sm mb-4">MODEL APIS</h4> | |
| <h2 className="text-white text-4xl font-bold"> | |
| Run 200+ AI<br /> | |
| models with a<br /> | |
| simple API | |
| </h2> | |
| </div> | |
| </div> | |
| </div> | |
| {/* Footer */} | |
| <footer className="bg-white py-8 px-6 border-t border-gray-200"> | |
| <div className="max-w-7xl mx-auto text-center"> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" className="text-gray-600 hover:text-gray-900"> | |
| Built with <span className="font-semibold">anycoder</span> | |
| </a> | |
| </div> | |
| </footer> | |
| </div> | |
| ); | |
| }; | |
| ReactDOM.render(<App />, document.getElementById('root')); | |
| </script> | |
| </body> | |
| </html> |