Shop gets fancy image carousel & navigate back arrow

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

@@ -2,7 +2,7 @@ import type { IProductsDTO } from '$lib/interfaces/ApiResponse';
 import type { PageServerLoad } from './$types';
 
 export const load: PageServerLoad = async ({ fetch }) => {
-  const res = await fetch('/api/products');
+  const res = await fetch('/api/v1/products');
   const products: IProductsDTO = await res.json();
 
   return products;

src/routes/shop/+page.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import type { PageData } from './$types';
-  import ProductTile from './ProductTile.svelte';
+  import ProductTile from '$lib/components/ProductTile.svelte';
   import PageMeta from '$lib/components/PageMeta.svelte';
   import type { IProduct } from '$lib/interfaces/IProduct';
 

src/routes/shop/ProductTile.svelte

@@ -1,106 +0,0 @@
-<script lang="ts">
-  import type { IProduct } from '$lib/interfaces/IProduct';
-
-  export let product: IProduct;
-  export let large = false;
-</script>
-
-<a href="/shop/{product?.product_no}" class="product-tile">
-  <div
-    class="product"
-    style="{`background-color: ${product?.primary_color || '#E6E0DC'}; color: ${
-      product?.primary_color === '#231B1D' ? '#f3efeb' : '#37301e'
-    }`}"
-  >
-    {#if !large}
-      <h3>{product?.name}</h3>
-    {/if}
-
-    <div class="{`image-frame ${large ? 'large' : null}`}">
-      <img src="{product?.image}" alt="{product?.name}" />
-    </div>
-
-    {#if !large}
-      <p class="subtext">{product?.subtext}</p>
-    {/if}
-  </div>
-</a>
-
-<style lang="scss" module="scoped">
-  @import '../../styles/media-queries.scss';
-
-  :global(a.product-tile) {
-    text-decoration: none !important;
-    transform: none !important;
-  }
-
-  .product {
-    margin: 1.5rem;
-    padding: 1.5rem;
-    background-color: #e6e0dc;
-    color: #37301e;
-    cursor: pointer;
-    transition: all 0.4s ease;
-
-    &:hover {
-      margin: 1rem;
-      padding: 2rem;
-
-      img {
-        transform: scale(1.02);
-        box-shadow: 3px 3px 13px 3px rgba(0, 0, 0, 0.2);
-      }
-    }
-
-    h3 {
-      margin: 0.5rem 0;
-      font-size: 22px;
-      max-width: 75%;
-      font-weight: normal;
-
-      margin-bottom: auto;
-      letter-spacing: 0.2px;
-    }
-
-    .subtext {
-      text-transform: uppercase;
-      margin: 0.5rem 0;
-      font-size: 0.9rem;
-      max-width: 75%;
-    }
-
-    .image-frame {
-      display: grid;
-      place-items: center;
-
-      &.large img {
-        width: 90%;
-      }
-
-      img {
-        margin: 3rem 0;
-        width: 66%;
-        transition: all 0.6s ease;
-
-        @include mobile {
-          width: 75%;
-        }
-      }
-    }
-
-    // TODO grid view on mobile
-    // @include mobile {
-    //   margin: 0.5rem;
-    //   padding: 0.5rem;
-
-    //   h3 {
-    //     margin: 0;
-    //   }
-
-    //   .image-frame img {
-    //     width: 82%;
-    //     margin: 1rem 0;
-    //   }
-    // }
-  }
-</style>

src/routes/shop/[id]/+page.server.ts

@@ -5,7 +5,7 @@ import type { PageServerLoad } from './$types';
 export const load: PageServerLoad = async ({ fetch, params }) => {
   const { id } = params;
 
-  const res = await fetch(`/api/product/${id}`);
+  const res = await fetch(`/api/v1/product/${id}`);
   const productResponse: IProductDTO = await res.json();
   const jsonld = generateProductJsonLd(productResponse?.product);
 

src/routes/shop/[id]/+page.svelte

@@ -1,10 +1,12 @@
 <script lang="ts">
-  import ProductTile from '../ProductTile.svelte';
+  import ProductTile from '$lib/components/ProductTile.svelte';
   import ProductVariationSelect from '$lib/components/ProductVariationSelect.svelte';
   import QuantitySelect from '$lib/components/QuantitySelect.svelte';
   import SizesSection from './SizesSection.svelte';
   import Button from '$lib/components/Button.svelte';
   import PageMeta from '$lib/components/PageMeta.svelte';
+  import ImageCarousel from '$lib/components/ImageCarousel.svelte';
+  import IconArrow from '$lib/icons/IconArrow.svelte';
   import type { PageData } from './$types';
   import type { IProduct, IVariation } from '$lib/interfaces/IProduct';
 
@@ -42,13 +44,15 @@
 </script>
 
 <PageMeta title="{pageTitle}" description="{product.description}" />
+
+<IconArrow pointLeft="{true}" />
 <div class="product-container">
-  <ProductTile product="{product}" large="{true}" />
+  <ImageCarousel product="{product}" />
 
   <div class="details">
     <h2 class="name">{product.name}</h2>
-    <p class="subtext">{product.subtext}</p>
-    <p class="subtext">{product.description}</p>
+    <p>{product.subtext}</p>
+    <p class="description">{product.description}</p>
     <p class="price">NOK {selectedVariation?.price} (Ink. Moms)</p>
 
     <ProductVariationSelect
@@ -97,6 +101,10 @@
         font-size: 2rem;
       }
 
+      .description {
+        white-space: pre-line;
+      }
+
       .price {
         margin-top: 3rem;
         font-size: 1.5rem;