changes to mentor image and connection to BE

src/components/MentorProfileCard.tsx

@@ -94,11 +94,11 @@ export const MentorProfileCard: React.FC<MentorProfileCardProps> = ({
         >
           {/* question: image needs to be an actual url */}
           <Image
-            src={mentor.images[0]?.path || '/profile-illustration.avif'}
+            src={mentor.images[0]?.path || '/resized-cropped-1.png'}
             alt={mentor.images[0]?.alt || 'Mentor Profile Picture Description'}
             width={120}
             height={120}
-            style={{ objectFit: 'cover' }}
+            style={{ objectFit: 'cover', borderRadius: '50%' }}
           />
         </Box>
         <Typography variant="h6">{mentor.fullName}</Typography>

src/pages/api/mentor-registration.ts

@@ -0,0 +1,46 @@
+import { logger } from 'bs-logger';
+import { NextApiRequest, NextApiResponse } from 'next';
+
+export default async function handler(
+  req: NextApiRequest,
+  res: NextApiResponse,
+) {
+  if (req.method !== 'POST') {
+    res.setHeader('Allow', ['POST']);
+    return res.status(405).json({ error: `Method ${req.method} Not Allowed` });
+  }
+
+  const apiBaseUrl = process.env.API_BASE_URL;
+  const apiKey = process.env.API_KEY;
+
+  if (!apiBaseUrl || !apiKey) {
+    return res.status(500).json({ error: 'Server configuration error' });
+  }
+
+  const host = apiBaseUrl.split('/api/')[0];
+  const url = `${host}/api/platform/v1/mentors`;
+
+  try {
+    const response = await fetch(url, {
+      method: 'POST',
+      headers: {
+        'X-API-KEY': apiKey,
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify(req.body),
+    });
+
+    const data = await response.json().catch(() => null);
+
+    if (!response.ok) {
+      return res
+        .status(response.status)
+        .json(data ?? { error: 'Registration failed. Please try again.' });
+    }
+
+    return res.status(response.status).json(data ?? {});
+  } catch (error) {
+    logger.error('Mentor registration API error:', error);
+    return res.status(500).json({ error: 'Internal server error' });
+  }
+}

src/pages/mentorship/mentor-registration.tsx

@@ -12,6 +12,7 @@ import {
 import React, { useState } from 'react';
 import { useForm, FormProvider } from 'react-hook-form';
 
+import { transformPayload } from '@utils/transformHelper';
 import Step1BasicInfo from 'components/mentorship/Step1BasicInfo';
 import Step2Skills from 'components/mentorship/Step2Skills';
 import Step3DomainSkills from 'components/mentorship/Step3DomainSkills';
@@ -106,6 +107,7 @@ const MentorRegistrationPage = () => {
   });
 
   const [activeStep, setActiveStep] = useState(1);
+  const [submitted, setSubmitted] = useState(false);
   const totalSteps = 5;
 
   const handleNext = async () => {
@@ -139,145 +141,176 @@ const MentorRegistrationPage = () => {
     if (activeStep > 1) setActiveStep((prev) => prev - 1);
   };
 
-  const onSubmit = (data: MentorRegistrationData) => {
-    console.log('Form Data Submitted:', data);
+  const onSubmit = async (data: MentorRegistrationData) => {
+    const payload = transformPayload(data);
+    try {
+      await fetch('/api/mentor-registration', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(payload),
+      });
+
+      setSubmitted(true);
+      window.scrollTo(0, 0);
+    } catch (error) {
+      console.error('Mentor registration submission error:', error);
+    }
   };
 
   return (
-    <FormProvider {...formMethods}>
-      <Box
-        sx={{
-          minHeight: '100vh',
-          bgcolor: 'custom.lightBlue',
-          position: 'relative',
-          overflow: 'hidden',
-          pb: 8,
-        }}
-      >
-        <Container
-          maxWidth={false}
-          sx={{
-            position: 'relative',
-            zIndex: 1,
-            pt: { xs: 4, sm: 10, md: '18.75rem' },
-            px: { xs: 2, sm: 3 },
-            maxWidth: isMobile ? '100%' : theme.custom.innerBox.maxWidth,
-            margin: '0 auto',
-          }}
-        >
+    <>
+      {submitted ? (
+        <Box sx={{ textAlign: 'center', py: 4 }}>
+          <Typography variant="h5" gutterBottom fontWeight={600}>
+            Application submitted!
+          </Typography>
+          <Typography variant="body1" color="text.secondary" sx={{ mb: 3 }}>
+            Thank you for applying to our mentorship programme. We will review
+            your application and get back to you soon.
+          </Typography>
+        </Box>
+      ) : (
+        <FormProvider {...formMethods}>
           <Box
-            component="img"
-            src="/mentor-hero-bg.png"
-            alt="Mentor background"
-            sx={{
-              position: 'absolute',
-              top: '-6.25rem',
-              right: 0,
-              height: { xs: '220px', sm: '280px', md: '360px', lg: '420px' },
-              width: 'auto',
-              zIndex: -1,
-              opacity: 0.9,
-              pointerEvents: 'none',
-            }}
-          />
-          <Paper
-            elevation={3}
             sx={{
-              p: { xs: 3, sm: 4, md: 5 },
-              borderRadius: 2,
-              width: '100%',
-              maxWidth: { xs: '100%', sm: '540px', md: '640px' },
-              mx: 'auto',
-              bgcolor: 'white',
+              minHeight: '100vh',
+              bgcolor: 'custom.lightBlue',
+              position: 'relative',
+              overflow: 'hidden',
+              pb: 8,
             }}
           >
-            <Typography
-              variant="body2"
-              align="center"
-              sx={{
-                mb: 3,
-                color: 'text.secondary',
-              }}
-            >
-              Step {activeStep} of {totalSteps}
-            </Typography>
-
-            <Box
+            <Container
+              maxWidth={false}
               sx={{
-                width: '100%',
-                height: 6,
-                bgcolor: '#E5E5E5',
-                borderRadius: 3,
-                mb: 5,
-                overflow: 'hidden',
+                position: 'relative',
+                zIndex: 1,
+                pt: { xs: 4, sm: 10, md: '2.75rem' },
+                px: { xs: 2, sm: 3 },
+                maxWidth: isMobile ? '100%' : theme.custom.innerBox.maxWidth,
+                margin: '0 auto',
               }}
             >
               <Box
+                component="img"
+                src="/mentor-hero-bg.png"
+                alt="Mentor background"
                 sx={{
-                  width: `${(activeStep / totalSteps) * 100}%`,
-                  height: '100%',
-                  bgcolor: 'primary.main',
-                  borderRadius: 3,
-                  transition: 'width 0.3s ease',
+                  position: 'absolute',
+                  top: '-6.25rem',
+                  right: 0,
+                  height: {
+                    xs: '220px',
+                    sm: '280px',
+                    md: '360px',
+                    lg: '420px',
+                  },
+                  width: 'auto',
+                  zIndex: -1,
+                  opacity: 0.9,
+                  pointerEvents: 'none',
                 }}
               />
-            </Box>
-
-            <Box>
-              {activeStep === 1 && <Step1BasicInfo />}
-              {activeStep === 2 && <Step2Skills />}
-              {activeStep === 3 && <Step3DomainSkills />}
-              {activeStep === 4 && <Step4ProgrammingSkills />}
-              {activeStep === 5 && <Step5Review />}
-            </Box>
-
-            <Stack
-              direction="row"
-              justifyContent="space-between"
-              mt={5}
-              spacing={2}
-            >
-              <Button
-                variant="outlined"
-                disabled={activeStep === 1}
-                onClick={handleBack}
+              <Paper
+                elevation={3}
                 sx={{
-                  px: { xs: 2.5, md: 3.5 },
-                  py: 1,
+                  p: { xs: 3, sm: 4, md: 5 },
+                  borderRadius: 2,
+                  width: '100%',
+                  maxWidth: { xs: '100%', sm: '540px', md: '640px' },
+                  mx: 'auto',
+                  bgcolor: 'white',
                 }}
               >
-                Back
-              </Button>
-
-              {activeStep === totalSteps ? (
-                <Button
-                  variant="contained"
-                  color="success"
-                  onClick={formMethods.handleSubmit(onSubmit)}
+                <Typography
+                  variant="body2"
+                  align="center"
                   sx={{
-                    px: { xs: 2.5, md: 3.5 },
-                    py: 1,
+                    mb: 3,
+                    color: 'text.secondary',
                   }}
                 >
-                  Submit Application
-                </Button>
-              ) : (
-                <Button
-                  variant="contained"
-                  onClick={handleNext}
+                  Step {activeStep} of {totalSteps}
+                </Typography>
+
+                <Box
                   sx={{
-                    px: { xs: 2.5, md: 3.5 },
-                    py: 1,
+                    width: '100%',
+                    height: 6,
+                    bgcolor: '#E5E5E5',
+                    borderRadius: 3,
+                    mb: 5,
+                    overflow: 'hidden',
                   }}
                 >
-                  Next
-                </Button>
-              )}
-            </Stack>
-          </Paper>
-        </Container>
-      </Box>
-    </FormProvider>
+                  <Box
+                    sx={{
+                      width: `${(activeStep / totalSteps) * 100}%`,
+                      height: '100%',
+                      bgcolor: 'primary.main',
+                      borderRadius: 3,
+                      transition: 'width 0.3s ease',
+                    }}
+                  />
+                </Box>
+
+                <Box>
+                  {activeStep === 1 && <Step1BasicInfo />}
+                  {activeStep === 2 && <Step2Skills />}
+                  {activeStep === 3 && <Step3DomainSkills />}
+                  {activeStep === 4 && <Step4ProgrammingSkills />}
+                  {activeStep === 5 && <Step5Review />}
+                </Box>
+
+                <Stack
+                  direction="row"
+                  justifyContent="space-between"
+                  mt={5}
+                  spacing={2}
+                >
+                  <Button
+                    variant="outlined"
+                    disabled={activeStep === 1}
+                    onClick={handleBack}
+                    sx={{
+                      px: { xs: 2.5, md: 3.5 },
+                      py: 1,
+                    }}
+                  >
+                    Back
+                  </Button>
+
+                  {activeStep === totalSteps ? (
+                    <Button
+                      variant="contained"
+                      color="success"
+                      onClick={formMethods.handleSubmit(onSubmit)}
+                      sx={{
+                        px: { xs: 2.5, md: 3.5 },
+                        py: 1,
+                      }}
+                    >
+                      Submit Application
+                    </Button>
+                  ) : (
+                    <Button
+                      variant="contained"
+                      onClick={handleNext}
+                      sx={{
+                        px: { xs: 2.5, md: 3.5 },
+                        py: 1,
+                      }}
+                    >
+                      Next
+                    </Button>
+                  )}
+                </Stack>
+              </Paper>
+            </Container>
+          </Box>
+        </FormProvider>
+      )}
+    </>
   );
 };