updated committee

components/MainContent.jsx

@@ -6,7 +6,9 @@ const Main = () => {
         <div className="box">
             <h1>National Conference on Recent Trends in  Environment, Energy and Sustainability</h1>
             <h1 className='name'>Maharaja Surajmal Institute Of Technology.</h1>
-        </div>
+            <h1 style={{marginTop:'10px'}}>7-8 November 2024</h1>
+      </div>
+
     </div>
   )
 }

pages/Committee.jsx

@@ -1,15 +1,218 @@
-import React from 'react';
-import './Comingsoon.css';  // Import the CSS file
+import React, { useState, useEffect } from 'react';
+import './style.css';
 
 const Committee = () => {
+  const [activeCommittee, setActiveCommittee] = useState(null);
+
+  // Function to toggle the dropdown menu
+  const toggleDropdown = (id) => {
+    setActiveCommittee((prevActiveCommittee) => (prevActiveCommittee === id ? null : id));
+  };
+
+  useEffect(() => {
+    const updateActiveCommittee = () => {
+      if (window.innerWidth >= 768) {
+        setActiveCommittee('committee0');
+      } else {
+        setActiveCommittee(null);
+      }
+    };
+
+    updateActiveCommittee();
+    window.addEventListener('resize', updateActiveCommittee);
+    return () => {
+      window.removeEventListener('resize', updateActiveCommittee);
+    };
+  }, []);
+
+  const committees = [
+    {
+      id: 'committee0',
+      name: 'Patrons',
+      members: [
+        { name: 'Sh. Kaptan Singh', role: 'President, SMES, New Delhi' },
+        { name: 'Ms. Esha Jakhar', role: 'Vice - President, SMES, New Delhi' },
+        { name: 'Prof. Prem Vrat', role: 'Pro - Chancellor, North Cap University, Gurgaon' },
+        { name: 'Sh. Karnal Singh', role: 'IPS, Former Director - Enforcement Directorate' },
+        { name: 'Mr. Ajit Singh Chaudhary', role: 'Secretary, SMES, New Delhi' },
+        { name: 'Mr. Raj Pal Solanki', role: 'Treasurer, SMES, New Delhi' },
+        { name: 'Dr. Tejbir Singh Rana', role: 'Chairman, Academic Committee, SMES, New Delhi' },
+        { name: 'Sh. S.S. Solanki', role: 'Chairman Disciplinary(L), SMES, New Delhi' },
+      ],
+    },
+    {
+      id: 'committee1',
+      name: 'Organising Chair',
+      members: [
+        { name: 'Prof. Archana Balyan', role: 'Director, MSIT' },
+      ],
+    },
+    {
+      id: 'committee2',
+      name: 'Convener',
+      members: [
+        { name: 'Prof. Koyel Datta Gupta', role: '' },
+      ],
+    },
+    {
+      id: 'committee3',
+      name: 'Co-Conveners',
+      members: [
+        { name: 'Prof. Puneet Azad', role: '' },
+        { name: 'Dr. Deepshikha Yadav', role: '' },
+        { name: 'Dr. Anju Dhillon', role: '' },
+      ],
+    },
+    {
+      id: 'committee4',
+      name: 'Technical Review Committee',
+      members: [
+        { name: 'Dr. Ajay Gahlot', role: '' },
+        { name: 'Dr. Anupama Kaushik', role: '' },
+        { name: 'Dr. Deepti Deshwal', role: '' },
+        { name: 'Dr. Tripti Rathee', role: '' },
+      ],
+    },
+    {
+      id: 'committee5',
+      name: 'Program Committee',
+      members: [
+        { name: 'Prof. Puneet Azad', role: '' },
+        { name: 'Mr. Manoj Malik', role: '' },
+      ],
+    },
+    {
+      id: 'committee6',
+      name: 'Finance Committee',
+      members: [
+        { name: 'Mr. Raj Pal Solanki', role: 'Treasurer, SMES, New Delhi' },
+        { name: 'Prof. Puneet Azad', role: '' },
+      ],
+    },
+    {
+      id: 'committee7',
+      name: 'Hospitality & Transport Committee',
+      members: [
+        { name: 'Dr. Ashok Wahi', role: '' },
+        { name: 'Prof. Ruchi Arora', role: '' },
+        { name: 'Prof. Deepti Sehgal', role: '' },
+      ],
+    },
+    {
+      id: 'committee8',
+      name: 'Publicity Committee',
+      members: [
+        { name: 'Prof. Manika Verma', role: '' },
+        { name: 'Prof. Deepti Sehgal', role: '' },
+        { name: 'Dr. Pragati Rawat', role: '' },
+      ],
+    },
+    {
+      id: 'committee9',
+      name: 'Registration Committee',
+      members: [
+        { name: 'Prof. Manika Verma', role: '' },
+        { name: 'Prof. Himani Bansal', role: '' },
+        { name: 'Prof. Poonam Saini', role: '' },
+        { name: 'Prof. Savita Hooda', role: '' },
+      ],
+    },
+    {
+      id: 'committee10',
+      name: 'Web Committee',
+      members: [
+        { name: 'Mr. Rakesh Rana', role: 'Head of Department, CSE' },
+        { name: 'Prof. Himani Bansal', role: '' },
+        { name: 'Mr. Pankaj Sharma', role: '' },
+      ],
+    },
+    {
+      id: 'committee11',
+      name: 'Sponsorship Committee',
+      members: [
+        { name: 'Prof. Bhawna Aggarwal', role: '' },
+        { name: 'Prof. Himani Bansal', role: '' },
+        { name: 'Prof. Manika Verma', role: '' },
+      ],
+    },
+    {
+      id: 'committee12',
+      name: 'Publication Committee',
+      members: [
+        { name: 'Dr. S.P. Yadav', role: '' },
+        { name: 'Dr. Kiran Kumar', role: '' },
+        { name: 'Prof. Deepti Sehgal', role: '' },
+      ],
+    },
+    {
+      id: 'committee13',
+      name: 'Decoration Committee',
+      members: [
+        { name: 'Prof. Archana Sharma', role: '' },
+        { name: 'Prof. Ruchi Arora', role: '' },
+        { name: 'Prof. Sonam Chhikara', role: '' },
+      ],
+    },
+  ];
+
   return (
-    <section id="commit" className="committee-section section">
-       <h1 className="heading">Committee</h1>
-      <div className="coming-soon">
-        COMING SOON
+    <section id="committee" className="committee-section section hauto">
+    <div className="w-full">
+      <div className="bg-white pt-12 md:px-[10%]">
+        <div className="pt-16">
+          <h1 className="text-[#c00000] text-center text-3xl font-[600]">
+            COMMITTEES
+          </h1>
+          <div className="w-[100px] h-[2px] mx-auto mt-2 bg-[#365372] rounded-xl mb-8"></div>
+        </div>
+        <div className="flex flex-col md:flex-row md:space-x-8 m-5">
+          <div className="w-full md:w-[300px] relative">
+            <ul className="space-y-2">
+              {committees.map((committee) => (
+                <li key={committee.id} className="relative">
+                  <button
+                    className={`hover:text-white focus:text-white w-full bg-gray-200 text-left pl-3 py-2 rounded-md font-medium hover:bg-gray-500 focus:outline-none focus:bg-gray-500 border border-borderColor ${
+                      activeCommittee === committee.id ? 'bg-gray-500 text-white' : ''
+                    }`}
+                    onClick={() => toggleDropdown(committee.id)}
+                  >
+                    {committee.name}
+                  </button>
+                  <ul
+                    id={committee.id}
+                    className={`${
+                      activeCommittee === committee.id ? 'block' : 'hidden'
+                    } md:hidden bg-white mt-2 rounded-md shadow-lg text-left p-5 border borderColor`}
+                  >
+                    {committee.members.map((member, index) => (
+                      <li key={index} className="px-3 py-1 text-black">
+                        ● {member.name} - {member.role}
+                      </li>
+                    ))}
+                  </ul>
+                </li>
+              ))}
+            </ul>
+          </div>
+          <div className="hidden md:block mt-4 md:mt-0 w-full md:w-[800px] bg-white rounded-md shadow-lg p-5 border borderColor">
+            {committees.map(
+              (committee) =>
+                activeCommittee === committee.id && (
+                  <ul key={committee.id} className="text-left">
+                    {committee.members.map((member, index) => (
+                      <li key={index} className="px-3 py-1 text-black">
+                        ● {member.name} - {member.role}
+                      </li>
+                    ))}
+                  </ul>
+                )
+            )}
+          </div>
+        </div>
       </div>
-    </section>
-  );
+    </div>
+  </section>
+);
 };
 
 export default Committee;

