Alex friday

.gitignore

@@ -22,3 +22,5 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+package-lock.json

package.json

@@ -10,17 +10,23 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "lucide-react": "^0.378.0",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-icons": "^5.2.1",
+    "react-router-dom": "^6.23.1"
   },
   "devDependencies": {
     "@types/react": "^18.2.37",
     "@types/react-dom": "^18.2.15",
     "@vitejs/plugin-react": "^4.2.0",
+    "autoprefixer": "^10.4.19",
     "eslint": "^8.53.0",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.4",
+    "postcss": "^8.4.38",
+    "tailwindcss": "^3.4.3",
     "vite": "^5.0.0"
   }
 }

postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

src/App.jsx

@@ -1,7 +1,23 @@
 import React from "react";
+import { Routes, Route } from "react-router-dom";
+import AboutTheDevs from "./pages/AboutTheDevs";
+import LandingPage from "./pages/LandingPage";
+import NavBar from "./components/NavBar";
+import CategoryPage from "./pages/CategoryPage";
+import AboutTheApp from "./pages/AboutTheApp";
 
 const App = () => {
-  return <div>Basic Pursuit React Starter</div>;
+  return (
+    <>
+      <NavBar />
+      <Routes>
+        <Route path="/" element={<LandingPage />} />
+        <Route path="/about_smart_waste" element={<AboutTheApp />} />
+        <Route path="/waste_hub" element={<CategoryPage />} />
+        <Route path="/meet_the_team" element={<AboutTheDevs />} />
+      </Routes>
+    </>
+  );
 };
 
 export default App;

src/components/AboutUs.jsx

