Simple profile page

packages/web/components/Container.tsx

@@ -1,7 +1,8 @@
-import { Flex } from '@metafam/ds';
+import { Box, Flex } from '@metafam/ds';
 import React from 'react';
 
 type Props = React.ComponentProps<typeof Flex>;
+type BoxProps = React.ComponentProps<typeof Box>;
 
 export const PageContainer: React.FC<Props> = ({ children, ...props }) => (
   <Flex
@@ -22,3 +23,12 @@ export const FlexContainer: React.FC<Props> = ({ children, ...props }) => (
     {children}
   </Flex>
 );
+
+export const MaxWidthContainer: React.FC<BoxProps> = ({
+  children,
+  ...props
+}) => (
+  <Box w="100%" maxW="1358px" mx="auto" px="2rem" {...props}>
+    {children}
+  </Box>
+);

packages/web/components/PageHeader.tsx

@@ -0,0 +1,27 @@
+import { Button, ButtonGroup, Flex, Image } from '@metafam/ds';
+import { MetaLink } from 'components/Link';
+import React from 'react';
+
+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} />
+    </MetaLink>
+    <ButtonGroup spacing="3rem">
+      <Button variant="link" color="offwhite">
+        Quests
+      </Button>
+      <Button variant="link" color="offwhite">
+        Raids
+      </Button>
+      <Button variant="link" color="offwhite">
+        Players
+      </Button>
+      <Button variant="link" color="offwhite">
+        Forum
+      </Button>
+    </ButtonGroup>
+  </Flex>
+);