Skip to content

Update About Us, Financial, and Mission content #137

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
uhern20 wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Update About Us, Financial, and Mission content #137

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
78 changes: 44 additions & 34 deletions react-ystemandchess/src/features/about-us/aboutus/AboutUs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import React from 'react';
import './AboutUs.scss';
import aboutUsImage from "../../../assets/images/aboutUs/about-us.png"; // Replace with actual image path
import dividerIcon from "../../../assets/images/aboutUs/divide_icon.png"; // Replace with actual icon path
import statusIcon1 from "../../../assets/images/aboutUs/02.png"; // Replace with actual icon path
Expand All @@ -9,70 +8,81 @@ import studentsImage from "../../../assets/images/aboutUs/student.png"; // Repla

const AboutUs = () => {
return (
<div className="about-us">
<div className="p-5 font-sans text-dark md:p-10 lg:p-12">
{/* Intro Section */}
<div className="intro">
<h1>About Us</h1>
<p>
<div className="text-center mb-10">
<h1 className="text-3xl md:text-4xl font-bold text-dark mb-4">About Us</h1>
<p className="text-base md:text-lg lg:text-xl text-muted max-w-xl mx-auto leading-relaxed">
Welcome to our platform! We are committed to delivering top-notch educational resources
and connecting learners with the best opportunities. Our mission is to foster growth,
creativity, and success in students from all backgrounds.
</p>
<img src={aboutUsImage} alt="About Us" className="about-us-image" />
<img src={aboutUsImage} alt="About Us" className="w-full max-w-md lg:max-w-lg mx-auto block rounded-lg shadow-md my-6" />
</div>

{/* Offer Section */}
<div className="offer">
<img src={dividerIcon} alt="Divider Icon" className="divider-icon" />
<h2>What We Offer</h2>
<p>
<div className="text-center my-10">
<img src={dividerIcon} alt="Divider Icon" className="w-10 mb-2 mx-auto" />
<h2 className="text-2xl md:text-3xl font-bold text-dark mb-4">What We Offer</h2>
<p className="text-base md:text-lg lg:text-xl text-muted max-w-xl mx-auto">
We provide a variety of resources, including online courses, interactive workshops, and
personalized mentoring to help students excel in their educational and career journeys.
</p>
</div>

{/* Status Section */}
<div className="status">
<div className="status-item">
<img src={statusIcon1} alt="Status Icon 1" />
<h3>200+</h3>
<p>Courses Offered</p>
<div className="flex flex-col md:flex-row justify-center gap-5 mb-10">
<div className="text-center p-4">
<img src={statusIcon1} alt="Status Icon 1" className="w-20 mb-2 mx-auto" />
<h3 className="text-3xl md:text-4xl font-bold text-dark">200+</h3>
<p className="text-base md:text-lg text-muted">Courses Offered</p>
</div>
<div className="status-item">
<img src={statusIcon2} alt="Status Icon 2" />
<h3>10,000+</h3>
<p>Students Enrolled</p>
<div className="text-center p-4">
<img src={statusIcon2} alt="Status Icon 2" className="w-20 mb-2 mx-auto" />
<h3 className="text-3xl md:text-4xl font-bold text-dark">10,000+</h3>
<p className="text-base md:text-lg text-muted">Students Enrolled</p>
</div>
<div className="status-item">
<img src={statusIcon3} alt="Status Icon 3" />
<h3>98%</h3>
<p>Satisfaction Rate</p>
<div className="text-center p-4">
<img src={statusIcon3} alt="Status Icon 3" className="w-20 mb-2 mx-auto" />
<h3 className="text-3xl md:text-4xl font-bold text-dark">98%</h3>
<p className="text-base md:text-lg text-muted">Satisfaction Rate</p>
</div>
</div>

{/* Current Status Section */}
<div className="current-status">
<h2>Our Current Status</h2>
<ul>
<li>Over 50 new courses in development.</li>
<li>Partnering with industry leaders to create specialized programs.</li>
<li>Expanding to more regions worldwide.</li>
<li>Launching mobile applications for easier access.</li>
<div className="bg-soft p-5 rounded-lg mb-10 text-center">
<h2 className="text-xl md:text-2xl font-bold text-dark mb-4">Our Current Status</h2>
<ul className="list-none p-0 max-w-2xl mx-auto">
<li className="flex items-center gap-2 mb-2 text-base md:text-lg text-muted">
<img src={dividerIcon} alt="Bullet Icon" className="w-4 h-4" />
Over 50 new courses in development.
</li>
<li className="flex items-center gap-2 mb-2 text-base md:text-lg text-muted">
<img src={dividerIcon} alt="Bullet Icon" className="w-4 h-4" />
Partnering with industry leaders to create specialized programs.
</li>
<li className="flex items-center gap-2 mb-2 text-base md:text-lg text-muted">
<img src={dividerIcon} alt="Bullet Icon" className="w-4 h-4" />
Expanding to more regions worldwide.
</li>
<li className="flex items-center gap-2 mb-2 text-base md:text-lg text-muted">
<img src={dividerIcon} alt="Bullet Icon" className="w-4 h-4" />
Launching mobile applications for easier access.
</li>
</ul>
</div>

{/* Description Section */}
<div className="description">
<p>
<div className="bg-gray-50 p-8 rounded-lg text-center mt-5">
<p className="text-sm md:text-base lg:text-lg text-muted max-w-3xl mx-auto mb-5 leading-relaxed">
Our team of dedicated educators, developers, and industry professionals works tirelessly
to bring students the most relevant and impactful educational content. We believe in
empowering students to reach their full potential by providing them with the tools and
knowledge they need to succeed in an ever-changing world.
</p>
<img src={studentsImage} alt="Students Engaged in Learning" className="students-image" />
<img src={studentsImage} alt="Students Engaged in Learning" className="w-full max-w-xs md:max-w-sm mx-auto block rounded-lg shadow-md my-6" />
</div>
</div>
);
};

