Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

demo: landing page improvement #127

Merged
merged 1 commit into from
Sep 13, 2023
Merged

demo: landing page improvement #127

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion angular/angular.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
21 changes: 21 additions & 0 deletions angular/demo/src/agnosui-logo.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file removed angular/demo/src/favicon.ico
View file
Open in desktop
Binary file not shown.
2 changes: 1 addition & 1 deletion angular/demo/src/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
<meta name="robots" content="noindex" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Demo</title>
<link rel="icon" type="image/x-icon" href="favicon.ico" />
<link rel="icon" type="image/svg+xml" href="agnosui-logo.svg" />
</head>
<body>
<div id="root">
Expand Down
12 changes: 12 additions & 0 deletions common/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
2 changes: 1 addition & 1 deletion demo/src/app.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
<meta charset="UTF-8" />
<meta name="robots" content="noindex" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" type="image/svg+xml" href="%sveltekit.assets%/favicon.svg" />
<link rel="icon" type="image/svg+xml" href="%sveltekit.assets%/agnosui-logo.svg" />
%sveltekit.head%
<title>AgnosUI</title>
</head>
Expand Down
46 changes: 46 additions & 0 deletions demo/src/lib/snippets/landing-page/LandingCard.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
<script lang="ts">
import Svg from '$lib/layout/Svg.svelte';

export let title: string;
export let svg = '';
</script>

