From f03187088e60b39fc0cc3cf2972934076e03a38f Mon Sep 17 00:00:00 2001
From: "gitscribe-bot[bot]"
<260092779+gitscribe-bot[bot]@users.noreply.github.com>
Date: Sun, 17 May 2026 08:30:48 +0000
Subject: [PATCH 1/2] chore: update AI-generated docs/tests
---
.../_context/interview-context.tsx.md | 65 +++++++++++++++++++
.../arena/_components/arena-canvas.tsx.md | 56 ++++++++++++++++
.../arena/_components/node-sidebar.tsx.md | 50 ++++++++++++++
3 files changed, 171 insertions(+)
create mode 100644 docs/generated/src/app/(dashboard)/dashboard/interview/[interviewId]/_context/interview-context.tsx.md
create mode 100644 docs/generated/src/app/(dashboard)/dashboard/practice/design/[id]/arena/_components/arena-canvas.tsx.md
create mode 100644 docs/generated/src/app/(dashboard)/dashboard/practice/design/[id]/arena/_components/node-sidebar.tsx.md
diff --git a/docs/generated/src/app/(dashboard)/dashboard/interview/[interviewId]/_context/interview-context.tsx.md b/docs/generated/src/app/(dashboard)/dashboard/interview/[interviewId]/_context/interview-context.tsx.md
new file mode 100644
index 0000000..99e11a0
--- /dev/null
+++ b/docs/generated/src/app/(dashboard)/dashboard/interview/[interviewId]/_context/interview-context.tsx.md
@@ -0,0 +1,65 @@
+# Interview Context Documentation
+
+The `interview-context.tsx` file provides a centralized state management system for the interview experience. It handles real-time chat, audio recording (STT), media playback, and interview lifecycle management (start/end).
+
+## Overview
+This module uses React Context to expose interview-related state and actions to the component tree. It integrates with `@ai-sdk/react` for streaming chat responses and a custom `useInterviewMedia` hook for handling microphone input and audio output.
+
+## Key Components
+
+### `InterviewContextProvider`
+The provider component that wraps the interview interface. It manages:
+* **Chat State:** Uses `useChat` with a custom `DefaultChatTransport` to stream messages to the backend.
+* **Interview Lifecycle:** Tracks status (`SETUP`, `IN_PROGRESS`, `COMPLETED`) and handles transitions.
+* **Media Integration:** Manages microphone toggling, STT (Speech-to-Text) connection, and audio playback.
+* **Auto-Submission:** Automatically sends the transcript to the AI if the user stops speaking for a defined idle period (`AUTO_SUBMIT_IDLE_MS`).
+
+### `useInterview`
+A custom hook used by child components to consume the `InterviewContext`. It throws an error if used outside of the `InterviewContextProvider`.
+
+## Core Functionality
+
+### 1. Chat Management
+* **Streaming:** Messages are streamed via `/api/interview/chat/stream`.
+* **Metadata:** Supports attaching `codeSnippet`, `language`, and `audioUrl` to messages via the `interviewMessageMetadataSchema`.
+* **Message Normalization:** Includes utility functions (`toClientMessage`, `toUIMessage`) to bridge the gap between the AI SDK's `UIMessage` format and the application's internal `Message` type.
+
+### 2. Interview Lifecycle
+* **`startInterview`**: Initializes the interview session via an ORPC mutation and triggers the initial STT connection.
+* **`endInterview`**: Stops all media, finalizes the session on the server, and redirects the user to the report page.
+
+### 3. Media & STT
+* **Auto-Connect:** Automatically attempts to connect to the STT service when the interview status changes to `IN_PROGRESS`.
+* **Transcript Handling:** Manages both `transcript` (finalized text) and `interimTranscript` (real-time partial text).
+* **Auto-Submit:** Monitors the transcript; if the user is silent for 2.2 seconds, the current transcript is automatically sent as a message to the AI.
+
+## Usage Example
+
+```tsx
+"use client";
+
+import { useInterview } from "./_context/interview-context";
+
+const InterviewComponent = () => {
+ const { messages, sendMessage, isResponding, status } = useInterview();
+
+ return (
+
+
Status: {status}
+ {/* Render messages and input controls */}
+
+
+ );
+};
+```
+
+## Dependencies
+* **`@ai-sdk/react`**: Handles the chat streaming logic.
+* **`@tanstack/react-query`**: Manages server state for interview data and mutations.
+* **`orpc`**: Used for type-safe API communication with the backend.
+* **`useInterviewMedia`**: Custom hook for browser media APIs (Web Audio/MediaRecorder).
\ No newline at end of file
diff --git a/docs/generated/src/app/(dashboard)/dashboard/practice/design/[id]/arena/_components/arena-canvas.tsx.md b/docs/generated/src/app/(dashboard)/dashboard/practice/design/[id]/arena/_components/arena-canvas.tsx.md
new file mode 100644
index 0000000..8ed3cfc
--- /dev/null
+++ b/docs/generated/src/app/(dashboard)/dashboard/practice/design/[id]/arena/_components/arena-canvas.tsx.md
@@ -0,0 +1,56 @@
+# ArenaCanvas Documentation
+
+The `ArenaCanvas` component is the core interactive workspace for system design practice. It provides a visual drag-and-drop interface built on top of **React Flow**, allowing users to architect system designs, save their progress, and submit them for AI-driven evaluation.
+
+## Overview
+The component manages the state of a system design diagram, including nodes (components) and edges (data flows). It features automatic persistence, real-time evaluation, and a sidebar for component selection.
+
+## Key Components
+
+### 1. `ArenaCanvas` (Wrapper)
+The entry point component. It handles client-side mounting to ensure compatibility with `ReactFlowProvider` and provides a loading state while the environment initializes.
+
+### 2. `ArenaInner` (Logic Layer)
+The main functional component that orchestrates the design environment:
+* **State Management**: Uses `useNodesState` and `useEdgesState` to track the canvas layout.
+* **Persistence**: Implements a debounced autosave mechanism that syncs the canvas state to the backend via `orpc`.
+* **Interaction**:
+ * **Drag-and-Drop**: Allows users to drag components from the `NodeSidebar` onto the canvas.
+ * **Selection**: Uses `useOnSelectionChange` to track active nodes/edges for inspection.
+ * **Keyboard Shortcuts**: Supports deleting selected elements via `Backspace` or `Delete`.
+* **Evaluation**: Integrates with the `evaluateArchitecture` mutation to send the current graph structure to an AI service for feedback.
+
+## Features
+
+* **Autosave**: Automatically persists changes to the backend after a 1.4-second debounce period.
+* **Node Inspection**: Works in tandem with `NodeInspector` to allow users to modify properties of selected nodes or edges.
+* **Evaluation Feedback**: Displays results via `EvaluationResultsSheet` once the AI evaluation is complete.
+* **Optimized Updates**: Uses `updateNodeData` and `updateEdgeData` (XYFlow internal methods) for efficient state updates instead of full array re-renders.
+
+## Dependencies
+* **`@xyflow/react`**: Powers the interactive graph canvas.
+* **`@tanstack/react-query`**: Manages server state (fetching attempts, submitting evaluations).
+* **`orpc`**: The RPC client used for API communication.
+* **`zod`**: Used for schema validation of the architecture JSON.
+
+## Usage Example
+
+The component is designed to be used within a dashboard route, requiring a `problemId` to fetch the specific design challenge:
+
+```tsx
+
+```
+
+## Key Internal Methods
+
+| Method | Description |
+| :--- | :--- |
+| `onDrop` | Handles dropping new nodes from the sidebar onto the canvas. |
+| `onConnect` | Creates a new edge between nodes with default `SYNC` flow type. |
+| `saveCanvas` | Manually triggers a save request to the backend. |
+| `handleEvaluate` | Validates the current canvas and triggers the AI evaluation mutation. |
+
+## UI Components
+* **`NodeSidebar`**: Provides the palette of available system components.
+* **`NodeInspector`**: Context-aware panel for editing selected node/edge data.
+* **`EvaluationResultsSheet`**: A slide-out panel displaying AI feedback on the architecture.
\ No newline at end of file
diff --git a/docs/generated/src/app/(dashboard)/dashboard/practice/design/[id]/arena/_components/node-sidebar.tsx.md b/docs/generated/src/app/(dashboard)/dashboard/practice/design/[id]/arena/_components/node-sidebar.tsx.md
new file mode 100644
index 0000000..b92fae3
--- /dev/null
+++ b/docs/generated/src/app/(dashboard)/dashboard/practice/design/[id]/arena/_components/node-sidebar.tsx.md
@@ -0,0 +1,50 @@
+# NodeSidebar Component
+
+The `NodeSidebar` component is a specialized UI panel used within the architecture design arena. It provides a searchable, categorized library of system components that users can drag and drop onto the `ReactFlow` canvas.
+
+## Purpose
+This component serves as the primary interface for users to discover and add architectural nodes (e.g., databases, load balancers, services) to their design. It handles the drag-and-drop data transfer protocol required by the canvas to instantiate new nodes.
+
+## Key Features
+* **Drag-and-Drop Integration:** Implements `onDragStart` to pass node metadata (`type`, `label`, `details`) to the canvas via the `dataTransfer` API.
+* **Categorized Library:** Groups components by category (e.g., Compute, Storage, Networking) using `NODE_CATEGORIES` and `DESIGN_NODES`.
+* **Search Functionality:** Real-time filtering of components based on label, type, or details.
+* **Collapsible Sections:** Users can toggle the visibility of specific categories to manage screen real estate.
+* **Optimized Rendering:** Uses `useMemo` to group nodes efficiently, ensuring high performance even with large component libraries.
+
+## Component Structure
+
+### State Management
+* `search`: Tracks the current user input for filtering nodes.
+* `collapsed`: A dictionary mapping category IDs to their visibility state.
+
+### Data Flow
+1. **Filtering:** The `filteredNodes` variable computes the subset of nodes matching the search query.
+2. **Grouping:** The `groupedNodes` memoized object organizes the filtered list into categories for rendering.
+3. **Interaction:**
+ * **Toggle:** Clicking a category header updates the `collapsed` state.
+ * **Drag:** The `onDragStart` function attaches the necessary `application/reactflow/*` data types to the event, which the `ArenaCanvas` consumes during the `onDrop` event.
+
+## Usage
+The `NodeSidebar` is intended to be used as a sidebar component within the `ArenaCanvas` layout:
+
+```tsx
+import { NodeSidebar } from "./node-sidebar";
+
+export function ArenaLayout() {
+ return (
+
+
+
+ {/* ReactFlow Canvas */}
+
+
+ );
+}
+```
+
+## Dependencies
+* **`@/lib/design-nodes`**: Provides the source data for `DESIGN_NODES` and `NODE_CATEGORIES`.
+* **`lucide-react`**: Provides UI icons for categories and search.
+* **`@/components/ui/scroll-area`**: Used for handling overflow in the sidebar.
+* **`@xyflow/react`**: The underlying framework for the canvas that consumes the drag-and-drop data.
\ No newline at end of file
From dff5adcc6d1445e353e26d41de0597794b96f57a Mon Sep 17 00:00:00 2001
From: "gitscribe-bot[bot]"
<260092779+gitscribe-bot[bot]@users.noreply.github.com>
Date: Tue, 16 Jun 2026 13:59:13 +0000
Subject: [PATCH 2/2] chore: update AI-generated docs/tests
---
.../_components/StepCompanyContext.tsx.md | 44 +++++++++++++++
.../dashboard/interview/create/page.tsx.md | 41 ++++++++++++++
.../arena/_components/arena-canvas.tsx.md | 50 ++++++++---------
.../_components/animated-mockup.tsx.md | 49 +++++++++++++++++
.../_components/audio-samples.tsx.md | 49 +++++++++++++++++
.../(marketing)/_components/comparison.tsx.md | 50 +++++++++++++++++
.../app/(marketing)/_components/faq.tsx.md | 39 +++++++++++++
.../_components/features-bento.tsx.md | 41 ++++++++++++++
.../app/(marketing)/_components/footer.tsx.md | 52 ++++++++++++++++++
.../app/(marketing)/_components/hero.tsx.md | 45 +++++++++++++++
.../_components/how-it-works.tsx.md | 47 ++++++++++++++++
.../(marketing)/_components/pricing.tsx.md | 36 ++++++++++++
.../_components/sample-report.tsx.md | 48 ++++++++++++++++
.../(marketing)/_components/trust-bar.tsx.md | 44 +++++++++++++++
.../generated/src/app/(marketing)/page.tsx.md | 35 ++++++++++++
.../src/components/pricing-card.tsx.md | 55 +++++++++++++++++++
.../src/components/pricing-section.tsx.md | 52 ++++++++++++++++++
17 files changed, 751 insertions(+), 26 deletions(-)
create mode 100644 docs/generated/src/app/(dashboard)/dashboard/interview/create/_components/StepCompanyContext.tsx.md
create mode 100644 docs/generated/src/app/(dashboard)/dashboard/interview/create/page.tsx.md
create mode 100644 docs/generated/src/app/(marketing)/_components/animated-mockup.tsx.md
create mode 100644 docs/generated/src/app/(marketing)/_components/audio-samples.tsx.md
create mode 100644 docs/generated/src/app/(marketing)/_components/comparison.tsx.md
create mode 100644 docs/generated/src/app/(marketing)/_components/faq.tsx.md
create mode 100644 docs/generated/src/app/(marketing)/_components/features-bento.tsx.md
create mode 100644 docs/generated/src/app/(marketing)/_components/footer.tsx.md
create mode 100644 docs/generated/src/app/(marketing)/_components/hero.tsx.md
create mode 100644 docs/generated/src/app/(marketing)/_components/how-it-works.tsx.md
create mode 100644 docs/generated/src/app/(marketing)/_components/pricing.tsx.md
create mode 100644 docs/generated/src/app/(marketing)/_components/sample-report.tsx.md
create mode 100644 docs/generated/src/app/(marketing)/_components/trust-bar.tsx.md
create mode 100644 docs/generated/src/app/(marketing)/page.tsx.md
create mode 100644 docs/generated/src/components/pricing-card.tsx.md
create mode 100644 docs/generated/src/components/pricing-section.tsx.md
diff --git a/docs/generated/src/app/(dashboard)/dashboard/interview/create/_components/StepCompanyContext.tsx.md b/docs/generated/src/app/(dashboard)/dashboard/interview/create/_components/StepCompanyContext.tsx.md
new file mode 100644
index 0000000..8aadf98
--- /dev/null
+++ b/docs/generated/src/app/(dashboard)/dashboard/interview/create/_components/StepCompanyContext.tsx.md
@@ -0,0 +1,44 @@
+# StepCompanyContext Component
+
+The `StepCompanyContext` component is a UI form section used within the interview creation wizard. It allows users to provide specific company details and job descriptions, which are used to tailor the AI-driven interview experience.
+
+## Purpose
+This component provides a structured input interface for:
+1. **Company Name**: Sets the context for the AI's persona and tone.
+2. **Job Description**: Provides the source material for the AI to generate relevant, role-specific interview questions.
+
+## Key Features
+* **Real-time Character Counting**: Uses `react-hook-form`'s `useWatch` to track input length against predefined `FIELD_LIMITS`, providing immediate visual feedback to the user.
+* **Validation Integration**: Fully integrated with `react-hook-form` and Zod schemas to ensure data integrity before submission.
+* **Responsive UI**: Utilizes a card-based layout with clear iconography and descriptive text to guide the user through the input process.
+* **Performance Optimized**: Uses `useWatch` to subscribe only to the specific fields required for character counting, preventing unnecessary re-renders of the entire form.
+
+## Props
+
+| Prop | Type | Description |
+| :--- | :--- | :--- |
+| `form` | `UseFormReturn` | The form instance object provided by `useForm` from `react-hook-form`. |
+
+## Dependencies
+* **`react-hook-form`**: Manages form state and validation.
+* **`@/lib/zodSchemas/createInterview`**: Provides the `createInterviewSchema` for type safety and `FIELD_LIMITS` for input constraints.
+* **`@/components/ui`**: Uses standard UI components (Card, Form, Input, Textarea) for consistent styling.
+
+## Usage Example
+
+```tsx
+import { useForm } from "react-hook-form";
+import { StepCompanyContext } from "./StepCompanyContext";
+
+const CreateInterviewForm = () => {
+ const form = useForm({
+ // ... configuration
+ });
+
+ return (
+
+ );
+};
+```
\ No newline at end of file
diff --git a/docs/generated/src/app/(dashboard)/dashboard/interview/create/page.tsx.md b/docs/generated/src/app/(dashboard)/dashboard/interview/create/page.tsx.md
new file mode 100644
index 0000000..e932936
--- /dev/null
+++ b/docs/generated/src/app/(dashboard)/dashboard/interview/create/page.tsx.md
@@ -0,0 +1,41 @@
+# Create Interview Page
+
+The `CreateInterviewPage` component provides a multi-step wizard interface for users to configure and initialize a new AI-powered interview session. It handles form state, resume parsing, and billing validation before creating an interview record.
+
+## Functionality
+- **Multi-step Wizard**: Guides users through four distinct configuration steps:
+ 1. **Interview Type**: Select between Technical, System Design, or Behavioral interviews.
+ 2. **Role Details**: Define the target job title, tech stack, and experience level.
+ 3. **Company Context**: Provide specific company details and job descriptions.
+ 4. **Resume Context**: Upload or select a resume to provide the AI with personalized background information.
+- **Resume Parsing**: Automatically extracts text from uploaded resumes using the `orpc` client to provide context for the AI interviewer.
+- **Billing Integration**: Checks user subscription status via `orpc` before allowing the creation of a new interview, triggering an `UpgradePlanDialog` if limits are reached.
+- **Form Validation**: Uses `zod` and `react-hook-form` to ensure data integrity across all steps.
+
+## Key Components
+- **`FormStepper`**: Visual indicator of the current progress through the 4-step process.
+- **`ResumeUploader`**: Handles file uploads and triggers the parsing mutation.
+- **`StepCompanyContext`**: A modular component for handling company-specific inputs.
+- **`UpgradePlanDialog`**: A modal that prompts users to upgrade their subscription when they exceed their interview quota.
+
+## State Management
+- **`currentStep`**: Tracks the active step in the wizard.
+- **`react-hook-form`**: Manages the complex form state, including conditional fields based on the selected interview type.
+- **`@tanstack/react-query`**:
+ - `createInterview`: Mutation to persist the interview configuration to the backend.
+ - `parseResume`: Mutation to process uploaded resume files.
+ - `billing.getState`: Query to fetch current user usage limits.
+
+## Usage
+This page is accessed via the `/dashboard/interview/create` route. It relies on the `orpc` client for type-safe communication with the backend and expects the user to be authenticated.
+
+### Key Methods
+- `canProceedFromStep(step)`: Validates the current form state before allowing the user to advance to the next step.
+- `onResumeUpload`: Callback triggered when a file is uploaded, initiating the parsing process.
+- `onSubmit`: Finalizes the configuration and triggers the `createInterview` mutation.
+
+## Dependencies
+- **`react-hook-form` & `zod`**: For form handling and schema validation.
+- **`@tanstack/react-query`**: For server state and API mutations.
+- **`orpc`**: For type-safe API calls.
+- **`lucide-react`**: For UI iconography.
\ No newline at end of file
diff --git a/docs/generated/src/app/(dashboard)/dashboard/practice/design/[id]/arena/_components/arena-canvas.tsx.md b/docs/generated/src/app/(dashboard)/dashboard/practice/design/[id]/arena/_components/arena-canvas.tsx.md
index 8ed3cfc..eb62a9d 100644
--- a/docs/generated/src/app/(dashboard)/dashboard/practice/design/[id]/arena/_components/arena-canvas.tsx.md
+++ b/docs/generated/src/app/(dashboard)/dashboard/practice/design/[id]/arena/_components/arena-canvas.tsx.md
@@ -1,33 +1,45 @@
-# ArenaCanvas Documentation
+# ArenaCanvas Component
-The `ArenaCanvas` component is the core interactive workspace for system design practice. It provides a visual drag-and-drop interface built on top of **React Flow**, allowing users to architect system designs, save their progress, and submit them for AI-driven evaluation.
+The `ArenaCanvas` component is the core interactive workspace for system design challenges. It provides a visual graph editor where users can drag and drop components, connect them, and submit their architecture for AI-driven evaluation.
## Overview
-The component manages the state of a system design diagram, including nodes (components) and edges (data flows). It features automatic persistence, real-time evaluation, and a sidebar for component selection.
+
+The component is built using `@xyflow/react` and is designed to handle complex state management for system architecture diagrams. It features automatic persistence, real-time feedback, and a context-aware inspector for modifying node and edge properties.
## Key Components
### 1. `ArenaCanvas` (Wrapper)
-The entry point component. It handles client-side mounting to ensure compatibility with `ReactFlowProvider` and provides a loading state while the environment initializes.
+The entry point component. It ensures client-side mounting compatibility by wrapping the inner logic in a `ReactFlowProvider` and providing a loading state during initialization.
### 2. `ArenaInner` (Logic Layer)
-The main functional component that orchestrates the design environment:
-* **State Management**: Uses `useNodesState` and `useEdgesState` to track the canvas layout.
-* **Persistence**: Implements a debounced autosave mechanism that syncs the canvas state to the backend via `orpc`.
+The primary functional component that orchestrates the design environment:
+* **State Management**: Tracks nodes and edges using `useNodesState` and `useEdgesState`.
+* **Persistence**: Implements a debounced autosave mechanism (1.4s) that syncs the canvas state to the backend via `orpc`.
* **Interaction**:
- * **Drag-and-Drop**: Allows users to drag components from the `NodeSidebar` onto the canvas.
- * **Selection**: Uses `useOnSelectionChange` to track active nodes/edges for inspection.
- * **Keyboard Shortcuts**: Supports deleting selected elements via `Backspace` or `Delete`.
+ * **Drag-and-Drop**: Supports dragging components from the `NodeSidebar` onto the canvas.
+ * **Selection**: Uses `useOnSelectionChange` to track active elements for the `NodeInspector`.
+ * **Keyboard Shortcuts**: Handles deletion of selected elements via `Backspace` or `Delete`.
* **Evaluation**: Integrates with the `evaluateArchitecture` mutation to send the current graph structure to an AI service for feedback.
+## Key Internal Methods
+
+| Method | Description |
+| :--- | :--- |
+| `onDrop` | Handles dropping new nodes from the sidebar onto the canvas. |
+| `onConnect` | Creates a new edge between nodes with default `SYNC` flow type. |
+| `saveCanvas` | Manually triggers a save request to the backend. |
+| `handleEvaluate` | Validates the current canvas and triggers the AI evaluation mutation. |
+| `updateNode` / `updateEdge` | Efficiently updates element data using XYFlow's internal Map-based lookup. |
+
## Features
* **Autosave**: Automatically persists changes to the backend after a 1.4-second debounce period.
* **Node Inspection**: Works in tandem with `NodeInspector` to allow users to modify properties of selected nodes or edges.
* **Evaluation Feedback**: Displays results via `EvaluationResultsSheet` once the AI evaluation is complete.
-* **Optimized Updates**: Uses `updateNodeData` and `updateEdgeData` (XYFlow internal methods) for efficient state updates instead of full array re-renders.
+* **Optimized Updates**: Uses `updateNodeData` and `updateEdgeData` for efficient state updates instead of full array re-renders.
## Dependencies
+
* **`@xyflow/react`**: Powers the interactive graph canvas.
* **`@tanstack/react-query`**: Manages server state (fetching attempts, submitting evaluations).
* **`orpc`**: The RPC client used for API communication.
@@ -39,18 +51,4 @@ The component is designed to be used within a dashboard route, requiring a `prob
```tsx
-```
-
-## Key Internal Methods
-
-| Method | Description |
-| :--- | :--- |
-| `onDrop` | Handles dropping new nodes from the sidebar onto the canvas. |
-| `onConnect` | Creates a new edge between nodes with default `SYNC` flow type. |
-| `saveCanvas` | Manually triggers a save request to the backend. |
-| `handleEvaluate` | Validates the current canvas and triggers the AI evaluation mutation. |
-
-## UI Components
-* **`NodeSidebar`**: Provides the palette of available system components.
-* **`NodeInspector`**: Context-aware panel for editing selected node/edge data.
-* **`EvaluationResultsSheet`**: A slide-out panel displaying AI feedback on the architecture.
\ No newline at end of file
+```
\ No newline at end of file
diff --git a/docs/generated/src/app/(marketing)/_components/animated-mockup.tsx.md b/docs/generated/src/app/(marketing)/_components/animated-mockup.tsx.md
new file mode 100644
index 0000000..c3a66cb
--- /dev/null
+++ b/docs/generated/src/app/(marketing)/_components/animated-mockup.tsx.md
@@ -0,0 +1,49 @@
+# AnimatedMockup Component
+
+The `AnimatedMockup` component is a marketing UI element designed to simulate an interactive AI interview session. It provides a visual demonstration of the platform's capabilities, including session setup, AI-user interaction, real-time analysis, and feedback generation.
+
+## Purpose
+This component serves as a high-fidelity visual aid for landing pages or marketing materials, showcasing the "RoundZero" interview experience without requiring actual backend integration. It uses `framer-motion` to create smooth transitions between different stages of an interview.
+
+## Key Features
+
+* **Simulated Lifecycle:** Automatically cycles through five distinct stages:
+ 1. **Setup:** Displays the configuration phase with a typing effect for the target role.
+ 2. **AI Speaking:** Simulates the AI interviewer asking a question with a visual voice waveform.
+ 3. **User Speaking:** Simulates a candidate's response, featuring dynamic keyword highlighting for technical terms.
+ 4. **Analyzing:** Displays a progress bar and status updates while the AI "processes" the response.
+ 5. **Scorecard:** Presents a final feedback summary with metrics and actionable insights.
+* **Dynamic Visuals:**
+ * **Typing Effects:** Simulates human-like text entry for roles and responses.
+ * **Voice Waveforms:** Uses `framer-motion` to animate bars, mimicking audio input/output.
+ * **Keyword Highlighting:** The `highlightKeywords` helper function automatically styles technical jargon (e.g., "Redis", "120ms") to emphasize technical depth.
+* **Responsive Design:** Built with a grid-based layout that adapts from a sidebar-focused desktop view to a streamlined mobile-friendly interface.
+
+## Technical Implementation
+
+### State Management
+The component uses a local `stage` state to control the animation loop. An `useEffect` hook manages an asynchronous sequence that updates text content and progress percentages, ensuring the simulation runs continuously.
+
+### Helper Functions
+* **`highlightKeywords(text: string)`**: A utility that parses text and wraps specific technical terms in styled `` elements. It applies distinct colors (e.g., emerald for performance metrics) to highlight key technical achievements.
+
+### Dependencies
+* **`framer-motion`**: Used for entrance/exit animations and the continuous waveform pulse effects.
+* **`lucide-react`**: Provides the iconography for the UI (e.g., `Mic`, `Brain`, `Terminal`).
+
+## Usage
+The component is self-contained and can be dropped into any page within the `(marketing)` route:
+
+```tsx
+import { AnimatedMockup } from "@/app/(marketing)/_components/animated-mockup";
+
+export default function LandingPage() {
+ return (
+
+
+
+ );
+}
+```
+
+*Note: This component is intended for demonstration purposes and does not connect to the actual `InterviewContext` or backend services.*
\ No newline at end of file
diff --git a/docs/generated/src/app/(marketing)/_components/audio-samples.tsx.md b/docs/generated/src/app/(marketing)/_components/audio-samples.tsx.md
new file mode 100644
index 0000000..5bee0c4
--- /dev/null
+++ b/docs/generated/src/app/(marketing)/_components/audio-samples.tsx.md
@@ -0,0 +1,49 @@
+# AudioSamples Component
+
+The `AudioSamples` component is a marketing section designed to showcase the platform's AI-driven interview capabilities through interactive audio previews. It provides users with a visual and auditory demonstration of different interview scenarios, such as behavioral rounds, technical deep-dives, and AI feedback sessions.
+
+## Overview
+
+This component features a grid of interactive cards, each representing a specific type of interview session. Users can toggle playback for each sample, which triggers a simulated "live" waveform animation.
+
+### Key Features
+* **Interactive Playback:** Users can play/pause audio samples. Playback is currently simulated with a 5-second auto-stop timer.
+* **Dynamic Waveform Visualization:** The `AudioWaveform` sub-component uses `framer-motion` to animate bars, simulating real-time audio activity when a sample is playing.
+* **Responsive Design:** Built with a grid layout that adapts from a single column on mobile to three columns on desktop.
+* **Visual Feedback:** Includes hover effects, pulse animations for active playback, and subtle background gradients to enhance user engagement.
+
+## Components
+
+### `AudioSamples` (Main Export)
+The primary container for the section. It manages the state of the currently playing audio sample using the `playing` state variable.
+
+* **`samples`**: A static array defining the metadata for each audio demo (title, description, duration, and styling).
+* **`togglePlay(id)`**: A handler that manages the playback state. If a user clicks a different sample, it switches the active state; clicking the same sample pauses it.
+
+### `AudioWaveform`
+A visual representation of audio activity.
+* **Props**:
+ * `isPlaying` (boolean): Determines whether the animation should be active.
+ * `gradient` (string): Used for styling the waveform bars.
+* **Functionality**: Uses `useEffect` to update the height of 24 bars at 100ms intervals when `isPlaying` is true, creating a randomized "bouncing" effect.
+
+## Usage
+
+This component is intended for use on marketing or landing pages. It requires no external props and can be dropped directly into a page:
+
+```tsx
+import { AudioSamples } from "@/app/(marketing)/_components/audio-samples";
+
+export default function LandingPage() {
+ return (
+
+
+
+ );
+}
+```
+
+## Dependencies
+* **`framer-motion`**: Used for smooth entrance animations and the dynamic waveform bar transitions.
+* **`lucide-react`**: Provides the UI icons (`Headphones`, `Play`, `Pause`, `Volume2`).
+* **`@/components/ui/badge`**: Used for the section header label.
\ No newline at end of file
diff --git a/docs/generated/src/app/(marketing)/_components/comparison.tsx.md b/docs/generated/src/app/(marketing)/_components/comparison.tsx.md
new file mode 100644
index 0000000..eddb126
--- /dev/null
+++ b/docs/generated/src/app/(marketing)/_components/comparison.tsx.md
@@ -0,0 +1,50 @@
+# Comparison Component
+
+The `Comparison` component is a marketing section designed to highlight the competitive advantages of the RoundZero platform against traditional interview preparation methods (e.g., practicing with peers or using LeetCode).
+
+## Purpose
+This component provides a visual, data-driven comparison table that demonstrates why RoundZero is a superior tool for interview preparation. It uses interactive animations and clear status indicators to communicate feature availability across different platforms.
+
+## Key Components
+
+### `comparisonData`
+A constant array of objects defining the features to be compared. Each object contains:
+* `feature`: The name of the capability (e.g., "Voice-based practice").
+* `peers`, `leetcode`, `roundzero`: Boolean or string values indicating support (`true`, `false`, or `"partial"`).
+
+### `StatusIcon`
+A helper component that renders a visual indicator based on the status of a feature:
+* **True**: A green checkmark (`Check`) in an emerald container.
+* **False**: A grey 'X' (`X`) in a muted container.
+* **Partial**: A yellow minus sign (`Minus`) in a yellow container.
+
+### `Comparison` (Main Export)
+The primary functional component that renders the section. It includes:
+* **Header Section**: Uses `framer-motion` for entrance animations and displays a `Badge` to highlight the platform's value proposition.
+* **Comparison Table**: A responsive table structure that highlights the "RoundZero" column with a distinct background color (`bg-primary/10`) to draw user attention.
+* **Animations**: Utilizes `framer-motion` to animate the table rows as they enter the viewport, creating a polished, professional feel.
+
+## Usage
+
+The component is intended for use on marketing or landing pages. It requires no props and can be imported directly into your page layout:
+
+```tsx
+import { Comparison } from "@/app/(marketing)/_components/comparison";
+
+export default function LandingPage() {
+ return (
+
+ {/* ... other sections */}
+
+
+ );
+}
+```
+
+## Technical Details
+* **Styling**: Uses Tailwind CSS for layout and styling, including `backdrop-blur` and custom border gradients.
+* **Responsiveness**: The table is wrapped in an `overflow-x-auto` container with a `min-w-[700px]` constraint to ensure it remains readable on smaller screens while maintaining layout integrity.
+* **Dependencies**:
+ * `framer-motion`: For scroll-triggered entrance animations.
+ * `lucide-react`: For iconography.
+ * `@/components/ui/badge`: For consistent UI labeling.
\ No newline at end of file
diff --git a/docs/generated/src/app/(marketing)/_components/faq.tsx.md b/docs/generated/src/app/(marketing)/_components/faq.tsx.md
new file mode 100644
index 0000000..c0ae509
--- /dev/null
+++ b/docs/generated/src/app/(marketing)/_components/faq.tsx.md
@@ -0,0 +1,39 @@
+# FAQ Component
+
+The `FAQ` component is a marketing section designed to address common user queries regarding the RoundZero platform. It provides an interactive, accordion-style interface that explains the AI interview process, security measures, and platform capabilities.
+
+## Purpose
+This component serves as a self-service support resource on the marketing landing page, helping to build user trust and clarify the value proposition of the AI-driven interview preparation tool.
+
+## Key Features
+* **Interactive Accordion**: Uses the Radix UI-based `Accordion` component to keep the interface clean while allowing users to expand specific questions.
+* **Animated Transitions**: Leverages `framer-motion` to provide smooth entrance animations for the section header, individual FAQ items, and the final call-to-action.
+* **Responsive Design**: Optimized for various screen sizes, ensuring readability on both mobile and desktop devices.
+* **Thematic Styling**: Uses custom Tailwind CSS classes to match the platform's aesthetic, including dark mode support and subtle hover effects.
+
+## Data Structure
+The component iterates over a static `faqs` array containing objects with the following structure:
+* `question`: The string displayed as the accordion trigger.
+* `answer`: The detailed response displayed when the accordion is expanded.
+
+## Usage
+The component is intended to be imported and used within the marketing landing page layout:
+
+```tsx
+import { FAQ } from "@/app/(marketing)/_components/faq";
+
+export default function LandingPage() {
+ return (
+
+ {/* Other sections */}
+
+
+ );
+}
+```
+
+## Dependencies
+* **`framer-motion`**: Handles entrance and scroll-triggered animations.
+* **`lucide-react`**: Provides the `HelpCircle` icon.
+* **`@/components/ui/accordion`**: A reusable UI component for collapsible content.
+* **`@/components/ui/badge`**: Used for the section header label.
\ No newline at end of file
diff --git a/docs/generated/src/app/(marketing)/_components/features-bento.tsx.md b/docs/generated/src/app/(marketing)/_components/features-bento.tsx.md
new file mode 100644
index 0000000..827eb2b
--- /dev/null
+++ b/docs/generated/src/app/(marketing)/_components/features-bento.tsx.md
@@ -0,0 +1,41 @@
+# FeaturesBento Component
+
+The `FeaturesBento` component is a marketing section designed to showcase the core capabilities of the interview preparation platform. It uses a responsive "bento grid" layout with interactive animations to highlight key features.
+
+## Purpose
+This component serves as the primary feature overview on the landing page. It visually demonstrates the platform's value proposition, including AI-driven simulation, voice interaction, and technical assessment tools.
+
+## Key Features
+The grid consists of six distinct cards, each featuring:
+* **Adaptive AI Interviewer:** Demonstrates dynamic follow-up questioning and conversational depth.
+* **Voice Mode:** Highlights real-time, natural voice-to-voice practice capabilities.
+* **Resume-Tailored Questions:** Shows how the platform parses user resumes and job descriptions to generate relevant interview loops.
+* **Performance Analytics:** Displays visual feedback on pacing, filler word usage, and STAR method competency.
+* **Monaco Code Editor:** Showcases the integrated coding environment for technical assessments.
+* **On-Demand Rounds:** Emphasizes the 24/7 availability of the platform for immediate practice.
+
+## Technical Implementation
+* **Animations:** Utilizes `framer-motion` for scroll-triggered entrance animations (`initial`, `whileInView`) and subtle hover effects.
+* **Styling:** Built with Tailwind CSS, featuring a dark/light mode-aware design using custom background colors and border utilities.
+* **Visual Simulations:** Each card includes a "mini-UI" simulation (e.g., code snippets, progress bars, or audio waveforms) to provide immediate context for the feature being described.
+* **Responsiveness:** Uses a grid layout (`grid-cols-1 md:grid-cols-6`) to ensure the bento grid adapts gracefully from mobile devices to large desktop screens.
+
+## Usage
+This component is intended for use within the marketing pages (e.g., the landing page) to provide a high-level summary of the platform's functionality.
+
+```tsx
+import { FeaturesBento } from "@/app/(marketing)/_components/features-bento";
+
+export default function LandingPage() {
+ return (
+
+
+
+ );
+}
+```
+
+## Dependencies
+* **`framer-motion`**: Used for entrance animations and the pulse effects in the visual simulations.
+* **`lucide-react`**: Provides the iconography for each feature card.
+* **`@/components/ui/badge`**: Used for the section header label.
\ No newline at end of file
diff --git a/docs/generated/src/app/(marketing)/_components/footer.tsx.md b/docs/generated/src/app/(marketing)/_components/footer.tsx.md
new file mode 100644
index 0000000..04d3944
--- /dev/null
+++ b/docs/generated/src/app/(marketing)/_components/footer.tsx.md
@@ -0,0 +1,52 @@
+# Footer Component
+
+The `Footer` component is a comprehensive, responsive footer designed for the marketing pages of the RoundZero platform. It features a high-conversion Call-to-Action (CTA) section followed by a multi-column navigation structure, newsletter subscription, and social media links.
+
+## Overview
+
+- **File Path:** `src/app/(marketing)/_components/footer.tsx`
+- **Dependencies:** `framer-motion` (for animations), `lucide-react` (for iconography), and internal UI components (`Button`, `Input`).
+- **Purpose:** Provides site-wide navigation, legal links, and a final conversion point for users to sign up or schedule a demo.
+
+## Key Components
+
+### 1. CTA Section
+Located at the top of the footer, this section uses `framer-motion` to animate into view. It includes:
+- A compelling headline and sub-headline.
+- Primary and secondary action buttons ("Start practicing for free" and "Schedule a demo").
+
+### 2. Main Footer Grid
+A structured grid layout containing:
+- **Brand Identity:** Displays the logo and a brief mission statement.
+- **Newsletter Subscription:** An input field and button for user engagement.
+- **Navigation Links:** Categorized into four columns:
+ - **Product:** Features, Pricing, Demo, Changelog.
+ - **Company:** About, Blog, Careers, Press Kit.
+ - **Resources:** Documentation, Help Center, Community, Contact.
+ - **Legal:** Privacy Policy, Terms of Service, Cookie Policy.
+
+### 3. Bottom Bar
+Contains the copyright notice and social media icons (Twitter, LinkedIn, GitHub) for external community engagement.
+
+## Usage
+
+The `Footer` component is intended to be imported and placed at the bottom of your marketing layout pages.
+
+```tsx
+import { Footer } from "@/app/(marketing)/_components/footer";
+
+export default function MarketingLayout({ children }) {
+ return (
+
+ {children}
+
+
+ );
+}
+```
+
+## Technical Details
+
+- **Responsive Design:** Uses Tailwind CSS grid and flexbox utilities to stack columns on mobile and expand to a 6-column grid on larger screens.
+- **Animations:** Utilizes `framer-motion`'s `whileInView` property to trigger a subtle fade-in and slide-up animation for the CTA section as the user scrolls to the bottom of the page.
+- **Styling:** Employs a modern aesthetic with `backdrop-blur`, `border-border/50` for subtle dividers, and `muted-foreground` for secondary text to maintain visual hierarchy.
\ No newline at end of file
diff --git a/docs/generated/src/app/(marketing)/_components/hero.tsx.md b/docs/generated/src/app/(marketing)/_components/hero.tsx.md
new file mode 100644
index 0000000..af7d02a
--- /dev/null
+++ b/docs/generated/src/app/(marketing)/_components/hero.tsx.md
@@ -0,0 +1,45 @@
+# Hero Component
+
+The `Hero` component is the primary landing section for the marketing page. It is designed to capture user attention, communicate the value proposition of the AI interview platform, and drive conversions through clear calls-to-action (CTAs).
+
+## Overview
+The component uses `framer-motion` to provide smooth, staggered entrance animations for its elements, creating a modern and polished feel. It serves as the entry point for users to begin their interview preparation journey.
+
+## Key Features
+- **Announcement Badge**: A pulsing, interactive badge highlighting new features (e.g., "Interactive Voice & STAR interview practice").
+- **Value Proposition**: A high-impact headline and subheadline that clearly define the platform's ability to provide adaptive, resume-tailored AI interview practice.
+- **Conversion CTAs**: Dual-action buttons allowing users to immediately start practicing or watch a product demo.
+- **Visual Simulation**: Integrates the `AnimatedMockup` component to provide a visual preview of the platform's interface, supported by an ambient background glow for visual depth.
+
+## Component Structure
+
+| Element | Description |
+| :--- | :--- |
+| `motion.div` (Badge) | Animated announcement container with a pinging status indicator. |
+| `h1` (Headline) | The primary hook, emphasizing "realistic AI interviews." |
+| `p` (Subheadline) | Explains the core functionality: resume analysis, follow-up questions, and STAR feedback. |
+| `Button` (Primary) | Links to `/sign-in` to initiate the user onboarding/practice flow. |
+| `Button` (Secondary) | Links to the `#demo` section for product walkthroughs. |
+| `AnimatedMockup` | A visual representation of the application interface. |
+
+## Usage
+This component is intended for use within the main marketing page layout. It relies on standard UI components from the project's design system (`Badge`, `Button`) and the `framer-motion` library for animations.
+
+```tsx
+import { Hero } from "@/app/(marketing)/_components/hero";
+
+export default function LandingPage() {
+ return (
+
+
+ {/* Other sections */}
+
+ );
+}
+```
+
+## Dependencies
+- **`framer-motion`**: Used for entrance animations.
+- **`lucide-react`**: Provides iconography (`ArrowRight`, `Play`, `Zap`).
+- **`@/components/ui/...`**: Uses the project's shared UI library for consistent styling.
+- **`./animated-mockup`**: A local component providing the visual simulation of the interview interface.
\ No newline at end of file
diff --git a/docs/generated/src/app/(marketing)/_components/how-it-works.tsx.md b/docs/generated/src/app/(marketing)/_components/how-it-works.tsx.md
new file mode 100644
index 0000000..e285826
--- /dev/null
+++ b/docs/generated/src/app/(marketing)/_components/how-it-works.tsx.md
@@ -0,0 +1,47 @@
+# HowItWorks Component
+
+The `HowItWorks` component is a marketing section designed to showcase the platform's four-step interview preparation workflow. It uses `framer-motion` for scroll-triggered animations and provides a visually engaging, interactive grid layout.
+
+## Purpose
+This component serves as a high-level overview of the user journey, guiding potential users through the platform's capabilities:
+1. **Resume Analysis:** Mapping experience to job requirements.
+2. **Voice Interview:** Engaging in AI-driven conversational practice.
+3. **Live Coding:** Solving technical problems in a real-time editor.
+4. **Instant Feedback:** Receiving actionable scorecards and improvement metrics.
+
+## Key Features
+* **Animated Transitions:** Uses `whileInView` to trigger entrance animations as the user scrolls down the page.
+* **Interactive Cards:** Each step is contained within a card that features hover effects, including subtle background glows and icon scaling.
+* **Responsive Design:** A grid layout that adapts from a single column on mobile to a two-column layout on larger screens.
+* **Visual Hierarchy:** Uses large, low-opacity "watermark" step numbers and distinct iconography to improve readability and user engagement.
+
+## Data Structure
+The component relies on a local `features` array, which defines the content for each step:
+
+| Property | Description |
+| :--- | :--- |
+| `icon` | The `lucide-react` icon component to display. |
+| `title` | The heading for the step. |
+| `description` | A brief explanation of the step's functionality. |
+| `step` | The string representation of the step number (e.g., "01"). |
+| `delay` | The animation delay value for staggered entrance effects. |
+
+## Usage
+This component is intended for use on the marketing landing page. It requires no props and can be imported directly:
+
+```tsx
+import { HowItWorks } from "@/app/(marketing)/_components/how-it-works";
+
+export default function LandingPage() {
+ return (
+
+
+
+ );
+}
+```
+
+## Dependencies
+* **`framer-motion`**: Handles entrance animations and scroll-based triggers.
+* **`lucide-react`**: Provides the iconography for each step.
+* **`@/components/ui/badge`**: Used for the section header label.
\ No newline at end of file
diff --git a/docs/generated/src/app/(marketing)/_components/pricing.tsx.md b/docs/generated/src/app/(marketing)/_components/pricing.tsx.md
new file mode 100644
index 0000000..aba5516
--- /dev/null
+++ b/docs/generated/src/app/(marketing)/_components/pricing.tsx.md
@@ -0,0 +1,36 @@
+# Pricing Component
+
+The `Pricing` component is a marketing-facing section designed to display subscription tiers or service plans. It serves as a landing page element that encourages user conversion by highlighting the value proposition of the platform.
+
+## Overview
+This component acts as a wrapper for the reusable `PricingSection` component, providing specific branding, layout constraints, and structural styling (such as top-border dividers and responsive padding) to fit within the marketing site's design system.
+
+## Key Components
+
+* **`PricingSection`**: An imported shared component that handles the internal logic and rendering of the pricing cards, features, and toggle states.
+* **`section#pricing`**: The root container, which includes a decorative top border and responsive vertical padding to ensure proper spacing on different screen sizes.
+
+## Usage
+
+The component is intended to be used within the marketing pages (e.g., the landing page). It requires no props as the content is hardcoded for the specific marketing context.
+
+```tsx
+import { Pricing } from "@/app/(marketing)/_components/pricing";
+
+export default function LandingPage() {
+ return (
+
+ {/* ... other sections */}
+
+
+ );
+}
+```
+
+## Technical Details
+
+* **Client-Side Rendering**: Marked with `"use client"`, allowing for potential interactivity within the `PricingSection` (such as monthly/yearly toggles).
+* **Styling**: Utilizes Tailwind CSS for layout, including:
+ * `max-w-7xl` for consistent content alignment.
+ * `bg-linear-to-r` for a subtle, modern divider effect at the top of the section.
+ * Responsive padding (`py-24 lg:py-32`) to maintain visual balance across mobile and desktop viewports.
\ No newline at end of file
diff --git a/docs/generated/src/app/(marketing)/_components/sample-report.tsx.md b/docs/generated/src/app/(marketing)/_components/sample-report.tsx.md
new file mode 100644
index 0000000..2693df7
--- /dev/null
+++ b/docs/generated/src/app/(marketing)/_components/sample-report.tsx.md
@@ -0,0 +1,48 @@
+# SampleReport Component
+
+The `SampleReport` component is a marketing-focused UI element designed to showcase the platform's analytical capabilities. It features an interactive, simulated dashboard that demonstrates how users receive feedback on their interview performance.
+
+## Purpose
+This component serves as a visual proof-of-concept for potential users, highlighting the depth of data provided by the platform's reporting engine. It uses interactive tabs to display different categories of feedback, such as technical accuracy, STAR structure, and speech delivery.
+
+## Key Features
+* **Interactive Dashboard Mockup:** A simulated browser window that allows users to toggle between three distinct report views:
+ * **Overview Scores:** High-level performance metrics and improvement trends.
+ * **STAR Structure:** Breakdown of the Situation, Task, Action, and Result framework.
+ * **Speech Delivery:** Analysis of pacing, filler words, and AI-driven recommendations.
+* **Animated Transitions:** Utilizes `framer-motion` for smooth entrance animations and tab switching.
+* **Responsive Design:** Adapts to different screen sizes, ensuring the dashboard remains readable on mobile and desktop.
+* **Visual Polish:** Includes ambient glows, glassmorphism effects, and floating UI elements to create a high-fidelity "product-first" marketing experience.
+
+## Component Structure
+
+### State Management
+* `activeTab`: A local state variable (`overview` | `star` | `speech`) that determines which content panel is currently rendered within the dashboard mockup.
+
+### Data
+* `feedbackItems`: An array of objects defining the key value propositions (Communication, Technical Accuracy, Progress Tracking) displayed in the left-hand column.
+
+### Helper Components
+* `Volume2Icon`: A custom SVG icon component used within the Speech Delivery tab to represent AI recommendations.
+
+## Usage Example
+
+The component is designed to be dropped directly into a marketing page (e.g., the landing page) without requiring external props:
+
+```tsx
+import { SampleReport } from "@/app/(marketing)/_components/sample-report";
+
+export default function LandingPage() {
+ return (
+
+ {/* ... other sections */}
+
+
+ );
+}
+```
+
+## Dependencies
+* **`framer-motion`**: Used for entrance animations and smooth tab transitions.
+* **`lucide-react`**: Provides the iconography for the feature list and dashboard elements.
+* **`@/components/ui/badge`**: Used for the "Detailed Analytics" header tag.
\ No newline at end of file
diff --git a/docs/generated/src/app/(marketing)/_components/trust-bar.tsx.md b/docs/generated/src/app/(marketing)/_components/trust-bar.tsx.md
new file mode 100644
index 0000000..15b5cf0
--- /dev/null
+++ b/docs/generated/src/app/(marketing)/_components/trust-bar.tsx.md
@@ -0,0 +1,44 @@
+# TrustBar Component
+
+The `TrustBar` component is a marketing section designed to build user confidence by showcasing the caliber of companies users can prepare for and highlighting key platform performance metrics. It is intended for use on landing pages or marketing-facing routes.
+
+## Overview
+The component is divided into two primary sections:
+1. **Company Showcase:** A list of top-tier tech companies presented with subtle entrance animations and hover effects.
+2. **Value Proposition Stats:** A grid of three cards highlighting core platform features (latency, evaluation frameworks, and availability) using icons and descriptive text.
+
+## Key Features
+* **Animations:** Utilizes `framer-motion` for staggered entrance animations, hover scaling, and smooth opacity transitions.
+* **Responsive Design:** Uses a grid layout that adapts from a single column on mobile to a three-column layout on desktop.
+* **Visual Polish:** Includes subtle border dividers, background gradients, and backdrop effects to maintain a modern, professional aesthetic consistent with the rest of the application.
+* **Interactive Elements:** Company names feature a hover-to-highlight effect, and stat cards feature a subtle background glow on hover.
+
+## Data Structure
+The component relies on two internal constant arrays:
+* `companies`: A simple string array of company names.
+* `stats`: An array of objects containing:
+ * `icon`: A `lucide-react` icon component.
+ * `value`: The primary metric (e.g., "180ms").
+ * `label`: The feature title.
+ * `sublabel`: A brief description of the feature.
+
+## Usage
+The component is self-contained and requires no props. It can be imported and placed directly into any marketing page:
+
+```tsx
+import { TrustBar } from "@/app/(marketing)/_components/trust-bar";
+
+export default function LandingPage() {
+ return (
+
+ {/* ... other sections */}
+
+
+ );
+}
+```
+
+## Dependencies
+* **`framer-motion`**: Used for all entrance and hover animations.
+* **`lucide-react`**: Provides the iconography for the stat cards.
+* **Tailwind CSS**: Used for styling, including custom gradients and responsive layout utilities.
\ No newline at end of file
diff --git a/docs/generated/src/app/(marketing)/page.tsx.md b/docs/generated/src/app/(marketing)/page.tsx.md
new file mode 100644
index 0000000..6729a47
--- /dev/null
+++ b/docs/generated/src/app/(marketing)/page.tsx.md
@@ -0,0 +1,35 @@
+# Marketing Landing Page (`src/app/(marketing)/page.tsx`)
+
+The `page.tsx` file serves as the public-facing landing page for **RoundZero**. It acts as the primary entry point for visitors, providing a comprehensive overview of the platform's value proposition, features, and pricing.
+
+## Purpose
+The landing page is designed to convert prospective users by showcasing the AI-powered interview preparation capabilities of the platform. It utilizes a modular architecture, composing various marketing components into a cohesive, visually engaging experience.
+
+## Key Components
+The page is structured as a single-page layout composed of the following modular components:
+
+* **`Navbar`**: Global navigation for the marketing site.
+* **`Hero`**: The primary call-to-action section introducing the platform.
+* **`TrustBar`**: Social proof section (e.g., logos of companies or testimonials).
+* **`FeaturesBento`**: A grid-based layout highlighting core platform features.
+* **`HowItWorks`**: A step-by-step guide on using the AI interview tools.
+* **`SampleReport`**: A preview of the AI-generated feedback reports.
+* **`Comparison`**: A feature comparison table (e.g., vs. traditional methods).
+* **`AudioSamples`**: Demonstrations of the AI voice/feedback capabilities.
+* **`Pricing`**: Subscription tiers and plan details.
+* **`FAQ`**: Common questions to address user concerns.
+* **`Footer`**: Site-wide footer containing links and legal information.
+
+## Visual Design
+The page implements a "premium" aesthetic using:
+* **Noise Background**: A subtle texture applied to the `bg-background` for visual depth.
+* **Animated Mesh Gradients**: Uses absolute-positioned, pulse-animated circular divs with `blur-3xl` to create a modern, high-end feel without overwhelming the content.
+* **Responsive Layout**: Built with Tailwind CSS to ensure the marketing content remains accessible across all device sizes.
+
+## Metadata
+The page exports standard Next.js metadata for SEO optimization:
+* **Title**: "RoundZero - Master Your Interview Skills"
+* **Description**: Focuses on AI-powered feedback, real-time analysis, and interview improvement.
+
+## Usage
+This file is the default export for the root marketing route. It does not require props and is intended to be rendered server-side. To modify the content or structure of the landing page, update the individual components located in `src/app/(marketing)/_components/`.
\ No newline at end of file
diff --git a/docs/generated/src/components/pricing-card.tsx.md b/docs/generated/src/components/pricing-card.tsx.md
new file mode 100644
index 0000000..9fbc837
--- /dev/null
+++ b/docs/generated/src/components/pricing-card.tsx.md
@@ -0,0 +1,55 @@
+# Pricing Card Component
+
+The `pricing-card.tsx` file provides a modular, highly customizable set of sub-components used to construct professional pricing tables or individual pricing cards. It leverages Tailwind CSS for styling and follows a composition-based pattern, allowing developers to assemble pricing layouts that fit specific design requirements.
+
+## Key Components
+
+The module exports several functional components that act as building blocks:
+
+* **`Card`**: The main container wrapper.
+* **`Header`**: The top section of the card, supporting an `isPopular` prop to highlight specific plans.
+* **`Plan` / `PlanName`**: Used to define the title and layout of the plan header.
+* **`Badge`**: A small label component, useful for "Recommended" or "New" tags.
+* **`Price` / `MainPrice` / `Period` / `OriginalPrice`**: A suite of components for displaying pricing information, including support for strikethrough original prices.
+* **`Body`**: The container for the feature list.
+* **`List` / `ListItem`**: Semantic `
` and `
` elements for displaying plan features.
+* **`Separator`**: A decorative divider with optional text, useful for separating tiers or feature sets.
+
+## Usage Example
+
+You can compose these components to create a standard pricing card:
+
+```tsx
+import * as Pricing from "@/components/pricing-card";
+
+export function MyPricingCard() {
+ return (
+
+
+
+ Pro Plan
+ Popular
+
+
+ $29
+ / month
+
+ Everything you need to scale.
+
+
+
+
+ Unlimited projects
+ Advanced analytics
+
+
+
+ );
+}
+```
+
+## Technical Details
+
+* **Styling**: Uses the `cn` utility function (from `@/lib/utils`) to merge Tailwind classes, ensuring compatibility with existing project themes.
+* **Extensibility**: Every component accepts standard HTML attributes via `React.ComponentProps`, allowing for easy addition of event handlers, custom IDs, or additional Tailwind classes.
+* **Design System**: The components are designed to be responsive, with font sizes and padding scaling appropriately for mobile and desktop viewports.
\ No newline at end of file
diff --git a/docs/generated/src/components/pricing-section.tsx.md b/docs/generated/src/components/pricing-section.tsx.md
new file mode 100644
index 0000000..1532d20
--- /dev/null
+++ b/docs/generated/src/components/pricing-section.tsx.md
@@ -0,0 +1,52 @@
+# PricingSection Component
+
+The `PricingSection` component is a reusable, responsive UI component designed to display subscription plans. It integrates with Stripe for billing, handles authentication-aware call-to-actions, and provides error handling for common checkout issues.
+
+## Key Functionality
+
+* **Dynamic Plan Rendering**: Fetches and displays plan configurations using `getPublicPlanConfigs`.
+* **Authentication Awareness**: Adjusts button labels and behavior based on the user's session status (e.g., "Start for free" vs. "Upgrade to Pro").
+* **Stripe Integration**:
+ * Handles the checkout flow via `authClient.subscription.upgrade`.
+ * Supports plan upgrades and downgrades (scheduling downgrades at the end of the billing period).
+ * Redirects users to Stripe Checkout sessions.
+* **Error Handling**: Includes a `CheckoutIssueDialog` to provide user-friendly feedback for common billing errors, such as Stripe mode mismatches or stale customer data.
+* **State Management**: Tracks loading states during checkout redirection to prevent duplicate submissions.
+
+## Components & Dependencies
+
+* **`PricingCard`**: A compound component pattern used to structure the visual representation of each plan (Header, Price, Body, Features).
+* **`authClient`**: Used for session management and triggering subscription upgrades.
+* **`orpc` / `orpcClient`**: Used to fetch the current user's billing state and prepare the backend for checkout.
+* **`CheckoutIssueDialog`**: A specialized modal for displaying actionable error messages related to billing.
+
+## Usage
+
+The component is designed to be dropped into a landing page or pricing page. It accepts optional configuration for the header section:
+
+```tsx
+import { PricingSection } from "@/components/pricing-section";
+
+export default function PricingPage() {
+ return (
+
+ );
+}
+```
+
+## Key Logic
+
+### `getPlanButtonLabel`
+This helper function determines the text displayed on the call-to-action button based on:
+1. **Authentication status**: Prompts for sign-in if the user is unauthenticated.
+2. **Current plan**: Identifies if the user is already on the plan or needs to upgrade/downgrade.
+
+### `handleCheckout`
+The primary event handler for the "Choose Plan" button:
+1. **Unauthenticated**: Redirects to sign-in with a `callbackUrl`.
+2. **Free Plan**: Redirects to the dashboard.
+3. **Active Plan**: Redirects to the billing management page.
+4. **Paid Plan**: Initiates the Stripe checkout process, handling potential errors via `openCheckoutIssueDialog`.
\ No newline at end of file