From b1f89a82d3d245640156de944e0b459a5e3d7995 Mon Sep 17 00:00:00 2001
From: VitaliyHrabovych <vitaliihr@softwareplanet.group>
Date: Mon, 12 May 2025 11:54:17 +0300
Subject: [PATCH 01/13] Replace resources links with quick start buttons to
 create APIs that navigate them directly ito the creation process

---
 .../df-welcome-page.component.html            | 68 ++++++++-----------
 .../df-welcome-page.component.scss            |  9 +++
 .../df-welcome-page.component.ts              | 12 ++++
 src/assets/i18n/home/en.json                  | 11 ++-
 4 files changed, 59 insertions(+), 41 deletions(-)

diff --git a/src/app/adf-home/df-welcome-page/df-welcome-page.component.html b/src/app/adf-home/df-welcome-page/df-welcome-page.component.html
index b70f3c3c..500c4c3f 100644
--- a/src/app/adf-home/df-welcome-page/df-welcome-page.component.html
+++ b/src/app/adf-home/df-welcome-page/df-welcome-page.component.html
@@ -1,11 +1,8 @@
-<ng-container
-  *ngIf="{
+<ng-container *ngIf="{
     isFirstTimeUser: isFirstTimeUser$ | async
   } as data">
   <div [class]="(isDarkMode | async) ? 'dark-theme' : ''">
-    <section
-      class="two-column-flex-container"
-      [class.mobile]="breakpointService.isSmallScreen | async">
+    <section class="two-column-flex-container" [class.mobile]="breakpointService.isSmallScreen | async">
       <article class="flex-column">
         <article>
           <h2>
@@ -14,40 +11,39 @@ <h2>
           <p id="get-started-links">
             {{ 'home.welcomePage.welcomeSubHeading' | transloco }}
           </p>
-          <ul aria-labelledby="get-started-links">
-            <li *ngFor="let resource of welcomePageResources">
-              <ng-container *ngIf="data.isFirstTimeUser; else notFirst">
-                <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>
-          </ul>
+          <div class="button-group" aria-labelledby="welcome-heading">
+            <button mat-raised-button color="primary" [routerLink]="['/api-connections/api-types/database/create']">
+              <fa-icon [icon]="faDatabase" size="lg"></fa-icon>
+              {{ 'home.welcomePage.createDatabaseButton' | transloco }}
+            </button>
+            <button mat-raised-button color="primary" [routerLink]="['/api-connections/api-types/scripting']">
+              <fa-icon [icon]="faCode" size="lg"></fa-icon>
+              {{ 'home.welcomePage.scriptingServicesButton' | transloco }}
+            </button>
+            <button mat-raised-button color="primary" [routerLink]="['/api-connections/api-types/network']">
+              <fa-icon [icon]="faNetworkWired" size="lg"></fa-icon>
+              {{ 'home.welcomePage.networkServicesButton' | transloco }}
+            </button>
+            <button mat-raised-button color="primary" [routerLink]="['/api-connections/api-types/file']">
+              <fa-icon [icon]="faFile" size="lg"></fa-icon>
+              {{ 'home.welcomePage.fileServicesButton' | transloco }}
+            </button>
+            <button mat-raised-button color="primary" [routerLink]="['/api-connections/api-types/utility']">
+              <fa-icon [icon]="faTools" size="lg"></fa-icon>
+              {{ 'home.welcomePage.utilityServicesButton' | transloco }}
+            </button>
+          </div>
         </article>
       </article>
       <aside class="flex-column">
         <div class="video-link">
-          <a
-            href="https://youtu.be/FOSOm88RxPw"
-            target="_blank"
-            aria-labelledby="video-link-description">
-            <img
-              class="video-image"
-              src="assets/img/macbook-hp-df-1.png"
-              alt="" />
+          <a href="https://youtu.be/FOSOm88RxPw" target="_blank" aria-labelledby="video-link-description">
+            <img class="video-image" src="assets/img/macbook-hp-df-1.png" alt="" />
             <div class="video-overlay">
               <fa-icon [icon]="faCirclePlay" class="fa-4x play-icon"></fa-icon>
               <span id="video-link-description">{{
                 'home.welcomePage.watchVideoCta' | transloco
-              }}</span>
+                }}</span>
             </div>
           </a>
         </div>
@@ -79,9 +75,7 @@ <h3>
         <h2>GitHub Releases</h2>
         <div class="release-container">
           <div *ngFor="let release of releases">
-            <mat-card
-              class="full-width release-card"
-              [style]="{ 'word-break': 'break-all' }">
+            <mat-card class="full-width release-card" [style]="{ 'word-break': 'break-all' }">
               <mat-card-header>
                 <mat-card-subtitle>{{ release.name }}</mat-card-subtitle>
               </mat-card-header>
@@ -90,9 +84,7 @@ <h2>GitHub Releases</h2>
                 <p>Published at: {{ convertDateType(release.published_at) }}</p>
               </mat-card-content>
               <mat-card-actions>
-                <a [href]="release.html_url" target="_blank" class="release-btn"
-                  >View Release</a
-                >
+                <a [href]="release.html_url" target="_blank" class="release-btn">View Release</a>
               </mat-card-actions>
             </mat-card>
           </div>
@@ -129,4 +121,4 @@ <h4 id="javascript-examples-heading">
   <mat-divider></mat-divider>
   <df-download-page></df-download-page> -->
   </div>
-</ng-container>
+</ng-container>
\ No newline at end of file
diff --git a/src/app/adf-home/df-welcome-page/df-welcome-page.component.scss b/src/app/adf-home/df-welcome-page/df-welcome-page.component.scss
index 82279447..0e7dbc85 100644
--- a/src/app/adf-home/df-welcome-page/df-welcome-page.component.scss
+++ b/src/app/adf-home/df-welcome-page/df-welcome-page.component.scss
@@ -103,3 +103,12 @@ mat-card.notice-card {
 .release-btn {
   margin-left: 10px;
 }
+
+.button-group {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
+  margin-top: 24px;
+  margin-bottom: 24px;
+}
+
diff --git a/src/app/adf-home/df-welcome-page/df-welcome-page.component.ts b/src/app/adf-home/df-welcome-page/df-welcome-page.component.ts
index b0db10c3..dbdcd9e7 100644
--- a/src/app/adf-home/df-welcome-page/df-welcome-page.component.ts
+++ b/src/app/adf-home/df-welcome-page/df-welcome-page.component.ts
@@ -1,5 +1,9 @@
 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 } from '@fortawesome/free-solid-svg-icons';
 
 import {
   javaScriptExampleLinks,
@@ -45,6 +49,9 @@ import { DFStorageService } from 'src/app/shared/services/df-storage.service';
     DfQuickstartPageComponent,
     DfResourcesPageComponent,
     DfDownloadPageComponent,
+    RouterModule,
+    MatButtonModule,
+    MatIconModule
   ],
   providers: [DfBaseCrudService],
 })
