Fonts, images, image placement

TritonSE · Feb 20, 2024 · e8f4da4 · e8f4da4
1 parent 17a20f5
commit e8f4da4
Show file tree

Hide file tree

Showing 12 changed files with 105 additions and 84 deletions.
diff --git a/frontend/public/handheart.png b/frontend/public/handheart.png
diff --git a/frontend/public/handheart.svg b/frontend/public/handheart.svg
diff --git a/frontend/public/puzzle.png b/frontend/public/puzzle.png
diff --git a/frontend/public/puzzle.svg b/frontend/public/puzzle.svg
diff --git a/frontend/public/threepeople.png b/frontend/public/threepeople.png
diff --git a/frontend/public/threepeople.svg b/frontend/public/threepeople.svg
diff --git 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
@@ -21,14 +21,24 @@ export default function Mission() {
       <div className={styles.text}>
         <div className={styles.titlelarge}>We Pay It Forward With...</div>
         <div className={styles.rectangleContainer}>
-          <ValueCard title="Service" iconSrc="/threepeople.png" description="Lorem ipsum dolor sit amet consectetur. Et vestibulum enim nunc ultrices. Donec
-              blandit sollicitudin vitae integer mauris sed. Mattis duis id viverra suscipit morbi."></ValueCard>
-          <ValueCard title="Compassion" iconSrc="/handheart.png" description="Lorem ipsum dolor sit amet consectetur. Et vestibulum enim nunc ultrices. Donec
-              blandit sollicitudin vitae integer mauris sed. Mattis duis id viverra suscipit morbi."></ValueCard>
-          <ValueCard title="Community" iconSrc="/puzzle.png" description="Lorem ipsum dolor sit amet consectetur. Et vestibulum enim nunc ultrices. Donec
-              blandit sollicitudin vitae integer mauris sed. Mattis duis id viverra suscipit morbi."></ValueCard>
-
-
+          <ValueCard
+            title="Service"
+            iconSrc="/threepeople.svg"
+            description="Lorem ipsum dolor sit amet consectetur. Et vestibulum enim nunc ultrices. Donec
+              blandit sollicitudin vitae integer mauris sed. Mattis duis id viverra suscipit morbi."
+          ></ValueCard>
+          <ValueCard
+            title="Compassion"
+            iconSrc="/handheart.svg"
+            description="Lorem ipsum dolor sit amet consectetur. Et vestibulum enim nunc ultrices. Donec
+              blandit sollicitudin vitae integer mauris sed. Mattis duis id viverra suscipit morbi."
+          ></ValueCard>
+          <ValueCard
+            title="Community"
+            iconSrc="/puzzle.svg"
+            description="Lorem ipsum dolor sit amet consectetur. Et vestibulum enim nunc ultrices. Donec
+              blandit sollicitudin vitae integer mauris sed. Mattis duis id viverra suscipit morbi."
+          ></ValueCard>
         </div>
       </div>
 

diff --git 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
@@ -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;
-  }
-
+  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
@@ -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 (
     <div className={styles.customRectangle}>
-        <div className={styles.circleWhite}>
-            <img src = {iconSrc} alt="Image 1" className={styles.centeredImage} /></div>
-            <div className={styles.RectangleTitle}>{title}</div>
-            <div className={styles.BodytextInsideRectangle}>{description}</div>
+      <div className={styles.circleWhite}>
+        <img src={iconSrc} alt="Image 1" className={styles.centeredImage} />
+      </div>
+      <div className={styles.RectangleTitle}>{title}</div>
+      <div className={styles.BodytextInsideRectangle}>{description}</div>
     </div>
-
-);
+  );
 };
 
-
-
 export default ValueCard;
diff --git 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"]
 }