twentyhq / twenty

Building a modern alternative to Salesforce, powered by the community.
https://twenty.com
GNU Affero General Public License v3.0
15.71k stars 1.7k forks source link

New User guide styling #3960

Closed Bonapara closed 6 months ago

Bonapara commented 6 months ago

Current behavior

We have completed the initial version of the user guide, but it is not yet available online.

Screenshot 2024-02-14 at 10 41 40

Desired behavior

We aim to enhance its design before online publication:

image

https://www.figma.com/file/aNpCjwN9wg2DqLWAHPS0ll/%F0%9F%8C%8D-Website-%26-Marketing?type=design&node-id=252-14685&mode=design&t=XF47MemVcHVfJEtr-11

For V1, don't implement the breadcrumb and Section pages. Create the styles for the Inter font.

Screenshot 2024-02-14 at 11 04 47

We only use the 'Mobile' font size for the Gabarito font. This ensures titles and fonts don't appear oversized, even on desktop.

Effects

Apply smooth transitions using Framer Motion. Use the "Present" view to preview the animations in Figma

https://github.com/twentyhq/twenty/assets/19412894/b5fed9a0-9db6-47e8-89f6-6857c6087ecb

Kanav-Arora commented 6 months ago

Hi @Bonapara I can work on this

Bonapara commented 6 months ago

Thanks so much @Kanav-Arora !

manya706 commented 6 months ago

Please can i also join?

Bonapara commented 6 months ago

@Kanav-Arora can @manya706 help you?

Kanav-Arora commented 6 months ago

Hi @Bonapara Sure

Bonapara commented 6 months ago

Amazing, thanks to you both!

Bonapara commented 6 months ago

@Kanav-Arora and @manya706, I just realized that we need to add a few more things to make it responsive.

Specifically, we need:

Here is the updated design:

User-guide homepage

image image

A breadcrumb at the top

CleanShot 2024-02-14 at 16 55 05 CleanShot 2024-02-14 at 16 56 34

(Mobile = short breadcrumb)

Please ask me if you have any questions about the behaviors!