Updated image card to have a no show image option, so i can use backg…

…round images when needed

src/app/_styles/Homepage.module.scss

@@ -0,0 +1,22 @@
+.valueSection {
+  position: relative;
+  overflow: hidden;
+
+  &::after {
+    content: '';
+    position: absolute;
+    top: -8px;
+    right: 0;
+    width: 50%;
+    height: 100%;
+    background-image: url('/images/homepage-2.jpeg');
+    background-size: cover;
+    background-position: center;
+    border-radius: 2.5rem 0rem 1.25rem 0rem;
+    box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.15);
+
+    @media (max-width: 1280px) {
+      display: none;
+    }
+  }
+}

src/app/components/ContentContainer/ContentContainer.tsx

@@ -4,16 +4,18 @@ interface ContentContainerProps {
   children: React.ReactNode;
   align?: boolean;
   classes?: string;
+  sectionClasses?: string;
 }
 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>
+    <section className={sectionClasses}>
       <div
         className={classNames(defaultClasses, classes, {
           'md:px-32': !align,

src/app/components/ImageCard/ImageCard.module.scss

@@ -1,9 +1,7 @@
 .imageCard {
-  background: var(--card-background);
   @media (min-width: 1280px) {
     border-radius: 2.5rem 0rem 2.5rem 0rem;
   }
-  box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.1);
 
   .imageContainer {
     @media (min-width: 1280px) {
@@ -30,3 +28,16 @@
     }
   }
 }
+
+.imageCard-white {
+  background: var(--card-background);
+  box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.1);
+  @media (min-width: 1280px) {
+    border-radius: 2.5rem 0rem 2.5rem 0rem;
+  }
+}
+
+// None variant
+.imageCard-none {
+  background: none;
+}

src/app/components/ImageCard/ImageCard.tsx

@@ -1,13 +1,16 @@
 import Image from 'next/image';
 import { type CSSProperties } from 'react';
 import { Container, ImageContainer, TextContainer } from './_ui';
+import classNames from 'classnames';
 
 interface ImageCardProps {
   imageUrl: string;
   imageAlt: string;
   children: React.ReactNode;
   imageFirst?: boolean;
   imageStyle?: CSSProperties;
+  cardBackground?: 'none' | 'white';
+  xlHideImage?: boolean;
 }
 
 export const ImageCard = ({
@@ -16,11 +19,16 @@ export const ImageCard = ({
   children,
   imageFirst = true,
   imageStyle = {},
+  cardBackground = 'white',
+  xlHideImage = false,
 }: ImageCardProps) => (
-  <Container imageFirst={imageFirst}>
+  <Container imageFirst={imageFirst} cardBackground={cardBackground}>
     <ImageContainer imageFirst={imageFirst}>
       <Image
-        className="h-full w-full object-cover"
+        className={classNames(
+          'h-full w-full object-cover',
+          xlHideImage ? 'block xl:hidden' : '',
+        )}
         src={imageUrl}
         width={0}
         height={0}

src/app/components/ImageCard/_ui/index.tsx

@@ -4,9 +4,14 @@ import styles from '../ImageCard.module.scss';
 interface ContainerProps {
   children: React.ReactNode;
   imageFirst?: boolean;
+  cardBackground?: 'none' | 'white';
 }
 
-export const Container = ({ children, imageFirst = true }: ContainerProps) => {
+export const Container = ({
+  children,
+  imageFirst = true,
+  cardBackground = 'white',
+}: ContainerProps) => {
   const imageFirstClass = imageFirst
     ? 'xl:grid-cols-[1fr_2fr]'
     : 'xl:grid-cols-[2fr_1fr]';
@@ -17,6 +22,7 @@ export const Container = ({ children, imageFirst = true }: ContainerProps) => {
         'grid grid-cols-1 justify-items-center gap-4 xl:justify-items-start xl:gap-14',
         imageFirstClass,
         styles.imageCard,
+        styles[`imageCard-${cardBackground}`],
       )}
     >
       {children}

src/app/layout.tsx

@@ -3,7 +3,7 @@ import Header from './components/Header/Header';
 import Footer from './components/Footer/Footer';
 import USABanner from './components/UsaBanner/UsaBanner';
 import './globals.scss';
-import './custom-styles.css';
+import './_styles/custom-styles.css';
 import { HeroContextProvider } from './context';
 
 export const metadata: Metadata = {

src/app/page.tsx

@@ -9,12 +9,13 @@ import { useHeroInit } from './hooks/useHeroInit';
 import { homePageHero, homeContent } from './data/home';
 import { ImageCard } from './components/ImageCard/ImageCard';
 import { Heading, Paragraph } from './_ui';
+import styles from './_styles/homepage.module.scss';
 
 const DibbsSection = () => (
   <ContentContainer align>
     <ImageCard
       imageUrl={`${basePath}/images/homepage-1.jpeg`}
-      imageAlt="Data Integration Building Blocks illustration"
+      imageAlt=""
       imageFirst={true}
       imageStyle={{
         transform: 'scale(1.4) translate(-8%, 3%)',
@@ -43,9 +44,18 @@ const ValueSection = () => {
   const { valueSection } = homeContent;
 
   return (
-    <ContentContainer align>
-      <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">
+    <ContentContainer sectionClasses={styles.valueSection} align>
+      <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>
@@ -56,17 +66,7 @@ const ValueSection = () => {
             {valueSection.ctaText}
           </LinkButton>
         </div>
-        <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="Value section illustration"
-            priority
-          />
-        </div>
-      </div>
+      </ImageCard>
     </ContentContainer>
   );
 };