Improve responsiveness of home page (#48)

* improved responsive layout * text size, improvements to element alignment, add left and right margin to carousel container
CDCgov · Nov 15, 2024 · 2d32d97 · 2d32d97
1 parent 4a39590
commit 2d32d97
Showing 1 changed file with 35 additions and 27 deletions.
diff --git 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,38 +70,44 @@ function SectionOne() {
             </ul>
           </div>
         </div>
-      </Grid>
+      </div>
     </ContentContainer>
   );
 }
 
 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]">