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
@@ -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
@@ -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
diff --git a/src/components/Cards.tsx 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;