cat-framework-core 0.5.2 → 0.6.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/CHANGELOG.md +23 -0
  2. package/dist/index.cjs +1 -1
  3. package/dist/index.cjs.map +1 -1
  4. package/dist/index.mjs +1177 -373
  5. package/dist/index.mjs.map +1 -1
  6. package/package.json +1 -1
  7. package/src/index.css +215 -53
package/dist/index.mjs CHANGED
@@ -1,18 +1,18 @@
1
- import { jsx as e, jsxs as i } from "react/jsx-runtime";
2
- import { clsx as J } from "clsx";
3
- import { twMerge as L } from "tailwind-merge";
4
- import { cva as B } from "class-variance-authority";
5
- import * as k from "react";
6
- import V, { useRef as $, useState as v, useEffect as I, createContext as Q, useContext as X, useCallback as U } from "react";
7
- import { Slot as Y } from "@radix-ui/react-slot";
8
- import { motion as R } from "framer-motion";
9
- import * as w from "@radix-ui/react-accordion";
10
- import { ChevronDown as S, X as ee, Menu as re, Search as te, ChevronRight as ae, Cloud as ne, Star as oe, Check as ie } from "lucide-react";
11
- import * as T from "@radix-ui/react-label";
12
- function l(...t) {
13
- return L(J(t));
1
+ import { jsx as e, jsxs as a, Fragment as X } from "react/jsx-runtime";
2
+ import { clsx as Y } from "clsx";
3
+ import { twMerge as ee } from "tailwind-merge";
4
+ import { cva as W } from "class-variance-authority";
5
+ import * as S from "react";
6
+ import V, { useRef as te, useState as k, useEffect as E, createContext as re, useContext as ie, useCallback as ae } from "react";
7
+ import { Slot as ne } from "@radix-ui/react-slot";
8
+ import { motion as L } from "framer-motion";
9
+ import * as z from "@radix-ui/react-accordion";
10
+ import { ChevronDown as I, X as oe, Menu as se, Search as le, ChevronRight as de, Cloud as ce, Star as me, Check as he } from "lucide-react";
11
+ import * as _ from "@radix-ui/react-label";
12
+ function c(...t) {
13
+ return ee(Y(t));
14
14
  }
15
- const se = B("", {
15
+ const fe = W("", {
16
16
  variants: {
17
17
  variant: {
18
18
  h1: "font-display text-4xl font-bold tracking-tight sm:text-5xl lg:text-6xl",
@@ -39,7 +39,7 @@ const se = B("", {
39
39
  variant: "body",
40
40
  color: "default"
41
41
  }
42
- }), de = {
42
+ }), ue = {
43
43
  h1: "h1",
44
44
  h2: "h2",
45
45
  h3: "h3",
@@ -51,22 +51,22 @@ const se = B("", {
51
51
  "body-lg": "p",
52
52
  caption: "span",
53
53
  overline: "span"
54
- }, m = V.forwardRef(
55
- ({ className: t, variant: n = "body", tone: r = "default", as: o, children: s, ...a }, d) => {
56
- const f = o || de[n] || "p";
54
+ }, g = V.forwardRef(
55
+ ({ className: t, variant: r = "body", tone: i = "default", as: o, children: s, ...n }, l) => {
56
+ const u = o || ue[r] || "p";
57
57
  return /* @__PURE__ */ e(
58
- f,
58
+ u,
59
59
  {
60
- ref: d,
61
- className: l(se({ variant: n, color: r, className: t })),
62
- ...a,
60
+ ref: l,
61
+ className: c(fe({ variant: r, color: i, className: t })),
62
+ ...n,
63
63
  children: s
64
64
  }
65
65
  );
66
66
  }
67
67
  );
68
- m.displayName = "Typography";
69
- const le = B(
68
+ g.displayName = "Typography";
69
+ const ge = W(
70
70
  "inline-flex items-center rounded-full px-3 py-0.5 font-body text-xs font-medium transition-fast",
71
71
  {
72
72
  variants: {
@@ -81,11 +81,11 @@ const le = B(
81
81
  },
82
82
  defaultVariants: { variant: "default" }
83
83
  }
84
- ), ce = V.forwardRef(
85
- ({ className: t, variant: n, ...r }, o) => /* @__PURE__ */ e("span", { ref: o, className: l(le({ variant: n, className: t })), ...r })
84
+ ), pe = V.forwardRef(
85
+ ({ className: t, variant: r, ...i }, o) => /* @__PURE__ */ e("span", { ref: o, className: c(ge({ variant: r, className: t })), ...i })
86
86
  );
87
- ce.displayName = "Badge";
88
- const me = B(
87
+ pe.displayName = "Badge";
88
+ const be = W(
89
89
  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-xl font-medium font-body transition-fast focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
90
90
  {
91
91
  variants: {
@@ -112,97 +112,97 @@ const me = B(
112
112
  size: "default"
113
113
  }
114
114
  }
115
- ), b = k.forwardRef(
116
- ({ className: t, variant: n, size: r, asChild: o = !1, ...s }, a) => /* @__PURE__ */ e(o ? Y : "button", { className: l(me({ variant: n, size: r, className: t })), ref: a, ...s })
115
+ ), v = S.forwardRef(
116
+ ({ className: t, variant: r, size: i, asChild: o = !1, ...s }, n) => /* @__PURE__ */ e(o ? ne : "button", { className: c(be({ variant: r, size: i, className: t })), ref: n, ...s })
117
117
  );
118
- b.displayName = "Button";
119
- const M = ({
118
+ v.displayName = "Button";
119
+ const G = ({
120
120
  src: t,
121
- className: n
121
+ className: r
122
122
  }) => {
123
- const r = $(null), [o, s] = v(!1);
124
- return I(() => {
125
- var a;
126
- s(!1), (a = r.current) == null || a.play().catch(() => {
123
+ const i = te(null), [o, s] = k(!1);
124
+ return E(() => {
125
+ var n;
126
+ s(!1), (n = i.current) == null || n.play().catch(() => {
127
127
  });
128
128
  }, [t]), /* @__PURE__ */ e(
129
129
  "video",
130
130
  {
131
- ref: r,
131
+ ref: i,
132
132
  src: t,
133
133
  autoPlay: !0,
134
134
  loop: !0,
135
135
  muted: !0,
136
136
  playsInline: !0,
137
137
  onCanPlay: () => s(!0),
138
- className: l(n, o ? "opacity-100" : "opacity-0"),
138
+ className: c(r, o ? "opacity-100" : "opacity-0"),
139
139
  style: { transition: "opacity 0.3s ease-in" }
140
140
  }
141
141
  );
142
- }, Ce = ({
142
+ }, De = ({
143
143
  headline: t,
144
- headlineMobile: n,
145
- subheadline: r,
144
+ headlineMobile: r,
145
+ subheadline: i,
146
146
  subheadlineMobile: o,
147
147
  ctaLabel: s,
148
- ctaHref: a = "#",
149
- secondaryCtaLabel: d,
150
- secondaryCtaHref: f = "#",
151
- backgroundImage: u,
152
- backgroundImageMobile: p,
153
- backgroundVideo: g,
154
- backgroundVideoMobile: y,
155
- imageAlt: N = "",
156
- className: h,
157
- ...j
148
+ ctaHref: n = "#",
149
+ secondaryCtaLabel: l,
150
+ secondaryCtaHref: u = "#",
151
+ backgroundImage: m,
152
+ backgroundImageMobile: h,
153
+ backgroundVideo: b,
154
+ backgroundVideoMobile: N,
155
+ imageAlt: w = "",
156
+ className: f,
157
+ ...C
158
158
  }) => {
159
- const A = !!g, F = !!(y || g);
160
- return /* @__PURE__ */ i("section", { className: l("relative overflow-hidden", h), ...j, children: [
161
- /* @__PURE__ */ i("div", { className: "hidden md:flex relative min-h-[420px] md:min-h-[420px] lg:min-h-[600px]", children: [
162
- A ? /* @__PURE__ */ e(
163
- M,
159
+ const P = !!b, p = !!(N || b);
160
+ return /* @__PURE__ */ a("section", { className: c("relative overflow-hidden", f), ...C, children: [
161
+ /* @__PURE__ */ a("div", { className: "hidden md:flex relative min-h-[420px] md:min-h-[420px] lg:min-h-[600px]", children: [
162
+ P ? /* @__PURE__ */ e(
163
+ G,
164
164
  {
165
- src: g,
165
+ src: b,
166
166
  className: "absolute inset-0 h-full w-full object-cover object-right"
167
167
  }
168
- ) : u ? /* @__PURE__ */ e(
168
+ ) : m ? /* @__PURE__ */ e(
169
169
  "img",
170
170
  {
171
- src: u,
172
- alt: N,
171
+ src: m,
172
+ alt: w,
173
173
  className: "absolute inset-0 h-full w-full object-cover object-right",
174
174
  loading: "eager"
175
175
  }
176
176
  ) : null,
177
177
  /* @__PURE__ */ e("div", { className: "absolute inset-0 bg-gradient-to-r from-black/80 via-black/50 to-transparent" }),
178
- /* @__PURE__ */ e("div", { className: "relative z-10 flex items-center w-full pl-8 lg:pl-16", children: /* @__PURE__ */ i(
179
- R.div,
178
+ /* @__PURE__ */ e("div", { className: "relative z-10 flex items-center w-full pl-8 lg:pl-16", children: /* @__PURE__ */ a(
179
+ L.div,
180
180
  {
181
181
  initial: { opacity: 0, y: 16 },
182
182
  animate: { opacity: 1, y: 0 },
183
183
  transition: { duration: 0.4, ease: "easeOut" },
184
184
  className: "px-6 py-16 lg:px-8 lg:py-20 max-w-[500px] lg:max-w-[480px]",
185
185
  children: [
186
- /* @__PURE__ */ e(m, { variant: "h1", className: "text-white drop-shadow-lg", as: "h1", children: t }),
187
- r && /* @__PURE__ */ e(m, { variant: "body-lg", className: "mt-4 text-white/85 drop-shadow-md", children: r }),
188
- (s || d) && /* @__PURE__ */ i("div", { className: "mt-8 flex flex-wrap gap-4", children: [
186
+ /* @__PURE__ */ e(g, { variant: "h1", className: "text-white drop-shadow-lg", as: "h1", children: t }),
187
+ i && /* @__PURE__ */ e(g, { variant: "body-lg", className: "mt-4 text-white/85 drop-shadow-md", children: i }),
188
+ (s || l) && /* @__PURE__ */ a("div", { className: "mt-8 flex flex-wrap gap-4", children: [
189
189
  s && /* @__PURE__ */ e(
190
- b,
190
+ v,
191
191
  {
192
192
  size: "lg",
193
193
  className: "bg-primary text-primary-foreground hover:bg-primary/90 shadow-lg",
194
194
  asChild: !0,
195
- children: /* @__PURE__ */ e("a", { href: a, children: s })
195
+ children: /* @__PURE__ */ e("a", { href: n, children: s })
196
196
  }
197
197
  ),
198
- d && /* @__PURE__ */ e(
199
- b,
198
+ l && /* @__PURE__ */ e(
199
+ v,
200
200
  {
201
201
  size: "lg",
202
202
  variant: "outline",
203
203
  className: "border-white/40 text-foreground bg-white/90 hover:bg-white shadow-lg",
204
204
  asChild: !0,
205
- children: /* @__PURE__ */ e("a", { href: f, children: d })
205
+ children: /* @__PURE__ */ e("a", { href: u, children: l })
206
206
  }
207
207
  )
208
208
  ] })
@@ -210,39 +210,39 @@ const M = ({
210
210
  }
211
211
  ) })
212
212
  ] }),
213
- /* @__PURE__ */ i("div", { className: "block md:hidden relative min-h-[85vh] flex flex-col", children: [
214
- F ? /* @__PURE__ */ e(
215
- M,
213
+ /* @__PURE__ */ a("div", { className: "block md:hidden relative min-h-[85vh] flex flex-col", children: [
214
+ p ? /* @__PURE__ */ e(
215
+ G,
216
216
  {
217
- src: y || g,
217
+ src: N || b,
218
218
  className: "absolute inset-0 h-full w-full object-cover object-center"
219
219
  }
220
- ) : p || u ? /* @__PURE__ */ e(
220
+ ) : h || m ? /* @__PURE__ */ e(
221
221
  "img",
222
222
  {
223
- src: p || u,
224
- alt: N,
223
+ src: h || m,
224
+ alt: w,
225
225
  className: "absolute inset-0 h-full w-full object-cover object-center",
226
226
  loading: "eager"
227
227
  }
228
228
  ) : null,
229
229
  /* @__PURE__ */ e("div", { className: "absolute inset-0 bg-gradient-to-b from-black/70 via-transparent to-black/80" }),
230
- /* @__PURE__ */ i("div", { className: "relative z-10 flex flex-1 flex-col justify-between px-5 py-10", children: [
231
- /* @__PURE__ */ i(
232
- R.div,
230
+ /* @__PURE__ */ a("div", { className: "relative z-10 flex flex-1 flex-col justify-between px-5 py-10", children: [
231
+ /* @__PURE__ */ a(
232
+ L.div,
233
233
  {
234
234
  initial: { opacity: 0, y: 12 },
235
235
  animate: { opacity: 1, y: 0 },
236
236
  transition: { duration: 0.4 },
237
237
  children: [
238
- /* @__PURE__ */ e(m, { variant: "h2", className: "text-white drop-shadow-lg", as: "h1", children: n || t }),
239
- (o || r) && /* @__PURE__ */ e(m, { variant: "body-lg", className: "mt-3 text-white/90 drop-shadow-lg font-medium leading-relaxed", children: o || r })
238
+ /* @__PURE__ */ e(g, { variant: "h2", className: "text-white drop-shadow-lg", as: "h1", children: r || t }),
239
+ (o || i) && /* @__PURE__ */ e(g, { variant: "body-lg", className: "mt-3 text-white/90 drop-shadow-lg font-medium leading-relaxed", children: o || i })
240
240
  ]
241
241
  }
242
242
  ),
243
243
  /* @__PURE__ */ e("div", { className: "flex-1" }),
244
- (s || d) && /* @__PURE__ */ i(
245
- R.div,
244
+ (s || l) && /* @__PURE__ */ a(
245
+ L.div,
246
246
  {
247
247
  initial: { opacity: 0, y: 12 },
248
248
  animate: { opacity: 1, y: 0 },
@@ -250,22 +250,22 @@ const M = ({
250
250
  className: "flex flex-col gap-3",
251
251
  children: [
252
252
  s && /* @__PURE__ */ e(
253
- b,
253
+ v,
254
254
  {
255
255
  size: "lg",
256
256
  className: "w-full bg-primary text-primary-foreground hover:bg-primary/90 shadow-lg",
257
257
  asChild: !0,
258
- children: /* @__PURE__ */ e("a", { href: a, children: s })
258
+ children: /* @__PURE__ */ e("a", { href: n, children: s })
259
259
  }
260
260
  ),
261
- d && /* @__PURE__ */ e(
262
- b,
261
+ l && /* @__PURE__ */ e(
262
+ v,
263
263
  {
264
264
  size: "lg",
265
265
  variant: "outline",
266
266
  className: "w-full border-white/40 text-foreground bg-white/90 hover:bg-white shadow-lg",
267
267
  asChild: !0,
268
- children: /* @__PURE__ */ e("a", { href: f, children: d })
268
+ children: /* @__PURE__ */ e("a", { href: u, children: l })
269
269
  }
270
270
  )
271
271
  ]
@@ -274,127 +274,127 @@ const M = ({
274
274
  ] })
275
275
  ] })
276
276
  ] });
277
- }, ze = ({
277
+ }, Ge = ({
278
278
  heading: t,
279
- text: n,
280
- imageSrc: r,
279
+ text: r,
280
+ imageSrc: i,
281
281
  imageAlt: o,
282
282
  ctaLabel: s,
283
- ctaHref: a = "#",
284
- imagePosition: d = "left",
285
- className: f,
286
- ...u
287
- }) => /* @__PURE__ */ e("section", { className: l("section-padding", f), ...u, children: /* @__PURE__ */ i(
283
+ ctaHref: n = "#",
284
+ imagePosition: l = "left",
285
+ className: u,
286
+ ...m
287
+ }) => /* @__PURE__ */ e("section", { className: c("section-padding", u), ...m, children: /* @__PURE__ */ a(
288
288
  "div",
289
289
  {
290
- className: l(
290
+ className: c(
291
291
  "container-wide grid items-center gap-8 md:grid-cols-2 lg:gap-16",
292
- d === "right" && "md:[&>*:first-child]:order-2"
292
+ l === "right" && "md:[&>*:first-child]:order-2"
293
293
  ),
294
294
  children: [
295
295
  /* @__PURE__ */ e("div", { className: "overflow-hidden rounded-2xl", children: /* @__PURE__ */ e(
296
296
  "img",
297
297
  {
298
- src: r,
298
+ src: i,
299
299
  alt: o,
300
300
  className: "h-full w-full object-cover",
301
301
  loading: "lazy"
302
302
  }
303
303
  ) }),
304
- /* @__PURE__ */ i("div", { children: [
305
- /* @__PURE__ */ e(m, { variant: "h2", children: t }),
306
- /* @__PURE__ */ e(m, { variant: "body", color: "muted", className: "mt-4", children: n }),
307
- s && /* @__PURE__ */ e(b, { className: "mt-6", asChild: !0, children: /* @__PURE__ */ e("a", { href: a, children: s }) })
304
+ /* @__PURE__ */ a("div", { children: [
305
+ /* @__PURE__ */ e(g, { variant: "h2", children: t }),
306
+ /* @__PURE__ */ e(g, { variant: "body", color: "muted", className: "mt-4", children: r }),
307
+ s && /* @__PURE__ */ e(v, { className: "mt-6", asChild: !0, children: /* @__PURE__ */ e("a", { href: n, children: s }) })
308
308
  ] })
309
309
  ]
310
310
  }
311
- ) }), Be = ({
311
+ ) }), Ee = ({
312
312
  heading: t,
313
- text: n,
314
- imageSrc: r,
313
+ text: r,
314
+ imageSrc: i,
315
315
  imageAlt: o = "",
316
316
  tag: s,
317
- href: a,
318
- className: d,
319
- ...f
317
+ href: n,
318
+ className: l,
319
+ ...u
320
320
  }) => {
321
- const u = a ? "a" : "div", p = a ? { href: a } : {};
321
+ const m = n ? "a" : "div", h = n ? { href: n } : {};
322
322
  return /* @__PURE__ */ e(
323
323
  "article",
324
324
  {
325
- className: l(
325
+ className: c(
326
326
  "group overflow-hidden rounded-2xl border border-border bg-card shadow-sm transition-fast hover:shadow-lg",
327
- a && "cursor-pointer",
328
- d
327
+ n && "cursor-pointer",
328
+ l
329
329
  ),
330
- ...f,
331
- children: /* @__PURE__ */ i(u, { ...p, className: "block", children: [
332
- r && /* @__PURE__ */ e("div", { className: "aspect-video overflow-hidden", children: /* @__PURE__ */ e(
330
+ ...u,
331
+ children: /* @__PURE__ */ a(m, { ...h, className: "block", children: [
332
+ i && /* @__PURE__ */ e("div", { className: "aspect-video overflow-hidden", children: /* @__PURE__ */ e(
333
333
  "img",
334
334
  {
335
- src: r,
335
+ src: i,
336
336
  alt: o,
337
337
  className: "h-full w-full object-cover transition-fast group-hover:scale-105",
338
338
  loading: "lazy"
339
339
  }
340
340
  ) }),
341
- /* @__PURE__ */ i("div", { className: "p-6", children: [
342
- s && /* @__PURE__ */ e(m, { variant: "overline", className: "mb-2", children: s }),
343
- /* @__PURE__ */ e(m, { variant: "h4", className: "group-hover:text-primary transition-fast", children: t }),
344
- /* @__PURE__ */ e(m, { variant: "body-sm", color: "muted", className: "mt-2 line-clamp-3", children: n })
341
+ /* @__PURE__ */ a("div", { className: "p-6", children: [
342
+ s && /* @__PURE__ */ e(g, { variant: "overline", className: "mb-2", children: s }),
343
+ /* @__PURE__ */ e(g, { variant: "h4", className: "group-hover:text-primary transition-fast", children: t }),
344
+ /* @__PURE__ */ e(g, { variant: "body-sm", color: "muted", className: "mt-2 line-clamp-3", children: r })
345
345
  ] })
346
346
  ] })
347
347
  }
348
348
  );
349
- }, ue = w.Root, _ = k.forwardRef(({ className: t, ...n }, r) => /* @__PURE__ */ e(w.Item, { ref: r, className: l("border-b", t), ...n }));
350
- _.displayName = "AccordionItem";
351
- const E = k.forwardRef(({ className: t, children: n, ...r }, o) => /* @__PURE__ */ e(w.Header, { className: "flex", children: /* @__PURE__ */ i(
352
- w.Trigger,
349
+ }, xe = z.Root, K = S.forwardRef(({ className: t, ...r }, i) => /* @__PURE__ */ e(z.Item, { ref: i, className: c("border-b", t), ...r }));
350
+ K.displayName = "AccordionItem";
351
+ const O = S.forwardRef(({ className: t, children: r, ...i }, o) => /* @__PURE__ */ e(z.Header, { className: "flex", children: /* @__PURE__ */ a(
352
+ z.Trigger,
353
353
  {
354
354
  ref: o,
355
- className: l(
355
+ className: c(
356
356
  "flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
357
357
  t
358
358
  ),
359
- ...r,
359
+ ...i,
360
360
  children: [
361
- n,
362
- /* @__PURE__ */ e(S, { className: "h-4 w-4 shrink-0 transition-transform duration-200" })
361
+ r,
362
+ /* @__PURE__ */ e(I, { className: "h-4 w-4 shrink-0 transition-transform duration-200" })
363
363
  ]
364
364
  }
365
365
  ) }));
366
- E.displayName = w.Trigger.displayName;
367
- const K = k.forwardRef(({ className: t, children: n, ...r }, o) => /* @__PURE__ */ e(
368
- w.Content,
366
+ O.displayName = z.Trigger.displayName;
367
+ const q = S.forwardRef(({ className: t, children: r, ...i }, o) => /* @__PURE__ */ e(
368
+ z.Content,
369
369
  {
370
370
  ref: o,
371
371
  className: "overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down",
372
- ...r,
373
- children: /* @__PURE__ */ e("div", { className: l("pb-4 pt-0", t), children: n })
372
+ ...i,
373
+ children: /* @__PURE__ */ e("div", { className: c("pb-4 pt-0", t), children: r })
374
374
  }
375
375
  ));
376
- K.displayName = w.Content.displayName;
377
- const je = ({
376
+ q.displayName = z.Content.displayName;
377
+ const _e = ({
378
378
  heading: t,
379
- items: n,
380
- className: r,
379
+ items: r,
380
+ className: i,
381
381
  ...o
382
382
  }) => {
383
383
  const s = {
384
384
  "@context": "https://schema.org",
385
385
  "@type": "FAQPage",
386
- mainEntity: n.map((a) => ({
386
+ mainEntity: r.map((n) => ({
387
387
  "@type": "Question",
388
- name: a.question,
389
- acceptedAnswer: { "@type": "Answer", text: a.answer }
388
+ name: n.question,
389
+ acceptedAnswer: { "@type": "Answer", text: n.answer }
390
390
  }))
391
391
  };
392
- return /* @__PURE__ */ e("section", { className: l("section-padding", r), ...o, children: /* @__PURE__ */ i("div", { className: "container-narrow", children: [
393
- t && /* @__PURE__ */ e(m, { variant: "h2", className: "mb-8 text-center", children: t }),
394
- /* @__PURE__ */ e(ue, { type: "single", collapsible: !0, className: "w-full", children: n.map((a, d) => /* @__PURE__ */ i(_, { value: `item-${d}`, children: [
395
- /* @__PURE__ */ e(E, { className: "font-display text-left font-semibold", children: a.question }),
396
- /* @__PURE__ */ e(K, { className: "font-body text-muted-foreground", children: a.answer })
397
- ] }, d)) }),
392
+ return /* @__PURE__ */ e("section", { className: c("section-padding", i), ...o, children: /* @__PURE__ */ a("div", { className: "container-narrow", children: [
393
+ t && /* @__PURE__ */ e(g, { variant: "h2", className: "mb-8 text-center", children: t }),
394
+ /* @__PURE__ */ e(xe, { type: "single", collapsible: !0, className: "w-full", children: r.map((n, l) => /* @__PURE__ */ a(K, { value: `item-${l}`, children: [
395
+ /* @__PURE__ */ e(O, { className: "font-display text-left font-semibold", children: n.question }),
396
+ /* @__PURE__ */ e(q, { className: "font-body text-muted-foreground", children: n.answer })
397
+ ] }, l)) }),
398
398
  /* @__PURE__ */ e(
399
399
  "script",
400
400
  {
@@ -403,208 +403,208 @@ const je = ({
403
403
  }
404
404
  )
405
405
  ] }) });
406
- }, z = k.forwardRef(
407
- ({ className: t, type: n, ...r }, o) => /* @__PURE__ */ e(
406
+ }, A = S.forwardRef(
407
+ ({ className: t, type: r, ...i }, o) => /* @__PURE__ */ e(
408
408
  "input",
409
409
  {
410
- type: n,
411
- className: l(
410
+ type: r,
411
+ className: c(
412
412
  "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
413
413
  t
414
414
  ),
415
415
  ref: o,
416
- ...r
416
+ ...i
417
417
  }
418
418
  )
419
419
  );
420
- z.displayName = "Input";
421
- const W = k.forwardRef(({ className: t, ...n }, r) => /* @__PURE__ */ e(
420
+ A.displayName = "Input";
421
+ const Z = S.forwardRef(({ className: t, ...r }, i) => /* @__PURE__ */ e(
422
422
  "textarea",
423
423
  {
424
- className: l(
424
+ className: c(
425
425
  "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
426
426
  t
427
427
  ),
428
- ref: r,
429
- ...n
428
+ ref: i,
429
+ ...r
430
430
  }
431
431
  ));
432
- W.displayName = "Textarea";
433
- const he = B("text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"), C = k.forwardRef(({ className: t, ...n }, r) => /* @__PURE__ */ e(T.Root, { ref: r, className: l(he(), t), ...n }));
434
- C.displayName = T.Root.displayName;
435
- const Ae = ({
432
+ Z.displayName = "Textarea";
433
+ const ye = W("text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"), B = S.forwardRef(({ className: t, ...r }, i) => /* @__PURE__ */ e(_.Root, { ref: i, className: c(ye(), t), ...r }));
434
+ B.displayName = _.Root.displayName;
435
+ const Ke = ({
436
436
  heading: t = "Kontakt",
437
- description: n,
438
- onSubmit: r,
437
+ description: r,
438
+ onSubmit: i,
439
439
  className: o,
440
440
  ...s
441
441
  }) => {
442
- const [a, d] = v({ name: "", email: "", message: "" }), [f, u] = v(!1), p = (g) => {
443
- g.preventDefault(), r == null || r(a), u(!0);
442
+ const [n, l] = k({ name: "", email: "", message: "" }), [u, m] = k(!1), h = (b) => {
443
+ b.preventDefault(), i == null || i(n), m(!0);
444
444
  };
445
- return /* @__PURE__ */ e("section", { className: l("section-padding", o), ...s, children: /* @__PURE__ */ i("div", { className: "container-narrow", children: [
446
- /* @__PURE__ */ e(m, { variant: "h2", className: "mb-2", children: t }),
447
- n && /* @__PURE__ */ e(m, { variant: "body", color: "muted", className: "mb-8", children: n }),
448
- f ? /* @__PURE__ */ i("div", { className: "rounded-lg border border-success/30 bg-success/5 p-8 text-center", children: [
449
- /* @__PURE__ */ e(m, { variant: "h4", color: "accent", children: "Vielen Dank für Ihre Nachricht!" }),
450
- /* @__PURE__ */ e(m, { variant: "body-sm", color: "muted", className: "mt-2", children: "Wir melden uns in Kürze bei Ihnen." })
451
- ] }) : /* @__PURE__ */ i("form", { onSubmit: p, className: "space-y-6", children: [
452
- /* @__PURE__ */ i("div", { className: "grid gap-6 sm:grid-cols-2", children: [
453
- /* @__PURE__ */ i("div", { className: "space-y-2", children: [
454
- /* @__PURE__ */ e(C, { htmlFor: "name", children: "Name" }),
445
+ return /* @__PURE__ */ e("section", { className: c("section-padding", o), ...s, children: /* @__PURE__ */ a("div", { className: "container-narrow", children: [
446
+ /* @__PURE__ */ e(g, { variant: "h2", className: "mb-2", children: t }),
447
+ r && /* @__PURE__ */ e(g, { variant: "body", color: "muted", className: "mb-8", children: r }),
448
+ u ? /* @__PURE__ */ a("div", { className: "rounded-lg border border-success/30 bg-success/5 p-8 text-center", children: [
449
+ /* @__PURE__ */ e(g, { variant: "h4", color: "accent", children: "Vielen Dank für Ihre Nachricht!" }),
450
+ /* @__PURE__ */ e(g, { variant: "body-sm", color: "muted", className: "mt-2", children: "Wir melden uns in Kürze bei Ihnen." })
451
+ ] }) : /* @__PURE__ */ a("form", { onSubmit: h, className: "space-y-6", children: [
452
+ /* @__PURE__ */ a("div", { className: "grid gap-6 sm:grid-cols-2", children: [
453
+ /* @__PURE__ */ a("div", { className: "space-y-2", children: [
454
+ /* @__PURE__ */ e(B, { htmlFor: "name", children: "Name" }),
455
455
  /* @__PURE__ */ e(
456
- z,
456
+ A,
457
457
  {
458
458
  id: "name",
459
459
  required: !0,
460
- value: a.name,
461
- onChange: (g) => d({ ...a, name: g.target.value }),
460
+ value: n.name,
461
+ onChange: (b) => l({ ...n, name: b.target.value }),
462
462
  placeholder: "Max Mustermann"
463
463
  }
464
464
  )
465
465
  ] }),
466
- /* @__PURE__ */ i("div", { className: "space-y-2", children: [
467
- /* @__PURE__ */ e(C, { htmlFor: "email", children: "E-Mail" }),
466
+ /* @__PURE__ */ a("div", { className: "space-y-2", children: [
467
+ /* @__PURE__ */ e(B, { htmlFor: "email", children: "E-Mail" }),
468
468
  /* @__PURE__ */ e(
469
- z,
469
+ A,
470
470
  {
471
471
  id: "email",
472
472
  type: "email",
473
473
  required: !0,
474
- value: a.email,
475
- onChange: (g) => d({ ...a, email: g.target.value }),
474
+ value: n.email,
475
+ onChange: (b) => l({ ...n, email: b.target.value }),
476
476
  placeholder: "max@beispiel.de"
477
477
  }
478
478
  )
479
479
  ] })
480
480
  ] }),
481
- /* @__PURE__ */ i("div", { className: "space-y-2", children: [
482
- /* @__PURE__ */ e(C, { htmlFor: "message", children: "Nachricht" }),
481
+ /* @__PURE__ */ a("div", { className: "space-y-2", children: [
482
+ /* @__PURE__ */ e(B, { htmlFor: "message", children: "Nachricht" }),
483
483
  /* @__PURE__ */ e(
484
- W,
484
+ Z,
485
485
  {
486
486
  id: "message",
487
487
  required: !0,
488
488
  rows: 5,
489
- value: a.message,
490
- onChange: (g) => d({ ...a, message: g.target.value }),
489
+ value: n.message,
490
+ onChange: (b) => l({ ...n, message: b.target.value }),
491
491
  placeholder: "Ihre Nachricht..."
492
492
  }
493
493
  )
494
494
  ] }),
495
- /* @__PURE__ */ e(b, { type: "submit", size: "lg", children: "Nachricht senden" })
495
+ /* @__PURE__ */ e(v, { type: "submit", size: "lg", children: "Nachricht senden" })
496
496
  ] })
497
497
  ] }) });
498
- }, Fe = ({
498
+ }, Oe = ({
499
499
  brand: t,
500
- items: n,
501
- ctaLabel: r,
500
+ items: r,
501
+ ctaLabel: i,
502
502
  ctaHref: o = "#",
503
503
  className: s,
504
- ...a
504
+ ...n
505
505
  }) => {
506
- const [d, f] = v(!1);
507
- return /* @__PURE__ */ i(
506
+ const [l, u] = k(!1);
507
+ return /* @__PURE__ */ a(
508
508
  "header",
509
509
  {
510
- className: l(
510
+ className: c(
511
511
  "sticky top-0 z-50 border-b border-primary/20 bg-primary text-primary-foreground backdrop-blur",
512
512
  s
513
513
  ),
514
- ...a,
514
+ ...n,
515
515
  children: [
516
- /* @__PURE__ */ i("nav", { className: "container-wide flex h-16 items-center justify-between px-4 sm:px-6 lg:px-8", "aria-label": "Main", children: [
516
+ /* @__PURE__ */ a("nav", { className: "container-wide flex h-16 items-center justify-between px-4 sm:px-6 lg:px-8", "aria-label": "Main", children: [
517
517
  /* @__PURE__ */ e("a", { href: "/", className: "font-display text-lg font-bold text-primary-foreground", children: t }),
518
- /* @__PURE__ */ i("ul", { className: "hidden items-center gap-1 md:flex", children: [
519
- n.map((u) => /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(
518
+ /* @__PURE__ */ a("ul", { className: "hidden items-center gap-1 md:flex", children: [
519
+ r.map((m) => /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(
520
520
  "a",
521
521
  {
522
- href: u.href,
522
+ href: m.href,
523
523
  className: "rounded-full px-4 py-2 font-body text-sm text-primary-foreground/80 transition-fast hover:bg-primary-foreground/10 hover:text-primary-foreground",
524
- children: u.label
524
+ children: m.label
525
525
  }
526
- ) }, u.href)),
527
- r && /* @__PURE__ */ e("li", { className: "ml-4", children: /* @__PURE__ */ e(b, { size: "sm", className: "bg-primary-foreground text-primary hover:bg-primary-foreground/90", asChild: !0, children: /* @__PURE__ */ e("a", { href: o, children: r }) }) })
526
+ ) }, m.href)),
527
+ i && /* @__PURE__ */ e("li", { className: "ml-4", children: /* @__PURE__ */ e(v, { size: "sm", className: "bg-primary-foreground text-primary hover:bg-primary-foreground/90", asChild: !0, children: /* @__PURE__ */ e("a", { href: o, children: i }) }) })
528
528
  ] }),
529
529
  /* @__PURE__ */ e(
530
530
  "button",
531
531
  {
532
532
  className: "md:hidden rounded-full p-2 text-primary-foreground/80 hover:bg-primary-foreground/10",
533
- onClick: () => f(!d),
533
+ onClick: () => u(!l),
534
534
  "aria-label": "Menu",
535
- children: d ? /* @__PURE__ */ e(ee, { size: 20 }) : /* @__PURE__ */ e(re, { size: 20 })
535
+ children: l ? /* @__PURE__ */ e(oe, { size: 20 }) : /* @__PURE__ */ e(se, { size: 20 })
536
536
  }
537
537
  )
538
538
  ] }),
539
- d && /* @__PURE__ */ e("div", { className: "border-t border-primary-foreground/20 bg-primary md:hidden", children: /* @__PURE__ */ i("ul", { className: "container-wide space-y-1 px-4 py-4", children: [
540
- n.map((u) => /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(
539
+ l && /* @__PURE__ */ e("div", { className: "border-t border-primary-foreground/20 bg-primary md:hidden", children: /* @__PURE__ */ a("ul", { className: "container-wide space-y-1 px-4 py-4", children: [
540
+ r.map((m) => /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(
541
541
  "a",
542
542
  {
543
- href: u.href,
543
+ href: m.href,
544
544
  className: "block rounded-xl px-4 py-2 font-body text-sm text-primary-foreground/80 transition-fast hover:bg-primary-foreground/10 hover:text-primary-foreground",
545
- onClick: () => f(!1),
546
- children: u.label
545
+ onClick: () => u(!1),
546
+ children: m.label
547
547
  }
548
- ) }, u.href)),
549
- r && /* @__PURE__ */ e("li", { className: "pt-2", children: /* @__PURE__ */ e(b, { size: "sm", className: "w-full bg-primary-foreground text-primary hover:bg-primary-foreground/90", asChild: !0, children: /* @__PURE__ */ e("a", { href: o, children: r }) }) })
548
+ ) }, m.href)),
549
+ i && /* @__PURE__ */ e("li", { className: "pt-2", children: /* @__PURE__ */ e(v, { size: "sm", className: "w-full bg-primary-foreground text-primary hover:bg-primary-foreground/90", asChild: !0, children: /* @__PURE__ */ e("a", { href: o, children: i }) }) })
550
550
  ] }) })
551
551
  ]
552
552
  }
553
553
  );
554
- }, He = ({
554
+ }, qe = ({
555
555
  brand: t,
556
- columns: n,
557
- copyright: r,
556
+ columns: r,
557
+ copyright: i,
558
558
  className: o,
559
559
  ...s
560
- }) => /* @__PURE__ */ e("footer", { className: l("border-t border-border bg-muted section-padding", o), ...s, children: /* @__PURE__ */ i("div", { className: "container-wide", children: [
561
- /* @__PURE__ */ i("div", { className: "grid gap-8 sm:grid-cols-2 lg:grid-cols-4", children: [
562
- /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(m, { variant: "h5", children: t }) }),
563
- n.map((a) => /* @__PURE__ */ i("div", { children: [
564
- /* @__PURE__ */ e(m, { variant: "overline", className: "mb-4", children: a.heading }),
565
- /* @__PURE__ */ e("ul", { className: "space-y-2", children: a.links.map((d) => /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(
560
+ }) => /* @__PURE__ */ e("footer", { className: c("border-t border-border bg-muted section-padding", o), ...s, children: /* @__PURE__ */ a("div", { className: "container-wide", children: [
561
+ /* @__PURE__ */ a("div", { className: "grid gap-8 sm:grid-cols-2 lg:grid-cols-4", children: [
562
+ /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(g, { variant: "h5", children: t }) }),
563
+ r.map((n) => /* @__PURE__ */ a("div", { children: [
564
+ /* @__PURE__ */ e(g, { variant: "overline", className: "mb-4", children: n.heading }),
565
+ /* @__PURE__ */ e("ul", { className: "space-y-2", children: n.links.map((l) => /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(
566
566
  "a",
567
567
  {
568
- href: d.href,
568
+ href: l.href,
569
569
  className: "font-body text-sm text-muted-foreground transition-fast hover:text-foreground",
570
- children: d.label
570
+ children: l.label
571
571
  }
572
- ) }, d.href)) })
573
- ] }, a.heading))
572
+ ) }, l.href)) })
573
+ ] }, n.heading))
574
574
  ] }),
575
- r && /* @__PURE__ */ e("div", { className: "mt-12 border-t border-border pt-6", children: /* @__PURE__ */ e(m, { variant: "caption", children: r }) })
576
- ] }) }), fe = V.forwardRef(
577
- ({ className: t, onSearch: n, ...r }, o) => /* @__PURE__ */ i("div", { className: l("relative", t), children: [
578
- /* @__PURE__ */ e(te, { className: "absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" }),
575
+ i && /* @__PURE__ */ e("div", { className: "mt-12 border-t border-border pt-6", children: /* @__PURE__ */ e(g, { variant: "caption", children: i }) })
576
+ ] }) }), ve = V.forwardRef(
577
+ ({ className: t, onSearch: r, ...i }, o) => /* @__PURE__ */ a("div", { className: c("relative", t), children: [
578
+ /* @__PURE__ */ e(le, { className: "absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" }),
579
579
  /* @__PURE__ */ e(
580
- z,
580
+ A,
581
581
  {
582
582
  ref: o,
583
583
  className: "pl-10",
584
584
  placeholder: "Suchen...",
585
- onChange: (s) => n == null ? void 0 : n(s.target.value),
586
- ...r
585
+ onChange: (s) => r == null ? void 0 : r(s.target.value),
586
+ ...i
587
587
  }
588
588
  )
589
589
  ] })
590
590
  );
591
- fe.displayName = "SearchBar";
592
- const Re = ({ items: t, className: n, ...r }) => {
591
+ ve.displayName = "SearchBar";
592
+ const Ze = ({ items: t, className: r, ...i }) => {
593
593
  const o = {
594
594
  "@context": "https://schema.org",
595
595
  "@type": "BreadcrumbList",
596
- itemListElement: t.map((s, a) => ({
596
+ itemListElement: t.map((s, n) => ({
597
597
  "@type": "ListItem",
598
- position: a + 1,
598
+ position: n + 1,
599
599
  name: s.label,
600
600
  ...s.href ? { item: s.href } : {}
601
601
  }))
602
602
  };
603
- return /* @__PURE__ */ i("nav", { "aria-label": "Breadcrumb", className: l("font-body text-sm", n), ...r, children: [
604
- /* @__PURE__ */ e("ol", { className: "flex items-center gap-1", children: t.map((s, a) => /* @__PURE__ */ i("li", { className: "flex items-center gap-1", children: [
605
- a > 0 && /* @__PURE__ */ e(ae, { className: "h-3 w-3 text-muted-foreground" }),
606
- s.href && a < t.length - 1 ? /* @__PURE__ */ e("a", { href: s.href, className: "text-muted-foreground transition-fast hover:text-foreground", children: s.label }) : /* @__PURE__ */ e("span", { className: "text-foreground font-medium", children: s.label })
607
- ] }, a)) }),
603
+ return /* @__PURE__ */ a("nav", { "aria-label": "Breadcrumb", className: c("font-body text-sm", r), ...i, children: [
604
+ /* @__PURE__ */ e("ol", { className: "flex items-center gap-1", children: t.map((s, n) => /* @__PURE__ */ a("li", { className: "flex items-center gap-1", children: [
605
+ n > 0 && /* @__PURE__ */ e(de, { className: "h-3 w-3 text-muted-foreground" }),
606
+ s.href && n < t.length - 1 ? /* @__PURE__ */ e("a", { href: s.href, className: "text-muted-foreground transition-fast hover:text-foreground", children: s.label }) : /* @__PURE__ */ e("span", { className: "text-foreground font-medium", children: s.label })
607
+ ] }, n)) }),
608
608
  /* @__PURE__ */ e(
609
609
  "script",
610
610
  {
@@ -613,7 +613,773 @@ const Re = ({ items: t, className: n, ...r }) => {
613
613
  }
614
614
  )
615
615
  ] });
616
- }, ge = [
616
+ }, Ne = ({
617
+ className: t,
618
+ color: r = "#1C449B"
619
+ }) => /* @__PURE__ */ e(
620
+ "svg",
621
+ {
622
+ className: t,
623
+ width: "14",
624
+ height: "10",
625
+ viewBox: "0 0 14 10",
626
+ fill: "none",
627
+ style: { flexShrink: 0 },
628
+ children: /* @__PURE__ */ e(
629
+ "path",
630
+ {
631
+ d: "M1 5L5 9L13 1",
632
+ stroke: r,
633
+ strokeWidth: "2.5",
634
+ strokeLinecap: "round",
635
+ strokeLinejoin: "round"
636
+ }
637
+ )
638
+ }
639
+ ), J = ({
640
+ className: t,
641
+ color: r = "#5637F2"
642
+ }) => /* @__PURE__ */ e("div", { className: t, style: { height: 14.737, width: 18, position: "relative" }, children: /* @__PURE__ */ e(
643
+ "svg",
644
+ {
645
+ className: "absolute block",
646
+ style: { width: "100%", height: "100%" },
647
+ fill: "none",
648
+ preserveAspectRatio: "none",
649
+ viewBox: "0 0 18 14.7368",
650
+ children: /* @__PURE__ */ e(
651
+ "path",
652
+ {
653
+ clipRule: "evenodd",
654
+ d: "M12.6 5.98684L9 0L5.4 5.98684L0 1.37956L2.7755 14.7368H15.2741L18 1.37956L12.6 5.98684Z",
655
+ fill: r,
656
+ fillRule: "evenodd"
657
+ }
658
+ )
659
+ }
660
+ ) }), we = [
661
+ {
662
+ id: "premium-s",
663
+ storage: "5 GB",
664
+ monthlyPrice: 3.99,
665
+ yearlyPrice: 2.99,
666
+ features: ["+ 15 GB Cloud-Speicher"],
667
+ badge: "Empfehlung",
668
+ highlight: !0,
669
+ ctaLabel: "1 Monat gratis testen",
670
+ ctaHref: "#"
671
+ },
672
+ {
673
+ id: "premium-m",
674
+ storage: "20 GB",
675
+ monthlyPrice: 7.99,
676
+ yearlyPrice: 5.99,
677
+ features: ["+ 200 GB Cloud"],
678
+ ctaLabel: "1 Monat gratis testen",
679
+ ctaHref: "#"
680
+ },
681
+ {
682
+ id: "premium-l",
683
+ storage: "50 GB",
684
+ monthlyPrice: 14.99,
685
+ yearlyPrice: 11.99,
686
+ features: ["+ 1000 GB Cloud"],
687
+ ctaLabel: "1 Monat gratis testen",
688
+ ctaHref: "#"
689
+ }
690
+ ];
691
+ function ke(t) {
692
+ return t.split("-").map((r) => r.charAt(0).toUpperCase() + r.slice(1)).join(" ");
693
+ }
694
+ const Pe = ({
695
+ heading: t = "Neue Premium-Tarife",
696
+ subheading: r = "Mehr Speicher als je zuvor – nie wieder Sorgen um vollen Speicher!",
697
+ sectionLabel: i = "Ihre Premium-Upgrade Optionen:",
698
+ plans: o = we,
699
+ icon: s,
700
+ storageLabel: n = "E-Mail",
701
+ className: l,
702
+ ...u
703
+ }) => /* @__PURE__ */ e("section", { className: c("section-padding", l), ...u, children: /* @__PURE__ */ a("div", { className: "container-narrow text-center", children: [
704
+ s && /* @__PURE__ */ e("div", { className: "flex justify-center mb-4", children: s }),
705
+ t && /* @__PURE__ */ e(
706
+ "h2",
707
+ {
708
+ className: "mb-2",
709
+ style: {
710
+ fontFamily: "'Roboto', sans-serif",
711
+ fontWeight: 500,
712
+ fontSize: 20,
713
+ lineHeight: 1.5
714
+ },
715
+ children: t
716
+ }
717
+ ),
718
+ r && /* @__PURE__ */ e(
719
+ "p",
720
+ {
721
+ className: "mb-10",
722
+ style: {
723
+ fontFamily: "'Roboto', sans-serif",
724
+ fontWeight: 400,
725
+ fontSize: 16,
726
+ lineHeight: 1.5,
727
+ color: "#717171"
728
+ },
729
+ children: r
730
+ }
731
+ ),
732
+ i && /* @__PURE__ */ e(
733
+ "h4",
734
+ {
735
+ className: "text-left mb-5",
736
+ style: {
737
+ fontFamily: "'Roboto', sans-serif",
738
+ fontWeight: 500,
739
+ fontSize: 16,
740
+ lineHeight: 1.5,
741
+ color: "#333"
742
+ },
743
+ children: i
744
+ }
745
+ ),
746
+ /* @__PURE__ */ e(
747
+ "div",
748
+ {
749
+ className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3",
750
+ style: { gap: 20 },
751
+ children: o.map((m) => {
752
+ const h = m.highlight, b = ke(m.id), N = m.features.find((w) => w.startsWith("+"));
753
+ return /* @__PURE__ */ a(
754
+ "div",
755
+ {
756
+ className: "relative flex flex-col items-end",
757
+ style: { gap: 10 },
758
+ children: [
759
+ /* @__PURE__ */ a(
760
+ "div",
761
+ {
762
+ className: "relative text-left flex flex-col w-full rounded-[16px]",
763
+ style: {
764
+ backgroundColor: h ? "rgba(255,255,255,0.08)" : "white",
765
+ padding: "24px 30px",
766
+ gap: 20
767
+ },
768
+ children: [
769
+ /* @__PURE__ */ e(
770
+ "div",
771
+ {
772
+ "aria-hidden": "true",
773
+ className: "absolute inset-0 pointer-events-none rounded-[16px]",
774
+ style: {
775
+ borderStyle: "solid",
776
+ borderWidth: h ? 4 : 1,
777
+ borderColor: h ? "#e53e56" : "#a6a6a6"
778
+ }
779
+ }
780
+ ),
781
+ /* @__PURE__ */ e(
782
+ "div",
783
+ {
784
+ className: "flex items-center justify-center relative shrink-0",
785
+ style: { padding: "0 4px", marginBottom: 4 },
786
+ children: /* @__PURE__ */ e(
787
+ "p",
788
+ {
789
+ className: "whitespace-nowrap",
790
+ style: {
791
+ fontFamily: "'Roboto', sans-serif",
792
+ fontWeight: 500,
793
+ fontSize: 16,
794
+ lineHeight: "24px",
795
+ color: "#333",
796
+ textAlign: "center"
797
+ },
798
+ children: b
799
+ }
800
+ )
801
+ }
802
+ ),
803
+ /* @__PURE__ */ a(
804
+ "div",
805
+ {
806
+ className: "flex flex-col items-start",
807
+ style: { gap: 10 },
808
+ children: [
809
+ /* @__PURE__ */ a(
810
+ "p",
811
+ {
812
+ style: {
813
+ fontFamily: "'Roboto', sans-serif",
814
+ fontWeight: 500,
815
+ color: "#333",
816
+ lineHeight: 0,
817
+ fontSize: 0
818
+ },
819
+ children: [
820
+ /* @__PURE__ */ a("span", { style: { lineHeight: "56px", fontSize: 56 }, children: [
821
+ m.storage,
822
+ " "
823
+ ] }),
824
+ /* @__PURE__ */ e("span", { style: { lineHeight: "56px", fontSize: 36 }, children: n })
825
+ ]
826
+ }
827
+ ),
828
+ N && /* @__PURE__ */ e(
829
+ "p",
830
+ {
831
+ style: {
832
+ fontFamily: "'Roboto', sans-serif",
833
+ fontWeight: 400,
834
+ fontSize: 24,
835
+ lineHeight: "32px",
836
+ color: "#717171"
837
+ },
838
+ children: N
839
+ }
840
+ )
841
+ ]
842
+ }
843
+ ),
844
+ /* @__PURE__ */ a(
845
+ "p",
846
+ {
847
+ className: "whitespace-nowrap",
848
+ style: {
849
+ fontFamily: "'Roboto', sans-serif",
850
+ fontWeight: 400,
851
+ fontSize: 24,
852
+ lineHeight: "32px",
853
+ color: "#333"
854
+ },
855
+ children: [
856
+ m.monthlyPrice.toFixed(2).replace(".", ","),
857
+ " €/Monat"
858
+ ]
859
+ }
860
+ ),
861
+ m.ctaHref && /* @__PURE__ */ a(
862
+ "a",
863
+ {
864
+ href: m.ctaHref,
865
+ className: "relative mt-auto inline-grid shrink-0",
866
+ style: {
867
+ gridTemplateColumns: "max-content",
868
+ gridTemplateRows: "max-content",
869
+ placeItems: "start"
870
+ },
871
+ children: [
872
+ /* @__PURE__ */ e(
873
+ "div",
874
+ {
875
+ className: "rounded-[100px]",
876
+ style: {
877
+ gridColumn: 1,
878
+ gridRow: 1,
879
+ width: 220,
880
+ height: 40,
881
+ backgroundColor: h ? "#5637f2" : "transparent",
882
+ border: h ? "none" : "1px solid #5637f2"
883
+ }
884
+ }
885
+ ),
886
+ /* @__PURE__ */ e(
887
+ "div",
888
+ {
889
+ style: {
890
+ gridColumn: 1,
891
+ gridRow: 1,
892
+ marginLeft: h ? 44 : 47,
893
+ marginTop: 10
894
+ },
895
+ children: /* @__PURE__ */ e(
896
+ "p",
897
+ {
898
+ className: "whitespace-nowrap",
899
+ style: {
900
+ fontFamily: "'Roboto', sans-serif",
901
+ fontWeight: 500,
902
+ fontSize: 16,
903
+ lineHeight: "normal",
904
+ height: 25,
905
+ color: h ? "white" : "#5637f2"
906
+ },
907
+ children: m.ctaLabel || "Auswählen"
908
+ }
909
+ )
910
+ }
911
+ ),
912
+ /* @__PURE__ */ e(
913
+ "div",
914
+ {
915
+ style: {
916
+ gridColumn: 1,
917
+ gridRow: 1,
918
+ marginLeft: h ? 18 : 21,
919
+ marginTop: 11.7
920
+ },
921
+ children: /* @__PURE__ */ e(
922
+ J,
923
+ {
924
+ color: h ? "white" : "#5637F2"
925
+ }
926
+ )
927
+ }
928
+ )
929
+ ]
930
+ }
931
+ )
932
+ ]
933
+ }
934
+ ),
935
+ m.badge && /* @__PURE__ */ e(
936
+ "div",
937
+ {
938
+ className: "absolute top-0 right-0 flex items-center justify-center",
939
+ style: {
940
+ backgroundColor: "#e53e56",
941
+ height: 24,
942
+ width: 191,
943
+ padding: "4px 25px",
944
+ borderRadius: "0 12px 0 12px",
945
+ fontFamily: "'Roboto', sans-serif",
946
+ fontWeight: 500,
947
+ fontSize: 14,
948
+ color: "white",
949
+ whiteSpace: "nowrap"
950
+ },
951
+ children: m.badge
952
+ }
953
+ )
954
+ ]
955
+ },
956
+ m.id
957
+ );
958
+ })
959
+ }
960
+ )
961
+ ] }) }), Ce = [
962
+ {
963
+ id: "premium-s",
964
+ storage: "5 GB",
965
+ monthlyPrice: 3.99,
966
+ yearlyPrice: 2.99,
967
+ features: [
968
+ "+ 15 GB Cloud",
969
+ "50 MB Anhänge",
970
+ "inkl. 10 E-Mail-Adressen",
971
+ "Werbefreies Postfach",
972
+ "Nutzung aller Premium-Funktionen"
973
+ ],
974
+ badge: "Preis-Leistung-Sieger",
975
+ highlight: !0,
976
+ ctaLabel: "1 Monat gratis testen",
977
+ ctaHref: "#"
978
+ },
979
+ {
980
+ id: "premium-m",
981
+ storage: "20 GB",
982
+ monthlyPrice: 7.99,
983
+ yearlyPrice: 5.99,
984
+ features: [
985
+ "+ 200 GB Cloud",
986
+ "100 MB Anhänge",
987
+ "inkl. 50 E-Mail-Adressen",
988
+ "Werbefreies Postfach",
989
+ "Nutzung aller Premium-Funktionen"
990
+ ],
991
+ ctaLabel: "1 Monat gratis testen",
992
+ ctaHref: "#"
993
+ },
994
+ {
995
+ id: "premium-l",
996
+ storage: "50 GB",
997
+ monthlyPrice: 14.99,
998
+ yearlyPrice: 11.99,
999
+ features: [
1000
+ "+ 1 TB Cloud",
1001
+ "50 MB Anhänge",
1002
+ "inkl. 10 E-Mail-Adressen",
1003
+ "Werbefreies Postfach",
1004
+ "Nutzung aller Premium-Funktionen"
1005
+ ],
1006
+ ctaLabel: "1 Monat gratis testen",
1007
+ ctaHref: "#"
1008
+ }
1009
+ ];
1010
+ function ze(t) {
1011
+ return t.find((r) => r.startsWith("+"));
1012
+ }
1013
+ function Se(t) {
1014
+ return t.filter((r) => !r.startsWith("+"));
1015
+ }
1016
+ function He(t) {
1017
+ return t.split("-").map((r) => r.charAt(0).toUpperCase() + r.slice(1)).join(" ");
1018
+ }
1019
+ const Fe = ({
1020
+ heading: t,
1021
+ subheading: r,
1022
+ sectionLabel: i,
1023
+ plans: o = Ce,
1024
+ expandAll: s = !1,
1025
+ defaultOpenId: n,
1026
+ icon: l,
1027
+ storageLabel: u = "E-Mail",
1028
+ className: m,
1029
+ ...h
1030
+ }) => {
1031
+ var C, P;
1032
+ const b = ((C = o.find((p) => p.highlight)) == null ? void 0 : C.id) ?? ((P = o[0]) == null ? void 0 : P.id), [N, w] = k(
1033
+ n ?? b
1034
+ ), f = (p) => {
1035
+ s || w((x) => x === p ? null : p);
1036
+ };
1037
+ return /* @__PURE__ */ e("section", { className: c("section-padding", m), ...h, children: /* @__PURE__ */ a("div", { className: "container-narrow", children: [
1038
+ l && /* @__PURE__ */ e("div", { className: "flex justify-center mb-4", children: l }),
1039
+ t && /* @__PURE__ */ e(
1040
+ "h2",
1041
+ {
1042
+ className: "mb-2 text-center",
1043
+ style: {
1044
+ fontFamily: "'Roboto', sans-serif",
1045
+ fontWeight: 700,
1046
+ fontSize: 32,
1047
+ lineHeight: 1.3,
1048
+ color: "#333"
1049
+ },
1050
+ children: t
1051
+ }
1052
+ ),
1053
+ r && /* @__PURE__ */ e(
1054
+ "p",
1055
+ {
1056
+ className: "mb-10 text-center",
1057
+ style: {
1058
+ fontFamily: "'Roboto', sans-serif",
1059
+ fontWeight: 400,
1060
+ fontSize: 16,
1061
+ lineHeight: 1.5,
1062
+ color: "#717171"
1063
+ },
1064
+ children: r
1065
+ }
1066
+ ),
1067
+ i && /* @__PURE__ */ e(
1068
+ "h4",
1069
+ {
1070
+ className: "text-left mb-5",
1071
+ style: {
1072
+ fontFamily: "'Roboto', sans-serif",
1073
+ fontWeight: 500,
1074
+ fontSize: 16,
1075
+ lineHeight: 1.5,
1076
+ color: "#333"
1077
+ },
1078
+ children: i
1079
+ }
1080
+ ),
1081
+ /* @__PURE__ */ e("div", { className: "flex flex-col", style: { gap: 20 }, children: o.map((p) => {
1082
+ const x = p.highlight, M = He(p.id), F = ze(p.features), R = Se(p.features), j = p.storage;
1083
+ return /* @__PURE__ */ a(
1084
+ "div",
1085
+ {
1086
+ className: "flex flex-col items-end relative shrink-0 w-full",
1087
+ style: {
1088
+ gap: 10,
1089
+ ...s ? {} : { cursor: "pointer" }
1090
+ },
1091
+ onClick: () => f(p.id),
1092
+ children: [
1093
+ /* @__PURE__ */ a(
1094
+ "div",
1095
+ {
1096
+ className: "relative flex flex-col w-full rounded-[16px]",
1097
+ style: {
1098
+ backgroundColor: x ? "rgba(255,255,255,0.08)" : "white",
1099
+ padding: "24px 30px",
1100
+ gap: 20
1101
+ },
1102
+ children: [
1103
+ x ? (
1104
+ /* Gradient border for highlighted card */
1105
+ /* @__PURE__ */ e(
1106
+ "div",
1107
+ {
1108
+ "aria-hidden": "true",
1109
+ className: "absolute inset-0 pointer-events-none rounded-[16px]",
1110
+ style: {
1111
+ padding: 4,
1112
+ background: "linear-gradient(to bottom, #e53e56, #5637f2)",
1113
+ WebkitMask: "linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)",
1114
+ WebkitMaskComposite: "xor",
1115
+ maskComposite: "exclude"
1116
+ }
1117
+ }
1118
+ )
1119
+ ) : (
1120
+ /* Solid border for normal card */
1121
+ /* @__PURE__ */ e(
1122
+ "div",
1123
+ {
1124
+ "aria-hidden": "true",
1125
+ className: "absolute inset-0 pointer-events-none rounded-[16px]",
1126
+ style: {
1127
+ borderStyle: "solid",
1128
+ borderWidth: 1,
1129
+ borderColor: "#a6a6a6"
1130
+ }
1131
+ }
1132
+ )
1133
+ ),
1134
+ /* @__PURE__ */ a("div", { className: "flex items-end justify-between relative shrink-0 w-full", children: [
1135
+ /* @__PURE__ */ a(
1136
+ "div",
1137
+ {
1138
+ className: "flex flex-col items-start relative shrink-0",
1139
+ style: { width: 299 },
1140
+ children: [
1141
+ /* @__PURE__ */ e(
1142
+ "div",
1143
+ {
1144
+ className: "flex items-center relative shrink-0",
1145
+ style: { padding: "0 4px", marginBottom: 4 },
1146
+ children: /* @__PURE__ */ e(
1147
+ "p",
1148
+ {
1149
+ className: "whitespace-nowrap",
1150
+ style: {
1151
+ fontFamily: "'Roboto', sans-serif",
1152
+ fontWeight: 500,
1153
+ fontSize: 16,
1154
+ lineHeight: "24px",
1155
+ color: "#333"
1156
+ },
1157
+ children: M
1158
+ }
1159
+ )
1160
+ }
1161
+ ),
1162
+ /* @__PURE__ */ a(
1163
+ "div",
1164
+ {
1165
+ className: "flex flex-col items-start relative shrink-0 w-full",
1166
+ style: { gap: 10 },
1167
+ children: [
1168
+ /* @__PURE__ */ a(
1169
+ "p",
1170
+ {
1171
+ style: {
1172
+ fontFamily: "'Roboto', sans-serif",
1173
+ fontWeight: 500,
1174
+ color: "#333",
1175
+ lineHeight: 0,
1176
+ fontSize: 0
1177
+ },
1178
+ children: [
1179
+ /* @__PURE__ */ a("span", { style: { lineHeight: "56px", fontSize: 56 }, children: [
1180
+ j,
1181
+ " "
1182
+ ] }),
1183
+ /* @__PURE__ */ e("span", { style: { lineHeight: "56px", fontSize: 36 }, children: u })
1184
+ ]
1185
+ }
1186
+ ),
1187
+ F && /* @__PURE__ */ e(
1188
+ "p",
1189
+ {
1190
+ className: "whitespace-nowrap",
1191
+ style: {
1192
+ fontFamily: "'Roboto', sans-serif",
1193
+ fontWeight: 400,
1194
+ fontSize: 24,
1195
+ lineHeight: "32px",
1196
+ color: "#717171"
1197
+ },
1198
+ children: F
1199
+ }
1200
+ )
1201
+ ]
1202
+ }
1203
+ )
1204
+ ]
1205
+ }
1206
+ ),
1207
+ /* @__PURE__ */ a(
1208
+ "div",
1209
+ {
1210
+ className: "flex flex-col items-end relative shrink-0",
1211
+ style: {
1212
+ gap: x ? 35 : 30
1213
+ },
1214
+ children: [
1215
+ /* @__PURE__ */ a(
1216
+ "p",
1217
+ {
1218
+ className: "whitespace-nowrap",
1219
+ style: {
1220
+ fontFamily: "'Roboto', sans-serif",
1221
+ fontWeight: 400,
1222
+ fontSize: 24,
1223
+ lineHeight: "32px",
1224
+ color: "#333"
1225
+ },
1226
+ children: [
1227
+ p.monthlyPrice.toFixed(2).replace(".", ","),
1228
+ " €/Monat"
1229
+ ]
1230
+ }
1231
+ ),
1232
+ p.ctaHref && /* @__PURE__ */ a(
1233
+ "a",
1234
+ {
1235
+ href: p.ctaHref,
1236
+ onClick: (d) => d.stopPropagation(),
1237
+ className: "relative inline-grid shrink-0",
1238
+ style: {
1239
+ gridTemplateColumns: "max-content",
1240
+ gridTemplateRows: "max-content",
1241
+ placeItems: "start"
1242
+ },
1243
+ children: [
1244
+ /* @__PURE__ */ e(
1245
+ "div",
1246
+ {
1247
+ className: "rounded-[100px]",
1248
+ style: {
1249
+ gridColumn: 1,
1250
+ gridRow: 1,
1251
+ width: 220,
1252
+ height: 40,
1253
+ backgroundColor: x ? "#5637f2" : "transparent",
1254
+ border: x ? "none" : "1px solid #5637f2"
1255
+ }
1256
+ }
1257
+ ),
1258
+ /* @__PURE__ */ e(
1259
+ "div",
1260
+ {
1261
+ style: {
1262
+ gridColumn: 1,
1263
+ gridRow: 1,
1264
+ marginLeft: x ? 44 : 47,
1265
+ marginTop: 10
1266
+ },
1267
+ children: /* @__PURE__ */ e(
1268
+ "p",
1269
+ {
1270
+ className: "whitespace-nowrap",
1271
+ style: {
1272
+ fontFamily: "'Roboto', sans-serif",
1273
+ fontWeight: 500,
1274
+ fontSize: 16,
1275
+ lineHeight: "normal",
1276
+ height: 25,
1277
+ color: x ? "white" : "#5637f2",
1278
+ textAlign: "center"
1279
+ },
1280
+ children: p.ctaLabel || "Auswählen"
1281
+ }
1282
+ )
1283
+ }
1284
+ ),
1285
+ /* @__PURE__ */ e(
1286
+ "div",
1287
+ {
1288
+ style: {
1289
+ gridColumn: 1,
1290
+ gridRow: 1,
1291
+ marginLeft: x ? 18 : 21,
1292
+ marginTop: 11.7
1293
+ },
1294
+ children: /* @__PURE__ */ e(
1295
+ J,
1296
+ {
1297
+ color: x ? "white" : "#5637F2"
1298
+ }
1299
+ )
1300
+ }
1301
+ )
1302
+ ]
1303
+ }
1304
+ )
1305
+ ]
1306
+ }
1307
+ )
1308
+ ] }),
1309
+ R.length > 0 && /* @__PURE__ */ e(
1310
+ "div",
1311
+ {
1312
+ className: "grid grid-cols-2",
1313
+ style: { gap: "8px 60px" },
1314
+ children: R.map((d, y) => /* @__PURE__ */ a(
1315
+ "div",
1316
+ {
1317
+ className: "flex items-center",
1318
+ style: { gap: 8 },
1319
+ children: [
1320
+ /* @__PURE__ */ e(Ne, {}),
1321
+ /* @__PURE__ */ e(
1322
+ "span",
1323
+ {
1324
+ style: {
1325
+ fontFamily: "'Roboto', sans-serif",
1326
+ fontWeight: 400,
1327
+ fontSize: 16,
1328
+ lineHeight: "24px",
1329
+ color: "#333"
1330
+ },
1331
+ children: d.includes("Premium-Funktionen") ? /* @__PURE__ */ a(X, { children: [
1332
+ d.replace("Premium-Funktionen", ""),
1333
+ /* @__PURE__ */ e(
1334
+ "span",
1335
+ {
1336
+ className: "underline",
1337
+ style: {
1338
+ color: "#1c449b",
1339
+ textDecorationSkipInk: "none"
1340
+ },
1341
+ children: "Premium-Funktionen"
1342
+ }
1343
+ )
1344
+ ] }) : d
1345
+ }
1346
+ )
1347
+ ]
1348
+ },
1349
+ y
1350
+ ))
1351
+ }
1352
+ )
1353
+ ]
1354
+ }
1355
+ ),
1356
+ p.badge && /* @__PURE__ */ e(
1357
+ "div",
1358
+ {
1359
+ className: "absolute top-0 right-0 flex items-center justify-center",
1360
+ style: {
1361
+ backgroundColor: "#e53e56",
1362
+ height: 24,
1363
+ width: 191,
1364
+ padding: "4px 25px",
1365
+ borderRadius: "0 12px 0 12px",
1366
+ fontFamily: "'Roboto', sans-serif",
1367
+ fontWeight: 500,
1368
+ fontSize: 14,
1369
+ color: "white",
1370
+ whiteSpace: "nowrap",
1371
+ textAlign: "center"
1372
+ },
1373
+ children: p.badge
1374
+ }
1375
+ )
1376
+ ]
1377
+ },
1378
+ p.id
1379
+ );
1380
+ }) })
1381
+ ] }) });
1382
+ }, Re = [
617
1383
  {
618
1384
  id: "50gb",
619
1385
  storage: "50 GB",
@@ -687,32 +1453,66 @@ const Re = ({ items: t, className: n, ...r }) => {
687
1453
  ctaLabel: "Zum Angebot",
688
1454
  ctaHref: "#"
689
1455
  }
690
- ], Se = ({
1456
+ ], Je = ({
691
1457
  heading: t = "Cloud-Speicher erweitern",
692
- subheading: n = "Wählen Sie den passenden Tarif für Ihre Bedürfnisse",
693
- plans: r = ge,
1458
+ subheading: r = "Wählen Sie den passenden Tarif für Ihre Bedürfnisse",
1459
+ plans: i = Re,
694
1460
  defaultOpenId: o = "100gb",
695
1461
  defaultBilling: s = "yearly",
696
- className: a,
697
- ...d
1462
+ variant: n = "accordion",
1463
+ sectionLabel: l,
1464
+ icon: u,
1465
+ storageLabel: m,
1466
+ className: h,
1467
+ ...b
698
1468
  }) => {
699
- const [f, u] = v(o), [p, g] = v(s), [y, N] = v(!1), h = r.some((c) => c.hidden), j = y ? r : r.filter((c) => !c.hidden), A = (c) => {
700
- u((x) => x === c ? null : c);
701
- }, F = (c) => p === "yearly" ? c.yearlyPrice : c.monthlyPrice, O = (c) => {
702
- const x = c.monthlyPrice - c.yearlyPrice;
703
- return x > 0 ? Math.round(x / c.monthlyPrice * 100) : 0;
1469
+ const [N, w] = k(o), [f, C] = k(s), [P, p] = k(!1);
1470
+ if (n === "cards")
1471
+ return /* @__PURE__ */ e(
1472
+ Pe,
1473
+ {
1474
+ heading: t,
1475
+ subheading: r,
1476
+ sectionLabel: l,
1477
+ plans: i,
1478
+ icon: u,
1479
+ className: h,
1480
+ ...b
1481
+ }
1482
+ );
1483
+ if (n === "stacked" || n === "list")
1484
+ return /* @__PURE__ */ e(
1485
+ Fe,
1486
+ {
1487
+ heading: t,
1488
+ subheading: r,
1489
+ sectionLabel: l,
1490
+ plans: i,
1491
+ icon: u,
1492
+ expandAll: n === "list",
1493
+ defaultOpenId: o,
1494
+ storageLabel: m,
1495
+ className: h,
1496
+ ...b
1497
+ }
1498
+ );
1499
+ const x = i.some((d) => d.hidden), M = P ? i : i.filter((d) => !d.hidden), F = (d) => {
1500
+ w((y) => y === d ? null : d);
1501
+ }, R = (d) => f === "yearly" ? d.yearlyPrice : d.monthlyPrice, j = (d) => {
1502
+ const y = d.monthlyPrice - d.yearlyPrice;
1503
+ return y > 0 ? Math.round(y / d.monthlyPrice * 100) : 0;
704
1504
  };
705
- return /* @__PURE__ */ e("section", { className: l("section-padding", a), ...d, children: /* @__PURE__ */ i("div", { className: "container-narrow", children: [
706
- t && /* @__PURE__ */ e(m, { variant: "h2", className: "mb-2 text-center", children: t }),
707
- n && /* @__PURE__ */ e(m, { variant: "body", tone: "muted", className: "mb-8 text-center", children: n }),
708
- /* @__PURE__ */ e("div", { className: "flex items-center justify-center mb-8", children: /* @__PURE__ */ i("div", { className: "inline-flex rounded-xl border border-border bg-muted p-1 gap-1", children: [
1505
+ return /* @__PURE__ */ e("section", { className: c("section-padding", h), ...b, children: /* @__PURE__ */ a("div", { className: "container-narrow", children: [
1506
+ t && /* @__PURE__ */ e(g, { variant: "h2", className: "mb-2 text-center", children: t }),
1507
+ r && /* @__PURE__ */ e(g, { variant: "body", tone: "muted", className: "mb-8 text-center", children: r }),
1508
+ /* @__PURE__ */ e("div", { className: "flex items-center justify-center mb-8", children: /* @__PURE__ */ a("div", { className: "inline-flex rounded-xl border border-border bg-muted p-1 gap-1", children: [
709
1509
  /* @__PURE__ */ e(
710
1510
  "button",
711
1511
  {
712
- onClick: () => g("monthly"),
713
- className: l(
1512
+ onClick: () => C("monthly"),
1513
+ className: c(
714
1514
  "rounded-lg px-5 py-2.5 font-body text-sm font-medium transition-fast",
715
- p === "monthly" ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"
1515
+ f === "monthly" ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"
716
1516
  ),
717
1517
  children: "Monatlich kündbar"
718
1518
  }
@@ -720,71 +1520,71 @@ const Re = ({ items: t, className: n, ...r }) => {
720
1520
  /* @__PURE__ */ e(
721
1521
  "button",
722
1522
  {
723
- onClick: () => g("yearly"),
724
- className: l(
1523
+ onClick: () => C("yearly"),
1524
+ className: c(
725
1525
  "rounded-lg px-5 py-2.5 font-body text-sm font-medium transition-fast",
726
- p === "yearly" ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"
1526
+ f === "yearly" ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"
727
1527
  ),
728
1528
  children: "12 Monate Laufzeit"
729
1529
  }
730
1530
  )
731
1531
  ] }) }),
732
- /* @__PURE__ */ e("div", { className: "space-y-3", children: j.map((c) => {
733
- const x = f === c.id, G = F(c), D = O(c);
734
- return /* @__PURE__ */ i(
1532
+ /* @__PURE__ */ e("div", { className: "space-y-3", children: M.map((d) => {
1533
+ const y = N === d.id, U = R(d), D = j(d);
1534
+ return /* @__PURE__ */ a(
735
1535
  "div",
736
1536
  {
737
- className: l(
1537
+ className: c(
738
1538
  "rounded-2xl border transition-fast overflow-hidden",
739
- x ? "border-primary bg-card shadow-md ring-1 ring-primary/20" : "border-border bg-card hover:border-primary/40 hover:shadow-sm"
1539
+ y ? "border-primary bg-card shadow-md ring-1 ring-primary/20" : "border-border bg-card hover:border-primary/40 hover:shadow-sm"
740
1540
  ),
741
1541
  children: [
742
- /* @__PURE__ */ i(
1542
+ /* @__PURE__ */ a(
743
1543
  "div",
744
1544
  {
745
1545
  className: "flex items-center gap-4 px-5 py-4 cursor-pointer select-none",
746
- onClick: () => A(c.id),
1546
+ onClick: () => F(d.id),
747
1547
  children: [
748
1548
  /* @__PURE__ */ e(
749
1549
  "div",
750
1550
  {
751
- className: l(
1551
+ className: c(
752
1552
  "flex h-10 w-10 shrink-0 items-center justify-center rounded-xl transition-fast",
753
- x ? "bg-primary text-primary-foreground" : "bg-muted text-muted-foreground"
1553
+ y ? "bg-primary text-primary-foreground" : "bg-muted text-muted-foreground"
754
1554
  ),
755
- children: /* @__PURE__ */ e(ne, { className: "h-5 w-5" })
1555
+ children: /* @__PURE__ */ e(ce, { className: "h-5 w-5" })
756
1556
  }
757
1557
  ),
758
- /* @__PURE__ */ i("div", { className: "flex items-center gap-3 min-w-0", children: [
759
- /* @__PURE__ */ e(m, { variant: "h4", className: "whitespace-nowrap", children: c.storage }),
760
- c.badge && /* @__PURE__ */ i("span", { className: "hidden sm:inline-flex items-center gap-1 rounded-full bg-primary/10 px-2.5 py-0.5 text-xs font-semibold text-primary", children: [
761
- /* @__PURE__ */ e(oe, { className: "h-3 w-3" }),
762
- c.badge
1558
+ /* @__PURE__ */ a("div", { className: "flex items-center gap-3 min-w-0", children: [
1559
+ /* @__PURE__ */ e(g, { variant: "h4", className: "whitespace-nowrap", children: d.storage }),
1560
+ d.badge && /* @__PURE__ */ a("span", { className: "hidden sm:inline-flex items-center gap-1 rounded-full bg-primary/10 px-2.5 py-0.5 text-xs font-semibold text-primary", children: [
1561
+ /* @__PURE__ */ e(me, { className: "h-3 w-3" }),
1562
+ d.badge
763
1563
  ] })
764
1564
  ] }),
765
- /* @__PURE__ */ i("div", { className: "ml-auto flex items-center gap-3", children: [
766
- /* @__PURE__ */ i("div", { className: "text-right", children: [
767
- /* @__PURE__ */ i("span", { className: "font-display text-xl font-bold text-foreground", children: [
768
- G.toFixed(2).replace(".", ","),
1565
+ /* @__PURE__ */ a("div", { className: "ml-auto flex items-center gap-3", children: [
1566
+ /* @__PURE__ */ a("div", { className: "text-right", children: [
1567
+ /* @__PURE__ */ a("span", { className: "font-display text-xl font-bold text-foreground", children: [
1568
+ U.toFixed(2).replace(".", ","),
769
1569
  " €"
770
1570
  ] }),
771
1571
  /* @__PURE__ */ e("span", { className: "text-sm text-muted-foreground", children: "/Monat" })
772
1572
  ] }),
773
- !x && c.ctaHref && /* @__PURE__ */ e(
1573
+ !y && d.ctaHref && /* @__PURE__ */ e(
774
1574
  "a",
775
1575
  {
776
- href: c.ctaHref,
777
- onClick: (H) => H.stopPropagation(),
1576
+ href: d.ctaHref,
1577
+ onClick: (T) => T.stopPropagation(),
778
1578
  className: "hidden sm:inline-flex",
779
- children: /* @__PURE__ */ e(b, { size: "sm", variant: "outline", children: c.ctaLabel || "Auswählen" })
1579
+ children: /* @__PURE__ */ e(v, { size: "sm", variant: "outline", children: d.ctaLabel || "Auswählen" })
780
1580
  }
781
1581
  ),
782
1582
  /* @__PURE__ */ e(
783
- S,
1583
+ I,
784
1584
  {
785
- className: l(
1585
+ className: c(
786
1586
  "h-5 w-5 shrink-0 text-muted-foreground transition-transform duration-200",
787
- x && "rotate-180"
1587
+ y && "rotate-180"
788
1588
  )
789
1589
  }
790
1590
  )
@@ -795,13 +1595,13 @@ const Re = ({ items: t, className: n, ...r }) => {
795
1595
  /* @__PURE__ */ e(
796
1596
  "div",
797
1597
  {
798
- className: l(
1598
+ className: c(
799
1599
  "grid transition-all duration-200 ease-in-out",
800
- x ? "grid-rows-[1fr]" : "grid-rows-[0fr]"
1600
+ y ? "grid-rows-[1fr]" : "grid-rows-[0fr]"
801
1601
  ),
802
- children: /* @__PURE__ */ e("div", { className: "overflow-hidden", children: /* @__PURE__ */ i("div", { className: "px-5 pb-5 pt-1", children: [
803
- p === "monthly" && D > 0 && /* @__PURE__ */ i(
804
- m,
1602
+ children: /* @__PURE__ */ e("div", { className: "overflow-hidden", children: /* @__PURE__ */ a("div", { className: "px-5 pb-5 pt-1", children: [
1603
+ f === "monthly" && D > 0 && /* @__PURE__ */ a(
1604
+ g,
805
1605
  {
806
1606
  variant: "body-sm",
807
1607
  className: "mb-4 text-primary font-medium",
@@ -812,100 +1612,100 @@ const Re = ({ items: t, className: n, ...r }) => {
812
1612
  ]
813
1613
  }
814
1614
  ),
815
- /* @__PURE__ */ e("ul", { className: "grid grid-cols-1 sm:grid-cols-2 gap-2 mb-5", children: c.features.map((H, Z) => /* @__PURE__ */ i(
1615
+ /* @__PURE__ */ e("ul", { className: "grid grid-cols-1 sm:grid-cols-2 gap-2 mb-5", children: d.features.map((T, Q) => /* @__PURE__ */ a(
816
1616
  "li",
817
1617
  {
818
1618
  className: "flex items-start gap-2 font-body text-sm text-muted-foreground",
819
1619
  children: [
820
- /* @__PURE__ */ e(ie, { className: "h-4 w-4 mt-0.5 shrink-0 text-primary" }),
821
- H
1620
+ /* @__PURE__ */ e(he, { className: "h-4 w-4 mt-0.5 shrink-0 text-primary" }),
1621
+ T
822
1622
  ]
823
1623
  },
824
- Z
1624
+ Q
825
1625
  )) }),
826
- c.ctaHref && /* @__PURE__ */ e("a", { href: c.ctaHref, children: /* @__PURE__ */ e(b, { className: "w-full sm:w-auto", size: "lg", children: c.ctaLabel || "Jetzt buchen" }) })
1626
+ d.ctaHref && /* @__PURE__ */ e("a", { href: d.ctaHref, children: /* @__PURE__ */ e(v, { className: "w-full sm:w-auto", size: "lg", children: d.ctaLabel || "Jetzt buchen" }) })
827
1627
  ] }) })
828
1628
  }
829
1629
  )
830
1630
  ]
831
1631
  },
832
- c.id
1632
+ d.id
833
1633
  );
834
1634
  }) }),
835
- h && /* @__PURE__ */ e("div", { className: "flex justify-center mt-4", children: /* @__PURE__ */ i(
836
- b,
1635
+ x && /* @__PURE__ */ e("div", { className: "flex justify-center mt-4", children: /* @__PURE__ */ a(
1636
+ v,
837
1637
  {
838
1638
  variant: "ghost",
839
1639
  size: "sm",
840
- onClick: () => N((c) => !c),
1640
+ onClick: () => p((d) => !d),
841
1641
  className: "gap-1.5 text-muted-foreground",
842
1642
  children: [
843
- y ? "Weniger Tarife" : "Weitere Tarife",
1643
+ P ? "Weniger Tarife" : "Weitere Tarife",
844
1644
  /* @__PURE__ */ e(
845
- S,
1645
+ I,
846
1646
  {
847
- className: l(
1647
+ className: c(
848
1648
  "h-4 w-4 transition-transform duration-200",
849
- y && "rotate-180"
1649
+ P && "rotate-180"
850
1650
  )
851
1651
  }
852
1652
  )
853
1653
  ]
854
1654
  }
855
1655
  ) }),
856
- /* @__PURE__ */ e(m, { variant: "caption", className: "mt-6 block text-center", children: "Alle Preise inkl. MwSt. Kündigung bis 4 Wochen zum Ende der Vertragslaufzeit möglich." })
1656
+ /* @__PURE__ */ e(g, { variant: "caption", className: "mt-6 block text-center", children: "Alle Preise inkl. MwSt. Kündigung bis 4 Wochen zum Ende der Vertragslaufzeit möglich." })
857
1657
  ] }) });
858
- }, Ve = ({
1658
+ }, $e = ({
859
1659
  items: t,
860
- defaultActiveId: n,
861
- variant: r = "underline",
1660
+ defaultActiveId: r,
1661
+ variant: i = "underline",
862
1662
  onTabChange: o,
863
1663
  className: s,
864
- ...a
1664
+ ...n
865
1665
  }) => {
866
- var N;
867
- const [d, f] = v(n || ((N = t[0]) == null ? void 0 : N.id)), u = (h) => {
868
- f(h), o == null || o(h);
869
- }, p = t.find((h) => h.id === d), y = {
1666
+ var w;
1667
+ const [l, u] = k(r || ((w = t[0]) == null ? void 0 : w.id)), m = (f) => {
1668
+ u(f), o == null || o(f);
1669
+ }, h = t.find((f) => f.id === l), N = {
870
1670
  underline: {
871
1671
  list: "border-b border-border",
872
- tab: (h) => l(
1672
+ tab: (f) => c(
873
1673
  "relative px-4 py-2.5 font-body text-sm font-medium transition-fast -mb-px",
874
- h ? "text-primary border-b-2 border-primary" : "text-muted-foreground hover:text-foreground"
1674
+ f ? "text-primary border-b-2 border-primary" : "text-muted-foreground hover:text-foreground"
875
1675
  )
876
1676
  },
877
1677
  pills: {
878
1678
  list: "gap-1 bg-muted rounded-lg p-1",
879
- tab: (h) => l(
1679
+ tab: (f) => c(
880
1680
  "px-4 py-2 rounded-md font-body text-sm font-medium transition-fast",
881
- h ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"
1681
+ f ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"
882
1682
  )
883
1683
  },
884
1684
  enclosed: {
885
1685
  list: "border-b border-border",
886
- tab: (h) => l(
1686
+ tab: (f) => c(
887
1687
  "px-4 py-2.5 font-body text-sm font-medium transition-fast border border-transparent rounded-t-lg -mb-px",
888
- h ? "bg-background text-foreground border-border border-b-background" : "text-muted-foreground hover:text-foreground hover:bg-muted/50"
1688
+ f ? "bg-background text-foreground border-border border-b-background" : "text-muted-foreground hover:text-foreground hover:bg-muted/50"
889
1689
  )
890
1690
  }
891
- }[r];
892
- return /* @__PURE__ */ i("div", { className: l("w-full", s), ...a, children: [
1691
+ }[i];
1692
+ return /* @__PURE__ */ a("div", { className: c("w-full", s), ...n, children: [
893
1693
  /* @__PURE__ */ e(
894
1694
  "div",
895
1695
  {
896
1696
  role: "tablist",
897
- className: l("flex items-center", y.list),
898
- children: t.map((h) => /* @__PURE__ */ e(
1697
+ className: c("flex items-center", N.list),
1698
+ children: t.map((f) => /* @__PURE__ */ e(
899
1699
  "button",
900
1700
  {
901
1701
  role: "tab",
902
- "aria-selected": h.id === d,
903
- "aria-controls": `tabpanel-${h.id}`,
904
- onClick: () => u(h.id),
905
- className: y.tab(h.id === d),
906
- children: h.label
1702
+ "aria-selected": f.id === l,
1703
+ "aria-controls": `tabpanel-${f.id}`,
1704
+ onClick: () => m(f.id),
1705
+ className: N.tab(f.id === l),
1706
+ children: f.label
907
1707
  },
908
- h.id
1708
+ f.id
909
1709
  ))
910
1710
  }
911
1711
  ),
@@ -913,43 +1713,43 @@ const Re = ({ items: t, className: n, ...r }) => {
913
1713
  "div",
914
1714
  {
915
1715
  role: "tabpanel",
916
- id: `tabpanel-${d}`,
1716
+ id: `tabpanel-${l}`,
917
1717
  className: "pt-4",
918
- children: p == null ? void 0 : p.content
1718
+ children: h == null ? void 0 : h.content
919
1719
  }
920
1720
  )
921
1721
  ] });
922
- }, P = [
1722
+ }, H = [
923
1723
  { id: "default", name: "Core Framework" },
924
1724
  { id: "webde", name: "WEB.DE" },
925
1725
  { id: "gmx", name: "GMX" }
926
- ], q = Q({
927
- brand: P[0],
1726
+ ], $ = re({
1727
+ brand: H[0],
928
1728
  setBrand: () => {
929
1729
  }
930
- }), pe = () => X(q), De = ({
1730
+ }), Be = () => ie($), Ue = ({
931
1731
  children: t,
932
- defaultBrand: n = "default"
1732
+ defaultBrand: r = "default"
933
1733
  }) => {
934
- const [r, o] = v(
935
- P.find((a) => a.id === n) || P[0]
936
- ), s = U((a) => {
937
- const d = P.find((f) => f.id === a);
938
- d && o(d);
1734
+ const [i, o] = k(
1735
+ H.find((n) => n.id === r) || H[0]
1736
+ ), s = ae((n) => {
1737
+ const l = H.find((u) => u.id === n);
1738
+ l && o(l);
939
1739
  }, []);
940
- return I(() => {
941
- const a = document.documentElement;
942
- return r.id === "default" ? a.removeAttribute("data-brand") : a.setAttribute("data-brand", r.id), () => a.removeAttribute("data-brand");
943
- }, [r]), /* @__PURE__ */ e(q.Provider, { value: { brand: r, setBrand: s }, children: t });
944
- }, Me = ({ className: t }) => {
945
- const { brand: n, setBrand: r } = pe();
946
- return /* @__PURE__ */ e("div", { className: l("flex items-center gap-1 rounded-xl border border-border bg-muted p-1", t), children: P.map((o) => /* @__PURE__ */ e(
1740
+ return E(() => {
1741
+ const n = document.documentElement;
1742
+ return i.id === "default" ? n.removeAttribute("data-brand") : n.setAttribute("data-brand", i.id), () => n.removeAttribute("data-brand");
1743
+ }, [i]), /* @__PURE__ */ e($.Provider, { value: { brand: i, setBrand: s }, children: t });
1744
+ }, Qe = ({ className: t }) => {
1745
+ const { brand: r, setBrand: i } = Be();
1746
+ return /* @__PURE__ */ e("div", { className: c("flex items-center gap-1 rounded-xl border border-border bg-muted p-1", t), children: H.map((o) => /* @__PURE__ */ e(
947
1747
  "button",
948
1748
  {
949
- onClick: () => r(o.id),
950
- className: l(
1749
+ onClick: () => i(o.id),
1750
+ className: c(
951
1751
  "rounded-lg px-3 py-1.5 font-body text-xs font-medium transition-fast",
952
- n.id === o.id ? "bg-primary text-primary-foreground shadow-sm" : "text-muted-foreground hover:text-foreground hover:bg-background"
1752
+ r.id === o.id ? "bg-primary text-primary-foreground shadow-sm" : "text-muted-foreground hover:text-foreground hover:bg-background"
953
1753
  ),
954
1754
  children: o.name
955
1755
  },
@@ -957,22 +1757,26 @@ const Re = ({ items: t, className: n, ...r }) => {
957
1757
  )) });
958
1758
  };
959
1759
  export {
960
- ce as Badge,
961
- De as BrandProvider,
962
- Me as BrandSwitcher,
963
- Re as Breadcrumb,
964
- Ae as ContactForm,
965
- Be as ContentCard,
966
- je as FaqAccordion,
967
- He as Footer,
968
- Ce as Hero,
969
- ze as ImageTextTeaser,
970
- Fe as Navbar,
971
- fe as SearchBar,
972
- Ve as Tabs,
973
- Se as TariffSelect,
974
- m as Typography,
975
- P as brands,
976
- pe as useBrand
1760
+ pe as Badge,
1761
+ Ue as BrandProvider,
1762
+ Qe as BrandSwitcher,
1763
+ Ze as Breadcrumb,
1764
+ Ne as CheckmarkIcon,
1765
+ Ke as ContactForm,
1766
+ Ee as ContentCard,
1767
+ _e as FaqAccordion,
1768
+ qe as Footer,
1769
+ De as Hero,
1770
+ Ge as ImageTextTeaser,
1771
+ Oe as Navbar,
1772
+ J as PremiumIcon,
1773
+ ve as SearchBar,
1774
+ $e as Tabs,
1775
+ Pe as TariffCards,
1776
+ Je as TariffSelect,
1777
+ Fe as TariffStacked,
1778
+ g as Typography,
1779
+ H as brands,
1780
+ Be as useBrand
977
1781
  };
978
1782
  //# sourceMappingURL=index.mjs.map