Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>DesignReplicatorX - AI-Powered Design to Code Transformation</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet"> | |
| <style> | |
| body { font-family: 'Inter', sans-serif; } | |
| .gradient-bg { background: linear-gradient(135deg, #DC2626 0%, #059669 100%); } | |
| .hover-lift:hover { transform: translateY(-2px); transition: all 0.3s ease; } | |
| </style> | |
| </head> | |
| <body class="bg-white text-gray-900"> | |
| <!-- Navigation --> | |
| <nav class="bg-white shadow-sm py-4 px-6 sticky top-0 z-50"> | |
| <div class="max-w-7xl mx-auto flex justify-between items-center"> | |
| <div class="flex items-center space-x-2"> | |
| <div class="w-8 h-8 gradient-bg rounded-lg"></div> | |
| <span class="text-xl font-bold">DesignReplicatorX</span> | |
| </div> | |
| <div class="hidden md:flex space-x-8"> | |
| <a href="#features" class="text-gray-600 hover:text-red-600">Features</a> | |
| <a href="#how-it-works" class="text-gray-600 hover:text-red-600">How It Works</a> | |
| <a href="#pricing" class="text-gray-600 hover:text-red-600">Pricing</a> | |
| <a href="#testimonials" class="text-gray-600 hover:text-red-600">Testimonials</a> | |
| <a href="#contact" class="text-gray-600 hover:text-red-600">Contact</a> | |
| </div> | |
| <div class="flex space-x-4"> | |
| <a href="login.html" class="text-gray-600 hover:text-red-600">Login</a> | |
| <a href="signup.html" class="bg-red-600 text-white px-4 py-2 rounded-lg hover:bg-red-700">Get Started</a> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section class="relative py-20 px-6 bg-gradient-to-br from-gray-50 to-white"> | |
| <div class="max-w-7xl mx-auto text-center"> | |
| <h1 class="text-5xl md:text-6xl font-bold mb-6">Transform Designs into Code with AI</h1> | |
| <p class="text-xl text-gray-600 mb-8 max-w-3xl mx-auto">DesignReplicatorX bridges the gap between designers and developers by automating design-to-code translation with cutting-edge AI technology.</p> | |
| <div class="flex flex-col sm:flex-row gap-4 justify-center"> | |
| <a href="signup.html" class="bg-red-600 text-white px-8 py-3 rounded-lg font-semibold hover:bg-red-700 hover-lift">Start Free Trial</a> | |
| <a href="#features" class="border border-gray-300 text-gray-700 px-8 py-3 rounded-lg font-semibold hover:border-red-600 hover-lift">Learn More</a> | |
| </div> | |
| <div class="mt-12 bg-white rounded-xl shadow-lg p-2 max-w-4xl mx-auto"> | |
| <img src="http://static.photos/technology/1024x576/1" alt="DesignReplicatorX Interface" class="rounded-lg w-full"> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Features Section --> | |
| <section id="features" class="py-20 px-6 bg-white"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-4xl font-bold mb-4">Powerful Features for Modern Teams</h2> | |
| <p class="text-gray-600 text-lg">Everything you need to streamline your design-to-code workflow</p> | |
| </div> | |
| <div class="grid md:grid-cols-3 gap-8"> | |
| <div class="bg-gray-50 p-6 rounded-xl hover-lift"> | |
| <div class="w-12 h-12 gradient-bg rounded-lg mb-4"></div> | |
| <h3 class="text-xl font-semibold mb-2">AI-Powered Analysis</h3> | |
| <p class="text-gray-600">Advanced algorithms extract design elements, structure, and styling with pixel-perfect accuracy.</p> | |
| </div> | |
| <div class="bg-gray-50 p-6 rounded-xl hover-lift"> | |
| <div class="w-12 h-12 gradient-bg rounded-lg mb-4"></div> | |
| <h3 class="text-xl font-semibold mb-2">Multi-Framework Support</h3> | |
| <p class="text-gray-600">Generate clean code for React, Vue, Angular, and more with your preferred CSS approach.</p> | |
| </div> | |
| <div class="bg-gray-50 p-6 rounded-xl hover-lift"> | |
| <div class="w-12 h-12 gradient-bg rounded-lg mb-4"></div> | |
| <h3 class="text-xl font-semibold mb-2">Team Collaboration</h3> | |
| <p class="text-gray-600">Real-time collaboration tools, version control, and project management features.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- How It Works --> | |
| <section id="how-it-works" class="py-20 px-6 bg-gray-50"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-4xl font-bold mb-4">How DesignReplicatorX Works</h2> | |
| <p class="text-gray-600 text-lg">Transform your designs into production-ready code in four simple steps</p> | |
| </div> | |
| <div class="grid md:grid-cols-4 gap-8"> | |
| <div class="text-center"> | |
| <div class="w-16 h-16 gradient-bg rounded-full mx-auto mb-4 flex items-center justify-center text-white text-xl font-bold">1</div> | |
| <h3 class="font-semibold mb-2">Upload Design</h3> | |
| <p class="text-gray-600">Drag and drop your Figma, Sketch, or image files</p> | |
| </div> | |
| <div class="text-center"> | |
| <div class="w-16 h-16 gradient-bg rounded-full mx-auto mb-4 flex items-center justify-center text-white text-xl font-bold">2</div> | |
| <h3 class="font-semibold mb-2">AI Analysis</h3> | |
| <p class="text-gray-600">Our AI analyzes colors, layout, and components</p> | |
| </div> | |
| <div class="text-center"> | |
| <div class="w-16 h-16 gradient-bg rounded-full mx-auto mb-4 flex items-center justify-center text-white text-xl font-bold">3</div> | |
| <h3 class="font-semibold mb-2">Generate Code</h3> | |
| <p class="text-gray-600">Get clean, responsive code in your framework</p> | |
| </div> | |
| <div class="text-center"> | |
| <div class="w-16 h-16 gradient-bg rounded-full mx-auto mb-4 flex items-center justify-center text-white text-xl font-bold">4</div> | |
| <h3 class="font-semibold mb-2">Collaborate & Refine</h3> | |
| <p class="text-gray-600">Share with your team and iterate together</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CTA Section --> | |
| <section class="py-20 px-6 gradient-bg text-white"> | |
| <div class="max-w-4xl mx-auto text-center"> | |
| <h2 class="text-4xl font-bold mb-4">Ready to Revolutionize Your Workflow?</h2> | |
| <p class="text-xl mb-8 opacity-90">Join thousands of developers and designers saving hours every week with DesignReplicatorX</p> | |
| <a href="signup.html" class="bg-white text-red-600 px-8 py-3 rounded-lg font-semibold hover:bg-gray-100 hover-lift inline-block">Start Your Free Trial</a> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900 text-white py-12 px-6"> | |
| <div class="max-w-7xl mx-auto grid md:grid-cols-4 gap-8"> | |
| <div> | |
| <div class="flex items-center space-x-2 mb-4"> | |
| <div class="w-8 h-8 gradient-bg rounded-lg"></div> | |
| <span class="text-xl font-bold">DesignReplicatorX</span> | |
| </div> | |
| <p class="text-gray-400">Transforming designs into code with AI-powered precision.</p> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold mb-4">Product</h4> | |
| <ul class="space-y-2 text-gray-400"> | |
| <li><a href="#features" class="hover:text-white">Features</a></li> | |
| <li><a href="#pricing" class="hover:text-white">Pricing</a></li> | |
| <li><a href="#how-it-works" class="hover:text-white">How It Works</a></li> | |
| <li><a href="#testimonials" class="hover:text-white">Testimonials</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold mb-4">Company</h4> | |
| <ul class="space-y-2 text-gray-400"> | |
| <li><a href="#contact" class="hover:text-white">Contact</a></li> | |
| <li><a href="#" class="hover:text-white">About Us</a></li> | |
| <li><a href="#" class="hover:text-white">Careers</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold mb-4">Legal</h4> | |
| <ul class="space-y-2 text-gray-400"> | |
| <li><a href="#" class="hover:text-white">Privacy Policy</a></li> | |
| <li><a href="#" class="hover:text-white">Terms of Service</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="max-w-7xl mx-auto mt-8 pt-8 border-t border-gray-800 text-center text-gray-400"> | |
| <p>© 2024 DesignReplicatorX. All rights reserved.</p> | |
| </div> | |
| </footer> | |
| <script> | |
| feather.replace(); | |
| </script> | |
| </body> | |
| </html> |