diff --git a/.nvmrc b/.nvmrc
new file mode 100644
index 0000000..02c8b48
--- /dev/null
+++ b/.nvmrc
@@ -0,0 +1 @@
+18.18.0
diff --git a/eslint.config.mjs b/eslint.config.mjs
new file mode 100644
index 0000000..12ad330
--- /dev/null
+++ b/eslint.config.mjs
@@ -0,0 +1,14 @@
+import globals from "globals";
+import pluginJs from "@eslint/js";
+import tseslint from "typescript-eslint";
+import pluginReact from "eslint-plugin-react";
+
+
+export default [
+  {files: ["**/*.{js,mjs,cjs,ts,jsx,tsx}"]},
+  {files: ["**/*.js"], languageOptions: {sourceType: "commonjs"}},
+  {languageOptions: { globals: globals.browser }},
+  pluginJs.configs.recommended,
+  ...tseslint.configs.recommended,
+  pluginReact.configs.flat.recommended,
+];
\ No newline at end of file
diff --git a/index.html b/index.html
index 9d4fc94..1a21edd 100644
--- a/index.html
+++ b/index.html
@@ -47,7 +47,7 @@
 <body>
   <noscript>You need to enable JavaScript to run this app.</noscript>
   <div id="root"></div>
-  <script type="module" src="/src/index.jsx"></script>
+  <script type="module" src="/src/index.tsx"></script>
   <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.
diff --git a/package.json b/package.json
index 3d256cf..9514cb3 100644
--- a/package.json
+++ b/package.json
@@ -54,7 +54,7 @@
     "@vitejs/plugin-react": "^4.3.1",
     "autoprefixer": "^10.4.20",
     "postcss": "^8.4.41",
-    "tailwindcss": "^3.4.11",
+    "tailwindcss": "^3.4.15",
     "vite": "^4.2.1",
     "vite-plugin-svgr": "^4.2.0",
     "vite-tsconfig-paths": "^4.0.8"
diff --git a/public/netlify.toml b/public/netlify.toml
index 456282f..2a36460 100644
--- a/public/netlify.toml
+++ b/public/netlify.toml
@@ -1,5 +1,6 @@
 [build]
 publish = "build"  
+environment = { NODE_VERSION = "18.18.0" }
 command = "npm run build" 
 ignore = "git diff --quiet HEAD^ HEAD README.md"
 
diff --git a/src/App.js b/src/App.js
new file mode 100644
index 0000000..f82bbc4
--- /dev/null
+++ b/src/App.js
@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { BrowserRouter, Routes, Route } from "react-router-dom";
+import Homepage from "./pages/Homepage";
+import Team from "./pages/Team";
+import Contacts from "./pages/Contacts";
+import Shipyard from "./pages/Shipyard";
+import About from "./pages/AboutOrg";
+import Buiding from "./pages/Buiding";
+import Guide from "./pages/Guide";
+import Faqs from "./pages/Faqs";
+import Resources from "./pages/Resources";
+import Privacy from "./pages/Privacy";
+import Frontends from "./pages/FrontEnds";
+import HTMLCSS from "./pages/Frontend/HTMLCSS";
+import JS from "./pages/Frontend/JSc";
+import Eletron from "./pages/Frontend/Eletron";
+import Reactjs from "./pages/Frontend/Reactjs";
+import Next__js from "./pages/Frontend/Next__js";
+import Tail_wind from "./pages/Frontend/Tail_wind";
+import Vue__js from "./pages/Frontend/Vue__js";
+import React__native from "./pages/Frontend/React__native";
+import Three__js from "./pages/Frontend/Three__js";
+import PageNotFound from "./pages/PageNotFound";
+const App = () => {
+    return (_jsx(BrowserRouter, { children: _jsxs(Routes, { children: [_jsx(Route, { path: "/", element: _jsx(Homepage, {}) }), _jsx(Route, { path: "/home", element: _jsx(Homepage, {}) }), _jsx(Route, { path: "/team", element: _jsx(Team, {}) }), _jsx(Route, { path: "/contact", element: _jsx(Contacts, {}) }), _jsx(Route, { path: "/shipyard", element: _jsx(Shipyard, {}) }), _jsx(Route, { path: "/about", element: _jsx(About, {}) }), _jsx(Route, { path: "/building", element: _jsx(Buiding, {}) }), _jsx(Route, { path: "/guide", element: _jsx(Guide, {}) }), _jsx(Route, { path: "/faq", element: _jsx(Faqs, {}) }), _jsx(Route, { path: "/resource", element: _jsx(Resources, {}) }), _jsx(Route, { path: "/privacypolicy", element: _jsx(Privacy, {}) }), _jsx(Route, { path: "/frontend", element: _jsx(Frontends, {}) }), _jsx(Route, { path: "/html_css", element: _jsx(HTMLCSS, {}) }), _jsx(Route, { path: "/javascript", element: _jsx(JS, {}) }), _jsx(Route, { path: "/electron", element: _jsx(Eletron, {}) }), _jsx(Route, { path: "/reactjs", element: _jsx(Reactjs, {}) }), _jsx(Route, { path: "/nextjs", element: _jsx(Next__js, {}) }), _jsx(Route, { path: "/tailwind", element: _jsx(Tail_wind, {}) }), _jsx(Route, { path: "/vuejs", element: _jsx(Vue__js, {}) }), _jsx(Route, { path: "/threejs", element: _jsx(Three__js, {}) }), _jsx(Route, { path: "/reactnative", element: _jsx(React__native, {}) }), _jsx(Route, { path: "*", element: _jsx(PageNotFound, {}) })] }) }));
+};
+export default App;
diff --git a/src/App.jsx b/src/App.tsx
similarity index 97%
rename from src/App.jsx
rename to src/App.tsx
index 08d9a20..0f77822 100644
--- a/src/App.jsx
+++ b/src/App.tsx
@@ -22,7 +22,7 @@ import React__native from "./pages/Frontend/React__native";
 import Three__js from "./pages/Frontend/Three__js";
 import PageNotFound from "./pages/PageNotFound";
 
