+
+
+
+ 
+ 
+ 
+ 
+ 
+ 
+
+ );
+};
+
+export { About };
diff --git a/src/app/pages/Designathons/Designathon24/components/Notecard/Notecard.jsx b/src/app/pages/Designathons/Designathon24/components/Notecard/Notecard.jsx
new file mode 100644
index 00000000..a644794e
--- /dev/null
+++ b/src/app/pages/Designathons/Designathon24/components/Notecard/Notecard.jsx
@@ -0,0 +1,37 @@
+import cn from "./Notecard.module.scss";
+
+import { useRef } from "react";
+import useNotecardLines from "./useNotecardLines";
+
+const Notecard = ({ children }) => {
+ const textRef = useRef(null);
+
+ const { lines, notecardLineTop, notecardLineHeight } =
+ useNotecardLines(textRef);
+
+ return (
+ About
++ Design-a-thon is a 3 day long hybrid event where you or a + team design a product focused on the theme: community and + inclusivity. It takes place on February 24, starting at 5:30 + pm and ends February 26, 8:00 pm PST. +
++ Design at UCI is the premier student-run organization at UCI + for anything graphic design, UI/UX design, product design, + and more. Started in 2016, we foster a special community for + all digital designers to connect, learn, and innovate. +
++ Design at UCI’s designathon is the largest collegiate + designathon in Orange County. Each year, we bring together + hundreds of student designers nationwide to define, develop, + and pitch a product built from scratch. We hope that this + experience can help you acquire and grow both your soft and + hard skills in empathizing with your users, defining a set + of goals and needs, developing your product, and improving + your confidence and creativity as a human-centric designer. +
+
+
+
+
+ );
+};
+
+export default Notecard;
diff --git a/src/app/pages/Designathons/Designathon24/components/Notecard/Notecard.module.scss b/src/app/pages/Designathons/Designathon24/components/Notecard/Notecard.module.scss
new file mode 100644
index 00000000..490f56a2
--- /dev/null
+++ b/src/app/pages/Designathons/Designathon24/components/Notecard/Notecard.module.scss
@@ -0,0 +1,85 @@
+.noteCard {
+ position: relative;
+
+ background-color: #fbfbfb;
+ color: var(--des24-black);
+
+ box-shadow: 0px 4px 6px 4px rgba(0, 0, 0, 0.1);
+
+ margin: 1.5rem 1rem 0;
+
+ .noteCardHeader {
+ height: 60px;
+ border-bottom: 4px solid;
+ border-color: var(--des24-hot-pink);
+ opacity: 70%;
+ }
+
+ .text {
+ margin-top: 0.5rem;
+ max-width: 95%;
+
+ p {
+ display: flex;
+ flex-direction: column;
+ gap: 3rem;
+
+ padding: 0 1.5rem 2rem 1.5rem;
+ line-height: 200%;
+ font-size: 16px;
+ }
+ }
+
+ & .lines {
+ .line {
+ position: absolute;
+ height: 3px;
+ width: 100%;
+
+ background-color: #8ebbdc;
+ opacity: 30%;
+
+ z-index: -10;
+ }
+ }
+
+ @media screen and (min-width: 640px) {
+ margin: 1.5rem 4rem 0;
+
+ .noteCardHeader {
+ height: 80px;
+ border-bottom: 4px solid;
+ border-color: var(--des24-hot-pink);
+ opacity: 70%;
+ }
+
+ .text {
+ margin-top: 0.75rem;
+
+ p {
+ padding: 0 2rem 2.5rem;
+ font-size: 20px;
+ }
+ }
+ }
+
+ @media screen and (min-width: 1280px) {
+ position: relative;
+
+ background-color: #fbfbfb;
+ color: var(--des24-black);
+
+ box-shadow: 0px 4px 6px 4px rgba(0, 0, 0, 0.1);
+
+ margin: 1.5rem 6rem 0;
+
+ .text {
+ margin-top: 0.5rem;
+
+ p {
+ font-size: 24px;
+ padding: 0 2.5rem 3rem 2.5rem;
+ }
+ }
+ }
+}
diff --git a/src/app/pages/Designathons/Designathon24/components/Notecard/useNotecardLines.jsx b/src/app/pages/Designathons/Designathon24/components/Notecard/useNotecardLines.jsx
new file mode 100644
index 00000000..821ae8a8
--- /dev/null
+++ b/src/app/pages/Designathons/Designathon24/components/Notecard/useNotecardLines.jsx
@@ -0,0 +1,69 @@
+import { useState, useEffect, useCallback } from "react";
+
+const LINE_BREAKPOINTS = {
+ XL: 48,
+ LG: 40,
+ SM: 32,
+};
+
+const SMALL_SCREEN = 640;
+const TOP_MARGIN = 128;
+const TOP_MARGIN_SM = 96;
+
+function useNotecardLines(textRef) {
+ const [dimensions, setDimensions] = useState({
+ width: 0,
+ height: 0,
+ lines: 0,
+ notecardLineHeight: 0,
+ notecardLineTop: 0,
+ });
+
+ const handleResize = useCallback(() => {
+ let newHeight = 0;
+ let newWidth = 0;
+
+ if (textRef.current) {
+ newHeight = textRef.current.clientHeight;
+ }
+
+ newWidth = window.innerWidth;
+
+ /* Distance between notecard (blue) lines */
+ const notecardLineHeight =
+ newWidth >= 1280
+ ? LINE_BREAKPOINTS.XL
+ : newWidth >= 640
+ ? LINE_BREAKPOINTS.LG
+ : LINE_BREAKPOINTS.SM;
+
+ const numLines = Math.floor(newHeight / notecardLineHeight) - 1;
+ const lines = numLines > 0 ? numLines : 1;
+
+ /* Distance from top border of card */
+ const notecardLineTop =
+ newWidth >= SMALL_SCREEN ? TOP_MARGIN : TOP_MARGIN_SM;
+
+ setDimensions({
+ width: newWidth,
+ height: newHeight,
+ lines,
+ notecardLineHeight,
+ notecardLineTop,
+ });
+ }, [textRef]);
+
+ useEffect(() => {
+ handleResize();
+
+ window.addEventListener("resize", handleResize);
+
+ return () => {
+ window.removeEventListener("resize", handleResize);
+ };
+ }, [handleResize]);
+
+ return dimensions;
+}
+
+export default useNotecardLines;
diff --git a/src/app/pages/Designathons/Designathon24/components/index.js b/src/app/pages/Designathons/Designathon24/components/index.js
index 862b1321..04bfc40d 100644
--- a/src/app/pages/Designathons/Designathon24/components/index.js
+++ b/src/app/pages/Designathons/Designathon24/components/index.js
@@ -1,3 +1,4 @@
+export * from "./About";
export * from "./Profile";
export * from "./Prizes";
export * from "./SectionNavigation";
+ {children}
+
+
+
+ {/* The number of lines, determined by line height and height of total text */}
+ {[...Array(lines).keys()].map((index) => (
+
+ ))}
+
+