1

app/components/untils/Carousel.tsx

@@ -31,7 +31,7 @@ export function CarouselDemo() {
   }, [api]);
 
   return (
-    <div className="relative w-full max-w-xs">
+    <div className="relative w-full max-w-4xl mx-auto">
       <Carousel
         opts={{
           loop: true,
@@ -43,15 +43,24 @@ export function CarouselDemo() {
           }),
         ]}
         setApi={setApi}
-        className="w-full"
       >
-        <CarouselContent>
+        <CarouselContent className="h-full w-full">
           {Array.from({ length: totalSlides }).map((_, index) => (
-            <CarouselItem key={index}>
+            <CarouselItem key={index} className="w-full h-full">
               <div className="p-1">
                 <Card>
-                  <CardContent className="flex aspect-square items-center justify-center p-6">
-                    <span className="text-4xl font-semibold">{index + 1}</span>
+                  <CardContent className="flex aspect-square items-center justify-center ">
+                    <div 
+                    className="w-full h-full relative"
+                    style={{
+                      backgroundImage: "url('/app/images/header.png')",
+                      backgroundSize: '100% 100%',
+                    }}
+                    >
+                      <div className="absolute top-1 right-1 h-full bg-black">
+                        
+                      </div>
+                    </div>
                   </CardContent>
                 </Card>
               </div>

app/routes/news.tsx

@@ -2,6 +2,7 @@ import { CarouselDemo } from "@/components/untils/Carousel";
 import type { Route } from "./+types/news";
 import { Header } from "@/components/header/Header";
 import { TopNav } from "@/components/header/TopNav";
+import NewsList from "@/components/list/NewsList";
 
 
 export function meta( ) {
@@ -17,6 +18,7 @@ export default function Home() {
       <Header />
       <TopNav />
       <CarouselDemo />
+      <NewsList/>
     </div>
   );
 }