updates

src/lib/components/Breadcrumb.svelte

@@ -0,0 +1,66 @@
+<script>
+	import { Home, Popcorn } from 'lucide-svelte';
+
+	export let title;
+</script>
+
+<ol class="container ml-8 flex w-fit whitespace-nowrap" aria-label="Breadcrumb">
+	<li class="inline-flex items-center">
+		<a
+			class="flex items-center text-sm text-gray-500 hover:text-blue-600 focus:text-blue-600 focus:outline-none dark:focus:text-blue-500"
+			href="/"
+		>
+			<Home size={16} strokeWidth={2} class="mr-2" />
+
+			Home
+		</a>
+		<svg
+			class="mx-2 h-4 w-4 flex-shrink-0 overflow-visible text-gray-400 dark:text-neutral-600 dark:text-neutral-600"
+			xmlns="http://www.w3.org/2000/svg"
+			width="24"
+			height="24"
+			viewBox="0 0 24 24"
+			fill="none"
+			stroke="currentColor"
+			stroke-width="2"
+			stroke-linecap="round"
+			stroke-linejoin="round"><path d="m9 18 6-6-6-6" /></svg
+		>
+	</li>
+	<li class="inline-flex items-center">
+		<a
+			class="flex items-center text-sm text-gray-500 hover:text-blue-600 focus:text-blue-600 focus:outline-none dark:focus:text-blue-500"
+			href="/movies"
+		>
+			<Popcorn size={16} strokeWidth={2} class="mr-2" />
+			Movies
+			<svg
+				class="mx-2 h-4 w-4 flex-shrink-0 overflow-visible text-gray-400 dark:text-neutral-600 dark:text-neutral-600"
+				xmlns="http://www.w3.org/2000/svg"
+				width="24"
+				height="24"
+				viewBox="0 0 24 24"
+				fill="none"
+				stroke="currentColor"
+				stroke-width="2"
+				stroke-linecap="round"
+				stroke-linejoin="round"><path d="m9 18 6-6-6-6" /></svg
+			>
+		</a>
+	</li>
+	<li
+		class="inline-flex items-center truncate text-sm font-semibold text-gray-800 dark:text-gray-200"
+		aria-current="page"
+	>
+		{title}
+	</li>
+</ol>
+
+<style>
+	.container {
+		background: rgb(255 255 255 / 25%);
+		border-radius: 10px;
+		border: 1px solid rgba(255, 255, 255, 0.18);
+		padding: 1rem;
+	}
+</style>

src/lib/components/Card.svelte

@@ -9,7 +9,7 @@
 	style="background: rgb(255 255 255 / 25%);
 	border-radius: 10px;
 	border: 1px solid rgba(255, 255, 255, 0.18);"
-	class="card sm:w-2/2 w-full p-0 md:w-1/3 lg:w-1/3 xl:w-3/12"
+	class="card sm:w-2/2 flex w-full flex-col p-0 md:w-1/3 lg:w-1/3 xl:w-3/12"
 >
 	<img
 		src={`https://image.tmdb.org/t/p/original/${poster_path}`}
@@ -27,9 +27,10 @@
 		</div>
 	</Card.Header>
 	<!-- <Card.Content class="px-4 ">
-		<Card.Description>{desc}</Card.Description>
+	  <Card.Description>{desc}</Card.Description>
 	</Card.Content> -->
-	<Card.Footer class="flex justify-evenly px-4 font-bold text-gray-800">
+	<div class="flex-grow"></div>
+	<Card.Footer class=" flex justify-evenly px-4 font-bold text-gray-800">
 		<a href="/movies/{id}">View</a>
 		<Separator orientation="vertical" class="h-4" />
 		<a href="/home">Watch</a>

src/lib/components/Footer.svelte

