SaaS-Landingpage-Generator-Prompt
Von Wikiprompt, der freien Prompt-Enzyklopädie
7. Apr. 2025
SaaS-Landingpage-Generator-Prompt Ein Prompt zur Generierung einer hochkonvertierenden SaaS-Landingpage mit Hero-Bereich, Funktionen, Testimonials, Preisen und Call-to-Action, unter Verwendung von HTML/CSS/JS.
Prompt-InhaltSpeichern
🌐
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PostForge · from idea to polished post</title>
<!-- Google Fonts: Inter for clean SaaS look -->
<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">
<!-- Font Awesome 6 (free icons) -->
<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', -apple-system, BlinkMacSystemFont, sans-serif;
background: #ffffff;
color: #0f172a;
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;
border-bottom: 1px solid #e9eef3;
}
.logo {
font-weight: 800;
font-size: 1.6rem;
letter-spacing: -0.02em;
display: flex;
align-items: center;
gap: 8px;
}
.logo i {
color: #4f46e5;
font-size: 1.8rem;
}
.nav-links {
display: flex;
gap: 32px;
font-weight: 500;
color: #334155;
}
.nav-links a {
text-decoration: none;
color: inherit;
transition: color 0.2s;
}
.nav-links a:hover {
color: #4f46e5;
}
.btn {
display: inline-block;
background: #4f46e5;
color: white;
font-weight: 600;
padding: 10px 20px;
border-radius: 40px;
text-decoration: none;
transition: background 0.2s, transform 0.1s;
border: none;
cursor: pointer;
font-size: 0.95rem;
}
.btn:hover {
background: #4338ca;
transform: translateY(-1px);
}
.btn-outline {
background: transparent;
border: 1px solid #cbd5e1;
color: #1e293b;
font-weight: 600;
}
.btn-outline:hover {
background: #f8fafc;
border-color: #94a3b8;
}
.btn-lg {
padding: 14px 32px;
font-size: 1.05rem;
}
/* hero */
.hero {
padding: 64px 0 56px;
background: linear-gradient(180deg, #fbfdff 0%, #ffffff 100%);
}
.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.15;
letter-spacing: -0.03em;
margin-bottom: 24px;
}
.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%;
}
.hero-cta {
display: flex;
gap: 16px;
align-items: center;
flex-wrap: wrap;
margin-bottom: 24px;
}
.hero-note {
font-size: 0.9rem;
color: #64748b;
display: flex;
align-items: center;
gap: 8px;
}
.hero-note i {
color: #22c55e;
}
/* side-by-side idea vs post */
.compare-card {
background: white;
border-radius: 20px;
box-shadow: 0 20px 40px -12px rgba(0,0,0,0.1);
padding: 16px;
border: 1px solid #e2e8f0;
}
.compare-label {
display: flex;
justify-content: space-between;
font-size: 0.8rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
color: #64748b;
margin-bottom: 12px;
}
.compare-box {
background: #f8fafc;
border-radius: 14px;
padding: 16px;
margin-bottom: 12px;
border: 1px solid #eef2f6;
}
.compare-box.dark {
background: #0f172a;
border-color: #1e293b;
}
.idea-text {
font-size: 0.95rem;
color: #1e293b;
font-style: italic;
border-left: 3px solid #94a3b8;
padding-left: 12px;
}
.post-text h4 {
color: #a5b4fc;
font-size: 0.8rem;
letter-spacing: 0.02em;
margin-bottom: 6px;
}
.post-text p {
color: #e2e8f0;
font-size: 0.9rem;
}
.badge {
background: #4f46e5;
color: white;
font-size: 0.7rem;
font-weight: 700;
padding: 4px 10px;
border-radius: 30px;
letter-spacing: 0.02em;
}
/* features */
.features {
padding: 80px 0;
background: #ffffff;
}
.section-title {
text-align: center;
max-width: 680px;
margin: 0 auto 48px;
}
.section-title h2 {
font-size: 2.4rem;
font-weight: 700;
letter-spacing: -0.02em;
margin-bottom: 16px;
}
.section-title p {
color: #475569;
font-size: 1.1rem;
}
.features-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
}
.feature-card {
background: #f9fafc;
border-radius: 20px;
padding: 28px 24px;
border: 1px solid #eef2f6;
transition: all 0.2s;
}
.feature-card:hover {
border-color: #c7d2fe;
box-shadow: 0 12px 24px -12px rgba(79,70,229,0.15);
}
.feature-icon {
background: #eef2ff;
width: 48px;
height: 48px;
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
color: #4f46e5;
font-size: 1.5rem;
}
.feature-card h3 {
font-size: 1.3rem;
font-weight: 600;
margin-bottom: 10px;
}
.feature-card p {
color: #475569;
font-size: 0.95rem;
}
/* testimonials */
.testimonials {
background: #f8fafc;
padding: 80px 0;
border-top: 1px solid #e9eef3;
border-bottom: 1px solid #e9eef3;
}
.testimonial-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.testimonial-card {
background: white;
border-radius: 20px;
padding: 28px;
box-shadow: 0 4px 12px rgba(0,0,0,0.03);
border: 1px solid #eef2f6;
}
.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;
}
.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.9rem;
}
.author-title {
font-size: 0.8rem;
color: #64748b;
}
/* pricing */
.pricing {
padding: 80px 0;
background: #ffffff;
}
.pricing-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
align-items: center;
}
.pricing-card {
background: #f9fafc;
border-radius: 24px;
padding: 32px 28px;
border: 1px solid #e9eef3;
transition: 0.2s;
}
.pricing-card.featured {
background: #0f172a;
color: white;
border-color: #1e293b;
transform: scale(1.02);
box-shadow: 0 20px 40px -12px rgba(0,0,0,0.2);
}
.pricing-card h3 {
font-size: 1.2rem;
font-weight: 600;
margin-bottom: 8px;
}
.price {
font-size: 2.8rem;
font-weight: 800;
letter-spacing: -0.03em;
margin: 16px 0;
}
.price span {
font-size: 1rem;
font-weight: 400;
color: #64748b;
}
.pricing-card.featured .price span {
color: #94a3b8;
}
.pricing-features {
list-style: none;
margin: 24px 0 32px;
}
.pricing-features li {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 12px;
font-size: 0.95rem;
}
.pricing-features i {
color: #22c55e;
font-size: 0.9rem;
}
.pricing-card.featured .pricing-features i {
color: #a5b4fc;
}
/* CTA */
.cta-section {
padding: 80px 0;
background: linear-gradient(135deg, #0f172a, #1e1b4b);
color: white;
text-align: center;
}
.cta-section h2 {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 16px;
letter-spacing: -0.02em;
}
.cta-section p {
font-size: 1.2rem;
color: #cbd5e1;
max-width: 600px;
margin: 0 auto 32px;
}
.cta-section .btn {
background: white;
color: #0f172a;
font-size: 1.1rem;
padding: 16px 40px;
}
.cta-section .btn:hover {
background: #e2e8f0;
}
.cta-note {
margin-top: 20px;
font-size: 0.9rem;
color: #94a3b8;
}
/* footer */
.footer {
background: #ffffff;
padding: 32px 0;
border-top: 1px solid #e9eef3;
color: #64748b;
font-size: 0.9rem;
}
.footer-flex {
display: flex;
justify-content: space-between;
align-items: center;
}
.footer-links {
display: flex;
gap: 24px;
}
.footer-links a {
text-decoration: none;
color: #64748b;
}
.footer-links a:hover {
color: #4f46e5;
}
/* responsive */
@media (max-width: 900px) {
.hero-grid {
grid-template-columns: 1fr;
}
.features-grid, .testimonial-grid, .pricing-grid {
grid-template-columns: 1fr;
}
.navbar {
flex-wrap: wrap;
gap: 16px;
}
.nav-links {
display: none;
}
.hero h1 {
font-size: 2.5rem;
}
}
</style>
</head>
<body>
<!-- header -->
<header class="container navbar">
<div class="logo">
<i class="fas fa-pen-fancy"></i> PostForge
</div>
<div class="nav-links">
<a href="#">Features</a>
<a href="#">Testimonials</a>
<a href="#">Pricing</a>
</div>
<a href="#" class="btn">Get started</a>
</header>
<!-- hero -->
<section class="hero">
<div class="container hero-grid">
<div>
<h1>From idea to <span>polished post</span> in minutes</h1>
<p class="hero-sub">Turn rough thoughts into publication-ready blog posts. PostForge uses advanced AI to structure, refine, and elevate your content - no more staring at a blank page.</p>
<div class="hero-cta">
<a href="#" class="btn btn-lg">Start writing free</a>
<a href="#" class="btn btn-outline btn-lg">Watch demo</a>
</div>
<div class="hero-note">
<i class="fas fa-check-circle"></i> No credit card required · Free 14-day trial
</div>
</div>
<!-- side-by-side comparison -->
<div class="compare-card">
<div class="compare-label">
<span>📝 raw idea</span>
<span class="badge">✨ AI polished</span>
</div>
<div class="compare-box">
<div class="idea-text">
"coffee shop wifi is terrible for remote workers. we need a list of cafes with good wifi and outlets. maybe mention noise levels too."
</div>
</div>
<div class="compare-box dark">
<div class="post-text">
<h4><i class="fas fa-magic" style="margin-right: 6px;"></i> POSTFORGE OUTPUT</h4>
<p><strong>The Remote Worker’s Guide to Cafés with Reliable Wi-Fi</strong> - We tested 20 coffee shops across the city for connection speed, outlet availability, and noise levels. Here are the top 5 that let you work all day without a dead battery or lag.</p>
</div>
</div>
</div>
</div>
</section>
<!-- features -->
<section class="features" id="features">
<div class="container">
<div class="section-title">
<h2>Everything you need to publish faster</h2>
<p>PostForge doesn't just rewrite - it understands context, tone, and your audience.</p>
</div>
<div class="features-grid">
<div class="feature-card">
<div class="feature-icon"><i class="fas fa-lightbulb"></i></div>
<h3>Idea → outline</h3>
<p>Drop a sentence or a few bullet points. PostForge instantly creates a structured outline with headings, key points, and flow.</p>
</div>
<div class="feature-card">
<div class="feature-icon"><i class="fas fa-pen-nib"></i></div>
<h3>Human-like writing</h3>
<p>No robotic phrases. The AI adapts to your voice, whether you're writing a deep-dive or a quick listicle.</p>
</div>
<div class="feature-card">
<div class="feature-icon"><i class="fas fa-chart-line"></i></div>
<h3>SEO-ready structure</h3>
<p>Headings, meta descriptions, and keyword suggestions are built in. Your post is optimized before you export.</p>
</div>
</div>
</div>
</section>
<!-- testimonials -->
<section class="testimonials" id="testimonials">
<div class="container">
<div class="section-title">
<h2>Trusted by 2,000+ content teams</h2>
<p>From solo bloggers to marketing teams at scale.</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>
<blockquote>“I went from a messy voice memo to a published article in 20 minutes. It's like having an editor who never sleeps.”</blockquote>
<div class="author">
<img src="https://i.pravatar.cc/100?img=5" alt="author">
<div>
<div class="author-name">Maya Chen</div>
<div class="author-title">Content lead, SaaS startup</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 can see exactly how my rough notes become a structured draft. Huge time saver.”</blockquote>
<div class="author">
<img src="https://i.pravatar.cc/100?img=32" alt="author">
<div>
<div class="author-name">David Okafor</div>
<div class="author-title">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>“We use PostForge for all our client blogs. The quality is consistent, and the tone matches each brand perfectly.”</blockquote>
<div class="author">
<img src="https://i.pravatar.cc/100?img=47" alt="author">
<div>
<div class="author-name">Sofia Reyes</div>
<div class="author-title">Agency director</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- pricing -->
<section class="pricing" id="pricing">
<div class="container">
<div class="section-title">
<h2>Simple, transparent pricing</h2>
<p>Start free, upgrade when you're ready.</p>
</div>
<div class="pricing-grid">
<!-- basic -->
<div class="pricing-card">
<h3>Starter</h3>
<div class="price">$0 <span>/ month</span></div>
<ul class="pricing-features">
<li><i class="fas fa-check"></i> 5 AI posts / month</li>
<li><i class="fas fa-check"></i> Basic tone control</li>
<li><i class="fas fa-check"></i> Export to Markdown</li>
</ul>
<a href="#" class="btn btn-outline" style="width:100%; text-align:center;">Start free</a>
</div>
<!-- pro (featured) -->
<div class="pricing-card featured">
<h3>Pro</h3>
<div class="price">$29 <span>/ month</span></div>
<ul class="pricing-features">
<li><i class="fas fa-check"></i> Unlimited AI posts</li>
<li><i class="fas fa-check"></i> Advanced voice & style</li>
<li><i class="fas fa-check"></i> SEO keywords & meta</li>
<li><i class="fas fa-check"></i> Priority support</li>
</ul>
<a href="#" class="btn" style="width:100%; text-align:center;">Get Pro</a>
</div>
<!-- business -->
<div class="pricing-card">
<h3>Business</h3>
<div class="price">$79 <span>/ month</span></div>
<ul class="pricing-features">
<li><i class="fas fa-check"></i> Everything in Pro</li>
<li><i class="fas fa-check"></i> Team workspace (5 seats)</li>
<li><i class="fas fa-check"></i> API access</li>
<li><i class="fas fa-check"></i> Custom AI training</li>
</ul>
<a href="#" class="btn btn-outline" style="width:100%; text-align:center;">Contact sales</a>
</div>
</div>
</div>
</section>
<!-- final CTA -->
<section class="cta-section">
<div class="container">
<h2>Your next blog post is 60 seconds away</h2>
<p>Join thousands of writers who turned their scattered ideas into published stories.</p>
<a href="#" class="btn">Start creating free →</a>
<div class="cta-note">Free 14-day Pro trial · Cancel anytime</div>
</div>
</section>
<!-- footer -->
<footer class="footer">
<div class="container footer-flex">
<div>© 2025 PostForge. All rights reserved.</div>
<div class="footer-links">
<a href="#">Privacy</a>
<a href="#">Terms</a>
<a href="#">Twitter</a>
</div>
</div>
</footer>
<!-- minimal JS for interactivity (smooth scroll, hover effects) -->
<script>
// smooth scroll for anchor links (if any)
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function(e) {
const targetId = this.getAttribute('href');
if (targetId === '#') return;
const target = document.querySelector(targetId);
if (target) {
e.preventDefault();
target.scrollIntoView({ behavior: 'smooth' });
}
});
});
// subtle hover effect on pricing (already via CSS)
console.log('PostForge landing ready');
</script>
</body>
</html>
Melde dich an, um den vollständigen Prompt zu sehen
Weiter mit:
Mit der Anmeldung akzeptierst du unsere Nutzungsbedingungen und Datenschutz
Verwendung
Dieser Prompt ist für die Verwendung mit marketing gedacht. Kopiere den Inhalt oben und füge ihn in dein bevorzugtes KI-Tool ein.
Für beste Ergebnisse passe die Platzhalter (eckige Klammern oder Großbuchstaben) an deine Anforderungen an.
Referenzen
- Kategorie: marketing-Prompts
- Quelle: https://x.com/itsPaulAi/status/1909339758133977512
Diskussion
0 Kommentare