first commit

src/Components/HowTo/HowToPage.js

@@ -0,0 +1,29 @@
+import { useContext } from "react";
+import { AppContext } from "../../Hooks/useContext/appContext";
+import { Steps } from "../../Constants/Copy/howToSteps.js";
+import "../../styles/howTo-page.scss";
+import { ReactComponent as HowToInfoSvg } from "../../Assets/svg/howToInfo.svg";
+
+const HowToPage = () => {
+  const { appState } = useContext(AppContext);
+  const { group } = appState;
+
+  if (!group) return null;
+
+  return (
+    <>
+      <div className="how-to-info-container">
+        <div className="how-to-info-wrapper">
+          <div className="how-to-image-wrapper">
+            <HowToInfoSvg className="how-to-info-svg" />
+          </div>
+        </div>
+        <div className="how-to-steps-container">
+          <Steps />
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default HowToPage;