| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>SiteGenAI - AI-Powered Website Builder</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> |
| .gradient-bg { |
| background: linear-gradient(135deg, #6e8efb 0%, #a777e3 100%); |
| } |
| .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); |
| } |
| .pricing-card:hover { |
| transform: scale(1.03); |
| } |
| .hero-image { |
| animation: float 6s ease-in-out infinite; |
| } |
| @keyframes float { |
| 0% { transform: translateY(0px); } |
| 50% { transform: translateY(-20px); } |
| 100% { transform: translateY(0px); } |
| } |
| .testimonial-card { |
| background: rgba(255, 255, 255, 0.1); |
| backdrop-filter: blur(10px); |
| } |
| </style> |
| </head> |
| <body class="font-sans bg-gray-50 text-gray-800"> |
| |
| <nav class="container mx-auto px-6 py-4"> |
| <div class="flex justify-between items-center"> |
| <div class="flex items-center"> |
| <i class="fas fa-robot text-3xl text-purple-600 mr-2"></i> |
| <span class="text-2xl font-bold bg-gradient-to-r from-purple-600 to-blue-500 bg-clip-text text-transparent">SiteGenAI</span> |
| </div> |
| <div class="hidden md:flex space-x-8"> |
| <a href="#features" class="hover:text-purple-600 transition">Features</a> |
| <a href="#how-it-works" class="hover:text-purple-600 transition">How It Works</a> |
| <a href="#pricing" class="hover:text-purple-600 transition">Pricing</a> |
| <a href="#testimonials" class="hover:text-purple-600 transition">Testimonials</a> |
| </div> |
| <div> |
| <button class="bg-purple-600 hover:bg-purple-700 text-white px-6 py-2 rounded-full transition">Get Started</button> |
| </div> |
| <button class="md:hidden"> |
| <i class="fas fa-bars text-2xl"></i> |
| </button> |
| </div> |
| </nav> |
|
|
| |
| <section class="gradient-bg text-white"> |
| <div class="container mx-auto px-6 py-20 md:py-32 flex flex-col md:flex-row items-center"> |
| <div class="md:w-1/2 mb-12 md:mb-0"> |
| <h1 class="text-4xl md:text-6xl font-bold mb-6">Build Stunning Websites <br>With AI in Minutes</h1> |
| <p class="text-xl mb-8 opacity-90">Our AI-powered platform creates beautiful, responsive websites tailored to your needs - no coding required.</p> |
| <div class="flex flex-col sm:flex-row 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-full text-lg font-semibold transition">Try for Free</button> |
| <button class="border-2 border-white hover:bg-white hover:text-purple-600 px-8 py-4 rounded-full text-lg font-semibold transition">Watch Demo</button> |
| </div> |
| <div class="mt-8 flex items-center"> |
| <div class="flex -space-x-2"> |
| <img src="https://randomuser.me/api/portraits/women/12.jpg" class="w-10 h-10 rounded-full border-2 border-white"> |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" class="w-10 h-10 rounded-full border-2 border-white"> |
| <img src="https://randomuser.me/api/portraits/women/45.jpg" class="w-10 h-10 rounded-full border-2 border-white"> |
| </div> |
| <div class="ml-4"> |
| <p class="text-sm">Trusted by 10,000+ businesses</p> |
| <div class="flex"> |
| <i class="fas fa-star text-yellow-400"></i> |
| <i class="fas fa-star text-yellow-400"></i> |
| <i class="fas fa-star text-yellow-400"></i> |
| <i class="fas fa-star text-yellow-400"></i> |
| <i class="fas fa-star text-yellow-400"></i> |
| <span class="ml-2">4.9/5</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| <div class="md:w-1/2 flex justify-center hero-image"> |
| <img src="https://illustrations.popsy.co/amber/web-design.svg" alt="AI generating website" class="w-full max-w-lg"> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="bg-white py-12"> |
| <div class="container mx-auto px-6"> |
| <p class="text-center text-gray-500 mb-8">Trusted by innovative companies worldwide</p> |
| <div class="flex flex-wrap justify-center items-center gap-12"> |
| <img src="https://logo.clearbit.com/slack.com" class="h-8 opacity-60 hover:opacity-100 transition" alt="Slack"> |
| <img src="https://logo.clearbit.com/airbnb.com" class="h-8 opacity-60 hover:opacity-100 transition" alt="Airbnb"> |
| <img src="https://logo.clearbit.com/netflix.com" class="h-8 opacity-60 hover:opacity-100 transition" alt="Netflix"> |
| <img src="https://logo.clearbit.com/uber.com" class="h-8 opacity-60 hover:opacity-100 transition" alt="Uber"> |
| <img src="https://logo.clearbit.com/google.com" class="h-8 opacity-60 hover:opacity-100 transition" alt="Google"> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="features" class="py-20 bg-white"> |
| <div class="container mx-auto px-6"> |
| <div class="text-center mb-16"> |
| <h2 class="text-3xl md:text-4xl font-bold mb-4">Powerful Features</h2> |
| <p class="text-xl text-gray-600 max-w-2xl mx-auto">Everything you need to create a professional website without the hassle</p> |
| </div> |
| |
| <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> |
| |
| <div class="feature-card bg-white p-8 rounded-xl shadow-lg transition duration-300"> |
| <div class="w-14 h-14 gradient-bg rounded-full flex items-center justify-center mb-6"> |
| <i class="fas fa-magic text-white text-2xl"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-3">AI-Powered Design</h3> |
| <p class="text-gray-600">Our advanced AI analyzes your content and preferences to generate beautiful, unique designs tailored just for you.</p> |
| </div> |
| |
| |
| <div class="feature-card bg-white p-8 rounded-xl shadow-lg transition duration-300"> |
| <div class="w-14 h-14 gradient-bg rounded-full flex items-center justify-center mb-6"> |
| <i class="fas fa-mobile-alt text-white text-2xl"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-3">Fully Responsive</h3> |
| <p class="text-gray-600">Every website is automatically optimized for all devices, from desktop to mobile, ensuring perfect display everywhere.</p> |
| </div> |
| |
| |
| <div class="feature-card bg-white p-8 rounded-xl shadow-lg transition duration-300"> |
| <div class="w-14 h-14 gradient-bg rounded-full flex items-center justify-center mb-6"> |
| <i class="fas fa-bolt text-white text-2xl"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-3">Lightning Fast</h3> |
| <p class="text-gray-600">Our optimized code and global CDN ensure your website loads in under 1 second, improving SEO and user experience.</p> |
| </div> |
| |
| |
| <div class="feature-card bg-white p-8 rounded-xl shadow-lg transition duration-300"> |
| <div class="w-14 h-14 gradient-bg rounded-full flex items-center justify-center mb-6"> |
| <i class="fas fa-search text-white text-2xl"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-3">SEO Optimized</h3> |
| <p class="text-gray-600">Built-in SEO tools help your website rank higher in search results with automatic metadata and sitemap generation.</p> |
| </div> |
| |
| |
| <div class="feature-card bg-white p-8 rounded-xl shadow-lg transition duration-300"> |
| <div class="w-14 h-14 gradient-bg rounded-full flex items-center justify-center mb-6"> |
| <i class="fas fa-shopping-cart text-white text-2xl"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-3">E-Commerce Ready</h3> |
| <p class="text-gray-600">Add products, manage inventory, and accept payments with our integrated e-commerce solution.</p> |
| </div> |
| |
| |
| <div class="feature-card bg-white p-8 rounded-xl shadow-lg transition duration-300"> |
| <div class="w-14 h-14 gradient-bg rounded-full flex items-center justify-center mb-6"> |
| <i class="fas fa-chart-line text-white text-2xl"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-3">Analytics Dashboard</h3> |
| <p class="text-gray-600">Track visitor behavior, traffic sources, and conversions with our comprehensive built-in analytics.</p> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="how-it-works" class="py-20 bg-gray-50"> |
| <div class="container mx-auto px-6"> |
| <div class="text-center mb-16"> |
| <h2 class="text-3xl md:text-4xl font-bold mb-4">How SiteGenAI Works</h2> |
| <p class="text-xl text-gray-600 max-w-2xl mx-auto">Create your perfect website in just 3 simple steps</p> |
| </div> |
| |
| <div class="flex flex-col md:flex-row items-center"> |
| <div class="md:w-1/2 mb-12 md:mb-0"> |
| <div class="relative"> |
| <div class="absolute -left-8 top-0 h-full border-l-2 border-dashed border-gray-300"></div> |
| |
| |
| <div class="relative mb-12 pl-8"> |
| <div class="absolute -left-8 top-0 w-6 h-6 rounded-full gradient-bg flex items-center justify-center"> |
| <span class="text-white font-bold">1</span> |
| </div> |
| <h3 class="text-xl font-bold mb-2">Describe Your Needs</h3> |
| <p class="text-gray-600">Tell our AI about your business, preferences, and goals through our simple questionnaire or by chatting with our AI assistant.</p> |
| </div> |
| |
| |
| <div class="relative mb-12 pl-8"> |
| <div class="absolute -left-8 top-0 w-6 h-6 rounded-full gradient-bg flex items-center justify-center"> |
| <span class="text-white font-bold">2</span> |
| </div> |
| <h3 class="text-xl font-bold mb-2">AI Generates Designs</h3> |
| <p class="text-gray-600">Our AI creates multiple design options for you to choose from, each perfectly tailored to your requirements.</p> |
| </div> |
| |
| |
| <div class="relative pl-8"> |
| <div class="absolute -left-8 top-0 w-6 h-6 rounded-full gradient-bg flex items-center justify-center"> |
| <span class="text-white font-bold">3</span> |
| </div> |
| <h3 class="text-xl font-bold mb-2">Customize & Publish</h3> |
| <p class="text-gray-600">Fine-tune your chosen design with our easy-to-use editor, then publish with one click to go live instantly.</p> |
| </div> |
| </div> |
| </div> |
| |
| <div class="md:w-1/2"> |
| <div class="bg-white p-6 rounded-xl shadow-lg"> |
| <img src="https://illustrations.popsy.co/amber/responsive-design.svg" alt="Website creation process" class="w-full"> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-20 bg-white"> |
| <div class="container mx-auto px-6"> |
| <div class="text-center mb-12"> |
| <h2 class="text-3xl md:text-4xl font-bold mb-4">See SiteGenAI in Action</h2> |
| <p class="text-xl text-gray-600 max-w-2xl mx-auto">Watch how quickly you can create a professional website</p> |
| </div> |
| |
| <div class="max-w-4xl mx-auto bg-gray-900 rounded-xl overflow-hidden shadow-2xl"> |
| <div class="relative pt-[56.25%]"> |
| <div class="absolute inset-0 flex items-center justify-center"> |
| <button class="w-20 h-20 rounded-full gradient-bg flex items-center justify-center hover:scale-110 transition"> |
| <i class="fas fa-play text-white text-2xl"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="pricing" class="py-20 bg-gray-50"> |
| <div class="container mx-auto px-6"> |
| <div class="text-center mb-16"> |
| <h2 class="text-3xl md:text-4xl font-bold mb-4">Simple, Transparent Pricing</h2> |
| <p class="text-xl text-gray-600 max-w-2xl mx-auto">No hidden fees. Cancel anytime.</p> |
| </div> |
| |
| <div class="flex justify-center mb-8"> |
| <div class="bg-white p-1 rounded-full shadow-inner"> |
| <button class="px-6 py-2 rounded-full bg-purple-600 text-white">Monthly</button> |
| <button class="px-6 py-2 rounded-full text-gray-600">Yearly (Save 20%)</button> |
| </div> |
| </div> |
| |
| <div class="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto"> |
| |
| <div class="pricing-card bg-white p-8 rounded-xl shadow-lg border border-gray-200 transition duration-300"> |
| <h3 class="text-xl font-bold mb-2">Starter</h3> |
| <p class="text-gray-600 mb-6">Perfect for personal projects</p> |
| <div class="mb-6"> |
| <span class="text-4xl font-bold">$9</span> |
| <span class="text-gray-500">/month</span> |
| </div> |
| <ul class="space-y-3 mb-8"> |
| <li class="flex items-center"> |
| <i class="fas fa-check text-green-500 mr-2"></i> |
| <span>1 Website</span> |
| </li> |
| <li class="flex items-center"> |
| <i class="fas fa-check text-green-500 mr-2"></i> |
| <span>10 AI Design Options</span> |
| </li> |
| <li class="flex items-center"> |
| <i class="fas fa-check text-green-500 mr-2"></i> |
| <span>Basic Customization</span> |
| </li> |
| <li class="flex items-center text-gray-400"> |
| <i class="fas fa-times text-red-400 mr-2"></i> |
| <span>No E-Commerce</span> |
| </li> |
| <li class="flex items-center text-gray-400"> |
| <i class="fas fa-times text-red-400 mr-2"></i> |
| <span>Limited Support</span> |
| </li> |
| </ul> |
| <button class="w-full border-2 border-purple-600 text-purple-600 hover:bg-purple-600 hover:text-white px-6 py-3 rounded-full transition">Get Started</button> |
| </div> |
| |
| |
| <div class="pricing-card bg-gradient-to-b from-purple-600 to-blue-500 text-white p-8 rounded-xl shadow-lg transform scale-105 z-10 transition duration-300"> |
| <div class="absolute top-0 right-0 bg-yellow-400 text-gray-900 text-xs font-bold px-3 py-1 rounded-bl-lg rounded-tr-lg">MOST POPULAR</div> |
| <h3 class="text-xl font-bold mb-2">Professional</h3> |
| <p class="text-purple-100 mb-6">Ideal for growing businesses</p> |
| <div class="mb-6"> |
| <span class="text-4xl font-bold">$29</span> |
| <span class="text-purple-200">/month</span> |
| </div> |
| <ul class="space-y-3 mb-8"> |
| <li class="flex items-center"> |
| <i class="fas fa-check text-white mr-2"></i> |
| <span>5 Websites</span> |
| </li> |
| <li class="flex items-center"> |
| <i class="fas fa-check text-white mr-2"></i> |
| <span>Unlimited AI Designs</span> |
| </li> |
| <li class="flex items-center"> |
| <i class="fas fa-check text-white mr-2"></i> |
| <span>Advanced Customization</span> |
| </li> |
| <li class="flex items-center"> |
| <i class="fas fa-check text-white mr-2"></i> |
| <span>Basic E-Commerce</span> |
| </li> |
| <li class="flex items-center"> |
| <i class="fas fa-check text-white mr-2"></i> |
| <span>Priority Support</span> |
| </li> |
| </ul> |
| <button class="w-full bg-white text-purple-600 hover:bg-gray-100 px-6 py-3 rounded-full font-bold transition">Get Started</button> |
| </div> |
| |
| |
| <div class="pricing-card bg-white p-8 rounded-xl shadow-lg border border-gray-200 transition duration-300"> |
| <h3 class="text-xl font-bold mb-2">Enterprise</h3> |
| <p class="text-gray-600 mb-6">For large-scale operations</p> |
| <div class="mb-6"> |
| <span class="text-4xl font-bold">$99</span> |
| <span class="text-gray-500">/month</span> |
| </div> |
| <ul class="space-y-3 mb-8"> |
| <li class="flex items-center"> |
| <i class="fas fa-check text-green-500 mr-2"></i> |
| <span>Unlimited Websites</span> |
| </li> |
| <li class="flex items-center"> |
| <i class="fas fa-check text-green-500 mr-2"></i> |
| <span>Unlimited AI Designs</span> |
| </li> |
| <li class="flex items-center"> |
| <i class="fas fa-check text-green-500 mr-2"></i> |
| <span>Full Customization</span> |
| </li> |
| <li class="flex items-center"> |
| <i class="fas fa-check text-green-500 mr-2"></i> |
| <span>Advanced E-Commerce</span> |
| </li> |
| <li class="flex items-center"> |
| <i class="fas fa-check text-green-500 mr-2"></i> |
| <span>24/7 VIP Support</span> |
| </li> |
| </ul> |
| <button class="w-full border-2 border-purple-600 text-purple-600 hover:bg-purple-600 hover:text-white px-6 py-3 rounded-full transition">Get Started</button> |
| </div> |
| </div> |
| |
| <div class="mt-12 text-center"> |
| <p class="text-gray-600">Need custom solutions? <a href="#" class="text-purple-600 font-semibold hover:underline">Contact our sales team</a></p> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="testimonials" class="py-20 bg-white"> |
| <div class="container mx-auto px-6"> |
| <div class="text-center mb-16"> |
| <h2 class="text-3xl md:text-4xl font-bold mb-4">What Our Customers Say</h2> |
| <p class="text-xl text-gray-600 max-w-2xl mx-auto">Don't just take our word for it</p> |
| </div> |
| |
| <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-6xl mx-auto"> |
| |
| <div class="testimonial-card p-8 rounded-xl border border-gray-200"> |
| <div class="flex items-center mb-4"> |
| <img src="https://randomuser.me/api/portraits/women/32.jpg" class="w-12 h-12 rounded-full mr-4"> |
| <div> |
| <h4 class="font-bold">Sarah Johnson</h4> |
| <p class="text-gray-600 text-sm">Small Business Owner</p> |
| </div> |
| </div> |
| <div class="flex mb-2"> |
| <i class="fas fa-star text-yellow-400"></i> |
| <i class="fas fa-star text-yellow-400"></i> |
| <i class="fas fa-star text-yellow-400"></i> |
| <i class="fas fa-star text-yellow-400"></i> |
| <i class="fas fa-star text-yellow-400"></i> |
| </div> |
| <p class="text-gray-700">"I was able to create a professional website for my bakery in under an hour. The AI understood exactly what I needed and created something better than I could have imagined."</p> |
| </div> |
| |
| |
| <div class="testimonial-card p-8 rounded-xl border border-gray-200"> |
| <div class="flex items-center mb-4"> |
| <img src="https://randomuser.me/api/portraits/men/54.jpg" class="w-12 h-12 rounded-full mr-4"> |
| <div> |
| <h4 class="font-bold">Michael Chen</h4> |
| <p class="text-gray-600 text-sm">Marketing Director</p> |
| </div> |
| </div> |
| <div class="flex mb-2"> |
| <i class="fas fa-star text-yellow-400"></i> |
| <i class="fas fa-star text-yellow-400"></i> |
| <i class="fas fa-star text-yellow-400"></i> |
| <i class="fas fa-star text-yellow-400"></i> |
| <i class="fas fa-star text-yellow-400"></i> |
| </div> |
| <p class="text-gray-700">"We've saved thousands on web development costs by using SiteGenAI. The ability to quickly iterate on designs has been a game-changer for our marketing team."</p> |
| </div> |
| |
| |
| <div class="testimonial-card p-8 rounded-xl border border-gray-200"> |
| <div class="flex items-center mb-4"> |
| <img src="https://randomuser.me/api/portraits/women/68.jpg" class="w-12 h-12 rounded-full mr-4"> |
| <div> |
| <h4 class="font-bold">Emily Rodriguez</h4> |
| <p class="text-gray-600 text-sm">Freelance Designer</p> |
| </div> |
| </div> |
| <div class="flex mb-2"> |
| <i class="fas fa-star text-yellow-400"></i> |
| <i class="fas fa-star text-yellow-400"></i> |
| <i class="fas fa-star text-yellow-400"></i> |
| <i class="fas fa-star text-yellow-400"></i> |
| <i class="fas fa-star text-yellow-400"></i> |
| </div> |
| <p class="text-gray-700">"As a designer, I'm picky about aesthetics. SiteGenAI surprised me with its design sensibility. It's now my go-to tool for quickly prototyping client websites."</p> |
| </div> |
| </div> |
| |
| <div class="mt-12 text-center"> |
| <button class="border-2 border-purple-600 text-purple-600 hover:bg-purple-600 hover:text-white px-8 py-3 rounded-full transition">Read More Reviews</button> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-20 bg-gray-50"> |
| <div class="container mx-auto px-6 max-w-4xl"> |
| <div class="text-center mb-16"> |
| <h2 class="text-3xl md:text-4xl font-bold mb-4">Frequently Asked Questions</h2> |
| <p class="text-xl text-gray-600">Find answers to common questions about SiteGenAI</p> |
| </div> |
| |
| <div class="space-y-4"> |
| |
| <div class="bg-white p-6 rounded-xl shadow"> |
| <button class="flex justify-between items-center w-full text-left" onclick="toggleFAQ(1)"> |
| <h3 class="text-lg font-semibold">How does the AI website generation work?</h3> |
| <i class="fas fa-chevron-down transition-transform duration-300" id="faq-icon-1"></i> |
| </button> |
| <div class="mt-4 text-gray-600 hidden" id="faq-content-1"> |
| <p>Our AI analyzes your input about your business, preferences, and goals through our questionnaire or chat interface. It then generates multiple design options based on current web design trends, your industry standards, and your specific requirements. You can then select a design to customize further or ask the AI to generate new options.</p> |
| </div> |
| </div> |
| |
| |
| <div class="bg-white p-6 rounded-xl shadow"> |
| <button class="flex justify-between items-center w-full text-left" onclick="toggleFAQ(2)"> |
| <h3 class="text-lg font-semibold">Do I need any coding knowledge to use SiteGenAI?</h3> |
| <i class="fas fa-chevron-down transition-transform duration-300" id="faq-icon-2"></i> |
| </button> |
| <div class="mt-4 text-gray-600 hidden" id="faq-content-2"> |
| <p>No coding knowledge is required at all! SiteGenAI is designed to be completely accessible to users with no technical background. Our intuitive editor allows you to customize your website through simple point-and-click interactions. For advanced users, we do offer the ability to add custom code if desired.</p> |
| </div> |
| </div> |
| |
| |
| <div class="bg-white p-6 rounded-xl shadow"> |
| <button class="flex justify-between items-center w-full text-left" onclick="toggleFAQ(3)"> |
| <h3 class="text-lg font-semibold">Can I use my own domain name?</h3> |
| <i class="fas fa-chevron-down transition-transform duration-300" id="faq-icon-3"></i> |
| </button> |
| <div class="mt-4 text-gray-600 hidden" id="faq-content-3"> |
| <p>Yes! All our plans allow you to connect your own custom domain name. We also offer domain registration services if you need to purchase a new domain. Free accounts get a SiteGenAI subdomain (yourname.sitegenai.com), but you can upgrade at any time to use your own domain.</p> |
| </div> |
| </div> |
| |
| |
| <div class="bg-white p-6 rounded-xl shadow"> |
| <button class="flex justify-between items-center w-full text-left" onclick="toggleFAQ(4)"> |
| <h3 class="text-lg font-semibold">How does the free trial work?</h3> |
| <i class="fas fa-chevron-down transition-transform duration-300" id="faq-icon-4"></i> |
| </button> |
| <div class="mt-4 text-gray-600 hidden" id="faq-content-4"> |
| <p>Our free trial gives you full access to all features for 14 days with no credit card required. You can create and publish a complete website during this period. If you choose not to upgrade after the trial, your website will remain online but with SiteGenAI branding and limited functionality until you subscribe to a paid plan.</p> |
| </div> |
| </div> |
| |
| |
| <div class="bg-white p-6 rounded-xl shadow"> |
| <button class="flex justify-between items-center w-full text-left" onclick="toggleFAQ(5)"> |
| <h3 class="text-lg font-semibold">What happens if I want to cancel my subscription?</h3> |
| <i class="fas fa-chevron-down transition-transform duration-300" id="faq-icon-5"></i> |
| </button> |
| <div class="mt-4 text-gray-600 hidden" id="faq-content-5"> |
| <p>You can cancel your subscription at any time with just a few clicks. After cancellation, your website will remain active until the end of your current billing period. We don't believe in holding your content hostage - you can export your website data at any time, even after cancellation.</p> |
| </div> |
| </div> |
| </div> |
| |
| <div class="mt-12 text-center"> |
| <p class="text-gray-600">Still have questions? <a href="#" class="text-purple-600 font-semibold hover:underline">Contact our support team</a></p> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="gradient-bg text-white py-20"> |
| <div class="container mx-auto px-6 text-center"> |
| <h2 class="text-3xl md:text-4xl font-bold mb-6">Ready to Build Your Dream Website?</h2> |
| <p class="text-xl max-w-2xl mx-auto mb-8 opacity-90">Join thousands of businesses creating beautiful websites with AI in minutes.</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-full text-lg font-semibold transition">Start Free Trial</button> |
| <button class="border-2 border-white hover:bg-white hover:text-purple-600 px-8 py-4 rounded-full text-lg font-semibold transition">Schedule a Demo</button> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <footer class="bg-gray-900 text-gray-400 py-12"> |
| <div class="container mx-auto px-6"> |
| <div class="grid md:grid-cols-4 gap-12"> |
| <div> |
| <div class="flex items-center mb-4"> |
| <i class="fas fa-robot text-3xl text-purple-500 mr-2"></i> |
| <span class="text-2xl font-bold text-white">SiteGenAI</span> |
| </div> |
| <p class="mb-4">The easiest way to create beautiful, professional websites with artificial intelligence.</p> |
| <div class="flex space-x-4"> |
| <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-purple-600 hover:text-white transition"> |
| <i class="fab fa-twitter"></i> |
| </a> |
| <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-purple-600 hover:text-white transition"> |
| <i class="fab fa-facebook-f"></i> |
| </a> |
| <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-purple-600 hover:text-white transition"> |
| <i class="fab fa-instagram"></i> |
| </a> |
| <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-purple-600 hover:text-white transition"> |
| <i class="fab fa-linkedin-in"></i> |
| </a> |
| </div> |
| </div> |
| |
| <div> |
| <h4 class="text-white text-lg font-semibold mb-4">Product</h4> |
| <ul class="space-y-2"> |
| <li><a href="#" class="hover:text-white transition">Features</a></li> |
| <li><a href="#" class="hover:text-white transition">Pricing</a></li> |
| <li><a href="#" class="hover:text-white transition">Templates</a></li> |
| <li><a href="#" class="hover:text-white transition">Integrations</a></li> |
| <li><a href="#" class="hover:text-white transition">Roadmap</a></li> |
| </ul> |
| </div> |
| |
| <div> |
| <h4 class="text-white text-lg font-semibold mb-4">Resources</h4> |
| <ul class="space-y-2"> |
| <li><a href="#" class="hover:text-white transition">Blog</a></li> |
| <li><a href="#" class="hover:text-white transition">Help Center</a></li> |
| <li><a href="#" class="hover:text-white transition">Tutorials</a></li> |
| <li><a href="#" class="hover:text-white transition">Webinars</a></li> |
| <li><a href="#" class="hover:text-white transition">Community</a></li> |
| </ul> |
| </div> |
| |
| <div> |
| <h4 class="text-white text-lg font-semibold mb-4">Company</h4> |
| <ul class="space-y-2"> |
| <li><a href="#" class="hover:text-white transition">About Us</a></li> |
| <li><a href="#" class="hover:text-white transition">Careers</a></li> |
| <li><a href="#" class="hover:text-white transition">Press</a></li> |
| <li><a href="#" class="hover:text-white transition">Contact</a></li> |
| <li><a href="#" class="hover:text-white transition">Legal</a></li> |
| </ul> |
| </div> |
| </div> |
| |
| <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center"> |
| <p>© 2023 SiteGenAI. All rights reserved.</p> |
| <div class="flex space-x-6 mt-4 md:mt-0"> |
| <a href="#" class="hover:text-white transition">Privacy Policy</a> |
| <a href="#" class="hover:text-white transition">Terms of Service</a> |
| <a href="#" class="hover:text-white transition">Cookie Policy</a> |
| </div> |
| </div> |
| </div> |
| </footer> |
|
|
| <script> |
| |
| function toggleFAQ(id) { |
| const content = document.getElementById(`faq-content-${id}`); |
| const icon = document.getElementById(`faq-icon-${id}`); |
| |
| if (content.classList.contains('hidden')) { |
| content.classList.remove('hidden'); |
| icon.classList.add('rotate-180'); |
| } else { |
| content.classList.add('hidden'); |
| icon.classList.remove('rotate-180'); |
| } |
| } |
| |
| |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
| anchor.addEventListener('click', function (e) { |
| e.preventDefault(); |
| |
| document.querySelector(this.getAttribute('href')).scrollIntoView({ |
| behavior: 'smooth' |
| }); |
| }); |
| }); |
| </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=yibo365/sitegen" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body> |
| </html> |
