Design System
13 Blöcke · ganze Seite
1280pxStandalone ↗
Akzent · global

Fertige React-Seite zum Kopieren — eigenständiges .tsx mit Tailwind & lucide-react, ohne Abhängigkeit von diesem Repo. Einzelne Sektionen findest du unter Blöcke.

page.tsx
1import { ArrowRight, BarChart3, BrainCircuit, Cable, Check, ChevronDown, Layers3, Lock, Minus, Rocket, Server, Workflow, Zap } from "lucide-react";
2
3function Hero() {
4 return (
5 <section className="bg-background text-foreground py-24 md:py-32">
6 <div className="mx-auto grid max-w-7xl items-center gap-12 px-6 md:grid-cols-2">
7 <div className="flex flex-col">
8 <span className="inline-flex w-fit items-center rounded-full border px-3 py-1 text-xs font-medium text-muted-foreground">Neu · KI-native Workflows</span>
9 <h1 className="mt-5 text-4xl font-semibold tracking-tight sm:text-5xl md:text-6xl">Ship faster. Ohne den ganzen Glue-Code.</h1>
10 <p className="mt-6 max-w-xl text-lg text-muted-foreground">Nebula verbindet deine Tools, automatisiert die Routine und gibt deinem Team Echtzeit-Einblick — in einem einzigen Workspace.</p>
11 <div className="mt-8 flex flex-wrap gap-3">
12 <a href="#pricing" className="inline-flex items-center justify-center gap-2 rounded-md px-5 py-2.5 text-sm font-medium transition-colors bg-primary text-primary-foreground hover:bg-primary/90">Kostenlos starten <ArrowRight className="size-4" /></a>
13 <a href="#" className="inline-flex items-center justify-center gap-2 rounded-md px-5 py-2.5 text-sm font-medium transition-colors border hover:bg-muted">Live-Demo ansehen</a>
14 </div>
15 </div>
16 <img
17 src="/img/saas-hero.jpg"
18 alt="Nebula Analytics-Dashboard mit Echtzeit-Charts und Automatisierungen"
19 width={1280}
20 height={720}
21 className="w-full rounded-xl border bg-card shadow-2xl"
22 />
23 </div>
24 </section>
25 );
26}
27
28function Logos() {
29 const logos = [
30 { name: "Loop", Icon: Workflow },
31 { name: "Orbit", Icon: BrainCircuit },
32 { name: "Stack", Icon: Layers3 },
33 { name: "Pulse", Icon: BarChart3 },
34 { name: "Forge", Icon: Zap },
35 { name: "Relay", Icon: Cable },
36 { name: "Cipher", Icon: Lock },
37 { name: "Nimbus", Icon: Server },
38 ];
39 return (
40 <section className="bg-muted/40 text-foreground py-16 md:py-20">
41 <div className="mx-auto max-w-7xl px-6">
42 <p className="text-center text-xs font-medium uppercase tracking-widest text-muted-foreground">Über 30.000 Entwickler:innen bauen auf Nebula</p>
43 <div className="mt-10 flex flex-wrap items-center justify-center gap-x-12 gap-y-8">
44 {logos.map((logo) => (
45 <div key={logo.name} className="flex items-center gap-2.5 text-foreground/60">
46 {logo.Icon && <logo.Icon className="size-5" />}
47 <span className="text-lg font-semibold tracking-tight">{logo.name}</span>
48 </div>
49 ))}
50 </div>
51 </div>
52 </section>
53 );
54}
55
56function Platform() {
57 const items = [
58 { Icon: BrainCircuit, title: "Copilot, der deine Daten kennt", description: "Frag deine Daten in Klartext ab — Nebula schreibt die Queries, baut die Charts und erklärt das Ergebnis. Keine SQL-Akrobatik mehr.", metric: "KI", span: "sm:col-span-2 lg:col-span-2 lg:row-span-2" },
59 { Icon: Lock, title: "Security by default", description: "SOC 2 Typ II, SSO/SCIM, Audit-Logs und EU-Hosting.", metric: "", span: "sm:col-span-1" },
60 { Icon: BarChart3, title: "Echtzeit-Insights", description: "Dashboards, die sich selbst aktualisieren.", metric: "", span: "sm:col-span-1" },
61 { Icon: Cable, title: "Integrationen in Minuten", description: "Slack, GitHub, Stripe, Postgres und mehr — verbunden, bevor der Kaffee kalt ist.", metric: "120+", span: "sm:col-span-2 lg:col-span-2" },
62 { Icon: Workflow, title: "Visuelle Workflows", description: "Automatisiere Routine per Drag-and-drop, ganz ohne Code.", metric: "", span: "sm:col-span-1" },
63 ];
64 return (
65 <section className="bg-muted/40 text-foreground py-20 md:py-28">
66 <div className="mx-auto max-w-7xl px-6">
67 <div className="mx-auto max-w-2xl text-center">
68 <p className="text-sm font-semibold uppercase tracking-wider text-primary">Plattform</p>
69 <h2 className="text-3xl font-semibold tracking-tight sm:text-4xl">Eine Plattform. Der ganze Stack.</h2>
70 <p className="mt-4 text-lg text-muted-foreground">Schluss mit dem Flickenteppich aus fünf halbintegrierten Tools.</p>
71 </div>
72 <div className="mt-14 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 lg:auto-rows-[13rem]">
73 {items.map((item) => (
74 <div key={item.title} className={"relative flex flex-col justify-between overflow-hidden rounded-3xl border bg-card p-7 " + item.span}>
75 <div className="flex size-12 items-center justify-center rounded-2xl bg-primary/10 text-primary">
76 <item.Icon className="size-5" />
77 </div>
78 <div className="mt-6">
79 {item.metric && <div className="text-4xl font-semibold tracking-tight">{item.metric}</div>}
80 <h3 className="mt-2 text-lg font-semibold tracking-tight">{item.title}</h3>
81 <p className="mt-2 text-sm leading-relaxed text-muted-foreground">{item.description}</p>
82 </div>
83 </div>
84 ))}
85 </div>
86 </div>
87 </section>
88 );
89}
90
91function Developer() {
92 return (
93 <section className="bg-background text-foreground py-20 md:py-28">
94 <div className="mx-auto grid max-w-7xl items-center gap-12 px-6 md:grid-cols-2">
95 <div className="">
96 <p className="text-sm font-semibold uppercase tracking-wider text-primary">Developer-first</p>
97 <h2 className="mt-3 text-3xl font-semibold tracking-tight sm:text-4xl">Gebaut für Teams, die Tempo lieben.</h2>
98 <p className="mt-4 text-lg leading-relaxed text-muted-foreground">Type-safe SDKs, eine lokale Dev-Umgebung in Sekunden und eine API, die sich anfühlt, als hätte sie jemand benutzt, bevor er sie veröffentlicht hat.</p>
99 <div className="mt-8 flex flex-wrap gap-3">
100 <a href="#" className="inline-flex items-center justify-center gap-2 rounded-md px-5 py-2.5 text-sm font-medium transition-colors bg-primary text-primary-foreground hover:bg-primary/90">Docs lesen <ArrowRight className="size-4" /></a>
101 <a href="#" className="inline-flex items-center justify-center gap-2 rounded-md px-5 py-2.5 text-sm font-medium transition-colors border hover:bg-muted">Auf GitHub ansehen</a>
102 </div>
103 </div>
104 <img
105 src="/img/saas-edge-network.jpg"
106 alt="Globales Edge-Netzwerk mit leuchtenden, verbundenen Knoten"
107 width={1280}
108 height={960}
109 className="w-full rounded-xl border bg-card shadow-2xl"
110 />
111 </div>
112 </section>
113 );
114}
115
116function Zahlen() {
117 const stats = [
118 { value: "99,99%", label: "Uptime-SLA" },
119 { value: "30k+", label: "Entwickler:innen" },
120 { value: "2 Mrd.", label: "Requests / Tag" },
121 { value: "4,9/5", label: "G2-Bewertung" },
122 ];
123 return (
124 <section className="bg-primary text-primary-foreground py-20 md:py-28">
125 <div className="mx-auto max-w-7xl px-6">
126 <div className="mx-auto max-w-2xl text-center">
127 <h2 className="text-3xl font-semibold tracking-tight sm:text-4xl">Teams weltweit vertrauen darauf</h2>
128 </div>
129 <dl className="mt-14 grid grid-cols-2 gap-x-8 gap-y-12 lg:grid-cols-4">
130 {stats.map((stat) => (
131 <div key={stat.label} className="text-center">
132 <dd className="text-4xl font-semibold tracking-tight tabular-nums sm:text-5xl">{stat.value}</dd>
133 <dt className="mt-2 text-sm text-primary-foreground/75">{stat.label}</dt>
134 </div>
135 ))}
136 </dl>
137 </div>
138 </section>
139 );
140}
141
142function Onboarding() {
143 const steps = [
144 { n: "01", Icon: Cable, title: "Tools verbinden", description: "OAuth-Klick statt Konfigurations-Tickets — deine Quellen sind in Minuten da." },
145 { n: "02", Icon: Workflow, title: "Workflow bauen", description: "Routine per Drag-and-drop automatisieren, ohne eine Zeile Glue-Code." },
146 { n: "03", Icon: BrainCircuit, title: "In Klartext fragen", description: "Der Copilot beantwortet Datenfragen und baut die Dashboards dazu." },
147 { n: "04", Icon: Rocket, title: "Team einladen", description: "SSO, Rollen und Audit-Logs ab dem ersten Tag — sicher skalieren." },
148 ];
149 return (
150 <section className="bg-muted/40 text-foreground py-20 md:py-28">
151 <div className="mx-auto max-w-7xl px-6">
152 <div className="mx-auto max-w-2xl text-center">
153 <p className="text-sm font-semibold uppercase tracking-wider text-primary">In 5 Minuten startklar</p>
154 <h2 className="text-3xl font-semibold tracking-tight sm:text-4xl">Von der Anmeldung zum ersten Insight</h2>
155 <p className="mt-4 text-lg text-muted-foreground">Kein Sales-Call, kein Setup-Marathon — einfach loslegen.</p>
156 </div>
157 <ol className="mt-16 grid grid-cols-1 gap-x-8 gap-y-12 sm:grid-cols-2 lg:grid-cols-4">
158 {steps.map((step) => (
159 <li key={step.title} className="flex flex-col items-start">
160 <div className="flex size-14 items-center justify-center rounded-2xl bg-primary/10 text-lg font-semibold text-primary">
161 {step.Icon ? <step.Icon className="size-6" /> : step.n}
162 </div>
163 <h3 className="mt-6 text-lg font-semibold tracking-tight">{step.title}</h3>
164 <p className="mt-2 text-sm leading-relaxed text-muted-foreground">{step.description}</p>
165 </li>
166 ))}
167 </ol>
168 </div>
169 </section>
170 );
171}
172
173function Integrationen() {
174 return (
175 <section className="bg-background text-foreground py-20 md:py-28">
176 <div className="mx-auto grid max-w-7xl items-center gap-12 px-6 md:grid-cols-2">
177 <div className="md:order-2">
178 <p className="text-sm font-semibold uppercase tracking-wider text-primary">120+ Integrationen</p>
179 <h2 className="mt-3 text-3xl font-semibold tracking-tight sm:text-4xl">Verbindet sich mit allem, was dein Team schon nutzt.</h2>
180 <p className="mt-4 text-lg leading-relaxed text-muted-foreground">Slack, GitHub, Stripe, Linear, Postgres, Snowflake — Nebula spricht mit deinem gesamten Stack. Daten fließen in beide Richtungen, in Echtzeit, ohne brüchige Zapier-Ketten.</p>
181 <div className="mt-8 flex flex-wrap gap-3">
182 <a href="#" className="inline-flex items-center justify-center gap-2 rounded-md px-5 py-2.5 text-sm font-medium transition-colors bg-primary text-primary-foreground hover:bg-primary/90">Alle Integrationen <ArrowRight className="size-4" /></a>
183 </div>
184 </div>
185 <img
186 src="/img/saas-integrations.jpg"
187 alt="Konstellation verbundener Integrations-Knoten in Violett"
188 width={1280}
189 height={960}
190 className="md:order-1 w-full rounded-xl border bg-card shadow-2xl"
191 />
192 </div>
193 </section>
194 );
195}
196
197function Stimmen() {
198 const testimonials = [
199 { quote: "Wir haben drei Tools durch Nebula ersetzt — und sind trotzdem schneller.", author: "Priya Nair", role: "CTO, Loop" },
200 { quote: "Die KI-Queries sparen meinem Team Stunden pro Woche.", author: "Daniel Roth", role: "Head of Data" },
201 { quote: "Onboarding in einem Nachmittag. Unerhört für so ein Tool.", author: "Elif Kaya", role: "Engineering Lead" },
202 ];
203 return (
204 <section className="bg-background text-foreground py-20 md:py-28">
205 <div className="mx-auto max-w-7xl px-6">
206 <div className="mx-auto max-w-2xl text-center">
207 <h2 className="text-3xl font-semibold tracking-tight sm:text-4xl">Was Teams sagen</h2>
208 </div>
209 <div className="mt-14 grid grid-cols-1 gap-6 md:grid-cols-3">
210 {testimonials.map((item) => (
211 <figure key={item.author} className="flex flex-col rounded-2xl border bg-card p-6">
212 <blockquote className="flex-1 text-[0.95rem] leading-relaxed">&ldquo;{item.quote}&rdquo;</blockquote>
213 <figcaption className="mt-6 flex items-center gap-3 border-t pt-4">
214 <div className="flex size-9 items-center justify-center rounded-full bg-primary/10 text-sm font-medium text-primary">
215 {item.author.charAt(0)}
216 </div>
217 <div>
218 <div className="text-sm font-medium">{item.author}</div>
219 {item.role && <div className="text-sm text-muted-foreground">{item.role}</div>}
220 </div>
221 </figcaption>
222 </figure>
223 ))}
224 </div>
225 </div>
226 </section>
227 );
228}
229
230function Vergleich() {
231 const columns = [
232 { name: "Nebula", highlight: true },
233 { name: "Tool-Flickenteppich", highlight: false },
234 { name: "Eigenbau", highlight: false },
235 ];
236 const rows = [
237 { feature: "KI-Copilot auf deinen Daten", values: [true, false, false] },
238 { feature: "Echtzeit-Sync aller Tools", values: [true, false, true] },
239 { feature: "SOC 2 & EU-Hosting", values: [true, true, false] },
240 { feature: "Setup-Zeit", values: ["Minuten", "Wochen", "Monate"] },
241 { feature: "Wartungsaufwand", values: ["Gering", "Hoch", "Sehr hoch"] },
242 { feature: "Skaliert bis Enterprise", values: [true, false, true] },
243 ];
244 return (
245 <section className="bg-muted/40 text-foreground py-20 md:py-28">
246 <div className="mx-auto max-w-4xl px-6">
247 <div className="mx-auto max-w-2xl text-center">
248 <p className="text-sm font-semibold uppercase tracking-wider text-primary">Nebula vs. Status quo</p>
249 <h2 className="text-3xl font-semibold tracking-tight sm:text-4xl">Ein Workspace statt fünf Abos</h2>
250 <p className="mt-4 text-lg text-muted-foreground">Was der Flickenteppich kostet — und was du dir mit Nebula sparst.</p>
251 </div>
252 <div className="mt-14 overflow-x-auto">
253 <table className="w-full min-w-[34rem] border-separate border-spacing-0">
254 <thead>
255 <tr>
256 <th className="px-5 pb-5 text-left text-xs font-medium uppercase tracking-wider text-muted-foreground">Funktion</th>
257 {columns.map((col) => (
258 <th key={col.name} className={"px-3 pb-5 text-center text-base font-semibold " + (col.highlight ? "text-primary" : "")}>
259 {col.name}
260 </th>
261 ))}
262 </tr>
263 </thead>
264 <tbody>
265 {rows.map((row) => (
266 <tr key={row.feature}>
267 <td className="border-t px-5 py-4 text-sm font-medium">{row.feature}</td>
268 {row.values.map((value, i) => (
269 <td key={i} className={"border-t px-3 py-4 text-center " + (columns[i].highlight ? "bg-primary/5" : "")}>
270 {typeof value === "boolean" ? (
271 value ? <Check className="mx-auto size-5 text-primary" /> : <Minus className="mx-auto size-4 text-muted-foreground/40" />
272 ) : (
273 <span className="text-sm font-medium">{value}</span>
274 )}
275 </td>
276 ))}
277 </tr>
278 ))}
279 </tbody>
280 </table>
281 </div>
282 </div>
283 </section>
284 );
285}
286
287function Pricing() {
288 const tiers = [
289 {
290 name: "Hobby",
291 price: "0 €",
292 period: "/ Monat",
293 description: "Für Side-Projects.",
294 features: ["1 Projekt", "Community-Support", "1.000 Workflow-Runs"],
295 cta: { label: "Loslegen", href: "#" },
296 featured: false,
297 },
298 {
299 name: "Pro",
300 price: "29 €",
301 period: "/ Platz",
302 description: "Für wachsende Teams.",
303 features: ["Unbegrenzte Projekte", "KI-Copilot", "SSO & Audit-Logs", "100k Workflow-Runs"],
304 cta: { label: "Pro testen", href: "#" },
305 featured: true,
306 },
307 {
308 name: "Enterprise",
309 price: "Individuell",
310 period: "",
311 description: "Für Skalierung & Compliance.",
312 features: ["Dedizierte Infrastruktur", "SAML/SCIM", "99,99% SLA", "Solutions-Engineer"],
313 cta: { label: "Sales kontaktieren", href: "#" },
314 featured: false,
315 },
316 ];
317 return (
318 <section className="bg-background text-foreground py-20 md:py-28">
319 <div className="mx-auto max-w-7xl px-6">
320 <div className="mx-auto max-w-2xl text-center">
321 <h2 className="text-3xl font-semibold tracking-tight sm:text-4xl">Preise, die mitwachsen</h2>
322 <p className="mt-4 text-lg text-muted-foreground">Starte gratis. Upgrade, wenn dein Team bereit ist.</p>
323 </div>
324 <div className="mx-auto mt-14 grid max-w-5xl grid-cols-1 gap-6 md:grid-cols-3">
325 {tiers.map((tier) => (
326 <div
327 key={tier.name}
328 className={"flex flex-col rounded-2xl border bg-card p-6 " + (tier.featured ? "ring-2 ring-primary shadow-lg" : "")}
329 >
330 {tier.featured && (
331 <span className="mb-4 inline-flex w-fit rounded-full bg-primary px-3 py-1 text-xs font-medium text-primary-foreground">
332 Beliebt
333 </span>
334 )}
335 <h3 className="text-lg font-semibold">{tier.name}</h3>
336 {tier.description && <p className="mt-1 text-sm text-muted-foreground">{tier.description}</p>}
337 <div className="mt-4 flex items-baseline gap-1">
338 <span className="text-4xl font-semibold tracking-tight">{tier.price}</span>
339 {tier.period && <span className="text-sm text-muted-foreground">{tier.period}</span>}
340 </div>
341 <ul className="mt-6 flex flex-1 flex-col gap-3 text-sm">
342 {tier.features.map((feature) => (
343 <li key={feature} className="flex items-start gap-2.5">
344 <Check className="mt-0.5 size-4 shrink-0 text-primary" />
345 <span>{feature}</span>
346 </li>
347 ))}
348 </ul>
349 <a
350 href={tier.cta.href}
351 className={"mt-6 inline-flex items-center justify-center rounded-md px-5 py-2.5 text-sm font-medium transition-colors " + (tier.featured ? "bg-primary text-primary-foreground hover:bg-primary/90" : "border hover:bg-muted")}
352 >
353 {tier.cta.label}
354 </a>
355 </div>
356 ))}
357 </div>
358 </div>
359 </section>
360 );
361}
362
363function Faq() {
364 const faqs = [
365 { question: "Brauche ich eine Kreditkarte?", answer: "Nein. Der Free-Plan ist unbegrenzt nutzbar — eine Karte ist erst beim Upgrade nötig." },
366 { question: "Wie steht es um Datenschutz?", answer: "EU-Hosting, SOC 2 Typ II und DSGVO-konform, inklusive Auftragsverarbeitungsvertrag (AVV)." },
367 { question: "Kann ich von einem anderen Tool migrieren?", answer: "Ja. Es gibt Importer für die gängigen Tools, ab Pro begleitet dich ein Solutions-Engineer." },
368 { question: "Ist Self-Hosting möglich?", answer: "Im Enterprise-Plan bieten wir Single-Tenant- und On-Premise-Deployments an." },
369 ];
370 return (
371 <section className="bg-muted/40 text-foreground py-20 md:py-28">
372 <div className="mx-auto max-w-3xl px-6">
373 <div className="mx-auto max-w-2xl text-center">
374 <h2 className="text-3xl font-semibold tracking-tight sm:text-4xl">Häufige Fragen</h2>
375 </div>
376 <div className="mt-12 divide-y rounded-2xl border bg-card">
377 {faqs.map((faq) => (
378 <details key={faq.question} className="group p-5 [&_summary]:list-none">
379 <summary className="flex cursor-pointer items-center justify-between gap-4 font-medium">
380 {faq.question}
381 <ChevronDown className="size-4 shrink-0 text-muted-foreground transition-transform duration-200 group-open:rotate-180" />
382 </summary>
383 <p className="mt-3 text-sm leading-relaxed text-muted-foreground">{faq.answer}</p>
384 </details>
385 ))}
386 </div>
387 </div>
388 </section>
389 );
390}
391
392function Newsletter() {
393 return (
394 <section className="bg-neutral-950 text-neutral-50 py-24 md:py-28">
395 <div className="mx-auto flex max-w-2xl flex-col items-center px-6 text-center">
396 <p className="text-sm font-semibold uppercase tracking-wider text-neutral-300">Changelog</p>
397 <h2 className="text-3xl font-semibold tracking-tight sm:text-4xl md:text-5xl">Jede neue Funktion zuerst.</h2>
398 <p className="mt-4 max-w-xl text-lg text-neutral-300">Ein kompakter Produkt-Digest pro Monat: neue Integrationen, KI-Features und Engineering-Deep-Dives. Kein Spam.</p>
399 <div className="mt-8 flex w-full max-w-md flex-col gap-3 sm:flex-row">
400 <input type="email" placeholder="name@team.com" className="h-11 flex-1 rounded-md border border-white/20 bg-white/5 px-4 text-sm outline-none placeholder:text-current/40" />
401 <a href="#" className="inline-flex items-center justify-center gap-2 rounded-md px-5 py-2.5 text-sm font-medium transition-colors bg-background text-foreground hover:bg-background/90">Abonnieren <ArrowRight className="size-4" /></a>
402 </div>
403 <p className="mt-4 text-xs text-neutral-300">Jederzeit abbestellbar. Wir geben deine Adresse nicht weiter.</p>
404 </div>
405 </section>
406 );
407}
408
409function Cta() {
410 return (
411 <section className="bg-primary text-primary-foreground py-24 md:py-28">
412 <div className="mx-auto flex max-w-3xl flex-col items-center px-6 text-center">
413 <h2 className="text-3xl font-semibold tracking-tight sm:text-4xl md:text-5xl">Bau das nächste große Ding. Schneller.</h2>
414 <p className="mt-4 max-w-xl text-lg text-primary-foreground/75">Kostenlos starten — in unter 5 Minuten deployed.</p>
415 <div className="mt-8 flex flex-wrap justify-center gap-3">
416 <a href="#pricing" className="inline-flex items-center justify-center gap-2 rounded-md px-5 py-2.5 text-sm font-medium transition-colors bg-background text-foreground hover:bg-background/90">Kostenlos starten <ArrowRight className="size-4" /></a>
417 <a href="#" className="inline-flex items-center justify-center gap-2 rounded-md px-5 py-2.5 text-sm font-medium transition-colors border border-white/25 text-current hover:bg-white/10">Mit Sales sprechen</a>
418 </div>
419 </div>
420 </section>
421 );
422}
423
424export default function Page() {
425 return (
426 <main>
427 <Hero />
428 <Logos />
429 <Platform />
430 <Developer />
431 <Zahlen />
432 <Onboarding />
433 <Integrationen />
434 <Stimmen />
435 <Vergleich />
436 <Pricing />
437 <Faq />
438 <Newsletter />
439 <Cta />
440 </main>
441 );
442}