a6cd3ce7e8
Detailed prompt for generating the SaaS landing page with Vercel v0. Includes: hero, features, pricing, testimonials, FAQ, and styling specs. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
158 lines
5 KiB
Markdown
158 lines
5 KiB
Markdown
# Nextra Landing Page — v0 Prompt
|
|
|
|
Paste this prompt into Vercel v0 to generate the landing page.
|
|
|
|
---
|
|
|
|
Create a complete SaaS landing page for "Nextra" - a visual AI agent workflow builder.
|
|
|
|
## Brand
|
|
- Name: Nextra
|
|
- Tagline: "Build AI agent swarms, visually"
|
|
- Style: Dark mode (#0a0a0f background), purple/violet primary (#8b5cf6),
|
|
subtle gradients, modern SaaS aesthetic like Linear or Vercel
|
|
- Font: Inter or Geist Sans
|
|
|
|
## Hero Section
|
|
- Large headline: "Build AI Agent Swarms, Visually"
|
|
- Subheadline: "Drag-and-drop workflow builder for AI agents. Connect LLMs,
|
|
tools, and custom logic. No code required — but code when you need it."
|
|
- Two CTAs: "Start Building Free" (primary, purple) and "Watch Demo" (ghost/outline)
|
|
- Hero visual: Abstract representation of connected nodes/flow diagram with
|
|
glowing edges, or a stylized screenshot of a flow canvas
|
|
- Floating badges: "No credit card required" and "Free tier available"
|
|
|
|
## Social Proof Bar
|
|
- Logos section: "Trusted by teams at" with placeholder company logos (greyed out)
|
|
- Or: "Join 1,000+ builders" with avatar stack
|
|
|
|
## Features Section (6 cards in 2x3 grid)
|
|
1. **Visual Flow Builder**
|
|
Icon: boxes with connecting lines
|
|
"Drag, drop, and connect. Your AI workflow becomes a visual diagram
|
|
that anyone can understand."
|
|
|
|
2. **Multi-LLM Support**
|
|
Icon: brain or sparkles
|
|
"Connect to Claude, GPT-4, Grok, Llama, or your own models.
|
|
Automatic failover keeps your flows running."
|
|
|
|
3. **Secure Custom Code**
|
|
Icon: code brackets with shield
|
|
"Write custom logic in sandboxed WebAssembly. Full power, zero risk.
|
|
Your code can't escape the sandbox."
|
|
|
|
4. **Instant Triggers**
|
|
Icon: lightning bolt
|
|
"Webhooks, schedules, or manual runs. Your agents wake up when you
|
|
need them, sleep when you don't."
|
|
|
|
5. **Marketplace**
|
|
Icon: grid of boxes / store
|
|
"Browse community tools and templates. Publish your own.
|
|
Build once, share everywhere."
|
|
|
|
6. **Team Ready**
|
|
Icon: users
|
|
"Enterprise SSO, role-based access, audit logs.
|
|
Built for teams that ship."
|
|
|
|
## How It Works Section (3 steps, horizontal)
|
|
Step 1: "Design Your Flow"
|
|
- Illustration: Canvas with a few connected nodes
|
|
- "Drag blocks from the palette. Connect them visually.
|
|
See your YAML config update in real-time."
|
|
|
|
Step 2: "Configure & Connect"
|
|
- Illustration: Settings panel / API key input
|
|
- "Add your LLM keys, configure triggers, set up webhooks.
|
|
Everything in one place."
|
|
|
|
Step 3: "Deploy & Scale"
|
|
- Illustration: Rocket or cloud with checkmark
|
|
- "One click to deploy. Your agents run 24/7 on our infrastructure.
|
|
Scale to zero when idle, scale up on demand."
|
|
|
|
## Pricing Section
|
|
Header: "Simple, transparent pricing"
|
|
Subheader: "Start free. Scale when you're ready."
|
|
|
|
3 pricing cards:
|
|
|
|
**Free** - $0/month
|
|
- 1 workflow
|
|
- Built-in tools only
|
|
- 1,000 runs/month
|
|
- Community support
|
|
- CTA: "Get Started"
|
|
|
|
**Pro** - $29/month
|
|
- Unlimited workflows
|
|
- Marketplace access
|
|
- Custom WASM code
|
|
- 100,000 runs/month
|
|
- Project memory
|
|
- Priority support
|
|
- CTA: "Start Free Trial" (primary, highlighted card)
|
|
|
|
**Enterprise** - Custom
|
|
- Everything in Pro
|
|
- SSO & SAML
|
|
- Role-based access
|
|
- Dedicated support
|
|
- SLA guarantee
|
|
- Private marketplace
|
|
- CTA: "Contact Sales"
|
|
|
|
## Code/YAML Preview Section
|
|
Header: "Visual builder. YAML under the hood."
|
|
Subheader: "See exactly what you're building. Export anytime."
|
|
|
|
Split view showing:
|
|
- Left: Mini canvas with 3-4 connected nodes
|
|
- Right: Corresponding YAML code with syntax highlighting
|
|
|
|
Caption: "What you see is what you get. Power users can edit YAML directly."
|
|
|
|
## Testimonials Section (3 cards)
|
|
Use placeholder testimonials:
|
|
|
|
"Nextra replaced our entire agent orchestration layer. What took us
|
|
weeks to build, we now do in hours."
|
|
— Sarah Chen, CTO at [Placeholder]
|
|
|
|
"Finally, a tool that lets non-engineers build AI workflows without
|
|
sacrificing power for our dev team."
|
|
— Marcus Johnson, Head of AI at [Placeholder]
|
|
|
|
"The WASM sandboxing sold us. We can let customers run custom code
|
|
without worrying about security."
|
|
— Elena Rodriguez, Security Lead at [Placeholder]
|
|
|
|
## FAQ Section (accordion style)
|
|
4-5 questions:
|
|
- "What's included in the free tier?"
|
|
- "Can I use my own LLM API keys?"
|
|
- "How does the WASM sandboxing work?"
|
|
- "Can I export my workflows?"
|
|
- "Is there an API?"
|
|
|
|
## Final CTA Section
|
|
Header: "Ready to build your first AI swarm?"
|
|
Subheader: "Start free. No credit card required. Deploy in minutes."
|
|
Large CTA button: "Get Started Free"
|
|
Secondary link: "Talk to Sales →"
|
|
|
|
## Footer
|
|
- Logo + tagline
|
|
- Columns: Product (Features, Pricing, Docs, Changelog), Company (About, Blog, Careers, Contact), Legal (Privacy, Terms, Security)
|
|
- Social icons: Twitter/X, GitHub, Discord
|
|
- Copyright: "© 2025 Nextra. All rights reserved."
|
|
|
|
## Additional Details
|
|
- Add subtle grid/dot pattern background in hero
|
|
- Use glassmorphism for cards (subtle blur, border)
|
|
- Animate elements on scroll (fade up)
|
|
- Mobile responsive
|
|
- Include dark mode toggle in nav (but default to dark)
|
|
- Nav: Logo | Features | Pricing | Docs | Login | "Get Started" button
|