Feat/embed form

frontend/package.json

@@ -26,6 +26,6 @@
     "eslint-plugin-react": "^7.34.1",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.6",
-    "vite": "^5.2.0"
+    "vite": "^5.2.12"
   }
 }

frontend/src/App.jsx

@@ -1,17 +1,42 @@
 import { HashRouter, Routes, Route } from "react-router-dom";
+import { useEffect, useState } from 'react';
 
 import "./App.css";
 import Homepage from "./pages/Homepage";
 import Navbar from "./layout/Navbar";
 import Footer from "./layout/Footer";
+import DynamicFormPage from "./pages/DynamicFormPage";
+
+
+// data fetch from backend (remove after contected to backend)
+const mockFormLinks = [
+	{ form_link: "https://form.jotform.com/241484020996460" },
+	{ form_link: "https://form.jotform.com/241484020996460" },
+	{ form_link: "https://form.jotform.com/241484020996460" }
+  ];
 
 function App() {
+	const [formLinks, setFormLinks] = useState([]);
+
+	useEffect(() => {
+		setTimeout(() =>{
+			setFormLinks(mockFormLinks);
+		}, 1000);
+	}, [])
+
+
 	return (
 		<>
 			<HashRouter>
 				<Navbar />
 				<Routes>
+
 					<Route path='/' element={<Homepage />} />
+					{/* Dynamically generate routes for each form link  /tech-club-website/#form/0 */}
+					{formLinks.map((form, index) => (
+						<Route key={index} path={`/form/${index}`} element={<DynamicFormPage formLink={form.form_link} />} />
+					))}
+
 				</Routes>
 				<Footer />
 			</HashRouter>

frontend/src/layout/Navbar.jsx

@@ -29,9 +29,11 @@ function Navbar() {
 					<img src={navLogo} alt='Logo' />
 				</NavLink>
 				<div className={styles.navlinks}>
+
 					<NavLink to='/tech-club-website/'>Team</NavLink>
 					<NavLink to='/tech-club-website/'>About us</NavLink>
 					<NavLink to='/tech-club-website/'>Socials</NavLink>
+
 				</div>
 
 				<div className={styles.menuBtn} onClick={toggleSidebar}>

frontend/src/pages/DynamicFormPage.jsx

@@ -0,0 +1,24 @@
+import PropTypes from 'prop-types';
+
+
+const DynamicFormPage = ({ formLink }) => {
+
+  return (
+    <section style={{ paddingTop: '130px' }}> 
+      <div>
+        <iframe
+          title="Dynamic Form"
+          src={formLink}
+          frameBorder="0"
+          style={{ width: '100%', height: '100vh' }}
+        />
+      </div>
+    </section>
+  );
+};
+
+DynamicFormPage.propTypes = {
+  formLink: PropTypes.string.isRequired,
+};
+
+export default DynamicFormPage;