Testing product gallery frontpage component, WIP

src/lib/components/FrontProductGallery.svelte

@@ -0,0 +1,65 @@
+<script lang="ts">
+  import ProductTile from './ProductTile.svelte';
+  import Button from './Button.svelte';
+  import type { IProduct } from '$lib/interfaces/IProduct';
+  import LinkArrow from './LinkArrow.svelte';
+
+  export let products: IProduct[];
+  export let title: string;
+  export let textColor: string = 'black';
+  export let backgroundColor: string = 'white';
+
+  let galleryStyles = `background-color: ${backgroundColor}; color: ${textColor}`;
+</script>
+
+<div class="product-gallery" style="{galleryStyles}">
+  <h1>{title}</h1>
+
+  {#each products as product}
+    <ProductTile product="{product}" />
+  {/each}
+
+  <footer>
+    <a href="/shop" class="link">Utforsk webshopen<LinkArrow /></a>
+  </footer>
+</div>
+
+<style lang="scss">
+  @import '../../styles/media-queries.scss';
+
+  h1 {
+    font-size: 3rem;
+    padding: 3rem;
+    padding-right: 1rem;
+  }
+
+  .product-gallery {
+    display: grid;
+    grid-template-columns: 1fr;
+    width: calc(100% - 2rem);
+    padding: 3rem 1rem;
+    margin: 4rem auto;
+    box-shadow: 0px -1px 30px 2px rgba(181, 196, 174) inset;
+    -webkit-box-shadow: 0px -1px 30px 2px rgba(181, 196, 174) inset;
+    -moz-box-shadow: 0px -1px 30px 2px rgba(181, 196, 174) inset;
+
+    footer {
+      grid-column: 1/-1;
+      justify-content: center;
+      display: flex;
+      font-size: 2rem;
+    }
+
+    @include mobile {
+      grid-template-columns: 1fr 1fr;
+    }
+
+    @include tablet {
+      grid-template-columns: 1fr 1fr;
+    }
+
+    @include desktop {
+      grid-template-columns: 1fr 1fr 1fr 1fr;
+    }
+  }
+</style>

src/routes/+page.svelte

@@ -3,7 +3,7 @@
   import FrontText from '$lib/components/FrontText.svelte';
   import FrontTextImage from '$lib/components/FrontTextImage.svelte';
   import FrontTextImageBubble from '$lib/components/FrontTextImageBubble.svelte';
-  import FrontProductGallery from '$lib/components/FrontProductGallery.svelte';
+  // import FrontProductGallery from '$lib/components/FrontProductGallery.svelte';
   import type IFrontTextImage from '$lib/interfaces/IFrontTextImage';
   import type { IProduct } from '$lib/interfaces/IProduct';
   import type IFrontText from '$lib/interfaces/IFrontText';
@@ -51,15 +51,53 @@
       color: 'orange'
     }
   ];
+
+  // const galleryProducts: IProduct[] = [
+  //   {
+  //     description:
+  //       " - 44'' Fabric by the Yard\n - 100% Cottton\n - Fabric Care: Machine Wash Normal, No Bleach, Tumble Dry Low\n - Printed in the USA from Imported Material.",
+  //     image:
+  //       'https://storage.googleapis.com/planetposen-images/2c47ed96b5e061d85f688849b998aa5e76c55c2a.jpg',
+  //     name: 'Oversized Blue And Yellow Swirls',
+  //     primary_color: '#E6E0DC',
+  //     product_no: 11,
+  //     subtext: ''
+  //   },
+  //   {
+  //     description:
+  //       "The power of cotton is an almighty force for kids attire. Our cotton spandex interlock is a thicker fabric that's durable and naturally comfortable. Plus with breathability and slight stretch, children's tops and dresses are free-moving during play time. Choose from various designs like this dinosaur patch pattern, and you have a loving sewing project for awesome practicality and personality.\n\n - Width: 57 Inches\n - Content: 98% Cotton 2% Spandex\n - Care: Machine wash gentle cold, nonchlorine bleach, line dry, cool iron.\n - Imported",
+  //     image:
+  //       'https://storage.googleapis.com/planetposen-images/838074447f08f03c4b75ac2030dcd01201c0656c.jpg',
+  //     name: 'White Dinosaur Patches',
+  //     primary_color: '#B1E0DC',
+  //     product_no: 10,
+  //     subtext: ''
+  //   },
+  //   {
+  //     description:
+  //       ' - Width: 43 inches\n - Content: 100% Cotton\n - Care: Machine wash normal cold, no bleach, tumble dry, do not iron\n - Imported',
+  //     image:
+  //       'https://storage.googleapis.com/planetposen-images/aef3eb500a6b12b896b7c567b85eded6301d5c4a.jpg',
+  //     name: 'Dino Camping',
+  //     primary_color: '#EBB4BB',
+  //     product_no: 9,
+  //     subtext: 'Snuggle Flannel Fabric'
+  //   }
+  // ];
 </script>
 
-<PageMeta title="Planetposen" description="Planetposen hjemmeside" />
+<PageMeta title="Hjem" description="Planetposen hjemmeside" />
 <section class="frontpage">
   <!-- {#each textImages as data}
     <TextImageParralax {data} />
   {/each} -->
   <FrontTextImage data="{textImages[0]}" />
   <FrontTextImage data="{textImages[1]}" />
+  <!--  <FrontProductGallery
+    products="{galleryProducts}"
+    title="Nye julevarer tilgjengelig!"
+    backgroundColor="#BCDEB7"
+  /> -->
   <FrontTextImageBubble />
   <FrontTextImage data="{textImages[2]}" />
 
@@ -73,9 +111,6 @@
 
 <style lang="scss" module="scoped">
   section {
-    // position: absolute;
-    // left: 0;
-    // width: 100vw;
     display: flex;
     flex-direction: column;
     justify-content: center;