Adapt website footer for mobile and tablet version

[FelixMalfait]

We currently have two tools to build our website Twenty.com:

• Framer, which is well suited for beautiful landing pages
• A Next.js website which is used for pages that need dynamic content (e.g. pull github data or markdown files)

Example page managed by Framer: https://twenty.com/
Example page managed by NextJS: https://twenty.com/user-guide (it's ugly! and not launched. Will be redesigned soon!)

We've done a quick v1 for the footer which you can see on the NextJS page.
But we didn't adapt that design to work on mobile and tablet as it it is on the https://twenty.com/ website.

The goal of this ticket is to copy the behavior of the Framer website on mobile/tablet and implement it on the NextJS version.

Would be amazing if we use an object as source of truth for all links and not copy/paste into 3 files.

Code for NextJS website is in: https://github.com/twentyhq/twenty/tree/main/packages/twenty-website

[essofyany]

Hi @FelixMalfait ,
I'd like to work on this issue.

[Kanav-Arora]

Hi @essofyany

We have a PR down the line in which we are planning to introduce screensize hook in twenty-website. So to avoid any issues I'll be sharing the file path, name and code. Please use that hook to render different pages.

[essofyany]

Hi @Kanav-Arora
cool, can you share with me the PR link so I can take a look?

[Kanav-Arora]

@essofyany

I'll be commit code in this PR #3984

[Kanav-Arora]

Hi @essofyany
Check the PR for file useDeviceType file. Please follow same directory structure to avoid any merge conflicts in the future.

[FelixMalfait]

Hey we merged the PR but it turns out useDeviceType isn't a good solution. We should use https://emotion.sh/docs/media-queries#facepaint instead - fix coming soon

[FelixMalfait]

Ok the new method is finally merged - this is the best approach! #4169