<!-- In the style area you can change colors and spaces. -->

<style>
    .cp-dashboard-page {
      background-color: #f8f8f8;
      position:absolute;
      width: 100%;
      height: 100%;
    }
  
    .banner-section {
      padding-bottom: 32px;
    }
  
    .teaser-section {
      display: flex;
      flex-direction: column;
      justify-content: center;
      color: #444444;
      align-items: center;
      padding-right: 16px;
      padding-left: 16px;
      padding-bottom: 32px;
      text-align: center;
    }
  
    .teaser-title {
      font-size: 18px;
      font-weight: 500;
    }
  
    .teaser-subtitle {
      color: #727272;
    }
  
    .cards-section {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: center;
      gap: 32px;
  
      padding-right: 16px;
      padding-left: 16px;
      padding-bottom: 32px;
    }
  
    @media screen and (min-width: 600px) {
      .cards-section {
        padding-right: 10%;
        padding-left: 10%;
      }
  
      .teaser-section {
        padding-right: 20%;
        padding-left: 20%;
      }
    }
  </style>

<!-- Below the style area you find the predefined widgets from Picturepark.  -->


  <div class="cp-dashboard-page">
    <section class="banner-section">
      <cp-dashboard-banner
        backgroundImageUrl="https://picturepark.com/data/Releases/11.3-Rigi/CP-Dashboard-Resources/belinda-fewings-6wAGwpsXHE0-unsplash.jpg"
        teaserTitle="Welcome to your Sales & Social Toolbox"
        teaserText="Search or click on a box below for a specific area"
      >
      </cp-dashboard-banner>
    </section>
    <section class="teaser-section">
      <p class="teaser-title">
        Sales Playbooks - Digitized. 
      </p>
      <p class="teaser-subtitle">
        Sales Playbooks. Digitized.
  Stop scrambling, start executing. Unlock your team’s potential by delivering your company’s knowledge, content, and playbooks on-demand.
      </p>
    </section>
    <section class="cards-section">
      <cp-dashboard-card
        imageWidth="300"
        imageHeight="200"
        title="Marketing Strategy"
        channelId="rootChannel"
        url="/contents/rootChannel"
        imageUrl="https://picturepark.com/data/Releases/11.3-Rigi/CP-Dashboard-Resources/campaign-creators-yktK2qaiVHI-unsplash.jpg"
      >
      </cp-dashboard-card>
  
      <cp-dashboard-card
        channelId="searchSuggestion"
        imageWidth="300"
        imageHeight="200"
        title="Sales Playbooks & Battlecards"
        channelId="rootChannel"
        url="/contents/rootChannel"
        imageUrl="https://picturepark.com/data/Releases/11.3-Rigi/CP-Dashboard-Resources/arno-senoner-UhvEJosq-Zo-unsplash.jpg"
      >
      </cp-dashboard-card>
  
      <cp-dashboard-card
        channelId="keywords"
        openInNewTab="true"
        imageWidth="300"
        imageHeight="200"
        title="Social Media Material"
        channelId="rootChannel"
        url="/contents/rootChannel"
        imageUrl="https://picturepark.com/data/Releases/11.3-Rigi/CP-Dashboard-Resources/adem-ay-Tk9m_HP4rgQ-unsplash.jpg"
      >
      </cp-dashboard-card>
       
      <cp-dashboard-card
      
 channelId="keywords"         openInNewTab="true"
        imageWidth="300"
        imageHeight="200"
        title="Designs & Mockups"
        channelId="rootChannel"
        url="https://picturepark.com"
        imageUrl="https://picturepark.com/data/Releases/11.3-Rigi/CP-Dashboard-Resources/hal-gatewood-tZc3vjPCk-Q-unsplash.jpg" 
      >
      </cp-dashboard-card>
    </section>
  </div>