Skip to content

Issue feat: Fix landing page issues #2969

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
rushi-tekdi merged 3 commits into from
May 21, 2026
Merged

Issue feat: Fix landing page issues #2969

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
5ace85f
Issue feat: Fix landing page issues
AkshataKatwal16 May 18, 2026
93adaab
update pr
AkshataKatwal16 May 18, 2026
7ec1c5b
update pr: Program url link reduction
AkshataKatwal16 May 20, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 7 additions & 7 deletions apps/learner-web-app/src/app/landing/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -359,8 +359,8 @@
>
{t('LANDING.HOW_WOULD_YOU_LIKE_TO_GET_STARTED')}
</Typography>
<Grid container spacing={3}>
<Grid item xs={12} md={6}>
<Grid container spacing={3} justifyContent="center">
<Grid item xs={12} sm={5} md={4}>
<RoleCard
icon={<MenuBookOutlinedIcon fontSize="inherit" />}
title={t('LANDING.ARE_YOU_HERE_TO_LEARN')}
Expand All @@ -369,7 +369,7 @@
onClick={handleScrollToLearner}
/>
</Grid>
<Grid item xs={12} md={6}>
<Grid item xs={12} sm={5} md={4}>
<RoleCard
icon={<FavoriteBorderIcon fontSize="inherit" />}
title={t('LANDING.ARE_YOU_HERE_TO_VOLUNTEER')}
Expand Down Expand Up @@ -417,32 +417,32 @@
<Box sx={{ py: 4, textAlign: 'center' }}>
<Typography>{t('LANDING.LOADING_PROGRAMS')}</Typography>
</Box>
) : learnerPrograms.length === 0 ? (
<Box sx={{ py: 4, textAlign: 'center' }}>
<Typography>{t('LANDING.NO_PROGRAMS_AVAILABLE')}</Typography>
</Box>
) : (
<Grid container spacing={3}>
<Grid container spacing={3} justifyContent="center">
{learnerPrograms.map((program, index) => {
const imageItem = program.programImages?.[0];
const image =
typeof imageItem === 'string'
? imageItem
: (imageItem as any)?.description || '/images/default.png';
return (
<Grid item xs={12} sm={6} md={4} key={program.tenantId || index}>
<Grid item xs={12} sm={6} md={3} key={program.tenantId || index}>
Copy link
Copy Markdown

@gemini-code-assist gemini-code-assist Bot May 18, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

Using program.tenantId || index as a key is potentially problematic. If tenantId is present but not unique across programs (e.g., if multiple programs belong to the same tenant), React will encounter duplicate keys, which can lead to rendering bugs and performance issues. If tenantId is guaranteed to be unique for each program, the fallback to index is redundant. If it is not guaranteed to be unique, consider using a more stable and unique identifier if available.

Suggested change
<Grid item xs={12} sm={6} md={3} key={program.tenantId || index}>
<Grid item xs={12} sm={6} md={3} key={program.tenantId}>

<ProgramCard
image={image}
title={program.name}
description={program.description}
buttonColor={PROGRAM_CARD_COLORS[index % PROGRAM_CARD_COLORS.length]}
onExplore={() => router.push(`/programs/${program.tenantId}`)}
/>
</Grid>
);
})}
</Grid>
)}

Check warning on line 445 in apps/learner-web-app/src/app/landing/page.tsx

View check run for this annotation

SonarQubeCloud / SonarCloud Code Analysis

Extract this nested ternary operation into an independent statement. 


See more on https://sonarcloud.io/project/issues?id=tekdi_pratham2.0&issues=AZ466oL4QkH5Q9wPPE3b&open=AZ466oL4QkH5Q9wPPE3b&pullRequest=2969
</Container>
</Box>