@@ -52,6 +59,11 @@ export class DfWelcomePageComponent {
   faCirclePlay = faCirclePlay;
   faHeart = faHeart;
   faComment = faComment;
+  faDatabase = faDatabase;
+  faCode = faCode;
+  faNetworkWired = faNetworkWired;
+  faFile = faFile;
+  faTools = faTools;
 
   welcomePageResources = welcomePageResources;
   nativeExampleLinks = nativeExampleLinks;
diff --git a/src/assets/i18n/home/en.json b/src/assets/i18n/home/en.json
index b8e7a050..e0d5c41b 100644
--- a/src/assets/i18n/home/en.json
+++ b/src/assets/i18n/home/en.json
@@ -13,11 +13,16 @@
   "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:",
+    "welcomeSubHeading": "DreamFactory provides all of the backend services that you need to build great mobile, web, and IoT applications. Follow the links below to create:",
+    "createDatabaseButton": "Database Connection",
+    "scriptingServicesButton": "Scripting Services",
+    "networkServicesButton": "Network Services",
+    "fileServicesButton": "File Services",
+    "utilityServicesButton": "Utility Services",
     "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"

From 6ff61d30e7ac0b63c83f815835ec40fbce9e43d1 Mon Sep 17 00:00:00 2001
From: VitaliyHrabovych <vitaliihr@softwareplanet.group>
Date: Mon, 12 May 2025 11:54:46 +0300
Subject: [PATCH 02/13] Replace resources links with quick start buttons to
 create APIs that navigate them directly ito the creation process

---
 .../df-welcome-page.component.html            | 54 ++++++++++++++-----
 .../df-welcome-page.component.scss            |  1 -
 .../df-welcome-page.component.ts              | 10 +++-
 3 files changed, 49 insertions(+), 16 deletions(-)

diff --git a/src/app/adf-home/df-welcome-page/df-welcome-page.component.html b/src/app/adf-home/df-welcome-page/df-welcome-page.component.html
index 500c4c3f..07ebcf87 100644
--- a/src/app/adf-home/df-welcome-page/df-welcome-page.component.html
+++ b/src/app/adf-home/df-welcome-page/df-welcome-page.component.html
@@ -1,8 +1,11 @@
-<ng-container *ngIf="{
+<ng-container
+  *ngIf="{
     isFirstTimeUser: isFirstTimeUser$ | async
   } as data">
   <div [class]="(isDarkMode | async) ? 'dark-theme' : ''">
-    <section class="two-column-flex-container" [class.mobile]="breakpointService.isSmallScreen | async">
+    <section
+      class="two-column-flex-container"
+      [class.mobile]="breakpointService.isSmallScreen | async">
       <article class="flex-column">
         <article>
           <h2>
@@ -12,23 +15,38 @@ <h2>
             {{ 'home.welcomePage.welcomeSubHeading' | transloco }}
           </p>
           <div class="button-group" aria-labelledby="welcome-heading">
-            <button mat-raised-button color="primary" [routerLink]="['/api-connections/api-types/database/create']">
+            <button
+              mat-raised-button
+              color="primary"
+              [routerLink]="['/api-connections/api-types/database/create']">
               <fa-icon [icon]="faDatabase" size="lg"></fa-icon>
               {{ 'home.welcomePage.createDatabaseButton' | transloco }}
             </button>
-            <button mat-raised-button color="primary" [routerLink]="['/api-connections/api-types/scripting']">
+            <button
+              mat-raised-button
+              color="primary"
+              [routerLink]="['/api-connections/api-types/scripting']">
               <fa-icon [icon]="faCode" size="lg"></fa-icon>
               {{ 'home.welcomePage.scriptingServicesButton' | transloco }}
             </button>
-            <button mat-raised-button color="primary" [routerLink]="['/api-connections/api-types/network']">
+            <button
+              mat-raised-button
+              color="primary"
+              [routerLink]="['/api-connections/api-types/network']">
               <fa-icon [icon]="faNetworkWired" size="lg"></fa-icon>
               {{ 'home.welcomePage.networkServicesButton' | transloco }}
             </button>
-            <button mat-raised-button color="primary" [routerLink]="['/api-connections/api-types/file']">
+            <button
+              mat-raised-button
+              color="primary"
+              [routerLink]="['/api-connections/api-types/file']">
               <fa-icon [icon]="faFile" size="lg"></fa-icon>
               {{ 'home.welcomePage.fileServicesButton' | transloco }}
             </button>
-            <button mat-raised-button color="primary" [routerLink]="['/api-connections/api-types/utility']">
+            <button
+              mat-raised-button
+              color="primary"
+              [routerLink]="['/api-connections/api-types/utility']">
               <fa-icon [icon]="faTools" size="lg"></fa-icon>
               {{ 'home.welcomePage.utilityServicesButton' | transloco }}
             </button>
@@ -37,13 +55,19 @@ <h2>
       </article>
       <aside class="flex-column">
         <div class="video-link">
-          <a href="https://youtu.be/FOSOm88RxPw" target="_blank" aria-labelledby="video-link-description">
-            <img class="video-image" src="assets/img/macbook-hp-df-1.png" alt="" />
+          <a
+            href="https://youtu.be/FOSOm88RxPw"
+            target="_blank"
+            aria-labelledby="video-link-description">
+            <img
+              class="video-image"
+              src="assets/img/macbook-hp-df-1.png"
+              alt="" />
             <div class="video-overlay">
               <fa-icon [icon]="faCirclePlay" class="fa-4x play-icon"></fa-icon>
               <span id="video-link-description">{{
                 'home.welcomePage.watchVideoCta' | transloco
-                }}</span>
+              }}</span>
             </div>
           </a>
         </div>
@@ -75,7 +99,9 @@ <h3>
         <h2>GitHub Releases</h2>
         <div class="release-container">
           <div *ngFor="let release of releases">
