.

src/routes/+page.js

@@ -1,3 +1,4 @@
 // since there's no dynamic data here, we can prerender
 // it so that it gets served as a static asset in production
-export const prerender = true;
+export const prerender = true
+export const trailingSlash = 'always'

src/routes/FameRicePreview.svelte

@@ -9,6 +9,10 @@
 	export let imageClass = undefined
 	/** @type {string | undefined} */
 	export let containerClass = undefined
+	/** @type {string}
+	 * The path to the image. Usually the file within `static`, but can also be an URL
+	 */
+	export let blurredBackground = undefined
 </script>
 
 <div class="rice {containerClass} group">
@@ -20,7 +24,7 @@
 		/>
 		<div class="rice-blurred">
 			<img
-				src={getBlurredPath(image)}
+				src={blurredBackground ?? getBlurredPath(image)}
 				alt="Rice desktop"
 				aria-hidden="true"
 				class="h-full w-full"

src/routes/FeaturesSlice.svelte

@@ -13,16 +13,15 @@
 	import Hypractive from './Hypractive.svelte'
 	import { getIsMobile } from '$lib/Helper.mjs'
 	import configDefaultImage from '$lib/images/features/config_default.png'
-	import tileDefaultImage from '$lib/images/features/tiling_default.png'
 	import configHoverImage from '$lib/images/features/config_hover.png'
+	import smoothDefaultImage from '$lib/images/features/smooth_default.png'
+	import smoothHoverImage from '$lib/images/features/smooth_hover.png'
+	import tileDefaultImage from '$lib/images/features/tiling_default.png'
 	import tileHoverImage from '$lib/images/features/tiling_hover.png'
 	import SmoothCircle from './SmoothCircle.svelte'
 
 	let isMobile = false
 
-	/** @type {HTMLElement}*/
-	let smoothCircleElement
-
 	const context = setContext(mouseContext, {
 		x: writable(0),
 		y: writable(0),
@@ -69,7 +68,12 @@
 				Instant input.
 			</p>
 
-			<SmoothCircle />
+			<div class="_wrapper absolute inset-0 select-none" aria-hidden>
+				<div class="feature-image">
+					<img src={smoothDefaultImage} class="feature-image_inner" alt="" aria-hidden="true" />
+					<img src={smoothHoverImage} class="feature-image_inner-hover" alt="" aria-hidden="true" />
+				</div>
+			</div>
 		</FeatureCard>
 		<FeatureCard title="Easy to configure" color="purple">
 			<p class="max-w-[60ch]">
@@ -164,7 +168,7 @@
 		}
 		& .feature-image_inner-hover {
 			opacity: 1 !important;
-			filter: saturate(1.5);
+			filter: saturate(1.3);
 		}
 	}
 </style>

src/routes/Hero.svelte

@@ -26,7 +26,7 @@
 	<div
 		class="pointer-events-none z-10 flex h-screen min-h-max flex-col items-center justify-center px-5"
 	>
-		<div class="-mt-20 mb-8 flex flex-col items-center gap-6 text-center">
+		<div class="mb-8 flex flex-col items-center gap-6 text-center sm:-mt-20">
 			<img src={Logo} alt="Hyprland Logo" class="ani-in mb-6 h-40 fill-mode-backwards sm:h-48" />
 			<div class="ani-in relative fill-mode-backwards [animation-delay:384ms]">
 				<h1

src/routes/PreviewRiceSlice.svelte

@@ -101,7 +101,7 @@
 
 <style lang="postcss">
 	section {
-		@apply relative z-10 -mb-4 -mt-8 w-full max-w-[1400px] px-1 animate-in fade-in-0 slide-in-from-bottom-10 fill-mode-backwards [animation-delay:1700ms] [animation-duration:2000ms] lg:px-8;
+		@apply relative z-10 -mb-4 w-full max-w-[1400px] px-1 animate-in fade-in-0 slide-in-from-bottom-10 fill-mode-backwards [animation-delay:1700ms] [animation-duration:2000ms] md:-mt-8 lg:px-8;
 
 		contain: layout style content;
 	}

src/routes/SmoothCircle.svelte

@@ -1,7 +1,4 @@
 <script>
-	import SmoothCircle from '$lib/images/features/smooth_default.png'
-	import SmoothHover from '$lib/images/features/smooth_hover.png'
-
 	const circlesAmount = 10
 	/** In millisseconds */
 	const animationDuration = 8000
@@ -28,10 +25,6 @@
 </script>
 
 <div class="wrapper">
-	<div class="yin">
-		<img src={SmoothCircle} alt="Ying yang smooth icon" />
-		<img src={SmoothHover} alt="Ying yang smooth icon" class="yin-hover" />
-	</div>
 	{#each circles as _, index}
 		<div
 			class="circle"
@@ -76,31 +69,6 @@
 		animation: loop infinite backwards;
 	}
 
-	.yin {
-		z-index: 100;
-		position: absolute;
-		left: -25%;
-		top: -25%;
-		/* mix-blend-mode: color-burn; */
-		opacity: 0.7;
-		height: 150%;
-		width: 150%;
-
-		/* aspect-ratio: 1; */
-		& img {
-			width: 100%;
-			height: 100%;
-		}
-	}
-
-	.yin-hover {
-		display: none;
-
-		.wrapper:hover & {
-			display: flex;
-		}
-	}
-
 	@keyframes loop {
 		from {
 			scale: 0;