Layout Overview Surface

Compose a single-file component that assembles a content-rich layout with responsive cards, a tabbed resources area, a collapsible FAQ list, and a vertical step timeline. The component should emphasize clarity of content presentation rather than custom styling logic.

Capabilities

Highlight band with metrics

• Renders a header region with a title, subtitle, and three statistic blocks that align horizontally on wide screens and stack vertically on narrow screens. @test

Tabbed resources panel

• Provides at least three tabs (e.g., "Overview", "Docs", "Contact") where selecting a tab shows its body content, the first tab is active by default, and tab selection is preserved across re-renders. @test

Collapsible FAQ list

• Displays multiple FAQ entries where only one answer is expanded at a time; the first entry starts expanded, and selecting another entry collapses the previous one. @test

Timeline of steps

• Shows a chronological list with at least four steps, each with a title, timestamp, and description, rendered top-to-bottom with visible connectors between steps. @test

Implementation

@generates

API

export interface MetricItem {
  label: string;
  value: string;
}

export interface ResourceTab {
  name: string;
  content: string;
}

export interface FaqItem {
  question: string;
  answer: string;
}

export interface TimelineStep {
  title: string;
  time: string;
  details: string;
}

declare const Component: DefineComponent<{
  title: string;
  subtitle: string;
  metrics: MetricItem[];
  resources: ResourceTab[];
  faqs: FaqItem[];
  steps: TimelineStep[];
}>;

export default Component;

Dependencies { .dependencies }

primevue { .dependency }

UI component library providing layout and content display building blocks. @satisfied-by