mellow-design

As a user, I want to be able to use the frontend Home page to view the IPL Match Voting card, see Team A and Team B voting buttons, view live voting percentages, and see the current winner. Implement the Home page based on the existing JSX design (Home v2). The page should feature: center card layout with title 'IPL Match Voting', two rounded vote buttons for Team A and Team B, a live horizontal voting bar animation using accent color (#0073e6) for Team A and (#ffcc00) for Team B, real-time percentage display, and a winner highlight with glowing underline pulse effect. Buttons should be disabled after voting. This page is the single entry point per the user flow: Home → Browse Teams → Cast Vote → View Percentages → View Winner.

As a user, I want to be able to use the frontend voting functionality so that my vote is recorded, percentages update in real-time, and I cannot vote more than once. Implement all client-side JavaScript logic: vote counting, percentage calculation, localStorage-based vote tracking to prevent duplicate votes, button disable state after voting, ripple animation on button click, and dynamic winner determination (Team A / Team B / Tie). All logic must be contained within the single HTML file as per the tech stack constraint. Supports up to 10,000 votes without performance degradation.

As a user, I want to experience smooth animations and micro-interactions on the IPL voting page so that the interface feels dynamic and engaging. Implement: (1) background gradient animation that slowly shifts between #001f3f and #005099 for a 'breathing' effect, (2) live voting bar animation that dynamically fills in real-time with accent colors, (3) smooth hover transition on buttons from #005099 to #0073e6, (4) ripple animation spreading outward from click point on button press, (5) glowing pulsing underline effect on the winner's name. All animations must be CSS3-based with no external libraries.

As a user, I want to be able to access the IPL voting website on both desktop and mobile devices with full accessibility support. Ensure the layout is fully responsive across screen widths from 320px to 1920px. Implement WCAG 2.1 AA accessibility standards: proper contrast ratios, keyboard navigability, ARIA labels for voting buttons and result regions, focus states, and screen-reader-friendly markup. Validate mobile responsiveness on common breakpoints. Ensure page loads within 2 seconds on a standard 4G connection.