make section for large meetup image (WEB-35) #73

src/app/components/groupPhotoSection/groupPhotoSection.module.css

@@ -0,0 +1,18 @@
+@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@800&display=swap');
+
+.groupPhotoSection {
+  background-color: #3c3db9;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 2em 1.5em;
+}
+
+.groupPhotoImg {
+  border: #eeeeee 5px solid;
+  width: 100%;
+  height: auto;
+  justify-content: center;
+  align-items: center;
+  border-radius: 10px;
+}

src/app/components/groupPhotoSection/groupPhotoSection.test.js

@@ -0,0 +1,14 @@
+import React from 'react'; // Import React
+import { render, screen } from '@testing-library/react';
+import GroupPhotoSection from './heroSection';
+
+describe('GroupPhotoSection component', () => {
+  const labelMap = {
+    lblHero: "You don't have to code alone.",
+  };
+  test('renders the component', () => {
+    render(<GroupPhotoSection label={labelMap.lblHero} />);
+    const groupPhotoElement = screen.getByTestId('hero');
+    expect(groupPhotoElement).toBeInTheDocument();
+  });
+});

src/app/components/groupPhotoSection/groupPhotoSection.tsx

@@ -0,0 +1,20 @@
+'use client';
+
+import React from 'react';
+import styles from './groupPhotoSection.module.css';
+import Image from 'next/image';
+import { detectContentType } from 'next/dist/server/image-optimizer';
+
+export default function GroupPhotoSection({ label }: { label: string }) {
+  return (
+    <div className={styles.groupPhotoSection} data-testid='groupPhoto'>
+      <Image
+        className={styles.groupPhotoImg}
+        src='/assets/meetupGroupShot5.png'
+        alt='Meetup Group Shot image'
+        width={1450}
+        height={500}
+      />
+    </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 GroupPhotoSection from './components/groupPhotoSection/groupPhotoSection';
 
 export default function Home() {
   const labelMap = {
@@ -41,6 +42,7 @@ export default function Home() {
       <HeroSection label={labelMap.lblHero} />
       <BannerSection label={labelMap} />
       <CardsSection label={labelMap} />
+      <GroupPhotoSection label='' />
     </main>
   );
 }