refactor: refactoring about page

src/app/about/about.scss

@@ -13,7 +13,7 @@ h3 {
   color: white;
 }
 
-.about-page-container {
+.about-container {
   margin-top: $nav-height;
   max-width: fit-content;
   margin-left: 20%;

src/components/About/Agenda/Agenda.tsx

@@ -0,0 +1,104 @@
+const times = [
+  '9:00 AM',
+  '10:00 AM',
+  '11:00 AM',
+  '12:00 PM',
+  '1:00 PM',
+  '2:00 PM'
+];
+const events = [
+  'Breakfast',
+  'Team Meeting',
+  'Project Work',
+  'Lunch Break',
+  'Workshop',
+  'Wrap-up'
+];
+
+export default function Agenda() {
+  return (
+    <div className="agenda-section info">
+      <h2 className="section-title">Agenda</h2>
+      <svg
+        width="806"
+        height="547"
+        viewBox="0 0 806 547"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <text x="500" y="515" fill="white" className="agenda-text">
+          Wednesday, Nov 13 | 12-5pm PST
+        </text>
+        {/* "style=mask-type:luminance" */}
+        <mask
+          id="mask0_5032_8565"
+          maskUnits="userSpaceOnUse"
+          x="0"
+          y="0"
+          width="806"
+          height="547"
+        >
+          <path
+            fill-rule="evenodd"
+            clip-rule="evenodd"
+            d="M703.166 0.175781H533.693L518.193 14.2481L501.193 0.175781H247.193L211.193 14.248L192.193 0.175781H0.962891V403.248L12.1934 426.248L0.962891 443.248V546.248H318.693L341.193 537.248L370.193 546.248H803.193L805.135 253.748L796.693 239.748L805.135 226.248V92.274L703.166 0.175781Z"
+            fill="white"
+          />
+        </mask>
+        <g mask="url(#mask0_5032_8565)">
+          <path
+            d="M533.693 0.175781V-1.82422H532.921L532.349 -1.30502L533.693 0.175781ZM703.166 0.175781L704.506 -1.30842L703.935 -1.82422H703.166V0.175781ZM518.193 14.2481L516.918 15.7887L518.254 16.8944L519.538 15.7288L518.193 14.2481ZM501.193 0.175781L502.469 -1.36492L501.914 -1.82422H501.193V0.175781ZM247.193 0.175781V-1.82422H246.816L246.465 -1.68702L247.193 0.175781ZM211.193 14.248L210.003 15.8552L210.892 16.5134L211.921 16.1108L211.193 14.248ZM192.193 0.175781L193.384 -1.43142L192.853 -1.82422H192.193V0.175781ZM0.962891 0.175781V-1.82422H-1.03711V0.175781H0.962891ZM0.962891 403.248H-1.03711V403.71L-0.834309 404.126L0.962891 403.248ZM12.1934 426.248L13.8621 427.35L14.4919 426.397L13.9906 425.371L12.1934 426.248ZM0.962891 443.248L-0.70591 442.146L-1.03711 442.647V443.248H0.962891ZM0.962891 546.248H-1.03711V548.248H0.962891V546.248ZM318.693 546.248V548.248H319.079L319.436 548.105L318.693 546.248ZM341.193 537.248L341.786 535.338L341.109 535.128L340.451 535.391L341.193 537.248ZM370.193 546.248L369.601 548.158L369.89 548.248H370.193V546.248ZM803.193 546.248V548.248H805.18L805.193 546.261L803.193 546.248ZM805.135 253.748L807.135 253.761L807.139 253.198L806.848 252.715L805.135 253.748ZM796.693 239.748L794.998 238.688L794.346 239.729L794.981 240.781L796.693 239.748ZM805.135 226.248L806.831 227.308L807.135 226.822V226.248H805.135ZM805.135 92.274H807.135V91.385L806.476 90.789L805.135 92.274ZM533.693 2.17578H703.166V-1.82422H533.693V2.17578ZM519.538 15.7288L535.038 1.65658L532.349 -1.30502L516.849 12.7673L519.538 15.7288ZM499.918 1.71638L516.918 15.7887L519.469 12.7074L502.469 -1.36492L499.918 1.71638ZM247.193 2.17578H501.193V-1.82422H247.193V2.17578ZM211.921 16.1108L247.921 2.03848L246.465 -1.68702L210.465 12.3853L211.921 16.1108ZM191.003 1.78298L210.003 15.8552L212.384 12.6409L193.384 -1.43142L191.003 1.78298ZM0.962891 2.17578H192.193V-1.82422H0.962891V2.17578ZM2.96289 403.248V0.175781H-1.03711V403.248H2.96289ZM13.9906 425.371L2.76009 402.371L-0.834309 404.126L10.3962 427.126L13.9906 425.371ZM2.63159 444.35L13.8621 427.35L10.5246 425.146L-0.70591 442.146L2.63159 444.35ZM2.96289 546.248V443.248H-1.03711V546.248H2.96289ZM318.693 544.248H0.962891V548.248H318.693V544.248ZM340.451 535.391L317.951 544.391L319.436 548.105L341.936 539.105L340.451 535.391ZM370.786 544.338L341.786 535.338L340.601 539.158L369.601 548.158L370.786 544.338ZM803.193 544.248H370.193V548.248H803.193V544.248ZM803.136 253.735L801.193 546.235L805.193 546.261L807.135 253.761L803.136 253.735ZM794.981 240.781L803.423 254.781L806.848 252.715L798.406 238.715L794.981 240.781ZM803.44 225.188L794.998 238.688L798.389 240.808L806.831 227.308L803.44 225.188ZM803.135 92.274V226.248H807.135V92.274H803.135ZM806.476 90.789L704.506 -1.30842L701.825 1.65998L803.795 93.758L806.476 90.789Z"
+            fill="white"
+          />
+          <path
+            fill-rule="evenodd"
+            clip-rule="evenodd"
+            d="M804.755 92.537H702.785V0.439453L804.755 92.537Z"
+            fill="white"
+          />
+        </g>
+        {times.map((time, index) => (
+          <g key={time}>
+            {/* Left cell for time */}
+            <rect
+              x="50"
+              y={40 + index * 60}
+              width="130"
+              height="50"
+              stroke="#FFFFFF"
+              strokeWidth="2"
+            />
+            <text
+              x="65"
+              y={70 + index * 60}
+              fontSize="14px"
+              fill="#FFFFFF"
+              fontFamily="Arial"
+            >
+              {time}
+            </text>
+
+            {/* Right cell for event */}
+            <rect
+              x="190"
+              y={40 + index * 60}
+              width="130"
+              height="50"
+              stroke="#FFFFFF"
+              strokeWidth="2"
+            />
+            <text
+              x="205"
+              y={70 + index * 60}
+              fontSize="14px"
+              fill="#FFFFFF"
+              fontFamily="Arial"
+            >
+              {events[index]}
+            </text>
+          </g>
+        ))}
+      </svg>
+    </div>
+  );
+}

src/components/About/Companies/Companies.tsx

@@ -0,0 +1,83 @@
+export default function Companies() {
+  return (
+    <div className="companies-section info">
+      <h2 className="section-title">Companies and Organizations</h2>
+      <svg
+        width="820"
+        height="971"
+        viewBox="0 0 820 971"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M803.255 817.341L761.047 836.685C757.206 838.446 754.743 842.284 754.743 846.51L754.743 937.905C754.743 943.873 749.904 948.712 743.936 948.712L33.8059 948.712C27.8374 948.712 22.999 943.873 22.999 937.905L22.999 53.5193C22.9991 47.5509 27.8374 42.7125 33.8059 42.7125L743.811 42.7125C749.78 42.7125 754.618 47.5509 754.618 53.5193L754.618 559.405C754.618 563.585 757.029 567.391 760.808 569.176L803.369 589.287C807.148 591.073 809.559 594.878 809.559 599.058L809.559 757.712L800.922 767.712L809.559 777.712L809.559 807.517C809.559 811.743 807.096 815.581 803.255 817.341Z"
+          fill="black"
+          stroke="#FBFEFC"
+          strokeWidth="2"
+        />
+        <path
+          d="M804.175 566.044L759.976 585.38C756.043 587.101 753.501 590.987 753.501 595.281L753.501 937.905C753.501 943.873 748.663 948.712 742.694 948.712L26.8058 948.712C20.8373 948.712 15.999 943.873 15.999 937.905L15.999 55.0187C15.999 49.0502 20.8374 44.2118 26.8058 44.2119L743.742 44.2119C749.692 44.2118 754.522 49.0208 754.549 54.9703L755.682 308.156C755.7 312.339 758.132 316.136 761.923 317.903L804.313 337.658C808.119 339.431 810.553 343.249 810.555 347.448L810.65 556.138C810.652 560.434 808.11 564.323 804.175 566.044Z"
+          fill="black"
+          stroke="#FBFEFC"
+          strokeWidth="2"
+        />
+        <path
+          d="M803.816 315.323L761.623 334.66C757.776 336.423 755.312 340.27 755.319 344.503L755.591 500.465C755.594 501.947 755.292 503.414 754.703 504.774L743.917 529.712L753.61 543.406C754.902 545.232 755.595 547.413 755.595 549.65L755.595 958.266C755.595 964.235 750.757 969.073 744.789 969.073L460.917 969.073L446.417 953.712L423.917 969.073L208.917 969.073L201.167 964.393L193.417 959.712L177.417 969.073L12.2366 969.073C6.26813 969.073 1.42974 964.235 1.42976 958.266L1.42981 738.712L11.4991 693.712L1.42979 626.712L1.42978 297.212L11.499 271.212L1.42979 203.712L1.42975 38.1616C1.42978 32.1932 6.26814 27.3548 12.2366 27.3548L232.917 27.3548L250.417 36.212L260.417 27.3548L630.417 27.3549L643.417 35.712L652.417 27.3549L744.363 27.3548C750.33 27.3549 755.168 32.1902 755.17 38.1567L755.179 57.3478C755.181 61.5467 757.615 65.3645 761.421 67.1382L803.783 86.8799C807.589 88.6536 810.023 92.4714 810.025 96.6703L810.12 305.493C810.122 309.721 807.659 313.561 803.816 315.323Z"
+          fill="black"
+          stroke="#FBFEFC"
+          strokeWidth="2"
+        />
+        <path d="M43.665 967.473V28.1242" stroke="#FBFEFC" strokeWidth="2" />
+        <path d="M58 968.712L58 27.7121" stroke="#FBFEFC" strokeWidth="2" />
+        <path
+          d="M171 968.712L193.5 951.212L211.5 964.212L329.5 968.712L422.5 959.212L447 941.712L471.5 959.212L613.5 968.712H461.5L446 953.212L423.5 968.712H329.5H208.5L193.5 959.212L176.5 968.712H171Z"
+          fill="#FBFEFC"
+          stroke="white"
+        />
+        <path
+          d="M629.499 36.2121L565.499 27.7121H630.999L643.499 36.2121C646.666 33.3787 653.099 27.7121 653.499 27.7121H710.499L656.999 34.7121L644.999 50.2121L629.499 36.2121Z"
+          fill="#FBFEFC"
+          stroke="white"
+        />
+        <path
+          d="M1.52379 298.212V385.712L1.00205 626.712L12.5253 693.712L1.00205 739.212L2.04962 961.712L4.14476 965.712L9.90639 968.712H45V27.7121H10.4302L2.04962 33.7121L1 148.212V202.712L11.9995 270.712L1.52379 298.212Z"
+          fill="#FBFEFC"
+          stroke="white"
+        />
+        <path
+          d="M801 754.712L809.5 706.212V757.212L801 768.212L809.5 777.712V794.212L790 768.212L801 754.712Z"
+          fill="#FBFEFC"
+          stroke="white"
+        />
+        <path
+          d="M516.067 687.641L548.838 691.038L565.224 692.736L573.416 693.585L578.006 696.208L581.609 694.435L647.4 699.356L714.147 703.12L704.959 785.971L704.066 807.65L703.62 818.49L700.511 820.001L703.396 823.91L703.173 829.33L695.271 941.212L679.284 940.236L673.279 935.921L671.291 939.748L663.297 939.26L631.323 937.307L528.125 926.578L497.365 925.523L498.537 906.078L499.123 896.355L504.134 892.205L499.709 886.633L502.054 847.742L513.509 733.308L516.067 687.641Z"
+          fill="black"
+          stroke="#FBFEFC"
+          strokeWidth="2"
+        />
+        <rect
+          x="526.948"
+          y="699.341"
+          width="175.308"
+          height="184.947"
+          transform="rotate(4.53287 526.948 699.341)"
+          fill="black"
+        />
+        <rect
+          x="526.948"
+          y="699.341"
+          width="175.308"
+          height="184.947"
+          transform="rotate(4.53287 526.948 699.341)"
+          stroke="#FBFEFC"
+          strokeWidth="2"
+        />
+        <path
+          d="M782.97 76.1558L801.695 32.9947C805.938 23.2139 801.434 11.8463 791.643 7.62689V7.62689C781.868 3.41468 770.53 7.92362 766.318 17.6979L706.231 157.128C700.84 169.636 706.61 184.146 719.119 189.536V189.536C731.627 194.927 746.136 189.156 751.527 176.648L802.047 59.4184"
+          stroke="#68DEA3"
+          strokeWidth="2.68804"
+        />
+      </svg>
+    </div>
+  );
+}

src/components/About/FAQ/FAQ.tsx

@@ -0,0 +1,119 @@
+import * as Accordion from '@radix-ui/react-accordion';
+import React, { ReactNode } from 'react';
+import classNames from 'classnames';
+import { ChevronDownIcon } from '@radix-ui/react-icons';
+
+interface AccordionTriggerProps
+  extends React.ComponentPropsWithoutRef<typeof Accordion.Trigger> {
+  children: ReactNode;
+  className?: string;
+}
+
+const AccordionTrigger = React.forwardRef<
+  HTMLButtonElement,
+  AccordionTriggerProps
+>(({ children, className, ...props }, forwardedRef) => (
+  <Accordion.Header className="AccordionHeader">
+    <Accordion.Trigger
+      className={classNames('AccordionTrigger', className)}
+      ref={forwardedRef}
+      id={props.id}
+      aria-expanded={props['aria-expanded']}
+      onClick={props.onClick}
+    >
+      {children}
+      <ChevronDownIcon className="AccordionChevron" aria-hidden />
+    </Accordion.Trigger>
+  </Accordion.Header>
+));
+AccordionTrigger.displayName = 'AccordionTrigger';
+
+interface AccordionContentProps
+  extends React.ComponentPropsWithoutRef<typeof Accordion.Content> {
+  children: ReactNode;
+  className?: string;
+}
+
+const AccordionContent = React.forwardRef<
+  HTMLDivElement,
+  AccordionContentProps
+>(({ children, className, ...props }, forwardedRef) => (
+  <Accordion.Content
+    className={classNames('AccordionContent', className)}
+    ref={forwardedRef}
+    id={props.id}
+  >
+    <div className="AccordionContentText">{children}</div>
+  </Accordion.Content>
+));
+AccordionContent.displayName = 'AccordionContent';
+
+export default function FAQ() {
+  return (
+    <div className="faq-section info">
+      <h2 className="section-title">Frequently Asked Questions</h2>
+      <div className="faq-accordion">
+        <Accordion.Root
+          className="AccordionRoot"
+          type="single"
+          defaultValue="item-1"
+          collapsible
+        >
+          <Accordion.Item className="AccordionItem" value="item-1">
+            <AccordionTrigger>When is Stride?</AccordionTrigger>
+            <AccordionContent>
+              Yes. It adheres to the WAI-ARIA design pattern.
+            </AccordionContent>
+          </Accordion.Item>
+
+          <Accordion.Item className="AccordionItem" value="item-2">
+            <AccordionTrigger>Who can attend Stride?</AccordionTrigger>
+            <AccordionContent>
+              Yes. It&apos;s unstyled by default, giving you freedom over the
+              look and feel.
+            </AccordionContent>
+          </Accordion.Item>
+
+          <Accordion.Item
+            aria-label="accordion"
+            className="AccordionItem"
+            value="item-3"
+          >
+            <AccordionTrigger>How should I dress for Stride?</AccordionTrigger>
+            <AccordionContent>
+              <div className="AccordionContentText">
+                Yes! You can animate the Accordion with CSS or JavaScript.
+              </div>
+            </AccordionContent>
+          </Accordion.Item>
+
+          <Accordion.Item
+            aria-label="accordion"
+            className="AccordionItem"
+            value="item-4"
+          >
+            <AccordionTrigger>How can I prepare for Stride?</AccordionTrigger>
+            <AccordionContent>
+              <div className="AccordionContentText">
+                Yes! You can animate the Accordion with CSS or JavaScript.
+              </div>
+            </AccordionContent>
+          </Accordion.Item>
+        </Accordion.Root>
+      </div>
+      <svg
+        width="100%"
+        height="21"
+        viewBox="0 0 320 21"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M-53.0713 9.20718L-48.4038 11.5409L-44.6698 9.20718L-39.0688 11.5409L-32.5343 5.93993L-22.7325 13.4079L-17.1316 15.2749H-11.9973L-3.59579 19.9424L4.80571 18.0754H12.2737L16.4744 15.2749L21.6087 13.4079H30.9437L39.3452 16.6751L44.9462 18.0754H52.8809L58.4819 15.2749H69.2172L79.9524 10.1406H85.5534L88.8207 6.40666H110.758L114.959 7.8069H119.626L121.96 10.1406H125.694H129.428L132.695 12.0077H136.896L143.43 10.1406L146.698 7.8069H151.365L157.433 4.07292H165.368H173.769L179.37 2.2059H184.971L189.639 4.07292L194.773 6.40666H199.44L206.442 4.07292H212.043L216.243 2.2059H221.844L227.912 4.07292H234.447L240.514 6.40666H245.649H256.851L263.852 4.07292H267.586L273.187 5.00642H277.854L283.922 7.8069H290.923H296.991L301.192 4.07292H305.393L309.127 5.00642L314.728 4.07292H318.462H322.662L326.863 6.40666L332.464 7.8069L337.598 9.20718H342.266L346 5.00642L349.267 0.805664H353.001L356.735 2.2059H360.469L363.736 4.07292H373.071"
+          stroke="#FBFEFC"
+          strokeWidth="0.575091"
+        />
+      </svg>
+    </div>
+  );
+}

src/components/About/Opportunities/Opportunities.scss

@@ -0,0 +1,2 @@
+.opportunities-section {
+}