<script setup></script>

<template>
  <!-- Hero -->
  <BaseBackground
    image="/assets/media/photos/photo33@2x.jpg"
    inner-class="bg-primary-dark-op"
  >
    <div class="content content-full">
      <div class="py-3 text-center">
        <h1 class="h3 text-white fw-bold mb-2">Dashboard</h1>
        <h2 class="h6 fw-medium text-white-75 mb-0">
          Welcome to your app, everything looks great!
        </h2>
      </div>
    </div>
  </BaseBackground>
  <!-- END Hero -->

  <!-- Page Content -->
  <div class="content">
    <!-- Dummy content -->
    <div class="row">
      <div class="col-sm-4">
        <BaseBlock>
          <p class="text-center py-6">...</p>
        </BaseBlock>
      </div>
      <div class="col-sm-4">
        <BaseBlock>
          <p class="text-center py-6">...</p>
        </BaseBlock>
      </div>
      <div class="col-sm-4">
        <BaseBlock>
          <p class="text-center py-6">...</p>
        </BaseBlock>
      </div>
      <div class="col-12">
        <BaseBlock>
          <p class="text-center py-6">...</p>
        </BaseBlock>
      </div>
      <div class="col-sm-6">
        <BaseBlock>
          <p class="text-center py-6">...</p>
        </BaseBlock>
      </div>
      <div class="col-sm-6">
        <BaseBlock>
          <p class="text-center py-6">...</p>
        </BaseBlock>
      </div>
      <div class="col-12">
        <BaseBlock>
          <p class="text-center py-6">...</p>
        </BaseBlock>
      </div>
    </div>
    <!-- END Dummy content -->
  </div>
  <!-- END Page Content -->
</template>