-            <mat-card class="full-width release-card" [style]="{ 'word-break': 'break-all' }">
+            <mat-card
+              class="full-width release-card"
+              [style]="{ 'word-break': 'break-all' }">
               <mat-card-header>
                 <mat-card-subtitle>{{ release.name }}</mat-card-subtitle>
               </mat-card-header>
@@ -84,7 +110,9 @@ <h2>GitHub Releases</h2>
                 <p>Published at: {{ convertDateType(release.published_at) }}</p>
               </mat-card-content>
               <mat-card-actions>
-                <a [href]="release.html_url" target="_blank" class="release-btn">View Release</a>
+                <a [href]="release.html_url" target="_blank" class="release-btn"
+                  >View Release</a
+                >
               </mat-card-actions>
             </mat-card>
           </div>
@@ -121,4 +149,4 @@ <h4 id="javascript-examples-heading">
   <mat-divider></mat-divider>
   <df-download-page></df-download-page> -->
   </div>
-</ng-container>
\ No newline at end of file
+</ng-container>
diff --git a/src/app/adf-home/df-welcome-page/df-welcome-page.component.scss b/src/app/adf-home/df-welcome-page/df-welcome-page.component.scss
index 0e7dbc85..009f7767 100644
--- a/src/app/adf-home/df-welcome-page/df-welcome-page.component.scss
+++ b/src/app/adf-home/df-welcome-page/df-welcome-page.component.scss
@@ -111,4 +111,3 @@ mat-card.notice-card {
   margin-top: 24px;
   margin-bottom: 24px;
 }
-
diff --git a/src/app/adf-home/df-welcome-page/df-welcome-page.component.ts b/src/app/adf-home/df-welcome-page/df-welcome-page.component.ts
index dbdcd9e7..5b52b3e4 100644
--- a/src/app/adf-home/df-welcome-page/df-welcome-page.component.ts
+++ b/src/app/adf-home/df-welcome-page/df-welcome-page.component.ts
@@ -3,7 +3,13 @@ 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 } from '@fortawesome/free-solid-svg-icons';
+import {
+  faDatabase,
+  faCode,
+  faNetworkWired,
+  faFile,
+  faTools,
+} from '@fortawesome/free-solid-svg-icons';
 
 import {
   javaScriptExampleLinks,
@@ -51,7 +57,7 @@ import { DFStorageService } from 'src/app/shared/services/df-storage.service';
     DfDownloadPageComponent,
     RouterModule,
     MatButtonModule,
-    MatIconModule
+    MatIconModule,
   ],
   providers: [DfBaseCrudService],
 })

From e143c187d8cba32615b3bf08246fc401233a080d Mon Sep 17 00:00:00 2001
From: VitaliyHrabovych <vitaliihr@softwareplanet.group>
Date: Mon, 12 May 2025 13:30:03 +0300
Subject: [PATCH 03/13] Add get started links back

---
 .../df-welcome-page.component.html             | 18 ++++++++++++++++++
 src/assets/i18n/home/en.json                   |  1 +
 2 files changed, 19 insertions(+)

diff --git a/src/app/adf-home/df-welcome-page/df-welcome-page.component.html b/src/app/adf-home/df-welcome-page/df-welcome-page.component.html
index 07ebcf87..50090148 100644
--- a/src/app/adf-home/df-welcome-page/df-welcome-page.component.html
+++ b/src/app/adf-home/df-welcome-page/df-welcome-page.component.html
@@ -51,6 +51,24 @@ <h2>
               {{ 'home.welcomePage.utilityServicesButton' | transloco }}
             </button>
           </div>
+          <h3 id="learn-more-heading" class="margin-top-24">{{ 'home.welcomePage.learnMoreHeading' | transloco }}</h3>
+          <ul aria-labelledby="learn-more-heading">
+            <li *ngFor="let resource of welcomePageResources">
+              <ng-container *ngIf="data.isFirstTimeUser; else notFirst">
+                <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>
+          </ul>
         </article>
       </article>
       <aside class="flex-column">
diff --git a/src/assets/i18n/home/en.json b/src/assets/i18n/home/en.json
index e0d5c41b..e2b6e43d 100644
--- a/src/assets/i18n/home/en.json
+++ b/src/assets/i18n/home/en.json
@@ -19,6 +19,7 @@
     "networkServicesButton": "Network Services",
     "fileServicesButton": "File Services",
     "utilityServicesButton": "Utility Services",
+    "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!",
     "hearFromYouHeading": "We want to hear from you!",

From 73a6cad6497b4dc2a876be68d891a8861a6cb2ed Mon Sep 17 00:00:00 2001
From: VitaliyHrabovych <vitaliihr@softwareplanet.group>
Date: Mon, 12 May 2025 13:31:20 +0300
Subject: [PATCH 04/13] Used a prettier

---
 .../df-welcome-page.component.html            | 65 +++++--------------
 1 file changed, 18 insertions(+), 47 deletions(-)

diff --git a/src/app/adf-home/df-welcome-page/df-welcome-page.component.html b/src/app/adf-home/df-welcome-page/df-welcome-page.component.html
index 50090148..7ec6485f 100644
--- a/src/app/adf-home/df-welcome-page/df-welcome-page.component.html
+++ b/src/app/adf-home/df-welcome-page/df-welcome-page.component.html
@@ -1,11 +1,8 @@
-<ng-container
-  *ngIf="{
+<ng-container *ngIf="{
     isFirstTimeUser: isFirstTimeUser$ | async
   } as data">
   <div [class]="(isDarkMode | async) ? 'dark-theme' : ''">
-    <section
-      class="two-column-flex-container"
-      [class.mobile]="breakpointService.isSmallScreen | async">
+    <section class="two-column-flex-container" [class.mobile]="breakpointService.isSmallScreen | async">
       <article class="flex-column">
         <article>
           <h2>
@@ -15,57 +12,41 @@ <h2>
             {{ 'home.welcomePage.welcomeSubHeading' | transloco }}
           </p>
           <div class="button-group" aria-labelledby="welcome-heading">
-            <button
-              mat-raised-button
-              color="primary"
-              [routerLink]="['/api-connections/api-types/database/create']">
+            <button mat-raised-button color="primary" [routerLink]="['/api-connections/api-types/database/create']">
               <fa-icon [icon]="faDatabase" size="lg"></fa-icon>
               {{ 'home.welcomePage.createDatabaseButton' | transloco }}
             </button>
