feat: apisix-website redesign, add redesigned-site sections and styles (sub-pr3)

[1502shivam-singh]

Apache APISIX website redesign (sub-pr 3)

This large feature addition wil be done through 3 chained PRs which for easier reviews and merging. Please merge all these 3 sub PRs together, in ascending order for no breaking changes. Dependency flow is like PR3 depends on PR2, depends on PR1.

Update: PR1, PR2 merged. This PR is ready to be merged now.

Changes:

Addition of the redesigned sections and stylesheets.

resolve #450

[1502shivam-singh]

cc @juzhiyuan merge this in place of #496 (previous got it's history too unclean, so closed it)

[juzhiyuan]

really a large PR. cc @Baoyuantop @guoqqqi to have a look.

[1502shivam-singh]

Any updates on this ?
EDIT: cc @guoqqqi @Baoyuantop

[juzhiyuan]

ping @guoqqqi

[guoqqqi]

Sorry for the late reply, great page, thank you for your contribution, there are a few minor issues regarding this PR.

1. it seems that the adaptive layout has not been done and needs to be updated
2. each file needs to be formatted with code. We use 2 spaces as standard
   Thank you very much for your contribution!
3. If you have time, please take care of the conflicting files, thank you very much!
   
   

[guoqqqi]

also cc @Baoyuantop have a look

[1502shivam-singh]

Appreciate the focus on code formatting here and the review.

1. it seems that the adaptive layout has not been done and needs to be updated

Responsive behaviour is already implemented, check below clip (excuse the stutter at start) for same emulator configuration and no changes to css. Might want to recheck, or make sure assets are not being blocked maybe or something i guess etc.

show.mp4

3. If you have time, please take care of the conflicting files, thank you very much!

Sure.

[juzhiyuan]

666 👏

[1502shivam-singh]

666 👏

Pardon my ignorance here, but didn't get it (number of the devil 😱😱lol)

EDIT: Is it this - 牛牛牛 context

[juzhiyuan]

666 👏

Pardon my ignorance here, but didn't get it (number of the devil 😱😱lol)

EDIT: Is it this - 牛牛牛 context

(liù liù liù), used to describe someone or something is very powerful,cool,impressive.

😄 Waiting for others' review.

[Baoyuantop]

Thank you for your hard work @1502shivam-singh, the effect looks great~
I have a proposal about the first part, this is the current preview:

I know you want to use the animation on the right to express Effortless and smooth, the animation is very cool, but I feel a sense of separation between the left and right sides. I think it would be better to use the animation on the right as the background of the content on the left. Or adjust the color on the right, what do you think?
What about the opinions of others?

[1502shivam-singh]

I know you want to use the animation on the right to express Effortless and smooth, the animation is very cool, but I feel a sense of separation between the left and right sides.

Could you please elaborate more on this, what makes you feel the disjoint. Is it to do with the relatively small font-size and more than necessary white space ? (I witnessed this now, from your shot. Working on laptop at lower than 1600 is the reason)

I have pushed some changes now, check them out for appropriate font sizes and margins for higher than 1600px resolutions.

I think it would be better to use the animation on the right as the background of the content on the left. Or adjust the color on the right, what do you think? What about the opinions of others?

This is a nice suggestion for alot of case. But here, problem is stretching. The shader that creates that particle system on right interpolates it in between corners. So, full screen one would stretch. If I were to adjust the stretch it would lead to a good amount of emptiness on both side.
This is kind of my goto layout (right visual element, left text and cta). Something visible a lot in graphic designs, eg. Magazines.

[Baoyuantop]

Ok, I get it, I just think the white background on the left and the black background on the right has a strong sense of opposition.

What if the right side is adjusted to white? 😁 @1502shivam-singh

[1502shivam-singh]

Ok, I get it, I just think the white background on the left and the black background on the right has a strong sense of opposition.

This is exactly what contrast does that you have mentioned here, though it helps in graphic design by enticing visual interest.

What if the right side is adjusted to white? 😁 @1502shivam-singh

Here, you will see the difference. I understand you are trying for color harmony here but that hides some finer details i want to showcase in that wave (like the combo of red and purple color) also the page seems emptier than necessary and doesn't have that visual captivity than before.

[1502shivam-singh]

So I assume we all have an agreement finally, is it ?

cc @Baoyuantop @guoqqqi @juzhiyuan
Please approve changes if you are in agreement.

[guoqqqi]

Sorry for the late reply, thanks for the update, I have rechecked and found the following issues:

1. the styles on the iPhone 5 phone size need to be adjusted, they now look completely messed up
   
2. it doesn't seem to adjust itself when I reduce the size of the large screen window, which I think is a problem that can't be ignored; if you reduce your browser window I'm sure you can easily reproduce these issues
   
   
   
3. Would you like to change the background tones on the left and right sides of the section to the same colour to see the effect?
   

[1502shivam-singh]

Done, also thanks for the heads up

3. Would you like to change the background tones on the left and right sides of the section to the same colour to see the effect?

Not really, you can check this reply of mine, for a similar question from above to understand why. Mainly it's related to contrast and for showcasing details, and bringing both to the same tone (whitish here) barely makes the effect visible. I have tried a number of color combinations and this one suits the best.

approve when free @guoqqqi @Baoyuantop.

[guoqqqi]

There are still some defects present:

1. 
2. 
3. 
4. 
5. 
6. 
   

[1502shivam-singh]

There are still some defects present:

@guoqqqi , I really appreciate the detailed reviews, but TBH now I feel some of the issues coming up are mostly nitpicking. So, I would appreciate more that you highlight only issues that seriously hurt the UX because some of the ones highlighted above (though now all are solved) are more of supposedly recreated ones or are not intended to be viewed that way in the first place on a specific device (honestly, few took me sometime to actually recreate)

Hope you understand what I mean here.

I don't think there are any more such issues given we have really thoroughly dig deep into the UI (if you find one that seems serious, please report).
Thanks :)

[juzhiyuan]

also, cc @Baoyuantop to have a review.

[guoqqqi]

Thank you very much for your contribution

[1502shivam-singh]

Thank you very much for your contribution

Thanks to both of you (@guoqqqi and @Baoyuantop) for being the first hand user tester of my redesign.
Really appreciate you guys helping out :)