docs: readme update

apps/docs/.cursorrules

@@ -0,0 +1,298 @@
+---
+description: Coding rules and conventions for the Docusaurus documentation application
+globs: ['apps/docs/**/*']
+alwaysApply: true
+---
+
+# Cursor Rules for Docs Application
+
+This file contains coding rules and conventions specific to the Docusaurus documentation application. These rules apply to all files within the `apps/docs/` directory and its subdirectories.
+
+## Project Context
+
+This is a Docusaurus 3.9.2 application built with:
+
+- React 19.2.0
+- TypeScript 5.9.3
+- Tailwind CSS 4.1.16
+- SCSS (via docusaurus-plugin-sass)
+- MDX for documentation content
+
+## Docusaurus-Specific Rules
+
+### Component Structure
+
+- Always use Docusaurus Layout component for pages: `import Layout from '@theme/Layout'`
+- Use `useDocusaurusContext()` hook to access site configuration
+- Wrap page content in `<Layout>` component with appropriate `title` and `description` props
+- Use `@site/` alias for importing from `src/` directory
+- Use `@theme/` for Docusaurus theme components
+
+### Theme Customization
+
+- Custom theme components should be placed in `src/theme/` directory
+- Follow Docusaurus swizzling patterns when customizing theme components
+- Use Docusaurus CSS variables (--ifm-\*) when available
+- Maintain compatibility with Docusaurus color mode (even if disabled)
+
+### MDX Content
+
+- Use frontmatter for metadata: `---\nsidebar_position: 1\n---`
+- Follow Docusaurus markdown conventions
+- Use proper heading hierarchy (h1 for page title, h2-h6 for sections)
+- Include code blocks with language tags
+- Use Docusaurus admonitions (:::tip, :::info, :::warning, :::danger)
+- Reference other docs using relative paths or Docusaurus routing
+
+### Sidebar Configuration
+
+- Configure sidebars in `sidebars.ts` file
+- Use autogenerated sidebars when possible: `{type: 'autogenerated', dirName: '.'}`
+- Maintain consistent sidebar structure across documentation
+
+## TypeScript/React Conventions
+
+### Component Patterns
+
+- Prefer function declarations over arrow functions for exported components
+- Use `React.FC<Props>` or explicit function return types
+- Return type should be `ReactNode` for page components
+- Define component props using TypeScript interfaces
+- Use descriptive interface names ending with `Props` (e.g., `CardProps`, `TypographyProps`)
+
+### Type Safety
+
+- Always define explicit types for component props
+- Use `React.ReactNode` for children props
+- Avoid `any` type - use `unknown` or proper types instead
+- Use type imports when importing types: `import type { ReactNode } from 'react'`
+- Leverage TypeScript strict mode features
+
+### Import Organization
+
+Follow this import order:
+
+1. External packages (React, framer-motion, etc.)
+2. Docusaurus imports (`@docusaurus/*`, `@theme/*`)
+3. Site imports (`@site/src/*`)
+4. Relative imports (`./`, `../`)
+5. Type imports should use `import type` syntax
+
+Example:
+
+```typescript
+import { motion } from 'framer-motion';
+import React, { ReactNode } from 'react';
+
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+
+import { Card } from '@site/src/components/Card';
+import { Typography } from '@site/src/components/Typography';
+
+import Layout from '@theme/Layout';
+
+import styles from './page.module.scss';
+```
+
+### Component Organization
+
+- Organize components in folders with `index.tsx` as the main file
+- Use PascalCase for component file and folder names
+- Export components as default or named exports consistently
+- Keep component files focused and single-purpose
+
+## Styling Conventions
+
+### Tailwind CSS
+
+- Use Tailwind utility classes for styling
+- Prefer Tailwind classes over custom CSS when possible
+- Use `clsx` utility for conditional className composition
+- Follow Tailwind responsive breakpoints: `md:`, `lg:`, etc.
+- Use Tailwind color variables when available: `text-highlighted`, `text-violet`, etc.
+- Check for variables in `src/css/custom.css`
+
+### SCSS Modules
+
+- Use SCSS modules (`.module.scss`) for page-specific styles
+- Import styles: `import styles from './page.module.scss'`
+- Use camelCase for class names in SCSS modules
+- Keep SCSS modules scoped to specific pages or components
+- Use SCSS variables and mixins for reusable styles
+
+### CSS Classes
+
+- Use `clsx` for combining multiple class names
+- Apply Tailwind classes directly in JSX
+- Use SCSS module classes via `styles.className`
+- Maintain consistent spacing and sizing using Tailwind utilities
+
+Example:
+
+```typescript
+import clsx from 'clsx';
+import styles from './component.module.scss';
+
+<div className={clsx('flex flex-col gap-4', styles.customClass, className)}>
+```
+
+## Code Style Guidelines
+
+### Function Declarations
+
+- Use function declarations for exported components
+- Use arrow functions for internal helper functions
+- Use descriptive function names that indicate purpose
+
+### Variable Naming
+
+- Use camelCase for variables and functions
+- Use PascalCase for components and types
+- Use UPPER_CASE for constants
+- Use descriptive names that indicate purpose
+
+### Code Formatting
+
+- Follow Prettier configuration from `@o2s/prettier-config`
+- Maintain consistent indentation
+- Use semicolons at end of statements
+- Keep lines under reasonable length (Prettier will handle this)
+
+### Comments
+
+- Write comments in English
+- Use JSDoc comments for exported functions and components
+- Explain "why" not "what" in comments
+- Keep comments up-to-date with code changes
+
+## File Structure
+
+### Pages (`src/pages/`)
+
+- Use `.tsx` extension for React pages
+- Export default function component
+- Use Layout wrapper
+- Import styles from `.module.scss` files in same directory
+
+### Components (`src/components/`)
+
+- Organize in folders: `ComponentName/index.tsx`
+- Export component as default or named export
+- Include TypeScript interfaces in same file or separate `types.ts`
+- Keep components reusable and well-documented
+
+### Assets (`src/assets/`)
+
+- Organize by type: `icons/`, `logos/`, etc.
+- Use SVG format for icons and logos
+- Import SVG as React components when used in JSX
+
+### Styles (`src/css/`)
+
+- Global styles in `custom.css`
+- Use CSS custom properties for theme values
+- Follow Docusaurus CSS variable naming: `--ifm-*`
+
+## Best Practices
+
+### Performance
+
+- Use React.memo for expensive components when appropriate
+- Lazy load heavy components or assets
+- Optimize images and use appropriate formats
+- Minimize bundle size by importing only needed dependencies
+
+### Accessibility
+
+- Use semantic HTML elements
+- Include proper ARIA labels when needed
+- Ensure keyboard navigation works
+- Maintain proper heading hierarchy
+- Use descriptive alt text for images
+
+### SEO
+
+- Include proper meta tags in Layout component
+- Use descriptive page titles and descriptions
+- Structure content with proper heading hierarchy
+- Use semantic HTML elements
+
+### Error Handling
+
+- Handle errors gracefully in components
+- Provide fallback UI for error states
+- Use TypeScript to catch errors at compile time
+- Validate props and data when necessary
+
+## Common Patterns
+
+### Page Component Pattern
+
+```typescript
+import type { ReactNode } from 'react';
+
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+
+import Layout from '@theme/Layout';
+
+import styles from './page.module.scss';
+
+export default function PageName(): ReactNode {
+    const { siteConfig } = useDocusaurusContext();
+
+    return (
+        <Layout title="Page Title" description="Page description">
+            <div className={styles.container}>
+                {/* Page content */}
+            </div>
+        </Layout>
+    );
+}
+```
+
+### Component Pattern
+
+```typescript
+import React from 'react';
+
+import clsx from 'clsx';
+
+interface ComponentProps {
+    children: React.ReactNode;
+    className?: string;
+}
+
+export function Component({ children, className }: ComponentProps) {
+    return (
+        <div className={clsx('base-classes', className)}>
+            {children}
+        </div>
+    );
+}
+```
+
+## Dependencies
+
+### Key Packages
+
+- `@docusaurus/core`: 3.9.2
+- `@docusaurus/preset-classic`: 3.9.2
+- `react`: ^19.2.0
+- `react-dom`: ^19.2.0
+- `typescript`: 5.9.3
+- `tailwindcss`: ^4.1.16
+- `clsx`: ^2.1.1
+- `framer-motion`: ^12.23.24 (when complex animations needed)
+
+### Development Tools
+
+- `@o2s/eslint-config`: Shared ESLint configuration
+- `@o2s/prettier-config`: Shared Prettier configuration
+- `@o2s/typescript-config`: Shared TypeScript configuration
+
+## Notes
+
+- Follow existing code patterns in the codebase
+- Maintain consistency with other components
+- Keep components focused and single-purpose
+- Write self-documenting code with clear naming

apps/docs/README.md

@@ -39,6 +39,3 @@ $ GIT_USER=<Your GitHub username> npm run deploy
 ```
 
 If you are using GitHub pages for hosting, this command is a convenient way to build the website and push to the `gh-pages` branch.
-
-
-

apps/docs/docusaurus.config.ts

@@ -335,6 +335,25 @@ const config: Config = {
             items: hideDocs
                 ? undefined
                 : [
+                      {
+                          type: 'dropdown',
+                          label: 'Product',
+                          position: 'left',
+                          items: [
+                              {
+                                  label: 'Features',
+                                  to: 'product/features',
+                              },
+                              {
+                                  label: 'Starters',
+                                  to: 'product/starters',
+                              },
+                              {
+                                  label: 'Integrations',
+                                  to: 'product/integrations',
+                              },
+                          ],
+                      },
                       {
                           type: 'dropdown',
                           label: 'Developers',
@@ -396,12 +415,6 @@ const config: Config = {
                           label: 'Partners',
                           to: '/partners',
                       },
-                    {
-                        to: '/dxp',
-                        label: 'DXP Starter',
-                        position: 'left',
-                    },
-
                       {
                           type: 'search',
                           position: 'right',