admin dashboard with angular

Hi,

I have a nrwl angular 10 project, where I am trying to implement an admin dashboard.So far I used the double navigation template from here:

my code for navigation:

<mdb-navbar-brand>
  <!-- Logo -->
  <li>
    <div class="logo-wrapper waves-light">
      <a href="#"><img src="https://mdbcdn.b-cdn.net/img/logo/mdb-transparent.png"

class="img-fluid flex-center">

<links>
  <!--Search Form-->
  <li>
    <form class="search-form" role="search">
      <div class="form-group md-form mt-0 pt-1" mdbWavesEffect>
        <input type="text" class="form-control" placeholder="Search">
      </div>
    </form>
  </li>
  <!--/.Search Form-->
  <!-- Side navigation links -->
  <li>
    <ul class="collapsible collapsible-accordion">
      <mdb-accordion [multiple]="false" aria-multiselectable="false">

        <!-- Collapsible link -->
        <mdb-accordion-item>
          <mdb-accordion-item-head mdbWavesEffect><mdb-icon fas icon="chevron-right"></mdb-icon> Collapsible menu
          </mdb-accordion-item-head>
          <mdb-accordion-item-body>
            <ul>
              <li><a href="#" mdbWavesEffect>Link 1</a></li>
              <li><a href="#" mdbWavesEffect>Link 2</a></li>
            </ul>
          </mdb-accordion-item-body>
        </mdb-accordion-item>

        <!-- Simple link -->
        <mdb-accordion-item class="no-collase">
          <mdb-accordion-item-head mdbWavesEffect><mdb-icon far icon="hand-pointer"></mdb-icon> Simple link
          </mdb-accordion-item-head>
          <mdb-accordion-item-body></mdb-accordion-item-body>
        </mdb-accordion-item>

        <!-- Collapsible link -->
        <mdb-accordion-item>
          <mdb-accordion-item-head mdbWavesEffect><mdb-icon far icon="eye"></mdb-icon> Collapsible menu 2
          </mdb-accordion-item-head>
          <mdb-accordion-item-body>
            <ul>
              <li><a href="#" mdbWavesEffect>Link 1</a></li>
              <li><a href="#" mdbWavesEffect>Link 2</a></li>
            </ul>
          </mdb-accordion-item-body>
        </mdb-accordion-item>

        <!-- Simple link -->
        <mdb-accordion-item class="no-collase">
          <mdb-accordion-item-head mdbWavesEffect><mdb-icon far icon="gem"></mdb-icon> Simple link 2</mdb-accordion-item-head>
          <mdb-accordion-item-body></mdb-accordion-item-body>
        </mdb-accordion-item>

      </mdb-accordion>
    </ul>
  </li>
  <!--/. Side navigation links -->
</links>
<div class="sidenav-bg mask-strong"></div>   </mdb-side-nav>   <!--/. Sidebar navigation -->

<navlinks class="navbar-container">
  <!-- SideNav slide-out button -->
  <div class="float-left">
    <a (click)="sidenav.show()" class="button-collapse"><mdb-icon fas icon="bars"></mdb-icon></a>
  </div>
  <!--/. SideNav slide-out button -->
</navlinks>

<mdb-navbar-brand>
  <!-- Breadcrumb-->
  <div class="breadcrumbs breadcrumb-dn mr-auto">
    <p>Material Design for Bootstrap</p>
  </div>
  <!--/. Breadcrumb-->
</mdb-navbar-brand>

<navlinks>
  <ul class="nav navbar-nav nav-flex-icons ml-auto ie-double-nav">
    <li class="nav-item">
      <a class="nav-link waves-light" mdbWavesEffect><mdb-icon fas icon="envelope"></mdb-icon> <span
        class="clearfix d-none d-sm-inline-block">Contact</span></a>
    </li>
    <li class="nav-item">
      <a class="nav-link waves-light" mdbWavesEffect><mdb-icon far icon="comments"></mdb-icon> <span
        class="clearfix d-none d-sm-inline-block">Support</span></a>
    </li>
    <li class="nav-item">
      <a class="nav-link waves-light" mdbWavesEffect><mdb-icon fas icon="user"></mdb-icon> <span
        class="clearfix d-none d-sm-inline-block">Account</span></a>
    </li>
    <li class="nav-item dropdown btn-group" dropdown>
      <a dropdownToggle type="button" class="nav-link dropdown-toggle waves-light" mdbWavesEffect>
        Dropdown
      </a>
      <div class="dropdown-menu dropdown-primary dropdown-menu-right" role="menu">
        <a class="dropdown-item" href="#">Action</a>
        <a class="dropdown-item" href="#">Another action</a>
        <a class="dropdown-item" href="#">Something else here</a>
      </div>
    </li>
  </ul>
</navlinks>   </mdb-navbar>   <!--/. Navbar -->

now I am trying to combine it with 3 cards in the main section, but this is where the code breaks, I have to get 3 cards in a row with equal space inbetween. But the design of the card is broken after inserting one card alone.

This is my code for card:

<!--Card image-->
<div class="view view-cascade gradient-card-header blue-gradient">
  <h2 class="card-header-title">Marta</h2>
  <p>Deserve for her own card</p>
</div>
<!--/Card image-->

<mdb-card-body cascade="true" class="text-center">
  <!--Card content-->

  <mdb-card-text>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, ex, 
       recusandae. Facere modi
    sunt, quod
    quibusdam
    dignissimos neque rem nihil ratione est placeat vel, natus non quos laudantium 
       veritatis sequi.Ut enim
    ad
    minima
    veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam.
  </mdb-card-text>

  <!--Twitter-->
  <a class="icons-sm tw-ic">
    <mdb-icon fab icon="twitter" class="px-2"> </mdb-icon>
  </a>
  <!--Linkedin-->
  <a class="icons-sm li-ic">
    <mdb-icon fab icon="linkedin-in" class="px-2"> </mdb-icon>
  </a>
  <!--Facebook-->
  <a class="icons-sm fb-ic">
    <mdb-icon fab icon="facebook-f" class="px-2"> </mdb-icon>
  </a>
  <!--Email-->
  <a class="icons-sm email-ic">
    <mdb-icon fas icon="envelope" class="px-2"> </mdb-icon>
  </a>

</mdb-card-body>
<!--/.Card content-->

What I want to achieve is this here at least the first 3 cards:

Admin dashboard MDB