@@ -0,0 +1,175 @@
+import React from "react";
+import { Link } from "react-router-dom";
+import { Linkedin, Mail } from "lucide-react";
+import { FiGithub } from "react-icons/fi";
+
+const AboutUs = () => {
+  return (
+    <>
+      <div className="grid lg:grid-cols-2 md:gap-2 ml-12 pb-24">
+        <div className="bg-yellow-50/40 rounded-full mx-10 my-10 shadow-2xl  backdrop-brightness-150 backdrop-blur-3xl bg-opacity-90 hover:bg-red-800/10 w-3/4">
+          <div className="grid grid-cols-4 h-full">
+            <div className="bg-green-500 rounded-tl-full rounded-bl-full text-5xl text-white flex items-center justify-center col-span-1">
+              BS
+            </div>
+            <div className="pb-10 p-5 col-span-3">
+              <div className="text-2xl ">Brenda Soto</div>
+              <div>Software Engineer</div>
+              <div>
+                <div className="pt-2 flex flex-row">
+                  <a
+                    href={"https://www.linkedin.com/in/brendasotoct/"}
+                    target={"_blank"}
+                  >
+                    <div className="bg-blue-400 rounded p-1 hover:bg-black">
+                      <Linkedin
+                        strokeWidth={2}
+                        className="text-white w-6 h-6"
+                      />
+                    </div>
+                  </a>
+                  <a href={"https://github.com/BSoto85"} target={"_blank"}>
+                    <div className="bg-purple-400 rounded p-1 ml-4 hover:bg-black">
+                      <FiGithub
+                        strokeWidth={2}
+                        className="text-white w-6 h-6"
+                      />
+                    </div>
+                  </a>
+                  <a href="mailto:bsoto@pursuit.org">
+                    <div className="bg-red-400/80 rounded p-1 ml-4 hover:bg-black">
+                      <Mail strokeWidth={2} className="text-white w-6 h-6" />
+                    </div>
+                  </a>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className="bg-yellow-50/40  rounded-xl mx-10 my-10 shadow-2xl  backdrop-brightness-150 backdrop-blur-3xl bg-opacity-90 hover:bg-amber-500/10 w-3/4 ">
+          <div className="grid grid-cols-4 h-full">
+            <div className="bg-amber-500 rounded-tl-lg rounded-bl-lg text-5xl text-white flex items-center justify-center col-span-1">
+              IA
+            </div>
+            <div className="pb-10 p-5 col-span-3">
+              <div className="text-2xl">Isiah Arrufat</div>
+              <div>Software Engineer</div>
+              <div>
+                <div className="pt-2 flex flex-row">
+                  <a
+                    href={
+                      "https://www.linkedin.com/in/isiah-arrufat-508b04123/"
+                    }
+                    target={"_blank"}
+                  >
+                    <div className="bg-blue-400  rounded p-1 hover:bg-black">
+                      <Linkedin
+                        strokeWidth={2}
+                        className="text-white w-6 h-6"
+                      />
+                    </div>
+                  </a>
+                  <a href={"https://github.com/isiahArrufat"} target={"_blank"}>
+                    <div className="bg-purple-400 rounded p-1 ml-4 hover:bg-black">
+                      <FiGithub
+                        strokeWidth={2}
+                        className="text-white w-6 h-6"
+                      />
+                    </div>
+                  </a>
+                  <a href="mailto:IsiahArrufat@pursuit.org">
+                    <div className="bg-red-400/80 rounded p-1 ml-4 hover:bg-black">
+                      <Mail strokeWidth={2} className="text-white w-6 h-6" />
+                    </div>
+                  </a>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className="bg-red-50/40  rounded-xl mx-10 my-10 shadow-2xl  backdrop-brightness-150 backdrop-blur-3xl bg-opacity-90 hover:bg-emerald-800/10 w-3/4 ">
+          <div className="grid grid-cols-4 h-full">
+            <div className="bg-red-500 rounded-tl-lg rounded-bl-lg text-5xl text-white flex items-center justify-center col-span-1">
+              AG
+            </div>
+            <div className="pb-10 p-5 col-span-3">
+              <div className="text-2xl">Alexander Gonzalez</div>
+              <div>Software Engineer</div>
+              <div>
+                <div className="pt-2 flex flex-row">
+                  <a
+                    href={
+                      "https://www.linkedin.com/in/alexander-gonzalez-can-code/"
+                    }
+                    target={"_blank"}
+                  >
+                    <div className="bg-blue-400 rounded p-1 hover:bg-black">
+                      <Linkedin
+                        strokeWidth={2}
+                        className="text-white w-6 h-6"
+                      />
+                    </div>
+                  </a>
+                  <a href={"https://github.com/Alex-de-code"} target={"_blank"}>
+                    <div className="bg-purple-400 rounded p-1 ml-4 hover:bg-black">
+                      <FiGithub
+                        strokeWidth={2}
+                        className="text-white w-6 h-6"
+                      />
+                    </div>
+                  </a>
+                  <a href="mailto:alexandergonzalez@pursuit.org">
+                    <div className="bg-red-400/80 rounded p-1 ml-4 hover:bg-black">
+                      <Mail strokeWidth={2} className="text-white w-6 h-6" />
+                    </div>
+                  </a>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className="bg-blue-50/40 rounded-full mx-10 my-10 shadow-2xl  backdrop-brightness-150 backdrop-blur-3xl bg-opacity-90 hover:bg-indigo-800/10 w-3/4 ">
+          <div className="grid grid-cols-4 h-full">
+            <div className="bg-blue-500 rounded-tl-full rounded-bl-full text-5xl text-white flex items-center justify-center col-span-1">
+              IB
+            </div>
+            <div className="pb-10 p-5 col-span-3">
+              <div className="text-2xl">Iris Beckham</div>
+              <div>Software Engineer</div>
+              <div>
+                <div className="pt-2 flex flex-row">
+                  <a
+                    href={"https://www.linkedin.com/in/iris-beckham/"}
+                    target={"_blank"}
+                  >
+                    <div className="bg-blue-400  rounded p-1 hover:bg-black">
+                      <Linkedin
+                        strokeWidth={2}
+                        className="text-white w-6 h-6"
+                      />
+                    </div>
+                  </a>
+                  <a href={"https://github.com/iris-beckham"} target={"_blank"}>
+                    <div className="bg-purple-400 rounded p-1 ml-4 hover:bg-black">
+                      <FiGithub
+                        strokeWidth={2}
+                        className="text-white w-6 h-6"
+                      />
+                    </div>
+                  </a>
+                  <a href="mailto:irisbeckham@pursuit.org">
+                    <div className="bg-red-400/80 rounded p-1 ml-4 hover:bg-black">
+                      <Mail strokeWidth={2} className="text-white w-6 h-6" />
+                    </div>
+                  </a>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default AboutUs;

src/components/CategoryTemplate.jsx

@@ -0,0 +1,127 @@
+import { CircleChevronRight, CircleChevronLeft } from "lucide-react";
+import React from "react";
+import { useState, useEffect } from "react";
+
+const CategoryTemplate = () => {
+  // this usestate sets index of carousel images
+  const [currentIndex, setCurrentIndex] = useState(0);
+  //this useState sets array of images
+  const imagesArrayUrls = [
+    "https://res.cloudinary.com/dvmczcg3f/image/upload/v1712642472/Tale%20Blazers/tarot-cards-profile-pic_fv6p7p.jpg",
+    "https://res.cloudinary.com/dvmczcg3f/image/upload/v1711650725/chartd_qlhbgr.jpg",
+    "https://res.cloudinary.com/dvmczcg3f/image/upload/v1711649108/colal-jpg_jzmskc.jpg",
+    "https://res.cloudinary.com/dvmczcg3f/image/upload/v1711416478/CourseQuest%20-%20App/circuit_board_pic_kgsrqb.jpg",
+    "https://res.cloudinary.com/dvmczcg3f/image/upload/v1706632712/Daily%20Spark%20-%20Landing%20Page%20Landscape%20Photos/vibrant-orange-landscape-of-sand-dunes-and-trees_e96ilu.jpg",
+  ];
+
+  const goToPreviousImage = () => {
+    setCurrentIndex(
+      (prevIndex) =>
+        //check if previous index is 0, if it is set currentIndex to the length of allstoryEndings minus one
+        prevIndex === 0 ? imagesArrayUrls.length - 1 : prevIndex - 1
+      // else decrease currentIndex by one
+    );
+  };
+
+  const goToNextImage = () => {
+    setCurrentIndex(
+      (prevIndex) =>
+        //check if previous index is equal to length of allStoryendings minus one, if yes set CurrenIndex to zero
+        prevIndex === imagesArrayUrls.length - 1 ? 0 : prevIndex + 1
+      //else increase currentindex by 1
+    );
+  };
+
+  return (
+    <div className="min-h-screen mb-0">
+      <div className="grid grid-cols-1 md:grid-cols-5 ">
+        <div className="bg-amber-400 col-span-1 md:col-span-3">
+          <div className=" bg-violet-500 m-5 rounded-xl overflow-y-auto h-3/4">
+            <div className="text-4xl mt-10 mx-5 mb-3">Waste Category</div>
+            <hr className="border-4 border-black mb-10 mx-5 rounded" />
+            <div className=" mx-5 rounded-2xl">
+              <div className="flex justify-around">
+                <button
+                  onClick={goToPreviousImage}
+                  className="hover:text-zinc-100"
+                >
+                  <CircleChevronLeft size={56} />
+                </button>
+                <div className="flex justify-center">
+                  <img
+                    src={imagesArrayUrls[currentIndex]}
+                    alt="image_of_waste"
+                    className="h-96 w-140 rounded-lg"
+                  />
+                </div>
+                <button onClick={goToNextImage} className="hover:text-zinc-100">
+                  <CircleChevronRight size={56} />
+                </button>
+              </div>
+            </div>
+            <div className="text-3xl mx-5 mt-10">
+              What Can & What Can't Be Dropped Off
+            </div>
+            <hr className="flex border-2 border-slate-900 mx-5 rounded" />
+            <div className="p-5">
+              Lorem ipsum dolor, sit amet consectetur adipisicing elit.
+              Dignissimos aut odio cumque minus necessitatibus voluptates
+              excepturi illo veniam? Dicta sed distinctio, eveniet provident
+              suscipit soluta minus iure hic fugit molestias? What Can & What
+              Can't Be Drop OffWhat Can & What Can't Be Drop Off Lorem ipsum
+              dolor, sit amet consectetur adipisicing elit. Dignissimos aut odio
+              cumque minus necessitatibus voluptates excepturi illo veniam?
+              Dicta sed distinctio, eveniet provident suscipit soluta minus iure
+              hic fugit molestias? What Can & What Can't Be Drop OffWhat Can &
+              What Can't Be Drop Off Lorem ipsum dolor, sit amet consectetur
+              adipisicing elit. Dignissimos aut odio cumque minus necessitatibus
+              voluptates excepturi illo veniam? Dicta sed distinctio, eveniet
+              provident suscipit soluta minus iure hic fugit molestias? What Can
+              & What Can't Be Drop OffWhat Can & What Can't Be Drop Off Lorem
+              ipsum dolor, sit amet consectetur adipisicing elit. Dignissimos
+              aut odio cumque minus necessitatibus voluptates excepturi illo
+              veniam? Dicta sed distinctio, eveniet provident suscipit soluta
+              minus iure hic fugit molestias? What Can & What Can't Be Drop
+              OffWhat Can & What Can't Be Drop Off
+            </div>
+            <div></div>
+          </div>
+        </div>
+        <div className="col-span-1 md:col-span-2 bg-emerald-600">
+          <div className="bg-sky-300 m-5 rounded-xl h-2/4">
+            <div className="text-3xl py-7 mx-5 text-center">
+              Waste Drop Off Sites
+            </div>
+            <hr className="border-4 border-black mb-10 mx-5 rounded" />
+            <div className="overflow-y-auto h-72 grid gap-4">
+              {/* //THIS ONE! */}
+              <div className="bg-orange-500 mx-5 rounded-lg px-5 py-7 hover:scale-105 transition-transform duration-300">
+                Random Card Here
+              </div>
+              <div className="bg-orange-500 mx-5 rounded-lg px-5 py-7">
+                Random Card Here
+              </div>
+              <div className="bg-orange-500 mx-5 rounded-lg px-5 py-7">
+                Random Card Here
+              </div>
+              <div className="bg-orange-500 mx-5 rounded-lg px-5 py-7">
+                Random Card Here
+              </div>
+              <div className="bg-orange-500 mx-5 rounded-lg px-5 py-7">
+                Random Card Here
+              </div>
+              <div className="bg-orange-500 mx-5 rounded-lg px-5 py-7">
+                Random Card Here
+              </div>
+              <div className="bg-orange-500 mx-5 rounded-lg px-5 py-7">
+                Random Card Here
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default CategoryTemplate;