Card component with image, title and card with background Image with…

src/App.tsx

@@ -1,27 +1,49 @@
-import { BarChartData } from "./assets/data/ChartData";
-import Chart from "./components/Chart";
+import CardImageBtn from "./components/CardImageBtn";
+import { dimage, mountain1, mountain2 } from "./assets/index";
+import ImageCard from "./components/ImageCard";
 
 function App() {
-  const chartData = {
-    labels: BarChartData.map((data) => data.name),
-    datasets: [
-      {
-        label: "Expenses",
-        data: BarChartData.map((data) => data.amt),
-        backgroundColor: "rgba(255, 99, 132, 0.2)",
-        borderColor: "rgba(255, 99, 132, 1)",
-        borderWidth: 1,
-        fill: true,
-      },
-    ],
-  };
   return (
     <>
-      <div className="grid md:grid-cols-3 sm:grid-cols-1 gap-10 p-10">
-        <Chart chartData={chartData} chartType="bar" />
-        <Chart chartData={chartData} chartType="line" />
-        <Chart chartData={chartData} chartType="pie" />
-        <Chart chartData={chartData} chartType="doughnut" />
+      {/* Responsive Card with image, title, description with link button */}
+      <div className="flex flex-col md:flex-row gap-5">
+        <CardImageBtn
+          title={"Card Heading"}
+          imgSrc={dimage}
+          btnLabel={"More..."}
+          btnLink={"#"}
+        >
+          <p>
+            Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sunt nobis
+            deserunt accusantium tenetur doloremque laboriosam?
+          </p>
+        </CardImageBtn>
+
+        <CardImageBtn
+          title={"Card Heading 1"}
+          imgSrc={dimage}
+          btnLabel={"More..."}
+          btnLink={"#"}
+        >
+          <p>
+            Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sunt nobis
+            deserunt accusantium tenetur doloremque laboriosam?
+          </p>
+        </CardImageBtn>
+      </div>
+
+      {/* Responsive ImageCard with background image, title, description with link button */}
+      <div className="flex flex-col md:flex-row gap-6 p-4">
+        <ImageCard title={"ImageBg Card 1"} bgImage={mountain1}>
+          <p>
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. In, earum!
+          </p>
+        </ImageCard>
+        <ImageCard title={"ImageBg Card 2"} bgImage={mountain2}>
+          <p>
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. In, earum!
+          </p>
+        </ImageCard>
       </div>
     </>
   );

src/assets/index.ts

@@ -0,0 +1,7 @@
+import dimage from "./dummyImage.png";
+import mountain1 from "./mountain.jpg";
+import mountain2 from "./mountain2.jpg";
+import AI1 from "./AI1.jpg";
+import AI2 from "./ai2.webp";
+
+export { dimage, mountain2, mountain1, AI1, AI2 };

src/components/CardImageBtn.tsx

@@ -0,0 +1,21 @@
+const CardImageBtn = ({ title, imgSrc, children, btnLabel, btnLink }) => {
+  return (
+    <div className="border p-4 shadow-lg w-60 sm:w-72 md:w-96 mx-auto mt-5 rounded-lg sm:m-4">
+      <img src={imgSrc} alt="image " className="mb-3 rounded-lg" />
+      <h3 className="font-bold mb-3"> {title}</h3>
+      <div className="test-gray-500 text-sm mb-3">
+        <p className="text-wrap text-left">{children}</p>
+      </div>
+      <div className="text-center">
+        <a
+          className="bg-indigo-800 text-white px-4 py-2 inline-block rounded-lg"
+          href={btnLink}
+        >
+          {btnLabel}
+        </a>
+      </div>
+    </div>
+  );
+};
+
+export default CardImageBtn;

src/components/ImageCard.tsx

@@ -0,0 +1,36 @@
+import { BiBookmark, BiHeart, BiShare } from "react-icons/bi";
+import Iocnbutton from "./Iocnbutton";
+
+const ImageCard = ({ title, bgImage, children, ...props }) => {
+  return (
+    <div
+      {...props}
+      className="relative max-w-xs overflow-hidden rounded-2xl shadow-lg group"
+    >
+      <img
+        src={bgImage}
+        alt="background Image"
+        className="transition-transform group-hover:scale-110 duration-300"
+      />
+      <div className="absolute inset-0 flex items-end bg-gradient-to-t from-black/60 to-transparent">
+        <div className="p-4 text-white">
+          <h3 className="text-xl font-bold mb-2"> {title} </h3>
+          {children}
+          <div className="space-x-4 mt-4">
+            <Iocnbutton>
+              <BiHeart />
+            </Iocnbutton>
+            <Iocnbutton>
+              <BiBookmark />
+            </Iocnbutton>
+            <Iocnbutton>
+              <BiShare />
+            </Iocnbutton>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ImageCard;

src/components/Iocnbutton.tsx

@@ -0,0 +1,9 @@
+const Iocnbutton = ({ children }) => {
+  return (
+    <>
+      <button className="btn">{children}</button>
+    </>
+  );
+};
+
+export default Iocnbutton;