Build a Discover-like News Feed Page with Infinite Scroll and Repeating Layout

Task: Build a Discover-like News Feed Page (Front-end OA) Implement a web page similar to Perplexity Discover: https://www.perplexity.ai/discover (for interaction/layout reference only). You will be given dummy data and a callable fetch API to retrieve news items. Requirements Render a news feed Display a list of news cards. The layout repeats in this pattern: Show 1 headline (large card) Then show 3 small cards, arranged as a 3-card block with a left small card and a right small card (overall a 3-small-card layout) Repeat: next headline + 3 small cards... You may structure components as you like (e.g., HeadlineCard, SmallCard, FeedSection). Pagination + Infinite scroll Load data page by page via the provided fetch function. When the user scrolls near the bottom, automatically load the next page and append results. Prevent duplicate requests (e.g., do not trigger another load while a request is in flight). Scroll-to-bottom detection Implement bottom/near-bottom detection using either a scroll listener or IntersectionObserver. CSS styling Use CSS to achieve the repeating layout (headline large card + 3 small cards block). Keep the UI readable and well-structured at common viewport sizes. I/O and API Data source: dummy data and a fetch-like API will be provided. Use the returned data to render the feed and keep fetching on pagination triggers. Constraints Language: TypeScript. Time limit: 2 hours. Deliverable Working front-end code with clear componentization, infinite-scroll pagination logic, and CSS layout.