<script setup></script>

<template>
  <!-- Page Content -->
  <div class="content">
    <!-- Hero -->
    <BaseBackground image="/assets/media/photos/photo33@2x.jpg">
      <BaseBlock transparent content-full class="bg-primary-dark-op">
        <div class="py-4 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>
      </BaseBlock>
    </BaseBackground>
    <!-- END Hero -->

    <!-- 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>
