Fix:Replace class with className

Frontend/src/pages/Home/Cards.jsx

@@ -1,8 +1,7 @@
-
 import React from "react";
 
-export const HeroSecn = () =>{
+export const HeroSecn = () => {
-    return(
+  return (
     <section className=" py-40 w-full flex justify-center text-gray-100">
       <div className="flex flex-col-reverse md:flex-row justify-between w-10/12 h-auto">
         <div className="container mx-auto flex flex-col justify-between h-full w-full">
@@ -16,81 +15,159 @@ export const HeroSecn = () =>{
           </div>
         </div>
         <div className="w-full md:w-4/5 object-contain flex justify-center items-center">
-            <img src="/images/plant.png" className="w-full h-auto rounded-3xl shadow-xl" alt="plant" />
+          <img
+            src="/images/plant.png"
+            className="w-full h-auto rounded-3xl shadow-xl"
+            alt="plant"
+          />
         </div>
       </div>
     </section>
-    )
+  );
-}
+};
 
 export const CardWithImage = () => {
   return (
-        <div class="max-w-sm  rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700">
+    <div className="max-w-sm  rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700">
       <a href="#">
-                  <img class="rounded-t-lg" src="https://i.pinimg.com/736x/07/2b/5f/072b5f6a1630d919ceee1a8569683cf7.jpg" alt="plant" />
+        <img
+          className="rounded-t-lg"
+          src="https://i.pinimg.com/736x/07/2b/5f/072b5f6a1630d919ceee1a8569683cf7.jpg"
+          alt="plant"
+        />
       </a>
-              <div class="p-6 backdrop-blur-md  rounded-b-lg">
+      <div className="p-6 backdrop-blur-md  rounded-b-lg">
         <a href="#">
-                      <h5 class="mb-2 text-2xl font-bold tracking-tight text-white dark:text-white">High tech, high yields?</h5>
+          <h5 className="mb-2 text-2xl font-bold tracking-tight text-white dark:text-white">
+            High tech, high yields?
+          </h5>
         </a>
-                  <p class="mb-3 font-normal text-white  dark:text-gray-400">The Kenyan farmers deploying AI to increase productivity
+        <p className="mb-3 font-normal text-white  dark:text-gray-400">
-This article is more than 4 months old. AI apps are increasingly popular among small-scale farmers seeking to improve the quality and quantity of their crop.</p>
+          The Kenyan farmers deploying AI to increase productivity This article
-                  <a href="https://www.theguardian.com/world/2024/sep/30/high-tech-high-yields-the-kenyan-farmers-deploying-ai-to-increase-productivity" target="_blank" class="inline-flex shadow-md backdrop-blur-md bg-gradient-to-tr from-gray-700/20 to-gray-50/20 items-center px-3 py-2 text-sm font-medium text-center text-white rounded-lg hover:backdrop-blur-xl ">
+          is more than 4 months old. AI apps are increasingly popular among
+          small-scale farmers seeking to improve the quality and quantity of
+          their crop.
+        </p>
+        <a
+          href="https://www.theguardian.com/world/2024/sep/30/high-tech-high-yields-the-kenyan-farmers-deploying-ai-to-increase-productivity"
+          target="_blank"
+          className="inline-flex shadow-md backdrop-blur-md bg-gradient-to-tr from-gray-700/20 to-gray-50/20 items-center px-3 py-2 text-sm font-medium text-center text-white rounded-lg hover:backdrop-blur-xl "
+        >
           Read more
-                      <svg class="rtl:rotate-180 w-3.5 h-3.5 ms-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
+          <svg
-                          <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
+            className="rtl:rotate-180 w-3.5 h-3.5 ms-2"
+            aria-hidden="true"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 14 10"
+          >
+            <path
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M1 5h12m0 0L9 1m4 4L9 9"
+            />
           </svg>
         </a>
       </div>
     </div>
-    )
+  );
-}
+};
 
 export const CardOnlyText = (props) => {
-    return(
+  return (
     <div>
-              <a href={props.href} target="_blank" class="block max-w-sm p-6 rounded-lg shadow-md backdrop-blur-md dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700">
+      <a
-              <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-50 dark:text-white"> {props.headingText} </h5>
+        href={props.href}
-              <p class="font-normal text-gray-50 dark:text-gray-400"> {props.bodyText} </p>
+        target="_blank"
+        className="block max-w-sm p-6 rounded-lg shadow-md backdrop-blur-md dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700"
+      >
+        <h5 className="mb-2 text-2xl font-bold tracking-tight text-gray-50 dark:text-white">
+          {" "}
+          {props.headingText}{" "}
+        </h5>
+        <p className="font-normal text-gray-50 dark:text-gray-400">
+          {" "}
+          {props.bodyText}{" "}
+        </p>
       </a>
     </div>
-    )
+  );
-}
+};
 
 export const CardWithButton = () => {
-    return(
+  return (
-        <div class="max-w-sm p-6 backdrop-blur-md rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700">
+    <div className="max-w-sm p-6 backdrop-blur-md rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700">
-                <a href="https://www.reuters.com/sustainability/land-use-biodiversity/comment-how-empowering-smallholder-farmers-with-ai-tools-can-bolster-global-food-2025-01-10/" target="_blank">
+      <a
-                    <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-50 dark:text-white">Empowering smallholder farmers with AI tools can bolster global food security</h5>
+        href="https://www.reuters.com/sustainability/land-use-biodiversity/comment-how-empowering-smallholder-farmers-with-ai-tools-can-bolster-global-food-2025-01-10/"
+        target="_blank"
+      >
+        <h5 className="mb-2 text-2xl font-bold tracking-tight text-gray-50 dark:text-white">
+          Empowering smallholder farmers with AI tools can bolster global food
+          security
+        </h5>
       </a>
-                <p class="mb-3 font-normal text-gray-50 dark:text-gray-400"> AI-powered weather forecasts help rural Indian farmers make informed planting decisions, reducing debt and boosting savings.</p>
+      <p className="mb-3 font-normal text-gray-50 dark:text-gray-400">
-                <a href="https://www.reuters.com/sustainability/land-use-biodiversity/comment-how-empowering-smallholder-farmers-with-ai-tools-can-bolster-global-food-2025-01-10/" target="_blank" class="inline-flex shadow-md backdrop-blur-md bg-gradient-to-tr from-gray-700/20 to-gray-50/20 items-center px-3 py-2 text-sm font-medium text-center text-white rounded-lg hover:backdrop-blur-xl ">
+        {" "}
+        AI-powered weather forecasts help rural Indian farmers make informed
+        planting decisions, reducing debt and boosting savings.
+      </p>
+      <a
+        href="https://www.reuters.com/sustainability/land-use-biodiversity/comment-how-empowering-smallholder-farmers-with-ai-tools-can-bolster-global-food-2025-01-10/"
+        target="_blank"
+        className="inline-flex shadow-md backdrop-blur-md bg-gradient-to-tr from-gray-700/20 to-gray-50/20 items-center px-3 py-2 text-sm font-medium text-center text-white rounded-lg hover:backdrop-blur-xl "
+      >
         Read more
-                      <svg class="rtl:rotate-180 w-3.5 h-3.5 ms-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
+        <svg
-                          <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
+          className="rtl:rotate-180 w-3.5 h-3.5 ms-2"
+          aria-hidden="true"
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 14 10"
+        >
+          <path
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M1 5h12m0 0L9 1m4 4L9 9"
+          />
         </svg>
       </a>
     </div>
-    )
+  );
-}
+};
 
 export const CardWithOnlyImage = () => {
-    return(
+  return (
-        <div class="w-full max-w-sm bg-white rounded-lg shadow-xl dark:bg-gray-800 dark:border-gray-700">
+    <div className="w-full max-w-sm bg-white rounded-lg shadow-xl dark:bg-gray-800 dark:border-gray-700">
-            <a href="https://theprint.in/economy/telangana-is-the-success-story-of-indian-agritech-ai-tools-soil-testing-e-commerce-more/1630359/" target="_blank">
+      <a
-                <img class=" rounded-lg" src="https://i.pinimg.com/736x/2b/2a/0f/2b2a0f7003bd3e4201573c1189d600de.jpg" alt="product image" />
+        href="https://theprint.in/economy/telangana-is-the-success-story-of-indian-agritech-ai-tools-soil-testing-e-commerce-more/1630359/"
+        target="_blank"
+      >
+        <img
+          className=" rounded-lg"
+          src="https://i.pinimg.com/736x/2b/2a/0f/2b2a0f7003bd3e4201573c1189d600de.jpg"
+          alt="product image"
+        />
       </a>
     </div>
-    )
+  );
-}
+};
 
-const cards = [HeroSecn, CardWithImage, CardOnlyText, CardWithButton, CardWithImage];
+const cards = [
+  HeroSecn,
+  CardWithImage,
+  CardOnlyText,
+  CardWithButton,
+  CardWithImage,
+];
 
 export default cards;
 
-
 export const CardLayout = () => {
-    return(
+  return (
     <div>
       <HeroSecn />
       <div className=" flex justify-center">
@@ -108,5 +185,5 @@ export const CardLayout = () => {
         </div>
       </div>
     </div>
-    )
+  );
-}
+};