https://voelker.ai/components-1.jsx

1// VOELKER.AI — Reusable Components
2// Exported via window.* at the bottom so other Babel scripts can use them.
3
4const { useState, useEffect, useRef } = React;
5
6/* ---------- ICONS ---------- */
7const Icon = {
8  Arrow: () => (
9    <svg className="arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round">
10      <path d="M7 17 17 7" />
11      <path d="M9 7h8v8" />
12    </svg>
13  ),
14  Check: () => (
15    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
16      <path d="M5 13l4 4L19 7" />
17    </svg>
18  ),
19  Mail: () => (
20    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6">
21      <rect x="3" y="5" width="18" height="14" rx="2" />
22      <path d="m3 7 9 7 9-7" />
23    </svg>
24  ),
25  Phone: () => (
26    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6">
27      <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.86 19.86 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.86 19.86 0 0 1 2.12 4.18 2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12 12 0 0 0 .66 2.81 2 2 0 0 1-.45 2.11L8 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12 12 0 0 0 2.81.66A2 2 0 0 1 22 16.92Z" />
28    </svg>
29  ),
30  Map: () => (
31    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6">
32      <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 1 1 18 0Z" />
33      <circle cx="12" cy="10" r="3" />
34    </svg>
35  ),
36  Cal: () => (
37    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6">
38      <rect x="3" y="4" width="18" height="18" rx="2" />
39      <path d="M16 2v4M8 2v4M3 10h18" />
40    </svg>
41  ),
42  Bot: () => (
43    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6">
44      <rect x="3" y="8" width="18" height="12" rx="2" />
45      <path d="M12 4v4M8 14h.01M16 14h.01M9 18h6" />
46    </svg>
47  ),
48  Flow: () => (
49    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6">
50      <circle cx="6" cy="6" r="3" />
51      <circle cx="18" cy="6" r="3" />
52      <circle cx="6" cy="18" r="3" />
53      <circle cx="18" cy="18" r="3" />
54      <path d="M9 6h6M6 9v6M18 9v6M9 18h6" />
55    </svg>
56  ),
57  Cert: () => (
58    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6">
59      <circle cx="12" cy="9" r="6" />
60      <path d="m8 14-2 7 6-3 6 3-2-7" />
61    </svg>
62  ),
63  Send: () => (
64    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
65      <path d="m22 2-11 11" />
66      <path d="m22 2-7 20-4-9-9-4 20-7Z" />
67    </svg>
68  ),
69  Tuv: () => (
70    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
71      <path d="m9 12 2 2 4-4" />
72      <path d="M21 12c-.55 0-1 .45-1 1 0 4.41-3.59 8-8 8s-8-3.59-8-8 3.59-8 8-8c1.31 0 2.55.32 3.65.89.45.24 1.01.07 1.25-.38.23-.45.06-1.01-.39-1.25C15.18 3.41 13.64 3 12 3 7.03 3 3 7.03 3 12s4.03 9 9 9 9-4.03 9-9c0-.55-.45-1-1-1Z" />
73    </svg>
74  ),
75};
76
77/* ---------- NAV ---------- */
78function Nav() {
79  return (
80    <nav className="nav">
81      <div className="container nav-inner">
82        <a href="#top" className="nav-brand" aria-label="Thomas Völker">
83          <img src="assets/logo.png" alt="" />
84          <span>Thomas<span className="last"> Völker</span></span>
85        </a>
86        <div className="nav-links">
87          <a href="#expertise">Expertise</a>
88          <a href="#leistungen">Leistungen</a>
89          <a href="#usecase">Cases</a>
90          <a href="#keynote">Keynotes</a>
91          <a href="#faq">FAQ</a>
92        </div>
93        <a href="#kontakt" className="btn btn-primary btn-sm">
94          Erstgespräch buchen <Icon.Arrow />
95        </a>
96      </div>
97    </nav>
98  );
99}
100
101/* ---------- HERO ---------- */
102function Hero() {
103  return (
104    <section className="hero container" id="top">
105      <div className="hero-grid">
106        <div className="hero-text">

107          <span className="tag"><span className="dot"></span> TÜV-geprüfter KI-Trainer · Q3/26 buchbar</span>
108          <h1 className="display" style={{ marginTop: 24 }}>
109            KI ist keine<br/>
110            Zukunft mehr.<br/>
111            Sie ist <span className="italic pink">Ihr Vorsprung.</span>
112          </h1>
113          <p className="lede" style={{ marginTop: 28 }}>
114            Während andere noch über KI reden, baue ich sie in Ihr Unternehmen ein.
115            Chatbots, die nachts arbeiten. Telefonie, die nie auflegt. Teams,
116            die endlich verstehen, wofür sie eingestellt wurden.
117          </p>
118
119          <div className="hero-cta">
120            <a href="#kontakt" className="btn btn-primary">
121              Kostenloses Erstgespräch <Icon.Arrow />
122            </a>
123            <a href="#leistungen" className="btn btn-ghost">
124              Was ist möglich?
125            </a>
126          </div>
127
128          <div className="hero-stats">
129            <div className="mini-stat">
130              <div className="v">30<span className="pink">+</span></div>
131              <div className="l">Keynotes &amp; Vorträge</div>
132            </div>
133            <div className="mini-stat">
134              <div className="v">1.000<span className="pink">+</span></div>
135              <div className="l">Geschulte Teilnehmer</div>
136            </div>
137            <div className="mini-stat">
138              <div className="v">25<span className="pink">J</span></div>
139              <div className="l">Finanzbranche</div>
140            </div>
141          </div>
142        </div>
143
144        <div className="hero-visual">
145          <div className="frame">
146            <img className="portrait-img" src="assets/thomas.png" alt="Thomas Völker — KI-Trainer" />
147            <div className="frame-glow"></div>
148            <div className="name-card">
149              <div>
150                <div className="who">Thomas Völker</div>
151                <div className="role">KI-Trainer · Speaker · Berater</div>
152              </div>
153              <span className="live">LIVE</span>
154            </div>
155          </div>
156          <div className="orbit-tag tag-1">
157            <span className="dot"></span> TÜV-geprüft
158          </div>
159          <div className="orbit-tag tag-2">
160            // 25 Jahre Finanzbranche
161          </div>
162          <div className="orbit-tag tag-3">
163            Superchat &amp; Fonio Partner
164          </div>
165        </div>
166      </div>
167    </section>
168  );
169}
170
171/* ---------- TRUST BAR ---------- */
172function TrustBar() {
173  return (
174    <div className="trust-bar">
175      <div className="container trust-row">
176        <span className="trust-label">Vertraut von · Partner</span>
177        <div className="trust-logos">
178          <span className="item"><span className="badge">TÜV</span> Zertifizierter Trainer</span>
179          <span className="item">Superchat</span>
180          <span className="item">Fonio</span>
181          <span className="item">DSGVO · EU-Hosting</span>
182          <span className="item">DACH-weit aktiv</span>
183        </div>
184      </div>
185    </div>
186  );
187}
188
189/* ---------- ABOUT ---------- */
190function About() {
191  return (
192    <section className="section container" id="expertise">
193      <div className="section-head">
194        <span className="eyebrow">Über mich</span>
195        <h2 className="h2">
196          25 Jahre Finanzdienstleistung.<br/>
197          Heute zeige ich der Branche, <span className="italic pink">was wirklich möglich ist.</span>
198        </h2>
199      </div>
200
201      <div className="about-grid">
202        <div className="portrait">
203          <img className="portrait-photo" src="assets/portrait.jpg" alt="Thomas Völker" />
204          <div className="portrait-grid"></div>
205          <div className="portrait-caption">
206            <div className="who">Thomas Völker</div>
207            <div className="meta">KI-TRAINER · DACH</div>
208          </div>
209        </div>
210
211        <div className="about-content">
212          <p>
213            Ich kenne den Maklerschreibtisch. Die endlosen WhatsApp-Anfragen,
214            die Anrufe, die niemand zurückrufen kann, die Tabellen, die niemand
215            führen will. <strong>Genau dort beginnt die Revolution — wenn man weiß, wo man hinschauen muss.</strong>
216          </p>
217          <p>
218            Als Deutschlands erster TÜV-geprüfter KI-Trainer in der Finanzdienstleistung
219            verbinde ich 25 Jahre Branchenwissen mit konkreter Umsetzung. Keine Buzzwords,
220            keine Strategiefolien — wir bauen Dinge, die ab Tag eins messbar Zeit und
221            Geld sparen.
222          </p>
223          <p>
224            KI wird die Branche nicht ersetzen. Sie wird die ersetzen,
225            <strong> die KI nicht nutzen.</strong> Mein Job: Sie sind nicht dabei.
226          </p>
227
228          <div className="signature-row">
229            <div className="sig">Thomas Völker</div>
230            <div className="meta">

231              <span className="name">KI-Trainer &amp; Transformation Manager</span>
232              <span className="role">VOELKER.AI · DACH</span>
233            </div>
234          </div>
235        </div>
236      </div>
237    </section>
238  );
239}
240
241/* ---------- SERVICES ---------- */
242function Services() {
243  const items = [
244    {
245      num: "01 / KOMMUNIKATION",
246      icon: <Icon.Bot />,
247      title: "KI-Chatbots & Telefonie",
248      desc: "Intelligente Systeme, die Anfragen 24/7 menschlich beantworten — auf WhatsApp, Webseite, am Telefon.",
249      bullets: [
250        "Superchat- & Fonio-Integration",
251        "DSGVO-konform, auf Deutsch trainiert",
252        "Echte Übergabe ans Team statt Sackgasse",
253      ],
254    },
255    {
256      num: "02 / AUTOMATISIERUNG",
257      icon: <Icon.Flow />,
258      title: "Prozess-Automatisierung",
259      desc: "Wir digitalisieren die komplette Kundenreise mit maßgeschneiderten KI-Workflows.",
260      bullets: [
261        "Lead → CRM → Termin in einem Fluss",
262        "Dokumente automatisch klassifiziert",
263        "Wiederkehrende Anfragen vorqualifiziert",
264      ],
265    },
266    {
267      num: "03 / BEFÄHIGUNG",
268      icon: <Icon.Cert />,
269      title: "TÜV-zertifiziertes Training",
270      desc: "Fundiertes Expertenwissen für rechtssicheren KI-Einsatz — speziell für Finanzberatung.",
271      bullets: [
272        "Inhouse-Workshops & Keynotes",
273        "Prompt-Bibliothek für Ihre Beratung",
274        "Compliance-Leitfaden & Use-Case-Plan",
275      ],
276    },
277  ];
278  return (
279    <section className="section container" id="leistungen">
280      <div className="section-head">
281        <span className="eyebrow">Leistungen</span>
282        <h2 className="h2">Drei Hebel, die <span className="italic pink">sofort</span> Wirkung zeigen.</h2>
283      </div>
284      <div className="services-grid">
285        {items.map((it) => (
286          <div className="service" key={it.title}>
287            <span className="num">{it.num}</span>
288            <div className="icon">{it.icon}</div>
289            <h3>{it.title}</h3>
290            <p>{it.desc}</p>
291            <ul>
292              {it.bullets.map((b) => <li key={b}>{b}</li>)}
293            </ul>
294          </div>
295        ))}
296      </div>
297    </section>
298  );
299}
300
301Object.assign(window, { Icon, Nav, Hero, TrustBar, About, Services });