Finish plugin card integration

packages/core/admin/admin/src/pages/MarketplacePage/PluginCard/index.js

@@ -4,26 +4,70 @@ import styled from 'styled-components';
 import { Box } from '@strapi/design-system/Box';
 import { Stack } from '@strapi/design-system/Stack';
 import { Typography } from '@strapi/design-system/Typography';
+import { Button } from '@strapi/design-system/Button';
+import { LinkButton } from '@strapi/design-system/LinkButton';
+import { Flex } from '@strapi/design-system/Flex';
+import ExternalLink from '@strapi/icons/ExternalLink';
+import Duplicate from '@strapi/icons/Duplicate';
 
-const Logo = styled.img`
+const Wrapper = styled(Box)`
+  .logo {
     display: block;
     width: 64px;
     height: 64px;
     object-fit: contain;
     border-radius: 6px;
+  }
+
+  .name {
+    display: block;
+    margin-top: ${({ theme }) => theme.spaces[5]};
+  }
+
+  .description {
+    margin-top: ${({ theme }) => theme.spaces[3]};
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    overflow: hidden;
+  }
 `;
 
 const PluginCard = ({ plugin }) => {
   const { id, attributes } = plugin;
 
   return (
-    <Box padding={5} hasRadius background="neutral0" key={id} shadow="tableShadow">
-      <Stack size={5}>
-        <Logo src={attributes.logo.url} alt={`${attributes.name} logo`} />
-        <Typography variant="delta">{attributes.name}</Typography>
-        <Typography variant="omega">{attributes.description}</Typography>
+    <Wrapper padding={5} hasRadius background="neutral0" key={id} shadow="tableShadow">
+      <Flex
+        justifyContent="space-between"
+        direction="column"
+        alignItems="flex-end"
+        style={{ height: '100%' }}
+      >
+        <div style={{ width: '100%' }}>
+          <img className="logo" src={attributes.logo.url} alt={`${attributes.name} logo`} />
+          <Typography variant="delta" className="name">
+            {attributes.name}
+          </Typography>
+          <Typography variant="omega" className="description" textColor="neutral600">
+            {attributes.description}
+          </Typography>
+        </div>
+        <Stack horizontal size={2} paddingTop={3}>
+          <LinkButton
+            size="S"
+            href={`https://market.strapi.io/plugins/${attributes.slug}`}
+            endIcon={<ExternalLink />}
+            variant="tertiary"
+          >
+            Learn more
+          </LinkButton>
+          <Button size="S" endIcon={<Duplicate />} variant="secondary">
+            Copy install command
+          </Button>
         </Stack>
-    </Box>
+      </Flex>
+    </Wrapper>
   );
 };