AI Website Analyzer & Lead Gen Platform

1. 1Vollständige technische Architektur: Next.js (App Router), Tailwind CSS, Vercel AI SDK, Serverless Functions, Vercel KV/Postgres und Resend für Transaktions-Mails.
2. 2Kostenkontrolle: Hartes Limit von 20 Euro pro Monat (ca. 40 Analysen) mit dynamischer UI-Umschaltung auf eine Warteliste bei Erreichen der Obergrenze.
3. 3Mehrstufiger Workflow: Lead-Erfassung mit Double-Opt-In (DOI), Serverless-Crawler (Startseite, Hauptnavigation, bis zu 10 Unterseiten) und anschließende Analyse.
4. 4KI- und Regelanalyse: Kombination aus harten Code-Checks (SSL, OWASP, Impressum, Cookies) und LLM-Auswertungen (Text, SEO, UI/UX, Barrierefreiheit) sowie Bildgenerierung via DALL-E 3.
5. 5Lead-Nurturing und Upselling: PDF-Report mit Layman- und Experten-Teil sowie gezielte Bewerbung menschlicher Fachberater auf der Dankesseite und in der E-Mail.

# Project: AI Website Analyzer & Lead Gen Platform
**Role:** Senior Full Stack Developer & AI Engineer
**Stack:** Next.js (App Router), Tailwind CSS, Vercel AI SDK, Vercel Serverless Functions, Vercel KV (Redis) or Postgres for state, Resend (for emails).

## 1. Project Overview
Create a high-performance landing page that offers a free, AI-powered website analysis. The system captures leads, performs a Double-Opt-In (DOI), crawls the target website, analyzes it using LLMs, generates a PDF report, and emails it to the user.

## 2. Budget & Cost Control Logic (Crucial)
**Constraint:** The AI API costs must not exceed €20/month.
* **Implementation:** Implement a request counter in the database (reset monthly).
* **Logic:** Estimate the cost per report (e.g., ~$0.50). Set a hard limit (e.g., 40 requests/month).
* **Conditional UI:**
    * **If under limit:** Show standard "Request Report" workflow.
    * **If over limit:** Change the UI flow. Allow the user to submit, but change the success message to: *"Aufgrund der hohen Nachfrage haben wir unser monatliches Limit für Echtzeit-Analysen erreicht. Wir haben Ihre Anfrage gespeichert und senden Ihnen den Report, sobald wieder Kapazitäten frei sind."* (Save the request to a queue, do not trigger the immediate AI Agent).

## 3. Page 1: Landing Page (Frontend)

### Copy & Structure
**Language:** German.

* **Hero Section:**
    * **Headline:** "Entfesseln Sie das volle Potenzial Ihrer Website."
    * **Subheadline:** "Starten Sie jetzt Ihre kostenlose, KI-gestützte Analyse und erhalten Sie einen detaillierten Report per E-Mail."
    * **Intro Text:** explain the value proposition:
        * "Umfassende Analyse kritischer Erfolgsfaktoren."
        * "Wir crawlen die Hauptseiten und relevante Unterseiten."
        * "Deep Research"-Analyse in Bereichen wie SEO, Technik, Design, UI/UX und Sicherheit."
        * "Zweigeteilter Report: Ein Teil für Laien (einfache To-dos), ein Teil für Spezialisten (detaillierte Fachanalyse)."

* **Form Section:**
    * **Input:** Website URL (Type: URL, Required).
    * **Input:** E-Mail-Adresse (Type: Email, Required).
    * **Checkbox (Required):** Label: *"Ich stimme der Datenschutzerklärung zu. Ich bin damit einverstanden, dass meine E-Mail-Adresse für die Zusendung des Reports und für gelegentliche Informationen zu Web-Optimierungen (Newsletter) verwendet wird. Diese Einwilligung kann ich jederzeit widerrufen."*
    * **Button:** "Kostenlosen Report anfordern"

## 4. Post-Submission Flow

### Step 4.1: Double-Opt-In (DOI)
* Upon submission, store the lead with status `PENDING`.
* Send an email (via Resend) with a verification link.
* **Subject:** "Bitte bestätigen Sie Ihre Analyse-Anfrage".

### Step 4.2: "Thank You" Page (Immediate feedback)
* Replace the form content immediately after clicking submit.
* **Message:** "Fast geschafft! Wir haben eine Bestätigungs-E-Mail an Sie gesendet. Bitte klicken Sie auf den Link in der E-Mail, um Ihre Adresse zu verifizieren und die Analyse zu starten."
* **Expert Upsell Section (Prominent):**
    * **Title:** "Sie möchten direkt mit Experten sprechen?"
    * **Text:** "Während unsere KI den Report erstellt, stehen Ihnen unsere Spezialisten für eine persönliche und tiefgehende Beratung zur Verfügung. Sie helfen dort weiter, wo eine automatisierte Analyse an ihre Grenzen stößt."
    * **Expert List:**
        * Kurt Dirnbauer (Technik & Konzeption)
        * Iris Kern (UI/UX & Usability)
        * Jürgen Bartl (Accessibility)
        * Martina Manhartsberger (Informationsarchitektur)
        * Judith Scheikl (Projektmanagement)
        * Thomas Hofer (Text und Konzept)

## 5. Backend: The Analysis Engine (Serverless)
**Trigger:** This process starts ONLY after the DOI link is clicked.

### A. Crawler
* Use a lightweight crawler (custom fetch or specialized library compatible with Vercel timeouts).
* **Scope:**
    1.  Homepage (User input).
    2.  All links in the main navigation (First level).
    3.  Up to 10 newest subpages from those main pages (heuristic detection).

### B. Analysis Logic (AI Agent Chain)
Perform the following checks (mix of programmatic checks and LLM analysis):

1.  **Tech/Hard Checks (Programmatic):**
    * Valid SSL Certificate?
    * Check for 404 page existence.
    * Security: Scan for OWASP Top 10 indicators (Only report if 100% certain).
2.  **Legal (Programmatic + AI):**
    * Impressum check (is it reachable from everywhere?).
    * Cookie Consent: Are cookies set before consent? (Check headers).
3.  **AI Analysis (LLM Prompts):**
    * **Text:** Readability score, tone, optimization suggestions.
    * **Design:** Feedback on modernity and responsiveness.
    * **SEO:** Classic SEO tags + "LLM Searchability" (how well can an AI read this site?). Technical SEO suggestions (simulate LightHouse insights).
    * **UI/UX/Usability:** Concrete improvement steps.
    * **Information Architecture:** Structure analysis.
    * **Accessibility:** General hints (Part A) + Detailed analysis (Part B).
    * **Visual Redesign:** Use DALL-E 3 (or similar) to generate a "Mockup/Sketch" image based on the top 10 improvements found.

### C. Report Generation (PDF)
Create a PDF using `react-pdf` or `jspdf`.

* **Structure:**
    * **Part A (Layman):** Simple language, actionable "To-Dos".
    * **Part B (Specialist):** "Executive Summary" followed by deep-dive technical terminology and data.
* **Content:** Include the generated Visual Redesign image.

## 6. Delivery

### Email
* Send the PDF as an attachment.
* **Body Text:**
    * **Disclaimer:** "Hinweis: Dies ist ein automatisch erstelltes Dokument. Eine professionelle menschliche Überprüfung wird empfohlen."
    * **Expert Pitch:** Re-iterate the text about human experts being available for the identified problems (List the experts again).

### Fallback Handling
* **If PDF generation fails or file > 10MB:**
    * Do NOT send the error to the user.
    * Send an alert email to `dirnbauer@webconsulting.at` containing the raw analysis data and the user contact info.