@@ -1,6 +1,36 @@
-<footer class=" flex w-8/12 justify-center bg-slate-500 p-1 px-6 align-middle text-zinc-200">
-	<h1>Footer</h1>
-</footer>
+<script>
+	import { FacebookIcon, InstagramIcon, MountainIcon, TwitterIcon } from 'lucide-svelte';
+</script>
 
-<style>
-</style>
+<footer class="w-8/12 rounded-t-sm bg-gray-800 py-2">
+	<div class="container px-4 md:px-6">
+		<div
+			class="flex flex-col items-center justify-between space-y-4 sm:flex-row sm:space-x-8 sm:space-y-0"
+		>
+			<div class="flex items-center space-x-2">
+				<img src="/logo-white.svg" alt="" class="w-20" />
+			</div>
+			<nav class="gap-6 sm:flex">
+				<a class="text-xs font-medium text-gray-300 hover:text-white" href="#"> Home </a>
+				<a class="text-xs font-medium text-gray-300 hover:text-white" href="#"> Movies </a>
+				<a class="text-xs font-medium text-gray-300 hover:text-white" href="#"> TV Shows </a>
+				<a class="text-xs font-medium text-gray-300 hover:text-white" href="#"> About </a>
+				<a class="text-xs font-medium text-gray-300 hover:text-white" href="#"> Contact </a>
+			</nav>
+			<div class="flex space-x-4">
+				<a href="#">
+					<FacebookIcon size={22} strokeWidth={1} class="text-white" />
+				</a>
+				<a href="#">
+					<TwitterIcon size={22} strokeWidth={1} class=" text-white" />
+				</a>
+				<a href="#">
+					<InstagramIcon size={22} strokeWidth={1} class=" text-white" />
+				</a>
+			</div>
+		</div>
+		<p class="mt-1 select-none text-center text-[10px] text-gray-500">
+			© 2024 WATCH Website. All rights reserved.
+		</p>
+	</div>
+</footer>

src/lib/components/MovieCard.svelte

@@ -4,13 +4,13 @@
 	export let poster_path, title, overview, release_date, genre, name, runtime;
 </script>
 
-<main class="container mx-auto my-8 grid h-full grid-cols-1 gap-2 md:grid-cols-1 lg:grid-cols-3">
+<main class="container mx-auto my-8 grid grid-cols-1 gap-2 md:grid-cols-1 lg:grid-cols-3">
 	<!-- Movie Poster -->
 	<div class="md:col-span-1 lg:col-span-1">
 		<img
 			src="https://image.tmdb.org/t/p/original/{poster_path}"
 			alt="Movie Poster"
-			class="h-full w-full rounded-md object-cover shadow-lg"
+			class="h-full w-full rounded-md bg-auto bg-center bg-no-repeat object-cover shadow-lg"
 		/>
 	</div>
 

src/routes/+layout.svelte

@@ -7,7 +7,7 @@
 
 <Header />
 
-<main class="align my-8 flex w-8/12 rounded-sm px-6 py-8 align-middle">
+<main class="align flex w-8/12 rounded-sm px-6 py-8 align-middle">
 	<slot />
 </main>
 

src/routes/movies/[movieId=integer]/+page.svelte

@@ -1,5 +1,6 @@
 <script>
 	import { page } from '$app/stores';
+	import Breadcrumb from '$lib/components/Breadcrumb.svelte';
 	import MovieCard from '$lib/components/MovieCard.svelte';
 	const movieId = $page.params.movieId;
 
@@ -9,12 +10,16 @@
 	console.log(data.movie);
 </script>
 
-<MovieCard
-	{poster_path}
-	{title}
-	{overview}
-	{release_date}
-	genre={genres[0].name}
-	name={production_companies[0].name}
-	{runtime}
-/>
+<main class="column flex-col">
+	<Breadcrumb {title} />
+
+	<MovieCard
+		{poster_path}
+		{title}
+		{overview}
+		{release_date}
+		genre={genres[0].name}
+		name={production_companies[0].name}
+		{runtime}
+	/>
+</main>