AI Website Analyzer & Lead Gen Platform

1. 1Full technical stack: Next.js (App Router), Tailwind CSS, Vercel AI SDK, Serverless Functions, Vercel KV/Postgres, and Resend for transactional emails.
2. 2Strict cost control: Hard budget ceiling of €20/month (around 40 requests) with dynamic UI adaptation routing users to a waitlist queue once exceeded.
3. 3Multi-stage flow: Lead capture with double opt-in (DOI), serverless crawling (homepage, primary nav, up to 10 subpages), and deferred AI agent execution.
4. 4Hybrid auditing: Programmatic checks (SSL, 404, OWASP signals, imprint, cookies) paired with LLM evaluations (copy, SEO, UI/UX, accessibility) and a DALL-E 3 visual redesign mockup.
5. 5Upsell integration: Two-tier PDF report (actionable items for laypersons, deep dive for specialists) coupled with human expert consulting pitches on the thank-you screen and delivery email.

# 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.