From 8f3554d707b228eab1145f02213cec2b91cc0654 Mon Sep 17 00:00:00 2001
From: Jarvis Raymond <jarvisraymond@uchicago.edu>
Date: Tue, 28 Jan 2025 14:17:27 -0600
Subject: [PATCH] feat(homepageHeader): Additional tweaks to better match
 design in desktop view

---
 .../ContentSpotlight/ContentSpotlight.tsx     |  2 +-
 src/lib/Home/Components/Hero/Hero.tsx         |  2 +-
 .../Components/PhotoDivider/PhotoDivider.tsx  | 54 +++++++++++++------
 .../Home/Components/QuickLinks/QuickLinks.tsx |  2 +-
 .../QuoteSpotlight/QuoteSpotlight.tsx         |  2 +-
 5 files changed, 41 insertions(+), 21 deletions(-)

diff --git a/src/lib/Home/Components/ContentSpotlight/ContentSpotlight.tsx b/src/lib/Home/Components/ContentSpotlight/ContentSpotlight.tsx
index 194d32c..0c563ed 100644
--- a/src/lib/Home/Components/ContentSpotlight/ContentSpotlight.tsx
+++ b/src/lib/Home/Components/ContentSpotlight/ContentSpotlight.tsx
@@ -8,7 +8,7 @@ const ContentSpotlight: React.FC = () => {
   return (
     <div
       data-testid="content-spotlight"
-      className="flex flex-col md:flex-row justify-between px-8 lg:px-36 py-8  "
+      className="flex flex-col md:flex-row justify-between px-8 lg:px-36 py-8 mt-5"
     >
       <div className="flex-1 h-full min-h-full mb-6 md:mb-0 relative">
         <Image
diff --git a/src/lib/Home/Components/Hero/Hero.tsx b/src/lib/Home/Components/Hero/Hero.tsx
index b9d344b..c02ca4b 100644
--- a/src/lib/Home/Components/Hero/Hero.tsx
+++ b/src/lib/Home/Components/Hero/Hero.tsx
@@ -23,7 +23,7 @@ const Hero: React.FC = () => {
               </h1>
               <p
                 data-testid="hero-description"
-                className="my-5 text-2xl font-normal leading-[36px]"
+                className="my-5 mr-8 text-2xl font-normal leading-[36px]"
               >
                 is a single web interface which allows visitors to discover,
                 access, and analyze data generated by HEAL Studies.
diff --git a/src/lib/Home/Components/PhotoDivider/PhotoDivider.tsx b/src/lib/Home/Components/PhotoDivider/PhotoDivider.tsx
index 561b07d..0d24d79 100644
--- a/src/lib/Home/Components/PhotoDivider/PhotoDivider.tsx
+++ b/src/lib/Home/Components/PhotoDivider/PhotoDivider.tsx
@@ -8,24 +8,44 @@ import photoDivider5 from './../../Assets/Images/photo-divider-5.webp';
 
 const PhotoDivider: React.FC = () => {
   return (
-    <div data-testid="photo-divider" className="photo-divider py-4">
-          <div className="flex justify-between gap-4">
-            <div className="w-1/3 md:w-1/4 lg:w-1/5">
-              <Image src={photoDivider1} alt="" className="w-full h-full object-cover" />
-            </div>
-            <div className="w-1/3 md:w-1/4 lg:w-1/5">
-              <Image src={photoDivider2} alt="" className="w-full h-full object-cover" />
-            </div>
-            <div className="w-1/3 md:w-1/4 lg:w-1/5">
-              <Image src={photoDivider3} alt="" className="w-full h-full object-cover" />
-            </div>
-            <div className="hidden w-1/4 md:block lg:w-1/5">
-              <Image src={photoDivider4} alt="" className="w-full h-full object-cover" />
-            </div>
-            <div className="hidden lg:block lg:w-1/5">
-              <Image src={photoDivider5} alt="" className="w-full h-full object-cover" />
-            </div>
+    <div data-testid="photo-divider" className="photo-divider py-4 mt-6">
+      <div className="flex justify-between gap-4">
+        <div className="w-1/3 md:w-1/4 lg:w-1/5">
+          <Image
+            src={photoDivider1}
+            alt=""
+            className="w-full h-full object-cover"
+          />
         </div>
+        <div className="w-1/3 md:w-1/4 lg:w-1/5">
+          <Image
+            src={photoDivider2}
+            alt=""
+            className="w-full h-full object-cover"
+          />
+        </div>
+        <div className="w-1/3 md:w-1/4 lg:w-1/5">
+          <Image
+            src={photoDivider3}
+            alt=""
+            className="w-full h-full object-cover"
+          />
+        </div>
+        <div className="hidden w-1/4 md:block lg:w-1/5">
+          <Image
+            src={photoDivider4}
+            alt=""
+            className="w-full h-full object-cover"
+          />
+        </div>
+        <div className="hidden lg:block lg:w-1/5">
+          <Image
+            src={photoDivider5}
+            alt=""
+            className="w-full h-full object-cover"
+          />
+        </div>
+      </div>
     </div>
   );
 };
diff --git a/src/lib/Home/Components/QuickLinks/QuickLinks.tsx b/src/lib/Home/Components/QuickLinks/QuickLinks.tsx
index d36601c..38059b5 100644
--- a/src/lib/Home/Components/QuickLinks/QuickLinks.tsx
+++ b/src/lib/Home/Components/QuickLinks/QuickLinks.tsx
@@ -7,7 +7,7 @@ const QuickLinks: React.FC = () => {
   return (
     <div
       data-testid="quick-links"
-      className="text-center md:p-4 container md:mx-auto md:px-6"
+      className="text-center md:p-4 container md:mx-auto md:px-6 mt-12"
     >
       <div className="font-bold text-heal-magenta text-2xl pb-3">
         Quick Links
diff --git a/src/lib/Home/Components/QuoteSpotlight/QuoteSpotlight.tsx b/src/lib/Home/Components/QuoteSpotlight/QuoteSpotlight.tsx
index 51f57da..60418ae 100644
--- a/src/lib/Home/Components/QuoteSpotlight/QuoteSpotlight.tsx
+++ b/src/lib/Home/Components/QuoteSpotlight/QuoteSpotlight.tsx
@@ -5,7 +5,7 @@ import Background from '../../Assets/Images/background.webp';
 /** UI component for displaying a quote and attribution */
 const QuoteSpotlight: React.FC = () => {
   return (
-    <div data-testid="quote-spotlight" className="text-center mt-4 text-white">
+    <div data-testid="quote-spotlight" className="text-center mt-6 text-white">
       <BackgroundImage
         className="m:h-[269px] md:h-[321px] lg:h-[272px] flex items-center justify-center"
         src={Background.src}