Change Landing Page CTA (#1640)

* add langing page cta; speed up 1liners * sort fix * add gradient * absolute position --------- Co-authored-by: Seroxdesign <sherifcherfa@gmail.com> Co-authored-by: Sero <69639595+Seroxdesign@users.noreply.github.com>
MetaFam · Nov 24, 2023 · 1660c91 · 1660c91
1 parent 70fa9cd
commit 1660c91
Show file tree

Hide file tree

Showing 10 changed files with 233 additions and 155 deletions.
diff --git a/.github/workflows/gcp-deploy-pr.yaml b/.github/workflows/gcp-deploy-pr.yaml
@@ -518,7 +518,6 @@ jobs:
             --set-env-vars GCAL_CLIENT_EMAIL="${{secrets.GCAL_CLIENT_EMAIL}}" \
             --set-env-vars NEXT_PUBLIC_GCAL_CALENDAR_ID="${{secrets.GCAL_CALENDAR_ID}}"
 
-
   seed-db:
     name: Seed Database
     runs-on: ubuntu-latest

diff --git a/packages/backend/src/handlers/triggers/types.ts b/packages/backend/src/handlers/triggers/types.ts
@@ -30,10 +30,7 @@ export interface TriggerPayload<T> {
 // so that we have compile-time checks if and when these columns / types change.
 export type GuildRow = Omit<
   Guild,
-  | 'joinButtonUrl'
-  | 'websiteUrl'
-  | 'discordId'
-  | 'membershipThroughDiscord'
+  'joinButtonUrl' | 'websiteUrl' | 'discordId' | 'membershipThroughDiscord'
 > & {
   join_button_url: string;
   website_url: string;

diff --git a/packages/web/components/Landing/Intro.tsx b/packages/web/components/Landing/Intro.tsx
@@ -3,8 +3,10 @@ import {
   Button,
   ChevronDownIcon,
   Container,
+  Flex,
   Heading,
   Image,
+  MetaButton,
   Stack,
   Text,
   useBreakpointValue,
@@ -65,6 +67,11 @@ export const Intro: React.FC<LandingPageSectionProps> = ({
         alignItems="flex-start"
         justifyContent={{ base: 'flex-start', lg: 'center' }}
         pt={{ base: 0, xl: 14 }}
+        bg="linear-gradient(0deg, #140231 20%, rgba(19, 1, 49, 0.00) 40%);"
+        position="absolute"
+        bottom="0"
+        left="0"
+        right="0"
       >
         <Stack
           pos="relative"
@@ -74,41 +81,76 @@ export const Intro: React.FC<LandingPageSectionProps> = ({
           mt={{ base: 16, lg: -10, '2xl': 0 }}
           pr={20}
           pb={10}
+          h="100%"
+          w="100%"
           direction={{ base: 'column', lg: 'column' }}
-          maxW={{ base: '2xs', xl: '2xl' }}
           zIndex={100}
           transform={`translate3d(0, ${displayElement ? 0 : '3rem'}, 0)`}
           opacity={displayElement ? 1 : 0}
           transition={
             'transform 0.3s 0.1s ease-in-out, opacity 0.5s 0.2s ease-in'
           }
         >
-          <Heading
-            as="h1"
-            fontFamily="landingHeading"
-            textTransform="uppercase"
-            className="gradient"
-            fontSize={{ base: 'lg', lg: 'md', '3xl': 'lg', '4xl': '3xl' }}
-            fontWeight={100}
-            my={0}
-            textAlign={{ base: 'left', lg: 'center' }}
-            sx={{
-              strong: {
-                fontWeight: 300,
-              },
-            }}
-          >
-            <Text as="strong">A</Text> Massive{' '}
-            <Text as="strong">Online Coordination</Text> Game
-          </Heading>
+          <Flex h="100%" w="100%" direction="column">
+            <Heading
+              flex={1}
+              as="h1"
+              fontFamily="landingHeading"
+              textTransform="uppercase"
+              className="gradient"
+              fontSize={{ base: 'lg', lg: 'md', '3xl': 'lg', '4xl': '3xl' }}
+              fontWeight={100}
+              my={0}
+              top={0}
+              textAlign={{ base: 'left', lg: 'center' }}
+              sx={{
+                strong: {
+                  fontWeight: 300,
+                },
+              }}
+            >
+              <Text as="strong">A</Text> Massive{' '}
+              <Text as="strong">Online Coordination</Text> Game
+            </Heading>
+            <Box w="100%" pb={{ base: 10, lg: 0 }}>
+              <Heading
+                as="h1"
+                fontFamily="exo2"
+                fontWeight="normal"
+                fontSize={{ base: '2xl', lg: '5xl' }}
+                textAlign={{ base: 'left', lg: 'center' }}
+              >
+                Learn, Connect, Create
+              </Heading>
+              <Text
+                mt={3}
+                fontSize={{ base: 'lg', lg: '2xl' }}
+                textAlign={{ base: 'left', lg: 'center' }}
+              >
+                MetaGame is a decentralized factory for builders of the future{' '}
+                <br /> a DAO incubation & growth platform.
+              </Text>
+              <Flex w="100%" justify="center" mt={8} gap={6}>
+                <Button
+                  as="a"
+                  variant="outline"
+                  colorScheme="blue"
+                  textTransform="uppercase"
+                  letterSpacing="0.1em"
+                  px={12}
+                  size="lg"
+                  fontSize="sm"
+                  href="#wtf-is-a-metagame"
+                >
+                  learn more
+                </Button>
+                <MetaButton as="a" href="#join-us">
+                  connect
+                </MetaButton>
+              </Flex>
+            </Box>
+          </Flex>
         </Stack>
-        <ScrollLink showQuote={showQuote} toggleQuote={toggleQuote} />
-        <QuoteLayer
-          quote="You never change things by fighting the existing reality. To change something, build a new model that makes the existing model obsolete."
-          attr="Buckminster Fuller"
-          showQuote={showQuote}
-          toggleQuote={toggleQuote}
-        />
       </Container>
     </FullPageContainer>
   );

diff --git a/packages/web/components/Landing/JoinUs.tsx b/packages/web/components/Landing/JoinUs.tsx
@@ -29,16 +29,19 @@ export const JoinUs: React.FC<LandingPageSectionProps> = ({ section }) => {
   const noMotion = useMotionDetector(root);
   const displayElement = noMotion ? true : !!onScreen;
 
-  const sentences = useMemo(() => [
-    'an infinite game.',
-    'a real-life MMO-RPG.',
-    'about finding the most optimal ways to play life.',
-    'an ecosystem of people, projects & resources.',
-    'a game of life.',
-    'a game that builds itself.',
-    'a layer above nation states & network states.',
-    'wondering why are you still here instead of progressing???'
-  ], []);
+  const sentences = useMemo(
+    () => [
+      'an infinite game.',
+      'a real-life MMO-RPG.',
+      'about finding the most optimal ways to play life.',
+      'an ecosystem of people, projects & resources.',
+      'a game of life.',
+      'a game that builds itself.',
+      'a layer above nation states & network states.',
+      'wondering why are you still here instead of progressing???',
+    ],
+    [],
+  );
 
   const [index, setIndex] = useState(0);
   const [subIndex, setSubIndex] = useState(0);
@@ -47,10 +50,13 @@ export const JoinUs: React.FC<LandingPageSectionProps> = ({ section }) => {
   // typeWriter effect
   useEffect(() => {
     if (onScreen) {
-      if (subIndex === sentences[index % sentences.length].length + 1 && !reverse) {
+      if (
+        subIndex === sentences[index % sentences.length].length + 1 &&
+        !reverse
+      ) {
         setTimeout(() => {
           setReverse(true);
-        }, 500); // delay cursor before deleting sentence
+        }, 250); // delay cursor before deleting sentence, speed up by 2x
         return undefined;
       }
 
@@ -62,7 +68,7 @@ export const JoinUs: React.FC<LandingPageSectionProps> = ({ section }) => {
 
       const timeout = setTimeout(() => {
         setSubIndex((prevSubIndex) => prevSubIndex + (reverse ? -1 : 1));
-      }, 150);
+      }, 75); // speed up by 2x
 
       return () => clearTimeout(timeout);
     }
@@ -124,12 +130,17 @@ export const JoinUs: React.FC<LandingPageSectionProps> = ({ section }) => {
                 fontWeight="700"
                 mb={{ base: 1, lg: 3 }}
               >
-                MetaGame is {' '}
-                <Text
-                  as="span"
-                  opacity={displayElement ? 1 : 0}
-                >
-                  {`${sentences[index % sentences.length].substring(0, subIndex)}${subIndex === sentences[index % sentences.length].length + 1 && !reverse ? "|" : ""}`}
+                MetaGame is{' '}
+                <Text as="span" opacity={displayElement ? 1 : 0}>
+                  {`${sentences[index % sentences.length].substring(
+                    0,
+                    subIndex,
+                  )}${
+                    subIndex ===
+                      sentences[index % sentences.length].length + 1 && !reverse
+                      ? '|'
+                      : ''
+                  }`}
                 </Text>
               </Text>
               <StartButton text="Join" />
@@ -229,7 +240,7 @@ export const JoinUs: React.FC<LandingPageSectionProps> = ({ section }) => {
             </MetaLink>
           </HStack>
         </Box>
-      </Container >
+      </Container>
       <LandingFooter />
       <Box
         backgroundImage={BackgroundImage.src}
@@ -247,6 +258,6 @@ export const JoinUs: React.FC<LandingPageSectionProps> = ({ section }) => {
         zIndex={1}
       />
       <Rain effectOpacity={0.2} />
-    </FullPageContainer >
+    </FullPageContainer>
   );
 };
diff --git a/packages/web/components/Landing/Signup/Cards.tsx b/packages/web/components/Landing/Signup/Cards.tsx
@@ -29,7 +29,7 @@ type CardProps = {
   title?: string;
   type?: string;
   image?: string;
-  price?: string
+  price?: string;
   description?: string;
   action?: string;
   list?: Perk[];
@@ -132,13 +132,18 @@ export const RoleCard: React.FC<CardProps> = ({
           fontSize={{ base: 'md', lg: '2xl' }}
           align={{ base: 'start', lg: 'center' }}
         >
-          {description} {description.includes('Detailed instructions') && activeTab === RoleTitle.Patron && (isMobile ? '👉' : '👇')}
+          {description}{' '}
+          {description.includes('Detailed instructions') &&
+            activeTab === RoleTitle.Patron &&
+            (isMobile ? '👉' : '👇')}
         </Text>
       )}
       {info && (
-        <Text fontSize={{ base: 'md', lg: '2xl' }}
+        <Text
+          fontSize={{ base: 'md', lg: '2xl' }}
           align={{ base: 'start', lg: 'center' }}
-          fontWeight="bold">
+          fontWeight="bold"
+        >
           {info}
         </Text>
       )}