From 54069f40260cc9b636c052160f4df6131c15d8fa Mon Sep 17 00:00:00 2001
From: Nguyen Marc <nguyen_marc@live.fr>
Date: Fri, 19 Jan 2024 21:24:53 +0100
Subject: [PATCH] refactor: move header and footer

---
 src/app.d.ts                                  |  12 ++
 src/app.scss                                  |  10 ++
 src/lib/components/Applications.svelte        |  16 --
 src/routes/+layout.svelte                     | 160 +++++++++++-------
 src/routes/+page.svelte                       |  67 ++++----
 src/routes/Footer.svelte                      |  67 ++++++++
 .../Nav.svelte => routes/Header.svelte}       |   6 +
 src/routes/solutions/+page.svelte             |  53 ------
 8 files changed, 223 insertions(+), 168 deletions(-)
 create mode 100644 src/routes/Footer.svelte
 rename src/{lib/components/Nav.svelte => routes/Header.svelte} (99%)

diff --git a/src/app.d.ts b/src/app.d.ts
index 743f07b2..12271898 100644
--- a/src/app.d.ts
+++ b/src/app.d.ts
@@ -8,6 +8,18 @@ declare global {
 		// interface PageState {}
 		// interface Platform {}
 	}
+
+	// add these lines
+	interface ViewTransition {
+		updateCallbackDone: Promise<void>;
+		ready: Promise<void>;
+		finished: Promise<void>;
+		skipTransition: () => void;
+	}
+
+	interface Document {
+		startViewTransition(updateCallback: () => Promise<void>): ViewTransition;
+	}
 }
 
 export {};
diff --git a/src/app.scss b/src/app.scss
index 21c7681d..1a5aea0c 100644
--- a/src/app.scss
+++ b/src/app.scss
@@ -209,6 +209,7 @@ nav details[role=list] summary, nav li[role=list] a {
   align-self: center;
 }
 
