Revise the Slide::Card to work with a grid since the horizontal scrol…

…l is just painful. Add a new Grid component, and get it to scale down gracefully. It is probably still wonky for grid sizes of things other than 2 columns, but this is a start, and is all that we need right now.

src/blocks/BlockRenderer.jsx

@@ -1,52 +1,54 @@
+import React from "react"
+import BlockHero from "./Hero/Hero.jsx"
+import FullWidthText from "./FullWidthText/FullWidthText.jsx"
+import BlockText from "./Text/Text.jsx"
+import PostList from "./PostList/PostList.jsx"
+import PageList from "./PageList/PageList.jsx"
+import Space from "./Space/Space.jsx"
+import BlockForm from "./Form/Form.jsx"
+import Slide from "./Slide/Slide.jsx"
+import Grid from "./Grid/Grid.jsx"
+import LinkGroup from "./LinkGroup/LinkGroup.jsx"
 
-import React from 'react';
-import BlockHero from './Hero/Hero.jsx';
-import FullWidthText from './FullWidthText/FullWidthText.jsx';
-import BlockText from './Text/Text.jsx';
-import PostList from './PostList/PostList.jsx';
-import PageList from './PageList/PageList.jsx';
-import Space from './Space/Space.jsx';
-import BlockForm from './Form/Form.jsx';
-import Slide from './Slide/Slide.jsx';
-import LinkGroup from './LinkGroup/LinkGroup.jsx';
-
-import BigLogo from './HardCoded/BigLogo.jsx';
-import PostPreview from './PostPreview/PostPreview.jsx';
+import BigLogo from "./HardCoded/BigLogo.jsx"
+import PostPreview from "./PostPreview/PostPreview.jsx"
 
 export default function BlockRenderer({ block, section }) {
   switch (block.__typename) {
-    case 'blockHero':
-      return <BlockHero block={block} section={section}  />;
-    case 'blockFullWidthText':
-      return <FullWidthText block={block} section={section} />;
-    case 'blockText':
-      return <BlockText block={block} section={section} />;
-    case 'blockPostList':
-      return <PostList block={block} section={section} />;
-    case 'blockPageList':
-      return <PageList block={block} section={section} />;
-    case 'blockSpace':
-      return <Space block={block} section={section} />;
-    case 'blockPostPreview':
-      return <PostPreview block={block} section={section} />;
-    case 'blockForm':
-      return <BlockForm block={block} section={section} />;
-    case 'blockSlide':
-      return <Slide block={block} section={section} />;
-    case 'blockLinkGroup':
-      return <LinkGroup block={block} section={section} />;
+    case "blockHero":
+      return <BlockHero block={block} section={section} />
+    case "blockFullWidthText":
+      return <FullWidthText block={block} section={section} />
+    case "blockText":
+      return <BlockText block={block} section={section} />
+    case "blockPostList":
+      return <PostList block={block} section={section} />
+    case "blockPageList":
+      return <PageList block={block} section={section} />
+    case "blockSpace":
+      return <Space block={block} section={section} />
+    case "blockPostPreview":
+      return <PostPreview block={block} section={section} />
+    case "blockForm":
+      return <BlockForm block={block} section={section} />
+    case "blockSlide":
+      return <Slide block={block} section={section} />
+    case "blockGrid":
+      return <Grid block={block} section={section} />
+    case "blockLinkGroup":
+      return <LinkGroup block={block} section={section} />
 
     /*
      * Hardcoded blocks without logics
      */
-    case 'blockHardCoded':
+    case "blockHardCoded":
       switch (block.blockName) {
-        case 'BigLogo':
-          return <BigLogo block={block} section={section} />;
+        case "BigLogo":
+          return <BigLogo block={block} section={section} />
         default:
-          return null;
+          return null
       }
     default:
-      return null;
+      return null
   }
-};
+}

src/blocks/Grid/Grid.jsx

@@ -0,0 +1,34 @@
+import React from "react";
+import styled from "@emotion/styled";
+import SlideCard from "../Slide/SlideCard.jsx";
+
+const Wrapper = styled.div`
+  position: relative;
+  display: grid;
+  grid-template-columns: repeat(${props => props.columns}, 1fr); /* Adjust column count */
+  gap: 20px; /* Adjust gap between grid items */
+  background: url('${props => props.background}'); /* Set background */
+  margin: auto;
+
+  @media (max-width: 768px) {
+    grid-template-columns: repeat(auto-fill, minmax(468px, 1fr)); /* Adjust for smaller screens */
+  }
+  /* Add any additional styling as needed */
+`;
+
+export default function Grid({ block, section }) {
+  console.log("GRID");
+  console.log(block?.cards);
+  console.log(block?.columns);
+  console.log(block?.backgroundImage); 
+  const sectionBackgroundColor = section.backgroundColor?.value;
+  console.log(sectionBackgroundColor); 
+  return (
+    <Wrapper columns={block?.columns || 2} background={block?.backgroundImage?.file?.url}>
+      {block?.cards?.map((card, index) => (
+        <SlideCard key={index} card={card} color={sectionBackgroundColor} />
+      ))}
+    </Wrapper>
+  );
+}
+

src/blocks/Slide/SlideCard.jsx

@@ -3,7 +3,7 @@ import RichText from "../../elements/RichText.jsx";
 import styled from "@emotion/styled";
 
 const Wrapper = styled.div`
-  padding: 240px 80px 80px 80px;
+  padding: 80px 16px 80px 16px;
   background-color: ${(props) => props.sectionBackgroundColor};
   width: 500px;
 
@@ -26,8 +26,11 @@ const Wrapper = styled.div`
     font-size: 1.125rem;
     line-height: var(--line-height-4);
   }
+  @media (max-width: 1296px) {
+    width: 38vw;
+  }
 
-  @media (max-width: 480px) {
+  @media (max-width: 768px) {
     width: 90vw;
   }
 `;