Create a single-page website for GameForce

kryvyifedir commented 4 months ago

Create a single page website for GameForce. It should be hosted through gist directly from the repo Website structure: TabIcon: https://1drv.ms/i/s!Alu2dJOvQjruvvtGykJ1h3aw2X_Gyw?e=96tde8

Header + Title:

Buttons on the left to navigate to "Features" "Guides" "Articles" sections
Green button on the right to go to App Exchange
Title: "GameForce"
Subtitle: "GameForce is an open-source project that aims to bring Xbox/Playstation-like achievements into Salesforce. Gamification is a proven and unobtrusive way to boost engagement and productivity by leveraging the natural competitive instinct in people. It can help employees develop their skills and be more motivated while making their job more engaging and fun."

"Features section"

No header is needed for the section Card 1 (text 2/3 + image 1/3):

Text Title: Simple configuration
Text Content: GameForce relies on a pre-built list of achievements and simple and yet robust configuration process to make sure your users can use the app and get the benefits as soon as possible
Image: https://1drv.ms/i/s!Alu2dJOvQjruvvtKVFaHrsfe3t-m4A?e=5CE1bp

Card 2 (image 1/3 + image 2/3):

Text Title: Compete with your teammates
Text Content: GameForce Leaderboard facilitates competitive spirit and motivates your users to achieve more
Image: https://1drv.ms/i/s!Alu2dJOvQjruvvtJGYjIyXjyIfnftw?e=YbGlNs

Card 3 (text 2/3 + image 1/3):

Text Title: Extend the functionality to your own liking
Text Content: Create your own custom achievements and integrate GameForce with your existing business processes using Flows or Apex
Image: https://1drv.ms/i/s!Alu2dJOvQjruvvtLdJaOBFko-FgaeQ?e=xW9Pzb

Video guide section

No header is needed for the section Youtube videos scrolled horizontally. Videos will be recorded later on so mock videos should be used for now

Blog section:

No header is needed for the section Blog articles taken from Newletter: https://www.linkedin.com/newsletters/gameforce-7165796654950825984/ Laptop: 3 displayed at once Phone: 1 displayed Same horizontal scroll is used as for videos

Fotter

Footer: Includes github, linkedin and email links

Website contents has to be added to exclusion of pipeline files to not to trigger builds when changes are made

chehrynets-anzhelika commented 3 months ago

How many posts will there be in the blog section? Now the layout is designed for three. If there are more, I can suggest adding a button that, when clicked, will load the rest. If the button is not needed, I can show all the posts in the section at once. 2024-03-31 110924 @kryvyifedir

chehrynets-anzhelika commented 3 months ago

I suggest adding another intro section, which will contain an h1, maybe an image instead of a background, and a little about the essence of the project. The screenshots show how the layout could look with and without this section. 2024-03-31 135011 2024-03-31 134821 2024-03-31 135141 @kryvyifedir

kryvyifedir commented 3 months ago

@chehrynets-anzhelika Some of the comments regarding current state of the site + answers to your questions:

"H1 section" is nice, but I don't yet see that header buttons stay on top of the screen when I scroll down.
I've noticed that when I click on top header buttons it just jumps to the section. Is it possible to make it navigate using inertial scroll with CSS?
I am writing blogposts to describe the progress that was made on the project. There are 8 articles already and there will be more. I like the fact that 3 are shown, and I would include carousel to show more instead of a "Load more" button (on the phone layout it would make sense to show 1 article in the carousel)
Remove titles from subsections like "Blog" "Guide videos" etc.
I see that subheader 1,2,3 section (features) heights are defined by the image height (height="350"), I think feature it self should have max height (somewhere around 250) and image should adapt to it (at least on Laptop viewport)

kryvyifedir commented 3 months ago

@chehrynets-anzhelika please have a look at an updated issue - it contains content + links to images for features etc.

chehrynets-anzhelika commented 3 months ago

@kryvyifedir Please check the links in the footer, maybe the addresses need to be changed. Also please check the Articles section to ensure that the descriptions are appropriate or should be replaced; if replace, I need text.

kryvyifedir commented 3 months ago

@chehrynets-anzhelika Links are good

This doesn't look like image and text have 2/1 proportion:

You would probably have to use some grid system for that. Also, I don't think that styles like this are a good idea:

As far as I remember it should be in rem or % not px

Articles section seems to be broken:

Also here is what I see after git pull in code:

chehrynets-anzhelika commented 3 months ago

I think, this looks better. 2024-04-02 193217

chehrynets-anzhelika commented 3 months ago

Articles section seems to be broken: @kryvyifedir I added information about the articles to a separate json file for the convenience of adding additional articles. And now, if you just run the project through the browser, CORS blocks the request. For now it can be opened using the built-in server in the IDE, but when I push the project to Github Pages there will be no such problem.

kryvyifedir commented 3 months ago

Articles section seems to be broken: @kryvyifedir I added information about the articles to a separate json file for the convenience of adding additional articles. And now, if you just run the project through the browser, CORS blocks the request. For now it can be opened using the built-in server in the IDE, but when I push the project to Github Pages there will be no such problem.

@chehrynets-anzhelika This is not an option for me, please revert it to simple markdown without JSON (I don't need to see all articles, you can add 4 articles just to see how carousel works.) I think we are good with the looks of it. Let's make it adapt to phone layout and that is it

chehrynets-anzhelika commented 3 months ago

This is not an option for me, please revert it to simple markdown without JSON (I don't need to see all articles, you can add 4 articles just to see how carousel works.) @kryvyifedir This part is as before and with a working slider. Please pay attention to the text in the post card to see if it is centered reasonably. Now the slider moves three cards with each click, I can make it move only one card (while three will still remain in the visibility block.) if necessary.

kryvyifedir commented 3 months ago

@chehrynets-anzhelika looks good. "Now the slider moves three cards with each click" - exactly how I wanted. I think you can focus on responsiveness and we are good to go

chehrynets-anzhelika commented 3 months ago

I removed the pagination of dots on the second slider, because with each new article a new dot appears. It doesn’t look very good on the mobile version and there are 8 articles so far. Should I hide the dots on the mobile version and show them on the desktop? Or leave it as is?

kryvyifedir commented 3 months ago

@chehrynets-anzhelika I've checked the final version on mobile and it looks good. The only thing that I've noticed is that carousel elements are looking differently:

Is there a way to make them look the same? (bottom variant with arrows below the content)

Also, can we fully remove images from "features" for mobile view:

chehrynets-anzhelika commented 3 months ago

@kryvyifedir Ok, I'll do it soon.

kryvyifedir / score-hub