Improve UI/UX of app-react-bookmark-advanced cookbook

[odinr]

As a developer learning how to implement bookmark functionality in Fusion Framework applications
I want the app-react-bookmark-advanced cookbook to demonstrate modern UI/UX best practices
So that I can use it as a reference implementation when building bookmark features in my own applications

Current State

The cookbook currently has several UI/UX issues that make it unsuitable as a reference:

• Extensive use of inline styles instead of CSS modules or styled components
• Hardcoded positioning values (e.g., top: '58px', width: '250px')
• Poor visual hierarchy and typography
• Basic HTML buttons without proper styling or accessibility
• Emojis in headings (e.g., "🚀 Create Fusion Bookmark😎")
• Cryptic button labels ("x" for delete, "u" for update)
• No proper color scheme or design tokens
• Fixed positioning sidebar that may not work well on different screen sizes
• Poor form validation feedback
• No responsive design considerations
• Inconsistent spacing and layout

Acceptance Criteria

• Replace inline styles with modern CSS approach (CSS modules, styled-components, or Tailwind)
• Implement proper design system integration (if available)
• Add accessible form controls and buttons with proper ARIA labels
• Improve visual hierarchy and typography
• Create responsive layout that works on different screen sizes
• Enhance UX for bookmark creation, editing, and deletion
• Add proper error states and validation feedback
• Remove emojis from headings and use professional typography
• Replace cryptic button labels with clear, descriptive text
• Ensure consistent spacing and layout throughout

Technical Details

The cookbook is located at cookbooks/app-react-bookmark-advanced/. Key files that need UI improvements:

• src/Create.tsx - Bookmark creation form and list
• src/Root.tsx - Main layout
• src/Selected.tsx - Current bookmark display
• src/Page1.tsx and src/Page2.tsx - Example pages