Initial commit: breakpilot-compliance - Compliance SDK Platform

Services: Admin-Compliance, Backend-Compliance,
AI-Compliance-SDK, Consent-SDK, Developer-Portal,
PCA-Platform, DSMS

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

developer-portal/app/sdk/consent/frameworks/page.tsx

@@ -0,0 +1,98 @@
+'use client'
+
+import React from 'react'
+import Link from 'next/link'
+import { SDKDocsSidebar } from '@/components/SDKDocsSidebar'
+import { ChevronRight } from 'lucide-react'
+
+const frameworks = [
+  {
+    name: 'React',
+    href: '/sdk/consent/frameworks/react',
+    logo: '/logos/react.svg',
+    description: 'Hooks und Provider fuer React 17+ und Next.js',
+    features: ['ConsentProvider', 'useConsent Hook', 'ConsentGate Component'],
+    color: 'bg-cyan-500',
+  },
+  {
+    name: 'Vue 3',
+    href: '/sdk/consent/frameworks/vue',
+    logo: '/logos/vue.svg',
+    description: 'Composables und Plugin fuer Vue 3 und Nuxt',
+    features: ['Vue Plugin', 'useConsent Composable', 'ConsentGate Component'],
+    color: 'bg-emerald-500',
+  },
+  {
+    name: 'Angular',
+    href: '/sdk/consent/frameworks/angular',
+    logo: '/logos/angular.svg',
+    description: 'Service und Module fuer Angular 14+',
+    features: ['ConsentService', 'ConsentModule', 'Dependency Injection'],
+    color: 'bg-red-500',
+  },
+]
+
+export default function FrameworksPage() {
+  return (
+    <div className="min-h-screen bg-gray-50 flex">
+      <SDKDocsSidebar />
+
+      <main className="flex-1 ml-64">
+        <div className="max-w-4xl mx-auto px-8 py-12">
+          <h1 className="text-3xl font-bold text-gray-900 mb-2">Framework Integration</h1>
+          <p className="text-lg text-gray-600 mb-8">
+            Das Consent SDK bietet native Integrationen fuer alle gaengigen Frontend-Frameworks.
+          </p>
+
+          <div className="space-y-4">
+            {frameworks.map((framework) => (
+              <Link
+                key={framework.name}
+                href={framework.href}
+                className="block bg-white rounded-xl border border-gray-200 p-6 hover:border-violet-300 hover:shadow-md transition-all group"
+              >
+                <div className="flex items-start gap-4">
+                  <div className={`w-12 h-12 rounded-xl ${framework.color} flex items-center justify-center shrink-0`}>
+                    <span className="text-white font-bold text-lg">{framework.name[0]}</span>
+                  </div>
+                  <div className="flex-1">
+                    <div className="flex items-center gap-2">
+                      <h2 className="text-xl font-semibold text-gray-900 group-hover:text-violet-600 transition-colors">
+                        {framework.name}
+                      </h2>
+                      <ChevronRight className="w-5 h-5 text-gray-400 group-hover:text-violet-600 transition-colors" />
+                    </div>
+                    <p className="text-gray-600 mt-1">{framework.description}</p>
+                    <div className="flex flex-wrap gap-2 mt-3">
+                      {framework.features.map((feature) => (
+                        <span
+                          key={feature}
+                          className="px-2 py-1 bg-gray-100 text-gray-600 text-xs rounded-md"
+                        >
+                          {feature}
+                        </span>
+                      ))}
+                    </div>
+                  </div>
+                </div>
+              </Link>
+            ))}
+          </div>
+
+          {/* Vanilla JS Note */}
+          <div className="mt-8 p-4 bg-blue-50 border border-blue-200 rounded-xl">
+            <h3 className="font-medium text-blue-900">Vanilla JavaScript</h3>
+            <p className="text-sm text-blue-700 mt-1">
+              Sie koennen das SDK auch ohne Framework verwenden. Importieren Sie einfach den ConsentManager direkt
+              aus dem Hauptpaket. Siehe{' '}
+              <Link href="/sdk/consent/installation" className="underline">
+                Installation
+              </Link>{' '}
+              fuer Details.
+            </p>
+          </div>
+        </div>
+      </main>
+    </div>
+  )
+}