fxing params errors

src/routes/+page.svelte

@@ -1,16 +1,66 @@
 <script lang="ts">
-    import Carousel from "$lib/components/Carousel.svelte";
-    import Hero from "./Hero.svelte";
-    
-    export let data;
+	import { smoothload } from '$lib/actions.js';
+	import { media } from '$lib/api';
+	import Carousel from '$lib/components/Carousel.svelte';
 
-    console.log(data);
+	export let data;
+
+	$: images = data.featured.images;
+	$: backdrop = images.backdrops.find((image) => !image.iso_639_1) || images.backdrops[0];
+	$: logo = images.logos.find((image) => image.iso_639_1 === 'en');
 </script>
 
-<h1 class="column">Top trending wines</h1>
+<svelte:head>
+	<title>SvelteFlix</title>
+</svelte:head>
+
+<div class="column">
+	<h1>Today's top movies</h1>
+
+	<a href="/movies/{data.featured.id}">
+		<img
+			class="backdrop"
+			alt={data.featured.title}
+			src={media(backdrop.file_path, 1280)}
+			style="aspect-ratio: {backdrop.aspect_ratio}"
+			use:smoothload
+		/>
+
+		{#if logo}
+			<img
+				class="logo"
+				alt={data.featured.title}
+				src={media(logo.file_path, 500)}
+				style="aspect-ratio: {logo.aspect_ratio}"
+				use:smoothload
+			/>
+		{/if}
+	</a>
+</div>
+
+<Carousel title="Trending" href="/movies/trending" movies={data.trending} />
+<Carousel title="Now playing" href="/movies/now_playing" movies={data.now_playing} />
+<Carousel title="Upcoming" href="/movies/upcoming" movies={data.upcoming} />
+
+<style>
+	a {
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+	}
 
-<Hero movie={data.featured} />
+	.backdrop {
+		width: 100%;
+	}
 
-<Carousel movies={data.trending.results} />
-<Carousel movies={data.now_playing.results} />
-<Carousel movies={data.upcoming.results} />
+	.logo {
+		position: absolute;
+		width: 30%;
+		height: 100%;
+		left: 1rem;
+		bottom: 0;
+		object-fit: contain;
+		object-position: 50% 75%;
+		filter: drop-shadow(0 0 3rem black) drop-shadow(0 0 0.5rem black);
+	}
+</style>

src/routes/movies/[view=list]/+page.ts

@@ -1,10 +1,11 @@
-import * as api from "$lib/api";
-import type { MovieList } from "$lib/types.js";
+import * as api from "$lib/api.js";
 import { views } from "$lib/views.js";
+import type { MovieList } from "$lib/types.js";
 
 export async function load({ params, url, fetch }) {
   const view = views[params.view];
-  const page = url.searchParams("page") ?? "1";
+  const page = url.searchParams.get("page") ?? "1";
+
   const data = (await api.get(fetch, view.endpoint, {
     page,
   })) as MovieList;
@@ -14,6 +15,7 @@ export async function load({ params, url, fetch }) {
     title: view.title,
     endpoint: view.endpoint,
     movies: data.results,
-    next_page: data.page < data.total_pages ? data.page + 1 : null,
+    next_page: data.page! < data.total_pages ? data.page + 1 : null,
+    infinite: true,
   };
 }