abp/npm/ng-packs/apps/dev-app/src/app/home/home.component.html

<div class="container">
  <div class="p-5 text-center">
    <div class="d-inline-block bg-success text-white p-1 h5 rounded mb-4" role="alert">
      <h5 class="m-1">
        <i class="fas fa-rocket" aria-hidden="true"></i> Congratulations,
        <strong>MyProjectName</strong> is successfully running!
      </h5>
    </div>
    <h1>{{ '::Welcome' | abpLocalization }}</h1>

    <p class="lead px-lg-5 mx-lg-5">{{ '::LongWelcomeMessage' | abpLocalization }}</p>

    @if (!hasLoggedIn) {
      <abp-button
        [loading]="loading"
        (click)="login()"
        [disabled]="loading"
        class="px-4 ml-1"
        role="button"
        iconClass="fa fa-sign-in"
      >
        {{ 'AbpAccount::Login' | abpLocalization }}
      </abp-button>
    }
  </div>
  <div class="my-3 text-center">
    <h3>Let's improve your application!</h3>
    <p>Here are some links to help you get started:</p>
  </div>
  <abp-card cardClass="mt-4 mb-5">
    <abp-card-body>
      <div class="row text-center justify-content-md-center">
        <ng-container
          *ngTemplateOutlet="
            starterLinkTemplate;
            context: {
              $implicit: {
                title: 'Learn the ABP Framework',
                description:
                  'Explore the compherensive documentation to learn how to build a modern web application.',
                links: [
                  {
                    href: 'https://abp.io/docs/latest?ref=tmpl',
                    label: 'See Documents'
                  }
                ]
              }
            }
          "
        ></ng-container>

        <ng-container
          *ngTemplateOutlet="
            starterLinkTemplate;
            context: {
              $implicit: {
                title: 'Samples',
                description: 'See the example projects built with the ABP Framework.',
                links: [
                  {
                    href: 'https://abp.io/docs/latest/Samples/Index?ref=tmpl',
                    label: 'All samples'
                  }
                ]
              }
            }
          "
        ></ng-container>

        <ng-container
          *ngTemplateOutlet="
            starterLinkTemplate;
            context: {
              $implicit: {
                title: 'ABP Community',
                description: 'Get involved with a vibrant community and become a contributor.',
                links: [
                  {
                    href: 'https://abp.io/community/',
                    label: 'Community'
                  },
                  {
                    href: 'https://abp.io/docs/latest/Contribution/Index?ref=tmpl',
                    label: 'Contribute'
                  }
                ]
              }
            }
          "
        ></ng-container>
      </div>
      <div class="row text-center mt-lg-3 justify-content-md-center">
        <ng-container
          *ngTemplateOutlet="
            starterLinkTemplate;
            context: {
              $implicit: {
                title: 'ABP Blog',
                description: 'Take a look at our recently published articles.',
                links: [
                  {
                    href: 'https://abp.io/blog?ref=tmpl',
                    label: 'See Blog'
                  }
                ]
              }
            }
          "
        ></ng-container>

        <ng-template #githubButtonsTemplate>
          <p class="mb-1">
            <iframe
              scrolling="no"
              src="https://buttons.github.io/buttons.html#href=https%3A%2F%2Fgithub.com%2Fabpframework%2Fabp&amp;title=&amp;aria-label=Star%20tabalinas%2Fjsgrid%20on%20GitHub&amp;data-icon=octicon-star&amp;data-text=Star&amp;data-size=large&amp;data-show-count=true"
              style="
                width: 122px;
                height: 28px;
                border: none;
                display: inline-block;
                margin-right: 4px;
              "
            ></iframe>
            <iframe
              scrolling="no"
              src="https://buttons.github.io/buttons.html#href=https%3A%2F%2Fgithub.com%2Fabpframework%2Fabp%2Fissues&amp;title=&amp;aria-label=Issue%20tabalinas%2Fjsgrid%20on%20GitHub&amp;data-icon=octicon-issue-opened&amp;data-text=Issue&amp;data-size=large"
              style="
                width: 72px;
                height: 28px;
                border: none;
                display: inline-block;
                margin-right: 4px;
              "
            ></iframe>

            <iframe
              scrolling="no"
              src="https://buttons.github.io/buttons.html#href=https%3A%2F%2Fgithub.com%2Fabpframework%2Fabp%2Ffork&amp;title=&amp;aria-label=Fork%20tabalinas%2Fjsgrid%20on%20GitHub&amp;data-icon=octicon-repo-forked&amp;data-text=Fork&amp;data-size=large&amp;"
              style="width: 72px; height: 28px; border: none; display: inline-block"
            ></iframe>
          </p>
        </ng-template>

        <ng-container
          *ngTemplateOutlet="
            starterLinkTemplate;
            context: {
              $implicit: {
                title: 'Github',
                description:
                  'Do you love the ABP Framework? Please <strong>give a star</strong> to support it!',
                links: [
                  {
                    href: 'https://github.com/abpframework/abp/issues/new?template=feature.md',
                    label: 'Request a feature'
                  }
                ],
                customTemplate: githubButtonsTemplate
              }
            }
          "
        ></ng-container>

        <ng-container
          *ngTemplateOutlet="
            starterLinkTemplate;
            context: {
              $implicit: {
                title: 'Stackoverflow',
                description: 'See answers to previously asked questions or ask a new one.',
                links: [
                  {
                    href: 'https://stackoverflow.com/questions/tagged/abp',
                    label: 'Questions'
                  },
                  {
                    href: 'https://stackoverflow.com/questions/ask',
                    label: 'Ask a Question'
                  }
                ]
              }
            }
          "
        ></ng-container>
      </div>
    </abp-card-body>
  </abp-card>

  <div class="mt-5 my-3 text-center">
    <h3>Meet the ABP</h3>
    <p>A Complete Web Application Platform Built on the ABP Framework</p>
  </div>
  <abp-card cardClass="mt-4 mb-5">
    <abp-card-body>
      <p class="px-lg-5 mx-lg-5 py-3 text-center">
        <a href="https://abp.io/" target="_blank">ABP</a> is a platform based
        on the open source ABP framework. It provides pre-built application modules, rapid
        application development tooling, professional UI themes, premium support and more.
      </p>

      <div class="row text-center justify-content-md-center">
        <ng-container
          *ngTemplateOutlet="
            featuresTemplate;
            context: {
              $implicit: {
                title: 'Startup Templates',
                href: 'https://abp.io/startup-templates?ref=tmpl'
              }
            }
          "
        ></ng-container>

        <ng-container
          *ngTemplateOutlet="
            featuresTemplate;
            context: {
              $implicit: {
                title: 'Application Modules',
                href: 'https://abp.io/modules?ref=tmpl'
              }
            }
          "
        ></ng-container>

        <ng-container
          *ngTemplateOutlet="
            featuresTemplate;
            context: {
              $implicit: {
                title: 'Developer<br />Tools',
                href: 'https://abp.io/tools?ref=tmpl'
              }
            }
          "
        ></ng-container>

        <ng-container
          *ngTemplateOutlet="
            featuresTemplate;
            context: {
              $implicit: {
                title: 'UI<br />Themes',
                href: 'https://abp.io/themes?ref=tmpl'
              }
            }
          "
        ></ng-container>

        <ng-container
          *ngTemplateOutlet="
            featuresTemplate;
            context: {
              $implicit: {
                title: 'Premium Support',
                href: 'https://abp.io/support/questions?ref=tmpl'
              }
            }
          "
        ></ng-container>

        <ng-container
          *ngTemplateOutlet="
            featuresTemplate;
            context: {
              $implicit: {
                title: 'Additional Services',
                href: 'https://abp.io/services'
              }
            }
          "
        ></ng-container>
      </div>
    </abp-card-body>
  </abp-card>

  <div class="mb-5 text-center">
    <p class="align-middle">
      <a href="https://twitter.com/abpframework" target="_blank" class="mx-2"
        ><i class="fa fa-twitter" aria-hidden="true"></i
        ><span class="text-secondary"> Abp Framework</span></a
      >
      <a href="https://twitter.com/abpcommercial" target="_blank" class="mx-2"
        ><i class="fa fa-twitter" aria-hidden="true"></i
        ><span class="text-secondary"> Abp </span></a
      >
      <a href="https://github.com/abpframework/abp" target="_blank" class="mx-2"
        ><i class="fa fa-github" aria-hidden="true"></i
        ><span class="text-secondary"> abpframework</span></a
      >
    </p>
  </div>
