New Talawa-Docs HomePage - React/Typescript Experience Needed

[palisadoes]

The Talawa Documentation site at https://docs.talawa.io has a very basic home page.

The home page will be catering to non-profit administrators who want to manage their teams. So the layouts need to have a higher quality of clipart and greater use of royalty free images of people. The focus needs to be on:

1. the various features;
2. the advantages of using each of these features;
3. the benefits to the organization of using the feature, not to the IT team.

We need a more modern template, possibly one with screen width images and/or graphics. We are a small group of volunteers, and we need to project ourselves globally with confidence. Therefore we need the look of a Fortune 500 company on the home page. What’s behind the home page can be updated later.

Take a look at these global and industry specific sites for inspiration.

1. ChurchCRM
2. Infosys
3. Nokia
4. Tata
5. SalesForce
6. Cisco
7. Microsoft
8. Nestle
9. Bua Foods

Take a look at the Talawa Branding Requirements We need to make sure the design incorporates subtle elements of the Talawa color scheme.

We also need to address the key aspects not just of Talawa features but also that:

1. We are an open source project run 100% by volunteers.
2. We have been recognized by open source programs such as GSoC, Outreachy and the GitHub Externship.

We started working on this, but the idea stalled. There is a lot of guidance on that page as to what the content would be.

• https://github.com/PalisadoesFoundation/talawa-docs/issues/344

The https://docs.talawa.io website is automatically updated with new PR merges of the Talawa Docs repository.

1. Talawa Docs uses Docusaurus to generate its HTML content from markdown files.
2. You will need to be familiar with how to run docusaurus to verify any changes you make. The instructions are easy.
3. The current home page files seem to reside here: https://github.com/PalisadoesFoundation/talawa-docs/tree/develop/src
4. Docusaurus provides information on how to use non-markdown React and Typescript files with it. https://docusaurus.io/docs/creating-pages

Some additional information:

1. We will only consider persons with proven experience merging multiple typescript code PRs in this repository.
2. We will reopen the original https://github.com/PalisadoesFoundation/talawa-docs/issues/344 issue and assign it to you.
3. Using a template will be OK, as long as it meets the requirements in this and the other issue.

https://docs.talawa.io is the first impression people get of our website and it needs to be world class. Surprise us!

[aviraldevv]

@palisadoes Assign this to me I will fix it up on priority.

[palisadoes]

Ask to be assigned the Talawa-Docs issue too

[palisadoes]

@aviraldevv

1. Try to find a template that has similar elements to the last template discussed in the Docs issue. We already have suggestions related to it.
2. Try to use the Talawa branding colors for subtle highlights.
   1. In other words, a blue or red theme won't work.
   2. Yellow on white is not a good combination.

[spider076]

@palisadoes sir, can I also collaborate on this issue ?, I would like to work on the development part after the redesign of this home page.

[aviraldevv]

@aviraldevv

1. Try to find a template that has similar elements to the last template discussed in the Docs issue. We already have suggestions related to it.

2. Try to use the Talawa branding colors for subtle highlights.

   1. In other words, a blue or red theme won't work.
   2. Yellow on white is not a good combination.

@palisadoes I am up on it and doing the needful.

[TheoCathy]

Can we work together to solve this particular issue? I can collaborate with @aviraldevv on design or development aspect. It seems like a two man task given its priority. @palisadoes

[kayceeDev]

If this issue requires collaboration, Can I collaborate with @aviraldevv on this?

[aviraldevv]

Thanks for reaching out, @saadabban76, @TheoCathy, and @kayceeDev. I appreciate your willingness to offer assistance. I am open to any ideas or suggestions that you may have for improving the end user experience. I will surely consult you'll in case I get stuck. p.s.- design ideas and feedback will definitely help.

[aviraldevv]

@palisadoes @saadabban76 @TheoCathy @kayceeDev some inital work :) A lot of changes are coming up.

[spider076]

@aviraldevv the blur effect around the center title will highlight the title text in homepage, try to add it 👍🏼

[kayceeDev]

Yes. Add a dark overlay on the background image. This will help show the text content in the hero section.

[aviraldevv]

Does the image look good to you guys?? if you find any image which might look better send it to me I'll give it a try.

[aashimawadhwa]

We can also try adding Carousel of various images for the hero section.

[palisadoes]

Does the image look good to you guys?? if you find any image which might look better send it to me I'll give it a try.

We can fix the image later. The other components need attention as mentioned in the original issue.

[literalEval]

@aviraldevv please let me know if you have any discussion regarding the design :) I love reviewing designs :)

[Aimanosi]

This is an interesting project.

[aviraldevv]

EOD Update -

https://user-images.githubusercontent.com/121368112/226208443-c64f4ac5-9908-4541-8290-cf7d06b4024a.mp4

[palisadoes]

This is very good. It seems like you have figured out the basics.

1. Is there a way to mimic the design in the original issue?
2. For example: export a similar "one page website" typescript based template from an open source repo and adjust it to what we have?

[Cioppolo14]

It's looking good! I appreciate the updates!

[spider076]

EOD Update -

https://user-images.githubusercontent.com/121368112/226208443-c64f4ac5-9908-4541-8290-cf7d06b4024a.mp4

The design looks very good, appreciative 👏

[aviraldevv]

@palisadoes give me some time to explore available one-page templates. If I find a suitable template, I'll try to adapt it to our homepage. Alternatively, I can continue customizing our current design as we've been doing so far. It might take a bit of time, please let me know if you have any preferences .

[aviraldevv]

@palisadoes @Cioppolo14

I was considering creating the basic layout for our homepage by adding content row-wise, accompanied by appropriate headings. I would greatly appreciate your input and suggestions on the number of rows we should include, their order, and a basic idea of the content each row should have. We can customize on top of that later on.

[palisadoes]

@aviraldevv Check slack for the content

[github-actions[bot]]

This issue did not get any activity in the past 10 days and will be closed in 365 days if no update occurs. Please check if the develop branch has fixed it and report again or close the issue.

[aviraldevv]

Guys check out our new website it's up and running!

[aviraldevv]

@palisadoes we can close this issue now.

[literalEval]

@aviraldevv where ?

[anshgoyalevil]

@aviraldevv

I just checked the website.

• You have removed the dark theme support from the complete website.
• The home page is not 100% responsive.

[aviraldevv]

@anshgoyalevil

I know that I will be working on it in subsequent PRs. Dark theme support was removed intentionally we don't need it.

[aviraldevv]

@aviraldevv where ?

bro checkout http://docs.talawa.io/

[literalEval]

Cool

[spider076]

@aviraldevv where ?

bro checkout http://docs.talawa.io/

Nice work 👏

[aviraldevv]

Thanks @saadabban76 it really means a lot.