everything

components/cards/sliderCard.tsx

@@ -1,21 +1,23 @@
+import { ProductTypes } from "@/types";
 import Image, { StaticImageData } from "next/image";
 import Link from "next/link";
+import Text from "../text";
 
-interface typePropData{
-    id:number;
-    image:StaticImageData | string;
-    text:string;
-    title:string;
-    path:string;
-}
-
-export default function SliderCard({data}:{data:typePropData}) {
+export default function SliderCard({data}:{data:ProductTypes}) {
   return (
     <Link href={data.path} id="news_slider_card" className="group hover:cursor-pointer" >
-        <Image src={data.image} alt="slider image" width={100} height={100} />
-        <div className="relative border flex flex-col items-start justify-start">
-            <div>{data.title}</div>
-            <div>{data.text}</div>
+        <Image 
+        src={data.image} 
+        alt="slider image" 
+        width={600} 
+        height={600} 
+        className="object-cover max-w-[600px] w-full h-[300px]" 
+        />
+        <div className="relative mt-6 text-primary flex flex-col items-start p-4 justify-start bg-gray-50 border-b-6 border-gray-400 group hover:border-b-secondary">
+            <div className="absolute -top-8 text-[16px] font-semibold left-5 bg-secondary py-1 px-3 clip-trapezoid">
+              <Text txt={data.truck_name}/>
+            </div>
+            <div className="text-xl font-bold flex items-center h-[60px] hover:text-secondary"><Text txt={data.desc}/></div>
         </div>
     </Link>
   )