-            <button
-              mat-raised-button
-              color="primary"
-              [routerLink]="['/api-connections/api-types/scripting']">
+            <button mat-raised-button color="primary" [routerLink]="['/api-connections/api-types/scripting']">
               <fa-icon [icon]="faCode" size="lg"></fa-icon>
               {{ 'home.welcomePage.scriptingServicesButton' | transloco }}
             </button>
-            <button
-              mat-raised-button
-              color="primary"
-              [routerLink]="['/api-connections/api-types/network']">
+            <button mat-raised-button color="primary" [routerLink]="['/api-connections/api-types/network']">
               <fa-icon [icon]="faNetworkWired" size="lg"></fa-icon>
               {{ 'home.welcomePage.networkServicesButton' | transloco }}
             </button>
-            <button
-              mat-raised-button
-              color="primary"
-              [routerLink]="['/api-connections/api-types/file']">
+            <button mat-raised-button color="primary" [routerLink]="['/api-connections/api-types/file']">
               <fa-icon [icon]="faFile" size="lg"></fa-icon>
               {{ 'home.welcomePage.fileServicesButton' | transloco }}
             </button>
-            <button
-              mat-raised-button
-              color="primary"
-              [routerLink]="['/api-connections/api-types/utility']">
+            <button mat-raised-button color="primary" [routerLink]="['/api-connections/api-types/utility']">
               <fa-icon [icon]="faTools" size="lg"></fa-icon>
               {{ 'home.welcomePage.utilityServicesButton' | transloco }}
             </button>
           </div>
-          <h3 id="learn-more-heading" class="margin-top-24">{{ 'home.welcomePage.learnMoreHeading' | transloco }}</h3>
+          <h3 id="learn-more-heading">
+            {{ 'home.welcomePage.learnMoreHeading' | transloco }}
+          </h3>
           <ul aria-labelledby="learn-more-heading">
             <li *ngFor="let resource of welcomePageResources">
               <ng-container *ngIf="data.isFirstTimeUser; else notFirst">
                 <df-icon-link [linkItem]="resource"></df-icon-link>
               </ng-container>
               <ng-template #notFirst>
-                <ng-container
-                  *ngIf="
+                <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>
+                  "><df-icon-link [linkItem]="resource"></df-icon-link></ng-container>
               </ng-template>
             </li>
           </ul>
@@ -73,19 +54,13 @@ <h3 id="learn-more-heading" class="margin-top-24">{{ 'home.welcomePage.learnMore
       </article>
       <aside class="flex-column">
         <div class="video-link">
-          <a
-            href="https://youtu.be/FOSOm88RxPw"
-            target="_blank"
-            aria-labelledby="video-link-description">
-            <img
-              class="video-image"
-              src="assets/img/macbook-hp-df-1.png"
-              alt="" />
+          <a href="https://youtu.be/FOSOm88RxPw" target="_blank" aria-labelledby="video-link-description">
+            <img class="video-image" src="assets/img/macbook-hp-df-1.png" alt="" />
             <div class="video-overlay">
               <fa-icon [icon]="faCirclePlay" class="fa-4x play-icon"></fa-icon>
               <span id="video-link-description">{{
                 'home.welcomePage.watchVideoCta' | transloco
-              }}</span>
+                }}</span>
             </div>
           </a>
         </div>
@@ -117,9 +92,7 @@ <h3>
         <h2>GitHub Releases</h2>
         <div class="release-container">
           <div *ngFor="let release of releases">
-            <mat-card
-              class="full-width release-card"
-              [style]="{ 'word-break': 'break-all' }">
+            <mat-card class="full-width release-card" [style]="{ 'word-break': 'break-all' }">
               <mat-card-header>
                 <mat-card-subtitle>{{ release.name }}</mat-card-subtitle>
               </mat-card-header>
@@ -128,9 +101,7 @@ <h2>GitHub Releases</h2>
                 <p>Published at: {{ convertDateType(release.published_at) }}</p>
               </mat-card-content>
               <mat-card-actions>
-                <a [href]="release.html_url" target="_blank" class="release-btn"
-                  >View Release</a
-                >
+                <a [href]="release.html_url" target="_blank" class="release-btn">View Release</a>
               </mat-card-actions>
             </mat-card>
           </div>
@@ -167,4 +138,4 @@ <h4 id="javascript-examples-heading">
   <mat-divider></mat-divider>
   <df-download-page></df-download-page> -->
   </div>
-</ng-container>
+</ng-container>
\ No newline at end of file

From 874e69b1437082dae4ff454959c7ce59e9ea46e1 Mon Sep 17 00:00:00 2001
From: VitaliyHrabovych <vitaliihr@softwareplanet.group>
Date: Mon, 12 May 2025 13:37:40 +0300
Subject: [PATCH 05/13] Added getting started guide link

---
 src/app/adf-home/df-welcome-page/df-welcome-page.component.html | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/app/adf-home/df-welcome-page/df-welcome-page.component.html b/src/app/adf-home/df-welcome-page/df-welcome-page.component.html
index 7ec6485f..43aa0c62 100644
--- a/src/app/adf-home/df-welcome-page/df-welcome-page.component.html
+++ b/src/app/adf-home/df-welcome-page/df-welcome-page.component.html
@@ -43,6 +43,7 @@ <h3 id="learn-more-heading">
               </ng-container>
               <ng-template #notFirst>
                 <ng-container *ngIf="
+                    resource.name === 'home.resourceLinks.gettingStartedGuide' ||
                     resource.name === 'home.resourceLinks.fullDocumentation' ||
                     resource.name === 'home.resourceLinks.blog' ||
                     resource.name === 'home.resourceLinks.contactSupport'

From 689879cfcbf87cef0db13f5f6cf57e0fddf2f8da Mon Sep 17 00:00:00 2001
From: VitaliyHrabovych <vitaliihr@softwareplanet.group>
Date: Mon, 12 May 2025 13:44:32 +0300
Subject: [PATCH 06/13] Used a Prettier

---
 .../adf-home/df-welcome-page/df-welcome-page.component.html    | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/app/adf-home/df-welcome-page/df-welcome-page.component.html b/src/app/adf-home/df-welcome-page/df-welcome-page.component.html
index 43aa0c62..4c019237 100644
--- a/src/app/adf-home/df-welcome-page/df-welcome-page.component.html
+++ b/src/app/adf-home/df-welcome-page/df-welcome-page.component.html
@@ -43,7 +43,8 @@ <h3 id="learn-more-heading">
               </ng-container>
               <ng-template #notFirst>
                 <ng-container *ngIf="
