src/components/card/card.jsx

@@ -1,34 +0,0 @@
-import React from "react";
-
-import { landing } from "../../assets/images";
-import { Link } from "../link";
-
-export const Card = ({
-  title,
-  subTitle: _subTitle,
-  children,
-  image,
-  link,
-  directionReverse,
-}) => (
-  <article className={`card ${directionReverse ? "card__toRight" : ""}`}>
-    <div className="card-text">
-      {title && (
-        <h1 className="h1">
-          <Link href={link}>{title}</Link>
-        </h1>
-      )}
-
-      <p className="p card--text__p">{children}</p>
-    </div>
-    {image && <img className="card--img" src={landing[image]} alt="" />}
-  </article>
-);
-
-Card.defaultProps = {
-  title: void 0,
-  subTitle: void 0,
-  image: void 0,
-  link: void 0,
-  directionReverse: false,
-};

src/components/card/card.style.ts

@@ -0,0 +1,56 @@
+import { css } from "@emotion/react";
+import styled from "@emotion/styled";
+
+export const Wrapper = styled.article`
+  display: flex;
+  flex-direction: column;
+  margin-top: 24px;
+  border-radius: 30px;
+  box-shadow: 0 0 26px 2px #0000001c;
+  background: rgba(255, 255, 255, 0.59);
+  padding: 24px;
+`;
+
+export const CardImage = styled.img<{ directionReverse: boolean }>`
+  width: 300px;
+  height: 300px;
+  margin-left: 0;
+  margin-right: auto;
+  
+  ${props => props.directionReverse && css`
+    margin-left: auto;
+    margin-right: 0;
+  `}
+`;
+
+export const Header = styled.header`
+  display: flex;
+  justify-content: space-between;
+  font-size: 24px;
+  font-weight: 800;
+  align-items: center;
+`;
+
+export const SubHeader = styled.h2`
+  color: #659a26;
+  font-size: 24px;
+`;
+
+export const Content = styled.div<{ directionReverse: boolean }>`
+  display: flex;
+  flex-direction: row;
+  gap: 40px;
+
+  ${props => {
+    if (props.directionReverse) {
+      return css`
+        flex-direction: row-reverse;
+      `;
+    }
+  
+  }}
+`;
+
+export const Text = styled.p`
+  font-size: 24px;
+`;

src/components/card/card.tsx

@@ -0,0 +1,49 @@
+import React from "react";
+
+import { landing } from "../../assets/images";
+import { Link } from "../link";
+
+import {
+  Header,
+  Wrapper,
+  SubHeader,
+  Content,
+  CardImage,
+  Text,
+} from "./card.style";
+
+export const Card = ({
+  title,
+  subTitle,
+  children,
+  image,
+  link,
+  directionReverse,
+}) => (
+  <Wrapper>
+    <Header>
+      {title && (
+        <h1 className="h1">
+          <Link inheritColor href={link}>
+            {title}
+          </Link>
+        </h1>
+      )}
+      {subTitle && <SubHeader>{subTitle}</SubHeader>}
+    </Header>
+    <Content directionReverse={directionReverse}>
+      {image && (
+        <CardImage directionReverse={directionReverse} src={landing[image]} />
+      )}
+      <Text>{children}</Text>
+    </Content>
+  </Wrapper>
+);
+
+Card.defaultProps = {
+  title: void 0,
+  subTitle: void 0,
+  image: void 0,
+  link: void 0,
+  directionReverse: false,
+};

src/components/card/index.ts

@@ -1 +1 @@
-export { Card } from './card.jsx'
+export { Card } from './card'

src/components/link/link.styled.ts

@@ -1,19 +1,33 @@
-import styled from "@emotion/styled"
+import styled from "@emotion/styled";
-import { css } from '@emotion/react'
+import { css } from "@emotion/react";
 
-export const StyledLink = styled.a`
+export const StyledLink = styled.a<{
+  contrast?: boolean;
+  inheritColor?: boolean;
+}>`
   font-weight: 400;
   text-decoration: underline;
   text-decoration-skip-ink: none;
-  color: ${(props: any) => props.contrast ? 'var(--text-contrast)' : 'var(--dark-link)'};
+  color: ${(props: any) =>
+    props.contrast ? "var(--text-contrast)" : "var(--dark-link)"};
 
-  ${props => {
+  ${(props) => {
     if (props.contrast) {
-     return css`
+      return css`
-       &:hover {
+        &:hover {
-         color: var(--dark-link);
+          color: var(--dark-link);
-       }
+        }
-     `
+      `;
-   }
+    }
+  }}
+
+  ${(props) => {
+    if (props.inheritColor) {
+      return css`
+        font-weight: inherit;
+        color: inherit;
+        text-decoration: inherit;
+      `;
+    }
   }}
 `;

src/components/link/link.tsx

@@ -4,7 +4,14 @@ import { externalIcon } from '../../assets/icons'
 
 import { StyledLink } from './link.styled'
 
-export const Link = (props) => {
+interface LinkProps {
+  href: string;
+  children: React.ReactNode;
+  contrast?: boolean;
+  inheritColor?: boolean;
+}
+
+export const Link = (props: LinkProps) => {
   const isExternal = useMemo(() => props.href?.startsWith('http'), [props.href]);
 
   const linkProps: any = {}
@@ -15,9 +22,14 @@ export const Link = (props) => {
   }
 
   return (
-    <StyledLink contrast={props.contrast} href={props.href} {...linkProps}>
+    <StyledLink inheritColor={props.inheritColor} contrast={props.contrast} href={props.href} {...linkProps}>
       {props.children}
       {isExternal && <img src={externalIcon} alt="external link icon" />}
     </StyledLink>
   );
 };
+
+Link.defaultProps = {
+  contrast: false,
+  inheritColor: false,
+}

src/pages/landing.tsx

@@ -97,6 +97,7 @@ export const LandingPage = () => {
             title={item.title}
             image={item.image}
             link={item.link}
+            subTitle={item.subTitle}
           >
             {item.body}
           </Card>