Bootcamp

src/assets/font-family/the_bohemian/readmeFree.txt

@@ -0,0 +1,11 @@
+we hope you enjoy this font. If you have any questions please don't hesitate to drop me a message on displayart20@gmail.com :)
+
+NOTE: This demo font is for PERSONAL USE ONLY! But any donation are very appreciated. 
+
+Paypal account for donation : https://www.paypal.me/agungr
+
+Link to purchase full version and commercial license: https://crmrkt.com/G32VG5
+
+Thank you,
+Best regards
+alphArt

src/components/Forms/Fellowship/FellowshipForm/FellowshipForm.js

@@ -0,0 +1,7 @@
+import React from "react";
+
+const FellowshipForm = () => {
+  return <div>FellowshipForm</div>;
+};
+
+export default FellowshipForm;

src/components/Forms/Fellowship/FellowshipModal/FellowshipModal.js

@@ -0,0 +1,13 @@
+import React from "react";
+import ModalCustom from "../../../Modal/ModalCustom";
+import FellowshipForm from "../FellowshipForm/FellowshipForm";
+
+const FellowshipModal = ({ lgShow, hide }) => {
+  return (
+    <ModalCustom lgShow={lgShow} hide={hide}>
+      <FellowshipForm />
+    </ModalCustom>
+  );
+};
+
+export default FellowshipModal;

src/components/Forms/Forms.module.css

@@ -0,0 +1,71 @@
+.lgxBtn {
+  font-weight: 600;
+  letter-spacing: 3px;
+  background: #c12029;
+  color: #fff;
+  /* margin-left: 50px; */
+  overflow: hidden;
+  display: inline-block;
+  text-transform: uppercase;
+  font-size: 18px;
+  padding: 10px 20px;
+  line-height: 30px;
+  white-space: nowrap;
+  border-radius: 4px;
+}
+
+.lgxBtn:hover {
+  color: #000;
+  background-color: #c12029;
+  border: 2px solid #c12029;
+}
+
+.lgxBtn:focus,
+.lgxBtn:active {
+  background-color: #8a1f24;
+  color: rgb(196, 196, 196) !important;
+  border-color: #8a1f24 !important;
+  box-shadow: 0 0 0 0.2rem rgba(209, 43, 43, 0.5) !important;
+}
+
+.form-btn {
+  font-weight: 600;
+  letter-spacing: 3px;
+  background: #c12029;
+  color: #fff;
+  overflow: hidden;
+  display: inline-block;
+  text-transform: uppercase;
+  font-size: 15px !important;
+  padding: 5px 15px !important;
+  line-height: 30px;
+  white-space: nowrap;
+  border-radius: 4px;
+}
+
+.center {
+  display: flex;
+  justify-content: center;
+  text-align: center;
+  align-items: center;
+}
+
+.form-btn:hover {
+  color: #000;
+  background-color: #c12029;
+  border: 2px solid #c12029;
+}
+
+.form-group {
+  margin-bottom: 10px;
+}
+
+.form-text {
+  color: #fff;
+  font-size: 14px;
+}
+
+.form-subtext {
+  color: rgb(206, 206, 206);
+  font-size: 14px;
+}

src/components/Forms/Internship/InternshipForm/InternshipForm.js

@@ -0,0 +1,9 @@
+import React from 'react'
+
+const InternshipForm = () => {
+  return (
+    <div>InternshipForm</div>
+  )
+}
+
+export default InternshipForm

src/components/Forms/Internship/InternshipModal.js

@@ -0,0 +1,12 @@
+import React from "react";
+import ModalCustom from "../../Modal/ModalCustom";
+
+const InternshipModal = ({ lgShow, hide }) => {
+  return (
+    <ModalCustom lgShow={lgShow} hide={hide}>
+      <h1>Internship</h1>
+    </ModalCustom>
+  );
+};
+
+export default InternshipModal;

src/components/Forms/ModalForms.js

@@ -0,0 +1,99 @@
+import React, { useState } from "react";
+import { Button } from "react-bootstrap";
+import * as styles from "./Forms.module.css";
+import SignUpModal from "./SignUp/SignUpModal/SignUpModal";
+import TourModal from "./Tour/TourModal/TourModal";
+import PricingModal from "./Pricing/PricingModal/PricingModal";
+import FellowshipModal from "./Fellowship/FellowshipModal/FellowshipModal";
+import ProgramModal from "./ProgramGuide/ProgramModal/ProgramModal";
+import InternshipModal from "./Internship/InternshipModal";
+
+const ModalForms = ({ type, btnText, btnColor }) => {
+  //the prop TYPE is just a reference to which form that needs to be displayed.
+  //TYPE Options: SignUp - Tour - ProgramGuide - Pricing - Internship - Fellowship - Contact - Bootcamp
+
+  const [signUpShow, setSignUpShow] = useState(false);
+  const [tourShow, setTourShow] = useState(false);
+  const [programGuideShow, setProgramGuideShow] = useState(false);
+  const [pricingShow, setPricingShow] = useState(false);
+  const [internshipShow, setInternshipShow] = useState(false);
+  const [fellowshipShow, setFellowshipShow] = useState(false);
+
+  const handleSignUpClose = () => setSignUpShow(false);
+  const handleTourClose = () => setTourShow(false);
+  const handleProgramGuideClose = () => setProgramGuideShow(false);
+  const handlePricingClose = () => setPricingShow(false);
+  const handleInternshipClose = () => setInternshipShow(false);
+  const handleFellowshipClose = () => setFellowshipShow(false);
+
+  const handleSignUpShow = () => setSignUpShow(true);
+  const handleTourShow = () => setTourShow(true);
+  const handleProgramGuideShow = () => setProgramGuideShow(true);
+  const handlePricingShow = () => setPricingShow(true);
+  const handleInternshipShow = () => setInternshipShow(true);
+  const handleFellowshipShow = () => setFellowshipShow(true);
+
+  const handleModalType = (type) => {
+    let modalType = type;
+    switch (modalType) {
+      case "SignUp":
+        handleSignUpShow();
+        break;
+      case "Tour":
+        handleTourShow();
+        break;
+      case "ProgramGuide":
+        handleProgramGuideShow();
+        break;
+      case "Pricing":
+        handlePricingShow();
+        break;
+      case "Internship":
+        handleInternshipShow();
+        break;
+      case "Fellowship":
+        handleFellowshipShow();
+        break;
+
+      default:
+        console.log("default");
+        break;
+    }
+  };
+
+  return (
+    <div>
+      <Button
+        onClick={() => handleModalType(type)}
+        className={btnColor ? btnColor : styles.formBtn}
+      >
+        {btnText}
+      </Button>
+
+      {/* Modal types to be displayed  */}
+      {signUpShow ? (
+        <SignUpModal lgShow={signUpShow} hide={handleSignUpClose} />
+      ) : null}
+
+      {tourShow ? <TourModal lgShow={tourShow} hide={handleTourClose} /> : null}
+
+      {programGuideShow ? (
+        <ProgramModal lgShow={programGuideShow} hide={handleProgramGuideClose} />
+      ) : null}
+
+      {pricingShow ? (
+        <PricingModal lgShow={pricingShow} hide={handlePricingClose} />
+      ) : null}
+
+      {internshipShow ? (
+        <InternshipModal lgShow={internshipShow} hide={handleInternshipClose} />
+      ) : null}
+
+      {fellowshipShow ? (
+        <FellowshipModal lgShow={fellowshipShow} hide={handleFellowshipClose} />
+      ) : null}
+    </div>
+  );
+};
+
+export default ModalForms;