-                    resource.name === 'home.resourceLinks.gettingStartedGuide' ||
+                    resource.name ===
+                      'home.resourceLinks.gettingStartedGuide' ||
                     resource.name === 'home.resourceLinks.fullDocumentation' ||
                     resource.name === 'home.resourceLinks.blog' ||
                     resource.name === 'home.resourceLinks.contactSupport'

From 921b6bea770f8462a03654f88cd8521ffc3bf753 Mon Sep 17 00:00:00 2001
From: VitaliyHrabovych <vitaliihr@softwareplanet.group>
Date: Mon, 12 May 2025 14:00:12 +0300
Subject: [PATCH 07/13] Run npm prettier

---
 .../df-welcome-page.component.html            | 61 ++++++++++++++-----
 1 file changed, 46 insertions(+), 15 deletions(-)

diff --git a/src/app/adf-home/df-welcome-page/df-welcome-page.component.html b/src/app/adf-home/df-welcome-page/df-welcome-page.component.html
index 4c019237..028f21a6 100644
--- a/src/app/adf-home/df-welcome-page/df-welcome-page.component.html
+++ b/src/app/adf-home/df-welcome-page/df-welcome-page.component.html
@@ -1,8 +1,11 @@
-<ng-container *ngIf="{
+<ng-container
+  *ngIf="{
     isFirstTimeUser: isFirstTimeUser$ | async
   } as data">
   <div [class]="(isDarkMode | async) ? 'dark-theme' : ''">
-    <section class="two-column-flex-container" [class.mobile]="breakpointService.isSmallScreen | async">
+    <section
+      class="two-column-flex-container"
+      [class.mobile]="breakpointService.isSmallScreen | async">
       <article class="flex-column">
         <article>
           <h2>
@@ -12,23 +15,38 @@ <h2>
             {{ 'home.welcomePage.welcomeSubHeading' | transloco }}
           </p>
           <div class="button-group" aria-labelledby="welcome-heading">
-            <button mat-raised-button color="primary" [routerLink]="['/api-connections/api-types/database/create']">
+            <button
+              mat-raised-button
+              color="primary"
+              [routerLink]="['/api-connections/api-types/database/create']">
               <fa-icon [icon]="faDatabase" size="lg"></fa-icon>
               {{ 'home.welcomePage.createDatabaseButton' | transloco }}
             </button>
-            <button mat-raised-button color="primary" [routerLink]="['/api-connections/api-types/scripting']">
+            <button
+              mat-raised-button
+              color="primary"
+              [routerLink]="['/api-connections/api-types/scripting']">
               <fa-icon [icon]="faCode" size="lg"></fa-icon>
               {{ 'home.welcomePage.scriptingServicesButton' | transloco }}
             </button>
-            <button mat-raised-button color="primary" [routerLink]="['/api-connections/api-types/network']">
+            <button
+              mat-raised-button
+              color="primary"
+              [routerLink]="['/api-connections/api-types/network']">
               <fa-icon [icon]="faNetworkWired" size="lg"></fa-icon>
               {{ 'home.welcomePage.networkServicesButton' | transloco }}
             </button>
-            <button mat-raised-button color="primary" [routerLink]="['/api-connections/api-types/file']">
+            <button
+              mat-raised-button
+              color="primary"
+              [routerLink]="['/api-connections/api-types/file']">
               <fa-icon [icon]="faFile" size="lg"></fa-icon>
               {{ 'home.welcomePage.fileServicesButton' | transloco }}
             </button>
-            <button mat-raised-button color="primary" [routerLink]="['/api-connections/api-types/utility']">
+            <button
+              mat-raised-button
+              color="primary"
+              [routerLink]="['/api-connections/api-types/utility']">
               <fa-icon [icon]="faTools" size="lg"></fa-icon>
               {{ 'home.welcomePage.utilityServicesButton' | transloco }}
             </button>
@@ -42,13 +60,16 @@ <h3 id="learn-more-heading">
                 <df-icon-link [linkItem]="resource"></df-icon-link>
               </ng-container>
               <ng-template #notFirst>
-                <ng-container *ngIf="
+                <ng-container
+                  *ngIf="
                     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>
+                  "
+                  ><df-icon-link [linkItem]="resource"></df-icon-link
+                ></ng-container>
               </ng-template>
             </li>
           </ul>
@@ -56,13 +77,19 @@ <h3 id="learn-more-heading">
       </article>
       <aside class="flex-column">
         <div class="video-link">
-          <a href="https://youtu.be/FOSOm88RxPw" target="_blank" aria-labelledby="video-link-description">
-            <img class="video-image" src="assets/img/macbook-hp-df-1.png" alt="" />
+          <a
+            href="https://youtu.be/FOSOm88RxPw"
+            target="_blank"
+            aria-labelledby="video-link-description">
+            <img
+              class="video-image"
+              src="assets/img/macbook-hp-df-1.png"
+              alt="" />
             <div class="video-overlay">
               <fa-icon [icon]="faCirclePlay" class="fa-4x play-icon"></fa-icon>
               <span id="video-link-description">{{
                 'home.welcomePage.watchVideoCta' | transloco
-                }}</span>
+              }}</span>
             </div>
           </a>
         </div>
@@ -94,7 +121,9 @@ <h3>
         <h2>GitHub Releases</h2>
         <div class="release-container">
           <div *ngFor="let release of releases">
-            <mat-card class="full-width release-card" [style]="{ 'word-break': 'break-all' }">
+            <mat-card
+              class="full-width release-card"
+              [style]="{ 'word-break': 'break-all' }">
               <mat-card-header>
                 <mat-card-subtitle>{{ release.name }}</mat-card-subtitle>
               </mat-card-header>
@@ -103,7 +132,9 @@ <h2>GitHub Releases</h2>
                 <p>Published at: {{ convertDateType(release.published_at) }}</p>
               </mat-card-content>
               <mat-card-actions>
-                <a [href]="release.html_url" target="_blank" class="release-btn">View Release</a>
+                <a [href]="release.html_url" target="_blank" class="release-btn"
+                  >View Release</a
+                >
               </mat-card-actions>
             </mat-card>
           </div>
@@ -140,4 +171,4 @@ <h4 id="javascript-examples-heading">
   <mat-divider></mat-divider>
   <df-download-page></df-download-page> -->
   </div>
