hovering effect added on recepies (#343)

* hovering effect added on recepies

* hovering effect added

* Update server.js

backend/server.js

@@ -21,6 +21,25 @@ const allowedOrigins = [
   /https:\/\/deploy-preview-\d+--delightful-daifuku-a9f6ea\.netlify\.app/,
 ];
 
+
+app.use(
+    cors({
+        origin: function (origin, callback) {
+            // Allow requests with no `origin` (like from Postman or server-side scripts)
+            if (!origin || allowedOrigins.some((o) =>
+                typeof o === "string" ? o === origin : o.test(origin)
+            )) {
+                callback(null, true);
+            } else {
+                // Provide a more informative error message if necessary
+                callback(new Error("CORS policy: This origin is not allowed."));
+            }
+        },
+    })
+);
+
+// app.use(cors({origin:"http://localhost:5173"})) // for local use
+
 app.use(
   cors({
     origin: function (origin, callback) {
@@ -42,6 +61,7 @@ app.use(
 
 // app.use(cors({ origin: "http://localhost:5173" })) // for local use
 
+
 const collectDefaultMetrics = client.collectDefaultMetrics;
 
 collectDefaultMetrics({ register: client.register });

frontend/src/Components/Cards.jsx

@@ -130,8 +130,9 @@ const Cards = ({ dish, setRecipes, recipes, index }) => {
   };
 
   return (
-    <div className="p-4">
-      <div className="border-2 border-gray-200 border-opacity-60 rounded-lg overflow-hidden">
+
+    <div className="p-4 cursor-pointer" onClick={handleClick}>
+      <div className="border-2 border-gray-200 border-opacity-60 rounded-lg overflow-hidden transform transition-transform duration-300 ease-in-out hover:scale-105 hover:shadow-lg">
         <img
           className="lg:h-48 md:h-36 w-full object-cover object-center cursor-pointer"
           src={dish.image}
@@ -185,7 +186,7 @@ const Cards = ({ dish, setRecipes, recipes, index }) => {
 };
 
 Cards.propTypes = {
-  dish: PropTypes.object.isRequired,
+  dish: PropTypes.object.isRequired
 };
 
-export default Cards;
+export default Cards;

frontend/src/Pages/OneRecipe.jsx

@@ -3,6 +3,7 @@ import { useEffect } from "react";
 import React, { useState } from "react";
 import { useLocation, useNavigate, useParams } from "react-router-dom";
 import axios from "axios";
+
 import { MdDelete } from "react-icons/md";
 
 
@@ -119,10 +120,10 @@ const OneRecipe = () => {
     )
   }
   return (
-    <div className="w-[80vw] m-auto  my-12">
+    <div className="w-[80vw] m-auto  my-12 ">
       <h1 className="text-3xl font-extrabold text-red-700 my-8 text-center">{recipe.name}</h1>
       <form>
-        <div className="md:grid md:grid-cols-[50%_50%] space-x-4">
+        <div className="md:grid md:grid-cols-[50%_50%] space-x-4 image">
           <input
             type="image"
             src={recipe.image}