feat: landing - update showcase structure (#181)

* feat: update Showcase to use Section and Card shared elements * feat: showcase parallax
codesandbox · Nov 25, 2021 · b35eef3 · b35eef3
1 parent 3eff507
commit b35eef3
Show file tree

Hide file tree

Showing 2 changed files with 128 additions and 126 deletions.
diff --git a/website/landing/components/Showcase/Showcase.tsx b/website/landing/components/Showcase/Showcase.tsx
@@ -1,7 +1,25 @@
-import content from "../../website.config.json";
-import { Box, List, Text } from "../common";
+import { motion, useTransform, useViewportScroll } from "framer-motion";
+import { useLayoutEffect, useRef, useState } from "react";
 
-const ContentLandmark = () => {
+import { styled } from "../../stitches.config";
+import content from "../../website.config.json";
+import {
+  Box,
+  List,
+  SectionWrapper,
+  SectionContainer,
+  SectionHeader,
+  SectionTitle,
+  Card,
+  CardTitle,
+  CardDescription,
+  Text,
+} from "../common";
+import { useBreakpoint } from "../common/useBreakpoint";
+
+const AnimatedListItem = styled(motion.li, {});
+
+const HighlightPreview = () => {
   return (
     <Box
       css={{
@@ -35,136 +53,120 @@ const ContentLandmark = () => {
 };
 
 export const Showcase: React.FC = () => {
+  const shouldAnimate = useBreakpoint("bp1");
+
   const { showCase } = content;
 
-  return (
-    <Box
-      as="section"
-      css={{
-        alignItems: "center",
-        display: "flex",
-        flexDirection: "column",
-        gap: "200px",
-        justifyContent: "center",
-        padding: "200px 16px",
+  const sectionRef = useRef<HTMLDivElement>(null);
+  const [sectionTop, setSectionTop] = useState(0);
+  const [sectionScroll, setSectionScroll] = useState(0);
+
+  const { scrollY } = useViewportScroll();
+  const scrollInput = [sectionTop, sectionTop + sectionScroll];
+  const translateOutput = ["-25%", "25%"];
+  const leftColumnTranslateY = useTransform(
+    scrollY,
+    scrollInput,
+    translateOutput
+  );
 
-        "@bp2": {
-          padding: "200px 0 0",
-        },
-      }}
-    >
-      <Text
-        as="h2"
-        css={{
-          fontSize: "36px",
-          fontWeight: "$semiBold",
-          letterSpacing: "-0.05em",
-          lineHeight: "1",
-          textAlign: "center",
-
-          "@bp1": {
-            fontSize: "72px",
-          },
-
-          "@bp2": {
-            fontSize: "96px",
-          },
-
-          "@bp3": {
-            fontSize: "144px",
-          },
-        }}
-        dangerouslySetInnerHTML={{ __html: showCase.title }}
-      />
-      <List
-        css={{
-          alignItems: "center",
-          display: "flex",
-          flexDirection: "column",
-          gap: "148px",
-          width: "100%",
-
-          "@bp2": {
-            display: "grid",
-            gap: "200px",
-            gridTemplateColumns: "repeat(2, minmax(0, 1fr))",
-          },
-        }}
-      >
-        {showCase.highlights.map((h, index) => (
-          <Box
-            key={`section-showcase-${index}`}
-            as="li"
-            css={{
-              alignItems: "center",
-              display: "flex",
-              flexDirection: "column",
-              gap: "40px",
-
-              "@bp1": {
-                width: "384px",
-              },
-
-              "@bp2": {
-                width: "360px",
-
-                "&:nth-of-type(odd)": {
-                  justifySelf: "flex-end",
-                },
+  useLayoutEffect(() => {
+    const container = sectionRef.current;
+    if (!container || !window) return;
 
-                "&:ntt-of-type(even)": {
-                  justifySelf: "flex-start",
-                },
-              },
-
-              "@bp3": {
-                width: "480px",
-              },
-            }}
-          >
-            <ContentLandmark />
-            <Box
+    const onResize = () => {
+      setSectionTop(container.offsetTop);
+      setSectionScroll(container.offsetHeight - window.innerHeight);
+    };
+
+    onResize();
+    window.addEventListener("resize", onResize);
+    return () => window.removeEventListener("resize", onResize);
+  }, [sectionRef]);
+
+  return (
+    <SectionWrapper ref={sectionRef}>
+      <SectionContainer>
+        <SectionHeader
+          css={{
+            "@bp2": {
+              padding: "200px 0",
+            },
+          }}
+        >
+          <SectionTitle dangerouslySetInnerHTML={{ __html: showCase.title }} />
+        </SectionHeader>
+        <List
+          css={{
+            alignItems: "center",
+            display: "flex",
+            flexDirection: "column",
+            gap: "148px",
+            width: "100%",
+
+            "@bp2": {
+              display: "grid",
+              gap: "200px",
+              gridTemplateColumns: "repeat(2, minmax(0, 1fr))",
+              marginBottom: "200px",
+            },
+          }}
+        >
+          {showCase.highlights.map((h, hIndex) => (
+            <AnimatedListItem
+              key={`section-showcase-${hIndex}`}
               css={{
                 alignItems: "center",
                 display: "flex",
                 flexDirection: "column",
-                gap: "24px",
-              }}
-            >
-              <Text
-                css={{
-                  fontSize: "24px",
-                  fontWeight: "$semiBold",
-                  letterSpacing: "-0.05em",
-                  lineHeight: "1.2",
-                  textAlign: "center",
-
-                  "@bp1": {
-                    fontSize: "36px",
+                gap: "40px",
+
+                "@bp1": {
+                  width: "384px",
+                },
+
+                "@bp2": {
+                  marginTop: "25%",
+                  position: "relative",
+                  width: "360px",
+
+                  "&:nth-of-type(odd)": {
+                    transform: "translateY(0)",
+                    justifySelf: "flex-end",
                   },
-                }}
-              >
-                {h.title}
-              </Text>
-              <Text
-                css={{
-                  color: "$darkTextSecondary",
-                  fontSize: "16px",
-                  lineHeight: "1.4",
-                  letterSpacing: "-0.025em",
-                  textAlign: "center",
-
-                  "@bp2": {
-                    fontSize: "18px",
+
+                  "&:nth-of-type(even)": {
+                    justifySelf: "flex-start",
+                    transform: "translateY(-25%)",
                   },
-                }}
-              >
-                {h.description}
-              </Text>
-            </Box>
-          </Box>
-        ))}
-      </List>
-    </Box>
+                },
+
+                "@bp3": {
+                  width: "480px",
+                },
+              }}
+              style={{
+                translateY: hIndex % 2 === 0 && shouldAnimate ? leftColumnTranslateY : "0",
+              }}
+            >
+              <HighlightPreview />
+              <Card css={{ alignItems: "center" }}>
+                <CardTitle
+                  dangerouslySetInnerHTML={{
+                    __html: h.title,
+                  }}
+                />
+                <CardDescription
+                  css={{ textAlign: "center" }}
+                  dangerouslySetInnerHTML={{
+                    __html: h.description,
+                  }}
+                />
+              </Card>
+            </AnimatedListItem>
+          ))}
+        </List>
+      </SectionContainer>
+    </SectionWrapper>
   );
 };
diff --git a/website/landing/pages/index.tsx b/website/landing/pages/index.tsx
@@ -8,7 +8,7 @@ import { Features } from "../components/Features";
 import { Footer } from "../components/Footer";
 import { Hero } from "../components/Hero";
 import { Intro } from "../components/Intro";
-// import { Showcase } from "../components/Showcase";
+import { Showcase } from "../components/Showcase";
 import { Users } from "../components/Users";
 import { styled } from "../stitches.config";
 import content from "../website.config.json";
@@ -61,7 +61,7 @@ const Home: NextPage<HomeProps> = () => {
         <Intro />
         <Features />
         <AdvancedUsage />
-        {/* <Showcase />*/}
+        <Showcase />
         <Users />
         <Banner />
         <Community />