What people are saying - READY FOR REVIEW (#1577)

* add what people are saying section

* lint fix

* revert dockerfile

* fix testimony

* fix dockerfile

* add missing props

* Update packages/web/components/Landing/WhatSay.tsx

Co-authored-by: δυς <dys@dhappy.org>

* Update packages/web/components/Landing/WhatSay.tsx

Co-authored-by: δυς <dys@dhappy.org>

* Update packages/web/components/Landing/WhatSay.tsx

Co-authored-by: δυς <dys@dhappy.org>

* Update packages/web/components/Landing/WhatSay.tsx

Co-authored-by: δυς <dys@dhappy.org>

* Update packages/web/components/Landing/WhatSay.tsx

Co-authored-by: δυς <dys@dhappy.org>

* Update packages/web/components/Landing/WhatSay.tsx

Co-authored-by: δυς <dys@dhappy.org>

* Update packages/web/components/Landing/landingSection.ts

Co-authored-by: δυς <dys@dhappy.org>

* support multi paragraph

* add what people are saying section

---------

Co-authored-by: δυς <dys@dhappy.org>
Co-authored-by: Sero <69639595+Seroxdesign@users.noreply.github.com>

packages/web/components/Landing/WhatSay.tsx

@@ -0,0 +1,184 @@
+import { Box, Container, Flex, HStack, Text } from '@metafam/ds';
+import { FullPageContainer } from 'components/Container';
+import { PlayerAvatar } from 'components/Player/PlayerAvatar';
+import { Player } from 'graphql/autogen/types';
+import { getPlayer } from 'graphql/getPlayer';
+import { useMotionDetector } from 'lib/hooks/useMotionDetector';
+import { useOnScreen } from 'lib/hooks/useOnScreen';
+import React, { ReactNode, useEffect, useRef, useState } from 'react';
+
+import { LandingNextButton } from './LandingNextButton';
+import { LandingPageSectionProps } from './landingSection';
+
+export const WhatSay: React.FC<LandingPageSectionProps> = ({
+  section,
+  nextSection,
+}) => {
+  const ref = useRef<HTMLDivElement>(null);
+  const onScreen = useOnScreen(ref);
+  const root = typeof window !== 'undefined' ? document.body : null;
+  const noMotion = useMotionDetector(root);
+  const displayElement = noMotion ? true : !!onScreen;
+
+  return (
+    <FullPageContainer
+      id={section.internalLinkId}
+      position="relative"
+      overflow="clip"
+    >
+      <Container
+        display="flex"
+        maxW={{ base: '100%', md: 'xl', lg: '7xl', '2xl': '8xl', '4xl': '70%' }}
+        height="100%"
+        alignItems={{ base: 'flex-start', xl: 'center' }}
+        justifyContent="center"
+        pos="relative"
+      >
+        <Box
+          flex="1"
+          background="linear-gradient(180deg, rgba(23, 11, 41, 0.00) 0%, #170B28 100%)"
+          pos="absolute"
+          h="70%"
+          bottom={-9}
+          w="100vw"
+          zIndex={100}
+          pointerEvents="none"
+        />
+        <Flex
+          zIndex={99}
+          gap={20}
+          {...{ ref }}
+          display="flex"
+          flexDirection="column"
+          justifyContent={{ base: 'flex-start', xl: 'center' }}
+          maxWidth={{
+            base: '90%',
+            md: '3xl',
+            xl: '5xl',
+            '2xl': '8xl',
+            '4xl': '100%',
+          }}
+          maxH={{ base: '60%', md: '90%', lg: 'initial' }}
+          overflowY={{ base: 'auto', xl: 'visible' }}
+          pl={{ base: 0, md: 0 }}
+          transform={`translate3d(0, ${displayElement ? '0' : '50px'}, 0)`}
+          opacity={displayElement ? 1 : 0}
+          transition={
+            'transform 0.3s 0.1s ease-in-out, opacity 0.5s 0.2s ease-in'
+          }
+          sx={{
+            h2: {
+              color: 'landing500',
+              fontSize: { base: 'xl', md: '3xl', xl: '3xl', '2xl': '4xl' },
+              textAlign: 'center',
+              textShadow: '0 0 5px var(--chakra-colors-landing500)',
+              transform: {
+                base: 'none',
+                xl: 'translate3d(0, 15px, 0)',
+                '4xl': 'translate3d(0, -60px, 0)',
+              },
+            },
+          }}
+        >
+          <Text as="h2" fontWeight="700">
+            What people are saying
+          </Text>
+
+          <Flex gap={8}>
+            <Flex flex="1" direction="column" gap={8}>
+              <WhatSayCard
+                player="METADREAMER"
+                testimony="MetaGame was my gateway drug to Web3. It felt like I was reading my own internal thoughts on how the world could be, and to this day it’s my guiding philosophy for the future of society. Being able to collaborate with people who felt the same to help build it was the best way to start contributing in Web3 and became a launchpad / network to a bunch of the best projects and people in the space."
+                username="metadreamer"
+              />
+
+              <WhatSayCard
+                player="Kyle Stargarden"
+                testimony="MetaGame was the launching pad for my career in Web3. When I joined Metagame I was working as a personal assistant. Now I am Lead Blockchain Engineer and public speaker at some of the world's top Web3 conferences."
+                username="kyle-stargarden"
+              />
+            </Flex>
+            <Flex flex="1" direction="column" gap={8}>
+              <WhatSayCard
+                player="Yalor"
+                testimony={
+                  <>
+                    <Text>
+                      MetaGame inspired me join the Web3 ecosystem after a
+                      season of disillusionment and ICO scams 😛
+                    </Text>
+                    <Text>
+                      Through MetaGame I found the most amazing community of
+                      values aligned ecosystem innovators that I still work with
+                      today 🤩
+                    </Text>
+                  </>
+                }
+                username="yalormewn"
+              />
+              <WhatSayCard
+                player="Geleeroyale"
+                testimony="I love MetaGame as it still stands alone between the Ethereum communities. I have never met a more passionate bunch — the vibes are legendary, the fun is permeating, and the compassion revolutionary. MetaGame is a prime example of how networks can improve peoples life permanently."
+                username="geleeroyale"
+              />
+            </Flex>
+            <Flex flex="1" direction="column" gap={8}>
+              <WhatSayCard
+                player="Griff Green"
+                testimony="MetaGame embodies the actual fucking point of crypto. Its vision is the world I want to live in."
+              />
+              <WhatSayCard
+                player="Alp"
+                testimony="Looking back at the early days,  I remember minting one of the first DAO member attestation NFTs of MetaGame. The community embraced the DAO vision early on and has been pioneering the space ever since."
+              />
+              <WhatSayCard
+                player="Saimano"
+                testimony="MetaGame, my gateway to a new world. It not only helped me forge a career in Web3 but also introduced me to an amazing community with a sense of belonging that fueled my growth & propelled me forward."
+                username="saimano"
+              />
+            </Flex>
+          </Flex>
+        </Flex>
+      </Container>
+      <LandingNextButton section={nextSection?.internalLinkId} />
+    </FullPageContainer>
+  );
+};
+
+const WhatSayCard: React.FC<{
+  player: string;
+  testimony: string | ReactNode;
+  username?: string;
+}> = ({ player, testimony, username }) => {
+  const [pfp, setPfp] = useState<Player | undefined>(undefined);
+
+  useEffect(() => {
+    const getPfp = async () => {
+      const getPlayerResponse = await getPlayer(username);
+
+      if (getPlayerResponse?.profile?.profileImageURL) {
+        setPfp(getPlayerResponse);
+      }
+    };
+    getPfp();
+  }, [username]);
+
+  return (
+    <Box
+      fontSize="md"
+      fontWeight={400}
+      py={8}
+      px={10}
+      border-radius="8px"
+      border="1px solid #5B1D66"
+      background="#1D0E32"
+      boxShadow="0px 8px 28px 4px rgba(137, 59, 153, 0.25)"
+    >
+      <HStack mb={3}>
+        <PlayerAvatar size="sm" player={pfp || ({} as Player)} />
+        <Text>{player}</Text>
+      </HStack>
+      <Text lineHeight="1.5rem">{testimony}</Text>
+    </Box>
+  );
+};

packages/web/components/Landing/WhatWeDo.tsx

@@ -1,123 +0,0 @@
-import { Box, Container, ListItem, Text, UnorderedList } from '@metafam/ds';
-import BackgroundImage from 'assets/landing/whatWeDo-background.webp';
-import { FullPageContainer } from 'components/Container';
-import { useOnScreen } from 'lib/hooks/useOnScreen';
-import React, { useRef } from 'react';
-
-import { LandingNextButton } from './LandingNextButton';
-
-export const WhatWeDo: React.FC = () => {
-  const ref = useRef<HTMLDivElement>(null);
-  const onScreen = useOnScreen(ref);
-  const section = 'what-we-do';
-
-  return (
-    <FullPageContainer
-      bgImageUrl={BackgroundImage.src}
-      id={section}
-      position="relative"
-    >
-      <Container
-        display="flex"
-        maxW={{ base: '100%', md: '7xl', '2xl': '8xl' }}
-        height="100%"
-        alignItems="center"
-        justifyContent="center"
-      >
-        <Box
-          ref={ref}
-          display="flex"
-          flexDirection="column"
-          justifyContent="center"
-          fontSize={{ base: 'md', md: '3xl', xl: '3xl', '2xl': '6xl' }}
-          lineHeight={{
-            base: '1.25rem',
-            md: '2.4rem',
-            xl: '2rem',
-            '2xl': '3.5rem',
-          }}
-          maxWidth={{ base: '95%', md: '3xl', xl: '2xl', '2xl': '5xl' }}
-          pl={{ base: 0, md: 0 }}
-          zIndex={100}
-          transform={`translate3d(0, ${onScreen ? '0' : '50px'}, 0)`}
-          opacity={onScreen ? 1 : 0}
-          transition="transform 0.3s 0.1s ease-in-out, opacity 0.5s 0.2s ease-in"
-          sx={{
-            h2: {
-              color: 'landing500',
-              textShadow: '0 0 5px var(--chakra-colors-landing500)',
-            },
-          }}
-        >
-          <Text as="h2" fontWeight="700">
-            What are we doing?
-          </Text>
-          <UnorderedList
-            display="flex"
-            alignContent="flex-start"
-            justifyContent="space-between"
-            flexFlow={{ base: 'column wrap', md: 'row wrap' }}
-            pb={{ base: 2, md: '2.188rem', xl: 3, '2xl': '2.188rem' }}
-            listStyleType="none"
-            mt={3}
-            ml={0}
-            opacity="0.8"
-            sx={{
-              li: {
-                flex: { base: '0 0 100%', md: '0 0 48%' },
-                width: { base: '100%', md: '48%' },
-                mb: { base: 4, md: 3 },
-                h3: {
-                  fontSize: { base: 'xl', md: '4xl', xl: '3xl', '2xl': '4xl' },
-                  mb: { base: 2, md: 2 },
-                },
-                p: {
-                  fontSize: { base: 'sm', md: 'lg', xl: 'md', '2xl': 'lg' },
-                  lineHeight: { base: '1.25rem', md: '1.75rem' },
-                },
-              },
-            }}
-          >
-            <ListItem>
-              <Text as="h3">Producing content</Text>
-              <Text>
-                Educational content such as Playbooks &amp; Great Houses as well
-                as something more fun, like our podcasts, news or recordings of
-                the below.
-              </Text>
-            </ListItem>
-            <ListItem>
-              <Text as="h3">Organizing events</Text>
-              <Text>
-                Regularly bringing awesome people to present at our community
-                calls or do workshops. Also organized a conference, a hackathon
-                &amp; a festival.
-              </Text>
-            </ListItem>
-            <ListItem>
-              <Text as="h3">Assembling the puzzle</Text>
-              <Text>
-                Building things like MetaSys &amp; MyMeta as well as the MetaOS
-                - to make it easy to integrate other people's building blocks
-              </Text>
-            </ListItem>
-            <ListItem>
-              <Text as="h3">Uniting aligned peoples</Text>
-              <Text>
-                Bringing together anyone aligned on the idea of building a new
-                kind of society; individuals joining MetaFam as well as projects
-                joining MetaAlliance.
-              </Text>
-            </ListItem>
-          </UnorderedList>
-
-          <Text fontWeight={700} width="100%">
-            In short, anything &amp; everything related to DAOs &amp; helping
-            people build the future they want to live in.
-          </Text>
-        </Box>
-      </Container>
-      <LandingNextButton py={8} section="play-life" />
-    </FullPageContainer>
-  );
-};

packages/web/components/Landing/landingSection.ts

@@ -47,7 +47,12 @@ export const sections = [
   },
   {
     label: '08',
+    internalLinkId: 'what-say',
+    title: '8. What people are saying.',
+  },
+  {
+    label: '09',
     internalLinkId: 'join-us',
-    title: '8. Join us!',
+    title: '9. Join us!',
   },
 ];

packages/web/pages/index.tsx

@@ -7,6 +7,7 @@ import { JoinUs } from 'components/Landing/JoinUs';
 import { LandingHeader } from 'components/Landing/LandingHeader';
 import { sections } from 'components/Landing/landingSection';
 import { WhatDo } from 'components/Landing/WhatDo';
+import { WhatSay } from 'components/Landing/WhatSay';
 import { WhoAreWe } from 'components/Landing/WhoAreWe';
 import { WhyAreWeHere } from 'components/Landing/WhyAreWeHere';
 import { WildWeb } from 'components/Landing/WildWeb';
@@ -159,7 +160,12 @@ const Landing: React.FC<Props> = ({ patrons, guilds }) => {
           nextSection={sections[7]}
           activeSectionIndex={section}
         />
-        <JoinUs section={sections[7]} activeSectionIndex={section} />
+        <WhatSay
+          section={sections[7]}
+          nextSection={sections[8]}
+          activeSectionIndex={section}
+        />
+        <JoinUs section={sections[8]} activeSectionIndex={section} />
       </PageContainer>
       <SectionWayPoints currentWaypoint={section} />
       <SocialsDesktop />