-function App() {
+const App: React.FC = () => {
   return (
     <BrowserRouter>
       <Routes>
@@ -51,6 +51,6 @@ function App() {
       </Routes>
     </BrowserRouter>
   );
-}
+};
 
-export default App;
\ No newline at end of file
+export default App;
diff --git a/src/components/About.js b/src/components/About.js
new file mode 100644
index 0000000..b92117a
--- /dev/null
+++ b/src/components/About.js
@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import Lottie from "react-lottie"; // or from "react-lottie-player" if you're using that
+import animationData from "../assets/lotties/community_about_lottie.json";
+const About = () => {
+    const [size, setSize] = useState(window.innerWidth);
+    const checkSize = () => {
+        setSize(window.innerWidth);
+    };
+    useEffect(() => {
+        window.addEventListener("resize", checkSize);
+        return () => {
+            window.removeEventListener("resize", checkSize);
+        };
+    }, []);
+    const defaultOptions = {
+        loop: true,
+        autoplay: true,
+        animationData: animationData,
+        rendererSettings: {
+            preserveAspectRatio: "xMidYMid slice",
+        },
+    };
+    return (_jsx("div", { className: "w-full bg-white py-16 px-4", children: _jsxs("div", { className: "max-w-[1240px] mx-auto grid md:grid-cols-2", children: [size >= 700 ? (_jsxs("div", { className: "w-[500px] mx-auto my-4", children: [" ", _jsx(Lottie, { options: defaultOptions, height: 400, width: 400 })] })) : (""), _jsxs("div", { className: "flex flex-col justify-center", children: [_jsx("p", { className: "text-[#AEF746] font-bold", children: "Community + Coding = \uD83D\uDD25" }), _jsx("h1", { className: "md:text-4xl sm:text-3xl text-2xl font-bold py-3", children: "We \u2764\uFE0F Open Source" }), _jsx("p", { children: "We at FOSSCU (Free and Open-Source Software Community United) are a group of individuals who are constantly working to promote Open-Source Culture." }), _jsx("a", { href: "https://linktr.ee/fosscu", target: "_blank", rel: "noopener noreferrer", children: _jsx("button", { className: "hover:bg-slate-800 bg-black text-[#0DFF1C] w-[200px] rounded-md font-medium my-6 mx-auto md:mx-0 py-3", children: "Connect with Us \uD83C\uDFC1" }) })] })] }) }));
+};
+export default About;
diff --git a/src/components/About.jsx b/src/components/About.jsx
deleted file mode 100644
index 559b1d3..0000000
--- a/src/components/About.jsx
+++ /dev/null
@@ -1,59 +0,0 @@
-import React, { useState, useEffect } from 'react'
-import Lottie from 'react-lottie';
-import animationDataCommunity from '../assets/lotties/community_about_lottie.json';
-
-function About() {
-
-    const [size, setSize] = useState(window.innerWidth);
-
-    const checkSize = () => {
-      setSize(window.innerWidth);
-    };
-    useEffect(() => {
-      // console.log('useEffect');
-      window.addEventListener('resize', checkSize);
-      return () => {
-        console.log('cleanup');
-        window.removeEventListener('resize', checkSize);
-      };
-    }, []);
-    const defaultOptions = {
-        loop: true,
-        autoplay: true,
-        animationData: animationDataCommunity,
-        rendererSettings: {
-            preserveAspectRatio: "xMidYMid slice"
-        }
-    };
-  return (
-    <div className='w-full bg-white py-16 px-4'>
-        <div className='max-w-[1240px] mx-auto grid md:grid-cols-2'>
-     {
-        size>=700
-        ?
-        <Lottie
-                className = 'w-[500px] mx-auto my-4'
-                options = {defaultOptions}
-                height = {400}
-                width = {400}
-                />
-                : 
-                ''
-     }
-            <div className='flex flex-col justify-center'>
-                <p className='text-[#AEF746] font-bold'>Community + Coding = 🔥</p>
-                <h1 className='md:text-4xl sm:text-3xl text-2xl font-bold py-3'>We ❤️ Open Source</h1>
-                <p>We at FOSSCU (Free and Open-Source Software Community United) are a Group of individuals who are constantly working to promote Open-Source Culture.</p>
-                <a href="https://linktr.ee/fosscu" target="_blank" rel="noopener noreferrer">
-                <button className='hover:bg-slate-800 bg-black text-[#0DFF1C] w-[200px] rounded-md font-medium my-6 mx-auto md:mx-0 py-3'>Connect with Us 🏁</button>
-                </a>
-    
-
-            </div>
-        </div>
-
-    </div>
-  )
-}
-
-export default About
diff --git a/src/components/About.tsx b/src/components/About.tsx
new file mode 100644
index 0000000..9c4a5ce
--- /dev/null
+++ b/src/components/About.tsx
@@ -0,0 +1,67 @@
+import React, { useState, useEffect } from "react";
+import Lottie from "react-lottie"; // or from "react-lottie-player" if you're using that
+import animationData from "../assets/lotties/community_about_lottie.json";
+
+const About: React.FC = () => {
+  const [size, setSize] = useState<number>(window.innerWidth);
+
+  const checkSize = (): void => {
+    setSize(window.innerWidth);
+  };
+
+  useEffect(() => {
+    window.addEventListener("resize", checkSize);
+    return () => {
+      window.removeEventListener("resize", checkSize);
+    };
+  }, []);
+
+  const defaultOptions = {
+    loop: true,
+    autoplay: true,
+    animationData: animationData,
+    rendererSettings: {
+      preserveAspectRatio: "xMidYMid slice",
+    },
+  };
+
+  return (
+    <div className="w-full bg-white py-16 px-4">
+      <div className="max-w-[1240px] mx-auto grid md:grid-cols-2">
+        {size >= 700 ? (
+          <div className="w-[500px] mx-auto my-4"> {/* Wrap in a div */}
+            <Lottie
+              options={defaultOptions}
+              height={400}
+              width={400}
+            />
+          </div>
+        ) : (
+          ""
+        )}
+        <div className="flex flex-col justify-center">
+          <p className="text-[#AEF746] font-bold">Community + Coding = 🔥</p>
+          <h1 className="md:text-4xl sm:text-3xl text-2xl font-bold py-3">
+            We ❤️ Open Source
+          </h1>
+          <p>
+            We at FOSSCU (Free and Open-Source Software Community United) are
+            a group of individuals who are constantly working to promote
+            Open-Source Culture.
+          </p>
+          <a
+            href="https://linktr.ee/fosscu"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <button className="hover:bg-slate-800 bg-black text-[#0DFF1C] w-[200px] rounded-md font-medium my-6 mx-auto md:mx-0 py-3">
+              Connect with Us 🏁
+            </button>
+          </a>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default About;
diff --git a/src/components/Building.js b/src/components/Building.js
new file mode 100644
index 0000000..5218042
--- /dev/null
+++ b/src/components/Building.js
@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// Define the functional component using React.FC
+const Building = () => {
+    return (_jsx("div", { className: "w-full py-16 text-white px-4 text-center text-5xl ", children: "We are Building" }));
+};
+export default Building;
diff --git a/src/components/Building.jsx b/src/components/Building.tsx
similarity index 58%
rename from src/components/Building.jsx
rename to src/components/Building.tsx
index af8635d..373c49a 100644
--- a/src/components/Building.jsx
+++ b/src/components/Building.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 
-const Building = () => {
+// Define the functional component using React.FC
+const Building: React.FC = () => {
   return (
     <div className="w-full py-16 text-white px-4 text-center text-5xl ">
       We are Building
@@ -8,4 +9,4 @@ const Building = () => {
   );
 };
 
-export default Building;
\ No newline at end of file
+export default Building;
diff --git a/src/components/Cards.js b/src/components/Cards.js
new file mode 100644
index 0000000..8f50c48
--- /dev/null
+++ b/src/components/Cards.js
@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Single from '../assets/img/logo/single.png';
+import Double from '../assets/img/logo/double.png';
+import Triple from '../assets/img/logo/triple.png';
+const Cards = () => {
+    return (_jsx("div", { className: 'w-full py-[10rem] px-4 bg-white', children: _jsxs("div", { className: 'max-w-[1240px] mx-auto grid md:grid-cols-3 gap-8', children: [_jsxs("div", { className: 'w-full shadow-xl flex flex-col p-4 my-4 rounded-lg hover:scale-105 duration-300', children: [_jsx("img", { className: 'w-20 mx-auto mt-[-3rem] bg-white', src: Single, alt: "Single User Plan" }), _jsx("h2", { className: 'text-2xl font-bold text-center py-8', children: "Single User" }), _jsx("p", { className: 'text-center text-4xl font-bold', children: "$149" }), _jsxs("div", { className: 'text-center font-medium', children: [_jsx("p", { className: 'py-2 border-b mx-8 mt-8', children: "500 GB Storage" }), _jsx("p", { className: 'py-2 border-b mx-8', children: "1 Granted User" }), _jsx("p", { className: 'py-2 border-b mx-8', children: "Send up to 2 GB" })] }), _jsx("button", { className: 'bg-[#00df9a] w-[200px] rounded-md font-medium my-6 mx-auto px-6 py-3', children: "Start Trial" })] }), _jsxs("div", { className: 'w-full shadow-xl bg-gray-100 flex flex-col p-4 md:my-0 my-8 rounded-lg hover:scale-105 duration-300', children: [_jsx("img", { className: 'w-20 mx-auto mt-[-3rem] bg-transparent', src: Double, alt: "Double User Plan" }), _jsx("h2", { className: 'text-2xl font-bold text-center py-8', children: "Double User" }), " ", _jsx("p", { className: 'text-center text-4xl font-bold', children: "$249" }), " ", _jsxs("div", { className: 'text-center font-medium', children: [_jsx("p", { className: 'py-2 border-b mx-8 mt-8', children: "1 TB Storage" }), " ", _jsx("p", { className: 'py-2 border-b mx-8', children: "2 Granted Users" }), " ", _jsx("p", { className: 'py-2 border-b mx-8', children: "Send up to 4 GB" }), " "] }), _jsx("button", { className: 'bg-black text-[#00df9a] w-[200px] rounded-md font-medium my-6 mx-auto px-6 py-3', children: "Start Trial" })] }), _jsxs("div", { className: 'w-full shadow-xl flex flex-col p-4 my-4 rounded-lg hover:scale-105 duration-300', children: [_jsx("img", { className: 'w-20 mx-auto mt-[-3rem] bg-white', src: Triple, alt: "Triple User Plan" }), _jsx("h2", { className: 'text-2xl font-bold text-center py-8', children: "Triple User" }), " ", _jsx("p", { className: 'text-center text-4xl font-bold', children: "$349" }), " ", _jsxs("div", { className: 'text-center font-medium', children: [_jsx("p", { className: 'py-2 border-b mx-8 mt-8', children: "2 TB Storage" }), " ", _jsx("p", { className: 'py-2 border-b mx-8', children: "3 Granted Users" }), " ", _jsx("p", { className: 'py-2 border-b mx-8', children: "Send up to 6 GB" }), " "] }), _jsx("button", { className: 'bg-[#00df9a] w-[200px] rounded-md font-medium my-6 mx-auto px-6 py-3', children: "Start Trial" })] })] }) }));
+};
+export default Cards;
diff --git a/src/components/Cards.jsx b/src/components/Cards.jsx
deleted file mode 100644
index c341932..0000000
--- a/src/components/Cards.jsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import React from 'react';
-import Single from '../assets/img/logo/single.png'
-import Double from '../assets/img/logo/double.png'
-import Triple from '../assets/img/logo/triple.png'
-
-const Cards = () => {
-  return (
-    <div className='w-full py-[10rem] px-4 bg-white'>
-      <div className='max-w-[1240px] mx-auto grid md:grid-cols-3 gap-8'>
-          <div className='w-full shadow-xl flex flex-col p-4 my-4 rounded-lg hover:scale-105 duration-300'>
-              <img className='w-20 mx-auto mt-[-3rem] bg-white' src={Single} alt="/" />
-              <h2 className='text-2xl font-bold text-center py-8'>Single User</h2>
-              <p className='text-center text-4xl font-bold'>$149</p>
-              <div className='text-center font-medium'>
-                  <p className='py-2 border-b mx-8 mt-8'>500 GB Storage</p>
-                  <p className='py-2 border-b mx-8'>1 Granted User</p>
-                  <p className='py-2 border-b mx-8'>Send up to 2 GB</p>
-              </div>
-              <button className='bg-[#00df9a] w-[200px] rounded-md font-medium my-6 mx-auto px-6 py-3'>Start Trial</button>
-          </div>
-          <div className='w-full shadow-xl bg-gray-100 flex flex-col p-4 md:my-0 my-8 rounded-lg hover:scale-105 duration-300'>
-              <img className='w-20 mx-auto mt-[-3rem] bg-transparent' src={Double} alt="/" />
-              <h2 className='text-2xl font-bold text-center py-8'>Single User</h2>
-              <p className='text-center text-4xl font-bold'>$149</p>
-              <div className='text-center font-medium'>
-                  <p className='py-2 border-b mx-8 mt-8'>500 GB Storage</p>
-                  <p className='py-2 border-b mx-8'>1 Granted User</p>
-                  <p className='py-2 border-b mx-8'>Send up to 2 GB</p>
-              </div>
-              <button className='bg-black text-[#00df9a] w-[200px] rounded-md font-medium my-6 mx-auto px-6 py-3'>Start Trial</button>
-          </div>
-          <div className='w-full shadow-xl flex flex-col p-4 my-4 rounded-lg hover:scale-105 duration-300'>
-              <img className='w-20 mx-auto mt-[-3rem] bg-white' src={Triple} alt="/" />
-              <h2 className='text-2xl font-bold text-center py-8'>Single User</h2>
-              <p className='text-center text-4xl font-bold'>$149</p>
-              <div className='text-center font-medium'>
-                  <p className='py-2 border-b mx-8 mt-8'>500 GB Storage</p>
-                  <p className='py-2 border-b mx-8'>1 Granted User</p>
-                  <p className='py-2 border-b mx-8'>Send up to 2 GB</p>
-              </div>
-              <button className='bg-[#00df9a] w-[200px] rounded-md font-medium my-6 mx-auto px-6 py-3'>Start Trial</button>
-          </div>
-      </div>
-    </div>
-  );
-};
-
-export default Cards;
\ No newline at end of file
diff --git a/src/components/Cards.tsx b/src/components/Cards.tsx
new file mode 100644
index 0000000..1fc96a4
--- /dev/null
+++ b/src/components/Cards.tsx
@@ -0,0 +1,48 @@
+import React from 'react';
+import Single from '../assets/img/logo/single.png';
+import Double from '../assets/img/logo/double.png';
+import Triple from '../assets/img/logo/triple.png';
+
+const Cards: React.FC = () => {
+  return (
+    <div className='w-full py-[10rem] px-4 bg-white'>
+      <div className='max-w-[1240px] mx-auto grid md:grid-cols-3 gap-8'>
+        <div className='w-full shadow-xl flex flex-col p-4 my-4 rounded-lg hover:scale-105 duration-300'>
+          <img className='w-20 mx-auto mt-[-3rem] bg-white' src={Single} alt="Single User Plan" />
+          <h2 className='text-2xl font-bold text-center py-8'>Single User</h2>
+          <p className='text-center text-4xl font-bold'>$149</p>
+          <div className='text-center font-medium'>
+            <p className='py-2 border-b mx-8 mt-8'>500 GB Storage</p>
+            <p className='py-2 border-b mx-8'>1 Granted User</p>
+            <p className='py-2 border-b mx-8'>Send up to 2 GB</p>
+          </div>
+          <button className='bg-[#00df9a] w-[200px] rounded-md font-medium my-6 mx-auto px-6 py-3'>Start Trial</button>
+        </div>
+        <div className='w-full shadow-xl bg-gray-100 flex flex-col p-4 md:my-0 my-8 rounded-lg hover:scale-105 duration-300'>
+          <img className='w-20 mx-auto mt-[-3rem] bg-transparent' src={Double} alt="Double User Plan" />
+          <h2 className='text-2xl font-bold text-center py-8'>Double User</h2> {/* Updated text */}
+          <p className='text-center text-4xl font-bold'>$249</p> {/* Updated price */}
+          <div className='text-center font-medium'>
+            <p className='py-2 border-b mx-8 mt-8'>1 TB Storage</p> {/* Updated storage */}
+            <p className='py-2 border-b mx-8'>2 Granted Users</p> {/* Updated user count */}
+            <p className='py-2 border-b mx-8'>Send up to 4 GB</p> {/* Updated limit */}
+          </div>
+          <button className='bg-black text-[#00df9a] w-[200px] rounded-md font-medium my-6 mx-auto px-6 py-3'>Start Trial</button>
+        </div>
+        <div className='w-full shadow-xl flex flex-col p-4 my-4 rounded-lg hover:scale-105 duration-300'>
+          <img className='w-20 mx-auto mt-[-3rem] bg-white' src={Triple} alt="Triple User Plan" />
+          <h2 className='text-2xl font-bold text-center py-8'>Triple User</h2> {/* Updated text */}
+          <p className='text-center text-4xl font-bold'>$349</p> {/* Updated price */}
+          <div className='text-center font-medium'>
+            <p className='py-2 border-b mx-8 mt-8'>2 TB Storage</p> {/* Updated storage */}
+            <p className='py-2 border-b mx-8'>3 Granted Users</p> {/* Updated user count */}
+            <p className='py-2 border-b mx-8'>Send up to 6 GB</p> {/* Updated limit */}
+          </div>
+          <button className='bg-[#00df9a] w-[200px] rounded-md font-medium my-6 mx-auto px-6 py-3'>Start Trial</button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Cards;
diff --git a/src/components/Contact.js b/src/components/Contact.js
new file mode 100644
index 0000000..96a6d9c
--- /dev/null
+++ b/src/components/Contact.js
@@ -0,0 +1,58 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { FaDiscord, FaReddit, FaLinkedin, FaEnvelope, FaTwitter, FaNetworkWired, } from "react-icons/fa";
+import Airtable from "airtable";
+// Ensure that your environment variables are correctly typed
+const SECRET_API_TOKEN = process.env.REACT_APP_AIRTABLE_SECRET_API_TOKEN || '';
+const BASE_ID = process.env.REACT_APP_BASE_ID || '';
+const base = new Airtable({ apiKey: SECRET_API_TOKEN }).base(BASE_ID);
+const Contact = () => {
+    const [data, setData] = useState({
+        name: "",
+        email: "",
+        message: "",
+    });
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState("");
+    const [success, setSuccess] = useState("");
+    // Type the event parameter
+    const handle = (e) => {
+        const newData = { ...data };
+        newData[e.target.id] = e.target.value;
+        setData(newData);
+    };
+    const submit = async (e) => {
+        e.preventDefault();
+        setLoading(true);
+        setError("");
+        setSuccess("");
+        try {
+            await base("Table 1").create([
+                {
+                    fields: {
+                        Name: data.name,
+                        Email: data.email,
+                        Message: data.message,
+                    },
+                },
+            ]);
+            setSuccess("Your message has been sent successfully!");
+            setTimeout(() => setSuccess(""), 3000);
+        }
+        catch (err) {
+            console.error("Error:", err);
+            setError("There was an error processing your request.");
+            setTimeout(() => setError(""), 3000);
+        }
+        finally {
+            setLoading(false);
+            setData({
+                name: "",
+                email: "",
+                message: "",
+            });
+        }
+    };
+    return (_jsx("div", { children: _jsx("section", { className: "text-gray-400 bg-gray-1000 body-font", children: _jsxs("div", { className: "container px-5 py-10 mx-auto", children: [_jsxs("div", { className: "flex flex-col text-center w-full mb-12", children: [_jsx("h1", { className: "sm:text-3xl text-2xl font-medium title-font mb-4 text-white", children: "Contact Us" }), _jsx("p", { className: "lg:w-2/3 mx-auto leading-relaxed text-base" })] }), _jsx("div", { className: "lg:w-1/2 md:w-2/3 mx-auto mb-8", children: _jsxs("div", { className: "flex justify-center md:space-x-12 lg:space-x-14 xl:space-x-20 space-x-6", children: [_jsx("div", { className: "w-12 h-10 flex flex-col items-center", children: _jsx("a", { href: "https://discord.com/invite/4xruwjjU9B", target: "_blank", rel: "noopener noreferrer", children: _jsx(FaDiscord, { className: "hover:fill-current hover:text-[#0DFF1C] hover:w-12", size: 40 }) }) }), _jsx("div", { className: "w-12 h-10 flex flex-col items-center", children: _jsx("a", { href: "https://www.reddit.com/r/fosscu/", target: "_blank", rel: "noopener noreferrer", children: _jsx(FaReddit, { className: "hover:fill-current hover:text-[#0DFF1C] hover:w-12", size: 40 }) }) }), _jsx("div", { className: "w-12 h-10 flex flex-col items-center", children: _jsx("a", { href: "mailto:fosscu@gmail.com", target: "_blank", rel: "noopener noreferrer", children: _jsx(FaEnvelope, { className: "hover:fill-current hover:text-[#0DFF1C] hover:w-12 hover:h-10", size: 35 }) }) }), _jsx("div", { className: "w-12 h-10 flex flex-col items-center", children: _jsx("a", { href: "https://www.linkedin.com/company/fosscu/", target: "_blank", rel: "noopener noreferrer", children: _jsx(FaLinkedin, { className: "fill-current hover:text-[#0DFF1C] hover:w-12 hover:h-10", size: 35 }) }) }), _jsx("div", { className: "w-12 h-10 flex flex-col items-center", children: _jsx("a", { href: "https://twitter.com/fosscuk", target: "_blank", rel: "noopener noreferrer", children: _jsx(FaTwitter, { className: "fill-current hover:text-[#0DFF1C] hover:w-12 hover:h-10", size: 35 }) }) }), _jsx("div", { className: "w-12 h-10 flex flex-col items-center", children: _jsx("a", { href: "https://matrix.to/#/#fosscu:matrix.org", target: "_blank", rel: "noopener noreferrer", children: _jsx(FaNetworkWired, { className: "fill-current hover:text-[#0DFF1C] hover:w-12 hover:h-10", size: 35 }) }) })] }) }), _jsxs("div", { className: "lg:w-1/2 md:w-2/3 mx-auto", children: [_jsxs("form", { className: "flex flex-wrap -m-2", onSubmit: submit, children: [_jsx("div", { className: "p-2 w-1/2", children: _jsxs("div", { children: [_jsx("label", { htmlFor: "name", className: "leading-7 text-sm text-gray-400", children: "Name" }), _jsx("input", { type: "text", id: "name", onChange: handle, value: data.name, className: "w-full bg-gray-800 hover:outline-2 bg-opacity-40 rounded border border-gray-700 focus:border-[#0dff1c] focus:bg-gray-900 focus:ring-2 focus:ring-[#0dff1c] text-base outline-none text-gray-100 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out" })] }) }), _jsx("div", { className: "p-2 w-1/2", children: _jsxs("div", { children: [_jsx("label", { htmlFor: "email", className: "leading-7 text-sm text-gray-400", children: "Email" }), _jsx("input", { type: "email", id: "email", onChange: handle, value: data.email, className: "w-full bg-gray-800 bg-opacity-40 rounded border border-gray-700 focus:border-[#0dff1c] focus:bg-gray-900 focus:ring-2 focus:ring-[#0dff1c] text-base outline-none text-gray-100 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out" })] }) }), _jsx("div", { className: "p-2 w-full", children: _jsxs("div", { children: [_jsx("label", { htmlFor: "message", className: "leading-7 text-sm text-gray-400", children: "Message" }), _jsx("textarea", { id: "message", onChange: handle, value: data.message, className: "w-full bg-gray-800 bg-opacity-40 rounded border border-gray-700 focus:border-[#0dff1c] focus:bg-gray-900 focus:ring-2 focus:ring-[#0dff1c] h-32 text-base outline-none text-gray-100 py-1 px-3 resize-none leading-6 transition-colors duration-200 ease-in-out" })] }) }), _jsx("div", { className: "p-2 w-full", children: _jsx("button", { className: "flex mx-auto tracking-tight font-semibold text-black bg-[#00ff11c4] border-0 py-2 px-8 focus:outline-none hover:bg-[#0dff1c] rounded text-lg", children: "Submit" }) })] }), _jsxs("div", { className: "py-6 text-center font-semibold", children: [loading && _jsx("p", { className: "text-white", children: "Loading..." }), error && _jsx("p", { className: "text-red-500", children: error }), success && _jsx("p", { className: "text-green-500", children: success })] })] })] }) }) }));
+};
+export default Contact;
diff --git a/src/components/Contact.jsx b/src/components/Contact.tsx
similarity index 79%
rename from src/components/Contact.jsx
rename to src/components/Contact.tsx
index bcaa8f5..f589f93 100644
--- a/src/components/Contact.jsx
+++ b/src/components/Contact.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, ChangeEvent, FormEvent } from "react";
 import {
   FaDiscord,
   FaReddit,
@@ -9,33 +9,65 @@ import {
 } from "react-icons/fa";
 import Airtable from "airtable";
 
-const SECRET_API_TOKEN = process.env.REACT_APP_AIRTABLE_SECRET_API_TOKEN;
-const BASE_ID = process.env.REACT_APP_BASE_ID;
+// Type definitions
+interface FormData {
+  name: string;
+  email: string;
+  message: string;
+}
 
-const base = new Airtable({ apiKey: SECRET_API_TOKEN }).base(BASE_ID);
+interface AirtableError extends Error {
+  statusCode?: number;
+  error?: string;
+}
 
-const Contact = () => {
-  const [data, setData] = useState({
+// Environment variables type check
+const SECRET_API_TOKEN: string | undefined = process.env.REACT_APP_AIRTABLE_SECRET_API_TOKEN;
+const BASE_ID: string | undefined = process.env.REACT_APP_BASE_ID;
+
+// Airtable initialization
+let base: Airtable.Base | undefined;
+
+try {
+  if (!SECRET_API_TOKEN) {
+    throw new Error("Airtable API token is not defined.");
+  }
+  if (!BASE_ID) {
+    throw new Error("Airtable Base ID is not defined.");
+  }
+
+  base = new Airtable({ apiKey: SECRET_API_TOKEN }).base(BASE_ID);
+} catch (error) {
+  console.error("Error initializing Airtable:", (error as Error).message);
+}
+
+const Contact: React.FC = () => {
+  const [data, setData] = useState<FormData>({
     name: "",
     email: "",
     message: "",
   });
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState("");
-  const [success, setSuccess] = useState("");
+  const [loading, setLoading] = useState<boolean>(false);
+  const [error, setError] = useState<string>("");
+  const [success, setSuccess] = useState<string>("");
 
-  function handle(e) {
+  const handle = (e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>): void => {
     const newData = { ...data };
-    newData[e.target.id] = e.target.value;
+    newData[e.target.id as keyof FormData] = e.target.value;
     setData(newData);
-  }
+  };
 
-  async function submit(e) {
+  const submit = async (e: FormEvent<HTMLFormElement>): Promise<void> => {
     e.preventDefault();
     setLoading(true);
     setError("");
     setSuccess("");
+
     try {
+      if (!base) {
+        throw new Error("Airtable base is not initialized");
+      }
+
       await base("Table 1").create([
         {
           fields: {
@@ -59,7 +91,7 @@ const Contact = () => {
         message: "",
       });
     }
-  }
+  };
 
   return (
     <div>
@@ -74,7 +106,6 @@ const Contact = () => {
           <div className="lg:w-1/2 md:w-2/3 mx-auto mb-8">
             <div className="flex justify-center md:space-x-12 lg:space-x-14 xl:space-x-20 space-x-6">
               <div className="w-12 h-10 flex flex-col items-center">
-
                 <a href="https://discord.com/invite/4xruwjjU9B" target="discord">
                   <FaDiscord className="hover:fill-current hover:text-[#0DFF1C] hover:w-12" size={40} />
                 </a>
@@ -107,7 +138,7 @@ const Contact = () => {
             </div>
           </div>
           <div className="lg:w-1/2 md:w-2/3 mx-auto">
-            <form className="flex flex-wrap -m-2" onSubmit={(e) => submit(e)}>
+            <form className="flex flex-wrap -m-2" onSubmit={submit}>
               <div className="p-2 w-1/2">
                 <div className="">
                   <label htmlFor="name" className="leading-7 text-sm text-gray-400">
@@ -116,7 +147,7 @@ const Contact = () => {
                   <input
                     type="text"
                     id="name"
-                    onChange={(e) => handle(e)}
+                    onChange={handle}
                     value={data.name}
                     className="w-full bg-gray-800 hover:outline-2 bg-opacity-40 rounded border border-gray-700 focus:border-[#0dff1c] focus:bg-gray-900 focus:ring-2 focus:ring-[#0dff1c] text-base outline-none text-gray-100 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
                   />
@@ -131,7 +162,7 @@ const Contact = () => {
                     type="email"
                     id="email"
                     name="email"
-                    onChange={(e) => handle(e)}
+                    onChange={handle}
                     value={data.email}
                     className="w-full bg-gray-800 bg-opacity-40 rounded border border-gray-700 focus:border-[#0dff1c] focus:bg-gray-900 focus:ring-2 focus:ring-[#0dff1c] text-base outline-none text-gray-100 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
                   />
@@ -145,7 +176,7 @@ const Contact = () => {
                   <textarea
                     id="message"
                     name="message"
-                    onChange={(e) => handle(e)}
+                    onChange={handle}
                     value={data.message}
                     className="w-full bg-gray-800 bg-opacity-40 rounded border border-gray-700 focus:border-[#0dff1c] focus:bg-gray-900 focus:ring-2 focus:ring-[#0dff1c] h-32 text-base outline-none text-gray-100 py-1 px-3 resize-none leading-6 transition-colors duration-200 ease-in-out"
                   ></textarea>
diff --git a/src/components/Faq.js b/src/components/Faq.js
new file mode 100644
index 0000000..2ddc670
--- /dev/null
+++ b/src/components/Faq.js
@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FaQuestionCircle } from 'react-icons/fa';
+const Faq = () => {
+    return (_jsxs("section", { className: "", children: [_jsxs("div", { className: "text-center mb-8 text-4xl tracking-tight font-extrabold text-white", children: [_jsxs("h1", { className: "pt-20 pb-9", children: ["Welcome to ", _jsx("span", { className: "animate-pulse duration-300 text-[#0dff1c]", children: "FOSSCU" })] }), _jsx("div", { children: _jsx("h2", { className: "pb-2", children: "How can we help you?" }) })] }), _jsxs("div", { className: "py-8 px-4 mx-auto max-w-screen-xl", children: [_jsx("h2", { className: "mb-8 text-4xl tracking-tight font-extrabold text-white", children: "Frequently Asked Questions" }), _jsxs("div", { className: "grid md:grid-cols-2 pt-8 text-left border-t gap-14 border-gray-700", children: [_jsxs("div", { children: [_jsxs("div", { className: "flex", children: [_jsx("span", { className: "mr-1 mt-1", children: _jsx(FaQuestionCircle, { size: 18, color: "#0dff1c" }) }), _jsxs("div", { className: "mb-10", children: [_jsx("h3", { className: "items-center mb-4 text-lg font-medium text-white", children: "What do you mean by \"Open Source\"?" }), _jsx("p", { className: "text-gray-400", children: "Open source refers to a software development model in which the source code of a program is made freely available to the public, allowing anyone to view, modify, and distribute the code as they see fit." })] })] }), _jsxs("div", { className: "flex", children: [_jsx("span", { className: "mr-1 mt-1", children: _jsx(FaQuestionCircle, { size: 18, color: "#0dff1c" }) }), _jsxs("div", { className: "mb-10", children: [_jsx("h3", { className: "items-center mb-4 text-lg font-medium text-white", children: "How do I make my first contribution to an open source project?" }), _jsxs("p", { className: "text-gray-400", children: ["One common approach is to look for \"good first issue\" or \"beginner-friendly\" labels on open issues, which provide a good entry point for new contributors.", _jsx("br", {}), "Feel free to ", _jsx("a", { href: "/contact", className: "font-medium underline text-primary-600 dark:text-primary-500 hover:no-underline", children: "contact us" }), " and well help you out as soon as we can."] })] })] }), _jsxs("div", { className: "flex", children: [_jsx("span", { className: "mr-1 mt-1", children: _jsx(FaQuestionCircle, { size: 18, color: "#0dff1c" }) }), _jsxs("div", { className: "mb-10", children: [_jsx("h3", { className: "items-center mb-4 text-lg font-medium text-white", children: "Can I contribute to an open source project even if I am not a developer?" }), _jsx("p", { className: "text-gray-400", children: "Yes, open source projects often need help with documentation, testing, design, and other non-coding tasks. Check the projects documentation or contact the maintainers to see how you can contribute." })] })] }), _jsxs("div", { className: "flex", children: [_jsx("span", { className: "mr-1 mt-1", children: _jsx(FaQuestionCircle, { size: 18, color: "#0dff1c" }) }), _jsxs("div", { className: "mb-10", children: [_jsx("h3", { className: "items-center mb-4 text-lg font-medium text-white", children: "What is the open source community?" }), _jsx("p", { className: "text-gray-400", children: "The open source community is a group of individuals and organizations that collaborate on the development and maintenance of open source software. The community is typically characterized by a spirit of collaboration, transparency, and openness." })] })] })] }), _jsxs("div", { children: [_jsxs("div", { className: "flex", children: [_jsx("span", { className: "mr-1 mt-1", children: _jsx(FaQuestionCircle, { size: 18, color: "#0dff1c" }) }), _jsxs("div", { className: "mb-10", children: [_jsx("h3", { className: "items-center mb-4 text-lg font-medium text-white", children: "What are some benefits of being part of the open source community?" }), _jsxs("p", { className: "text-gray-400", children: ["The opportunity to collaborate with like-minded individuals, build your skills and experience in software development, and make meaningful contributions to important software projects. ", _jsx("a", { href: "https://fosscu.org/", className: "font-medium underline hover:no-underline", children: "Join us" }), " now."] })] })] }), _jsxs("div", { className: "flex", children: [_jsx("span", { className: "mr-1 mt-1", children: _jsx(FaQuestionCircle, { size: 18, color: "#0dff1c" }) }), _jsxs("div", { className: "mb-10", children: [_jsx("h3", { className: "items-center mb-4 text-lg font-medium text-white", children: "How can I get involved in the open source community?" }), _jsx("p", { className: "text-gray-400", children: "There are many ways to get involved, including contributing to projects, attending events, participating in online forums, and joining communities on social media platforms." })] })] }), _jsxs("div", { className: "flex", children: [_jsx("span", { className: "mr-1 mt-1", children: _jsx(FaQuestionCircle, { size: 18, color: "#0dff1c" }) }), _jsxs("div", { className: "mb-10", children: [_jsx("h3", { className: "items-center mb-4 text-lg font-medium text-white", children: "What are some ways to contribute to open source projects?" }), _jsx("p", { className: "text-gray-400", children: "Some ways to contribute include submitting bug reports, suggesting new features, creating documentation, writing code, improving existing code, or helping with community management." })] })] }), _jsxs("div", { className: "flex", children: [_jsx("span", { className: "mr-1 mt-1", children: _jsx(FaQuestionCircle, { size: 18, color: "#0dff1c" }) }), _jsxs("div", { className: "mb-10", children: [_jsx("h3", { className: "items-center mb-4 text-lg font-medium text-white", children: "What is a pull request in open source contribution?" }), _jsx("p", { className: "text-gray-400", children: "A pull request is a proposed change to the codebase that is submitted by a contributor for review and potential inclusion in the project." })] })] })] })] })] })] }));
+};
+export default Faq;
diff --git a/src/components/Faq.jsx b/src/components/Faq.jsx
deleted file mode 100644
index 7306451..0000000
--- a/src/components/Faq.jsx
+++ /dev/null
@@ -1,143 +0,0 @@
-import React from "react";
-
-
-import {
-  FaQuestionCircle,
-} from 'react-icons/fa';
-
-const Faq = () => {
-  return (
-    <section className="">
-      <div className="text-center mb-8 text-4xl  tracking-tight font-extrabold text-white ">
-        <h1 className="pt-20 pb-9 ">Welcome to <span className=" animate-pulse duration-300 text-[#0dff1c]">FOSSCU</span></h1>
-        <div>
-          <h2 className="pb-2">How can we help you?</h2>
-        </div>
-        <div className="flex justify-center ">
-
-        </div>
-      </div>
-      <div className="py-8 px-4 mx-auto max-w-screen-xl ">
-        <h2 className="mb-8 text-4xl tracking-tight font-extrabold text-white">Frequently asked questions</h2>
-        <div className="grid md:grid-cols-2  pt-8 text-left border-t  gap-14 border-gray-700 ">
-          <div>
-            <div className="flex">
-              <span className="mr-1 mt-1">
-                <FaQuestionCircle size={18} color="#0dff1c" />
-              </span>
-              <div className="mb-10">
-                <h3 className=" items-center mb-4 text-lg font-medium  text-white">
-                  What do you mean by "Open Source"?
-                </h3>
-                <p className="text-gray-400">Open source refers to a software development model in which the source code of a
-                  program is made freely available to the public, allowing anyone to view, modify, and distribute the code
-                  as they see fit.</p>
-              </div>
-            </div>
-            <div className="flex">
-              <span className="mr-1 mt-1">
-                <FaQuestionCircle size={18} color="#0dff1c" />
-              </span>
-              <div className="mb-10">
-                <h3 className="items-center mb-4 text-lg font-medium text-white">
-                  How do I make my first contribution to an open source project?
-                </h3>
-                <p className="text-gray-400"> One common approach is to look for "good first issue" or "beginner-friendly"
-                  labels on open issues, which can provide a good entry point for new contributors. <br />Feel free to <a
-                    href="/contact"
-                    className="font-medium underline text-primary-600 dark:text-primary-500 hover:no-underline">contact us</a>
-                  and we'll help you out as soon as we can.</p>
-              </div>
-            </div>
-            <div className="flex">
-              <span className="mr-1 mt-1">
-                <FaQuestionCircle size={18} color="#0dff1c" />
-              </span>
-              <div className="mb-10">
-                <h3 className="tracking-tight items-center mb-4 text-lg font-medium text-white">
-                  Can I contribute to an open source project even if I am not a developer?
-                </h3>
-                <p className="text-gray-400"> Yes, open source projects often need help with documentation, testing, design,
-                  and other non-coding tasks. Check the project's documentation or contact the maintainers to see how you
-                  can contribute.</p>
-              </div>
-            </div>
-            <div className="flex">
-              <span className="mr-1 mt-1">
-                <FaQuestionCircle size={18} color="#0dff1c" />
-              </span>
-              <div className="mb-10">
-                <h3 className="items-center cursor-  mb-4 text-lg font-medium text-white">
-                  What is the open source community?
-                </h3>
-                <p className="text-gray-400">The open source community is a group of individuals and organizations that
-                  collaborate on the development and maintenance of open source software. <br />The community is typically
-                  characterized by a spirit of collaboration, transparency, and openness.</p>
-              </div>
-            </div>
-          </div>
-          <div>
-            <div className="flex">
-              <span className="mr-1 mt-1">
-                <FaQuestionCircle size={18} color="#0dff1c" />
-              </span>
-              <div className="mb-10">
-                <h3 className="items-center mb-4 tracking-tight text-lg font-medium text-white">
-                  What are some benefits of being part of the open source community?
-                </h3>
-                <p className="text-gray-400">The opportunity to collaborate with like-minded individuals, build your skills
-                  and
-                  experience in software development, and make meaningful contributions to important software projects. <a
-                    href="https://fosscu.org/" className="font-medium underline  hover:no-underline">Join us </a> now. </p>
-              </div>
-            </div>
-            <div className="flex">
-              <span className="mr-1 mt-1">
-                <FaQuestionCircle size={18} color="#0dff1c" />
-              </span>
-              <div className="mb-10">
-                <h3 className="items-center mb-4 text-lg font-medium text-white">
-                  How can I get involved in the open source community?
-                </h3>
-                <p className="text-gray-400"> There are many ways to get involved in the open source community, including
-                  contributing to open source projects, attending events and conferences, participating in online forums
-                  and
-                  discussion groups, and joining open source communities on social media platforms.</p>
-              </div>
-            </div>
-            <div className="flex">
-              <span className="mr-1 mt-1">
-                <FaQuestionCircle size={18} color="#0dff1c" />
-              </span>
-              <div className="mb-10">
-                <h3 className="items-center mb-4 text-lg font-medium text-white">
-                  What are some ways to contribute to open source projects?
-                </h3>
-                <p className="text-gray-400"> Some ways to contribute to open source projects include submitting bug reports,
-                  suggesting new features, creating documentation, writing code, improving existing code, providing
-                  feedback
-                  on issues, or helping with community management.</p>
-              </div>
-            </div>
-            <div className="flex">
-              <span className="mr-1 mt-1">
-                <FaQuestionCircle size={18} color="#0dff1c" />
-              </span>
-              <div className="mb-10">
-                <h3 className="items-center mb-4 text-lg font-medium text-white">
-                  What is a pull request in open source contribution?
-                </h3>
-                <p className="text-gray-400"> A pull request is a proposed change to the codebase of an open source project
-                  that
-                  is submitted by a contributor for review and potential inclusion in the project.</p>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </section>
-  );
-};
-
-
-export default Faq;
diff --git a/src/components/Faq.tsx b/src/components/Faq.tsx
new file mode 100644
index 0000000..46a9375
--- /dev/null
+++ b/src/components/Faq.tsx
@@ -0,0 +1,154 @@
+import React from "react";
+import { FaQuestionCircle } from 'react-icons/fa';
+
+const Faq: React.FC = () => {
+  return (
+    <section className="">
+      <div className="text-center mb-8 text-4xl tracking-tight font-extrabold text-white">
+        <h1 className="pt-20 pb-9">Welcome to <span className="animate-pulse duration-300 text-[#0dff1c]">FOSSCU</span></h1>
+        <div>
+          <h2 className="pb-2">How can we help you?</h2>
+        </div>
+      </div>
+
+      <div className="py-8 px-4 mx-auto max-w-screen-xl">
+        <h2 className="mb-8 text-4xl tracking-tight font-extrabold text-white">Frequently Asked Questions</h2>
+        
+        <div className="grid md:grid-cols-2 pt-8 text-left border-t gap-14 border-gray-700">
+          {/* FAQ Item */}
+          <div>
+            <div className="flex">
+              <span className="mr-1 mt-1">
+                <FaQuestionCircle size={18} color="#0dff1c" />
+              </span>
+              <div className="mb-10">
+                <h3 className="items-center mb-4 text-lg font-medium text-white">
+                  What do you mean by &quot;Open Source&quot;?
+                </h3>
+                <p className="text-gray-400">
+                  Open source refers to a software development model in which the source code of a program is made freely 
+                  available to the public, allowing anyone to view, modify, and distribute the code as they see fit.
+                </p>
+              </div>
+            </div>
+
+            <div className="flex">
+              <span className="mr-1 mt-1">
+                <FaQuestionCircle size={18} color="#0dff1c" />
+              </span>
+              <div className="mb-10">
+                <h3 className="items-center mb-4 text-lg font-medium text-white">
+                  How do I make my first contribution to an open source project?
+                </h3>
+                <p className="text-gray-400">
+                  One common approach is to look for &quot;good first issue&quot; or &quot;beginner-friendly&quot; labels on open issues, 
+                  which provide a good entry point for new contributors.<br />
+                  Feel free to <a href="/contact" className="font-medium underline text-primary-600 dark:text-primary-500 hover:no-underline">
+                    contact us
+                  </a> and well help you out as soon as we can.
+                </p>
+              </div>
+            </div>
+
+            <div className="flex">
+              <span className="mr-1 mt-1">
+                <FaQuestionCircle size={18} color="#0dff1c" />
+              </span>
+              <div className="mb-10">
+                <h3 className="items-center mb-4 text-lg font-medium text-white">
+                  Can I contribute to an open source project even if I am not a developer?
+                </h3>
+                <p className="text-gray-400">
+                  Yes, open source projects often need help with documentation, testing, design, and other non-coding tasks.
+                  Check the projects documentation or contact the maintainers to see how you can contribute.
+                </p>
+              </div>
+            </div>
+
+            <div className="flex">
+              <span className="mr-1 mt-1">
+                <FaQuestionCircle size={18} color="#0dff1c" />
+              </span>
+              <div className="mb-10">
+                <h3 className="items-center mb-4 text-lg font-medium text-white">
+                  What is the open source community?
+                </h3>
+                <p className="text-gray-400">
+                  The open source community is a group of individuals and organizations that collaborate on the development 
+                  and maintenance of open source software. The community is typically characterized by a spirit of collaboration, 
+                  transparency, and openness.
+                </p>
+              </div>
+            </div>
+          </div>
+
+          {/* Second Column */}
+          <div>
+            <div className="flex">
+              <span className="mr-1 mt-1">
+                <FaQuestionCircle size={18} color="#0dff1c" />
+              </span>
+              <div className="mb-10">
+                <h3 className="items-center mb-4 text-lg font-medium text-white">
+                  What are some benefits of being part of the open source community?
+                </h3>
+                <p className="text-gray-400">
+                  The opportunity to collaborate with like-minded individuals, build your skills and experience in software development, 
+                  and make meaningful contributions to important software projects. <a href="https://fosscu.org/" className="font-medium underline hover:no-underline">
+                    Join us
+                  </a> now.
+                </p>
+              </div>
+            </div>
+
+            <div className="flex">
+              <span className="mr-1 mt-1">
+                <FaQuestionCircle size={18} color="#0dff1c" />
+              </span>
+              <div className="mb-10">
+                <h3 className="items-center mb-4 text-lg font-medium text-white">
+                  How can I get involved in the open source community?
+                </h3>
+                <p className="text-gray-400">
+                  There are many ways to get involved, including contributing to projects, attending events, participating in online forums, and 
+                  joining communities on social media platforms.
+                </p>
+              </div>
+            </div>
+
+            <div className="flex">
+              <span className="mr-1 mt-1">
+                <FaQuestionCircle size={18} color="#0dff1c" />
+              </span>
+              <div className="mb-10">
+                <h3 className="items-center mb-4 text-lg font-medium text-white">
+                  What are some ways to contribute to open source projects?
+                </h3>
+                <p className="text-gray-400">
+                  Some ways to contribute include submitting bug reports, suggesting new features, creating documentation, 
+                  writing code, improving existing code, or helping with community management.
+                </p>
+              </div>
+            </div>
+
+            <div className="flex">
+              <span className="mr-1 mt-1">
+                <FaQuestionCircle size={18} color="#0dff1c" />
+              </span>
+              <div className="mb-10">
+                <h3 className="items-center mb-4 text-lg font-medium text-white">
+                  What is a pull request in open source contribution?
+                </h3>
+                <p className="text-gray-400">
+                  A pull request is a proposed change to the codebase that is submitted by a contributor for review and potential inclusion in the project.
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default Faq;
diff --git a/src/components/Footer.js b/src/components/Footer.js
new file mode 100644
index 0000000..5cfd0ec
--- /dev/null
+++ b/src/components/Footer.js
@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FaGithubSquare, FaInstagram, FaLinkedin, } from "react-icons/fa";
+import { RiTwitterFill } from "react-icons/ri";
+const Footer = () => {
+    return (_jsxs("div", { className: "max-w-[1240px] mx-auto py-16 px-4 grid lg:grid-cols-3 gap-8 text-gray-300", children: [_jsxs("div", { children: [_jsx("h1", { className: "w-full text-3xl font-bold text-[#00df9a]", children: "FOSSCU" }), _jsx("p", { className: "py-4", children: "Made with \uD83D\uDC9A and Open Source" }), _jsxs("div", { className: "flex justify-between md:w-[75%] my-6", children: [_jsx("a", { href: "https://www.instagram.com/fosscu/", className: "transition duration-300 ease-in-out hover:scale-125", target: "_blank", rel: "noopener noreferrer", children: _jsx(FaInstagram, { size: 30 }) }), _jsx("a", { href: "https://twitter.com/fosscuk", className: "transition duration-300 ease-in-out hover:scale-125", target: "_blank", rel: "noopener noreferrer", children: _jsx(RiTwitterFill, { size: 30 }) }), _jsx("a", { href: "https://github.com/FOSS-Community/", className: "transition duration-300 ease-in-out hover:scale-125", target: "_blank", rel: "noopener noreferrer", children: _jsx(FaGithubSquare, { size: 30 }) }), _jsx("a", { href: "https://linkedin.com/company/fosscu/", className: "transition duration-300 ease-in-out hover:scale-125", target: "_blank", rel: "noopener noreferrer", children: _jsx(FaLinkedin, { size: 30 }) })] })] }), _jsxs("div", { className: "lg:col-span-2 flex justify-between mt-6", children: [_jsxs("div", { children: [_jsx("h6", { className: "font-medium text-[#00df9a]", children: "Support" }), _jsxs("ul", { children: [_jsx("a", { href: "/building", className: "pb-2", children: _jsx("li", { className: "pt-2 text-sum hover:border-b hover:border-green-400", children: "Documentation" }) }), _jsx("a", { href: "/guide", className: "pb-2", children: _jsx("li", { className: "pt-2 w-max text-sum hover:border-b hover:border-green-400", children: "Guides" }) }), _jsx("a", { href: "https://www.kuma.fosscu.org/status/fosscu", className: "pb-2", children: _jsx("li", { className: "pt-2 w-max text-sum hover:border-b hover:border-green-400", children: "API Status" }) }), _jsx("a", { href: "/faq", className: "pb-2", children: _jsx("li", { className: "pt-2 w-max text-sum hover:border-b hover:border-green-400", children: "FAQ" }) })] })] }), _jsxs("div", { children: [_jsx("h6", { className: "font-medium text-[#00df9a]", children: "Organization" }), _jsxs("ul", { children: [_jsx("a", { href: "/about", className: "pb-2", children: _jsx("li", { className: "pt-2 w-max text-sum hover:border-b hover:border-green-400", children: "About" }) }), _jsx("a", { href: "https://github.com/FOSS-Community/blog-archive", className: "pb-2", target: "_blank", rel: "noopener noreferrer", children: _jsx("li", { className: "pt-2 w-max text-sum hover:border-b hover:border-green-400", children: "Blog" }) }), _jsx("a", { href: "https://dub.sh/fosscu-discord", className: "pb-2", target: "_blank", rel: "noopener noreferrer", children: _jsx("li", { className: "pt-2 w-max text-sum hover:border-b hover:border-green-400", children: "Join Us" }) }), _jsx("a", { href: "https://github.com/FOSS-Community/", className: "pb-2", target: "_blank", rel: "noopener noreferrer", children: _jsx("li", { className: "pt-2 w-max text-sum hover:border-b hover:border-green-400", children: "Contribute" }) })] })] }), _jsxs("div", { children: [_jsx("h6", { className: "font-medium text-[#00df9a]", children: "Handbook" }), _jsxs("ul", { children: [_jsx("a", { href: "https://docs.fosscu.org/Docs/values", className: "pb-2", target: "_blank", rel: "noopener noreferrer", children: _jsx("li", { className: "pt-2 w-max text-sum hover:border-b hover:border-green-400", children: "Core Values" }) }), _jsx("a", { href: "https://docs.fosscu.org/Docs/code-of-conduct", className: "pb-2", target: "_blank", rel: "noopener noreferrer", children: _jsx("li", { className: "pt-2 w-max text-sum hover:border-b hover:border-green-400", children: "Code of Conduct" }) }), _jsx("a", { href: "https://docs.fosscu.org/Docs/getting-started", className: "pb-2", target: "_blank", rel: "noopener noreferrer", children: _jsx("li", { className: "pt-2 w-max text-sum hover:border-b hover:border-green-400", children: "What is FOSS" }) }), _jsx("a", { href: "/building", className: "pb-2", children: _jsx("li", { className: "pt-2 w-max text-sum hover:border-b hover:border-green-400", children: "Terms" }) })] })] })] })] }));
+};
+export default Footer;
diff --git a/src/components/Footer.jsx b/src/components/Footer.tsx
similarity index 86%
rename from src/components/Footer.jsx
rename to src/components/Footer.tsx
index 74b4933..ef071bb 100644
--- a/src/components/Footer.jsx
+++ b/src/components/Footer.tsx
@@ -6,8 +6,7 @@ import {
 } from "react-icons/fa";
 import { RiTwitterFill } from "react-icons/ri";
 
-
-const Footer = () => {
+const Footer: React.FC = () => {
   return (
     <div className="max-w-[1240px] mx-auto py-16 px-4 grid lg:grid-cols-3 gap-8 text-gray-300">
       <div>
@@ -17,28 +16,32 @@ const Footer = () => {
           <a
             href="https://www.instagram.com/fosscu/"
             className="transition duration-300 ease-in-out hover:scale-125"
-            target="blank"
+            target="_blank"
+            rel="noopener noreferrer"
           >
             <FaInstagram size={30} />
           </a>
           <a
             href="https://twitter.com/fosscuk"
             className="transition duration-300 ease-in-out hover:scale-125"
-            target="blank"
+            target="_blank"
+            rel="noopener noreferrer"
           >
             <RiTwitterFill size={30} />
           </a>
           <a
             href="https://github.com/FOSS-Community/"
             className="transition duration-300 ease-in-out hover:scale-125"
-            target="blank"
+            target="_blank"
+            rel="noopener noreferrer"
           >
             <FaGithubSquare size={30} />
           </a>
           <a
             href="https://linkedin.com/company/fosscu/"
             className="transition duration-300 ease-in-out hover:scale-125"
-            target="blank"
+            target="_blank"
+            rel="noopener noreferrer"
           >
             <FaLinkedin size={30} />
           </a>
@@ -84,7 +87,8 @@ const Footer = () => {
             <a
               href="https://github.com/FOSS-Community/blog-archive"
               className="pb-2"
-              target="blank"
+              target="_blank"
+              rel="noopener noreferrer"
             >
               <li className="pt-2 w-max text-sum hover:border-b hover:border-green-400">
                 Blog
@@ -93,7 +97,8 @@ const Footer = () => {
             <a
               href="https://dub.sh/fosscu-discord"
               className="pb-2"
-              target="blank"
+              target="_blank"
+              rel="noopener noreferrer"
             >
               <li className="pt-2 w-max text-sum hover:border-b hover:border-green-400">
                 Join Us
@@ -102,7 +107,8 @@ const Footer = () => {
             <a
               href="https://github.com/FOSS-Community/"
               className="pb-2"
-              target="blank"
+              target="_blank"
+              rel="noopener noreferrer"
             >
               <li className="pt-2 w-max text-sum hover:border-b hover:border-green-400">
                 Contribute
@@ -116,7 +122,8 @@ const Footer = () => {
             <a
               href="https://docs.fosscu.org/Docs/values"
               className="pb-2"
-              target="blank"
+              target="_blank"
+              rel="noopener noreferrer"
             >
               <li className="pt-2 w-max text-sum hover:border-b hover:border-green-400">
                 Core Values
@@ -125,7 +132,8 @@ const Footer = () => {
             <a
               href="https://docs.fosscu.org/Docs/code-of-conduct"
               className="pb-2"
-              target="blank"
+              target="_blank"
+              rel="noopener noreferrer"
             >
               <li className="pt-2 w-max text-sum hover:border-b hover:border-green-400">
                 Code of Conduct
@@ -134,7 +142,8 @@ const Footer = () => {
             <a
               href="https://docs.fosscu.org/Docs/getting-started"
               className="pb-2"
-              target="blank"
+              target="_blank"
+              rel="noopener noreferrer"
             >
               <li className="pt-2 w-max text-sum hover:border-b hover:border-green-400">
                 What is FOSS
diff --git a/src/components/Frontend_files/Electron.js b/src/components/Frontend_files/Electron.js
new file mode 100644
index 0000000..7616060
--- /dev/null
+++ b/src/components/Frontend_files/Electron.js
@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+const Electron = (props) => {
+    const [check, setCheck] = useState(false);
+    return (_jsx("div", { children: _jsx("section", { className: "", children: _jsxs("div", { className: "py-8 px-4 mx-auto max-w-screen-xl lg:py-8 lg:px-6", children: [_jsxs("div", { className: "max-w-screen-xl sm:text-lg text-gray-100", children: [_jsx("h2", { className: "text-4xl mb-12 tracking-tight font-bold text-white", children: props.head }), _jsx("p", { className: "mb-4", children: props.para1 }), _jsx("p", { className: "mb-4", children: props.para2 }), _jsx("p", { className: "mb-4 font-medium", children: props.para3 }), _jsxs("a", { href: props.link ? props.link : props.videoLink, target: "_blank", rel: "noopener noreferrer", className: "inline-flex items-center font-medium hover:underline text-sky-400", children: ["Learn more", _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", strokeWidth: "1.5", stroke: "currentColor", className: "w-6 h-5", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M8.25 4.5l7.5 7.5-7.5 7.5" }) })] }), _jsx("br", {}), _jsx("br", {}), props.videoLink && (_jsx("button", { onClick: () => setCheck((prev) => !prev), className: "bg-[green] hover:bg-[#00df9a] duration-200 text-white font-bold py-2 px-4 rounded", children: check ? "Hide video" : "Load video" }))] }), props.videoLink && check && (_jsx("div", { className: "aspect-video flex flex-col items-start mt-6", children: _jsx("iframe", { className: "rounded-lg w-full h-full", src: props.videoLink, title: "YouTube video player", frameBorder: "0", allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share", allowFullScreen: true, loading: "lazy" }) }))] }) }) }));
+};
+export default Electron;
diff --git a/src/components/Frontend_files/Electron.jsx b/src/components/Frontend_files/Electron.jsx
deleted file mode 100644
index db50530..0000000
--- a/src/components/Frontend_files/Electron.jsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import React, { useState } from "react";
-
-const Electron = (props) => {
-  const [check,setcheck]=useState(false);
-    return (
-        <div>
-            <div >
-                <section className="">
-                    <div className="py-8 px-4 mx-auto max-w-screen-xl lg:py-8 lg:px-6">
-                        <div className="max-w-screen-xl  sm:text-lg text-gray-100">
-                            <h2 className=" text-4xl mb-12 tracking-tight font-bold text-white">{props.head}</h2>
-                            <p className="mb-4 ">{props.para1}</p>
-                            <p className="mb-4 ">{props.para2}</p>
-                            <p className="mb-4 font-medium">{props.para3}</p>
-                            <a href={props.link ? props.link : props.videoLink} target="_blank"
-                                className="inline-flex items-center font-medium hover:underline text-sky-400">
-                                Learn more
-                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-5">
-                                <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
-                                </svg>
-                            </a>
-                            <br></br>
-                            <br></br>
-                            {props.videoLink ?(<>
-                            <button onClick={()=>setcheck(prev=>!prev)} className="bg-[green] hover:bg-[#00df9a] duration-200 text-white font-bold py-2 px-4 rounded">{check ? "Hide video" : "Load video"}</button></>):null}
-                        </div>
-                        {props.videoLink&&check ?
-                            (<div className="aspect-video flex flex-col items-start mt-6">
-                                <iframe className=" rounded-lg w-full h-full " target="_blank" src={props.videoLink}
-                                    title="YouTube video player" frameborder="0"
-                                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-                                    allowfullscreen loading=""></iframe>
-                            </div>)
-                            :
-                            null
-                        }
-                    </div>
-                </section>
-            </div>
-        </div>
-    )
-}
-
-export default Electron;
\ No newline at end of file
diff --git a/src/components/Frontend_files/Electron.tsx b/src/components/Frontend_files/Electron.tsx
new file mode 100644
index 0000000..19d0476
--- /dev/null
+++ b/src/components/Frontend_files/Electron.tsx
@@ -0,0 +1,80 @@
+import React, { useState } from "react";
+
+// Define the type for the props
+interface ElectronProps {
+  head: string;
+  para1: string;
+  para2: string;
+  para3: string;
+  link?: string;
+  videoLink?: string;
+  image?: string;
+}
+
+const Electron: React.FC<ElectronProps> = (props) => {
+  const [check, setCheck] = useState<boolean>(false);
+
+  return (
+    <div>
+      <section className="">
+        <div className="py-8 px-4 mx-auto max-w-screen-xl lg:py-8 lg:px-6">
+          <div className="max-w-screen-xl sm:text-lg text-gray-100">
+            <h2 className="text-4xl mb-12 tracking-tight font-bold text-white">
+              {props.head}
+            </h2>
+            <p className="mb-4">{props.para1}</p>
+            <p className="mb-4">{props.para2}</p>
+            <p className="mb-4 font-medium">{props.para3}</p>
+            <a
+              href={props.link ? props.link : props.videoLink}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="inline-flex items-center font-medium hover:underline text-sky-400"
+            >
+              Learn more
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+                strokeWidth="1.5"
+                stroke="currentColor"
+                className="w-6 h-5"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  d="M8.25 4.5l7.5 7.5-7.5 7.5"
+                />
+              </svg>
+            </a>
+            <br />
+            <br />
+            {props.videoLink && (
+              <button
+                onClick={() => setCheck((prev) => !prev)}
+                className="bg-[green] hover:bg-[#00df9a] duration-200 text-white font-bold py-2 px-4 rounded"
+              >
+                {check ? "Hide video" : "Load video"}
+              </button>
+            )}
+          </div>
+          {props.videoLink && check && (
+            <div className="aspect-video flex flex-col items-start mt-6">
+              <iframe
+                className="rounded-lg w-full h-full"
+                src={props.videoLink}
+                title="YouTube video player"
+                frameBorder="0"
+                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                allowFullScreen
+                loading="lazy"
+              ></iframe>
+            </div>
+          )}
+        </div>
+      </section>
+    </div>
+  );
+};
+
+export default Electron;
diff --git a/src/components/Frontend_files/HTML_CSS.js b/src/components/Frontend_files/HTML_CSS.js
new file mode 100644
index 0000000..f983259
--- /dev/null
+++ b/src/components/Frontend_files/HTML_CSS.js
@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+const HTML_CSS = (props) => {
+    const [check, setCheck] = useState(false);
+    return (_jsx("div", { children: _jsx("section", { className: "", children: _jsxs("div", { className: "py-8 px-4 mx-auto max-w-screen-xl lg:py-8 lg:px-6", children: [_jsxs("div", { className: "max-w-screen-xl sm:text-lg text-gray-100", children: [_jsx("h2", { className: "text-4xl mb-12 tracking-tight font-bold text-white", children: props.head }), _jsx("p", { className: "mb-4", children: props.para1 }), _jsx("p", { className: "mb-4", children: props.para2 }), _jsx("p", { className: "mb-4 font-medium", children: props.para3 }), _jsxs("a", { href: props.link ? props.link : props.videoLink, target: "_blank", rel: "noopener noreferrer", className: "inline-flex items-center font-medium hover:underline text-sky-400", children: ["Learn more", _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", strokeWidth: "1.5", stroke: "currentColor", className: "w-6 h-5", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M8.25 4.5l7.5 7.5-7.5 7.5" }) })] }), _jsx("br", {}), _jsx("br", {}), props.videoLink && (_jsx("button", { onClick: () => setCheck((prev) => !prev), className: "bg-[green] hover:bg-[#00df9a] duration-[200ms] text-white font-bold py-2 px-4 rounded", children: check ? "Hide video" : "Load video" }))] }), check && props.videoLink && (_jsx("div", { className: "aspect-video flex flex-col items-start mt-6", children: _jsx("iframe", { className: "rounded-lg w-full h-full", src: props.videoLink, title: "YouTube video player", frameBorder: "0", allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share", allowFullScreen: true, loading: "lazy" }) }))] }) }) }));
+};
+export default HTML_CSS;
diff --git a/src/components/Frontend_files/HTML_CSS.jsx b/src/components/Frontend_files/HTML_CSS.jsx
deleted file mode 100644
index d97621b..0000000
--- a/src/components/Frontend_files/HTML_CSS.jsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import React, { useState } from "react";
-
-const HTML_CSS = (props) => {
-  const [check,setcheck]=useState(false);
-  
-    return (
-        <div>
-            <div >
-                <section className="">
-                    <div className="py-8 px-4 mx-auto max-w-screen-xl lg:py-8 lg:px-6">
-                        <div className="max-w-screen-xl  sm:text-lg text-gray-100">
-                            <h2 className=" text-4xl mb-12 tracking-tight font-bold text-white">{props.head}</h2>
-                            <p className="mb-4 ">{props.para1}</p>
-                            <p className="mb-4 ">{props.para2}</p>
-                            <p className="mb-4 font-medium">{props.para3}</p>
-                            <a href={props.link ? props.link : props.videoLink} target="_blank"
-                                className="inline-flex items-center font-medium hover:underline text-sky-400">
-                                Learn more
-                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-5">
-                                <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
-                                </svg>
-                            </a>
-                            <br></br>
-                            <br></br>
-                            {}
-                            {props.videoLink ?(<>
-                            <button onClick={()=>setcheck(prev=>!prev)} className="bg-[green] hover:bg-[#00df9a] duration-[200ms] text-white font-bold py-2 px-4 rounded">{check ? "Hide video" : "Load video"}</button></>):null}
-                        </div>
-                        {check&&(
-                            (<div className="aspect-video flex flex-col items-start mt-6">
-                                <iframe className=" rounded-lg w-full h-full " target="_blank" src={props.videoLink}
-                                    title="YouTube video player" frameborder="0"
-                                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-                                    allowfullscreen loading=""></iframe>
-                            </div>)
-                        )}
-                    </div>
-                </section>
-            </div>
-        </div>
-    )
-}
-
-export default HTML_CSS;
\ No newline at end of file
diff --git a/src/components/Frontend_files/HTML_CSS.tsx b/src/components/Frontend_files/HTML_CSS.tsx
new file mode 100644
index 0000000..3c959fd
--- /dev/null
+++ b/src/components/Frontend_files/HTML_CSS.tsx
@@ -0,0 +1,79 @@
+import React, { useState } from "react";
+
+// Define the type for the props
+interface HTML_CSSProps {
+  head: string;
+  para1: string;
+  para2: string;
+  para3: string;
+  link?: string;
+  videoLink?: string;
+}
+
+const HTML_CSS: React.FC<HTML_CSSProps> = (props) => {
+  const [check, setCheck] = useState<boolean>(false);
+
+  return (
+    <div>
+      <section className="">
+        <div className="py-8 px-4 mx-auto max-w-screen-xl lg:py-8 lg:px-6">
+          <div className="max-w-screen-xl sm:text-lg text-gray-100">
+            <h2 className="text-4xl mb-12 tracking-tight font-bold text-white">
+              {props.head}
+            </h2>
+            <p className="mb-4">{props.para1}</p>
+            <p className="mb-4">{props.para2}</p>
+            <p className="mb-4 font-medium">{props.para3}</p>
+            <a
+              href={props.link ? props.link : props.videoLink}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="inline-flex items-center font-medium hover:underline text-sky-400"
+            >
+              Learn more
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+                strokeWidth="1.5"
+                stroke="currentColor"
+                className="w-6 h-5"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  d="M8.25 4.5l7.5 7.5-7.5 7.5"
+                />
+              </svg>
+            </a>
+            <br />
+            <br />
+            {props.videoLink && (
+              <button
+                onClick={() => setCheck((prev) => !prev)}
+                className="bg-[green] hover:bg-[#00df9a] duration-[200ms] text-white font-bold py-2 px-4 rounded"
+              >
+                {check ? "Hide video" : "Load video"}
+              </button>
+            )}
+          </div>
+          {check && props.videoLink && (
+            <div className="aspect-video flex flex-col items-start mt-6">
+              <iframe
+                className="rounded-lg w-full h-full"
+                src={props.videoLink}
+                title="YouTube video player"
+                frameBorder="0"
+                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                allowFullScreen
+                loading="lazy"
+              ></iframe>
+            </div>
+          )}
+        </div>
+      </section>
+    </div>
+  );
+};
+
+export default HTML_CSS;
diff --git a/src/components/Frontend_files/Javascript.js b/src/components/Frontend_files/Javascript.js
new file mode 100644
index 0000000..332be88
--- /dev/null
+++ b/src/components/Frontend_files/Javascript.js
@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+const Javascript = (props) => {
+    const [check, setCheck] = useState(false);
+    return (_jsx("div", { children: _jsx("section", { className: "", children: _jsxs("div", { className: "py-8 px-4 mx-auto max-w-screen-xl lg:py-8 lg:px-6", children: [_jsxs("div", { className: "max-w-screen-xl sm:text-lg text-gray-100", children: [_jsx("h2", { className: "text-4xl mb-12 tracking-tight font-bold text-white", children: props.head }), _jsx("p", { className: "mb-4", children: props.para1 }), _jsx("p", { className: "mb-4", children: props.para2 }), _jsx("p", { className: "mb-4 font-medium", children: props.para3 }), _jsxs("a", { href: props.link ? props.link : props.videoLink, target: "_blank", rel: "noopener noreferrer", className: "inline-flex items-center font-medium hover:underline text-sky-400", children: ["Learn more", _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", strokeWidth: "1.5", stroke: "currentColor", className: "w-6 h-5", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M8.25 4.5l7.5 7.5-7.5 7.5" }) })] }), _jsx("br", {}), _jsx("br", {}), props.videoLink && (_jsx("button", { onClick: () => setCheck((prev) => !prev), className: "bg-[green] hover:bg-[#00df9a] duration-200 text-white font-bold py-2 px-4 rounded", children: check ? "Hide video" : "Load video" }))] }), check && props.videoLink && (_jsx("div", { className: "aspect-video flex flex-col items-start mt-6", children: _jsx("iframe", { className: "rounded-lg w-full h-full", src: props.videoLink, title: "YouTube video player", frameBorder: "0", allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share", allowFullScreen: true, loading: "lazy" }) }))] }) }) }));
+};
+export default Javascript;
diff --git a/src/components/Frontend_files/Javascript.jsx b/src/components/Frontend_files/Javascript.jsx
deleted file mode 100644
index 6642b32..0000000
--- a/src/components/Frontend_files/Javascript.jsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import React, { useState } from "react";
-
-const Javascript = (props) => {
-  const [check,setcheck]=useState(false);
-
-    return (
-        <div>
-            <div >
-                <section className="">
-                    <div className="py-8 px-4 mx-auto max-w-screen-xl lg:py-8 lg:px-6">
-                        <div className="max-w-screen-xl  sm:text-lg text-gray-100">
-                            <h2 className=" text-4xl mb-12 tracking-tight font-bold text-white">{props.head}</h2>
-                            <p className="mb-4 ">{props.para1}</p>
-                            <p className="mb-4 ">{props.para2}</p>
-                            <p className="mb-4 font-medium">{props.para3}</p>
-                            <a href={props.link ? props.link : props.videoLink} target="_blank"
-                                className="inline-flex items-center font-medium hover:underline text-sky-400">
-                                Learn more
-                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-5">
-                                <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
-                                </svg>
-                            </a>
-                            <br></br>   
-                            <br></br>
-                            {props.videoLink ?(<>
-                            <button onClick={()=>setcheck(prev=>!prev)} className="bg-[green] hover:bg-[#00df9a] duration-200 text-white font-bold py-2 px-4 rounded">{check ? "Hide video" : "Load video"}</button> </>):null}
-                        </div>
-                        {check&&(
-                            (<div className="aspect-video flex flex-col items-start mt-6">
-                                <iframe className=" rounded-lg w-full h-full " target="_blank" src={props.videoLink}
-                                    title="YouTube video player" frameborder="0"
-                                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-                                    allowfullscreen loading=""></iframe>
-                            </div>)
-                            )}
-                            
-                    </div>
-                </section>
-            </div>
-        </div>
-    )
-}
-
-export default Javascript;
\ No newline at end of file
diff --git a/src/components/Frontend_files/Javascript.tsx b/src/components/Frontend_files/Javascript.tsx
new file mode 100644
index 0000000..397ce23
--- /dev/null
+++ b/src/components/Frontend_files/Javascript.tsx
@@ -0,0 +1,79 @@
+import React, { useState } from "react";
+
+// Define the type for the props
+interface JavascriptProps {
+  head: string;
+  para1: string;
+  para2: string;
+  para3: string;
+  link?: string;
+  videoLink?: string;
+}
+
+const Javascript: React.FC<JavascriptProps> = (props) => {
+  const [check, setCheck] = useState<boolean>(false);
+
+  return (
+    <div>
+      <section className="">
+        <div className="py-8 px-4 mx-auto max-w-screen-xl lg:py-8 lg:px-6">
+          <div className="max-w-screen-xl sm:text-lg text-gray-100">
+            <h2 className="text-4xl mb-12 tracking-tight font-bold text-white">
+              {props.head}
+            </h2>
+            <p className="mb-4">{props.para1}</p>
+            <p className="mb-4">{props.para2}</p>
+            <p className="mb-4 font-medium">{props.para3}</p>
+            <a
+              href={props.link ? props.link : props.videoLink}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="inline-flex items-center font-medium hover:underline text-sky-400"
+            >
+              Learn more
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+                strokeWidth="1.5"
+                stroke="currentColor"
+                className="w-6 h-5"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  d="M8.25 4.5l7.5 7.5-7.5 7.5"
+                />
+              </svg>
+            </a>
+            <br />
+            <br />
+            {props.videoLink && (
+              <button
+                onClick={() => setCheck((prev) => !prev)}
+                className="bg-[green] hover:bg-[#00df9a] duration-200 text-white font-bold py-2 px-4 rounded"
+              >
+                {check ? "Hide video" : "Load video"}
+              </button>
+            )}
+          </div>
+          {check && props.videoLink && (
+            <div className="aspect-video flex flex-col items-start mt-6">
+              <iframe
+                className="rounded-lg w-full h-full"
+                src={props.videoLink}
+                title="YouTube video player"
+                frameBorder="0"
+                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                allowFullScreen
+                loading="lazy"
+              ></iframe>
+            </div>
+          )}
+        </div>
+      </section>
+    </div>
+  );
+};
+
+export default Javascript;
diff --git a/src/components/Frontend_files/Next_js.js b/src/components/Frontend_files/Next_js.js
new file mode 100644
index 0000000..5f75e7f
--- /dev/null
+++ b/src/components/Frontend_files/Next_js.js
@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+const NextJs = (props) => {
+    const [check, setCheck] = useState(false);
+    return (_jsx("div", { children: _jsx("section", { className: "", children: _jsxs("div", { className: "py-8 px-4 mx-auto max-w-screen-xl lg:py-8 lg:px-6", children: [_jsxs("div", { className: "max-w-screen-xl sm:text-lg text-gray-100", children: [_jsx("h2", { className: "text-4xl mb-12 tracking-tight font-bold text-white", children: props.head }), _jsx("p", { className: "mb-4", children: props.para1 }), _jsx("p", { className: "mb-4", children: props.para2 }), _jsx("p", { className: "mb-4 font-medium", children: props.para3 }), _jsxs("a", { href: props.link ? props.link : props.videoLink, target: "_blank", rel: "noopener noreferrer", className: "inline-flex items-center font-medium hover:underline text-sky-400", children: ["Learn more", _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", strokeWidth: "1.5", stroke: "currentColor", className: "w-6 h-5", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M8.25 4.5l7.5 7.5-7.5 7.5" }) })] }), _jsx("br", {}), _jsx("br", {}), props.videoLink && (_jsx("button", { onClick: () => setCheck((prev) => !prev), className: "bg-[green] hover:bg-[#00df9a] duration-200 text-white font-bold py-2 px-4 rounded", children: check ? "Hide video" : "Load video" }))] }), props.videoLink && check && (_jsx("div", { className: "aspect-video flex flex-col items-start mt-6", children: _jsx("iframe", { className: "rounded-lg w-full h-full", src: props.videoLink, title: "YouTube video player", frameBorder: "0", allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share", allowFullScreen: true, loading: "lazy" }) }))] }) }) }));
+};
+export default NextJs;
diff --git a/src/components/Frontend_files/Next_js.jsx b/src/components/Frontend_files/Next_js.jsx
deleted file mode 100644
index f399a5d..0000000
--- a/src/components/Frontend_files/Next_js.jsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import React, { useState } from "react";
-
-const Next_js = (props) => {
-  const [check,setcheck]=useState(false);
-    return (
-        <div>
-            <div >
-                <section className="">
-                    <div className="py-8 px-4 mx-auto max-w-screen-xl lg:py-8 lg:px-6">
-                        <div className="max-w-screen-xl  sm:text-lg text-gray-100">
-                            <h2 className=" text-4xl mb-12 tracking-tight font-bold text-white">{props.head}</h2>
-                            <p className="mb-4 ">{props.para1}</p>
-                            <p className="mb-4 ">{props.para2}</p>
-                            <p className="mb-4 font-medium">{props.para3}</p>
-                            <a href={props.link ? props.link : props.videoLink} target="_blank"
-                                className="inline-flex items-center font-medium hover:underline text-sky-400">
-                                Learn more
-                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-5">
-                                <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
-                                </svg>
-                            </a>
-                            <br></br>
-                            <br></br>
-                            {props.videoLink ?(<>
-                            <button onClick={()=>setcheck(prev=>!prev)} className="bg-[green] hover:bg-[#00df9a] duration-200 text-white font-bold py-2 px-4 rounded">{check ? "Hide video" : "Load video"}</button></>):null}
-                        </div>
-                        {props.videoLink&&check ?
-                            (<div className="aspect-video flex flex-col items-start mt-6">
-                                <iframe className=" rounded-lg w-full h-full " target="_blank" src={props.videoLink}
-                                    title="YouTube video player" frameborder="0"
-                                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-                                    allowfullscreen loading=""></iframe>
-                            </div>)
-                            :
-                            null
-                        }
-                    </div>
-                </section>
-            </div>
-        </div>
-    )
-}
-
-export default Next_js;
\ No newline at end of file
diff --git a/src/components/Frontend_files/Next_js.tsx b/src/components/Frontend_files/Next_js.tsx
new file mode 100644
index 0000000..796fce1
--- /dev/null
+++ b/src/components/Frontend_files/Next_js.tsx
@@ -0,0 +1,79 @@
+import React, { useState } from "react";
+
+// Define the type for the props
+interface NextJsProps {
+  head: string;
+  para1: string;
+  para2: string;
+  para3: string;
+  link?: string;
+  videoLink?: string;
+}
+
+const NextJs: React.FC<NextJsProps> = (props) => {
+  const [check, setCheck] = useState<boolean>(false);
+
+  return (
+    <div>
+      <section className="">
+        <div className="py-8 px-4 mx-auto max-w-screen-xl lg:py-8 lg:px-6">
+          <div className="max-w-screen-xl sm:text-lg text-gray-100">
+            <h2 className="text-4xl mb-12 tracking-tight font-bold text-white">
+              {props.head}
+            </h2>
+            <p className="mb-4">{props.para1}</p>
+            <p className="mb-4">{props.para2}</p>
+            <p className="mb-4 font-medium">{props.para3}</p>
+            <a
+              href={props.link ? props.link : props.videoLink}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="inline-flex items-center font-medium hover:underline text-sky-400"
+            >
+              Learn more
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+                strokeWidth="1.5"
+                stroke="currentColor"
+                className="w-6 h-5"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  d="M8.25 4.5l7.5 7.5-7.5 7.5"
+                />
+              </svg>
+            </a>
+            <br />
+            <br />
+            {props.videoLink && (
+              <button
+                onClick={() => setCheck((prev) => !prev)}
+                className="bg-[green] hover:bg-[#00df9a] duration-200 text-white font-bold py-2 px-4 rounded"
+              >
+                {check ? "Hide video" : "Load video"}
+              </button>
+            )}
+          </div>
+          {props.videoLink && check && (
+            <div className="aspect-video flex flex-col items-start mt-6">
+              <iframe
+                className="rounded-lg w-full h-full"
+                src={props.videoLink}
+                title="YouTube video player"
+                frameBorder="0"
+                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                allowFullScreen
+                loading="lazy"
+              ></iframe>
+            </div>
+          )}
+        </div>
+      </section>
+    </div>
+  );
+};
+
+export default NextJs;
diff --git a/src/components/Frontend_files/Reactnative.js b/src/components/Frontend_files/Reactnative.js
new file mode 100644
index 0000000..145da3b
--- /dev/null
+++ b/src/components/Frontend_files/Reactnative.js
@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+const ReactNative = (props) => {
+    const [check, setCheck] = useState(false);
+    return (_jsx("div", { children: _jsx("section", { className: "", children: _jsxs("div", { className: "py-8 px-4 mx-auto max-w-screen-xl lg:py-8 lg:px-6", children: [_jsxs("div", { className: "max-w-screen-xl sm:text-lg text-gray-100", children: [_jsx("h2", { className: "text-4xl mb-12 tracking-tight font-bold text-white", children: props.head }), _jsx("p", { className: "mb-4", children: props.para1 }), _jsx("p", { className: "mb-4", children: props.para2 }), _jsx("p", { className: "mb-4 font-medium", children: props.para3 }), _jsxs("a", { href: props.link ? props.link : props.videoLink, target: "_blank", rel: "noopener noreferrer", className: "inline-flex items-center font-medium hover:underline text-sky-400", children: ["Learn more", _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", strokeWidth: "1.5", stroke: "currentColor", className: "w-6 h-5", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M8.25 4.5l7.5 7.5-7.5 7.5" }) })] }), _jsx("br", {}), _jsx("br", {}), props.videoLink && (_jsx("button", { onClick: () => setCheck((prev) => !prev), className: "bg-[green] hover:bg-[#00df9a] duration-200 text-white font-bold py-2 px-4 rounded", children: check ? "Hide video" : "Load video" }))] }), props.videoLink && check && (_jsx("div", { className: "aspect-video flex flex-col items-start mt-6", children: _jsx("iframe", { className: "rounded-lg w-full h-full", src: props.videoLink, title: "YouTube video player", frameBorder: "0", allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share", allowFullScreen: true, loading: "lazy" }) }))] }) }) }));
+};
+export default ReactNative;
diff --git a/src/components/Frontend_files/Reactnative.jsx b/src/components/Frontend_files/Reactnative.jsx
deleted file mode 100644
index fec7929..0000000
--- a/src/components/Frontend_files/Reactnative.jsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import React, { useState } from "react";
-
-const Reactnative = (props) => {
-  const [check,setcheck]=useState(false);
-    return (
-        <div>
-            <div >
-                <section className="">
-                    <div className="py-8 px-4 mx-auto max-w-screen-xl lg:py-8 lg:px-6">
-                        <div className="max-w-screen-xl  sm:text-lg text-gray-100">
-                            <h2 className=" text-4xl mb-12 tracking-tight font-bold text-white">{props.head}</h2>
-                            <p className="mb-4 ">{props.para1}</p>
-                            <p className="mb-4 ">{props.para2}</p>
-                            <p className="mb-4 font-medium">{props.para3}</p>
-                            <a href={props.link ? props.link : props.videoLink} target="_blank"
-                                className="inline-flex items-center font-medium hover:underline text-sky-400">
-                                Learn more
-                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-5">
-                                <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
-                                </svg>
-                            </a>
-                            <br></br>
-                            <br></br>
-                            {props.videoLink ?(<>
-                            <button onClick={()=>setcheck(prev=>!prev)} className="bg-[green] hover:bg-[#00df9a] duration-200 text-white font-bold py-2 px-4 rounded">{check ? "Hide video" : "Load video"}</button></>):null}
-                        </div>
-                        {props.videoLink&&check ?
-                            (<div className="aspect-video flex flex-col items-start mt-6">
-                                <iframe className=" rounded-lg w-full h-full " target="_blank" src={props.videoLink}
-                                    title="YouTube video player" frameborder="0"
-                                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-                                    allowfullscreen loading=""></iframe>
-                            </div>)
-                            :
-                            null
-                        }
-                    </div>
-                </section>
-            </div>
-        </div>
-    )
-}
-
-export default Reactnative;
\ No newline at end of file
diff --git a/src/components/Frontend_files/Reactnative.tsx b/src/components/Frontend_files/Reactnative.tsx
new file mode 100644
index 0000000..78cd780
--- /dev/null
+++ b/src/components/Frontend_files/Reactnative.tsx
@@ -0,0 +1,79 @@
+import React, { useState } from "react";
+
+// Define the type for the props
+interface ReactNativeProps {
+  head: string;
+  para1: string;
+  para2: string;
+  para3: string;
+  link?: string;
+  videoLink?: string;
+}
+
+const ReactNative: React.FC<ReactNativeProps> = (props) => {
+  const [check, setCheck] = useState<boolean>(false);
+
+  return (
+    <div>
+      <section className="">
+        <div className="py-8 px-4 mx-auto max-w-screen-xl lg:py-8 lg:px-6">
+          <div className="max-w-screen-xl sm:text-lg text-gray-100">
+            <h2 className="text-4xl mb-12 tracking-tight font-bold text-white">
+              {props.head}
+            </h2>
+            <p className="mb-4">{props.para1}</p>
+            <p className="mb-4">{props.para2}</p>
+            <p className="mb-4 font-medium">{props.para3}</p>
+            <a
+              href={props.link ? props.link : props.videoLink}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="inline-flex items-center font-medium hover:underline text-sky-400"
+            >
+              Learn more
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+                strokeWidth="1.5"
+                stroke="currentColor"
+                className="w-6 h-5"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  d="M8.25 4.5l7.5 7.5-7.5 7.5"
+                />
+              </svg>
+            </a>
+            <br />
+            <br />
+            {props.videoLink && (
+              <button
+                onClick={() => setCheck((prev) => !prev)}
+                className="bg-[green] hover:bg-[#00df9a] duration-200 text-white font-bold py-2 px-4 rounded"
+              >
+                {check ? "Hide video" : "Load video"}
+              </button>
+            )}
+          </div>
+          {props.videoLink && check && (
+            <div className="aspect-video flex flex-col items-start mt-6">
+              <iframe
+                className="rounded-lg w-full h-full"
+                src={props.videoLink}
+                title="YouTube video player"
+                frameBorder="0"
+                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                allowFullScreen
+                loading="lazy"
+              ></iframe>
+            </div>
+          )}
+        </div>
+      </section>
+    </div>
+  );
+};
+
+export default ReactNative;
diff --git a/src/components/Frontend_files/Reactt.js b/src/components/Frontend_files/Reactt.js
new file mode 100644
index 0000000..c59634d
--- /dev/null
+++ b/src/components/Frontend_files/Reactt.js
@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+const Reactt = (props) => {
+    const [check, setCheck] = useState(false);
+    return (_jsx("div", { children: _jsx("section", { className: "", children: _jsxs("div", { className: "py-8 px-4 mx-auto max-w-screen-xl lg:py-8 lg:px-6", children: [_jsxs("div", { className: "max-w-screen-xl sm:text-lg text-gray-100", children: [_jsx("h2", { className: "text-4xl mb-12 tracking-tight font-bold text-white", children: props.head }), _jsx("p", { className: "mb-4", children: props.para1 }), _jsx("p", { className: "mb-4", children: props.para2 }), _jsx("p", { className: "mb-4 font-medium", children: props.para3 }), _jsxs("a", { href: props.link ? props.link : props.videoLink, target: "_blank", rel: "noopener noreferrer", className: "inline-flex items-center font-medium hover:underline text-sky-400", children: ["Learn more", _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", strokeWidth: "1.5", stroke: "currentColor", className: "w-6 h-5", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M8.25 4.5l7.5 7.5-7.5 7.5" }) })] }), _jsx("br", {}), _jsx("br", {}), props.videoLink && (_jsx("button", { onClick: () => setCheck((prev) => !prev), className: "bg-[green] hover:bg-[#00df9a] duration-200 text-white font-bold py-2 px-4 rounded", children: check ? "Hide video" : "Load video" }))] }), props.videoLink && check && (_jsx("div", { className: "aspect-video flex flex-col items-start mt-6", children: _jsx("iframe", { className: "rounded-lg w-full h-full", src: props.videoLink, title: "YouTube video player", frameBorder: "0", allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share", allowFullScreen: true, loading: "lazy" }) }))] }) }) }));
+};
+export default Reactt;
diff --git a/src/components/Frontend_files/Reactt.jsx b/src/components/Frontend_files/Reactt.jsx
deleted file mode 100644
index 200781b..0000000
--- a/src/components/Frontend_files/Reactt.jsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import React, { useState } from "react";
-
-const Reactt = (props) => {
-  const [check,setcheck]=useState(false);
-    return (
-        <div>
-            <div >
-                <section className="">
-                    <div className="py-8 px-4 mx-auto max-w-screen-xl lg:py-8 lg:px-6">
-                        <div className="max-w-screen-xl  sm:text-lg text-gray-100">
-                            <h2 className=" text-4xl mb-12 tracking-tight font-bold text-white">{props.head}</h2>
-                            <p className="mb-4 ">{props.para1}</p>
-                            <p className="mb-4 ">{props.para2}</p>
-                            <p className="mb-4 font-medium">{props.para3}</p>
-                            <a href={props.link ? props.link : props.videoLink} target="_blank"
-                                className="inline-flex items-center font-medium hover:underline text-sky-400">
-                                Learn more
-                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-5">
-                                <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
-                                </svg>
-                            </a>
-                            <br></br>
-                            <br></br>
-                            {props.videoLink ?(<>
-                            <button onClick={()=>setcheck(prev=>!prev)} className="bg-[green] hover:bg-[#00df9a] duration-200 text-white font-bold py-2 px-4 rounded">{check ? "Hide video" : "Load video"}</button></>):null}
-                        </div>
-                        {props.videoLink&&check ?
-                            (<div className="aspect-video flex flex-col items-start mt-6">
-                                <iframe className=" rounded-lg w-full h-full " target="_blank" src={props.videoLink}
-                                    title="YouTube video player" frameborder="0"
-                                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-                                    allowfullscreen loading=""></iframe>
-                            </div>)
-                            :
-                            null
-                        }
-                    </div>
-                </section>
-            </div>
-        </div>
-    )
-}
-
-export default Reactt;
\ No newline at end of file
diff --git a/src/components/Frontend_files/Reactt.tsx b/src/components/Frontend_files/Reactt.tsx
new file mode 100644
index 0000000..550d0f6
--- /dev/null
+++ b/src/components/Frontend_files/Reactt.tsx
@@ -0,0 +1,79 @@
+import React, { useState } from "react";
+
+// Define the type for the props
+interface ReacttProps {
+  head: string;
+  para1: string;
+  para2: string;
+  para3: string;
+  link?: string;
+  videoLink?: string;
+}
+
+const Reactt: React.FC<ReacttProps> = (props) => {
+  const [check, setCheck] = useState<boolean>(false);
+
+  return (
+    <div>
+      <section className="">
+        <div className="py-8 px-4 mx-auto max-w-screen-xl lg:py-8 lg:px-6">
+          <div className="max-w-screen-xl sm:text-lg text-gray-100">
+            <h2 className="text-4xl mb-12 tracking-tight font-bold text-white">
+              {props.head}
+            </h2>
+            <p className="mb-4">{props.para1}</p>
+            <p className="mb-4">{props.para2}</p>
+            <p className="mb-4 font-medium">{props.para3}</p>
+            <a
+              href={props.link ? props.link : props.videoLink}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="inline-flex items-center font-medium hover:underline text-sky-400"
+            >
+              Learn more
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+                strokeWidth="1.5"
+                stroke="currentColor"
+                className="w-6 h-5"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  d="M8.25 4.5l7.5 7.5-7.5 7.5"
+                />
+              </svg>
+            </a>
+            <br />
+            <br />
+            {props.videoLink && (
+              <button
+                onClick={() => setCheck((prev) => !prev)}
+                className="bg-[green] hover:bg-[#00df9a] duration-200 text-white font-bold py-2 px-4 rounded"
+              >
+                {check ? "Hide video" : "Load video"}
+              </button>
+            )}
+          </div>
+          {props.videoLink && check && (
+            <div className="aspect-video flex flex-col items-start mt-6">
+              <iframe
+                className="rounded-lg w-full h-full"
+                src={props.videoLink}
+                title="YouTube video player"
+                frameBorder="0"
+                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                allowFullScreen
+                loading="lazy"
+              ></iframe>
+            </div>
+          )}
+        </div>
+      </section>
+    </div>
+  );
+};
+
+export default Reactt;
diff --git a/src/components/Frontend_files/Tailwindd.js b/src/components/Frontend_files/Tailwindd.js
new file mode 100644
index 0000000..382c622
--- /dev/null
+++ b/src/components/Frontend_files/Tailwindd.js
@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+const Tailwindd = (props) => {
+    const [check, setCheck] = useState(false);
+    return (_jsx("div", { children: _jsx("section", { className: "", children: _jsxs("div", { className: "py-8 px-4 mx-auto max-w-screen-xl lg:py-8 lg:px-6", children: [_jsxs("div", { className: "max-w-screen-xl sm:text-lg text-gray-100", children: [_jsx("h2", { className: "text-4xl mb-12 tracking-tight font-bold text-white", children: props.head }), _jsx("p", { className: "mb-4", children: props.para1 }), _jsx("p", { className: "mb-4", children: props.para2 }), _jsx("p", { className: "mb-4 font-medium", children: props.para3 }), _jsxs("a", { href: props.link ? props.link : props.videoLink, target: "_blank", rel: "noopener noreferrer", className: "inline-flex items-center font-medium hover:underline text-sky-400", children: ["Learn more", _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", strokeWidth: "1.5", stroke: "currentColor", className: "w-6 h-5", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M8.25 4.5l7.5 7.5-7.5 7.5" }) })] }), _jsx("br", {}), _jsx("br", {}), props.videoLink && (_jsx("button", { onClick: () => setCheck((prev) => !prev), className: "bg-[green] hover:bg-[#00df9a] duration-200 text-white font-bold py-2 px-4 rounded", children: check ? "Hide video" : "Load video" }))] }), props.videoLink && check && (_jsx("div", { className: "aspect-video flex flex-col items-start mt-6", children: _jsx("iframe", { className: "rounded-lg w-full h-full", src: props.videoLink, title: "YouTube video player", frameBorder: "0", allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share", allowFullScreen: true, loading: "lazy" }) }))] }) }) }));
+};
+export default Tailwindd;
diff --git a/src/components/Frontend_files/Tailwindd.jsx b/src/components/Frontend_files/Tailwindd.jsx
deleted file mode 100644
index b501c06..0000000
--- a/src/components/Frontend_files/Tailwindd.jsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import React, { useState } from "react";
-
-const Tailwindd = (props) => {
-  const [check,setcheck]=useState(false);
-    return (
-        <div>
-            <div >
-                <section className="">
-                    <div className="py-8 px-4 mx-auto max-w-screen-xl lg:py-8 lg:px-6">
-                        <div className="max-w-screen-xl  sm:text-lg text-gray-100">
-                            <h2 className=" text-4xl mb-12 tracking-tight font-bold text-white">{props.head}</h2>
-                            <p className="mb-4 ">{props.para1}</p>
-                            <p className="mb-4 ">{props.para2}</p>
-                            <p className="mb-4 font-medium">{props.para3}</p>
-                            <a href={props.link ? props.link : props.videoLink} target="_blank"
-                                className="inline-flex items-center font-medium hover:underline text-sky-400">
-                                Learn more
-                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-5">
-                                <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
-                                </svg>
-                            </a>
-                            <br></br>
-                            <br></br>
-                            {props.videoLink ? (<>
-                            <button onClick={()=>setcheck(prev=>!prev)} className="bg-[green] hover:bg-[#00df9a] duration-200 text-white font-bold py-2 px-4 rounded">{check ? "Hide video" : "Load video"}</button></>):null}
-                        </div>
-                        {props.videoLink&&check ?
-                            (<div className="aspect-video flex flex-col items-start mt-6">
-                                <iframe className=" rounded-lg w-full h-full " target="_blank" src={props.videoLink}
-                                    title="YouTube video player" frameborder="0"
-                                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-                                    allowfullscreen loading=""></iframe>
-                            </div>)
-                            :
-                            null
-                        }
-                    </div>
-                </section>
-            </div>
-        </div>
-    )
-}
-
-export default Tailwindd;
\ No newline at end of file
diff --git a/src/components/Frontend_files/Tailwindd.tsx b/src/components/Frontend_files/Tailwindd.tsx
new file mode 100644
index 0000000..a82852a
--- /dev/null
+++ b/src/components/Frontend_files/Tailwindd.tsx
@@ -0,0 +1,79 @@
+import React, { useState } from "react";
+
+// Define the props interface
+interface TailwinddProps {
+  head: string;
+  para1: string;
+  para2: string;
+  para3: string;
+  link?: string;
+  videoLink?: string;
+}
+
+const Tailwindd: React.FC<TailwinddProps> = (props) => {
+  const [check, setCheck] = useState<boolean>(false);
+
+  return (
+    <div>
+      <section className="">
+        <div className="py-8 px-4 mx-auto max-w-screen-xl lg:py-8 lg:px-6">
+          <div className="max-w-screen-xl sm:text-lg text-gray-100">
+            <h2 className="text-4xl mb-12 tracking-tight font-bold text-white">
+              {props.head}
+            </h2>
+            <p className="mb-4">{props.para1}</p>
+            <p className="mb-4">{props.para2}</p>
+            <p className="mb-4 font-medium">{props.para3}</p>
+            <a
+              href={props.link ? props.link : props.videoLink}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="inline-flex items-center font-medium hover:underline text-sky-400"
+            >
+              Learn more
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+                strokeWidth="1.5"
+                stroke="currentColor"
+                className="w-6 h-5"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  d="M8.25 4.5l7.5 7.5-7.5 7.5"
+                />
+              </svg>
+            </a>
+            <br />
+            <br />
+            {props.videoLink && (
+              <button
+                onClick={() => setCheck((prev) => !prev)}
+                className="bg-[green] hover:bg-[#00df9a] duration-200 text-white font-bold py-2 px-4 rounded"
+              >
+                {check ? "Hide video" : "Load video"}
+              </button>
+            )}
+          </div>
+          {props.videoLink && check && (
+            <div className="aspect-video flex flex-col items-start mt-6">
+              <iframe
+                className="rounded-lg w-full h-full"
+                src={props.videoLink}
+                title="YouTube video player"
+                frameBorder="0"
+                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                allowFullScreen
+                loading="lazy"
+              ></iframe>
+            </div>
+          )}
+        </div>
+      </section>
+    </div>
+  );
+};
+
+export default Tailwindd;
diff --git a/src/components/Frontend_files/Three_js.js b/src/components/Frontend_files/Three_js.js
new file mode 100644
index 0000000..6fa7ac5
--- /dev/null
+++ b/src/components/Frontend_files/Three_js.js
@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+const Three_js = (props) => {
+    const [check, setCheck] = useState(false);
+    return (_jsx("div", { children: _jsx("section", { className: "", children: _jsxs("div", { className: "py-8 px-4 mx-auto max-w-screen-xl lg:py-8 lg:px-6", children: [_jsxs("div", { className: "max-w-screen-xl sm:text-lg text-gray-100", children: [_jsx("h2", { className: "text-4xl mb-12 tracking-tight font-bold text-white", children: props.head }), _jsx("p", { className: "mb-4", children: props.para1 }), _jsx("p", { className: "mb-4", children: props.para2 }), _jsx("p", { className: "mb-4 font-medium", children: props.para3 }), _jsxs("a", { href: props.link ? props.link : props.videoLink, target: "_blank", rel: "noopener noreferrer", className: "inline-flex items-center text-sky-400 font-medium hover:underline", children: ["Learn more", _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", strokeWidth: "1.5", stroke: "currentColor", className: "w-6 h-5", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M8.25 4.5l7.5 7.5-7.5 7.5" }) })] }), _jsx("br", {}), _jsx("br", {}), props.videoLink && (_jsx("button", { onClick: () => setCheck((prev) => !prev), className: "bg-[green] hover:bg-[#00df9a] duration-200 text-white font-bold py-2 px-4 rounded", children: check ? "Hide video" : "Load video" }))] }), props.videoLink && check && (_jsx("div", { className: "aspect-video flex flex-col items-start mt-6", children: _jsx("iframe", { className: "rounded-lg w-full h-full", src: props.videoLink, title: "YouTube video player", frameBorder: "0", allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share", allowFullScreen: true, loading: "lazy" }) }))] }) }) }));
+};
+export default Three_js;
diff --git a/src/components/Frontend_files/Three_js.jsx b/src/components/Frontend_files/Three_js.jsx
deleted file mode 100644
index a00a840..0000000
--- a/src/components/Frontend_files/Three_js.jsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import React, { useState } from "react";
-
-const Three_js = (props) => {
-  const [check,setcheck]=useState(false);
-    return (
-        <div>
-            <div >
-                <section className="">
-                    <div className="py-8 px-4 mx-auto max-w-screen-xl lg:py-8 lg:px-6">
-                        <div className="max-w-screen-xl  sm:text-lg text-gray-100">
-                            <h2 className=" text-4xl mb-12 tracking-tight font-bold text-white">{props.head}</h2>
-                            <p className="mb-4 ">{props.para1} </p>
-                            <p className="mb-4 ">{props.para2}</p>
-                            <p className="mb-4 font-medium">{props.para3}</p>
-                            <a href={props.link ? props.link : props.videoLink} target="_blank"
-                                className="inline-flex items-center text-sky-400 font-medium hover:underline">
-                                Learn more
-                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-5">
-                                <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
-                                </svg>
-                            </a>
-                            <br></br>
-                            <br></br>
-                            {props.videoLink ?(<>
-                            <button onClick={()=>setcheck(prev=>!prev)} className="bg-[green] hover:bg-[#00df9a] duration-200 text-white font-bold py-2 px-4 rounded">{check ? "Hide video" : "Load video"}</button></>):null}
-                        </div>
-                        {props.videoLink&&check ?
-                            (<div className="aspect-video flex flex-col items-start mt-6">
-                                <iframe className=" rounded-lg w-full h-full " target="_blank" src={props.videoLink}
-                                    title="YouTube video player" frameborder="0"
-                                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-                                    allowfullscreen loading=""></iframe>
-                            </div>)
-                            :
-                            null
-                        }
-                    </div>
-                </section>
-            </div>
-        </div>
-    )
-}
-
-export default Three_js;
\ No newline at end of file
diff --git a/src/components/Frontend_files/Three_js.tsx b/src/components/Frontend_files/Three_js.tsx
new file mode 100644
index 0000000..32815f1
--- /dev/null
+++ b/src/components/Frontend_files/Three_js.tsx
@@ -0,0 +1,79 @@
+import React, { useState } from "react";
+
+// Define the type for the props
+interface ThreeJsProps {
+  head: string;
+  para1: string;
+  para2: string;
+  para3: string;
+  link?: string;
+  videoLink?: string;
+}
+
+const Three_js: React.FC<ThreeJsProps> = (props) => {
+  const [check, setCheck] = useState<boolean>(false);
+
+  return (
+    <div>
+      <section className="">
+        <div className="py-8 px-4 mx-auto max-w-screen-xl lg:py-8 lg:px-6">
+          <div className="max-w-screen-xl sm:text-lg text-gray-100">
+            <h2 className="text-4xl mb-12 tracking-tight font-bold text-white">
+              {props.head}
+            </h2>
+            <p className="mb-4">{props.para1}</p>
+            <p className="mb-4">{props.para2}</p>
+            <p className="mb-4 font-medium">{props.para3}</p>
+            <a
+              href={props.link ? props.link : props.videoLink}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="inline-flex items-center text-sky-400 font-medium hover:underline"
+            >
+              Learn more
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+                strokeWidth="1.5"
+                stroke="currentColor"
+                className="w-6 h-5"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  d="M8.25 4.5l7.5 7.5-7.5 7.5"
+                />
+              </svg>
+            </a>
+            <br />
+            <br />
+            {props.videoLink && (
+              <button
+                onClick={() => setCheck((prev) => !prev)}
+                className="bg-[green] hover:bg-[#00df9a] duration-200 text-white font-bold py-2 px-4 rounded"
+              >
+                {check ? "Hide video" : "Load video"}
+              </button>
+            )}
+          </div>
+          {props.videoLink && check && (
+            <div className="aspect-video flex flex-col items-start mt-6">
+              <iframe
+                className="rounded-lg w-full h-full"
+                src={props.videoLink}
+                title="YouTube video player"
+                frameBorder="0"
+                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                allowFullScreen
+                loading="lazy"
+              ></iframe>
+            </div>
+          )}
+        </div>
+      </section>
+    </div>
+  );
+};
+
+export default Three_js;
diff --git a/src/components/Frontend_files/Vue_js.js b/src/components/Frontend_files/Vue_js.js
new file mode 100644
index 0000000..46f163b
--- /dev/null
+++ b/src/components/Frontend_files/Vue_js.js
@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+const Vue_js = (props) => {
+    const [check, setCheck] = useState(false);
+    return (_jsx("div", { children: _jsxs("section", { className: "", children: [_jsx("p", { className: "", children: "Vue.js Learning Resources" }), _jsxs("div", { className: "py-8 px-4 mx-auto max-w-screen-xl lg:py-8 lg:px-6", children: [_jsxs("div", { className: "max-w-screen-xl sm:text-lg text-gray-100", children: [_jsx("h2", { className: "text-4xl mb-12 tracking-tight font-bold text-white", children: props.head }), _jsx("p", { className: "mb-4", children: props.para1 }), _jsx("p", { className: "mb-4", children: props.para2 }), _jsx("p", { className: "mb-4 font-medium", children: props.para3 }), _jsxs("a", { href: props.link ? props.link : props.videoLink, target: "_blank", rel: "noopener noreferrer", className: "inline-flex items-center font-medium hover:underline text-sky-400", children: ["Learn more", _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", strokeWidth: "1.5", stroke: "currentColor", className: "w-6 h-5", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M8.25 4.5l7.5 7.5-7.5 7.5" }) })] }), _jsx("br", {}), _jsx("br", {}), props.videoLink && (_jsx("button", { onClick: () => setCheck((prev) => !prev), className: "bg-[green] hover:bg-[#00df9a] duration-200 text-white font-bold py-2 px-4 rounded", children: check ? "Hide video" : "Load video" }))] }), props.videoLink && check && (_jsx("div", { className: "aspect-video flex flex-col items-start mt-6", children: _jsx("iframe", { className: "rounded-lg w-full h-full", src: props.videoLink, title: "YouTube video player", frameBorder: "0", allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share", allowFullScreen: true, loading: "lazy" }) }))] })] }) }));
+};
+export default Vue_js;
diff --git a/src/components/Frontend_files/Vue_js.jsx b/src/components/Frontend_files/Vue_js.jsx
deleted file mode 100644
index f898543..0000000
--- a/src/components/Frontend_files/Vue_js.jsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import React, { useState } from "react";
-
-const Vue_js = (props) => {
-  const [check,setcheck]=useState(false);
-    return (
-        <div>
-            <div >
-                <section className="">
-                    <p className="">Vue.js Learning Resources</p>
-                    <div className="py-8 px-4 mx-auto max-w-screen-xl lg:py-8 lg:px-6">
-                        <div className="max-w-screen-xl  sm:text-lg text-gray-100">
-                            <h2 className=" text-4xl mb-12 tracking-tight font-bold text-white">{props.head}</h2>
-                            <p className="mb-4 ">{props.para1}</p>
-                            <p className="mb-4 ">{props.para2}</p>
-                            <p className="mb-4 font-medium">{props.para3} </p>
-                            <a href={props.link ? props.link : props.videoLink} target="_blank"
-                                className="inline-flex items-center font-medium hover:underline text-sky-400">
-                                Learn more
-                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-5">
-                                <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
-                                </svg>
-                            </a>
-                            <br></br>
-                            <br></br>
-                            {props.videoLink ?(<>
-                            <button onClick={()=>setcheck(prev=>!prev)} className="bg-[green] hover:bg-[#00df9a] duration-200 text-white font-bold py-2 px-4 rounded">{check ? "Hide video" : "Load video"}</button></>):null}
-                        </div>
-                        {props.videoLink&&check ?
-                            (<div className="aspect-video flex flex-col items-start mt-6">
-                                <iframe className=" rounded-lg w-full h-full " target="_blank" src={props.videoLink}
-                                    title="YouTube video player" frameborder="0"
-                                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-                                    allowfullscreen loading=""></iframe>
-                            </div>)
-                            :
-                            null
-                        }
-                    </div>
-                </section>
-            </div>
-        </div>
-    )
-}
-
-export default Vue_js;
\ No newline at end of file
diff --git a/src/components/Frontend_files/Vue_js.tsx b/src/components/Frontend_files/Vue_js.tsx
new file mode 100644
index 0000000..56a5944
--- /dev/null
+++ b/src/components/Frontend_files/Vue_js.tsx
@@ -0,0 +1,80 @@
+import React, { useState } from "react";
+
+// Define the props interface
+interface VueJsProps {
+  head: string;
+  para1: string;
+  para2: string;
+  para3: string;
+  link?: string;
+  videoLink?: string;
+}
+
+const Vue_js: React.FC<VueJsProps> = (props) => {
+  const [check, setCheck] = useState<boolean>(false);
+
+  return (
+    <div>
+      <section className="">
+        <p className="">Vue.js Learning Resources</p>
+        <div className="py-8 px-4 mx-auto max-w-screen-xl lg:py-8 lg:px-6">
+          <div className="max-w-screen-xl sm:text-lg text-gray-100">
+            <h2 className="text-4xl mb-12 tracking-tight font-bold text-white">
+              {props.head}
+            </h2>
+            <p className="mb-4">{props.para1}</p>
+            <p className="mb-4">{props.para2}</p>
+            <p className="mb-4 font-medium">{props.para3}</p>
+            <a
+              href={props.link ? props.link : props.videoLink}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="inline-flex items-center font-medium hover:underline text-sky-400"
+            >
+              Learn more
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+                strokeWidth="1.5"
+                stroke="currentColor"
+                className="w-6 h-5"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  d="M8.25 4.5l7.5 7.5-7.5 7.5"
+                />
+              </svg>
+            </a>
+            <br />
+            <br />
+            {props.videoLink && (
+              <button
+                onClick={() => setCheck((prev) => !prev)}
+                className="bg-[green] hover:bg-[#00df9a] duration-200 text-white font-bold py-2 px-4 rounded"
+              >
+                {check ? "Hide video" : "Load video"}
+              </button>
+            )}
+          </div>
+          {props.videoLink && check && (
+            <div className="aspect-video flex flex-col items-start mt-6">
+              <iframe
+                className="rounded-lg w-full h-full"
+                src={props.videoLink}
+                title="YouTube video player"
+                frameBorder="0"
+                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                allowFullScreen
+                loading="lazy"
+              ></iframe>
+            </div>
+          )}
+        </div>
+      </section>
+    </div>
+  );
+};
+
+export default Vue_js;
diff --git a/src/components/Guide_Element.js b/src/components/Guide_Element.js
new file mode 100644
index 0000000..5add47b
--- /dev/null
+++ b/src/components/Guide_Element.js
@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import STEP_1 from "../assets/img/guide_icons/STEP_1.png";
+import STEP_2 from "../assets/img/guide_icons/STEP_2.png";
+import STEP_3 from "../assets/img/guide_icons/STEP_3.png";
+import STEP_4 from "../assets/img/guide_icons/STEP_4.png";
+const Guide_Element = () => {
+    return (_jsxs("div", { children: [_jsx("h1", { className: "w-full py-16 text-white px-4 text-center text-5xl", children: "Guideline To Contribute" }), _jsxs("div", { className: 'flex flex-wrap justify-center gap-4 md:gap-4 sm:gap-4', children: [_jsxs("a", { className: 'flex flex-col bg-gray-900 rounded-lg text-green-400 hover:bg-green-400 transition-color hover:text-white transition-color', style: { width: '280px', height: '285px' }, href: 'https://github.com/FOSS-Community/website-fossc', children: [_jsx("img", { src: STEP_1, alt: 'Step 1 Icon', className: 'w-40 mx-auto mt-4 mb-3' }), _jsx("h2", { className: 'text-center font-bold text-xl mb-0.5', children: "STEP 1" }), _jsx("p", { className: 'flex flex-col text-center text-white text-md mb-1 px-16', children: "Go to our Github repository" })] }), _jsxs("div", { className: 'flex flex-col bg-gray-900 rounded-lg text-green-400 hover:bg-green-400 transition-color hover:text-white transition-color', style: { width: '280px', height: '285px' }, children: [_jsx("img", { src: STEP_2, alt: 'Step 2 Icon', className: 'w-25 mx-auto' }), _jsx("h2", { className: 'text-center font-bold text-xl my-1', children: "STEP 2" }), _jsx("p", { className: 'flex flex-col text-center text-white text-md mb-1 px-16', children: "Fork the repository to your account" })] }), _jsxs("div", { className: 'flex flex-col bg-gray-900 rounded-lg text-green-400 hover:bg-green-400 transition-color hover:text-white transition-color', style: { width: '280px', height: '285px' }, children: [_jsx("img", { src: STEP_3, alt: 'Step 3 Icon', className: 'w-30 mx-auto' }), _jsx("h2", { className: 'text-center font-bold text-xl my-1', children: "STEP 3" }), _jsx("p", { className: 'flex flex-col text-center text-white text-md mb-1 px-16', children: "Make changes and commit them" })] }), _jsxs("a", { className: 'flex flex-col bg-gray-900 rounded-lg text-green-400 hover:bg-green-400 transition-color hover:text-white transition-color', style: { width: '280px', height: '285px' }, href: 'https://discord.com/channels/983838934624780288/986650931754053644', children: [_jsx("img", { src: STEP_4, alt: 'Step 4 Icon', className: 'w-40 mx-auto mt-10 mb-8' }), _jsx("h2", { className: 'text-center font-bold text-xl my-1', children: "STEP 4" }), _jsx("p", { className: 'flex flex-col text-center text-white text-md px-4', children: "Discuss the commit with maintainer in Discord" })] })] })] }));
+};
+export default Guide_Element;
diff --git a/src/components/Guide_Element.jsx b/src/components/Guide_Element.jsx
deleted file mode 100644
index 1305a23..0000000
--- a/src/components/Guide_Element.jsx
+++ /dev/null
@@ -1,59 +0,0 @@
-import React from "react";
-import STEP_1 from "../assets/img/guide_icons/STEP_1.png"
-import STEP_2 from "../assets/img/guide_icons/STEP_2.png"
-import STEP_3 from "../assets/img/guide_icons/STEP_3.png"
-import STEP_4 from "../assets/img/guide_icons/STEP_4.png"
-const Guide_Element = () => {
-    return (
-        <div>
-            <h1 className="w-full py-16 text-white px-4 text-center text-5xl">Guideline To Contribute</h1>
-
-            <div className='flex flex-wrap justify-center gap-4 md:gap-4 sm:gap-4'>
-                <a className='flex flex-col  bg-gray-900 rounded-lg text-green-400 hover:bg-green-400 transition-color hover:text-white transition-color' style={{ width: '280px', height: '285px' }} href='https://github.com/FOSS-Community/website-fossc'>
-
-                    <img src={STEP_1} alt='' className='w-40 mx-auto mt-4 mb-3' />
-
-                    <h2 className='text-center font-bold text-xl mb-0.5'>STEP 1</h2>
-
-                    <p className='flex flex-col text-center text-white text-md mb-1 px-16'>Go to our Github repository</p>
-
-                </a>
-
-                <div className='flex flex-col bg-gray-900 rounded-lg text-green-400 hover:bg-green-400 transition-color hover:text-white transition-color' style={{ width: '280px', height: '285px' }}>
-
-                    <img src={STEP_2} alt='' className='w-25 mx-auto' />
-
-                    <h2 className='text-center font-bold text-xl my-1'>STEP 2</h2>
-
-                    <p className='flex flex-col text-center text-white text-md mb-1 px-16'>Fork the repository to your account</p>
-
-                </div>
-
-                <div className='flex flex-col bg-gray-900 rounded-lg text-green-400 hover:bg-green-400 transition-color hover:text-white transition-color' style={{ width: '280px', height: '285px' }}>
-
-                    <img src={STEP_3} alt='' className='w-30 mx-auto' />
-
-                    <h2 className=' text-center font-bold text-xl my-1'>STEP 3</h2>
-
-                    <p className='flex flex-col text-center text-white text-md mb-1 px-16'>Make changes and commit them</p>
-
-                </div>
-
-                <a className='flex flex-col bg-gray-900 rounded-lg text-green-400 hover:bg-green-400 transition-color hover:text-white transition-color' style={{ width: '280px', height: '285px' }} href='https://discord.com/channels/983838934624780288/986650931754053644'>
-
-                    <img src={STEP_4} alt='' className='w-40 mx-auto mt-10 mb-8' />
-
-                    <h2 className='text-center font-bold text-xl my-1'>STEP 4</h2>
-
-                    <p className='flex flex-col text-center text-white text-md px-4'>Discuss the commit with maintainer in Discord</p>
-
-                </a>
-            </div>
-
-
-        </div>
-
-    );
-};
-
-export default Guide_Element;
\ No newline at end of file
diff --git a/src/components/Guide_Element.tsx b/src/components/Guide_Element.tsx
new file mode 100644
index 0000000..803c437
--- /dev/null
+++ b/src/components/Guide_Element.tsx
@@ -0,0 +1,55 @@
+import React from "react";
+import STEP_1 from "../assets/img/guide_icons/STEP_1.png";
+import STEP_2 from "../assets/img/guide_icons/STEP_2.png";
+import STEP_3 from "../assets/img/guide_icons/STEP_3.png";
+import STEP_4 from "../assets/img/guide_icons/STEP_4.png";
+
+const Guide_Element: React.FC = () => {
+    return (
+        <div>
+            <h1 className="w-full py-16 text-white px-4 text-center text-5xl">Guideline To Contribute</h1>
+
+            <div className='flex flex-wrap justify-center gap-4 md:gap-4 sm:gap-4'>
+                <a
+                    className='flex flex-col bg-gray-900 rounded-lg text-green-400 hover:bg-green-400 transition-color hover:text-white transition-color'
+                    style={{ width: '280px', height: '285px' }}
+                    href='https://github.com/FOSS-Community/website-fossc'
+                >
+                    <img src={STEP_1} alt='Step 1 Icon' className='w-40 mx-auto mt-4 mb-3' />
+                    <h2 className='text-center font-bold text-xl mb-0.5'>STEP 1</h2>
+                    <p className='flex flex-col text-center text-white text-md mb-1 px-16'>Go to our Github repository</p>
+                </a>
+
+                <div
+                    className='flex flex-col bg-gray-900 rounded-lg text-green-400 hover:bg-green-400 transition-color hover:text-white transition-color'
+                    style={{ width: '280px', height: '285px' }}
+                >
+                    <img src={STEP_2} alt='Step 2 Icon' className='w-25 mx-auto' />
+                    <h2 className='text-center font-bold text-xl my-1'>STEP 2</h2>
+                    <p className='flex flex-col text-center text-white text-md mb-1 px-16'>Fork the repository to your account</p>
+                </div>
+
+                <div
+                    className='flex flex-col bg-gray-900 rounded-lg text-green-400 hover:bg-green-400 transition-color hover:text-white transition-color'
+                    style={{ width: '280px', height: '285px' }}
+                >
+                    <img src={STEP_3} alt='Step 3 Icon' className='w-30 mx-auto' />
+                    <h2 className='text-center font-bold text-xl my-1'>STEP 3</h2>
+                    <p className='flex flex-col text-center text-white text-md mb-1 px-16'>Make changes and commit them</p>
+                </div>
+
+                <a
+                    className='flex flex-col bg-gray-900 rounded-lg text-green-400 hover:bg-green-400 transition-color hover:text-white transition-color'
+                    style={{ width: '280px', height: '285px' }}
+                    href='https://discord.com/channels/983838934624780288/986650931754053644'
+                >
+                    <img src={STEP_4} alt='Step 4 Icon' className='w-40 mx-auto mt-10 mb-8' />
+                    <h2 className='text-center font-bold text-xl my-1'>STEP 4</h2>
+                    <p className='flex flex-col text-center text-white text-md px-4'>Discuss the commit with maintainer in Discord</p>
+                </a>
+            </div>
+        </div>
+    );
+};
+
+export default Guide_Element;
diff --git a/src/components/Hero.js b/src/components/Hero.js
new file mode 100644
index 0000000..3ce3aea
--- /dev/null
+++ b/src/components/Hero.js
@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import Lottie from "react-lottie";
+import animationData from "../assets/lotties/community_animation_lottie.json";
+import Typed from "react-typed";
+import logo from "../assets/img/logo/fosscu.png";
+const Hero = () => {
+    const [size, setSize] = useState(window.innerWidth);
+    const checkSize = () => {
+        setSize(window.innerWidth);
+    };
+    useEffect(() => {
+        window.addEventListener("resize", checkSize);
+        return () => {
+            console.log("cleanup");
+            window.removeEventListener("resize", checkSize);
+        };
+    }, []);
+    const defaultOptions = {
+        loop: true,
+        autoplay: true,
+        animationData: animationData,
+        rendererSettings: {
+            preserveAspectRatio: "xMidYMid slice",
+        },
+    };
+    return (_jsx("div", { className: "w-full py-16 px-5", children: _jsxs("div", { className: "max-w-[1240px] mx-auto grid md:grid-cols-2 px-15 justify-center", children: [size >= 700 ? (_jsxs("div", { className: "w-[500px] mx-auto my-4", children: [" ", _jsx(Lottie, { options: defaultOptions, height: 400, width: 400 })] })) : (_jsx("div", { className: "flex justify-center", children: _jsx("img", { className: "w-[200px] md:w-[10px]", src: logo, alt: "fosscu" }) })), _jsx("div", { className: "flex flex-col justify-center", children: _jsxs("div", { className: "max-w-[800px] mt-[-96px] w-full h-screen text-center flex flex-col justify-center", children: [_jsx("p", { className: "font-bold p-4 text-white", children: "Growing With the Community" }), _jsx("h1", { className: "md:text-7xl sm:text-6xl text-4xl font-bold md:py-8 text-[#00df9a]", children: "Welcome to FOSSCU" }), _jsx("div", { className: "flex justify-center items-center", children: _jsx(Typed, { className: "md:text-5xl sm:text-4xl text-xl font-bold pl-2 text-white grow", strings: [
+                                        "We do Open-Source 💚",
+                                        "We do Community Work 🤝",
+                                        "We do Annual Conferences 🎤",
+                                        "We Host Events 🎪",
+                                    ], typeSpeed: 120, backSpeed: 140, loop: true }) }), _jsxs("div", { className: "sm:space-x-4 space-x-0 flex flex-col items-center sm:flex-row sm:justify-center", children: [_jsx("a", { href: "https://dub.sh/fosscu-discord", target: "_blank", rel: "noopener noreferrer", children: _jsx("button", { className: "hover:bg-green-800 bg-[#0dff1c] w-[190px] h-[60px] rounded-md font-medium my-4 py-3 text-black", children: "Join Us \uD83E\uDD1D" }) }), _jsx("a", { href: "https://docs.fosscu.org", target: "_blank", rel: "noopener noreferrer", children: _jsx("button", { className: "hover:bg-green-800 bg-[#0dff1c] w-[190px] h-[60px] rounded-md font-medium my-4 py-3 text-black", children: "Learn More \uD83E\uDDE0" }) })] })] }) })] }) }));
+};
+export default Hero;
diff --git a/src/components/Hero.jsx b/src/components/Hero.tsx
similarity index 56%
rename from src/components/Hero.jsx
rename to src/components/Hero.tsx
index 618c005..04377ff 100644
--- a/src/components/Hero.jsx
+++ b/src/components/Hero.tsx
@@ -3,14 +3,15 @@ import Lottie from "react-lottie";
 import animationData from "../assets/lotties/community_animation_lottie.json";
 import Typed from "react-typed";
 import logo from "../assets/img/logo/fosscu.png";
-function Hero() {
-  const [size, setSize] = useState(window.innerWidth);
+
+const Hero: React.FC = () => {
+  const [size, setSize] = useState<number>(window.innerWidth);
 
   const checkSize = () => {
     setSize(window.innerWidth);
   };
+
   useEffect(() => {
-    // console.log('useEffect');
     window.addEventListener("resize", checkSize);
     return () => {
       console.log("cleanup");
@@ -29,31 +30,27 @@ function Hero() {
 
   return (
     <div className="w-full py-16 px-5">
-      <div className="max-w-[1240px] mx-auto grid md:grid-cols-2 px-15  justify-center ">
+      <div className="max-w-[1240px] mx-auto grid md:grid-cols-2 px-15 justify-center">
         {size >= 700 ? (
-          <div className="flex items-center justify-center h-full">
-          <Lottie
-            className="w-[500px] md:w-[10px]"
-            options={defaultOptions}
-            height={400}
-            width={400}
-          />
-        </div>
-        
+         <div className="w-[500px] mx-auto my-4"> {/* Wrap in a div */}
+         <Lottie
+           options={defaultOptions}
+           height={400}
+           width={400}
+         />
+       </div>
         ) : (
           <div className="flex justify-center">
-            <img className="w-[200px] md:w-[10px]   " src={logo} alt="foccu" />
+            <img className="w-[200px] md:w-[10px]" src={logo} alt="fosscu" />
           </div>
         )}
         <div className="flex flex-col justify-center">
           <div className="max-w-[800px] mt-[-96px] w-full h-screen text-center flex flex-col justify-center">
-            <p className="font-bold p-4 text-white">
-              Growing With the Community
-            </p>
-            <h1 className="md:text-7xl  sm:text-6xl text-4xl font-bold md:py-8 text-[#00df9a] ">
+            <p className="font-bold p-4 text-white">Growing With the Community</p>
+            <h1 className="md:text-7xl sm:text-6xl text-4xl font-bold md:py-8 text-[#00df9a]">
               Welcome to FOSSCU
             </h1>
-            <div className="flex justify-center items-center ">
+            <div className="flex justify-center items-center">
               <Typed
                 className="md:text-5xl sm:text-4xl text-xl font-bold pl-2 text-white grow"
                 strings={[
@@ -68,30 +65,30 @@ function Hero() {
               />
             </div>
             <div className="sm:space-x-4 space-x-0 flex flex-col items-center sm:flex-row sm:justify-center">
-                <a
-                  href="https://dub.sh/fosscu-discord"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                >
-              <button className="hover:bg-green-800 bg-[#0dff1c] w-[190px] h-[60px]   rounded-md font-medium my-4 py-3 text-black">
+              <a
+                href="https://dub.sh/fosscu-discord"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                <button className="hover:bg-green-800 bg-[#0dff1c] w-[190px] h-[60px] rounded-md font-medium my-4 py-3 text-black">
                   Join Us 🤝
-              </button>
-                </a>
-                <a
-                  href="https://docs.fosscu.org"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                >
-              <button className="hover:bg-green-800 bg-[#0dff1c] w-[190px] h-[60px] rounded-md font-medium my-4 py-3 text-black">
+                </button>
+              </a>
+              <a
+                href="https://docs.fosscu.org"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                <button className="hover:bg-green-800 bg-[#0dff1c] w-[190px] h-[60px] rounded-md font-medium my-4 py-3 text-black">
                   Learn More 🧠
-              </button>
-                </a>
+                </button>
+              </a>
             </div>
           </div>
         </div>
       </div>
     </div>
   );
-}
+};
 
 export default Hero;
diff --git a/src/components/Navbar.js b/src/components/Navbar.js
new file mode 100644
index 0000000..f0ea2ff
--- /dev/null
+++ b/src/components/Navbar.js
@@ -0,0 +1,48 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import { AiOutlineClose, AiOutlineMenu } from "react-icons/ai";
+import { RiOpenSourceFill } from "react-icons/ri";
+import { useLocation, Link, Outlet } from "react-router-dom";
+const Navbar = () => {
+    const location = useLocation();
+    const [activeLink, setActiveLink] = useState(location.pathname);
+    const [nav, setNav] = useState(false);
+    const handleNav = () => {
+        setNav((prevNav) => !prevNav);
+    };
+    const handleLinkClick = (to) => {
+        setActiveLink(to);
+        setNav(false); // Close the nav when a link is clicked on mobile
+    };
+    useEffect(() => {
+        const checkSize = () => {
+            setNav(window.innerWidth >= 768 ? false : nav);
+        };
+        window.addEventListener("resize", checkSize);
+        return () => {
+            window.removeEventListener("resize", checkSize);
+        };
+    }, [nav]);
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex justify-between items-center h-24 max-w-[1240px] mx-auto px-4 text-white", children: [_jsx(RiOpenSourceFill, { className: "flex-shrink-0", size: 31, color: "green" }), _jsx("h1", { className: "w-full text-3xl font-bold text-[#0DFF1C] m-4", children: "FOSSCU" }), _jsxs("ul", { className: "hidden md:flex", children: [_jsx("li", { className: `p-4 ${activeLink === "/" ? "text-[#0DFF1C]" : "hover:text-[#0DFF1C]"}`, children: _jsxs(Link, { to: "/", onClick: () => handleLinkClick("/"), children: [" ", "Home", " "] }) }), _jsx("li", { className: `p-4 ${activeLink === "/about"
+                                    ? "text-[#0DFF1C]"
+                                    : "hover:text-[#0DFF1C]"}`, children: _jsx(Link, { to: "/about", onClick: () => handleLinkClick("/about"), children: "About" }) }), _jsx("li", { className: `p-4 ${activeLink === "/team" ? "text-[#0DFF1C]" : "hover:text-[#0DFF1C]"}`, children: _jsxs(Link, { to: "/team", onClick: () => handleLinkClick("/team"), children: [" ", "Team", " "] }) }), _jsx("li", { className: `p-4 ${activeLink === "/resource"
+                                    ? "text-[#0DFF1C]"
+                                    : "hover:text-[#0DFF1C]"}`, children: _jsx(Link, { to: "/resource", onClick: () => handleLinkClick("/resource"), children: "Resources" }) }), _jsx("li", { className: `p-4 ${activeLink === "/contact"
+                                    ? "text-[#0DFF1C]"
+                                    : "hover:text-[#0DFF1C]"}`, children: _jsx(Link, { to: "/contact", onClick: () => handleLinkClick("/contact"), children: "Contact" }) }), _jsx("li", { className: `p-4 ${activeLink === "/shipyard"
+                                    ? "text-[#0DFF1C]"
+                                    : "hover:text-[#0DFF1C]"}`, children: _jsx(Link, { to: "/shipyard", onClick: () => handleLinkClick("/shipyard"), children: "Shipyard" }) }), _jsxs("div", { className: "relative group xl:mr-0 mr-8", children: [_jsxs("button", { className: "px-4 pt-4 pb-0 hover:text-[#0DFF1C] flex items-center text-white", children: [_jsx("span", { className: "mr-1", children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "currentColor", className: "bi bi-chevron-down", viewBox: "0 0 16 16", children: _jsx("path", { fillRule: "evenodd", d: "M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z" }) }) }), _jsx("span", { children: "More" })] }), _jsxs("div", { className: "translate-x-[-0em] hidden absolute bg-black text-white rounded mt-1 w-36 group-hover:block hover:rounded-md", children: [_jsx("a", { href: "/resource", className: "block px-4 py-2 hover:text-[#0dff1c]", children: "Resources" }), _jsx("a", { href: "https://docs.fosscu.org", className: "block px-4 py-2 hover:text-[#0dff1c]", target: "_blank", rel: "noopener noreferrer", children: "Handbook" }), _jsx("a", { href: "https://lu.ma/fosscu", className: "block px-4 py-2 hover:text-[#0dff1c]", target: "_blank", rel: "noopener noreferrer", children: "Calendar" }), _jsx("a", { href: "https://github.com/FOSS-Community/", className: "block px-4 py-2 hover:text-[#0dff1c]", target: "_blank", rel: "noopener noreferrer", children: "Contribute" })] })] })] }), _jsx("div", { onClick: handleNav, className: "block md:hidden", children: nav ? _jsx(AiOutlineClose, { size: 20 }) : _jsx(AiOutlineMenu, { size: 20 }) }), _jsxs("div", { className: nav
+                            ? "fixed z-30 left-0 top-0 w-[60%] h-full border-r border-r-grey-900 bg-[#000300] ease-in-out duration-500"
+                            : "fixed left-[-100%]", children: [_jsxs("div", { className: "flex flex-col items-center", children: [_jsx(RiOpenSourceFill, { size: 65, color: "green" }), _jsx("h1", { className: "w-full text-3xl font-bold text-[#0DFF1C] m-4", children: "FOSSCU" })] }), _jsxs("ul", { className: "uppercase p-4", children: [_jsx("li", { className: `p-4 ${activeLink === "/" ? "text-[#0DFF1C]" : "hover:text-[#0DFF1C]"} border-b border-gray-600`, children: _jsx(Link, { to: "/", onClick: () => handleLinkClick("/"), children: "Home" }) }), _jsx("li", { className: `p-4 ${activeLink === "/about"
+                                            ? "text-[#0DFF1C]"
+                                            : "hover:text-[#0DFF1C]"} border-b border-gray-600`, children: _jsx(Link, { to: "/about", onClick: () => handleLinkClick("/about"), children: "About" }) }), _jsx("li", { className: `p-4 ${activeLink === "/team"
+                                            ? "text-[#0DFF1C]"
+                                            : "hover:text-[#0DFF1C]"} border-b border-gray-600`, children: _jsx(Link, { to: "/team", onClick: () => handleLinkClick("/team"), children: "Team" }) }), _jsx("li", { className: `p-4 ${activeLink === "/shipyard"
+                                            ? "text-[#0DFF1C]"
+                                            : "hover:text-[#0DFF1C]"} border-b border-gray-600`, children: _jsx(Link, { to: "/shipyard", onClick: () => handleLinkClick("/shipyard"), children: "Shipyard" }) }), _jsx("li", { className: `p-4 ${activeLink === "/resource"
+                                            ? "text-[#0DFF1C]"
+                                            : "hover:text-[#0DFF1C]"} border-b border-gray-600`, children: _jsx(Link, { to: "/resource", onClick: () => handleLinkClick("/resource"), children: "Resources" }) }), _jsx("li", { className: "p-4 border-b border-gray-600", children: _jsx("a", { href: "https://docs.fosscu.org", target: "_blank", rel: "noopener noreferrer", children: "Handbook" }) }), _jsx("li", { className: "p-4 border-b border-gray-600", children: _jsx("a", { href: "https://github.com/FOSS-Community", target: "_blank", rel: "noopener noreferrer", children: "Projects" }) }), _jsx("li", { className: `p-4 ${activeLink === "/contact"
+                                            ? "text-[#0DFF1C]"
+                                            : "hover:text-[#0DFF1C]"} border-b border-gray-600`, children: _jsx(Link, { to: "/contact", onClick: () => handleLinkClick("/contact"), children: "Contact" }) }), _jsx("li", { className: "p-4 border-b border-gray-600", children: _jsx("a", { href: "https://lu.ma/fosscu", target: "_blank", rel: "noopener noreferrer", children: "Calendar" }) }), _jsx("li", { className: "p-4 border-b border-gray-600", children: _jsx("a", { href: "https://github.com/FOSS-Community/", target: "_blank", rel: "noopener noreferrer", children: "Contribute" }) })] })] })] }), _jsx(Outlet, {})] }));
+};
+export default Navbar;
diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx
deleted file mode 100644
index 6fd7da9..0000000
--- a/src/components/Navbar.jsx
+++ /dev/null
@@ -1,218 +0,0 @@
-import React, { useState, useEffect } from "react";
-import { AiOutlineClose, AiOutlineMenu } from "react-icons/ai";
-import { RiOpenSourceFill } from "react-icons/ri";
-import { useLocation } from "react-router-dom";
-import { Outlet, Link } from "react-router-dom";
-
-const Navbar = () => {
-  const [size, setSize] = useState(window.innerWidth);
-  const location = useLocation();
-  const [activeLink, setActiveLink] = useState(location.pathname);
-
-  const checkSize = () => {
-    setSize(window.innerWidth);
-  };
-  useEffect(() => {
-    window.addEventListener("resize", checkSize);
-    return () => {
-      console.log("cleanup");
-      window.removeEventListener("resize", checkSize);
-    };
-  }, []);
-
-  const [nav, setNav] = useState(false);
-
-  const handleNav = () => {
-    setNav(!nav);
-  };
-  const handleLinkClick = (to) => {
-    setActiveLink(to);
-  };
-
-  return (
-    <>
-      <div className="flex justify-between items-center h-24 max-w-[1240px] mx-auto  px-4  text-white">
-        <RiOpenSourceFill className="flex-shrink-0" size={31} color="green" />
-        <h1 className="w-full text-3xl font-bold text-[#0DFF1C] m-4">
-          {" "}
-          FOSSCU
-        </h1>
-        <ul className="hidden md:flex">
-          <li
-            className={`p-4 ${activeLink === "/" ? "text-[#0DFF1C]" : "hover:text-[#0DFF1C]"
-              }`}
-          >
-            <Link to="/"> Home </Link>{" "}
-          </li>
-          <li
-            className={`p-4 ${activeLink === "/about"
-              ? "text-[#0DFF1C]"
-              : "hover:text-[#0DFF1C]"
-              }`}
-          >
-            <Link to="/about">About</Link>
-          </li>
-          <li
-            className={`p-4 ${activeLink === "/team" ? "text-[#0DFF1C]" : "hover:text-[#0DFF1C]"
-              }`}
-          >
-            <Link to="/team"> Team </Link>{" "}
-          </li>
-
-          <li
-            className={`p-4 ${activeLink === "/resource"
-              ? "text-[#0DFF1C]"
-              : "hover:text-[#0DFF1C]"
-              } hover:text-[#0DFF1C] translate-x-[-3.2em] hidden absolute  bg-white text-gray-900 rounded mt-1 w-48 group-hover:block hover:rounded-md `}
-          >
-            <a href="/resource">Resources</a>
-          </li>
-
-          <li
-            className={`p-4 ${activeLink === "/contact"
-              ? "text-[#0DFF1C]"
-              : "hover:text-[#0DFF1C]"
-              } hover:text-[#0DFF1C]`}
-          >
-            <Link to="/contact">Contact</Link>
-          </li>
-
-          <li
-            className={`p-4 ${activeLink === "/shipyard"
-              ? "text-[#0DFF1C]"
-              : "hover:text-[#0DFF1C]"
-              } hover:text-[#0DFF1C]`}
-          >
-            <Link to="/shipyard">Shipyard</Link>
-          </li>
-
-          <div className="relative group xl:mr-0 mr-8">
-            <button className=" px-4 pt-4 pb-0 hover:text-[#0DFF1C] flex items-center  text-white ">
-              <span className="mr-1">
-                {" "}
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  width="16"
-                  height="16"
-                  fill="currentColor"
-                  className="bi bi-chevron-down"
-                  viewBox="0 0 16 16"
-                >
-                  <path
-                    fillRule="evenodd"
-                    d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"
-                  />
-                </svg>
-              </span>
-              <span>More</span>
-            </button>
-            <div className="translate-x-[-0em] hidden absolute bg-black text-white rounded mt-1 w-36 group-hover:block hover:rounded-md ">
-              <a href="/resource" className="block px-4 py-2 hover:text-[#0dff1c]">
-                Resources
-              </a>
-              <a
-                href="https://docs.fosscu.org"
-                className="block px-4 py-2 hover:text-[#0dff1c]"
-                target="blank"
-              >
-                Handbook
-              </a>
-              <a
-                href="https://lu.ma/fosscu"
-                rel="noreferrer"
-                target="blank"
-                className="block px-4 py-2 hover:text-[#0dff1c]"
-              >
-                Calendar
-              </a>
-              <a
-                href="https://github.com/FOSS-Community/"
-                target="blank"
-                className="block px-4 py-2 hover:text-[#0dff1c]"
-              >
-                Contribute
-              </a>
-            </div>
-          </div>
-        </ul>
-        <div onClick={handleNav} className="block md:hidden">
-          {nav ? <AiOutlineClose size={20} /> : <AiOutlineMenu size={20} />}
-        </div>
-        <div
-          className={
-            nav
-              ? "fixed z-30 left-0 top-0 w-[60%] h-full border-r border-r-grey-900 bg-[#000300] ease-in-out duration-500 "
-              : "fixed left-[-100%]"
-          }
-        >
-          <center>
-            <RiOpenSourceFill size={65} color="green" />
-            <h1 className="w-full text-3xl font-bold text-[#0DFF1C] m-4">
-              {" "}
-              FOSSCU
-            </h1>
-          </center>
-          <ul className="uppercase p-4">
-            <li
-              className={`p-4 ${activeLink === "/" ? "text-[#0DFF1C]" : "hover:text-[#0DFF1C]"
-                } border-b border-gray-600`}
-            >
-              <Link to="/" onClick={() => handleLinkClick("/")}>
-                Home
-              </Link>
-            </li>
-            <li
-              className={`p-4 ${activeLink === "/about" ? "text-[#0DFF1C]" : "hover:text-[#0DFF1C]"
-                } border-b border-gray-600`}
-            >
-              <Link to="/about">About</Link>
-            </li>
-            <li
-
-              className={`p-4 ${activeLink === "/team" ? "text-[#0DFF1C]" : "hover:text-[#0DFF1C]"
-                } border-b border-gray-600`}
-            >
-              <Link to="/team">Team</Link>
-            </li>
-            <li
-              className={`p-4 ${activeLink === "/shipyard" ? "text-[#0DFF1C]" : "hover:text-[#0DFF1C]"
-                } border-b border-gray-600`}
-            >
-              <Link to="/shipyard" onClick={() => handleLinkClick("/shipyard")}>
-                Shipyard
-              </Link>
-            </li>
-            <li
-              className={`p-4 ${activeLink === "/resource" ? "text-[#0DFF1C]" : "hover:text-[#0DFF1C]"
-                } border-b border-gray-600`}
-            >
-              <Link to="/resource">Resources</Link>
-            </li>
-            <li className="p-4 border-b border-gray-600">
-              <a href="https://docs.fosscu.org">Handbook</a>
-            </li>
-            <li className="p-4 border-b border-gray-600">
-              <a href="https://github.com/FOSS-Community">Projects</a>
-            </li>
-            <li
-
-              className={`p-4 ${activeLink === "/contact" ? "text-[#0DFF1C]" : "hover:text-[#0DFF1C]"
-                } border-b border-gray-600`}
-            >
-              <Link to="/contact">Contact</Link>
-            </li>
-            <li className="p-4 border-b border-gray-600">
-              <a href="https://lu.ma/fosscu">Calendar</a>
-            </li>
-            <li className="p-4 border-b border-gray-600">
-              <a href="https://github.com/FOSS-Community/">Contribute</a>
-            </li>
-          </ul>
-        </div>
-      </div>
-      <Outlet />
-    </>
-  );
-};
-
-export default Navbar;
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
new file mode 100644
index 0000000..6fd44f9
--- /dev/null
+++ b/src/components/Navbar.tsx
@@ -0,0 +1,281 @@
+import React, { useState, useEffect } from "react";
+import { AiOutlineClose, AiOutlineMenu } from "react-icons/ai";
+import { RiOpenSourceFill } from "react-icons/ri";
+import { useLocation, Link, Outlet } from "react-router-dom";
+
+const Navbar: React.FC = () => {
+  const location = useLocation();
+  const [activeLink, setActiveLink] = useState<string>(location.pathname);
+  const [nav, setNav] = useState<boolean>(false);
+
+  const handleNav = () => {
+    setNav((prevNav) => !prevNav);
+  };
+
+  const handleLinkClick = (to: string) => {
+    setActiveLink(to);
+    setNav(false); // Close the nav when a link is clicked on mobile
+  };
+
+  useEffect(() => {
+    const checkSize = () => {
+      setNav(window.innerWidth >= 768 ? false : nav);
+    };
+
+    window.addEventListener("resize", checkSize);
+    return () => {
+      window.removeEventListener("resize", checkSize);
+    };
+  }, [nav]);
+
+  return (
+    <>
+      <div className="flex justify-between items-center h-24 max-w-[1240px] mx-auto px-4 text-white">
+        <RiOpenSourceFill className="flex-shrink-0" size={31} color="green" />
+        <h1 className="w-full text-3xl font-bold text-[#0DFF1C] m-4">FOSSCU</h1>
+        <ul className="hidden md:flex">
+          <li
+            className={`p-4 ${
+              activeLink === "/" ? "text-[#0DFF1C]" : "hover:text-[#0DFF1C]"
+            }`}
+          >
+            <Link to="/" onClick={() => handleLinkClick("/")}>
+              {" "}
+              Home{" "}
+            </Link>
+          </li>
+          <li
+            className={`p-4 ${
+              activeLink === "/about"
+                ? "text-[#0DFF1C]"
+                : "hover:text-[#0DFF1C]"
+            }`}
+          >
+            <Link to="/about" onClick={() => handleLinkClick("/about")}>
+              About
+            </Link>
+          </li>
+          <li
+            className={`p-4 ${
+              activeLink === "/team" ? "text-[#0DFF1C]" : "hover:text-[#0DFF1C]"
+            }`}
+          >
+            <Link to="/team" onClick={() => handleLinkClick("/team")}>
+              {" "}
+              Team{" "}
+            </Link>
+          </li>
+          <li
+            className={`p-4 ${
+              activeLink === "/resource"
+                ? "text-[#0DFF1C]"
+                : "hover:text-[#0DFF1C]"
+            }`}
+          >
+            <Link to="/resource" onClick={() => handleLinkClick("/resource")}>
+              Resources
+            </Link>
+          </li>
+          <li
+            className={`p-4 ${
+              activeLink === "/contact"
+                ? "text-[#0DFF1C]"
+                : "hover:text-[#0DFF1C]"
+            }`}
+          >
+            <Link to="/contact" onClick={() => handleLinkClick("/contact")}>
+              Contact
+            </Link>
+          </li>
+          <li
+            className={`p-4 ${
+              activeLink === "/shipyard"
+                ? "text-[#0DFF1C]"
+                : "hover:text-[#0DFF1C]"
+            }`}
+          >
+            <Link to="/shipyard" onClick={() => handleLinkClick("/shipyard")}>
+              Shipyard
+            </Link>
+          </li>
+
+          <div className="relative group xl:mr-0 mr-8">
+            <button className="px-4 pt-4 pb-0 hover:text-[#0DFF1C] flex items-center text-white">
+              <span className="mr-1">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="16"
+                  height="16"
+                  fill="currentColor"
+                  className="bi bi-chevron-down"
+                  viewBox="0 0 16 16"
+                >
+                  <path
+                    fillRule="evenodd"
+                    d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"
+                  />
+                </svg>
+              </span>
+              <span>More</span>
+            </button>
+            <div className="translate-x-[-0em] hidden absolute bg-black text-white rounded mt-1 w-36 group-hover:block hover:rounded-md">
+              <a
+                href="/resource"
+                className="block px-4 py-2 hover:text-[#0dff1c]"
+              >
+                Resources
+              </a>
+              <a
+                href="https://docs.fosscu.org"
+                className="block px-4 py-2 hover:text-[#0dff1c]"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                Handbook
+              </a>
+              <a
+                href="https://lu.ma/fosscu"
+                className="block px-4 py-2 hover:text-[#0dff1c]"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                Calendar
+              </a>
+              <a
+                href="https://github.com/FOSS-Community/"
+                className="block px-4 py-2 hover:text-[#0dff1c]"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                Contribute
+              </a>
+            </div>
+          </div>
+        </ul>
+        <div onClick={handleNav} className="block md:hidden">
+          {nav ? <AiOutlineClose size={20} /> : <AiOutlineMenu size={20} />}
+        </div>
+        <div
+          className={
+            nav
+              ? "fixed z-30 left-0 top-0 w-[60%] h-full border-r border-r-grey-900 bg-[#000300] ease-in-out duration-500"
+              : "fixed left-[-100%]"
+          }
+        >
+          <div className="flex flex-col items-center">
+            <RiOpenSourceFill size={65} color="green" />
+            <h1 className="w-full text-3xl font-bold text-[#0DFF1C] m-4">
+              FOSSCU
+            </h1>
+          </div>
+
+          <ul className="uppercase p-4">
+            <li
+              className={`p-4 ${
+                activeLink === "/" ? "text-[#0DFF1C]" : "hover:text-[#0DFF1C]"
+              } border-b border-gray-600`}
+            >
+              <Link to="/" onClick={() => handleLinkClick("/")}>
+                Home
+              </Link>
+            </li>
+            <li
+              className={`p-4 ${
+                activeLink === "/about"
+                  ? "text-[#0DFF1C]"
+                  : "hover:text-[#0DFF1C]"
+              } border-b border-gray-600`}
+            >
+              <Link to="/about" onClick={() => handleLinkClick("/about")}>
+                About
+              </Link>
+            </li>
+            <li
+              className={`p-4 ${
+                activeLink === "/team"
+                  ? "text-[#0DFF1C]"
+                  : "hover:text-[#0DFF1C]"
+              } border-b border-gray-600`}
+            >
+              <Link to="/team" onClick={() => handleLinkClick("/team")}>
+                Team
+              </Link>
+            </li>
+            <li
+              className={`p-4 ${
+                activeLink === "/shipyard"
+                  ? "text-[#0DFF1C]"
+                  : "hover:text-[#0DFF1C]"
+              } border-b border-gray-600`}
+            >
+              <Link to="/shipyard" onClick={() => handleLinkClick("/shipyard")}>
+                Shipyard
+              </Link>
+            </li>
+            <li
+              className={`p-4 ${
+                activeLink === "/resource"
+                  ? "text-[#0DFF1C]"
+                  : "hover:text-[#0DFF1C]"
+              } border-b border-gray-600`}
+            >
+              <Link to="/resource" onClick={() => handleLinkClick("/resource")}>
+                Resources
+              </Link>
+            </li>
+            <li className="p-4 border-b border-gray-600">
+              <a
+                href="https://docs.fosscu.org"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                Handbook
+              </a>
+            </li>
+            <li className="p-4 border-b border-gray-600">
+              <a
+                href="https://github.com/FOSS-Community"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                Projects
+              </a>
+            </li>
+            <li
+              className={`p-4 ${
+                activeLink === "/contact"
+                  ? "text-[#0DFF1C]"
+                  : "hover:text-[#0DFF1C]"
+              } border-b border-gray-600`}
+            >
+              <Link to="/contact" onClick={() => handleLinkClick("/contact")}>
+                Contact
+              </Link>
+            </li>
+            <li className="p-4 border-b border-gray-600">
+              <a
+                href="https://lu.ma/fosscu"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                Calendar
+              </a>
+            </li>
+            <li className="p-4 border-b border-gray-600">
+              <a
+                href="https://github.com/FOSS-Community/"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                Contribute
+              </a>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <Outlet />
+    </>
+  );
+};
+
+export default Navbar;
diff --git a/src/components/Newsletter.js b/src/components/Newsletter.js
new file mode 100644
index 0000000..2b3bf29
--- /dev/null
+++ b/src/components/Newsletter.js
@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const Newsletter = () => {
+    return (_jsx("div", { className: 'w-full py-16 text-white px-4', children: _jsxs("div", { className: 'max-w-[1240px] mx-auto grid lg:grid-cols-3', children: [_jsxs("div", { className: 'lg:col-span-2 my-4', children: [_jsx("h1", { className: 'md:text-4xl sm:text-3xl text-2xl font-bold py-2', children: "Want Latest News of OSS World \uD83C\uDF0D ?" }), _jsx("p", { children: "Sign up for our newsletter to stay up to date." })] }), _jsxs("div", { className: 'my-4', children: [_jsxs("div", { className: 'flex flex-col sm:flex-row items-center justify-between w-full', children: [_jsx("input", { className: 'p-3 flex w-full rounded-md text-black', type: 'email', placeholder: 'Enter Email' }), _jsx("button", { className: 'hover:bg-green-800 bg-[#0dff1c] w-[190px] h-[50px] rounded-md font-medium my-6 ml-4 py-3 px-6 text-black', children: "Notify Me" })] }), _jsxs("p", { children: ["We care about the protection of your data. Read our", ' ', _jsx("a", { href: '/privacypolicy', children: _jsx("span", { className: 'text-[#00df9a] hover:underline hover:underline-offset-4', children: "Privacy Policy" }) }), "."] })] })] }) }));
+};
+export default Newsletter;
diff --git a/src/components/Newsletter.jsx b/src/components/Newsletter.jsx
deleted file mode 100644
index 0aaed29..0000000
--- a/src/components/Newsletter.jsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import React from 'react';
-
-const Newsletter = () => {
-  return (
-    <div className='w-full py-16 text-white px-4'>
-        <div className='max-w-[1240px] mx-auto grid lg:grid-cols-3'>
-          <div className='lg:col-span-2 my-4'>
-            <h1 className='md:text-4xl sm:text-3xl text-2xl font-bold py-2'>Want Latest News of OSS World 🌍 ?</h1>
-            <p>Sign up for our newsletter to stay up to date.</p>
-          </div>
-          <div className='my-4'>
-            <div className='flex flex-col sm:flex-row items-center justify-between w-full'>
-              <input className='p-3 flex w-full rounded-md text-black' type="email" placeholder='Enter Email' />
-              <button className='hover:bg-green-800 bg-[#0dff1c] w-[190px] h-[50px]  rounded-md font-medium my-6 ml-4 py-3 px-6 text-black'>Notify Me</button>
-            </div>
-            <p>We care about the protection of your data. Read our <a href="/privacypolicy"><span className='text-[#00df9a] hover:underline hover:underline-offset-4'>Privacy Policy</span></a>.</p>
-          </div>
-        </div>
-    </div>
-  )
-}
-
-export default Newsletter;
diff --git a/src/components/Newsletter.tsx b/src/components/Newsletter.tsx
new file mode 100644
index 0000000..c408fc9
--- /dev/null
+++ b/src/components/Newsletter.tsx
@@ -0,0 +1,39 @@
+import React from 'react';
+
+const Newsletter: React.FC = () => {
+  return (
+    <div className='w-full py-16 text-white px-4'>
+      <div className='max-w-[1240px] mx-auto grid lg:grid-cols-3'>
+        <div className='lg:col-span-2 my-4'>
+          <h1 className='md:text-4xl sm:text-3xl text-2xl font-bold py-2'>
+            Want Latest News of OSS World 🌍 ?
+          </h1>
+          <p>Sign up for our newsletter to stay up to date.</p>
+        </div>
+        <div className='my-4'>
+          <div className='flex flex-col sm:flex-row items-center justify-between w-full'>
+            <input
+              className='p-3 flex w-full rounded-md text-black'
+              type='email'
+              placeholder='Enter Email'
+            />
+            <button className='hover:bg-green-800 bg-[#0dff1c] w-[190px] h-[50px] rounded-md font-medium my-6 ml-4 py-3 px-6 text-black'>
+              Notify Me
+            </button>
+          </div>
+          <p>
+            We care about the protection of your data. Read our{' '}
+            <a href='/privacypolicy'>
+              <span className='text-[#00df9a] hover:underline hover:underline-offset-4'>
+                Privacy Policy
+              </span>
+            </a>
+            .
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Newsletter;
diff --git a/src/components/PrivacyPolicy.js b/src/components/PrivacyPolicy.js
new file mode 100644
index 0000000..6d2a87b
--- /dev/null
+++ b/src/components/PrivacyPolicy.js
@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const PrivacyPolicy = () => {
+    return (_jsxs("div", { className: "sm:container  text-gray-300 sm:mx-auto p-5 m-4", children: [_jsx("h1", { className: "text-4xl flex flex-auto justify-center font-semibold  text-[#0DFF1C]", children: "Privacy Policy" }), _jsx("br", {}), _jsxs("p", { children: ["Last updated:", " ", _jsx("span", { className: "font-semibold font-serif", children: "June 11, 2023" })] }), _jsx("br", {}), _jsx("p", { className: "font-medium", children: "This Privacy Policy describes Our policies and procedures on the collection, use and disclosure of Your information when You use the Service and tells You about Your privacy rights and how the law protects You." }), _jsxs("p", { className: "font-medium", children: ["We use Your Personal data to provide and improve the Service. By using the Service, You agree to the collection and use of information in accordance with this Privacy Policy.", " "] }), _jsx("br", {}), _jsx("h1", { className: "text-3xl text-white", children: "Interpretation and Definitions" }), _jsx("br", {}), _jsx("h2", { className: "text-2xl text-white", children: "Interpretation" }), _jsx("br", {}), _jsx("p", { children: "The words of which the initial letter is capitalized have meanings defined under the following conditions. The following definitions shall have the same meaning regardless of whether they appear in singular or in plural." }), _jsx("br", {}), _jsx("h2", { className: "text-2xl text-white", children: "Definitions" }), _jsx("br", {}), _jsx("p", { children: "For the purposes of this Privacy Policy:" }), _jsxs("ul", { className: "list-disc p-5", children: [_jsx("li", { children: _jsxs("p", { children: [_jsx("strong", { children: "Account" }), " means a unique account created for You to access our Service or parts of our Service."] }) }), _jsx("li", { children: _jsxs("p", { children: [_jsx("strong", { children: "Affiliate" }), " means an entity that controls, is controlled by or is under common control with a party, where \"control\" means ownership of 50% or more of the shares, equity interest or other securities entitled to vote for election of directors or other managing authority."] }) }), _jsx("li", { children: _jsxs("p", { children: [_jsx("strong", { children: "Company" }), " (referred to as either \"the Company\", \"We\", \"Us\" or \"Our\" in this Agreement) refers to FOSSCU, KIET Group of Institutions, Delhi-NCR, Ghaziabad."] }) }), _jsx("li", { children: _jsxs("p", { children: [_jsx("strong", { children: "Cookies" }), " are small files that are placed on Your computer, mobile device or any other device by a website, containing the details of Your browsing history on that website among its many uses."] }) }), _jsx("li", { children: _jsxs("p", { children: [_jsx("strong", { children: "Country" }), " refers to: India"] }) }), _jsx("li", { children: _jsxs("p", { children: [_jsx("strong", { children: "Device" }), " means any device that can access the Service such as a computer, a cellphone or a digital tablet."] }) }), _jsx("li", { children: _jsxs("p", { children: [_jsx("strong", { children: "Personal Data" }), " is any information that relates to an identified or identifiable individual."] }) }), _jsx("li", { children: _jsxs("p", { children: [_jsx("strong", { children: "Service" }), " refers to the Website."] }) }), _jsx("li", { children: _jsxs("p", { children: [_jsx("strong", { children: "Service Provider" }), " means any natural or legal person who processes the data on behalf of the Company. It refers to third-party companies or individuals employed by the Company to facilitate the Service, to provide the Service on behalf of the Company, to perform services related to the Service or to assist the Company in analyzing how the Service is used."] }) }), _jsx("li", { children: _jsxs("p", { children: [_jsx("strong", { children: "Usage Data" }), " refers to data collected automatically, either generated by the use of the Service or from the Service infrastructure itself (for example, the duration of a page visit)."] }) }), _jsx("li", { children: _jsxs("p", { children: [_jsx("strong", { children: "Website" }), " refers to FOSSCU, accessible from", " ", _jsx("a", { className: "text-[#0dff1c] hover:underline ", href: "/", children: "https://fosscu.org/" })] }) }), _jsx("li", { children: _jsxs("p", { children: [_jsx("strong", { children: "You" }), " means the individual accessing or using the Service, or the company, or other legal entity on behalf of which such individual is accessing or using the Service, as applicable."] }) })] }), _jsx("h1", { className: "text-3xl text-white", children: "Collecting and Using Your Personal Data" }), _jsx("br", {}), _jsx("h2", { className: "text-2xl text-white", children: "Types of Data Collected" }), _jsx("br", {}), _jsx("h3", { className: "text-2xl text-white", children: "Personal Data" }), _jsx("br", {}), _jsx("p", { children: "While using Our Service, We may ask You to provide Us with certain personally identifiable information that can be used to contact or identify You. Personally identifiable information may include, but is not limited to:" }), _jsxs("ul", { className: "list-disc p-5", children: [_jsx("li", { children: _jsx("p", { children: "Email address" }) }), _jsx("li", { children: _jsx("p", { children: "First name and last name" }) }), _jsx("li", { children: _jsx("p", { children: "Usage Data" }) })] }), _jsx("h3", { className: "text-2xl text-white", children: "Usage Data" }), _jsx("br", {}), _jsx("p", { children: "Usage Data is collected automatically when using the Service." }), _jsx("p", { className: "mt-2", children: "Usage Data may include information such as Your Device's Internet Protocol address (e.g. IP address), browser type, browser version, the pages of our Service that You visit, the time and date of Your visit, the time spent on those pages, unique device identifiers and other diagnostic data." }), _jsx("p", { className: "mt-2", children: "When You access the Service by or through a mobile device, We may collect certain information automatically, including, but not limited to, the type of mobile device You use, Your mobile device unique ID, the IP address of Your mobile device, Your mobile operating system, the type of mobile Internet browser You use, unique device identifiers and other diagnostic data." }), _jsx("p", { className: "mt-2", children: "We may also collect information that Your browser sends whenever You visit our Service or when You access the Service by or through a mobile device." }), _jsx("br", {}), _jsx("h3", { className: "text-2xl text-white", children: "Tracking Technologies and Cookies" }), _jsx("br", {}), _jsx("p", { children: "We use Cookies and similar tracking technologies to track the activity on Our Service and store certain information. Tracking technologies used are beacons, tags, and scripts to collect and track information and to improve and analyze Our Service. The technologies We use may include:" }), _jsxs("ul", { className: "list-disc p-5", children: [_jsxs("li", { children: [_jsx("strong", { children: "Cookies or Browser Cookies." }), " A cookie is a small file placed on Your Device. You can instruct Your browser to refuse all Cookies or to indicate when a Cookie is being sent. However, if You do not accept Cookies, You may not be able to use some parts of our Service. Unless you have adjusted Your browser setting so that it will refuse Cookies, our Service may use Cookies."] }), _jsxs("li", { children: [_jsx("strong", { children: "Web Beacons." }), " Certain sections of our Service and our emails may contain small electronic files known as web beacons (also referred to as clear gifs, pixel tags, and single-pixel gifs) that permit the Company, for example, to count users who have visited those pages or opened an email and for other related website statistics (for example, recording the popularity of a certain section and verifying system and server integrity)."] })] }), _jsxs("p", { children: ["Cookies can be \"Persistent\" or \"Session\" Cookies. Persistent Cookies remain on Your personal computer or mobile device when You go offline, while Session Cookies are deleted as soon as You close Your web browser.", " "] }), _jsx("p", { children: "We use both Session and Persistent Cookies for the purposes set out below:" }), _jsxs("ul", { className: "list-disc p-5", children: [_jsxs("li", { children: [_jsx("p", { children: _jsx("strong", { children: "Necessary / Essential Cookies" }) }), _jsx("p", { children: "Type: Session Cookies" }), _jsx("p", { children: "Administered by: Us" }), _jsx("p", { children: "Purpose: These Cookies are essential to provide You with services available through the Website and to enable You to use some of its features. They help to authenticate users and prevent fraudulent use of user accounts. Without these Cookies, the services that You have asked for cannot be provided, and We only use these Cookies to provide You with those services." })] }), _jsxs("li", { children: [_jsx("p", { children: _jsx("strong", { children: "Cookies Policy / Notice Acceptance Cookies" }) }), _jsx("p", { children: "Type: Persistent Cookies" }), _jsx("p", { children: "Administered by: Us" }), _jsx("p", { children: "Purpose: These Cookies identify if users have accepted the use of cookies on the Website." })] }), _jsxs("li", { children: [_jsx("p", { children: _jsx("strong", { children: "Functionality Cookies" }) }), _jsx("p", { children: "Type: Persistent Cookies" }), _jsx("p", { children: "Administered by: Us" }), _jsx("p", { children: "Purpose: These Cookies allow us to remember choices You make when You use the Website, such as remembering your login details or language preference. The purpose of these Cookies is to provide You with a more personal experience and to avoid You having to re-enter your preferences every time You use the Website." })] })] }), _jsx("p", { children: "For more information about the cookies we use and your choices regarding cookies, please visit our Cookies Policy or the Cookies section of our Privacy Policy." }), _jsx("br", {}), _jsx("h2", { className: "text-2xl text-white", children: "Use of Your Personal Data" }), _jsx("br", {}), _jsx("p", { children: "The Company may use Personal Data for the following purposes:" }), _jsxs("ul", { className: "list-disc p-5", children: [_jsx("li", { children: _jsxs("p", { children: [_jsx("strong", { children: "To provide and maintain our Service" }), ", including to monitor the usage of our Service."] }) }), _jsx("li", { children: _jsxs("p", { children: [_jsx("strong", { children: "To manage Your Account:" }), " to manage Your registration as a user of the Service. The Personal Data You provide can give You access to different functionalities of the Service that are available to You as a registered user."] }) }), _jsx("li", { children: _jsxs("p", { children: [_jsx("strong", { children: "For the performance of a contract:" }), " the development, compliance and undertaking of the purchase contract for the products, items or services You have purchased or of any other contract with Us through the Service."] }) }), _jsx("li", { children: _jsxs("p", { children: [_jsx("strong", { children: "To contact You:" }), " To contact You by email, telephone calls, SMS, or other equivalent forms of electronic communication, such as a mobile application's push notifications regarding updates or informative communications related to the functionalities, products or contracted services, including the security updates, when necessary or reasonable for their implementation."] }) }), _jsx("li", { children: _jsxs("p", { children: [_jsx("strong", { children: "To provide You" }), " with news, special offers and general information about other goods, services and events which we offer that are similar to those that you have already purchased or enquired about unless You have opted not to receive such information."] }) }), _jsx("li", { children: _jsxs("p", { children: [_jsx("strong", { children: "To manage Your requests:" }), " To attend and manage Your requests to Us."] }) }), _jsx("li", { children: _jsxs("p", { children: [_jsx("strong", { children: "For business transfers:" }), " We may use Your information to evaluate or conduct a merger, divestiture, restructuring, reorganization, dissolution, or other sale or transfer of some or all of Our assets, whether as a going concern or as part of bankruptcy, liquidation, or similar proceeding, in which Personal Data held by Us about our Service users is among the assets transferred."] }) }), _jsx("li", { children: _jsxs("p", { children: [_jsx("strong", { children: "For other purposes" }), ": We may use Your information for other purposes, such as data analysis, identifying usage trends, determining the effectiveness of our promotional campaigns and to evaluate and improve our Service, products, services, marketing and your experience."] }) })] }), _jsx("p", { children: "We may share Your personal information in the following situations:" }), _jsxs("ul", { className: "list-disc p-5", children: [_jsxs("li", { children: [_jsx("strong", { children: "With Service Providers:" }), " We may share Your personal information with Service Providers to monitor and analyze the use of our Service, to contact You."] }), _jsxs("li", { children: [_jsx("strong", { children: "For business transfers:" }), " We may share or transfer Your personal information in connection with, or during negotiations of, any merger, sale of Company assets, financing, or acquisition of all or a portion of Our business to another company."] }), _jsxs("li", { children: [_jsx("strong", { children: "With Affiliates:" }), " We may share Your information with Our affiliates, in which case we will require those affiliates to honor this Privacy Policy. Affiliates include Our parent company and any other subsidiaries, joint venture partners or other companies that We control or that are under common control with Us."] }), _jsxs("li", { children: [_jsx("strong", { children: "With business partners:" }), " We may share Your information with Our business partners to offer You certain products, services or promotions."] }), _jsxs("li", { children: [_jsx("strong", { children: "With other users:" }), " when You share personal information or otherwise interact in the public areas with other users, such information may be viewed by all users and may be publicly distributed outside."] }), _jsxs("li", { children: [_jsx("strong", { children: "With Your consent" }), ": We may disclose Your personal information for any other purpose with Your consent."] })] }), _jsx("h2", { className: "text-2xl text-white", children: "Retention of Your Personal Data" }), _jsx("br", {}), _jsx("p", { children: "The Company will retain Your Personal Data only for as long as is necessary for the purposes set out in this Privacy Policy. We will retain and use Your Personal Data to the extent necessary to comply with our legal obligations (for example, if we are required to retain your data to comply with applicable laws), resolve disputes, and enforce our legal agreements and policies." }), _jsx("p", { className: "mt-2", children: "The Company will also retain Usage Data for internal analysis purposes. Usage Data is generally retained for a shorter period of time, except when this data is used to strengthen the security or to improve the functionality of Our Service, or We are legally obligated to retain this data for longer time periods." }), _jsx("br", {}), _jsx("h2", { className: "text-2xl text-white", children: "Transfer of Your Personal Data" }), _jsx("br", {}), _jsx("p", { children: "Your information, including Personal Data, is processed at the Company's operating offices and in any other places where the parties involved in the processing are located. It means that this information may be transferred to \u2014 and maintained on \u2014 computers located outside of Your state, province, country or other governmental jurisdiction where the data protection laws may differ than those from Your jurisdiction." }), _jsx("p", { className: "mt-2", children: "Your consent to this Privacy Policy followed by Your submission of such information represents Your agreement to that transfer." }), _jsx("p", { className: "mt-2", children: "The Company will take all steps reasonably necessary to ensure that Your data is treated securely and in accordance with this Privacy Policy and no transfer of Your Personal Data will take place to an organization or a country unless there are adequate controls in place including the security of Your data and other personal information." }), _jsx("br", {}), _jsx("h2", { className: "text-2xl text-white", children: "Delete Your Personal Data" }), _jsx("br", {}), _jsx("p", { children: "You have the right to delete or request that We assist in deleting the Personal Data that We have collected about You." }), _jsx("p", { className: "mt-2", children: "Our Service may give You the ability to delete certain information about You from within the Service." }), _jsx("p", { className: "mt-2", children: "You may update, amend, or delete Your information at any time by signing in to Your Account, if you have one, and visiting the account settings section that allows you to manage Your personal information. You may also contact Us to request access to, correct, or delete any personal information that You have provided to Us." }), _jsx("p", { className: "mt-2", children: "Please note, however, that We may need to retain certain information when we have a legal obligation or lawful basis to do so." }), _jsx("br", {}), _jsx("h2", { className: "text-2xl text-white", children: "Disclosure of Your Personal Data" }), _jsx("br", {}), _jsx("h3", { className: "text-xl text-white", children: "Business Transactions" }), _jsx("br", {}), _jsx("p", { children: "If the Company is involved in a merger, acquisition or asset sale, Your Personal Data may be transferred. We will provide notice before Your Personal Data is transferred and becomes subject to a different Privacy Policy." }), _jsx("br", {}), _jsx("h3", { className: "text-xl text-white", children: "Law enforcement" }), _jsx("br", {}), _jsx("p", { children: "Under certain circumstances, the Company may be required to disclose Your Personal Data if required to do so by law or in response to valid requests by public authorities (e.g. a court or a government agency)." }), _jsx("br", {}), _jsx("h3", { className: "text-xl text-white", children: "Other legal requirements" }), _jsx("br", {}), _jsx("p", { children: "The Company may disclose Your Personal Data in the good faith belief that such action is necessary to:" }), _jsxs("ul", { className: "list-disc p-5", children: [_jsx("li", { children: "Comply with a legal obligation" }), _jsx("li", { children: "Protect and defend the rights or property of the Company" }), _jsx("li", { children: "Prevent or investigate possible wrongdoing in connection with the Service" }), _jsx("li", { children: "Protect the personal safety of Users of the Service or the public" }), _jsx("li", { children: "Protect against legal liability" })] }), _jsx("h2", { className: "text-2xl text-white", children: "Security of Your Personal Data" }), _jsx("br", {}), _jsx("p", { children: "The security of Your Personal Data is important to Us, but remember that no method of transmission over the Internet, or method of electronic storage is 100% secure. While We strive to use commercially acceptable means to protect Your Personal Data, We cannot guarantee its absolute security." }), _jsx("br", {}), _jsx("h1", { className: "text-3xl text-white", children: "Children's Privacy" }), _jsx("br", {}), _jsx("p", { children: "Our Service does not address anyone under the age of 13. We do not knowingly collect personally identifiable information from anyone under the age of 13. If You are a parent or guardian and You are aware that Your child has provided Us with Personal Data, please contact Us. If We become aware that We have collected Personal Data from anyone under the age of 13 without verification of parental consent, We take steps to remove that information from Our servers." }), _jsx("p", { className: "mt-2", children: "If We need to rely on consent as a legal basis for processing Your information and Your country requires consent from a parent, We may require Your parent's consent before We collect and use that information." }), _jsx("br", {}), _jsx("h1", { className: "text-3xl text-white", children: "Links to Other Websites" }), _jsx("br", {}), _jsx("p", { children: "Our Service may contain links to other websites that are not operated by Us. If You click on a third party link, You will be directed to that third party's site. We strongly advise You to review the Privacy Policy of every site You visit." }), _jsx("p", { className: "mt-2", children: "We have no control over and assume no responsibility for the content, privacy policies or practices of any third party sites or services." }), _jsx("br", {}), _jsx("h1", { className: "text-3xl text-white", children: "Changes to this Privacy Policy" }), _jsx("br", {}), _jsx("p", { children: "We may update Our Privacy Policy from time to time. We will notify You of any changes by posting the new Privacy Policy on this page." }), _jsx("p", { className: "mt-2", children: "We will let You know via email and/or a prominent notice on Our Service, prior to the change becoming effective and update the \"Last updated\" date at the top of this Privacy Policy." }), _jsx("p", { className: "mt-2", children: "You are advised to review this Privacy Policy periodically for any changes. Changes to this Privacy Policy are effective when they are posted on this page." }), _jsx("br", {}), _jsx("h1", { className: "text-3xl text-white", children: "Contact Us" }), _jsx("br", {}), _jsx("p", { children: "If you have any questions about this Privacy Policy, You can contact us:" }), _jsx("ul", { className: "list-disc p-5 ", children: _jsxs("li", { children: ["By visiting this page on our website:", " ", _jsx("a", { className: "text-[#0dff1c] hover:underline", href: "/contact", children: "https://fosscu.org/contact" })] }) })] }));
+};
+export default PrivacyPolicy;
diff --git a/src/components/PrivacyPolicy.jsx b/src/components/PrivacyPolicy.tsx
similarity index 97%
rename from src/components/PrivacyPolicy.jsx
rename to src/components/PrivacyPolicy.tsx
index cd6588a..a3817da 100644
--- a/src/components/PrivacyPolicy.jsx
+++ b/src/components/PrivacyPolicy.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 
-const PrivacyPolicy = () => {
+const PrivacyPolicy: React.FC  = () => {
   return (
     <div className="sm:container  text-gray-300 sm:mx-auto p-5 m-4">
       <h1 className="text-4xl flex flex-auto justify-center font-semibold  text-[#0DFF1C]">
@@ -158,8 +158,8 @@ const PrivacyPolicy = () => {
       <br></br>
       <p>Usage Data is collected automatically when using the Service.</p>
       <p className="mt-2">
-        Usage Data may include information such as Your Device's Internet
-        Protocol address (e.g. IP address), browser type, browser version, the
+      Usage Data may include information such as Your Device&apos;s Internet
+      Protocol address (e.g. IP address), browser type, browser version, the
         pages of our Service that You visit, the time and date of Your visit,
         the time spent on those pages, unique device identifiers and other
         diagnostic data.
@@ -293,7 +293,7 @@ const PrivacyPolicy = () => {
           <p>
             <strong>To contact You:</strong> To contact You by email, telephone
             calls, SMS, or other equivalent forms of electronic communication,
-            such as a mobile application's push notifications regarding updates
+            such as a mobile application&apos;s push notifications regarding updates
             or informative communications related to the functionalities,
             products or contracted services, including the security updates,
             when necessary or reasonable for their implementation.
@@ -392,7 +392,7 @@ const PrivacyPolicy = () => {
       <h2 className="text-2xl text-white">Transfer of Your Personal Data</h2>
       <br></br>
       <p>
-        Your information, including Personal Data, is processed at the Company's
+        Your information, including Personal Data, is processed at the Company&apos;s
         operating offices and in any other places where the parties involved in
         the processing are located. It means that this information may be
         transferred to — and maintained on — computers located outside of Your
@@ -480,7 +480,7 @@ const PrivacyPolicy = () => {
         security.
       </p>
       <br></br>
-      <h1 className="text-3xl text-white">Children's Privacy</h1>
+      <h1 className="text-3xl text-white">Children&apos;s Privacy</h1>
       <br></br>
       <p>
         Our Service does not address anyone under the age of 13. We do not
@@ -494,7 +494,7 @@ const PrivacyPolicy = () => {
       <p className="mt-2">
         If We need to rely on consent as a legal basis for processing Your
         information and Your country requires consent from a parent, We may
-        require Your parent's consent before We collect and use that
+        require Your parent&apos;s consent before We collect and use that
         information.
       </p>
       <br></br>
@@ -503,7 +503,7 @@ const PrivacyPolicy = () => {
       <p>
         Our Service may contain links to other websites that are not operated by
         Us. If You click on a third party link, You will be directed to that
-        third party's site. We strongly advise You to review the Privacy Policy
+        third party&apos;s site. We strongly advise You to review the Privacy Policy
         of every site You visit.
       </p>
       <p className="mt-2">
diff --git a/src/components/Resource.js b/src/components/Resource.js
new file mode 100644
index 0000000..3045eb5
--- /dev/null
+++ b/src/components/Resource.js
@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import frontend from "../assets/img/resources_icons/frontend.svg";
+import backend from "../assets/img/resources_icons/backend.svg";
+import app from "../assets/img/resources_icons/app.svg";
+import aiml from "../assets/img/resources_icons/aiml.svg";
+import web3 from "../assets/img/resources_icons/web3.svg";
+const Resource = () => {
+    return (_jsxs("div", { children: [_jsx("h1", { className: "w-full mt-20 mb-24 text-white px-4 tracking-tight text-center text-5xl", children: "Tech Resources for Developers" }), _jsxs("div", { className: "flex flex-wrap mt-26 mb-24 space-x-1 justify-center gap-4 md:gap-4 sm:gap-4", children: [_jsxs("a", { href: "/frontend", className: "w-[280px] h-[285px] my-2 flex flex-col shadow-lg shadow-[#00df9a] transition-shadow hover:bg-opacity-90 duration-[320ms] bg-gray-900 rounded-lg text-green-400 hover:bg-[#00df9a] hover:shadow-none transition-color hover:text-white transition-color", children: [_jsx("img", { src: frontend, alt: "Frontend development icon", className: "w-[11.9rem] h-40 ml-6 mt-4 mb-3" }), _jsx("h2", { className: "text-center font-bold text-xl mb-0.5", children: "FRONTEND" }), _jsx("p", { className: "flex flex-col text-center text-white text-md mb-1 px-16", children: "The Complete Guide to Frontend" })] }), _jsxs("a", { href: "/building", className: "w-[280px] h-[285px] my-2 flex flex-col shadow-lg shadow-[#00df9a] transition-shadow hover:bg-opacity-90 duration-[320ms] bg-gray-900 rounded-lg text-green-400 hover:bg-[#00df9a] hover:shadow-none transition-color hover:text-white transition-color", children: [_jsx("img", { src: backend, alt: "Backend development icon", className: "w-40 mx-11 mt-4 mb-3" }), _jsx("h2", { className: "text-center font-bold text-xl mb-0.5", children: "BACKEND" }), _jsx("p", { className: "flex flex-col text-center text-white text-md mb-1 px-16", children: "The Complete Guide to Backend" })] }), _jsxs("a", { href: "/building", className: "w-[280px] h-[285px] my-2 flex flex-col shadow-lg shadow-[#00df9a] transition-shadow hover:bg-opacity-90 duration-[320ms] bg-gray-900 rounded-lg text-green-400 hover:bg-[#00df9a] hover:shadow-none transition-color hover:text-white transition-color", children: [_jsx("img", { src: web3, alt: "Web 3.0 icon", className: "w-32 mt-12 mb-6 mx-auto" }), _jsx("h2", { className: "text-center font-bold text-xl mb-0.5", children: "WEB 3.O" }), _jsxs("p", { className: "flex flex-col text-center text-white text-md px-4", children: ["The Complete Guide ", _jsx("br", {}), "to Web 3.O"] })] }), _jsxs("a", { href: "/building", className: "w-[280px] h-[285px] my-2 flex flex-col shadow-lg shadow-[#00df9a] transition-shadow hover:bg-opacity-90 duration-[320ms] bg-gray-900 rounded-lg text-green-400 hover:bg-[#00df9a] hover:shadow-none transition-color hover:text-white transition-color", children: [_jsx("img", { src: app, alt: "App development icon", className: "w-36 ml-16 mt-12" }), _jsx("h2", { className: "text-center font-bold text-xl mb-0.5", children: "APP DEVELOPMENT" }), _jsx("p", { className: "flex flex-col text-center text-white text-md mb-1 px-16", children: "The Complete Guide to App Dev" })] }), _jsxs("a", { href: "/building", className: "w-[280px] h-[285px] my-2 flex flex-col shadow-lg shadow-[#00df9a] transition-shadow hover:bg-opacity-90 duration-[320ms] bg-gray-900 rounded-lg text-green-400 hover:bg-[#00df9a] hover:shadow-none transition-color hover:text-white transition-color", children: [_jsx("img", { src: aiml, alt: "AI/ML icon", className: "w-[10.5rem] mx-auto mt-9 mb-4" }), _jsx("h2", { className: "text-center font-bold text-xl mb-0.5", children: "AI/ML" }), _jsxs("p", { className: "flex flex-col text-center text-white text-md px-4", children: ["The Complete Guide ", _jsx("br", {}), "to AI/ML"] })] })] })] }));
+};
+export default Resource;
diff --git a/src/components/Resource.jsx b/src/components/Resource.jsx
deleted file mode 100644
index b01cc15..0000000
--- a/src/components/Resource.jsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import React from "react";
-import frontend from "../assets/img/resources_icons/frontend.svg"
-import backend from "../assets/img/resources_icons/backend.svg"
-import app from "../assets/img/resources_icons/app.svg"
-import aiml from "../assets/img/resources_icons/aiml.svg"
-import web3 from "../assets/img/resources_icons/web3.svg"   
-
-
-const Resource = () => {
-    return (
-        <div>
-            <h1 className="w-full mt-20 mb-24  text-white px-4  tracking-tight  text-center text-5xl">Tech Resources for Developers</h1>
-
-            <div className='flex flex-wrap  mt-26 mb-24 space-x-1 justify-center gap-4 md:gap-4 sm:gap-4'>
-
-                <a href="/frontend" className='w-[280px] h-[285px] my-2 flex flex-col shadow-lg shadow-[#00df9a] transition-shadow  hover:bg-opacity-90  duration-[320ms] bg-gray-900 rounded-lg text-green-400 hover:bg-[#00df9a] hover:shadow-none transition-color hover:text-white transition-color'>
-                    <img src={frontend} alt='' className='w-[11.9rem] h-40 ml-6  mt-4 mb-3' />
-                    <h2 className='text-center font-bold text-xl mb-0.5'>FRONTEND</h2>
-                    <p className='flex flex-col text-center text-white text-md mb-1 px-16'>The Complete Guide to Frontend </p>
-                </a>
-
-                <a href="/building" className='w-[280px] h-[285px] my-2 flex flex-col shadow-lg shadow-[#00df9a]  transition-shadow  hover:bg-opacity-90  duration-[320ms] bg-gray-900 rounded-lg text-green-400  hover:bg-[#00df9a] hover:shadow-none transition-color hover:text-white transition-color'>
-                    <img src={backend} alt='' className='w-40 mx-11 mt-4 mb-3' />
-                    <h2 className='text-center font-bold text-xl  mb-0.5'>BACKEND</h2>
-                    <p className='flex flex-col text-center text-white  text-md mb-1 px-16'>The Complete Guide to Backend </p>
-                </a>
-
-                <a href="/building" className='w-[280px] h-[285px] my-2 flex flex-col shadow-lg  shadow-[#00df9a]  transition-shadow  hover:bg-opacity-90  duration-[320ms]  bg-gray-900  rounded-lg text-green-400 hover:bg-[#00df9a] hover:shadow-none transition-color hover:text-white transition-color'>
-                    <img src={web3} alt='' className='w-32 mt-12 mb-6 mx-auto' />
-                    <h2 className='text-center font-bold text-xl mb-0.5'>WEB 3.O</h2>
-                    <p className='flex flex-col text-center text-white text-md px-4'>The Complete Guide <br></br> to Web 3.O  </p>
-                </a>
-
-                <a href="/building" className='w-[280px] h-[285px] my-2 flex flex-col shadow-lg shadow-[#00df9a] transition-shadow  hover:bg-opacity-90  duration-[320ms] bg-gray-900 rounded-lg text-green-400 hover:bg-[#00df9a] hover:shadow-none transition-color hover:text-white transition-color'>
-                    <img src={app} alt='' className='w-36 ml-16 -mb-0 mt-12 ' />
-                    <h2 className=' text-center font-bold text-xl mb-0.5'>APP DEVELOPMENT</h2>
-                    <p className='flex flex-col text-center text-white text-md mb-1 px-16'>The Complete Guide to App Dev </p>
-                </a>
-
-                <a href="/building" className='w-[280px] h-[285px] my-2 flex flex-col shadow-lg shadow-[#00df9a] transition-shadow  hover:bg-opacity-90  duration-[320ms] bg-gray-900 rounded-lg text-green-400 hover:bg-[#00df9a] hover:shadow-none transition-color hover:text-white transition-color'>
-                    <img src={aiml} alt='' className='w-[10.5rem] mx-auto mt-9 -mb-4' />
-                    <h2 className='text-center font-bold text-xl mb-0.5'>AI/ML</h2>
-                    <p className='flex flex-col text-center text-white text-md px-4'>The Complete Guide <br></br> to  AI/ML </p>
-                </a>
-
-            </div>
-
-        </div>
-    );
-};
-
-export default Resource;
\ No newline at end of file
diff --git a/src/components/Resource.tsx b/src/components/Resource.tsx
new file mode 100644
index 0000000..de4535b
--- /dev/null
+++ b/src/components/Resource.tsx
@@ -0,0 +1,99 @@
+import React from "react";
+import frontend from "../assets/img/resources_icons/frontend.svg";
+import backend from "../assets/img/resources_icons/backend.svg";
+import app from "../assets/img/resources_icons/app.svg";
+import aiml from "../assets/img/resources_icons/aiml.svg";
+import web3 from "../assets/img/resources_icons/web3.svg";
+
+const Resource: React.FC = () => {
+  return (
+    <div>
+      <h1 className="w-full mt-20 mb-24 text-white px-4 tracking-tight text-center text-5xl">
+        Tech Resources for Developers
+      </h1>
+
+      <div className="flex flex-wrap mt-26 mb-24 space-x-1 justify-center gap-4 md:gap-4 sm:gap-4">
+        <a
+          href="/frontend"
+          className="w-[280px] h-[285px] my-2 flex flex-col shadow-lg shadow-[#00df9a] transition-shadow hover:bg-opacity-90 duration-[320ms] bg-gray-900 rounded-lg text-green-400 hover:bg-[#00df9a] hover:shadow-none transition-color hover:text-white transition-color"
+        >
+          <img
+            src={frontend}
+            alt="Frontend development icon"
+            className="w-[11.9rem] h-40 ml-6 mt-4 mb-3"
+          />
+          <h2 className="text-center font-bold text-xl mb-0.5">FRONTEND</h2>
+          <p className="flex flex-col text-center text-white text-md mb-1 px-16">
+            The Complete Guide to Frontend
+          </p>
+        </a>
+
+        <a
+          href="/building"
+          className="w-[280px] h-[285px] my-2 flex flex-col shadow-lg shadow-[#00df9a] transition-shadow hover:bg-opacity-90 duration-[320ms] bg-gray-900 rounded-lg text-green-400 hover:bg-[#00df9a] hover:shadow-none transition-color hover:text-white transition-color"
+        >
+          <img
+            src={backend}
+            alt="Backend development icon"
+            className="w-40 mx-11 mt-4 mb-3"
+          />
+          <h2 className="text-center font-bold text-xl mb-0.5">BACKEND</h2>
+          <p className="flex flex-col text-center text-white text-md mb-1 px-16">
+            The Complete Guide to Backend
+          </p>
+        </a>
+
+        <a
+          href="/building"
+          className="w-[280px] h-[285px] my-2 flex flex-col shadow-lg shadow-[#00df9a] transition-shadow hover:bg-opacity-90 duration-[320ms] bg-gray-900 rounded-lg text-green-400 hover:bg-[#00df9a] hover:shadow-none transition-color hover:text-white transition-color"
+        >
+          <img
+            src={web3}
+            alt="Web 3.0 icon"
+            className="w-32 mt-12 mb-6 mx-auto"
+          />
+          <h2 className="text-center font-bold text-xl mb-0.5">WEB 3.O</h2>
+          <p className="flex flex-col text-center text-white text-md px-4">
+            The Complete Guide <br />
+            to Web 3.O
+          </p>
+        </a>
+
+        <a
+          href="/building"
+          className="w-[280px] h-[285px] my-2 flex flex-col shadow-lg shadow-[#00df9a] transition-shadow hover:bg-opacity-90 duration-[320ms] bg-gray-900 rounded-lg text-green-400 hover:bg-[#00df9a] hover:shadow-none transition-color hover:text-white transition-color"
+        >
+          <img
+            src={app}
+            alt="App development icon"
+            className="w-36 ml-16 mt-12"
+          />
+          <h2 className="text-center font-bold text-xl mb-0.5">
+            APP DEVELOPMENT
+          </h2>
+          <p className="flex flex-col text-center text-white text-md mb-1 px-16">
+            The Complete Guide to App Dev
+          </p>
+        </a>
+
+        <a
+          href="/building"
+          className="w-[280px] h-[285px] my-2 flex flex-col shadow-lg shadow-[#00df9a] transition-shadow hover:bg-opacity-90 duration-[320ms] bg-gray-900 rounded-lg text-green-400 hover:bg-[#00df9a] hover:shadow-none transition-color hover:text-white transition-color"
+        >
+          <img
+            src={aiml}
+            alt="AI/ML icon"
+            className="w-[10.5rem] mx-auto mt-9 mb-4"
+          />
+          <h2 className="text-center font-bold text-xl mb-0.5">AI/ML</h2>
+          <p className="flex flex-col text-center text-white text-md px-4">
+            The Complete Guide <br />
+            to AI/ML
+          </p>
+        </a>
+      </div>
+    </div>
+  );
+};
+
+export default Resource;
diff --git a/src/components/Roadmaps.js b/src/components/Roadmaps.js
new file mode 100644
index 0000000..f32b046
--- /dev/null
+++ b/src/components/Roadmaps.js
@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const Roadmaps = (props) => {
+    return (_jsx("div", { children: _jsx("div", { className: "details-section z-10 lg:ml-80 ", children: _jsx("section", { className: "", children: _jsxs("div", { className: "py-8 px-4 mx-auto max-w-screen-xl lg:py-16 lg:px-6", children: [_jsxs("div", { className: "max-w-screen-lg sm:text-lg text-gray-100", children: [_jsx("h2", { className: "text-4xl mb-12 tracking-tight font-bold text-white", children: props.head }), _jsx("p", { className: "mb-4", children: props.para1 }), _jsx("p", { className: "mb-4", children: props.para2 }), _jsx("p", { className: "mb-4 font-medium", children: props.para3 }), _jsxs("a", { href: props.link ? props.link : props.videoLink, target: "_blank", rel: "noopener noreferrer", className: "inline-flex items-center font-medium hover:underline hover:text-primary-800 text-primary-700", children: ["Learn more", _jsx("svg", { className: "ml-1 w-6 h-6", fill: "currentColor", viewBox: "0 0 20 20", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { fillRule: "evenodd", d: "M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z", clipRule: "evenodd" }) })] })] }), props.videoLink ? (_jsx("div", { className: "aspect-video flex flex-col items-start mt-6", children: _jsx("iframe", { className: "rounded-lg w-full h-full", src: props.videoLink, title: "YouTube video player", frameBorder: "0", allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share", allowFullScreen: true, loading: "lazy" }) })) : null] }) }) }) }));
+};
+export default Roadmaps;
diff --git a/src/components/Roadmaps.jsx b/src/components/Roadmaps.jsx
deleted file mode 100644
index e9b6d12..0000000
--- a/src/components/Roadmaps.jsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import React from "react";
-
-const Roadmaps = (props) => {
-
-    return (
-        <div>
-            <div className="details-section z-10 lg:ml-80 ">
-                <section className="">
-                    <div className="py-8 px-4 mx-auto max-w-screen-xl lg:py-16 lg:px-6">
-                        <div className="max-w-screen-lg  sm:text-lg text-gray-100">
-                            <h2 className=" text-4xl mb-12 tracking-tight font-bold text-white">{props.head}
-                            </h2>
-                            <p className="mb-4 ">{props.para1}
-                            </p>
-                            <p className="mb-4 ">{props.para2}</p>
-                            <p className="mb-4 font-medium">{props.para3}
-                            </p>
-                            <a href={props.link ? props.link : props.videoLink} target="_blank"
-                                className="inline-flex items-center font-medium hover:underline hover:text-primary-800  text-primary-700">
-                                Learn more
-                                <svg className="ml-1 w-6 h-6" fill="currentColor" viewBox="0 0 20 20"
-                                    xmlns="http://www.w3.org/2000/svg">
-                                    <path fillRule="evenodd"
-                                        d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
-                                        clip-rule="evenodd"></path>
-                                </svg>
-                            </a>
-                        </div>
-                        {props.videoLink ?
-                            (<div className="aspect-video flex flex-col items-start mt-6">
-                                <iframe className=" rounded-lg w-full h-full " target="_blank" src={props.videoLink}
-                                    title="YouTube video player" frameborder="0"
-                                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-                                    allowfullscreen loading=""></iframe>
-                            </div>)
-                            :
-                            null
-                        }
-                    </div>
-                </section>
-            </div>
-        </div>
-    )
-}
-
-export default Roadmaps;
\ No newline at end of file
diff --git a/src/components/Roadmaps.tsx b/src/components/Roadmaps.tsx
new file mode 100644
index 0000000..6878947
--- /dev/null
+++ b/src/components/Roadmaps.tsx
@@ -0,0 +1,66 @@
+import React from "react";
+
+interface RoadmapsProps {
+  head: string;
+  para1: string;
+  para2: string;
+  para3: string;
+  link?: string;
+  videoLink?: string;
+}
+
+const Roadmaps: React.FC<RoadmapsProps> = (props) => {
+  return (
+    <div>
+      <div className="details-section z-10 lg:ml-80 ">
+        <section className="">
+          <div className="py-8 px-4 mx-auto max-w-screen-xl lg:py-16 lg:px-6">
+            <div className="max-w-screen-lg sm:text-lg text-gray-100">
+              <h2 className="text-4xl mb-12 tracking-tight font-bold text-white">
+                {props.head}
+              </h2>
+              <p className="mb-4">{props.para1}</p>
+              <p className="mb-4">{props.para2}</p>
+              <p className="mb-4 font-medium">{props.para3}</p>
+              <a
+                href={props.link ? props.link : props.videoLink}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="inline-flex items-center font-medium hover:underline hover:text-primary-800 text-primary-700"
+              >
+                Learn more
+                <svg
+                  className="ml-1 w-6 h-6"
+                  fill="currentColor"
+                  viewBox="0 0 20 20"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    fillRule="evenodd"
+                    d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
+                    clipRule="evenodd"
+                  ></path>
+                </svg>
+              </a>
+            </div>
+            {props.videoLink ? (
+              <div className="aspect-video flex flex-col items-start mt-6">
+                <iframe
+                  className="rounded-lg w-full h-full"
+                  src={props.videoLink}
+                  title="YouTube video player"
+                  frameBorder="0"
+                  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                  allowFullScreen
+                  loading="lazy"
+                ></iframe>
+              </div>
+            ) : null}
+          </div>
+        </section>
+      </div>
+    </div>
+  );
+};
+
+export default Roadmaps;
diff --git a/src/components/TeamsComponent.js b/src/components/TeamsComponent.js
new file mode 100644
index 0000000..5872e75
--- /dev/null
+++ b/src/components/TeamsComponent.js
@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FaLink } from "react-icons/fa";
+const TeamsComponent = (props) => {
+    return (_jsxs("div", { className: "w-full shadow-xl flex flex-col p-4 my-4 rounded-lg hover:scale-105 duration-300", children: [_jsx("img", { className: "w-20 mx-auto mt-[-3rem] bg-white profile_pic", src: props.image, alt: props.name }), _jsx("h2", { className: "text-2xl font-bold text-center py-8 text-white", children: props.name }), _jsx("p", { className: "text-center text-1xl font-bold text-white", children: props.position }), _jsx("div", { className: "flex justify-center mx-auto md:w-[50%] my-6 px-6 py-3", children: _jsx("a", { href: props.link.url, target: props.link.target, rel: props.link.rel, children: _jsx(FaLink, { size: 30, color: "white" }) }) })] }));
+};
+export default TeamsComponent;
diff --git a/src/components/TeamsComponent.jsx b/src/components/TeamsComponent.jsx
deleted file mode 100644
index 4be6c55..0000000
--- a/src/components/TeamsComponent.jsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import React from "react";
-import { FaLink } from "react-icons/fa";
-
-const TeamsComponent = (props) => {
-    return (
-        <div className="w-full shadow-xl flex flex-col p-4 my-4 rounded-lg hover:scale-105 duration-300">
-            <img
-                className="w-20 mx-auto mt-[-3rem] bg-white profile_pic"
-                src={props.image}
-                alt={props.name}
-            />
-            <h2 className="text-2xl font-bold text-center py-8 text-white">
-                {props.name}
-            </h2>
-            <p className="text-center text-1xl font-bold text-white">
-                {props.position}
-            </p>
-            <div className="flex justify-center mx-auto md:w-[50%] my-6 px-6 py-3">
-                <a href={props.link.url} target={props.link.target} rel={props.link.rel}>
-                    {" "}
-                    <FaLink size={30} color="white" />{" "}
-                </a>
-            </div>
-        </div>
-    )
-}
-
-export default TeamsComponent;
\ No newline at end of file
diff --git a/src/components/TeamsComponent.tsx b/src/components/TeamsComponent.tsx
new file mode 100644
index 0000000..83e5532
--- /dev/null
+++ b/src/components/TeamsComponent.tsx
@@ -0,0 +1,38 @@
+import React from "react";
+import { FaLink } from "react-icons/fa";
+
+interface TeamsComponentProps {
+  image: string;
+  name: string;
+  position: string;
+  link: {
+    url: string;
+    target?: string;
+    rel?: string;
+  };
+}
+
+const TeamsComponent: React.FC<TeamsComponentProps> = (props) => {
+  return (
+    <div className="w-full shadow-xl flex flex-col p-4 my-4 rounded-lg hover:scale-105 duration-300">
+      <img
+        className="w-20 mx-auto mt-[-3rem] bg-white profile_pic"
+        src={props.image}
+        alt={props.name}
+      />
+      <h2 className="text-2xl font-bold text-center py-8 text-white">
+        {props.name}
+      </h2>
+      <p className="text-center text-1xl font-bold text-white">
+        {props.position}
+      </p>
+      <div className="flex justify-center mx-auto md:w-[50%] my-6 px-6 py-3">
+        <a href={props.link.url} target={props.link.target} rel={props.link.rel}>
+          <FaLink size={30} color="white" />
+        </a>
+      </div>
+    </div>
+  );
+};
+
+export default TeamsComponent;
diff --git a/src/components/frontend.js b/src/components/frontend.js
new file mode 100644
index 0000000..d69bedb
--- /dev/null
+++ b/src/components/frontend.js
@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import arrow from "../assets/img/frontend_icons/icons-arrow.png";
+import downarrow from "../assets/img/frontend_icons/down_arrow.png";
+const Frontend = () => {
+    const courses = [
+        { name: "HTML / CSS", link: "/html_css" },
+        { name: "TAILWIND", link: "/tailwind" },
+        { name: "JAVA SCRIPT", link: "/javascript" },
+        { name: "REACT JS", link: "/reactjs" },
+        { name: "NEXT JS", link: "/nextjs" },
+        { name: "VUE JS", link: "/vuejs" },
+        { name: "THREE JS", link: "/threejs" },
+        { name: "REACT NATIVE", link: "/reactnative" },
+        { name: "ELECTRON", link: "/electron" },
+    ];
+    return (_jsxs("div", { className: "bg-gray-800 min-h-screen py-20", children: [_jsx("h1", { className: "w-full mb-24 text-white px-4 tracking-tight text-center text-5xl", children: "Complete Frontend Roadmap" }), _jsx("div", { className: "flex flex-wrap justify-center gap-4 mx-4 md:mx-20", children: courses.map((course, index) => (_jsxs(React.Fragment, { children: [_jsx("a", { href: course.link, className: "w-full sm:w-auto sm:mb-10 flex flex-col shadow-lg shadow-[#00df9a] transition-shadow hover:bg-opacity-90 duration-[320ms] bg-gray-900 rounded-lg text-green-400 hover:bg-[#00df9a] hover:shadow-none hover:text-white", children: _jsx("h2", { className: "text-center font-bold text-3xl px-4 py-6", children: course.name }) }), index < courses.length - 1 && (_jsxs("div", { className: "flex flex-col items-center", children: [_jsx("img", { src: arrow, alt: "arrow", className: "hidden sm:block w-20 h-20" }), _jsx("img", { src: downarrow, alt: "down arrow", className: "block sm:hidden w-20 h-20" })] }))] }, index))) })] }));
+};
+export default Frontend;
diff --git a/src/components/frontend.jsx b/src/components/frontend.tsx
similarity index 92%
rename from src/components/frontend.jsx
rename to src/components/frontend.tsx
index 9c231e2..fe55cdb 100644
--- a/src/components/frontend.jsx
+++ b/src/components/frontend.tsx
@@ -1,56 +1,61 @@
-import React, { useState, useEffect } from "react";
-import arrow from "../assets/img/frontend_icons/icons-arrow.png";
-import downarrow from "../assets/img/frontend_icons/down_arrow.png";
-
-const Frontend = () => {
-  const courses = [
-    { name: "HTML / CSS", link: "/html_css" },
-    { name: "TAILWIND", link: "/tailwind" },
-    { name: "JAVA SCRIPT", link: "/javascript" },
-    { name: "REACT JS", link: "/reactjs" },
-    { name: "NEXT JS", link: "/nextjs" },
-    { name: "VUE JS", link: "/vuejs" },
-    { name: "THREE JS", link: "/threejs" },
-    { name: "REACT NATIVE", link: "/reactnative" },
-    { name: "ELECTRON", link: "/electron" },
-  ];
-
-  return (
-    <div className="bg-gray-800 min-h-screen py-20">
-      <h1 className="w-full mb-24 text-white px-4 tracking-tight text-center text-5xl">
-        Complete Frontend Roadmap
-      </h1>
-
-      <div className="flex flex-wrap justify-center gap-4 mx-4 md:mx-20">
-        {courses.map((course, index) => (
-          <React.Fragment key={index}>
-            <a
-              href={course.link}
-              className="w-full sm:w-auto sm:mb-10 flex flex-col shadow-lg shadow-[#00df9a] transition-shadow hover:bg-opacity-90 duration-[320ms] bg-gray-900 rounded-lg text-green-400 hover:bg-[#00df9a] hover:shadow-none hover:text-white"
-            >
-              <h2 className="text-center font-bold text-3xl px-4 py-6">
-                {course.name}
-              </h2>
-            </a>
-            {index < courses.length - 1 && (
-              <div className="flex flex-col items-center">
-                <img
-                  src={arrow}
-                  alt="arrow"
-                  className="hidden sm:block w-20 h-20"
-                />
-                <img
-                  src={downarrow}
-                  alt="down arrow"
-                  className="block sm:hidden w-20 h-20"
-                />
-              </div>
-            )}
-          </React.Fragment>
-        ))}
-      </div>
-    </div>
-  );
-};
-
-export default Frontend;
+import React from "react";
+import arrow from "../assets/img/frontend_icons/icons-arrow.png";
+import downarrow from "../assets/img/frontend_icons/down_arrow.png";
+
+interface Course {
+  name: string;
+  link: string;
+}
+
+const Frontend: React.FC = () => {
+  const courses: Course[] = [
+    { name: "HTML / CSS", link: "/html_css" },
+    { name: "TAILWIND", link: "/tailwind" },
+    { name: "JAVA SCRIPT", link: "/javascript" },
+    { name: "REACT JS", link: "/reactjs" },
+    { name: "NEXT JS", link: "/nextjs" },
+    { name: "VUE JS", link: "/vuejs" },
+    { name: "THREE JS", link: "/threejs" },
+    { name: "REACT NATIVE", link: "/reactnative" },
+    { name: "ELECTRON", link: "/electron" },
+  ];
+
+  return (
+    <div className="bg-gray-800 min-h-screen py-20">
+      <h1 className="w-full mb-24 text-white px-4 tracking-tight text-center text-5xl">
+        Complete Frontend Roadmap
+      </h1>
+
+      <div className="flex flex-wrap justify-center gap-4 mx-4 md:mx-20">
+        {courses.map((course, index) => (
+          <React.Fragment key={index}>
+            <a
+              href={course.link}
+              className="w-full sm:w-auto sm:mb-10 flex flex-col shadow-lg shadow-[#00df9a] transition-shadow hover:bg-opacity-90 duration-[320ms] bg-gray-900 rounded-lg text-green-400 hover:bg-[#00df9a] hover:shadow-none hover:text-white"
+            >
+              <h2 className="text-center font-bold text-3xl px-4 py-6">
+                {course.name}
+              </h2>
+            </a>
+            {index < courses.length - 1 && (
+              <div className="flex flex-col items-center">
+                <img
+                  src={arrow}
+                  alt="arrow"
+                  className="hidden sm:block w-20 h-20"
+                />
+                <img
+                  src={downarrow}
+                  alt="down arrow"
+                  className="block sm:hidden w-20 h-20"
+                />
+              </div>
+            )}
+          </React.Fragment>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default Frontend;
diff --git a/src/declarations.d.ts b/src/declarations.d.ts
new file mode 100644
index 0000000..68bda0e
--- /dev/null
+++ b/src/declarations.d.ts
@@ -0,0 +1,31 @@
+declare module '*.png' {
+  const content: string;
+  export default content;
+}
+
+declare module '*.jpg' {
+  const content: string;
+  export default content;
+}
+
+declare module '*.jpeg' {
+  const content: string;
+  export default content;
+}
+
+declare module '*.gif' {
+  const content: string;
+  export default content;
+}
+
+declare module '*.svg' {
+  const content: string;
+  export default content;
+}
+
+declare module 'eslint';
+
+declare module "*.json" {
+  const value: string;
+  export default value;
+}
diff --git a/src/index.js b/src/index.js
new file mode 100644
index 0000000..a2c7ef4
--- /dev/null
+++ b/src/index.js
@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import './index.css';
+import App from './App';
+const rootElement = document.getElementById('root');
+if (rootElement) {
+    const root = ReactDOM.createRoot(rootElement);
+    root.render(_jsx(React.StrictMode, { children: _jsx(App, {}) }));
+}
diff --git a/src/index.jsx b/src/index.jsx
deleted file mode 100644
index 2cb1087..0000000
--- a/src/index.jsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import './index.css';
-import App from './App';
-
-const root = ReactDOM.createRoot(document.getElementById('root'));
-root.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>
-);
diff --git a/src/index.tsx b/src/index.tsx
new file mode 100644
index 0000000..7a9b1b3
--- /dev/null
+++ b/src/index.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import './index.css';
+import App from './App';
+
+const rootElement = document.getElementById('root');
+
+if (rootElement) {
+  const root = ReactDOM.createRoot(rootElement as HTMLElement);
+  root.render(
+    <React.StrictMode>
+      <App />
+    </React.StrictMode>
+  );
+}
diff --git a/src/pages/AboutOrg.js b/src/pages/AboutOrg.js
new file mode 100644
index 0000000..774cd42
--- /dev/null
+++ b/src/pages/AboutOrg.js
@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Navbar from '../components/Navbar';
+import Footer from '../components/Footer';
+import FOSSCU from "../assets/img/logo/fosscu.png";
+const AboutOrg = () => {
+    return (_jsxs("div", { children: [_jsx(Navbar, {}), _jsx("div", { className: "text-[#ffffff] body-font", children: _jsxs("div", { className: "container px-5 py-24 mx-auto", children: [_jsxs("div", { className: "flex flex-col text-center w-full mb-20", children: [_jsxs("div", { className: "flex flex-row mx-auto", children: [_jsx("img", { className: "w-[30px] sm:w-[65px]", src: FOSSCU, alt: "FOSSCU Logo" }), _jsx("h2", { className: "text-lg sm:text-3xl text-[#00FF00] tracking-widest font title-font mb-1 sm:ml-5 sm:mt-4 ml-2 mt-2", children: "ABOUT FOSSCU-KIET" })] }), _jsx("p", { className: "lg:w-2/3 mx-auto mt-7 leading-relaxed", children: "We at FOSSCU (Free and Open-Source Software Community United) are a group of individuals who are constantly working to promote Open-Source Culture." }), _jsx("p", { className: "mt-8 text-[#1AFF1A]", children: "Some key points about our community:" })] }), _jsxs("div", { className: "flex flex-wrap", children: [_jsxs("div", { className: "xl:w-1/4 lg:w-1/2 md:w-full px-8 py-6 border-l-2 border-gray-800", children: [_jsx("h2", { className: "text-lg sm:text-xl text-[#00FF00] font-medium title-font mb-2", children: "Open to all" }), _jsx("p", { className: "leading-relaxed text-base mb-4", children: "We are a community, not a club. Anyone who is eager to start using or contributing to open source software, or who wants to learn something new, can join. We are available at any moment to assist you." })] }), _jsxs("div", { className: "xl:w-1/4 lg:w-1/2 md:w-full px-8 py-6 border-l-2 border-gray-800", children: [_jsx("h2", { className: "text-lg sm:text-xl text-[#00FF00] font-medium title-font mb-2", children: "Mentorship to beginners" }), _jsx("p", { className: "leading-relaxed text-base mb-4", children: "We will assist you at every step of your Open Source Journey, guiding you along the way and helping you whenever you get stuck." })] }), _jsxs("div", { className: "xl:w-1/4 lg:w-1/2 md:w-full px-8 py-6 border-l-2 border-gray-800", children: [_jsx("h2", { className: "text-lg sm:text-xl text-[#00FF00] font-medium title-font mb-2", children: "Regular Meetups" }), _jsx("p", { className: "leading-relaxed text-base mb-4", children: "We organize regular meet-ups that help you connect with others who share your interests, spread knowledge, and foster confidence." })] }), _jsxs("div", { className: "xl:w-1/4 lg:w-1/2 md:w-full px-8 py-6 border-l-2 border-gray-800", children: [_jsx("h2", { className: "text-lg sm:text-xl text-[#00FF00] font-medium title-font mb-2", children: "Events and Bootcamps" }), _jsx("p", { className: "leading-relaxed text-base mb-4", children: "We conduct events and bootcamps regularly to get you more involved with the Open Source Culture and improve your networking." })] })] }), _jsx("a", { href: "https://linktr.ee/fosscu", target: "_blank", rel: "noopener noreferrer", children: _jsx("button", { className: "flex mx-auto mt-16 text-black bg-[#00ff00] font-poppins border-0 py-2 px-8 focus:outline-none rounded text-lg hover:shadow-md hover:shadow-white", children: "Connect with Us \uD83E\uDD1D" }) })] }) }), _jsx(Footer, {})] }));
+};
+export default AboutOrg;
diff --git a/src/pages/AboutOrg.jsx b/src/pages/AboutOrg.jsx
deleted file mode 100644
index 5a67296..0000000
--- a/src/pages/AboutOrg.jsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import React from 'react'
-import Navbar from '../components/Navbar'
-import Footer from '../components/Footer'
-import FOSSCU from "../assets/img/logo/fosscu.png"
-
- const AboutOrg = () => {
-  return (
-    <div>
-      <Navbar/>
-    <div class="text-[#ffffff] body-font">
-    <div class="container px-5 py-24 mx-auto">
-      <div class="flex flex-col text-center w-full mb-20">
-        <div class="flex flex-row mx-auto">
-        <img className='w-[30px] sm:w-[65px] ' src={FOSSCU} alt="/" />     
-        <h2 class=" text-lg sm:text-3xl  text-[#00FF00] tracking-widest font title-font mb-1 sm:ml-5 sm:mt-4 ml-2 mt-2 " >ABOUT FOSSCU-KIET</h2>
-      </div>
-        <p class="lg:w-2/3 mx-auto mt-7 leading-relaxed ">We at FOSSCU (Free and Open-Source Software Community United )  are a Group of individuals who are constantly working to promote Open-Source Culture. </p>
-        <p class="mt-8 text-[#1AFF1A]">Some key points about our community.</p>
-      </div>
-      <div class="flex flex-wrap">
-        <div class="xl:w-1/4 lg:w-1/2 md:w-full px-8 py-6 border-l-2 border-gray-800">
-          <h2 class="text-lg sm:text-xl text-[#00FF00] font-medium title-font mb-2">Open to all</h2>
-          <p class="leading-relaxed text-base mb-4">We are a community, not a club. Anyone who is eager to start using or contributing to open source software or who wants to learn something new. We are available to all of you at any moment to assist you.</p>
-        </div>
-        <div class="xl:w-1/4 lg:w-1/2 md:w-full px-8 py-6 border-l-2 border-gray-800">
-          <h2 class="text-lg sm:text-xl text-[#00FF00] font-medium title-font mb-2">Mentorship to beginners</h2>
-          <p class="leading-relaxed text-base mb-4">We will assist you at every step of your Open Source Journey , guiding you along the way and assisting you anytime you need any help whenever you are stuck.</p>
-        </div>
-        <div class="xl:w-1/4 lg:w-1/2 md:w-full px-8 py-6 border-l-2 border-gray-800">
-          <h2 class="text-lg sm:text-xl text-[#00FF00] font-medium title-font mb-2">Regular Meetups</h2>
-          <p class="leading-relaxed text-base mb-4">We will be organising regular meet-ups that will undoubtedly help you connect with others who share your interests and spread your knowledge, which also fosters confidence.</p>
-        </div>
-        <div class="xl:w-1/4 lg:w-1/2 md:w-full px-8 py-6 border-l-2 border-gray-800">
-          <h2 class="text-lg sm:text-xl text-[#00FF00] font-medium title-font mb-2">Events and Bootcamps</h2>
-          <p class="leading-relaxed text-base mb-4"> We conduct Events and Bootcamps regularly get you more involved with the Open Source Culture and to improve your networking.</p>
-        </div>
-      </div>
-      <a href="https://linktr.ee/fosscu" target="_blank" rel="noopener noreferrer">
-      <button
-        class="flex mx-auto mt-16 text-black bg-[#00ff00] font-poppins border-0 py-2 px-8 focus:outline-none rounded text-lg hover:shadow-md hover:shadow-white">Connect with Us 🤝
-      </button>
-      </a>
-    </div>
-  </div>
-  <Footer/>
-  </div>
-  )
-}
-export default AboutOrg
diff --git a/src/pages/AboutOrg.tsx b/src/pages/AboutOrg.tsx
new file mode 100644
index 0000000..8275310
--- /dev/null
+++ b/src/pages/AboutOrg.tsx
@@ -0,0 +1,62 @@
+import React from 'react';
+import Navbar from '../components/Navbar';
+import Footer from '../components/Footer';
+import FOSSCU from "../assets/img/logo/fosscu.png";
+
+const AboutOrg: React.FC = () => {
+  return (
+    <div>
+      <Navbar />
+      <div className="text-[#ffffff] body-font">
+        <div className="container px-5 py-24 mx-auto">
+          <div className="flex flex-col text-center w-full mb-20">
+            <div className="flex flex-row mx-auto">
+              <img className="w-[30px] sm:w-[65px]" src={FOSSCU} alt="FOSSCU Logo" />
+              <h2 className="text-lg sm:text-3xl text-[#00FF00] tracking-widest font title-font mb-1 sm:ml-5 sm:mt-4 ml-2 mt-2">
+                ABOUT FOSSCU-KIET
+              </h2>
+            </div>
+            <p className="lg:w-2/3 mx-auto mt-7 leading-relaxed">
+              We at FOSSCU (Free and Open-Source Software Community United) are a group of individuals who are constantly working to promote Open-Source Culture.
+            </p>
+            <p className="mt-8 text-[#1AFF1A]">Some key points about our community:</p>
+          </div>
+          <div className="flex flex-wrap">
+            <div className="xl:w-1/4 lg:w-1/2 md:w-full px-8 py-6 border-l-2 border-gray-800">
+              <h2 className="text-lg sm:text-xl text-[#00FF00] font-medium title-font mb-2">Open to all</h2>
+              <p className="leading-relaxed text-base mb-4">
+                We are a community, not a club. Anyone who is eager to start using or contributing to open source software, or who wants to learn something new, can join. We are available at any moment to assist you.
+              </p>
+            </div>
+            <div className="xl:w-1/4 lg:w-1/2 md:w-full px-8 py-6 border-l-2 border-gray-800">
+              <h2 className="text-lg sm:text-xl text-[#00FF00] font-medium title-font mb-2">Mentorship to beginners</h2>
+              <p className="leading-relaxed text-base mb-4">
+                We will assist you at every step of your Open Source Journey, guiding you along the way and helping you whenever you get stuck.
+              </p>
+            </div>
+            <div className="xl:w-1/4 lg:w-1/2 md:w-full px-8 py-6 border-l-2 border-gray-800">
+              <h2 className="text-lg sm:text-xl text-[#00FF00] font-medium title-font mb-2">Regular Meetups</h2>
+              <p className="leading-relaxed text-base mb-4">
+                We organize regular meet-ups that help you connect with others who share your interests, spread knowledge, and foster confidence.
+              </p>
+            </div>
+            <div className="xl:w-1/4 lg:w-1/2 md:w-full px-8 py-6 border-l-2 border-gray-800">
+              <h2 className="text-lg sm:text-xl text-[#00FF00] font-medium title-font mb-2">Events and Bootcamps</h2>
+              <p className="leading-relaxed text-base mb-4">
+                We conduct events and bootcamps regularly to get you more involved with the Open Source Culture and improve your networking.
+              </p>
+            </div>
+          </div>
+          <a href="https://linktr.ee/fosscu" target="_blank" rel="noopener noreferrer">
+            <button className="flex mx-auto mt-16 text-black bg-[#00ff00] font-poppins border-0 py-2 px-8 focus:outline-none rounded text-lg hover:shadow-md hover:shadow-white">
+              Connect with Us 🤝
+            </button>
+          </a>
+        </div>
+      </div>
+      <Footer />
+    </div>
+  );
+};
+
+export default AboutOrg;
diff --git a/src/pages/Buiding.js b/src/pages/Buiding.js
new file mode 100644
index 0000000..5c38237
--- /dev/null
+++ b/src/pages/Buiding.js
@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Navbar from "../components/Navbar";
+import Footer from "../components/Footer";
+import Building from "../components/Building";
+const Buiding = () => {
+    return (_jsxs("div", { children: [_jsx(Navbar, {}), _jsx(Building, {}), _jsx(Footer, {})] }));
+};
+export default Buiding;
diff --git a/src/pages/Buiding.jsx b/src/pages/Buiding.tsx
similarity index 82%
rename from src/pages/Buiding.jsx
rename to src/pages/Buiding.tsx
index 8bae1fe..8530636 100644
--- a/src/pages/Buiding.jsx
+++ b/src/pages/Buiding.tsx
@@ -2,7 +2,8 @@ import React from "react";
 import Navbar from "../components/Navbar";
 import Footer from "../components/Footer";
 import Building from "../components/Building";
-const Buiding = () => {
+
+const Buiding: React.FC = () => {
     return (
         <div>
             <Navbar />
@@ -12,4 +13,4 @@ const Buiding = () => {
     );
 };
 
-export default Buiding;
\ No newline at end of file
+export default Buiding;
diff --git a/src/pages/Contacts.js b/src/pages/Contacts.js
new file mode 100644
index 0000000..518080f
--- /dev/null
+++ b/src/pages/Contacts.js
@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Navbar from "../components/Navbar";
+import Footer from "../components/Footer";
+import Contact from "../components/Contact";
+const Contacts = () => {
+    return (_jsxs("div", { children: [_jsx(Navbar, {}), _jsx(Contact, {}), _jsx(Footer, {})] }));
+};
+export default Contacts;
diff --git a/src/pages/Contacts.jsx b/src/pages/Contacts.tsx
similarity index 89%
rename from src/pages/Contacts.jsx
rename to src/pages/Contacts.tsx
index 3f8fe1b..45a441b 100644
--- a/src/pages/Contacts.jsx
+++ b/src/pages/Contacts.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import Navbar from "../components/Navbar";
 import Footer from "../components/Footer";
 import Contact from "../components/Contact";
-const Contacts = () => {
+const Contacts: React.FC = () => {
     return (
         <div>
             <Navbar />
diff --git a/src/pages/Faqs.js b/src/pages/Faqs.js
new file mode 100644
index 0000000..fdd7423
--- /dev/null
+++ b/src/pages/Faqs.js
@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Faq from "../components/Faq";
+import Navbar from "../components/Navbar";
+import Footer from "../components/Footer";
+const Faqs = () => {
+    return (_jsxs("div", { children: [_jsx(Navbar, {}), _jsx(Faq, {}), _jsx(Footer, {})] }));
+};
+export default Faqs;
diff --git a/src/pages/Faqs.jsx b/src/pages/Faqs.tsx
similarity index 83%
rename from src/pages/Faqs.jsx
rename to src/pages/Faqs.tsx
index 75f9771..af2cad4 100644
--- a/src/pages/Faqs.jsx
+++ b/src/pages/Faqs.tsx
@@ -3,7 +3,7 @@ import Faq from "../components/Faq";
 import Navbar from "../components/Navbar";
 import Footer from "../components/Footer";
 
-const Faqs = () => {
+const Faqs: React.FC = () => {
     return (
         <div>
             <Navbar />
@@ -13,4 +13,4 @@ const Faqs = () => {
     );
 };
 
-export default Faqs;
\ No newline at end of file
+export default Faqs;
diff --git a/src/pages/FrontEnds.js b/src/pages/FrontEnds.js
new file mode 100644
index 0000000..d1b5f11
--- /dev/null
+++ b/src/pages/FrontEnds.js
@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Navbar from "../components/Navbar";
+import Footer from "../components/Footer";
+import Frontend from "../components/frontend";
+const Frontends = () => {
+    return (_jsxs("div", { children: [_jsx(Navbar, {}), _jsx(Frontend, {}), _jsx(Footer, {})] }));
+};
+export default Frontends;
diff --git a/src/pages/FrontEnds.jsx b/src/pages/FrontEnds.tsx
similarity index 88%
rename from src/pages/FrontEnds.jsx
rename to src/pages/FrontEnds.tsx
index 4899ba0..ada5263 100644
--- a/src/pages/FrontEnds.jsx
+++ b/src/pages/FrontEnds.tsx
@@ -1,15 +1,15 @@
-import React from "react";
-import Navbar from "../components/Navbar";
-import Footer from "../components/Footer";
-import Frontend from "../components/frontend"
-const Frontends = () => {
-    return (
-        <div>
-            <Navbar />
-            <Frontend />
-            <Footer />
-        </div>
-    );
-};
-
+import React from "react";
+import Navbar from "../components/Navbar";
+import Footer from "../components/Footer";
+import Frontend from "../components/frontend"
+const Frontends: React.FC = () => {
+    return (
+        <div>
+            <Navbar />
+            <Frontend />
+            <Footer />
+        </div>
+    );
+};
+
 export default Frontends;
\ No newline at end of file
diff --git a/src/pages/Frontend/Eletron.js b/src/pages/Frontend/Eletron.js
new file mode 100644
index 0000000..a6eba29
--- /dev/null
+++ b/src/pages/Frontend/Eletron.js
@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Navbar from "../../components/Navbar";
+import Footer from "../../components/Footer";
+import Electron from "../../components/Frontend_files/Electron";
+import electronData from "../../data/Front_end/electronjs.json";
+const Eletron = () => {
+    return (_jsxs("div", { children: [_jsx("div", { children: _jsx(Navbar, {}) }), _jsx("p", { className: "text-5xl mx-auto max-w-screen-xl lg:py-8 lg:px-6 mt-10 font-bold font-sans tracking-tight text-white", children: "Electron Learning Resources :" }), _jsx("div", { className: "border-b border-gray-300 my-2 mx-auto max-w-screen-xl mb-12 lg:px-6" }), electronData.map((electronjs, index) => (_jsx(Electron, { head: electronjs.head, para1: electronjs.para1, para2: electronjs.para2, para3: electronjs.para3, link: electronjs.link, videoLink: electronjs.videoLink, image: electronjs.image }, index))), _jsx("div", { children: _jsx(Footer, {}) })] }));
+};
+export default Eletron;
diff --git a/src/pages/Frontend/Eletron.jsx b/src/pages/Frontend/Eletron.jsx
deleted file mode 100644
index f3c5b22..0000000
--- a/src/pages/Frontend/Eletron.jsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import React from "react";
-import Navbar from "../../components/Navbar";
-import Footer from "../../components/Footer";
-import Electron from "../../components/Frontend_files/Electron";
-import electronData from "../../data/Front_end/electronjs.json";
-
-
-const Eletron = () => {
-
-    return (
-        <div>
-            <div>
-                <Navbar />
-            </div>
-            <p className=" text-5xl mx-auto max-w-screen-xl lg:py-8 lg:px-6 mt-10 font-bold font-sans tracking-tight text-white">Electron Learning Resources :</p>
-            <div class="border-b border-gray-300 my-2 mx-auto max-w-screen-xl mb-12 lg:px-6"></div>
-            {electronData.map((electronjs) => (
-                <Electron
-                    head={electronjs.head}
-                    para1={electronjs.para1}
-                    para2={electronjs.para2}
-                    para3={electronjs.para3}
-                    link={electronjs.link}
-                    videoLink={electronjs.videoLink}
-                    image={electronjs.image}
-                />
-            ))}
-            <div>
-                <Footer />
-            </div>
-        </div >
-    )
-}
-
-export default Eletron;
\ No newline at end of file
diff --git a/src/pages/Frontend/Eletron.tsx b/src/pages/Frontend/Eletron.tsx
new file mode 100644
index 0000000..347d0b0
--- /dev/null
+++ b/src/pages/Frontend/Eletron.tsx
@@ -0,0 +1,46 @@
+import React from "react";
+import Navbar from "../../components/Navbar";
+import Footer from "../../components/Footer";
+import Electron from "../../components/Frontend_files/Electron";
+import electronData from "../../data/Front_end/electronjs.json";
+
+interface ElectronData {
+  head: string;
+  para1: string;
+  para2: string;
+  para3: string;
+  link?: string;
+  videoLink?: string;
+  image?: string;
+}
+
+const Eletron: React.FC = () => {
+  return (
+    <div>
+      <div>
+        <Navbar />
+      </div>
+      <p className="text-5xl mx-auto max-w-screen-xl lg:py-8 lg:px-6 mt-10 font-bold font-sans tracking-tight text-white">
+        Electron Learning Resources :
+      </p>
+      <div className="border-b border-gray-300 my-2 mx-auto max-w-screen-xl mb-12 lg:px-6"></div>
+      {electronData.map((electronjs: ElectronData, index: number) => (
+        <Electron
+          key={index}
+          head={electronjs.head}
+          para1={electronjs.para1}
+          para2={electronjs.para2}
+          para3={electronjs.para3}
+          link={electronjs.link}
+          videoLink={electronjs.videoLink}
+          image={electronjs.image} // Ensure image is being passed
+        />
+      ))}
+      <div>
+        <Footer />
+      </div>
+    </div>
+  );
+};
+
+export default Eletron;
diff --git a/src/pages/Frontend/HTMLCSS.js b/src/pages/Frontend/HTMLCSS.js
new file mode 100644
index 0000000..98292a0
--- /dev/null
+++ b/src/pages/Frontend/HTMLCSS.js
@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Navbar from "../../components/Navbar";
+import Footer from "../../components/Footer";
+import HTML_CSS from "../../components/Frontend_files/HTML_CSS";
+import htmlData from "../../data/Front_end/htcs.json";
+const HTMLCSS = () => {
+    return (_jsxs("div", { children: [_jsx(Navbar, {}), _jsx("p", { className: "text-5xl mx-auto max-w-screen-xl lg:py-8 lg:px-6 mt-10 font-bold font-sans tracking-tight text-white", children: "HTML and CSS Resources:" }), _jsx("div", { className: "border-b border-gray-300 my-2 mx-auto max-w-screen-xl mb-12 lg:px-6" }), htmlData.map((htcs) => (_jsx(HTML_CSS, { head: htcs.head, para1: htcs.para1, para2: htcs.para2 || "", para3: htcs.para3 || "", link: htcs.link || "#", videoLink: htcs.videoLink }, htcs.head))), _jsx(Footer, {})] }));
+};
+export default HTMLCSS;
diff --git a/src/pages/Frontend/HTMLCSS.jsx b/src/pages/Frontend/HTMLCSS.jsx
deleted file mode 100644
index 8bc1261..0000000
--- a/src/pages/Frontend/HTMLCSS.jsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import React from "react";
-import Navbar from "../../components/Navbar";
-import Footer from "../../components/Footer";
-import HTML_CSS from "../../components/Frontend_files/HTML_CSS";
-import htmlData from "../../data/Front_end/htcs.json";
-
-
-const HTMLCSS = () => {
-
-    return (
-        <div>
-            <div>
-                <Navbar />
-            </div>
-            <p className=" text-5xl mx-auto max-w-screen-xl lg:py-8 lg:px-6 mt-10 font-bold font-sans tracking-tight text-white">HTML and CSS Resources :</p>
-            <div class="border-b border-gray-300 my-2 mx-auto max-w-screen-xl mb-12 lg:px-6"></div>
-            {htmlData.map((htcs) => (
-                <HTML_CSS
-                    head={htcs.head}
-                    para1={htcs.para1}
-                    para2={htcs.para2}
-                    para3={htcs.para3}
-                    link={htcs.link}
-                    videoLink={htcs.videoLink}
-                    image={htcs.image}
-                />
-            ))}
-            <div>
-                <Footer />
-            </div>
-        </div >
-    )
-}
-
-export default HTMLCSS;
\ No newline at end of file
diff --git a/src/pages/Frontend/HTMLCSS.tsx b/src/pages/Frontend/HTMLCSS.tsx
new file mode 100644
index 0000000..bf5784c
--- /dev/null
+++ b/src/pages/Frontend/HTMLCSS.tsx
@@ -0,0 +1,46 @@
+import React from "react";
+import Navbar from "../../components/Navbar";
+import Footer from "../../components/Footer";
+import HTML_CSS from "../../components/Frontend_files/HTML_CSS";
+import htmlData from "../../data/Front_end/htcs.json";
+
+// Define the interface for the data type of each item in htmlData
+interface HtmlCssData {
+    head: string;
+    para1: string;
+    para2?: string;
+    para3?: string;
+    link?: string; // Optional
+    videoLink: string;
+    image?: string; // Optional
+}
+
+const HTMLCSS: React.FC = () => {
+    return (
+        <div>
+            <Navbar />
+            <p className="text-5xl mx-auto max-w-screen-xl lg:py-8 lg:px-6 mt-10 font-bold font-sans tracking-tight text-white">
+                HTML and CSS Resources:
+            </p>
+            <div className="border-b border-gray-300 my-2 mx-auto max-w-screen-xl mb-12 lg:px-6"></div>
+
+            {/* Ensure htmlData is correctly typed as an array of HtmlCssData */}
+            {htmlData.map((htcs: HtmlCssData) => (
+                <HTML_CSS
+                    key={htcs.head}
+                    head={htcs.head}
+                    para1={htcs.para1}
+                    para2={htcs.para2 || ""}
+                    para3={htcs.para3 || ""}
+                    link={htcs.link || "#"} // Default link if undefined
+                    videoLink={htcs.videoLink}
+                
+                />
+            ))}
+
+            <Footer />
+        </div>
+    );
+};
+
+export default HTMLCSS;
diff --git a/src/pages/Frontend/JSc.js b/src/pages/Frontend/JSc.js
new file mode 100644
index 0000000..4a9d290
--- /dev/null
+++ b/src/pages/Frontend/JSc.js
@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Navbar from "../../components/Navbar";
+import Footer from "../../components/Footer";
+import Javascript from "../../components/Frontend_files/Javascript";
+import jsData from "../../data/Front_end/JS.json";
+const JSc = () => {
+    return (_jsxs("div", { children: [_jsx(Navbar, {}), _jsx("p", { className: "text-5xl mx-auto max-w-screen-xl lg:py-8 lg:px-6 mt-10 font-bold font-sans tracking-tight text-white", children: "JavaScript Learning Resources:" }), _jsx("div", { className: "border-b border-gray-300 my-2 mx-auto max-w-screen-xl mb-12 lg:px-6" }), jsData.map((JS, index) => (_jsx(Javascript, { head: JS.head, para1: JS.para1, para2: JS.para2 || "", para3: JS.para3 || "", link: JS.link, videoLink: JS.videoLink || "" }, index))), _jsx(Footer, {})] }));
+};
+export default JSc;
diff --git a/src/pages/Frontend/JSc.jsx b/src/pages/Frontend/JSc.jsx
deleted file mode 100644
index bb39738..0000000
--- a/src/pages/Frontend/JSc.jsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import React from "react";
-import Navbar from "../../components/Navbar";
-import Footer from "../../components/Footer";
-import Javascript from "../../components/Frontend_files/Javascript";
-import jsData from "../../data/Front_end/JS.json";
-
-
-const JSc = () => {
-
-    return (
-        <div>
-            <div>
-                <Navbar />
-            </div>
-            <p className=" text-5xl mx-auto max-w-screen-xl lg:py-8 lg:px-6 mt-10 font-bold font-sans tracking-tight text-white">JavaScript Learning Resources :</p>
-            <div class="border-b border-gray-300 my-2 mx-auto max-w-screen-xl mb-12 lg:px-6"></div>
-            {jsData.map((JS) => (
-                <Javascript
-                    head={JS.head}
-                    para1={JS.para1}
-                    para2={JS.para2}
-                    para3={JS.para3}
-                    link={JS.link}
-                    videoLink={JS.videoLink}
-                    image={JS.image}
-                />
-            ))}
-            <div>
-                <Footer />
-            </div>
-        </div >
-    )
-}
-
-export default JSc;
\ No newline at end of file
diff --git a/src/pages/Frontend/JSc.tsx b/src/pages/Frontend/JSc.tsx
new file mode 100644
index 0000000..f96c7db
--- /dev/null
+++ b/src/pages/Frontend/JSc.tsx
@@ -0,0 +1,44 @@
+import React from "react";
+import Navbar from "../../components/Navbar";
+import Footer from "../../components/Footer";
+import Javascript from "../../components/Frontend_files/Javascript";
+import jsData from "../../data/Front_end/JS.json";
+
+// Define the interface for each item in jsData
+interface JsData {
+    head: string;
+    para1: string;
+    para2?: string; // Optional
+    para3?: string; // Optional
+    link: string;
+    videoLink?: string; // Optional since not all entries have videoLink
+}
+
+const JSc: React.FC = () => {
+    return (
+        <div>
+            <Navbar />
+            <p className="text-5xl mx-auto max-w-screen-xl lg:py-8 lg:px-6 mt-10 font-bold font-sans tracking-tight text-white">
+                JavaScript Learning Resources:
+            </p>
+            <div className="border-b border-gray-300 my-2 mx-auto max-w-screen-xl mb-12 lg:px-6"></div>
+            
+            {/* Ensure jsData is correctly typed as an array of JsData */}
+            {jsData.map((JS: JsData, index: number) => (
+                <Javascript
+                    key={index} // Provide a unique key
+                    head={JS.head}
+                    para1={JS.para1}
+                    para2={JS.para2 || ""} // Handle optional para2 and para3
+                    para3={JS.para3 || ""}
+                    link={JS.link}
+                    videoLink={JS.videoLink || ""} // Handle optional videoLink
+                />
+            ))}
+
+            <Footer />
+        </div>
+    );
+};
+
+export default JSc;
diff --git a/src/pages/Frontend/Next__js.js b/src/pages/Frontend/Next__js.js
new file mode 100644
index 0000000..1636bba
--- /dev/null
+++ b/src/pages/Frontend/Next__js.js
@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Navbar from "../../components/Navbar";
+import Footer from "../../components/Footer";
+import Next_js from "../../components/Frontend_files/Next_js";
+import nextjsData from "../../data/Front_end/nextjs.json";
+const Next__js = () => {
+    return (_jsxs("div", { children: [_jsx(Navbar, {}), _jsx("p", { className: "text-5xl mx-auto max-w-screen-xl lg:py-8 lg:px-6 mt-10 font-bold font-sans tracking-tight text-white", children: "Next.js Resources:" }), _jsx("div", { className: "border-b border-gray-300 my-2 mx-auto max-w-screen-xl mb-12 lg:px-6" }), nextjsData.map((nextjs, index) => (_jsx(Next_js, { head: nextjs.head, para1: nextjs.para1, para2: nextjs.para2 || "", para3: nextjs.para3 || "", link: nextjs.link || "", videoLink: nextjs.videoLink || "" }, index))), _jsx(Footer, {})] }));
+};
+export default Next__js;
diff --git a/src/pages/Frontend/Next__js.jsx b/src/pages/Frontend/Next__js.jsx
deleted file mode 100644
index 165c0a2..0000000
--- a/src/pages/Frontend/Next__js.jsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import React from "react";
-import Navbar from "../../components/Navbar";
-import Footer from "../../components/Footer";
-import Next_js from "../../components/Frontend_files/Next_js";
-import nextjsData from "../../data/Front_end/nextjs.json";
-
-
-const Next__js = () => {
-
-    return (
-        <div>
-            <div>
-                <Navbar />
-            </div>
-            <p className=" text-5xl mx-auto max-w-screen-xl lg:py-8 lg:px-6 mt-10 font-bold font-sans tracking-tight text-white">Next.js Resources:</p>
-            <div class="border-b border-gray-300 my-2 mx-auto max-w-screen-xl mb-12 lg:px-6"></div>
-            {nextjsData.map((nextjs) => (
-                <Next_js
-                    head={nextjs.head}
-                    para1={nextjs.para1}
-                    para2={nextjs.para2}
-                    para3={nextjs.para3}
-                    link={nextjs.link}
-                    videoLink={nextjs.videoLink}
-                    image={nextjs.image}
-                />
-            ))}
-            <div>
-                <Footer />
-            </div>
-        </div >
-    )
-}
-
-export default Next__js;
\ No newline at end of file
diff --git a/src/pages/Frontend/Next__js.tsx b/src/pages/Frontend/Next__js.tsx
new file mode 100644
index 0000000..57f3386
--- /dev/null
+++ b/src/pages/Frontend/Next__js.tsx
@@ -0,0 +1,45 @@
+import React from "react";
+import Navbar from "../../components/Navbar";
+import Footer from "../../components/Footer";
+import Next_js from "../../components/Frontend_files/Next_js";
+import nextjsData from "../../data/Front_end/nextjs.json";
+
+// Define the interface for the nextjsData items
+interface NextJsData {
+    head: string;
+    para1: string;
+    para2?: string; // Optional
+    para3?: string; // Optional
+    link?: string; // Optional, since some objects don't have the link
+    videoLink?: string; // Optional
+    image?: string; // Optional, in case some items may not have an image
+}
+
+const Next__js: React.FC = () => {
+    return (
+        <div>
+            <Navbar />
+            <p className="text-5xl mx-auto max-w-screen-xl lg:py-8 lg:px-6 mt-10 font-bold font-sans tracking-tight text-white">
+                Next.js Resources:
+            </p>
+            <div className="border-b border-gray-300 my-2 mx-auto max-w-screen-xl mb-12 lg:px-6"></div>
+            
+            {/* Ensure nextjsData is correctly typed as an array of NextJsData */}
+            {nextjsData.map((nextjs: NextJsData, index: number) => (
+                <Next_js
+                    key={index} // Always provide a unique key
+                    head={nextjs.head}
+                    para1={nextjs.para1}
+                    para2={nextjs.para2 || ""} // Handle optional para2
+                    para3={nextjs.para3 || ""} // Handle optional para3
+                    link={nextjs.link || ""} // Handle optional link
+                    videoLink={nextjs.videoLink || ""} // Handle optional videoLink
+                />
+            ))}
+            
+            <Footer />
+        </div>
+    );
+};
+
+export default Next__js;
diff --git a/src/pages/Frontend/React__native.js b/src/pages/Frontend/React__native.js
new file mode 100644
index 0000000..5f092fb
--- /dev/null
+++ b/src/pages/Frontend/React__native.js
@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Navbar from "../../components/Navbar";
+import Footer from "../../components/Footer";
+import Reactnative from "../../components/Frontend_files/Reactnative";
+import react_nativeData from "../../data/Front_end/react_native.json";
+const React__native = () => {
+    return (_jsxs("div", { children: [_jsx(Navbar, {}), _jsx("p", { className: "text-5xl mx-auto max-w-screen-xl lg:py-8 lg:px-6 mt-10 font-bold font-sans tracking-tight text-white", children: "React Native Learning Resources:" }), _jsx("div", { className: "border-b border-gray-300 my-2 mx-auto max-w-screen-xl mb-12 lg:px-6" }), react_nativeData.map((react_native, index) => (_jsx(Reactnative, { head: react_native.head, para1: react_native.para1, para2: react_native.para2 || "", para3: react_native.para3 || "", link: react_native.link || "", videoLink: react_native.videoLink || "" }, index))), _jsx(Footer, {})] }));
+};
+export default React__native;
diff --git a/src/pages/Frontend/React__native.jsx b/src/pages/Frontend/React__native.jsx
deleted file mode 100644
index e1fbe70..0000000
--- a/src/pages/Frontend/React__native.jsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import React from "react";
-import Navbar from "../../components/Navbar";
-import Footer from "../../components/Footer";
-import Reactnative from "../../components/Frontend_files/Reactnative";
-import react_nativeData from "../../data/Front_end/react_native.json";
-
-
-const React__native = () => {
-
-    return (
-        <div>
-            <div>
-                <Navbar />
-            </div>
-            <p className=" text-5xl mx-auto max-w-screen-xl lg:py-8 lg:px-6 mt-10 font-bold font-sans tracking-tight text-white">React Native Learning Resources:</p>
-            <div class="border-b border-gray-300 my-2 mx-auto max-w-screen-xl mb-12 lg:px-6"></div>
-            {react_nativeData.map((react_native) => (
-                <Reactnative
-                    head={react_native.head}
-                    para1={react_native.para1}
-                    para2={react_native.para2}
-                    para3={react_native.para3}
-                    link={react_native.link}
-                    videoLink={react_native.videoLink}
-                    image={react_native.image}
-                />
-            ))}
-            <div>
-                <Footer />
-            </div>
-        </div >
-    )
-}
-
-export default React__native;
\ No newline at end of file
diff --git a/src/pages/Frontend/React__native.tsx b/src/pages/Frontend/React__native.tsx
new file mode 100644
index 0000000..d220bd8
--- /dev/null
+++ b/src/pages/Frontend/React__native.tsx
@@ -0,0 +1,46 @@
+import React from "react";
+import Navbar from "../../components/Navbar";
+import Footer from "../../components/Footer";
+import Reactnative from "../../components/Frontend_files/Reactnative";
+import react_nativeData from "../../data/Front_end/react_native.json";
+
+// Define the interface for the react_nativeData items
+interface ReactNativeData {
+    head: string;
+    para1: string;
+    para2?: string; // Optional field
+    para3?: string; // Optional field
+    link?: string; // Optional field
+    videoLink?: string; // Optional field
+    image?: string; // Optional field
+}
+
+const React__native: React.FC = () => {
+    return (
+        <div>
+            <Navbar />
+            <p className="text-5xl mx-auto max-w-screen-xl lg:py-8 lg:px-6 mt-10 font-bold font-sans tracking-tight text-white">
+                React Native Learning Resources:
+            </p>
+            <div className="border-b border-gray-300 my-2 mx-auto max-w-screen-xl mb-12 lg:px-6"></div>
+            
+            {/* Ensure react_nativeData is typed correctly as an array of ReactNativeData */}
+            {react_nativeData.map((react_native: ReactNativeData, index: number) => (
+                <Reactnative
+                    key={index} // Add key for each item
+                    head={react_native.head}
+                    para1={react_native.para1}
+                    para2={react_native.para2 || ""} // Handle optional para2
+                    para3={react_native.para3 || ""} // Handle optional para3
+                    link={react_native.link || ""} // Handle optional link
+                    videoLink={react_native.videoLink || ""} // Handle optional videoLink
+                  
+                />
+            ))}
+            
+            <Footer />
+        </div>
+    );
+};
+
+export default React__native;
diff --git a/src/pages/Frontend/Reactjs.js b/src/pages/Frontend/Reactjs.js
new file mode 100644
index 0000000..4292be2
--- /dev/null
+++ b/src/pages/Frontend/Reactjs.js
@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Navbar from "../../components/Navbar";
+import Footer from "../../components/Footer";
+import Reactt from "../../components/Frontend_files/Reactt";
+import reactData from "../../data/Front_end/react.json";
+const Reactjs = () => {
+    return (_jsxs("div", { children: [_jsx(Navbar, {}), _jsx("p", { className: "text-5xl mx-auto max-w-screen-xl lg:py-8 lg:px-6 mt-10 font-bold font-sans tracking-tight text-white", children: "React Learning Resources:" }), _jsx("div", { className: "border-b border-gray-300 my-2 mx-auto max-w-screen-xl mb-12 lg:px-6" }), reactData.map((react, index) => (_jsx(Reactt, { head: react.head, para1: react.para1, para2: react.para2 || "", para3: react.para3 || "", link: react.link || "", videoLink: react.videoLink || "" }, index))), _jsx(Footer, {})] }));
+};
+export default Reactjs;
diff --git a/src/pages/Frontend/Reactjs.jsx b/src/pages/Frontend/Reactjs.jsx
deleted file mode 100644
index c56f3da..0000000
--- a/src/pages/Frontend/Reactjs.jsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import React from "react";
-import Navbar from "../../components/Navbar";
-import Footer from "../../components/Footer";
-import Reactt from "../../components/Frontend_files/Reactt";
-import reactData from "../../data/Front_end/react.json";
-
-
-const Reactjs = () => {
-
-    return (
-        <div>
-            <div>
-                <Navbar />
-            </div>
-            <p className=" text-5xl mx-auto max-w-screen-xl lg:py-8 lg:px-6 mt-10 font-bold font-sans tracking-tight text-white">React Learning Resources :</p>
-            <div class="border-b border-gray-300 my-2 mx-auto max-w-screen-xl mb-12 lg:px-6"></div>
-            {reactData.map((react) => (
-                <Reactt
-                    head={react.head}
-                    para1={react.para1}
-                    para2={react.para2}
-                    para3={react.para3}
-                    link={react.link}
-                    videoLink={react.videoLink}
-                    image={react.image}
-                />
-            ))}
-            <div>
-                <Footer />
-            </div>
-        </div >
-    )
-}
-
-export default Reactjs;
\ No newline at end of file
diff --git a/src/pages/Frontend/Reactjs.tsx b/src/pages/Frontend/Reactjs.tsx
new file mode 100644
index 0000000..c9924b0
--- /dev/null
+++ b/src/pages/Frontend/Reactjs.tsx
@@ -0,0 +1,44 @@
+import React from "react";
+import Navbar from "../../components/Navbar";
+import Footer from "../../components/Footer";
+import Reactt from "../../components/Frontend_files/Reactt";
+import reactData from "../../data/Front_end/react.json";
+
+// Define the interface for the reactData items
+interface ReactData {
+    head: string;
+    para1: string;
+    para2?: string; // Optional field
+    para3?: string; // Optional field
+    link?: string; // Optional field
+    videoLink?: string; // Optional field
+    image?: string; // Optional field
+}
+
+const Reactjs: React.FC = () => {
+    return (
+        <div>
+            <Navbar />
+            <p className="text-5xl mx-auto max-w-screen-xl lg:py-8 lg:px-6 mt-10 font-bold font-sans tracking-tight text-white">
+                React Learning Resources:
+            </p>
+            <div className="border-b border-gray-300 my-2 mx-auto max-w-screen-xl mb-12 lg:px-6"></div>
+            
+            {/* Ensure reactData is typed correctly as an array of ReactData */}
+            {reactData.map((react: ReactData, index: number) => (
+                <Reactt
+                    key={index} // Add key for each item
+                    head={react.head}
+                    para1={react.para1}
+                    para2={react.para2 || ""} // Handle optional para2
+                    para3={react.para3 || ""} // Handle optional para3
+                    link={react.link || ""} // Handle optional link
+                    videoLink={react.videoLink || ""} // Handle optional videoLink
+                />
+            ))}
+            <Footer />
+        </div>
+    );
+};
+
+export default Reactjs;
diff --git a/src/pages/Frontend/Tail_wind.js b/src/pages/Frontend/Tail_wind.js
new file mode 100644
index 0000000..e32456e
--- /dev/null
+++ b/src/pages/Frontend/Tail_wind.js
@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Navbar from "../../components/Navbar";
+import Footer from "../../components/Footer";
+import Tailwindd from "../../components/Frontend_files/Tailwindd";
+import tailwindData from "../../data/Front_end/tailwind.json";
+const Tail_wind = () => {
+    return (_jsxs("div", { children: [_jsx(Navbar, {}), _jsx("p", { className: "text-5xl mx-auto max-w-screen-xl lg:py-8 lg:px-6 mt-10 font-bold font-sans tracking-tight text-white", children: "Tailwind Learning Resources:" }), _jsx("div", { className: "border-b border-gray-300 my-2 mx-auto max-w-screen-xl mb-12 lg:px-6" }), tailwindData.map((tailwind, index) => (_jsx(Tailwindd, { head: tailwind.head, para1: tailwind.para1, para2: tailwind.para2 || "", para3: tailwind.para3 || "", link: tailwind.link || "", videoLink: tailwind.videoLink || "" }, index))), _jsx(Footer, {})] }));
+};
+export default Tail_wind;
diff --git a/src/pages/Frontend/Tail_wind.jsx b/src/pages/Frontend/Tail_wind.jsx
deleted file mode 100644
index 84842ad..0000000
--- a/src/pages/Frontend/Tail_wind.jsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import React from "react";
-import Navbar from "../../components/Navbar";
-import Footer from "../../components/Footer";
-import Tailwindd from "../../components/Frontend_files/Tailwindd";
-import tailwindData from "../../data/Front_end/tailwind.json";
-
-
-const Tail_wind = () => {
-
-    return (
-        <div>
-            <div>
-                <Navbar />
-            </div>
-            <p className=" text-5xl mx-auto max-w-screen-xl lg:py-8 lg:px-6 mt-10 font-bold font-sans tracking-tight text-white">Tailwind Learning Resources: </p>
-            <div class="border-b border-gray-300 my-2 mx-auto max-w-screen-xl mb-12 lg:px-6"></div>
-            {tailwindData.map((tailwind) => (
-                <Tailwindd
-                    head={tailwind.head}
-                    para1={tailwind.para1}
-                    para2={tailwind.para2}
-                    para3={tailwind.para3}
-                    link={tailwind.link}
-                    videoLink={tailwind.videoLink}
-                    image={tailwind.image}
-                />
-            ))}
-            <div>
-                <Footer />
-            </div>
-        </div >
-    )
-}
-
-export default Tail_wind;
\ No newline at end of file
diff --git a/src/pages/Frontend/Tail_wind.tsx b/src/pages/Frontend/Tail_wind.tsx
new file mode 100644
index 0000000..1686ff6
--- /dev/null
+++ b/src/pages/Frontend/Tail_wind.tsx
@@ -0,0 +1,44 @@
+import React from "react";
+import Navbar from "../../components/Navbar";
+import Footer from "../../components/Footer";
+import Tailwindd from "../../components/Frontend_files/Tailwindd";
+import tailwindData from "../../data/Front_end/tailwind.json";
+
+// Define the interface for the tailwindData items
+interface TailwindData {
+    head: string;
+    para1: string;
+    para2?: string; // Optional field
+    para3?: string; // Optional field
+    link?: string; // Optional field
+    videoLink?: string; // Optional field
+    image?: string; // Optional field
+}
+
+const Tail_wind: React.FC = () => {
+    return (
+        <div>
+            <Navbar />
+            <p className="text-5xl mx-auto max-w-screen-xl lg:py-8 lg:px-6 mt-10 font-bold font-sans tracking-tight text-white">
+                Tailwind Learning Resources:
+            </p>
+            <div className="border-b border-gray-300 my-2 mx-auto max-w-screen-xl mb-12 lg:px-6"></div>
+            
+            {/* Ensure tailwindData is typed correctly as an array of TailwindData */}
+            {tailwindData.map((tailwind: TailwindData, index: number) => (
+                <Tailwindd
+                    key={index} // Add key for each item
+                    head={tailwind.head}
+                    para1={tailwind.para1}
+                    para2={tailwind.para2 || ""} // Handle optional para2
+                    para3={tailwind.para3 || ""} // Handle optional para3
+                    link={tailwind.link || ""} // Handle optional link
+                    videoLink={tailwind.videoLink || ""} // Handle optional videoLink
+                />
+            ))}
+            <Footer />
+        </div>
+    );
+};
+
+export default Tail_wind;
diff --git a/src/pages/Frontend/Three__js.js b/src/pages/Frontend/Three__js.js
new file mode 100644
index 0000000..a99bd63
--- /dev/null
+++ b/src/pages/Frontend/Three__js.js
@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Navbar from "../../components/Navbar";
+import Footer from "../../components/Footer";
+import Three_js from "../../components/Frontend_files/Three_js";
+import threejsData from "../../data/Front_end/threejs.json";
+const Three__js = () => {
+    return (_jsxs("div", { children: [_jsx(Navbar, {}), _jsx("p", { className: "text-5xl mx-auto max-w-screen-xl lg:py-8 lg:px-6 mt-10 font-bold font-sans tracking-tight text-white", children: "Three.js Learning Resources:" }), _jsx("div", { className: "border-b border-gray-300 my-2 mx-auto max-w-screen-xl mb-12 lg:px-6" }), threejsData.map((threejs, index) => (_jsx(Three_js, { head: threejs.head, para1: threejs.para1, para2: threejs.para2 || "", para3: threejs.para3 || "", link: threejs.link || "", videoLink: threejs.videoLink || "" }, index))), _jsx(Footer, {})] }));
+};
+export default Three__js;
diff --git a/src/pages/Frontend/Three__js.jsx b/src/pages/Frontend/Three__js.jsx
deleted file mode 100644
index 6d2ba66..0000000
--- a/src/pages/Frontend/Three__js.jsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import React from "react";
-import Navbar from "../../components/Navbar";
-import Footer from "../../components/Footer";
-import Three_js from "../../components/Frontend_files/Three_js";
-import threejsData from "../../data/Front_end/threejs.json";
-
-
-const Three__js = () => {
-
-    return (
-        <div>
-            <div>
-                <Navbar />
-            </div>
-            <p className=" text-5xl mx-auto max-w-screen-xl lg:py-8 lg:px-6 mt-10 font-bold font-sans tracking-tight text-white">Three.js Learning Resources :</p>
-            <div class="border-b border-gray-300 my-2 mx-auto max-w-screen-xl mb-12 lg:px-6"></div>
-            {threejsData.map((threejs) => (
-                <Three_js
-                    head={threejs.head}
-                    para1={threejs.para1}
-                    para2={threejs.para2}
-                    para3={threejs.para3}
-                    link={threejs.link}
-                    videoLink={threejs.videoLink}
-                    image={threejs.image}
-                />
-            ))}
-            <div>
-                <Footer />
-            </div>
-        </div >
-    )
-}
-
-export default Three__js;
\ No newline at end of file
diff --git a/src/pages/Frontend/Three__js.tsx b/src/pages/Frontend/Three__js.tsx
new file mode 100644
index 0000000..14331b3
--- /dev/null
+++ b/src/pages/Frontend/Three__js.tsx
@@ -0,0 +1,44 @@
+import React from "react";
+import Navbar from "../../components/Navbar";
+import Footer from "../../components/Footer";
+import Three_js from "../../components/Frontend_files/Three_js";
+import threejsData from "../../data/Front_end/threejs.json";
+
+// Define the interface for the threejsData items
+interface ThreeJSData {
+    head: string;
+    para1: string;
+    para2?: string; // Optional field
+    para3?: string; // Optional field
+    link?: string; // Optional field
+    videoLink?: string; // Optional field
+    image?: string; // Optional field
+}
+
+const Three__js: React.FC = () => {
+    return (
+        <div>
+            <Navbar />
+            <p className="text-5xl mx-auto max-w-screen-xl lg:py-8 lg:px-6 mt-10 font-bold font-sans tracking-tight text-white">
+                Three.js Learning Resources:
+            </p>
+            <div className="border-b border-gray-300 my-2 mx-auto max-w-screen-xl mb-12 lg:px-6"></div>
+            
+            {/* Ensure threejsData is typed correctly as an array of ThreeJSData */}
+            {threejsData.map((threejs: ThreeJSData, index: number) => (
+                <Three_js
+                    key={index} // Add key for each item
+                    head={threejs.head}
+                    para1={threejs.para1}
+                    para2={threejs.para2 || ""} // Handle optional para2
+                    para3={threejs.para3 || ""} // Handle optional para3
+                    link={threejs.link || ""} // Handle optional link
+                    videoLink={threejs.videoLink || ""} // Handle optional videoLink
+                />
+            ))}
+            <Footer />
+        </div>
+    );
+};
+
+export default Three__js;
diff --git a/src/pages/Frontend/Vue__js.js b/src/pages/Frontend/Vue__js.js
new file mode 100644
index 0000000..c88094f
--- /dev/null
+++ b/src/pages/Frontend/Vue__js.js
@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Navbar from "../../components/Navbar";
+import Footer from "../../components/Footer";
+import Vue_js from "../../components/Frontend_files/Vue_js";
+import vuejsData from "../../data/Front_end/vuejs.json";
+const Vue__js = () => {
+    return (_jsxs("div", { children: [_jsx(Navbar, {}), _jsx("p", { className: "text-5xl mx-auto max-w-screen-xl lg:py-8 lg:px-6 mt-10 font-bold font-sans tracking-tight text-white", children: "Vue.js Learning Resources:" }), _jsx("div", { className: "border-b border-gray-300 my-2 mx-auto max-w-screen-xl mb-12 lg:px-6" }), vuejsData.map((vuejs, index) => (_jsx(Vue_js, { head: vuejs.head, para1: vuejs.para1, para2: vuejs.para2 || "", para3: vuejs.para3 || "", link: vuejs.link || "", videoLink: vuejs.videoLink || "" }, index))), _jsx(Footer, {})] }));
+};
+export default Vue__js;
diff --git a/src/pages/Frontend/Vue__js.jsx b/src/pages/Frontend/Vue__js.jsx
deleted file mode 100644
index dc2a6cd..0000000
--- a/src/pages/Frontend/Vue__js.jsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import React from "react";
-import Navbar from "../../components/Navbar";
-import Footer from "../../components/Footer";
-import Vue_js from "../../components/Frontend_files/Vue_js";
-import vuejsData from "../../data/Front_end/vuejs.json";
-
-
-const Vue__js = () => {
-
-    return (
-        <div>
-            <div>
-                <Navbar />
-            </div>
-            <p className=" text-5xl mx-auto max-w-screen-xl lg:py-8 lg:px-6 mt-10 font-bold font-sans tracking-tight text-white">Vue.js Learning Resources :</p>
-            <div class="border-b border-gray-300 my-2 mx-auto max-w-screen-xl mb-12 lg:px-6"></div>
-            {vuejsData.map((vuejs) => (
-                <Vue_js
-                    head={vuejs.head}
-                    para1={vuejs.para1}
-                    para2={vuejs.para2}
-                    para3={vuejs.para3}
-                    link={vuejs.link}
-                    videoLink={vuejs.videoLink}
-                    image={vuejs.image}
-                />
-            ))}
-            <div>
-                <Footer />
-            </div>
-        </div >
-    )
-}
-
-export default Vue__js;
\ No newline at end of file
diff --git a/src/pages/Frontend/Vue__js.tsx b/src/pages/Frontend/Vue__js.tsx
new file mode 100644
index 0000000..e40d25b
--- /dev/null
+++ b/src/pages/Frontend/Vue__js.tsx
@@ -0,0 +1,44 @@
+import React from "react";
+import Navbar from "../../components/Navbar";
+import Footer from "../../components/Footer";
+import Vue_js from "../../components/Frontend_files/Vue_js";
+import vuejsData from "../../data/Front_end/vuejs.json";
+
+// Define the interface for the vuejsData items
+interface VueJSData {
+    head: string;
+    para1: string;
+    para2?: string; // Optional field
+    para3?: string; // Optional field
+    link?: string; // Optional field
+    videoLink?: string; // Optional field
+    image?: string; // Optional field
+}
+
+const Vue__js: React.FC = () => {
+    return (
+        <div>
+            <Navbar />
+            <p className="text-5xl mx-auto max-w-screen-xl lg:py-8 lg:px-6 mt-10 font-bold font-sans tracking-tight text-white">
+                Vue.js Learning Resources:
+            </p>
+            <div className="border-b border-gray-300 my-2 mx-auto max-w-screen-xl mb-12 lg:px-6"></div>
+            
+            {/* Ensure vuejsData is typed correctly as an array of VueJSData */}
+            {vuejsData.map((vuejs: VueJSData, index: number) => (
+                <Vue_js
+                    key={index} // Add key for each item
+                    head={vuejs.head}
+                    para1={vuejs.para1}
+                    para2={vuejs.para2 || ""} // Handle optional para2
+                    para3={vuejs.para3 || ""} // Handle optional para3
+                    link={vuejs.link || ""} // Handle optional link
+                    videoLink={vuejs.videoLink || ""} // Handle optional videoLink 
+                />
+            ))}
+            <Footer />
+        </div>
+    );
+};
+
+export default Vue__js;
diff --git a/src/pages/GitHubRepoCard.js b/src/pages/GitHubRepoCard.js
new file mode 100644
index 0000000..0dbbd0b
--- /dev/null
+++ b/src/pages/GitHubRepoCard.js
@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from 'react';
+const GitHubRepoCard = ({ repoUrl }) => {
+    const [repoData, setRepoData] = useState(null);
+    useEffect(() => {
+        fetch(repoUrl)
+            .then(response => response.json())
+            .then(data => setRepoData(data))
+            .catch(error => console.error('Error fetching repository data:', error));
+    }, [repoUrl]);
+    return (_jsx("div", { className: "w-72 h-54 rounded-lg overflow-hidden shadow-lg bg-transparent border border-gray-500 hover:bg-gray-700 transition duration-300 ease-in-out", children: repoData && (_jsxs("div", { className: "h-full flex flex-col justify-between", children: [_jsx("div", { className: "flex flex-col justify-between h-full", children: _jsxs("div", { className: "px-6 py-4", children: [_jsx("div", { className: "font-bold text-xl mb-2 text-white", children: repoData.name }), _jsx("p", { className: "text-sm text-gray-300 mb-4", children: repoData.description })] }) }), _jsxs("div", { className: "px-6 py-4 flex-col justify-between items-center", children: [_jsxs("div", { className: "flex items-center", children: [_jsx("img", { src: repoData.owner.avatar_url, alt: "Owner Avatar", className: "w-6 h-6 rounded-full mr-2" }), _jsx("p", { className: "text-sm text-gray-300", children: repoData.owner.login })] }), _jsxs("div", { className: 'flex justify-between my-2', children: [_jsxs("p", { className: "text-sm text-gray-300", children: ["Language: ", repoData.language] }), _jsxs("p", { className: "text-sm text-gray-300", children: ["Stars: ", repoData.stargazers_count] })] })] }), _jsx("div", { className: "px-6 pb-4", children: _jsx("a", { href: repoData.html_url, className: "text-sm text-blue-400 hover:underline", target: "_blank", rel: "noopener noreferrer", children: "View on GitHub" }) })] })) }));
+};
+export default GitHubRepoCard;
diff --git a/src/pages/GitHubRepoCard.jsx b/src/pages/GitHubRepoCard.tsx
similarity index 81%
rename from src/pages/GitHubRepoCard.jsx
rename to src/pages/GitHubRepoCard.tsx
index 2779edd..b64ebe5 100644
--- a/src/pages/GitHubRepoCard.jsx
+++ b/src/pages/GitHubRepoCard.tsx
@@ -1,7 +1,23 @@
 import React, { useState, useEffect } from 'react';
 
-const GitHubRepoCard = ({ repoUrl }) => {
-  const [repoData, setRepoData] = useState(null);
+interface RepoData {
+  name: string;
+  description: string;
+  language: string;
+  stargazers_count: number;
+  html_url: string;
+  owner: {
+    login: string;
+    avatar_url: string;
+  };
+}
+
+interface GitHubRepoCardProps {
+  repoUrl: string;
+}
+
+const GitHubRepoCard: React.FC<GitHubRepoCardProps> = ({ repoUrl }) => {
+  const [repoData, setRepoData] = useState<RepoData | null>(null);
 
   useEffect(() => {
     fetch(repoUrl)
diff --git a/src/pages/Guide.js b/src/pages/Guide.js
new file mode 100644
index 0000000..3fa19f6
--- /dev/null
+++ b/src/pages/Guide.js
@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Navbar from "../components/Navbar";
+import Footer from "../components/Footer";
+import Guide_Element from "../components/Guide_Element";
+const Guide = () => {
+    return (_jsxs("div", { children: [_jsx(Navbar, {}), _jsx(Guide_Element, {}), _jsx(Footer, {})] }));
+};
+export default Guide;
diff --git a/src/pages/Guide.jsx b/src/pages/Guide.tsx
similarity index 84%
rename from src/pages/Guide.jsx
rename to src/pages/Guide.tsx
index 46cc2c3..7256f0e 100644
--- a/src/pages/Guide.jsx
+++ b/src/pages/Guide.tsx
@@ -3,7 +3,7 @@ import Navbar from "../components/Navbar";
 import Footer from "../components/Footer";
 import Guide_Element from "../components/Guide_Element";
 
-const Guide = () => {
+const Guide: React.FC = () => {
     return (
         <div>
             <Navbar />
@@ -13,4 +13,4 @@ const Guide = () => {
     );
 };
 
-export default Guide;
\ No newline at end of file
+export default Guide;
diff --git a/src/pages/Homepage.js b/src/pages/Homepage.js
new file mode 100644
index 0000000..9290d56
--- /dev/null
+++ b/src/pages/Homepage.js
@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import About from "../components/About";
+import Hero from "../components/Hero";
+import Navbar from "../components/Navbar";
+import Newsletter from "../components/Newsletter";
+import Footer from "../components/Footer";
+import Lottie from "react-lottie"; // Ensure @types/react-lottie is installed
+import animationData from "../assets/lotties/community_animation_lottie.json";
+const Homepage = () => {
+    const defaultOptions = {
+        loop: true,
+        autoplay: true,
+        animationData: animationData,
+        rendererSettings: {
+            preserveAspectRatio: "xMidYMid slice",
+        },
+    };
+    return (_jsxs("div", { children: [_jsx(Navbar, {}), _jsx(Hero, {}), _jsx(About, {}), _jsx(Newsletter, {}), _jsx("div", { className: "flex justify-center my-8", children: _jsx(Lottie, { options: defaultOptions, height: 300, width: 300 }) }), _jsx(Footer, {})] }));
+};
+export default Homepage;
diff --git a/src/pages/Homepage.jsx b/src/pages/Homepage.tsx
similarity index 63%
rename from src/pages/Homepage.jsx
rename to src/pages/Homepage.tsx
index 27a1963..968af3c 100644
--- a/src/pages/Homepage.jsx
+++ b/src/pages/Homepage.tsx
@@ -4,13 +4,12 @@ import Hero from "../components/Hero";
 import Navbar from "../components/Navbar";
 import Newsletter from "../components/Newsletter";
 import Footer from "../components/Footer";
-import Cards from "../components/Cards";
-import Lottie from "react-lottie";
+import Lottie from "react-lottie"; // Ensure @types/react-lottie is installed
 import animationData from "../assets/lotties/community_animation_lottie.json";
-import Typed from "react-typed";
 
-const Homepage = () => {
-  const defaultOptions = {
+
+const Homepage: React.FC = () => {
+  const defaultOptions: object = {
     loop: true,
     autoplay: true,
     animationData: animationData,
@@ -22,11 +21,14 @@ const Homepage = () => {
   return (
     <div>
       <Navbar />
-      
-     <Hero />
+      <Hero />
       <About />
       <Newsletter />
-      {/* <Cards/> */}
+      {/* Use Lottie animation */}
+      <div className="flex justify-center my-8">
+        <Lottie options={defaultOptions} height={300} width={300} />
+      </div>
+      {/* <Cards /> */}
       <Footer />
     </div>
   );
diff --git a/src/pages/PageNotFound.js b/src/pages/PageNotFound.js
new file mode 100644
index 0000000..643efca
--- /dev/null
+++ b/src/pages/PageNotFound.js
@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Link } from "react-router-dom";
+import DinoGame from 'react-chrome-dino-ts';
+import 'react-chrome-dino-ts/index.css';
+const PageNotFound = () => {
+    return (_jsxs("div", { className: "flex text-white flex-col items-center justify-center p-10", children: [_jsx(DinoGame, {}), _jsx("p", { className: "font-bold md:text-3xl sm:text-2xl text-xl p-4 text-white", children: "Sorry, the page you are looking for does not exist." }), _jsx(Link, { to: "/", className: "inline-block", children: _jsx("button", { className: "hover:bg-green-800 bg-[#0dff1c] w-[190px] h-[60px] rounded-md font-medium text-black", children: "GO BACK HOME" }) })] }));
+};
+export default PageNotFound;
diff --git a/src/pages/PageNotFound.jsx b/src/pages/PageNotFound.jsx
deleted file mode 100644
index 91a266d..0000000
--- a/src/pages/PageNotFound.jsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import { Link } from "react-router-dom";
-import logo_404 from "../assets/img/page_not_found_img/error.png";
-import DinoGame from 'react-chrome-dino-ts'
-import 'react-chrome-dino-ts/index.css'
-
-function PageNotFound() {
-  return (
-    <div className="flex   text-white flex-col items-center justify-center  p-10">
-      <DinoGame />
-      <p className="font-bold md:text-3xl  sm:text-2xl text-xl p-4 text-white">
-        Sorry the page you are looking for does not exist.
-      </p>
-      <Link to="/" className="inline-block">
-      <button className="hover:bg-green-800 bg-[#0dff1c] w-[190px] h-[60px] rounded-md font-medium text-black">
-        GO BACK HOME
-      </button>
-      </Link>
-    </div>
-  );
-}
-export default PageNotFound;
diff --git a/src/pages/PageNotFound.tsx b/src/pages/PageNotFound.tsx
new file mode 100644
index 0000000..5577744
--- /dev/null
+++ b/src/pages/PageNotFound.tsx
@@ -0,0 +1,22 @@
+import React from 'react';
+import { Link } from "react-router-dom";
+import DinoGame from 'react-chrome-dino-ts';
+import 'react-chrome-dino-ts/index.css';
+
+const PageNotFound: React.FC = () => {
+  return (
+    <div className="flex text-white flex-col items-center justify-center p-10">
+      <DinoGame />
+      <p className="font-bold md:text-3xl sm:text-2xl text-xl p-4 text-white">
+        Sorry, the page you are looking for does not exist.
+      </p>
+      <Link to="/" className="inline-block">
+        <button className="hover:bg-green-800 bg-[#0dff1c] w-[190px] h-[60px] rounded-md font-medium text-black">
+          GO BACK HOME
+        </button>
+      </Link>
+    </div>
+  );
+};
+
+export default PageNotFound;
diff --git a/src/pages/Privacy.js b/src/pages/Privacy.js
new file mode 100644
index 0000000..de9136a
--- /dev/null
+++ b/src/pages/Privacy.js
@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Navbar from "../components/Navbar";
+import Footer from "../components/Footer";
+import PrivacyPolicy from "../components/PrivacyPolicy";
+const Privacy = () => {
+    return (_jsxs("div", { children: [_jsx(Navbar, {}), _jsx(PrivacyPolicy, {}), _jsx(Footer, {})] }));
+};
+export default Privacy;
diff --git a/src/pages/Privacy.jsx b/src/pages/Privacy.tsx
similarity index 90%
rename from src/pages/Privacy.jsx
rename to src/pages/Privacy.tsx
index 5cb276c..fde6e0b 100644
--- a/src/pages/Privacy.jsx
+++ b/src/pages/Privacy.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import Navbar from "../components/Navbar";
 import Footer from "../components/Footer";
 import PrivacyPolicy from "../components/PrivacyPolicy";
-const Privacy = () => {
+const Privacy: React.FC = () => {
     return (
         <div>
             <Navbar />
diff --git a/src/pages/Projects.js b/src/pages/Projects.js
new file mode 100644
index 0000000..f007651
--- /dev/null
+++ b/src/pages/Projects.js
@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const Projects = () => {
+    return (_jsx("div", { children: "Projects" }));
+};
+export default Projects;
diff --git a/src/pages/Projects.jsx b/src/pages/Projects.tsx
similarity index 72%
rename from src/pages/Projects.jsx
rename to src/pages/Projects.tsx
index 9abd0eb..1651a83 100644
--- a/src/pages/Projects.jsx
+++ b/src/pages/Projects.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 
-const Projects = () => {
+const Projects: React.FC = () => {
   return (
     <div>Projects</div>
   )
diff --git a/src/pages/Resources.js b/src/pages/Resources.js
new file mode 100644
index 0000000..0418242
--- /dev/null
+++ b/src/pages/Resources.js
@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Navbar from "../components/Navbar";
+import Footer from "../components/Footer";
+import Resource from "../components/Resource";
+const Resources = () => {
+    return (_jsxs("div", { children: [_jsx(Navbar, {}), _jsx(Resource, {}), _jsx(Footer, {})] }));
+};
+export default Resources;
diff --git a/src/pages/Resources.jsx b/src/pages/Resources.tsx
similarity index 89%
rename from src/pages/Resources.jsx
rename to src/pages/Resources.tsx
index 2066131..dd169da 100644
--- a/src/pages/Resources.jsx
+++ b/src/pages/Resources.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import Navbar from "../components/Navbar";
 import Footer from "../components/Footer";
 import Resource from "../components/Resource"
-const Resources = () => {
+const Resources: React.FC = () => {
     return (
         <div>
             <Navbar />
diff --git a/src/pages/Shipyard.js b/src/pages/Shipyard.js
new file mode 100644
index 0000000..f6b3d93
--- /dev/null
+++ b/src/pages/Shipyard.js
@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Navbar from '../components/Navbar';
+import GitHubRepoCard from './GitHubRepoCard';
+import Footer from '../components/Footer';
+const Shipyard = () => {
+    return (_jsxs("div", { children: [_jsx(Navbar, {}), _jsxs("div", { className: "mx-auto justify-center py-14", children: [_jsx("h1", { className: "text-6xl mb-6 font-bold text-center text-opensource-green", children: "\u2693 Shipyard" }), _jsx("p", { className: 'text-2xl mb-6 font-bold text-center text-white py-4', children: "Check out some of the cool projects built by our community members \uD83D\uDC9A." }), _jsxs("div", { className: "flex flex-wrap justify-center gap-12 py-4", children: [_jsx(GitHubRepoCard, { repoUrl: "https://api.github.com/repos/fOSS-Community/quickfire" }), _jsx(GitHubRepoCard, { repoUrl: "https://api.github.com/repos/SAMAD101/Chino" }), _jsx(GitHubRepoCard, { repoUrl: "https://api.github.com/repos/YashRaj1506/djangocraft_cli" }), _jsx(GitHubRepoCard, { repoUrl: "https://api.github.com/repos/codecShivam/TSDiffTool" }), _jsx(GitHubRepoCard, { repoUrl: "https://api.github.com/repos/FOSS-Community/LinkLiberate" })] })] }), _jsx(Footer, {})] }));
+};
+export default Shipyard;
diff --git a/src/pages/Shipyard.jsx b/src/pages/Shipyard.tsx
similarity index 89%
rename from src/pages/Shipyard.jsx
rename to src/pages/Shipyard.tsx
index 547d778..ae81ff7 100644
--- a/src/pages/Shipyard.jsx
+++ b/src/pages/Shipyard.tsx
@@ -3,7 +3,7 @@ import Navbar from '../components/Navbar';
 import GitHubRepoCard from './GitHubRepoCard';
 import Footer from '../components/Footer';
 
-function Shipyard() {
+const Shipyard: React.FC = () => {
   return (
     <div>
       <Navbar />
@@ -12,7 +12,7 @@ function Shipyard() {
           ⚓ Shipyard
         </h1>
         <p className='text-2xl mb-6 font-bold text-center text-white py-4'>
-            Check out some of the cool projects built by our community members 💚.
+          Check out some of the cool projects built by our community members 💚.
         </p>
         <div className="flex flex-wrap justify-center gap-12 py-4">
           <GitHubRepoCard repoUrl="https://api.github.com/repos/fOSS-Community/quickfire" />
@@ -24,7 +24,7 @@ function Shipyard() {
       </div>
       <Footer />
     </div>
-  )
-}
+  );
+};
 
 export default Shipyard;
diff --git a/src/pages/Team.js b/src/pages/Team.js
new file mode 100644
index 0000000..5c12a03
--- /dev/null
+++ b/src/pages/Team.js
@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Navbar from "../components/Navbar";
+import Footer from "../components/Footer";
+import Teams from "../components/TeamsComponent";
+import teamsData from "../data/teams.json";
+const Team = () => {
+    const steeringCouncilData = teamsData.find((item) => "Steering Council" in item) || {};
+    const volunteerData = teamsData.find((item) => "Volunteer" in item) || {};
+    return (_jsxs("div", { children: [_jsx(Navbar, {}), _jsxs("div", { className: "w-full py-[2rem]", children: [_jsx("div", { className: "mx-auto justify-center py-[4rem]", children: _jsx("h1", { className: "text-6xl mb-6 font-bold text-center text-opensource-green", children: "Steering Council" }) }), _jsx("div", { className: "max-w-[1240px] mx-auto grid md:grid-cols-4 gap-8", children: steeringCouncilData["Steering Council"] &&
+                            steeringCouncilData["Steering Council"].map((member, index) => (_jsx(Teams, { image: member.image, name: member.name, position: member.position, link: member.link }, index))) }), _jsx("div", { className: "mx-auto justify-center py-[4rem]", children: _jsx("h1", { className: "text-6xl mb-6 font-bold text-center text-opensource-green", children: "Our Volunteers" }) }), _jsx("div", { className: "max-w-[1240px] mx-auto grid md:grid-cols-3 gap-8", children: volunteerData.Volunteer &&
+                            volunteerData.Volunteer.map((member, index) => (_jsx(Teams, { image: member.image, name: member.name, position: member.position, link: member.link }, index))) })] }), _jsx(Footer, {})] }));
+};
+export default Team;
diff --git a/src/pages/Team.jsx b/src/pages/Team.jsx
deleted file mode 100644
index a6d02b6..0000000
--- a/src/pages/Team.jsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import React from "react";
-import Navbar from "../components/Navbar";
-import Footer from "../components/Footer";
-import Teams from "../components/TeamsComponent";
-import teamsData from "../data/teams.json";
-
-const Team = () => {
-  const steeringCouncilData = teamsData.find((item) => "Steering Council" in item) || {};
-  const volunteerData = teamsData.find((item) => "Volunteer" in item) || {};
-
-  return (
-    <div>
-      <Navbar />
-      <div className="w-full py-[2rem]">
-        {/* Steering Council Section */}
-        <div className="mx-auto justify-center py-[4rem]">
-          <h1 className="text-6xl mb-6 font-bold text-center text-opensource-green">
-            Steering Council
-          </h1>
-        </div>
-        <div className="max-w-[1240px] mx-auto grid md:grid-cols-4 gap-8">
-          {steeringCouncilData["Steering Council"] && steeringCouncilData["Steering Council"].map((member, index) => (
-            <Teams
-              key={index}
-              image={member.image}
-              name={member.name}
-              position={member.position}
-              link={member.link}
-            />
-          ))}
-        </div>
-
-        {/* Volunteer Section */}
-        <div className="mx-auto justify-center py-[4rem]">
-          <h1 className="text-6xl mb-6 font-bold text-center text-opensource-green">
-            Our Volunteers
-          </h1>
-        </div>
-        <div className="max-w-[1240px] mx-auto grid md:grid-cols-3 gap-8">
-          {volunteerData.Volunteer && volunteerData.Volunteer.map((member, index) => (
-            <Teams
-              key={index}
-              image={member.image}
-              name={member.name}
-              position={member.position}
-              link={member.link}
-            />
-          ))}
-        </div>
-      </div>
-      <Footer />
-    </div>
-  );
-};
-
-export default Team;
diff --git a/src/pages/Team.tsx b/src/pages/Team.tsx
new file mode 100644
index 0000000..9173746
--- /dev/null
+++ b/src/pages/Team.tsx
@@ -0,0 +1,74 @@
+import React from "react";
+import Navbar from "../components/Navbar";
+import Footer from "../components/Footer";
+import Teams from "../components/TeamsComponent";
+import teamsData from "../data/teams.json";
+
+interface TeamMember {
+  image: string;
+  name: string;
+  position: string;
+  link: {
+    url: string;
+    target: string;
+    rel: string;
+  };
+}
+
+interface TeamsData {
+  "Steering Council"?: TeamMember[];
+  Volunteer?: TeamMember[];
+}
+
+const Team: React.FC = () => {
+  const steeringCouncilData: TeamsData = teamsData.find((item) => "Steering Council" in item) || {};
+  const volunteerData: TeamsData = teamsData.find((item) => "Volunteer" in item) || {};
+
+  return (
+    <div>
+      <Navbar />
+      <div className="w-full py-[2rem]">
+        {/* Steering Council Section */}
+        <div className="mx-auto justify-center py-[4rem]">
+          <h1 className="text-6xl mb-6 font-bold text-center text-opensource-green">
+            Steering Council
+          </h1>
+        </div>
+        <div className="max-w-[1240px] mx-auto grid md:grid-cols-4 gap-8">
+          {steeringCouncilData["Steering Council"] &&
+            steeringCouncilData["Steering Council"].map((member, index) => (
+              <Teams
+                key={index}
+                image={member.image}
+                name={member.name}
+                position={member.position}
+                link={member.link}
+              />
+            ))}
+        </div>
+
+        {/* Volunteer Section */}
+        <div className="mx-auto justify-center py-[4rem]">
+          <h1 className="text-6xl mb-6 font-bold text-center text-opensource-green">
+            Our Volunteers
+          </h1>
+        </div>
+        <div className="max-w-[1240px] mx-auto grid md:grid-cols-3 gap-8">
+          {volunteerData.Volunteer &&
+            volunteerData.Volunteer.map((member, index) => (
+              <Teams
+                key={index}
+                image={member.image}
+                name={member.name}
+                position={member.position}
+                link={member.link}
+              />
+            ))}
+        </div>
+      </div>
+      <Footer />
+    </div>
+  );
+};
+
+export default Team;
diff --git a/src/react-lottie.d.ts b/src/react-lottie.d.ts
new file mode 100644
index 0000000..93868f4
--- /dev/null
+++ b/src/react-lottie.d.ts
@@ -0,0 +1,21 @@
+declare module 'react-lottie' {
+    import { Component } from 'react';
+  
+    interface LottieProps {
+      options: object;
+      height?: number;
+      width?: number;
+      isStopped?: boolean;
+      isPaused?: boolean;
+      speed?: number;
+      direction?: number;
+      eventListeners?: object[];
+      ariaRole?: string;
+      ariaLabel?: string;
+      isClickToPauseDisabled?: boolean;
+      title?: string;
+    }
+  
+    export default class Lottie extends Component<LottieProps> {}
+  }
+  
\ No newline at end of file
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..1f432aa
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "module": "ESNext",
+    "jsx": "react-jsx",                     // Enable JSX for React projects
+    "strict": true,
+    "outDir": "./dist",
+    "moduleResolution": "node",
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true // Enable JSON imports
+  
+  },
+  "include": ["**/*"],                       // Include all files and directories
+  "exclude": ["node_modules", "dist"]        // Exclude node_modules and any build output folders
+}
diff --git a/vite.config.js b/vite.config.js
new file mode 100644
index 0000000..33431ff
--- /dev/null
+++ b/vite.config.js
@@ -0,0 +1,19 @@
+import path from "path";
+import react from "@vitejs/plugin-react";
+import { defineConfig } from "vite";
+import { config } from 'dotenv';
+config();
+export default defineConfig({
+    plugins: [react()],
+    resolve: {
+        alias: {
+            "@": path.resolve(__dirname, "./src"),
+        },
+    },
+    define: {
+        'process.env': process.env
+    },
+    server: {
+        port: 8080, // Set the desired port here
+    }
+});
diff --git a/yarn.lock b/yarn.lock
index 9807bc3..388dfa4 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -332,7 +332,7 @@
 
 "@esbuild/linux-x64@0.17.15":
   version "0.17.15"
-  resolved "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.17.15.tgz"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-x64/-/linux-x64-0.17.15.tgz#31b93f9c94c195e852c20cd3d1914a68aa619124"
   integrity sha512-JsdS0EgEViwuKsw5tiJQo9UdQdUJYuB+Mf6HxtJSPN35vez1hlrNb1KajvKWF5Sa35j17+rW1ECEO9iNrIXbNg==
 
 "@esbuild/netbsd-x64@0.17.15":
@@ -362,7 +362,7 @@
 
 "@esbuild/win32-x64@0.17.15":
   version "0.17.15"
-  resolved "https://registry.yarnpkg.com/@esbuild/win32-x64/-/win32-x64-0.17.15.tgz#c2e737f3a201ebff8e2ac2b8e9f246b397ad19b8"
+  resolved "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.17.15.tgz"
   integrity sha512-DjDa9ywLUUmjhV2Y9wUTIF+1XsmuFGvZoCmOWkli1XcNAh5t25cc7fgsCx4Zi/Uurep3TTLyDiKATgGEg61pkA==
 
 "@floating-ui/core@^1.0.1":
@@ -975,7 +975,14 @@ brace-expansion@^2.0.1:
   dependencies:
     balanced-match "^1.0.0"
 
-braces@^3.0.2, braces@~3.0.2:
+braces@^3.0.3:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/braces/-/braces-3.0.3.tgz#490332f40919452272d55a8480adc0c441358789"
+  integrity sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==
+  dependencies:
+    fill-range "^7.1.1"
+
+braces@~3.0.2:
   version "3.0.2"
   resolved "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz"
   integrity sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==
@@ -1091,10 +1098,10 @@ cheerio@^1.0.0-rc.3:
     parse5 "^7.0.0"
     parse5-htmlparser2-tree-adapter "^7.0.0"
 
-chokidar@^3.5.3:
-  version "3.5.3"
-  resolved "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz"
-  integrity sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==
+chokidar@^3.6.0:
+  version "3.6.0"
+  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.6.0.tgz#197c6cc669ef2a8dc5e7b4d97ee4e092c3eb0d5b"
+  integrity sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==
   dependencies:
     anymatch "~3.1.2"
     braces "~3.0.2"
@@ -1591,9 +1598,9 @@ fast-deep-equal@^3.1.1:
   resolved "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz"
   integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
 
-fast-glob@^3.3.0:
+fast-glob@^3.3.2:
   version "3.3.2"
-  resolved "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz"
+  resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.3.2.tgz#a904501e57cfdd2ffcded45e99a54fef55e46129"
   integrity sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==
   dependencies:
     "@nodelib/fs.stat" "^2.0.2"
@@ -1623,6 +1630,13 @@ fill-range@^7.0.1:
   dependencies:
     to-regex-range "^5.0.1"
 
+fill-range@^7.1.1:
+  version "7.1.1"
+  resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-7.1.1.tgz#44265d3cac07e3ea7dc247516380643754a05292"
+  integrity sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==
+  dependencies:
+    to-regex-range "^5.0.1"
+
 find-node-modules@^2.1.2:
   version "2.1.3"
   resolved "https://registry.npmjs.org/find-node-modules/-/find-node-modules-2.1.3.tgz"
@@ -2150,10 +2164,10 @@ jackspeak@^2.3.6:
   optionalDependencies:
     "@pkgjs/parseargs" "^0.11.0"
 
-jiti@^1.21.0:
-  version "1.21.0"
-  resolved "https://registry.npmjs.org/jiti/-/jiti-1.21.0.tgz"
-  integrity sha512-gFqAIbuKyyso/3G2qhiO2OM6shY6EPP/R0+mkDbyspxKazh8BXDC5FiFsUjlczgdNz/vfra0da2y+aHrusLG/Q==
+jiti@^1.21.6:
+  version "1.21.6"
+  resolved "https://registry.yarnpkg.com/jiti/-/jiti-1.21.6.tgz#6c7f7398dd4b3142767f9a168af2f317a428d268"
+  integrity sha512-2yTgeWTWzMWkHu6Jp9NKgePDaYHbntiwvYuuJLbbN9vl7DC9DvXKOB2BC3ZZ92D3cvV/aflH0osDfwpHepQ53w==
 
 "js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0:
   version "4.0.0"
@@ -2285,12 +2299,12 @@ merge@^2.1.1:
   resolved "https://registry.npmjs.org/merge/-/merge-2.1.1.tgz"
   integrity sha512-jz+Cfrg9GWOZbQAnDQ4hlVnQky+341Yk5ru8bZSe6sIDTCIg8n9i/u7hSQGSVOF3C7lH6mGtqjkiT9G4wFLL0w==
 
-micromatch@^4.0.2, micromatch@^4.0.4, micromatch@^4.0.5:
-  version "4.0.5"
-  resolved "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz"
-  integrity sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==
+micromatch@^4.0.2, micromatch@^4.0.4, micromatch@^4.0.8:
+  version "4.0.8"
+  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.8.tgz#d66fa18f3a47076789320b9b1af32bd86d9fa202"
+  integrity sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==
   dependencies:
-    braces "^3.0.2"
+    braces "^3.0.3"
     picomatch "^2.3.1"
 
 mime-db@1.52.0:
@@ -2542,10 +2556,10 @@ path-type@^4.0.0:
   resolved "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz"
   integrity sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==
 
-picocolors@^1.0.0, picocolors@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.npmjs.org/picocolors/-/picocolors-1.0.1.tgz"
-  integrity sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew==
+picocolors@^1.0.0, picocolors@^1.0.1, picocolors@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.1.1.tgz#3d321af3eab939b083c8f929a1d12cda81c26b6b"
+  integrity sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==
 
 picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.3.1:
   version "2.3.1"
@@ -2583,25 +2597,25 @@ postcss-js@^4.0.1:
   dependencies:
     camelcase-css "^2.0.1"
 
-postcss-load-config@^4.0.1:
+postcss-load-config@^4.0.2:
   version "4.0.2"
-  resolved "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-4.0.2.tgz"
+  resolved "https://registry.yarnpkg.com/postcss-load-config/-/postcss-load-config-4.0.2.tgz#7159dcf626118d33e299f485d6afe4aff7c4a3e3"
   integrity sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==
   dependencies:
     lilconfig "^3.0.0"
     yaml "^2.3.4"
 
-postcss-nested@^6.0.1:
-  version "6.0.1"
-  resolved "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.0.1.tgz"
-  integrity sha512-mEp4xPMi5bSWiMbsgoPfcP74lsWLHkQbZc3sY+jWYd65CUwXrUaTp0fmNpa01ZcETKlIgUdFN/MpS2xZtqL9dQ==
+postcss-nested@^6.2.0:
+  version "6.2.0"
+  resolved "https://registry.yarnpkg.com/postcss-nested/-/postcss-nested-6.2.0.tgz#4c2d22ab5f20b9cb61e2c5c5915950784d068131"
+  integrity sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==
   dependencies:
-    postcss-selector-parser "^6.0.11"
+    postcss-selector-parser "^6.1.1"
 
-postcss-selector-parser@^6.0.11:
-  version "6.0.16"
-  resolved "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.16.tgz"
-  integrity sha512-A0RVJrX+IUkVZbW3ClroRWurercFhieevHB38sr2+l9eUClMqome3LmEmnhlNy+5Mr2EYN6B2Kaw9wYdd+VHiw==
+postcss-selector-parser@^6.1.1, postcss-selector-parser@^6.1.2:
+  version "6.1.2"
+  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz#27ecb41fb0e3b6ba7a1ec84fff347f734c7929de"
+  integrity sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==
   dependencies:
     cssesc "^3.0.0"
     util-deprecate "^1.0.2"
@@ -2611,14 +2625,14 @@ postcss-value-parser@^4.0.0, postcss-value-parser@^4.2.0:
   resolved "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz"
   integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==
 
-postcss@^8.4.21, postcss@^8.4.23, postcss@^8.4.41:
-  version "8.4.41"
-  resolved "https://registry.npmjs.org/postcss/-/postcss-8.4.41.tgz"
-  integrity sha512-TesUflQ0WKZqAvg52PWL6kHgLKP6xB6heTOdoYM0Wt2UHyxNa4K25EZZMgKns3BH1RLVbZCREPpLY0rhnNoHVQ==
+postcss@^8.4.21, postcss@^8.4.41, postcss@^8.4.47:
+  version "8.4.49"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.49.tgz#4ea479048ab059ab3ae61d082190fabfd994fe19"
+  integrity sha512-OCVPnIObs4N29kxTjzLfUryOkvZEq+pf8jTF0lg8E7uETuWHA+v7j3c/xJmiqpX450191LlmZfUKkXxkTry7nA==
   dependencies:
     nanoid "^3.3.7"
-    picocolors "^1.0.1"
-    source-map-js "^1.2.0"
+    picocolors "^1.1.1"
+    source-map-js "^1.2.1"
 
 prettier@^2.1.2:
   version "2.8.1"
@@ -2839,7 +2853,7 @@ resolve-global@^1.0.0:
   dependencies:
     global-dirs "^0.1.1"
 
-resolve@^1.1.7, resolve@^1.22.1, resolve@^1.22.2:
+resolve@^1.1.7, resolve@^1.22.1, resolve@^1.22.8:
   version "1.22.8"
   resolved "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz"
   integrity sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==
@@ -2971,10 +2985,10 @@ snake-case@^3.0.4:
     dot-case "^3.0.4"
     tslib "^2.0.3"
 
-source-map-js@^1.2.0:
-  version "1.2.0"
-  resolved "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz"
-  integrity sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==
+source-map-js@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.2.1.tgz#1ce5650fddd87abc099eda37dcff024c2667ae46"
+  integrity sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==
 
 stop-iteration-iterator@^1.0.0:
   version "1.0.0"
@@ -3055,9 +3069,9 @@ strip-json-comments@3.1.1:
   resolved "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz"
   integrity sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==
 
-sucrase@^3.32.0:
+sucrase@^3.35.0:
   version "3.35.0"
-  resolved "https://registry.npmjs.org/sucrase/-/sucrase-3.35.0.tgz"
+  resolved "https://registry.yarnpkg.com/sucrase/-/sucrase-3.35.0.tgz#57f17a3d7e19b36d8995f06679d121be914ae263"
   integrity sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==
   dependencies:
     "@jridgewell/gen-mapping" "^0.3.2"
@@ -3092,33 +3106,33 @@ svg-parser@^2.0.4:
   resolved "https://registry.npmjs.org/svg-parser/-/svg-parser-2.0.4.tgz"
   integrity sha512-e4hG1hRwoOdRb37cIMSgzNsxyzKfayW6VOflrwvR+/bzrkyxY/31WkbgnQpgtrNp1SdpJvpUAGTa/ZoiPNDuRQ==
 
-tailwindcss@^3.4.11:
-  version "3.4.11"
-  resolved "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.11.tgz"
-  integrity sha512-qhEuBcLemjSJk5ajccN9xJFtM/h0AVCPaA6C92jNP+M2J8kX+eMJHI7R2HFKUvvAsMpcfLILMCFYSeDwpMmlUg==
+tailwindcss@^3.4.15:
+  version "3.4.15"
+  resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.4.15.tgz#04808bf4bf1424b105047d19e7d4bfab368044a9"
+  integrity sha512-r4MeXnfBmSOuKUWmXe6h2CcyfzJCEk4F0pptO5jlnYSIViUkVmsawj80N5h2lO3gwcmSb4n3PuN+e+GC1Guylw==
   dependencies:
     "@alloc/quick-lru" "^5.2.0"
     arg "^5.0.2"
-    chokidar "^3.5.3"
+    chokidar "^3.6.0"
     didyoumean "^1.2.2"
     dlv "^1.1.3"
-    fast-glob "^3.3.0"
+    fast-glob "^3.3.2"
     glob-parent "^6.0.2"
     is-glob "^4.0.3"
-    jiti "^1.21.0"
+    jiti "^1.21.6"
     lilconfig "^2.1.0"
-    micromatch "^4.0.5"
+    micromatch "^4.0.8"
     normalize-path "^3.0.0"
     object-hash "^3.0.0"
-    picocolors "^1.0.0"
-    postcss "^8.4.23"
+    picocolors "^1.1.1"
+    postcss "^8.4.47"
     postcss-import "^15.1.0"
     postcss-js "^4.0.1"
-    postcss-load-config "^4.0.1"
-    postcss-nested "^6.0.1"
-    postcss-selector-parser "^6.0.11"
-    resolve "^1.22.2"
-    sucrase "^3.32.0"
+    postcss-load-config "^4.0.2"
+    postcss-nested "^6.2.0"
+    postcss-selector-parser "^6.1.2"
+    resolve "^1.22.8"
+    sucrase "^3.35.0"
 
 thenify-all@^1.0.0:
   version "1.6.0"
