Enhanced Learn's landing page

[IIITM-Jay]

Issues

Currently the Read more link is written (with small tag) in continuation with the Introductory paragraph of the Learn's landing page, consequently which is not able to give more emphasis on the Read more link.

Changes Incorporated

• Added a Read More button so as to give a nicer and a better look.

Resultant Output as expected

Additional Changes

• Appropriate and necessary changes made to index.fr.md

[IIITM-Jay]

@avsm and @patricoferris, sorry to disturb at the moment.
Just a small contribution from my side . Waiting for valuable suggestions and guidance on the same.

[avsm]

Thanks for this! I've pushed it to the staging.ocaml.org so it can be inspected.

[IIITM-Jay]

@avsm Thank you once again for reviewing it. 🙏
It's working fine at the staging site.

[patricoferris]

Hi @IIITM-Jay,

Thanks for the hard work. I was reviewing this quickly on staging.ocaml.org and I think maybe it can be improved for mobile devices. What do you think?

[IIITM-Jay]

Thank you @patricoferris for your valuable suggestions and feedback. Surely, I will push some more commits with respect to the appropriate modifications required. 🙏

[IIITM-Jay]

New Changes Incorporated

• Added a new read-more button, in order to get the correct annotation of the same.
• Made necessary css stylings as required.
• Incorporated appropriate @media attributes for better enhanced view on mobile devices.

Resultant Output

[IIITM-Jay]

Hi @patricoferris ,
I have done some enhancements from my side to provide a better look for mobile devices , waiting for your valuable suggestions and guidance on the same... 🙏

Meanwhile appropriate and necessary changes are made to the French Version.

cc: @avsm

[IIITM-Jay]

Hi @patricoferris is the above layout okay for mobile devices

[IIITM-Jay]

Hi @avsm, I think now the conflicts has been resolved successfully 🙏

[patricoferris]

Hi @IIITM-Jay sorry for not getting round to this.

I'm not completely convinced by the layout of the mobile version, the large hat on its own, the body of text and then two buttons doesn't flow as well as I think it could. Perhaps we could take inspiration from #1254?

[IIITM-Jay]

Hi @IIITM-Jay sorry for not getting round to this.

I'm not completely convinced by the layout of the mobile version, the large hat on its own, the body of text and then two buttons doesn't flow as well as I think it could. Perhaps we could take inspiration from #1254?

Hi @patricoferris, I am not clear by the large hat on its own, may I request for any further elaboration...
By the flow of button you mean, the buttons must be displayed side by side...
And any required/ desired body of the text or some specific so that I can work upon it

[IIITM-Jay]

@avsm, may I request any feedback from your side on this... 🙏

[IIITM-Jay]

Hi @patricoferris,
Hmm, After going through your previous comment, the following three things were focused,( if I am not wrong) on which I would love to work upon in phases in a sequential manner:

1. The Hat logo which looks good on the desktop view but the same need some restructuring for mobile devices.
2. The Text on the landing page has perfect paragraph indentation but the same can't be seen for mobile view.
3. The Two buttons must have some proper alignment coordination with each other to give an enhanced view for mobile layout.

I am planning to complete these three works, as a part of revamping learn's landing page, in three different PRs in order to avoid difficulties while reviewing it and also to make sure that there should not be any confusion when changes have to be made in the same file for three different goals, in case may arise.
As I have started by the third task related to Read More... button in this PR, I will first complete this and once it gets successfully merged having met all the needed requirements and agreements, I will move ahead for the other two in the very near future.

Having said this, I have worked on it, to have the proper matching alignments in order to give the following view:

Hence, may I request @patricoferris for your valuable suggestions and feedback 🙏, so that I can proceed further for pushing the required commit.
Working on suggestions and gathering feedback as well as reframing one's ideas onto screen is my passion and love to do so.

[avsm]

Now pushed to staging.ocaml.org to verify it vs the current live site.

[IIITM-Jay]

sorry, @avsm I had only attached the screenshot of the changes that I have done locally in my last comment and was collecting feedback and respective suggestions on the same and then was thinking to push the required commit after having met all the necessary requirements (mentioned too in my comment).
Hence, now I think that the attached layout is being satisfied by you ( and hopefully by @patricoferris too ) and pushing the desired commit now.

Therefore, may I request to push it again on the staging site so that we can be able to see the desired changes 🙏

[IIITM-Jay]

Hi, @patricoferris, any further feedback and valuable suggestions from your side...
I think it's still remaining to be pushed on the staging site with the latest commit of this PR
Waiting to hear from you soon 🙏

[avsm]

This has now been pushed to the staging.ocaml.org site with the latest version of the changeset.

[avsm]

Just one tweak here; see the spacing on a larger desktop: it would be nice if there was more padding between the "read more" and the section below.

[patricoferris]

I think the changes to the CSS are making modifications to very widely used classes with unintentional impacts elsewhere. If we want the proposed changes they will need to be isolated to the specific use case here.

[avsm]

Just converting this to a draft PR until @IIITM-Jay has a chance to make the changes requested by @patricoferris