Implement lower half of the homepage layout #8
Description
Description:
Implement the lower section of the homepage based on the legacy EHK design, with some modernized enhancements where appropriate. Layout and content structure should follow the specification from this Google Sheet.
Layout Specification:
Center area:
• Display the 6 latest news items from the CMS.
• News should be displayed in 2 rows of 3 items each.
• Add pagination controls below the two rows:
• User can navigate to the next or previous page of news (e.g. items 7–12, 13–18, etc.).
• Show current page number and total page count if applicable.
• Each news card includes title, short description, date, and thumbnail (if available).
• Clicking a news card navigates to the dedicated news detail page.
• Cards must be fully responsive (desktop/tablet/mobile).
• Use the same hover effect as on the legacy site.
• Show a loading state while fetching news data.
• Fallback message if no news is available.
Left sidebar:
• Top: A list of important links (see spreadsheet).
• Bottom: Placeholder for an interactive calendar (handled in a separate issue).
Right sidebar:
• Links to online platforms (Facebook, Instagram, etc. as per spreadsheet).
• Use appropriate icons and responsive design.
• All external links should open in a new tab (target="_blank").
Requirements:
• Fully responsive layout across all screen sizes.
• Follow the legacy EHK site design closely, with minor stylistic improvements allowed.
• Loading state active until all content and images have finished loading.
• Display appropriate fallback messages if data is missing or fails to load.
• All UI elements must support bilingual content (Hungarian/English).
• Ensure accessibility and good performance practices.