feat(web): migrate landing page

apps/web/src/app.postcss

@@ -16,3 +16,16 @@ body,
 	height: 100%;
 	width: 100%;
 }
+
+input,
+select {
+	background: inherit;
+	color: inherit;
+	border: inherit;
+	outline: inherit;
+	appearance: none;
+}
+
+img[alt] {
+	text-indent: -9999px;
+}

apps/web/src/lib/components/IntersectionObserver.svelte

@@ -0,0 +1,51 @@
+<script lang='ts'>
+	import { onMount } from 'svelte';
+
+	export let once = false;
+	export let top = 0;
+	export let bottom = 0;
+	export let left = 0;
+	export let right = 0;
+
+	let intersecting = false;
+	let container: any;
+
+	onMount(() => {
+		if (typeof IntersectionObserver !== 'undefined') {
+			const rootMargin = `${bottom}px ${left}px ${top}px ${right}px`;
+
+			const observer = new IntersectionObserver(entries => {
+				intersecting = entries[0].isIntersecting;
+				if (intersecting && once) {
+					observer.unobserve(container);
+				}
+			}, {
+				rootMargin
+			});
+
+			observer.observe(container);
+			return () => observer.unobserve(container);
+		}
+
+		function handler() {
+			const bcr = container.getBoundingClientRect();
+			intersecting = (
+				(bcr.bottom + bottom) > 0 &&
+				(bcr.right + right) > 0 &&
+				(bcr.top - top) < window.innerHeight &&
+				(bcr.left - left) < window.innerWidth
+			);
+
+			if (intersecting && once) {
+				window.removeEventListener('scroll', handler);
+			}
+		}
+
+		window.addEventListener('scroll', handler);
+		return () => window.removeEventListener('scroll', handler);
+	});
+</script>
+
+<div class={$$props.class} bind:this={container}>
+	<slot {intersecting}></slot>
+</div>