</div>

<ng-template #starterLinkTemplate let-context>
  <div class="col-lg-4 border-left">
    <div class="p-4">
      <h5 class="mb-3">
        <i class="fas fa-cubes text-secondary d-block my-3 fa-2x" aria-hidden="true"></i>
        {{ context.title }}
      </h5>
      <p [innerHTML]="context.description"></p>
      @if (context.customTemplate) {
        <ng-container [ngTemplateOutlet]="context.customTemplate"></ng-container>
      }
      @for (link of context.links; track $index) {
        <a [href]="link.href" target="_blank" class="btn btn-link px-1"
          >{{ link.label }} <i class="fas fa-chevron-right" aria-hidden="true"></i
        ></a>
      }
    </div>
  </div>
</ng-template>

<ng-template #featuresTemplate let-context>
  <div class="col-lg-2 border-left">
    <div class="p-3">
      <h6>
        <i class="fas fa-plus d-block mb-3 fa- 2x text-secondary" aria-hidden="true"></i>
        <span [innerHTML]="context.title"></span>
        <a [href]="context.href" target="_blank" class="d-block mt-2 btn btn-sm btn-link"
          >Details <i class="fas fa-chevron-right" aria-hidden="true"></i
        ></a>
      </h6>
    </div>
  </div>
</ng-template>

<style scoped>
  .col-lg-2.border-left:nth-of-type(6n + 1) {
    border-left: 0 !important;
  }

  .col-lg-4.border-left:nth-of-type(3n + 1) {
    border-left: 0 !important;
  }

  @media (max-width: 991px) {
    .border-left {
      border-left: 0 !important;
    }
  }
</style>