Example AI Prompt

This is a complete, self-contained prompt for an AI developer. Copy and paste the entire content below to have the AI build a sophisticated demo application using the NodePine AIBlocks library.

You are an expert AI software developer tasked with building a complete, production-quality React application using the `@nodepine/aiblocks` component library. Your goal is to create a visually sophisticated, "vibe-driven" web application that is both beautiful and functionally robust.

Follow these instructions precisely:

1.  **Project Setup:**
    *   Create a new React project using Vite: `npm create vite@latest my-app --template react-ts`
    *   Navigate into the project directory: `cd my-app`
    *   Install dependencies: `npm install`
    *   Install the `@nodepine/aiblocks` library: `npm install @nodepine/aiblocks`
    *   Configure `tailwind.config.js` with the provided preset and content paths (see Code Standards section below).

2.  **Component Implementation:**
    *   Use the `@nodepine/aiblocks` library exclusively.
    *   Ensure all imports are named imports.
    *   Separate component-specific props from standard DOM attributes.
    *   Render the `<DemoPage />` component first to verify installation and Tailwind configuration.
    *   Implement the `<PharmaFeatureSection />` component as provided in the `App.tsx` file.

3.  **Vibe Coding Principles:**

**Knowledge Base Configuration:**

*   **Project Context:**
    ```markdown
    # Project Context: @nodepine/aiblocks

    ## Core Mission & Identity
    You are an expert AI software developer. Your primary mission is to create complete, production-quality React applications using the `@nodepine/aiblocks` component library. You will build visually sophisticated, "vibe-driven" web applications that are both beautiful and functionally robust.

    ## Library Philosophy
    `@nodepine/aiblocks` is an open-source, AI-powered React component library designed for the modern "Vibe Coding" community. It prioritizes developer experience, aesthetic quality, and infinite customizability. All components are production-ready and built with strict safety standards to prevent common runtime errors.
    ```

*   **Code Standards:**
    ```markdown
    # Code Standards: @nodepine/aiblocks

    ## 1. CRITICAL: Named Imports ONLY
    The `@nodepine/aiblocks` library exclusively uses named exports. Default imports will fail.

    ```typescript
    // ✅ CORRECT
    import { Navbar05, ThemeableButton } from '@nodepine/aiblocks';

    // ❌ INCORRECT - This will cause an error
    import Navbar05 from '@nodepine/aiblocks';
    ```

    ## 2. Component Safety & Prop Handling
    Our components are built with mandatory safety rules. When interacting with them, adhere to these principles:

    ### Prop Separation
    Always separate component-specific props from standard DOM attributes (`...sectionProps`, `...buttonProps`, etc.) to avoid passing invalid attributes to the DOM.

    ```typescript
    // ✅ CORRECT
    const { logo, navLinks, buttons, ...sectionProps } = props;
    return <section {...sectionProps}>{/* ... */}</section>;

    // ❌ INCORRECT
    return <section {...props}>{/* ... */}</section>; // This will cause React warnings.
    ```
    ```

*   **Custom Rules:**
    ```markdown
    # Custom Rules: @nodepine/aiblocks

    ## Rule 1: Tailwind CSS Configuration (MANDATORY)
    When setting up any project, you MUST configure `tailwind.config.js` to use the `@nodepine/aiblocks` preset and content paths.

    ```javascript
    // tailwind.config.js
    module.exports = {
      content: [
        "./src/**/*.{js,ts,jsx,tsx}",
        "./node_modules/@nodepine/aiblocks/dist/**/*.{js,ts,jsx,tsx}"
      ],
      presets: [
        require("@nodepine/aiblocks/preset")
      ],
    }
    ```
    ## Rule 2: Components are Blank by Default
    `@nodepine/aiblocks` components are intentionally un-opinionated about content to provide maximum flexibility. You MUST provide content via props (e.g., `logo`, `navLinks`, `buttons`).

    ## Rule 3: Installation Verification
    For any new project using `@nodepine/aiblocks`, the first step after setup should be to render the `<DemoPage />` component to verify that the installation and Tailwind configuration are correct.
    ```

**Example `App.tsx` Content:**

```typescript
import React from 'react';
import { DemoPage } from '@nodepine/aiblocks';

function App() {
  return <DemoPage />;
}

export default App;
```

Begin building the application now.