Merge pull request #1736 from geyserfund/sajal/gys-9187-mystery-reveal-2

Sajal/gys 9187 mystery reveal 2

src/config/routes/routeGroups.ts

@@ -150,6 +150,14 @@ export const heroProfileSettingsRoutes = [
 export const profileRoutes = [getPath('userProfile', PathName.userId), ...profileSettingsRoutes]
 export const heroProfileRoutes = [getPath('heroProfile', PathName.heroId), ...heroProfileSettingsRoutes]
 
-export const guardiansRoutes = [getPath('guardians')]
+export const guardiansRoutes = [
+  getPath('guardians'),
+  getPath('guardiansCharacter', PathName.characterId),
+  getPath('manifesto'),
+]
+
+export const guardianCharacterRoutes = [getPath('guardiansCharacter', PathName.characterId)]
+
+export const manifestoRoutes = [getPath('manifesto')]
 
 export const fallBackRoutes = [getPath('notFound'), getPath('notAuthorized')]

src/config/routes/routes.tsx

@@ -702,6 +702,30 @@ export const platformRoutes: RouteObject[] = [
       const GuardiansPage = await Guardians().then((m) => m.Guardians)
       return { Component: GuardiansPage }
     },
+    children: [
+      {
+        index: true,
+        async lazy() {
+          const GuardiansMainPage = await Guardians().then((m) => m.GuardiansMainPage)
+          return { Component: GuardiansMainPage }
+        },
+      },
+      {
+        path: getPath('guardiansCharacter', PathName.characterId),
+        async lazy() {
+          const CharacterPage = await Guardians().then((m) => m.CharacterPage)
+          return { Component: CharacterPage }
+        },
+      },
+    ],
+  },
+
+  {
+    path: getPath('manifesto'),
+    async lazy() {
+      const Manifesto = await Guardians().then((m) => m.Manifesto)
+      return { Component: Manifesto }
+    },
   },
 
   {

src/modules/guardians/Guardians.tsx

@@ -1,84 +1,52 @@
-import { VStack } from '@chakra-ui/react'
+import { HStack, VStack } from '@chakra-ui/react'
 import { t } from 'i18next'
-import { DateTime } from 'luxon'
+import { Link, Outlet } from 'react-router-dom'
 
-import { Body, H1 } from '@/shared/components/typography'
-import { dimensions } from '@/shared/constants'
-import { useCountdown } from '@/shared/hooks/useCountdown'
+import { H1 } from '@/shared/components/typography'
+import { dimensions, getPath } from '@/shared/constants'
 import { fonts } from '@/shared/styles'
-import { toInt, toPx, useMobileMode } from '@/utils'
+import { toPx } from '@/utils'
 
-import { DesktopGuardiansIllustration } from './components/DesktopGuardiansIllustration'
-import { MobileGuardiansIllustration } from './components/MobileGuardiansIllustration'
-import { SubscribeGuardians } from './components/SubscribeGuardians'
+import { useIsGuardianCharacterPage } from '../navigation/platformNavBar/platformNavBarAtom'
 
 export const Guardians = () => {
-  const isMobile = useMobileMode()
-
-  const endDate = DateTime.fromFormat('2024-12-05', 'yyyy-MM-dd').toMillis()
-
-  const { days, hours, seconds } = useCountdown(endDate)
-
+  const isGuardianCharacterPage = useIsGuardianCharacterPage()
   return (
-    <VStack
-      w="full"
-      maxWidth={dimensions.guardians.maxWidth}
-      spacing={4}
-      fontFamily={fonts.mazius}
-      fontStyle="normal"
-      marginTop={{
-        base: `-${toPx(dimensions.topNavBar.mobile.height)}`,
-        lg: `-${toPx(dimensions.topNavBar.desktop.height)}`,
-      }}
-      h={'100vh'}
-      backgroundColor={'guardians.background'}
-      overflow="hidden"
-      position="relative"
-    >
-      <VStack zIndex={2} w="full" pt={{ base: 20, lg: 6, xl: 4 }} spacing={{ base: 0, lg: 6 }} position="relative">
-        <H1 fontSize={{ base: '32px', md: '48px', lg: '56px', xl: '72px' }} fontWeight={{ base: 'bold', lg: 'normal' }}>
-          {t('GEYSER GUARDIANS')}
-        </H1>
+    <HStack w="full" justify="center" backgroundColor="guardians.background">
+      <VStack
+        w="full"
+        maxWidth={dimensions.guardians.maxWidth}
+        spacing={4}
+        fontFamily={fonts.mazius}
+        fontStyle="normal"
+        h={{
+          base: `calc(100vh - ${toPx(dimensions.topNavBar.mobile.height)})`,
+          lg: `calc(100vh - ${toPx(dimensions.topNavBar.desktop.height)})`,
+        }}
+        backgroundColor={'guardians.background'}
+        overflow="hidden"
+        position="relative"
+        // paddingTop={{ base: dimensions.topNavBar.mobile.height, lg: dimensions.topNavBar.desktop.height }}
+      >
         <VStack
-          w="full"
-          maxWidth="1448px"
-          fontFamily={fonts.ptSerif}
-          px={{ base: 3, lg: 6 }}
-          spacing={{ base: 3, lg: 8 }}
+          zIndex={10}
+          pt={{ base: toPx(dimensions.topNavBar.mobile.height), lg: 6, xl: 4 }}
+          spacing={{ base: 0, lg: 6 }}
+          position="fixed"
+          top={0}
         >
-          <Body
-            fontSize={{ base: '16px', md: '20px', lg: '24px', xl: '28px', '3xl': '32px' }}
-            textAlign={'center'}
-            lineHeight={'1.4'}
+          <H1
+            as={Link}
+            to={getPath('guardians')}
+            fontSize={{ base: '32px', md: '48px', lg: '56px', xl: '72px' }}
+            fontWeight={{ base: 'bold', lg: 'normal' }}
+            color={isGuardianCharacterPage ? 'neutral1.9' : 'utils.text'}
           >
-            {t(
-              'Geyser’s mission is to push Bitcoin adoption forward. Geyser Guardians are the defenders of this mission.  Their bravery will be rewarded with rare artifacts. Their names shall be remembered in future epochs. Do you have what it takes to become a Geyser Guardian?',
-            )}
-          </Body>
-          <VStack spacing={0} lineHeight={'1.4'}>
-            <Body
-              fontSize={{ base: '16px', md: '20px', lg: '24px', xl: '28px', '3xl': '32px' }}
-              textAlign={'center'}
-              lineHeight={'1.4'}
-            >
-              {t('Enter your email to be notified – the first 121 Guardians will get a special deal.')}
-            </Body>
-            <Body
-              fontSize={{ base: '16px', md: '20px', lg: '24px', xl: '28px', '3xl': '32px' }}
-              textAlign={'center'}
-              lineHeight={'1.4'}
-            >
-              {t('More will be revealed in ')}
-              <Body as="span" bold>
-                {t(`${days} days, ${hours} hours, ${toInt(seconds)} seconds.`)}
-              </Body>
-            </Body>
-          </VStack>
-
-          <SubscribeGuardians />
+            {t('GEYSER GUARDIANS')}
+          </H1>
         </VStack>
+        <Outlet />
       </VStack>
-      {isMobile ? <MobileGuardiansIllustration /> : <DesktopGuardiansIllustration />}
-    </VStack>
+    </HStack>
   )
 }

src/modules/guardians/components/SubscribeGuardians.tsx

@@ -93,27 +93,27 @@ export const SubscribeGuardians = () => {
   }
 
   return (
-    <Stack direction={{ base: 'column', lg: 'row' }} w={'full'} maxWidth="816px" spacing="16px">
+    <Stack direction={{ base: 'column', lg: 'row' }} w={'full'} maxWidth="816px" spacing={{ base: '8px', lg: '16px' }}>
       <FieldContainer error={error} flex={1}>
         <Input
-          height={{ base: '40px', lg: '56px', xl: '64px' }}
-          fontSize={{ base: '16px', lg: '20px', xl: '24px' }}
+          height={{ base: '32px', md: '40px', lg: '52px', xl: '60px' }}
+          fontSize={{ base: '14px', md: '16px', lg: '20px', xl: '24px' }}
           placeholder="[email protected]"
           value={email}
           onChange={handleChange}
           isDisabled={Boolean(user?.email)}
         />
       </FieldContainer>
       <Button
-        height={{ base: '40px', lg: '56px', xl: '64px' }}
+        height={{ base: '32px', md: '40px', lg: '52px', xl: '60px' }}
         paddingX={6}
         variant="solid"
         backgroundColor="neutral1.12"
         color="gray.1"
         onClick={handleConfirm}
         isLoading={submitting}
         fontFamily={fonts.ptSerif}
-        fontSize={{ base: '16px', md: '20px', lg: '24px', xl: '32px' }}
+        fontSize={{ base: '14px', md: '16px', lg: '20px', xl: '24px' }}
         _hover={{ backgroundColor: 'neutral1.11' }}
       >
         {t('Sign me up')}

src/modules/guardians/index.ts

@@ -1,3 +1,6 @@
 import { Guardians } from './Guardians'
+import { CharacterPage } from './pages/character/CharacterPage'
+import { GuardiansMainPage } from './pages/main/GuardiansMainPage'
+import { Manifesto } from './pages/Manifesto'
 
-export { Guardians }
+export { CharacterPage, Guardians, GuardiansMainPage, Manifesto }

src/modules/guardians/pages/Manifesto.tsx

@@ -0,0 +1,49 @@
+import { HStack, VStack } from '@chakra-ui/react'
+
+import { Body, H1 } from '@/shared/components/typography'
+import { standardPadding } from '@/shared/styles'
+import { fonts } from '@/shared/styles/fonts'
+
+export const Manifesto = () => {
+  return (
+    <HStack w="full" justify={'center'} backgroundColor={'guardians.background'}>
+      <VStack
+        w="full"
+        justifySelf={'center'}
+        fontFamily={fonts.mazius}
+        maxWidth={'1300px'}
+        paddingX={standardPadding}
+        alignItems={'center'}
+        paddingBottom={10}
+        spacing={6}
+      >
+        <H1 fontSize={'60px'}> GEYSER MANIFESTO </H1>
+        <Body fontSize={'28px'}>
+          In a world where nihilism and pessimism about the future prevail, Bitcoin brought us hope. Not just hope for a
+          world built on sound money, but hope in the power of action to create meaningful change. The world is
+          malleable, and individuals have the power to reshape it.
+        </Body>
+        <Body fontSize={'28px'}>
+          The Cypherpunks understood this. They didn’t wait for permission—they built the tools of freedom. In 1993, the
+          Cypherpunk Manifesto declared, “Cypherpunks write code.” In 2009, Satoshi Nakamoto released Bitcoin’s code.
+          Bitcoin was born out of action and a will for change.
+        </Body>
+        <Body fontSize={'28px'}>
+          The vision has always been to lay sound foundations for the digital era—moving away from the predetermined
+          path of totalitarian control and censorship, and towards decentralization, openness, freedom, and
+          self-sovereignty. To bring about unimaginable wealth and human flourishing.
+        </Body>
+        <Body fontSize={'28px'}>
+          For Bitcoin’s sound principles to take hold in the world, change must happen at all layers of society.
+          Developers, educators, writers, filmmakers, artists, and entire communities all have a role to play in
+          building the Bitcoin world. No act is too small—small actions compound into global grassroots movements.
+        </Body>
+        <Body fontSize={'28px'}>
+          Bitcoin is a peaceful revolution—but peaceful does not mean passive. It’s time to act. Are you a Bitcoiner?
+          Then you are the protagonist of this story, and the tools are in your hands.
+        </Body>
+        <Body fontSize={'28px'}>What will you do to help bring about Bitcoin adoption?</Body>
+      </VStack>
+    </HStack>
+  )
+}