# Nano AI Feature Page Documentation

**Last Updated:** 2026-02-03

**Content audit (2026-02-03):** Reduced repetition across hero, section intros, benefits, and FAQ; aligned FAQ answers with section messaging; tightened storytelling flow (problem → show → benefits → examples → objections → proof → CTA). "Keine Menüs / einfach fragen" kept in hero and meta only; "Natürliche Sprache" stated once in Natürliche Sprache section; FAQ answers add new information or angle.

## Overview

Complete documentation for the Ordio Nano AI assistant feature page (`product_nano_ai.php`). This page showcases Nano - an intelligent AI chat assistant that enables managers to accomplish workforce management tasks through natural language conversations.

## Page Information

- **File:** `v2/pages/product_nano_ai.php`
- **URL:** `https://www.ordio.com/nano-ai`
- **Page Type:** Product Feature Page
- **Status:** ✅ Complete
- **Created:** 2026-02-02

## Page Structure

### 1. Hero Section

**Layout:** Two-column grid (text left, chat component right on desktop)

**Content:**

- Badge: "AI-Assistent"
- H1: "Nano – Erledige alles per Chat, spare Zeit"
- Subheadline: "Mit Nano erledigst du Schichtplanung, Zeiterfassung und Abfragen per natürlicher Sprache. Keine Menüs, keine Formulare – einfach fragen und sofort Ergebnisse. Spare 3-4 Stunden pro Woche."
- Primary CTA: "Kostenlos testen"
- Interactive Chat Component: Animated chat interface showing example conversations

**SEO:**

- H1 includes primary keyword "Nano"
- Benefit-focused messaging with time savings
- Chat component demonstrates functionality visually

### 2. How It Works Section

**Component:** `how-it-works-component.php`

**Content:** Animated split-screen comparison (traditional vs. Nano) with time-saved banner. Auto-plays when scrolled into view.

### 3. Benefits Section ("Was du mit Nano gewinnst")

**Component:** `benefits-component.php`  
**Placement:** Between "So funktioniert Nano" and "Natürliche Sprache".

**Layout:** Responsive grid (2 cols desktop, 1 col mobile). Primary benefit (time savings) spans full width.

**Content:** 6 user-first benefit cards with icons:

1. **3–4 Stunden pro Woche sparen** (primary, with proof point)
2. Ein Satz statt viele Klicks
3. Sofort loslegen – keine Einarbeitung
4. Von überall nutzbar
5. Komplexe Fragen in Sekunden
6. Weniger Fehler durch KI-Validierung

**Design:**

- White cards with shadow, `rounded-2xl`, `border-[#EDEFF3]`
- Ordio Blue icon backgrounds (`bg-ordio-blue/10`), SVG icons
- AOS fade-up with staggered delays (0–500 ms)
- Semantic HTML, ARIA labels, `role="article"` per card

**Purpose:** Bridge from "how it works" to "what you gain"; conversion-optimized, du tone, benefit-focused copy. No chat animations.

### 4. Natürliche Sprache (Conversation Examples)

**Component:** `conversation-cards-component.php`

**Content:** Expandable conversation cards showing natural language examples. Section H2: "Natürliche Sprache".

### 5. Feature Showcase Sections (if present)

**Layout:** Alternating two-column layout (image left/right)

**Features Showcased:**

1. **Schichtplanung per Chat** - Query availability, create shifts, assign employees
2. **Zeiterfassung sofort abfragen** - Check hours, calculate overtime, analyze time data

**Each Feature Includes:**

- H2 headline
- Benefit-focused description
- Feature list with example prompts
- Link to related product page
- Screenshot (lazy loaded)

### 4. Use Cases Section

**Layout:** Two-column grid

**Use Cases:**

1. **Schnelle Schichterstellung** - 2.5 minutes saved per shift
2. **Verfügbarkeitsprüfung** - 7 minutes saved per check
3. **Komplexe Analyse** - 25 minutes saved per analysis
4. **Multi-Step Workflow** - 7 minutes saved per workflow

**Design:**

- Gray background cards
- Numbered badges
- Problem → Solution → Result format
- AOS fade-up animations

### 5. Comparison Table

**Layout:** Responsive table

**Comparison Points:**

- Schicht erstellen
- Verfügbarkeit prüfen
- Komplexe Abfrage
- Einarbeitungszeit
- Fehlerrate

**Comparison:** Nano AI vs. Menü-Navigation vs. Manuell

**Design:**

- Time comparisons (seconds vs. minutes)
- Highlighted Nano column
- Clear time savings visualization

### 6. FAQ Section

**Layout:** Simple cards (not accordion)

**FAQ Questions (6 total):**

1. Wie funktioniert Nano?
2. Muss ich Nano trainieren?
3. Welche Aufgaben kann Nano erledigen?
4. Ist Nano sicher?
5. Wie viel Zeit spare ich mit Nano?
6. Funktioniert Nano auf dem Handy?

**Design:**

- Gray background cards
- Simple Q&A format
- AOS fade-up animations

**Schema:** FAQPage schema included in JSON-LD

### 7. Final CTA Section

**Layout:** Centered, full-width blue gradient background

**Content:**

- H2: "Bereit, Zeit zu sparen?"
- Subheadline: "Teste Nano kostenlos und erlebe, wie einfach Personalplanung sein kann."
- Primary CTA: "Kostenlos testen"

