style: bg change and bug fix

src/App.css

@@ -20,7 +20,7 @@ body {
 }
 
 body {
-  background-color: #F6E2C0;
+  background-color: #FFFFFF;
 }
 
 nav {

src/App.js

@@ -7,7 +7,7 @@ function App() {
   return (
     <>
      <div className="App ">
-      <Navbar />
+      <Navbar/>
       <Outlet />
       <Footer />
     </div>

src/Components/Event.js

@@ -1,4 +1,5 @@
 import React, { useState } from "react";
+import { Link } from "react-router-dom";
 
 const Event = ({ props }) => {
   const [expandedMap, setExpandedMap] = useState({});
@@ -21,85 +22,86 @@ const Event = ({ props }) => {
       {props.map((event) => (
         <div
           key={event.id}
-          className="max-w-sm border border-gray-200 rounded-lg shadow relative transition duration-300 ease-in-out transform hover:scale-105 hover:bg-gray-200 hover:cursor-pointer"
+          className="max-w-sm border border-gray-200 rounded-lg shadow relative transition duration-300 ease-in-out transform hover:scale-105 hover:bg-[#F6E2C0] hover:cursor-pointer"
         >
-          <div>
-            <img
-              className="rounded-t-lg"
-              src={require(`../data${event.image}`)}
-              alt=""
-            />
-          </div>
-          <div className="p-5">
-            <a href="#">
-              <h5 className="mb-2 text-2xl font-bold tracking-tight text-gray-900">
-                {event.name}
-              </h5>
-            </a>
-            <p className="mb-6 font-normal text-gray-700">
-              {expandedMap[event.id]
-                ? event.description
-                : event.description.length > 100
-                ? event.description.substring(0, 100) + "..."
-                : event.description}
-
-              <div className="flex flex-wrap justify-between items-center">
-                <span className="text-gray-800 font-bold">
-                  Start Date: {event.timeline.start}
-                </span>
-                <span className="text-gray-800 font ">
-                  End Date: {event.timeline.end}
-                </span>
-              </div>
-            </p>
+          <Link to={"/events/" + event.id}>
+            <div>
+              <img
+                className="rounded-t-lg"
+                src={require(`../data${event.image}`)}
+                alt=""
+              />
+            </div>
+            <div className="p-5">
+              <a href="#">
+                <h5 className="mb-2 text-2xl font-bold tracking-tight text-gray-900">
+                  {event.name}
+                </h5>
+              </a>
+              <p className="mb-6 font-normal text-gray-700">
+                {expandedMap[event.id]
+                  ? event.description
+                  : event.description.length > 100
+                  ? event.description.substring(0, 100) + "..."
+                  : event.description}
 
-            <div className="absolute bottom-1">
-              {!expandedMap[event.id] ? (
-                <button
-                  onClick={() => toggleExpanded(event.id)}
-                  className="inline-flex items-center px-3 py-2 text-sm font-medium text-center text-white bg-blue-400 rounded-lg hover:bg-blue-300 focus:ring-4 focus:outline-none focus:ring-blue-300"
+                <div className="flex flex-wrap justify-between items-center">
+                  <span className="text-gray-800 font-bold">
+                    Start Date: {event.timeline.start}
+                  </span>
+                  <span className="text-gray-800 font-bold ">
+                    End Date: {event.timeline.end}
+                  </span>
+                </div>
+              </p>
+            </div>
+          </Link>
+          <div className="absolute bottom-1">
+            {!expandedMap[event.id] ? (
+              <button
+                onClick={() => toggleExpanded(event.id)}
+                className="inline-flex items-center px-3 py-2 ml-3 text-sm font-medium text-center text-white bg-blue-400 rounded-lg hover:bg-blue-300 focus:ring-4 focus:outline-none focus:ring-blue-300"
+              >
+                Read more
+                <svg
+                  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"
                 >
-                  Read more
-                  <svg
-                    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"
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                      strokeWidth="2"
-                      d="M1 5h12m0 0L9 1m4 4L9 9"
-                    />
-                  </svg>
-                </button>
-              ) : (
-                <button
-                  onClick={() => toggleExpanded(event.id)}
-                  className="inline-flex items-center px-3 py-2 text-sm font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300"
+                  <path
+                    stroke="currentColor"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="2"
+                    d="M1 5h12m0 0L9 1m4 4L9 9"
+                  />
+                </svg>
+              </button>
+            ) : (
+              <button
+                onClick={() => toggleExpanded(event.id)}
+                className="inline-flex items-center px-3 py-2 text-sm font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300"
+              >
+                Read less
+                <svg
+                  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"
                 >
-                  Read less
-                  <svg
-                    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"
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                      strokeWidth="2"
-                      d="M1 5h12m0 0L9 1m4 4L9 9"
-                    />
-                  </svg>
-                </button>
-              )}
-            </div>
+                  <path
+                    stroke="currentColor"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="2"
+                    d="M1 5h12m0 0L9 1m4 4L9 9"
+                  />
+                </svg>
+              </button>
+            )}
           </div>
         </div>
       ))}

src/Components/EventPlannerAi.js

@@ -0,0 +1,102 @@
+import React, { useState } from "react";
+
+const EventPlannerAi = () => {
+  const [budget, setBudget] = useState("");
+  const [timeToStay, setTimeToStay] = useState("");
+
+  const [generatedAnswer, setGeneratedAnswer] = useState("");
+
+  const handleSubmit = (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);
+  };
+
+  // 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}`;
+  };
+
+  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>
+          <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>
+        </form>
+        {generatedAnswer && (
+          <div className="bg-white rounded-md p-4 shadow-md">
+            <p className="text-gray-800">{generatedAnswer}</p>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default EventPlannerAi;

src/Components/Footer.js

@@ -7,7 +7,7 @@ import { FaFacebookF } from "react-icons/fa";
 
 const Footer = () => {
   return (
-    <div className="footer-wrapper">
+    <div className="footer-wrapper bg-[#F6E2C0]">
       <div className="footer-section-one">
         <div className="footer-logo-container">
           <img src=" "alt="" />

src/Components/Navbar.js

@@ -52,7 +52,7 @@ const Navbar = () => {
     },
   ];
   return (
-    <nav>
+    <nav className="bg-[#F6E2C0]">
       <div className="nav-logo-container">
         <img src=" " alt="" />
       </div>

src/index.js

@@ -7,6 +7,7 @@ import PlanYourTrip from "./Components/PlanYourTrip.js";
 import Home from "./Components/Home.js";
 import Event from "./Components/Event.js";
 import eventData from "./data/events.json";
+import EventPlannerAi from "./Components/EventPlannerAi.js";
 
 const appRouter = createBrowserRouter([
   {
@@ -23,9 +24,13 @@ const appRouter = createBrowserRouter([
       },
       {
         path:"/plan-your-trip",
-        element:<PlanYourTrip/>
-      }
-
+        element:<EventPlannerAi/>
+      },
+      {
+        path: "events/:eventId",
+        element: <EventPlannerAi/>,
+      },
+
     ],
   },
 ]);