Merge in Final Resources Page (#298)

* add external ops section

* preliminary resources page

* add description

* added email link

* delete placeholder

---------

Co-authored-by: Saloni Vaishnav <[email protected]>
Co-authored-by: Firmiana Wang <[email protected]>

src/components/CloudComponent.js

@@ -0,0 +1,50 @@
+/**
+ * Cloud Component
+ * @param color "pink" or "blue"
+ * @param size "small" or "medium" or "large"
+ */
+export default function Cloud({ color, size }) {
+  let lightColor;
+  let darkColor;
+  if (color === 'pink') {
+    lightColor = '#FDC8CC';
+    darkColor = '#F65563';
+  } else {
+    lightColor = '#B1F0F2';
+    darkColor = '#31CACE';
+  }
+
+  let width;
+  if (size === 'small') {
+    width = '263';
+  } else if (size === 'medium') {
+    width = '357';
+  } else {
+    width = '457';
+  }
+
+  return (
+    <svg
+      width={width}
+      viewBox="0 0 288 141"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M44.5106 38.7852C31.1158 46.0402 24.5775 54.8454 21.9091 63.1C23.161 73.9931 31.4545 95.0011 54.6135 91.8888C69.768 83.4596 102.68 73.1372 113.094 99.2805C116.915 107.45 131.396 122.117 158.752 115.426C186.107 108.734 209.785 112.637 218.204 115.426C223.153 117.825 236.677 120.639 251.177 112.702C318.058 75.3167 265.402 24.9523 221.895 46.3714C224.874 33.5981 218.903 7.46773 171.186 5.1335C123.469 2.79928 109.079 31.6529 107.848 46.3714C98.5873 37.4236 72.9543 23.3793 44.5106 38.7852Z"
+        fill={lightColor}
+      />
+      <path
+        d="M8.95599 112.702C52.1526 128.134 157.353 151.489 232.581 121.456C239.603 118.652 245.779 115.719 251.177 112.702C236.677 120.639 223.153 117.825 218.204 115.426C209.785 112.637 186.107 108.734 158.752 115.426C131.396 122.117 116.915 107.45 113.094 99.2805C102.68 73.1372 69.768 83.4596 54.6135 91.8888C31.4545 95.0011 23.161 73.9931 21.9091 63.1C18.9112 72.3739 20.7977 80.9531 23.3333 85.8587C13.7484 84.8861 -2.54584 88.8932 8.95599 112.702Z"
+        fill={darkColor}
+      />
+      <path
+        d="M21.9091 63.1C24.5775 54.8454 31.1158 46.0402 44.5106 38.7852C72.9543 23.3793 98.5873 37.4236 107.848 46.3714C109.079 31.6529 123.469 2.79928 171.186 5.1335C218.903 7.46773 224.874 33.5981 221.895 46.3714C265.402 24.9523 318.058 75.3168 251.177 112.702M21.9091 63.1C18.9112 72.3739 20.7977 80.9531 23.3333 85.8587C13.7484 84.8861 -2.54584 88.8932 8.95599 112.702C52.1526 128.134 157.353 151.489 232.581 121.456C239.603 118.652 245.779 115.719 251.177 112.702M21.9091 63.1C23.161 73.9931 31.4545 95.0011 54.6135 91.8888C69.768 83.4596 102.68 73.1372 113.094 99.2805C116.915 107.45 131.396 122.117 158.752 115.426C186.107 108.734 209.785 112.637 218.204 115.426C223.153 117.825 236.677 120.639 251.177 112.702"
+        stroke="white"
+        strokeWidth="7"
+      />
+    </svg>
+  );
+}

src/components/OfficerModal.js

@@ -26,11 +26,8 @@ function OfficerInformation(
       <ComputerWindow className={styles.window} topbarColor="#D2616C">
         <div className={styles.officerInfo}>
           <h3 className={styles.title}>
-            {name}
-            {' '}
-            -
-            {' '}
-            {position}
+            {/* eslint-disable-next-line react/jsx-one-expression-per-line */}
+            {name} - {position}{' '}
           </h3>
 
           <div className="columnContainer">

src/components/Sponsor.js

@@ -4,8 +4,8 @@ import styles from '@/styles/components/Sponsor.module.css';
 export default function Sponsor({ sponsor, url, tier }) {
   const link = url
     ? () => {
-      window.open(url, '_blank').focus();
-    }
+        window.open(url, '_blank').focus(); // eslint-disable-line indent
+      } // eslint-disable-line indent
     : null;
 
   return (

src/components/StayInTouchKey.js

@@ -3,8 +3,8 @@ import styles from '@/styles/components/Key.module.css';
 export default function Key({ children, url }) {
   const link = url
     ? () => {
-      window.open(url, '_blank').focus();
-    }
+        window.open(url, '_blank').focus(); // eslint-disable-line indent
+      } // eslint-disable-line indent
     : null;
 
   return (

src/data/gethelp.json

@@ -0,0 +1 @@
+{}

src/data/resources.json

@@ -0,0 +1,133 @@
+[
+  {
+    "type": "Mental Health, External",
+    "items": [
+      {
+        "name": "National Suicide Prevention Lifeline",
+        "description": "988 to speak with a trained crisis counselor."
+      },
+
+      {
+        "name": "Crisis Text Line",
+        "description": "Text 741-741 to connect with a trained crisis counselor to receive crisis support via text message."
+      },
+
+      {
+        "name": "Champaign-Urbana Crisis Line",
+        "description": "This is similar to the national crisis line but specifically for those in the local area. This one is especially useful in that a crisis counselor can help you access local resources or help. Phone: (217) 359-4141"
+      },
+
+      {
+        "name": "911 Emergency",
+        "description": "You can also call 911 if the crisis is a life-threatening emergency. Make sure to notify the operator that it is a psychiatric emergency and ask for an officer trained in crisis intervention or trained to assist people experiencing a psychiatric emergency."
+      },
+
+      {
+        "name": "National Domestic Violence Hotline",
+        "description": "Call 800-799-SAFE (7233) to speak with trained experts who provide confidential support to anyone experiencing domestic violence or seeking resources and information."
+      },
+
+      {
+        "name": "Disaster Distress Helpline",
+        "description": "Call 1-800-985-5990 or text “TalkWithUs” to 66746. The disaster distress helpline provides immediate crisis counseling for people who are experiencing emotional distress related to any natural or human-caused disaster. The helpline is free, multilingual, confidential, and available 24 hours a day, seven days a week."
+      },
+
+      {
+        "name": "Rosecrance Substance/Mental Health Helpline",
+        "description": "Call 1-866-330-8729. This group does mental health triage at hospitals and offers partial hospitalization, mental health recovery services, and recovery living. They also have substance abuse centers (with one located in Champaign). Website: https://rosecrance.org"
+      },
+
+      {
+        "name": "Social Media Support",
+        "description": "If you are worried about someone on social media, you can contact the safety team on various social media sites (Facebook, Twitter, Instagram, Snapchat, YouTube, and Periscope) to ensure that they are connected with the help they need Support on Social Media."
+      },
+
+      {
+        "name": "Illinois WarmLine",
+        "description": "Website: http://illinoismentalhealthcollaborative.com, Phone: (866) 359-7953"
+      }
+    ]
+  },
+  {
+    "type": "Mental Health, UIUC Specific",
+    "items": [
+      {
+        "name": "Dean of Students Office",
+        "description": "A catch-all for general issues. Reach out to them for helping you advocate for yourself with staff, faculty, students, and other organizations on campus. Website: https://odos.illinois.edu/"
+      },
+
+      {
+        "name": "Counseling Center",
+        "description": "The UIUC Counseling Center is committed to providing a range of resources intended to help students develop improved coping skills to address emotional, interpersonal, and academic concerns. Website: https://www.counselingcenter.illinois.edu/"
+      },
+
+      {
+        "name": "Office of Access and Equity",
+        "description": "For reporting descrimination and barrier to access on campus. Website https://oae.illinois.edu/our-services/events/"
+      },
+
+      {
+        "name": "Telehelp",
+        "description": "Online counseling for students with United Healthcare. Website: http://telehelp4students.com"
+      },
+
+      {
+        "name": "McKinley Health Center Mental Health",
+        "description": "Website: https://mckinley.illinois.edu/medical-services/mental-health"
+      },
+
+      {
+        "name": "Psychological Services Center",
+        "description": "Website: http://psc.illinois.edu/, Phone: (217) 333-0041"
+      },
+
+      {
+        "name": "College of Engineering Embedded Counselor: Juvenal George, Psy.D",
+        "description": "Contact: [email protected]"
+      },
+
+      {
+        "name": "College of LAS Embedded Counselor: Andrew Novinska, LCPC",
+        "description": "Contact: [email protected]"
+      },
+
+      {
+        "name": "Full List of embedded counselors",
+        "description": "Website: https://counselingcenter.illinois.edu/about-us/embedded-counselors"
+      }
+    ]
+  },
+  {
+    "type": "Academic",
+    "items": [
+      {
+        "name": "Computer Science Undergraduate Advising",
+        "description": "Website: https://cs.illinois.edu/academics/undergraduate/undergraduate-advising, Phone: (217) 333-4428"
+      },
+
+      {
+        "name": "Grainger CARE (Center for Academic Resources In Engineering)",
+        "description": "Website: https://care.grainger.illinois.edu/, Phone: (217) 244-2678, Email: [email protected]"
+      },
+
+      {
+        "name": "UIUC Disability Resources and Educational Services",
+        "description": "Website: https://dres.illinois.edu/"
+      }
+    ]
+  },
+  {
+    "type": "Other",
+    "items": [
+      {
+        "name": "Women’s Resource Center",
+        "description": "A completely no-strings-attached*, anonymous resource center for women with a wide variety of resources. Website: https://wrc.illinois.edu/, *The WRC has 4 confidential advisors not mandated to report to the Title IX office. Pursuing accountability/safety options requires a report to the Title IX Coordinator in a survivor-led, well-informed, guided manner. More info at FAQs about Employee Reporting Obligations, At Illinois We Care and at Policy Definitions & Key Terms, At Illinois We Care"
+      },
+
+      {
+        "name": "National Sexual Assault Hotline",
+        "description": "Call 800-656-HOPE (4673) to connect with a trained staff member from a sexual assault service provider in your area that offers access to a range of free services. Crisis chat support is also available at Online Hotline."
+      }
+    ]
+  }
+]

src/pages/dev.js

@@ -26,8 +26,7 @@ export default function Dev() {
               target="_blank"
               rel="noopener noreferrer"
             >
-              By
-              {' '}
+              By {/* eslint-disable-line react/jsx-one-expression-per-line */}
               <Image
                 src="/vercel.svg"
                 alt="Vercel Logo"

src/pages/resources.js

@@ -1,16 +1,28 @@
+import GetHelpSection from '../sections/GetHelpSection';
 import styles from '@/styles/pages/Home.module.css';
-// import cloud from '@/public/assets/design-vectors/cloud.svg'
+import resourcesStyles from '@/styles/pages/Resources.module.css';
+
+import ExternalOpportunitiesSection from '../sections/ExternalOpportunitiesSection';
 
 export default function Resources() {
   return (
     <main className={`${styles.main}`}>
       <h1 style={{ textAlign: 'center' }}>Resources</h1>
-      <div className={`${styles.windowGrid}`}>
-        {/* <img src={cloud} alt="" /> */}
-      </div>
-      <div>
-        <h2 className={`${styles.header}`}>Get Help</h2>
+
+      <div className={`${resourcesStyles.descriptionContainer}`}>
+        <p className={`${resourcesStyles.description}`}>
+          We&apos;ve compiled some helpful resources for our members to utilize,
+          from external opportunities like job postings and scholarships, to
+          mental health and academic help. See something missing? Reach out to
+          us at <a href="mailto:[email protected]" style={{ textDecoration: 'underline' }}>[email protected]</a>.
+        </p>
       </div>
+
+      <h2 className={`${styles.header}`}>External Opportunities</h2>
+      <ExternalOpportunitiesSection />
+
+      <h2 className={`${styles.header}`}>Get Help</h2>
+      <GetHelpSection />
     </main>
   );
 }

src/sections/ExternalOpportunitiesSection.js

@@ -0,0 +1,49 @@
+import Cloud from '../components/CloudComponent';
+import styles from '@/styles/sections/ExternalOpportunitiesSection.module.css';
+
+export default function ExternalOpportunitiesSection() {
+  return (
+    <div className={styles.container}>
+      <div className={styles.mainCloud}>
+        <Cloud color="pink" size="large" />
+      </div>
+
+      <div className={styles.cloudText}>
+        <p>
+          Coming soon!
+          <br />
+          {/* eslint-disable-next-line react/jsx-one-expression-per-line */}
+          Check out {/* eslint-disable-next-line react/jsx-no-target-blank */}
+          <a
+            href="https://illinoiswcs.notion.site/External-Opportunities-Board-55cf543f69934c79b46a5df5dbec1512"
+            target="_blank"
+          >
+            <u>this link</u>
+            {/* eslint-disable-next-line react/jsx-one-expression-per-line */}
+          </a>{' '}
+          for now.
+        </p>
+      </div>
+
+      <div className={styles.cloud1}>
+        <Cloud color="pink" size="medium" />
+      </div>
+
+      <div className={styles.cloud2}>
+        <Cloud color="pink" size="small" />
+      </div>
+
+      <div className={styles.cloud3}>
+        <Cloud color="pink" size="small" />
+      </div>
+
+      <div className={styles.cloud4}>
+        <Cloud color="pink" size="small" />
+      </div>
+
+      <div className={styles.cloud5}>
+        <Cloud color="pink" size="medium" />
+      </div>
+    </div>
+  );
+}

src/sections/GetHelpSection.js

@@ -0,0 +1,45 @@
+import ComputerWindow from '../components/general/ComputerWindowComponent';
+import styles from '@/styles/sections/GetHelpSection.module.css';
+import resourcesData from '@/data/resources.json';
+
+export default function GetHelpSection() {
+  return (
+    <ComputerWindow topbarColor="#F65563">
+      <div className={styles.container}>
+        <div className={styles.mentalhContainer}>
+          <h3>Mental Health</h3>
+          {resourcesData[0].items.map((resource, index) => (
+            <div key={index} className={styles.resourceItem}>
+              <p className={styles.resourceName}>{resource.name}</p>
+              <li className={styles.resourceText}>{resource.description}</li>
+            </div>
+          ))}
+          {resourcesData[1].items.map((resource, index) => (
+            <div key={index} className={styles.resourceItem}>
+              <p className={styles.resourceName}>{resource.name}</p>
+              <li className={styles.resourceText}>{resource.description}</li>
+            </div>
+          ))}
+        </div>
+        <div className={styles.academicContainer}>
+          <h3>Academic</h3>
+          {resourcesData[2].items.map((resource, index) => (
+            <div key={index} className={styles.resourceItem}>
+              <p className={styles.resourceName}>{resource.name}</p>
+              <li className={styles.resourceText}>{resource.description}</li>
+            </div>
+          ))}
+        </div>
+        <div className={styles.otherContainer}>
+          <h3>Other</h3>
+          {resourcesData[3].items.map((resource, index) => (
+            <div key={index} className={styles.resourceItem}>
+              <p className={styles.resourceName}>{resource.name}</p>
+              <li className={styles.resourceText}>{resource.description}</li>
+            </div>
+          ))}
+        </div>
+      </div>
+    </ComputerWindow>
+  );
+}