Content Block Components

{
  "component": "content-block",
  "variant": "image-right",
  "data": {
    "heading": "Image Right Layout",
    "body": "The most common content block layout with text on the left and a supporting image on the right.",
    "image": "https://placehold.co/800x600/4F46E5/white?text=PageJSON",
    "features": ["Feature one", "Feature two", "Feature three"],
    "buttons": [{ "text": "Learn More", "url": "#", "style": "primary" }]
  }
}

<section class="py-4">
  <div class="container">
    <div class="row align-items-center g-4">
      <div class="col-lg-6">
        <h3 class="mb-3">Image Right Layout</h3>
        <p class="text-dark-muted mb-3">The most common content block layout with text on the left and a supporting image on the right.</p>
        <ul class="mb-4 text-dark-muted">
          <li class="mb-2">Feature one</li>
          <li class="mb-2">Feature two</li>
          <li class="mb-2">Feature three</li>
        </ul>
        <div class="d-flex flex-wrap gap-2">
          <a href="#" class="btn btn-primary">Learn More</a>
        </div>
      </div>
      <div class="col-lg-6">
        <img src="https://placehold.co/800x600/4F46E5/white?text=PageJSON" alt="Image Right Layout" class="img-fluid rounded shadow-sm" loading="lazy">
      </div>
    </div>
  </div>
</section>

{
  "component": "content-block",
  "variant": "image-left",
  "data": {
    "heading": "Image Left Layout",
    "body": "Mirror layout for visual variety. Alternate between image-right and image-left on long pages.",
    "image": "https://placehold.co/800x600/7C3AED/white?text=Component",
    "features": ["Point A", "Point B", "Point C"],
    "buttons": [{ "text": "Get Started", "url": "#", "style": "primary" }]
  }
}

<section class="py-4">
  <div class="container">
    <div class="row align-items-center g-4">
      <div class="col-lg-6 order-lg-2">
        <h3 class="mb-3">Image Left Layout</h3>
        <p class="text-dark-muted mb-3">Mirror layout for visual variety. Alternate between image-right and image-left on long pages.</p>
        <ul class="mb-4 text-dark-muted">
          <li class="mb-2">Point A</li>
          <li class="mb-2">Point B</li>
          <li class="mb-2">Point C</li>
        </ul>
        <div class="d-flex flex-wrap gap-2">
          <a href="#" class="btn btn-primary">Get Started</a>
        </div>
      </div>
      <div class="col-lg-6 order-lg-1">
        <img src="https://placehold.co/800x600/7C3AED/white?text=Component" alt="Image Left Layout" class="img-fluid rounded shadow-sm" loading="lazy">
      </div>
    </div>
  </div>
</section>

{
  "component": "content-block",
  "variant": "split-right",
  "data": {
    "heading": "Split Right - Full Bleed",
    "lead": "Image fills half the viewport width edge-to-edge.",
    "body": "Perfect for impactful visual storytelling.",
    "image": "https://placehold.co/800x600/4F46E5/white?text=PageJSON",
    "features": ["Full bleed to viewport edge", "Image fills full section height", "Text content contained"],
    "buttons": [{ "text": "Learn More", "url": "#", "style": "primary" }]
  }
}

<section class="content-split" style="min-height: 500px;">
  <div class="row g-0 h-100">
    <div class="col-lg-6 d-flex align-items-center bg-white">
      <div class="py-4 px-4 px-lg-5">
        <div class="content-split-text" style="max-width: 540px; margin-left: auto;">
          <h3 class="mb-3">Split Right - Full Bleed</h3>
          <p class="lead text-dark-muted mb-3">Image fills half the viewport width edge-to-edge.</p>
          <p class="text-dark-muted mb-3">Perfect for impactful visual storytelling.</p>
          <ul class="mb-4 text-dark-muted">
            <li class="mb-2">Full bleed to viewport edge</li>
            <li class="mb-2">Image fills full section height</li>
            <li class="mb-2">Text content contained</li>
          </ul>
          <div class="d-flex flex-wrap gap-2">
            <a href="#" class="btn btn-primary">Learn More</a>
          </div>
        </div>
      </div>
    </div>
    <div class="col-lg-6">
      <div class="content-split-image h-100" style="background-image: url('https://placehold.co/800x600/4F46E5/white?text=PageJSON'); background-size: cover; background-position: center; min-height: 400px;"></div>
    </div>
  </div>
