Add initial UI placeholders for Virtual Hackathon Rooms, Dynamic Port…

src/Page/About.jsx

@@ -606,3 +606,16 @@ export default function About() {
     </div>
   );
 }
+
+        <section className="container mx-auto mt-12 p-8 text-center">
+          <div className="mt-8 p-6 rounded-lg bg-green-900">
+            <h2 className="text-2xl font-bold mb-4 text-green-300">Wellness & Productivity Dashboard (Coming Soon)</h2>
+            <p className="mb-4">Maintain a healthy work-life balance while coding with wellness tips, focus timers, and productivity analytics.</p>
+            <div className="mb-4">
+              <label className="block mb-2 font-semibold">Upload Wellness Screenshot</label>
+              <input type="file" accept="image/*" className="mb-2" onChange={e => alert('Screenshot upload coming soon!')} />
+              <div className="mt-2 text-sm text-gray-300">Screenshots will appear here after upload.</div>
+            </div>
+            <div className="mt-4 text-sm text-green-200">Wellness tips, timers, and analytics coming soon.</div>
+          </div>
+        </section>

src/Page/OpportunitiesHub/Hackathons.jsx

@@ -22,6 +22,9 @@ const Navbar = () => {
             <div className="blob1" />
             <div className="inner">Spotlight Your Hackathon Globally!</div>
           </StyledButton>
+          <button className="ml-4 px-4 py-2 rounded-lg bg-blue-600 text-white font-semibold hover:bg-blue-700" onClick={() => setShowRoomModal(true)}>
+            Create/Join Virtual Hackathon Room
+          </button>
         </div>
 
         <div className="text-2xl font-bold">
@@ -614,3 +617,21 @@ const Hackathons = () => {
 };
 
 export default Hackathons;
+
+{showRoomModal && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50">
+          <div className="w-full max-w-md rounded-lg bg-gray-800 p-6 text-white">
+            <div className="mb-4 flex items-center justify-between">
+              <h2 className="text-xl font-semibold">Virtual Hackathon Room</h2>
+              <button onClick={() => setShowRoomModal(false)} className="text-gray-400 hover:text-white">X</button>
+            </div>
+            <p className="mb-4">Collaborate with your team in real-time! (Chat, video, and coding tools coming soon.)</p>
+            <div className="mb-4">
+              <label className="block mb-2 font-semibold">Upload Screenshot</label>
+              <input type="file" accept="image/*" className="mb-2" onChange={e => alert('Screenshot upload coming soon!')} />
+              <div className="mt-2 text-sm text-gray-300">Screenshots will appear here after upload.</div>
+            </div>
+            <button className="rounded-lg bg-blue-600 px-4 py-2 text-white font-bold hover:bg-blue-700" onClick={() => alert('Room creation/joining coming soon!')}>Create/Join Room</button>
+          </div>
+        </div>
+      )}

src/Page/PortfolioBuilder.jsx

@@ -28,8 +28,18 @@ const PortfolioBuilderPage = () => {
           </span>
         </button>
       </a>
+      <div className="mt-8 p-6 rounded-lg bg-gray-800">
+        <h2 className="text-2xl font-bold mb-4">Dynamic Portfolio Generator (Coming Soon)</h2>
+        <p className="mb-4">Build and customize your interactive portfolio with drag-and-drop widgets, live project demos, and real-time analytics.</p>
+        <div className="mb-4">
+          <label className="block mb-2 font-semibold">Upload Portfolio Screenshot</label>
+          <input type="file" accept="image/*" className="mb-2" onChange={e => alert('Screenshot upload coming soon!')} />
+          <div className="mt-2 text-sm text-gray-300">Screenshots will appear here after upload.</div>
+        </div>
+        <div className="mt-4 text-sm text-gray-400">Drag-and-drop widgets and analytics coming soon.</div>
+      </div>
     </div>
   );
 };
 
-export default PortfolioBuilderPage;
+export default PortfolioBuilderPage;