From 87ce20ff562d21753413ee4417167e316d5c4aa4 Mon Sep 17 00:00:00 2001
From: Ushie <ushiekane@gmail.com>
Date: Tue, 4 Feb 2025 02:49:32 +0300
Subject: [PATCH] feat: Add the footer to the homepage (#273)

---
 src/layout/Footer/FooterHost.svelte | 36 ++++++++++++----------
 src/layout/Hero/HeroImage.svelte    |  2 +-
 src/lib/components/Wave.svelte      |  2 +-
 src/routes/+page.svelte             | 47 +++++++++++++++++++++++++----
 4 files changed, 63 insertions(+), 24 deletions(-)

diff --git a/src/layout/Footer/FooterHost.svelte b/src/layout/Footer/FooterHost.svelte
index 1702f55..94a5d41 100644
--- a/src/layout/Footer/FooterHost.svelte
+++ b/src/layout/Footer/FooterHost.svelte
@@ -11,6 +11,8 @@
 	import { RV_DMCA_GUID } from '$env/static/public';
 	import { onMount } from 'svelte';
 
+	export let showDivider = true;
+
 	const aboutQuery = createQuery(['about'], queries.about);
 
 	let location: string;
@@ -22,22 +24,24 @@
 </script>
 
 <!-- squiggly divider line -->
-<svg
-	aria-hidden="true"
-	width="100%"
-	height="8"
-	fill="none"
-	xmlns="http://www.w3.org/2000/svg"
-	in:fly={{ y: 10, easing: quintOut, duration: 750 }}
->
-	<pattern id="a" width="91" height="8" patternUnits="userSpaceOnUse">
-		<path
-			d="M114 4c-5.067 4.667-10.133 4.667-15.2 0S88.667-.667 83.6 4 73.467 8.667 68.4 4 58.267-.667 53.2 4 43.067 8.667 38 4 27.867-.667 22.8 4 12.667 8.667 7.6 4-2.533-.667-7.6 4s-10.133 4.667-15.2 0S-32.933-.667-38 4s-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0"
-			stroke-linecap="square"
-		/>
-	</pattern>
-	<rect width="100%" height="100%" fill="url(#a)" />
-</svg>
+{#if showDivider}
+	<svg
+		aria-hidden="true"
+		width="100%"
+		height="8"
+		fill="none"
+		xmlns="http://www.w3.org/2000/svg"
+		in:fly={{ y: 10, easing: quintOut, duration: 750 }}
+	>
+		<pattern id="a" width="91" height="8" patternUnits="userSpaceOnUse">
+			<path
+				d="M114 4c-5.067 4.667-10.133 4.667-15.2 0S88.667-.667 83.6 4 73.467 8.667 68.4 4 58.267-.667 53.2 4 43.067 8.667 38 4 27.867-.667 22.8 4 12.667 8.667 7.6 4-2.533-.667-7.6 4s-10.133 4.667-15.2 0S-32.933-.667-38 4s-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0"
+				stroke-linecap="square"
+			/>
+		</pattern>
+		<rect width="100%" height="100%" fill="url(#a)" />
+	</svg>
+{/if}
 <footer in:fly={{ y: 10, easing: quintOut, duration: 750 }}>
 	<div class="footer-top">
 		<section class="main-content">
diff --git a/src/layout/Hero/HeroImage.svelte b/src/layout/Hero/HeroImage.svelte
index 8a98905..3cb4e15 100644
--- a/src/layout/Hero/HeroImage.svelte
+++ b/src/layout/Hero/HeroImage.svelte
@@ -27,7 +27,7 @@
 	}
 	@media (max-width: 1700px) {
 		.hero-img {
-			position: fixed;
+			position: absolute;
 			height: 100vh;
 			top: 115px;
 			right: 6rem;
diff --git a/src/lib/components/Wave.svelte b/src/lib/components/Wave.svelte
index d3031e2..5aa0c04 100644
--- a/src/lib/components/Wave.svelte
+++ b/src/lib/components/Wave.svelte
@@ -4,7 +4,7 @@
 
 <style>
 	svg {
-		position: fixed;
+		position: absolute;
 		z-index: -999;
 		bottom: 0;
 		height: 35vh;
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index fffdc80..8e10d65 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -3,9 +3,17 @@
 	import Home from '$layout/Hero/HeroSection.svelte';
 	import SocialHost from '$layout/Hero/SocialHost.svelte';
 	import Wave from '$lib/components/Wave.svelte';
+	import Footer from '$layout/Footer/FooterHost.svelte';
 	import Head from '$lib/components/Head.svelte';
+
+	let scrollY = 0;
+	let footerVisible = false;
+
+	$: footerVisible = scrollY >= 10;
 </script>
 
+<svelte:window bind:scrollY />
+
 <Head
 	schemas={[
 		{
@@ -117,22 +125,45 @@
 	]}
 />
 
-<main>
+<main style={footerVisible ? '' : `height: 100vh;`} class:hidden={footerVisible}>
 	<div class="wrap">
 		<div class="wrappezoid">
 			<Home />
 			<div id="heroimg"><HeroImage /></div>
 		</div>
 	</div>
-	<SocialHost />
+	<div class="hide-on-scroll" class:hidden={footerVisible}>
+		<Wave />
+		<SocialHost />
+	</div>
 </main>
-<Wave />
+<div class="footer">
+	<Footer showDivider={footerVisible ? true : false} />
+</div>
 
-<style>
+<style lang="scss">
+	.hide-on-scroll {
+		transition: opacity 0.5s var(--bezier-one);
+		z-index: -999;
+
+		&.hidden {
+			height: 0;
+			opacity: 0;
+		}
+	}
 	main {
 		display: flex;
 		flex-direction: column;
 		gap: 1.5rem;
+		margin-bottom: 3rem;
+		transition:
+			gap 0.5s var(--bezier-one),
+			margin-bottom 0.5s var(--bezier-one);
+
+		&.hidden {
+			gap: 0rem;
+			margin-bottom: 0rem;
+		}
 	}
 	.wrap {
 		margin-inline: auto;
@@ -142,11 +173,15 @@
 	.wrappezoid {
 		height: calc(100vh - 225px);
 		display: flex;
-		flex-direction: row;
 		justify-content: center;
-		gap: 22rem;
 		align-items: center;
+		gap: 22rem;
 	}
+
+	.footer {
+		background-color: var(--background-one);
+	}
+
 	@media (max-width: 1700px) {
 		.wrappezoid {
 			justify-content: space-between;