|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>AI Landing Page Builder | Create Stunning Pages in Minutes</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"> |
|
|
<script> |
|
|
tailwind.config = { |
|
|
theme: { |
|
|
extend: { |
|
|
colors: { |
|
|
primary: '#6366f1', |
|
|
secondary: '#8b5cf6', |
|
|
dark: '#1e293b', |
|
|
light: '#f8fafc' |
|
|
}, |
|
|
fontFamily: { |
|
|
sans: ['Inter', 'sans-serif'], |
|
|
}, |
|
|
} |
|
|
} |
|
|
} |
|
|
</script> |
|
|
<style> |
|
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); |
|
|
|
|
|
body { |
|
|
font-family: 'Inter', sans-serif; |
|
|
} |
|
|
|
|
|
.gradient-bg { |
|
|
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%); |
|
|
} |
|
|
|
|
|
.preview-container { |
|
|
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); |
|
|
transform: perspective(1000px) rotateX(5deg); |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.preview-container:hover { |
|
|
transform: perspective(1000px) rotateX(0deg); |
|
|
} |
|
|
|
|
|
.ai-processing { |
|
|
position: relative; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.ai-processing::after { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: -100%; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent); |
|
|
animation: shimmer 1.5s infinite; |
|
|
} |
|
|
|
|
|
@keyframes shimmer { |
|
|
100% { |
|
|
left: 100%; |
|
|
} |
|
|
} |
|
|
|
|
|
.template-card { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.template-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); |
|
|
} |
|
|
|
|
|
|
|
|
.chat-container { |
|
|
position: fixed; |
|
|
bottom: 20px; |
|
|
right: 20px; |
|
|
width: 350px; |
|
|
max-height: 500px; |
|
|
background: white; |
|
|
border-radius: 12px; |
|
|
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); |
|
|
overflow: hidden; |
|
|
transform: translateY(20px); |
|
|
opacity: 0; |
|
|
transition: all 0.3s ease; |
|
|
z-index: 1000; |
|
|
} |
|
|
|
|
|
.chat-container.open { |
|
|
transform: translateY(0); |
|
|
opacity: 1; |
|
|
} |
|
|
|
|
|
.chat-header { |
|
|
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%); |
|
|
color: white; |
|
|
padding: 12px 16px; |
|
|
display: flex; |
|
|
justify-content: space-between; |
|
|
align-items: center; |
|
|
} |
|
|
|
|
|
.chat-messages { |
|
|
height: 300px; |
|
|
overflow-y: auto; |
|
|
padding: 16px; |
|
|
background: #f9fafb; |
|
|
} |
|
|
|
|
|
.message { |
|
|
margin-bottom: 12px; |
|
|
max-width: 80%; |
|
|
padding: 8px 12px; |
|
|
border-radius: 12px; |
|
|
font-size: 14px; |
|
|
} |
|
|
|
|
|
.user-message { |
|
|
background: #e0e7ff; |
|
|
margin-left: auto; |
|
|
border-bottom-right-radius: 4px; |
|
|
} |
|
|
|
|
|
.ai-message { |
|
|
background: white; |
|
|
border: 1px solid #e5e7eb; |
|
|
margin-right: auto; |
|
|
border-bottom-left-radius: 4px; |
|
|
} |
|
|
|
|
|
.chat-input { |
|
|
display: flex; |
|
|
padding: 12px; |
|
|
border-top: 1px solid #e5e7eb; |
|
|
background: white; |
|
|
} |
|
|
|
|
|
.chat-input input { |
|
|
flex: 1; |
|
|
padding: 8px 12px; |
|
|
border: 1px solid #e5e7eb; |
|
|
border-radius: 8px; |
|
|
outline: none; |
|
|
} |
|
|
|
|
|
.chat-input button { |
|
|
margin-left: 8px; |
|
|
background: #6366f1; |
|
|
color: white; |
|
|
border: none; |
|
|
border-radius: 8px; |
|
|
padding: 8px 12px; |
|
|
cursor: pointer; |
|
|
} |
|
|
|
|
|
.chat-toggle { |
|
|
position: fixed; |
|
|
bottom: 20px; |
|
|
right: 20px; |
|
|
width: 60px; |
|
|
height: 60px; |
|
|
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%); |
|
|
color: white; |
|
|
border-radius: 50%; |
|
|
display: flex; |
|
|
justify-content: center; |
|
|
align-items: center; |
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); |
|
|
cursor: pointer; |
|
|
z-index: 1000; |
|
|
} |
|
|
|
|
|
|
|
|
.editor-panel { |
|
|
position: fixed; |
|
|
top: 0; |
|
|
right: 0; |
|
|
width: 400px; |
|
|
height: 100vh; |
|
|
background: white; |
|
|
box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1); |
|
|
transform: translateX(100%); |
|
|
transition: transform 0.3s ease; |
|
|
z-index: 999; |
|
|
overflow-y: auto; |
|
|
} |
|
|
|
|
|
.editor-panel.open { |
|
|
transform: translateX(0); |
|
|
} |
|
|
|
|
|
.editor-header { |
|
|
padding: 16px; |
|
|
border-bottom: 1px solid #e5e7eb; |
|
|
display: flex; |
|
|
justify-content: space-between; |
|
|
align-items: center; |
|
|
} |
|
|
|
|
|
.editor-content { |
|
|
padding: 16px; |
|
|
} |
|
|
|
|
|
.form-group { |
|
|
margin-bottom: 16px; |
|
|
} |
|
|
|
|
|
.form-group label { |
|
|
display: block; |
|
|
margin-bottom: 8px; |
|
|
font-weight: 500; |
|
|
} |
|
|
|
|
|
.form-group input, .form-group textarea, .form-group select { |
|
|
width: 100%; |
|
|
padding: 8px 12px; |
|
|
border: 1px solid #e5e7eb; |
|
|
border-radius: 6px; |
|
|
} |
|
|
|
|
|
.color-picker { |
|
|
display: flex; |
|
|
gap: 8px; |
|
|
} |
|
|
|
|
|
.color-option { |
|
|
width: 30px; |
|
|
height: 30px; |
|
|
border-radius: 50%; |
|
|
cursor: pointer; |
|
|
border: 2px solid transparent; |
|
|
} |
|
|
|
|
|
.color-option.selected { |
|
|
border-color: #6366f1; |
|
|
} |
|
|
|
|
|
.toggle-editor { |
|
|
position: fixed; |
|
|
top: 50%; |
|
|
right: 0; |
|
|
transform: translateY(-50%); |
|
|
background: #6366f1; |
|
|
color: white; |
|
|
padding: 12px 8px; |
|
|
border-top-left-radius: 8px; |
|
|
border-bottom-left-radius: 8px; |
|
|
cursor: pointer; |
|
|
z-index: 998; |
|
|
box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-light text-dark"> |
|
|
|
|
|
<nav class="bg-white shadow-sm py-4"> |
|
|
<div class="container mx-auto px-4 flex justify-between items-center"> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<i class="fas fa-robot text-2xl text-primary"></i> |
|
|
<span class="text-xl font-bold">LandingAI</span> |
|
|
</div> |
|
|
<div class="hidden md:flex space-x-8"> |
|
|
<a href="#" class="font-medium hover:text-primary">Features</a> |
|
|
<a href="#" class="font-medium hover:text-primary">Templates</a> |
|
|
<a href="#" class="font-medium hover:text-primary">Pricing</a> |
|
|
<a href="#" class="font-medium hover:text-primary">Resources</a> |
|
|
</div> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<a href="#" class="hidden md:block font-medium hover:text-primary">Login</a> |
|
|
<button class="gradient-bg text-white px-4 py-2 rounded-lg font-medium hover:opacity-90 transition">Get Started</button> |
|
|
<button class="md:hidden text-xl"> |
|
|
<i class="fas fa-bars"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
|
|
|
<section class="py-16 md:py-24"> |
|
|
<div class="container mx-auto px-4 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-5xl font-bold leading-tight mb-6">Build Stunning Landing Pages <span class="text-primary">Powered by AI</span></h1> |
|
|
<p class="text-lg text-gray-600 mb-8">Our AI analyzes your business and generates high-converting landing pages in minutes. No design skills required.</p> |
|
|
<div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4"> |
|
|
<button id="startBuildingBtn" class="gradient-bg text-white px-6 py-3 rounded-lg font-medium hover:opacity-90 transition flex items-center justify-center"> |
|
|
<i class="fas fa-bolt mr-2"></i> Start Building Now |
|
|
</button> |
|
|
<button class="border border-primary text-primary px-6 py-3 rounded-lg font-medium hover:bg-primary hover:text-white transition flex items-center justify-center"> |
|
|
<i class="fas fa-play-circle mr-2"></i> Watch Demo |
|
|
</button> |
|
|
</div> |
|
|
<div class="mt-8 flex items-center space-x-4"> |
|
|
<div class="flex -space-x-2"> |
|
|
<img src="https://randomuser.me/api/portraits/women/1.jpg" class="w-10 h-10 rounded-full border-2 border-white" alt="User"> |
|
|
<img src="https://randomuser.me/api/portraits/men/32.jpg" class="w-10 h-10 rounded-full border-2 border-white" alt="User"> |
|
|
<img src="https://randomuser.me/api/portraits/women/44.jpg" class="w-10 h-10 rounded-full border-2 border-white" alt="User"> |
|
|
</div> |
|
|
<div> |
|
|
<div class="flex items-center"> |
|
|
<i class="fas fa-star text-yellow-400 mr-1"></i> |
|
|
<span class="font-medium">4.9</span> |
|
|
<span class="text-gray-500 ml-1">(1,200+ reviews)</span> |
|
|
</div> |
|
|
<p class="text-sm text-gray-500">Trusted by 10,000+ businesses</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="md:w-1/2 relative"> |
|
|
<div class="preview-container bg-white rounded-xl overflow-hidden w-full max-w-lg mx-auto"> |
|
|
<div class="h-8 bg-gray-100 flex items-center px-3"> |
|
|
<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-6"> |
|
|
<div class="flex justify-between items-center mb-6"> |
|
|
<h2 class="text-xl font-bold">Your AI-Generated Page</h2> |
|
|
<div class="flex space-x-2"> |
|
|
<button class="p-2 rounded-full bg-gray-100 hover:bg-gray-200"> |
|
|
<i class="fas fa-palette text-primary"></i> |
|
|
</button> |
|
|
<button class="p-2 rounded-full bg-gray-100 hover:bg-gray-200"> |
|
|
<i class="fas fa-undo text-primary"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="h-64 bg-gradient-to-r from-primary to-secondary rounded-lg flex items-center justify-center mb-4"> |
|
|
<i class="fas fa-image text-white text-4xl opacity-50"></i> |
|
|
</div> |
|
|
<div class="grid grid-cols-2 gap-4 mb-4"> |
|
|
<div class="h-4 bg-gray-200 rounded-full"></div> |
|
|
<div class="h-4 bg-gray-200 rounded-full"></div> |
|
|
<div class="h-4 bg-gray-200 rounded-full"></div> |
|
|
<div class="h-4 bg-gray-200 rounded-full"></div> |
|
|
</div> |
|
|
<div class="h-8 bg-primary rounded-lg w-1/3"></div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="absolute -bottom-6 -left-6 w-24 h-24 rounded-full bg-purple-100 opacity-50 -z-10"></div> |
|
|
<div class="absolute -top-6 -right-6 w-32 h-32 rounded-full bg-indigo-100 opacity-50 -z-10"></div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-16 bg-white"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="text-center mb-16"> |
|
|
<span class="inline-block px-3 py-1 rounded-full bg-purple-100 text-primary font-medium mb-4">AI POWERED</span> |
|
|
<h2 class="text-3xl font-bold mb-4">How Our AI Builds Better Pages</h2> |
|
|
<p class="text-lg text-gray-600 max-w-2xl mx-auto">Our advanced algorithms analyze thousands of high-performing pages to create designs that convert.</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid md:grid-cols-3 gap-8"> |
|
|
<div class="bg-light p-8 rounded-xl"> |
|
|
<div class="w-14 h-14 gradient-bg rounded-lg flex items-center justify-center text-white text-2xl mb-6"> |
|
|
<i class="fas fa-brain"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-3">Smart Design Analysis</h3> |
|
|
<p class="text-gray-600">Our AI studies design trends and conversion data to create layouts that perform.</p> |
|
|
</div> |
|
|
|
|
|
<div class="bg-light p-8 rounded-xl"> |
|
|
<div class="w-14 h-14 gradient-bg rounded-lg flex items-center justify-center text-white text-2xl mb-6"> |
|
|
<i class="fas fa-magic"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-3">Automatic Content Generation</h3> |
|
|
<p class="text-gray-600">Just describe your business and we'll generate compelling copy tailored to your audience.</p> |
|
|
</div> |
|
|
|
|
|
<div class="bg-light p-8 rounded-xl"> |
|
|
<div class="w-14 h-14 gradient-bg rounded-lg flex items-center justify-center text-white text-2xl mb-6"> |
|
|
<i class="fas fa-chart-line"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-3">Performance Optimization</h3> |
|
|
<p class="text-gray-600">Continuous A/B testing and optimization ensures your page converts at its highest potential.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-16 gradient-bg text-white"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="max-w-4xl mx-auto text-center mb-12"> |
|
|
<h2 class="text-3xl font-bold mb-4">Generate Your Page in 3 Simple Steps</h2> |
|
|
<p class="text-lg opacity-90">Our AI builder makes it effortless to create a professional landing page.</p> |
|
|
</div> |
|
|
|
|
|
<div class="max-w-3xl mx-auto bg-white bg-opacity-10 backdrop-blur-lg rounded-xl p-8"> |
|
|
<div class="mb-8"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="w-8 h-8 rounded-full bg-white bg-opacity-20 flex items-center justify-center mr-4">1</div> |
|
|
<h3 class="text-xl font-medium">Describe Your Business</h3> |
|
|
</div> |
|
|
<div class="pl-12"> |
|
|
<textarea id="businessDescription" class="w-full bg-white bg-opacity-10 border border-white border-opacity-20 rounded-lg px-4 py-3 text-white placeholder-white placeholder-opacity-70 focus:outline-none focus:ring-2 focus:ring-white focus:ring-opacity-50" rows="3" placeholder="E.g. 'I run an eco-friendly yoga apparel brand targeting health-conscious women aged 25-45...'"></textarea> |
|
|
<div class="mt-2 text-sm opacity-80">The more details you provide, the better our AI can tailor your page.</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mb-8"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="w-8 h-8 rounded-full bg-white bg-opacity-20 flex items-center justify-center mr-4">2</div> |
|
|
<h3 class="text-xl font-medium">Select Your Style</h3> |
|
|
</div> |
|
|
<div class="pl-12"> |
|
|
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-4"> |
|
|
<button class="style-option border-2 border-transparent hover:border-white hover:border-opacity-50 rounded-lg overflow-hidden transition" data-style="modern"> |
|
|
<div class="h-20 bg-gradient-to-r from-blue-400 to-purple-500"></div> |
|
|
<div class="p-2 bg-white bg-opacity-10 text-sm">Modern</div> |
|
|
</button> |
|
|
<button class="style-option border-2 border-transparent hover:border-white hover:border-opacity-50 rounded-lg overflow-hidden transition" data-style="minimal"> |
|
|
<div class="h-20 bg-gradient-to-r from-gray-100 to-gray-300"></div> |
|
|
<div class="p-2 bg-white bg-opacity-10 text-sm">Minimal</div> |
|
|
</button> |
|
|
<button class="style-option border-2 border-transparent hover:border-white hover:border-opacity-50 rounded-lg overflow-hidden transition" data-style="bold"> |
|
|
<div class="h-20 bg-gradient-to-r from-red-500 to-yellow-500"></div> |
|
|
<div class="p-2 bg-white bg-opacity-10 text-sm">Bold</div> |
|
|
</button> |
|
|
<button class="style-option border-2 border-transparent hover:border-white hover:border-opacity-50 rounded-lg overflow-hidden transition" data-style="elegant"> |
|
|
<div class="h-20 bg-gradient-to-r from-purple-800 to-pink-600"></div> |
|
|
<div class="p-2 bg-white bg-opacity-10 text-sm">Elegant</div> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mb-8"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="w-8 h-8 rounded-full bg-white bg-opacity-20 flex items-center justify-center mr-4">3</div> |
|
|
<h3 class="text-xl font-medium">Generate & Customize</h3> |
|
|
</div> |
|
|
<div class="pl-12"> |
|
|
<button id="generateBtn" class="w-full bg-white text-primary font-medium py-3 rounded-lg hover:bg-opacity-90 transition flex items-center justify-center"> |
|
|
<i class="fas fa-bolt mr-2"></i> Generate My Landing Page |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="aiProcessing" class="hidden py-16 bg-white"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="max-w-4xl mx-auto text-center mb-12"> |
|
|
<h2 class="text-3xl font-bold mb-4">Our AI is Crafting Your Perfect Page</h2> |
|
|
<p class="text-lg text-gray-600">Analyzing your business and generating high-converting content and design...</p> |
|
|
</div> |
|
|
|
|
|
<div class="max-w-3xl mx-auto bg-light rounded-xl overflow-hidden"> |
|
|
<div class="p-6 border-b border-gray-200 flex justify-between items-center"> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<div class="w-10 h-10 rounded-full gradient-bg flex items-center justify-center text-white"> |
|
|
<i class="fas fa-robot"></i> |
|
|
</div> |
|
|
<span class="font-medium">LandingAI Builder</span> |
|
|
</div> |
|
|
<div class="text-sm text-gray-500">Processing...</div> |
|
|
</div> |
|
|
|
|
|
<div class="p-6 ai-processing"> |
|
|
<div class="grid grid-cols-3 gap-4 mb-6"> |
|
|
<div class="h-4 bg-gray-200 rounded-full"></div> |
|
|
<div class="h-4 bg-gray-200 rounded-full"></div> |
|
|
<div class="h-4 bg-gray-200 rounded-full col-span-1"></div> |
|
|
</div> |
|
|
<div class="grid grid-cols-4 gap-4 mb-6"> |
|
|
<div class="h-4 bg-gray-200 rounded-full"></div> |
|
|
<div class="h-4 bg-gray-200 rounded-full col-span-2"></div> |
|
|
<div class="h-4 bg-gray-200 rounded-full"></div> |
|
|
</div> |
|
|
<div class="h-64 bg-gray-200 rounded-lg mb-6"></div> |
|
|
<div class="grid grid-cols-2 gap-4"> |
|
|
<div class="h-4 bg-gray-200 rounded-full"></div> |
|
|
<div class="h-4 bg-gray-200 rounded-full"></div> |
|
|
<div class="h-4 bg-gray-200 rounded-full col-span-2"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-16 bg-light"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="text-center mb-16"> |
|
|
<h2 class="text-3xl font-bold mb-4">AI-Generated Templates</h2> |
|
|
<p class="text-lg text-gray-600 max-w-2xl mx-auto">Browse our collection of high-converting templates that our AI can customize for your business.</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid md:grid-cols-3 gap-8"> |
|
|
<div class="template-card bg-white rounded-xl overflow-hidden"> |
|
|
<div class="h-48 bg-gradient-to-r from-blue-500 to-blue-600 flex items-center justify-center"> |
|
|
<i class="fas fa-mobile-alt text-white text-5xl opacity-50"></i> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<h3 class="text-xl font-bold mb-2">SaaS Product</h3> |
|
|
<p class="text-gray-600 mb-4">Perfect for showcasing software products with clear CTAs.</p> |
|
|
<div class="flex justify-between items-center"> |
|
|
<span class="text-sm text-gray-500">Conversion Rate: 8.2%</span> |
|
|
<button class="text-primary font-medium hover:underline">Preview</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="template-card bg-white rounded-xl overflow-hidden"> |
|
|
<div class="h-48 bg-gradient-to-r from-green-500 to-green-600 flex items-center justify-center"> |
|
|
<i class="fas fa-store text-white text-5xl opacity-50"></i> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<h3 class="text-xl font-bold mb-2">E-commerce</h3> |
|
|
<p class="text-gray-600 mb-4">Designed to highlight products and drive purchases.</p> |
|
|
<div class="flex justify-between items-center"> |
|
|
<span class="text-sm text-gray-500">Conversion Rate: 6.7%</span> |
|
|
<button class="text-primary font-medium hover:underline">Preview</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="template-card bg-white rounded-xl overflow-hidden"> |
|
|
<div class="h-48 bg-gradient-to-r from-purple-500 to-purple-600 flex items-center justify-center"> |
|
|
<i class="fas fa-graduation-cap text-white text-5xl opacity-50"></i> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<h3 class="text-xl font-bold mb-2">Online Course</h3> |
|
|
<p class="text-gray-600 mb-4">Effective for educational offerings and webinar signups.</p> |
|
|
<div class="flex justify-between items-center"> |
|
|
<span class="text-sm text-gray-500">Conversion Rate: 9.1%</span> |
|
|
<button class="text-primary font-medium hover:underline">Preview</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="text-center mt-12"> |
|
|
<button class="border border-primary text-primary px-6 py-3 rounded-lg font-medium hover:bg-primary hover:text-white transition"> |
|
|
View All Templates |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-16 bg-white"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="text-center mb-16"> |
|
|
<h2 class="text-3xl font-bold mb-4">What Our Customers Say</h2> |
|
|
<p class="text-lg text-gray-600 max-w-2xl mx-auto">Businesses of all sizes use LandingAI to create high-performing pages.</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid md:grid-cols-2 gap-8 max-w-6xl mx-auto"> |
|
|
<div class="bg-light p-8 rounded-xl"> |
|
|
<div class="flex items-center mb-6"> |
|
|
<img src="https://randomuser.me/api/portraits/women/43.jpg" class="w-12 h-12 rounded-full mr-4" alt="Sarah J."> |
|
|
<div> |
|
|
<h4 class="font-bold">Sarah Johnson</h4> |
|
|
<p class="text-gray-600">Founder, GreenLife Apparel</p> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-gray-700 mb-6">"Our conversion rate increased by 140% after switching to an AI-generated landing page. The difference was night and day - we got more signups in the first week than the previous month!"</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> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-light p-8 rounded-xl"> |
|
|
<div class="flex items-center mb-6"> |
|
|
<img src="https://randomuser.me/api/portraits/men/65.jpg" class="w-12 h-12 rounded-full mr-4" alt="Michael T."> |
|
|
<div> |
|
|
<h4 class="font-bold">Michael Thompson</h4> |
|
|
<p class="text-gray-600">CEO, SaaS Analytics</p> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-gray-700 mb-6">"As a technical founder, design isn't my strength. LandingAI created a professional page that perfectly represents our brand in minutes. The AI even suggested copy improvements that increased our demo requests by 80%."</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> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-16 gradient-bg text-white"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="max-w-4xl mx-auto text-center"> |
|
|
<h2 class="text-3xl font-bold mb-6">Ready to Transform Your Online Presence?</h2> |
|
|
<p class="text-xl opacity-90 mb-8">Join thousands of businesses creating high-converting pages with our AI builder.</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-primary px-8 py-4 rounded-lg font-bold hover:bg-opacity-90 transition"> |
|
|
Start Free Trial |
|
|
</button> |
|
|
<button class="border border-white border-opacity-50 text-white px-8 py-4 rounded-lg font-bold hover:bg-white hover:bg-opacity-10 transition"> |
|
|
Schedule Demo |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<footer class="bg-dark text-white py-12"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="grid md:grid-cols-4 gap-8 mb-12"> |
|
|
<div> |
|
|
<div class="flex items-center space-x-2 mb-4"> |
|
|
<i class="fas fa-robot text-2xl text-primary"></i> |
|
|
<span class="text-xl font-bold">LandingAI</span> |
|
|
</div> |
|
|
<p class="text-gray-400">The smartest way to build high-converting landing pages powered by artificial intelligence.</p> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h4 class="font-bold text-lg mb-4">Product</h4> |
|
|
<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">Templates</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">Integrations</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h4 class="font-bold text-lg mb-4">Resources</h4> |
|
|
<ul class="space-y-2"> |
|
|
<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">Guides</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition">Help Center</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition">API Docs</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h4 class="font-bold text-lg mb-4">Company</h4> |
|
|
<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">Contact</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition">Legal</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="pt-8 border-t border-gray-800 flex flex-col md:flex-row justify-between items-center"> |
|
|
<p class="text-gray-400 mb-4 md:mb-0">© 2023 LandingAI. All rights reserved.</p> |
|
|
<div class="flex space-x-6"> |
|
|
<a href="#" class="text-gray-400 hover:text-white transition text-xl"><i class="fab fa-twitter"></i></a> |
|
|
<a href="#" class="text-gray-400 hover:text-white transition text-xl"><i class="fab fa-facebook"></i></a> |
|
|
<a href="#" class="text-gray-400 hover:text-white transition text-xl"><i class="fab fa-linkedin"></i></a> |
|
|
<a href="#" class="text-gray-400 hover:text-white transition text-xl"><i class="fab fa-instagram"></i></a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
|
|
|
<div class="chat-toggle" id="chatToggle"> |
|
|
<i class="fas fa-comment-dots"></i> |
|
|
</div> |
|
|
|
|
|
<div class="chat-container" id="chatContainer"> |
|
|
<div class="chat-header"> |
|
|
<div class="flex items-center"> |
|
|
<i class="fas fa-robot mr-2"></i> |
|
|
<span>LandingAI Assistant</span> |
|
|
</div> |
|
|
<button id="closeChat"><i class="fas fa-times"></i></button> |
|
|
</div> |
|
|
<div class="chat-messages" id="chatMessages"> |
|
|
<div class="message ai-message"> |
|
|
Hi there! I'm your LandingAI assistant. How can I help you build your perfect landing page today? |
|
|
</div> |
|
|
</div> |
|
|
<div class="chat-input"> |
|
|
<input type="text" id="chatInput" placeholder="Ask me anything about landing pages..."> |
|
|
<button id="sendMessage"><i class="fas fa-paper-plane"></i></button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="editor-panel" id="editorPanel"> |
|
|
<div class="editor-header"> |
|
|
<h3>Page Editor</h3> |
|
|
<button id="closeEditor"><i class="fas fa-times"></i></button> |
|
|
</div> |
|
|
<div class="editor-content"> |
|
|
<div class="form-group"> |
|
|
<label for="pageTitle">Page Title</label> |
|
|
<input type="text" id="pageTitle" value="Welcome to My Business"> |
|
|
</div> |
|
|
<div class="form-group"> |
|
|
<label for="pageSubtitle">Subtitle</label> |
|
|
<input type="text" id="pageSubtitle" value="The best solution for your needs"> |
|
|
</div> |
|
|
<div class="form-group"> |
|
|
<label>Primary Color</label> |
|
|
<div class="color-picker"> |
|
|
<div class="color-option selected" style="background-color: #6366f1;" data-color="primary"></div> |
|
|
<div class="color-option" style="background-color: #3b82f6;" data-color="blue"></div> |
|
|
<div class="color-option" style="background-color: #10b981;" data-color="green"></div> |
|
|
<div class="color-option" style="background-color: #f59e0b;" data-color="orange"></div> |
|
|
<div class="color-option" style="background-color: #ef4444;" data-color="red"></div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="form-group"> |
|
|
<label for="ctaText">Button Text</label> |
|
|
<input type="text" id="ctaText" value="Get Started Now"> |
|
|
</div> |
|
|
<div class="form-group"> |
|
|
<label for="pageContent">Content</label> |
|
|
<textarea id="pageContent" rows="4">Our AI-generated landing page will help you convert more visitors into customers with optimized design and compelling copy.</textarea> |
|
|
</div> |
|
|
<button class="w-full gradient-bg text-white py-3 rounded-lg font-medium mt-4 hover:opacity-90 transition"> |
|
|
Save Changes |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="toggle-editor" id="toggleEditor"> |
|
|
<i class="fas fa-pencil-alt"></i> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
const chatToggle = document.getElementById('chatToggle'); |
|
|
const chatContainer = document.getElementById('chatContainer'); |
|
|
const closeChat = document.getElementById('closeChat'); |
|
|
const chatMessages = document.getElementById('chatMessages'); |
|
|
const chatInput = document.getElementById('chatInput'); |
|
|
const sendMessage = document.getElementById('sendMessage'); |
|
|
|
|
|
|
|
|
const editorPanel = document.getElementById('editorPanel'); |
|
|
const toggleEditor = document.getElementById('toggleEditor'); |
|
|
const closeEditor = document.getElementById('closeEditor'); |
|
|
|
|
|
|
|
|
chatToggle.addEventListener('click', () => { |
|
|
chatContainer.classList.toggle('open'); |
|
|
}); |
|
|
|
|
|
closeChat.addEventListener('click', () => { |
|
|
chatContainer.classList.remove('open'); |
|
|
}); |
|
|
|
|
|
|
|
|
toggleEditor.addEventListener('click', () => { |
|
|
editorPanel.classList.toggle('open'); |
|
|
}); |
|
|
|
|
|
closeEditor.addEventListener('click', () => { |
|
|
editorPanel.classList.remove('open'); |
|
|
}); |
|
|
|
|
|
|
|
|
sendMessage.addEventListener('click', sendChatMessage); |
|
|
chatInput.addEventListener('keypress', (e) => { |
|
|
if (e.key === 'Enter') { |
|
|
sendChatMessage(); |
|
|
} |
|
|
}); |
|
|
|
|
|
function sendChatMessage() { |
|
|
const message = chatInput.value.trim(); |
|
|
if (message) { |
|
|
|
|
|
const userMessage = document.createElement('div'); |
|
|
userMessage.className = 'message user-message'; |
|
|
userMessage.textContent = message; |
|
|
chatMessages.appendChild(userMessage); |
|
|
|
|
|
|
|
|
chatInput.value = ''; |
|
|
|
|
|
|
|
|
chatMessages.scrollTop = chatMessages.scrollHeight; |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
const responses = [ |
|
|
"I can help you with that! Based on your business description, I recommend focusing on clear value propositions and strong call-to-actions.", |
|
|
"Great question! Our AI analyzes top-performing pages in your industry to create designs that convert.", |
|
|
"For your type of business, I suggest using a modern design with vibrant colors to attract attention.", |
|
|
"You can customize any aspect of your page in the editor panel. Would you like me to open it for you?", |
|
|
"Our data shows that pages with video backgrounds convert 30% better. Consider adding one!", |
|
|
"I notice you haven't selected a template yet. Would you like me to recommend one based on your business type?" |
|
|
]; |
|
|
|
|
|
const randomResponse = responses[Math.floor(Math.random() * responses.length)]; |
|
|
|
|
|
const aiMessage = document.createElement('div'); |
|
|
aiMessage.className = 'message ai-message'; |
|
|
aiMessage.textContent = randomResponse; |
|
|
chatMessages.appendChild(aiMessage); |
|
|
|
|
|
|
|
|
chatMessages.scrollTop = chatMessages.scrollHeight; |
|
|
}, 1000); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
const styleOptions = document.querySelectorAll('.style-option'); |
|
|
styleOptions.forEach(option => { |
|
|
option.addEventListener('click', function() { |
|
|
|
|
|
styleOptions.forEach(opt => { |
|
|
opt.classList.remove('border-white', 'border-opacity-50'); |
|
|
opt.classList.add('border-transparent'); |
|
|
}); |
|
|
|
|
|
|
|
|
this.classList.remove('border-transparent'); |
|
|
this.classList.add('border-white', 'border-opacity-50'); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
const colorOptions = document.querySelectorAll('.color-option'); |
|
|
colorOptions.forEach(option => { |
|
|
option.addEventListener('click', function() { |
|
|
colorOptions.forEach(opt => opt.classList.remove('selected')); |
|
|
this.classList.add('selected'); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('generateBtn').addEventListener('click', function() { |
|
|
const description = document.getElementById('businessDescription').value; |
|
|
|
|
|
if (description.trim() === '') { |
|
|
alert('Please describe your business to generate a page'); |
|
|
return; |
|
|
} |
|
|
|
|
|
|
|
|
document.getElementById('aiProcessing').classList.remove('hidden'); |
|
|
|
|
|
|
|
|
document.getElementById('aiProcessing').scrollIntoView({ behavior: 'smooth' }); |
|
|
|
|
|
|
|
|
setTimeout(function() { |
|
|
|
|
|
editorPanel.classList.add('open'); |
|
|
|
|
|
|
|
|
chatContainer.classList.add('open'); |
|
|
|
|
|
const aiMessage = document.createElement('div'); |
|
|
aiMessage.className = 'message ai-message'; |
|
|
aiMessage.textContent = "Your landing page is ready! I've opened the editor so you can customize it. Let me know if you need any help!"; |
|
|
chatMessages.appendChild(aiMessage); |
|
|
|
|
|
|
|
|
chatMessages.scrollTop = chatMessages.scrollHeight; |
|
|
}, 3000); |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('startBuildingBtn').addEventListener('click', function() { |
|
|
|
|
|
document.querySelector('.gradient-bg').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=S-Dreamer/landingai" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
