feat: add error handling to Await component in carousel and category sections

app/components/ui/carousel-hero.tsx

@@ -74,7 +74,10 @@ export const CarouselHero = (properties: TNews) => {
       >
         <div className="embla__container hero flex sm:gap-x-8">
           <Suspense fallback={<div>Loading...</div>}>
-            <Await resolve={items}>
+            <Await
+              resolve={items}
+              errorElement={<div>Oops!</div>}
+            >
               {(value) =>
                 value.data.map(
                   (

app/components/ui/carousel-section.tsx

@@ -80,7 +80,10 @@ export const CarouselSection = (properties: TNews) => {
       >
         <div className="embla__container col-span-3 flex max-h-[586px] sm:gap-x-8">
           <Suspense fallback={<div>Loading...</div>}>
-            <Await resolve={items}>
+            <Await
+              resolve={items}
+              errorElement={<div>Oops!</div>}
+            >
               {(value) =>
                 value.data.map(
                   (

app/components/ui/category-section.tsx

@@ -43,7 +43,10 @@ export const CategorySection = (properties: TNews) => {
 
       <div className="grid sm:grid-cols-3 sm:gap-x-8">
         <Suspense fallback={<div>Loading...</div>}>
-          <Await resolve={items}>
+          <Await
+            resolve={items}
+            errorElement={<div>Oops!</div>}
+          >
             {(value) =>
               value.data.map(
                 (