apps/web/src/lib/components/PageTransition.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+	import { fly } from 'svelte/transition';
+
+	export let pathname: string = '';
+</script>
+
+{#key pathname}
+	<div class="beatforge-layout__animation-root w-screen h-fit relative" in:fly={{ x: -16, duration: 250, delay: 500 }} out:fly={{ x: 8, duration: 250 }}>
+		<slot />
+	</div>
+{/key}

apps/web/src/lib/components/landing/FeatureSection.svelte

@@ -0,0 +1,3 @@
+<div class="beatforge-landing-std-landing-section px-4 sm:px-8 relative flex flex-col items-center justify-center w-full gap-16 mx-auto text-center py-36 max-w-7xl">
+    <slot />
+</div>

apps/web/src/lib/components/landing/LandingDescription.svelte

@@ -0,0 +1,3 @@
+<div class="beatforge-landing-std-description max-w-[700px] text-[#8B888C] font-medium text-xl leading-[1.5] relative">
+    <slot />
+</div>

apps/web/src/lib/components/landing/LandingHeading.svelte

@@ -0,0 +1,3 @@
+<h1 class="beatforge-landing-std-header beatforge-landing-header-responsive relative max-w-[800px] text-5xl font-extrabold leading-[1.1] tracking-wide">
+    <slot />
+</h1>

apps/web/src/lib/components/landing/LandingVideo.svelte

@@ -0,0 +1,7 @@
+<div class="absolute w-screen h-screen beatforge-landing-video-container">
+    <div class="hidden w-screen h-screen shadow select-none beatforge-landing-video-wrapper -z-50 rounded-3xl sm:block">
+        <video id="player" autoplay muted loop class="object-cover w-screen h-screen -mt-[128px] opacity-20 blur-sm">
+            <source src="/video/mainpage-video.mp4" type="video/mp4"/>
+        </video>
+    </div>
+</div>

apps/web/src/lib/components/layout/Footer.svelte

@@ -0,0 +1,56 @@
+<script>
+	const year = new Date().getFullYear();
+</script>
+
+<div class="beatforge-page-std-footer-container relative w-full overflow-hidden z-[100] flex-shrink-0">
+	<div class="beatforge-footer-rainbow-glow absolute top-[70px] opacity-50">
+		<div
+			class="beatforge-footer-rainbow-glow-item absolute w-screen rounded-[100%] blur-3xl h-[220px] opacity-[0.15]"
+			style="background: linear-gradient(180deg,#58a5ff,#a67af4)"
+		/>
+	</div>
+	<footer class="beatforge-page-std-footer relative mx-auto max-w-7xl py-4 px-4 sm:px-6 lg:px-12">
+		<div class="flex flex-col gap-4 sm:flex-row sm:items-center justify-between py-8 relative">
+			<p class="opacity-40 text-xs mb-2 sm:mb-0">
+				Copyright © {year} BeatForge. GNU Affero General Public License v3.0.
+			</p>
+			<div class="items-center opacity-40 sm:mt-0 text-xs flex gap-8">
+				<a
+					class="ml-auto flex justify-center items-center w-6 h-6 text-[var(--app-fore11)]"
+					href="https://github.com/beat-forge"
+					aria-label="github"
+					target="_blank"
+					rel="noopener"
+					><svg
+						class="w-4 h-4 fill-current"
+						role="img"
+						viewBox="0 0 24 24"
+						xmlns="http://www.w3.org/2000/svg"
+					>
+						<title>GitHub</title>
+						<path
+							d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"
+						/></svg
+					></a
+				><a
+					class="flex justify-center items-center w-6 h-6 text-[var(--app-fore11)]"
+					href="https://discord.gg/HTVrjFENaZ"
+					aria-label="github"
+					target="_blank"
+					rel="noopener"
+					><svg
+						class="w-4 h-4 fill-current"
+						role="img"
+						viewBox="0 0 24 24"
+						xmlns="http://www.w3.org/2000/svg"
+					>
+						<title>Discord</title>
+						<path
+							d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z"
+						/></svg
+					></a
+				>
+			</div>
+		</div>
+	</footer>
+</div>

apps/web/src/lib/components/layout/NavBar.svelte

@@ -0,0 +1,11 @@
+<div class="beatforge-page-navbar flex w-full items-center py-8 px-4 mx-auto max-w-7xl z-[100]">
+	<a href="/" class="flex items-center">
+		<img src="/images/logo.svg" draggable="false" alt="logo" class="h-12 p-3" />
+	</a>
+
+	<div class="ml-auto mr-4 flex flex-row gap-8 items-center">
+		<a href="https://discord.gg/HTVrjFENaZ" class="text-sm font-bold" target="_blank" rel="noopener"
+			>Discord</a
+		>
+	</div>
+</div>

apps/web/src/lib/components/layout/NavBarDisclaimer.svelte

@@ -0,0 +1,5 @@
+<div class="beatforge-page-disclaimer flex w-full items-center py-4 px-4 mx-auto z-[100] bg-[#EC892D]">
+    <div class="flex items-center justify-center w-full">
+        <div class="text-sm font-bold">BeatForge is in development. What you see here does not represent the final product.</div>
+    </div>
+</div>

apps/web/src/routes/+layout.server.ts

@@ -0,0 +1,5 @@
+import type { LayoutServerLoad } from './$types';
+
+export const load: LayoutServerLoad = async ({ url: { pathname } }) => {
+	return { pathname };
+};

apps/web/src/routes/+layout.svelte

@@ -1,9 +1,24 @@
-<script>
+<script lang="ts">
 	import '../app.postcss';
 	import '../fonts.css';
 	import './styles.css';
+
+	import Footer from '$lib/components/layout/Footer.svelte';
+	import NavBar from '$lib/components/layout/NavBar.svelte';
+	import NavBarDisclaimer from '$lib/components/layout/NavBarDisclaimer.svelte';
+	import PageTransition from '$lib/components/PageTransition.svelte';
+
+	import type { LayoutServerData } from './$types';
+	export let data: LayoutServerData;
 </script>
 
-<div class="app">
-	<slot />
-</div>
+<NavBarDisclaimer />
+<main class="beatforge-page-layout relative w-full h-full">
+	<div class="beatforge-page-content-wrapper relative flex flex-col items-center w-full h-full">
+		<NavBar />
+		<PageTransition pathname={data.pathname}>
+			<slot />
+		</PageTransition>
+		<Footer />
+	</div>
+</main>