feat(www): Implement Clerk's prebuilt components for seamless UX

[ousszizou]

…perience (closes Closes #155)

Description

Both the sign-in and sign-up components are now client-side due to the logic handling dark mode. While there's another logic to handle dark theme for Clerk's components which keep us identify them as server-side, it'll take some time to implement. This involves identifying the names of each part in the views and understanding how to customize them from the documentation. As a temporary solution, routes are client-side, which is acceptable as there's no real impact since we're not utilizing some features from Next.js 14, such as server actions.

What type of PR is this? (check all applicable)

• [x] 💡 Feature
• [ ] 🐛 Bug Fix
• [ ] 📝 Documentation Update
• [ ] 🎨 Style
• [ ] 🧑‍💻 Code Refactor
• [ ] 🔥 Performance Improvements
• [ ] ✅ Test
• [ ] 🤖 Build
• [ ] 🔁 CI
• [ ] 📦 Chore (Release)
• [ ] ⏩ Revert

Related Tickets & Documents

Closes #155

Mobile & Desktop Screenshots/Recordings

Steps to QA

Added to documentation?

• [ ] 📜 README.md
• [ ] 🙅 no documentation needed

[optional] Are there any post-deployment tasks we need to perform?

[optional] What gif best describes this PR or how it makes you feel?

[vercel[bot]]

@ousszizou is attempting to deploy a commit to the Salgsmaskin Team on Vercel.

A member of the Team first needs to authorize it.

[Codehagen]

Hi again mate, just saw we got a typeerror that you can look at the CI above.

Error: components/layout/navbar.tsx(10,10): error TS2305: Module '"./user-account-nav"' has no exported member 'NormalizedUser'.
Error: lib/utils.ts(7,10): error TS2305: Module '"@/components/layout/user-account-nav"' has no exported member 'NormalizedUser'.
 ELIFECYCLE  Command failed with exit code 2.
 ```
 
 Tell me if your struggling ✨

[Codehagen]

Hi there,

Great work on the PR so far! However, after reviewing the changes, I think we need to make a few adjustments to align with our project's design and functionality standards.

1. Consistent Login Button: It's essential that we maintain consistency across our user interface, especially with elements as crucial as the login button. Could you please revert the login button on the main page to its original design, as seen on badget.io? The primary reason for this is its responsiveness and the seamless experience it offers across different devices. Desktop: Phone:

2. Dedicated Sign-in Page: As discussed, we're aiming to provide users with multiple sign-in options to enhance accessibility and user choice. To this end, let's create a /signin route where we can utilize the <Signin/> component from Clerk. This approach will serve as an alternative for users who prefer to sign in with their email addresses instead of using Google authentication.

Also got a error when i tried to go into the application:

Tasks to Complete:

• [ ] Revert the login button to the original on badget.io.
• [ ] Create a /signin or /signup route to utilize the <Signin/> component from Clerk.