Tweak cards + add links

packages/website/ts/components/card.tsx

@@ -1,46 +1,70 @@
+import * as _ from 'lodash';
 import * as React from 'react';
 import styled from 'styled-components';
 
 import { colors } from 'ts/style/colors';
 
+import { Button } from 'ts/components/button';
 import { Icon } from 'ts/components/icon';
 import { Heading, Paragraph } from 'ts/components/text';
 
+export interface LinkProps {
+    text: string;
+    url: string;
+}
+
 interface CardProps {
     icon: string;
     heading: string;
     description: string;
     href?: string;
+    links?: LinkProps[];
 }
 
 export const Card: React.StatelessComponent<CardProps> = (props: CardProps) => {
-    const { heading, description, icon } = props;
+    const { heading, description, icon, links } = props;
 
     return (
         <StyledCard>
             <CardHead>
-                <Icon name={icon} size="large" />
+                <Icon name={icon} size={160} />
             </CardHead>
             <CardContent>
-                <Heading asElement="h4" size="small" marginBottom="15px">
+                <Heading asElement="h4" size="default" marginBottom="15px">
                     {heading}
                 </Heading>
                 <Paragraph isMuted={true}>{description}</Paragraph>
+                <Links>
+                    {_.map(links, (link, index) => (
+                        <Button
+                            href={link.url}
+                            target={!_.isUndefined(link.url) ? '_blank' : undefined}
+                            isWithArrow={true}
+                            isAccentColor={true}
+                            key={`cardLink-${index}-${link.url}`}
+                        >
+                            {link.text}
+                        </Button>
+                    ))}
+                </Links>
             </CardContent>
         </StyledCard>
     );
 };
 
+const StyledIcon = styled(Icon)`
+    height: 100%;
+`
+
 const StyledCard = styled.div`
     background-color: ${colors.backgroundDark};
+    display: flex;
+    flex-direction: column;
     width: 100%;
     min-height: 520px;
     flex: 0 0 auto;
     transition: opacity 0.4s ease-in-out;
 
-    @media (max-width: 1200px) {
-    }
-
     @media (max-width: 500px) {
         min-height: 450px;
     }
@@ -48,20 +72,29 @@ const StyledCard = styled.div`
 
 const CardHead = styled.div`
     background-color: ${colors.brandDark};
-    height: 300px;
+    height: 240px;
     display: flex;
     justify-content: center;
     align-items: center;
+    padding: 40px 0;
 
     @media (max-width: 500px) {
-        height: 240px;
+        height: 180px;
+        padding: 30px 0;
     }
 `;
 
 const CardContent = styled.div`
+    display: flex;
+    flex-direction: column;
     padding: 30px;
+    flex-grow: 1;
 
     @media (max-width: 500px) {
         padding: 20px;
     }
 `;
+
+const Links = styled.div`
+    margin-top: auto;
+`;

packages/website/ts/pages/extensions.tsx

@@ -10,7 +10,7 @@ import { Button } from 'ts/components/button';
 import { Icon } from 'ts/components/icon';
 import { SiteWrap } from 'ts/components/siteWrap';
 
-import { Card } from 'ts/components/card';
+import { Card, LinkProps } from 'ts/components/card';
 import { constants } from 'ts/utils/constants';
 
 import { ModalContact } from '../components/modals/modal_contact';
@@ -19,23 +19,42 @@ interface Extension {
     icon: string;
     title: string;
     description: string;
+    links?: LinkProps[];
 }
 
 const extensionData: Extension[] = [
     {
-        icon: 'supportForAllEthereumStandards',
+        icon: 'dutchAuction',
         title: 'Dutch Auction',
         description: `Dutch Auctions continually reduce prices until a buyer is found. They're perfect for new or rare assets, and with 0x's off-chain model, they're gas-efficient as well.`,
+        links: [
+            {
+                text: 'Learn More',
+                url: 'https://github.com/0xProject/0x-monorepo/blob/development/contracts/extensions/contracts/src/DutchAuction/DutchAuction.sol',
+            },
+        ],
     },
     {
-        icon: 'supportForAllEthereumStandards',
+        icon: 'forwarderContract',
         title: 'Forwarder Contract',
         description: `Say goodbye to WETH! The Forwarder Contract will automatically wrap ETH and fill orders, making buying assets on 0x one step simpler.`,
+        links: [
+            {
+                text: 'Learn More',
+                url: 'https://github.com/0xProject/0x-protocol-specification/blob/master/v2/forwarder-specification.md',
+            },
+        ],
     },
     {
-        icon: 'supportForAllEthereumStandards',
+        icon: 'whitelistFilter',
         title: 'Whitelist Filter',
         description: `Restrict access to your relayer with a Whitelist of approved traders. Bring your own list of addresses, or use Wyre's KYC list for free.`,
+        links: [
+            {
+                text: 'Learn More',
+                url: 'https://github.com/0xProject/0x-protocol-specification/blob/master/v2/v2-specification.md#whitelist',
+            },
+        ],
     },
 ];
 
@@ -64,6 +83,7 @@ export class Extensions extends React.Component {
                                 heading={item.title}
                                 description={item.description}
                                 icon={item.icon}
+                                links={item.links}
                             />
                         ))}
                     </Grid>
@@ -109,7 +129,7 @@ const CustomSection = styled.div`
     width: calc(100% - 60px);
     max-width: 1500px;
     margin: 0 auto;
-    padding: 0 0 120px;
+    padding: 0 0 60px;
     position: relative;
 
     @media (max-width: 768px) {