From 2d32d97aaeed5ca50581c8923a62ee4acf3774da Mon Sep 17 00:00:00 2001
From: Jake Wheeler <jake.wheeler@skylight.digital>
Date: Fri, 15 Nov 2024 11:02:40 -0500
Subject: [PATCH] Improve responsiveness of home page (#48)

* improved responsive layout

* text size, improvements to element alignment, add left and right margin to carousel container
---
 src/app/page.tsx | 62 +++++++++++++++++++++++++++---------------------
 1 file changed, 35 insertions(+), 27 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 12150f4..266c057 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -28,16 +28,18 @@ export default async function Home() {
 function SectionOne() {
   return (
     <ContentContainer align>
-      <Grid row gap>
-        <Image
-          className="max-h-[20rem] max-w-[30rem]"
-          src={`${basePath}/images/placeholder.png`}
-          width={480}
-          height={320}
-          alt="Placeholder"
-        />
-        <div className="flex max-w-screen-lg flex-col gap-5">
-          <h2 className="text-[2rem] font-bold text-[#224a58]">
+      <div className="grid grid-cols-1 justify-items-center gap-4 xl:grid-cols-[1fr_2fr] xl:justify-items-start xl:gap-14">
+        <div className="order-1">
+          <Image
+            className="xl:max-h-[20rem] xl:max-w-[30rem]"
+            src={`${basePath}/images/placeholder.png`}
+            width={480}
+            height={320}
+            alt="Placeholder"
+          />
+        </div>
+        <div className="order-2 flex flex-col gap-5">
+          <h2 className="min-w-full text-center text-[1.5rem] font-bold text-[#224a58] xl:text-left xl:text-[2rem]">
             Introducing Data Integration Building Blocks
           </h2>
           <div className="flex flex-col gap-2">
@@ -68,7 +70,7 @@ function SectionOne() {
             </ul>
           </div>
         </div>
-      </Grid>
+      </div>
     </ContentContainer>
   );
 }
@@ -76,30 +78,36 @@ function SectionOne() {
 function SectionTwo() {
   return (
     <ContentContainer align>
-      <Grid row gap>
-        <div>
-          <h2 className="font-['Source Sans Pro'] max-w-[23.25rem] text-[2rem] font-bold text-[#224a58]">
+      <div className="grid grid-cols-1 justify-items-center gap-4 xl:grid-cols-[2fr_3fr] xl:justify-items-start xl:gap-0">
+        <div className="order-2 justify-items-center xl:order-1 xl:justify-items-start">
+          <h2 className="text-center text-[1.5rem] font-bold text-[#224a58] xl:max-w-[23.25rem] xl:text-start xl:text-[2rem]">
             Unlock the value of your jurisdiction's data
           </h2>
-          <p className="font-['Source Sans Pro'] max-w-[28.13rem] text-base font-normal leading-relaxed text-[#224a58]">
+          <p className="text-base font-normal leading-relaxed text-[#224a58] xl:max-w-[28.13rem]">
             DIBBs products help jurisdictions make the most of their data. From
             improving the usability of electronic case reporting (eCR) data to
             streamlining data collection from healthcare providers without the
             need for a direct connection, our products save jurisdictions time
             and effort for case investigation and analysis.
           </p>
-          <LinkButton href="/our-products" variant="primary">
+          <LinkButton
+            href="/our-products"
+            variant="primary"
+            className="justify-self-start"
+          >
             Find out more about our products
           </LinkButton>
         </div>
-        <Image
-          className="max-h-[20rem] max-w-[30rem]"
-          src={`${basePath}/images/placeholder.png`}
-          width={480}
-          height={320}
-          alt="Placeholder"
-        />
-      </Grid>
+        <div className="order-1 xl:order-2 xl:justify-self-start">
+          <Image
+            className="xl:max-h-[20rem] xl:max-w-[30rem]"
+            src={`${basePath}/images/placeholder.png`}
+            width={480}
+            height={320}
+            alt="Placeholder"
+          />
+        </div>
+      </div>
     </ContentContainer>
   );
 }
@@ -111,7 +119,7 @@ function SectionThree() {
         <Grid row gap>
           <Grid col={12}>
             <div className="flex flex-col items-center">
-              <h2 className="text-center text-[2rem] font-bold text-[#224a58]">
+              <h2 className="text-center text-[1.5rem] font-bold text-[#224a58] xl:text-[2rem]">
                 Jurisdictions working with DIBBs
               </h2>
               <p className="text-center text-base font-normal leading-relaxed text-[#224a58]">
@@ -122,7 +130,7 @@ function SectionThree() {
           </Grid>
         </Grid>
       </ContentContainer>
-      <div className="pb-20 pt-0">
+      <div className="ml-8 mr-8 pb-20 pt-0">
         <Carousel />
       </div>
     </>
@@ -134,7 +142,7 @@ function InvitationCta() {
     <section className="usa-graphic-list usa-section usa-section--light-blue">
       <GridContainer>
         <div className="flex flex-col items-center justify-center gap-5 self-stretch">
-          <div className="self-stretch text-center text-[2rem] font-bold text-[#224a58]">
+          <div className="self-stretch text-center text-[1.5rem] font-bold text-[#224a58] xl:text-[2rem]">
             Interested in getting started with DIBBs?
           </div>
           <div className="self-stretch text-center text-base font-normal leading-relaxed text-[#224a58]">