Générateur de page d'atterrissage SaaS
De Wikiprompt, l’encyclopédie libre de prompts
7 avr. 2025
Générateur de page d'atterrissage SaaS Invite pour générer une page de destination SaaS à fort taux de conversion avec section héros, fonctionnalités, témoignages, tarifs et appel à l'action, en utilisant HTML/CSS/JS.
Contenu du PromptEnregistrer
🌐
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>IdeaPost · AI blog writer</title>
<!-- Font & 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-color: #f9fafc;
color: #1e293b;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 24px;
}
/* header / nav */
.navbar {
padding: 20px 0;
display: flex;
justify-content: space-between;
align-items: center;
}
.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-color: #4f46e5;
color: white;
padding: 12px 24px;
border-radius: 40px;
font-weight: 600;
font-size: 0.95rem;
border: none;
cursor: pointer;
transition: all 0.2s;
text-decoration: none;
border: 1px solid transparent;
}
.btn-outline {
background: transparent;
color: #4f46e5;
border: 1px solid #c7d2fe;
}
.btn-outline:hover {
background: #eef2ff;
}
.btn-primary:hover {
background-color: #4338ca;
box-shadow: 0 8px 20px rgba(79, 70, 229, 0.2);
}
/* HERO */
.hero {
padding: 60px 0 40px;
}
.hero-grid {
display: grid;
grid-template-columns: 1.1fr 0.9fr;
gap: 48px;
align-items: center;
}
.hero h1 {
font-size: 3.2rem;
font-weight: 800;
line-height: 1.1;
letter-spacing: -0.03em;
color: #0f172a;
margin-bottom: 20px;
}
.hero h1 span {
background: linear-gradient(135deg, #4f46e5, #7c3aed);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hero-sub {
font-size: 1.2rem;
color: #475569;
margin-bottom: 32px;
max-width: 90%;
}
.cta-group {
display: flex;
gap: 16px;
flex-wrap: wrap;
margin-bottom: 24px;
}
.trusted {
display: flex;
align-items: center;
gap: 16px;
color: #64748b;
font-size: 0.9rem;
}
.avatars {
display: flex;
}
.avatars img {
width: 36px;
height: 36px;
border-radius: 50%;
border: 2px solid white;
margin-left: -8px;
}
.avatars img:first-child {
margin-left: 0;
}
/* side-by-side demo card */
.demo-card {
background: white;
border-radius: 24px;
padding: 24px;
box-shadow: 0 20px 40px -12px rgba(0,0,0,0.1);
border: 1px solid #e2e8f0;
}
.demo-label {
display: flex;
justify-content: space-between;
font-size: 0.8rem;
font-weight: 600;
color: #64748b;
letter-spacing: 0.02em;
margin-bottom: 16px;
}
.demo-row {
display: flex;
gap: 16px;
align-items: stretch;
}
.demo-box {
flex: 1;
background: #f8fafc;
border-radius: 16px;
padding: 16px;
border: 1px solid #e2e8f0;
}
.demo-box h4 {
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.03em;
color: #4f46e5;
margin-bottom: 12px;
}
.raw-idea {
background: #f1f5f9;
padding: 12px;
border-radius: 12px;
font-style: italic;
color: #334155;
font-size: 0.95rem;
border-left: 4px solid #94a3b8;
}
.finished-post {
background: white;
padding: 12px;
border-radius: 12px;
border: 1px solid #e2e8f0;
font-size: 0.9rem;
color: #1e293b;
box-shadow: 0 2px 8px rgba(0,0,0,0.02);
}
.finished-post strong {
color: #0f172a;
}
.badge {
background: #dcfce7;
color: #166534;
font-size: 0.7rem;
font-weight: 600;
padding: 4px 8px;
border-radius: 40px;
display: inline-block;
margin-bottom: 8px;
}
/* features section */
.features {
padding: 80px 0;
}
.section-title {
text-align: center;
max-width: 700px;
margin: 0 auto 48px;
}
.section-title h2 {
font-size: 2.5rem;
font-weight: 700;
letter-spacing: -0.02em;
color: #0f172a;
margin-bottom: 16px;
}
.section-title p {
color: #475569;
font-size: 1.1rem;
}
.feature-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
}
.feature-item {
background: white;
padding: 32px 24px;
border-radius: 20px;
border: 1px solid #e2e8f0;
transition: all 0.2s;
}
.feature-item:hover {
box-shadow: 0 12px 30px -8px rgba(0,0,0,0.08);
transform: translateY(-4px);
}
.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: 20px;
}
.feature-item h3 {
font-size: 1.2rem;
font-weight: 600;
margin-bottom: 8px;
color: #0f172a;
}
.feature-item p {
color: #475569;
font-size: 0.95rem;
}
/* testimonials */
.testimonials {
background: #ffffff;
padding: 80px 0;
border-top: 1px solid #e2e8f0;
border-bottom: 1px solid #e2e8f0;
}
.testimonial-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
}
.testimonial-card {
background: #f8fafc;
padding: 28px;
border-radius: 20px;
border: 1px solid #e2e8f0;
}
.stars {
color: #f59e0b;
margin-bottom: 16px;
font-size: 0.9rem;
}
.testimonial-card p {
font-size: 0.95rem;
color: #334155;
margin-bottom: 24px;
}
.testimonial-author {
display: flex;
align-items: center;
gap: 12px;
}
.testimonial-author img {
width: 44px;
height: 44px;
border-radius: 50%;
}
.author-name {
font-weight: 600;
color: #0f172a;
}
.author-role {
font-size: 0.8rem;
color: #64748b;
}
/* pricing */
.pricing {
padding: 80px 0;
}
.pricing-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
margin-top: 40px;
}
.pricing-card {
background: white;
border-radius: 24px;
padding: 32px;
border: 1px solid #e2e8f0;
transition: all 0.2s;
}
.pricing-card.popular {
border: 2px solid #4f46e5;
box-shadow: 0 20px 40px -12px rgba(79, 70, 229, 0.2);
position: relative;
}
.popular-badge {
position: absolute;
top: -14px;
left: 50%;
transform: translateX(-50%);
background: #4f46e5;
color: white;
font-size: 0.75rem;
font-weight: 600;
padding: 6px 16px;
border-radius: 40px;
}
.price {
font-size: 2.8rem;
font-weight: 800;
color: #0f172a;
margin: 16px 0 8px;
}
.price span {
font-size: 1rem;
font-weight: 400;
color: #64748b;
}
.pricing-card ul {
list-style: none;
margin: 24px 0 32px;
}
.pricing-card li {
padding: 8px 0;
color: #334155;
display: flex;
align-items: center;
gap: 10px;
font-size: 0.95rem;
}
.pricing-card li i {
color: #4f46e5;
font-size: 0.8rem;
}
.btn-block {
width: 100%;
text-align: center;
}
/* CTA */
.final-cta {
background: #0f172a;
border-radius: 32px;
padding: 64px 40px;
text-align: center;
margin: 40px 0 80px;
}
.final-cta h2 {
color: white;
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 16px;
}
.final-cta p {
color: #cbd5e1;
font-size: 1.1rem;
margin-bottom: 32px;
}
.final-cta .btn {
background: white;
color: #0f172a;
font-size: 1rem;
padding: 16px 40px;
}
.final-cta .btn:hover {
background: #e2e8f0;
}
footer {
padding: 40px 0;
border-top: 1px solid #e2e8f0;
color: #64748b;
font-size: 0.85rem;
display: flex;
justify-content: space-between;
align-items: center;
}
/* 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>
<header class="container">
<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 btn-outline">Sign in</a>
<a href="#" class="btn btn-primary">Start free</a>
</div>
</nav>
</header>
<main>
<!-- HERO -->
<section class="hero container">
<div class="hero-grid">
<div>
<h1>From idea to <span>polished post</span> in minutes</h1>
<p class="hero-sub">Turn rough thoughts into professional, ready-to-publish blog posts. AI that writes like you - but faster.</p>
<div class="cta-group">
<a href="#" class="btn btn-primary">Start writing free →</a>
<a href="#" class="btn btn-outline">Watch demo</a>
</div>
<div class="trusted">
<div class="avatars">
<img src="https://i.pravatar.cc/100?img=1" alt="user">
<img src="https://i.pravatar.cc/100?img=2" alt="user">
<img src="https://i.pravatar.cc/100?img=3" alt="user">
<img src="https://i.pravatar.cc/100?img=4" alt="user">
</div>
<span>Trusted by 4,000+ writers</span>
</div>
</div>
<div class="demo-card">
<div class="demo-label">
<span>RAW IDEA</span>
<span>FINISHED BLOG</span>
</div>
<div class="demo-row">
<div class="demo-box">
<h4>📝 input</h4>
<div class="raw-idea">
"Remote work productivity tips - focus on async communication, deep work blocks, and no-meeting Wednesdays."
</div>
</div>
<div class="demo-box">
<h4>✨ output</h4>
<div class="finished-post">
<span class="badge">AI GENERATED</span>
<strong>How to Reclaim Your Focus</strong> - The ultimate guide to async workflows, deep work rituals, and why no-meeting Wednesdays boost team output by 37%.
</div>
</div>
</div>
</div>
</div>
</section>
<!-- FEATURES -->
<section class="features container">
<div class="section-title">
<h2>Everything you need to publish</h2>
<p>From first draft to final edit - IdeaPost handles the heavy lifting.</p>
</div>
<div class="feature-grid">
<div class="feature-item">
<div class="feature-icon"><i class="fas fa-lightbulb"></i></div>
<h3>Idea-to-outline</h3>
<p>Drop a sentence, get a structured outline with headings, subheadings, and key points.</p>
</div>
<div class="feature-item">
<div class="feature-icon"><i class="fas fa-magic"></i></div>
<h3>Human-like tone</h3>
<p>Choose voice, audience, and style. The output reads like you wrote it - not a robot.</p>
</div>
<div class="feature-item">
<div class="feature-icon"><i class="fas fa-rocket"></i></div>
<h3>SEO-ready</h3>
<p>Meta descriptions, keyword suggestions, and internal links - built into every draft.</p>
</div>
</div>
</section>
<!-- TESTIMONIALS -->
<section class="testimonials">
<div class="container">
<div class="section-title">
<h2>Loved by content teams</h2>
<p>Join thousands of bloggers, marketers, and founders.</p>
</div>
<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>
<p>"IdeaPost cut my writing time from 4 hours to 30 minutes. The quality is genuinely impressive."</p>
<div class="testimonial-author">
<img src="https://i.pravatar.cc/100?img=5" alt="avatar">
<div>
<div class="author-name">Sarah Chen</div>
<div class="author-role">Content Lead, Growthly</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>
<p>"Finally an AI that understands nuance. My blog traffic is up 2x since switching."</p>
<div class="testimonial-author">
<img src="https://i.pravatar.cc/100?img=6" alt="avatar">
<div>
<div class="author-name">Marcus Rivera</div>
<div class="author-role">Founder, DevPath</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>
<p>"The side-by-side preview is genius. I see exactly what I'll get before generating."</p>
<div class="testimonial-author">
<img src="https://i.pravatar.cc/100?img=7" alt="avatar">
<div>
<div class="author-name">Elena Petrova</div>
<div class="author-role">SEO Manager, Brightline</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- PRICING -->
<section class="pricing container">
<div class="section-title">
<h2>Simple, transparent pricing</h2>
<p>Start free, upgrade when you're ready.</p>
</div>
<div class="pricing-grid">
<div class="pricing-card">
<h3>Starter</h3>
<div class="price">$0<span>/mo</span></div>
<ul>
<li><i class="fas fa-check"></i> 5 posts / month</li>
<li><i class="fas fa-check"></i> Basic tone control</li>
<li><i class="fas fa-check"></i> 1 user</li>
</ul>
<a href="#" class="btn btn-outline btn-block">Start free</a>
</div>
<div class="pricing-card popular">
<div class="popular-badge">MOST POPULAR</div>
<h3>Pro</h3>
<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 tone & voice</li>
<li><i class="fas fa-check"></i> SEO optimization</li>
<li><i class="fas fa-check"></i> 5 users</li>
</ul>
<a href="#" class="btn btn-primary btn-block">Start 7-day trial</a>
</div>
<div class="pricing-card">
<h3>Business</h3>
<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> API access</li>
<li><i class="fas fa-check"></i> Custom workflows</li>
<li><i class="fas fa-check"></i> Unlimited users</li>
</ul>
<a href="#" class="btn btn-outline btn-block">Contact sales</a>
</div>
</div>
</section>
<!-- FINAL CTA -->
<section class="container">
<div class="final-cta">
<h2>Your next blog post is 60 seconds away</h2>
<p>Join 4,000+ creators who turned their ideas into published posts.</p>
<a href="#" class="btn">Start creating free →</a>
</div>
</section>
</main>
<footer class="container">
<div>© 2025 IdeaPost. All rights reserved.</div>
<div><i class="fab fa-twitter"></i> <i class="fab fa-linkedin"></i> <i class="fab fa-github"></i></div>
</footer>
</body>
</html>
Connectez-vous pour voir le prompt complet
Continuer avec:
En vous connectant, vous acceptez nos Conditions et Confidentialité
Utilisation
Ce prompt est conçu pour être utilisé avec marketing. Copiez le contenu ci-dessus et collez-le dans votre outil d’IA préféré.
Pour de meilleurs résultats, personnalisez les espaces réservés (indiqués par des crochets ou des majuscules) selon vos besoins.
Références
- Catégorie: Prompts marketing
- Source: https://x.com/itsPaulAi/status/1909339758133977512
Discussion
0 commentaires