Merge pull request #10 from Arnab7456/main

quiz page minimum demo
CODECHAMPS7 · Sep 18, 2024 · 39c54e4 · 39c54e4
2 parents 2a1bd88 + 3082616
commit 39c54e4
Show file tree

Hide file tree

Showing 5 changed files with 241 additions and 50 deletions.
diff --git a/src/App.jsx b/src/App.jsx
@@ -7,6 +7,7 @@ import Signup from './Pages/SIgnup';  // Fix casing for Signup
 import Dashboard from './Pages/Dashboard';
 import Profile from './Pages/profile';
 import Footer from './components/Footer';
+import Quiz from './Pages/Quiz';
 
 const Layout = () => {
   return (
@@ -32,6 +33,7 @@ function App() {
           <Route path="signup" element={<Signup />} /> 
           <Route path="dashboard" element={<Dashboard />} />
           <Route path="profile" element={<Profile />} />
+          <Route path='Quiz' element ={<Quiz />}></Route>
         </Route>
       </Routes>
     </Router>

diff --git a/src/Pages/Announcment.jsx b/src/Pages/Announcment.jsx
@@ -0,0 +1,15 @@
+const Announcment = () => {
+  return (
+
+       <div className="p-10">
+        <h2 className="text-3xl font-semibold mb-5">Latest Announcements</h2>
+        <ul className="list-disc ml-5 space-y-2">
+          <li>Government introduces new tax reform policies.</li>
+          <li>COVID-19 vaccination drive for all citizens.</li>
+          <li>Upcoming elections scheduled for next month.</li>
+        </ul>
+      </div>
+  )
+}
+
+export default Announcment
diff --git a/src/Pages/Banner.jsx b/src/Pages/Banner.jsx
@@ -0,0 +1,10 @@
+const Banner = () => {
+    return (
+      <div className="bg-blue-600 text-white p-10 text-center">
+        <h1 className="text-4xl font-bold">Welcome to the Central Government Portal</h1>
+        <p className="mt-4 text-lg">Providing services and information to all citizens.</p>
+      </div>
+    );
+  };
+
+  export default Banner;
diff --git a/src/Pages/Dashboard.jsx b/src/Pages/Dashboard.jsx
@@ -1,20 +1,21 @@
-import image1 from '../Assets/nda.jpeg'
-import image2 from '../Assets/ssc.jpg'
-import image3 from '../Assets/sbi.jpg'
-import image4 from '../Assets/cds.jpg'
+import image1 from "../Assets/nda.jpeg";
+import image2 from "../Assets/ssc.jpg";
+import image3 from "../Assets/sbi.jpg";
+import image4 from "../Assets/cds.jpg";
+import { Link } from "react-router-dom";
 // import Govlogo from '../Assets/govlogo.jpg'
 
 const Dashboard = () => {
-
   return (
     <div>
-
       {/* Hero Section of exam dashboard */}
 
       <section className="bg-slate-300 py-10">
         <div className="container mx-auto text-center px-4">
           <h1 className="text-3xl font-bold mb-4">Exam Dashboard</h1>
-          <p className="text-lg text-gray-700">Track your progress and manage your upcoming exams</p>
+          <p className="text-lg text-gray-700">
+            Track your progress and manage your upcoming exams
+          </p>
           <div className="flex justify-center gap-8 mt-8">
             <div className="bg-slate-200 p-6 rounded-lg shadow-md">
               <h2 className="text-3xl font-bold">4</h2>
@@ -24,22 +25,35 @@ const Dashboard = () => {
               <h2 className="text-3xl font-bold">2</h2>
               <p className="text-gray-600">Exams Completed</p>
             </div>
+
+            <Link
+              to="/Quiz"
+              className="bg-slate-200 p-6 rounded-lg shadow-md text-lg font-semibold block text-center"
+            >
+               <h2 className="text-3xl font-bold">0</h2>
+               <p className="text-gray-600"> Technical Quiz</p>
+            </Link>
           </div>
         </div>
       </section>
 
       {/* Upcoming Exams Section */}
-      
+
       <section className="">
         <div className="container mx-auto ">
-          <h2 className="text-2xl font-bold text-center p-6  bg-[#5a87a6] text-white w-full">Upcoming Exams</h2>
-
-          <div className="flex flex-wrap justify-center py-8 gap-10 bg-slate-300">
+          <h2 className="text-2xl font-bold text-center p-6  bg-[#5a87a6] text-white w-full">
+            Upcoming Exams
+          </h2>
 
+          <div className="flex flex-wrap justify-center py-8 gap-10 bg-slate-300">
             {/* Card 1 */}
 
             <div className="bg-slate-100 p-6  w-[300px] rounded-lg shadow-lg">
-              <img src={image1} alt="Exam" className="w-full h-48 object-cover rounded-t-lg mb-4" />
+              <img
+                src={image1}
+                alt="Exam"
+                className="w-full h-48 object-cover rounded-t-lg mb-4"
+              />
               <h3 className="text-lg font-semibold mb-2">NDA Exam</h3>
               <p className="text-gray-700 font-semibold">Date: 17 Sep 2025</p>
               <p className="text-gray-700 font-semibold">Time: 10:00 AM</p>
@@ -49,10 +63,14 @@ const Dashboard = () => {
               </button>
             </div>
 
-             {/* Card 2 */}
+            {/* Card 2 */}
 
             <div className="bg-slate-100 p-6 w-full sm:w-[300px] rounded-lg shadow-lg">
-              <img src={image2} alt="Exam" className="w-[280px] h-48 object-cover rounded-t-lg mb-4" />
+              <img
+                src={image2}
+                alt="Exam"
+                className="w-[280px] h-48 object-cover rounded-t-lg mb-4"
+              />
               <h3 className="text-lg font-semibold mb-2">SSC Exam</h3>
               <p className="text-gray-700 font-semibold">Date: 17 Sep 2025</p>
               <p className="text-gray-700 font-semibold">Time: 10:00 AM</p>
@@ -61,11 +79,15 @@ const Dashboard = () => {
                 View Details
               </button>
             </div>
-
-             {/* Card 3 */}
 
-             <div className="bg-slate-100 p-6 w-full sm:w-[300px] rounded-lg shadow-lg">
-              <img src={image3} alt="Exam" className="w-full h-48 object-cover rounded-t-lg mb-4" />
+            {/* Card 3 */}
+
+            <div className="bg-slate-100 p-6 w-full sm:w-[300px] rounded-lg shadow-lg">
+              <img
+                src={image3}
+                alt="Exam"
+                className="w-full h-48 object-cover rounded-t-lg mb-4"
+              />
               <h3 className="text-lg font-semibold mb-2">SBI Exam</h3>
               <p className="text-gray-700 font-semibold">Date: 17 Sep 2025</p>
               <p className="text-gray-700 font-semibold">Time: 10:00 AM</p>
@@ -78,7 +100,11 @@ const Dashboard = () => {
             {/* Card 4 */}
 
             <div className="bg-slate-100 p-6 w-full sm:w-[300px] rounded-lg shadow-lg">
-              <img src={image4} alt="Exam" className="w-full h-48 object-cover rounded-t-lg mb-4" />
+              <img
+                src={image4}
+                alt="Exam"
+                className="w-full h-48 object-cover rounded-t-lg mb-4"
+              />
               <h3 className="text-lg font-semibold mb-2">CDS Exam</h3>
               <p className="text-gray-700 font-semibold">Date: 17 Sep 2025</p>
               <p className="text-gray-700 font-semibold">Time: 10:00 AM</p>
@@ -87,66 +113,69 @@ const Dashboard = () => {
                 View Details
               </button>
             </div>
-
           </div>
         </div>
       </section>
 
+      {/* Appeared Exams Section */}
 
-       {/* Appeared Exams Section */}
-
-       <section className="">
+      <section className="">
         <div className="container mx-auto ">
-          <h2 className="text-2xl font-bold text-center p-6  bg-[#5a87a6] text-white w-full">Appeared Exams</h2>
-
-          <div className="flex flex-wrap justify-center py-8 gap-10 bg-slate-300">
+          <h2 className="text-2xl font-bold text-center p-6  bg-[#5a87a6] text-white w-full">
+            Appeared Exams
+          </h2>
 
+          <div className="flex flex-wrap justify-center py-8 gap-10 bg-slate-300">
             {/* Card 1 */}
 
             <div className="bg-slate-100 p-6  w-[300px] rounded-lg shadow-lg">
-              <img src={image1} alt="Exam" className="w-full h-48 object-cover rounded-t-lg mb-4" />
+              <img
+                src={image1}
+                alt="Exam"
+                className="w-full h-48 object-cover rounded-t-lg mb-4"
+              />
               <h3 className="text-lg font-semibold mb-2">NDA Exam</h3>
               <p className="text-gray-700 font-semibold">Date: 17 Sep 2025</p>
               <p className="text-gray-700 font-semibold">Time: 10:00 AM</p>
               <p className="text-gray-700 font-semibold">Questions: 50</p>
-              <div className='flex gap-4'>
-              <button className="bg-blue-500 text-white px-4 py-2 mt-3 rounded-lg hover:bg-blue-700 transition w-full">
-                View Details
-              </button>
-              <button className="bg-blue-500 text-white px-4 py-2 mt-3 rounded-lg hover:bg-blue-700 transition w-full">
-                View Result
-              </button>
+              <div className="flex gap-4">
+                <button className="bg-blue-500 text-white px-4 py-2 mt-3 rounded-lg hover:bg-blue-700 transition w-full">
+                  View Details
+                </button>
+                <button className="bg-blue-500 text-white px-4 py-2 mt-3 rounded-lg hover:bg-blue-700 transition w-full">
+                  View Result
+                </button>
               </div>
             </div>
 
-             {/* Card 2 */}
+            {/* Card 2 */}
 
             <div className="bg-slate-100 p-6 w-full sm:w-[300px] rounded-lg shadow-lg">
-              <img src={image2} alt="Exam" className="w-[280px] h-48 object-cover rounded-t-lg mb-4" />
+              <img
+                src={image2}
+                alt="Exam"
+                className="w-[280px] h-48 object-cover rounded-t-lg mb-4"
+              />
               <h3 className="text-lg font-semibold mb-2">SSC Exam</h3>
               <p className="text-gray-700 font-semibold">Date: 17 Sep 2025</p>
               <p className="text-gray-700 font-semibold">Time: 10:00 AM</p>
               <p className="text-gray-700 font-semibold">Questions: 50</p>
-              <div className='flex gap-4'>
-              <button className="bg-blue-500 text-white px-4 py-2 mt-3 rounded-lg hover:bg-blue-700 transition w-full">
-                View Details
-              </button>
-              <button className="bg-blue-500 text-white px-4 py-2 mt-3 rounded-lg hover:bg-blue-700 transition w-full">
-                View Result
-              </button>
+              <div className="flex gap-4">
+                <button className="bg-blue-500 text-white px-4 py-2 mt-3 rounded-lg hover:bg-blue-700 transition w-full">
+                  View Details
+                </button>
+                <button className="bg-blue-500 text-white px-4 py-2 mt-3 rounded-lg hover:bg-blue-700 transition w-full">
+                  View Result
+                </button>
               </div>
             </div>
-
           </div>
         </div>
       </section>
 
-
-    {/* Footer section */}
-
-
+      {/* Footer section */}
     </div>
   );
-}
+};
 
-export default Dashboard;
+export default Dashboard;