customer-frontend/CLAUDE.md

CLAUDE.md

This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.

Project Overview

BotKonzept Frontend — a static SaaS landing page and customer dashboard for an AI chatbot service. Users can upload PDFs, create chatbots trained on their documents, and embed them on their websites.

Stack: Vanilla HTML5 / CSS3 / JavaScript (ES6+). No framework, no bundler, no package manager.

Local Development

python3 -m http.server 8000
# → http://localhost:8000

No build step required. Edit files and refresh the browser.

Architecture

index.html      # Public landing page: hero, features, pricing, registration form, FAQ
dashboard.html  # Authenticated customer dashboard
css/
  style.css     # Landing page styles (~30KB) — CSS variables, components, animations
  dashboard.css # Dashboard styles (~21KB) — sidebar layout, chat UI, file upload
js/
  main.js       # Landing page logic — registration form, FAQ accordion, scroll animations
  dashboard.js  # Dashboard logic — file upload, chatbot chat, embed code, settings
logo/           # SVG logo asset

Key Implementation Details

API / Webhook Integration

Endpoints are defined as CONFIG objects at the top of each JS file:

• Registration webhook: https://n8n.userman.de/webhook/botkonzept-registration (main.js)
• API base: https://api.botkonzept.de (dashboard.js)

The dashboard has a full demo mode that works without a backend — it uses localStorage for session state and simulates uploads/responses with dummy data.

dashboard.js Feature Areas

• Auth: Session check via localStorage; falls back to demo mode
• File Upload: Drag-and-drop + click, PDF-only, max 10 MB; simulates upload progress
• Chat: User/bot message UI, typing indicator, webhook call with demo fallback
• Embed Code: Clipboard API copy with document.execCommand fallback
• Trial Banner: Dynamic discount logic — 30% on day 3, 15% on day 5, 48-hour countdown
• Settings: Bot name, welcome message, and color saved to localStorage

main.js Feature Areas

• Registration form: validates email + URL, POSTs to n8n webhook with German error messages
• FAQ accordion (one item open at a time)
• Scroll animations via IntersectionObserver
• Typing animation in chat preview section

CSS Design Tokens

Defined as CSS variables in style.css:

• Primary: #6366f1 (indigo), Secondary: #0ea5e9 (sky blue), Accent: amber, Success: emerald, Error: red
• Font: Inter (Google Fonts CDN)
• Responsive breakpoints: >1024px desktop, 768–1024px tablet, <768px mobile, <480px small mobile

Security

• Chat messages are HTML-escaped before insertion to prevent XSS
• Form inputs validated client-side before submission

React-Migration (landing-react/)

Vollständige React-SPA unter landing-react/ — originalgetreue Portierung der index.html-Landingpage.

Stack: Vite · React 18 · TypeScript · Tailwind CSS · Lucide React

cd landing-react
npm install
npm run dev      # Entwicklungsserver → http://localhost:5173
npm run build    # Produktions-Build → dist/
npm run preview  # Build lokal vorschauen

Komponenten: Navbar, Hero, TrustedBy, Features, Steps, Pricing, RegistrationSection, FAQ, CTA, Footer

Registrierungsformular: POST an https://n8n.zq0.de/webhook-test/test. Status-States: idle → loading → success | error. Erfolgsantwort wird als JSON-Karte oder Bild dargestellt.

Globale Stile: Gradient-Utilities (.gradient-text, .bg-gradient-primary, .btn-gradient), Typing-Dots-Animation und FAQ-Accordion-Transition in src/index.css. Tailwind-Farberweiterungen (primary, primary-dark, primary-light, secondary, accent, success, error) in tailwind.config.js.

Localization

All user-facing strings are in German (de-DE). Number/date formatting uses de-DE locale.