Added 30 minute skills page

nefac-website/package.json

@@ -21,8 +21,8 @@
     "@fortawesome/free-brands-svg-icons": "^5.15.4",
     "@fortawesome/free-solid-svg-icons": "^5.15.4",
     "@fortawesome/react-fontawesome": "^0.1.19",
-    "@radix-ui/react-label": "^2.1.7",
     "@radix-ui/react-accordion": "^1.2.11",
+    "@radix-ui/react-label": "^2.1.7",
     "@radix-ui/react-slot": "^1.2.3",
     "@types/wordpress__block-editor": "^11.5.16",
     "@types/wordpress__blocks": "^12.5.17",
@@ -34,12 +34,12 @@
     "clsx": "^2.1.1",
     "embla-carousel-react": "^8.6.0",
     "graphql": "^16.11.0",
+    "lodash": "^4.17.21",
     "lucide": "^0.522.0",
+    "lucide-react": "^0.475.0",
     "next": "^15.3.3",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
-    "lodash": "^4.17.21",
-    "lucide-react": "^0.475.0",
     "react-icons": "^5.5.0",
     "react-player": "^2.16.0",
     "react-router-dom": "^7.2.0",

nefac-website/src/components/education/EducationInitiativeWrapper.tsx

@@ -9,8 +9,8 @@ export default function EducationInitiativeWrapper({ children }: EducationInitia
     <SidebarWrapper
       title="Education Initiatives"
       items={[
-        { title: "30 Minute Skills", link: "/education-initiative" },
-        { title: "First Amendment and the Free Press", link: "/education-initiative-abc" },
+        { title: "30 Minute Skills", link: "/education/thirty-minute-skills" },
+        { title: "First Amendment & Free Press", link: "/education-initiative-abc" },
         { title: "FOI Guide", link: "/education/foi-guide" },
         { title: "NEFAC Mentors", link: "/education/nefac-mentors" },
         { title: "Negri Institute", link: "/education-initiative-jkl" },

nefac-website/src/components/education/past-recordings/PastRecordingCard.tsx

@@ -4,7 +4,7 @@ import { faYoutube } from "@fortawesome/free-brands-svg-icons";
 
 interface PastRecordingCardProps {
   recording: PastRecording;
-  variant?: "vertical" | "grid"; 
+  variant?: "vertical" | "grid";
 }
 
 const PastRecordingCard: React.FC<PastRecordingCardProps> = ({
@@ -14,83 +14,58 @@ const PastRecordingCard: React.FC<PastRecordingCardProps> = ({
   const isGrid = variant === "grid";
 
   return (
-<<<<<<< HEAD:nefac-website/src/components/education-page/past-recordings/PastRecordingCard.tsx
-    <div className="flex flex-col md:flex-row 
-                    items-start md:items-center 
-                    bg-[#2F5C9F] text-white 
-                    rounded-xl max-w-4xl shadow-xl p-4">
-        <div className="relative w-full sm:w-1/3 mb-4 sm:mb-0">
+    <div
+          className={
+            isGrid
+              ? "rounded-xl overflow-hidden shadow-md bg-white flex flex-col max-w-[350px]"
+              : "flex flex-col md:flex-row items-start md:items-center bg-[#2F5C9F] text-white rounded-xl max-w-4xl shadow-xl p-4"
+          }
+        >
+          <div className={`relative ${isGrid ? "" : "w-full sm:w-1/3 mb-4 sm:mb-0"}`}>
             <a href={recording.recordingUrl} target="_blank" rel="noopener noreferrer">
-                <img 
-                    src={recording.thumbnailUrl} 
-                    alt={recording.title} 
-                    className="rounded-lg w-full aspect-video object-cover border-[3px] border-[#D8DADD]" 
+              <img
+                src={recording.thumbnailUrl}
+                alt={recording.title}
+                className={`rounded-lg w-full aspect-video object-cover ${isGrid ? "" : "border-[3px] border-[#D8DADD]"
+                  }`}
+              />
+              <div className="absolute inset-0 flex items-center justify-center">
+                <FontAwesomeIcon
+                  icon={faYoutube}
+                  className="text-[50px]"
+                  style={{ color: "red" }}
                 />
-                <div className="absolute inset-0 flex items-center justify-center">
-                  <div className="bg-white opacity-80 rounded-md w-[50px] h-[20px] flex items-center justify-center">
-                    <FontAwesomeIcon
-                        icon={faYoutube} 
-                        className="text-[50px]"
-                        style={{ color: "red" }}
-                    />
-                  </div>
-                </div>
+              </div>
             </a>
-=======
-    <div
-      className={
-        isGrid
-          ? "rounded-xl overflow-hidden shadow-md bg-white flex flex-col"
-          : "flex flex-col md:flex-row items-start md:items-center bg-[#2F5C9F] text-white rounded-xl max-w-4xl shadow-xl p-4"
-      }
-    >
-      <div className={`relative ${isGrid ? "" : "w-full sm:w-1/3 mb-4 sm:mb-0"}`}>
-        <a href={recording.recordingUrl} target="_blank" rel="noopener noreferrer">
-          <img
-            src={recording.thumbnailUrl}
-            alt={recording.title}
-            className={`rounded-lg w-full aspect-video object-cover ${
-              isGrid ? "" : "border-[3px] border-[#D8DADD]"
-            }`}
-          />
-          <div className="absolute inset-0 flex items-center justify-center">
-            <img
-              src="/icons/youtube.png"
-              alt="YouTube Logo"
-              className="w-10 h-auto opacity-75"
-            />
           </div>
-        </a>
-      </div>
 
-      {isGrid ? (
-        <div className="bg-[#2F5C9F] text-white p-3 rounded-b-xl -mt-6 relative z-10 flex-1">
-          <h3 className="font-bold text-md">{recording.title}</h3>
-          {recording.author && (
-            <p className="text-sm italic mt-1">{recording.author}</p>
-          )}
->>>>>>> main:nefac-website/src/components/education/past-recordings/PastRecordingCard.tsx
-        </div>
-      ) : (
-        <div className="sm:ml-6 flex-1">
-          <h3 className="text-lg font-semibold mb-2">{recording.title}</h3>
-          {recording.description && (
-            <p className="text-sm mb-2">{recording.description}</p>
-          )}
-          {recording.notesUrl && (
-            <a
-              href={recording.notesUrl}
-              target="_blank"
-              rel="noopener noreferrer"
-              className="underline text-sm mt-2 inline-block hover:underline"
-            >
-              Discussion notes and links.
-            </a>
+          {isGrid ? (
+            <div className="bg-[#2F5C9F] text-white p-3 rounded-b-xl -mt-6 relative z-10 flex-1">
+              <h3 className="font-bold text-sm">{recording.title}</h3>
+              {recording.author && (
+                <p className="text-sm italic mt-1">{recording.author}</p>
+              )}
+            </div>
+          ) : (
+            <div className="sm:ml-6 flex-1">
+              <h3 className="text-lg font-semibold mb-2">{recording.title}</h3>
+              {recording.description && (
+                <p className="text-sm mb-2">{recording.description}</p>
+              )}
+              {recording.notesUrl && (
+                <a
+                  href={recording.notesUrl}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="underline text-sm mt-2 inline-block hover:underline"
+                >
+                  Discussion notes and links.
+                </a>
+              )}
+            </div>
           )}
         </div>
-      )}
-    </div>
-  );
+        );
 };
 
 export default PastRecordingCard;

nefac-website/src/components/education/past-recordings/PastRecordingDisplay.tsx

@@ -1,6 +1,8 @@
 import { PastRecording } from "./PastRecordingInterface";
 import PastRecordingCard from "./PastRecordingCard";
 import { usePaginatedRecordings } from "@/lib/usePaginatedRecordings";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faAngleDown, faAngleUp } from "@fortawesome/free-solid-svg-icons";
 
 interface PastRecordingsDisplayProps {
   recordings: PastRecording[];
@@ -11,7 +13,7 @@ const PastRecordingsDisplay: React.FC<PastRecordingsDisplayProps> = ({
   recordings,
   variant = "vertical",
 }) => {
-  
+
   const defaultInitialCount = variant === "grid" ? 4 : 5;
   const defaultIncrementCount = variant === "grid" ? 4 : 5;
 
@@ -31,63 +33,52 @@ const PastRecordingsDisplay: React.FC<PastRecordingsDisplayProps> = ({
   const isGrid = variant === "grid";
 
   return (
-    <div className="flex flex-col items-center mt-16 mb-24 mx-4">
+    <div className="flex flex-col mt-16 mb-24 w-full items-center">
       {visible.length === 0 ? (
         <p>There are no past recordings for this program right now.</p>
       ) : (
         <div
           className={
             isGrid
-              ? "grid gap-6 grid-cols-2 sm:grid-cols-2 lg:grid-cols-2 w-full max-w-xl"
+              ? "grid grid-cols-1 sm:grid-cols-2 gap-x-3 gap-y-5 max-w-[900px] w-full"
               : "grid grid-cols-1 items-center space-y-6"
           }
         >
           {visible.map((recording, index) => (
-            <PastRecordingCard
-              key={index}
-              recording={recording}
-              variant={variant}
-            />
+              <PastRecordingCard
+                recording={recording}
+                variant={variant}
+              />
           ))}
         </div>
       )}
 
       {visibleCount < totalCount && (
-        <div className={`group ${isGrid ? "mt-6" : "mb-4"}`}>
+        <div className={`group flex justify-center ${isGrid ? "mt-6" : "mb-4"}`}>
           <button
             onClick={viewMore}
-            className={`flex flex-row px-4 py-2 text-[#565353] gap-6 items-center ${
-              isGrid ? "" : "mt-4"
-            }`}
+            className={`flex flex-row px-4 py-2 text-[#565353] gap-6 items-center ${isGrid ? "" : "mt-4"
+              }`}
           >
             <p className="underline italic font-bold text-[#565353] text-xl group-hover:text-black">
               VIEW MORE
             </p>
-            <img
-              src="/icons/down.svg"
-              alt="down arrow"
-              className="w-6 h-6 group-hover:brightness-0"
-            />
+            <FontAwesomeIcon icon={faAngleDown} className="" />
           </button>
         </div>
       )}
 
       {isAllVisible && totalCount > defaultInitialCount && (
-        <div className={`group ${isGrid ? "mt-4" : "mb-4"}`}>
+        <div className={`group flex justify-center ${isGrid ? "mt-4" : "mb-4"}`}>
           <button
             onClick={viewLess}
-            className={`flex flex-row px-4 py-2 text-[#565353] gap-6 items-center ${
-              isGrid ? "" : "mt-4"
-            }`}
+            className={`flex flex-row px-4 py-2 text-[#565353] gap-6 items-center ${isGrid ? "" : "mt-4"
+              }`}
           >
             <p className="underline italic font-bold text-[#565353] text-xl group-hover:text-black">
               VIEW LESS
             </p>
-            <img
-              src="/icons/up.svg"
-              alt="up arrow"
-              className="w-6 h-6 group-hover:brightness-0"
-            />
+            <FontAwesomeIcon icon={faAngleUp} className="" />
           </button>
         </div>
       )}

nefac-website/src/components/education/upcoming-events/UpcomingEventCalendar.tsx

@@ -12,26 +12,27 @@ const UpcomingEventCalendar: React.FC<UpcomingEventCalendarProps> = ({ events })
     .sort((a, b) => a.startDate.getTime() - b.startDate.getTime())
     .slice(0, 5);
 
-  return (
-    <div className="flex flex-col mt-16 mb-24 items-center">
-      <div className="bg-gray-50 rounded-xl shadow-sm px-8 py-2 w-full max-w-2xl ">
-        {sortedEvents.length === 0 ? (
-          <div className="text-center text-gray-500">
-            There are no upcoming presentations at this time.
-          </div>
-        ) : (
-          sortedEvents.map((event, index) => (
-            <div key={index}>
-              <UpcomingEventCard event={event} />
-              {index !== sortedEvents.length - 1 && (
-                <hr className="border-gray-300" />
-              )}
+    return (
+      <div className="flex flex-col mt-4 mb-24 items-start">
+        <div className="bg-gray-50 rounded-2xl shadow-sm px-8 py-2 w-full">
+          {sortedEvents.length === 0 ? (
+            <div className="text-center text-gray-500">
+              There are no upcoming presentations at this time.
             </div>
-          ))
-        )}
+          ) : (
+            sortedEvents.map((event, index) => (
+              <div key={index}>
+                <UpcomingEventCard event={event} />
+                {index !== sortedEvents.length - 1 && (
+                  <hr className="border-gray-300" />
+                )}
+              </div>
+            ))
+          )}
+        </div>
       </div>
-    </div>
-  );
+    );
+    
 };
 
 export default UpcomingEventCalendar;

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

@@ -60,7 +60,7 @@ export default function Sidebar({ items }: SidebarProps) {
             );
           })}
         </div>
-        <div className="w-[3px] h-[300px] bg-gray-200" />
+        <div className="w-[5px] h-[350px] ml-2 bg-gray-200" />
       </div>
 
       {!visible && (

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

@@ -19,10 +19,10 @@ export default function SidebarWrapper({
 }: SidebarWrapper) {
     return (
         <div className="min-h-screen">
-            <div className="text-nefacblue text-[36px] font-bold px-8">
+            <div className="text-nefacblue text-[36px] font-bold px-10 pt-10 pb-3 ">
                 {title}
             </div>
-            <div className="w-full flex flex-row px-8 md:gap-9 pt-4">
+            <div className="w-full flex flex-row px-8 md:gap-9 text-[20px]">
                 <Sidebar items={items} />
                 <div className="w-full flex flex-col">
                     {children}

nefac-website/src/globals.css

@@ -162,6 +162,10 @@ body {
   text-decoration: underline;
 }
 
+.override-flex-col > div.w-full.flex.flex-row {
+  flex-direction: column !important;
+}
+
 @media (max-width: 767px) {
   .custom-html-content {
     max-width: 90%;