add cover card for each event

package.json

@@ -20,6 +20,7 @@
     "@testing-library/jest-dom": "^6.4.5",
     "@testing-library/react": "^15.0.7",
     "@testing-library/user-event": "^14.5.2",
+    "axios": "^1.6.8",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-icons": "^5.2.1",

src/App.js

@@ -6,7 +6,7 @@ import Navbar from "./Components/Navbar.js";
 function App() {
   return (
     <>
-     <div className="App ">
+     <div className="App flex flex-col">
       <Navbar/>
       <div className="px-16 py-6">
       <Outlet />

src/Components/EventPlannerAi.js

@@ -1,101 +1,74 @@
 import React, { useState } from "react";
+import { useParams } from "react-router-dom";
 
-const EventPlannerAi = () => {
+const EventPlannerAi = ({ props }) => {
   const [budget, setBudget] = useState("");
   const [timeToStay, setTimeToStay] = useState("");
-
   const [generatedAnswer, setGeneratedAnswer] = useState("");
+  const { eventId } = useParams();
+  console.log(eventId);
 
-  const handleSubmit = (e) => {
+  const handleSubmit = async (e) => {
     e.preventDefault();
-    // Here you can perform any actions you want with the inputs
-    console.log("Budget:", budget);
-    console.log("Time to Stay:", timeToStay);
-    // Here you can generate the AI answer based on the inputs
-    const aiAnswer = generateAIAnswer(budget, timeToStay);
-    setGeneratedAnswer(aiAnswer);
-  };
+    setLoading(true);
+    setError("");
+    setGeneratedAnswer("");
 
-  // Function to generate AI answer
-  const generateAIAnswer = (budget, timeToStay) => {
-    // You can implement your AI logic here
-    // For now, let's just return a dummy answer
-    return `AI Generated Answer: You have a budget of ${budget} and plan to stay for ${timeToStay}`;
+    useEffect(() => {
+      const fetchData = async () => {
+        try {
+          const response = await axios.post("http://localhost:8000/predict", {
+            budget,
+            timeToStay,
+          });
+          setGeneratedAnswer(response.data.prediction);
+        } catch (error) {
+          setError("Something went wrong. Please try again later.");
+        } finally {
+          setLoading(false);
+        }
+      };
+      fetchData();
+    }, [budget, timeToStay]);
   };
 
   return (
-    <div className="min-h-screen flex items-center justify-center bg-gray-200 py-12 px-4 sm:px-6 lg:px-8 border rounded-xl">
-      <div className="max-w-md w-full space-y-8">
-        <div>
-          <h2 className="mt-6 text-center text-3xl font-extrabold text-gray-900">
-            Event Planner AI
-          </h2>
-        </div>
-        <form className="mt-8 space-y-6" onSubmit={handleSubmit}>
-          <div className="rounded-md shadow-sm -space-y-px">
-            <div>
-              <label htmlFor="budget" className="sr-only">
-                Your Budget:
-              </label>
-              <input
-                id="budget"
-                name="budget"
-                type="text"
-                required
-                className="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-t-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm"
-                placeholder="Your Budget"
-                value={budget}
-                onChange={(e) => setBudget(e.target.value)}
-              />
-            </div>
-            <div>
-              <label htmlFor="timeToStay" className="sr-only">
-                Time to Stay:
-              </label>
-              <input
-                id="timeToStay"
-                name="timeToStay"
-                type="text"
-                required
-                className="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm"
-                placeholder="Time to Stay"
-                value={timeToStay}
-                onChange={(e) => setTimeToStay(e.target.value)}
-              />
-            </div>
+    <>
+      <div className="relative mx-auto my-[-1.5rem] border border-black max-w-4xl ">
+        <div
+          className="absolute inset-0 bg-cover bg-center filter blur-sm"
+          style={{
+            backgroundImage: `url(${require(`../data${
+              props[eventId - 1].image
+            }`)})`,
+          }}
+        ></div>
+        <div className="flex justify-center relative z-10 bg-white mx-16 mt-3 mb-6 rounded-xl">
+          <div className="w-1/2 bg-white my-4 ml-4 rounded-l-xl">
+            <div className=""></div>
+            {/* Your content here */}
           </div>
-          <div>
-            <button
-              type="submit"
-              className="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
-            >
-              <span className="absolute left-0 inset-y-0 flex items-center pl-3">
-                {/* Heroicon name: solid/check */}
-                <svg
-                  className="h-5 w-5 text-indigo-500 group-hover:text-indigo-400"
-                  xmlns="http://www.w3.org/2000/svg"
-                  viewBox="0 0 20 20"
-                  fill="currentColor"
-                  aria-hidden="true"
-                >
-                  <path
-                    fillRule="evenodd"
-                    d="M9.293 13.293a1 1 0 0 1-1.414 0l-4-4a1 1 0 0 1 1.414-1.414L9 10.586l6.293-6.293a1 1 0 0 1 1.414 1.414l-7 7a1 1 0 0 1-1.414 0z"
-                    clipRule="evenodd"
-                  />
-                </svg>
-              </span>
-              Submit
-            </button>
+          <div className="w-1/2 h-16 sm:h-56 md:h-64 flex justify-center relative m-1">
+            <img
+              src={require(`../data${props[eventId - 1].image}`)}
+              alt="Event Image"
+              className="object-contain max-w-full max-h-full rounded-xl"
+            />
           </div>
-        </form>
+        </div>
+      </div>
+      <div>
+        <div className="w-full h-96">
+          <div className="w-full h-5"></div>
+          <h1>how are you all</h1>
+        </div>
         {generatedAnswer && (
           <div className="bg-white rounded-md p-4 shadow-md">
             <p className="text-gray-800">{generatedAnswer}</p>
           </div>
         )}
       </div>
-    </div>
+    </>
   );
 };
 

src/Components/Footer.js

@@ -7,8 +7,8 @@ import { FaFacebookF } from "react-icons/fa";
 
 const Footer = () => {
   return (
-    <div className="">
-      <footer className=" w-full  mt-4 border border-gray-200  bg-[#F6E2C0]  z-50 flex justify-between items-center px-10 py-2 ">
+    <>
+      <footer className=" mt-auto w-full border border-gray-200  bg-[#F6E2C0]  z-50 flex justify-between items-center px-10 py-2 ">
         <div className="container m-3 mx-auto py-4 px-6 flex justify-between items-center">
           <div>
             <p className="text-sm">
@@ -21,7 +21,7 @@ const Footer = () => {
           </div>
         </div>
       </footer>
-    </div>
+    </>
   );
 };
 

src/index.js

@@ -24,7 +24,7 @@ const appRouter = createBrowserRouter([
 
       {
         path: "events/:eventId",
-        element: <EventPlannerAi/>,
+        element: <EventPlannerAi props={eventData}/>,
       },
 
     ],