From ac74479c3cf20b99aa6f9c82ecf75ffc42014ee1 Mon Sep 17 00:00:00 2001 From: yordanov Date: Thu, 9 Sep 2021 14:06:20 +0300 Subject: [PATCH] Add list of components --- RadzenBlazorDemos/Pages/Index.razor | 184 +++++++++++++++++++++- RadzenBlazorDemos/wwwroot/css/site.css | 89 +++++++++-- RadzenBlazorDemos/wwwroot/images/play.svg | 4 + 3 files changed, 256 insertions(+), 21 deletions(-) create mode 100644 RadzenBlazorDemos/wwwroot/images/play.svg diff --git a/RadzenBlazorDemos/Pages/Index.razor b/RadzenBlazorDemos/Pages/Index.razor index bf7d75018..951cfcd9f 100644 --- a/RadzenBlazorDemos/Pages/Index.razor +++ b/RadzenBlazorDemos/Pages/Index.razor @@ -62,14 +62,183 @@ + +
+
+ +

Most Popular Components

+ +
+ + + + + DataGrid + + + + + + Scheduler + + + + + + DropDown + + + + + + Dialog + + + + + + DatePicker + +
+ +

All Components

+ +
+ +
+
+
+

Data

+ +

Images

+ +
+ +
+

Layout & Navigation

+ +
+
+
+ +
+

Forms

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

Data Visualization

+ +
+ +
+

Feedback

+ +

Validators

+ +
+
+
+ +
+ +
+
+
+
-

Boost your Blazor development

-

Radzen provides tons of productivity gains for Blazor developers

+

Boost your Blazor development

+

Radzen provides tons of productivity gains for Blazor developers

@@ -91,7 +260,7 @@
\ No newline at end of file diff --git a/RadzenBlazorDemos/wwwroot/css/site.css b/RadzenBlazorDemos/wwwroot/css/site.css index 4d680a526..75dac700d 100644 --- a/RadzenBlazorDemos/wwwroot/css/site.css +++ b/RadzenBlazorDemos/wwwroot/css/site.css @@ -159,9 +159,18 @@ text-decoration: none; } .next a:hover { + text-decoration: none; color: #FF7371; } +.dark a { + color: #FF9C9A; +} + +.dark a:hover { + color: #FF504D; +} + body { background-color: #F4F5F9; background-image: url("../images/background.svg"); @@ -170,16 +179,17 @@ body { background-attachment: fixed; } +.stage { + padding-top: 6rem; + padding-bottom: 6rem; +} + .dark { background-color: #050A23; background-image: url("../images/background.svg"); background-repeat: no-repeat; background-position: 50% 0; -} - -.stage { - padding-top: 6rem; - padding-bottom: 6rem; + padding-bottom: 3rem; } .next h1, @@ -198,7 +208,8 @@ body { .next .dark h3, .next .dark h4, .next .dark h5, -.next .dark h6 { +.next .dark h6, +.next .dark p { color: #ffffff; } .next h1 { @@ -207,13 +218,20 @@ body { letter-spacing: -0.02em; } -.subtitle { +.next .subtitle { font-weight: 100; font-size: 24px; line-height: 100%; margin: 3rem 0 3.75rem; } +.next .description { + font-weight: 300; + font-size: 16px; + line-height: 100%; + margin-bottom: 4rem; +} + .next h3 { font-weight: 700; font-size: 2rem; @@ -256,7 +274,7 @@ body { border: 1px solid #050A23; box-sizing: border-box; color: #050A23 !important; - transition: background-color .2s, border-color .2s, color .2s; + transition: all 0.3s ease-in-out; } .cta-button.primary { @@ -305,6 +323,7 @@ body { video { box-shadow: 0px 12px 20px rgba(0, 0, 0, 0.5); + background: rgba(0,0,0,.3) url("../images/play.svg") no-repeat 50% 50%; } .radzen-features ul { @@ -317,7 +336,7 @@ video { cursor: default; padding-top: 0.6rem; padding-bottom: 0.6rem; - transition: opacity .2s; + transition: all 0.3s ease-in-out; } .radzen-features li:hover { @@ -333,15 +352,55 @@ video { color: #ACAFB9; } -.copyright a { - color: #515256; -} - .copyright a img { - opacity: .5; - transition: opacity .2s; + opacity: .2; + transition: all 0.4s ease-in-out; } .copyright a:hover img { opacity: 1; +} + +/* Most Popular Components */ +.popular-components { + justify-content: space-evenly; +} + +.popular-components a { + font-size: 1.125rem; + font-weight: 600; + color: #050A23; + transition: all 0.2s; +} + +.popular-components a:hover { + color: #FF504D; +} + +.popular-components .component-icon { + width: 32px; + height: 32px; + display: block; + margin: 0 auto 1rem; +} + + +/* All Components */ +.all-components ul { + list-style-type: none; + padding: 0; + margin: 0; +} + +.all-components h4 { + font-size: 1rem; + line-height: 150%; + margin: 1rem 0 0.25rem; +} + +.all-components a { + font-weight: 300; + line-height: 200%; + color: #050A23; + transition: all 0.2s; } \ No newline at end of file diff --git a/RadzenBlazorDemos/wwwroot/images/play.svg b/RadzenBlazorDemos/wwwroot/images/play.svg new file mode 100644 index 000000000..565f22a74 --- /dev/null +++ b/RadzenBlazorDemos/wwwroot/images/play.svg @@ -0,0 +1,4 @@ + + + +