CTA Components

{
  "component": "cta",
  "variant": "simple",
  "data": {
    "heading": "Simple CTA",
    "body": "A clean, centered call-to-action perfect for page endings.",
    "buttons": [
      { "text": "Get Started", "url": "#", "style": "primary" },
      { "text": "Learn More", "url": "#", "style": "outline-primary" }
    ],
    "bg": "light"
  }
}

<section class="cta-card bg-light rounded p-4 p-lg-5 mx-3">
  <div class="text-center">
    <h3 class="mb-3">Simple CTA</h3>
    <p class="text-dark-muted mb-4">A clean, centered call-to-action perfect for page endings.</p>
    <div class="d-flex gap-2 justify-content-center flex-wrap">
      <a href="#" class="btn btn-primary">Get Started</a>
      <a href="#" class="btn btn-outline-primary">Learn More</a>
    </div>
  </div>
</section>

{
  "component": "cta",
  "variant": "border",
  "data": {
    "heading": "Border CTA",
    "body": "Clean bordered style with button on the right side.",
    "buttons": [
      { "text": "Contact Us", "url": "#", "style": "primary" }
    ]
  }
}

<section class="cta-card border rounded p-4 p-lg-5 mx-3">
  <div class="row align-items-center">
    <div class="col-lg-9">
      <h3 class="mb-3">Border CTA</h3>
      <p class="text-dark-muted mb-0">Clean bordered style with button on the right side.</p>
    </div>
    <div class="col-lg-3 text-lg-end mt-3 mt-lg-0">
      <a href="#" class="btn btn-primary">Contact Us</a>
    </div>
  </div>
</section>

{
  "component": "cta",
  "variant": "grey",
  "data": {
    "heading": "Grey Background CTA",
    "body": "Subtle grey background that stands out from white sections.",
    "buttons": [
      { "text": "Primary Action", "url": "#", "style": "primary" },
      { "text": "Secondary", "url": "#", "style": "outline-dark" }
    ]
  }
}

<section class="cta-card bg-light rounded p-4 p-lg-5 mx-3">
  <div class="row align-items-center">
    <div class="col-lg-8">
      <h3 class="mb-3">Grey Background CTA</h3>
      <p class="text-dark-muted mb-3 mb-lg-0">Subtle grey background that stands out from white sections.</p>
    </div>
    <div class="col-lg-4 mt-3 mt-lg-0">
      <a href="#" class="btn btn-primary me-2 mb-2">Primary Action</a>
      <a href="#" class="btn btn-outline-dark mb-2">Secondary</a>
    </div>
  </div>
</section>

{
  "component": "cta",
  "variant": "dark-centered",
  "data": {
    "heading": "Dark Centered CTA",
    "body": "High contrast dark background draws attention to your message.",
    "buttons": [
      { "text": "Get Quote", "url": "#", "style": "gold" },
      { "text": "View Services", "url": "#", "style": "outline-light" }
    ]
  }
}

<section class="cta-card bg-dark text-white rounded p-4 p-lg-5 mx-3">
  <div class="text-center">
    <h3 class="mb-3 text-light-primary">Dark Centered CTA</h3>
    <p class="lead text-light-muted mb-4">High contrast dark background draws attention to your message.</p>
    <div class="d-flex gap-2 justify-content-center flex-wrap">
      <a href="#" class="btn btn-brand-secondary mb-2">Get Quote</a>
      <a href="#" class="btn btn-outline-light mb-2">View Services</a>
    </div>
  </div>
</section>

{
  "component": "cta",
  "variant": "brand-green",
  "data": {
    "heading": "Brand Green CTA",
    "body": "Uses the signature brand green for consistency.",
    "buttons": [
      { "text": "Request Quote", "url": "#", "style": "gold" },
      { "text": "Call Us", "url": "#", "style": "outline-light" }
    ]
  }
}

