Dp 687

src/app/adf-home/df-icon-link/df-icon-link.component.scss

@@ -5,7 +5,7 @@ $df-purple-palette: mat.define-palette(theme.$df-purple-palette);
 .plain-icon-link {
   color: mat.get-color-from-palette($df-purple-palette, 600);
   display: flex;
-  justify-content: flex-start;
+  justify-content: left;
   align-items: center;
   text-decoration: none;
   padding: 5px 0px;

src/app/adf-home/df-welcome-page/df-generate-api-card/df-generate-api-card.component.html

@@ -0,0 +1,16 @@
+<mat-card
+  [routerLink]="routerLink"
+  class="df-generate-api-card"
+  appearance="outlined"
+  [style.background-color]="cardFinalBackgroundColor">
+  <mat-card-content class="df-generate-api-card-content">
+    <fa-icon
+      [icon]="icon"
+      size="lg"
+      [style.color]="cardFinalHeaderColor"></fa-icon>
+    <h4 class="df-card-header" [style.color]="cardFinalHeaderColor">
+      {{ headerText | transloco }}
+    </h4>
+    <span class="df-card-description">{{ text | transloco }}</span>
+  </mat-card-content>
+</mat-card>

src/app/adf-home/df-welcome-page/df-generate-api-card/df-generate-api-card.component.scss

@@ -0,0 +1,38 @@
+.df-generate-api-card {
+  cursor: pointer;
+  width: 100%;
+  min-height: 115px;
+  display: flex;
+  flex-direction: column;
+}
+
+.df-generate-api-card-content {
+  display: flex;
+  flex-direction: column;
+  align-items: left;
+  padding: 12px;
+  flex-grow: 1;
+  overflow: hidden;
+
+  fa-icon {
+    margin-bottom: 8px;
+    flex-shrink: 0;
+  }
+
+  .df-card-header {
+    font-size: 14px;
+    font-weight: 500;
+    margin-bottom: 0px;
+    line-height: 1.2;
+  }
+  .df-card-description {
+    font-size: 12px;
+    line-height: 1.4;
+    display: -webkit-box;
+    line-clamp: 2;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}

src/app/adf-home/df-welcome-page/df-generate-api-card/df-generate-api-card.component.ts

@@ -0,0 +1,22 @@
+import { Component, Input } from '@angular/core';
+import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
+import { RouterModule } from '@angular/router';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import { TranslocoPipe } from '@ngneat/transloco';
+import { MatCardModule } from '@angular/material/card';
+
+@Component({
+  selector: 'df-generate-api-card',
+  templateUrl: './df-generate-api-card.component.html',
+  styleUrls: ['./df-generate-api-card.component.scss'],
+  standalone: true,
+  imports: [RouterModule, FontAwesomeModule, TranslocoPipe, MatCardModule],
+})
+export class DfGenerateApiCardComponent {
+  @Input() icon: IconDefinition;
+  @Input() headerText: string;
+  @Input() text: string;
+  @Input() routerLink: string;
+  @Input() cardFinalBackgroundColor: string;
+  @Input() cardFinalHeaderColor: string;
+}

src/app/adf-home/df-welcome-page/df-welcome-page.component.html

@@ -9,27 +9,40 @@
       <article class="flex-column">
         <article>
           <h2>
-            {{ 'home.welcomePage.welcomeHeading' | transloco }}
+            {{ 'home.welcomePage.generateYourApis' | transloco }}
           </h2>
-          <p id="get-started-links">
-            {{ 'home.welcomePage.welcomeSubHeading' | transloco }}
+          <div class="button-group" aria-labelledby="welcome-heading">
+            <df-generate-api-card
+              *ngFor="let card of generateApiCardsData"
+              [icon]="card.icon"
+              [headerText]="card.headerTextKey"
+              [text]="card.textKey"
+              [routerLink]="card.route"
+              [cardFinalBackgroundColor]="card.bgColor"
+              [cardFinalHeaderColor]="card.headerColor">
+            </df-generate-api-card>
+          </div>
+          <p id="need-help-choosing-note">
+            {{ 'home.welcomePage.needHelpChoosing' | transloco }}
           </p>
-          <ul aria-labelledby="get-started-links">
-            <li *ngFor="let resource of welcomePageResources">
-              <ng-container *ngIf="data.isFirstTimeUser; else notFirst">
+          <h3 id="learn-more-heading">
+            {{ 'home.welcomePage.learnMoreHeading' | transloco }}
+          </h3>
+          <ul
+            class="learn-more-links-list"
+            aria-labelledby="learn-more-heading">
+            <ng-container *ngFor="let resource of welcomePageResources">
+              <li
+                *ngIf="
+                  data.isFirstTimeUser ||
+                  resource.name === 'home.resourceLinks.gettingStartedGuide' ||
+                  resource.name === 'home.resourceLinks.fullDocumentation' ||
+                  resource.name === 'home.resourceLinks.blog' ||
+                  resource.name === 'home.resourceLinks.contactSupport'
+                ">
                 <df-icon-link [linkItem]="resource"></df-icon-link>
-              </ng-container>
-              <ng-template #notFirst>
-                <ng-container
-                  *ngIf="
-                    resource.name === 'home.resourceLinks.fullDocumentation' ||
-                    resource.name === 'home.resourceLinks.blog' ||
-                    resource.name === 'home.resourceLinks.contactSupport'
-                  "
-                  ><df-icon-link [linkItem]="resource"></df-icon-link
-                ></ng-container>
-              </ng-template>
-            </li>
+              </li>
+            </ng-container>
           </ul>
         </article>
       </article>

src/app/adf-home/df-welcome-page/df-welcome-page.component.scss

@@ -29,6 +29,7 @@ $df-coral-palette: mat.define-palette(theme.$df-coral-palette);
   &:first-child {
     padding-right: 25px;
   }
+
   &:last-child {
     padding-left: 25px;
   }
@@ -69,6 +70,7 @@ $df-coral-palette: mat.define-palette(theme.$df-coral-palette);
 mat-card.notice-card {
   padding: 30px;
   margin-bottom: 40px;
+
   p {
     a {
       color: mat.get-color-from-palette($df-purple-palette, 600);
@@ -86,20 +88,65 @@ mat-card.notice-card {
   p {
     color: white;
   }
+
   .notice-card {
     background-color: mat.get-color-from-palette(
       $df-purple-palette,
       1003
     ) !important;
   }
 }
+
 .release-container {
   display: flex;
   gap: 15px;
 }
+
 .release-card {
   background-color: mat.get-color-from-palette($df-purple-palette, 100);
 }
+
 .release-btn {
   margin-left: 10px;
 }
+
+.button-group {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  justify-content: space-between;
+  margin-bottom: 16px;
+
+  df-generate-api-card {
+    width: 32%;
+
+    @media (min-width: 960px) and (max-width: 1480px) {
+      width: 48%;
+    }
+
+    @media (max-width: 600px) {
+      width: 48%;
+    }
+
+    @media (max-width: 350px) {
+      width: 98%;
+    }
+  }
+}
+
+#need-help-choosing-note,
+#learn-more-heading {
+  text-align: center;
+  margin: 0;
+}
+
+#need-help-choosing-note {
+  font-size: 12px;
+}
+
+.learn-more-links-list {
+  display: flex;
+  justify-content: space-evenly;
+  flex-wrap: wrap;
+  gap: 10px;
+}

src/app/adf-home/df-welcome-page/df-welcome-page.component.ts

@@ -1,5 +1,16 @@
 import { Component, Inject } from '@angular/core';
 import { CommonModule } from '@angular/common'; // Add this import
+import { RouterModule } from '@angular/router';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import {
+  faDatabase,
+  faCode,
+  faNetworkWired,
+  faFile,
+  faTools,
+  faBook,
+} from '@fortawesome/free-solid-svg-icons';
 
 import {
   javaScriptExampleLinks,
@@ -27,6 +38,9 @@ import { DfThemeService } from 'src/app/shared/services/df-theme.service';
 import { DfBaseCrudService } from 'src/app/shared/services/df-base-crud.service';
 import { SERVICES_SERVICE_TOKEN } from 'src/app/shared/constants/tokens';
 import { DFStorageService } from 'src/app/shared/services/df-storage.service';
+import { ROUTES } from '../../shared/types/routes';
+import { DfGenerateApiCardComponent } from './df-generate-api-card/df-generate-api-card.component';
+
 @Component({
   selector: 'df-welcome-page',
   templateUrl: './df-welcome-page.component.html',
@@ -45,13 +59,32 @@ import { DFStorageService } from 'src/app/shared/services/df-storage.service';
     DfQuickstartPageComponent,
     DfResourcesPageComponent,
     DfDownloadPageComponent,
+    RouterModule,
+    MatButtonModule,
+    MatIconModule,
+    DfGenerateApiCardComponent,
   ],
   providers: [DfBaseCrudService],
 })
 export class DfWelcomePageComponent {
   faCirclePlay = faCirclePlay;
   faHeart = faHeart;
   faComment = faComment;
+  faDatabase = faDatabase;
+  faCode = faCode;
+  faNetworkWired = faNetworkWired;
+  faFile = faFile;
+  faTools = faTools;
+  faBook = faBook;
+
+  fpDBRoute = `/${ROUTES.API_CONNECTIONS}/${ROUTES.API_TYPES}/${ROUTES.DATABASE}/${ROUTES.CREATE}`;
+  fpScriptingRoute = `/${ROUTES.API_CONNECTIONS}/${ROUTES.API_TYPES}/${ROUTES.SCRIPTING}/${ROUTES.CREATE}`;
+  fpNetworkRoute = `/${ROUTES.API_CONNECTIONS}/${ROUTES.API_TYPES}/${ROUTES.NETWORK}/${ROUTES.CREATE}`;
+  fpFileRoute = `/${ROUTES.API_CONNECTIONS}/${ROUTES.API_TYPES}/${ROUTES.FILE}/${ROUTES.CREATE}`;
+  fpUtilityRoute = `/${ROUTES.API_CONNECTIONS}/${ROUTES.API_TYPES}/${ROUTES.UTILITY}/${ROUTES.CREATE}`;
+  fpApiDocsRoute = `/${ROUTES.API_DOCS}`;
+
+  public generateApiCardsData: any[];
 
   welcomePageResources = welcomePageResources;
   nativeExampleLinks = nativeExampleLinks;
@@ -62,7 +95,58 @@ export class DfWelcomePageComponent {
     private themeService: DfThemeService,
     private storageService: DFStorageService,
     @Inject(SERVICES_SERVICE_TOKEN) private servicesService: DfBaseCrudService
-  ) {}
+  ) {
+    this.generateApiCardsData = [
+      {
+        icon: this.faDatabase,
+        headerTextKey: 'home.welcomePage.connectToDatabaseCard.header',
+        textKey: 'home.welcomePage.connectToDatabaseCard.description',
+        route: this.fpDBRoute,
+        bgColor: 'rgba(127, 17, 224, 0.1)',
+        headerColor: 'rgb(127, 17, 224)',
+      },
+      {
+        icon: this.faCode,
+        headerTextKey: 'home.welcomePage.useScriptingServicesCard.header',
+        textKey: 'home.welcomePage.useScriptingServicesCard.description',
+        route: this.fpScriptingRoute,
+        bgColor: 'rgba(92,35,154, 0.1)',
+        headerColor: 'rgb(92,35,154)',
+      },
+      {
+        icon: this.faNetworkWired,
+        headerTextKey: 'home.welcomePage.proxyWebServicesCard.header',
+        textKey: 'home.welcomePage.proxyWebServicesCard.description',
+        route: this.fpNetworkRoute,
+        bgColor: 'rgb(235,253,245)',
+        headerColor: 'rgb(25,97,80)',
+      },
+      {
+        icon: this.faFile,
+        headerTextKey: 'home.welcomePage.exposeFileStorageCard.header',
+        textKey: 'home.welcomePage.exposeFileStorageCard.description',
+        route: this.fpFileRoute,
+        bgColor: 'rgb(255,251,236)',
+        headerColor: 'rgb(136,72,43)',
+      },
+      {
+        icon: this.faTools,
+        headerTextKey: 'home.welcomePage.utilityServicesCard.header',
+        textKey: 'home.welcomePage.utilityServicesCard.description',
+        route: this.fpUtilityRoute,
+        bgColor: 'rgba(80,105,137, 0.1)',
+        headerColor: 'rgb(80,105,137)',
+      },
+      {
+        icon: this.faBook,
+        headerTextKey: 'home.welcomePage.apiDocsCard.header',
+        textKey: 'home.welcomePage.apiDocsCard.description',
+        route: this.fpApiDocsRoute,
+        bgColor: 'rgba(217, 54, 138, 0.1)',
+        headerColor: 'rgb(217, 54, 138)',
+      },
+    ];
+  }
   isDarkMode = this.themeService.darkMode$;
   isFirstTimeUser$ = this.storageService.isFirstTimeUser$;
   releases: any[] = [];

src/assets/i18n/home/en.json

@@ -12,12 +12,37 @@
   },
   "welcomePage": {
     "watchVideoCta": "Watch our video!",
-    "welcomeHeading": "Welcome to DreamFactory!",
-    "welcomeSubHeading": "DreamFactory provides all of the backend services that you need to build great mobile, web, and IoT applications. Follow the links below to get started:",
+    "generateYourApis": "Generate Your APIs!",
+    "connectToDatabaseCard": {
+      "header": "Connect to Database",
+      "description": "SQL Server, Postgres, MySQL, Snowflake and more"
+    },
+    "useScriptingServicesCard": {
+      "header": "Use Scripting Services",
+      "description": "Automate business logic with PHP, NodeJs or Python"
+    },
+    "proxyWebServicesCard": {
+      "header": "Proxy a Web Services",
+      "description": "REST, SOAP, or remote Swagger API"
+    },
+    "exposeFileStorageCard": {
+      "header": "Expose a File Storage",
+      "description": "AWS S3, Azure Blob, or local FS"
+    },
+    "utilityServicesCard": {
+      "header": "Utility API Services",
+      "description": "Logging, caching, and more"
+    },
+    "apiDocsCard": {
+      "header": "Explore API Docs",
+      "description": "Access detailed documentation for all your APIs."
+    },
+    "needHelpChoosing": "need help choosing?",
+    "learnMoreHeading": "Learn More & Get Support",
     "ossUsersHeading": "Attention OSS users",
-    "ossUsersText": "Did you know DreamFactory’s commercial solutions include connectors for Microsoft SQL Server, Oracle, SOAP-to-REST, API limiting, ELK stack integration, and much more? Contact Us at <a href=\"mailto:sales@dreamfactory.com\">sales@dreamfactory.com</a> to arrange a demo with our engineering team!",
+    "ossUsersText": "Did you know DreamFactory's commercial solutions include connectors for Microsoft SQL Server, Oracle, SOAP-to-REST, API limiting, ELK stack integration, and much more? Contact Us at <a href=\"mailto:sales@dreamfactory.com\">sales@dreamfactory.com</a> to arrange a demo with our engineering team!",
     "hearFromYouHeading": "We want to hear from you!",
-    "hearFromYouText": "Has DreamFactory made a difference in your organization? Are you doing something novel and interesting with our software? We’d love to add your story to the Dreamfactory.com user showcase! E-mail us at <a href=\"mailto:info@dreamfactory.com\">info@dreamfactory.com</a> with your project details and we’ll add your organization name, URL, and story to our site!",
+    "hearFromYouText": "Has DreamFactory made a difference in your organization? Are you doing something novel and interesting with our software? We'd love to add your story to the Dreamfactory.com user showcase! E-mail us at <a href=\"mailto:info@dreamfactory.com\">info@dreamfactory.com</a> with your project details and we'll add your organization name, URL, and story to our site!",
     "clientPlatformHeading": "Click on a client platform below to download a sample application and learn how to make API calls:",
     "nativeExamplesHeading": "Native Examples",
     "javaScriptExamplesHeading": "JavaScript Examples"
@@ -67,4 +92,4 @@
     "angular2": "Angular 2",
     "react": "React"
   }
-}
+}