-</ng-container>
\ No newline at end of file
+</ng-container>

From 874bfa698b7a4ac32d5fc10ec3992dbb19869d9d Mon Sep 17 00:00:00 2001
From: VitaliyHrabovych <vitaliihr@softwareplanet.group>
Date: Wed, 14 May 2025 10:12:33 +0300
Subject: [PATCH 08/13] Built routes inside .ts

---
 .../df-welcome-page/df-welcome-page.component.html  | 13 +++++--------
 .../df-welcome-page/df-welcome-page.component.ts    |  7 +++++++
 2 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/src/app/adf-home/df-welcome-page/df-welcome-page.component.html b/src/app/adf-home/df-welcome-page/df-welcome-page.component.html
index 028f21a6..fbe00382 100644
--- a/src/app/adf-home/df-welcome-page/df-welcome-page.component.html
+++ b/src/app/adf-home/df-welcome-page/df-welcome-page.component.html
@@ -15,38 +15,35 @@ <h2>
             {{ 'home.welcomePage.welcomeSubHeading' | transloco }}
           </p>
           <div class="button-group" aria-labelledby="welcome-heading">
-            <button
-              mat-raised-button
-              color="primary"
-              [routerLink]="['/api-connections/api-types/database/create']">
+            <button mat-raised-button color="primary" [routerLink]="fpDBRoute">
               <fa-icon [icon]="faDatabase" size="lg"></fa-icon>
               {{ 'home.welcomePage.createDatabaseButton' | transloco }}
             </button>
             <button
               mat-raised-button
               color="primary"
-              [routerLink]="['/api-connections/api-types/scripting']">
+              [routerLink]="fpScriptingRoute">
               <fa-icon [icon]="faCode" size="lg"></fa-icon>
               {{ 'home.welcomePage.scriptingServicesButton' | transloco }}
             </button>
             <button
               mat-raised-button
               color="primary"
-              [routerLink]="['/api-connections/api-types/network']">
+              [routerLink]="fpNetworkRoute">
               <fa-icon [icon]="faNetworkWired" size="lg"></fa-icon>
               {{ 'home.welcomePage.networkServicesButton' | transloco }}
             </button>
             <button
               mat-raised-button
               color="primary"
-              [routerLink]="['/api-connections/api-types/file']">
+              [routerLink]="fpFileRoute">
               <fa-icon [icon]="faFile" size="lg"></fa-icon>
               {{ 'home.welcomePage.fileServicesButton' | transloco }}
             </button>
             <button
               mat-raised-button
               color="primary"
-              [routerLink]="['/api-connections/api-types/utility']">
+              [routerLink]="fpUtilityRoute">
               <fa-icon [icon]="faTools" size="lg"></fa-icon>
               {{ 'home.welcomePage.utilityServicesButton' | transloco }}
             </button>
diff --git a/src/app/adf-home/df-welcome-page/df-welcome-page.component.ts b/src/app/adf-home/df-welcome-page/df-welcome-page.component.ts
index 5b52b3e4..3cd04a24 100644
--- a/src/app/adf-home/df-welcome-page/df-welcome-page.component.ts
+++ b/src/app/adf-home/df-welcome-page/df-welcome-page.component.ts
@@ -37,6 +37,7 @@ 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';
 @Component({
   selector: 'df-welcome-page',
   templateUrl: './df-welcome-page.component.html',
@@ -71,6 +72,12 @@ export class DfWelcomePageComponent {
   faFile = faFile;
   faTools = faTools;
 
+  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.FILES}/${ROUTES.CREATE}`;
+  fpUtilityRoute = `/${ROUTES.API_CONNECTIONS}/${ROUTES.API_TYPES}/${ROUTES.UTILITY}/${ROUTES.CREATE}`;
+
   welcomePageResources = welcomePageResources;
   nativeExampleLinks = nativeExampleLinks;
   javaScriptExampleLinks = javaScriptExampleLinks;

From 54c3f424845fdb92144dd9895b5641b31a245bff Mon Sep 17 00:00:00 2001
From: VitaliyHrabovych <vitaliihr@softwareplanet.group>
Date: Wed, 14 May 2025 10:17:51 +0300
Subject: [PATCH 09/13] Correct a typo

---
 src/app/adf-home/df-welcome-page/df-welcome-page.component.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/adf-home/df-welcome-page/df-welcome-page.component.ts b/src/app/adf-home/df-welcome-page/df-welcome-page.component.ts
index 3cd04a24..fcac8296 100644
--- a/src/app/adf-home/df-welcome-page/df-welcome-page.component.ts
+++ b/src/app/adf-home/df-welcome-page/df-welcome-page.component.ts
@@ -75,7 +75,7 @@ export class DfWelcomePageComponent {
   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.FILES}/${ROUTES.CREATE}`;
+  fpFileRoute = `/${ROUTES.API_CONNECTIONS}/${ROUTES.API_TYPES}/${ROUTES.FILE}/${ROUTES.CREATE}`;
   fpUtilityRoute = `/${ROUTES.API_CONNECTIONS}/${ROUTES.API_TYPES}/${ROUTES.UTILITY}/${ROUTES.CREATE}`;
 
   welcomePageResources = welcomePageResources;

From 6932a61b1d8e8fd616cf5c0177496f3bceecd1a7 Mon Sep 17 00:00:00 2001
From: VitaliyHrabovych <vitaliihr@softwareplanet.group>
Date: Thu, 15 May 2025 15:09:41 +0300
Subject: [PATCH 10/13] Add generate api card components

---
 .../df-icon-link/df-icon-link.component.scss  |  2 +-
 .../df-generate-api-card.component.html       | 16 +++++
 .../df-generate-api-card.component.scss       | 38 ++++++++++++
 .../df-generate-api-card.component.ts         | 22 +++++++
 .../df-welcome-page.component.html            | 49 +++++-----------
 .../df-welcome-page.component.scss            | 38 +++++++++++-
 .../df-welcome-page.component.ts              | 58 ++++++++++++++++++-
 src/assets/i18n/home/en.json                  | 31 +++++++---
 8 files changed, 205 insertions(+), 49 deletions(-)
 create mode 100644 src/app/adf-home/df-welcome-page/df-generate-api-card/df-generate-api-card.component.html
 create mode 100644 src/app/adf-home/df-welcome-page/df-generate-api-card/df-generate-api-card.component.scss
 create mode 100644 src/app/adf-home/df-welcome-page/df-generate-api-card/df-generate-api-card.component.ts

diff --git a/src/app/adf-home/df-icon-link/df-icon-link.component.scss b/src/app/adf-home/df-icon-link/df-icon-link.component.scss
index e5c3f06c..8a41a62f 100644
--- a/src/app/adf-home/df-icon-link/df-icon-link.component.scss
+++ b/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: center;
   align-items: center;
   text-decoration: none;
   padding: 5px 0px;
diff --git a/src/app/adf-home/df-welcome-page/df-generate-api-card/df-generate-api-card.component.html b/src/app/adf-home/df-welcome-page/df-generate-api-card/df-generate-api-card.component.html
new file mode 100644
index 00000000..161d4cd6
--- /dev/null
+++ b/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>
diff --git a/src/app/adf-home/df-welcome-page/df-generate-api-card/df-generate-api-card.component.scss b/src/app/adf-home/df-welcome-page/df-generate-api-card/df-generate-api-card.component.scss
new file mode 100644
index 00000000..f8f51e9f
--- /dev/null
+++ b/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;
+  }
+}
diff --git a/src/app/adf-home/df-welcome-page/df-generate-api-card/df-generate-api-card.component.ts b/src/app/adf-home/df-welcome-page/df-generate-api-card/df-generate-api-card.component.ts
new file mode 100644
index 00000000..3db3dfb3
--- /dev/null
+++ b/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;
+}
diff --git a/src/app/adf-home/df-welcome-page/df-welcome-page.component.html b/src/app/adf-home/df-welcome-page/df-welcome-page.component.html
index fbe00382..dd2c8dba 100644
--- a/src/app/adf-home/df-welcome-page/df-welcome-page.component.html
+++ b/src/app/adf-home/df-welcome-page/df-welcome-page.component.html
@@ -9,45 +9,22 @@
       <article class="flex-column">
         <article>
           <h2>
