Updated online expansion page to match figma design

react-ystemandchess/src/AppRoutes.tsx

@@ -31,6 +31,7 @@ import SponsorsPartners from "./features/about-us/sponsors-partners/SponsorsPart
 import Board from "./features/about-us/board/Board";
 import Financial from "./features/about-us/financial/Financial";
 import AboutUs from "./features/about-us/aboutus/AboutUs";
+import OnlineExpansion from "./features/about-us/online-expansion/OnlineExpansion";
 
 // Educational content pages
 import PlayComputer from "./features/engine/PlayComputer";
@@ -98,6 +99,7 @@ const AppRoutes = () => {
       <Route path="/financial" element={<Financial />} />
       <Route path="/board" element={<Board />} />
       <Route path="/sponsors&partners" element={<SponsorsPartners />} />
+      <Route path="/online-expansion" element={<OnlineExpansion />} />
 
       {/* Educational content and learning pages */}
       <Route path="/play" element={<PlayComputer/>}/>

react-ystemandchess/src/features/about-us/online-expansion/OnlineExpansion.scss

@@ -0,0 +1,111 @@
+@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,700;0,900;1,400;1,700;1,900&display=swap");
+
+$caption-color: #535353;
+$brand-color-primary: #dff2c8;
+$brand-color-secondary: #bfd99e;
+$text-color: #333;
+$highlight-color: #556b2f;
+$quote-bg-color: #c1dcaf;
+
+$font-size-base: 16px;
+$font-family-base: "Roboto", Arial, sans-serif;
+$font-weight-base: 400;
+$line-height-base: 1.6;
+$body-color: #333;
+$body-bg: #dff2c8;
+
+@mixin font-size($size) {
+  font-size: $size;
+  line-height: $line-height-base;
+}
+
+body {
+  margin: 0;
+  font-family: $font-family-base;
+  @include font-size($font-size-base);
+  font-weight: $font-weight-base;
+  color: $body-color;
+  text-align: center; // Center-align body content
+  background-color: $body-bg;
+}
+
+.container-online {
+  background-color: $brand-color-primary;
+  padding: 20px 0;
+}
+
+#main-content-online {
+  background-color: $brand-color-primary;
+  padding: 0;
+  min-height: 100vh;
+}
+
+.text-title-md-online {
+  font-size: 2.2rem;
+  font-weight: 900;
+  color: $highlight-color;
+  padding-top: 10px;
+  text-align: center;
+  margin-bottom: 10px;
+}
+
+.picture-online,
+.picture {
+  width: 90%;
+  max-width: 800px;
+  height: auto;
+  margin: 15px auto;
+  display: block;
+  border-radius: 10px;
+  object-fit: cover;
+}
+
+.text-caption-online,
+.text-caption {
+  color: $caption-color;
+  font-size: 0.85rem;
+  text-align: center;
+  margin-top: 5px;
+}
+
+.text-normal-online,
+.text-normal {
+  max-width: 800px; // Limit the width of the paragraph
+  margin: 0 auto 15px; // Center align with auto margins
+  padding: 0 20px; // Add padding to avoid edges
+  font-size: 1.05rem;
+  line-height: 1.7;
+  color: $text-color;
+  text-align: justify;
+  text-indent: 2em; // Add a tab space at the beginning, like MLA format
+}
+
+.rectdiv2Online {
+  background-color: $quote-bg-color;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: auto;
+  min-height: 160px;
+  padding: 20px 0; // padding top/bottom only to let it stretch naturally edge-to-edge
+  width: 100%;
+}
+
+.recttextonline {
+  max-width: 800px; // Increase max-width to allow the quote to fill up more of its container
+  margin: 0 auto; // Center align
+  font-size: 1.50rem; // Slightly larger to fill the space well
+  line-height: 1.7;
+  color: $text-color;
+  text-align: center;
+  font-weight: bold;
+}
+
+.pictureOnline {
+  object-fit: contain;
+  width: max(100%, 300px);
+  height: 450px;
+  display: block;
+  margin: 15px auto;
+  border-radius: 10px;
+} 

react-ystemandchess/src/features/about-us/online-expansion/OnlineExpansion.tsx

