diff --git a/templates/app-nolayers/angular/src/app/home/home.component.html b/templates/app-nolayers/angular/src/app/home/home.component.html index 76ca024561..2bec5135ed 100644 --- a/templates/app-nolayers/angular/src/app/home/home.component.html +++ b/templates/app-nolayers/angular/src/app/home/home.component.html @@ -1,55 +1,310 @@ -
-
-
-
- {{ '::Welcome_Title' | abpLocalization }} -
+
+
+
+
+
+ @if(!hasLoggedIn){ +

Welcome

+

+ Welcome to the application. This is a startup project based on the ABP framework. For + more information visit abp.io. +

+ {{ 'AbpAccount::Login' | abpLocalization }} + } + +

Getting Started

+ + +

Web Application Development Tutorial

+ + +

Customize Lepton Theme

+

Learn how to customize LeptonX Theme as you wish.

+ Customize Lepton +
+ + +
-
- @if(!hasLoggedIn){ - - } -

{{ '::Welcome_Text' | abpLocalization }}

+
+
+
+ +
-
-
-
-
- -
-
-
- THE OFFICIAL GUIDE -

Mastering ABP Framework

-

+

+
+
+ +

+ A unique community platform for + ABP Lovers! +

+

+ Explore all ABP users' experiences with the ABP Framework, discover articles and videos on + how to use ABP, and join raffles for a chance to win surprise gifts! +

+ Join ABP Community +
+ +
+
+
+
+ +
+
+
+
+
+

THE OFFICIAL GUIDE

+

Mastering ABP Framework

+

Written by the creator of the ABP Framework, this book will help you gain a complete understanding of the framework and modern web application development techniques.

-
+
Buy on Amazon US -   Buy on PACKT
+
+ +
+
+ + +

+ {{ context.label }} + + + +
+
+
+
+

