diff --git a/packages/web/components/Landing/WhatSay.tsx b/packages/web/components/Landing/WhatSay.tsx new file mode 100644 index 00000000..4f1487bc --- /dev/null +++ b/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 = ({ + section, + nextSection, +}) => { + const ref = useRef(null); + const onScreen = useOnScreen(ref); + const root = typeof window !== 'undefined' ? document.body : null; + const noMotion = useMotionDetector(root); + const displayElement = noMotion ? true : !!onScreen; + + return ( + + + + + + What people are saying + + + + + + + + + + + + MetaGame inspired me join the Web3 ecosystem after a + season of disillusionment and ICO scams πŸ˜› + + + Through MetaGame I found the most amazing community of + values aligned ecosystem innovators that I still work with + today 🀩 + + + } + username="yalormewn" + /> + + + + + + + + + + + + + ); +}; + +const WhatSayCard: React.FC<{ + player: string; + testimony: string | ReactNode; + username?: string; +}> = ({ player, testimony, username }) => { + const [pfp, setPfp] = useState(undefined); + + useEffect(() => { + const getPfp = async () => { + const getPlayerResponse = await getPlayer(username); + + if (getPlayerResponse?.profile?.profileImageURL) { + setPfp(getPlayerResponse); + } + }; + getPfp(); + }, [username]); + + return ( + + + + {player} + + {testimony} + + ); +}; diff --git a/packages/web/components/Landing/WhatWeDo.tsx b/packages/web/components/Landing/WhatWeDo.tsx deleted file mode 100644 index 279a71bf..00000000 --- a/packages/web/components/Landing/WhatWeDo.tsx +++ /dev/null @@ -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(null); - const onScreen = useOnScreen(ref); - const section = 'what-we-do'; - - return ( - - - - - What are we doing? - - - - Producing content - - Educational content such as Playbooks & Great Houses as well - as something more fun, like our podcasts, news or recordings of - the below. - - - - Organizing events - - Regularly bringing awesome people to present at our community - calls or do workshops. Also organized a conference, a hackathon - & a festival. - - - - Assembling the puzzle - - Building things like MetaSys & MyMeta as well as the MetaOS - - to make it easy to integrate other people's building blocks - - - - Uniting aligned peoples - - Bringing together anyone aligned on the idea of building a new - kind of society; individuals joining MetaFam as well as projects - joining MetaAlliance. - - - - - - In short, anything & everything related to DAOs & helping - people build the future they want to live in. - - - - - - ); -}; diff --git a/packages/web/components/Landing/landingSection.ts b/packages/web/components/Landing/landingSection.ts index 9d27cebd..ec3b551c 100644 --- a/packages/web/components/Landing/landingSection.ts +++ b/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!', }, ]; diff --git a/packages/web/pages/index.tsx b/packages/web/pages/index.tsx index 7ed3ea45..52393e82 100644 --- a/packages/web/pages/index.tsx +++ b/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 = ({ patrons, guilds }) => { nextSection={sections[7]} activeSectionIndex={section} /> - + +