v2.0

Author: codeaashu

src/Page/ProjectShowcase.jsx

@@ -8,6 +8,7 @@ import Marquee from 'react-fast-marquee'; // Import Marquee
 
 const ProjectsPage = () => {
   const [allProjects, setAllProjects] = useState([]);
+  const [isModalOpen, setIsModalOpen] = useState(false);
   const [filteredProjects, setFilteredProjects] = useState([]);
   const [visibleProjects, setVisibleProjects] = useState([]);
   const [isLoading, setIsLoading] = useState(false);
@@ -349,6 +350,46 @@ const ProjectsPage = () => {
             className="w-full rounded-lg border border-gray-700 bg-gray-800 px-4 py-2 text-white transition focus:outline-none focus:ring focus:ring-[#00a6fb]"
           />
         </div>
+        <div className="mb-8 flex items-center justify-between">
+          <button
+            onClick={() => setIsModalOpen(true)}
+            className="rounded-lg bg-[#00a6fb] px-4 py-2 text-white transition-colors hover:bg-[#0089d2]"
+          >
+            Add Your Portfolio
+          </button>
+        </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">Add Your Projects!</h2>
+                <button onClick={() => setIsModalOpen(false)} className="text-gray-400 hover:text-white">
+                  X
+                </button>
+              </div>
+
+              <iframe
+                src="https://tally.so/embed/wdRJar?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>
+        )}
 
         <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
           {visibleProjects.map((project, index) => (