render images for bento box gallery section and apply styling accordi…

…ng to Figma design standards

src/app/components/bentoSection/bento.module.css

@@ -0,0 +1,83 @@
+@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');
+
+.card {
+  padding: 1rem 0;
+  height: 184px;
+  border-radius: 4px;
+  display: flex;
+}
+
+.firstCard {
+  height: 100%;
+}
+
+.cardContainer {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-evenly;
+}
+
+.bentoThirdContainer {
+  padding-top: 1rem;
+  display: flex;
+}
+
+.bentoThirdContainer .card {
+  padding: 0rem;
+  margin: 0rem;
+}
+
+.bentoThirdContainer .card {
+  padding: 0rem;
+  margin: 0 1rem;
+}
+
+.imageContainer {
+  display: flex;
+  max-height: 250px;
+  height: 100%;
+  max-width: 775px;
+  width: 100%;
+}
+
+.imageStyle {
+  object-fit: fill;
+  border-radius: 10px;
+  border: 3px solid #3c3db9;
+  box-shadow: 8px 10px 10px 0px #00000040;
+  width: 100%;
+  height: auto;
+}
+
+@media (max-width: 1300px) {
+  .cardContainer {
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .card {
+    margin-bottom: 30px;
+  }
+
+  .cardHeader {
+    font-size: 24px;
+  }
+}
+
+@media (max-width: 375px) {
+  .cardContainer {
+    padding: 24px;
+  }
+}
+
+@media (max-width: 786px) {
+  .imageContainer {
+    max-height: 245px;
+    height: 100%;
+    max-width: 330px;
+  }
+
+  .imageStyle {
+    max-width: 90%;
+  }
+}

src/app/components/bentoSection/bento.tsx

@@ -0,0 +1,9 @@
+import styles from './bento.module.css';
+
+interface BentoProps {
+  children: React.ReactNode;
+}
+
+export default function Bento({ children }: BentoProps) {
+  return <div className={styles.card}>{children}</div>;
+}

src/app/components/bentoSection/bentoSection.tsx

@@ -0,0 +1,127 @@
+import Bento from './bento';
+import styles from './bento.module.css';
+import Image from 'next/image';
+
+interface BentoData {
+  id: number;
+  url: string;
+  alt: string;
+}
+
+const bentoImages = [
+  {
+    id: 1,
+    url: '/assets/twoPeopleHelp.png',
+    alt: 'two people help',
+  },
+  {
+    id: 2,
+    url: '/assets/meetupGroupShot1.png',
+    alt: 'meetup group picture 1',
+  },
+  {
+    id: 3,
+    url: '/assets/meetupGroupShot2.png',
+    alt: 'meetup group picture 2',
+  },
+  {
+    id: 4,
+    url: '/assets/meetupGroupShot3.png',
+    alt: 'meetup group picture 3',
+  },
+  {
+    id: 5,
+    url: '/assets/meetupGroupShot4.png',
+    alt: 'meetup group picture 4',
+  },
+  {
+    id: 6,
+    url: '/assets/meetupGroupShot5.png',
+    alt: 'meetup group picture 5',
+  },
+  {
+    id: 7,
+    url: '/assets/twoPeopleHelpLaptop.png',
+    alt: 'two people help on laptop',
+  },
+  {
+    id: 8,
+    url: '/assets/groupTableLaptop.png',
+    alt: 'group table collaborating with laptops',
+  },
+];
+
+export default function BentoSection() {
+  return (
+    <div className={styles.cardContainer}>
+      <Bento key={bentoImages[0].id}>
+        <div>
+          <Image
+            className={styles.imageStyle}
+            src={bentoImages[0].url}
+            alt={bentoImages[0].alt}
+            width={575}
+            height={750}
+          />
+        </div>
+      </Bento>
+
+      <div className={styles.bentoImages}>
+        {bentoImages.slice(1, 4).map((card) => (
+          <Bento key={card.id}>
+            <div className={styles.imageContainer}>
+              <Image
+                src={card.url}
+                alt={card.alt}
+                className={styles.imageStyle}
+                sizes='400vw'
+                width={575}
+                height={450}
+              />
+            </div>
+          </Bento>
+        ))}
+      </div>
+
+      <div className={styles.bentoFourthContainer}>
+        <Bento key={bentoImages[5].id}>
+          <div className={styles.imageContainer}>
+            <Image
+              className={styles.imageStyle}
+              src={bentoImages[5].url}
+              alt={bentoImages[5].alt}
+              width={475}
+              height={450}
+            />
+          </div>
+        </Bento>
+
+        <div className={styles.bentoThirdContainer}>
+          <Bento key={bentoImages[6].id}>
+            <div>
+              <Image
+                className={styles.imageStyle}
+                src={bentoImages[6].url}
+                alt={bentoImages[6].alt}
+                width={575}
+                height={750}
+              />
+            </div>
+          </Bento>
+
+          <Bento key={bentoImages[7].id}>
+            <div>
+              <Image
+                className={styles.imageStyle}
+                src={bentoImages[7].url}
+                alt={bentoImages[7].alt}
+                width={575}
+                height={750}
+              />
+            </div>
+          </Bento>
+        </div>
+      </div>
+    </div>
+  );
+}

src/app/page.tsx

@@ -3,6 +3,7 @@ import BannerSection from './components/bannerSection/bannerSection';
 import HeroSection from './components/heroSection/heroSection';
 import Navbar from './components/navbar/navbar';
 import styles from './page.module.css';
+import BentoSection from './components/bentoSection/bentoSection';
 
 export default function Home() {
   const labelMap = {
@@ -41,6 +42,7 @@ export default function Home() {
       <HeroSection label={labelMap.lblHero} />
       <BannerSection label={labelMap} />
       <CardsSection label={labelMap} />
+      <BentoSection />
     </main>
   );
 }