made the cards not look dumb.

also you can literally just make up html tags. I think I knew this now i
used it

src/routes/pork/+page.server.ts

@@ -10,6 +10,7 @@ const PRICE_PER_LB = 6
 const pork = [
   {
     name: "pork links",
+    src: "/src/lib/assests/pork-links.jpg",
     cured: false,
     tubed: true,
     lb_package: true,
@@ -20,6 +21,7 @@ const pork = [
   },
   {
     name: "bacon",
+    src: "/src/lib/assests/pork-links.jpg",
     cured: true,
     tubed: false,
     lb_package: true,
@@ -33,6 +35,7 @@ const pork = [
   },
   {
     name: "bratwurst",
+    src: "/src/lib/assests/pork-links.jpg",
     cured: false,
     tubed: true,
     lb_package: true,
@@ -49,6 +52,7 @@ const pork = [
   },
   {
     name: "rings",
+    src: "/src/lib/assests/pork-links.jpg",
     cured: false,
     tubed: true,
     lb_package: true,
@@ -59,6 +63,7 @@ const pork = [
   },
   {
     name: "patties",
+    src: "/src/lib/assests/pork-links.jpg",
     cured: false,
     tubed: false,
     lb_package: true,
@@ -70,6 +75,7 @@ const pork = [
   },
   {
     name: "ham",
+    src: "/src/lib/assests/pork-links.jpg",
     cured: true,
     tubed: false,
     lb_package: false,
@@ -77,54 +83,63 @@ const pork = [
   },
   {
     name: "raw ham",
+    src: "/src/lib/assests/pork-links.jpg",
     cured: false,
     tubed: false,
     avg_weight: { min: 7, max: 15 }
   },
   {
     name: "loin roast",
+    src: "/src/lib/assests/pork-links.jpg",
     cured: false,
     tubed: false,
     avg_weight: { min: 3, max: 4 }
   },
   {
     name: "chop",
+    src: "/src/lib/assests/pork-links.jpg",
     cured: false,
     tubed: false,
     avg_weight: { min: 0.75, max: 1.5 }
   },
   {
     name: "steak",
+    src: "/src/lib/assests/pork-links.jpg",
     cured: false,
     tubed: false,
     avg_weight: { min: 1.5, max: 3 }
   },
   {
     name: "belly",
+    src: "/src/lib/assests/pork-links.jpg",
     cured: false,
     tubed: false,
     avg_weight: { min: 7, max: 10 }
   },
   {
     name: "spare ribs",
+    src: "/src/lib/assests/pork-links.jpg",
     cured: false,
     tubed: false,
     avg_weight: { min: 2, max: 4 }
   },
   {
     name: "butt",
+    src: "/src/lib/assests/pork-links.jpg",
     cured: false,
     tubed: false,
     avg_weight: { min: 3, max: 5 }
   },
   {
     name: "smoked hocks",
+    src: "/src/lib/assests/pork-links.jpg",
     cured: true,
     tubed: false,
     avg_weight: { min: 1, max: 2 }
   },
   {
     name: "roast",
+    src: "/src/lib/assests/pork-links.jpg",
     cured: false,
     tubed: false,
     avg_weight: { min: 4, max: 7 }

src/routes/pork/+page.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-  import type { MouseEventHandler } from "svelte/elements";
+  import { onMount } from "svelte";
+
   let { data } = $props<{ data: { pork: Pork[]; PRICE_PER_LB: number } }>();
   interface Pork {
     pork: {
@@ -15,14 +16,13 @@
     };
   }
 
-  let selected = $state("Chop");
-
-  const change_photo: MouseEventHandler<HTMLLIElement> = ({
-    currentTarget: { id },
-  }) => {
-    // console.log(id);
-    // selected = id;
-  };
+  onMount(async () => {
+    const images = import.meta.glob("$lib/assests/*.jpg", {
+      eager: true,
+      query: { enhanced: true },
+    });
+    console.log(images);
+  });
 </script>
 
 <svelte:head>
@@ -38,22 +38,30 @@
   <h5>this ain't your grocery store's pork</h5>
   <h5>All priced at {data.PRICE_PER_LB}$/#</h5>
   <div id="pork">
-    {#each data.pork as { name, cured, tubed, lb_package, flavors, avg_weight }}
-      <div onmouseenter={change_photo} id={name}>
+    {#each data.pork as { name, src, cured, tubed, lb_package, flavors, avg_weight }}
+      <card id={name}>
         <h3>{name}</h3>
-        {#if lb_package}
-          <p>1 lb</p>
-        {:else}
-          <p>{avg_weight.min}~ {avg_weight.max} lbs</p>
-        {/if}
-        {#if cured}
-          <span>Cured!</span>
-        {/if}
-        {#if tubed}
-          <span>Tubed!</span>
-        {/if}
+        <img {src} alt="A photo of {name}" />
+        <div>
+          {#if cured}
+            <span>Cured!</span>
+          {/if}
+          {#if tubed}
+            <span>Tubed!</span>
+          {/if}
+          <p>
+            Weight:
+            {#if lb_package}
+              1 lb
+            {:else}
+              {avg_weight.min}~ {avg_weight.max} lbs
+            {/if}
+          </p>
+        </div>
+
         {#if flavors != undefined}
           <ul>
+            <li>Flavors:</li>
             {#each flavors as flavor}
               <li>
                 {flavor}
@@ -61,7 +69,7 @@
             {/each}
           </ul>
         {/if}
-      </div>
+      </card>
     {/each}
     <!-- <img -->
     <!--   src={`/pork/${selected.replace(" ", "_")}.jpg`} -->
@@ -104,18 +112,42 @@
     font-size: 1rem;
     gap: 1rem;
     width: 100%;
-    div {
+    card {
       background: var(--primary-9);
       border-radius: var(--br);
       padding: 1rem;
       display: flex;
       flex-direction: column;
-    }
-    h3 {
-      text-transform: capitalize;
+      gap: 1rem;
+      position: relative;
+      img {
+        width: 100%;
+        border-radius: var(--br);
+      }
+      div {
+        display: flex;
+        justify-content: space-around;
+        font-size: 0.75rem;
+      }
+      span {
+        // font-size: 0.75rem;
+        background: var(--primary-5);
+        width: fit-content;
+        border-radius: var(--br);
+        padding: 0.125rem 0.325rem;
+      }
+      h3 {
+        position: absolute;
+        background: var(--primary-9);
+        border-radius: 0 0 var(--br) 0;
+        padding: 0.125rem 0.325rem;
+        top: 1rem;
+        text-transform: capitalize;
+      }
     }
 
     ul {
+      font-size: 0.85rem;
       width: 100%;
       display: inherit;
       flex-direction: column;
@@ -124,6 +156,7 @@
         display: inherit;
         gap: 1rem;
         padding-left: 1rem;
+        text-transform: capitalize;
         &:nth-child(even) {
           background: var(--primary-8);
         }
@@ -140,7 +173,7 @@
       flex-wrap: wrap;
       align-items: center;
       justify-content: space-around;
-      div {
+      card {
         flex-basis: 20rem;
         // align-items: center;
         justify-content: center;