Home: Save and share section (#1624)

* Home: Save and share section

* Align Slider intro cards text

* Trigger PR preview

* Trigger PR Preview

* Update text

Author: quietbits

public/images/lab-home-save-share-dark.png

@@ -18,6 +18,7 @@ import { HomeSection } from "@/components/Home/Section";
 import { Slider } from "@/components/Home/Slider";
 import { Tutorials } from "@/components/Home/Tutorials";
 import { Networks } from "@/components/Home/Networks";
+import { SaveAndShare } from "@/components/Home/SaveAndShare";
 import { Resources } from "@/components/Home/Resources";
 
 import { Routes } from "@/constants/routes";
@@ -140,6 +141,14 @@ export default function Introduction() {
           <Networks imgTheme={imgTheme} network={network} />
         </HomeSection>
 
+        <HomeSection
+          title="Save and share your work to revisit experiment and collaborate"
+          eyebrow="Save and share"
+          description="Save or share transactions anytime. They’re stored in your browser’s local storage and can be accessed from the Saved tab in the sidebar for easy reloading."
+        >
+          <SaveAndShare imgTheme={imgTheme} />
+        </HomeSection>
+
         <HomeSection
           title="Everything you need to build and connect"
           eyebrow="Resources"

public/images/lab-home-save-share-light.png

@@ -0,0 +1,21 @@
+import { getPublicResourcePath } from "@/helpers/getPublicResourcePath";
+import { useWindowSize } from "@/hooks/useWindowSize";
+
+export const SaveAndShare = ({ imgTheme }: { imgTheme: "light" | "dark" }) => {
+  const { windowWidth } = useWindowSize();
+
+  return (
+    <>
+      <div className="Lab__home__saveAndShare">
+        <img
+          src={getPublicResourcePath(
+            windowWidth && windowWidth < 600
+              ? `/images/lab-home-save-share-mobile-${imgTheme}.png`
+              : `/images/lab-home-save-share-${imgTheme}.png`,
+          )}
+          alt="Save and share graphic"
+        />
+      </div>
+    </>
+  );
+};

public/images/lab-home-save-share-mobile-dark.png

@@ -438,7 +438,11 @@ export const Slider = ({ imgTheme }: { imgTheme: "light" | "dark" }) => {
               });
             }}
           >
-            <Box gap="xl" align="center">
+            <Box
+              gap="xl"
+              align="center"
+              addlClassName="Lab__home__introCards__fullHeight"
+            >
               <div className="Lab__home__introCards__image">
                 <Image
                   src={i.imagePath}
@@ -448,7 +452,12 @@ export const Slider = ({ imgTheme }: { imgTheme: "light" | "dark" }) => {
                 />
               </div>
 
-              <Box gap="xs" align="center">
+              <Box
+                gap="xs"
+                align="center"
+                justify="space-between"
+                addlClassName="Lab__home__introCards__fullHeight"
+              >
                 <Text
                   as="div"
                   size="md"

public/images/lab-home-save-share-mobile-light.png

@@ -211,6 +211,10 @@
     gap: pxToRem(12px);
     transition: opacity ease-in-out 0.2s;
 
+    &__fullHeight {
+      height: 100%;
+    }
+
     &__image {
       width: pxToRem(168px);
       height: pxToRem(168px);
@@ -564,6 +568,18 @@
     }
   }
 
+  // Save and share
+  &__saveAndShare {
+    position: relative;
+    background-color: var(--sds-clr-gray-02);
+    border-radius: pxToRem(12px);
+    overflow: hidden;
+
+    img {
+      width: 100%;
+    }
+  }
+
   // Resources
   &__resources {
     --sds-logo-fill: var(--sds-clr-base-01);