How Products render as marketing sites - ProductSite, ProductPage, ProductSection

Product as Site

A Product can render as a complete marketing site with landing pages, feature showcases, pricing, and documentation. The site structure and content automatically adapt based on product type and metadata.

ProductSite

The ProductSite component renders a Product as a full marketing website with navigation, pages, and sections appropriate for the product type.

Props

interface ProductSiteProps {
  /** Product to render */
  product: string | Product
  /** Site configuration */
  config?: {
    /** Custom navigation */
    navigation?: NavItem[]
    /** Pages to include */
    pages?: Array<'home' | 'features' | 'pricing' | 'docs' | 'api' | 'about'>
    /** Header configuration */
    header?: {
      showLogo?: boolean
      showNav?: boolean
      showCTA?: boolean
      sticky?: boolean
    }
    /** Footer configuration */
    footer?: {
      showSocial?: boolean
      showLinks?: boolean
      columns?: number
    }
    /** Theme/branding */
    theme?: {
      primaryColor?: string
      logo?: string
      favicon?: string
    }
  }
  /** Custom className */
  className?: string
}

Usage

import { ProductSite } from '@mdxui/beacon'

// Render full product marketing site
<ProductSite product={product} />

// With custom config
<ProductSite
  product={product}
  config={{
    pages: ['home', 'features', 'pricing', 'docs'],
    header: {
      showLogo: true,
      showNav: true,
      showCTA: true,
      sticky: true,
    },
    footer: {
      showSocial: true,
      showLinks: true,
      columns: 4,
    },
  }}
/>

Product Type Adaptations

The ProductSite automatically configures pages and sections based on product type:

SaaS Product → Marketing Site

// SaaS product renders with:
<ProductSite product={saasProduct}>
  <Header />
  <LandingPage>
    <Hero
      title={product.name}
      subtitle={product.description}
      cta="Start Free Trial"
    />
    <Features features={product.features} />
    <Pricing prices={product.prices} />
    <Testimonials />
    <CTA />
  </LandingPage>
  <Footer />
</ProductSite>

Default Pages:

Home: Hero, features, pricing, CTA
Features: Detailed feature breakdown
Pricing: Subscription tiers, comparison
About: Team, mission, investors
Contact: Contact form, support info

Default Sections:

Hero: Value proposition, CTA
Features: Core capabilities
Pricing: Plans and tiers
Testimonials: Customer reviews
CTA: Sign-up conversion
FAQ: Common questions

API Product → Developer Site

// API product renders with:
<ProductSite product={apiProduct}>
  <Header />
  <LandingPage>
    <Hero
      title={product.name}
      subtitle={product.description}
      cta="Get API Key"
    />
    <CodeExample />
    <Features features={product.features} />
    <Pricing prices={product.prices} />
    <APIReference />
  </LandingPage>
  <Footer />
</ProductSite>

Default Pages:

Home: Hero, code example, features
API Reference: Endpoint documentation
Pricing: Usage-based pricing
Examples: Code samples, use cases
Status: API uptime, incidents

Default Sections:

Hero: API value prop
CodeExample: Quick integration
Features: API capabilities
Pricing: Pay-per-call rates
APIReference: Docs widget
SDKs: Client libraries

Data Product → Data Site

// Data product renders with:
<ProductSite product={dataProduct}>
  <Header />
  <LandingPage>
    <Hero
      title={product.name}
      subtitle={product.description}
      cta="Browse Datasets"
    />
    <DatasetShowcase />
    <Features features={product.features} />
    <Pricing prices={product.prices} />
    <DataQuality />
  </LandingPage>
  <Footer />
</ProductSite>

Default Pages:

Home: Hero, datasets, features
Datasets: Browse available data
Pricing: Subscription + usage
Documentation: API docs, formats
Quality: Data freshness, accuracy

Default Sections:

Hero: Data value prop
DatasetShowcase: Featured datasets
Features: Data capabilities
Pricing: Subscription tiers
DataQuality: Quality metrics
UseCases: Integration examples

Headless Product → API-First Site

// Headless product renders with:
<ProductSite product={headlessProduct}>
  <Header />
  <LandingPage>
    <Hero
      title={product.name}
      subtitle={product.description}
      cta="View API Docs"
    />
    <MCPShowcase />
    <Features features={product.features} />
    <Pricing prices={product.prices} />
  </LandingPage>
  <Footer />
</ProductSite>

Default Pages:

Home: Hero, MCP info, features
API Docs: REST/GraphQL docs
MCP: Model Context Protocol
Pricing: Usage-based rates
Status: Service health

Default Sections:

Hero: Headless value prop
MCPShowcase: MCP capabilities
Features: API features
Pricing: Pay-as-you-go
Integrations: AI platforms
AgentExamples: Agent use cases

ProductPage

The ProductPage component renders a single page within a product marketing site.

Props

