Generador de páginas de aterrizaje SaaS

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>IdeaPost - from idea to polished post</title> <!-- Fonts & Icons --> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,400;14..32,500;14..32,600;14..32,700;14..32,800&display=swap" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Inter', sans-serif; background: #f8fafc; color: #0f172a; line-height: 1.5; -webkit-font-smoothing: antialiased; } .container { max-width: 1200px; margin: 0 auto; padding: 0 24px; } /* header / nav */ .navbar { display: flex; justify-content: space-between; align-items: center; padding: 20px 0; flex-wrap: wrap; } .logo { font-weight: 800; font-size: 1.8rem; letter-spacing: -0.02em; color: #0f172a; display: flex; align-items: center; gap: 8px; } .logo i { color: #4f46e5; font-size: 2rem; } .nav-links { display: flex; gap: 32px; align-items: center; } .nav-links a { text-decoration: none; color: #334155; font-weight: 500; font-size: 0.95rem; } .nav-links a:hover { color: #4f46e5; } .btn { display: inline-block; background: #4f46e5; color: white !important; padding: 10px 20px; border-radius: 40px; font-weight: 600; font-size: 0.9rem; border: none; cursor: pointer; transition: all 0.2s; text-decoration: none; border: 1px solid #4f46e5; } .btn-outline { background: transparent; color: #4f46e5 !important; border: 1px solid #cbd5e1; } .btn-outline:hover { background: #f1f5f9; border-color: #4f46e5; } .btn-primary:hover { background: #4338ca; border-color: #4338ca; } /* hero */ .hero { padding: 60px 0 40px; } .hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; } .hero h1 { font-size: 3.2rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; margin-bottom: 20px; } .hero h1 span { color: #4f46e5; position: relative; } .hero p { font-size: 1.2rem; color: #475569; margin-bottom: 30px; max-width: 90%; } .cta-group { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 30px; } .cta-group .btn { padding: 14px 28px; font-size: 1rem; } .micro-proof { display: flex; gap: 24px; color: #64748b; font-size: 0.9rem; font-weight: 500; } .micro-proof i { color: #4f46e5; margin-right: 6px; } /* side-by-side demo */ .demo-card { background: white; border-radius: 24px; padding: 20px; box-shadow: 0 20px 40px -12px rgba(0,0,0,0.15); border: 1px solid #e2e8f0; } .demo-label { display: flex; justify-content: space-between; margin-bottom: 16px; font-size: 0.8rem; font-weight: 600; color: #64748b; letter-spacing: 0.02em; } .demo-box { background: #f1f5f9; border-radius: 16px; padding: 16px; margin-bottom: 12px; } .demo-box.raw { border-left: 4px solid #94a3b8; } .demo-box.polished { border-left: 4px solid #4f46e5; background: #f8fafc; } .demo-box p { font-size: 0.95rem; color: #1e293b; margin: 0; } .demo-box .tag { display: inline-block; background: #e2e8f0; padding: 4px 10px; border-radius: 30px; font-size: 0.7rem; font-weight: 600; color: #334155; margin-bottom: 10px; } .demo-box.polished .tag { background: #e0e7ff; color: #4338ca; } .arrow-icon { text-align: center; font-size: 1.5rem; color: #4f46e5; margin: 8px 0; } /* features */ .features { padding: 80px 0; } .section-title { text-align: center; font-size: 2.2rem; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 16px; } .section-sub { text-align: center; color: #475569; max-width: 600px; margin: 0 auto 50px; font-size: 1.1rem; } .feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; } .feature-card { background: white; padding: 30px 24px; border-radius: 20px; border: 1px solid #e2e8f0; transition: all 0.2s; } .feature-card:hover { box-shadow: 0 12px 30px -8px rgba(0,0,0,0.1); border-color: #c7d2fe; } .feature-icon { background: #eef2ff; width: 48px; height: 48px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: #4f46e5; margin-bottom: 20px; } .feature-card h3 { font-size: 1.2rem; font-weight: 600; margin-bottom: 10px; } .feature-card p { color: #475569; font-size: 0.95rem; } /* testimonials */ .testimonials { background: #ffffff; padding: 80px 0; border-block: 1px solid #e2e8f0; } .testimonial-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; } .testimonial-card { background: #f8fafc; border-radius: 20px; padding: 28px; border: 1px solid #e2e8f0; } .testimonial-card .stars { color: #f59e0b; margin-bottom: 16px; font-size: 0.9rem; } .testimonial-card blockquote { font-size: 0.95rem; color: #1e293b; margin-bottom: 20px; line-height: 1.6; } .testimonial-author { display: flex; align-items: center; gap: 12px; } .testimonial-author img { width: 44px; height: 44px; border-radius: 50%; background: #cbd5e1; } .author-name { font-weight: 600; font-size: 0.9rem; } .author-role { font-size: 0.8rem; color: #64748b; } /* pricing */ .pricing { padding: 80px 0; } .pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 40px; } .pricing-card { background: white; border-radius: 24px; padding: 32px; border: 1px solid #e2e8f0; display: flex; flex-direction: column; } .pricing-card.featured { border: 2px solid #4f46e5; box-shadow: 0 20px 40px -12px rgba(79,70,229,0.2); position: relative; } .pricing-card .plan-name { font-weight: 600; font-size: 1.1rem; margin-bottom: 8px; } .pricing-card .price { font-size: 2.8rem; font-weight: 800; letter-spacing: -0.03em; margin-bottom: 20px; } .pricing-card .price span { font-size: 1rem; font-weight: 400; color: #64748b; } .pricing-card ul { list-style: none; margin-bottom: 30px; } .pricing-card li { padding: 8px 0; border-bottom: 1px solid #f1f5f9; font-size: 0.95rem; display: flex; align-items: center; gap: 10px; } .pricing-card li i { color: #4f46e5; font-size: 0.8rem; width: 18px; } .pricing-card .btn { margin-top: auto; text-align: center; } /* CTA */ .cta-section { background: #0f172a; color: white; padding: 80px 0; border-radius: 40px; margin: 40px 0 80px; text-align: center; } .cta-section h2 { font-size: 2.5rem; font-weight: 700; margin-bottom: 16px; } .cta-section p { color: #cbd5e1; font-size: 1.2rem; margin-bottom: 30px; } .cta-section .btn { background: white; color: #0f172a !important; border: none; font-size: 1.1rem; padding: 16px 36px; } .cta-section .btn:hover { background: #e2e8f0; } /* footer */ .footer { padding: 30px 0; border-top: 1px solid #e2e8f0; color: #64748b; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 20px; } .footer a { color: #64748b; text-decoration: none; margin-left: 20px; } /* responsive */ @media (max-width: 900px) { .hero-grid, .feature-grid, .testimonial-grid, .pricing-grid { grid-template-columns: 1fr; } .hero h1 { font-size: 2.5rem; } .nav-links { display: none; } } </style> </head> <body> <div class="container"> <!-- header --> <nav class="navbar"> <div class="logo"> <i class="fas fa-pen-fancy"></i> IdeaPost </div> <div class="nav-links"> <a href="#">Product</a> <a href="#">Testimonials</a> <a href="#">Pricing</a> <a href="#" class="btn-outline btn">Log in</a> <a href="#" class="btn btn-primary">Start free</a> </div> </nav> <!-- hero --> <section class="hero"> <div class="hero-grid"> <div> <h1>From idea to <span>polished post</span> in minutes</h1> <p>Turn rough thoughts into professional, publication-ready blog posts. AI-powered writing that sounds like you.</p> <div class="cta-group"> <a href="#" class="btn btn-primary">Start writing free →</a> <a href="#" class="btn btn-outline">See a demo</a> </div> <div class="micro-proof"> <span><i class="fas fa-check-circle"></i> No credit card</span> <span><i class="fas fa-star"></i> 4.9/5 from 2,000+</span> <span><i class="fas fa-bolt"></i> 10x faster</span> </div> </div> <div class="demo-card"> <div class="demo-label"> <span>📝 RAW IDEA</span> <span>✨ FINISHED POST</span> </div> <div class="demo-box raw"> <span class="tag">💡 idea</span> <p>“remote work productivity hacks – focus, async, no burnout, tools”</p> </div> <div class="arrow-icon"><i class="fas fa-arrow-down"></i></div> <div class="demo-box polished"> <span class="tag">📄 blog draft</span> <p><strong>10 Remote Work Productivity Hacks</strong> - Discover async communication, deep work rituals, and the best tools to stay focused without burning out. Backed by real workflows.</p> </div> </div> </div> </section> </div> <!-- features --> <section class="features"> <div class="container"> <h2 class="section-title">Everything you need to publish</h2> <p class="section-sub">IdeaPost transforms your notes, voice memos, or bullet points into structured, engaging articles.</p> <div class="feature-grid"> <div class="feature-card"> <div class="feature-icon"><i class="fas fa-magic"></i></div> <h3>Idea → outline → draft</h3> <p>Just paste a messy idea. Our AI structures it into a clear outline and writes a full draft in your tone.</p> </div> <div class="feature-card"> <div class="feature-icon"><i class="fas fa-language"></i></div> <h3>Your voice, preserved</h3> <p>Train the AI on your past posts. It learns your style, vocabulary, and quirks – so it sounds like you.</p> </div> <div class="feature-card"> <div class="feature-icon"><i class="fas fa-image"></i></div> <h3>Rich media suggestions</h3> <p>Automatically suggests images, pull quotes, and headings to make your post visually engaging.</p> </div> <div class="feature-card"> <div class="feature-icon"><i class="fas fa-rocket"></i></div> <h3>One-click publishing</h3> <p>Connect WordPress, Ghost, or Medium. Export with formatting intact – no copy-paste mess.</p> </div> <div class="feature-card"> <div class="feature-icon"><i class="fas fa-chart-line"></i></div> <h3>SEO built-in</h3> <p>Meta titles, descriptions, and keyword suggestions generated automatically for every post.</p> </div> <div class="feature-card"> <div class="feature-icon"><i class="fas fa-users"></i></div> <h3>Team collaboration</h3> <p>Share drafts, leave comments, and get feedback in real time – all inside IdeaPost.</p> </div> </div> </div> </section> <!-- testimonials --> <section class="testimonials"> <div class="container"> <h2 class="section-title">Loved by 2,000+ content creators</h2> <p class="section-sub">From solo bloggers to marketing teams.</p> <div class="testimonial-grid"> <div class="testimonial-card"> <div class="stars"><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> <blockquote>“I went from a messy voice memo to a published article in 20 minutes. It’s like having a writing partner who never sleeps.”</blockquote> <div class="testimonial-author"> <img src="https://i.pravatar.cc/100?img=5" alt="author"> <div> <div class="author-name">Maya Chen</div> <div class="author-role">Freelance writer</div> </div> </div> </div> <div class="testimonial-card"> <div class="stars"><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> <blockquote>“Our team produces 3x more content. The tone is consistent, and the drafts are actually usable – not robotic.”</blockquote> <div class="testimonial-author"> <img src="https://i.pravatar.cc/100?img=8" alt="author"> <div> <div class="author-name">David Okafor</div> <div class="author-role">Content lead, SaaS</div> </div> </div> </div> <div class="testimonial-card"> <div class="stars"><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> <blockquote>“The side-by-side idea to post feature is magic. It captures my voice perfectly. I cancelled my other AI tools.”</blockquote> <div class="testimonial-author"> <img src="https://i.pravatar.cc/100?img=12" alt="author"> <div> <div class="author-name">Sofia Reyes</div> <div class="author-role">Newsletter creator</div> </div> </div> </div> </div> </div> </section> <!-- pricing --> <section class="pricing"> <div class="container"> <h2 class="section-title">Simple, transparent pricing</h2> <p class="section-sub">Start free, upgrade when you’re ready.</p> <div class="pricing-grid"> <div class="pricing-card"> <div class="plan-name">Starter</div> <div class="price">$0 <span>/mo</span></div> <ul> <li><i class="fas fa-check"></i> 5 AI posts/month</li> <li><i class="fas fa-check"></i> Basic tone matching</li> <li><i class="fas fa-check"></i> Export to Markdown</li> <li><i class="fas fa-check"></i> Community support</li> </ul> <a href="#" class="btn btn-outline">Start for free</a> </div> <div class="pricing-card featured"> <div class="plan-name">Pro <span style="background:#e0e7ff; font-size:0.7rem; padding:2px 8px; border-radius:20px; margin-left:8px;">POPULAR</span></div> <div class="price">$29 <span>/mo</span></div> <ul> <li><i class="fas fa-check"></i> Unlimited posts</li> <li><i class="fas fa-check"></i> Advanced voice cloning</li> <li><i class="fas fa-check"></i> SEO & media suggestions</li> <li><i class="fas fa-check"></i> WordPress / Ghost integration</li> <li><i class="fas fa-check"></i> Priority support</li> </ul> <a href="#" class="btn btn-primary">Start 7-day trial</a> </div> <div class="pricing-card"> <div class="plan-name">Team</div> <div class="price">$79 <span>/mo</span></div> <ul> <li><i class="fas fa-check"></i> Everything in Pro</li> <li><i class="fas fa-check"></i> 5 team members</li> <li><i class="fas fa-check"></i> Collaborative workspace</li> <li><i class="fas fa-check"></i> Analytics dashboard</li> <li><i class="fas fa-check"></i> SSO & advanced admin</li> </ul> <a href="#" class="btn btn-outline">Contact sales</a> </div> </div> </div> </section> <!-- CTA --> <div class="container"> <section class="cta-section"> <h2>Your next post is 10 minutes away</h2> <p>Join 2,000+ writers who turned their ideas into published stories.</p> <a href="#" class="btn">Start creating free →</a> </section> </div> <!-- footer --> <div class="container"> <div class="footer"> <div>© 2025 IdeaPost, Inc.</div> <div> <a href="#">Privacy</a> <a href="#">Terms</a> <a href="#">Twitter</a> <a href="#">LinkedIn</a> </div> </div> </div> <!-- simple JS for interactivity (smooth scroll, hover effects) --> <script> // just a small touch: add click effect on buttons document.querySelectorAll('.btn').forEach(btn => { btn.addEventListener('click', (e) => { e.preventDefault(); // simulate a signup action (demo) alert('✨ IdeaPost demo: this would open signup flow.'); }); }); </script> </body> </html>