Fix Mentorship Resource Link

playwright-tests/tests/home.page.spec.ts

@@ -90,7 +90,7 @@ test.describe('Validate Home Page', () => {
 
     await basePage.verifyURL('/mentorship/mentor-registration');
     await basePage.verifyPageContainsText(
-      'Welcome to the MentorRegistrationPage',
+      'WCC: Registration Form for Mentors',
     );
   });
 

src/components/ResourcesCard.tsx

@@ -67,6 +67,8 @@ export const ResourcesCard: React.FC<ResourcesCardProps> = ({
           variant="contained"
           color="primary"
           href={link}
+          target="_blank"
+          rel="noopener noreferrer"
           sx={{
             textTransform: 'none',
             borderRadius: 2,

src/components/__tests__/ResourcesCard.test.tsx

@@ -10,15 +10,20 @@ describe('ResourcesCard', () => {
     title: 'Test Card',
     description: 'This is a test description',
     buttonText: 'Click Me',
-    link: '#',
+    link: 'https://drive.google.com/file/d/1xPbW8BlQoLXkuAJ7m0RuvOV02Opyr445',
   };
 
-  it('renders the title, description, button, and image', () => {
+  it('renders the title, description, button, link, and image', () => {
     render(<ResourcesCard {...props} />);
 
     expect(screen.getByText('Test Card')).toBeInTheDocument();
     expect(screen.getByText('This is a test description')).toBeInTheDocument();
-    expect(screen.getByRole('link', { name: 'Click Me' })).toBeInTheDocument();
+    const link = screen.getByRole('link', { name: 'Click Me' });
+    expect(link).toBeInTheDocument();
+    expect(link).toHaveAttribute(
+      'href',
+      'https://drive.google.com/file/d/1xPbW8BlQoLXkuAJ7m0RuvOV02Opyr445',
+    );
 
     const img = screen.getByRole('img');
     expect(img).toHaveAttribute('src', '/test.jpg');

src/lib/api.ts

@@ -11,6 +11,7 @@ import mentors from './responses/mentors.json';
 import mentorShipPage from './responses/mentorship.json';
 import mentorShipCodeOfConduct from './responses/mentorshipCodeOfConduct.json';
 import mentorshipFaqPageData from './responses/mentorshipFaqPage.json';
+import mentorshipResourcesPage from './responses/mentorshipResources.json';
 import studyGroupsPage from './responses/mentorshipStudyGroupsPage.json';
 
 const apiBaseUrl = process.env.API_BASE_URL;
@@ -67,6 +68,7 @@ const pageData = {
   'mentorship/code-of-conduct': mentorShipCodeOfConduct,
   team: aboutUsTeam,
   'mentorship/faq': mentorshipFaqPageData,
+  'mentorship/resources': mentorshipResourcesPage,
   'mentorship/study-groups': studyGroupsPage,
 };
 

src/lib/responses/mentorshipResources.json

@@ -1,28 +1,54 @@
 {
-  "heroTitle": "Mentorship Resources",
-  "heroDescription": "Whether you’re a mentee looking to navigate your journey, a mentor aiming to provide the best guidance, or a seasoned mentor seeking quick tips, we have the tools you need. Explore our guides for insightful mentorship advice and strategies.",
-  "resources": [
-    {
-      "image": "/mentee_guideMedia.jpg",
-      "title": "Mentee’s Guide",
-      "description": "",
-      "buttonText": "View Guide",
-      "link": "#"
-    },
-    {
-      "image": "/mentor_pocketbookMedia.jpg",
-      "title": "Mentor’s Pocketbook",
-      "description": "",
-      "buttonText": "View Pocketbook",
-      "link": "#"
-    },
-    {
-      "image": "/mentor_guideeMedia.jpg",
-      "title": "Mentor’s Guide",
-      "description": "",
-      "buttonText": "View Guide",
-      "link": "#"
-    }
-  ],
-  "footer": "footerData.json content"
+  "id": "page:MENTORSHIP_RESOURCES",
+  "heroSection": {
+    "title": "Mentorship Resources"
+  },
+  "section": {
+    "description": "Whether you’re a mentee looking to navigate your journey, a mentor aiming to provide the best guidance, or a seasoned mentor seeking quick tips, we have the tools you need. Explore our guides for insightful mentorship advice and strategies."
+  },
+  "resourcesSection": {
+    "title": "Available Resources",
+    "description": "Download and explore our curated mentorship materials",
+    "items": [
+      {
+        "title": "Mentees Guide",
+        "description": "A practical guide for mentees to get the most out of mentorship.",
+        "link": {
+          "label": "Download PDF",
+          "uri": "https://drive.google.com/file/d/1xPbW8BlQoLXkuAJ7m0RuvOV02Opyr445"
+        },
+        "image": {
+          "path": "/mentee_guideMedia.jpg",
+          "alt": "woman working on a laptop",
+          "type": "desktop"
+        }
+      },
+      {
+        "title": "Mentor's Pocketbook",
+        "description": "Quick mentor reference notes and useful mentorship tips.",
+        "link": {
+          "label": "Download PDF",
+          "uri": "https://drive.google.com/file/d/1rgoOTqqG4Gu6e4tw45efFspDnoYRgYd9"
+        },
+        "image": {
+          "path": "/mentor_pocketbookMedia.jpg",
+          "alt": "Image decorative",
+          "type": "desktop"
+        }
+      },
+      {
+        "title": "Mentor's Guide",
+        "description": "Guidance and best practices for mentors to support their mentees effectively.",
+        "link": {
+          "label": "Download PDF",
+          "uri": "https://drive.google.com/file/d/1wTkCSG95BVg-0XX4r7FnFiV24_SXlbM_"
+        },
+        "image": {
+          "path": "/mentor_guideeMedia.jpg",
+          "alt": "two women sitting by a desk and talking together",
+          "type": "desktop"
+        }
+      }
+    ]
+  }
 }

src/pages/mentorship/resources.tsx

@@ -7,17 +7,25 @@ import { Title, ResourcesCard, Footer, BreadCrumbsDynamic } from '@components';
 import { useIsMobile } from '@utils/theme-utils';
 import { FooterResponse, MentorshipResourcesResponse } from '@utils/types';
 import { fetchData } from 'lib/api';
-import footerData from 'lib/responses/footer.json';
 import pageData from 'lib/responses/mentorshipResources.json';
 
 type CombinedResponse = {
   data: MentorshipResourcesResponse;
   footer: FooterResponse;
 };
 
-const MentorshipResourcesPage: React.FC = () => {
+type MentorshipResourcesPageProps = {
+  data?: MentorshipResourcesResponse;
+  footer: FooterResponse;
+};
+
+const MentorshipResourcesPage: React.FC<MentorshipResourcesPageProps> = ({
+  data,
+  footer,
+}) => {
   const isMobile = useIsMobile();
-  const { heroTitle, heroDescription, resources } = pageData;
+  const page = (data ?? pageData) as MentorshipResourcesResponse;
+  const { heroSection, section, resourcesSection } = page;
 
   return (
     <>
@@ -27,7 +35,7 @@ const MentorshipResourcesPage: React.FC = () => {
         sx={{ display: 'flex', flexDirection: 'column', minHeight: '100vh' }}
       >
         <Box sx={{ flexGrow: 1 }}>
-          <Title title={heroTitle} />
+          <Title title={heroSection.title} />
 
           <Box
             sx={{
@@ -44,7 +52,7 @@ const MentorshipResourcesPage: React.FC = () => {
                 lineHeight: 1.5,
               }}
             >
-              {heroDescription}
+              {section.description}
             </Typography>
           </Box>
 
@@ -57,22 +65,22 @@ const MentorshipResourcesPage: React.FC = () => {
             }}
           >
             <Grid container spacing={4}>
-              {resources.map((res, index) => (
+              {resourcesSection.items.map((res, index) => (
                 <Grid item xs={12} sm={6} md={6} lg={4} key={index}>
                   <ResourcesCard
-                    image={res.image}
+                    image={res.image.path}
                     title={res.title}
-                    description={res.description}
-                    buttonText={res.buttonText}
-                    link={res.link}
+                    description={res.description ?? ''}
+                    buttonText={res.link.label}
+                    link={res.link.uri}
                     buttonIcon={<OpenInNewIcon />}
                   />
                 </Grid>
               ))}
             </Grid>
           </Box>
         </Box>
-        <Footer {...footerData} />
+        <Footer {...footer} />
       </Box>
     </>
   );

src/utils/types.ts

@@ -409,6 +409,7 @@ export type LongTermTimeLineResponse = {
 
 export type ResourceItem = {
   title: string;
+  description?: string;
   link: Link;
   image: Image;
 };