interface ProductPageProps {
  /** Product context */
  product: string | Product
  /** Page type to render */
  pageType:
    | 'home'
    | 'features'
    | 'pricing'
    | 'docs'
    | 'api'
    | 'about'
    | 'contact'
    | 'status'
  /** Page-specific data */
  data?: any
  /** Custom sections to include */
  sections?: Array<{
    type: string
    props?: Record<string, any>
  }>
  /** Custom className */
  className?: string
}

Usage

import { ProductPage } from '@mdxui/beacon'

// Render specific page for a product
<ProductPage
  product={product}
  pageType="home"
/>

// With custom sections
<ProductPage
  product={product}
  pageType="pricing"
  sections={[
    { type: 'Hero', props: { title: 'Simple Pricing' } },
    { type: 'Pricing', props: { highlight: 'pro' } },
    { type: 'FAQ' },
    { type: 'CTA', props: { text: 'Start Free Trial' } },
  ]}
/>

Page Type Examples

Home Page

<ProductPage
  product={apiProduct}
  pageType="home"
  sections={[
    {
      type: 'Hero',
      props: {
        title: product.name,
        subtitle: product.description,
        cta: 'Get Started',
        image: '/hero-image.png',
      },
    },
    {
      type: 'CodeExample',
      props: {
        language: 'typescript',
        showOutput: true,
      },
    },
    {
      type: 'Features',
      props: {
        layout: 'grid',
        columns: 3,
      },
    },
    {
      type: 'Pricing',
      props: {
        highlight: 'basic',
      },
    },
    {
      type: 'CTA',
      props: {
        title: 'Ready to get started?',
        cta: 'Create Account',
      },
    },
  ]}
/>

API Reference Page

<ProductPage
  product={apiProduct}
  pageType="api"
  data={{
    baseUrl: 'https://api.acme.com/v1',
    endpoints: [
      {
        method: 'GET',
        path: '/users',
        description: 'List all users',
        parameters: [
          { name: 'limit', type: 'number', description: 'Max results' },
          { name: 'offset', type: 'number', description: 'Pagination offset' },
        ],
      },
    ],
    authentication: 'Bearer token',
  }}
/>

Pricing Page

<ProductPage
  product={saasProduct}
  pageType="pricing"
  sections={[
    {
      type: 'Hero',
      props: {
        title: 'Choose your plan',
        subtitle: 'Start free, upgrade when you need more',
      },
    },
    {
      type: 'Pricing',
      props: {
        prices: product.prices,
        highlight: 'pro',
        showComparison: true,
      },
    },
    {
      type: 'FAQ',
      props: {
        questions: [
          {
            q: 'Can I change plans?',
            a: 'Yes, upgrade or downgrade anytime.',
          },
        ],
      },
    },
  ]}
/>

ProductSection

The ProductSection component renders individual sections within product pages.

Props

interface ProductSectionProps {
  /** Product context */
  product: string | Product
  /** Section type to render */
  sectionType:
    | 'hero'
    | 'features'
    | 'pricing'
    | 'testimonials'
    | 'cta'
    | 'faq'
    | 'codeExample'
    | 'datasetShowcase'
    | 'mcpShowcase'
    | 'apiReference'
  /** Section-specific configuration */
  config?: Record<string, any>
  /** Custom className */
  className?: string
  /** Section background variant */
  variant?: 'default' | 'muted' | 'accent'
}

Usage

import { ProductSection } from '@mdxui/beacon'

// Render hero section
<ProductSection
  product={product}
  sectionType="hero"
  config={{
    title: product.name,
    subtitle: product.description,
    cta: 'Get Started',
    image: '/hero.png',
  }}
/>

// Render pricing section
<ProductSection
  product={product}
  sectionType="pricing"
  config={{
    highlight: 'pro',
    showComparison: true,
    showFAQ: true,
  }}
  variant="muted"
/>

Section Types by Product

SaaS Product Sections

// Hero with free trial CTA
<ProductSection
  product={saasProduct}
  sectionType="hero"
  config={{
    title: saasProduct.name,
    subtitle: saasProduct.description,
    cta: 'Start Free Trial',
    secondaryCTA: 'View Demo',
    image: '/dashboard-preview.png',
  }}
/>

// Feature showcase
<ProductSection
  product={saasProduct}
  sectionType="features"
  config={{
    features: product.features,
    layout: 'grid',
    columns: 3,
    showIcons: true,
  }}
/>

// Pricing tiers
<ProductSection
  product={saasProduct}
  sectionType="pricing"
  config={{
    prices: product.prices,
    highlight: 'pro',
    showComparison: true,
    interval: 'month',
  }}
/>

// Customer testimonials
<ProductSection
  product={saasProduct}
  sectionType="testimonials"
  config={{
    testimonials: [
      {
        quote: 'Best tool we\'ve used!',
        author: 'Jane Doe',
        role: 'CEO, Acme Corp',
        avatar: '/avatars/jane.jpg',
      },
    ],
    layout: 'carousel',
  }}
/>

API Product Sections