## SEO Optimization

### Meta Tags

- **Title:** "Nano AI-Assistent: Aufgaben per Chat erledigen - Ordio" (58 chars)
- **Description:** "Mit Nano erledigst du Schichtplanung, Zeiterfassung und Abfragen per Chat. Spare 3-4 Stunden pro Woche. Keine Menüs, einfach fragen. Kostenlos testen." (158 chars)
- **OG Tags:** Complete with image, description, URL
- **Twitter Cards:** Summary large image format

### Schema Markup

**Included Schemas:**

- WebPage
- SoftwareApplication
- Service
- BreadcrumbList
- FAQPage

**Key Schema Details:**

- Application category: BusinessApplication
- Operating system: Web, iOS, Android
- Price: Included in Ordio subscription
- Feature list: 7 key features
- Screenshot: First screenshot from analysis

### Keywords

**Primary:**

- Nano AI-Assistent
- AI-Assistent Personalplanung
- Chat-Assistent Schichtplanung

**Secondary:**

- KI-Assistent Ordio
- Sprachassistent Personalverwaltung
- KI Chat Personalplanung

## Interactive Components

### Chat Hero Component

**File:** `v2/components/nano-ai/chat-hero-component.php`
**CSS:** `v2/css/nano-ai-components.css`

**Features:**

- Animated chat interface
- Rotating example conversations (5 total)
- Typing animation for AI responses
- Smooth transitions between conversations
- Responsive design

**Example Conversations:**

1. Availability query: "Wer ist nächste Woche für die Frühschicht verfügbar?"
2. Shift creation: "Erstelle eine Schicht für nächsten Samstag, 10-18 Uhr"
3. Overtime query: "Wie viele Überstunden hat Max diesen Monat?"
4. Open shifts: "Zeig mir alle offenen Schichten"
5. Comparative analysis: "Vergleiche die Arbeitszeiten diesen Monat mit letztem Monat"

### Benefits Component

**File:** `v2/components/nano-ai/benefits-component.php`
**CSS:** `v2/css/nano-ai-components.css` (`.nano-benefits-section`, `.nano-benefit-card`)

**Purpose:** User-first benefits section between "So funktioniert Nano" and "Natürliche Sprache". Presents top 6 benefits with conversion-optimized copy and cohesive storytelling.

**Design decisions:**

- Primary benefit (time savings) spans full width; 5 secondary benefits in 2-col grid
- No chat animations; static SVG icons only
- AOS fade-up with staggered delays (0–500 ms)
- Benefit selection: time savings, no menus, zero learning curve, accessibility, complex queries, error prevention

**Maintenance:** Update benefit copy in the component file; keep metrics (e.g. 3–4 Stunden) aligned with nano-ai-benefits.md and content-strategy.md.

## Content Strategy

### Tone & Style

- **Du tone:** Informal "du" pronouns throughout
- **Benefit-focused:** Lead with outcomes, not features
- **Natural language:** Conversational, avoid AI content tells
- **Manager-focused:** Primary audience is managers
- **Quantified benefits:** Specific time savings (3-4 hours/week)

### Key Messages

1. **Time Savings:** 3-4 hours per week per manager
2. **Ease of Use:** No training required, natural language
3. **Speed:** Tasks in seconds instead of minutes
4. **Intelligence:** Context-aware, proactive suggestions
5. **Accessibility:** Works on all devices

## Visual Assets

### Screenshots

**Location:** `v2/img/nano-ai/screens/webp/`
**Format:** WebP (converted from PNG)
**Total:** 14 screenshots

**Usage:**

- Hero section: Chat component (animated, not screenshot)
- Feature showcases: Relevant screenshots showing Nano in action
- Lazy loading: All images use `loading="lazy"`

### Icons

**SVG Icons Used:**

- Chat bubble (benefits)
- Lightning bolt (speed)
- Clock (time savings)
- Lightbulb (intelligence)
- Mobile device (accessibility)

## Conversion Optimization

### CTAs

- **Primary:** "Kostenlos testen" (appears 2x: hero + final section)
- **Frequency:** Every 2-3 sections
- **Placement:** Above fold in hero, after benefits, final section

### Trust Signals

- Security: Same standards as Ordio
- Integration: Seamlessly integrated with Ordio
- No training: Start immediately
- Quantified benefits: Specific time savings

### Social Proof

- Time savings statistics
- Use case examples with specific savings
- Comparison table showing advantages

## Technical Implementation

### Dependencies

- Alpine.js: For interactive chat component
- AOS (Animate On Scroll): For scroll animations
- Tailwind CSS: For styling
- Custom CSS: `nano-ai-components.css` for chat component

### Performance

- Images: WebP format, lazy loading
- CSS: Minified version loaded
- JavaScript: Alpine.js inline, AOS loaded via head.php
- No external dependencies for chat component

## Related Documentation

- **[Nano AI Benefits](../product-features/nano-ai-benefits.md)** - Comprehensive benefits documentation
- **[Nano AI Content Strategy](nano-ai-content-strategy.md)** - Content strategy guide
- **[Nano AI Feature Documentation](../product-features/nano-ai-documentation.md)** - Feature functionality documentation

## Maintenance Notes

- Update screenshots when Nano UI changes
- Refresh example conversations to reflect new capabilities
- Update time savings statistics based on user feedback
- Monitor conversion rates and optimize CTAs