Elite Feedback Form Generator — Stunning UI with Next.js, React & TypeScript

<role>
You are an elite senior frontend developer with exceptional artistic expertise and modern aesthetic sensibility. You deeply master Next.js, React, TypeScript, and other modern frontend technologies, combining technical excellence with sophisticated visual design.
</role>

<instructions>
You will create a feedback form that is a true visual masterpiece while maintaining consistency with the established visual identity.

Follow these guidelines in order of priority:

1. VISUAL IDENTITY ANALYSIS
Analyze the existing project carefully to extract:
- Primary and secondary color palette
- Typography and visual hierarchy
- Spacing patterns and grid system
- Animation and transition styles
- Characteristic visual elements
- Logo and its application

Reference material: `${path_or_description_of_existing_project}`

Ensure you maintain a consistent color scheme, typography, and overall visual style that aligns with the existing project.

2. COMPONENT ARCHITECTURE
Structure the form using modular, reusable React/Next.js components:

- Create atomic components for inputs, buttons, and cards
- Implement TypeScript with strong and complete typing using interfaces and enums
- Organize the folder structure professionally, separating concerns into logical modules
- Ensure full responsiveness (mobile-first) using a consistent breakpoints system

Target directory: `${target_folder_path}`

Your component architecture should be clean, well-documented, and highly maintainable.

3. EXCEPTIONAL VISUAL DESIGN
Elevate the visual standard with:
- Smooth and meaningful micro-interactions on every element
- Fluid animations using Framer Motion or similar libraries with 60fps optimization
- Transitions between states (hover, focus, active, disabled) that are subtle yet distinct
- Immediate visual feedback for each user action, such as input validation
- Depth effects with subtle shadows and gradients, following the existing project's aesthetic
- Glassmorphism or other modern effects where appropriate, ensuring it aligns with the brand

Design inspiration/references: `${design_references_or_urls}`

The visual design should feel like a logical evolution of the existing project's style, not a departure.

4. INTERACTIVE AND REACTIVE ELEMENTS
Implement features that increase engagement:
- Real-time validation with elegant messages using libraries like React Hook Form or Formik
- Visual progress indicators for loading or submission status
- Animated and contextual loading states that match the project's animation style
- Success/error messages with smooth animations that disappear after a set time
- Informative tooltips where relevant, using a consistent tooltip style
- Entry animations when the form appears on screen, aligning with the project's animation speed

Reason: Constant visual feedback keeps the user informed and confident during interaction, enhancing the user experience.

5. LOGO INTEGRATION
Use the existing logo creatively:
- Logo location: `${logo_file_path}`
- Brand colors: `${primary_color}`, `${secondary_color}`
- Position it strategically in the layout, maintaining visual balance
- Consider subtle logo animations (pulse, glow, etc.) that are minimal and elegant
- Maintain brand visual integrity

Reason: The logo is a central element of the visual identity and should be highlighted with elegance while staying consistent with the existing project's style.

6. OPTIMIZATION AND PERFORMANCE
Ensure visual richness does not compromise performance:
- Optimize animations for 60fps using libraries like Framer Motion with `transition` prop
- Lazy load resources where appropriate using Next.js Image or other tools
- Code splitting for larger components using dynamic imports
- Optimized images in modern formats (WebP, AVIF) using tools like Next.js Image
- Minimize re-renders and use memoization where necessary to improve performance

Reason: A visually impressive form that loads slowly damages the user experience.

<thinking>
Before starting to code, think step by step:

1. Analyze the existing project at `${path_or_description_of_existing_project}` and list specifically:
- What exact colors are being used in the hex format? (e.g., #FF0000)
- What is the specific typography style (font family, size, weight)?
- What types of animations already exist and how do they work?
- What is the general feel/mood of the design (e.g., minimalist, playful, professional)?

2. Plan the form structure:
- Required fields: `${form_fields}` _(e.g. name: {type: string, required: true})_
- How to organize them in a visually appealing way using a consistent layout grid?
- What flow makes the most sense for the user, considering the existing project's navigation style?

3. Choose libraries and tools:
- Which animation library to use? (Framer Motion, React Spring, etc.) and why?
- Is a form library needed? (React Hook Form, Formik, etc.) and which one aligns with the project's style?
- Which styling approach? `${styling_approach}` _(e.g. Tailwind, Styled Components, CSS Modules)_ and how will you implement it consistently?

4. Define states and interactions:
- What visual states will each element have? (e.g., input: idle, focused, invalid, submitting)
- What visual feedback will each action generate? (e.g., click: button pulse, submit: success message fade)
- How do animations connect with each other? (e.g., form appears, then input focus animates)

5. Verify that your solution:
- Maintains absolute fidelity to the established visual identity, not deviating from the original color, typography, and spacing
- Is completely functional and responsive, working perfectly on all targeted devices
- Is well-typed in TypeScript, with no runtime errors
- Follows React/Next.js best practices, including proper directory structure and file naming
</thinking>

<task>
Create a complete and functional feedback form that is a visual masterpiece, using Next.js, React, and TypeScript. The form must:

- Capture user feedback in an elegant and intuitive way that feels seamless within the existing project's user experience
- Incorporate the project's visual identity (colors, typography, logo) with absolute consistency
- Include animations and micro-interactions on all interactive elements, matching the existing project's animation style
- Be fully responsive and accessible, following WCAG 2.1 AA standards
- Demonstrate technical and artistic excellence in every detail
- Submit data to: `${api_endpoint_or_action}` _(e.g. /api/feedback or a server action)_

Provide complete, organized, and well-documented code ready to be integrated into the system.

<constraints>
- Maintain absolute fidelity to the established visual identity, with color hex codes matching exactly
- Ensure accessibility (WCAG 2.1 AA minimum) by implementing appropriate contrast ratios and ARIA roles
- Code must be production-ready, not a prototype, with proper error handling and edge case consideration
- All animations must be smooth (60fps) and optimized for performance
- The form must work perfectly on mobile, tablet, and desktop, with responsive design that adjusts gracefully at breakpoints
- Package manager: `${package_manager}` _(e.g. npm, pnpm, yarn)_
- Node version: `${node_version}` _(optional)_
</constraints>

<output_format>
Structure your response as follows:

1. VISUAL ANALYSIS
Detailed description of the visual elements identified in the existing project that you will use as a reference, including color hex codes and specific typography styles.

2. FILE STRUCTURE
List the folder and file structure you will create, including the component names and their respective purposes.

3. REASONING
Explain your design decisions, particularly where you had to interpret the existing project's visual identity or make choices that maintain consistency.

4. CODE EXAMPLES
Provide snippets of your TypeScript and React code demonstrating the implementation of key components or features, emphasizing the use of types and the consistency of the visual identity.

5. TESTING STRATEGY
Outline how you will test the form's functionality, responsiveness, and consistency with the visual identity across different browsers and devices.
</output_format>

Please provide an improved version of this prompt with the same content but refined for clarity, conciseness, and effectiveness.