add features section

packages/web/components/PageHeader.tsx

@@ -7,7 +7,7 @@ import MetaGameImage from '../public/images/metagame.png';
 export const PageHeader: React.FC = () => (
   <Flex align="center" pt="1rem" pb="2rem" px="2rem">
     <MetaLink as="/" href="/" display="block" mr="2rem">
-      <Image src={MetaGameImage} />
+      <Image src={MetaGameImage} alt="MetaGame" />
     </MetaLink>
     <ButtonGroup spacing="3rem">
       <Button variant="link" color="offwhite">

packages/web/components/Player/PlayerFeature.tsx

@@ -0,0 +1,22 @@
+import { Box, Text } from '@metafam/ds';
+import React from 'react';
+
+type Props = { title: string; value?: string | null | undefined };
+
+export const PlayerFeature: React.FC<Props> = ({ title, value, children }) => (
+  <Box>
+    <Text
+      fontFamily="body"
+      fontSize="sm"
+      fontWeight="bold"
+      color="blueLight"
+      textTransform="uppercase"
+      mb="0.5rem"
+    >
+      {title}
+    </Text>
+    <Text fontFamily="body" fontSize="md" fontWeight="bold">
+      {value || children}
+    </Text>
+  </Box>
+);

packages/web/components/Player/PlayerFeatures.tsx

@@ -0,0 +1,36 @@
+import { Badge, Divider, Wrap } from '@metafam/ds';
+import { MaxWidthContainer } from 'components/Container';
+import { PlayerFeature } from 'components/Player/PlayerFeature';
+import { PlayerFragmentFragment } from 'graphql/autogen/types';
+import React from 'react';
+
+type Props = { player: PlayerFragmentFragment };
+
+export const PlayerFeatures: React.FC<Props> = ({ player }) => {
+  return (
+    <MaxWidthContainer>
+      <Wrap
+        spacing="2rem"
+        ml={[0, 0, 0, '15rem']}
+        pt={['3rem', '3rem', '3rem', 0]}
+      >
+        <PlayerFeature
+          title="XP"
+          value={Math.floor(player.totalXp).toString()}
+        />
+        <Divider orientation="vertical" color="#554671" />
+        <PlayerFeature title="Level">
+          <Badge backgroundColor={player.rank?.toLowerCase()} fontSize="sm">
+            {player.rank}
+          </Badge>
+        </PlayerFeature>
+        <Divider orientation="vertical" color="#554671" />
+        <PlayerFeature title="Role" value="Define your role" />
+        <Divider orientation="vertical" color="#554671" />
+        <PlayerFeature title="Timezone" value="Define your timezone" />
+        <Divider orientation="vertical" color="#554671" />
+        <PlayerFeature title="Availability" value="20h / week" />
+      </Wrap>
+    </MaxWidthContainer>
+  );
+};

packages/web/components/Player/PlayerHero.tsx

@@ -0,0 +1,35 @@
+import { Avatar, Box, Flex, Text } from '@metafam/ds';
+import { MaxWidthContainer } from 'components/Container';
+import { PlayerFragmentFragment } from 'graphql/autogen/types';
+import BackgroundImage from 'public/images/login-background.jpg';
+import React from 'react';
+import { getPlayerImage, getPlayerName } from 'utils/playerHelpers';
+
+type Props = { player: PlayerFragmentFragment };
+
+export const PlayerHero: React.FC<Props> = ({ player }) => {
+  return (
+    <Box bgImage={`url(${BackgroundImage})`} h="230px" mb="1.5rem">
+      <MaxWidthContainer>
+        <Flex pos="relative" top="4.5rem" align="center">
+          <Avatar
+            size="3xl"
+            w="12.5rem"
+            h="12.5rem"
+            src={getPlayerImage(player)}
+            name={getPlayerName(player)}
+          />
+
+          <Box pl="2.5rem" mt="-2rem">
+            <Text fontSize="xl" fontFamily="heading" mb="0.25rem">
+              {getPlayerName(player)}
+            </Text>
+            <Text fontFamily="body" fontSize="md" textTransform="uppercase">
+              Personality type
+            </Text>
+          </Box>
+        </Flex>
+      </MaxWidthContainer>
+    </Box>
+  );
+};