Results Page - Copy this React, Tailwind Component to your project

Design an engaging Results Page for your AI Interviewer project, featuring a dark theme with gradients of purple for text elements to enhance aesthetic appeal. Start with a full width Header Section that prominently displays the title "Interview Results" and a subtitle "Your feedback and scores are below," utilizing a gradient text effect (bg gradient to r from purple 400 to purple 600 text transparent bg clip text) for an eye catching presentation. Below, create a Summary Section that provides a brief overview of the interview performance, using visually striking gradient text for key metrics like "Overall Score" and "Feedback." Structure this section within a card layout, styled with a bg gray 800 rounded lg p 6 background to ensure readability. Next, add a Detailed Feedback Section, where specific feedback comments and areas for improvement are displayed, styled as a list with gradient highlights on key phrases. Include visual elements like bar graphs or progress indicators to represent different competencies assessed during the interview, utilizing vibrant shades of purple for consistency. Additionally, implement a Recommendations Section that suggests resources or actions for improvement, using a clear call to action button labeled "View Recommendations," styled as bg purple 600 text white font bold py 3 px 8 rounded lg hover:bg purple 500 transition transform duration 300 ease in out. Finally, incorporate a Return to Home Button at the bottom of the page, enabling users to navigate back easily, styled with the same button aesthetics. Ensure that all sections feature smooth animations, such as slide ins and fades, to create an engaging and dynamic user experience throughout the Results Page.