Expand Down Expand Up @@ -484,15 +484,15 @@
<Typography>{t('LANDING.LOADING_PROGRAMS')}</Typography>
</Box>
) : (
<Grid container spacing={3}>
<Grid container spacing={3} justifyContent="center">
{volunteerPrograms.map((program, index) => {
const imageItem = program.programImages?.[0];
const image =
typeof imageItem === 'string'
? imageItem
: (imageItem as any)?.description || '/images/default.png';
return (
<Grid item xs={12} sm={6} md={4} key={program.tenantId || index}>
<Grid item xs={12} sm={6} md={3} key={program.tenantId || index}>
Comment thread
rushi-tekdi marked this conversation as resolved.
<ProgramCard
image={image}
title={program.name}
Expand Down
20 changes: 14 additions & 6 deletions apps/learner-web-app/src/components/Header/Header.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -108,11 +108,17 @@ const Header = ({ isShowLogout = false, isLogin = false }) => {
}}
style={{ cursor: 'pointer' }}
>
<Image src={appLogo} alt="Pratham Logo" width={200} height={40} />
<Image
src={appLogo}
alt="Pratham Logo"
width={200}
height={40}
style={{ width: 'clamp(100px, 40vw, 200px)', height: 'auto' }}
/>
</Box>

{/* Language Selector and Logout */}
<Box display="flex" alignItems="center" gap={2}>
<Box display="flex" alignItems="center" gap={{ xs: 1, sm: 2 }}>
{/* Login Button */}
{isLogin && (
<Button
Expand All @@ -122,13 +128,15 @@ const Header = ({ isShowLogout = false, isLogin = false }) => {
sx={{
fontFamily: 'Poppins',
fontWeight: 600,
fontSize: '14px',
fontSize: { xs: '12px', sm: '14px' },
textTransform: 'none',
backgroundColor: '#FDBE16',
color: '#1F1B13',
borderRadius: '8px',
px: 2.5,
px: { xs: 1.5, sm: 2.5 },
py: 0.8,
whiteSpace: 'nowrap',
minWidth: 'unset',
'&:hover': {
backgroundColor: '#f0b000',
},
Expand All @@ -149,8 +157,8 @@ const Header = ({ isShowLogout = false, isLogin = false }) => {
sx={{
fontFamily: 'Poppins',
fontWeight: 400,
fontSize: '14px',
minWidth: '80px',
fontSize: { xs: '12px', sm: '14px' },
minWidth: { xs: '60px', sm: '80px' },
}}
>
<MenuItem value="en">English</MenuItem>
Expand Down
12 changes: 6 additions & 6 deletions apps/learner-web-app/src/components/ProgramCard/ProgramCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ const ProgramCard: React.FC<ProgramCardProps> = ({
}}
sx={{
width: '100%',
height: 220,
height: 160,
objectFit: 'cover',
display: 'block',
}}
Expand All @@ -58,17 +58,17 @@ const ProgramCard: React.FC<ProgramCardProps> = ({
flexGrow: 1,
display: 'flex',
flexDirection: 'column',
gap: 1.5,
p: 2.5,
gap: 1,
p: 1.5,
}}
>
<Typography
variant="h6"
sx={{
fontFamily: 'Poppins',
fontWeight: 700,
fontSize: '16px',
lineHeight: '24px',
fontSize: '14px',
lineHeight: '20px',
color: '#1F1B13',
}}
>
Expand Down Expand Up @@ -106,7 +106,7 @@ const ProgramCard: React.FC<ProgramCardProps> = ({
lineHeight: '20px',
textTransform: 'none',
borderRadius: '8px',
py: 1.2,
py: 0.8,
// '&:hover': {
// backgroundColor: buttonColor,
// filter: 'brightness(0.9)',
Expand Down
20 changes: 10 additions & 10 deletions apps/learner-web-app/src/components/RoleCard/RoleCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,27 +57,27 @@ const RoleCard: React.FC<RoleCardProps> = ({
<CardActionArea
disableRipple={!onClick}
sx={{
p: { xs: 3, md: 4 },
p: { xs: 2, md: 2.5 },
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
textAlign: 'center',
gap: 1.5,
gap: 1,
'&:hover .MuiCardActionArea-focusHighlight': { opacity: 0 },
}}
>
<Box
sx={{
width: 56,
height: 56,
width: 44,
height: 44,
borderRadius: '50%',
backgroundColor: theme.iconBackground,
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
mb: 1,
mb: 0.5,
color: theme.iconColor,
fontSize: 28,
fontSize: 22,
}}
>
{icon}
Expand All @@ -88,8 +88,8 @@ const RoleCard: React.FC<RoleCardProps> = ({
sx={{
fontFamily: 'Poppins',
fontWeight: 700,
fontSize: '18px',
lineHeight: '26px',
fontSize: '15px',
lineHeight: '22px',
color: '#1F1B13',
}}
>
Expand All @@ -101,8 +101,8 @@ const RoleCard: React.FC<RoleCardProps> = ({
sx={{
fontFamily: 'Poppins',
fontWeight: 400,
fontSize: '14px',
lineHeight: '22px',
fontSize: '12px',
lineHeight: '18px',
color: '#5C5952',
}}
>
Expand Down