Added 30 minute skills page

[bryanbab]

Most changes made in existing components were made to match the Figma page

EducationInitiativeWrapper.tsx

• changed link for 30-minute skills page to reflect page hierarchy

PastRecordingDisplay.tsx

• changed view more icon to use FontAwesome library
• changed width of cal to screen size for dynamic sizing
• changed default grid layout from grid-cols-2 to grid-cols-1 for better mobile responsiveness
• kept sm:grid-cols-2 to maintain two columns on small and larger screens
• increased max container width from max-w-xl to max-w-[900px] for improved horizontal centering
• added flex justify-center to horizontally center the pagination buttons within the container

Sidebar.tsx

• changed bar width and height to match Figma

SidebarWrapper,.tsx

• increased horizontal and vertical padding
• changed text size to match Figma

thirty-minute-skills.tsx

• combined components from previous tickets to make up 30 minute skills page

globals.css

• added .override-flex-col utility to force specific flex-row layouts to stack vertically

[builderpepc]

Hey Bryan, looks great overall, but I think one of the changes relating to the sidebar have caused a visual bug:

main	81-implement-30-minute-skills-page

I used the FOI guide page to demonstrate this since it exists on both branches, but this also affects the 30 Minute Skills page and others that use the sidebar template. The title is getting padded too much from the left, so it is no longer aligned with the rest of the page. I think the px-10 added here is what's causing that. Could you please take a look? Also, until the navbar and footer are updated to be mobile responsive, you can temporarily comment out those components in pages/_app.tsx before testing on mobile so they don't interfere with the responsiveness of the rest of the site (but don't commit that change).

nefac/nefac-website/src/components/sidebar/SidebarWrapper.tsx

Line 22 in 02acb4d

<div className="text-nefacblue text-[36px] font-bold px-10 pt-10 pb-3 ">