<section class="cta-card bg-primary text-white rounded p-4 p-lg-5 mx-3">
  <div class="text-center">
    <h3 class="mb-3 text-light-primary">Brand Green CTA</h3>
    <p class="text-light-muted mb-4">Uses the signature brand green for consistency.</p>
    <div class="d-flex gap-2 justify-content-center flex-wrap">
      <a href="#" class="btn btn-brand-secondary">Request Quote</a>
      <a href="#" class="btn btn-outline-light">Call Us</a>
    </div>
  </div>
</section>

{
  "component": "cta",
  "variant": "split-image",
  "data": {
    "heading": "Split Image CTA",
    "body": "Combine compelling imagery with your call-to-action message.",
    "image": "https://placehold.co/800x600/4F46E5/white?text=PageJSON",
    "buttons": [
      { "text": "Learn More", "url": "#", "style": "primary" }
    ]
  }
}

<section class="cta-card bg-light rounded overflow-hidden mx-3">
  <div class="row g-0">
    <div class="col-lg-5">
      <img src="https://placehold.co/800x600/4F46E5/white?text=PageJSON" alt="Split Image CTA" class="w-100 h-100" style="object-fit: cover; min-height: 300px;" loading="lazy">
    </div>
    <div class="col-lg-7 d-flex align-items-center">
      <div class="p-4 p-lg-5">
        <h3 class="mb-3">Split Image CTA</h3>
        <p class="text-dark-muted mb-4">Combine compelling imagery with your call-to-action message.</p>
        <div class="d-flex gap-2 flex-wrap">
          <a href="#" class="btn btn-primary">Learn More</a>
        </div>
      </div>
    </div>
  </div>
</section>

{
  "component": "cta",
  "variant": "full-width",
  "data": {
    "heading": "Full Width CTA",
    "body": "Edge-to-edge banner for maximum visibility and impact.",
    "buttons": [
      { "text": "Get Started Now", "url": "#", "style": "gold" }
    ],
    "bg": "black"
  }
}

<section class="bg-black p-4 p-lg-5">
  <div class="container-fluid px-4 px-lg-5">
    <div class="row align-items-center">
      <div class="col-lg-8">
        <h2 class="mb-2 text-light-primary">Full Width CTA</h2>
        <p class="mb-0 text-light-muted">Edge-to-edge banner for maximum visibility and impact.</p>
      </div>
      <div class="col-lg-4 text-lg-end mt-3 mt-lg-0">
        <a href="#" class="btn btn-brand-secondary btn-lg">Get Started Now</a>
      </div>
    </div>
  </div>
</section>

{
  "component": "cta",
  "variant": "compact",
  "data": {
    "heading": "Compact CTA",
    "body": "A smaller, inline call-to-action for tighter spaces.",
    "buttons": [
      { "text": "Subscribe", "url": "#", "style": "primary" }
    ]
  }
}

<section class="cta-card bg-light rounded p-3 p-lg-4 mx-3">
  <div class="d-flex flex-column flex-md-row align-items-center justify-content-between gap-3">
    <div>
      <h5 class="mb-1">Compact CTA</h5>
      <p class="text-dark-muted small mb-0">A smaller, inline call-to-action for tighter spaces.</p>
    </div>
    <div class="d-flex gap-2 flex-shrink-0">
      <a href="#" class="btn btn-sm btn-primary">Subscribe</a>
    </div>
  </div>
</section>

{
  "component": "cta",
  "variant": "urgency",
  "data": {
    "heading": "Limited Time Offer",
    "body": "Don't miss out on this exclusive opportunity. Act now!",
    "badge": "Ends Soon",
    "buttons": [
      { "text": "Claim Offer", "url": "#", "style": "gold" }
    ],
    "bg": "black"
  }
}

<section class="cta-card bg-warning rounded p-4 p-lg-5 mx-3">
  <div class="text-center">
    <span class="badge bg-dark text-white mb-3">Ends Soon</span>
    <h3 class="mb-3 text-dark">Limited Time Offer</h3>
    <p class="text-dark mb-4" style="opacity: 0.85;">Don't miss out on this exclusive opportunity. Act now!</p>
    <div class="d-flex gap-2 justify-content-center flex-wrap">
      <a href="#" class="btn btn-black">Claim Offer</a>
    </div>
  </div>
</section>