Move Projekt-KIQ-HP bahn/ -> dhive/ (dhive project); add steering files

2026-06-30 21:15:59 +02:00
parent d9291f53e4
commit b0e452708a
124 changed files with 74 additions and 0 deletions
@@ -0,0 +1,56 @@
+# Projekt-KIQ Homepage - Session Summary (2026-04-16)
+
+## Overview
+Today we transformed the Projekt-KIQ Homepage from a static mockup into a functional MVP with a secure internal area, role-based access control, and a live communication channel for access requests.
+
+## Key Accomplishments
+
+### 1. Visual & UX Upgrades
+- **Branding & Aesthetics**: Implemented a "Premium High-Tech" design system using neon green accents (`#00FF00`), glassmorphism, and dynamic background meshes.
+- **Plattform-Vision**: Upgraded from simple emojis to abstract, high-resolution background images for the "Business", "Developer", and "Sovereignty" pillars.
+- **Interactive Elements**:
+    - Added a smooth zoom effect to customer logos.
+    - Implemented `ScrollToTop` logic for seamless page transitions.
+    - Updated the 3D Stats cube to reflect **6 active live use cases**.
+
+### 2. Security & Authentication (RBAC)
+- **Auth Guard**: Implemented a `ProtectedRoute` component managing session-based authentication via `sessionStorage`.
+- **Role-Based Access Control (RBAC)**: Added dual-role functionality to distinguish between Administrative and Investor access.
+- **Branded Login**: Created a dedicated login page (`/login`) with error handling and automatic redirection.
+- **Logout System**: Integrated "Abmelden" functionality across all protected views.
+
+### 3. Internal Areas (Secured)
+- **Admin Dashboard**: A management view for oversight of access requests and system status.
+- **Investor Relations**: A restricted content area for "Confidential Business Case" information, document downloads (Pitch Deck), and traction stats.
+
+### 4. Communication & Integration
+- **Live Access Request**: Integrated **Web3Forms** into the `AccessRequest` page.
+- **Real Submissions**: Submissions now successfully post to `https://api.web3forms.com/submit` and are delivered directly to `KIQ@d-hive.de`.
+- **Form UX**: Added loading states ("Wird gesendet...") and error banners for submission failures.
+
+### 5. Navigation Architecture
+- **Auth-Aware BottomDock**: The persistent bottom menu now changes dynamically based on login status:
+    - **Guest**: Home, Use Cases, Request Access.
+    - **Investor**: Guests + 🔒 Investor Area.
+    - **Admin**: Investors + ⚙ Admin Panel.
+- **Menu Cleanup**: Simplified the mobile burger menu to focus on the public experience.
+
+## Technical Snapshot
+
+- **Framework**: React (Vite)
+- **Styling**: Vanilla CSS (Global variables + Component CSS)
+- **Auth Storage**: `sessionStorage` (Key: `kiq_role`)
+- **Forms**: Web3Forms API
+- **Icons**: Lucide-React
+
+## Credentials (MVP Phase)
+
+| Role | Username | Password | Access Level |
+|---|---|---|---|
+| **Admin** | `admin` | `testthetestingtesters-2026` | Full (Admin + Restricted) |
+| **Investor** | `investor-KIQ` | `testinvestortestingit-2026` | Restricted Only |
+
+## Next Steps
+1. **Content Population**: Replace the temporary mock data in `AdminDashboard` with dynamic data (requires a backend transition).
+2. ~~**Persistent Storage**~~: Completed — migrated to Express backend with JSON file storage and session-based auth.
+3. **Deployment**: The site is production-ready (`npm run build` verified).
@@ -0,0 +1,44 @@
+# Technical Specification: Auth & Integration
+
+## Authentication System (RBAC)
+
+### Architecture
+We use a light-weight, client-side approach for the MVP. Authentication state is persisted in the browser's `sessionStorage`, meaning the user stays logged in as long as the tab/window remains open.
+
+### Storage Key
+- **Key**: `kiq_role`
+- **Values**: `'admin'` | `'investor'`
+
+### Protection Logic (`ProtectedRoute.jsx`)
+The component wraps any route that requires authorization. 
+- If no `kiq_role` exists: Redirect to `/login` (storing the intended destination in router state).
+- If `allowedRoles` prop is provided and the current role is not included: Redirect to `/` (Home).
+
+### Credential Matrix
+| Username | Password | Role | Access Path |
+|---|---|---|---|
+| `admin` | `testthetestingtesters-2026` | `admin` | `/admin`, `/restricted` |
+| `investor-KIQ` | `testinvestortestingit-2026` | `investor` | `/restricted` |
+
+---
+
+## Form Integration (Web3Forms)
+
+### Implementation (`AccessRequest.jsx`)
+The form uses the `https://api.web3forms.com/submit` endpoint to send structured JSON data via a `POST` request.
+
+### API Key
+- **Access Key**: `5c3d4233-020d-494a-bca6-6336886f6db3` (bound to `KIQ@d-hive.de`)
+
+### Data Payload
+The following fields are transmitted:
+- `access_key`: Internal API key
+- `subject`: Dynamic subject line containing the requester's name/company
+- `from_name`: Static label for identification
+- `name`, `company`, `role`, `email`, `phone`, `purpose`, `reason`
+
+### UX Logic
+1. **Validation**: Native browser validation (`required`, `type="email"`) is enforced.
+2. **Loading**: Submit button changes to "Wird gesendet..." and is disabled during `fetch`.
+3. **Success**: Displays a success component and auto-redirects to `/` after 4 seconds.
+4. **Error**: Displays an inline banner if the API returns an error or a network timeout occurs.