Landing Page UI | Access Denied/Login Failed Page

[Ririio]

For Issue: #292 #204

• This pull request added a new UI for the landing page, with two new cards, website name and description.
• I tweaked the header to now have "absolute" position. This is to prevent overflowing when developers want to set the height to "full"
• The previous "Loading" file, has now change to "DisplayPage"
  • This is to have a more global message page
• I remove the name of the website on the header, and moved it to the landing page instead
  • The icon feels much cleaner compared to a text with aligning
• Domain and Certficate cards displays a brief description of what they are
  • A button for the "information" page
  • A button to redirect them to the main page

Demo #292

2023-03-09.09-59-59.mp4

Demo #204

2023-03-09.10-00-23.mp4

[Eakam1007]

Should we name this Help or Instructions instead?

[Ririio]

Do you think Instructions is fine if it contains other info aside from actual instructions?

[Eakam1007]

I think Instructions would be fine since the path itself is /instructions

[Ririio]

Alrighty

[Eakam1007]

So, did you end up not changing this?

[humphd]

This is looking great.

One thing about the 2 buttons in the cards. I think we should consider making the entire card clickable, and not have any buttons at all. I'd move the "Instructions" to the individual pages and include it as a link in the intro paragraphs on those pages (i.e., to learn more, see these instructions...).

[Ririio]

One thing about the 2 buttons in the cards. I think we should consider making the entire card clickable, and not have any buttons at all. I'd move the "Instructions" to the individual pages and include it as a link in the intro paragraphs on those pages (i.e., to learn more, see these instructions...).

That was my first iteration of the card actually, I spent a few hours trying to make it look better, but having a title and desc just doesn't work unless I add effects. After a while I decided to go with buttons to make it not empty

[Eakam1007]

I think you can wrap the entire card or its heading in a Link Chakra UI component.

[Ririio]

I think you can wrap the entire card in a Link Chakra UI component

I did create the first iteration as a clickable card, but I decided against it due to not having enough values to justify its existence. Unless we add hover effects, it just doesn't look right having a card with only a title and desc

[Eakam1007]

You could change the button text from Information to something else if you like but looks good to me

[humphd]

One thing about the 2 buttons in the cards. I think we should consider making the entire card clickable, and not have any buttons at all. I'd move the "Instructions" to the individual pages and include it as a link in the intro paragraphs on those pages (i.e., to learn more, see these instructions...).

That was my first iteration of the card actually, I spent a few hours trying to make it look better, but having a title and desc just doesn't work unless I add effects. After a while I decided to go with buttons to make it not empty

OK. I'd still move the "instructions" bit to the page itself, and only have a single call-to-action button for each card.

[Eakam1007]

A few things:

• You should remove the unused ButtonGroup import in langing-page-card.tsx Line 1
• Would it be better if the button took the entire width of the card?
  
• Also, you should add a Link to the instructions page in the card description

[humphd]

For the buttons, I would:

1. centre them in the card
2. Use "Manage" vs. "View" for the verb: "Manage DNS Records" and "Manage SSL Certificate"

[ghost]

@Ririio
Maybe I'm just missing it, but what is the license for that SVG image? Where is it from, what conditions is it come with? IMO we should document this (maybe a file next to the svg or something)

[Ririio]

@Ririio Maybe I'm just missing it, but what is the license for that SVG image? Where is it from, what conditions is it come with? IMO we should document this (maybe a file next to the svg or something)

https:/DevelopingSpace/starchart/blob/main/app/assets/LICENSE

The license is under here.
They provide you with the text info here https://undraw.co/license

[ghost]

Thanks, approved!

Outdated