<div class="col-12 col-md-6 col-lg-4 mb-3">
<div class="card">
<div class="row g-0">
{#if svg}
<div class="col-4 p-2">
<Svg {svg} className="landing-card-svg img-fluid rounded-start" />
</div>
{/if}
<div class="col">
<div class="card-body">
<h5 class="card-title">{title}</h5>
<p class="card-text">
<slot />
</p>
</div>
</div>
</div>
</div>
</div>

<style lang="scss">
@import '../../../../../common/variables';

:global(.landing-card-svg) {
width: 140px;
height: 140px;
}

h5 {
color: $gradient-text-bottom;
font-weight: bold;
}

.card {
height: 100%;
border: none;
background-color: transparent;
}
</style>
21 changes: 21 additions & 0 deletions demo/src/resources/agnosui-logo.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
6 changes: 2 additions & 4 deletions demo/src/routes/+layout.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,10 +54,8 @@
</div>
</div>
</nav>
<div class="demo-main d-flex justify-content-center">
<div class="container-xxl">
<slot />
</div>
<div class="demo-main d-flex flex-column">
<slot />
</div>
</div>

Expand Down
203 changes: 154 additions & 49 deletions demo/src/routes/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,74 +1,179 @@
<script lang="ts">
// import {Alert} from '@agnos-ui/svelte';
import Svg from '$lib/layout/Svg.svelte';
import LandingCard from '$lib/snippets/landing-page/LandingCard.svelte';
import angularLogo from '../resources/logo-angular.svg?raw';
import reactLogo from '../resources/logo-react.svg?raw';
import sveteLogo from '../resources/logo-svelte.svg?raw';
import svelteLogo from '../resources/logo-svelte.svg?raw';
import agnosUILogo from '../resources/agnosui-logo.svg?raw';
import bullet from 'bootstrap-icons/icons/arrow-right-square-fill.svg?raw';
</script>

<svelte:head>
<title>AgnosUI - Home page</title>
<meta name="description" content="Svelte demo app" />
</svelte:head>

<section class="pt-3">
<div class="d-flex justify-content-center">
<div class="alert alert-primary">
<p class="text-center">Welcome to AgnosUI Demo!</p>
<p class="mb-0">
Experience the beginning stages of our exciting journey as we actively develop our library for CSS Bootstrap design.
<br />
Follow us on <a href="https://github.com/AmadeusITGroup/AgnosUI" class="link-body-emphasis">GitHub</a> for the latest updates and be a part of
shaping the next-generation UI components!
</p>
<div class="container-xxl">
<section class="row pres mb-4">
<div class="col-12 col-lg-6 order-1 order-lg-0">
<div class="pres-logo d-block text-center text-lg-start">AgnosUI</div>
<div class="mt-3">
<div class="pres-line ps-4 pres-logo-text"><Svg svg={bullet} className="bullet" /> Making your webapps powerfull and consistent</div>
<div class="pres-line ps-4 pres-logo-text"><Svg svg={bullet} className="bullet" /> Headless widgets library</div>
<div class="pres-line ps-4 pres-logo-text"><Svg svg={bullet} className="bullet" /> Adapters for Angular, React and Svelte</div>
</div>
<div class="btn-docs card mb-3 mt-5">
<div class="row g-0">
<div class="col">
<div class="card-body">
<h5 class="card-title pres-card-title mb-4">Checkout the docs</h5>
<div class="card-text row">
<div class="col-12 col-sm-4">
<a
href="angular/components/accordion/examples"
class="btn-doc d-flex align-items-center justify-items-center"
aria-label="link to angular examples"
title="Angular"
>
<Svg svg={angularLogo} className="pres-card-logo me-3" />
Angular
</a>
</div>
<div class="col-12 col-sm-4">
<a
href="react/components/accordion/examples"
class="btn-doc d-flex align-items-center justify-items-center"
aria-label="link to angular examples"
title="Angular"
>
<Svg svg={reactLogo} className="pres-card-logo me-3" />
React
</a>
</div>
<div class="col-12 col-sm-4">
<a
href="svelte/components/accordion/examples"
class="btn-doc d-flex align-items-center justify-items-center"
aria-label="link to angular examples"
title="Svelte"
>
<Svg svg={svelteLogo} className="pres-card-logo me-3" />
Svelte
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-12 col-lg-6 order-0 order-lg-1 d-flex justify-content-center align-items-center">
<Svg svg={agnosUILogo} className="agnosui-logo" />
</div>
</section>
</div>
<section class="background pt-5 mt-5 flex-grow-1">
<div class="container-xxl">
<div class="cards row align-content-around">
<LandingCard title="Headless widgets">
Each widget is managed in pure typescript with a reactive model and an api to drive the data.
</LandingCard>
<LandingCard title="Consistent">
Widgets are provided for Angular, React and Svelte with the exact same markup and functionnalities.
</LandingCard>
<LandingCard title="Highly configurable">
Default values for all widget props are configurable at any point of the component subtree.
</LandingCard>
<LandingCard title="Fully tested">Unit test for headless with Vitest. E2e tests for adapters with Playwright.</LandingCard>
<LandingCard title="Accessible">Widgets are tested with Axe.</LandingCard>
</div>
</div>

<div class="note my-3">
<p>
AgnosUI is a powerful library of widgets designed specifically for <a href="https://getbootstrap.com/">Bootstrap</a>.
</p>
<p>
Inspired by the success of
<a href="https://ng-bootstrap.github.io/">ng-bootstrap</a>, AgnosUI takes the concept a step further by offering widgets that can seamlessly
integrate with any front-end framework of your choice.
</p>
<p>
With support for popular frameworks like <a href="https://angular.io/">Angular</a>,
<a href="https://react.dev/">React</a>, and <a href="https://svelte.dev/">Svelte</a>, AgnosUI allows you to effortlessly create consistent and
visually appealing UI components across your projects.
</p>
</div>

<h4 class="text-center mt-4 mt-md-5">For a comprehensive understanding of AgnosUI's features and usage,<br />feel free to explore our demo</h4>
<div class="d-flex links d-flex justify-content-evenly">
<a href="angular/components/accordion/examples" aria-label="link to angular examples" title="Angular">
<Svg svg={angularLogo} className="framework-logo" />
</a>
<a href="react/components/accordion/examples" aria-label="link to react examples" title="React">
<Svg svg={reactLogo} className="framework-logo" />
</a>
<a href="svelte/components/accordion/examples" aria-label="link to svelte examples" title="Svelte">
<Svg svg={sveteLogo} className="framework-logo" />
</a>
</div>
</section>

<style lang="scss">
@import '../../../common/variables';

.note {
font-size: 1.25rem;
font-weight: 300;
@import url('https://fonts.googleapis.com/css2?family=Kanit&display=swap');
$font-name: 'Kanit';

.btn-doc :global(.pres-card-logo) {
width: 30px;
height: 30px;
}

:global(.agnosui-logo) {
min-width: 200px;
max-width: 320px;
width: 30vw;
}
.links {
padding: 1rem 0rem;
@include media-breakpoint-up(md) {
padding: 3rem;

.pres {
padding-top: 1rem;

&-card-title {
font-size: 1.5rem;
text-align: center;
}

:global(.framework-logo) {
height: 100px;
&-logo {
font-family: $font-name, sans-serif;
font-size: 5rem;
font-weight: 300;
background: linear-gradient($gradient-text-top, $gradient-text-bottom);
// background: linear-gradient(#bc0cf1, #d40404);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

&-line {
font-size: 1.3rem;
margin-bottom: 0.5rem;
@include media-breakpoint-up(md) {
font-size: 1.6rem !important;
}

:global(.bullet) {
height: 20px;
color: $gradient-text-top;
}
}
}

.btn-docs {
background-color: $light-background;
}

.btn-doc {
font-family: 'Jost', sans-serif;
font-weight: 500;
font-size: 15px;
letter-spacing: 1px;
display: inline-block;
padding: 8px 20px;
border-radius: 50px;
transition: 0.5s;
margin: 5px 0 0 0;
color: #fff;
background: $gradient-top;
// border: 4px solid $gradient-bottom;
// border: 5px solid #1066ef;
text-decoration: none;
}

.btn-doc:hover {
background: $gradient-bottom;
border-color: $gradient-top;
}

.background {
border-top: 1px solid $gradient-text-bottom;
background-color: $light-background;
}

// :global(.framework-logo) {
// height: 50px;
// }
// }
</style>
Loading
Loading