Skip to content

Commit

Permalink
demo: landing page improvement
Browse files Browse the repository at this point in the history
  • Loading branch information
@fbasso
fbasso committed Sep 12, 2023
1 parent b6866f0 commit 03e6e1a
Show file tree
Hide file tree
Showing 7 changed files with 284 additions and 97 deletions.
12 changes: 12 additions & 0 deletions common/_variables.scss
View file
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;
46 changes: 46 additions & 0 deletions demo/src/lib/snippets/landing-page/LandingCard.svelte
View file
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
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
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
201 changes: 152 additions & 49 deletions demo/src/routes/+page.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,74 +1,177 @@
<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 framework</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: 2px solid $gradient-text-bottom;
background-color: $light-background;
}
// :global(.framework-logo) {
// height: 50px;
// }
// }
</style>
Loading

0 comments on commit 03e6e1a

Please sign in to comment.