Problem Description

The objective is to create a simplified UI clone of the Replicate.com dashboard page as visualized in the provided screenshot. The clone will serve as a static visual representation without any backend functionality. The primary goal is to replicate the aesthetic and layout structure using Next.js, incorporating a specific set of UI components and styling tools.

Acceptance Criteria

Visual Accuracy: The UI clone must closely resemble the provided screenshot of the Replicate.com dashboard in layout and color scheme.
Framework and Libraries: The application must be built using Next.js with proper routing implemented through pages.tsx.
Layout Components: The layout must include:
A navbar at the top of the page
A tab navigation system below the navbar
A main content area to display the children components, specifically a table as seen in the screenshot
UI Library: Use the shadCN UI library components where possible to construct the UI elements.
Styling: Tailwind CSS must be used for styling the application to ensure modularity and responsiveness.
Code Organization: Components should be modular and reusable. The project structure should follow Next.js conventions for maintainability.
Static Data: The table and other UI components can be populated with static data to mimic the dynamic content.

Technical Details

Framework: Next.js
UI Library: shadCN UI
Styling: Tailwind CSS for custom designs and responsive layout.
Pages:
pages/index.tsx to represent the dashboard main page.
Layout:
components/Layout.tsx to define the overall page layout including the navbar, tab-nav, and main area.