Redesign splash page

[AkashPaloju]

Overview

1. This PR fixes or fixes part of [Feature Request]: Redesign the splash page #19214
2. This PR does the following: Redesigns the splash page.

Essential Checklist

Please follow the instructions for making a code change.

• I have linked the issue that this PR fixes in the "Development" section of the sidebar.
• I have checked the "Files Changed" tab and confirmed that the changes are what I want to make.
• I have written tests for my code.
• The PR title starts with "Fix #bugnum: " or "Fix part of #bugnum: ...", followed by a short, clear summary of the changes.
• I have assigned the correct reviewers to this PR (or will leave a comment with the phrase "@{{reviewer_username}} PTAL" if I can't assign them directly).

Proof that changes are correct

Desktop & Mobile devices

splash-revisions.webm

Hover effects
splash-hover-effects.webm

Lighthouse tests in a11y

Screencast.from.23-04-24.10.45.31.PM.IST.webm

RTL Layout:
Screencast from 23-04-24 10:43:28 PM IST.webm

Slow Network:

Screencast.from.23-04-24.10.51.37.PM.IST.webm

PR Pointers

• Never force push! If you do, your PR will be closed.
• To reply to reviewers, follow these instructions: https://github.com/oppia/oppia/wiki/Make-a-pull-request#step-5-address-review-comments-until-all-reviewers-approve
• Some e2e tests are flaky, and can fail for reasons unrelated to your PR. We are working on fixing this, but in the meantime, if you need to restart the tests, please check the "If your build fails" wiki page.
• See the Code Owner's wiki page for what code owners will expect.

[oppiabot]

Hi @AkashPaloju please assign the required reviewer(s) for this PR. Thanks!

[AkashPaloju]

I will assign the reviewers once all tests are passed. Thanks!

[AkashPaloju]

Current Status: Waiting for reply on this query before the 'a11y' commit

[seanlip]

@AkashPaloju I've replied to the query. Are you planning to finish this PR?

Please also note that your CI checks are failing.

[seanlip]

Also, one note -- where possible, try to optimize the image sizes, especially for the larger files. Thanks!

[seanlip]

Thanks @AkashPaloju, I am also adding the design leads for a review of the video!

[S4v8n]

Hi,
Great work so far!
Here are some revisions for the splash page.

Web version:

1. "Learn through story.." title is missing white background for all three versions (see figma file for reference.)
2. Set 295px widths for all subtext under title "Fun free", "Learn by yourself" , " Diversity of subjects"
3. set 289px widths for body text "Oppia's classroom" and "Community lessons"
4. Community lessons title and button should be Dark Orange color #B25239 (for all three versions -web, mobile, tablet)
5. set 682px width for body text - "Have your own account"
6. Set 478px width body text - "For parents"
7. set 456px width body text - "For volunteers"

Mobile version:

1. missing white background "Learn through story..."
2. CTA buttons not centered especially "Start learning" and "Or create an account"
3. Double check fonts are Capriola font, size 16 for title, Roboto font regular size 13 for body text - "Fun free", Learn by yourself", "Diversity of subjects" Also make sure spacing between title and body text is 8px, it currently too much space.

Tablet version:

1. missing white background "Learn through story..."
2. Set 543px width for body text - "Have your own account"
3. set 467px width for body text - "For teachers"
4. set 415px width for body text - "For parents"
5. set 447px width for body text - "For volunteers"

Thank you for your great work!

[rflore]

Hi Team,

For Web:
Header, Body Text, & CTA: "Learn through story based lessons"; The left margin is 89px, while the others are at 88px. Please update.
Header: "Have your own account"; The video shows a smaller left margin, please update to 88px.

Kurin has done a great job capturing most of the changes needed, especially the mobile CTA alignments issues. No other issues on my end.

Nice work all!

[AkashPaloju]

Hi, Great work so far! Here are some revisions for the splash page.

Web version:

1. "Learn through story.." title is missing white background for all three versions (see figma file for reference.)
2. Set 295px widths for all subtext under title "Fun free", "Learn by yourself" , " Diversity of subjects"
3. set 289px widths for body text "Oppia's classroom" and "Community lessons"
4. Community lessons title and button should be Dark Orange color #B25239 (for all three versions -web, mobile, tablet)
5. set 682px width for body text - "Have your own account"
6. Set 478px width body text - "For parents"
7. set 456px width body text - "For volunteers"

Mobile version:

1. missing white background "Learn through story..."
2. CTA buttons not centered especially "Start learning" and "Or create an account"
3. Double check fonts are Capriola font, size 16 for title, Roboto font regular size 13 for body text - "Fun free", Learn by yourself", "Diversity of subjects" Also make sure spacing between title and body text is 8px, it currently too much space.

Tablet version:

1. missing white background "Learn through story..."
2. Set 543px width for body text - "Have your own account"
3. set 467px width for body text - "For teachers"
4. set 415px width for body text - "For parents"
5. set 447px width for body text - "For volunteers"

Thank you for your great work!

Hi, @S4v8n , For the 4th point about the Dark Orange color #B25239 please refer this query

Thanks!

[AkashPaloju]

Hi, I have addressed the comments, Could you PTAL? @nikitaevg
The tests are not failing due to my changes. One of them is referenced in this issue and the other one is acceptance test related to donate page which failed because of "icon not loading" probably it is because of internet issue when performing the test.
Thanks!

[AkashPaloju]

Hi, @S4v8n, @rflore , Thanks for your feedback, I have addressed the comments Could you PTAL at the updated videos ?
Thanks!

[oppiabot]

Unassigning @AkashPaloju since a re-review was requested. @AkashPaloju, please make sure you have addressed all review comments. Thanks!

[seanlip]

@AkashPaloju Please reply to all the comments by @nikitaevg, thanks.

[S4v8n]

Hi, @S4v8n, @rflore , Thanks for your feedback, I have addressed the comments Could you PTAL at the updated videos ? Thanks!

Hi Akash, thank you for the latest video update. The desktop version looks better. There are couple things I noticed.

In Desktop version:

1. The first line "Learn anything through story based-lessons!" title should be across the page, font size: 28

2. Also are you able to apply the white background to have the curved shapes? see image below. If you are able to do it, there are two other areas that have the curve shapes on page. this would need to be applied to all screen versions.

One small thing I notice in the Mobile portrait mode.

• in section that starts with " Learn more about Oppia", the subtext font looks bigger than the title font.

• The titles "Learn by yourself" and the all titles should be in Capriola regular font, font size: 16, the subtext should be Roboto regular font, font size: 13.

Thank you again for your work. It is looking great.

Best,
kurin

[AkashPaloju]

Hi, @S4v8n, @rflore , Thanks for your feedback, I have addressed the comments Could you PTAL at the updated videos ? Thanks!

Hi Akash, thank you for the latest video update. The desktop version looks better. There are couple things I noticed.

In Desktop version:

1. The first line "Learn anything through story based-lessons!" title should be across the page, font size: 28
2. Also are you able to apply the white background to have the curved shapes? see image below. If you are able to do it, there are two other areas that have the curve shapes on page. this would need to be applied to all screen versions.

One small thing I notice in the Mobile portrait mode.

• in section that starts with " Learn more about Oppia", the subtext font looks bigger than the title font.

• The titles "Learn by yourself" and the all titles should be in Capriola regular font, font size: 16, the subtext should be Roboto regular font, font size: 13.

Thank you again for your work. It is looking great.

Best, kurin

Thanks @S4v8n , I will do the remaining changes but I won't be to do the white background thing for the curved shapes given my ongoing GSoC period with Oppia.

[S4v8n]

Hi, @S4v8n, @rflore , Thanks for your feedback, I have addressed the comments Could you PTAL at the updated videos ? Thanks!

Hi Akash, thank you for the latest video update. The desktop version looks better. There are couple things I noticed.
In Desktop version:

1. The first line "Learn anything through story based-lessons!" title should be across the page, font size: 28
2. Also are you able to apply the white background to have the curved shapes? see image below. If you are able to do it, there are two other areas that have the curve shapes on page. this would need to be applied to all screen versions.

One small thing I notice in the Mobile portrait mode.

• in section that starts with " Learn more about Oppia", the subtext font looks bigger than the title font.

• The titles "Learn by yourself" and the all titles should be in Capriola regular font, font size: 16, the subtext should be Roboto regular font, font size: 13.

Thank you again for your work. It is looking great.
Best, kurin

Thanks @S4v8n , I will do the remaing changes but I won't be to do the white background thing for the curved shapes given my ongoing GSoC period with Oppia.

Sounds good @AkashPaloju, Thanks for the response.

[nikitaevg]

Thanks!

[oppiabot]

Unassigning @nikitaevg since they have already approved the PR.

[oppiabot]

Hi @AkashPaloju, this PR is ready to be merged. Please address any remaining comments prior to merging, and feel free to ask someone to merge your PR once the CI checks pass and you're happy with it. Thanks!

[stepmalt]

The time stamps here are for the first video on this page:

Learn anything, anywhere with Oppia—your free educational platform.

At 0:07 — having your *own account. And add a line break before Through our Learner Groups.

0:10: Oppia is a non-profit project built by volunteers from around the world. We always need more people to create, improve and translate lessons, contribute graphics, and more!

Also only capitalize Subscribe in Subscribe to our newsletter at the bottom.

Since we are moving away from title case, don’t capitalize Teachers or Parents in the header for “For Teachers” and “For Parents”


Also, there’s not consistency with these buttons. Are we doing title case in buttons? I thought we weren’t, but I’m unsure. @seanlip

[AkashPaloju]

Hi, @S4v8n, @rflore , Thanks for your feedback, I have addressed the comments Could you PTAL at the updated videos ? Thanks!

Hi Akash, thank you for the latest video update. The desktop version looks better. There are couple things I noticed.

In Desktop version:

1. The first line "Learn anything through story based-lessons!" title should be across the page, font size: 28
2. Also are you able to apply the white background to have the curved shapes? see image below. If you are able to do it, there are two other areas that have the curve shapes on page. this would need to be applied to all screen versions.

One small thing I notice in the Mobile portrait mode.

• in section that starts with " Learn more about Oppia", the subtext font looks bigger than the title font.

• The titles "Learn by yourself" and the all titles should be in Capriola regular font, font size: 16, the subtext should be Roboto regular font, font size: 13.

Thank you again for your work. It is looking great.

Best, kurin

Hi @S4v8n ,
Reply for 'The first line "Learn anything through story based-lessons!" title should be across the page, font size: 28'
In this figma file given in the issue thread, in web version, the title is not across the page - fontsize-32px, the styles you are saying are for the tablet landscape mode. Also the text is 'Learn through story based-lessons!'.
So should I stick with that or change them as you said ?, Thanks!

[AkashPaloju]

@S4v8n , @stepmalt , Could you PTAL at the updated videos. Thanks!

[S4v8n]

@S4v8n , @stepmalt , Could you PTAL at the updated videos. Thanks!

Hi Akash,

Thank you for the latest changes. Here are my comments. These are smaller things I noticed that more spacing related.

Web:

1. you do not need to change the text format for "Learn through story based..." , please keep it how you have currently have it.
2. In Oppia classroom and Community lessons: spacing between graphic image ->subtext -> button, should be 24px. Please verify spacing.
3. "Having your account.." the subtext has a single word on the last line, please adjust to have it on the 2nd line. As a rule we should not have single word on a line, it must be two or more. (there will other areas that need to be updated as well)
4. "For teachers" - 24px spacing between graphics / subtext/ button
5. "For volunteers" - single word "more!" needs to be adjust to the 3rd line. Spacing 24px graphics/subtext/ button

Mobile
6. "What does Oppia have to offer.." - Verify the text is Capriola , weight 400, 20px, and separated into two lines. it currently looks smaller
7. Oppia classroom - spacing 16px - between graphics/subtext/ button
8. Community lessons - move "50+" to be with languages on the 3rd line. Spacing 16px -graphics/text/ button
9. For parents - "feature" need to be on the 4th line
10. For volunteer - text need to be below the Oppia graphic and above the button

Tablet
11. "anywhere" need to be on 2nd line.
12. Oppia classroom and Community lessons - spacing 24px - graphics/ subtext/ button
13. For teachers, "Through our learners sentence, should not have a break, it should continue on the same line a previous sentence. spacing 24px -graphics/ subtext/ button
14. For parents, "feature" need to be on the 3rd line with sentence, spacing 24px
15. For volunteers, spacing 24px

Thank you again for your work, it is looking really good.

Best,
Kurin

[AkashPaloju]

@S4v8n , I have addressed your comments and verified things you said, PTAL at the updated video. Thanks!

[S4v8n]

@S4v8n , I have addressed your comments and verified things you said, PTAL at the updated video. Thanks!

@AkashPaloju looks good! Thanks for the quick turn around. I have no further comments.

[AkashPaloju]

@seanlip Reviewers and Designers have approved the changes and all tests are passed. Please add this to Merge queue. Thanks!