+ {{ context.label }} + +
+
+
+ + + +
+
+
+
{{ context.title }}
+
+
+
+ + + @for(item of context.items; track $index; let last = $last){ + + + + + } + +
+ @if(item.icon){ +
+ @if(item.iconType === 'image'){ + + }@else if(item.iconType === 'icon'){ + + }@else{ +
+ } +
+ } +
{{ item.title }}
+ 		+ + + +
+
+
+
+
+ diff --git a/templates/app-nolayers/angular/src/app/home/home.component.scss b/templates/app-nolayers/angular/src/app/home/home.component.scss index 4e3bf68aa0..3f5f305dbf 100644 --- a/templates/app-nolayers/angular/src/app/home/home.component.scss +++ b/templates/app-nolayers/angular/src/app/home/home.component.scss @@ -1 +1,25 @@ -/* Styles for the home component */ \ No newline at end of file +/* Styles for the home component */ +.card-bg-image { + position: absolute; + width: 630px; + height: auto; + bottom: 0; + right: 0; + z-index: 1; +} +.starting-content { + position: relative; + z-index: 2; +} + +@media (min-width: 1199px) { + .h-lg-100 { + height: 100% !important; + } +} + +@media (min-width: 768px) { + .h-md-100 { + height: 100% !important; + } +} diff --git a/templates/app-nolayers/angular/src/assets/images/getting-started/abp-blog.svg b/templates/app-nolayers/angular/src/assets/images/getting-started/abp-blog.svg new file mode 100644 index 0000000000..881609edd0 --- /dev/null +++ b/templates/app-nolayers/angular/src/assets/images/getting-started/abp-blog.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/templates/app-nolayers/angular/src/assets/images/getting-started/abp-community.svg b/templates/app-nolayers/angular/src/assets/images/getting-started/abp-community.svg new file mode 100644 index 0000000000..5260071cc7 --- /dev/null +++ b/templates/app-nolayers/angular/src/assets/images/getting-started/abp-community.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/templates/app-nolayers/angular/src/assets/images/getting-started/abp-support.svg b/templates/app-nolayers/angular/src/assets/images/getting-started/abp-support.svg new file mode 100644 index 0000000000..774bca6d49 --- /dev/null +++ b/templates/app-nolayers/angular/src/assets/images/getting-started/abp-support.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/templates/app-nolayers/angular/src/assets/images/getting-started/bg-01.png b/templates/app-nolayers/angular/src/assets/images/getting-started/bg-01.png new file mode 100644 index 0000000000..deec8634ed Binary files /dev/null and b/templates/app-nolayers/angular/src/assets/images/getting-started/bg-01.png differ diff --git a/templates/app-nolayers/angular/src/assets/images/getting-started/book.png b/templates/app-nolayers/angular/src/assets/images/getting-started/book.png new file mode 100644 index 0000000000..a31327dad8 Binary files /dev/null and b/templates/app-nolayers/angular/src/assets/images/getting-started/book.png differ diff --git a/templates/app-nolayers/angular/src/assets/images/getting-started/discord.svg b/templates/app-nolayers/angular/src/assets/images/getting-started/discord.svg new file mode 100644 index 0000000000..3b03f7637f --- /dev/null +++ b/templates/app-nolayers/angular/src/assets/images/getting-started/discord.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/templates/app-nolayers/angular/src/assets/images/getting-started/img-blog.png b/templates/app-nolayers/angular/src/assets/images/getting-started/img-blog.png new file mode 100644 index 0000000000..97dd835b3a Binary files /dev/null and b/templates/app-nolayers/angular/src/assets/images/getting-started/img-blog.png differ diff --git a/templates/app-nolayers/angular/src/assets/images/getting-started/img-community.png b/templates/app-nolayers/angular/src/assets/images/getting-started/img-community.png new file mode 100644 index 0000000000..f3dde7eb6f Binary files /dev/null and b/templates/app-nolayers/angular/src/assets/images/getting-started/img-community.png differ diff --git a/templates/app-nolayers/angular/src/assets/images/getting-started/img-support.png b/templates/app-nolayers/angular/src/assets/images/getting-started/img-support.png new file mode 100644 index 0000000000..4a49e4fd1e Binary files /dev/null and b/templates/app-nolayers/angular/src/assets/images/getting-started/img-support.png differ diff --git a/templates/app-nolayers/angular/src/assets/images/getting-started/instagram.svg b/templates/app-nolayers/angular/src/assets/images/getting-started/instagram.svg new file mode 100644 index 0000000000..f13e484152 --- /dev/null +++ b/templates/app-nolayers/angular/src/assets/images/getting-started/instagram.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + + + + + + + + + + diff --git a/templates/app-nolayers/angular/src/assets/images/getting-started/stack-overflow.svg b/templates/app-nolayers/angular/src/assets/images/getting-started/stack-overflow.svg new file mode 100644 index 0000000000..2b09789444 --- /dev/null +++ b/templates/app-nolayers/angular/src/assets/images/getting-started/stack-overflow.svg @@ -0,0 +1,4 @@ + + + + diff --git a/templates/app-nolayers/angular/src/assets/images/getting-started/x.svg b/templates/app-nolayers/angular/src/assets/images/getting-started/x.svg new file mode 100644 index 0000000000..422e2de1c2 --- /dev/null +++ b/templates/app-nolayers/angular/src/assets/images/getting-started/x.svg @@ -0,0 +1,3 @@ + + + diff --git a/templates/app-nolayers/angular/src/assets/images/getting-started/youtube.svg b/templates/app-nolayers/angular/src/assets/images/getting-started/youtube.svg new file mode 100644 index 0000000000..1d38b170b6 --- /dev/null +++ b/templates/app-nolayers/angular/src/assets/images/getting-started/youtube.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/templates/app-nolayers/angular/src/styles.scss b/templates/app-nolayers/angular/src/styles.scss index 30196d38d8..bd026887e3 100644 --- a/templates/app-nolayers/angular/src/styles.scss +++ b/templates/app-nolayers/angular/src/styles.scss @@ -8,7 +8,7 @@ transform: rotate(360deg); } } -:root { +:root { --lpx-logo: url('/assets/images/logo/logo-light.png'); --lpx-logo-icon: url('/assets/images/logo/logo-light-thumbnail.png'); } @@ -27,5 +27,32 @@ left: 50%; transform: translate(-50%, -50%); } +} + +.abp-logo { + background-repeat: no-repeat; +} + +.abp-support { + width: 178px; + height: 30px; + background-image: url('/assets/images/getting-started/abp-support.svg'); +} + +.abp-community { + width: 215px; + height: 30px; + background-image: url('/assets/images/getting-started/abp-community.svg'); +} + +.abp-blog { + width: 142px; + height: 30px; + background-image: url('/assets/images/getting-started/abp-blog.svg'); +} +.logo-x { + width: 20px; + height: 20px; + background-image: url('/assets/images/getting-started/x.svg'); } diff --git a/templates/app/angular/src/app/home/home.component.html b/templates/app/angular/src/app/home/home.component.html index ae7477b50a..dc5fb1a532 100644 --- a/templates/app/angular/src/app/home/home.component.html +++ b/templates/app/angular/src/app/home/home.component.html @@ -1,374 +1,309 @@ -
-
- -