+// TODO: view transition disable for heade
 header nav a, header nav a[role="button"], header nav summary[role="link"] {
   color: #fff;
   font-weight: 600;
@@ -325,3 +326,12 @@ details > summary {
 [data-theme='dark'] .drop-shadow-a {
   filter: drop-shadow(0 4px 3px rgba(255, 255, 255, 0.212)) drop-shadow(0 2px 2px rgba(255, 255, 255, 0.212));
 }
+
+/** ViewTransitions */
+@media (prefers-reduced-motion) {
+	::view-transition-group(*),
+	::view-transition-old(*),
+	::view-transition-new(*) {
+		animation: none !important;
+	}
+}
diff --git a/src/lib/components/Applications.svelte b/src/lib/components/Applications.svelte
index 517295e0..124da1a1 100644
--- a/src/lib/components/Applications.svelte
+++ b/src/lib/components/Applications.svelte
@@ -74,19 +74,3 @@
 		{/each}
 	</div>
 </div>
-
-<style>
-	@keyframes -global-from-bottom {
-		0% {
-			transform: translateY(100vh);
-			opacity: 0;
-		}
-		50% {
-			opacity: 0;
-			transform: translateY(20vh);
-		}
-		100% {
-			opacity: 1;
-		}
-	}
-</style>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index e8e8a19d..29ff7128 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,77 +1,107 @@
 <script lang="ts">
-	import { base } from '$app/paths';
-	import Whitepaper from '$lib/assets/media/DeepSquare_White-Paper-1.pdf';
-	import Yellowpaper from '$lib/assets/media/Yellow-Paper_Tokenize_HPC.pdf';
-	import logo from '$lib/assets/media/deepsquare-logo-h-neg-BIJELI-1.svg';
-	import poweredby from '$lib/assets/media/poweredby.svg';
-	import Nav from '$lib/components/Nav.svelte';
+	import { onNavigate } from '$app/navigation';
+	import { fade } from 'svelte/transition';
 	import '../app.scss';
+	import Footer from './Footer.svelte';
+	import Header from './Header.svelte';
 
 	const year = new Date().getFullYear();
 
-	import { fade } from 'svelte/transition';
+	onNavigate((navigation) => {
+		if (!document.startViewTransition) return;
+
+		return new Promise((resolve) => {
+			document.startViewTransition(async () => {
+				resolve();
+				await navigation.complete;
+			});
+		});
+	});
 </script>
 
-<Nav />
+<Header />
 
 <main in:fade={{ duration: 100, delay: 200 }} out:fade={{ duration: 100 }}>
 	<slot />
 </main>
 
-<footer>
-	<div class="grid md:grid-cols-4 justify-around place-items-center">
-		<div class="md:col-span-2">
-			<div class="box">
-				<div class="py-4">
-					<img src={logo} alt="DeepSquare Logo" />
-				</div>
-				<p>
-					DeepSquare Association, Switzerland, is the founder and holds the initial governance of
-					DeepSquare token. The Association’s purpose is to offer goods and services in the fields
-					of information and communication technologies, software, hardware, and related consulting
-					services.
-				</p>
-				<p>
-					Copyright © {year} – <b>The DeepSquare Association</b> – CHE-130.663.967, Switzerland.
-				</p>
-			</div>
-		</div>
-		<div>
-			<div>
-				<div>
-					<h5 class="py-4 m-0">Resources</h5>
-				</div>
-				<div>
-					<aside>
-						<nav>
-							<ul>
-								<li>
-									<a href={Whitepaper}>Whitepaper</a>
-								</li>
-								<li>
-									<a href={Yellowpaper}>Yellow Paper</a>
-								</li>
-								<li>
-									<a href="https://docs.deepsquare.run/workflow/overview">Documentation</a>
-								</li>
-								<li>
-									<a title="Terms and Conditions" href="{base}/terms-and-conditions"
-										>Terms and Conditions</a
-									>
-								</li>
-								<li>
-									<a title="Privacy Policy" rel="privacy-policy" href="{base}/privacy-policy"
-										>Privacy Policy</a
-									>
-								</li>
-							</ul>
-						</nav>
-					</aside>
-				</div>
-			</div>
-		</div>
-		<div class="py-4">
-			<img src={poweredby} alt="Powered by Avalanche" />
-		</div>
-	</div>
-</footer>
+<Footer />
+
+<style>
+	@keyframes fade-in {
+		from {
+			opacity: 0;
+		}
+	}
+
+	@keyframes fade-out {
+		to {
+			opacity: 0;
+		}
+	}
+
+	@keyframes slide-from-right {
+		from {
+			transform: translateX(30px);
+		}
+	}
+
+	@keyframes slide-to-left {
+		to {
+			transform: translateX(-30px);
+		}
+	}
+
+	@keyframes -global-from-bottom {
+		0% {
+			transform: translateY(100vh);
+			opacity: 0;
+		}
+		50% {
+			opacity: 0;
+			transform: translateY(20vh);
+		}
+		100% {
+			opacity: 1;
+		}
+	}
+
+	@keyframes -global-from-bottom-slow {
+		0% {
+			opacity: 0;
+			transform: translateY(10vh);
+		}
+		50% {
+			opacity: 0;
+		}
+		100% {
+			opacity: 1;
+		}
+	}
+
+	@keyframes -global-from-left-slow {
+		0% {
+			opacity: 0;
+			transform: translateX(-10vw);
+		}
+		50% {
+			opacity: 0;
+		}
+		100% {
+			opacity: 1;
+		}
+	}
+
+	@keyframes -global-from-right-slow {
+		0% {
+			opacity: 0;
+			transform: translateX(10vw);
+		}
+		50% {
+			opacity: 0;
+		}
+		100% {
+			opacity: 1;
+		}
+	}
+</style>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index fa881204..296a7cc4 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -134,17 +134,17 @@
 	<main>
 		<div class="grid lg:grid-cols-3">
 			<div class="lg:col-span-2">
-				<AnimatedInView once={true} animation={`from-bottom 0.5s ease-out both`}>
+				<AnimatedInView once={true} animation={`from-bottom-slow 0.5s ease-out both`}>
 					<h1 class="text-4xl md:text-6xl">Decentralized compute power in one click</h1>
 				</AnimatedInView>
-				<AnimatedInView once={true} animation={`from-bottom 0.5s ease-out 0.5s both`}>
+				<AnimatedInView once={true} animation={`from-bottom-slow 0.5s ease-out 0.5s both`}>
 					<p class="text-xl">
 						The first and only <b>sustainable</b> <b>professional</b> decentralized
 						<b>High Performance Computing</b> Ecosystem.
 					</p>
 				</AnimatedInView>
 
-				<AnimatedInView once={true} animation={`from-bottom 0.5s ease-out 1s both`}>
+				<AnimatedInView once={true} animation={`from-bottom-slow 0.5s ease-out 1s both`}>
 					<a
 						role="button"
 						href="https://docs.deepsquare.run/workflow/overview"
@@ -166,7 +166,7 @@
 <section id="presentation" class="min-h-screen bg-section-a">
 	<header>
 		<center>
-			<AnimatedInView once={true} animation={`from-bottom 1s ease-out both`}>
+			<AnimatedInView once={true} animation={`from-bottom-slow 1s ease-out both`}>
 				<h2>Accelerate Your Projects and Scale on HPC with Ease and Trust</h2>
 			</AnimatedInView>
 		</center>
@@ -174,7 +174,7 @@
 
 	<main>
 		<div class="grid md:grid-cols-3 gap-4 justify-items-center">
-			<AnimatedInView once={true} animation={`from-bottom 1s ease-out both`}>
+			<AnimatedInView once={true} animation={`from-bottom-slow 1s ease-out both`}>
 				<div class="mb-2">
 					<img
 						height="64"
@@ -191,7 +191,7 @@
 					format instead of a busy shell script.
 				</p>
 			</AnimatedInView>
-			<AnimatedInView once={true} animation={`from-bottom 1s ease-out 0.5s both`}>
+			<AnimatedInView once={true} animation={`from-bottom-slow 1s ease-out 0.5s both`}>
 				<div class="mb-2">
 					<img
 						style="max-height: 64px; max-width: 64px;"
@@ -208,7 +208,7 @@
 					scheduling, and hardware accelerators within a decentralized infrastructure.
 				</p>
 			</AnimatedInView>
-			<AnimatedInView once={true} animation={`from-bottom 1s ease-out 1s both`}>
+			<AnimatedInView once={true} animation={`from-bottom-slow 1s ease-out 1s both`}>
 				<div class="mb-2">
 					<img
 						style="max-height: 64px; max-width: 64px;"
@@ -232,17 +232,17 @@
 <section id="applications">
 	<header>
 		<center>
-			<AnimatedInView once={true} animation={`from-bottom 1s ease-out both`}>
+			<AnimatedInView once={true} animation={`from-bottom-slow 1s ease-out both`}>
 				<h2>For AI, Rendering, Simulations...</h2>
 			</AnimatedInView>
-			<AnimatedInView once={true} animation={`from-bottom 1s ease-out both`}>
+			<AnimatedInView once={true} animation={`from-bottom-slow 1s ease-out both`}>
 				<p>
 					DeepSquare supports a wide range of computing needs. From GPU-intensive applications to
 					parallelized workflows, DeepSquare is perfect to speed up your projects. We provide
 					examples that you can test and deploy in one click.
 				</p>
 			</AnimatedInView>
-			<AnimatedInView once={true} animation={`from-bottom 1s ease-out both`}>
+			<AnimatedInView once={true} animation={`from-bottom-slow 1s ease-out both`}>
 				<p>Try them out!</p>
 			</AnimatedInView>
 		</center>
@@ -256,10 +256,10 @@
 <section id="demo" class="bg-section-a">
 	<header>
 		<center>
-			<AnimatedInView once={true} animation={`from-bottom 1s ease-out both`}>
+			<AnimatedInView once={true} animation={`from-bottom-slow 1s ease-out both`}>
 				<h2>Demo</h2>
 			</AnimatedInView>
-			<AnimatedInView once={true} animation={`from-bottom 1s ease-out both`}>
+			<AnimatedInView once={true} animation={`from-bottom-slow 1s ease-out both`}>
 				<p>The live demo of the DeepSquare platform.</p>
 			</AnimatedInView>
 		</center>
@@ -277,7 +277,7 @@
 <section id="partners" class="m-0">
 	<header>
 		<center>
-			<AnimatedInView once={true} animation={`from-bottom 1s ease-out both`}>
+			<AnimatedInView once={true} animation={`from-bottom-slow 1s ease-out both`}>
 				<h2>Partners</h2>
 			</AnimatedInView>
 		</center>
@@ -285,12 +285,15 @@
 	<main>
 		<center>
 			<section id="builders">
-				<AnimatedInView once={true} animation={`from-bottom 1s ease-out both`}>
+				<AnimatedInView once={true} animation={`from-bottom-slow 1s ease-out both`}>
 					<h3>Builders</h3>
 				</AnimatedInView>
 				<div class="grid sm:grid-cols-2 md:grid-cols-3 justify-items-center">
 					{#each builders as builder, index}
-						<AnimatedInView once={true} animation={`from-bottom 1s ease-out ${index / 2}s both`}>
+						<AnimatedInView
+							once={true}
+							animation={`from-bottom-slow 1s ease-out ${index / 2}s both`}
+						>
 							<main>
 								<div
 									style="max-width: 256px; min-height: 172px; max-height: 100px;"
@@ -314,12 +317,15 @@
 				</div>
 			</section>
 			<section id="incubators-accelerators">
-				<AnimatedInView once={true} animation={`from-bottom 1s ease-out both`}>
+				<AnimatedInView once={true} animation={`from-bottom-slow 1s ease-out both`}>
 					<h3>Incubators &amp; Accelerators</h3>
 				</AnimatedInView>
 				<div class="grid sm:grid-cols-2 md:grid-cols-4 justify-items-center content-stretch">
 					{#each incubatorsAndAccelerators as incubator, index}
-						<AnimatedInView once={true} animation={`from-bottom 1s ease-out ${index / 2}s both`}>
+						<AnimatedInView
+							once={true}
+							animation={`from-bottom-slow 1s ease-out ${index / 2}s both`}
+						>
 							<main>
 								<div
 									style="max-width: 256px; min-height: 172px; max-height: 100px;"
@@ -337,12 +343,15 @@
 				</div>
 			</section>
 			<section id="technology-partners">
-				<AnimatedInView once={true} animation={`from-bottom 1s ease-out both`}>
+				<AnimatedInView once={true} animation={`from-bottom-slow 1s ease-out both`}>
 					<h3>Technology Partners</h3>
 				</AnimatedInView>
 				<div class="grid justify-items-center content-stretch">
 					{#each technologyPartners as partner, index}
-						<AnimatedInView once={true} animation={`from-bottom 1s ease-out ${index / 2}s both`}>
+						<AnimatedInView
+							once={true}
+							animation={`from-bottom-slow 1s ease-out ${index / 2}s both`}
+						>
 							<main>
 								<div
 									style="max-width: 256px; min-height: 172px; max-height: 100px;"
@@ -360,12 +369,15 @@
 				</div>
 			</section>
 			<section id="organisations-associations">
-				<AnimatedInView once={true} animation={`from-bottom 1s ease-out both`}>
+				<AnimatedInView once={true} animation={`from-bottom-slow 1s ease-out both`}>
 					<h3>Organizations and Associations</h3>
 				</AnimatedInView>
 				<div class="grid sm:grid-cols-2 md:grid-cols-4 justify-items-center content-stretch">
 					{#each organizationsAndAssociations as organizationOrAssociation, index}
-						<AnimatedInView once={true} animation={`from-bottom 1s ease-out ${index / 2}s both`}>
+						<AnimatedInView
+							once={true}
+							animation={`from-bottom-slow 1s ease-out ${index / 2}s both`}
+						>
 							<main>
 								<div
 									style="max-width: 256px; min-height: 172px; max-height: 100px;"
@@ -398,17 +410,4 @@
 	section h2 {
 		font-size: 2.5rem;
 	}
-
-	@keyframes -global-from-bottom {
-		0% {
-			opacity: 0;
-			transform: translateY(10vh);
-		}
-		50% {
-			opacity: 0;
-		}
-		100% {
-			opacity: 1;
-		}
-	}
 </style>
diff --git a/src/routes/Footer.svelte b/src/routes/Footer.svelte
new file mode 100644
index 00000000..f2cee943
--- /dev/null
+++ b/src/routes/Footer.svelte
@@ -0,0 +1,67 @@
+<script lang="ts">
+	import { base } from '$app/paths';
+	import Whitepaper from '$lib/assets/media/DeepSquare_White-Paper-1.pdf';
+	import Yellowpaper from '$lib/assets/media/Yellow-Paper_Tokenize_HPC.pdf';
+	import logo from '$lib/assets/media/deepsquare-logo-h-neg-BIJELI-1.svg';
+	import poweredby from '$lib/assets/media/poweredby.svg';
+
+	const year = new Date().getFullYear();
+</script>
+
+<footer>
+	<div class="grid md:grid-cols-4 justify-around place-items-center">
+		<div class="md:col-span-2">
+			<div class="box">
+				<div class="py-4">
+					<img src={logo} alt="DeepSquare Logo" />
+				</div>
+				<p>
+					DeepSquare Association, Switzerland, is the founder and holds the initial governance of
+					DeepSquare token. The Association’s purpose is to offer goods and services in the fields
+					of information and communication technologies, software, hardware, and related consulting
+					services.
+				</p>
+				<p>
+					Copyright © {year} – <b>The DeepSquare Association</b> – CHE-130.663.967, Switzerland.
+				</p>
+			</div>
+		</div>
+		<div>
+			<div>
+				<div>
+					<h5 class="py-4 m-0">Resources</h5>
+				</div>
+				<div>
+					<aside>
+						<nav>
+							<ul>
+								<li>
+									<a href={Whitepaper}>Whitepaper</a>
+								</li>
+								<li>
+									<a href={Yellowpaper}>Yellow Paper</a>
+								</li>
+								<li>
+									<a href="https://docs.deepsquare.run/workflow/overview">Documentation</a>
+								</li>
+								<li>
+									<a title="Terms and Conditions" href="{base}/terms-and-conditions"
+										>Terms and Conditions</a
+									>
+								</li>
+								<li>
+									<a title="Privacy Policy" rel="privacy-policy" href="{base}/privacy-policy"
+										>Privacy Policy</a
+									>
+								</li>
+							</ul>
+						</nav>
+					</aside>
+				</div>
+			</div>
+		</div>
+		<div class="py-4">
+			<img src={poweredby} alt="Powered by Avalanche" />
+		</div>
+	</div>
+</footer>
diff --git a/src/lib/components/Nav.svelte b/src/routes/Header.svelte
similarity index 99%
rename from src/lib/components/Nav.svelte
rename to src/routes/Header.svelte
index ad381ea7..a594c71c 100644
--- a/src/lib/components/Nav.svelte
+++ b/src/routes/Header.svelte
@@ -243,3 +243,9 @@
 </header>
 
 <svelte:window bind:scrollY />
+
+<style>
+	header {
+		z-index: 50;
+	}
+</style>
diff --git a/src/routes/solutions/+page.svelte b/src/routes/solutions/+page.svelte
index fc12b9ca..088e277c 100644
--- a/src/routes/solutions/+page.svelte
+++ b/src/routes/solutions/+page.svelte
@@ -371,57 +371,4 @@
 		padding-right: var(--block-spacing-horizontal);
 		margin-bottom: 0;
 	}
-
-	@keyframes -global-from-bottom {
-		0% {
-			transform: translateY(100vh);
-			opacity: 0;
-		}
-		50% {
-			opacity: 0;
-			transform: translateY(20vh);
-		}
-		100% {
-			opacity: 1;
-		}
-	}
-
-	@keyframes -global-from-bottom-slow {
-		0% {
-			opacity: 0;
-			transform: translateY(10vh);
-		}
-		50% {
-			opacity: 0;
-		}
-		100% {
-			opacity: 1;
-		}
-	}
-
-	@keyframes -global-from-left-slow {
-		0% {
-			opacity: 0;
-			transform: translateX(-10vw);
-		}
-		50% {
-			opacity: 0;
-		}
-		100% {
-			opacity: 1;
-		}
-	}
-
-	@keyframes -global-from-right-slow {
-		0% {
-			opacity: 0;
-			transform: translateX(10vw);
-		}
-		50% {
-			opacity: 0;
-		}
-		100% {
-			opacity: 1;
-		}
-	}
 </style>