From 8ed0cdad9efdfe51f45ecaa428e0f809748377a4 Mon Sep 17 00:00:00 2001 From: fbasso Date: Tue, 12 Sep 2023 17:44:05 +0200 Subject: [PATCH] demo: landing page improvement --- angular/angular.json | 2 +- angular/demo/src/agnosui-logo.svg | 21 ++ angular/demo/src/favicon.ico | Bin 948 -> 0 bytes angular/demo/src/index.html | 2 +- common/_variables.scss | 12 ++ demo/src/app.html | 2 +- .../snippets/landing-page/LandingCard.svelte | 46 ++++ demo/src/resources/agnosui-logo.svg | 21 ++ demo/src/routes/+layout.svelte | 6 +- demo/src/routes/+page.svelte | 203 +++++++++++++----- demo/src/routes/[framework]/+layout.svelte | 90 ++++---- demo/src/routes/styles.scss | 5 + demo/static/agnosui-logo.svg | 21 ++ react/demo/agnosui-logo.svg | 21 ++ react/demo/favicon.svg | 15 -- react/demo/index.html | 2 +- svelte/demo/agnosui-logo.svg | 21 ++ svelte/demo/favicon.svg | 15 -- svelte/demo/index.html | 2 +- 19 files changed, 375 insertions(+), 132 deletions(-) create mode 100644 angular/demo/src/agnosui-logo.svg delete mode 100644 angular/demo/src/favicon.ico create mode 100644 demo/src/lib/snippets/landing-page/LandingCard.svelte create mode 100644 demo/src/resources/agnosui-logo.svg create mode 100644 demo/static/agnosui-logo.svg create mode 100644 react/demo/agnosui-logo.svg delete mode 100644 react/demo/favicon.svg create mode 100644 svelte/demo/agnosui-logo.svg delete mode 100644 svelte/demo/favicon.svg diff --git a/angular/angular.json b/angular/angular.json index 7a8bc836d6..0c10f326e6 100644 --- a/angular/angular.json +++ b/angular/angular.json @@ -22,7 +22,7 @@ "main": "demo/src/main.ts", "polyfills": "demo/src/polyfills.ts", "tsConfig": "demo/tsconfig.app.json", - "assets": ["demo/src/favicon.ico", "demo/src/assets"], + "assets": ["demo/src/agnosui-logo.svg", "demo/src/assets"], "styles": ["demo/src/styles.css", "../common/demo.scss"], "scripts": [], "inlineStyleLanguage": "scss", diff --git a/angular/demo/src/agnosui-logo.svg b/angular/demo/src/agnosui-logo.svg new file mode 100644 index 0000000000..4d0c3b280f --- /dev/null +++ b/angular/demo/src/agnosui-logo.svg @@ -0,0 +1,21 @@ + + + + asciitilde + + + + + + + + + + + + + asciitilde + + + + diff --git a/angular/demo/src/favicon.ico b/angular/demo/src/favicon.ico deleted file mode 100644 index 997406ad22c29aae95893fb3d666c30258a09537..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 948 zcmV;l155mgP)CBYU7IjCFmI-B}4sMJt3^s9NVg!P0 z6hDQy(L`XWMkB@zOLgN$4KYz;j0zZxq9KKdpZE#5@k0crP^5f9KO};h)ZDQ%ybhht z%t9#h|nu0K(bJ ztIkhEr!*UyrZWQ1k2+YkGqDi8Z<|mIN&$kzpKl{cNP=OQzXHz>vn+c)F)zO|Bou>E z2|-d_=qY#Y+yOu1a}XI?cU}%04)zz%anD(XZC{#~WreV!a$7k2Ug`?&CUEc0EtrkZ zL49MB)h!_K{H(*l_93D5tO0;BUnvYlo+;yss%n^&qjt6fZOa+}+FDO(~2>G z2dx@=JZ?DHP^;b7*Y1as5^uphBsh*s*z&MBd?e@I>-9kU>63PjP&^#5YTOb&x^6Cf z?674rmSHB5Fk!{Gv7rv!?qX#ei_L(XtwVqLX3L}$MI|kJ*w(rhx~tc&L&xP#?cQow zX_|gx$wMr3pRZIIr_;;O|8fAjd;1`nOeu5K(pCu7>^3E&D2OBBq?sYa(%S?GwG&_0-s%_v$L@R!5H_fc)lOb9ZoOO#p`Nn`KU z3LTTBtjwo`7(HA6 z7gmO$yTR!5L>Bsg!X8616{JUngg_@&85%>W=mChTR;x4`P=?PJ~oPuy5 zU-L`C@_!34D21{fD~Y8NVnR3t;aqZI3fIhmgmx}$oc-dKDC6Ap$Gy>a!`A*x2L1v0 WcZ@i?LyX}70000 Demo - +
diff --git a/common/_variables.scss b/common/_variables.scss index 189d90f907..818d777a4a 100644 --- a/common/_variables.scss +++ b/common/_variables.scss @@ -1,3 +1,15 @@ @import '../node_modules/bootstrap/scss/functions'; @import '../node_modules/bootstrap/scss/variables'; @import '../node_modules/bootstrap/scss/mixins/breakpoints'; + +$light-background: #f3f5fa; + +$gradient-top: #006dff; +$gradient-bottom: #0097fe; +$gradient-text-top: $gradient-top; +$gradient-text-bottom: #254a64; + +// $gradient-top: #bc0cf1; +// $gradient-bottom: #d40404; +// $gradient-text-top: #bc0cf1; +// $gradient-text-bottom: #d40404; diff --git a/demo/src/app.html b/demo/src/app.html index 383be57bb7..65403f63f3 100644 --- a/demo/src/app.html +++ b/demo/src/app.html @@ -4,7 +4,7 @@ - + %sveltekit.head% AgnosUI diff --git a/demo/src/lib/snippets/landing-page/LandingCard.svelte b/demo/src/lib/snippets/landing-page/LandingCard.svelte new file mode 100644 index 0000000000..867896ab04 --- /dev/null +++ b/demo/src/lib/snippets/landing-page/LandingCard.svelte @@ -0,0 +1,46 @@ + + +
+
+
+ {#if svg} +
+ +
+ {/if} +
+
+
{title}
+

+ +

+
+
+
+
+
+ + diff --git a/demo/src/resources/agnosui-logo.svg b/demo/src/resources/agnosui-logo.svg new file mode 100644 index 0000000000..4d0c3b280f --- /dev/null +++ b/demo/src/resources/agnosui-logo.svg @@ -0,0 +1,21 @@ + + + + asciitilde + + + + + + + + + + + + + asciitilde + + + + diff --git a/demo/src/routes/+layout.svelte b/demo/src/routes/+layout.svelte index 38e43d59b2..1ef2050c72 100644 --- a/demo/src/routes/+layout.svelte +++ b/demo/src/routes/+layout.svelte @@ -54,10 +54,8 @@
-
-
- -
+
+
diff --git a/demo/src/routes/+page.svelte b/demo/src/routes/+page.svelte index 9dafa5a59d..a90ba44d4c 100644 --- a/demo/src/routes/+page.svelte +++ b/demo/src/routes/+page.svelte @@ -1,9 +1,12 @@ @@ -11,64 +14,166 @@ -
-
-
-

Welcome to AgnosUI Demo!

-

- Experience the beginning stages of our exciting journey as we actively develop our library for CSS Bootstrap design. -
- Follow us on GitHub for the latest updates and be a part of - shaping the next-generation UI components! -

+
+
+
+ +
+
Making your webapps powerfull and consistent
+
Headless widgets library
+
Adapters for Angular, React and Svelte
+
+
+
+
+
+
Checkout the docs
+
+
+ + + Angular + +
+
+ + + React + +
+
+ + + Svelte + +
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+ + Each widget is managed in pure typescript with a reactive model and an api to drive the data. + + + Widgets are provided for Angular, React and Svelte with the exact same markup and functionnalities. + + + Default values for all widget props are configurable at any point of the component subtree. + + Unit test for headless with Vitest. E2e tests for adapters with Playwright. + Widgets are tested with Axe.
-
- -
-

- AgnosUI is a powerful library of widgets designed specifically for Bootstrap. -

-

- Inspired by the success of - ng-bootstrap, AgnosUI takes the concept a step further by offering widgets that can seamlessly - integrate with any front-end framework of your choice. -

-

- With support for popular frameworks like Angular, - React, and Svelte, AgnosUI allows you to effortlessly create consistent and - visually appealing UI components across your projects. -

-
- -

For a comprehensive understanding of AgnosUI's features and usage,
feel free to explore our demo

-
- - - - - - - - -
diff --git a/demo/src/routes/[framework]/+layout.svelte b/demo/src/routes/[framework]/+layout.svelte index 1b34df6086..b7570a64e3 100644 --- a/demo/src/routes/[framework]/+layout.svelte +++ b/demo/src/routes/[framework]/+layout.svelte @@ -30,53 +30,55 @@ } -
- -
- -
-
- {#if $elements$.length} -
-
On this page
-
    - {#each $elements$ as element} - {@const isVisible = $visibleElements$.has(element)} - {@const {label, classname, href} = getElementProperties(element, isVisible)} -
  • - - {label} - +
    +
    +
    - {/if} + + +
    + +
    +
    + {#if $elements$.length} +
    +
    On this page
    +
      + {#each $elements$ as element} + {@const isVisible = $visibleElements$.has(element)} + {@const {label, classname, href} = getElementProperties(element, isVisible)} +
    • + + {label} + +
      • + {/each} +
    +
    + {/if} +
diff --git a/demo/src/routes/styles.scss b/demo/src/routes/styles.scss index e968e5c2e2..0d72c1639e 100644 --- a/demo/src/routes/styles.scss +++ b/demo/src/routes/styles.scss @@ -53,6 +53,11 @@ h3, } } +h5, +.h5 { + font-size: calc(0.8rem + 0.4vw); +} + header { &.title { margin-left: calc(var(--bs-gutter-x) * -0.5); diff --git a/demo/static/agnosui-logo.svg b/demo/static/agnosui-logo.svg new file mode 100644 index 0000000000..4d0c3b280f --- /dev/null +++ b/demo/static/agnosui-logo.svg @@ -0,0 +1,21 @@ + + + + asciitilde + + + + + + + + + + + + + asciitilde + + + + diff --git a/react/demo/agnosui-logo.svg b/react/demo/agnosui-logo.svg new file mode 100644 index 0000000000..4d0c3b280f --- /dev/null +++ b/react/demo/agnosui-logo.svg @@ -0,0 +1,21 @@ + + + + asciitilde + + + + + + + + + + + + + asciitilde + + + + diff --git a/react/demo/favicon.svg b/react/demo/favicon.svg deleted file mode 100644 index de4aeddc12..0000000000 --- a/react/demo/favicon.svg +++ /dev/null @@ -1,15 +0,0 @@ - - - - - - - - - - - - - - - diff --git a/react/demo/index.html b/react/demo/index.html index 315dba6aca..fc274b3415 100644 --- a/react/demo/index.html +++ b/react/demo/index.html @@ -4,7 +4,7 @@ - + Vite App diff --git a/svelte/demo/agnosui-logo.svg b/svelte/demo/agnosui-logo.svg new file mode 100644 index 0000000000..4d0c3b280f --- /dev/null +++ b/svelte/demo/agnosui-logo.svg @@ -0,0 +1,21 @@ + + + + asciitilde + + + + + + + + + + + + + asciitilde + + + + diff --git a/svelte/demo/favicon.svg b/svelte/demo/favicon.svg deleted file mode 100644 index de4aeddc12..0000000000 --- a/svelte/demo/favicon.svg +++ /dev/null @@ -1,15 +0,0 @@ - - - - - - - - - - - - - - - diff --git a/svelte/demo/index.html b/svelte/demo/index.html index 6739f3d2fb..01cf5bcd31 100644 --- a/svelte/demo/index.html +++ b/svelte/demo/index.html @@ -4,7 +4,7 @@ - + Svelte App