sanyamjain04 commented 2 years ago

I have changed the position of images of container1 on the homepage and changed the position of container 3 on the homepage
I have tried to keep the design the same as this figma design mentioned in #174

changes I have done

localhost_3000_website_ (3)

screenshot of changes

1st change : images position

Responsiveness	before	after
Laptop - L 1440px
laptop - 1024px
tablet - 768px

2nd change: Learn cloud Native section

Responsiveness	before	after
Laptop - L 1440px
laptop - 1024px
tablet - 768px
mobile - 320px

these changes are responsive I have provided the screenshot also. please review my PR. If there is any kind of feedback comment down.

sanyamjain04 commented 2 years ago

hello @AvineshTripathi can you please review my PR? 🙂

AvineshTripathi commented 2 years ago

Will be reviewing today...Thank you

AvineshTripathi commented 2 years ago

@sanyamjain04 in mobile view I see start learning button not aligned and the font is a lot large so fix that too

sanyamjain04 commented 2 years ago

@AvineshTripathi I have fixed the button alignment can you tell me in which section font size is big?

AvineshTripathi commented 2 years ago

Learn cloud native word and other font too please have a look also in the design given the newletter part is different then current one please have a look

sanyamjain04 commented 2 years ago

In mobile view, the font size has been fixed and a button is also aligned center ✅	before	after

Till now I have made changes in the images section and in the cloud-native section. I have not touched the newsletter part now.

@AvineshTripathi Can you please review the changes? For the newsletter, and workshop part can I make a new PR including other changes around that also?

AvineshTripathi commented 2 years ago

Sorry for the trouble but we have some changes in the homepage https://www.figma.com/proto/DNiw9eEdr4XWVO9i2NMtNK/Kubesimplify-Website?page-id=0%3A1&node-id=157%3A46&starting-point-node-id=157%3A46&scaling=scale-down-width&hide-ui=1 so can you change accordingly? @sanyamjain04

sanyamjain04 commented 2 years ago

@AvineshTripathi yes, I have started making changes to the newsletter and workshop part. just like the desktop design, Is there any mobile responsive Figma design also?

AvineshTripathi commented 2 years ago

There is no mobile view design you can try your own way make sure things are same alignment and size can be changed

Note: docusaurous does give responsiveness however that might break so use that wisely

sanyamjain04 commented 2 years ago

174 I have redesigned the whole Home page component.

It matches with the Figma design.

This is the output. these changes are responsive. Home page component - Preview localhost_3000_website_

@AvineshTripathi Can you please review the changes?

sanyamjain04 commented 2 years ago

Hello, @AvineshTripathi I have fixed all the changes you mentioned above except the third one. Could you please tell me more about the third point? I have DM you at discord also.

sanyamjain04 commented 2 years ago

I have added new images and also added hyperlinks to the blogs. @AvineshTripathi can you please review the PR?

AvineshTripathi commented 2 years ago

plan is to show our blogs at kubesimplify but these doesn't seem to achieve that moto however if you don't have any idea how we do that just add text to each picture with the title of each blog to show users that images are actually blogs

P.S if you have different pictures that shows the user the blog content or anything(show that it is a blog on so and so topic) I am happy to merge those ideas too

Also for the footer I would suggest give some top padding a little not too much and also increase font of heading of the footer i.e. help us..... and make the sponsor card width fixed in mobile view it takes 90% width

sanyamjain04 commented 2 years ago

I have fixed the font size of help us and increased a little bit of padding-top in the footer. For the blog part, we can design a new component like the blog card I send you at discord. now I have added text under the image.

saiyam1814 commented 2 years ago

@sanyamjain04 Those images look great now, can you also link them to actual blogs ? like if people click on them , they should go to actual blogs.

AvineshTripathi commented 2 years ago

we have already added links to the blogs card I believe

sanyamjain04 commented 2 years ago

yes @saiyam1814 they are clickable images if the user clicks on particular images they will go to specific blog of kubesimplify

sanyamjain04 commented 2 years ago

hello @AvineshTripathi, Are there any changes left for this PR?

AvineshTripathi commented 2 years ago

Will do the final review in some hour, thank you for the contributions🚀

saiyam1814 commented 2 years ago

yes @saiyam1814 they are clickable images if the user clicks on particular images they will go to specific blog of kubesimplify

Great! What else is pending on this PR @AvineshTripathi ? good to merge?

AvineshTripathi commented 2 years ago

@sanyamjain04 I can see you have changed most of the buttons out there in homepage. Here is my view:

[ ] the text of start learning button is misaligned
[ ] navbar responsiveness after changes is broken in mobile view
[ ] I liked the enlargement of View video and View blogs button but the learn more , contribute and apply nowbutton in desktop mode is looking too large to me
[ ] the community dropdown in the navbar is overlapping with one of the blogs card(we should increase z index too make it as a upper layer if required however the navbar needs to be fixed)
[ ] Please change the text color of each buttons on the homepage(excluding navbar and footer) to black or a similar shade to the text of Email address
[ ] The underline effect on hover on each blog card is looking a bit odd to me I think only transparency on hover seems good(Your call)

P.S. I really liked the hover effect on each buttons and blogs card

saiyam1814 commented 2 years ago

@sanyamjain04 can you make the final set of changes asked by @AvineshTripathi and we should be good to merge this awesome PR!

sanyamjain04 commented 2 years ago

Changes made :

[X] Please change the text color of each button on the homepage(excluding the navbar and footer) to black or a similar shade to the text of the Email address ✅ change the color
[X] I liked the enlargement of the View video and View blogs button but the learn more , contribute and apply now button in desktop mode is looking too large to me ✅ reduced the size of the button's text to 15px from 18 px
[X] The underline effect on hover on each blog card is looking a bit odd to me I think only transparency on hover seems good(Your call) ✅ I have removed the underline text decoration (docusauras has added that I think )
[X] the community dropdown in the navbar is overlapping with one of the blogs cards (we should increase the z index to make it as an upper layer if required however the navbar needs to be fixed ✅ I have changed the position of the navbar to sticky and z- index too, now navbar will stick to the top while scrolling just like in Figma design

hello @AvineshTripathi ,Can you provide a little more details on these given bugs as they are working fine on my PC (any screenshots or specific breakpoints where they are breaking )
- the text of start learning button is misaligned
- navbar responsiveness after changes is broken in mobile view

AvineshTripathi commented 2 years ago

2022-09-05_15-37 2022-09-05_15-38

^^

sanyamjain04 commented 2 years ago

I don't know why it was not happening on my device, but I have changed some code. I think it will not create an issue again. hello @AvineshTripathi, can you tell me, is it fixed now ? my side the code is working fine

AvineshTripathi commented 2 years ago

I am merging this we will see if things are perfect in deployment if not will have another PR

sanyamjain04 commented 2 years ago

Ok

kubesimplify / website

Re-implement the Home Page #175

changes I have done

screenshot of changes

1st change : images position

2nd change: Learn cloud Native section

174 I have redesigned the whole Home page component.