Frontend Discover Infinite Scroll

Build a TypeScript frontend similar to Perplexity Discover using provided dummy data and fetch helpers. The core work is pagination, infinite scroll, component structure, and CSS layout. Requirements Build a page similar to Perplexity Discover. Use the provided dummy data and fetch function. Implement pagination and load more content when scrolling to the bottom. Build reusable components for the news cards and page structure. Match the reported repeating layout: one headline item, then three small items, one left item, and one right item. Implement CSS for the responsive card/grid layout. AI tools are explicitly not allowed for this OA. Notes This is a frontend-specific OA; backend Perplexity OA reports are usually Python. The important signal is a working infinite-scroll page with clean component boundaries, not visual perfection. The canonical implementation uses an IntersectionObserver on a sentinel element at the end of the list, with rootMargin set to a positive value (e.g. 100px or 200px) so the next page begins loading before the sentinel hits the viewport. Watch out for duplicate fetches, repeated page cursors, and scroll handlers that keep firing while a request is in flight. Guard with an isLoading flag set inside the observer callback and cleared after the request resolves; otherwise the observer fires repeatedly as the sentinel stays intersected. Preparation Practice a two-hour React / TypeScript implementation using a mocked paginated API. Implement a useInfiniteScroll hook backed by IntersectionObserver: observe a sentinel ref, store nextCursor in state, and return { items, isLoading, hasMore }. Add visible loading, empty, and end-of-feed states even if the prompt does not emphasize them. Pre-build a small grid CSS template that matches a 1-headline / 3-small / 1-left / 1-right repeating pattern so layout time does not eat coding time.