Typescript

.prettierrc.js

@@ -0,0 +1,5 @@
+module.exports = {
+  semi: true,
+  singleQuote: true,
+  trailingComma: 'all',
+};

README.md

@@ -2,7 +2,7 @@ The section that you need to create is shown in **agencyselection.png**
 
 1. The main Section must be placed in the folder sections.
 2. All collections of components must be created and placed in the collections folder. (for example such things are Forms, Menus, etc. because they contain multiple other components within themselves, a form contains inputs, checkboxes, radio buttons, buttons and so on, that is making it a _collection of components_)
-3. All base components that are making up collections of components go to components folder - these are Typography, Buttons, Checkboxes and other base elements. 
+3. All base components that are making up collections of components go to components folder - these are Typography, Buttons, Checkboxes and other base elements.
 
 You will find the desktop and mobile designs in the resources folder.
 That folder is not part of the project, its there for your convenience

collections/Card/Card.tsx

@@ -0,0 +1,33 @@
+import { FC } from 'react';
+import Image from 'next/image';
+import {
+  CardContainer,
+  CardInfoContainer,
+  CardInnerHeading,
+  CardInnerText,
+  ImageContainer,
+} from './elements';
+import { CardProps } from '../../types/types';
+
+export const Card: FC<{ card: CardProps }> = ({ card }) => {
+  const { image, title, description } = card;
+  const boldedDescription = description.replace(/<b>(.*?)<\/b>/g, '<b>$1</b>');
+  return (
+    <CardContainer>
+      <ImageContainer>
+        <Image
+          src={image.src}
+          alt={title}
+          width={image.width}
+          height={image.height}
+        />
+      </ImageContainer>
+      <CardInfoContainer>
+        <CardInnerHeading>{card.title}</CardInnerHeading>
+        <CardInnerText
+          dangerouslySetInnerHTML={{ __html: boldedDescription }}
+        />
+      </CardInfoContainer>
+    </CardContainer>
+  );
+};

collections/Card/elements.tsx

@@ -0,0 +1,70 @@
+import { HTMLAttributes } from 'react';
+import styled from 'styled-components';
+
+export const CardContainer = styled((props: HTMLAttributes<HTMLDivElement>) => (
+  <div {...props} />
+))`
+  display: flex;
+  align-items: center;
+  width: 100%;
+  min-height: 7rem;
+  border-radius: 10px;
+  border: 3px solid transparent;
+
+  &:hover {
+    border: 3px solid #006efd;
+    color: #006efd;
+    cursor: pointer;
+  }
+`;
+
+export const CardInnerHeading = styled(
+  (props: HTMLAttributes<HTMLHeadingElement>) => <h1 {...props} />,
+)`
+  font-family: Poppins;
+  font-weight: 700;
+  font-size: 1.2rem;
+  margin-bottom: 0;
+
+  ${CardContainer}:hover & {
+    text-decoration: underline;
+  }
+`;
+
+export const CardInnerText = styled(
+  (props: HTMLAttributes<HTMLParagraphElement>) => <p {...props} />,
+)`
+  font-family: Poppins;
+  font-size: 1rem;
+  line-height: 1.5rem;
+  font-weight: 400;
+  color: black;
+  margin-top: 5px;
+
+  b {
+    font-weight: bold;
+  }
+`;
+
+export const CardInfoContainer = styled(
+  (props: HTMLAttributes<HTMLDivElement>) => <div {...props} />,
+)`
+  display: flex;
+  flex-grow: 1;
+  flex-direction: column;
+  justify-content: center;
+  padding-right: 20px;
+`;
+
+export const ImageContainer = styled(
+  (props: HTMLAttributes<HTMLDivElement>) => <div {...props} />,
+)`
+  display: flex;
+  max-width: 5rem;
+  max-height: 5rem;
+  width: 75%;
+  height: 75%;
+  justify-content: center;
+  align-self: center;
+  padding: 2rem;
+`;

collections/Card/index.ts

@@ -0,0 +1 @@
+export * from './Card';

collections/index.ts

@@ -0,0 +1 @@
+export * from './Card';

components/Button/Button.tsx

