Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Pixelcut | Free AI Photo Editor</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> | |
| .dropzone { | |
| border: 2px dashed #9CA3AF; | |
| border-radius: 0.75rem; | |
| transition: all 0.3s ease; | |
| } | |
| .dropzone:hover { | |
| border-color: #6366F1; | |
| background-color: rgba(99, 102, 241, 0.05); | |
| } | |
| .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); | |
| } | |
| .testimonial-card:hover { | |
| transform: scale(1.03); | |
| } | |
| </style> | |
| </head> | |
| <body class="font-sans antialiased text-gray-800"> | |
| <!-- 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-cut text-indigo-600 text-2xl mr-2"></i> | |
| <span class="text-xl font-bold text-indigo-600">Pixelcut</span> | |
| </div> | |
| </div> | |
| <div class="hidden md:ml-6 md:flex md:items-center md:space-x-8"> | |
| <a href="#" class="text-gray-900 hover:text-indigo-600 px-3 py-2 text-sm font-medium">Features</a> | |
| <a href="#" class="text-gray-900 hover:text-indigo-600 px-3 py-2 text-sm font-medium">Pricing</a> | |
| <a href="#" class="text-gray-900 hover:text-indigo-600 px-3 py-2 text-sm font-medium">Templates</a> | |
| <a href="#" class="text-gray-900 hover:text-indigo-600 px-3 py-2 text-sm font-medium">Resources</a> | |
| </div> | |
| <div class="hidden md:ml-6 md:flex md:items-center"> | |
| <a href="#" class="text-gray-900 hover:text-indigo-600 px-3 py-2 text-sm font-medium">Log in</a> | |
| <a href="https://pixelcut.onelink.me/JLTg/3uqha6k0" class="ml-4 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">Download App</a> | |
| </div> | |
| <div class="-mr-2 flex items-center md: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"> | |
| <span class="sr-only">Open main menu</span> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <div class="bg-gradient-to-r from-indigo-50 to-purple-50 py-16"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="lg:grid lg:grid-cols-2 lg:gap-8 items-center"> | |
| <div class="mb-12 lg:mb-0"> | |
| <h1 class="text-4xl md:text-5xl font-bold text-gray-900 mb-6">Your on-demand designer</h1> | |
| <p class="text-xl text-gray-600 mb-8">Pixelcut gets the job done—better and faster than ever.</p> | |
| <div class="dropzone p-12 text-center cursor-pointer mb-8"> | |
| <i class="fas fa-cloud-upload-alt text-4xl text-indigo-500 mb-4"></i> | |
| <p class="text-lg font-medium text-gray-700 mb-2">Upload or drop images here</p> | |
| <p class="text-sm text-gray-500">PNG, JPG, GIF up to 25MB - Original quality saved, no signup required</p> | |
| </div> | |
| <a href="https://pixelcut.onelink.me/JLTg/3uqha6k0" class="inline-flex items-center px-6 py-3 border border-transparent text-base 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-download mr-2"></i> Download App | |
| </a> | |
| </div> | |
| <div class="relative"> | |
| <img src="https://cdn3.pixelcut.app/web/home-page-image-examples.png" alt="Pixelcut examples" class="rounded-xl shadow-2xl"> | |
| <div class="absolute -bottom-6 -left-6 bg-white p-4 rounded-lg shadow-lg hidden md:block"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-indigo-100 p-2 rounded-full"> | |
| <i class="fas fa-magic text-indigo-600"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-sm font-medium text-gray-900">AI Magic</p> | |
| <p class="text-xs text-gray-500">50M+ edits</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Trusted By Section --> | |
| <div class="bg-white py-12"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <p class="text-center text-sm font-semibold uppercase text-gray-500 tracking-wider mb-8">Trusted by creatives at</p> | |
| <div class="grid grid-cols-2 gap-8 md:grid-cols-6 lg:grid-cols-11"> | |
| <div class="col-span-1 flex justify-center"> | |
| <img class="h-12" src="https://cdn3.pixelcut.app/web/partners-logos/adidas.svg" alt="Adidas"> | |
| </div> | |
| <div class="col-span-1 flex justify-center"> | |
| <img class="h-12" src="https://cdn3.pixelcut.app/web/partners-logos/airbnb.svg" alt="Airbnb"> | |
| </div> | |
| <div class="col-span-1 flex justify-center"> | |
| <img class="h-12" src="https://cdn3.pixelcut.app/web/partners-logos/apple.svg" alt="Apple"> | |
| </div> | |
| <div class="col-span-1 flex justify-center"> | |
| <img class="h-12" src="https://cdn3.pixelcut.app/web/partners-logos/chanel.svg" alt="Chanel"> | |
| </div> | |
| <div class="col-span-1 flex justify-center"> | |
| <img class="h-12" src="https://cdn3.pixelcut.app/web/partners-logos/google.svg" alt="Google"> | |
| </div> | |
| <div class="col-span-1 flex justify-center md:col-span-2 lg:col-span-1"> | |
| <img class="h-12" src="https://cdn3.pixelcut.app/web/partners-logos/gucci-v1.svg" alt="Gucci"> | |
| </div> | |
| <div class="col-span-1 flex justify-center"> | |
| <img class="h-12" src="https://cdn3.pixelcut.app/web/partners-logos/h&m.svg" alt="H&M"> | |
| </div> | |
| <div class="col-span-1 flex justify-center"> | |
| <img class="h-12" src="https://cdn3.pixelcut.app/web/partners-logos/nike-v1.svg" alt="Nike"> | |
| </div> | |
| <div class="col-span-1 flex justify-center"> | |
| <img class="h-12" src="https://cdn3.pixelcut.app/web/partners-logos/sephora.svg" alt="Sephora"> | |
| </div> | |
| <div class="col-span-1 flex justify-center"> | |
| <img class="h-12" src="https://cdn3.pixelcut.app/web/partners-logos/starbucks.svg" alt="Starbucks"> | |
| </div> | |
| <div class="col-span-1 flex justify-center"> | |
| <img class="h-12" src="https://cdn3.pixelcut.app/web/partners-logos/toyota.svg" alt="Toyota"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Features Section --> | |
| <div class="bg-gray-50 py-16"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">Edit to perfection</h2> | |
| <p class="mt-4 max-w-2xl text-xl text-gray-600 mx-auto"> | |
| Instantly edit your photos with AI. You can easily remove backgrounds, retouch any part of your image, expand the image in any direction, or upscale the image. | |
| </p> | |
| </div> | |
| <div class="grid md:grid-cols-2 gap-12"> | |
| <!-- Feature 1 --> | |
| <div class="feature-card bg-white p-8 rounded-xl shadow-md transition duration-300 ease-in-out"> | |
| <div class="flex items-center mb-6"> | |
| <div class="flex-shrink-0 bg-indigo-100 p-3 rounded-lg"> | |
| <i class="fas fa-edit text-indigo-600 text-xl"></i> | |
| </div> | |
| <h3 class="ml-4 text-xl font-bold text-gray-900">Edit to perfection</h3> | |
| </div> | |
| <p class="text-gray-600 mb-6"> | |
| We've designed the editing experience to bring the most common editing tasks to the surface while also giving you the freedom to edit your images with infinite possibilities with a prompt. | |
| </p> | |
| <img src="https://cdn3.pixelcut.app/web/home-value-props/edit.jpg" alt="Edit example" class="rounded-lg"> | |
| </div> | |
| <!-- Feature 2 --> | |
| <div class="feature-card bg-white p-8 rounded-xl shadow-md transition duration-300 ease-in-out"> | |
| <div class="flex items-center mb-6"> | |
| <div class="flex-shrink-0 bg-purple-100 p-3 rounded-lg"> | |
| <i class="fas fa-video text-purple-600 text-xl"></i> | |
| </div> | |
| <h3 class="ml-4 text-xl font-bold text-gray-900">Make videos</h3> | |
| </div> | |
| <p class="text-gray-600 mb-6"> | |
| Create a high quality video from a single prompt or image! Simply describe your scene or upload an image as a start frame and we'll generate a high quality video for you in a matter of minutes. | |
| </p> | |
| <img src="https://cdn3.pixelcut.app/web/home-value-props/video.jpg" alt="Video example" class="rounded-lg"> | |
| </div> | |
| <!-- Feature 3 --> | |
| <div class="feature-card bg-white p-8 rounded-xl shadow-md transition duration-300 ease-in-out"> | |
| <div class="flex items-center mb-6"> | |
| <div class="flex-shrink-0 bg-blue-100 p-3 rounded-lg"> | |
| <i class="fas fa-image text-blue-600 text-xl"></i> | |
| </div> | |
| <h3 class="ml-4 text-xl font-bold text-gray-900">Generate images</h3> | |
| </div> | |
| <p class="text-gray-600 mb-6"> | |
| Turn your ideas into images in seconds. And it doesn't stop there – you can also use images as references to generate more images! Simply describe your image or upload a reference image. | |
| </p> | |
| <img src="https://cdn3.pixelcut.app/web/home-value-props/image.jpg" alt="Image generation example" class="rounded-lg"> | |
| </div> | |
| <!-- Feature 4 --> | |
| <div class="feature-card bg-white p-8 rounded-xl shadow-md transition duration-300 ease-in-out"> | |
| <div class="flex items-center mb-6"> | |
| <div class="flex-shrink-0 bg-green-100 p-3 rounded-lg"> | |
| <i class="fas fa-users text-green-600 text-xl"></i> | |
| </div> | |
| <h3 class="ml-4 text-xl font-bold text-gray-900">Collaborate</h3> | |
| </div> | |
| <p class="text-gray-600 mb-6"> | |
| Creating and editing is just the first half of the creative journey – collaborating is the second half. Create shared folders so that you and your team can generate and edit together. | |
| </p> | |
| <img src="https://cdn3.pixelcut.app/web/home-value-props/home-value-prop-collaborate.jpg" alt="Collaboration example" class="rounded-lg"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Gallery Section --> | |
| <div class="bg-white py-16"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">Millions of images created every day</h2> | |
| </div> | |
| <img src="https://cdn3.pixelcut.app/web/home-page-image-examples.png" alt="Creative examples" class="rounded-xl shadow-lg w-full"> | |
| </div> | |
| </div> | |
| <!-- Testimonials --> | |
| <div class="bg-indigo-50 py-16"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">Join 50M+ creators, brands, and businesses</h2> | |
| </div> | |
| <div class="grid md:grid-cols-3 gap-8"> | |
| <!-- Testimonial 1 --> | |
| <div class="testimonial-card bg-white p-6 rounded-lg shadow-md transition duration-300 ease-in-out"> | |
| <div class="flex items-center mb-4"> | |
| <div class="flex-shrink-0 bg-indigo-100 p-2 rounded-full"> | |
| <i class="fas fa-star text-indigo-600"></i> | |
| </div> | |
| <h3 class="ml-3 text-lg font-medium text-gray-900">My favorite app</h3> | |
| </div> | |
| <p class="text-gray-600 mb-4"> | |
| "Great app, easy to use. Helps our small business save time and money to create different marketing materials professionally. Thank you." | |
| </p> | |
| <p class="text-sm font-medium text-gray-900">Shaelyn D.</p> | |
| </div> | |
| <!-- Testimonial 2 --> | |
| <div class="testimonial-card bg-white p-6 rounded-lg shadow-md transition duration-300 ease-in-out"> | |
| <div class="flex items-center mb-4"> | |
| <div class="flex-shrink-0 bg-indigo-100 p-2 rounded-full"> | |
| <i class="fas fa-cut text-indigo-600"></i> | |
| </div> | |
| <h3 class="ml-3 text-lg font-medium text-gray-900">Best background remover</h3> | |
| </div> | |
| <p class="text-gray-600 mb-4"> | |
| "I need a good background remover for my work and I've been through them all it feels like. This one is the best by far. It's so easy to use and the results always look amazing." | |
| </p> | |
| <p class="text-sm font-medium text-gray-900">Kira H.</p> | |
| </div> | |
| <!-- Testimonial 3 --> | |
| <div class="testimonial-card bg-white p-6 rounded-lg shadow-md transition duration-300 ease-in-out"> | |
| <div class="flex items-center mb-4"> | |
| <div class="flex-shrink-0 bg-indigo-100 p-2 rounded-full"> | |
| <i class="fas fa-heart text-indigo-600"></i> | |
| </div> | |
| <h3 class="ml-3 text-lg font-medium text-gray-900">Love it</h3> | |
| </div> | |
| <p class="text-gray-600 mb-4"> | |
| "It's amazingly easy and gives the perfect results for my bags and accessories. It looks like it was done by a professional photographer." | |
| </p> | |
| <p class="text-sm font-medium text-gray-900">Mary J.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- CTA Section --> | |
| <div class="bg-indigo-700 py-16"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center"> | |
| <h2 class="text-3xl font-extrabold text-white sm:text-4xl mb-6">Start creating for free</h2> | |
| <p class="mt-4 max-w-2xl text-xl text-indigo-100 mx-auto mb-8"> | |
| Pixelcut is the one place for all your creative work. Over 50 million creators, brands and businesses have trusted us to be their creative workspace, and we hope you're next. | |
| </p> | |
| <div class="flex flex-col sm:flex-row justify-center gap-4"> | |
| <a href="#" class="inline-flex items-center justify-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-indigo-700 bg-white hover:bg-indigo-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-white"> | |
| <i class="fas fa-play-circle mr-2"></i> Watch Demo | |
| </a> | |
| <a href="https://pixelcut.onelink.me/JLTg/3uqha6k0" class="inline-flex items-center justify-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-indigo-800 hover:bg-indigo-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"> | |
| <i class="fas fa-download mr-2"></i> Download Now | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Footer --> | |
| <footer class="bg-gray-800"> | |
| <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8"> | |
| <div class="grid grid-cols-2 md:grid-cols-5 gap-8"> | |
| <div class="col-span-2"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-cut text-indigo-400 text-2xl mr-2"></i> | |
| <span class="text-xl font-bold text-white">Pixelcut</span> | |
| </div> | |
| <p class="mt-4 text-sm text-gray-300"> | |
| The all-in-one AI creative workspace for generating, editing and collaborating on images and videos. | |
| </p> | |
| <div class="mt-6 flex space-x-6"> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i class="fab fa-facebook"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i class="fab fa-instagram"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i class="fab fa-linkedin"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-sm font-semibold text-white tracking-wider uppercase">Product</h3> | |
| <ul class="mt-4 space-y-2"> | |
| <li><a href="#" class="text-sm text-gray-300 hover:text-white">Features</a></li> | |
| <li><a href="#" class="text-sm text-gray-300 hover:text-white">Pricing</a></li> | |
| <li><a href="#" class="text-sm text-gray-300 hover:text-white">Templates</a></li> | |
| <li><a href="#" class="text-sm text-gray-300 hover:text-white">Apps</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-sm font-semibold text-white tracking-wider uppercase">Resources</h3> | |
| <ul class="mt-4 space-y-2"> | |
| <li><a href="#" class="text-sm text-gray-300 hover:text-white">Blog</a></li> | |
| <li><a href="#" class="text-sm text-gray-300 hover:text-white">Guides</a></li> | |
| <li><a href="#" class="text-sm text-gray-300 hover:text-white">Help Center</a></li> | |
| <li><a href="#" class="text-sm text-gray-300 hover:text-white">API</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-sm font-semibold text-white tracking-wider uppercase">Company</h3> | |
| <ul class="mt-4 space-y-2"> | |
| <li><a href="#" class="text-sm text-gray-300 hover:text-white">About</a></li> | |
| <li><a href="#" class="text-sm text-gray-300 hover:text-white">Careers</a></li> | |
| <li><a href="#" class="text-sm text-gray-300 hover:text-white">Privacy</a></li> | |
| <li><a href="#" class="text-sm text-gray-300 hover:text-white">Terms</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="mt-12 border-t border-gray-700 pt-8 flex flex-col md:flex-row justify-between"> | |
| <p class="text-sm text-gray-400"> | |
| © 2025 Pixelcut, Inc. All rights reserved. | |
| </p> | |
| <div class="mt-4 md:mt-0 flex space-x-6"> | |
| <a href="#" class="text-sm text-gray-400 hover:text-white">Privacy Policy</a> | |
| <a href="#" class="text-sm text-gray-400 hover:text-white">Terms of Service</a> | |
| <a href="#" class="text-sm text-gray-400 hover:text-white">Cookie Policy</a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Simple animation for feature cards on scroll | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const featureCards = document.querySelectorAll('.feature-card'); | |
| const observer = new IntersectionObserver((entries) => { | |
| entries.forEach(entry => { | |
| if (entry.isIntersecting) { | |
| entry.target.style.opacity = '1'; | |
| entry.target.style.transform = 'translateY(0)'; | |
| } | |
| }); | |
| }, { threshold: 0.1 }); | |
| featureCards.forEach(card => { | |
| card.style.opacity = '0'; | |
| card.style.transform = 'translateY(20px)'; | |
| card.style.transition = 'all 0.5s ease'; | |
| observer.observe(card); | |
| }); | |
| // Dropzone interaction | |
| const dropzone = document.querySelector('.dropzone'); | |
| if (dropzone) { | |
| dropzone.addEventListener('dragover', (e) => { | |
| e.preventDefault(); | |
| dropzone.classList.add('border-indigo-500', 'bg-indigo-50'); | |
| }); | |
| dropzone.addEventListener('dragleave', () => { | |
| dropzone.classList.remove('border-indigo-500', 'bg-indigo-50'); | |
| }); | |
| dropzone.addEventListener('drop', (e) => { | |
| e.preventDefault(); | |
| dropzone.classList.remove('border-indigo-500', 'bg-indigo-50'); | |
| alert('Files dropped! We support files up to 25MB and save in original quality - no signup needed.'); | |
| }); | |
| dropzone.addEventListener('click', () => { | |
| // Simulate file input click | |
| const input = document.createElement('input'); | |
| input.type = 'file'; | |
| input.accept = 'image/*'; | |
| input.onchange = (e) => { | |
| if (e.target.files.length > 0) { | |
| alert('File selected: ' + e.target.files[0].name + '\n\nWe support files up to 25MB and save in original quality - no signup needed.'); | |
| } | |
| }; | |
| input.click(); | |
| }); | |
| } | |
| }); | |
| </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=Raju0071/pixelcut-2-0" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |