diff --git a/frontend/public/handheart.png b/frontend/public/handheart.png deleted file mode 100644 index a7affbf6..00000000 Binary files a/frontend/public/handheart.png and /dev/null differ diff --git a/frontend/public/handheart.svg b/frontend/public/handheart.svg new file mode 100644 index 00000000..b29ccb43 --- /dev/null +++ b/frontend/public/handheart.svg @@ -0,0 +1,4 @@ + + + + diff --git a/frontend/public/puzzle.png b/frontend/public/puzzle.png deleted file mode 100644 index 522f7c1a..00000000 Binary files a/frontend/public/puzzle.png and /dev/null differ diff --git a/frontend/public/puzzle.svg b/frontend/public/puzzle.svg new file mode 100644 index 00000000..1c935397 --- /dev/null +++ b/frontend/public/puzzle.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/public/threepeople.png b/frontend/public/threepeople.png deleted file mode 100644 index 7fdcdf70..00000000 Binary files a/frontend/public/threepeople.png and /dev/null differ diff --git a/frontend/public/threepeople.svg b/frontend/public/threepeople.svg new file mode 100644 index 00000000..5a1114ce --- /dev/null +++ b/frontend/public/threepeople.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/frontend/src/app/mission/page.module.css b/frontend/src/app/mission/page.module.css index b35beac7..1483b494 100644 --- a/frontend/src/app/mission/page.module.css +++ b/frontend/src/app/mission/page.module.css @@ -1,18 +1,15 @@ -@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Roboto+Slab:wght@100..900&display=swap"); - .description { text-align: left; - font-family: "Open Sans"; + font-family: var(--font-body); font-size: 24px; font-style: normal; font-weight: 400; line-height: 32px; /* 133.333% */ width: 52%; - } .titlelarge { - font-family: "Roboto Slab"; + font-family: var(--font-small-subtitle); font-size: 32px; font-weight: 700; line-height: 48px; @@ -38,15 +35,16 @@ width: 37%; position: relative; bottom: 500px; - left: 900px; + left: 800px; margin-bottom: -300px; display: flex; flex-direction: row; flex-wrap: wrap; - justify-content: space-around; + justify-content: flex-end; align-items: flex-end; row-gap: 32px; + column-gap: 32px; } /*For the Value Cards*/ diff --git a/frontend/src/app/mission/page.tsx b/frontend/src/app/mission/page.tsx index b73e6269..42236444 100644 --- a/frontend/src/app/mission/page.tsx +++ b/frontend/src/app/mission/page.tsx @@ -21,14 +21,24 @@ export default function Mission() {
We Pay It Forward With...
- - - - - + + +
diff --git a/frontend/src/components/Button.module.css b/frontend/src/components/Button.module.css index 48df0973..8784991b 100644 --- a/frontend/src/components/Button.module.css +++ b/frontend/src/components/Button.module.css @@ -15,11 +15,12 @@ /* Body/Medium (Bold) */ .buttonBody { - font-family: "Open Sans", sans-serif; + font-family: var(--font-body); font-style: normal; - font-weight: 550; + font-weight: 700; font-size: 20px; letter-spacing: 1px; + text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); /* Center align text */ text-align: center; diff --git a/frontend/src/components/valueCard.module.css b/frontend/src/components/valueCard.module.css index 5763942e..38177b47 100644 --- a/frontend/src/components/valueCard.module.css +++ b/frontend/src/components/valueCard.module.css @@ -1,49 +1,48 @@ .customRectangle { - width: 401px; - height: 434px; - border-radius: 10px; - background-color: #694c97; - position: relative; - } - - .circleWhite { - width: 146.35px; - height: 147px; - background-color: white; - border-radius: 50%; - position: relative; - transform: translate(25%, 25%); - overflow: hidden; - } - - .centeredImage { - position: relative; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - max-width: 100%; - max-height: 100%; - } - - .RectangleTitle { - font-family: "Roboto Slab", sans-serif; - font-size: 32px; - font-weight: 480; - line-height: 48px; - letter-spacing: 3%; - transform: translate(10%, 150%); - color: white; - } - - .BodytextInsideRectangle { - text-align: left; - font-family: "Open Sans"; - font-size: 16px; - font-style: normal; - font-weight: 400; - line-height: 24px; /* 133.333% */ - width: 85%; - transform: translate(12%, 78%); - color: white; - } - \ No newline at end of file + width: 401px; + height: 434px; + border-radius: 10px; + background-color: #694c97; + position: relative; +} + +.circleWhite { + width: 146.35px; + height: 147px; + background-color: white; + border-radius: 50%; + position: relative; + transform: translate(25%, 25%); + overflow: hidden; +} + +.centeredImage { + position: relative; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + max-width: 100%; + max-height: 100%; +} + +.RectangleTitle { + font-family: var(--font-small-subtitle); + font-size: 32px; + font-weight: 480; + line-height: 48px; + letter-spacing: 3%; + transform: translate(10%, 150%); + color: white; +} + +.BodytextInsideRectangle { + text-align: left; + font-family: var(--font-body); + font-size: 16px; + font-style: normal; + font-weight: 400; + line-height: 24px; /* 133.333% */ + width: 85%; + transform: translate(12%, 78%); + color: white; +} diff --git a/frontend/src/components/valueCard.tsx b/frontend/src/components/valueCard.tsx index c344a77d..a9ac3bca 100644 --- a/frontend/src/components/valueCard.tsx +++ b/frontend/src/components/valueCard.tsx @@ -1,25 +1,23 @@ import React from "react"; -import styles from "./valueCard.module.css"; +import styles from "./valueCard.module.css"; type ValueCardProps = { - iconSrc: string; - title: string; - description: string; - }; + iconSrc: string; + title: string; + description: string; +}; const ValueCard = ({ iconSrc, title, description }: ValueCardProps) => { -return ( + return (
-
- Image 1
-
{title}
-
{description}
+
+ Image 1 +
+
{title}
+
{description}
- -); + ); }; - - export default ValueCard; diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json index 4b8fa2e4..e59724b2 100644 --- a/frontend/tsconfig.json +++ b/frontend/tsconfig.json @@ -15,13 +15,13 @@ "incremental": true, "plugins": [ { - "name": "next", - }, + "name": "next" + } ], "paths": { - "@/*": ["./src/*"], - }, + "@/*": ["./src/*"] + } }, "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], - "exclude": ["node_modules"], + "exclude": ["node_modules"] }