{{ '::Welcome' | abpLocalization }}

+
+
+
+
+
+ @if(!hasLoggedIn){ +

Welcome

+

+ {{ '::LongWelcomeMessage' | abpLocalization }} +

+ {{ 'AbpAccount::Login' | abpLocalization }} + } + +

Getting Started

+ -

{{ '::LongWelcomeMessage' | abpLocalization }}

+

Web Application Development Tutorial

+ - @if(!hasLoggedIn){ - - {{ 'AbpAccount::Login' | abpLocalization }} - } -
-
-
-
-
- +

Customize Lepton Theme

+

Learn how to customize LeptonX Theme as you wish.

+ Customize Lepton
-
-
- THE OFFICIAL GUIDE -

Mastering ABP Framework

-

+ + +

+
+
+
+
+ + +
+
+
+
+
+ +

+ A unique community platform for + ABP Lovers! +

+

+ Explore all ABP users' experiences with the ABP Framework, discover articles and videos on + how to use ABP, and join raffles for a chance to win surprise gifts! +

+ Join ABP Community +
+ +
+
+
+
+ +
+
+
+
+
+

THE OFFICIAL GUIDE

+

Mastering ABP Framework

+

Written by the creator of the ABP Framework, this book will help you gain a complete understanding of the framework and modern web application development techniques.

-
+
Buy on Amazon US -   Buy on PACKT
+
+ +
-
-

Let's improve your application!

-

Here are some links to help you get started:

-
-
-
-
- - - - - -
-
- - - -

- - - - -

- + ] + } + } + " + > +
- + +

+ {{ context.label }} + - + +
+
+ -
-

Meet the ABP Commercial

-

A Complete Web Application Platform Built on the ABP Framework

-
- -
-
-

- ABP Commercial is a platform based - on the open source ABP framework. It provides pre-built application modules, rapid - application development tooling, professional UI themes, premium support and more. -

- -
- - - - - - - - - - - +
+
+
{{ context.title }}
+
+
+
+ + + @for(item of context.items; track $index; let last = $last){ + + + + } - } - " - > + +
+ @if(item.icon){ +
+ @if(item.iconType === 'image'){ + + }@else if(item.iconType === 'icon'){ + + }@else{ +
+ } +
+ } +
{{ item.title }}
+ 		+ + + +
+
-
-

- Abp Framework - Abp Commercial - abpframework -

-
-
- - -
-
-
- - {{ context.title }} -
-

