Skip to content

Commit 6c52c45

Browse files
jonulakjonulak
committed
Squashed commit of the following:
commit ab9ba27 Author: Jerome Hardaway <[email protected]> Date: Sat Jul 12 01:39:36 2025 -0400 Feat/redesign programs page (#793) * Feat: Redesign programs page with new Hero, ProgramCard, and CTA components * feat: update Programs page layout with new HeroArea and ProgramCard integration --------- Co-authored-by: google-labs-jules[bot] <161369871+google-labs-jules[bot]@users.noreply.github.com> commit 39d578b Author: Jerome Hardaway <[email protected]> Date: Sat Jul 12 00:32:49 2025 -0400 Program pages (#792) * Add core programs for veterans: Core Curriculum, Mentorship, Mission-Ready, and Studio - Created new MDX files for Core Curriculum, Mentorship Program, Mission-Ready Platform, and Studio. - Implemented program overview, outcomes, and how it works sections in each program's MDX file. - Developed a programs index page to display all programs with descriptions and links. - Added dynamic routing for individual program pages using Next.js. * chore: add @types/mdx dependency and update yarn.lock - Added @types/mdx version 2.0.13 to package.json. - Cleaned up yarn.lock by removing unused @emotion dependencies and ensuring proper versioning for existing packages. * Update src/pages/programs/[slug].tsx Co-authored-by: Copilot <[email protected]> --------- Co-authored-by: Copilot <[email protected]>
1 parent 4aa12df commit 6c52c45

File tree

18 files changed

+3977
-495
lines changed

18 files changed

+3977
-495
lines changed

‎package-lock.json‎

Lines changed: 2427 additions & 486 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,7 @@
5252
"motion": "^11.13.3",
5353
"next": "^15.0.3",
5454
"next-auth": "^4.24.11",
55+
"next-mdx-remote": "^5.0.0",
5556
"next-pwa": "^5.6.0",
5657
"next-react-svg": "^1.1.3",
5758
"next-seo": "^5.5.0",
@@ -79,6 +80,7 @@
7980
"@types/jest": "^29.5.14",
8081
"@types/jsonwebtoken": "^8.5.8",
8182
"@types/marked": "^4.0.3",
83+
"@types/mdx": "^2.0.13",
8284
"@types/next-auth": "^3.15.0",
8385
"@types/node": "^18.0.0",
8486
"@types/react": "^18.3.12",

‎src/assets/css/font-awesome-pro.min.css‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -131,21 +131,25 @@
131131
}
132132
.fa-rotate-90 {
133133
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";
134+
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
134135
-webkit-transform: rotate(90deg);
135136
transform: rotate(90deg);
136137
}
137138
.fa-rotate-180 {
138139
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2)";
140+
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
139141
-webkit-transform: rotate(180deg);
140142
transform: rotate(180deg);
141143
}
142144
.fa-rotate-270 {
143145
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";
146+
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
144147
-webkit-transform: rotate(270deg);
145148
transform: rotate(270deg);
146149
}
147150
.fa-flip-horizontal {
148151
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)";
152+
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1);
149153
-webkit-transform: scaleX(-1);
150154
transform: scaleX(-1);
151155
}
@@ -157,6 +161,7 @@
157161
.fa-flip-horizontal.fa-flip-vertical,
158162
.fa-flip-vertical {
159163
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)";
164+
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1);
160165
}
161166
.fa-flip-both,
162167
.fa-flip-horizontal.fa-flip-vertical {

‎src/components/cta/index.tsx‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import Link from "next/link";
2+
3+
const CTA = () => {
4+
return (
5+
<div className="tw-bg-[#c5203e] tw-text-white tw-p-12 tw-rounded-2xl tw-shadow-lg tw-text-center">
6+
<h2 className="tw-text-3xl tw-font-bold">Ready to Start Your Mission?</h2>
7+
<p className="tw-mt-2 tw-text-lg">
8+
Apply to our program and join the ranks of veterans who have successfully transitioned into
9+
the tech industry.
10+
</p>
11+
<Link
12+
href="/apply"
13+
className="tw-mt-6 tw-bg-white tw-text-[#c5203e] tw-font-bold tw-rounded-lg tw-px-6 tw-py-3 tw-inline-block tw-hover:tw-bg-gray-100"
14+
>
15+
Apply Now
16+
</Link>
17+
</div>
18+
);
19+
};
20+
21+
export default CTA;

‎src/components/hero/index.tsx‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
const Hero = () => {
2+
return (
3+
<div className="tw-bg-[#091f40] tw-text-white tw-py-20">
4+
<div className="tw-container">
5+
<h1 className="tw-text-4xl tw-font-bold">Our Program</h1>
6+
<p className="tw-mt-2 tw-text-lg">
7+
Vets Who Code provides a comprehensive, veteran-focused curriculum to prepare you for a
8+
career in tech.
9+
</p>
10+
</div>
11+
</div>
12+
);
13+
};
14+
15+
export default Hero;

‎src/components/program-card/index.tsx‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import Link from "next/link";
2+
3+
type Program = {
4+
slug: string;
5+
title: string;
6+
description: string;
7+
};
8+
9+
type Props = {
10+
program: Program;
11+
};
12+
13+
const ProgramCard = ({ program }: Props) => {
14+
return (
15+
<div className="tw-bg-white tw-rounded-xl tw-shadow-sm tw-p-6 tw-border tw-border-gray-200 tw-hover:tw-shadow-md tw-transition">
16+
<h2 className="tw-mb-2 tw-text-2xl tw-font-semibold">{program.title}</h2>
17+
<p className="tw-mb-4 tw-text-gray-700">{program.description}</p>
18+
<Link
19+
href={`/programs/${program.slug}`}
20+
className="tw-focus:tw-outline-none tw-focus:tw-ring-2 tw-focus:tw-ring-blue-400 tw-mt-auto tw-inline-block tw-font-medium tw-text-blue-700 tw-underline"
21+
aria-label={`Learn more about ${program.title}`}
22+
>
23+
Learn more
24+
</Link>
25+
</div>
26+
);
27+
};
28+
29+
export default ProgramCard;

‎src/data/programs/core-curriculum.mdx‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
---
2+
title: "Core Curriculum"
3+
description: "A comprehensive, veteran-focused curriculum for web development and leadership."
4+
slug: "core-curriculum"
5+
---
6+
7+
# Core Curriculum
8+
9+
<section className="tw-mb-8">
10+
<h2 className="tw-text-3xl tw-font-bold tw-mb-2">Overview</h2>
11+
<p className="tw-text-lg tw-text-gray-700">Our Core Curriculum is designed to equip veterans with the technical and leadership skills needed for today’s tech industry. Learn web development, teamwork, and problem-solving in a supportive, mission-driven environment.</p>
12+
</section>
13+
14+
<section className="tw-mb-8">
15+
<h2 className="tw-text-2xl tw-font-semibold tw-mb-2">Outcomes</h2>
16+
<ul className="tw-list-disc tw-ml-6 tw-text-gray-700">
17+
<li>Mastery of modern web technologies</li>
18+
<li>Team-based project experience</li>
19+
<li>Leadership and communication skills</li>
20+
<li>Preparation for tech careers</li>
21+
</ul>
22+
</section>
23+
24+
<section className="tw-mb-8">
25+
<h2 className="tw-text-2xl tw-font-semibold tw-mb-2">How It Works</h2>
26+
<ol className="tw-list-decimal tw-ml-6 tw-text-gray-700">
27+
<li>Enroll and join a cohort</li>
28+
<li>Participate in live sessions and projects</li>
29+
<li>Receive mentorship and feedback</li>
30+
<li>Graduate ready for the workforce</li>
31+
</ol>
32+
</section>
33+
34+
<section className="tw-mb-8 tw-text-center">
35+
<a href="/apply" className="tw-inline-block tw-bg-blue-700 tw-text-white tw-font-bold tw-px-6 tw-py-3 tw-rounded-lg tw-shadow-md tw-hover:tw-bg-blue-800 tw-focus:tw-outline-none tw-focus:tw-ring-2 tw-focus:tw-ring-blue-400">Apply Now</a>
36+
</section>

‎src/data/programs/mentorship.mdx‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
---
2+
title: "Mentorship Program"
3+
description: "Connects veterans with experienced mentors in tech for guidance and support."
4+
slug: "mentorship"
5+
---
6+
7+
# Mentorship Program
8+
9+
<section className="tw-mb-8">
10+
<h2 className="tw-text-3xl tw-font-bold tw-mb-2">Overview</h2>
11+
<p className="tw-text-lg tw-text-gray-700">Our Mentorship Program pairs veterans with seasoned tech professionals who provide guidance, encouragement, and networking opportunities. We believe in the power of community and shared experience to accelerate your growth.</p>
12+
</section>
13+
14+
<section className="tw-mb-8">
15+
<h2 className="tw-text-2xl tw-font-semibold tw-mb-2">Outcomes</h2>
16+
<ul className="tw-list-disc tw-ml-6 tw-text-gray-700">
17+
<li>Personalized career guidance</li>
18+
<li>Expanded professional network</li>
19+
<li>Accountability and support</li>
20+
<li>Confidence to pursue new opportunities</li>
21+
</ul>
22+
</section>
23+
24+
<section className="tw-mb-8">
25+
<h2 className="tw-text-2xl tw-font-semibold tw-mb-2">How It Works</h2>
26+
<ol className="tw-list-decimal tw-ml-6 tw-text-gray-700">
27+
<li>Apply to be matched with a mentor</li>
28+
<li>Set goals and meet regularly</li>
29+
<li>Receive feedback and encouragement</li>
30+
<li>Grow your skills and confidence</li>
31+
</ol>
32+
</section>
33+
34+
<section className="tw-mb-8 tw-text-center">
35+
<a href="/apply" className="tw-inline-block tw-bg-blue-700 tw-text-white tw-font-bold tw-px-6 tw-py-3 tw-rounded-lg tw-shadow-md tw-hover:tw-bg-blue-800 tw-focus:tw-outline-none tw-focus:tw-ring-2 tw-focus:tw-ring-blue-400">Apply Now</a>
36+
</section>

‎src/data/programs/mission-ready.mdx‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
---
2+
title: "Mission-Ready Platform"
3+
description: "A hands-on, real-world project platform for veterans to build, ship, and showcase software."
4+
slug: "mission-ready"
5+
---
6+
7+
# Mission-Ready Platform
8+
9+
<section className="tw-mb-8">
10+
<h2 className="tw-text-3xl tw-font-bold tw-mb-2">Overview</h2>
11+
<p className="tw-text-lg tw-text-gray-700">The Mission-Ready Platform empowers veterans to gain real-world experience by building production-grade software for nonprofits and the community. This program bridges the gap between learning and doing, ensuring you’re ready to lead in tech.</p>
12+
</section>
13+
14+
<section className="tw-mb-8">
15+
<h2 className="tw-text-2xl tw-font-semibold tw-mb-2">Outcomes</h2>
16+
<ul className="tw-list-disc tw-ml-6 tw-text-gray-700">
17+
<li>Hands-on experience with real projects</li>
18+
<li>Portfolio-ready work for job applications</li>
19+
<li>Collaboration with mission-driven teams</li>
20+
<li>Leadership and project management skills</li>
21+
</ul>
22+
</section>
23+
24+
<section className="tw-mb-8">
25+
<h2 className="tw-text-2xl tw-font-semibold tw-mb-2">How It Works</h2>
26+
<ol className="tw-list-decimal tw-ml-6 tw-text-gray-700">
27+
<li>Apply and join a project team</li>
28+
<li>Work with mentors and peers</li>
29+
<li>Ship real software to production</li>
30+
<li>Showcase your impact to employers</li>
31+
</ol>
32+
</section>
33+
34+
<section className="tw-mb-8 tw-text-center">
35+
<a href="/apply" className="tw-inline-block tw-bg-blue-700 tw-text-white tw-font-bold tw-px-6 tw-py-3 tw-rounded-lg tw-shadow-md tw-hover:tw-bg-blue-800 tw-focus:tw-outline-none tw-focus:tw-ring-2 tw-focus:tw-ring-blue-400">Apply Now</a>
36+
</section>

‎src/data/programs/studio.mdx‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
---
2+
title: "Studio"
3+
description: "A creative space for veterans to collaborate, innovate, and launch tech-driven solutions."
4+
slug: "studio"
5+
---
6+
7+
# Studio
8+
9+
<section className="tw-mb-8">
10+
<h2 className="tw-text-3xl tw-font-bold tw-mb-2">Overview</h2>
11+
<p className="tw-text-lg tw-text-gray-700">Studio is where veterans come together to innovate, collaborate, and launch impactful tech solutions. This program fosters creativity, leadership, and a sense of community among veteran technologists.</p>
12+
</section>
13+
14+
<section className="tw-mb-8">
15+
<h2 className="tw-text-2xl tw-font-semibold tw-mb-2">Outcomes</h2>
16+
<ul className="tw-list-disc tw-ml-6 tw-text-gray-700">
17+
<li>Opportunities to lead and create</li>
18+
<li>Collaboration with like-minded veterans</li>
19+
<li>Launch real-world tech projects</li>
20+
<li>Build a legacy of impact</li>
21+
</ul>
22+
</section>
23+
24+
<section className="tw-mb-8">
25+
<h2 className="tw-text-2xl tw-font-semibold tw-mb-2">How It Works</h2>
26+
<ol className="tw-list-decimal tw-ml-6 tw-text-gray-700">
27+
<li>Join the Studio community</li>
28+
<li>Pitch and join projects</li>
29+
<li>Collaborate and innovate</li>
30+
<li>Showcase your work to the world</li>
31+
</ol>
32+
</section>
33+
34+
<section className="tw-mb-8 tw-text-center">
35+
<a href="/apply" className="tw-inline-block tw-bg-blue-700 tw-text-white tw-font-bold tw-px-6 tw-py-3 tw-rounded-lg tw-shadow-md tw-hover:tw-bg-blue-800 tw-focus:tw-outline-none tw-focus:tw-ring-2 tw-focus:tw-ring-blue-400">Apply Now</a>
36+
</section>

0 commit comments

Comments
 (0)