feat: get image from tmdb

components/Card.tsx

@@ -9,6 +9,7 @@ export function Card(
       style={{
         backgroundImage: `url(${image})`,
         backgroundSize: "cover",
+        //background: "#2B2930",
       }}
       class="text-white rounded-3xl shadow-md p-4 relative overflow-hidden 
   lg:w-56 lg:h-56 
@@ -23,7 +24,10 @@ export function Card(
           {title}
         </div>
       </div>
-      <div class="absolute inset-x-0 bottom-0 h-3/4 bg-gradient-to-t from-black to-transparent" />
+      <div
+        class="absolute inset-x-0 bottom-0 h-3/4"
+        style={{ background: "linear-gradient(transparent, #000e)" }}
+      />
     </a>
   );
 }

components/RecipeHero.tsx

@@ -3,8 +3,9 @@ import { Recipe } from "@lib/recipes.ts";
 import IconExternalLink from "https://deno.land/x/tabler_icons_tsx@0.0.3/tsx/external-link.tsx";
 import { Star } from "@components/Stars.tsx";
 export function RecipeHero(
-  { data, backlink }: {
+  { data, subline, backlink }: {
     backlink: string;
+    subline?: string[];
     data: { meta?: { image?: string; link?: string }; name: string };
   },
 ) {
@@ -53,19 +54,32 @@ export function RecipeHero(
           </div>
         )}
 
-      <div
-        class={`absolute inset-x-0 bottom-0 py-4 px-8 py-8 ${
-          imageUrl ? "noisy-gradient" : ""
-        } flex gap-4 items-center pt-12`}
-      >
-        <h2
-          class="relative text-4xl font-bold z-10"
-          style={{ color: imageUrl ? "#1F1F1F" : "white" }}
+      <div class="absolute inset-x-0 bottom-0 py-4 px-8 py-8 ">
+        <div
+          class={`${
+            imageUrl ? "noisy-gradient" : ""
+          } flex gap-4 items-center pt-12`}
         >
-          {data.name}
-        </h2>
+          <h2
+            class="relative text-4xl font-bold z-10"
+            style={{ color: imageUrl ? "#1F1F1F" : "white" }}
+          >
+            {data.name}
+          </h2>
 
-        {data.meta?.rating && <Star rating={data.meta.rating} />}
+          {data.meta?.rating && <Star rating={data.meta.rating} />}
+        </div>
+        {subline?.length &&
+          (
+            <div
+              class="relative z-50 flex gap-5 font-sm text-light mt-3"
+              style={{ color: imageUrl ? "#1F1F1F" : "white" }}
+            >
+              {subline.map((s) => {
+                return <span>{s}</span>;
+              })}
+            </div>
+          )}
       </div>
     </div>
   );

components/layouts/main.tsx

@@ -25,9 +25,12 @@ export const MainLayout = ({ children, url }: Props) => {
   ];
 
   return (
-    <div class="md:grid" style={{ gridTemplateColumns: "200px 1fr" }}>
+    <div
+      class="md:grid mx-auto"
+      style={{ gridTemplateColumns: "200px 1fr", maxWidth: "1024px" }}
+    >
       <aside class="p-4 hidden md:block">
-        <nav class="min-h-fit rounded-3xl p-3 grid gap-3">
+        <nav class="min-h-fit rounded-3xl p-3 grid gap-3 fixed t-0">
           {menu.map((m) => {
             return (
               <a