- @if (context.customTemplate) { - - } @for (link of context.links; track $index) { - {{ link.label }} - } -
-
- - - -
-
-
- - - Details -
-
-
- - diff --git a/templates/app/angular/src/app/home/home.component.scss b/templates/app/angular/src/app/home/home.component.scss index 4e3bf68aa0..3f5f305dbf 100644 --- a/templates/app/angular/src/app/home/home.component.scss +++ b/templates/app/angular/src/app/home/home.component.scss @@ -1 +1,25 @@ -/* Styles for the home component */ \ No newline at end of file +/* Styles for the home component */ +.card-bg-image { + position: absolute; + width: 630px; + height: auto; + bottom: 0; + right: 0; + z-index: 1; +} +.starting-content { + position: relative; + z-index: 2; +} + +@media (min-width: 1199px) { + .h-lg-100 { + height: 100% !important; + } +} + +@media (min-width: 768px) { + .h-md-100 { + height: 100% !important; + } +} diff --git a/templates/app/angular/src/assets/images/getting-started/abp-blog.svg b/templates/app/angular/src/assets/images/getting-started/abp-blog.svg new file mode 100644 index 0000000000..881609edd0 --- /dev/null +++ b/templates/app/angular/src/assets/images/getting-started/abp-blog.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/templates/app/angular/src/assets/images/getting-started/abp-community.svg b/templates/app/angular/src/assets/images/getting-started/abp-community.svg new file mode 100644 index 0000000000..5260071cc7 --- /dev/null +++ b/templates/app/angular/src/assets/images/getting-started/abp-community.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/templates/app/angular/src/assets/images/getting-started/abp-support.svg b/templates/app/angular/src/assets/images/getting-started/abp-support.svg new file mode 100644 index 0000000000..774bca6d49 --- /dev/null +++ b/templates/app/angular/src/assets/images/getting-started/abp-support.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/templates/app/angular/src/assets/images/getting-started/bg-01.png b/templates/app/angular/src/assets/images/getting-started/bg-01.png new file mode 100644 index 0000000000..deec8634ed Binary files /dev/null and b/templates/app/angular/src/assets/images/getting-started/bg-01.png differ diff --git a/templates/app/angular/src/assets/images/getting-started/book.png b/templates/app/angular/src/assets/images/getting-started/book.png new file mode 100644 index 0000000000..a31327dad8 Binary files /dev/null and b/templates/app/angular/src/assets/images/getting-started/book.png differ diff --git a/templates/app/angular/src/assets/images/getting-started/discord.svg b/templates/app/angular/src/assets/images/getting-started/discord.svg new file mode 100644 index 0000000000..3b03f7637f --- /dev/null +++ b/templates/app/angular/src/assets/images/getting-started/discord.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/templates/app/angular/src/assets/images/getting-started/img-blog.png b/templates/app/angular/src/assets/images/getting-started/img-blog.png new file mode 100644 index 0000000000..97dd835b3a Binary files /dev/null and b/templates/app/angular/src/assets/images/getting-started/img-blog.png differ diff --git a/templates/app/angular/src/assets/images/getting-started/img-community.png b/templates/app/angular/src/assets/images/getting-started/img-community.png new file mode 100644 index 0000000000..f3dde7eb6f Binary files /dev/null and b/templates/app/angular/src/assets/images/getting-started/img-community.png differ diff --git a/templates/app/angular/src/assets/images/getting-started/img-support.png b/templates/app/angular/src/assets/images/getting-started/img-support.png new file mode 100644 index 0000000000..4a49e4fd1e Binary files /dev/null and b/templates/app/angular/src/assets/images/getting-started/img-support.png differ diff --git a/templates/app/angular/src/assets/images/getting-started/instagram.svg b/templates/app/angular/src/assets/images/getting-started/instagram.svg new file mode 100644 index 0000000000..f13e484152 --- /dev/null +++ b/templates/app/angular/src/assets/images/getting-started/instagram.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + + + + + + + + + + diff --git a/templates/app/angular/src/assets/images/getting-started/stack-overflow.svg b/templates/app/angular/src/assets/images/getting-started/stack-overflow.svg new file mode 100644 index 0000000000..2b09789444 --- /dev/null +++ b/templates/app/angular/src/assets/images/getting-started/stack-overflow.svg @@ -0,0 +1,4 @@ + + + + diff --git a/templates/app/angular/src/assets/images/getting-started/x.svg b/templates/app/angular/src/assets/images/getting-started/x.svg new file mode 100644 index 0000000000..422e2de1c2 --- /dev/null +++ b/templates/app/angular/src/assets/images/getting-started/x.svg @@ -0,0 +1,3 @@ + + + diff --git a/templates/app/angular/src/assets/images/getting-started/youtube.svg b/templates/app/angular/src/assets/images/getting-started/youtube.svg new file mode 100644 index 0000000000..1d38b170b6 --- /dev/null +++ b/templates/app/angular/src/assets/images/getting-started/youtube.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/templates/app/angular/src/styles.scss b/templates/app/angular/src/styles.scss index 30196d38d8..bd026887e3 100644 --- a/templates/app/angular/src/styles.scss +++ b/templates/app/angular/src/styles.scss @@ -8,7 +8,7 @@ transform: rotate(360deg); } } -:root { +:root { --lpx-logo: url('/assets/images/logo/logo-light.png'); --lpx-logo-icon: url('/assets/images/logo/logo-light-thumbnail.png'); } @@ -27,5 +27,32 @@ left: 50%; transform: translate(-50%, -50%); } +} + +.abp-logo { + background-repeat: no-repeat; +} + +.abp-support { + width: 178px; + height: 30px; + background-image: url('/assets/images/getting-started/abp-support.svg'); +} + +.abp-community { + width: 215px; + height: 30px; + background-image: url('/assets/images/getting-started/abp-community.svg'); +} + +.abp-blog { + width: 142px; + height: 30px; + background-image: url('/assets/images/getting-started/abp-blog.svg'); +} +.logo-x { + width: 20px; + height: 20px; + background-image: url('/assets/images/getting-started/x.svg'); }