Add modal for submitting freelance and internship details with updated titles and iframe source

Author: codeaashu

src/Page/OpportunitiesHub/Freelancing.jsx

@@ -7,8 +7,10 @@ import Marquee from 'react-fast-marquee';
 import Freelance from './FreelanceList';
 
 const Navbar = () => {
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
   return (
-    <nav className="sticky top-0 z-50 w-full bg-gray-800 text-white shadow-md">
+    <nav className="sticky top-0 z-50 w-full bg-gray-900 text-white shadow-md">
       <div className="mx-auto flex max-w-7xl items-center justify-between px-4 py-3">
         <a href="/opportunities">
           <button className="flex items-center gap-2 rounded-full border border-white p-2 hover:bg-gray-700">
@@ -17,10 +19,49 @@ const Navbar = () => {
           </button>
         </a>
 
+        <div className="flex items-center justify-center">
+          <StyledButton onClick={() => setIsModalOpen(true)}>
+            <div className="blob1" />
+            <div className="inner">Spotlight Your Freelance Need Globally!</div>
+          </StyledButton>
+        </div>
+
         <div className="text-2xl font-bold">
           <img src="./DevDisplay ICON.png" alt="DevDisplay" className="h-12 w-12" />
         </div>
       </div>
+
+      {isModalOpen && (
+        <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">Submit The Freelancing Details!</h2>
+              <button onClick={() => setIsModalOpen(false)} className="text-gray-400 hover:text-white">
+                X
+              </button>
+            </div>
+
+            <iframe
+              src="https://tally.so/embed/mOV7Gp?alignLeft=1&hideTitle=1&transparentBackground=1&dynamicHeight=1"
+              width="100%"
+              height="500px"
+              frameBorder="0"
+              title="Tally Form"
+              className="rounded-lg"
+            ></iframe>
+
+            <div className="mt-4 flex justify-end">
+              <button
+                type="button"
+                onClick={() => setIsModalOpen(false)}
+                className="rounded-lg bg-gray-700 px-4 py-2 text-white transition-colors hover:bg-gray-600"
+              >
+                Close
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
     </nav>
   );
 };

src/Page/OpportunitiesHub/Internships.jsx

@@ -22,7 +22,7 @@ const Navbar = () => {
         <div className="flex items-center justify-center">
           <StyledButton onClick={() => setIsModalOpen(true)}>
             <div className="blob1" />
-            <div className="inner">Spotlight Your Competition Globally!</div>
+            <div className="inner">Spotlight Your Internship Globally!</div>
           </StyledButton>
         </div>
 
@@ -35,14 +35,14 @@ const Navbar = () => {
         <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">Submit The Competition Details!</h2>
+              <h2 className="text-xl font-semibold">Submit The Internship Details!</h2>
               <button onClick={() => setIsModalOpen(false)} className="text-gray-400 hover:text-white">
                 X
               </button>
             </div>
 
             <iframe
-              src="#"
+              src="https://tally.so/embed/mOV7Gp?alignLeft=1&hideTitle=1&transparentBackground=1&dynamicHeight=1"
               width="100%"
               height="500px"
               frameBorder="0"
@@ -71,14 +71,7 @@ const Hero = () => {
   return (
     <section className="hero-section mb-0 flex min-h-[10vh] flex-col items-center justify-center text-white">
       <div className="flex w-full flex-col items-center justify-center px-8 text-center">
-        {/* <h2 className="mb-4 text-6xl font-bold">
-          Opportunities <span className="text-[#00a6fb]">Hub</span>
-        </h2> */}
-        {/* <p className="text-md md:text-md mx-auto max-w-2xl">
-         One Platform, Endless Tech Opportunities
-        </p> */}
         <div className="my-6"></div>
-        {/* <h1 className="mb-2 text-6xl font-bold tracking-widest md:text-4xl"><span className="text-[#00a6fb]">Unlock All Tech Opportunities in One Place</span></h1> */}
         <StyledWrapper>
           <div className="modgp relative inline-block w-full py-3">
             <div className="relative">