From a8a525e478a0f93f32aa4fff708fa90a8f9f68e1 Mon Sep 17 00:00:00 2001
From: Florian Kleber <kleber@snek.at>
Date: Mon, 7 Aug 2023 19:59:10 +0000
Subject: [PATCH] feat: Improve the mobile featured products section

---
 .../molecules/ProductSlider/ProductSlider.tsx          | 10 ++++++----
 .../FeaturedProductsSection.tsx                        | 10 ++++++++++
 .../HomeTemplate/Riesges/RiesgesBottomSection.tsx      |  2 +-
 3 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/src/components/molecules/ProductSlider/ProductSlider.tsx b/src/components/molecules/ProductSlider/ProductSlider.tsx
index 5a4dcf94..1c52a690 100644
--- a/src/components/molecules/ProductSlider/ProductSlider.tsx
+++ b/src/components/molecules/ProductSlider/ProductSlider.tsx
@@ -1,10 +1,10 @@
-import {Box, Heading} from '@chakra-ui/react'
+import {Heading, StackProps} from '@chakra-ui/react'
 import {ShopifyProduct} from '@snek-at/gatsby-theme-shopify'
 import {Slider} from '@snek-at/uikit'
 
 import {ProductCard} from '../ProductCard'
 
-export interface ProductSliderProps {
+export interface ProductSliderProps extends StackProps {
   products: ShopifyProduct[]
   heading?: string
   prefixPath?: string
@@ -15,7 +15,8 @@ export const ProductSlider = ({
   products,
   heading,
   prefixPath,
-  wholesale
+  wholesale,
+  ...stackProps
 }: ProductSliderProps) => {
   return (
     <>
@@ -36,7 +37,8 @@ export const ProductSlider = ({
             base: '15rem',
             sm: 'xs'
           }
-        }}>
+        }}
+        {...stackProps}>
         {products.map((product, index) => (
           <ProductCard
             key={product.id}
diff --git a/src/components/templates/HomeTemplate/FeaturedProductsSection/FeaturedProductsSection.tsx b/src/components/templates/HomeTemplate/FeaturedProductsSection/FeaturedProductsSection.tsx
index 43554991..44496974 100644
--- a/src/components/templates/HomeTemplate/FeaturedProductsSection/FeaturedProductsSection.tsx
+++ b/src/components/templates/HomeTemplate/FeaturedProductsSection/FeaturedProductsSection.tsx
@@ -8,6 +8,7 @@ import {ProductGrid} from '../../../molecules/ProductGrid'
 import LinkButtonField from '../../../fields/LinkButtonField'
 import * as style from './style'
 import {useAuthentication} from '../../../../services/authentication'
+import {ProductSlider} from '../../../molecules/ProductSlider'
 
 export interface FeaturedProductsSectionProps {
   name: string
@@ -60,12 +61,21 @@ export const FeaturedProducts = ({
             <Bullet color="agt.yellow" w="unset" fontSize="xl" mt="5" mb="10" />
           </Box> */}
           <ProductGrid
+            display={{base: 'none', sm: 'grid'}}
             prefixPath={productsPagePath}
             products={featuredProducts}
             spacing="5"
             columns={{base: 2, md: 3, xl: 4}}
             wholesale={!!user.user}
           />
+          <ProductSlider
+            h={"100%"}
+            display={{base: 'flex', sm: 'none'}}
+            //heading="Ähnliche Produkte"
+            products={featuredProducts}
+            prefixPath="/products"
+            wholesale={!!user.user}
+          />
           <Center mt="10" mb="16">
             <LinkButtonField
               name="littleThingsButton1"
diff --git a/src/components/templates/HomeTemplate/Riesges/RiesgesBottomSection.tsx b/src/components/templates/HomeTemplate/Riesges/RiesgesBottomSection.tsx
index f080ab8c..5b24dc3f 100644
--- a/src/components/templates/HomeTemplate/Riesges/RiesgesBottomSection.tsx
+++ b/src/components/templates/HomeTemplate/Riesges/RiesgesBottomSection.tsx
@@ -90,7 +90,7 @@ interface IRiesgesBottomSectionProps {}
 
 const RiesgesBottomSection: FC<IRiesgesBottomSectionProps> = () => {
   return (
-    <Flex flexDir={{base: 'column', xl: 'row'}} gap="10" pb="10">
+    <Flex flexDir={{base: 'column', xl: 'row'}} gap="10" pb={{base: "0", sm: "10"}}>
       <Stack flex="1">
         <Field.Text
           as={Heading}