pages/Tracks.jsx

@@ -12,9 +12,9 @@ const Tracks = () => {
   useEffect(() => {
     const updateActiveTrack = () => {
       if (window.innerWidth >= 768) {
-        setActiveTrack('track1');
+        setActiveTrack('track1'); // Initially open the first track on desktop
       } else {
-        setActiveTrack(null);
+        setActiveTrack(null); // Close all tracks on mobile
       }
     };
 
@@ -86,15 +86,15 @@ const Tracks = () => {
   ];
 
   return (
-    <section id="track" className="tracks-section section">
+    <section id="track" className="tracks-section section hauto">
       <div className="w-full">
         <div className="bg-white pt-12 md:px-[10%]">
           <div className="pt-16">
             <h1 className="text-[#c00000] text-center text-3xl font-[600]">TRACKS</h1>
             <div className="w-[100px] h-[2px] mx-auto mt-2 bg-[#365372] rounded-xl mb-8"></div>
           </div>
-          <div className="flex flex-col md:flex-row md:space-x-8">
-            <div className="w-full md:w-[300px]">
+          <div className="flex flex-col md:flex-row md:space-x-8 m-5">
+            <div className="w-full md:w-[300px] relative">
               <ul className="space-y-2">
                 {tracks.map((track) => (
                   <li key={track.id} className="relative">

pages/style.css

@@ -1,27 +1,3 @@
-.dropdown {
-  position: relative;
-  display: inline-block;
-}
-
-.dropdown-content {
-  display: none;
-  position: absolute;
-  background-color: #f2f2f2;
-  border: 1px solid #ccc;
-  border-radius: 5px;
-  padding: 10px;
-  /* min-width: 200px; */
-  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
-  z-index: 1;
-}
-
-.dropdown:hover .dropdown-content {
-  display: block;
-}
-.dropdown-menu {
-  transition: opacity 0.3s ease, visibility 0.3s ease;
-}
-.dropdown-menu.hidden {
-  opacity: 0;
-  visibility: hidden;
+.hauto {
+    height: auto !important;
 }