FOSS-Community · ayush-129 · Oct 10, 2024 · Oct 10, 2024 · Oct 10, 2024 · Oct 10, 2024
diff --git a/.nvmrc b/.nvmrc
@@ -0,0 +1 @@
+18.18.0
diff --git a/eslint.config.mjs 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,
+];
diff --git 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
@@ -8,6 +8,7 @@
     "@testing-library/jest-dom": "^6.4.6",
     "@testing-library/react": "^14.2.2",
     "@testing-library/user-event": "^14.5.2",
+    "@types/react-lottie": "^1.2.10",
     "airtable": "^0.12.2",
     "axios": "^1.7.7",
     "dotenv": "^16.4.5",
@@ -27,10 +28,10 @@
     "web-vitals": "^4.2.3"
   },
   "scripts": {
+    "lint": "eslint src/**/*.{ts,tsx}",
+    "build": "tsc && vite build",
     "start": "vite",
-    "build": "vite build",
-    "serve": "vite preview",
-    "test": "vite test"
+    "serve": "vite preview"
   },
   "eslintConfig": {
     "extends": [
@@ -51,10 +52,18 @@
     ]
   },
   "devDependencies": {
+    "@eslint/js": "^9.12.0",
+    "@typescript-eslint/eslint-plugin": "^8.8.1",
+    "@typescript-eslint/parser": "^8.8.1",
     "@vitejs/plugin-react": "^4.3.1",
     "autoprefixer": "^10.4.20",
+    "eslint": "^9.12.0",
+    "eslint-plugin-react": "^7.37.1",
+    "globals": "^15.11.0",
     "postcss": "^8.4.41",
     "tailwindcss": "^3.4.11",
+    "typescript": "^5.6.3",
+    "typescript-eslint": "^8.8.1",
     "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
@@ -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
@@ -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 → src/App.tsx b/src/App.jsx → 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;
+export default App;
diff --git a/src/components/About.js 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
diff --git a/src/components/About.tsx 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
@@ -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 → src/components/Building.tsx b/src/components/Building.jsx → src/components/Building.tsx
@@ -1,11 +1,12 @@
 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
     </div>
   );
 };
 
-export default Building;
+export default Building;
diff --git a/src/components/Cards.js b/src/components/Cards.js
diff --git a/src/components/Cards.jsx b/src/components/Cards.jsx