Merge pull request #16 from TritonSE/feature/arohanrachel/our-impact

Feature/arohanrachel/our impact

frontend/src/app/globals.css

@@ -20,8 +20,8 @@
   }
 }
 
-body {
+/*body {
   color: rgb(var(--foreground-rgb));
   background: linear-gradient(to bottom, transparent, rgb(var(--background-end-rgb)))
     rgb(var(--background-start-rgb));
-}
+}*/

frontend/src/app/impact/page.module.css

@@ -0,0 +1,26 @@
+.cards {
+  display: flex;
+  flex-direction: column;
+  gap: 48px;
+  margin-left: 202px;
+  margin-right: 202px;
+  margin-bottom: 136px;
+}
+
+.backgroundImageContainer {
+  position: relative;
+  z-index: 0;
+  background-color: blue;
+}
+
+.whiteCardsContainer {
+  position: absolute;
+  top: 557px;
+  /* left: 0; */
+  z-index: 1;
+  /* background-color: pink; */
+}
+
+.cardsBackground {
+  height: 866px;
+}

frontend/src/app/impact/page.tsx

@@ -0,0 +1,40 @@
+import React from "react";
+
+import styles from "./page.module.css";
+
+import BackgroundHeader from "@/components/BackgroundHeader";
+import WhiteCard from "@/components/WhiteCard";
+
+export default function Impact() {
+  return (
+    <main className={styles.page}>
+      <div className={styles.backgroundImageContainer}>
+        <BackgroundHeader
+          backgroundImage="/ourimpact.svg"
+          header=""
+          title="Our Impact"
+          description="4FLOT is committed in preventing and ending homelessness, hunger and disparity in underprivileged communities."
+        />
+      </div>
+      <div className={styles.cardsBackground}></div>
+      <div className={styles.whiteCardsContainer}>
+        <div className={styles.cards}>
+          <WhiteCard
+            imageUrl="/testimonials.svg"
+            buttonUrl="/"
+            buttonText="Learn More"
+            title="Testimonals"
+            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."
+          />
+          <WhiteCard
+            imageUrl="/newsletter.svg"
+            buttonUrl="/"
+            buttonText="Learn More"
+            title="Newsletter"
+            description="Your support and contributions will enable us to meet our goals and improve conditions. Your generous donation will fund our mission."
+          />
+        </div>
+      </div>
+    </main>
+  );
+}

frontend/src/components/BackgroundHeader.tsx

@@ -28,7 +28,7 @@ const BackgroundHeader = ({
       <div className="absolute bottom-20 left-20 w-1/2 h-full flex flex-col items-start justify-center ml-20">
         <h2>{header}</h2>
         <h1 className="text-white text-4xl py-10 font-bold">{title}</h1>
-        <p>{description}</p>
+        <p className="text-white">{description}</p>
       </div>
     </div>
   );

frontend/src/components/WhiteCard.module.css

@@ -0,0 +1,88 @@
+.whiteCardContainer {
+  border-radius: 10px;
+  width: 1035px;
+  height: 418px;
+  background-color: white;
+  box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.15);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.dataContainer {
+  /* position: relative; */
+  width: 533px;
+  height: 208px;
+  gap: 12px;
+  justify-content: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+}
+
+.contentContainer {
+  height: 418px;
+  display: flex;
+  flex-direction: column;
+  justify-content: right;
+  align-items: center;
+  margin: 100px;
+  gap: 32px;
+}
+
+.cardTitle {
+  font-size: 32px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 150%; /* 48px */
+  letter-spacing: 0.64px;
+  text-align: center;
+  color: #000000;
+  justify-content: center;
+  overflow: hidden;
+}
+
+.cardImageContainer {
+  position: relative;
+  width: 6.11vw;
+  height: 6.11vw;
+  overflow: hidden;
+}
+
+.cardDescription {
+  font-family: var(--font-body);
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 24px; /* 150% */
+  max-width: 37.01vw; /* Width limit for the text */
+
+  display: flex; /* Enable flexbox for vertical centering */
+  flex-direction: column; /* Arrange the text content in a column */
+  justify-content: center; /* Center the text vertically */
+  align-items: center; /* Center the text horizontally */
+  text-align: center;
+  overflow: hidden;
+}
+
+.buttonContainer {
+  width: 167px;
+  height: 48px;
+  background-color: #694c97;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 4px;
+}
+
+.buttonText {
+  color: white;
+  font-family: var(--font-body);
+  font-size: 20px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 150%; /* 30px */
+  letter-spacing: 0.4px;
+}

frontend/src/components/WhiteCard.tsx

@@ -0,0 +1,49 @@
+import Image from "next/image";
+import Link from "next/link";
+import React from "react";
+
+import styles from "./WhiteCard.module.css";
+
+type WhiteCardProps = {
+  title: string;
+  description: string;
+  imageUrl: string;
+  buttonUrl: string;
+  buttonText: string;
+};
+
+const WhiteCard: React.FC<WhiteCardProps> = ({
+  title,
+  description,
+  imageUrl,
+  buttonUrl,
+  buttonText,
+}) => {
+  return (
+    <div className={styles.whiteCardContainer}>
+      <div className={styles.contentContainer}>
+        <div className={styles.dataContainer}>
+          <div className={styles.cardImageContainer}>
+            <Image
+              src={imageUrl}
+              alt="Card image"
+              layout="fill"
+              objectFit="cover"
+              className="card-image"
+              priority
+            />
+          </div>
+          <h2 className={styles.cardTitle}>{title}</h2>
+          <p className={styles.cardDescription}>{description}</p>
+        </div>
+        <div className={styles.buttonContainer}>
+          <Link href={buttonUrl} className={styles.buttonText}>
+            {buttonText}
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default WhiteCard;

frontend/src/components/backgroundheader.css

@@ -0,0 +1,53 @@
+/* styles.css */
+
+.background-container {
+  max-width: 100%;
+  background-color: #484848;
+  /*top: 7.43vw;*/
+  position: relative;
+  width: 100vw;
+  height: 47.7vw; /* Adjust the height as needed */
+  overflow: hidden;
+}
+
+.background-image {
+  position: relative;
+  width: 100%;
+  /*height: 100%;*/
+  object-fit: cover;
+  opacity: 40%;
+  /* top: 107px;
+    left: 1440px; */
+  /* transform: rotate(-180deg); */
+  /* opacity: 0.4; */
+}
+
+.bg-text-container {
+  opacity: 100%;
+  position: absolute;
+  display: flex;
+  width: 53.61vw;
+  height: 9.305vw;
+  margin-top: 16.111vw;
+  margin-left: 6.6667vw;
+  flex-direction: column;
+  gap: 0.97222vw;
+}
+
+.bg-title {
+  color: white;
+  font-size: 3.3333vw;
+  font-weight: 700;
+  /*font-family: "Roboto Slab";*/
+  letter-spacing: 2%;
+  overflow: hidden;
+}
+
+.bg-para {
+  color: white;
+  font-size: 1.388889vw;
+  font-weight: 400;
+  /*font-family: "Open Sans";*/
+  max-width: 46.38889vw;
+  overflow: hidden;
+}