</section>

{
  "component": "content-block",
  "variant": "split-left",
  "data": {
    "heading": "Split Left - Full Bleed",
    "body": "Same impactful layout with image on the left. Great for creating rhythm on long pages.",
    "image": "https://placehold.co/800x600/10B981/white?text=Demo",
    "features": ["Mirror of split-right", "Works with background colors", "High visual impact"],
    "buttons": [{ "text": "Get Started", "url": "#", "style": "primary" }],
    "bg": "light"
  }
}

<section class="content-split" style="min-height: 500px;">
  <div class="row g-0 h-100">
    <div class="col-lg-6 order-lg-2 d-flex align-items-center bg-light">
      <div class="py-4 px-4 px-lg-5">
        <div class="content-split-text" style="max-width: 540px;">
          <h3 class="mb-3">Split Left - Full Bleed</h3>
          <p class="text-dark-muted mb-3">Same impactful layout with image on the left. Great for creating rhythm on long pages.</p>
          <ul class="mb-4 text-dark-muted">
            <li class="mb-2">Mirror of split-right</li>
            <li class="mb-2">Works with background colors</li>
            <li class="mb-2">High visual impact</li>
          </ul>
          <div class="d-flex flex-wrap gap-2">
            <a href="#" class="btn btn-primary">Get Started</a>
          </div>
        </div>
      </div>
    </div>
    <div class="col-lg-6 order-lg-1">
      <div class="content-split-image h-100" style="background-image: url('https://placehold.co/800x600/10B981/white?text=Demo'); background-size: cover; background-position: center; min-height: 400px;"></div>
    </div>
  </div>
</section>

{
  "component": "content-block",
  "variant": "large",
  "data": {
    "heading": "Large Content Block",
    "lead": "A hero-like content section with substantial height",
    "body": "Use this variant when you want a content block that makes a big visual statement. Perfect for key messages.",
    "image": "https://placehold.co/800x600/4F46E5/white?text=PageJSON",
    "buttons": [{ "text": "Explore", "url": "#", "style": "gold" }]
  }
}

<section class="py-5">
  <div class="container">
    <div class="row align-items-center g-5" style="min-height: 50vh;">
      <div class="col-lg-6">
        <img src="https://placehold.co/800x600/4F46E5/white?text=PageJSON" alt="Large Content Block" class="img-fluid rounded shadow" loading="lazy" style="max-height: 60vh; width: 100%; object-fit: cover;">
      </div>
      <div class="col-lg-6">
        <h2 class="display-5 mb-4">Large Content Block</h2>
        <p class="lead text-dark-muted mb-4">A hero-like content section with substantial height</p>
        <p class="text-dark-muted mb-4">Use this variant when you want a content block that makes a big visual statement. Perfect for key messages.</p>
        <div class="d-flex flex-column flex-sm-row gap-3">
          <a href="#" class="btn btn-gold btn-lg">Explore</a>
        </div>
      </div>
    </div>
  </div>
</section>

{
  "component": "content-block",
  "variant": "card-style",
  "data": {
    "heading": "Card Style Layout",
    "body": "Content presented in an elevated card format with border, shadow, and edge-to-edge image.",
    "image": "https://placehold.co/800x600/7C3AED/white?text=Component",
    "features": ["Elevated card design", "Edge-to-edge image", "Great for featured content"],
    "buttons": [{ "text": "Learn More", "url": "#", "style": "primary" }],
    "bg": "light"
  }
}

<section class="bg-light py-4">
  <div class="container">
    <div class="bg-white rounded overflow-hidden border shadow">
      <div class="row g-0">
        <div class="col-lg-6">
          <img src="https://placehold.co/800x600/7C3AED/white?text=Component" alt="Card Style Layout" class="w-100 h-100" style="object-fit: cover; min-height: 400px;" loading="lazy">
        </div>
        <div class="col-lg-6 p-5 d-flex flex-column justify-content-center">
          <h2 class="mb-4">Card Style Layout</h2>
          <p class="text-dark-muted mb-4">Content presented in an elevated card format with border, shadow, and edge-to-edge image.</p>
          <ul class="text-dark-muted mb-4">
            <li class="mb-2">Elevated card design</li>
            <li class="mb-2">Edge-to-edge image</li>
            <li class="mb-2">Great for featured content</li>
          </ul>
          <div>
            <a href="#" class="btn btn-primary">Learn More</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

