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/installation/page.tsx

@@ -0,0 +1,303 @@
+'use client'
+
+import React, { useState } from 'react'
+import { SDKDocsSidebar } from '@/components/SDKDocsSidebar'
+import { Copy, Check, Info, AlertTriangle } from 'lucide-react'
+
+type PackageManager = 'npm' | 'yarn' | 'pnpm'
+
+const installCommands: Record<PackageManager, string> = {
+  npm: 'npm install @breakpilot/consent-sdk',
+  yarn: 'yarn add @breakpilot/consent-sdk',
+  pnpm: 'pnpm add @breakpilot/consent-sdk',
+}
+
+function CopyButton({ text }: { text: string }) {
+  const [copied, setCopied] = useState(false)
+
+  const handleCopy = async () => {
+    await navigator.clipboard.writeText(text)
+    setCopied(true)
+    setTimeout(() => setCopied(false), 2000)
+  }
+
+  return (
+    <button
+      onClick={handleCopy}
+      className="p-2 hover:bg-gray-700 rounded transition-colors"
+      title="Kopieren"
+    >
+      {copied ? (
+        <Check className="w-4 h-4 text-green-400" />
+      ) : (
+        <Copy className="w-4 h-4 text-gray-400" />
+      )}
+    </button>
+  )
+}
+
+function CodeBlock({ code, language = 'typescript' }: { code: string; language?: string }) {
+  return (
+    <div className="relative bg-gray-900 rounded-lg overflow-hidden">
+      <div className="absolute top-2 right-2">
+        <CopyButton text={code} />
+      </div>
+      <pre className="p-4 text-sm text-gray-300 font-mono overflow-x-auto">
+        <code>{code}</code>
+      </pre>
+    </div>
+  )
+}
+
+function InfoBox({ type = 'info', children }: { type?: 'info' | 'warning'; children: React.ReactNode }) {
+  const styles = {
+    info: 'bg-blue-50 border-blue-200 text-blue-800',
+    warning: 'bg-yellow-50 border-yellow-200 text-yellow-800',
+  }
+  const Icon = type === 'warning' ? AlertTriangle : Info
+
+  return (
+    <div className={`p-4 border rounded-lg ${styles[type]} flex items-start gap-3`}>
+      <Icon className="w-5 h-5 shrink-0 mt-0.5" />
+      <div className="text-sm">{children}</div>
+    </div>
+  )
+}
+
+export default function InstallationPage() {
+  const [selectedPM, setSelectedPM] = useState<PackageManager>('npm')
+
+  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">Installation</h1>
+          <p className="text-lg text-gray-600 mb-8">
+            Installieren Sie das Consent SDK in Ihrem Projekt.
+          </p>
+
+          {/* Package Installation */}
+          <section className="mb-12">
+            <h2 className="text-xl font-semibold text-gray-900 mb-4">NPM Package</h2>
+            <div className="bg-white rounded-xl border border-gray-200 overflow-hidden">
+              <div className="px-4 py-3 border-b border-gray-200 flex gap-1 bg-gray-50">
+                {(['npm', 'yarn', 'pnpm'] as const).map((pm) => (
+                  <button
+                    key={pm}
+                    onClick={() => setSelectedPM(pm)}
+                    className={`px-3 py-1.5 text-sm rounded-md transition-colors ${
+                      selectedPM === pm
+                        ? 'bg-white text-gray-900 shadow-sm border border-gray-200'
+                        : 'text-gray-600 hover:text-gray-900'
+                    }`}
+                  >
+                    {pm}
+                  </button>
+                ))}
+              </div>
+              <div className="bg-gray-900 px-4 py-4 flex items-center justify-between">
+                <code className="text-green-400 font-mono text-sm">
+                  $ {installCommands[selectedPM]}
+                </code>
+                <CopyButton text={installCommands[selectedPM]} />
+              </div>
+            </div>
+          </section>
+
+          {/* Framework-specific */}
+          <section className="mb-12">
+            <h2 className="text-xl font-semibold text-gray-900 mb-4">Framework-spezifische Imports</h2>
+
+            <div className="space-y-6">
+              <div>
+                <h3 className="font-medium text-gray-900 mb-2">Vanilla JavaScript</h3>
+                <CodeBlock
+                  code={`import { ConsentManager } from '@breakpilot/consent-sdk';
+
+const consent = new ConsentManager({
+  apiEndpoint: 'https://api.example.com/consent',
+  siteId: 'your-site-id',
+});
+
+await consent.init();`}
+                />
+              </div>
+
+              <div>
+                <h3 className="font-medium text-gray-900 mb-2">React</h3>
+                <CodeBlock
+                  code={`import { ConsentProvider, useConsent } from '@breakpilot/consent-sdk/react';
+
+function App() {
+  return (
+    <ConsentProvider
+      config={{
+        apiEndpoint: 'https://api.example.com/consent',
+        siteId: 'your-site-id',
+      }}
+    >
+      <YourApp />
+    </ConsentProvider>
+  );
+}`}
+                />
+              </div>
+
+              <div>
+                <h3 className="font-medium text-gray-900 mb-2">Vue 3</h3>
+                <CodeBlock
+                  code={`import { createApp } from 'vue';
+import { ConsentPlugin } from '@breakpilot/consent-sdk/vue';
+
+const app = createApp(App);
+
+app.use(ConsentPlugin, {
+  apiEndpoint: 'https://api.example.com/consent',
+  siteId: 'your-site-id',
+});`}
+                />
+              </div>
+            </div>
+          </section>
+
+          {/* Script Blocking Setup */}
+          <section className="mb-12">
+            <h2 className="text-xl font-semibold text-gray-900 mb-4">Script Blocking einrichten</h2>
+            <p className="text-gray-600 mb-4">
+              Um Third-Party Scripts automatisch zu blockieren, verwenden Sie das{' '}
+              <code className="px-1.5 py-0.5 bg-gray-100 rounded text-sm">data-consent</code> Attribut:
+            </p>
+
+            <CodeBlock
+              language="html"
+              code={`<!-- Analytics Script (blockiert bis Consent) -->
+<script
+  data-consent="analytics"
+  data-src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"
+  type="text/plain"
+></script>
+
+<!-- Marketing Script (blockiert bis Consent) -->
+<script data-consent="marketing" type="text/plain">
+  fbq('init', 'YOUR_PIXEL_ID');
+</script>
+
+<!-- Embedded iFrame (blockiert bis Consent) -->
+<iframe
+  data-consent="social"
+  data-src="https://www.youtube.com/embed/VIDEO_ID"
+  width="560"
+  height="315"
+></iframe>`}
+            />
+          </section>
+
+          {/* Requirements */}
+          <section className="mb-12">
+            <h2 className="text-xl font-semibold text-gray-900 mb-4">Systemvoraussetzungen</h2>
+            <div className="bg-white rounded-xl border border-gray-200 overflow-hidden">
+              <table className="min-w-full divide-y divide-gray-200">
+                <thead className="bg-gray-50">
+                  <tr>
+                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
+                      Anforderung
+                    </th>
+                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
+                      Minimum
+                    </th>
+                  </tr>
+                </thead>
+                <tbody className="divide-y divide-gray-200">
+                  <tr>
+                    <td className="px-6 py-4 text-sm text-gray-900">Node.js</td>
+                    <td className="px-6 py-4 text-sm text-gray-600">&gt;= 18.0.0</td>
+                  </tr>
+                  <tr>
+                    <td className="px-6 py-4 text-sm text-gray-900">React (optional)</td>
+                    <td className="px-6 py-4 text-sm text-gray-600">&gt;= 17.0.0</td>
+                  </tr>
+                  <tr>
+                    <td className="px-6 py-4 text-sm text-gray-900">Vue (optional)</td>
+                    <td className="px-6 py-4 text-sm text-gray-600">&gt;= 3.0.0</td>
+                  </tr>
+                  <tr>
+                    <td className="px-6 py-4 text-sm text-gray-900">TypeScript (optional)</td>
+                    <td className="px-6 py-4 text-sm text-gray-600">&gt;= 4.7.0</td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+          </section>
+
+          {/* Browser Support */}
+          <section className="mb-12">
+            <h2 className="text-xl font-semibold text-gray-900 mb-4">Browser-Unterstuetzung</h2>
+            <InfoBox type="info">
+              Das SDK unterstuetzt alle modernen Browser mit ES2017+ Unterstuetzung.
+              Fuer aeltere Browser wird ein automatischer Fallback fuer Crypto-Funktionen bereitgestellt.
+            </InfoBox>
+            <div className="mt-4 bg-white rounded-xl border border-gray-200 overflow-hidden">
+              <table className="min-w-full divide-y divide-gray-200">
+                <thead className="bg-gray-50">
+                  <tr>
+                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
+                      Browser
+                    </th>
+                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
+                      Minimum Version
+                    </th>
+                  </tr>
+                </thead>
+                <tbody className="divide-y divide-gray-200">
+                  <tr>
+                    <td className="px-6 py-4 text-sm text-gray-900">Chrome</td>
+                    <td className="px-6 py-4 text-sm text-gray-600">&gt;= 60</td>
+                  </tr>
+                  <tr>
+                    <td className="px-6 py-4 text-sm text-gray-900">Firefox</td>
+                    <td className="px-6 py-4 text-sm text-gray-600">&gt;= 55</td>
+                  </tr>
+                  <tr>
+                    <td className="px-6 py-4 text-sm text-gray-900">Safari</td>
+                    <td className="px-6 py-4 text-sm text-gray-600">&gt;= 11</td>
+                  </tr>
+                  <tr>
+                    <td className="px-6 py-4 text-sm text-gray-900">Edge</td>
+                    <td className="px-6 py-4 text-sm text-gray-600">&gt;= 79 (Chromium)</td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+          </section>
+
+          {/* Next Steps */}
+          <section>
+            <h2 className="text-xl font-semibold text-gray-900 mb-4">Naechste Schritte</h2>
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <a
+                href="/sdk/consent/api-reference"
+                className="p-4 bg-white rounded-xl border border-gray-200 hover:border-violet-300 hover:shadow-md transition-all"
+              >
+                <h3 className="font-medium text-gray-900">API Referenz</h3>
+                <p className="text-sm text-gray-500 mt-1">
+                  Vollstaendige Dokumentation aller Methoden und Konfigurationsoptionen.
+                </p>
+              </a>
+              <a
+                href="/sdk/consent/frameworks"
+                className="p-4 bg-white rounded-xl border border-gray-200 hover:border-violet-300 hover:shadow-md transition-all"
+              >
+                <h3 className="font-medium text-gray-900">Framework Integration</h3>
+                <p className="text-sm text-gray-500 mt-1">
+                  Detaillierte Anleitungen fuer React, Vue und Angular.
+                </p>
+              </a>
+            </div>
+          </section>
+        </div>
+      </main>
+    </div>
+  )
+}