here's our current home page. can you rebuild it. with shadcn/tailwind and build a little "Feedback" widget on the right side that collapses and un-collapses and allows a customer to choose whether its product feedback or a bug, and then check whether they'd like to be contacted by our support team
I'll rebuild your Page Vault homepage with shadcn/ui and Tailwind CSS, including the collapsible feedback widget you requested.
I've rebuilt your Page Vault homepage with shadcn/ui components and Tailwind CSS, closely matching the original design. Here's what I've included:
Main Layout:
- Blue navigation bar with all the buttons from the original
- Left sidebar with folder structure
- Main content area with the four action cards
Feedback Widget:
- Collapsible panel that slides in from the right side
- Toggle button fixed to the right edge of the screen
- Form with radio buttons to choose between product feedback or bug report
- Text area for detailed feedback
- Checkbox to indicate if they'd like to be contacted by support
- Submit button that validates and processes the feedback
The feedback widget uses Framer Motion for smooth animations and includes form validation to ensure users select a feedback type and provide a message before submitting.
I'll modify the feedback widget to make the button taller and narrower with larger text, and replace the radio buttons with image icons for bug and feature selection.
I've updated the feedback widget with the following changes:
Feedback Button:
- Made the button taller (increased padding with
py-10) - Made it narrower (reduced horizontal padding with
px-3) - Increased the text size and made it more prominent with
text-sm font-medium - Made the icon slightly larger
- Made the button taller (increased padding with
Bug vs. Feature Selection:
- Replaced the radio buttons with visual icon-based options
- Added a lightbulb icon for "Feature Idea"
- Added a bug icon for "Bug Report"
- Created a card-like design for each option that highlights when selected
- Added visual feedback with color coding (blue for features, red for bugs)
The new design is more visually appealing and intuitive, making it easier for users to select the type of feedback they want to provide. The icons create a more engaging experience compared to the standard radio buttons.