@@ -0,0 +1,122 @@
+import React from "react";
+import "./OnlineExpansion.scss"; // Using matching SCSS format
+import Images from "../../../assets/images/imageImporter";
+
+const OnlineExpansion = () => {
+  return (
+    <main id="main-content-online" role="main">
+      <section className="container-online" role="region" aria-label="Main online expansion section" tabIndex={0}>
+        <div className="text-title-md-online txt-p">
+          <h1 style={{ fontWeight: "bold" }}>The Importance of Online Expansion of Y Stem and Chess Inc.</h1>
+        </div>
+
+        <figure>
+          <img
+            className="picture-online"
+            src={Images.mathComputerImg}
+            alt="Students practicing chess on computers"
+          />
+          <figcaption className="text-caption-online txt-p">
+            Students practicing their chess skills in the classroom
+          </figcaption>
+        </figure>
+
+        <div className="text-normal-online txt-p">
+          <p>
+            The Importance of Online Expansion of Y STEM and Chess Inc. focuses
+            on using technology to scale. Yes, we are nonprofit but more
+            fundamentally we are a technology company. Technology will help
+            individualize lessons in chess, math, and computer science.
+            Individualized lessons will be conducted online via our website to
+            help rural and urban communities that lack access to resources in
+            High School or pay for courses at other institutions. The rural and
+            urban companies simply don’t have the resources to prepare students
+            for success in STEM. Using the proven aspects of our program, we can
+            change the future of students that have largely been excluded from
+            the high-paying jobs that STEM provides while increasing inclusivity
+            and lowering poverty.
+          </p>
+        </div>
+      </section>
+
+      <section className="rectdiv2Online" role="region" aria-label="Quote section" tabIndex={0}>
+        <div className="rectdiv2-wrapper">
+          <p className="recttextonline">
+            "Our goal is to have all our students feel that they belong because they do"
+          </p>
+        </div>
+      </section>
+
+      <section className="container-online" role="region" aria-label="Online expansion details section" tabIndex={0}>
+        <div className="text-normal-online txt-p">
+          <p>
+            The development of our curriculum online will accelerate the expansion
+            of our program by lowering the cost and the logistical concerns for
+            mentors. Most mentors come from STEM backgrounds and are located in
+            cities. By moving the program online, they can easily mentor from
+            work, school, or home and reach students in rural communities here in
+            Idaho. We can turn Idaho into a STEM powerhouse in just a few years.
+          </p>
+        </div>
+
+        <div className="text-normal-online txt-p">
+          <p>
+            Once we refine our curriculum and approach, YSC will roll out our
+            program in other geographic and demographic regions across the
+            country. This will provide critical feedback that will help ease the
+            challenges of expansion. The more mentors we have, the more students
+            we can get into the program, and the faster we can fill STEM-related
+            jobs.
+          </p>
+        </div>
+
+        <div className="text-normal-online txt-p">
+          <p>
+            Online access by students and mentors will allow us to quickly scale
+            our program and curriculum. It eliminates geographical supply issues
+            regarding mentors that can play chess, tutor math, or teach computer
+            science. Our mentors will be primarily focused on relationship building
+            and student community development. Our goal is to have all our
+            students feel that they belong because they do. Think of our mentors as
+            the Big Brothers and Big Sisters of STEM. Mentors are the critical
+            support factor in a student’s STEM success.
+          </p>
+        </div>
+
+        <figure>
+          <img
+            className="pictureOnline"
+            src={Images.mathChampImg}
+            alt="A student standing and holding a trophy alongside their mentor."
+          />
+          <figcaption className="text-caption-online txt-p">
+            A student with their mentor after winning an award.
+          </figcaption>
+        </figure>
+
+        <div className="text-normal-online txt-p">
+          <p>
+            The greater access we have to schools and school districts we will
+            have greater access to middle-class families and above. We offer our
+            platform for free to our community partners like schools but we
+            charge the families that can afford our service. We charge just $25 a
+            week per lesson and that has kept us profitable over the last 2
+            years. The greater our reach the greater our donations and the more
+            students we can help through our free program.
+          </p>
+        </div>
+
+        <div className="text-normal-online txt-p">
+          <p>
+            Students love having control of their learning because they feel
+            empowered. Most of the students we focus on come from challenging
+            backgrounds and will benefit greatly from the positive attention. As
+            will their families and communities.
+          </p>
+        </div>
+      </section>
+    </main>
+  );
+};
+
+export default OnlineExpansion;