Added add poll form

frontend/src/App.jsx

@@ -8,6 +8,7 @@ import Register from "./pages/Register";
 import Dashboard from "./pages/Dashboard";
 import Bookmark from "./pages/Bookmark";
 import VotingPage from "./pages/VotingPage";
+import CreatePollForm from "./pages/CreatePollForm";
 
 function App() {
   return (
@@ -20,6 +21,7 @@ function App() {
         <Route path="dashboard" element={<Dashboard/>} />
         <Route path="bookmark" element={<Bookmark/>} />
         <Route path="/voting/:pollId" element={<VotingPage />} />
+        <Route path="/create" element={<CreatePollForm />} />
       </Routes>
     </BrowserRouter>
   );

frontend/src/components/PollTableRow/PollTableRow.jsx

@@ -35,7 +35,7 @@ function PollTableRow({ poll, index }) {
           )}
         </td>
         <td>
-          <div className="flex gap-2">
+          <div className="flex md:flex-row flex-col gap-2 flex-nowrap">
             <button onClick={() => setShowEditForm(true)} className="btn btn-sm btn-info flex items-center">
               <FaUserEdit className="mr-1" /> Edit
             </button>

frontend/src/pages/CreatePollForm.jsx

@@ -0,0 +1,67 @@
+// CreatePollForm.js
+import React, { useState } from "react";
+import { FaPlus, FaTrashAlt } from "react-icons/fa";
+
+function CreatePollForm() {
+  const [options, setOptions] = useState(["Option 1", "Option 2"]);
+
+  return (
+    <div className="min-h-screen bg-base-200 flex items-center justify-center p-4">
+      <div className="w-full max-w-lg bg-base-100 p-6 rounded-lg shadow-md text-white">
+        <h1 className="text-2xl font-bold mb-6 text-center">Create New Poll</h1>
+
+        {/* Poll Title */}
+        <div className="mb-4">
+          <label className="block text-lg font-medium mb-2">Poll Title</label>
+          <input
+            type="text"
+            placeholder="Enter poll title"
+            className="input input-bordered w-full"
+          />
+        </div>
+
+        {/* Poll Description */}
+        <div className="mb-4">
+          <label className="block text-lg font-medium mb-2">Description</label>
+          <textarea
+            placeholder="Describe the purpose of the poll"
+            className="textarea textarea-bordered w-full"
+            rows="3"
+          ></textarea>
+        </div>
+
+        {/* Poll Options */}
+        <div className="mb-4">
+          <label className="block text-lg font-medium mb-2">Options</label>
+          {options.map((option, index) => (
+            <div key={index} className="flex items-center mb-2">
+              <input
+                type="text"
+                value={option}
+                placeholder={`Option ${index + 1}`}
+                className="input input-bordered w-full"
+                readOnly
+              />
+              {options.length > 2 && (
+                <button
+                  className="btn btn-error btn-circle btn-xs ml-2"
+                  title="Remove option"
+                >
+                  <FaTrashAlt />
+                </button>
+              )}
+            </div>
+          ))}
+          <button className="btn btn-primary w-full mt-2" title="Add another option">
+            <FaPlus className="mr-2" /> Add Option
+          </button>
+        </div>
+
+        {/* Submit Button */}
+        <button className="btn btn-success w-full mt-4">Create Poll</button>
+      </div>
+    </div>
+  );
+}
+
+export default CreatePollForm;

frontend/src/pages/Dashboard.jsx

@@ -21,7 +21,7 @@ function Dashboard() {
       )}
 
       {/* User Profile Sidebar */}
-      <aside className="w-full lg:w-1/4 bg-slate-800 rounded-md m-4 bg-opacity-50 shadow-lg p-4 flex flex-col items-center">
+      <aside className="w-min lg:w-1/4 bg-slate-800 rounded-md m-4 bg-opacity-50 shadow-lg p-4 flex flex-col items-center">
         <img
           src="https://via.placeholder.com/150" // Replace with actual path
           alt="User Profile"
@@ -37,8 +37,8 @@ function Dashboard() {
       <main className="w-full lg:w-3/4 p-6">
         {/* Dashboard Header */}
         <div className="mb-6">
-          <h1 className="text-4xl font-bold text-white">Poll Dashboard</h1>
+          <h1 className="text-2xl md:text-4xl font-bold text-white">Poll Dashboard</h1>
-          <p className="text-lg text-gray-300">Manage your polls, view results, and edit as needed.</p>
+          <p className="md:text-lg text-gray-300">Manage your polls, view results, and edit as needed.</p>
         </div>
 
         {/* Add New Poll Button */}

frontend/src/pages/Home.jsx

@@ -3,7 +3,7 @@ import React from 'react'
 function Home() {
   return (
     <div className="flex bg-base-200 min-h-screen flex-col items-center text-white p-8">
-      <h1 className="text-4xl md:text-5xl font-bold mb-6">Welcome to <span className='bg-slate-800 px-4 rounded-md relative'>LivePoll</span></h1>
+      <h1 className="text-4xl mt-2 md:text-5xl font-bold mb-6 text-center flex flex-col gap-2 md:block">Welcome to <span className='bg-slate-800 px-4 rounded-md relative'>LivePoll</span></h1>
       <p className="text-lg text-center max-w-2xl mb-8">
         LivePoll is your platform for real-time, interactive polling. Create polls, participate in
         active discussions, and get instant feedback with live updates and visualizations. Discover