make all card images square & clickable

packages/design-system/src/MetaTile.tsx

@@ -51,14 +51,12 @@ export const MetaTile: React.FC<FlexProps & MetaTileProps> = ({
     // @ts-ignore
     VanillaTilt.init(element);
   }
-  console.log('props.noTilt', props.noTilt);
+
   return (
     <div
       className={props.noTilt ? '' : 'js-tilt'}
       data-tilt-scale="1.03"
       data-tilt-max="6"
-      data-tilt-glare="true"
-      data-tilt-max-glare="0.3"
       data-tilt-speed="800"
       data-tilt-easing="cubic-bezier(.03,.98,.52,.99)"
       style={{

packages/web/components/Guild/GuildTile.tsx

@@ -1,9 +1,7 @@
 import {
   Flex,
   Heading,
-  Image,
   Link,
-  LinkBox,
   MetaTag,
   MetaTile,
   MetaTileBody,
@@ -11,8 +9,8 @@ import {
   Text,
   VStack,
 } from '@metafam/ds';
+import { SquareImage } from 'components/SquareImage';
 import { GuildFragment } from 'graphql/autogen/types';
-import NextLink from 'next/link';
 import React from 'react';
 import { optimizedImage } from 'utils/imageHelpers';
 
@@ -23,80 +21,64 @@ type Props = {
 };
 
 export const GuildTile: React.FC<Props> = ({ guild }) => (
-  <LinkBox>
+  <Link
+    role="group"
+    _hover={{ textDecoration: 'none' }}
+    href={`/guild/${guild.guildname}`}
+  >
     <MetaTile>
-      <NextLink
-        as={`/guild/${guild.guildname}`}
-        href="/guild/[guildname]"
-        passHref
-      >
-        <Link
-          _hover={{
-            textUnderline: 'none',
-          }}
-          display="flex"
-          flexDirection="column"
-          height="100%"
-        >
-          <MetaTileHeader>
-            <VStack pos="relative" h="22rem" justifyContent="center" p={4}>
-              {guild.logo ? (
-                <Image
-                  src={optimizedImage('logoURL', guild.logo)}
-                  borderTopRadius={10}
-                />
-              ) : null}
+      <MetaTileHeader>
+        {guild.logo ? (
+          <SquareImage src={optimizedImage('logoURL', guild.logo)} />
+        ) : null}
 
-              <Flex px={3} w="full" pos="absolute" bottom={-6} zIndex={1}>
-                <Heading
-                  size="lg"
-                  color="white"
-                  bgColor="rgba(255, 255, 255, 0.06)"
-                  style={{ backdropFilter: 'blur(10px)' }}
-                  lineHeight={1.8}
-                  justifyContent="center"
-                  px={3}
-                  width="full"
-                  textAlign="center"
-                  borderRadius={10}
-                  fontFamily="body"
-                  fontWeight={400}
-                >
-                  {guild.name}
-                </Heading>
-              </Flex>
+        <Flex px={3} w="full" pos="absolute" bottom={-6} zIndex={1}>
+          <Heading
+            size="lg"
+            color="white"
+            bgColor="rgba(255, 255, 255, 0.06)"
+            style={{ backdropFilter: 'blur(10px)' }}
+            lineHeight={1.8}
+            justifyContent="center"
+            px={3}
+            width="full"
+            textAlign="center"
+            borderRadius={10}
+            fontFamily="body"
+            fontWeight={400}
+          >
+            {guild.name}
+          </Heading>
+        </Flex>
+      </MetaTileHeader>
+      <MetaTileBody justifyContent="space-between">
+        <Flex flexDir="column" gap={2}>
+          {guild.description ? (
+            <VStack spacing={2} align="stretch">
+              <Text textStyle="caption">ABOUT</Text>
+              <Text fontSize="sm">{guild.description}</Text>
             </VStack>
-          </MetaTileHeader>
-          <MetaTileBody justifyContent="space-between">
-            <Flex flexDir="column" gap={2}>
-              {guild.description ? (
-                <VStack spacing={2} align="stretch">
-                  <Text textStyle="caption">ABOUT</Text>
-                  <Text fontSize="sm">{guild.description}</Text>
-                </VStack>
-              ) : null}
-              <VStack spacing={2} align="stretch" mb={1}>
-                <Text textStyle="caption">Type</Text>
-                {guild.type ? (
-                  <MetaTag size="sm" fontWeight="normal" w="fit-content">
-                    {guild.type} GUILD
-                  </MetaTag>
-                ) : null}
-              </VStack>
-              <Flex justifyContent="space-between">
-                <VStack spacing={2} align="stretch">
-                  <Text textStyle="caption">BARRIER OF ENTRY</Text>
-                  <Text fontStyle="italic">Coming soon...</Text>
-                </VStack>
-                <VStack spacing={2} align="stretch">
-                  <Text textStyle="caption">CONTACT</Text>
-                  <GuildLinksSmall {...{ guild }} />
-                </VStack>
-              </Flex>
-            </Flex>
-          </MetaTileBody>
-        </Link>
-      </NextLink>
+          ) : null}
+          <VStack spacing={2} align="stretch" mb={1}>
+            <Text textStyle="caption">Type</Text>
+            {guild.type ? (
+              <MetaTag size="sm" fontWeight="normal" w="fit-content">
+                {guild.type} GUILD
+              </MetaTag>
+            ) : null}
+          </VStack>
+          <Flex justifyContent="space-between">
+            <VStack spacing={2} align="stretch">
+              <Text textStyle="caption">BARRIER OF ENTRY</Text>
+              <Text fontStyle="italic">Coming soon...</Text>
+            </VStack>
+            <VStack spacing={2} align="stretch">
+              <Text textStyle="caption">CONTACT</Text>
+              <GuildLinksSmall {...{ guild }} />
+            </VStack>
+          </Flex>
+        </Flex>
+      </MetaTileBody>
     </MetaTile>
-  </LinkBox>
+  </Link>
 );

packages/web/components/Player/PlayerProfilePicture.tsx

@@ -1,9 +1,10 @@
-import { AvatarProps, Image } from '@metafam/ds';
+import { AvatarProps } from '@metafam/ds';
+import { SquareImage } from 'components/SquareImage';
 import { Player } from 'graphql/autogen/types';
 import { GuildPlayer } from 'graphql/types';
 import { useProfileField } from 'lib/hooks';
 import React from 'react';
-import { getPlayerImage, getPlayerName, hasImage } from 'utils/playerHelpers';
+import { getPlayerImage } from 'utils/playerHelpers';
 
 type PlayerProfilePictureProps = AvatarProps & {
   player?: Player | GuildPlayer;
@@ -12,7 +13,6 @@ type PlayerProfilePictureProps = AvatarProps & {
 export const PlayerProfilePicture: React.FC<PlayerProfilePictureProps> = ({
   player: user,
   src,
-  ...props
 }) => {
   const player = user as Player;
   const { value: image } = useProfileField({
@@ -20,24 +20,8 @@ export const PlayerProfilePicture: React.FC<PlayerProfilePictureProps> = ({
     player,
     getter: getPlayerImage,
   });
-  const { name } = useProfileField({
-    field: 'name',
-    player,
-    getter: getPlayerName,
-  });
-  const attrs = {
-    src: src ?? image ?? undefined,
-    name: name ?? undefined,
-    color: 'white',
-    borderTopRadius: 10,
-    margin: '0 !important',
-    width: '100%',
-    ...props,
-  };
 
-  if (src || hasImage(player)) {
-    attrs.bg = 'transparent';
-  }
+  const pic = src ?? image ?? undefined;
 
-  return <Image {...attrs} />;
+  return <SquareImage src={pic} />;
 };

packages/web/components/Player/PlayerRank.tsx

@@ -21,6 +21,7 @@ export const PlayerRank: React.FC<PlayerRankProps> = ({
     background="rgba(255, 255, 255, 0.1)"
     backdropFilter="blur(10.5px)"
     borderRadius="8px"
+    zIndex={1}
   >
     {showSeasonalXP && (
       <Text fontSize="sm" color="blueLight">

packages/web/components/Player/PlayerTile.tsx

@@ -3,7 +3,6 @@ import {
   Heading,
   HStack,
   Link,
-  LinkBox,
   LoadingState,
   MetaTile,
   MetaTileBody,
@@ -20,7 +19,6 @@ import { SkillsTags } from 'components/Quest/Skills';
 import { Player, Skill } from 'graphql/autogen/types';
 import { getAllMemberships, GuildMembership } from 'graphql/getMemberships';
 import { Patron } from 'graphql/types';
-import NextLink from 'next/link';
 import React, { useEffect, useState } from 'react';
 import {
   getPlayerDescription,
@@ -67,99 +65,94 @@ export const PlayerTile: React.FC<Props> = ({
   }, [player]);
 
   return (
-    <LinkBox height="full" width="full">
-      <MetaTile height="full" width="full">
-        <NextLink as={getPlayerURL(player)} href="/player/[username]" passHref>
-          <Link
-            display="flex"
-            flexDirection="column"
-            height="100%"
-            _hover={{
-              textUnderline: 'none',
-            }}
-          >
-            <MetaTileHeader>
-              {isPatron && typeof index === 'number' && pSeedPrice ? (
-                <PatronRank
-                  patron={player as Patron}
-                  pSeedPrice={pSeedPrice}
-                  index={index}
+    <Link
+      role="group"
+      _hover={{ textDecoration: 'none' }}
+      href={getPlayerURL(player)}
+    >
+      <MetaTile height="full" width="full" cursor="pointer">
+        <MetaTileHeader>
+          {isPatron && typeof index === 'number' && pSeedPrice ? (
+            <PatronRank
+              patron={player as Patron}
+              pSeedPrice={pSeedPrice}
+              index={index}
+            />
+          ) : (
+            <PlayerRank player={player} showSeasonalXP={showSeasonalXP} />
+          )}
+          <PlayerProfilePicture {...{ player }} size="xl" />
+          <Flex px={3} w="full" pos="absolute" bottom={-6} zIndex={1}>
+            <Heading
+              size="lg"
+              color="white"
+              bgColor="rgba(255, 255, 255, 0.06)"
+              style={{ backdropFilter: 'blur(10px)' }}
+              lineHeight={1.8}
+              justifyContent="center"
+              px={3}
+              width="full"
+              textAlign="center"
+              borderRadius={10}
+              fontFamily="body"
+              fontWeight={400}
+            >
+              {getPlayerName(player)}
+            </Heading>
+          </Flex>
+        </MetaTileHeader>
+        <MetaTileBody pos="relative" height="full">
+          <Flex flexDir="column" mb="auto">
+            {displayDescription && (
+              <VStack spacing={2} align="stretch">
+                <Text textStyle="caption">ABOUT</Text>
+                <Text fontSize="sm">{displayDescription}</Text>
+              </VStack>
+            )}
+            {!!player.skills?.length && (
+              <VStack spacing={2} align="stretch">
+                <Text textStyle="caption">SKILLS</Text>
+                <SkillsTags
+                  skills={
+                    player.skills.map(({ Skill: skill }) => skill) as Skill[]
+                  }
                 />
-              ) : (
-                <PlayerRank player={player} showSeasonalXP={showSeasonalXP} />
-              )}
-              <PlayerProfilePicture {...{ player }} size="xl" />
-              <Flex px={3} w="full" pos="absolute" bottom={-6} zIndex={1}>
-                <Heading
-                  size="lg"
-                  color="white"
-                  bgColor="rgba(255, 255, 255, 0.06)"
-                  style={{ backdropFilter: 'blur(10px)' }}
-                  lineHeight={1.8}
-                  justifyContent="center"
-                  px={3}
-                  width="full"
-                  textAlign="center"
-                  borderRadius={10}
-                  fontFamily="body"
-                  fontWeight={400}
-                >
-                  {getPlayerName(player)}
-                </Heading>
-              </Flex>
-            </MetaTileHeader>
-            <MetaTileBody pos="relative" height="full">
-              {displayDescription && (
-                <VStack spacing={2} align="stretch">
-                  <Text textStyle="caption">ABOUT</Text>
-                  <Text fontSize="sm">{displayDescription}</Text>
-                </VStack>
-              )}
-              {player.skills?.length && (
-                <VStack spacing={2} align="stretch">
-                  <Text textStyle="caption">SKILLS</Text>
-                  <SkillsTags
-                    skills={
-                      player.skills.map(({ Skill: skill }) => skill) as Skill[]
-                    }
-                  />
-                </VStack>
-              )}
+              </VStack>
+            )}
 
-              <PlayerTileMemberships {...{ player }} />
+            <PlayerTileMemberships {...{ player }} />
+          </Flex>
 
-              <Flex justifyContent="space-between" pointerEvents="none">
-                {!!memberships.length && (
-                  <VStack spacing={2} align="stretch">
-                    <Text textStyle="caption">MEMBER OF</Text>
-                    <HStack mt={2} position="relative" zIndex={1}>
-                      {loading && <LoadingState mb={6} />}
-                      {!loading &&
-                        memberships
-                          .slice(0, 3)
-                          .map((membership) => (
-                            <DAOMembershipSmall
-                              {...{ membership }}
-                              key={membership.address}
-                            />
-                          ))}
-                    </HStack>
-                  </VStack>
-                )}
+          <Flex justifyContent="space-between" pointerEvents="none">
+            {!!memberships.length && (
+              <VStack spacing={2} align="stretch">
+                <Text textStyle="caption">MEMBER OF</Text>
+                <HStack mt={2} position="relative" zIndex={1}>
+                  {loading && <LoadingState mb={6} />}
+                  {!loading &&
+                    memberships
+                      .slice(0, 3)
+                      .map((membership) => (
+                        <DAOMembershipSmall
+                          {...{ membership }}
+                          key={membership.address}
+                        />
+                      ))}
+                </HStack>
+              </VStack>
+            )}
 
-                {!!player.accounts?.length && (
-                  <VStack spacing={2} align="stretch">
-                    <Text textStyle="caption">CONTACT</Text>
-                    <HStack mt={2} pointerEvents="all">
-                      <PlayerContacts {...{ player }} disableBrightId />
-                    </HStack>
-                  </VStack>
-                )}
-              </Flex>
-            </MetaTileBody>
-          </Link>
-        </NextLink>
+            {!!player.accounts?.length && (
+              <VStack spacing={2} align="stretch">
+                <Text textStyle="caption">CONTACT</Text>
+                <HStack mt={2} pointerEvents="all">
+                  <PlayerContacts {...{ player }} disableBrightId />
+                </HStack>
+              </VStack>
+            )}
+          </Flex>
+        </MetaTileBody>
       </MetaTile>
-    </LinkBox>
+    </Link>
   );
 };

packages/web/components/Quest/QuestTile.tsx

@@ -3,7 +3,6 @@ import {
   Flex,
   Heading,
   HStack,
-  Image,
   Link,
   MetaTile,
   MetaTileBody,
@@ -17,6 +16,7 @@ import { MarkdownViewer as Markdown } from 'components/MarkdownViewer';
 import { RepetitionTag, StatusTag } from 'components/Quest/QuestTags';
 import { RolesTags } from 'components/Quest/Roles';
 import { SkillsTags } from 'components/Quest/Skills';
+import { SquareImage } from 'components/SquareImage';
 import { PlayerRole, QuestFragment, Skill } from 'graphql/autogen/types';
 import moment from 'moment';
 import { safelyParseNChakrifyHtml } from 'utils/stringHelpers';
@@ -36,98 +36,85 @@ export const QuestTile: React.FC<Props> = ({ quest }) => {
     : '';
 
   return (
-    <MetaLink
-      display="flex"
-      color="white"
-      as={`/quest/${quest.id}`}
-      href="/quest/[id]"
-      _hover={{ borderColor: 'transparent' }}
+    <Link
+      role="group"
+      _hover={{ textDecoration: 'none' }}
+      href={`/quest/${quest.id}`}
     >
       <MetaTile height="full" width="full">
-        <Link
-          display="flex"
-          flexDirection="column"
-          height="100%"
-          _hover={{
-            textUnderline: 'none',
-          }}
-        >
-          <MetaTileHeader>
-            <Image src={BackgroundImage} mt="0 !important" />
-            <Flex px={3} w="full" pos="absolute" bottom={-6} zIndex={1}>
-              <Heading
-                size="lg"
-                color="white"
-                bgColor="rgba(255, 255, 255, 0.06)"
-                style={{ backdropFilter: 'blur(10px)' }}
-                lineHeight={1.8}
-                justifyContent="center"
-                px={3}
-                width="full"
-                textAlign="center"
-                borderRadius={10}
-                fontFamily="body"
-                fontWeight={400}
-              >
-                {quest.title}
-              </Heading>
-            </Flex>
-          </MetaTileHeader>
-          <MetaTileBody>
-            <HStack mt={3}>
-              <RepetitionTag
-                repetition={quest.repetition}
-                cooldown={quest.cooldown}
-              />
-              <StatusTag status={quest.status} />
-              <Text>
-                <i>{moment(quest.createdAt).fromNow()}</i>
+        <MetaTileHeader>
+          <SquareImage src={BackgroundImage} />
+          <Flex px={3} w="full" pos="absolute" bottom={-6} zIndex={1}>
+            <Heading
+              size="lg"
+              color="white"
+              bgColor="rgba(255, 255, 255, 0.06)"
+              style={{ backdropFilter: 'blur(10px)' }}
+              lineHeight={1.8}
+              justifyContent="center"
+              px={3}
+              width="full"
+              textAlign="center"
+              borderRadius={10}
+              fontFamily="body"
+              fontWeight={400}
+            >
+              {quest.title}
+            </Heading>
+          </Flex>
+        </MetaTileHeader>
+        <MetaTileBody>
+          <HStack mt={3}>
+            <RepetitionTag
+              repetition={quest.repetition}
+              cooldown={quest.cooldown}
+            />
+            <StatusTag status={quest.status} />
+            <Text>
+              <i>{moment(quest.createdAt).fromNow()}</i>
+            </Text>
+          </HStack>
+          <Flex flexDir="column">
+            <Box pb={2}>
+              <Text textStyle="caption" pb={1}>
+                DESCRIPTION
               </Text>
-            </HStack>
-            <Flex flexDir="column">
-              <Box pb={2}>
-                <Text textStyle="caption" pb={1}>
-                  DESCRIPTION
-                </Text>
-                {descIsHtml ? (
-                  <Prose>{parsedDescription}</Prose>
-                ) : (
-                  <Markdown>{descriptionSummary}</Markdown>
-                )}
-                <MetaLink as={`/quest/${quest.id}`} href="/quest/[id]">
-                  Read more
-                </MetaLink>
-              </Box>
-              <Box pb={2}>
-                <Text textStyle="caption" pb={1}>
-                  SKILLS
-                </Text>
-                <SkillsTags
-                  skills={
-                    quest.quest_skills.map(({ skill }) => skill) as Skill[]
+              {descIsHtml ? (
+                <Prose>{parsedDescription}</Prose>
+              ) : (
+                <Markdown>{descriptionSummary}</Markdown>
+              )}
+              <MetaLink as={`/quest/${quest.id}`} href="/quest/[id]">
+                Read more
+              </MetaLink>
+            </Box>
+            <Box pb={2}>
+              <Text textStyle="caption" pb={1}>
+                SKILLS
+              </Text>
+              <SkillsTags
+                skills={quest.quest_skills.map(({ skill }) => skill) as Skill[]}
+              />
+            </Box>
+            <Box pb={2}>
+              <Text textStyle="caption" pb={1}>
+                ROLES
+              </Text>
+              {quest.quest_roles.length ? (
+                <RolesTags
+                  roles={
+                    quest.quest_roles.map(
+                      ({ PlayerRole: r }) => r,
+                    ) as PlayerRole[]
                   }
                 />
-              </Box>
-              <Box pb={2}>
-                <Text textStyle="caption" pb={1}>
-                  ROLES
-                </Text>
-                {quest.quest_roles.length ? (
-                  <RolesTags
-                    roles={
-                      quest.quest_roles.map(
-                        ({ PlayerRole: r }) => r,
-                      ) as PlayerRole[]
-                    }
-                  />
-                ) : (
-                  <Text>/</Text>
-                )}
-              </Box>
-            </Flex>
-          </MetaTileBody>
-        </Link>
+              ) : (
+                <Text>/</Text>
+              )}
+            </Box>
+          </Flex>
+        </MetaTileBody>
       </MetaTile>
-    </MetaLink>
+    </Link>
   );
 };

packages/web/components/SquareImage.tsx

@@ -0,0 +1,28 @@
+import { AvatarProps, Flex } from '@metafam/ds';
+import React from 'react';
+
+type SquareImageProps = AvatarProps & {
+  src?: string;
+};
+
+export const SquareImage: React.FC<SquareImageProps> = ({ src }) => (
+  <Flex
+    position="relative"
+    // marginTop="0 !important"
+    _after={{
+      content: '""',
+      display: 'block',
+      paddingBottom: '100%',
+    }}
+  >
+    <img
+      style={{
+        position: 'absolute',
+        width: '100%',
+        height: '100%',
+        objectFit: 'cover',
+      }}
+      src={src}
+    />
+  </Flex>
+);

packages/web/pages/roles.tsx

@@ -14,8 +14,8 @@ import {
 } from '@metafam/ds';
 import LogoImage from 'assets/logo.png';
 import { PageContainer } from 'components/Container';
-import { MetaLink } from 'components/Link';
 import { HeadComponent } from 'components/Seo';
+import { SquareImage } from 'components/SquareImage';
 import { Difficulty, QuestChainDetails, Time } from 'utils/questChains';
 
 const QuestsDashboard: React.FC = () => (
@@ -95,93 +95,79 @@ const Card: React.FC<CardProps> = ({
   }
 
   return (
-    <MetaLink
-      display="flex"
-      color="white"
-      href={link}
-      _hover={{ borderColor: 'transparent' }}
-    >
+    <Link role="group" _hover={{ textDecoration: 'none' }} href={link}>
       <MetaTile height="full" width="full">
-        <Link
-          display="flex"
-          flexDirection="column"
-          height="100%"
-          _hover={{
-            textUnderline: 'none',
-          }}
-        >
-          <MetaTileHeader>
-            <Flex
-              flexDir="column"
-              gap={1}
-              pos="absolute"
-              left={-8}
-              py={3}
-              px={4}
-              top={-8}
-              background="rgba(255, 255, 255, 0.1)"
-              backdropFilter="blur(10.5px)"
-              borderRadius="8px"
-              alignItems="center"
+        <MetaTileHeader>
+          <Flex
+            flexDir="column"
+            gap={1}
+            pos="absolute"
+            left={-8}
+            py={3}
+            px={4}
+            top={-8}
+            background="rgba(255, 255, 255, 0.1)"
+            backdropFilter="blur(10.5px)"
+            borderRadius="8px"
+            alignItems="center"
+          >
+            <Image w="2.5rem" src={LogoImage} />
+            <Text
+              fontFamily="Exo 2"
+              fontSize="xs"
+              color="blueLight"
+              fontWeight="bold"
             >
-              <Image w="2.5rem" src={LogoImage} />
-              <Text
-                fontFamily="Exo 2"
-                fontSize="xs"
-                color="blueLight"
-                fontWeight="bold"
-              >
-                MetaGame
-              </Text>
-            </Flex>
-            <Image p={6} src={icon} mt="0 !important" />
-            <Flex px={3} w="full" pos="absolute" bottom={-6} zIndex={1}>
-              <Heading
-                size="lg"
-                color="white"
-                bgColor="rgba(255, 255, 255, 0.06)"
-                style={{ backdropFilter: 'blur(10px)' }}
-                lineHeight={1.8}
-                justifyContent="center"
-                px={3}
-                width="full"
-                textAlign="center"
-                borderRadius={10}
-                fontFamily="body"
-                fontWeight={400}
-              >
-                {title}
-              </Heading>
-            </Flex>
-          </MetaTileHeader>
-          <MetaTileBody pos="relative" height="full">
-            <Flex flexDir="column">
-              <Text textStyle="caption">ABOUT</Text>
+              MetaGame
+            </Text>
+          </Flex>
+          <SquareImage p={6} src={icon} mt="0 !important" />
+          <Flex px={3} w="full" pos="absolute" bottom={-6} zIndex={1}>
+            <Heading
+              size="lg"
+              color="white"
+              bgColor="rgba(255, 255, 255, 0.06)"
+              style={{ backdropFilter: 'blur(10px)' }}
+              lineHeight={1.8}
+              justifyContent="center"
+              px={3}
+              width="full"
+              textAlign="center"
+              borderRadius={10}
+              fontFamily="body"
+              fontWeight={400}
+            >
+              {title}
+            </Heading>
+          </Flex>
+        </MetaTileHeader>
+        <MetaTileBody pos="relative" height="full">
+          <Flex flexDir="column">
+            <Text textStyle="caption">ABOUT</Text>
 
-              <Text mb={2} h="3rem">
-                {description}
-              </Text>
-            </Flex>
-            <Flex justifyContent="space-between">
-              <VStack spacing={2} align="stretch">
-                <Text textStyle="caption">Difficulty</Text>
-                <Box>
-                  <MetaTag size="md" fontSize="sm" bgColor={difficultyBgColor}>
-                    <Text>{difficulty}</Text>
-                  </MetaTag>
-                </Box>
-              </VStack>
-              <VStack spacing={2} align="stretch">
-                <Text textStyle="caption">Time</Text>
-                <MetaTag size="md" fontSize="sm" bgColor={timeBgColor}>
-                  <Text>{time}</Text>
+            <Text mb={2} h="3rem">
+              {description}
+            </Text>
+          </Flex>
+          <Flex justifyContent="space-between">
+            <VStack spacing={2} align="stretch">
+              <Text textStyle="caption">Difficulty</Text>
+              <Box>
+                <MetaTag size="md" fontSize="sm" bgColor={difficultyBgColor}>
+                  <Text>{difficulty}</Text>
                 </MetaTag>
-              </VStack>
-            </Flex>
-          </MetaTileBody>
-        </Link>
+              </Box>
+            </VStack>
+            <VStack spacing={2} align="stretch">
+              <Text textStyle="caption">Time</Text>
+              <MetaTag size="md" fontSize="sm" bgColor={timeBgColor}>
+                <Text>{time}</Text>
+              </MetaTag>
+            </VStack>
+          </Flex>
+        </MetaTileBody>
       </MetaTile>
-    </MetaLink>
+    </Link>
   );
 };