Produkt-Website¶

Die Produkt-Website ist die öffentliche Einstiegsseite von Action Connect. Sie erklärt den fachlichen Nutzen, den Integrationsweg und führt Interessenten gezielt zur technischen Dokumentation und zum Projektkontakt.

Lokales Setup¶

Die lokale Inbetriebnahme der Website erfolgt mit den folgenden Schritten:

1. Repository öffnen: Website/actionconnect-web
2. Abhängigkeiten installieren:

npm install

1. Entwicklungsserver starten:

npm run dev

1. Seite aufrufen: http://localhost:3000
2. Empfohlene Code-Navigation: zuerst app/page.tsx, danach components/sections/*

Ziel und Rolle¶

Die Website verbindet Produktkommunikation mit technischem Einstieg:

• Hersteller verstehen den Mehrwert und den Integrationspfad.
• Technische Stakeholder finden Doku-Einstieg und Architektur-nahe Inhalte.
• Interessenten werden über einen klaren Seitenfluss zu Kontakt und Pilotierung geführt.

Architektur¶

Die Website basiert auf Next.js (App Router) und ist als modulare Single-Page-Experience umgesetzt.

Seitenfluss¶

flowchart TD
    NAV[Navbar] --> HERO[Hero]
    HERO --> QS[Quick Start Guide]
    QS --> DOC[Documentation]
    DOC --> SHOW[Showcase]
    SHOW --> PROOF[Proof]
    PROOF --> FAQ[FAQ]
    FAQ --> CONTACT[Contact]
    CONTACT --> FOOT[Footer]

Startseiten-Komposition (app/page.tsx)¶

export default function HomePage() {
    return (
        <main className="relative min-h-screen overflow-x-clip text-white">
            <Navbar />
            <Hero />
            <QuickStartGuide />
            <DocumentationSection />
            <ShowcaseSection />
            <ProofSection />
            <FAQSection />
            <ContactSection />
            <Footer />
        </main>
    )
}

Für zusätzliche Sections ist dies der zentrale Integrationspunkt: importieren und an der gewünschten Position einfügen.

Hauptbereiche:

• Hero
• Quick Start Guide
• Documentation Section
• Showcase Section
• Proof Section
• FAQ
• Contact

Technischer Kern:

• app/page.tsx: Komposition der Seitenabschnitte
• components/sections: fachliche Inhaltssektionen
• components/layout: Navbar, Footer, Startup-Splash
• components/ui: wiederverwendbare UI-Bausteine
• lib/data.ts: zentrale Daten (z. B. FAQ, URLs)

Komponenten-Übersicht¶

flowchart LR
    P[app/page.tsx] --> S1[sections/*]
    P --> L1[layout/*]
    S1 --> UI[ui/*]
    S1 --> DATA[lib/data.ts]

Zentrale Inhalte in lib/data.ts¶

export const repositoryUrl = 'https://github.com/FH-SWF-ActionConnect/Action-Connect'

export const faqItems = [
    {
        question: 'Für wen ist ActionConnect gedacht?',
        answer: '...'
    },
]

So bleiben wiederkehrende Inhalte (Links, FAQ, Texte) an einer Stelle pflegbar.

Funnel-Logik (kompakt)¶

Technologie-Stack¶

• Next.js 16
• React 19
• TypeScript
• Tailwind CSS
• Framer Motion
• Lucide React

Lokale Entwicklung¶

Voraussetzungen:

• Node.js (aktuelle LTS)
• npm

Setup:

npm install
npm run dev

Standard-URL lokal:

• http://localhost:3000

Relevante Skripte:

npm run dev
npm run build
npm run start
npm run lint

Aktueller Funktionsstatus¶

• Das Kontaktformular ist derzeit als Frontend-Demo umgesetzt.
• Die technische Dokumentation wird über einen externen Link geöffnet.
• Interaktive Bereiche (z. B. Showcase) nutzen Animationen und Pointer-Interaktionen.

Codeausschnitt Kontaktformular (Demo-Status):

const [isSubmitted, setIsSubmitted] = useState(false)

<form
    onSubmit={(event) => {
        event.preventDefault()
        setIsSubmitted(true)
    }}
>

Der aktuelle Stand zeigt den UI-Flow vollständig, aber ohne produktive Backend-Anbindung.

Betrieb und Qualität¶

Empfohlene Checks vor Release:

1. npm run lint
2. npm run build
3. Smoke-Tests auf Desktop und Mobile
4. Prüfung aller externen Links (Doku, Repository, Video)

Nächste sinnvolle Erweiterungen¶

1. Produktive Formularanbindung (API, Mail oder CRM)
2. Erweiterte SEO-Metadaten (Open Graph, strukturierte Daten)
3. Accessibility-Audit für Formular und Showcase-Interaktion
4. Optionales Tracking für Funnel-Conversion

Typische Entwicklungsaufgaben¶

1. Neue Section in components/sections anlegen und in app/page.tsx einhängen.
2. FAQ oder zentrale URLs in lib/data.ts erweitern.
3. Formular-Demo auf echte API-Route umstellen (Validierung + Fehlerhandling).
4. Danach npm run lint und npm run build ausführen.