Addeed voting and home page ✔

frontend/src/pages/Home.jsx

@@ -2,8 +2,42 @@ import React from 'react'
 
 function Home() {
   return (
-    <div>
-      Home
+    <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>
+      <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
+        what people think on topics that matter to you and have your voice heard!
+      </p>
+      <div className="flex flex-col lg:flex-row gap-6 mb-8">
+        <div className="bg-base-300 p-6 rounded-lg shadow-md w-full lg:w-96 text-center">
+          <h2 className="text-3xl font-semibold mb-4">Create Polls</h2>
+          <p className="text-gray-400">
+            Create custom polls on any topic and share them with others. Add options, set
+            permissions, and see the responses roll in real-time.
+          </p>
+        </div>
+        <div className="bg-base-300 p-6 rounded-lg shadow-md w-full lg:w-96 text-center">
+          <h2 className="text-3xl font-semibold mb-4">Vote & Participate</h2>
+          <p className="text-gray-400">
+            Browse a variety of public polls or join private ones shared with you. Cast your vote
+            and see the real-time results as others participate.
+          </p>
+        </div>
+        <div className="bg-base-300 p-6 rounded-lg shadow-md w-full lg:w-96 text-center">
+          <h2 className="text-3xl font-semibold mb-4">Bookmark & Track</h2>
+          <p className="text-gray-400">
+            Bookmark polls to save them for later, view your past participation, and stay updated
+            on topics you care about.
+          </p>
+        </div>
+      </div>
+      <button
+        className="btn btn-primary px-6 py-3 font-semibold text-lg"
+        onClick={() => navigate("/login")}
+      >
+        Get Started
+      </button>
     </div>
   )
 }

frontend/src/pages/LoginPage.jsx

@@ -1,5 +1,6 @@
 // LoginPage.js
 import React from 'react';
+import { Link } from 'react-router-dom';
 
 const LoginPage = () => {
   return (
@@ -56,7 +57,7 @@ const LoginPage = () => {
         {/* Sign Up Link */}
         <p className="text-center text-gray-300">
           Don’t have an account?{' '}
-          <a href="#" className="text-primary hover:underline">Sign up</a>
+          <Link to="/register" href="#" className="text-primary hover:underline">Sign up</Link>
         </p>
       </div>
     </div>

frontend/src/pages/Register.jsx

@@ -1,4 +1,5 @@
 import React from "react";
+import { Link } from "react-router-dom";
 
 function Register() {
   return (
@@ -63,9 +64,9 @@ function Register() {
         {/* Login Link */}
         <p className="text-center text-gray-300">
           Already have an account?{" "}
-          <a href="#" className="text-primary hover:underline">
+          <Link to="/login" className="text-primary hover:underline">
             Login
-          </a>
+          </Link>
         </p>
       </div>
     </div>

frontend/src/pages/VotingPage.jsx

@@ -0,0 +1,72 @@
+// VotingPage.js
+import React from "react";
+import { Bar } from "react-chartjs-2";
+import { Chart as ChartJS, BarElement, CategoryScale, LinearScale } from "chart.js";
+
+ChartJS.register(BarElement, CategoryScale, LinearScale);
+
+function VotingPage() {
+  // Dummy poll data
+  const pollData = {
+    title: "What's your favorite programming language?",
+    options: [
+      { id: 1, label: "JavaScript", votes: 20 },
+      { id: 2, label: "Python", votes: 35 },
+      { id: 3, label: "Java", votes: 25 },
+      { id: 4, label: "C++", votes: 15 },
+    ],
+    creator: {
+      name: "John Doe",
+      image: "https://via.placeholder.com/100",
+    },
+  };
+
+  // Dummy chart data for visualization
+  const chartData = {
+    labels: pollData.options.map(option => option.label),
+    datasets: [
+      {
+        label: "Votes",
+        data: pollData.options.map(option => option.votes),
+        backgroundColor: ["#3B82F6", "#EF4444", "#10B981", "#F59E0B"],
+        borderWidth: 1,
+      },
+    ],
+  };
+
+  return (
+    <div className="bg-base-200 min-h-screen p-6 text-white flex flex-col items-center">
+      {/* Poll Creator Info */}
+      <div className="flex items-center justify-center gap-4 mb-6">
+        <img
+          src={pollData.creator.image}
+          alt={pollData.creator.name}
+          className="rounded-full h-7 md:h-10 w-7 md:w-10"
+        />
+        <h2 className="text-lg md:text-xl font-semibold">{pollData.creator.name}</h2>
+      </div>
+
+      {/* Poll Title */}
+      <h1 className="text-xl md:text-3xl font-bold mb-4 text-center">{pollData.title}</h1>
+
+      {/* Voting Options */}
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4 w-full max-w-lg mb-6">
+        {pollData.options.map(option => (
+          <div
+            key={option.id}
+            className="md:p-4 p-2 bg-base-100 rounded-lg shadow-md flex items-center justify-center cursor-pointer hover:bg-base-300 transition"
+          >
+            <span className="text-lg">{option.label}</span>
+          </div>
+        ))}
+      </div>
+
+      {/* Chart Visualization */}
+      <div className="w-full max-w-lg">
+        <Bar data={chartData} options={{ responsive: true, maintainAspectRatio: false }} />
+      </div>
+    </div>
+  );
+}
+
+export default VotingPage;