export default AboutUs;
18 changes: 18 additions & 0 deletions react-ystemandchess/src/features/about-us/financial/Financial.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
import React from 'react';
import { render, screen } from '@testing-library/react';
import { MemoryRouter } from 'react-router';
import Financial from './Financial';

describe('Financial', () => {
it('renders the financials heading', () => {
render(
<MemoryRouter>
<Financial />
</MemoryRouter>
);

expect(screen.getByRole('heading', { name: /Financials/i, level: 1 })).toBeInTheDocument();
expect(screen.getByRole('heading', { name: /2018 Financials/i, level: 3 })).toBeInTheDocument();
expect(screen.getByRole('heading', { name: /Form 990/i, level: 3 })).toBeInTheDocument();
});
});
47 changes: 23 additions & 24 deletions react-ystemandchess/src/features/about-us/financial/Financial.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,38 +1,37 @@
import React from "react";
import "./Financial.scss";
import LogoLineBr from "../../../assets/images/LogoLineBreak.png";

const Financial = () => {
return (
<main role="main" className="financial-content">
<h1>Financials</h1>
<div className="line-break">
<img src={LogoLineBr} alt="" role="presentation"/>
<main role="main" className="font-sans text-gray-800 p-5 md:p-10 lg:p-12">
<h1 className="text-3xl md:text-4xl font-bold text-black text-center mb-10 md:text-left md:ml-[10%]">Financials</h1>
<div className="flex justify-center my-5">
<img src={LogoLineBr} alt="" role="presentation" className="w-4/5 mx-auto"/>
</div>
<div className="financial-grid">
<section className="financial-item" aria-label="2018 Financials" tabIndex={0}>
<h3>2018 Financials</h3>
<button className="view-button" aria-label="View 2018 Finnancials">View Here</button>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-y-12 md:gap-y-10 md:gap-x-20 max-w-6xl mx-auto justify-items-center">
<section className="financial-item bg-gray-50 border-2 border-green-500 rounded-lg p-8 w-full max-w-xs text-center shadow-[8px_8px_0px_0px_#83ce31] transition-transform duration-200 hover:scale-105" aria-label="2018 Financials" tabIndex={0}>
<h3 className="text-xl md:text-2xl mb-4">2018 Financials</h3>
<button className="view-button bg-yellow-400 border-none rounded-md py-2 px-4 text-base cursor-pointer font-bold transition-colors duration-300 active:bg-yellow-500 hover:bg-yellow-300" aria-label="View 2018 Finnancials">View Here</button>
</section>
<section className="financial-item" aria-label="Form 990" tabIndex={0}>
<h3>Form 990</h3>
<button className="view-button" aria-label="View Form 990">View Here</button>
<section className="financial-item bg-gray-50 border-2 border-green-500 rounded-lg p-8 w-full max-w-xs text-center shadow-[8px_8px_0px_0px_#83ce31] transition-transform duration-200 hover:scale-105" aria-label="Form 990" tabIndex={0}>
<h3 className="text-xl md:text-2xl mb-4">Form 990</h3>
<button className="view-button bg-yellow-400 border-none rounded-md py-2 px-4 text-base cursor-pointer font-bold transition-colors duration-300 active:bg-yellow-500 hover:bg-yellow-300" aria-label="View Form 990">View Here</button>
</section>
<section className="financial-item" aria-label="2019 Financials" tabIndex={0}>
<h3>2019 Financials</h3>
<button className="view-button" aria-label="View 2019 Finnancials">View Here</button>
<section className="financial-item bg-gray-50 border-2 border-green-500 rounded-lg p-8 w-full max-w-xs text-center shadow-[8px_8px_0px_0px_#83ce31] transition-transform duration-200 hover:scale-105" aria-label="2019 Financials" tabIndex={0}>
<h3 className="text-xl md:text-2xl mb-4">2019 Financials</h3>
<button className="view-button bg-yellow-400 border-none rounded-md py-2 px-4 text-base cursor-pointer font-bold transition-colors duration-300 active:bg-yellow-500 hover:bg-yellow-300" aria-label="View 2019 Finnancials">View Here</button>
</section>
<section className="financial-item" aria-label="2020 Financials" tabIndex={0}>
<h3>2020 Financials</h3>
<button className="view-button" aria-label="View 2020 Finnancials">View Here</button>
<section className="financial-item bg-gray-50 border-2 border-green-500 rounded-lg p-8 w-full max-w-xs text-center shadow-[8px_8px_0px_0px_#83ce31] transition-transform duration-200 hover:scale-105" aria-label="2020 Financials" tabIndex={0}>
<h3 className="text-xl md:text-2xl mb-4">2020 Financials</h3>
<button className="view-button bg-yellow-400 border-none rounded-md py-2 px-4 text-base cursor-pointer font-bold transition-colors duration-300 active:bg-yellow-500 hover:bg-yellow-300" aria-label="View 2020 Finnancials">View Here</button>
</section>
<section className="financial-item" aria-label="2021 Financials" tabIndex={0}>
<h3>2021 Financials</h3>
<button className="view-button" aria-label="View 2021 Finnancials">View Here</button>
<section className="financial-item bg-gray-50 border-2 border-green-500 rounded-lg p-8 w-full max-w-xs text-center shadow-[8px_8px_0px_0px_#83ce31] transition-transform duration-200 hover:scale-105" aria-label="2021 Financials" tabIndex={0}>
<h3 className="text-xl md:text-2xl mb-4">2021 Financials</h3>
<button className="view-button bg-yellow-400 border-none rounded-md py-2 px-4 text-base cursor-pointer font-bold transition-colors duration-300 active:bg-yellow-500 hover:bg-yellow-300" aria-label="View 2021 Finnancials">View Here</button>
</section>
<section className="financial-item" aria-label="2022 Financials" tabIndex={0}>
<h3>2022 Financials</h3>
<button className="view-button" aria-label="View 2022 Finnancials">View Here</button>
<section className="financial-item bg-gray-50 border-2 border-green-500 rounded-lg p-8 w-full max-w-xs text-center shadow-[8px_8px_0px_0px_#83ce31] transition-transform duration-200 hover:scale-105" aria-label="2022 Financials" tabIndex={0}>
<h3 className="text-xl md:text-2xl mb-4">2022 Financials</h3>
<button className="view-button bg-yellow-400 border-none rounded-md py-2 px-4 text-base cursor-pointer font-bold transition-colors duration-300 active:bg-yellow-500 hover:bg-yellow-300" aria-label="View 2022 Finnancials">View Here</button>
</section>
</div>
</main>
Expand Down
19 changes: 19 additions & 0 deletions react-ystemandchess/src/features/about-us/mission/Mission.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
import React from 'react';
import { render, screen } from '@testing-library/react';
import { MemoryRouter } from 'react-router';
import Mission from './Mission';

describe('Mission', () => {
it('renders the mission statement headings', () => {
render(
<MemoryRouter>
<Mission />
</MemoryRouter>
);

expect(screen.getByText(/Our Mission/i)).toBeInTheDocument();
expect(screen.getByText(/What We Do/i)).toBeInTheDocument();
expect(screen.getByRole('heading', { name: /Free/i, level: 1 })).toBeInTheDocument();
expect(screen.getByRole('heading', { name: /Premium/i, level: 1 })).toBeInTheDocument();
});
});
69 changes: 34 additions & 35 deletions react-ystemandchess/src/features/about-us/mission/Mission.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,51 +1,50 @@
import React from "react";
import "./Mission.scss";
import ImageOne from "../../../assets/images/mission-image.png";
import LogoLineBreak from "../../../assets/images/LogoLineBreak.png";
import FounderStory from "../../../assets/images/founder-story.png";
import Images from "../../../assets/images/imageImporter";

const Mission = () => {
return (
<main role="main" className="main-content">
<section role="region" aria-label="Mission statement header section" className="mission-header" tabIndex={0}>
<div className="mission-statement-container">
<div className="our-mission">
<h1>Our Mission</h1>
<p>
Empower underserved and at-risk children with an opportunity to
pursue STEM careers and change their life trajectory.
</p>
</div>
<div className="what-we-do">
<h1>What We Do</h1>
<p>
We teach children chess, math, and computer science to empower them
to pursue STEM majors/professions with the support of professionals.
</p>
</div>
<main role="main" className="w-full h-auto mt-5 p-5 font-sans text-dark md:p-10 lg:p-12">
<section role="region" aria-label="Mission statement header section" className="w-[85%] mx-auto mb-10 flex flex-col md:flex-row items-center gap-10" tabIndex={0}>
<div className="flex flex-col gap-5 w-full">
<div className="our-mission">
<h1 className="pt-5 text-3xl md:text-4xl font-bold text-dark text-left mb-2.5">Our Mission</h1>
<p className="text-base md:text-lg lg:text-xl text-left leading-relaxed text-muted max-w-xl">
Empower underserved and at-risk children with an opportunity to
pursue STEM careers and change their life trajectory.
</p>
</div>
<div className="what-we-do">
<h1 className="text-3xl md:text-4xl font-bold text-dark text-left mb-2.5">What We Do</h1>
<p className="text-base md:text-lg lg:text-xl text-left leading-relaxed text-muted max-w-xl">
We teach children chess, math, and computer science to empower them
to pursue STEM majors/professions with the support of professionals.
</p>
</div>
</div>
<figure>
<img className="picture" src={ImageOne} alt="" role="presentation" />
<figure className="my-auto w-full md:w-auto">
<img className="w-full max-w-md lg:max-w-lg mx-auto block rounded-lg shadow-md" src={ImageOne} alt="" role="presentation" />
</figure>
</section>
<figure className="logo-break">
<img src={LogoLineBreak} alt="" role="presentaion"/>
<figure className="mx-auto block my-10">
<img src={LogoLineBreak} alt="" role="presentaion" className="w-full max-w-2xl mx-auto block"/>
</figure>

<figure className="founder-story">
<img src={FounderStory} alt="Story of the founding of YSTEM" />
<figure className="mx-auto block my-10">
<img src={FounderStory} alt="Story of the founding of YSTEM" className="w-full max-w-2xl mx-auto block rounded-lg shadow-md" />
</figure>

<figure className="logo-break">
<img src={LogoLineBreak} alt="" role="presentaion"/>
<figure className="mx-auto block my-10">
<img src={LogoLineBreak} alt="" role="presentaion" className="w-full max-w-2xl mx-auto block"/>
</figure>

<div className="home-content2" role="region">
<div className="card1">
<img src={Images.Heart} alt="Heart icon"></img>
<h1 id="h1-home">Free</h1>
<p>
<div className="flex flex-col md:flex-row justify-center gap-10 my-10" role="region">
<div className="flex flex-col items-center p-5 bg-white rounded-lg shadow-md">
<img src={Images.Heart} alt="Heart icon" className="w-20 h-20 mb-4"></img>
<h1 id="h1-home" className="text-3xl md:text-4xl font-bold text-dark mb-2">Free</h1>
<p className="text-base md:text-lg text-muted text-center leading-relaxed mb-4">
For students who qualify for <br /> free and reduced lunch.
<br />
Our lessons are free.
Expand All @@ -56,10 +55,10 @@ const Mission = () => {
</span>
</button>
</div>
<div className="card2">
<img src={Images.Gem} alt="Gem icon"></img>
<h1 id="h1-home">Premium</h1>
<p>
<div className="flex flex-col items-center p-5 bg-white rounded-lg shadow-md">
<img src={Images.Gem} alt="Gem icon" className="w-20 h-20 mb-4"></img>
<h1 id="h1-home" className="text-3xl md:text-4xl font-bold text-dark mb-2">Premium</h1>
<p className="text-base md:text-lg text-muted text-center leading-relaxed mb-4">
For students who don't qualify <br /> for free and reduced lunch.{" "}
<br />
$25 / Week <br /> First lesson is FREE. <br /> Cancel anytime.
Expand Down
Loading