feat: enhance member management features; add quick stats and search capabilities
This commit is contained in:
@@ -457,10 +457,7 @@ export function FeatureCarousel() {
|
||||
const [active, setActive] = useState(0);
|
||||
const slide = SLIDES[active]!;
|
||||
|
||||
const next = useCallback(
|
||||
() => setActive((i) => (i + 1) % SLIDES.length),
|
||||
[],
|
||||
);
|
||||
const next = useCallback(() => setActive((i) => (i + 1) % SLIDES.length), []);
|
||||
const prev = useCallback(
|
||||
() => setActive((i) => (i - 1 + SLIDES.length) % SLIDES.length),
|
||||
[],
|
||||
|
||||
@@ -8,10 +8,7 @@ import { Check, ExternalLink, X } from 'lucide-react';
|
||||
|
||||
import { Badge } from '@kit/ui/badge';
|
||||
import { Button } from '@kit/ui/button';
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
} from '@kit/ui/card';
|
||||
import { Card, CardContent } from '@kit/ui/card';
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
@@ -265,7 +262,10 @@ function PriceBar({
|
||||
<div className="bg-muted h-6 overflow-hidden rounded-md">
|
||||
{available ? (
|
||||
<div
|
||||
className={cn('h-full rounded-md transition-all duration-500', color)}
|
||||
className={cn(
|
||||
'h-full rounded-md transition-all duration-500',
|
||||
color,
|
||||
)}
|
||||
style={{
|
||||
width: `${pct}%`,
|
||||
minWidth: pct > 0 ? 4 : 0,
|
||||
@@ -323,7 +323,10 @@ export function PricingCalculator() {
|
||||
<div className="mx-auto w-full max-w-4xl space-y-0">
|
||||
{/* ── Header ── */}
|
||||
<div className="bg-primary rounded-t-2xl px-8 py-7">
|
||||
<Badge variant="outline" className="border-primary-foreground/20 text-primary-foreground/80 mb-1 text-[10px] uppercase tracking-widest">
|
||||
<Badge
|
||||
variant="outline"
|
||||
className="border-primary-foreground/20 text-primary-foreground/80 mb-1 text-[10px] tracking-widest uppercase"
|
||||
>
|
||||
Preisvergleich
|
||||
</Badge>
|
||||
<h2 className="font-heading text-primary-foreground text-2xl font-bold tracking-tight">
|
||||
@@ -376,7 +379,7 @@ export function PricingCalculator() {
|
||||
<div className="flex flex-wrap items-center gap-3">
|
||||
<Card className="bg-primary/5 border-primary/10 flex flex-1 items-center justify-between p-4">
|
||||
<div>
|
||||
<div className="text-primary text-[10px] font-bold uppercase tracking-wider">
|
||||
<div className="text-primary text-[10px] font-bold tracking-wider uppercase">
|
||||
Ihr MYeasyCMS-Tarif
|
||||
</div>
|
||||
<div className="font-heading text-primary text-xl font-bold">
|
||||
@@ -460,21 +463,20 @@ export function PricingCalculator() {
|
||||
{bestSaving && bestSaving.p !== null && bestSaving.p > tier.price && (
|
||||
<div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
|
||||
<Card className="bg-primary/5 border-primary/10 p-5 text-center">
|
||||
<div className="text-primary text-[10px] font-bold uppercase tracking-wider">
|
||||
<div className="text-primary text-[10px] font-bold tracking-wider uppercase">
|
||||
Ersparnis vs. {bestSaving.name.split(' ')[0]}
|
||||
</div>
|
||||
<div className="font-heading text-primary mt-1 text-3xl font-bold">
|
||||
{fmt((bestSaving.p - tier.price) * 12)} €
|
||||
</div>
|
||||
<div className="text-muted-foreground text-sm">
|
||||
pro Jahr (
|
||||
{Math.round((1 - tier.price / bestSaving.p) * 100)}%
|
||||
pro Jahr ({Math.round((1 - tier.price / bestSaving.p) * 100)}%
|
||||
günstiger)
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<Card className="bg-muted/50 p-5 text-center">
|
||||
<div className="text-muted-foreground text-[10px] font-bold uppercase tracking-wider">
|
||||
<div className="text-muted-foreground text-[10px] font-bold tracking-wider uppercase">
|
||||
Preis pro Mitglied
|
||||
</div>
|
||||
<div className="font-heading text-primary mt-1 text-3xl font-bold">
|
||||
@@ -521,19 +523,19 @@ export function PricingCalculator() {
|
||||
{USP_FEATURES.map((f, i) => (
|
||||
<TableRow key={i}>
|
||||
<TableCell className="font-medium">{f.label}</TableCell>
|
||||
{(
|
||||
['mcms', 'sewobe', 'easy', 'club', 'wiso'] as const
|
||||
).map((col) => (
|
||||
<TableCell
|
||||
key={col}
|
||||
className={cn(
|
||||
'text-center',
|
||||
col === 'mcms' && 'bg-primary/5',
|
||||
)}
|
||||
>
|
||||
<FeatureCell value={f[col]} />
|
||||
</TableCell>
|
||||
))}
|
||||
{(['mcms', 'sewobe', 'easy', 'club', 'wiso'] as const).map(
|
||||
(col) => (
|
||||
<TableCell
|
||||
key={col}
|
||||
className={cn(
|
||||
'text-center',
|
||||
col === 'mcms' && 'bg-primary/5',
|
||||
)}
|
||||
>
|
||||
<FeatureCell value={f[col]} />
|
||||
</TableCell>
|
||||
),
|
||||
)}
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
|
||||
Reference in New Issue
Block a user