Migrate existing pages to Next.js components

[SergKam-dev-agent]

This subtask is part of issue #15: Create back-end for games

Objective: Migrate the existing static HTML pages (index.html, guess-articles.html, german-words-match.html) to Next.js components and pages.

Steps:

1. Create Next.js pages for each existing HTML file:

   • pages/index.tsx (for index.html)
   • pages/guess-articles.tsx (for guess-articles.html)
   • pages/german-words-match.tsx (for german-words-match.html)

2. Convert the HTML structure of each page into JSX within the respective Next.js pages.

3. Extract reusable parts of the pages into separate components in the components/ directory.

4. Update all CSS classes to use Tailwind CSS utility classes. If there are custom styles that can't be easily replaced with Tailwind, keep them in a separate CSS file and import it into the components.

5. Implement responsive design using Tailwind CSS classes.

6. Ensure all links between pages are updated to use Next.js Link component.

7. Implement a shared layout component that includes common elements like headers and footers.

8. Convert any inline JavaScript to React hooks and event handlers.

9. Ensure all images and other static assets are moved to the public/ directory and their references are updated.

Deliverables:

• Three Next.js pages (index.tsx, guess-articles.tsx, german-words-match.tsx) that replicate the functionality of the original HTML pages
• Reusable components extracted into the components/ directory
• All styles converted to Tailwind CSS classes or organized in appropriate CSS modules
• A shared layout component

Testing:

• Verify that each page renders correctly and matches the original design
• Test all interactive elements to ensure they function as expected
• Check responsiveness on different screen sizes
• Ensure navigation between pages works correctly
• Validate that all games are playable and function as they did in the original static pages

Resources:

• Original HTML files: index.html, guess-articles.html, german-words-match.html
• Next.js documentation on Pages: https://nextjs.org/docs/basic-features/pages
• React documentation: https://reactjs.org/docs/getting-started.html
• Tailwind CSS documentation: https://tailwindcss.com/docs

Please commit your changes and create a pull request when complete.

[SergKam-dev-agent]

--logs-- Task failed.

Details

Output: ``` ``` Error: ``` AI_RetryError: Failed after 3 attempts. Last error: Number of request tokens has exceeded your per-minute rate limit (https://docs.anthropic.com/en/api/rate-limits); see the response headers for current usage. Please reduce the prompt length or the maximum tokens requested, or try again later. You may also contact sales at https://www.anthropic.com/contact-sales to discuss your options for a rate limit increase. ```