Code Block 2

—

Alternative code showcase

An alternative feature code block layout with a split left-text / right-code arrangement and animated token stream for AI product marketing pages. The streaming code animation demonstrates the real-time capabilities of your AI product in a way that static screenshots can't convey.

  • Feature highlights for streaming AI products with live demos
  • Hero sections that show real API output as the differentiator
  • Comparison pages contrasting before/after with live code examples
  • Conference and demo mode landing pages with animated showcases

Tech stack

Next.jsReactTypeScriptshadcn/uiTailwind CSSmotion/react

Related

Code Block 1Code Block 3Bento Layout
npx shadcn@latest add https://shadcnagents.com/r/marketing-feature-code-block-2

Payment Backend

checkout.ts
import Stripe from "stripe"

const stripe = new Stripe(
  process.env.STRIPE_SECRET_KEY!
)

export async function createCheckout(
  priceId: string
) {
  const session =
    await stripe.checkout.sessions.create({
    mode: "subscription",
    line_items: [{ price: priceId }],
    success_url: "/success",
  })
  return session.url
}

Pricing Page

pricing.tsx
"use client"

import { loadStripe } from "@stripe/stripe-js"

const stripePromise = loadStripe(
  process.env.NEXT_PUBLIC_STRIPE_KEY!
)

export default function Pricing() {
  async function handleCheckout() {
    const res = await fetch("/api/checkout")
    const { sessionId } = await res.json()
    const stripe = await stripePromise
    stripe?.redirectToCheckout({ sessionId })
  }

  return (
    <button onClick={handleCheckout}>
      Subscribe
    </button>
  )
}