add elders

packages/web/components/Landing/UserGrid.tsx

@@ -3,13 +3,20 @@ import { PlayerProfilePicture } from 'components/Player/PlayerProfilePicture';
 import { SquareImage } from 'components/SquareImage';
 import { GuildFragment, Player } from 'graphql/autogen/types';
 import React from 'react';
-import { formatAddress, formatIfAddress } from 'utils/playerHelpers';
+import { formatAddress } from 'utils/playerHelpers';
+
+type Elder = {
+  name: string;
+  img: string;
+  link: string;
+};
 
 export const UserGrid: React.FC<{
   players?: Player[];
   guilds?: GuildFragment[];
+  elders?: Elder[];
   link?: string;
-}> = ({ players, guilds, link }) => (
+}> = ({ players, guilds, elders, link }) => (
   <Box
     sx={{
       display: 'flex',
@@ -41,7 +48,7 @@ export const UserGrid: React.FC<{
 
     {guilds?.map((guild, i) => (
       <Box
-        key={`user-${i}`}
+        key={`guild-user-${i}`}
         sx={{
           width: '20%',
           marginRight: '5%',
@@ -56,6 +63,28 @@ export const UserGrid: React.FC<{
         <Text sx={{ fontSize: 'xss' }}>{guild.guildname}</Text>
       </Box>
     ))}
+
+    {elders?.map((elder, i) => (
+      <Link
+        role="group"
+        _hover={{ textDecoration: 'none' }}
+        href={elder.link}
+        sx={{
+          width: '20%',
+          marginRight: '5%',
+          marginBottom: '10px',
+        }}
+      >
+        <Box key={`elder-user-${i}`}>
+          <SquareImage
+            size="xxs"
+            sx={{ borderRadius: '50px' }}
+            src={elder.img || ''}
+          />
+          <Text sx={{ fontSize: 'xss' }}>{elder.name}</Text>
+        </Box>
+      </Link>
+    ))}
     <Box
       sx={{
         width: '20%',

packages/web/components/Landing/WhoAreWe.tsx

@@ -21,6 +21,44 @@ import { LandingPageSectionProps } from './landingSection';
 import { Rain } from './OnboardingGame/Rain';
 import { UserGrid } from './UserGrid';
 
+const elders = [
+  {
+    name: 'Griff Green',
+    img: 'https://pbs.twimg.com/profile_images/1639672195981926401/FecL3AYi_400x400.jpg',
+    link: 'https://twitter.com/thegrifft',
+  },
+  {
+    name: 'mZ -- Planeswalker',
+    img: 'https://pbs.twimg.com/profile_images/1444846865242103816/Qp3oy1Ox_400x400.jpg',
+    link: 'https://twitter.com/mZargham',
+  },
+  {
+    name: 'James Young',
+    img: 'https://pbs.twimg.com/profile_images/1441126892623458304/dxwcOlSg_400x400.jpg',
+    link: 'https://twitter.com/jamesyoung',
+  },
+  {
+    name: 'Hanzi Freinacht',
+    img: 'https://pbs.twimg.com/profile_images/1339720086261800960/vdrivSWI_400x400.jpg',
+    link: 'https://twitter.com/HFreinacht',
+  },
+  {
+    name: 'You?',
+    img: 'https://i.imgur.com/tdi3NGa.png',
+    link: '',
+  },
+  {
+    name: 'You?',
+    img: 'https://i.imgur.com/tdi3NGa.png',
+    link: '',
+  },
+  {
+    name: 'You?',
+    img: 'https://i.imgur.com/tdi3NGa.png',
+    link: '',
+  },
+];
+
 interface LandingPageSectionPropsWithPatronsGuildsAndElders
   extends LandingPageSectionProps {
   patrons: Patron[];
@@ -171,7 +209,7 @@ export const WhoAreWe: React.FC<
               <Text as="h3">
                 <Text as="span">03</Text>Elders (Advisors)
               </Text>
-              {patrons && <UserGrid players={patrons} link={'/players'} />}
+              {patrons && <UserGrid elders={elders} link={'/players'} />}
             </ListItem>
             <ListItem gridArea="fourth" justifySelf="end">
               <Text as="h3">