Gerador de Página de Destino SaaS

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Ideafy · AI blog writer</title> <!-- fonts & minimal 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&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: #fafafc; color: #1a1e2b; line-height: 1.5; -webkit-font-smoothing: antialiased; } .container { max-width: 1200px; margin: 0 auto; padding: 0 24px; } /* header */ .navbar { display: flex; justify-content: space-between; align-items: center; padding: 20px 0; flex-wrap: wrap; } .logo { font-weight: 700; font-size: 1.8rem; letter-spacing: -0.02em; color: #1a1e2b; } .logo span { color: #4f46e5; } .nav-links { display: flex; gap: 32px; align-items: center; } .nav-links a { text-decoration: none; color: #2a2f3f; font-weight: 500; font-size: 0.95rem; } .nav-links a:hover { color: #4f46e5; } .btn { display: inline-block; background: #4f46e5; color: white !important; padding: 10px 22px; border-radius: 40px; font-weight: 600; font-size: 0.9rem; border: none; cursor: pointer; transition: all 0.2s; text-decoration: none; } .btn-outline { background: transparent; border: 1.5px solid #cbd5e1; color: #1a1e2b !important; padding: 8px 20px; } .btn-outline:hover { border-color: #4f46e5; color: #4f46e5 !important; } .btn-dark { background: #1a1e2b; } .btn-dark:hover { background: #2d3446; } /* hero */ .hero { display: flex; align-items: center; gap: 40px; padding: 48px 0 64px; flex-wrap: wrap; } .hero-content { flex: 1 1 380px; } .hero-content h1 { font-size: 3.2rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; margin-bottom: 20px; } .hero-content h1 .accent { color: #4f46e5; background: linear-gradient(145deg, #4f46e5, #7c3aed); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .hero-sub { font-size: 1.2rem; color: #4b5563; margin-bottom: 28px; max-width: 480px; } .hero-cta { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 32px; } .hero-note { font-size: 0.9rem; color: #6b7280; display: flex; align-items: center; gap: 8px; } .hero-note i { color: #f59e0b; } /* side-by-side mock */ .hero-visual { flex: 1 1 420px; background: #ffffff; border-radius: 28px; padding: 20px; box-shadow: 0 20px 40px -12px rgba(0,0,0,0.12); border: 1px solid #eef2f6; } .compare-grid { display: flex; gap: 16px; flex-wrap: wrap; } .compare-card { flex: 1 1 180px; background: #f8fafc; border-radius: 18px; padding: 18px 14px; border: 1px solid #e2e8f0; } .compare-card h4 { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; color: #64748b; margin-bottom: 12px; display: flex; align-items: center; gap: 6px; } .compare-card .raw-idea { font-style: italic; color: #334155; background: #fff; padding: 12px; border-radius: 12px; border-left: 4px solid #94a3b8; font-size: 0.9rem; margin-bottom: 8px; } .compare-card .finished-post { background: #fff; padding: 12px; border-radius: 12px; border-left: 4px solid #4f46e5; font-size: 0.9rem; color: #1e293b; } .badge { background: #eef2ff; color: #4f46e5; font-weight: 600; font-size: 0.7rem; padding: 4px 10px; border-radius: 40px; display: inline-block; margin-bottom: 10px; } .arrow-icon { align-self: center; color: #4f46e5; font-size: 1.4rem; } /* features */ .features { padding: 64px 0 40px; } .section-title { font-size: 2.2rem; font-weight: 700; letter-spacing: -0.02em; text-align: center; margin-bottom: 16px; } .section-sub { text-align: center; color: #4b5563; max-width: 600px; margin: 0 auto 48px; } .feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 28px; } .feature-item { background: white; padding: 28px 22px; border-radius: 20px; border: 1px solid #eef2f6; transition: all 0.2s; } .feature-item:hover { box-shadow: 0 12px 24px -12px 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; color: #4f46e5; font-size: 1.5rem; margin-bottom: 18px; } .feature-card h3 { font-size: 1.2rem; margin-bottom: 8px; } .feature-card p { color: #4b5563; font-size: 0.95rem; } /* testimonials */ .testimonials { padding: 56px 0; } .testimonial-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; } .testimonial-card { background: white; border-radius: 20px; padding: 28px; border: 1px solid #eef2f6; box-shadow: 0 4px 12px rgba(0,0,0,0.02); } .stars { color: #f59e0b; margin-bottom: 16px; font-size: 0.9rem; } .testimonial-card blockquote { font-size: 1rem; color: #1e293b; margin-bottom: 20px; } .author { display: flex; align-items: center; gap: 12px; } .author img { width: 44px; height: 44px; border-radius: 50%; background: #e2e8f0; } .author-name { font-weight: 600; font-size: 0.95rem; } .author-role { font-size: 0.8rem; color: #6b7280; } /* pricing */ .pricing { padding: 48px 0 72px; } .pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; align-items: stretch; } .pricing-card { background: white; border-radius: 24px; padding: 32px 28px; border: 1px solid #eef2f6; display: flex; flex-direction: column; } .pricing-card.featured { border: 2px solid #4f46e5; background: #f9f9ff; box-shadow: 0 20px 30px -12px rgba(79,70,229,0.2); } .plan-name { font-weight: 600; font-size: 1.2rem; margin-bottom: 8px; } .plan-price { font-size: 2.8rem; font-weight: 700; letter-spacing: -0.03em; margin: 12px 0; } .plan-price span { font-size: 1rem; font-weight: 400; color: #6b7280; } .plan-desc { color: #4b5563; margin-bottom: 24px; font-size: 0.95rem; } .plan-features { list-style: none; margin-bottom: 28px; flex: 1; } .plan-features li { padding: 8px 0; display: flex; gap: 10px; align-items: center; border-bottom: 1px solid #f1f5f9; font-size: 0.95rem; } .plan-features i { color: #4f46e5; width: 18px; font-size: 0.9rem; } /* CTA */ .cta-section { background: #1a1e2b; border-radius: 40px; padding: 64px 32px; text-align: center; color: white; margin: 24px 0 64px; } .cta-section h2 { font-size: 2.4rem; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 16px; } .cta-section p { color: #cbd5e1; max-width: 500px; margin: 0 auto 32px; } .cta-buttons { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; } .btn-white { background: white; color: #1a1e2b !important; } .btn-white:hover { background: #f1f5f9; } footer { padding: 32px 0; border-top: 1px solid #e2e8f0; color: #6b7280; font-size: 0.9rem; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; } .footer-links a { text-decoration: none; color: #6b7280; margin-left: 24px; } .footer-links a:hover { color: #4f46e5; } @media (max-width: 720px) { .hero { flex-direction: column; } .nav-links { gap: 16px; } } </style> </head> <body> <div class="container"> <!-- nav --> <nav class="navbar"> <div class="logo">idea<span>flow</span></div> <div class="nav-links"> <a href="#">Product</a> <a href="#">Features</a> <a href="#">Pricing</a> <a href="#" class="btn-outline">Log in</a> <a href="#" class="btn">Start free</a> </div> </nav> <!-- hero --> <section class="hero"> <div class="hero-content"> <div class="badge">✨ AI blog writer · v2.0</div> <h1>From idea to <span class="accent">polished post</span> in minutes</h1> <p class="hero-sub">Turn rough thoughts into professional, ready-to-publish blog posts. No more blank pages.</p> <div class="hero-cta"> <a href="#" class="btn btn-dark" style="padding: 14px 32px;">Start writing free →</a> <a href="#" class="btn btn-outline" style="padding: 14px 28px;">Watch demo</a> </div> <div class="hero-note"> <i class="fas fa-check-circle"></i> No credit card required · 3 free posts </div> </div> <div class="hero-visual"> <div class="compare-grid"> <div class="compare-card"> <h4><i class="fas fa-lightbulb"></i> raw idea</h4> <div class="raw-idea">"benefits of meditation for remote workers – focus, stress, productivity"</div> <div style="font-size:0.8rem; color:#64748b; margin-top:8px;">⏱️ 0 min</div> </div> <div class="mock-tag" style="align-self:center;"><i class="fas fa-arrow-right"></i></div> <div class="compare-card"> <h4><i class="fas fa-newspaper"></i> finished blog</h4> <div class="finished-post"> <strong>How Meditation Transforms Remote Work</strong><br> <span style="font-size:0.8rem; color:#475569;">Discover the science-backed focus & calm...</span> </div> <div style="font-size:0.8rem; color:#4f46e5; margin-top:8px;">✅ 2 min · SEO ready</div> </div> </div> </div> </section> <!-- features --> <section class="features" id="features"> <h2 class="section-title">Everything you need to publish</h2> <p class="section-sub">Your ideas, transformed into structured, engaging articles with zero friction.</p> <div class="feature-grid"> <div class="feature-item"> <div class="feature-icon"><i class="fas fa-magic"></i></div> <h3>Idea → outline</h3> <p>Turn a sentence into a structured outline with hooks, subheads, and key points.</p> </div> <div class="feature-item"> <div class="feature-icon"><i class="fas fa-pen-fancy"></i></div> <h3>Human tone</h3> <p>Natural, engaging writing that matches your brand voice. No robotic output.</p> </div> <div class="feature-item"> <div class="feature-icon"><i class="fas fa-image"></i></div> <h3>Auto media</h3> <p>Suggestions for images, quotes, and stats to make your post stand out.</p> </div> <div class="feature-item"> <div class="feature-icon"><i class="fas fa-rocket"></i></div> <h3>One-click publish</h3> <p>Directly export to WordPress, Medium, or Notion. Formatting included.</p> </div> </div> </section> <!-- testimonials --> <section class="testimonials" id="testimonials"> <h2 class="section-title">Loved by 2,000+ writers</h2> <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 note to a published article in 20 minutes. It's like having a co-writer.”</blockquote> <div class="author"> <img src="https://i.pravatar.cc/100?img=5" alt="avatar"> <div> <div class="author-name">Maya Chen</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 preview is genius. I see exactly how my idea transforms. No more blank page.”</blockquote> <div class="author"> <img src="https://i.pravatar.cc/100?img=12" alt="avatar"> <div> <div class="author-name">James Okafor</div> <div class="author-role">Freelance blogger</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>“We use it for our company blog. Output quality is consistently high, saves us 10h/week.”</blockquote> <div class="author"> <img src="https://i.pravatar.cc/100?img=32" alt="avatar"> <div> <div class="author-name">Sofia Almeida</div> <div class="author-role">Marketing manager</div> </div> </div> </div> </div> </section> <!-- pricing --> <section class="pricing" id="pricing"> <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="plan-price">$0 <span>/mo</span></div> <div class="plan-desc">For casual bloggers</div> <ul class="plan-features"> <li><i class="fas fa-check"></i> 3 AI posts/month</li> <li><i class="fas fa-check"></i> Basic templates</li> <li><i class="fas fa-check"></i> 500 words per post</li> <li><i class="fas fa-check"></i> Community support</li> </ul> <a href="#" class="btn btn-outline" style="text-align:center;">Start free</a> </div> <div class="pricing-card featured"> <div class="plan-name">Pro <span style="background:#4f46e5; color:white; padding:2px 10px; border-radius:40px; font-size:0.7rem; margin-left:8px;">POPULAR</span></div> <div class="plan-price">$19 <span>/mo</span></div> <div class="plan-desc">For serious creators</div> <ul class="plan-features"> <li><i class="fas fa-check"></i> Unlimited posts</li> <li><i class="fas fa-check"></i> Advanced tone control</li> <li><i class="fas fa-check"></i> 2,000 words per post</li> <li><i class="fas fa-check"></i> SEO suggestions</li> <li><i class="fas fa-check"></i> Priority support</li> </ul> <a href="#" class="btn" style="text-align:center;">Get Pro</a> </div> <div class="pricing-card"> <div class="plan-name">Business</div> <div class="plan-price">$49 <span>/mo</span></div> <div class="plan-desc">For teams & agencies</div> <ul class="plan-features"> <li><i class="fas fa-check"></i> Everything in Pro</li> <li><i class="fas fa-check"></i> 5 team seats</li> <li><i class="fas fa-check"></i> Brand voice AI</li> <li><i class="fas fa-check"></i> API access</li> </ul> <a href="#" class="btn btn-outline" style="text-align:center;">Contact sales</a> </div> </div> </section> <!-- CTA --> <section class="cta-section"> <h2>Your next blog post is 3 minutes away</h2> <p>Join thousands of creators who turned their ideas into published stories.</p> <div class="cta-buttons"> <a href="#" class="btn btn-white btn-lg" style="padding: 14px 32px;">Start writing free →</a> <a href="#" class="btn btn-outline" style="border-color:#64748b; color:white !important; padding: 14px 28px;">Book a demo</a> </div> </section> <!-- footer --> <footer> <div>© 2025 ideaflow. All rights reserved.</div> <div class="footer-links"> <a href="#">Privacy</a> <a href="#">Terms</a> <a href="#">Twitter</a> </div> </footer> </div> <!-- minimal JS for smooth scroll (no external) --> <script> (function() { // smooth scroll for anchor links document.querySelectorAll('a[href^="#"]').forEach(anchor => { anchor.addEventListener('click', function(e) { const href = this.getAttribute('href'); if (href === "#") return; const target = document.querySelector(href); if (target) { e.preventDefault(); target.scrollIntoView({ behavior: 'smooth', block: 'start' }); } }); }); })(); </script> </body> </html>