diff --git a/src/components/card/card.jsx b/src/components/card/card.jsx
deleted file mode 100644
index 0cd65f4..0000000
--- a/src/components/card/card.jsx
+++ /dev/null
@@ -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,
-}) => (
-
-
- {title && (
-
- {title}
-
- )}
-
-
{children}
-
- {image && }
-
-);
-
-Card.defaultProps = {
- title: void 0,
- subTitle: void 0,
- image: void 0,
- link: void 0,
- directionReverse: false,
-};
diff --git a/src/components/card/card.style.ts b/src/components/card/card.style.ts
index e69de29..02cd676 100644
--- a/src/components/card/card.style.ts
+++ b/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;
+`;
diff --git a/src/components/card/card.tsx b/src/components/card/card.tsx
new file mode 100644
index 0000000..e6b91a5
--- /dev/null
+++ b/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,
+}) => (
+
+
+ {title && (
+
+
+ {title}
+
+
+ )}
+ {subTitle && {subTitle}}
+
+
+ {image && (
+
+ )}
+ {children}
+
+
+);
+
+Card.defaultProps = {
+ title: void 0,
+ subTitle: void 0,
+ image: void 0,
+ link: void 0,
+ directionReverse: false,
+};
diff --git a/src/components/card/index.ts b/src/components/card/index.ts
index 1f5a0c2..6651f03 100644
--- a/src/components/card/index.ts
+++ b/src/components/card/index.ts
@@ -1 +1 @@
-export { Card } from './card.jsx'
\ No newline at end of file
+export { Card } from './card'
\ No newline at end of file
diff --git a/src/components/link/link.styled.ts b/src/components/link/link.styled.ts
index b1f03d9..15ee24b 100644
--- a/src/components/link/link.styled.ts
+++ b/src/components/link/link.styled.ts
@@ -1,19 +1,33 @@
-import styled from "@emotion/styled"
-import { css } from '@emotion/react'
+import styled from "@emotion/styled";
+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`
- &:hover {
- color: var(--dark-link);
- }
- `
- }
+ return css`
+ &:hover {
+ color: var(--dark-link);
+ }
+ `;
+ }
+ }}
+
+ ${(props) => {
+ if (props.inheritColor) {
+ return css`
+ font-weight: inherit;
+ color: inherit;
+ text-decoration: inherit;
+ `;
+ }
}}
`;
diff --git a/src/components/link/link.tsx b/src/components/link/link.tsx
index e5425f1..d011df6 100644
--- a/src/components/link/link.tsx
+++ b/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 (
-
+
{props.children}
{isExternal && }
);
};
+
+Link.defaultProps = {
+ contrast: false,
+ inheritColor: false,
+}
diff --git a/src/pages/landing.tsx b/src/pages/landing.tsx
index 014e764..83cfa1b 100644
--- a/src/pages/landing.tsx
+++ b/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}