updating search and carousel styling

app/page.tsx

@@ -17,10 +17,10 @@ export default async function HomePage() {
       <Suspense>
 
         <div className='container grid justify-around my-4 grid-cols-1 items-center justify-items-center'>
-        <Carousel collection={undefined} />
-        <Carousel collection='flower' />
-        <Carousel collection='foliage' />
-        <Carousel collection='nature' />
+          <Carousel collection={undefined} />
+          <Carousel collection='flower' />
+          <Carousel collection='foliage' />
+          <Carousel collection='nature' />
           {/* <Link className='h-full w-full md:w-10/12 flex items-center justify-center justify-items-center' href="/wall">
             <Button className='py-3 w-full m-3 bg-transparent' variant={'dark'}>
               <h2 className='absolute z-50 text-3xl text-white'>Art for the Wall</h2>
@@ -35,9 +35,9 @@ export default async function HomePage() {
           </Link> */}
 
         </div>
-        <Suspense>
-          <Footer />
-        </Suspense>
+      </Suspense>
+      <Suspense>
+        <Footer />
       </Suspense>
     </>
   );

components/layout/navbar/mobile-menu.tsx

@@ -57,7 +57,7 @@ export default function MobileMenu({ menu }: { menu: Menu[] }) {
             leaveFrom="translate-x-0"
             leaveTo="translate-x-[-100%]"
           >
-            <Dialog.Panel className="fixed bottom-0 left-0 right-0 top-0 flex h-full w-full flex-col bg-white pb-6 dark:bg-black">
+            <Dialog.Panel className="fixed bottom-0 left-0 right-0 top-0 flex h-full w-full flex-col bg-neutral-800/95 pb-6 dark:bg-black">
               <div className="p-4">
                 <button className="mb-4" onClick={closeMobileMenu} aria-label="Close mobile menu">
                   <XMarkIcon className="h-6" />
@@ -69,10 +69,10 @@ export default function MobileMenu({ menu }: { menu: Menu[] }) {
                 {menu.length ? (
                   <ul className="flex flex-col">
                     {menu.map((item: Menu) => (
-                      <li key={item.title}>
+                      <li className="mb-4" key={item.title}>
                         <Link
                           href={item.path}
-                          className="rounded-lg py-1 text-xl text-black transition-colors hover:text-neutral-500 dark:text-white"
+                          className="rounded-lg py-1 text-xl text-neutral-200 transition-colors hover:text-neutral-500 dark:text-white"
                           onClick={closeMobileMenu}
                         >
                           {item.title}

components/ui/carousel.tsx

@@ -20,7 +20,7 @@ export async function Carousel({collection}:
   if (!products?.length) return null;
 
   return (
-    <div>
+    <div className='max-w-full'>
       {scapeTitle && 
         <Link href={`/search/${scapeTitle}`}>
           <p className='text-lg text-bold'>{scapeTitle}</p>