| | <!DOCTYPE html> |
| | <html lang="en"> |
| | <head> |
| | <meta charset="UTF-8"> |
| | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| | <title>AI Design Studio | Create Websites, Designs & Apps</title> |
| | <script src="https://cdn.tailwindcss.com"></script> |
| | <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"> |
| | <style> |
| | .gradient-bg { |
| | background: linear-gradient(135deg, #6e8efb, #a777e3); |
| | } |
| | .card-hover { |
| | transition: all 0.3s ease; |
| | } |
| | .card-hover:hover { |
| | transform: translateY(-8px) scale(1.02); |
| | box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); |
| | } |
| | .pulse-animation { |
| | animation: pulse 2s infinite; |
| | } |
| | @keyframes pulse { |
| | 0% { transform: scale(1); } |
| | 50% { transform: scale(1.05); } |
| | 100% { transform: scale(1); } |
| | } |
| | .text-gradient { |
| | background: linear-gradient(90deg, #6e8efb, #a777e3); |
| | -webkit-background-clip: text; |
| | -webkit-text-fill-color: transparent; |
| | } |
| | </style> |
| | </head> |
| | <body class="font-sans antialiased bg-gray-50"> |
| | |
| | <nav class="bg-white shadow-sm px-4 sm:px-6 lg:px-8 py-4"> |
| | <div class="max-w-7xl mx-auto flex justify-between items-center"> |
| | <div class="flex items-center space-x-2"> |
| | <i class="fas fa-robot text-2xl text-purple-600"></i> |
| | <span class="text-xl font-bold text-gray-800">AI Design Studio</span> |
| | </div> |
| | <div class="hidden md:flex space-x-8"> |
| | <a href="#features" class="text-gray-600 hover:text-purple-600 transition">Features</a> |
| | <a href="#how-it-works" class="text-gray-600 hover:text-purple-600 transition">How It Works</a> |
| | <a href="#pricing" class="text-gray-600 hover:text-purple-600 transition">Pricing</a> |
| | <a href="#testimonials" class="text-gray-600 hover:text-purple-600 transition">Testimonials</a> |
| | </div> |
| | <button class="md:hidden text-gray-600"> |
| | <i class="fas fa-bars text-xl"></i> |
| | </button> |
| | <div class="hidden md:block"> |
| | <button class="bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-lg font-medium transition"> |
| | Get Started |
| | </button> |
| | </div> |
| | </div> |
| | </nav> |
| |
|
| | |
| | <section class="gradient-bg text-white py-16 sm:py-24"> |
| | <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 grid md:grid-cols-2 gap-12 items-center"> |
| | <div> |
| | <h1 class="text-4xl sm:text-5xl lg:text-6xl font-bold mb-6"> |
| | Create Stunning Digital Experiences |
| | <span class="block">with AI Power</span> |
| | </h1> |
| | <p class="text-lg sm:text-xl mb-8 opacity-90"> |
| | Our AI-powered studio helps you design websites, apps, graphics, and more in minutes, not weeks. Get professional results without any technical skills. |
| | </p> |
| | <div class="flex flex-col sm:flex-row space-y-3 sm:space-y-0 sm:space-x-4"> |
| | <button class="bg-white text-purple-600 hover:bg-gray-100 px-6 py-3 rounded-lg font-bold text-lg transition pulse-animation"> |
| | Start Free Trial <i class="fas fa-arrow-right ml-2"></i> |
| | </button> |
| | <button class="text-white border-2 border-white hover:bg-white hover:bg-opacity-10 px-6 py-3 rounded-lg font-bold text-lg transition"> |
| | Watch Demo <i class="fas fa-play-circle ml-2"></i> |
| | </button> |
| | </div> |
| | <div class="mt-4"> |
| | <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top" class="inline-block"> |
| | <input type="hidden" name="cmd" value="_s-xclick"> |
| | <input type="hidden" name="hosted_button_id" value="YOUR_PAYPAL_BUTTON_ID"> |
| | <input type="hidden" name="business" value="neesmasaed@gmail.com"> |
| | <button type="submit" class="bg-blue-500 hover:bg-blue-600 text-white px-6 py-3 rounded-lg font-bold text-lg transition flex items-center"> |
| | <i class="fab fa-paypal mr-2"></i> Pay with PayPal |
| | </button> |
| | </form> |
| | </div> |
| | </div> |
| | <div class="relative"> |
| | <div class="bg-white rounded-2xl shadow-xl overflow-hidden w-full h-80 sm:h-96"> |
| | <div class="h-8 flex items-center px-3 bg-gray-200"> |
| | <div class="w-3 h-3 rounded-full bg-red-500 mr-2"></div> |
| | <div class="w-3 h-3 rounded-full bg-yellow-500 mr-2"></div> |
| | <div class="w-3 h-3 rounded-full bg-green-500"></div> |
| | </div> |
| | <div class="p-5"> |
| | <div class="flex items-center mb-4"> |
| | <i class="fas fa-square text-blue-500 mr-2"></i> |
| | <h3 class="font-bold text-gray-800">Website Draft</h3> |
| | </div> |
| | <div class="border-2 border-dashed border-gray-300 rounded-lg p-4 h-48 flex items-center justify-center"> |
| | <div class="text-center"> |
| | <i class="fas fa-magic text-4xl text-purple-500 mb-3"></i> |
| | <p class="text-gray-600">AI is generating your design...</p> |
| | </div> |
| | </div> |
| | <div class="flex justify-end mt-4"> |
| | <button class="bg-purple-600 text-white px-3 py-1 rounded text-sm"> |
| | Generate More Options |
| | </button> |
| | </div> |
| | </div> |
| | </div> |
| | <div class="absolute -bottom-6 -left-6 bg-pink-500 w-24 h-24 rounded-full opacity-20"></div> |
| | <div class="absolute -top-6 -right-6 bg-blue-500 w-16 h-16 rounded-full opacity-20"></div> |
| | </div> |
| | </div> |
| | </section> |
| |
|
| | |
| | <section id="features" class="py-16 bg-white"> |
| | <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 sm:text-4xl font-bold mb-4">Powerful AI-Powered Features</h2> |
| | <p class="text-gray-600 max-w-3xl mx-auto"> |
| | Our AI studio offers a complete suite of tools to bring your creative vision to life instantly |
| | </p> |
| | </div> |
| | |
| | <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> |
| | |
| | <div class="bg-gray-50 rounded-xl p-6 card-hover"> |
| | <div class="w-14 h-14 bg-purple-100 rounded-full flex items-center justify-center mb-4"> |
| | <i class="fas fa-code text-purple-600 text-xl"></i> |
| | </div> |
| | <h3 class="text-xl font-bold mb-3">AI Website Builder</h3> |
| | <p class="text-gray-600 mb-4"> |
| | Generate fully functional websites in minutes just by describing what you need. |
| | </p> |
| | <button class="text-purple-600 font-medium flex items-center"> |
| | Learn more <i class="fas fa-chevron-right ml-2 text-sm"></i> |
| | </button> |
| | </div> |
| | |
| | |
| | <div class="bg-gray-50 rounded-xl p-6 card-hover"> |
| | <div class="w-14 h-14 bg-blue-100 rounded-full flex items-center justify-center mb-4"> |
| | <i class="fas fa-paint-brush text-blue-600 text-xl"></i> |
| | </div> |
| | <h3 class="text-xl font-bold mb-3">Smart Graphic Design</h3> |
| | <p class="text-gray-600 mb-4"> |
| | Create stunning logos, banners, and social media graphics with AI guidance. |
| | </p> |
| | <button class="text-blue-600 font-medium flex items-center"> |
| | Learn more <i class="fas fa-chevron-right ml-2 text-sm"></i> |
| | </button> |
| | </div> |
| | |
| | |
| | <div class="bg-gray-50 rounded-xl p-6 card-hover"> |
| | <div class="w-14 h-14 bg-pink-100 rounded-full flex items-center justify-center mb-4"> |
| | <i class="fas fa-mobile-alt text-pink-600 text-xl"></i> |
| | </div> |
| | <h3 class="text-xl font-bold mb-3">App Prototyping</h3> |
| | <p class="text-gray-600 mb-4"> |
| | Turn your app ideas into interactive prototypes without coding. |
| | </p> |
| | <button class="text-pink-600 font-medium flex items-center"> |
| | Learn more <i class="fas fa-chevron-right ml-2 text-sm"></i> |
| | </button> |
| | </div> |
| | |
| | |
| | <div class="bg-gray-50 rounded-xl p-6 card-hover"> |
| | <div class="w-14 h-14 bg-green-100 rounded-full flex items-center justify-center mb-4"> |
| | <i class="fas fa-palette text-green-600 text-xl"></i> |
| | </div> |
| | <h3 class="text-xl font-bold mb-3">Color & Style Generator</h3> |
| | <p class="text-gray-600 mb-4"> |
| | Get automatically generated color palettes and design systems. |
| | </p> |
| | <button class="text-green-600 font-medium flex items-center"> |
| | Learn more <i class="fas fa-chevron-right ml-2 text-sm"></i> |
| | </button> |
| | </div> |
| | |
| | |
| | <div class="bg-gray-50 rounded-xl p-6 card-hover"> |
| | <div class="w-14 h-14 bg-yellow-100 rounded-full flex items-center justify-center mb-4"> |
| | <i class="fas fa-search-dollar text-yellow-600 text-xl"></i> |
| | </div> |
| | <h3 class="text-xl font-bold mb-3">SEO Optimizer</h3> |
| | <p class="text-gray-600 mb-4"> |
| | AI analyzes and improves your content for better search rankings. |
| | </p> |
| | <button class="text-yellow-600 font-medium flex items-center"> |
| | Learn more <i class="fas fa-chevron-right ml-2 text-sm"></i> |
| | </button> |
| | </div> |
| | |
| | |
| | <div class="bg-gray-50 rounded-xl p-6 card-hover"> |
| | <div class="w-14 h-14 bg-red-100 rounded-full flex items-center justify-center mb-4"> |
| | <i class="fas fa-heart text-red-600 text-xl"></i> |
| | </div> |
| | <h3 class="text-xl font-bold mb-3">User Testing AI</h3> |
| | <p class="text-gray-600 mb-4"> |
| | Simulate real user behavior to improve your designs before launch. |
| | </p> |
| | <button class="text-red-600 font-medium flex items-center"> |
| | Learn more <i class="fas fa-chevron-right ml-2 text-sm"></i> |
| | </button> |
| | </div> |
| | </div> |
| | </div> |
| | </section> |
| |
|
| | |
| | <section id="how-it-works" class="py-16 bg-gray-50"> |
| | <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 sm:text-4xl font-bold mb-4">How It Works</h2> |
| | <p class="text-gray-600 max-w-3xl mx-auto"> |
| | Create professional designs in three simple steps with our AI assistant |
| | </p> |
| | </div> |
| | |
| | <div class="grid md:grid-cols-3 gap-8"> |
| | |
| | <div class="text-center"> |
| | <div class="w-20 h-20 bg-purple-600 rounded-full flex items-center justify-center text-white text-2xl font-bold mx-auto mb-6"> |
| | 1 |
| | </div> |
| | <h3 class="text-xl font-bold mb-3">Describe Your Idea</h3> |
| | <p class="text-gray-600"> |
| | Tell our AI what you're looking for using simple text or voice commands. |
| | </p> |
| | </div> |
| | |
| | |
| | <div class="text-center"> |
| | <div class="w-20 h-20 bg-purple-600 rounded-full flex items-center justify-center text-white text-2xl font-bold mx-auto mb-6"> |
| | 2 |
| | </div> |
| | <h3 class="text-xl font-bold mb-3">AI Generates Options</h3> |
| | <p class="text-gray-600"> |
| | Our AI creates multiple design variations tailored to your needs. |
| | </p> |
| | </div> |
| | |
| | |
| | <div class="text-center"> |
| | <div class="w-20 h-20 bg-purple-600 rounded-full flex items-center justify-center text-white text-2xl font-bold mx-auto mb-6"> |
| | 3 |
| | </div> |
| | <h3 class="text-xl font-bold mb-3">Refine & Export</h3> |
| | <p class="text-gray-600"> |
| | Customize your favorite design and download or publish instantly. |
| | </p> |
| | </div> |
| | </div> |
| | |
| | <div class="mt-16 bg-white rounded-xl shadow-lg overflow-hidden max-w-4xl mx-auto"> |
| | <div class="p-8 sm:p-10"> |
| | <div class="flex items-center mb-6"> |
| | <img src="https://randomuser.me/api/portraits/women/33.jpg" alt="User" class="w-12 h-12 rounded-full mr-4"> |
| | <div> |
| | <p class="font-medium">Sarah Johnson</p> |
| | <p class="text-sm text-gray-500">Small Business Owner</p> |
| | </div> |
| | </div> |
| | |
| | <div class="bg-gray-100 rounded-lg p-4 mb-6"> |
| | <p class="font-medium mb-2 text-gray-800">"I need a modern website for my bakery with a gallery, menu, and contact form. Pastel colors, clean layout."</p> |
| | <button class="text-xs bg-purple-600 text-white px-2 py-1 rounded">AI Processing...</button> |
| | </div> |
| | |
| | <div class="grid grid-cols-2 sm:grid-cols-3 gap-4"> |
| | <div class="border-2 border-purple-300 rounded-lg overflow-hidden relative"> |
| | <img src="https://via.placeholder.com/300x200/FAF5FF" alt="Design Option" class="w-full h-32 object-cover"> |
| | <div class="p-2 text-center"> |
| | <p class="text-sm font-medium">Modern Bakery</p> |
| | <button class="text-xs bg-purple-600 text-white mt-1 px-2 py-1 rounded w-full">Select</button> |
| | </div> |
| | </div> |
| | <div class="border rounded-lg overflow-hidden"> |
| | <img src="https://via.placeholder.com/300x200/F5F3FF" alt="Design Option" class="w-full h-32 object-cover"> |
| | <div class="p-2 text-center"> |
| | <p class="text-sm font-medium">Minimalist</p> |
| | <button class="text-xs bg-gray-100 text-gray-800 mt-1 px-2 py-1 rounded w-full">Select</button> |
| | </div> |
| | </div> |
| | <div class="border rounded-lg overflow-hidden"> |
| | <img src="https://via.placeholder.com/300x200/EDE9FE" alt="Design Option" class="w-full h-32 object-cover"> |
| | <div class="p-2 text-center"> |
| | <p class="text-sm font-medium">Vintage Style</p> |
| | <button class="text-xs bg-gray-100 text-gray-800 mt-1 px-2 py-1 rounded w-full">Select</button> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </section> |
| |
|
| | |
| | <section id="pricing" class="py-16 bg-white"> |
| | <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 sm:text-4xl font-bold mb-4">Simple, Transparent Pricing</h2> |
| | <p class="text-gray-600 max-w-3xl mx-auto"> |
| | Choose the plan that fits your needs. No hidden fees, cancel anytime. |
| | </p> |
| | </div> |
| | |
| | <div class="grid sm:grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto"> |
| | |
| | <div class="bg-white border border-gray-200 rounded-xl overflow-hidden shadow-sm card-hover"> |
| | <div class="p-6"> |
| | <h3 class="text-lg font-medium text-gray-900 mb-1">Starter</h3> |
| | <p class="text-gray-500 text-sm mb-6">For individuals getting started</p> |
| | <div class="flex items-baseline"> |
| | <span class="text-4xl font-extrabold">$9</span> |
| | <span class="ml-1 text-xl font-semibold text-gray-500">/mo</span> |
| | </div> |
| | <button class="mt-6 w-full bg-gray-200 hover:bg-gray-300 text-gray-800 py-2 px-4 rounded-lg font-medium transition"> |
| | Get Started |
| | </button> |
| | <ul class="mt-6 space-y-3"> |
| | <li class="flex items-center"> |
| | <i class="fas fa-check text-green-500 mr-2"></i> |
| | <span class="text-gray-600">50 AI Generations</span> |
| | </li> |
| | <li class="flex items-center"> |
| | <i class="fas fa-check text-green-500 mr-2"></i> |
| | <span class="text-gray-600">Basic Websites</span> |
| | </li> |
| | <li class="flex items-center"> |
| | <i class="fas fa-check text-green-500 mr-2"></i> |
| | <span class="text-gray-600">2 Projects</span> |
| | </li> |
| | <li class="flex items-center text-gray-400"> |
| | <i class="fas fa-times text-red-400 mr-2"></i> |
| | <span>No Commercial License</span> |
| | </li> |
| | </ul> |
| | </div> |
| | </div> |
| | |
| | |
| | <div class="bg-white border-2 border-purple-600 rounded-xl overflow-hidden shadow-lg card-hover"> |
| | <div class="p-6"> |
| | <div class="flex justify-between items-start"> |
| | <div> |
| | <h3 class="text-lg font-medium text-gray-900 mb-1">Pro</h3> |
| | <p class="text-gray-500 text-sm mb-6">For freelancers & small teams</p> |
| | </div> |
| | <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-purple-100 text-purple-800"> |
| | Popular |
| | </span> |
| | </div> |
| | <div class="flex items-baseline"> |
| | <span class="text-4xl font-extrabold">$29</span> |
| | <span class="ml-1 text-xl font-semibold text-gray-500">/mo</span> |
| | </div> |
| | <button class="mt-6 w-full bg-purple-600 hover:bg-purple-700 text-white py-2 px-4 rounded-lg font-medium transition"> |
| | Get Started |
| | </button> |
| | <ul class="mt-6 space-y-3"> |
| | <li class="flex items-center"> |
| | <i class="fas fa-check text-green-500 mr-2"></i> |
| | <span class="text-gray-600">500 AI Generations</span> |
| | </li> |
| | <li class="flex items-center"> |
| | <i class="fas fa-check text-green-500 mr-2"></i> |
| | <span class="text-gray-600">Advanced Websites & Apps</span> |
| | </li> |
| | <li class="flex items-center"> |
| | <i class="fas fa-check text-green-500 mr-2"></i> |
| | <span class="text-gray-600">10 Projects</span> |
| | </li> |
| | <li class="flex items-center"> |
| | <i class="fas fa-check text-green-500 mr-2"></i> |
| | <span class="text-gray-600">Commercial License</span> |
| | </li> |
| | </ul> |
| | </div> |
| | </div> |
| | |
| | |
| | <div class="bg-white border border-gray-200 rounded-xl overflow-hidden shadow-sm card-hover"> |
| | <div class="p-6"> |
| | <h3 class="text-lg font-medium text-gray-900 mb-1">Enterprise</h3> |
| | <p class="text-gray-500 text-sm mb-6">For agencies & businesses</p> |
| | <div class="flex items-baseline"> |
| | <span class="text-4xl font-extrabold">$99</span> |
| | <span class="ml-1 text-xl font-semibold text-gray-500">/mo</span> |
| | </div> |
| | <button class="mt-6 w-full bg-gray-200 hover:bg-gray-300 text-gray-800 py-2 px-4 rounded-lg font-medium transition"> |
| | Get Started |
| | </button> |
| | <ul class="mt-6 space-y-3"> |
| | <li class="flex items-center"> |
| | <i class="fas fa-check text-green-500 mr-2"></i> |
| | <span class="text-gray-600">Unlimited Generations</span> |
| | </li> |
| | <li class="flex items-center"> |
| | <i class="fas fa-check text-green-500 mr-2"></i> |
| | <span class="text-gray-600">Premium Templates</span> |
| | </li> |
| | <li class="flex items-center"> |
| | <i class="fas fa-check text-green-500 mr-2"></i> |
| | <span class="text-gray-600">Unlimited Projects</span> |
| | </li> |
| | <li class="flex items-center"> |
| | <i class="fas fa-check text-green-500 mr-2"></i> |
| | <span class="text-gray-600">White-label Options</span> |
| | </li> |
| | </ul> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </section> |
| |
|
| | |
| | <section id="testimonials" class="py-16 bg-gray-50"> |
| | <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 sm:text-4xl font-bold mb-4">What Our Users Say</h2> |
| | <p class="text-gray-600 max-w-3xl mx-auto"> |
| | Join thousands of designers, developers, and creators who use AI Design Studio daily |
| | </p> |
| | </div> |
| | |
| | <div class="grid md:grid-cols-3 gap-8"> |
| | |
| | <div class="bg-white p-6 rounded-xl shadow-sm"> |
| | <div class="flex items-center mb-4"> |
| | <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User" class="w-12 h-12 rounded-full mr-4"> |
| | <div> |
| | <p class="font-medium">Jennifer Smith</p> |
| | <p class="text-sm text-gray-500">Freelance Designer</p> |
| | </div> |
| | </div> |
| | <p class="text-gray-600 mb-4"> |
| | "As a solo designer, AI Design Studio has doubled my productivity. I can now offer more services to my clients without increasing my workload." |
| | </p> |
| | <div class="flex text-yellow-400"> |
| | <i class="fas fa-star"></i> |
| | <i class="fas fa-star"></i> |
| | <i class="fas fa-star"></i> |
| | <i class="fas fa-star"></i> |
| | <i class="fas fa-star"></i> |
| | </div> |
| | </div> |
| | |
| | |
| | <div class="bg-white p-6 rounded-xl shadow-sm"> |
| | <div class="flex items-center mb-4"> |
| | <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User" class="w-12 h-12 rounded-full mr-4"> |
| | <div> |
| | <p class="font-medium">Michael Chen</p> |
| | <p class="text-sm text-gray-500">Startup Founder</p> |
| | </div> |
| | </div> |
| | <p class="text-gray-600 mb-4"> |
| | "We built our entire MVP with AI Design Studio in one weekend. The AI understood exactly the aesthetic we were going for and generated perfect assets." |
| | </p> |
| | <div class="flex text-yellow-400"> |
| | <i class="fas fa-star"></i> |
| | <i class="fas fa-star"></i> |
| | <i class="fas fa-star"></i> |
| | <i class="fas fa-star"></i> |
| | <i class="fas fa-star"></i> |
| | </div> |
| | </div> |
| | |
| | |
| | <div class="bg-white p-6 rounded-xl shadow-sm"> |
| | <div class="flex items-center mb-4"> |
| | <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="User" class="w-12 h-12 rounded-full mr-4"> |
| | <div> |
| | <p class="font-medium">Sarah Williams</p> |
| | <p class="text-sm text-gray-500">Marketing Director</p> |
| | </div> |
| | </div> |
| | <p class="text-gray-600 mb-4"> |
| | "Our social media engagement increased by 300% after using AI Design Studio for our graphics. The AI suggestions were better than anything our agency could create!" |
| | </p> |
| | <div class="flex text-yellow-400"> |
| | <i class="fas fa-star"></i> |
| | <i class="fas fa-star"></i> |
| | <i class="fas fa-star"></i> |
| | <i class="fas fa-star"></i> |
| | <i class="fas fa-star-half-alt"></i> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </section> |
| |
|
| | |
| | <section class="py-16 gradient-bg text-white"> |
| | <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center"> |
| | <h2 class="text-3xl sm:text-4xl font-bold mb-6">Ready to Transform Your Creative Process?</h2> |
| | <p class="text-lg mb-8 opacity-90 mx-auto max-w-2xl"> |
| | Join thousands of designers, developers, and creators who are already working smarter with AI Design Studio. |
| | </p> |
| | <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4"> |
| | <button class="bg-white text-purple-600 hover:bg-gray-100 px-8 py-4 rounded-lg font-bold text-lg transition"> |
| | Start Your Free 14-Day Trial |
| | </button> |
| | <button class="text-white border-2 border-white hover:bg-white hover:bg-opacity-10 px-8 py-4 rounded-lg font-bold text-lg transition"> |
| | Book a Demo |
| | </button> |
| | </div> |
| | <div class="mt-4"> |
| | <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top" class="inline-block"> |
| | <input type="hidden" name="cmd" value="_s-xclick"> |
| | <input type="hidden" name="hosted_button_id" value="YOUR_PAYPAL_BUTTON_ID"> |
| | <input type="hidden" name="business" value="neesmasaed@gmail.com"> |
| | <button type="submit" class="bg-blue-500 hover:bg-blue-600 text-white px-8 py-4 rounded-lg font-bold text-lg transition flex items-center"> |
| | <i class="fab fa-paypal mr-2"></i> Pay with PayPal |
| | </button> |
| | </form> |
| | </div> |
| | <p class="mt-6 text-sm opacity-80"> |
| | No credit card required • Cancel anytime • No installation needed |
| | </p> |
| | </div> |
| | </section> |
| |
|
| | |
| | <footer class="bg-gray-900 text-white py-12"> |
| | <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| | <div class="grid grid-cols-2 md:grid-cols-4 gap-8"> |
| | <div> |
| | <h3 class="text-lg font-bold mb-4">Product</h3> |
| | <ul class="space-y-2"> |
| | <li><a href="#" class="text-gray-400 hover:text-white transition">Features</a></li> |
| | <li><a href="#" class="text-gray-400 hover:text-white transition">Pricing</a></li> |
| | <li><a href="#" class="text-gray-400 hover:text-white transition">Templates</a></li> |
| | <li><a href="#" class="text-gray-400 hover:text-white transition">Integrations</a></li> |
| | </ul> |
| | </div> |
| | <div> |
| | <h3 class="text-lg font-bold mb-4">Resources</h3> |
| | <ul class="space-y-2"> |
| | <li><a href="#" class="text-gray-400 hover:text-white transition">Documentation</a></li> |
| | <li><a href="#" class="text-gray-400 hover:text-white transition">Tutorials</a></li> |
| | <li><a href="#" class="text-gray-400 hover:text-white transition">Blog</a></li> |
| | <li><a href="#" class="text-gray-400 hover:text-white transition">API</a></li> |
| | </ul> |
| | </div> |
| | <div> |
| | <h3 class="text-lg font-bold mb-4">Company</h3> |
| | <ul class="space-y-2"> |
| | <li><a href="#" class="text-gray-400 hover:text-white transition">About</a></li> |
| | <li><a href="#" class="text-gray-400 hover:text-white transition">Careers</a></li> |
| | <li><a href="#" class="text-gray-400 hover:text-white transition">Privacy</a></li> |
| | <li><a href="#" class="text-gray-400 hover:text-white transition">Terms</a></li> |
| | </ul> |
| | </div> |
| | <div> |
| | <h3 class="text-lg font-bold mb-4">Connect</h3> |
| | <ul class="space-y-2"> |
| | <li><a href="#" class="text-gray-400 hover:text-white transition">Twitter</a></li> |
| | <li><a href="#" class="text-gray-400 hover:text-white transition">Instagram</a></li> |
| | <li><a href="#" class="text-gray-400 hover:text-white transition">LinkedIn</a></li> |
| | <li><a href="#" class="text-gray-400 hover:text-white transition">YouTube</a></li> |
| | </ul> |
| | </div> |
| | </div> |
| | <div class="mt-12 pt-8 border-t border-gray-800"> |
| | <div class="flex flex-col md:flex-row justify-between items-center"> |
| | <div class="flex items-center mb-4 md:mb-0"> |
| | <i class="fas fa-robot text-2xl text-purple-400 mr-2"></i> |
| | <span class="text-xl font-bold">AI Design Studio</span> |
| | </div> |
| | <p class="text-sm text-gray-400"> |
| | © 2023 AI Design Studio. All rights reserved. |
| | </p> |
| | </div> |
| | </div> |
| | </div> |
| | </footer> |
| |
|
| | <script> |
| | |
| | document.addEventListener('DOMContentLoaded', function() { |
| | |
| | const cards = document.querySelectorAll('.card-hover'); |
| | cards.forEach(card => { |
| | card.addEventListener('mouseenter', function() { |
| | this.style.boxShadow = '0 10px 15px -3px rgba(0, 0, 0, 0.1)'; |
| | }); |
| | card.addEventListener('mouseleave', function() { |
| | this.style.boxShadow = ''; |
| | }); |
| | }); |
| | |
| | |
| | document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
| | anchor.addEventListener('click', function(e) { |
| | e.preventDefault(); |
| | const target = document.querySelector(this.getAttribute('href')); |
| | if (target) { |
| | window.scrollTo({ |
| | top: target.offsetTop - 80, |
| | behavior: 'smooth' |
| | }); |
| | } |
| | }); |
| | }); |
| | |
| | |
| | const generateBtn = document.querySelectorAll('.bg-purple-600'); |
| | generateBtn.forEach(btn => { |
| | btn.addEventListener('click', function() { |
| | alert('The AI is now generating more design options for you!'); |
| | }); |
| | }); |
| | }); |
| | </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=Nesmaq/aiweb" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| | </html> |
