added bottom image in new branch

app/(landing)/page.tsx

@@ -28,18 +28,30 @@ export default function Page() {
            * component to a relevant loading component.
            */
         }
-        <GenericSection title="Schedule" color="white">
+        <GenericSection title="Schedule">
           <Suspense fallback={<>Loading Schedule!</>}>
             <Schedule />
           </Suspense>
         </GenericSection>
-        <GenericSection title="Sponsors" color="gray-100">
+        <GenericSection title="Sponsors">
           <Suspense fallback={<>Loading Sponsors!</>}>
             <Sponsors />
           </Suspense>
         </GenericSection>
-        <GenericSection title="FAQ" color="gray-500">
+        <GenericSection title="FAQ" color="bg-gray-900">
           <FAQ />
+          <Image
+                  src="/landing/wand-cats-combined.png"
+                  alt="bottom image"
+                  layout="responsive"
+                  object-fit= "cover"
+                  style={{
+                    width: '100%',
+                    height: 'auto',
+                  }}
+                  width={500}
+                  height={300}
+                  />
         </GenericSection>
       </div>
     </main>

app/(landing)/sections/GenericSection.tsx

@@ -4,18 +4,20 @@ import { ReactNode } from 'react';
 type GenericSectionProps = {
   children: ReactNode;
   title: string;
-  color: string;
+  color?: string;
 };
 
 export default function GenericSection(props: GenericSectionProps) {
+  const defaultColor = 'bg-blue-100';
+  const bgColorNew = props.color ? `${props.color}` : defaultColor;
   return (
     <div
       id={props.title}
       className={'flex w-full flex-col items-center bg-blue-200'}
     >
       <SectionTitle title={props.title} />
       {props.children}
-      <div className='h-[15vh] w-full bg-blue-100'></div>
+      <div className={`h-[15vh] w-full ${bgColorNew}`}></div>
     </div>
   );
 }