feat(homepageHeader): Additional tweaks to better match design in des…

…ktop view
uc-cdis · Jan 28, 2025 · 8f3554d · 8f3554d
1 parent b450045
commit 8f3554d
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 21 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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}