{
  "component": "content-block",
  "variant": "text-only",
  "data": {
    "heading": "Text Only Layout",
    "body": "When you don't need an image, use the text-only variant for clean, focused content. Great for policy pages or detailed explanations.",
    "features": ["No image required", "Full-width text content", "Clean and focused"]
  }
}

<section class="py-4">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-lg-8">
        <h3 class="mb-4">Text Only Layout</h3>
        <p class="text-dark-muted mb-3">When you don't need an image, use the text-only variant for clean, focused content. Great for policy pages or detailed explanations.</p>
        <ul class="mb-4 text-dark-muted">
          <li class="mb-2">No image required</li>
          <li class="mb-2">Full-width text content</li>
          <li class="mb-2">Clean and focused</li>
        </ul>
      </div>
    </div>
  </div>
</section>

{
  "component": "content-block",
  "variant": "dark-bg",
  "data": {
    "heading": "Dark Background Layout",
    "body": "Use dark backgrounds for emphasis. Text automatically switches to light colors for readability.",
    "image": "https://placehold.co/800x600/4F46E5/white?text=PageJSON",
    "features": ["High contrast", "Dramatic impact", "Light text auto-applied"],
    "buttons": [{ "text": "Contact Us", "url": "#", "style": "gold" }]
  }
}

<section class="bg-dark p-5 rounded">
  <div class="container py-4">
    <div class="row align-items-center g-4">
      <div class="col-lg-6">
        <h2 class="text-light-primary mb-4">Dark Background Layout</h2>
        <p class="text-light-muted mb-4">Use dark backgrounds for emphasis. Text automatically switches to light colors for readability.</p>
        <ul class="text-light-muted mb-4">
          <li class="mb-2">High contrast</li>
          <li class="mb-2">Dramatic impact</li>
          <li class="mb-2">Light text auto-applied</li>
        </ul>
        <div class="d-flex flex-column flex-sm-row gap-3">
          <a href="#" class="btn btn-gold">Contact Us</a>
        </div>
      </div>
      <div class="col-lg-6">
        <img src="https://placehold.co/800x600/4F46E5/white?text=PageJSON" alt="Dark Background Layout" class="img-fluid rounded" loading="lazy">
      </div>
    </div>
  </div>
</section>

{
  "component": "content-block",
  "variant": "two-column",
  "data": {
    "heading": "Two Column Layout",
    "lead": "Organize content into a structured two-column grid",
    "items": [
      { "number": "01", "heading": "Consultation", "body": "We discuss your requirements and recommend the best approach." },
      { "number": "02", "heading": "Quotation", "body": "Receive a detailed written quote with no hidden costs." },
      { "number": "03", "heading": "Processing", "body": "Expert craftsmen apply your chosen finish with precision." },
      { "number": "04", "heading": "Delivery", "body": "Careful packaging and delivery to your location." }
    ]
  }
}

<section class="py-4">
  <div class="container">
    <div class="text-center mb-5">
      <h2 class="mb-3">Two Column Layout</h2>
      <p class="lead text-dark-muted">Organize content into a structured two-column grid</p>
    </div>
    <div class="row g-4">
      <div class="col-md-6">
        <div class="p-4 bg-light rounded h-100">
          <div class="display-6 text-primary mb-3">01</div>
          <h4 class="mb-3">Consultation</h4>
          <p class="text-dark-muted mb-0">We discuss your requirements and recommend the best approach.</p>
        </div>
      </div>
      <div class="col-md-6">
        <div class="p-4 bg-light rounded h-100">
          <div class="display-6 text-primary mb-3">02</div>
          <h4 class="mb-3">Quotation</h4>
          <p class="text-dark-muted mb-0">Receive a detailed written quote with no hidden costs.</p>
        </div>
      </div>
      <div class="col-md-6">
        <div class="p-4 bg-light rounded h-100">
          <div class="display-6 text-primary mb-3">03</div>
          <h4 class="mb-3">Processing</h4>
          <p class="text-dark-muted mb-0">Expert craftsmen apply your chosen finish with precision.</p>
        </div>
      </div>
      <div class="col-md-6">
        <div class="p-4 bg-light rounded h-100">
          <div class="display-6 text-primary mb-3">04</div>
          <h4 class="mb-3">Delivery</h4>
          <p class="text-dark-muted mb-0">Careful packaging and delivery to your location.</p>
        </div>
      </div>
    </div>
  </div>
</section>