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..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: flex-start; + justify-content: left; 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 @@ + + + +

+ {{ headerText | transloco }} +

+ {{ text | transloco }} + + 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 b70f3c3c..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 @@ -9,27 +9,40 @@

- {{ 'home.welcomePage.welcomeHeading' | transloco }} + {{ 'home.welcomePage.generateYourApis' | transloco }}

-
+ + +
+

+ {{ 'home.welcomePage.needHelpChoosing' | transloco }}

-
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..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 @@ -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,57 @@ 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; } + +.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; +} 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..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 @@ -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,6 +59,10 @@ import { DFStorageService } from 'src/app/shared/services/df-storage.service'; DfQuickstartPageComponent, DfResourcesPageComponent, DfDownloadPageComponent, + RouterModule, + MatButtonModule, + MatIconModule, + DfGenerateApiCardComponent, ], providers: [DfBaseCrudService], }) @@ -52,6 +70,21 @@ 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[] = []; diff --git a/src/assets/i18n/home/en.json b/src/assets/i18n/home/en.json index b8e7a050..02b278cb 100644 --- a/src/assets/i18n/home/en.json +++ b/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 sales@dreamfactory.com 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 sales@dreamfactory.com 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 info@dreamfactory.com 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 info@dreamfactory.com 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" } -} +} \ No newline at end of file