Timeline Components

{
  "component": "timeline",
  "variant": "vertical",
  "data": {
    "heading": "Our Process",
    "subheading": "How we deliver exceptional results",
    "steps": [
      {
        "number": "1",
        "heading": "Discovery",
        "body": "We start by understanding your goals, challenges, and requirements.",
        "icon": "fa-lightbulb"
      },
      {
        "number": "2",
        "heading": "Planning",
        "body": "Strategic roadmap and technical architecture design.",
        "icon": "fa-map"
      },
      {
        "number": "3",
        "heading": "Execution",
        "body": "Agile development with continuous feedback and iteration.",
        "icon": "fa-rocket"
      }
    ],
    "bg": "white",
    "lineColor": "secondary",
    "animate": true
  }
}

<section class="timeline timeline-vertical bg-white py-5">
  <div class="container">
    <div class="row mb-5">
      <div class="col-lg-8 mx-auto text-center">
        <h2 class="display-5 fw-bold mb-3">Our Process</h2>
        <p class="lead text-muted">How we deliver exceptional results</p>
      </div>
    </div>
    <div class="timeline-wrapper timeline-line-secondary">
      <!-- Timeline items render here -->
    </div>
  </div>
</section>

{
  "component": "timeline",
  "variant": "vertical-left",
  "data": {
    "heading": "Company History",
    "subheading": "Key milestones in our journey",
    "steps": [
      {
        "number": "1",
        "heading": "2020 - Founded",
        "body": "Started with a vision to simplify web development with AI.",
        "icon": "fa-flag"
      },
      {
        "number": "2",
        "heading": "2022 - First 1000 Users",
        "body": "Reached our first major milestone with community adoption.",
        "icon": "fa-users"
      },
      {
        "number": "3",
        "heading": "2024 - v2.0 Launch",
        "body": "Major platform update with 18+ components and AI integration.",
        "icon": "fa-trophy"
      }
    ],
    "bg": "light",
    "lineColor": "primary",
    "animate": true
  }
}

<section class="timeline timeline-vertical-left bg-light py-5">
  <div class="container">
    <div class="row mb-5">
      <div class="col-lg-8 mx-auto text-center">
        <h2 class="display-5 fw-bold mb-3">Company History</h2>
        <p class="lead text-muted">Key milestones in our journey</p>
      </div>
    </div>
    <div class="timeline-wrapper timeline-line-primary">
      <!-- Timeline items render here -->
    </div>
  </div>
</section>

{
  "component": "timeline",
  "variant": "vertical-right",
  "data": {
    "heading": "Development Roadmap",
    "subheading": "What's coming next",
    "steps": [
      {
        "number": "1",
        "heading": "Q1 2026",
        "body": "Advanced theme customization and new component variants.",
        "icon": "fa-check"
      },
      {
        "number": "2",
        "heading": "Q2 2026",
        "body": "AI-powered page builder with natural language interface.",
        "icon": "fa-wand-magic-sparkles"
      },
      {
        "number": "3",
        "heading": "Q3 2026",
        "body": "Multi-language support and internationalization features.",
        "icon": "fa-globe"
      }
    ],
    "bg": "white",
    "lineColor": "accent",
    "animate": true
  }
}

<section class="timeline timeline-vertical-right bg-white py-5">
  <div class="container">
    <div class="row mb-5">
      <div class="col-lg-8 mx-auto text-center">
        <h2 class="display-5 fw-bold mb-3">Development Roadmap</h2>
        <p class="lead text-muted">What's coming next</p>
      </div>
    </div>
    <div class="timeline-wrapper timeline-line-accent">
      <!-- Timeline items render here -->
    </div>
  </div>
</section>

{
  "component": "timeline",
  "variant": "horizontal",
  "data": {
    "heading": "Quick Setup",
    "subheading": "Get started in minutes",
    "steps": [
      {
        "number": "1",
        "heading": "Install",
        "body": "npm install pagejson",
        "icon": "fa-download"
      },
      {
        "number": "2",
        "heading": "Configure",
        "body": "Create your page JSON",
        "icon": "fa-file-code"
      },
      {
        "number": "3",
        "heading": "Build",
        "body": "npm run build",
        "icon": "fa-rocket"
      }
    ],
    "bg": "light",
    "lineColor": "secondary",
    "animate": true
  }
}

<section class="timeline timeline-horizontal bg-light py-5">
  <div class="container">
    <div class="row mb-5">
      <div class="col-lg-8 mx-auto text-center">
        <h2 class="display-5 fw-bold mb-3">Quick Setup</h2>
        <p class="lead text-muted">Get started in minutes</p>
      </div>
    </div>
    <div class="timeline-wrapper-horizontal timeline-line-secondary">
      <div class="row">
        <!-- Timeline items render here -->
      </div>
    </div>
  </div>
</section>