-            {{ 'home.welcomePage.welcomeHeading' | transloco }}
+            {{ 'home.welcomePage.generateYourApis' | transloco }}
           </h2>
-          <p id="get-started-links">
-            {{ 'home.welcomePage.welcomeSubHeading' | transloco }}
-          </p>
           <div class="button-group" aria-labelledby="welcome-heading">
-            <button mat-raised-button color="primary" [routerLink]="fpDBRoute">
-              <fa-icon [icon]="faDatabase" size="lg"></fa-icon>
-              {{ 'home.welcomePage.createDatabaseButton' | transloco }}
-            </button>
-            <button
-              mat-raised-button
-              color="primary"
-              [routerLink]="fpScriptingRoute">
-              <fa-icon [icon]="faCode" size="lg"></fa-icon>
-              {{ 'home.welcomePage.scriptingServicesButton' | transloco }}
-            </button>
-            <button
-              mat-raised-button
-              color="primary"
-              [routerLink]="fpNetworkRoute">
-              <fa-icon [icon]="faNetworkWired" size="lg"></fa-icon>
-              {{ 'home.welcomePage.networkServicesButton' | transloco }}
-            </button>
-            <button
-              mat-raised-button
-              color="primary"
-              [routerLink]="fpFileRoute">
-              <fa-icon [icon]="faFile" size="lg"></fa-icon>
-              {{ 'home.welcomePage.fileServicesButton' | transloco }}
-            </button>
-            <button
-              mat-raised-button
-              color="primary"
-              [routerLink]="fpUtilityRoute">
-              <fa-icon [icon]="faTools" size="lg"></fa-icon>
-              {{ 'home.welcomePage.utilityServicesButton' | transloco }}
-            </button>
+            <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>
           <h3 id="learn-more-heading">
             {{ 'home.welcomePage.learnMoreHeading' | transloco }}
           </h3>
diff --git a/src/app/adf-home/df-welcome-page/df-welcome-page.component.scss b/src/app/adf-home/df-welcome-page/df-welcome-page.component.scss
index 009f7767..7a85aea0 100644
--- a/src/app/adf-home/df-welcome-page/df-welcome-page.component.scss
+++ b/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,6 +88,7 @@ mat-card.notice-card {
   p {
     color: white;
   }
+
   .notice-card {
     background-color: mat.get-color-from-palette(
       $df-purple-palette,
@@ -93,13 +96,16 @@ mat-card.notice-card {
     ) !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;
 }
@@ -107,7 +113,33 @@ mat-card.notice-card {
 .button-group {
   display: flex;
   flex-wrap: wrap;
-  gap: 16px;
-  margin-top: 24px;
-  margin-bottom: 24px;
+  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;
 }
diff --git a/src/app/adf-home/df-welcome-page/df-welcome-page.component.ts b/src/app/adf-home/df-welcome-page/df-welcome-page.component.ts
index fcac8296..7baa0834 100644
--- a/src/app/adf-home/df-welcome-page/df-welcome-page.component.ts
+++ b/src/app/adf-home/df-welcome-page/df-welcome-page.component.ts
@@ -38,6 +38,8 @@ 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',
@@ -59,6 +61,7 @@ import { ROUTES } from '../../shared/types/routes';
     RouterModule,
     MatButtonModule,
     MatIconModule,
+    DfGenerateApiCardComponent,
   ],
   providers: [DfBaseCrudService],
 })
@@ -78,6 +81,8 @@ export class DfWelcomePageComponent {
   fpFileRoute = `/${ROUTES.API_CONNECTIONS}/${ROUTES.API_TYPES}/${ROUTES.FILE}/${ROUTES.CREATE}`;
   fpUtilityRoute = `/${ROUTES.API_CONNECTIONS}/${ROUTES.API_TYPES}/${ROUTES.UTILITY}/${ROUTES.CREATE}`;
 
+  public generateApiCardsData: any[];
+
   welcomePageResources = welcomePageResources;
   nativeExampleLinks = nativeExampleLinks;
   javaScriptExampleLinks = javaScriptExampleLinks;
@@ -87,7 +92,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.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)',
+      },
+    ];
+  }
   isDarkMode = this.themeService.darkMode$;
   isFirstTimeUser$ = this.storageService.isFirstTimeUser$;
   releases: any[] = [];
diff --git a/src/assets/i18n/home/en.json b/src/assets/i18n/home/en.json
index e2b6e43d..921bb142 100644
--- a/src/assets/i18n/home/en.json
+++ b/src/assets/i18n/home/en.json
@@ -12,13 +12,28 @@
   },
   "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 create:",
