<h2>Sizes</h2>
<p>There are two sizes for the Hero component: small and large. The small Hero component takes up a portion of the viewport width and the large Hero component takes up the entire viewport width.</p>

<h3>Small</h3>

<%= sage_component SageHero, {
  title: "Learn with Kajabi in our live workshops",
  description: "Did you know we offer free workshops? Kajabi experts host live workshops every week on topics from marketing your products to building out your Kajabi account.",
  image: "hero-workshop-placeholder.jpg",
  alt_text: "Multi-layered illustration of UI elements and woman clasping her hands together in excitement",
  size: "small",
} do %>
  <% content_for :sage_hero_footer_actions do %>
    <%= sage_component SageButton, {
      value: "Learn more",
      style: "primary",
    } %>
  <% end %>
<% end %>

<h3>Large</h3>
<%= sage_component SageHero, {
  title: "Learn with Kajabi in our live workshops",
  description: "Did you know we offer free workshops? Kajabi experts host live workshops every week on topics from marketing your products to building out your Kajabi account.",
  image: "hero-workshop-placeholder.jpg",
  alt_text: "Multi-layered illustration of UI elements and woman clasping her hands together in excitement",
  size: "large",
} do %>
  <% content_for :sage_hero_footer_actions do %>
    <%= sage_component SageButton, {
      value: "Learn more",
      style: "primary",
    } %>
  <% end %>
<% end %>

<%= sage_component SageDivider, {} %>

<h2>Borderless</h2>
<p>When the Hero is set to borderless, the Hero will have no border.</p>

<%= sage_component SageHero, {
  title: "Learn with Kajabi in our live workshops",
  description: "Did you know we offer free workshops? Kajabi experts host live workshops every week on topics from marketing your products to building out your Kajabi account.",
  image: "hero-workshop-placeholder.jpg",
  alt_text: "Multi-layered illustration of UI elements and woman clasping her hands together in excitement",
  size: "small",
  borderless: true,
} do %>
  <% content_for :sage_hero_footer_actions do %>
    <%= sage_component SageButton, {
      value: "Learn more",
      style: "primary",
    } %>
  <% end %>
<% end %>

<%= sage_component SageDivider, {} %>

<h2>Contained</h2>
<p>When the Hero is set to contained, the Hero will have margins that push the image away from the sides of the Hero container.</p>

<%= sage_component SageHero, {
  title: "Introducing the Kajabi template store",
  description: "Did you know we offer free workshops? Kajabi experts host live workshops every week on topics from marketing your products to building out your Kajabi account.",
  image: "hero-contained-placeholder.png",
  alt_text: "Multi layered illustration of UI elements and woman smiling to the camera",
  size: "small",
  contained: true,
} do %>
  <% content_for :sage_hero_footer_actions do %>
    <%= sage_component SageButton, {
      style: "primary",
      value: "Learn more",
    } %>
  <% end %>
<% end %>

<%= sage_component SageDivider, {} %>

<h2>Custom Background</h2>
<p>When the Hero has a custom background color, the background color will be applied to the entire Hero.</p>

<%= sage_component SageHero, {
  title: "Learn with Kajabi in our live workshops",
  description: "Did you know we offer free workshops? Kajabi experts host live workshops every week on topics from marketing your products to building out your Kajabi account.",
  image: "hero-workshop-placeholder.jpg",
  alt_text: "Multi-layered illustration of UI elements and woman clasping her hands together in excitement",
  custom_background_color: "#e6f4fe",
  size: "small",
} do %>
  <% content_for :sage_hero_footer_actions do %>
    <%= sage_component SageButton, {
      style: "primary",
      value: "Learn more",
    } %>
  <% end %>
<% end %>

<%= sage_component SageDivider, {} %>

<h2>Image Start</h2>
<p>When the image is set to start, the image will be placed at the start of the Hero component.</p>

<%= sage_component SageHero, {
  title: "Learn with Kajabi in our live workshops",
  description: "Did you know we offer free workshops? Kajabi experts host live workshops every week on topics from marketing your products to building out your Kajabi account.",
  image: "hero-workshop-placeholder.jpg",
  alt_text: "Multi-layered illustration of UI elements and woman clasping her hands together in excitement",
  size: "small",
  image_start: true,
} do %>
  <% content_for :sage_hero_footer_actions do %>
    <%= sage_component SageButton, {
      value: "Learn more",
      style: "primary",
    } %>
  <% end %>
<% end %>

<%= sage_component SageDivider, {} %>

<h2>CTA Attribute</h2>
<p>When the Hero has a CTA attribute, the CTA will be applied to the Hero image.</p>

<%= sage_component SageHero, {
  title: "Learn with Kajabi in our live workshops",
  description: "Did you know we offer free workshops? Kajabi experts host live workshops every week on topics from marketing your products to building out your Kajabi account.",
  image: "hero-workshop-placeholder.jpg",
  alt_text: "Multi-layered illustration of UI elements and woman clasping her hands together in excitement",
  size: "small",
  cta_attributes: {
    "data-js-modaltrigger": "cool-modal",
    href: "#",
  },
} do %>
  <% content_for :sage_hero_footer_actions do %>
    <%= sage_component SageButton, {
      value: "Learn more",
      style: "primary",
    } %>
  <% end %>
<% end %>

<%# This is the modal triggered from various examples in this documentation %>
<%= sage_component SageModal, { id: "cool-modal"} do %>
  <%= sage_component SageModalContent, {
    title: "Modal title",
  } do %>
    <% content_for :sage_header_aside do %>
      <%= sage_component SageButton, {
        style: "secondary",
        subtle: true,
        value: "Close Modal",
        icon: { name: "remove", style: "only" },
        attributes: { "data-js-modal": true }
      } %>
    <% end %>

    <p>Add a description of the content you're showing in the modal.</p>

    <% content_for :sage_footer do %>
      <%= sage_component SageButton, {
        style: "secondary",
        value: "Cancel",
      } %>
      <%= sage_component SageButton, {
        style: "primary",
        value: "Confirm",
      } %>
    <% end %>
  <% end %>
<% end %>