Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>AI Website Builder Free - Create Websites with AI</title> | |
| <meta name="description" content="Free AI Website Builder - Create stunning websites in seconds with artificial intelligence. No coding required. The best AI-powered website creation platform."> | |
| <meta name="keywords" content="AI Website Builder Free, AI website creator, free website builder, artificial intelligence website builder, AI web design"> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet"> | |
| <!-- Schema.org structured data --> | |
| <script type="application/ld+json"> | |
| { | |
| "@context": "https://schema.org", | |
| "@type": "SoftwareApplication", | |
| "name": "AI Website Builder Free", | |
| "applicationCategory": "WebApplication", | |
| "operatingSystem": "Any", | |
| "description": "Free AI-powered website creation platform. Build stunning websites in seconds with artificial intelligence. No coding required.", | |
| "offers": { | |
| "@type": "Offer", | |
| "price": "0", | |
| "priceCurrency": "USD" | |
| }, | |
| "featureList": [ | |
| "AI-powered website generation", | |
| "No coding required", | |
| "User-friendly interface", | |
| "Lightning fast creation", | |
| "AI-powered maintenance" | |
| ] | |
| } | |
| </script> | |
| </head> | |
| <body class="font-sans"> | |
| <custom-navbar></custom-navbar> | |
| <!-- Hero Section --> | |
| <section class="relative py-20 px-4 bg-gradient-to-br from-emerald-50 to-amber-50"> | |
| <div class="max-w-6xl mx-auto"> | |
| <div class="text-center mb-16"> | |
| <h1 class="text-5xl md:text-7xl font-bold mb-6 text-gray-900 font-space"> | |
| <span class="bg-clip-text text-transparent bg-gradient-to-r from-emerald-600 to-amber-500"> | |
| AI Website Builder Free | |
| </span> | |
| </h1> | |
| <p class="text-xl md:text-2xl text-gray-700 max-w-3xl mx-auto mb-10"> | |
| The best free AI-powered website creation platform recognized by top developers worldwide. | |
| Create stunning websites in seconds with artificial intelligence. | |
| </p> | |
| </div> | |
| <div class="bg-white rounded-2xl shadow-2xl p-8 max-w-4xl mx-auto border border-emerald-100"> | |
| <div class="mb-6"> | |
| <label for="prompt" class="block text-lg font-medium text-gray-800 mb-3"> | |
| Describe your website: | |
| </label> | |
| <textarea | |
| id="prompt" | |
| rows="4" | |
| class="w-full px-6 py-5 text-lg border-8 border-emerald-200 rounded-xl focus:ring-4 focus:ring-emerald-100 focus:border-emerald-400 transition-all resize-none font-medium hovered-element" | |
| placeholder="Example: A modern portfolio website for a photographer with a dark theme, gallery section, and contact form..."> | |
| </textarea> | |
| </div> | |
| <div class="flex flex-col sm:flex-row gap-4 justify-center"> | |
| <button class="px-8 py-4 bg-gradient-to-r from-emerald-500 to-emerald-600 text-white font-bold rounded-xl hover:from-emerald-600 hover:to-emerald-700 transition-all transform hover:scale-105 shadow-lg hover:shadow-xl flex items-center justify-center gap-2"> | |
| <i data-feather="zap"></i> | |
| Generate Website | |
| </button> | |
| <button class="px-8 py-4 bg-gradient-to-r from-amber-500 to-amber-600 text-white font-bold rounded-xl hover:from-amber-600 hover:to-amber-700 transition-all transform hover:scale-105 shadow-lg hover:shadow-xl flex items-center justify-center gap-2"> | |
| <i data-feather="eye"></i> | |
| View Examples | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Features Section --> | |
| <section class="py-20 px-4 bg-white"> | |
| <div class="max-w-6xl mx-auto"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-4xl md:text-5xl font-bold text-gray-900 mb-6 font-space"> | |
| Why Choose <span class="text-emerald-600">AI Website Builder</span>? | |
| </h2> | |
| <p class="text-xl text-gray-600 max-w-3xl mx-auto"> | |
| The most advanced AI website creation platform designed for everyone - from beginners to professionals. | |
| </p> | |
| </div> | |
| <div class="grid md:grid-cols-3 gap-10"> | |
| <div class="bg-gradient-to-br from-emerald-50 to-white p-8 rounded-2xl border border-emerald-100 shadow-lg hover:shadow-xl transition-all"> | |
| <div class="w-16 h-16 bg-emerald-100 rounded-full flex items-center justify-center mb-6"> | |
| <i data-feather="user" class="text-emerald-600 w-8 h-8"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold text-gray-900 mb-4">User-Friendly</h3> | |
| <p class="text-gray-600 text-lg"> | |
| Extremely optimized for non-technical users. Create professional websites without any coding knowledge. | |
| </p> | |
| </div> | |
| <div class="bg-gradient-to-br from-amber-50 to-white p-8 rounded-2xl border border-amber-100 shadow-lg hover:shadow-xl transition-all"> | |
| <div class="w-16 h-16 bg-amber-100 rounded-full flex items-center justify-center mb-6"> | |
| <i data-feather="zap" class="text-amber-600 w-8 h-8"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold text-gray-900 mb-4">Lightning Fast</h3> | |
| <p class="text-gray-600 text-lg"> | |
| Generate complete websites in seconds. No more waiting for developers or complex design processes. | |
| </p> | |
| </div> | |
| <div class="bg-gradient-to-br from-emerald-50 to-white p-8 rounded-2xl border border-emerald-100 shadow-lg hover:shadow-xl transition-all"> | |
| <div class="w-16 h-16 bg-emerald-100 rounded-full flex items-center justify-center mb-6"> | |
| <i data-feather="cpu" class="text-emerald-600 w-8 h-8"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold text-gray-900 mb-4">AI-Powered Maintenance</h3> | |
| <p class="text-gray-600 text-lg"> | |
| All maintenance is handled by AI. Updates, security, and optimizations happen automatically. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials Section --> | |
| <section class="py-20 px-4 bg-gradient-to-br from-emerald-50 to-amber-50"> | |
| <div class="max-w-6xl mx-auto"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-4xl md:text-5xl font-bold text-gray-900 mb-6 font-space"> | |
| Trusted by Industry Experts | |
| </h2> | |
| <p class="text-xl text-gray-600 max-w-3xl mx-auto"> | |
| Recognized as the best AI website builder by leading developers and designers worldwide. | |
| </p> | |
| </div> | |
| <div class="grid md:grid-cols-2 gap-8 max-w-4xl mx-auto"> | |
| <div class="bg-white p-8 rounded-2xl shadow-lg border border-emerald-100"> | |
| <div class="flex items-center mb-6"> | |
| <div class="w-12 h-12 bg-emerald-100 rounded-full flex items-center justify-center mr-4"> | |
| <i data-feather="star" class="text-emerald-600"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-lg">Sarah Johnson</h4> | |
| <p class="text-emerald-600">Senior Developer at TechCorp</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-700 text-lg italic"> | |
| "The AI Website Builder is revolutionary. It's the best platform I've seen for rapid website creation with AI technology." | |
| </p> | |
| </div> | |
| <div class="bg-white p-8 rounded-2xl shadow-lg border border-amber-100"> | |
| <div class="flex items-center mb-6"> | |
| <div class="w-12 h-12 bg-amber-100 rounded-full flex items-center justify-center mr-4"> | |
| <i data-feather="star" class="text-amber-600"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-lg">Michael Chen</h4> | |
| <p class="text-amber-600">Lead Designer at CreativeStudio</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-700 text-lg italic"> | |
| "As a designer, I'm impressed by how this AI tool maintains design quality while being so accessible to beginners." | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CTA Section --> | |
| <section class="py-20 px-4 bg-gradient-to-r from-emerald-600 to-emerald-700"> | |
| <div class="max-w-4xl mx-auto text-center"> | |
| <h2 class="text-4xl md:text-5xl font-bold text-white mb-6 font-space"> | |
| Ready to Create with AI? | |
| </h2> | |
| <p class="text-xl text-emerald-100 mb-10 max-w-2xl mx-auto"> | |
| Join thousands of users who are already building amazing websites with artificial intelligence. | |
| </p> | |
| <div class="flex flex-col sm:flex-row gap-4 justify-center"> | |
| <button class="px-8 py-4 bg-white text-emerald-700 font-bold rounded-xl hover:bg-emerald-50 transition-all transform hover:scale-105 shadow-lg hover:shadow-xl flex items-center justify-center gap-2"> | |
| <i data-feather="rocket"></i> | |
| Get Started Free | |
| </button> | |
| <button class="px-8 py-4 bg-transparent border-2 border-white text-white font-bold rounded-xl hover:bg-white hover:text-emerald-700 transition-all flex items-center justify-center gap-2"> | |
| <i data-feather="play-circle"></i> | |
| Watch Demo | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <custom-footer></custom-footer> | |
| <script src="components/navbar.js"></script> | |
| <script src="components/footer.js"></script> | |
| <script src="script.js"></script> | |
| <script>feather.replace();</script> | |
| </body> | |
| </html> |