-
Notifications
You must be signed in to change notification settings - Fork 13
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
e3886cb
commit ffbd37f
Showing
19 changed files
with
375 additions
and
132 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file not shown.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> |
Oops, something went wrong.