@@ -0,0 +1,14 @@
+import { ButtonHTMLAttributes, ReactNode, FC } from 'react';
+import { StyledButton, StyledButtonText } from './elements';
+
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  children: ReactNode;
+  props: any;
+}
+export const Button: FC<ButtonProps> = ({ children, ...props }) => {
+  return (
+    <StyledButton {...(props as any)}>
+      <StyledButtonText>{children}</StyledButtonText>
+    </StyledButton>
+  );
+};

components/Button/elements.tsx

@@ -0,0 +1,77 @@
+import styled, { css } from 'styled-components';
+import { SectionInnerHeading } from '../Typography/SectionInnerHeading';
+import { ButtonHTMLAttributes } from 'react';
+import { theme } from '../../styles';
+
+export interface StyledButtonProps
+  extends ButtonHTMLAttributes<HTMLButtonElement> {
+  color?: keyof typeof theme;
+  variant?: 'outlined' | 'contained' | 'text';
+}
+
+const outlinedVariantButton = css<StyledButtonProps>`
+  background-color: transparent;
+  border: 1px solid;
+  border-color: ${({ theme, color = 'main' }) => theme[color]};
+  color: ${({ theme, color = 'main' }) => theme[color]};
+
+  &:hover {
+    border-color: ${({ theme }) => theme.main};
+    background-color: ${({ theme }) => theme.main};
+    color: ${({ theme }) => theme.white};
+  }
+`;
+
+const containedVariantButton = css<StyledButtonProps>`
+  background-color: ${({ theme, color = 'main' }) => theme[color]};
+
+  &:hover {
+    background-color: ${({ theme, color = 'main' }) => theme.hover[color]};
+  }
+`;
+
+const textVariantButton = css<StyledButtonProps>`
+  background-color: transparent;
+  border: none;
+  border-radius: 0;
+  min-width: unset;
+  padding: 0 2rem;
+  margin: 0 2rem;
+  color: ${({ theme, color = 'main' }) => theme[color]};
+
+  &:hover {
+    color: ${({ theme }) => theme.black};
+    border-bottom: 1px solid ${({ theme }) => theme.black};
+  }
+`;
+
+const buttonVariants = {
+  outlined: outlinedVariantButton,
+  contained: containedVariantButton,
+  text: textVariantButton,
+};
+
+export const StyledButton = styled.button<StyledButtonProps>`
+  font-family: sans-serif;
+  overflow: hidden;
+  text-align: center;
+  align-self: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 7px;
+  font-weight: 500;
+  font-size: 16px;
+  line-height: 24px;
+  min-width: 184px;
+  min-height: 56px;
+  padding: 16px 0;
+  cursor: pointer;
+  border: none;
+  color: white;
+  ${({ variant = 'contained' }) => buttonVariants[variant]}
+`;
+
+export const StyledButtonText = styled((props) => (
+  <SectionInnerHeading {...props} />
+))``;

components/Button/index.ts

@@ -0,0 +1 @@
+export * from './Button';

components/Containers/SectionContainer/SectionContainer.tsx

@@ -0,0 +1,8 @@
+import { FC, HTMLAttributes } from 'react';
+import { StyledSectionContainer } from './elements';
+
+interface SectionContainerProps extends HTMLAttributes<HTMLDivElement> {}
+
+export const SectionContainer: FC<SectionContainerProps> = ({ ...props }) => {
+  return <StyledSectionContainer {...props} />;
+};

components/Containers/SectionContainer/elements.tsx

@@ -0,0 +1,18 @@
+import { HTMLAttributes } from 'react';
+import styled from 'styled-components';
+
+interface StyledSectionContainerProps extends HTMLAttributes<HTMLDivElement> {
+  topMargin?: number;
+  bottomMargin?: number;
+}
+
+export const StyledSectionContainer = styled.div<StyledSectionContainerProps>`
+  display: flex;
+  max-width: 1920px;
+  width: 100%;
+  height: auto;
+  margin-left: auto;
+  margin-right: auto;
+  margin-top: ${({ topMargin }) => topMargin}rem;
+  margin-bottom: ${({ bottomMargin }) => bottomMargin}rem;
+`;

components/Containers/SectionContainer/index.ts

@@ -0,0 +1 @@
+export * from './SectionContainer';

components/Containers/index.ts

@@ -0,0 +1 @@
+export * from './SectionContainer';