docs/
├── docs.json            # Navigation, theme, branding config
├── index.mdx            # Landing page
├── get-started/         # Onboarding
│   ├── quickstart.mdx   # First project walkthrough
│   ├── prompt-guide.mdx # How to write good prompts
│   └── prompt-library.mdx # Example prompts by category
├── features/            # Platform capabilities
│   ├── agent-mode.mdx   # AI assistant (5 modes)
│   ├── visual-editor.mdx # Point-and-click editing
│   ├── code-editor.mdx  # VS Code in browser
│   ├── image-generation.mdx # AI image creation
│   ├── publish-your-app.mdx # Build and deploy
│   ├── custom-domain.mdx # DNS setup
│   └── publish-to-optisigns.mdx # Digital signage
├── optidev-cloud/       # Backend-as-a-service
│   ├── how-to-use.mdx   # Activation and overview
│   ├── database.mdx     # PostgreSQL access
│   ├── edge-functions.mdx # Serverless functions
│   ├── storage.mdx      # File storage
│   └── auth.mdx         # User authentication
├── security/            # Enterprise features
│   ├── securing-your-app.mdx # Best practices
│   ├── single-sign-on.mdx # SSO overview
│   ├── sso-okta.mdx     # Okta setup guide
│   └── sso-azure-ad.mdx # Azure AD setup guide
├── billing/             # Plans and payments
│   ├── plans-and-credits.mdx # Pricing tiers
│   └── payment-methods.mdx # Stripe integration
├── images/              # Static images for docs
├── logo/                # Brand assets
├── snippets/            # Reusable MDX snippets
└── claude-dev/          # Development notes (not published)

npm run dev  # localhost:3009

<!-- Small (dropdowns, small UI) -->
<img
  src="/images/feature/image-name.png"
  alt="Descriptive alt text"
  style={{maxWidth: "260px"}}
/>

<!-- Medium (modals, dialogs) -->
<img
  src="/images/feature/image-name.png"
  alt="Descriptive alt text"
  style={{maxWidth: "320px"}}
/>

<!-- Full width (wide pickers, dashboards) -->
![Alt text](/images/feature/image-name.png)