From e30e1855bf045e1c9b5a66255b4bf94ae9172d85 Mon Sep 17 00:00:00 2001
From: Benson Cho <100653148+bcho892@users.noreply.github.com>
Date: Fri, 19 Jul 2024 22:55:07 +1200
Subject: [PATCH] Update about page items style (#656)

* make about page items fit new style

* add divider

* adjust headings
---
 client/src/app/about/page.tsx                 | 51 ++++++-----
 .../generic/AboutSection/AboutSection.tsx     | 88 ++++++++-----------
 2 files changed, 67 insertions(+), 72 deletions(-)

diff --git a/client/src/app/about/page.tsx b/client/src/app/about/page.tsx
index dfcf638d0..35f0aa8d7 100644
--- a/client/src/app/about/page.tsx
+++ b/client/src/app/about/page.tsx
@@ -17,27 +17,36 @@ const About = async () => {
   const aboutItems = await sanityQuery<AboutItem[]>(ABOUT_ITEMS_GROQ_QUERY)
 
   return (
-    <div className="flex w-full flex-col gap-4 ">
-      <h2 className="text-dark-blue-100 mt-8 pl-4 text-center italic lg:text-left">
-        About us
-      </h2>
-      {aboutItems.map((item, index) => {
-        // Even => Left, Odd => Right
-        const side = index % 2 === 0 ? "left" : "right"
-        return (
-          <div className="p-4" key={item._id}>
-            <AboutSection
-              title={item.title || ""}
-              text={item.description || ""}
-              variant={side}
-              imageSrc={item.imageUrl || ""}
-            />
-          </div>
-        )
-      })}
-
-      <Footer />
-    </div>
+    <>
+      <div className="flex w-full flex-col items-center justify-center">
+        <div className="mb-4 flex max-w-[1100px] flex-col">
+          <h2 className="text-dark-blue-100 my-8 text-center italic">
+            About us
+          </h2>
+          {aboutItems.map((item, index) => {
+            // Even => Left, Odd => Right
+            const side = index % 2 === 0 ? "left" : "right"
+            return (
+              <div key={item._id}>
+                <AboutSection
+                  title={item.title || ""}
+                  text={item.description || ""}
+                  variant={side}
+                  imageSrc={item.imageUrl || ""}
+                />
+                {
+                  // Don't need divider for last row
+                  index < aboutItems.length - 1 && (
+                    <div className="bg-gray-2 my-11 h-[1px] w-full" />
+                  )
+                }
+              </div>
+            )
+          })}
+        </div>
+        <Footer />
+      </div>
+    </>
   )
 }
 
diff --git a/client/src/components/generic/AboutSection/AboutSection.tsx b/client/src/components/generic/AboutSection/AboutSection.tsx
index 646c9c82c..ee8f51cc7 100644
--- a/client/src/components/generic/AboutSection/AboutSection.tsx
+++ b/client/src/components/generic/AboutSection/AboutSection.tsx
@@ -2,9 +2,23 @@ import Image, { StaticImageData } from "next/image"
 type ImageSideVariants = "left" | "right"
 
 interface IAboutSectionProps {
+  /**
+   * The text that describes the name of the about section
+   * @example "Our Purpose: Snowboarding and Skiing"
+   */
   title: string
+  /**
+   * The smaller text giving more detail about the section
+   * @example "lorem ipsum"
+   */
   text: string
+  /**
+   * "left" or "right" based on the side the image is on
+   */
   variant: ImageSideVariants
+  /**
+   * The image url, or `StaticImageData` originating from importing the image
+   */
   imageSrc: string | StaticImageData
 }
 
@@ -14,61 +28,33 @@ type Props = IAboutSectionProps
 
 const TextStyler = ({ title, text }: Omit<Props, "variant" | "imageSrc">) => {
   return (
-    <div className="grid-col grid w-full items-center overflow-hidden">
-      <h4 className="lg:text-h2 md:text-h4 text-dark-blue-100 p-2 text-center font-bold italic md:p-2 md:text-left md:font-bold lg:p-4 lg:text-left">
-        {title}
-      </h4>
-      <p className=" text-dark-blue-100 lg:text-h4 p-2 md:p-2 lg:p-3">{text}</p>
-    </div>
+    <>
+      <h2 className="font-weight-bold text-dark-blue-100 italic">{title}</h2>
+      <p className=" text-h4 text-black">{text}</p>
+    </>
   )
 }
 
-const AboutSection = ({ title, text, imageSrc, variant }: Props) => {
-  if (variant === "left") {
-    return (
-      <div className="grid-col grid w-full md:grid-cols-2 md:gap-4 lg:grid-cols-2 lg:gap-4">
-        <Image
-          src={imageSrc}
-          width={DEFAULT_ABOUT_IMAGE_RES}
-          height={DEFAULT_ABOUT_IMAGE_RES}
-          alt="about page image"
-          className="object-fit: cover relative w-full rounded-t-lg"
-        />
-        <div className=" border-dark-blue-100 mt-auto w-full rounded-b-lg border bg-white md:rounded-lg  lg:rounded-t-lg">
-          <TextStyler title={title} text={text} />
-        </div>
-      </div>
-    )
-  } else {
-    return (
-      <div className="grid-col grid w-full md:grid-cols-2 md:gap-4 lg:grid-cols-2 lg:gap-4">
-        <>
-          <div className="border-dark-blue-100 mt-auto hidden w-full rounded-b-lg border bg-white sm:rounded-t-none md:block md:rounded-lg lg:rounded-t-lg ">
-            <TextStyler title={title} text={text} />
-          </div>
-          <Image
-            src={imageSrc}
-            width={DEFAULT_ABOUT_IMAGE_RES}
-            height={DEFAULT_ABOUT_IMAGE_RES}
-            alt="about page image"
-            className="hidden w-full rounded-t-lg md:flex"
-          />
-        </>
-        <>
-          <Image
-            src={imageSrc}
-            width={DEFAULT_ABOUT_IMAGE_RES}
-            height={DEFAULT_ABOUT_IMAGE_RES}
-            alt="about page image"
-            className="flex w-full rounded-t-lg md:hidden"
-          />
-          <div className="border-dark-blue-100 w-full rounded-b-lg border bg-white sm:rounded-t-none md:hidden md:rounded-lg lg:rounded-t-lg ">
-            <TextStyler title={title} text={text} />
-          </div>
-        </>
+const AboutSection = ({ title, text, imageSrc, variant = "left" }: Props) => {
+  return (
+    <div className="relative grid h-fit w-full grid-cols-1 md:grid-cols-2 md:gap-5">
+      <span className="home-page-gradient" />
+      <Image
+        src={imageSrc}
+        width={DEFAULT_ABOUT_IMAGE_RES}
+        height={DEFAULT_ABOUT_IMAGE_RES}
+        alt="about page image"
+        className={`relative ${variant === "right" ? "-order-1" : "md:order-1"} 
+                    h-full rounded-t-md object-cover md:rounded-b-md`}
+      />
+      <div
+        className="border-gray-3 flex w-full flex-col gap-10 rounded-b-md border
+                        bg-white p-8 md:rounded-t-md"
+      >
+        <TextStyler title={title} text={text} />
       </div>
-    )
-  }
+    </div>
+  )
 }
 
 export default AboutSection