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

Open
AkshataKatwal16 wants to merge 3 commits into
base: feat-landing-page
Choose a base branch
from
Open

Issue feat: Fix landing page issues #2969

Show file tree
Hide file tree
Changes from all 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: 8 additions & 6 deletions ...-app/src/app/programs/[tenantId]/page.tsx → ...er-web-app/src/app/[programName]/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,20 +41,22 @@ export default function ProgramDetailPage() {
const params = useParams();
const router = useRouter();
const { t } = useTranslation();
const tenantId = params?.tenantId as string;
const programName = decodeURIComponent(params?.programName as string);

const [program, setProgram] = useState<Program | null>(null);
const [loading, setLoading] = useState(true);
const [notFound, setNotFound] = useState(false);
const [enrolModalOpen, setEnrolModalOpen] = useState(false);

useEffect(() => {
if (!tenantId) return;
if (!programName) return;
const fetchProgram = async () => {
try {
const res = await getTenantInfo();
const all: Program[] = res?.result || [];
const found = all.find((p) => p.tenantId === tenantId);
const found = all.find(
(p) => p.name.toLowerCase() === programName.toLowerCase()
);
if (found) {
setProgram(found);
} else {
Expand All @@ -67,14 +69,14 @@ export default function ProgramDetailPage() {
}
};
fetchProgram();
}, [tenantId]);
}, [programName]);

const handleEnrolNow = () => {
setEnrolModalOpen(true);
};

const handleLogin = () => {
router.push(`/login?tenantId=${tenantId}`);
router.push(`/login?tenantId=${program?.tenantId}`);
};

if (loading) {
Expand Down Expand Up @@ -358,7 +360,7 @@ export default function ProgramDetailPage() {
open={enrolModalOpen}
onClose={() => setEnrolModalOpen(false)}
programName={program.name}
tenantId={tenantId}
tenantId={program.tenantId}
/>
</>
);
Expand Down
18 changes: 9 additions & 9 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}`)}
onExplore={() => router.push(`/${encodeURIComponent(program.name)}`)}
/>
</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,21 +484,21 @@
<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}>
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, React will encounter duplicate keys, leading to rendering issues. If tenantId is guaranteed to be unique, 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={VOLUNTEER_CARD_COLORS[index % VOLUNTEER_CARD_COLORS.length]}
onExplore={() => router.push(`/programs/${program.tenantId}`)}
onExplore={() => router.push(`/${encodeURIComponent(program.name)}`)}
/>
</Grid>
);
Expand Down
2 changes: 1 addition & 1 deletion apps/learner-web-app/src/app/login/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -849,7 +849,7 @@ const LoginPageContent = () => {
primaryText={t('LANDING.ENROL_NOW') || 'Enrol Now'}
primaryActionHandler={() => {
setNotEnrolledModal(false);
router.push(`/programs/${notEnrolledTenantId}`);
router.push(`/${encodeURIComponent(notEnrolledProgramName)}`);
}}
// secondaryText={t('LEARNER_APP.PROGRAMS.MY_PROGRAMS') || 'My Programs'}
// secondaryActionHandler={() => { setNotEnrolledModal(false); router.push('/programs'); }}
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