ngx-admin/docs/app/pages/home/backend-bundles-section/backend-bundles-section.component.html

<ngx-landing-section-title>
  Backend Bundles
</ngx-landing-section-title>

<div class="section-container">

  <p class="features__description">
    Looking for a way to integrate Angular ngx-admin with .NET, Node.js, Ruby or PHP? We are here to save your time on painful setup, configuration and routing tasks.
    Choose starter kit bundle based on a technology of your choice below.
  </p>

  <div class="package-switcher">
    <div [(ngModel)]="selectedLicenseType" ngbRadioGroup
         class="package-switcher__btn-group btn-group btn-group-toggle btn-outline-toggle-group btn-group-full-width btn-toggle-radio-group">
      <label ngbButtonLabel class="package-switcher__btn btn btn-outline-secondary">
        <input ngbButton type="radio" [value]="personalLicense"> {{ personalLicense }}
      </label>
      <label ngbButtonLabel class="package-switcher__btn btn btn-outline-secondary">
        <input ngbButton type="radio" [value]="commercialLicense"> {{ commercialLicense }}
      </label>
    </div>
  </div>

  <ul class="packages">
    <li class="packages__item">
      <nb-flip-card [showToggleButton]="false" [flipped]="firstCardFlipped">
        <nb-card-front class="package-card package-card--front">
          <nb-card>
            <nb-card-body>
              <div class="package-card__image package-card__image--dot-net"></div>
              <h4 class="package-card__title">{{ ecomName }}</h4>
              <h4 class="package-card__title">{{ netName }}</h4>
              <p class="package-card__description">
                E-Commerce Dashboard integrated with REST data services based on .NET Framework, Web API and Entity Framework 6.2
              </p>
              <div class="package-card__price-wrapper">
                <span class="package-card__price package-card__price--old">${{ isCommercial() ? '2000' : '200' }}</span>
                <span class="package-card__price">${{ isCommercial() ? '1500' : '150' }}</span>
              </div>
              <a href="https://store.akveo.com/collections/frontpage/products/e-commerce-net-ngx-admin{{ isCommercial() ? '?variant=14430289297457' : '' }}"
                 class="package-card__buy-link btn btn-demo"
                 nbButton>
                 Buy now
              </a>
            </nb-card-body>
          </nb-card>
        </nb-card-front>
        <nb-card-back class="package-card package-card--back">
          <nb-card>
            <nb-card-body>
              <h4 class="package-card__type">{{ selectedLicenseType }}</h4>
              <a [href]="firstBundleMail"
                 target="_blank"
                 class="package-card__buy-link btn btn-demo"
                 nbButton>
                 Buy now
              </a>
            </nb-card-body>
          </nb-card>
        </nb-card-back>
      </nb-flip-card>
    </li>
    <li class="packages__item">
      <nb-flip-card [showToggleButton]="false" [flipped]="secondCardFlipped">
        <nb-card-front class="package-card package-card--front">
          <nb-card>
            <nb-card-body>
              <div class="package-card__image package-card__image--dot-net"></div>
              <h4 class="package-card__title">{{ iotName }}</h4>
              <h4 class="package-card__title">{{ netName }}</h4>
              <p class="package-card__description">
                IoT Dashboard integrated with REST data services based on .NET Framework, Web API and Entity Framework 6.2
              </p>
              <div class="package-card__price-wrapper">
                <span class="package-card__price package-card__price--old">${{ isCommercial() ? '2000' : '200' }}</span>
                <span class="package-card__price">${{ isCommercial() ? '1500' : '150' }}</span>
              </div>
              <a href="https://store.akveo.com/collections/frontpage/products/iot-net-ngx-admin{{ isCommercial() ? '?variant=14434651471921' : '' }}"
                 class="package-card__buy-link btn btn-demo"
                 nbButton>
                Buy now
              </a>
            </nb-card-body>
          </nb-card>
        </nb-card-front>
        <nb-card-back class="package-card package-card--back">
          <nb-card>
            <nb-card-body>
              <h4 class="package-card__type">{{ selectedLicenseType }}</h4>
              <a href="https://store.akveo.com/collections/frontpage/products/iot-net-ngx-admin"
                 class="package-card__buy-link btn btn-demo"
                 nbButton>
                Buy now
              </a>
            </nb-card-body>
          </nb-card>
        </nb-card-back>
      </nb-flip-card>
    </li>
    <li class="packages__item">
      <nb-flip-card [showToggleButton]="false" [flipped]="thirdCardFlipped">
        <nb-card-front class="package-card package-card--front">
          <nb-card>
            <nb-card-body>
              <div class="package-card__image package-card__image--dot-net-core"></div>
              <h4 class="package-card__title">{{ ecomName }}</h4>
              <h4 class="package-card__title">{{ netCoreName }}</h4>
              <p class="package-card__description">
                E-Commerce Dashboard integrated with REST data services based on .NET Core, Web API and Entity Framework 2.2
              </p>
              <div class="package-card__price-wrapper">
                <span class="package-card__price package-card__price--old">${{ isCommercial() ? '1800' : '180' }}</span>
                <span class="package-card__price">${{ isCommercial() ? '1400' : '140' }}</span>
              </div>
              <a [href]="thirdBundleMail"
                 class="package-card__buy-link btn btn-demo"
                 nbButton>
                Buy now
              </a>
            </nb-card-body>
          </nb-card>
        </nb-card-front>
        <nb-card-back class="package-card package-card--back">
          <nb-card>
            <nb-card-body>
              <h4 class="package-card__type">{{ selectedLicenseType }}</h4>
              <a [href]="thirdBundleMail"
                 class="package-card__buy-link btn btn-demo"
                 nbButton>
                Buy now
              </a>
            </nb-card-body>
          </nb-card>
        </nb-card-back>
      </nb-flip-card>
    </li>
    <li class="packages__item">
      <nb-flip-card [showToggleButton]="false" [flipped]="fourthCardFlipped">
        <nb-card-front class="package-card package-card--front">
          <nb-card>
            <nb-card-body>
              <div class="package-card__image package-card__image--dot-net-core"></div>
              <h4 class="package-card__title">{{ iotName }}</h4>
              <h4 class="package-card__title">{{ netCoreName }}</h4>
              <p class="package-card__description">
                IoT Dashboard integrated with REST data services based on .NET Core, Web API and Entity Framework 2.2
              </p>
              <div class="package-card__price-wrapper">
                <span class="package-card__price package-card__price--old">${{ isCommercial() ? '1800' : '180' }}</span>
                <span class="package-card__price">${{ isCommercial() ? '1400' : '140' }}</span>
              </div>
              <a [href]="fourthBundleMail"
                 class="package-card__buy-link btn btn-demo"
                 nbButton>
                Buy now
              </a>
            </nb-card-body>
          </nb-card>
        </nb-card-front>
        <nb-card-back class="package-card package-card--back">
          <nb-card>
            <nb-card-body>
              <h4 class="package-card__type">{{ selectedLicenseType }}</h4>
              <a [href]="fourthBundleMail"
                 class="package-card__buy-link btn btn-demo"
                 nbButton>
                 Buy now
              </a>
            </nb-card-body>
          </nb-card>
        </nb-card-back>
      </nb-flip-card>
    </li>
  </ul>

  <table class="features-table">
    <tr class="header">
      <th class="left">FEATURES</th>
      <th>PERSONAL</th>
      <th>COMMERCIAL</th>
    </tr>
    <tr>
      <td class="left">ngx-admin template with 100+ UI components integrated with Backend Services</td>
      <td>
        <i [innerHTML]="'checkmark-outline' | eva: { width: 24, height: 24, fill: '#00db92' }"></i>
      </td>
      <td>
        <i [innerHTML]="'checkmark-outline' | eva: { width: 24, height: 24, fill: '#00db92' }"></i>
      </td>
    </tr>
    <tr>
      <td class="left">Backend Services and Repository layers with data access</td>
      <td>
        <i [innerHTML]="'checkmark-outline' | eva: { width: 24, height: 24, fill: '#00db92' }"></i>
      </td>
      <td>
        <i [innerHTML]="'checkmark-outline' | eva: { width: 24, height: 24, fill: '#00db92' }"></i>
      </td>
    </tr>
    <tr>
      <td class="left">JWT Authentication setup for UI and Backend</td>
      <td>
        <i [innerHTML]="'checkmark-outline' | eva: { width: 24, height: 24, fill: '#00db92' }"></i>
      </td>
      <td>
        <i [innerHTML]="'checkmark-outline' | eva: { width: 24, height: 24, fill: '#00db92' }"></i>
      </td>
    </tr>
    <tr>
      <td class="left">Running instructions and code documentation</td>
      <td>
        <i [innerHTML]="'checkmark-outline' | eva: { width: 24, height: 24, fill: '#00db92' }"></i>
      </td>
      <td>
        <i [innerHTML]="'checkmark-outline' | eva: { width: 24, height: 24, fill: '#00db92' }"></i>
      </td>
    </tr>
    <tr>
      <td class="left">Commercial Usage</td>
      <td>
        <i [innerHTML]="'close-outline' | eva: { width: 24, height: 24, fill: '#ff8588' }"></i>
      </td>
      <td>
        <i [innerHTML]="'checkmark-outline' | eva: { width: 24, height: 24, fill: '#00db92' }"></i>
      </td>
    </tr>
    <tr>
      <td class="left">One Year support and bug fixes on request</td>
      <td>
        <i [innerHTML]="'close-outline' | eva: { width: 24, height: 24, fill: '#ff8588' }"></i>
      </td>
      <td>
        <i [innerHTML]="'checkmark-outline' | eva: { width: 24, height: 24, fill: '#00db92' }"></i>
      </td>
    </tr>
  </table>

  <div class="request-code-section">
    <a href="mailto:support@akveo.com?subject=Bundle code sample request" class="package-card__buy-link btn btn-demo" nbButton>
      REQUEST CODE SAMPLE
    </a>
  </div>

  <ngx-landing-description-section *ngIf="descriptions | async" [descriptions]="descriptions | async"></ngx-landing-description-section>

  <div class="bundles-architecture">
    <ngx-landing-section-title>
      Architecture Design
    </ngx-landing-section-title>

    <p class="features__description">The schema describes high-level solution architecture.</p>

    <picture class="bundle-scheme">
      <source type="image/webp" srcset="assets/img/bundle-scheme@1x.webp 1x, assets/img/bundle-scheme@2x.webp 2x">
      <img class="bundle-scheme__image" src="assets/img/bundle-scheme@1x.png" srcset="assets/img/bundle-scheme@2x.png 2x" alt="Backend bundles">
    </picture>
  </div>

  <p class="features__description">Need more details or have a question?</p>

  <div class="request-code-section">
    <a href="mailto:support@akveo.com?subject=Custom bundle request" class="package-card__buy-link btn btn-demo" nbButton>
      CONTACT US
    </a>
  </div>

</div>