Add v0 prompt for Nextra landing page
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>
This commit is contained in:
parent
2d05fd3656
commit
a6cd3ce7e8
1 changed files with 158 additions and 0 deletions
158
docs/nextra-landing-page-prompt.md
Normal file
158
docs/nextra-landing-page-prompt.md
Normal file
|
|
@ -0,0 +1,158 @@
|
|||
# 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
|
||||
Loading…
Reference in a new issue