app/components/untils/Carousel.tsx

@@ -11,21 +11,13 @@ import {
   CarouselPrevious,
   type CarouselApi,
 } from "@/ui/carousel";
-  const imageUrls = [
 
-  "/images/carousel-1.jpg",
-  "/images/carousel-2.jpg",
-  "/images/carousel-3.jpg",
-  "/images/carousel-4.jpg",
-  "/images/carousel-5.jpg",
-  "/images/carousel-6.jpg",
-];
 export function CarouselDemo() {
   const [api, setApi] = React.useState<CarouselApi>();
   const [current, setCurrent] = React.useState(0);
   const [count, setCount] = React.useState(0);
 
-  const totalSlides = imageUrls.length; 
+  const totalSlides = 6; 
 
   React.useEffect(() => {
     if (!api) return;
@@ -54,16 +46,12 @@ export function CarouselDemo() {
         className="w-full"
       >
         <CarouselContent>
-          {imageUrls.map((src, index) => (
+          {Array.from({ length: totalSlides }).map((_, index) => (
             <CarouselItem key={index}>
               <div className="p-1">
                 <Card>
                   <CardContent className="flex aspect-square items-center justify-center p-6">
-                     <img
+                    <span className="text-4xl font-semibold">{index + 1}</span>
-                      src={src}
-                      alt={`Slide ${index + 1}`}
-                      className="w-full h-full object-cover"
-                    />
                   </CardContent>
                 </Card>
               </div>

app/routes/news.tsx

@@ -13,6 +13,8 @@ export function meta( ) {
 export default function Home() {
   return (
     <div>
+      <Header />
+      <TopNav />
       <CarouselDemo />
       <NewsList />
     </div>