Merge branch 'Dev' into CodedVeli/issue238

package.json

@@ -54,6 +54,8 @@
   },
   "devDependencies": {
     "@playwright/test": "^1.44.1",
+    "@testing-library/react": "^16.0.0",
+    "@tailwindcss/typography": "^0.5.13",
     "@types/node": "^20.14.1",
     "@types/react": "^18.0.28",
     "@types/react-dom": "^18.0.11",
@@ -69,6 +71,7 @@
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "husky": "^8.0.0",
+    "jsdom": "^24.1.1",
     "knip": "^4.6.0",
     "postcss": "^8.4.38",
     "prettier": "^3.3.2",

src/assets/images/icons/index.js

@@ -1,17 +1,27 @@
-// import arrowRight from "./arrow-right.svg";
-// import arrowCircleLeft from "./ArrowCircleLeft.svg";
-// import arrowCircleRight from "./ArrowCircleRight.svg";
+import award from "./award.svg";
+import book from "./book.svg";
 import briefcase from "./briefcase.svg";
-// import cancel from "./cancel.svg";
-// import closeIcon from "./close-icon.svg";
-// import greyLinkedin from "./linkedin-grey.svg";
+import calendar from "./calendar.svg";
+import check from "./check.svg";
+import dotpoints from "./dotpoints.svg";
+import folder from "./folder.svg";
 import sytLogoGreen from "./logo-green-bg.svg";
 import sytLogoWhite from "./logo-white-bg.svg";
-// import menu from "./menu.svg";
-// import search from "./search.svg";
 import teams from "./teams.svg";
-// import greyTwitter from "./twitter-grey.svg";
 import upleft from "./up-left.svg";
 import upleftGreen from "./upleft-green.svg";
 
-export { briefcase, sytLogoGreen, sytLogoWhite, teams, upleft, upleftGreen };
+export {
+  award,
+  briefcase,
+  book,
+  calendar,
+  check,
+  dotpoints,
+  folder,
+  sytLogoGreen,
+  sytLogoWhite,
+  teams,
+  upleft,
+  upleftGreen,
+};

src/assets/images/resources-page/index.js

@@ -1,20 +1,4 @@
-import arrowRight from "./arrow-right.png";
-import arrow from "./arrow.svg";
-
-import course1 from "./course1.png";
-import course2 from "./course2.png";
-import course3 from "./course3.png";
-import course4 from "./course4.png";
-import earthMoon from "./earth_moon.png";
-import search from "./search-icon.svg";
-
-export {
-  earthMoon,
-  search,
-  arrowRight,
-  course1,
-  course2,
-  course3,
-  course4,
-  arrow,
-};
+export { default as backend } from "./backend.png";
+export { default as dataScience } from "./data-science.png";
+export { default as frontend } from "./frontend.png";
+export { default as productDesign } from "./product-design.png";

src/components/CurriculumAccordion.jsx

@@ -0,0 +1,126 @@
+import { useState } from "react";
+import { FiPlusCircle, FiMinusCircle } from "react-icons/fi";
+
+function CurriculumAccordion() {
+  const [activeQuestion, setActiveQuestion] = useState(null);
+  const questions = [
+    {
+      id: 1,
+      title: "Introduction to Product Design",
+      description:
+        "Yes, you can try us for free for 30 days. If you want, we’ll provide you with a free, personalized 30-minute onboarding call to get you up and running as soon as possible.",
+    },
+    {
+      id: 2,
+      title: "UX Research",
+      description:
+        "Yes, you can try us for free for 30 days. If you want, we’ll provide you with a free, personalized 30-minute onboarding call to get you up and running as soon as possible.",
+    },
+    {
+      id: 3,
+      title: "IA & Ideation",
+      description:
+        "Yes, you can try us for free for 30 days. If you want, we’ll provide you with a free, personalized 30-minute onboarding call to get you up and running as soon as possible.",
+    },
+    {
+      id: 4,
+      title: "User Flows & Wireframes",
+      description:
+        "Yes, you can try us for free for 30 days. If you want, we’ll provide you with a free, personalized 30-minute onboarding call to get you up and running as soon as possible.",
+    },
+    {
+      id: 5,
+      title: "Color & Typography",
+      description:
+        "Yes, you can try us for free for 30 days. If you want, we’ll provide you with a free, personalized 30-minute onboarding call to get you up and running as soon as possible.",
+    },
+    {
+      id: 6,
+      title: "UI Components",
+      description:
+        "Yes, you can try us for free for 30 days. If you want, we’ll provide you with a free, personalized 30-minute onboarding call to get you up and running as soon as possible.",
+    },
+  ];
+
+  const toggleQuestion = (index) => {
+    setActiveQuestion(activeQuestion === index ? null : index);
+  };
+
+  return (
+    <div className="flex flex-col justify-center w-full max-w-full mx-auto font-openSans">
+      {questions.map((question, index) => (
+        <div
+          key={question.id}
+          className={`${activeQuestion === index ? "bg-white rounded-lg" : "bg-transparent"} border-b px-4 py-3`}
+        >
+          <h2 id={`flush-heading${index + 1}`}>
+            <button
+              aria-label={question.title}
+              className={`group relative flex w-full md:items-center rounded-none text-left text-base md:text-lg transition ${
+                activeQuestion === index
+                  ? ""
+                  : "overflow-anchor:none hover:z-[2] focus:z-[3]"
+              } focus:outline-none ${
+                activeQuestion === index
+                  ? "font-normal"
+                  : "&:not([data-te-collapse-collapsed]):text-primary"
+              } ${
+                activeQuestion === index
+                  ? "boxShadow:inset_0_-1px_0_rgba(229,231,235)"
+                  : "&:not([data-te-collapse-collapsed]):boxShadow:inset_0_-1px_0_rgba(229,231,235)"
+              } dark:&:not([data-te-collapse-collapsed]):text-primary-400`}
+              type="button"
+              data-te-collapse-init
+              data-te-target={`#flush-collapse${index + 1}`}
+              aria-expanded={activeQuestion === index ? "true" : "false"}
+              aria-controls={`flush-collapse${index + 1}`}
+              onClick={() => toggleQuestion(index)}
+            >
+              <h4 className="font-openSans">
+                Week {question.id}:{" "}
+                <span className="font-semibold">{question.title}</span>
+              </h4>
+              <span className="ml-auto h-10 w-10 shrink-0 text-black rounded-md flex md:items-center justify-center overflow-hidden">
+                {activeQuestion === index ? (
+                  <FiMinusCircle />
+                ) : (
+                  <FiPlusCircle />
+                )}
+              </span>
+            </button>
+          </h2>
+          <div
+            id={`flush-collapse${index + 1}`}
+            className={`${
+              activeQuestion === index ? "" : "invisible hidden"
+            } border-0`}
+            data-te-collapse-item
+            data-te-collapse-show
+            aria-labelledby={`flush-heading${index + 1}`}
+            data-te-parent="#accordionFlushExample"
+          >
+            <p className="font-openSans text-base text-gray-600 font-normal">
+              {question.description}
+            </p>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+export default CurriculumAccordion;
+
+// CurriculumAccordion.propTypes = {
+//   questions: PropTypes.arrayOf(
+//     PropTypes.shape({
+//       id: PropTypes.number,
+//       question: PropTypes.string,
+//       answer: PropTypes.string,
+//     })
+//   ),
+// };
+
+// CurriculumAccordion.defaultProps = {
+//   questions: [],
+// };