Add new layout (#54)

* [FB-325] Add new card components (#49) * [FB-328] Add new hero (#52) * [FB-328] Add new footer, favicon, font, final changes (#53)
vazco · Jul 26, 2023 · 80f0881 · 80f0881
1 parent e7159ff
commit 80f0881
Show file tree

Hide file tree

Showing 95 changed files with 1,846 additions and 1,409 deletions.
diff --git a/src/components/AccentHeading/AccentHeading.tsx b/src/components/AccentHeading/AccentHeading.tsx
@@ -5,15 +5,6 @@ import styled from 'styled-components';
 import { UnifiedHeading, UnifiedHeadingProps } from './UnifiedHeading';
 import media from '../../globalStyles/media';
 
-const Container = styled.div`
-  display: flex;
-  align-items: flex-start;
-  margin-bottom: 24px;
-  ${media.greaterThan('md')`
-    margin-bottom: 35px;
-  `}
-`;
-
 const StyledUnifiedHeading = styled(UnifiedHeading)`
   max-width: 660px;
   font-weight: 300;
@@ -24,7 +15,18 @@ export const AccentHeading = ({
   level = 3,
   size = 'md',
   isStrong = true,
+  center = false,
 }: UnifiedHeadingProps) => {
+  const Container = styled.div`
+    display: flex;
+    align-items: flex-start;
+    text-align: ${center ? 'center' : 'initial'};
+    margin-bottom: 24px;
+    ${media.greaterThan('md')`
+      margin-bottom: 35px;
+    `}
+  `;
+
   return (
     <Container>
       <StyledUnifiedHeading level={level} size={size} isStrong={isStrong}>

diff --git a/src/components/AccentHeading/UnifiedHeading.tsx b/src/components/AccentHeading/UnifiedHeading.tsx
@@ -8,8 +8,9 @@ import {
 } from '../../globalStyles/sharedStyles/headings';
 
 const StyledHeading = styled.h2`
-  font-weight: ${({ isStrong }) => (isStrong ? 500 : 300)};
+  font-weight: ${({ isStrong }) => (isStrong ? 700 : 300)};
   margin: 0;
+  width: 100%;
   ${({ marginBottom }) =>
     marginBottom ? `margin-bottom: ${marginBottom}px` : 0};
 
@@ -39,6 +40,7 @@ export type UnifiedHeadingProps = {
   size?: 'md' | 'lg' | 'xl';
   isStrong?: boolean;
   marginBottom?: number;
+  center?: boolean;
 };
 
 export const UnifiedHeading = ({

diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
@@ -38,21 +38,21 @@ const commonStyles = css`
       `;
     } else if (variant === 'solid') {
       return css`
-        background-color: ${theme.color.white};
-        color: ${theme.color.primary};
-        border: 2px solid ${theme.color.white};
+        background-color: ${theme.color.black};
+        color: ${theme.color.white};
+        border: 2px solid ${theme.color.black};
         &:hover {
           background-color: inherit;
-          color: ${theme.color.white};
+          color: ${theme.color.black};
         }
       `;
     } else if (variant === 'outlined') {
       return css`
-        color: ${theme.color.white};
-        border: 2px solid ${theme.color.white};
+        color: ${theme.color.black};
+        border: 2px solid ${theme.color.black};
         &:hover {
-          background-color: ${theme.color.white};
-          color: ${theme.color.primary};
+          background-color: ${theme.color.black};
+          color: ${theme.color.white};
         }
       `;
     }

diff --git a/src/components/Card/Card.tsx b/src/components/Card/Card.tsx
@@ -0,0 +1,51 @@
+import React from 'react';
+
+import { ReactNode } from "react";
+import styled from 'styled-components';
+import { BOX_BORDER_RADIUS } from '../../globalStyles/sharedStyles/box';
+
+const CardComponent = styled.div`
+  width: 100%;
+  padding: 36px 48px;
+  text-align: center;
+  background-color: #eee;
+  ${BOX_BORDER_RADIUS};
+`;
+
+const TitleComponent = styled.div`
+  font-weight: 700;
+  margin: 20px 0px;
+  font-size: 20px;
+  line-height: 30px;
+`;
+
+const IconComponent = styled.div`
+  width: 40px;
+  margin: auto;
+  & svg {
+    width: 100%;
+    height: 100%;
+  }
+`;
+
+const DescriptionComponent = styled.div`
+  line-height: 24px;
+`;
+
+type CardProps = {
+  icon: ReactNode;
+  title: string;
+  description: string;
+};
+
+export const Card = ({ icon, title, description }: CardProps) => {
+  return (
+    <CardComponent>
+      <IconComponent>{icon}</IconComponent>
+      <TitleComponent>{title}</TitleComponent>
+      <DescriptionComponent>
+        {description}
+      </DescriptionComponent>
+    </CardComponent>
+  );
+};
diff --git a/src/sections/WhatYouGetSection/Card/index.ts → src/components/Card/index.ts b/src/sections/WhatYouGetSection/Card/index.ts → src/components/Card/index.ts
diff --git a/src/components/CardGrid/CardGrid.tsx b/src/components/CardGrid/CardGrid.tsx
@@ -0,0 +1,37 @@
+import React, { ReactElement } from 'react';
+import styled from 'styled-components';
+import { Card } from '../../components/Card';
+import media from '../../globalStyles/media';
+
+const CardWrapperComponent = styled.div`
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 40px;
+  width: 100%;
+  margin: auto;
+  ${media.lessThan('lg')`
+    gap: 20px;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  `}
+  ${media.lessThan('md')`
+    grid-template-columns: 1fr;
+  `}
+`;
+
+type CardElement = {
+  icon: ReactElement;
+  title: string;
+  description: string;
+};
+
+type CardGridProps = {
+  cards: CardElement[];
+};
+
+export const CardGrid = ({ cards }: CardGridProps) => (
+  <CardWrapperComponent>
+    {cards.map(c => (
+      <Card icon={c.icon} title={c.title} description={c.description} key={c.title} />
+    ))}
+  </CardWrapperComponent>
+);
diff --git a/src/components/CardGrid/index.ts b/src/components/CardGrid/index.ts
@@ -0,0 +1 @@
+export * from './CardGrid';
diff --git a/src/components/Container/Container.tsx b/src/components/Container/Container.tsx
@@ -1,15 +1,10 @@
 import React, { ReactNode } from 'react';
 import styled from 'styled-components';
 
-import media from '../../globalStyles/media';
-
 const StyledContainer = styled.div`
   max-width: 1360px;
   margin: 0 auto;
-  ${media.lessThan('xl')`
-    padding-left: 16px;
-    padding-right: 16px;
-  `}
+  padding: 0px 16px;
 `;
 
 type ContainerProps = {

diff --git a/src/components/CustomBulletList/CustomBulletList.tsx b/src/components/CustomBulletList/CustomBulletList.tsx
@@ -3,8 +3,7 @@ import React, { ReactNode } from 'react';
 import styled from 'styled-components';
 
 import media from '../../globalStyles/media';
-import TickBlue from '../../images/svg/tick-blue.svg';
-import TickWhite from '../../images/svg/tick-white.svg';
+import CheckmarkIcon from '../../images/svg/checkmark.svg';
 
 const List = styled.ul`
   list-style-type: none;
@@ -15,30 +14,24 @@ const List = styled.ul`
   }
 `;
 
-const StyledTickWhite = styled(TickWhite)`
-  content: '';
-  position: absolute;
-  left: 0;
-  width: 36px;
-  height: 36px;
-`;
-
-const StyledTickBlue = styled(TickBlue)`
-  content: '';
-  position: absolute;
-  left: 0;
-  width: 36px;
-  height: 36px;
+const CheckmarkWrapper = styled.div`
+  color: ${({ color = '#00141E' }) => color};
+  width: 20px;
+  height: 20px;
+  flex-shrink: 0;
+  margin-right: 20px;
+  & svg {
+    width: 100%;
+    height: 100%;
+  }
 `;
 
 const ListItem = styled.li`
   position: relative;
-  padding: 0 0 0 50px;
   min-height: 36px;
   display: flex;
   align-items: center;
-  color: ${(props: CustomBulletListItemProps) =>
-    props.theme === 'white' ? 'white' : 'inherit'};
+  color: inherit;
 
   ${media.lessThan('sm')`
     margin-bottom: ${rem('12px')};
@@ -61,15 +54,13 @@ type CustomBulletListProps = {
 
 type CustomBulletListItemProps = {
   children: ReactNode;
-  theme: 'blue' | 'white';
 };
 
-export const CustomBulletListItem = ({
-  children,
-  theme,
-}: CustomBulletListItemProps) => (
-  <ListItem theme={theme}>
-    {theme === 'white' ? <StyledTickWhite /> : <StyledTickBlue />}
+export const CustomBulletListItem = ({ children }: CustomBulletListItemProps) => (
+  <ListItem>
+    <CheckmarkWrapper>
+      <CheckmarkIcon />
+    </CheckmarkWrapper>
     {children}
   </ListItem>
 );

diff --git a/src/components/ListCard/ListCard.tsx b/src/components/ListCard/ListCard.tsx
@@ -0,0 +1,68 @@
+import React from 'react';
+import { BOX_BORDER_RADIUS } from '../../globalStyles/sharedStyles/box';
+import styled from 'styled-components';
+import media from '../../globalStyles/media';
+import CheckmarkIcon from '../../images/svg/checkmark.svg';
+
+type ListCardProps = {
+  title: string;
+  points: string[];
+};
+
+const CardComponent = styled.div`
+  width: 100%;
+  padding: 36px 48px;
+  background-color: #eee;
+  ${BOX_BORDER_RADIUS};
+  ${media.lessThan('md')`
+    padding: 24px;
+  `}
+`;
+
+const TitleComponent = styled.div`
+  text-align: center;
+  font-weight: 900;
+  font-size: 18px;
+  margin-bottom: 24px;
+`;
+
+const BulletsWrapComponent = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+`;
+
+const BulletpointWrapComponent = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 10px;
+`;
+
+const BulletPointComponent = styled.div`
+  color: ${({ theme }) => theme.color.black};
+  width: 20px;
+  height: 20px;
+  flex-shrink: 0;
+  & svg {
+    width: 100%;
+    height: 100%;
+  }
+`;
+
+export const ListCard = ({ title, points }: ListCardProps) => {
+  return (
+    <CardComponent>
+      <TitleComponent>{title}</TitleComponent>
+      <BulletsWrapComponent>
+        {points.map(point => (
+          <BulletpointWrapComponent key={point}>
+            <BulletPointComponent>
+              <CheckmarkIcon />
+            </BulletPointComponent>
+            <div>{point}</div>
+          </BulletpointWrapComponent>
+        ))}
+      </BulletsWrapComponent>
+    </CardComponent>
+  );
+};
diff --git a/src/components/ListCard/index.ts b/src/components/ListCard/index.ts
@@ -0,0 +1 @@
+export * from './ListCard';