Creating Pages

Complete reference for PageJSON's page schema and structure

Page Schema Overview

Every PageJSON page is a JSON file with two main sections:

SEO Configuration - Meta tags, title, description, canonical URL
Sections Array - Ordered list of components that make up the page

Basic Page Structure

The fundamental schema every page follows

{
  "seo": {
    "title": "Page Title | Site Name",
    "description": "Meta description (150-160 chars)",
    "canonical": "https://yoursite.com/page-path",
    "noindex": false,
    "ogImage": "/assets/img/og-image.jpg"
  },
  "sections": [
    {
      "component": "component-name",
      "variant": "variant-name",
      "data": {
        // Component-specific data
      }
    }
  ]
}

// SEO Object (required)
seo: {
  title: string,       // Page title (50-60 chars recommended)
  description: string, // Meta description (150-160 chars)
  canonical: string,   // Full URL to this page
  noindex?: boolean,   // Set true to exclude from search engines
  ogImage?: string     // Social sharing image
}

// Sections Array (required)
sections: [
  {
    component: string, // Component name (hero, cta, feature-grid, etc.)
    variant: string,   // Variant name (simple, dark-centered, etc.)
    data: object       // Component-specific properties
  }
]

Common Page Patterns

Here are proven page structures for different use cases:

Pattern 1: Landing Page

Hero + Features + CTA (Classic conversion-focused layout)

{
  "seo": { /* SEO config */ },
  "sections": [
    {
      "component": "hero",
      "variant": "with-cta",
      "data": {
        "heading": "Main Value Proposition",
        "subheading": "Supporting details",
        "buttons": [/* CTAs */],
        "bg": "dark"
      }
    },
    {
      "component": "feature-grid",
      "variant": "icon-cards",
      "data": {
        "heading": "Key Features",
        "columns": 3,
        "features": [/* 3-6 features */],
        "bg": "light"
      }
    },
    {
      "component": "cta",
      "variant": "dark-centered",
      "data": {
        "heading": "Ready to Start?",
        "buttons": [/* Final CTA */]
      }
    }
  ]
}

Pattern 2: Content Page

Hero + Prose + Sidebar (For documentation or blog posts)

{
  "seo": { /* SEO config */ },
  "sidebar": {
    "enabled": true,
    "position": "left"
  },
  "sections": [
    {
      "component": "hero",
      "variant": "simple",
      "data": {
        "heading": "Article Title",
        "subheading": "Brief description",
        "bg": "light",
        "align": "left"
      }
    },
    {
      "component": "prose",
      "variant": "default",
      "data": {
        "content": "<h2>Heading</h2><p>Your content...</p>",
        "bg": "white"
      }
    },
    {
      "component": "code-block",
      "variant": "default",
      "data": {
        "language": "javascript",
        "code": "// Example code",
        "bg": "light"
      }
    }
  ]
}

Pattern 3: Component Showcase

Hero + Tabbed Examples (For component/feature demos)

{
  "seo": { /* SEO config */ },
  "sections": [
    {
      "component": "hero",
      "variant": "simple",
      "data": {
        "heading": "Component Name",
        "subheading": "Component description",
        "bg": "light",
        "align": "left"
      }
    },
    {
      "component": "code-block",
      "variant": "tabbed",
      "data": {
        "title": "Variant: variant-name",
        "tabs": [
          {
            "label": "Preview",
            "language": "html",
            "preview": true,
            "code": "<section>...</section>"
          },
          {
            "label": "JSON Config",
            "language": "json",
            "code": "{...}"
          },
          {
            "label": "HTML",
            "language": "html",
            "code": "<section>...</section>"
          }
        ]
      }
    }
  ]
}

Component Data Properties

Each component accepts different data properties. Here's a reference for the most common components:

Hero Component Data

All properties available for hero sections

data: {
  heading: string,          // Main heading (required)
  subheading?: string,      // Optional subtitle
  body?: string,            // Additional body text
  buttons?: [
    {
      text: string,          // Button text
      url: string,           // Button link
      style: string          // Button style (primary, outline-primary, etc.)
    }
  ],
  image?: string,          // Hero image URL
  bg?: string,             // Background (light, dark, white, primary, etc.)
  bgColor?: string,        // Custom gradient or color
  bgMode?: string,         // 'light' or 'dark' text
  align?: string,          // 'left', 'center', or 'right'
  features?: [             // Feature grid (for animated-grid variant)
    {
      icon: string,        // Font Awesome icon class
      heading: string,     // Feature heading
      body: string         // Feature description
    }
  ],
  trustLine?: string,      // Trust indicator text
  animate?: boolean        // Enable animations
}

{
  "component": "hero",
  "variant": "with-image",
  "data": {
    "heading": "Welcome to Our Site",
    "subheading": "We build amazing things",
    "image": "/assets/img/hero.jpg",
    "buttons": [
      { "text": "Get Started", "url": "/contact", "style": "primary" },
      { "text": "Learn More", "url": "/about", "style": "outline-primary" }
    ],
    "bg": "light",
    "align": "left"
  }
}

Feature Grid Component Data

Properties for feature grids, stats, and icon cards

data: {
  heading?: string,        // Section heading
  subheading?: string,     // Section subheading
  columns: number,         // Number of columns (2, 3, or 4)
  features: [              // Array of features
    {
      icon?: string,       // Font Awesome icon (for icon-cards)
      number?: string,     // Number (for stats variant)
      heading: string,     // Feature heading
      body: string         // Feature description
    }
  ],
  bg?: string,            // Background color
  animate?: boolean       // Enable scroll animations
}

{
  "component": "feature-grid",
  "variant": "icon-cards",
  "data": {
    "heading": "Why Choose Us",
    "subheading": "The benefits of working with us",
    "columns": 3,
    "features": [
      {
        "icon": "fa-check-circle",
        "heading": "Quality",
        "body": "We never compromise on quality"
      },
      {
        "icon": "fa-clock",
        "heading": "Fast",
        "body": "Quick turnaround times"
      },
      {
        "icon": "fa-dollar-sign",
        "heading": "Affordable",
        "body": "Competitive pricing"
      }
    ],
    "bg": "light",
    "animate": true
  }
}

CTA Component Data

Properties for call-to-action sections

data: {
  heading: string,         // CTA heading
  body?: string,           // CTA body text
  badge?: string,          // Badge text (urgency variant)
  buttons: [               // CTA buttons
    {
      text: string,        // Button text
      url: string,         // Button link
      style: string        // Button style
    }
  ],
  bg?: string,            // Background color
  image?: string          // Image (for split-image variant)
}

{
  "component": "cta",
  "variant": "dark-centered",
  "data": {
    "heading": "Ready to Get Started?",
    "body": "Join thousands of satisfied customers",
    "buttons": [
      { "text": "Sign Up Now", "url": "/signup", "style": "brand-secondary" },
      { "text": "Learn More", "url": "/about", "style": "outline-light" }
    ]
  }
}

Advanced Features

Sidebar Navigation

Add a sidebar to documentation or blog pages:

{
  "sidebar": {
    "enabled": true,
    "position": "left"  // or "right"
  },
  "sections": [/* your sections */]
}

Custom Background Colors

Use custom gradients for hero sections:

{
  "bgColor": "linear-gradient(135deg, #0F0F0F 0%, #8B5CF6 100%)",
  "bgMode": "dark"
}

Animations

Enable scroll animations on components:

{
  "animate": true
}

Documentation