-    "createDatabaseButton": "Database Connection",
-    "scriptingServicesButton": "Scripting Services",
-    "networkServicesButton": "Network Services",
-    "fileServicesButton": "File Services",
-    "utilityServicesButton": "Utility Services",
+    "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"
+    },
+    "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!",
@@ -73,4 +88,4 @@
     "angular2": "Angular 2",
     "react": "React"
   }
-}
+}
\ No newline at end of file

From e49504b68762fd4b2663a99035a5f58d2c26f073 Mon Sep 17 00:00:00 2001
From: VitaliyHrabovych <vitaliihr@softwareplanet.group>
Date: Thu, 15 May 2025 15:30:26 +0300
Subject: [PATCH 11/13] Add API docs card

---
 .../df-welcome-page/df-welcome-page.component.ts  | 15 +++++++++------
 src/assets/i18n/home/en.json                      |  4 ++++
 2 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/src/app/adf-home/df-welcome-page/df-welcome-page.component.ts b/src/app/adf-home/df-welcome-page/df-welcome-page.component.ts
index 7baa0834..7988a94d 100644
--- a/src/app/adf-home/df-welcome-page/df-welcome-page.component.ts
+++ b/src/app/adf-home/df-welcome-page/df-welcome-page.component.ts
@@ -9,6 +9,7 @@ import {
   faNetworkWired,
   faFile,
   faTools,
+  faBook,
 } from '@fortawesome/free-solid-svg-icons';
 
 import {
@@ -74,12 +75,14 @@ export class DfWelcomePageComponent {
   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[];
 
@@ -135,12 +138,12 @@ export class DfWelcomePageComponent {
         headerColor: 'rgb(80,105,137)',
       },
       {
-        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)',
       },
     ];
   }
diff --git a/src/assets/i18n/home/en.json b/src/assets/i18n/home/en.json
index 921bb142..02b278cb 100644
--- a/src/assets/i18n/home/en.json
+++ b/src/assets/i18n/home/en.json
@@ -33,6 +33,10 @@
       "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",

From 75655a6e3211929d0f95ae8dceafb08177ea4b10 Mon Sep 17 00:00:00 2001
From: VitaliyHrabovych <vitaliihr@softwareplanet.group>
Date: Thu, 15 May 2025 18:00:51 +0300
Subject: [PATCH 12/13] A few more adjustments for the learn more links
 component

---
 .../df-icon-link/df-icon-link.component.scss  |  2 +-
 .../df-welcome-page.component.html            | 27 +++++++++----------
 .../df-welcome-page.component.scss            |  7 +++++
 3 files changed, 20 insertions(+), 16 deletions(-)

diff --git a/src/app/adf-home/df-icon-link/df-icon-link.component.scss b/src/app/adf-home/df-icon-link/df-icon-link.component.scss
index 8a41a62f..656fc2ab 100644
--- a/src/app/adf-home/df-icon-link/df-icon-link.component.scss
+++ b/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: center;
+  justify-content: left;
   align-items: center;
   text-decoration: none;
   padding: 5px 0px;
diff --git a/src/app/adf-home/df-welcome-page/df-welcome-page.component.html b/src/app/adf-home/df-welcome-page/df-welcome-page.component.html
index dd2c8dba..cfefebf3 100644
--- a/src/app/adf-home/df-welcome-page/df-welcome-page.component.html
+++ b/src/app/adf-home/df-welcome-page/df-welcome-page.component.html
@@ -28,24 +28,21 @@ <h2>
           <h3 id="learn-more-heading">
             {{ 'home.welcomePage.learnMoreHeading' | transloco }}
           </h3>
-          <ul aria-labelledby="learn-more-heading">
-            <li *ngFor="let resource of welcomePageResources">
-              <ng-container *ngIf="data.isFirstTimeUser; else notFirst">
-                <df-icon-link [linkItem]="resource"></df-icon-link>
-              </ng-container>
-              <ng-template #notFirst>
-                <ng-container
-                  *ngIf="
-                    resource.name ===
-                      'home.resourceLinks.gettingStartedGuide' ||
+          <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>
-            </li>
+                ">
+                <df-icon-link [linkItem]="resource"></df-icon-link>
+              </li>
+            </ng-container>
           </ul>
         </article>
       </article>
diff --git a/src/app/adf-home/df-welcome-page/df-welcome-page.component.scss b/src/app/adf-home/df-welcome-page/df-welcome-page.component.scss
index 7a85aea0..f28920c5 100644
--- a/src/app/adf-home/df-welcome-page/df-welcome-page.component.scss
+++ b/src/app/adf-home/df-welcome-page/df-welcome-page.component.scss
@@ -143,3 +143,10 @@ mat-card.notice-card {
 #need-help-choosing-note {
   font-size: 12px;
 }
+
+.learn-more-links-list {
+  display: flex;
+  justify-content: space-evenly;
+  flex-wrap: wrap;
+  gap: 10px;
+}

From 6ee83500788431429a8e48f412760377e2d45e36 Mon Sep 17 00:00:00 2001
From: VitaliyHrabovych <vitaliihr@softwareplanet.group>
Date: Thu, 15 May 2025 18:12:08 +0300
Subject: [PATCH 13/13] Used a prettier

---
 .../adf-home/df-welcome-page/df-welcome-page.component.html | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/app/adf-home/df-welcome-page/df-welcome-page.component.html b/src/app/adf-home/df-welcome-page/df-welcome-page.component.html
index cfefebf3..c0edaf1b 100644
--- a/src/app/adf-home/df-welcome-page/df-welcome-page.component.html
+++ b/src/app/adf-home/df-welcome-page/df-welcome-page.component.html
@@ -36,9 +36,9 @@ <h3 id="learn-more-heading">
                 *ngIf="
                   data.isFirstTimeUser ||
                   resource.name === 'home.resourceLinks.gettingStartedGuide' ||
-                    resource.name === 'home.resourceLinks.fullDocumentation' ||
-                    resource.name === 'home.resourceLinks.blog' ||
-                    resource.name === 'home.resourceLinks.contactSupport'
+                  resource.name === 'home.resourceLinks.fullDocumentation' ||
+                  resource.name === 'home.resourceLinks.blog' ||
+                  resource.name === 'home.resourceLinks.contactSupport'
                 ">
                 <df-icon-link [linkItem]="resource"></df-icon-link>
               </li>