// Code example with syntax highlighting
<ProductSection
  product={apiProduct}
  sectionType="codeExample"
  config={{
    title: 'Get started in minutes',
    language: 'typescript',
    code: `
import { AcmeAPI } from '@acme/sdk'

const api = new AcmeAPI({ apiKey: process.env.ACME_API_KEY })
const users = await api.users.list({ limit: 10 })
console.log(users)
    `,
    showOutput: true,
    tabs: ['TypeScript', 'Python', 'curl'],
  }}
/>

// API reference widget
<ProductSection
  product={apiProduct}
  sectionType="apiReference"
  config={{
    endpoints: [
      { method: 'GET', path: '/users', description: 'List users' },
      { method: 'POST', path: '/users', description: 'Create user' },
    ],
    showTryIt: true,
    authentication: 'Bearer token',
  }}
/>

// Usage-based pricing
<ProductSection
  product={apiProduct}
  sectionType="pricing"
  config={{
    model: 'usage',
    tiers: [
      {
        name: 'Free',
        price: 0,
        includes: '1,000 requests/month',
      },
      {
        name: 'Pay as You Go',
        price: 0.001,
        per: 'request',
        description: '$1 per 1,000 requests',
      },
    ],
  }}
/>

Data Product Sections

// Dataset showcase
<ProductSection
  product={dataProduct}
  sectionType="datasetShowcase"
  config={{
    datasets: [
      {
        name: 'Company Database',
        records: '10M+',
        freshness: 'Daily',
        coverage: 'Global',
      },
    ],
    showPreview: true,
    showSchema: true,
  }}
/>

// Data quality metrics
<ProductSection
  product={dataProduct}
  sectionType="features"
  config={{
    features: [
      {
        name: 'Data Freshness',
        description: 'Updated daily',
        icon: 'RefreshCw',
      },
      {
        name: 'Coverage',
        description: '10M+ companies worldwide',
        icon: 'Globe',
      },
      {
        name: 'Accuracy',
        description: '99.9% accurate data',
        icon: 'CheckCircle',
      },
    ],
  }}
/>

Headless Product Sections

// MCP showcase
<ProductSection
  product={headlessProduct}
  sectionType="mcpShowcase"
  config={{
    servers: [
      {
        name: 'acme-mcp',
        protocol: 'stdio',
        tools: ['search', 'enrich', 'validate'],
      },
    ],
    showIntegration: true,
  }}
/>

// AI agent examples
<ProductSection
  product={headlessProduct}
  sectionType="codeExample"
  config={{
    title: 'Connect AI agents',
    language: 'json',
    code: `
{
  "mcpServers": {
    "acme": {
      "command": "npx",
      "args": ["-y", "@acme/mcp-server"]
    }
  }
}
    `,
    description: 'Add to Claude Desktop config',
  }}
/>

Auto-Wiring

ProductSite components automatically query product data and related content:

// Automatically queries:
// - Product metadata (name, description, type)
// - Features from features collection
// - Prices from prices collection
// - Categories and industries
<ProductSite product="prod_123" />

The component fetches:

Product data - Core product information
Features - Associated feature list
Prices - Pricing tiers and plans
Categories - Product categorization
Testimonials - Customer reviews (if available)

MDXLD Integration

Products defined in MDXLD automatically render as sites:

---
$context: https://schema.org.ai
$type: Product
$id: https://acme.com/products/api
name: Acme API
type: API
description: RESTful API for data enrichment
---

# {name}

{description}

<ProductSection product={$id} sectionType="hero" />
<ProductSection product={$id} sectionType="codeExample" />
<ProductSection product={$id} sectionType="features" />
<ProductSection product={$id} sectionType="pricing" />

Examples

Complete SaaS Marketing Site

<ProductSite
  product={saasProduct}
  config={{
    pages: ['home', 'features', 'pricing', 'about'],
    header: {
      showLogo: true,
      showNav: true,
      showCTA: true,
      sticky: true,
    },
    footer: {
      showSocial: true,
      columns: 4,
    },
    theme: {
      primaryColor: '#0066FF',
    },
  }}
/>

API Documentation Site

<ProductSite
  product={apiProduct}
  config={{
    pages: ['home', 'api', 'pricing', 'status'],
    header: {
      showNav: true,
      showCTA: true,
    },
    theme: {
      primaryColor: '#10B981',
    },
  }}
/>

Custom Landing Page

<ProductPage product={product} pageType="home">
  <ProductSection sectionType="hero" config={{ cta: 'Get Started' }} />
  <ProductSection sectionType="features" variant="muted" />
  <ProductSection sectionType="pricing" />
  <ProductSection sectionType="testimonials" variant="muted" />
  <ProductSection sectionType="cta" config={{ title: 'Ready to start?' }} />
</ProductPage>

Next Steps

Product as App - Rendering products as full applications
Product as Card - Rendering products as cards and lists
Product Contexts - Products in Web, API, and MCP contexts

Product as Site

On this page