Gratitext page design

[kentcdodds]

Summary

This PR introduces the new design system based on the provided Figma link. Key changes include:

• Updated CSS variables for colors (Teal/Green primary, Cream accents) and border-radius.
• Refreshed styling for Button, Input, Textarea, and DropdownMenu components to incorporate rounded corners and updated padding.
• Applied the new color scheme and typography to the homepage and main application layout.

Test Plan

1. Start the application: npm run dev
2. Navigate to the homepage (/).
3. Navigate to the login page (/login).
4. Navigate to the signup page (/signup).
5. Verify that the colors, typography, button styles, input fields, and overall layout match the provided screenshots and video, aligning with the Figma design.

Checklist

• Tests updated
• Docs updated

Screenshots

The video demonstrates the new Teal/Green design, rounded buttons, and updated typography across the Homepage, Login, and Signup pages.

---

 

[cursor]

Cursor Agent can help with this pull request. Just @cursor in comments and I'll start working on changes in this branch.
_{Learn more about Cursor Agents}