Nicholai
d0579590bb
- Added a new document outlining the tasks and resources for the website's design overhaul, including style modifications, component refactoring, and updated color palettes. - Included detailed guidelines for the development workflow, emphasizing the use of tools and thorough code evaluation. - Documented the technology stack and libraries to be utilized in the migration process, ensuring alignment with the new design system. - Provided a phased migration strategy to facilitate a smooth transition to the new design language. This commit establishes a clear framework for implementing the new design system, enhancing both developer experience and user interface consistency.
45 lines
1.8 KiB
Markdown
45 lines
1.8 KiB
Markdown
# YOUR TASK
|
|
|
|
- Restyle the website following the design.json
|
|
- Preserve the existing layout and UI flow.
|
|
- Elevate the existing site by modifying the styles and components according to the design system and design.json
|
|
- Remove current Hero image and replace with @UP1_00011_.png
|
|
- Refactor current navigation and create something more minimal and beautiful.
|
|
- Update the color palette and core components.
|
|
|
|
## Resources
|
|
|
|
Provided and ready for implementation on the live site are a variety of new images in design-language/
|
|
|
|
There are also three comprehensive design guides that embody the ideals of the new United Tattoo branding for 2026:
|
|
@design.json @DESIGN_SYSTEM_SUMMARY.md
|
|
|
|
@index.html contains an example page (not to be copied) that embodies the style we're going for.
|
|
|
|
- `design.json`, which outlines our design guidelines in a technical, structured format.
|
|
- There is also a design system summary document, which outlines our tone and reinforces the overall design language.
|
|
- @CLAUDE.md contains useful development information which will be useful to you as you work.
|
|
|
|
## Guidelines and Workflow
|
|
|
|
- You must thoroughly lint and evaluate the code you write as you write it.
|
|
- Use the tools at your disposal: Search the web, utilize context7, and use shadcn for components where applicable.
|
|
- USE THE BROWSER, you have access to a web browser where you can thoroughly examine the site and test user flows. ALWAYS REFERENCE THE BROWSER VISUALLY TO EVALUATE YOUR PROGRESS.
|
|
|
|
## Framework and Libraries
|
|
|
|
**Libraries** *to be applied where applicable*
|
|
- Shadcn
|
|
- Framer-Motion
|
|
- Lenis (smooth scrolling)
|
|
|
|
**Stack:**
|
|
- Next.js 14 (App Router) with TypeScript
|
|
- Cloudflare D1 (SQLite) for database
|
|
- Cloudflare R2 for file storage
|
|
- NextAuth.js for authentication
|
|
- Deployed via OpenNext on Cloudflare Workers
|
|
- ShadCN UI components + Tailwind CSS
|
|
- Vitest for testing
|
|
|