remove sections from content container

CDCgov · Dec 9, 2024 · c460182 · c460182
1 parent 870829b
commit c460182
Show file tree

Hide file tree

Showing 3 changed files with 183 additions and 174 deletions.
diff --git a/src/app/components/ContentContainer/ContentContainer.tsx b/src/app/components/ContentContainer/ContentContainer.tsx
@@ -10,19 +10,16 @@ export function ContentContainer({
   children,
   align = false,
   classes = '',
-  sectionClasses = '',
 }: ContentContainerProps) {
   const defaultClasses =
     'ml-auto mr-auto flex max-w-[87.5rem] flex-col px-10 py-4 sm:px-14 sm:py-20';
   return (
-    <section className={sectionClasses}>
-      <div
-        className={classNames(defaultClasses, classes, {
-          'md:px-32': !align,
-        })}
-      >
-        {children}
-      </div>
-    </section>
+    <div
+      className={classNames(defaultClasses, classes, {
+        'md:px-32': !align,
+      })}
+    >
+      {children}
+    </div>
   );
 }
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -12,63 +12,69 @@ import styles from './_styles/Homepage.module.scss';
 import { InvitationCta } from './components/InvitationCta/InvitationCta';
 const DibbsSection = () => (
   <ContentContainer align>
-    <ImageCard
-      imageUrl={`${basePath}/images/homepage-1.jpeg`}
-      imageAlt=""
-      imageFirst={true}
-      imageStyle={{
-        transform: 'scale(1.4) translate(-8%, 3%)',
-      }}
-    >
-      <Heading className="min-w-full text-center xl:text-left">
-        Introducing Data Integration Building Blocks
-      </Heading>
-      <div className="flex flex-col gap-2">
-        <Paragraph className="m-0 max-w-[39.7rem] p-0">
-          {homeContent.dibbs.description}
-        </Paragraph>
-        <ul className="text-base font-semibold leading-relaxed text-[#224a58]">
-          {homeContent.dibbs.benefits.map((benefit, index) => (
-            <li className="min-w-full" key={`benefit-${index}`}>
-              {benefit}
-            </li>
-          ))}
-        </ul>
-      </div>
-    </ImageCard>
-  </ContentContainer>
-);
-
-const ValueSection = () => {
-  const { valueSection } = homeContent;
-
-  return (
-    <ContentContainer sectionClasses={styles.valueSection} align>
+    <section>
       <ImageCard
-        imageFirst={false}
-        imageUrl={`${basePath}/images/homepage-2.jpeg`}
-        xlHideImage={true}
+        imageUrl={`${basePath}/images/homepage-1.jpeg`}
         imageAlt=""
+        imageFirst={true}
         imageStyle={{
           transform: 'scale(1.4) translate(-8%, 3%)',
         }}
-        cardBackground="none"
       >
-        <div className="my-auto flex flex-col gap-2">
-          <Heading className="text-center xl:max-w-[23.25rem] xl:text-start">
-            {valueSection.title}
-          </Heading>
-          <Paragraph className="xl:max-w-[28.13rem]">
-            {valueSection.description}
+        <Heading className="min-w-full text-center xl:text-left">
+          Introducing Data Integration Building Blocks
+        </Heading>
+        <div className="flex flex-col gap-2">
+          <Paragraph className="m-0 max-w-[39.7rem] p-0">
+            {homeContent.dibbs.description}
           </Paragraph>
-          <div>
-            <LinkButton href={valueSection.ctaHref} variant="primary">
-              {valueSection.ctaText}
-            </LinkButton>
-          </div>
+          <ul className="text-base font-semibold leading-relaxed text-[#224a58]">
+            {homeContent.dibbs.benefits.map((benefit, index) => (
+              <li className="min-w-full" key={`benefit-${index}`}>
+                {benefit}
+              </li>
+            ))}
+          </ul>
         </div>
       </ImageCard>
-    </ContentContainer>
+    </section>
+  </ContentContainer>
+);
+
+const ValueSection = () => {
+  const { valueSection } = homeContent;
+
+  return (
+    <div className={styles.valueSection}>
+      <ContentContainer align>
+        <section>
+          <ImageCard
+            imageFirst={false}
+            imageUrl={`${basePath}/images/homepage-2.jpeg`}
+            xlHideImage={true}
+            imageAlt=""
+            imageStyle={{
+              transform: 'scale(1.4) translate(-8%, 3%)',
+            }}
+            cardBackground="none"
+          >
+            <div className="my-auto flex flex-col gap-2">
+              <Heading className="text-center xl:max-w-[23.25rem] xl:text-start">
+                {valueSection.title}
+              </Heading>
+              <Paragraph className="xl:max-w-[28.13rem]">
+                {valueSection.description}
+              </Paragraph>
+              <div>
+                <LinkButton href={valueSection.ctaHref} variant="primary">
+                  {valueSection.ctaText}
+                </LinkButton>
+              </div>
+            </div>
+          </ImageCard>
+        </section>
+      </ContentContainer>
+    </div>
   );
 };
 
@@ -77,17 +83,19 @@ const JurisdictionSection = () => {
 
   return (
     <>
-      <ContentContainer align classes="px-14 pt-20 pb-10 sm:pb-10">
-        <Grid row gap>
-          <Grid col={12}>
-            <div className="flex flex-col items-center">
-              <Heading className="text-center">{jurisdictions.title}</Heading>
-              <Paragraph className="text-center">
-                {jurisdictions.description}
-              </Paragraph>
-            </div>
+      <ContentContainer align classes="sm:pb-10">
+        <section>
+          <Grid row gap>
+            <Grid col={12}>
+              <div className="flex flex-col items-center">
+                <Heading className="text-center">{jurisdictions.title}</Heading>
+                <Paragraph className="text-center">
+                  {jurisdictions.description}
+                </Paragraph>
+              </div>
+            </Grid>
           </Grid>
-        </Grid>
+        </section>
       </ContentContainer>
       <div className="ml-8 mr-8 pb-20 pt-0">
         <Carousel />