# {{PROJECT_NAME}} Presentation

## Overview

This is a Brixon presentation project for {{CLIENT_NAME}}.

- **Slug**: `{{SLUG}}`
- **SDK Version**: @brixon-group/presentation-sdk ^0.0.1
- **Purpose**: {{PURPOSE}}

## Project Structure

```
{{PROJECT_NAME}}/
├── src/
│   └── presentation.tsx   # Main presentation component
├── public/                # Static assets (images, etc.)
├── brixon.config.ts       # Presentation configuration
├── package.json           # Dependencies
├── tsconfig.json          # TypeScript configuration
└── CLAUDE.md              # This file (AI context)
```

## Commands

```bash
npm run dev      # Start local development (see guidance)
npm run build    # Build for deployment
```

## Configuration

The presentation is configured in `brixon.config.ts`:

```typescript
import { defineConfig } from '@brixon-group/presentation-sdk'

export default defineConfig({
  presentation: {
    slug: '{{SLUG}}',
    title: '{{TITLE}}',
    subtitle: '{{SUBTITLE}}',
    clientName: '{{CLIENT_NAME}}',
  },
  build: {
    outDir: 'dist',
  },
  dev: {
    port: 3000,
  },
})
```

## Presentation Structure

The presentation is defined in `src/presentation.tsx` using SDK components.

### Available Components

#### PresentationWrapper
Root layout component. Wrap all sections in this.

```tsx
<PresentationWrapper title="..." sections={sections}>
  {/* Sections */}
</PresentationWrapper>
```

#### Hero
Full-screen title section for the introduction.

```tsx
<Hero
  title="Main Headline"
  subtitle="Tagline"
  clientName="Client Name"
  year="2026"
/>
```

#### Content
General content section with headline and description.

```tsx
<Content
  id="unique-id"
  label="Section Label"
  headline="Section Headline"
  description="Body text describing the section..."
/>
```

#### CTA
Call-to-action section with button.

```tsx
<CTA
  headline="Ready to get started?"
  subline="Let's discuss next steps"
  buttonText="Contact Us"
  buttonHref="mailto:email@example.com"
/>
```

#### Section
Generic wrapper for custom sections.

```tsx
<Section id="custom" label="Custom Section">
  <div className="...">Custom content</div>
</Section>
```

### Sections Array

Every section must be registered in the `sections` array:

```typescript
const sections = [
  { id: 'hero', label: 'Introduction', order: 1, type: 'hero' as const },
  { id: 'challenge', label: 'The Challenge', order: 2, type: 'content' as const },
  { id: 'solution', label: 'Our Solution', order: 3, type: 'content' as const },
  { id: 'cta', label: 'Next Steps', order: 4, type: 'cta' as const },
]
```

**Important**: The `id` in sections must match the `id` prop on the component.

## Common Tasks

### Add a new section

1. Add entry to `sections` array:
   ```typescript
   { id: 'benefits', label: 'Key Benefits', order: 3, type: 'content' as const },
   ```

2. Add component in the correct position:
   ```tsx
   <Content
     id="benefits"
     label="Key Benefits"
     headline="Why Choose Us"
     description="..."
   />
   ```

3. Update `order` values for subsequent sections.

### Remove a section

1. Remove the component from the JSX
2. Remove the entry from `sections` array
3. Update `order` values for remaining sections

### Change content

Edit the props directly on the component:
- `title`, `headline` - Main headings
- `description`, `subline` - Body text
- `buttonText`, `buttonHref` - CTA actions

### Add images

1. Place image in `public/` directory
2. Reference with absolute path: `/image.png`
3. For backgrounds, use Tailwind classes or inline styles

### Style customization

Components use Tailwind CSS. You can:
- Add `className` prop for custom styles
- Wrap content in styled divs
- Use the `cn()` utility for conditional classes

```tsx
import { cn } from '@brixon-group/presentation-sdk'

<div className={cn('base-class', condition && 'conditional-class')}>
```

## Analytics

Sections are automatically tracked when visible. The `useTracking` hook enables:

- `session_start` - When presentation opens
- `section_enter` / `section_exit` - When sections become visible
- Custom events via `trackEngagement()`

```tsx
const { trackEngagement } = useTracking({
  presentationId: '{{SLUG}}',
  sections,
})

// Track custom event
trackEngagement('button_click', { target: 'cta' })
```

## Build & Deploy to Hosting Platform

Presentations are deployed to the Brixon Presentation Hosting Platform:

### For SDK Projects (External Repos)

1. **Build**: `npm run build` creates output files
2. **Copy to hosting platform**:
   ```bash
   # Copy page.tsx and metadata.ts to the hosting platform
   cp src/presentation.tsx ~/path/to/brixon-presentation-hosting/src/presentations/{{SLUG}}/page.tsx
   ```
3. **Deploy hosting platform**:
   ```bash
   cd ~/path/to/brixon-presentation-hosting
   npm run cf:build && wrangler deploy
   ```
4. **Access**: `https://present.brixongroup.com/p/{{SLUG}}`

### For Presentations in Hosting Platform

If the presentation is directly in the hosting platform repo:

1. Create `src/presentations/{{SLUG}}/page.tsx`
2. Optionally create `src/presentations/{{SLUG}}/metadata.ts`
3. Build and deploy: `npm run cf:build && wrangler deploy`
4. The sync runs automatically during build

### Content Types

- **Presentations** (`/p/[slug]`): Full B2B presentations viewable at `present.brixongroup.com/p/{{SLUG}}`
- **Lead Content** (`/c/[slug]`): Gated content pages (use `content_type: 'leadcontent'` in metadata)

By default, all SDK-created presentations deploy as **presentations** (not lead-content).

## Content Guidelines

### German Language
Use proper German characters:
- ä, ö, ü (not ae, oe, ue)
- Ä, Ö, Ü (not Ae, Oe, Ue)
- ß (not ss, except where grammatically correct)

### Tone
- Professional, B2B-focused
- Clear, concise copy
- Action-oriented CTAs

## Troubleshooting

### Component not rendering
- Check that `id` in component matches `sections` array
- Ensure component is inside `PresentationWrapper`

### Build fails
- Run `npm install` first
- Check TypeScript errors: `npx tsc --noEmit`

### Styling issues
- Tailwind classes must be complete (no dynamic class construction)
- Use `cn()` for conditional classes

---

*This presentation uses @brixon-group/presentation-sdk*
*Created: {{DATE}}*