Release

.gitignore

@@ -20,3 +20,6 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 package-lock.json
+.python*
+# Local Netlify folder
+.netlify

.nvmrc

@@ -0,0 +1 @@
+18

components/TextBlock.jsx

@@ -0,0 +1,15 @@
+import React from 'react';
+
+function TextBlock({ content, className, id }) {
+  if (!content) return null;
+
+  return (
+    <div
+      className={className}
+      id={id}
+      dangerouslySetInnerHTML={{ __html: content }}
+    />
+  );
+}
+
+export default TextBlock; 

components/about/ourValues.jsx

@@ -1,51 +1,83 @@
-import React from 'react';
 import { Container, Row, Card, 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 { 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]);
   return (
-    <Section darkgrey>
-      <Container>
-        <Row>
-          <div className="text-center project-detail-title">
-            <h2>Our Values</h2>
-          </div>
-        </Row>
-        <Row>
-          {content.map(({ header, body }) => (
-            <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}
-              md="4"
-              sm="6"
-              style={{
-                marginBottom: '25px',
-                height: '400px',
-                width: '400px',
-              }}>
-              <Card>
-                {/* <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>
+              style={{ borderColor: '#0094FF' }}>
+              <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;
+    }
+  }
+}

components/actionButton.jsx

@@ -1,84 +1,61 @@
 import React from 'react';
 import Link from 'next/link';
-
-function Anchor({ link, white, className, children, onClick, style, ...props }) {
-  return (
-    <>
-      <a
-        {...props}
-        href={link}
-        onClick={onClick}
-        style={style}
-        className={`${className ?? ''} ${white ? 'white-button' : 'action-button'}`}>
-        {children}
-      </a>
-      <style jsx>{`
-        a {
-          cursor: pointer;
-          box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
-          border-radius: 8px;
-          padding: 0.8rem 2.5rem;
-          border: none;
-          color: white;
-          text-decoration: none;
-          transition: all 0.3s ease;
-          text-align: center;
-          font-weight: 600;
-          letter-spacing: 0.5px;
-          text-transform: uppercase;
-          font-size: 0.9rem;
-          display: inline-block;
-        }
-        .white-button {
-          background: white;
-          color: var(--black);
-        }
-        .action-button {
-          background: var(--primary-blue);
-          color: white;
-        }
-
-        a:hover {
-          box-shadow: rgba(0, 0, 0, 0.12) 3px 5px 20px;
-          transform: translateY(-2px);
-        }
-
-        a:active {
-          transform: translateY(0);
-        }
-
-        .btn-outline-primary {
-          background: transparent;
-          border: 2px solid var(--primary-blue);
-          color: var(--primary-blue);
-        }
-
-        .btn-outline-primary:hover {
-          background: var(--primary-blue);
-          color: white;
-        }
-      `}</style>
-    </>
+import styles from '../styles/ActionButton.module.css'; // Adjust path as needed
+import clsx from 'clsx'; // Optional, or just use template literals
+
+const ActionButton = ({
+  link,
+  white,
+  className = '',
+  children,
+  onClick,
+  style,
+  ...props
+}) => {
+  const buttonClass = clsx(
+    styles.buttonBase,
+    white ? styles.white : styles.action,
+    className
   );
-}
 
-const ActionButton = ({ link, onClick, ...props }) => {
   if (!link && !onClick) {
-    console.warn('ActionButton: Neither link nor onClick prop provided');
+    console.warn('ActionButton: Neither link nor onClick provided');
     return null;
   }
 
   if (link) {
-    return link.startsWith('/') ? (
-      <Link href={link}>
-        <Anchor {...props} />
+    const isInternal = link.startsWith('/');
+    return isInternal ? (
+      <Link href={link} passHref legacyBehavior>
+        <a className={buttonClass} style={style} {...props}>
+          {children}
+        </a>
       </Link>
     ) : (
-      <Anchor {...props} target="_blank" rel="noreferrer" />
+      <a
+        href={link}
+        className={buttonClass}
+        style={style}
+        target="_blank"
+        rel="noreferrer"
+        {...props}
+      >
+        {children}
+      </a>
     );
   }
 
-  return <Anchor onClick={onClick} {...props} />;
+  return (
+    <a
+      role="button"
+      onClick={onClick}
+      className={buttonClass}
+      style={style}
+      {...props}
+    >
+      {children}
+    </a>
+  );
 };
 
-export default ActionButton;
+export default ActionButton;

components/actionLink.jsx

@@ -20,7 +20,9 @@ const getAnchor = (link, text, style) => (
 
 const ActionLink = ({ link, text, style }) =>
   link.startsWith('/') ? (
-    <Link href={link}>{getAnchor(link, text, style)}</Link>
+    <Link legacyBehavior href={link}>
+      {getAnchor(link, text, style)}
+    </Link>
   ) : (
     getAnchor(link, text, style)
   );

components/footer.jsx

@@ -25,12 +25,12 @@ function Footer() {
             <h4>About the org</h4>
             <ul>
               <li>
-                <Link href="/about">
+                <Link legacyBehavior href="/about">
                   <a>About Us</a>
                 </Link>
               </li>
               <li>
-                <Link href="/projects">
+                <Link legacyBehavior href="/projects">
                   <a>Projects</a>
                 </Link>
               </li>
@@ -40,17 +40,17 @@ function Footer() {
             <h4>Apply Now</h4>
             <ul>
               <li>
-                <Link href="/apply">
+                <Link legacyBehavior href="/apply">
                   <a>How to apply</a>
                 </Link>
               </li>
               <li>
-                <Link href="/apply/students">
+                <Link legacyBehavior href="/apply/students">
                   <a>Students</a>
                 </Link>
               </li>
               <li>
-                <Link href="/apply/nonprofits">
+                <Link legacyBehavior href="/apply/nonprofits">
                   <a>Non-profits</a>
                 </Link>
               </li>