Skip to content

Commit e3273d5

Browse files
codeaashucodeaashu
committed
Enhance styling and layout of OpenSourceProgram component for better user experience
1 parent 37df6a2 commit e3273d5

File tree

1 file changed

+120
-98
lines changed

1 file changed

+120
-98
lines changed

‎src/Page/OpportunitiesHub/OpenSourceProgram.jsx‎

Lines changed: 120 additions & 98 deletions
Original file line numberDiff line numberDiff line change
@@ -541,16 +541,17 @@ const StyledOSProgramCard = styled.div`
541541
overflow: hidden;
542542
transition: transform 0.3s, box-shadow 0.3s;
543543
width: 100%;
544-
max-width: 850px;
545-
margin: 0.5rem auto;
544+
max-width: 1000px;
545+
margin: 1rem auto 0.5rem;
546+
padding: 1rem;
546547
547548
&:hover {
548-
transform: scale(1.03);
549-
box-shadow: 0 0 20px rgba(0, 172, 255, 0.6);
549+
transform: scale(1.05);
550+
box-shadow: 0 0 25px rgba(0, 172, 255, 0.7);
550551
}
551552
552553
.poster {
553-
width: 300px;
554+
width: 350px;
554555
height: 100%;
555556
flex-shrink: 0;
556557
background-color: transparent;
@@ -562,130 +563,151 @@ const StyledOSProgramCard = styled.div`
562563
563564
img {
564565
max-width: 100%;
565-
max-height: 200px;
566+
max-height: 250px;
566567
object-fit: contain;
567568
display: block;
569+
border: 1px solid white;
570+
border-radius: 8px;
568571
}
572+
}
569573
570-
.apply-button-wrapper {
571-
margin-top: 0.5rem;
574+
.apply-button-wrapper {
575+
margin-top: 0.5rem;
572576
573-
a {
574-
display: flex;
575-
align-items: center;
576-
background-color: transparent;
577-
border: 1px solid #00a6fb;
578-
border-radius: 9999px;
579-
padding: 0.5rem 1rem;
580-
color: #00a6fb;
581-
text-decoration: none;
582-
font-weight: 500;
583-
font-size: 0.875rem;
584-
transition: background-color 0.3s;
585-
586-
&:hover {
587-
background-color: rgba(0, 166, 251, 0.2);
588-
}
577+
a {
578+
display: flex;
579+
align-items: center;
580+
background-color: transparent;
581+
border: 1px solid #00a6fb;
582+
border-radius: 9999px;
583+
padding: 0.5rem 1rem;
584+
color: #00a6fb;
585+
text-decoration: none;
586+
font-weight: 500;
587+
font-size: 0.875rem;
588+
transition: background-color 0.3s;
589+
590+
&:hover {
591+
background-color: rgba(0, 166, 251, 0.2);
592+
}
589593
590-
.status-user {
591-
width: 8px;
592-
height: 8px;
593-
margin-right: 8px;
594-
border-radius: 50%;
595-
outline: solid 2px #fff;
596-
background-color: #00a6fb;
597-
animation: active-status 2s ease-in-out infinite;
598-
}
594+
.status-user {
595+
width: 8px;
596+
height: 8px;
597+
margin-right: 8px;
598+
border-radius: 50%;
599+
outline: solid 2px #fff;
600+
background-color: #00a6fb;
601+
animation: active-status 2s ease-in-out infinite;
599602
}
603+
}
600604
601-
@keyframes active-status {
602-
0%, 100% {
603-
opacity: 1;
604-
}
605-
50% {
606-
opacity: 0.2;
607-
}
605+
@keyframes active-status {
606+
0%, 100% {
607+
opacity: 1;
608+
}
609+
50% {
610+
opacity: 0.2;
608611
}
609612
}
610613
}
611614
612615
.content {
613616
flex: 1;
614-
padding: 1rem;
617+
padding: 1.5rem;
618+
display: grid;
619+
grid-template-rows: auto 1fr auto; /* Header, Details, Footer */
620+
gap: 1rem;
621+
}
622+
623+
.header {
615624
display: flex;
616-
flex-direction: column;
617625
justify-content: space-between;
626+
align-items: center;
618627
619-
.header {
620-
display: flex;
621-
justify-content: space-between;
622-
align-items: center;
623-
624-
.organizer {
625-
font-size: 1rem;
626-
font-weight: bold;
627-
color: white;
628-
}
628+
.organizer {
629+
font-size: 1.1rem;
630+
font-weight: bold;
631+
color: white;
629632
}
633+
}
630634
631-
.details {
632-
margin-top: 1rem;
635+
.details {
636+
display: grid;
637+
grid-template-rows: auto auto 1fr; /* Title, Description, Info */
638+
gap: 0.8rem;
633639
634-
h2 {
635-
font-size: 1.25rem;
636-
font-weight: bold;
637-
color: white;
638-
margin-bottom: 0.5rem;
639-
}
640+
h2 {
641+
color: white;
642+
font-size: 1.3rem;
643+
margin-bottom: 0.5rem;
644+
}
640645
641-
p {
642-
font-size: 0.875rem;
643-
color: white;
644-
margin-bottom: 1rem;
645-
}
646+
p {
647+
color: white;
648+
font-size: 0.9rem;
649+
line-height: 1.4;
650+
margin-bottom: 1rem; /* Added margin-bottom here */
651+
}
646652
647-
.info {
648-
display: flex;
649-
flex-wrap: wrap;
650-
gap: 1rem;
651-
font-size: 0.875rem;
652-
color: #00a6fb;
653+
.info {
654+
display: grid;
655+
grid-template-columns: repeat(2, 1fr);
656+
gap: 0.8rem;
657+
font-size: 0.9rem;
658+
color: #00a6fb;
653659
654-
span, a {
655-
display: flex;
656-
align-items: center;
660+
span, a {
661+
display: flex;
662+
align-items: center;
657663
658-
svg {
659-
margin-right: 0.5rem;
660-
color: white;
661-
}
664+
svg {
665+
margin-right: 0.5rem;
666+
color: white;
662667
}
663668
}
664669
}
670+
}
665671
666-
.footer {
667-
margin-top: 1rem;
668-
display: flex;
669-
justify-content: flex-start;
672+
.footer {
673+
display: flex;
674+
justify-content: flex-start;
670675
671-
.share-button {
672-
display: flex;
673-
align-items: center;
674-
gap: 0.5rem;
675-
background-color: rgba(0, 166, 251, 0.2);
676-
border: 1px solid #00a6fb;
677-
border-radius: 0.5rem;
678-
padding: 0.5rem 1rem;
679-
color: white;
680-
cursor: pointer;
681-
transition: background-color 0.3s;
682-
683-
&:hover {
684-
background-color: rgba(0, 166, 251, 0.4);
685-
}
676+
.share-button {
677+
display: flex;
678+
align-items: center;
679+
gap: 0.5rem;
680+
background-color: rgba(0, 166, 251, 0.2);
681+
border: 1px solid #00a6fb;
682+
border-radius: 0.5rem;
683+
padding: 0.6rem 1.2rem;
684+
color: white;
685+
cursor: pointer;
686+
transition: background-color 0.3s;
687+
688+
&:hover {
689+
background-color: rgba(0, 166, 251, 0.4);
686690
}
687691
}
688692
}
693+
694+
/* Responsive styles */
695+
@media (min-width: 768px) {
696+
flex-direction: row; /* Side-by-side layout for tablets and above */
697+
.poster {
698+
width: 350px; /* Fixed width for larger screens */
699+
}
700+
}
701+
702+
@media (min-width: 1024px) {
703+
.details h2 {
704+
font-size: 1.5rem; /* Larger title for desktops */
705+
}
706+
707+
.details p {
708+
font-size: 1rem; /* Larger description for desktops */
709+
}
710+
}
689711
`;
690712

691713
const OSProgramCardComponent = ({
@@ -771,7 +793,7 @@ const OSProgramList = [
771793
{
772794
organizer: 'Google',
773795
title: 'Google Summer of Code 2025',
774-
description: 'Work with open-source orgs under Google and get paid for contributing.',
796+
description: 'Work with open-source orgs under Google and get paid for contributing. Work with open-source orgs under Google and get paid for contributing',
775797
timeline: 'Apply before April 8, 2025',
776798
Duration: 'June - September 2025',
777799
type: 'Student-friendly',

0 commit comments

Comments
 (0)