demo: landing page improvement

AmadeusITGroup · Sep 13, 2023 · ffbd37f · ffbd37f
1 parent e3886cb
commit ffbd37f
Show file tree

Hide file tree

Showing 19 changed files with 375 additions and 132 deletions.
diff --git 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
diff --git a/angular/demo/src/favicon.ico b/angular/demo/src/favicon.ico
diff --git a/angular/demo/src/index.html b/angular/demo/src/index.html
@@ -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">

diff --git 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
@@ -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>

diff --git a/demo/src/lib/snippets/landing-page/LandingCard.svelte b/demo/src/lib/snippets/landing-page/LandingCard.svelte
@@ -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>
diff --git a/demo/src/resources/agnosui-logo.svg b/demo/src/resources/agnosui-logo.svg
diff --git a/demo/src/routes/+layout.svelte b/demo/src/routes/+layout.svelte
@@ -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>
 

diff --git a/demo/src/routes/+page.svelte b/demo/src/routes/+page.svelte
@@ -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>