Revert "Revert "Updating the Values Section""

components/about/missionSection.jsx

@@ -34,7 +34,7 @@ const MissionSection = () => (
               <img
                 alt="Fall 2019 team"
                 style={props}
-                src="/images/fa19-team.jpg"
+                src="/images/f21_hoco.jpg"
                 className="shadow"
                 id="mission-team"
               />

components/about/ourValues.jsx

@@ -1,50 +1,88 @@
-import React from 'react';
 import { Container, Row, Card, CardDeck, CardBody, Col } from 'reactstrap';
 import Section from '../section';
 import { documentToHtmlString } from '@contentful/rich-text-html-renderer';
+import { useState, useEffect, useRef } from 'react';
+import styles from './styles.module.scss';
+import classNames from 'classnames';
+import { FaBullseye } from 'react-icons/fa';
+import { IoMdArrowDropright as ArrowIcon } from 'react-icons/io';
 
 const OurValues = ({ content }) => {
+  const [selected, setSelected] = useState(3);
+  const [displayValues, setDisplayValues] = useState([]);
+  const [moveToNext, setMoveToNext] = useState(false);
+  const autoScrollInterval = useRef(null);
+
+  useEffect(() => {
+    setDisplayValues(content.slice(0, -1));
+
+    // autoScrollInterval.current = setInterval(() => {
+    //   setMoveToNext(true);
+    // }, 4000);
+
+    return () => clearInterval(autoScrollInterval.current);
+  }, []);
+
+  const onClickNext = () => {
+    if (autoScrollInterval?.current) {
+      clearInterval(autoScrollInterval.current);
+    }
+    setMoveToNext(true);
+  };
+
+  useEffect(() => {
+    // whenever we need to move to the next element...
+    if (moveToNext) {
+      // change which card is focused (wrapping to the start of the list if necessary)
+      setSelected((selected + 1) % content.length);
+      // once we're done scrolling to our focused card...
+      setTimeout(() => {
+        // figure out what the "next" value is
+        // for example, if we are currently displaying cards 1 through 5 and our list is 5 elements long,
+        // the next value will be value number 1 (so we wrap back to the beginning)
+        const nextValue = selected + Math.ceil(displayValues.length / 2);
+        // now, chop off the first card in the list and append our "next" value onto the end
+        // if we don't chop off the front, our list could be infinitely long overtime!
+        setDisplayValues([...displayValues.slice(1), content[nextValue % content.length]]);
+        // finally, reset our transition
+        // this will essentially undo our transition to the next card,
+        // but since we chopped off the first value, we won't notice this jump visually!
+        setMoveToNext(false);
+      }, 300);
+    }
+  }, [moveToNext]);
+  console.log(`Selected:${content[selected].header}`);
   return (
-    <Section darkgrey>
-      <Container>
-        <Row>
-          <div className="text-center project-detail-title">
-            <h2>Our Values</h2>
-          </div>
-        </Row>
-        <Row>
-          {content.map(({ header, body, image }) => (
-            <Col
-              md="4"
-              sm="6"
-              style={{
-                marginBottom: '25px',
-                height: '400px',
-                width: '400px',
-              }}>
-              <Card key={header}>
-                {/* <img className="card-img-top" src={image.url} alt={image.description} /> */}
-                <CardBody
-                  style={{
-                    height: '400px',
-                    width: '320px',
-                  }}>
-                  <h4 className="text-title">{header}</h4>
-                  <div
-                    style={{
-                      paddingLeft: '5px',
-                      paddingRight: '15px',
-                    }}
-                    dangerouslySetInnerHTML={{
-                      __html: documentToHtmlString(body.json),
-                    }}></div>
-                </CardBody>
-              </Card>
-            </Col>
+    <Container className={styles.root}>
+      <h2>Our Values</h2>
+      <div className={styles.carousel_container}>
+        <div
+          className={classNames(styles.value_card_container, {
+            [styles.move]: moveToNext,
+          })}>
+          {displayValues.map(({ header, body, image }) => (
+            <article
+              className={classNames(styles.value_card, {
+                [styles.selected]: content[selected].header === header,
+              })}
+              key={header}
+              style={{ borderColor: '#0094FF' }}>
+              {/* <FaBullseye style={{ fill: '#0094FF' }} size={50} /> */}
+              <h3>{header}</h3>
+              <p>{body.json.content[0].content[0].value}</p>
+            </article>
           ))}
-        </Row>
-      </Container>
-    </Section>
+        </div>
+      </div>
+      <div className={styles.button_container}>
+        <button
+          className={styles.next_value_button}
+          onClick={onClickNext}
+          style={{ backgroundColor: '#0094FF' }}>
+          Next <ArrowIcon />
+        </button>
+      </div>
+    </Container>
   );
 };
 

components/about/styles.module.scss

@@ -0,0 +1,52 @@
+.root {
+  margin-left: auto;
+  margin-right: auto;
+  $card-margin: 10px;
+  $card-width: 340px;
+  .carousel_container {
+    overflow: hidden;
+    display: flex;
+    justify-content: center;
+
+    .value_card_container {
+      display: flex;
+
+      .value_card {
+        width: $card-width;
+        margin: $card-margin;
+        border: 3px solid black;
+        padding: 10px;
+        border-radius: 5px;
+        transform: scale(0.9);
+        opacity: 0.8;
+        transition: transform 0.3s;
+
+        &.selected {
+          opacity: 1;
+          transform: scale(1);
+        }
+      }
+
+      &.move {
+        transform: translateX(-$card-width - $card-margin * 2);
+        transition: transform 0.3s;
+      }
+    }
+  }
+
+  .button_container {
+    display: flex;
+    justify-content: center;
+    top: -50px;
+    .next_value_button {
+      transition: background-color 0.3s;
+      border-radius: 5px;
+      font-size: 20px;
+      display: flex;
+      align-items: center;
+      padding: 10px 20px;
+      padding-right: 15px;
+      margin-left: $card-width - 80px;
+    }
+  }
+}

package.json

@@ -12,11 +12,15 @@
     "lint:fix": "eslint --fix \"./**/*.{js,jsx}\""
   },
   "dependencies": {
+    "@egjs/react-flicking": "^4.4.3",
+    "classnames": "^2.3.1",
+    "contentful": "^9.1.5",
     "next": "^10.0.4",
     "next-page-transitions": "^1.0.0-alpha.4",
     "react": "^16.6.3",
     "react-dom": "^16.6.3",
     "react-ga": "^3.1.2",
+    "react-icons": "^4.3.1",
     "react-spring": "^8.0.27",
     "react-toastify": "^6.0.8",
     "react-vertical-timeline-component": "^3.0.2",

pages/apply/nonprofits.jsx

@@ -37,7 +37,7 @@ function NonProfits({
         <Quote key={author} quote={quote} source={author} />
       ))}
       {timelineCollection && <ApplicationProcess steps={timelineCollection.items} />}
-      {faqsCollection && <Faq questions={faqsCollection.items} />}
+      {/* {faqsCollection && <Faq questions={faqsCollection.items} />} */}
     </>
   );
 }

pages/apply/students.jsx

@@ -38,7 +38,7 @@ function Students({
       {timelineCollection?.items?.length > 0 && (
         <ApplicationProcess steps={timelineCollection.items} />
       )}
-      {faqsCollection?.items?.length > 0 && <Faq questions={faqsCollection.items} />}
+      {/* {faqsCollection?.items?.length > 0 && <Faq questions={faqsCollection.items} />} */}
     </>
   );
 }

pages/projects/index.jsx

@@ -28,7 +28,10 @@ function Projects({ projects }) {
         <p>
           We are in the process of transfer all of our projects to our new site. A complete list of
           pervious projects can be found{' '}
-          <a href="https://www.notion.so/h4i/986a3351cdca44cd85e10dd4452953f5?v=6420ae90233148dfaf6f8570e680e4e5">
+          <a
+            href="https://h4i.notion.site/986a3351cdca44cd85e10dd4452953f5?v=6420ae90233148dfaf6f8570e680e4e5"
+            target="_blank"
+            rel="noopener noreferrer">
             here
           </a>
         </p>