Skip to content

Commit 60a46a3

Browse files
amethystaniamethystani
committed
feat: Implement new database schema for real-time active sessions, activity logging, webhooks, notifications, API keys, and enhanced user settings.
1 parent c319caa commit 60a46a3

File tree

1 file changed

+49
-45
lines changed

1 file changed

+49
-45
lines changed

‎src/components/DemoCall/OnboardingWizard.tsx‎

Lines changed: 49 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -311,7 +311,7 @@ export default function OnboardingWizard({ isDark = true, onComplete }: Onboardi
311311

312312
// --- Main Layout matching Dashboard standards ---
313313
return (
314-
<div className="space-y-6 max-w-[1600px] mx-auto pb-10">
314+
<div className="space-y-6 max-w-[1400px] mx-auto pb-10">
315315
{/* Header */}
316316
<div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
317317
<div>
@@ -326,39 +326,44 @@ export default function OnboardingWizard({ isDark = true, onComplete }: Onboardi
326326

327327
{/* Main Content Card */}
328328
<div className={cn(
329-
"flex flex-col rounded-xl border h-[650px] overflow-hidden relative",
330-
isDark ? "bg-[#09090B] border-white/10 text-white" : "bg-white border-black/10 text-black"
329+
"flex flex-col rounded-2xl border h-[680px] overflow-hidden relative shadow-2xl",
330+
isDark ? "bg-[#0B0B0D] border-white/10 text-white" : "bg-white border-black/10 text-black"
331331
)}>
332+
{isDark && (
333+
<div className="absolute inset-0 pointer-events-none">
334+
<div className="absolute -top-24 left-1/2 -translate-x-1/2 w-[80%] h-[220px] bg-[radial-gradient(ellipse_at_top,_rgba(255,138,91,0.15)_0%,_rgba(0,0,0,0)_60%)]" />
335+
<div className="absolute bottom-0 left-0 w-full h-[160px] bg-gradient-to-t from-black/40 to-transparent" />
336+
</div>
337+
)}
332338
{showIntro ? (
333339
<div className="flex-1 flex flex-col items-center justify-center p-8 overflow-y-auto w-full h-full relative z-10">
334340
<motion.div
335341
initial={{ opacity: 0, y: 30 }}
336342
animate={{ opacity: 1, y: 0 }}
337343
transition={{ duration: 0.6, ease: [0.22, 1, 0.36, 1] }}
338-
className="max-w-lg w-full text-center"
344+
className="max-w-xl w-full text-center"
339345
>
340346
{/* Animated icon */}
341347
<motion.div
342-
initial={{ scale: 0.8 }}
343-
animate={{ scale: 1 }}
344-
transition={{ delay: 0.2, type: 'spring', stiffness: 200 }}
345-
className="mx-auto mb-8 relative"
348+
initial={{ scale: 0.85, opacity: 0 }}
349+
animate={{ scale: 1, opacity: 1 }}
350+
transition={{ delay: 0.1, type: 'spring', stiffness: 200 }}
351+
className="mx-auto mb-6 relative"
346352
>
347353
<div className={cn(
348-
"w-20 h-20 rounded-3xl flex items-center justify-center mx-auto border shadow-lg relative z-20",
354+
"w-16 h-16 rounded-2xl flex items-center justify-center mx-auto border shadow-lg relative z-20",
349355
isDark
350-
? "bg-gradient-to-br from-purple-500/20 to-blue-500/20 border-purple-500/30 shadow-purple-500/10"
351-
: "bg-gradient-to-br from-purple-100 to-blue-100 border-purple-200 shadow-purple-200/30"
356+
? "bg-[#FF8A5B]/10 border-[#FF8A5B]/30 shadow-[#FF8A5B]/10"
357+
: "bg-orange-50 border-orange-200 shadow-orange-200/30"
352358
)}>
353-
<Wand2 className={cn("w-10 h-10", isDark ? "text-purple-400" : "text-purple-600")} />
359+
<Wand2 className={cn("w-8 h-8", isDark ? "text-[#FFB286]" : "text-[#FF8A5B]")} />
354360
</div>
355-
<div className="absolute inset-0 bg-purple-500/20 blur-2xl rounded-full z-10" />
356361
</motion.div>
357362

358363
<h2 className={cn("text-3xl font-bold tracking-tight mb-3", textPrimary)}>
359364
{t('onboarding.title')}
360365
</h2>
361-
<p className={cn("text-lg mb-10 leading-relaxed", textSecondary)}>
366+
<p className={cn("text-lg mb-8 leading-relaxed", textSecondary)}>
362367
{t('onboarding.introDesc')}
363368
</p>
364369

@@ -368,15 +373,11 @@ export default function OnboardingWizard({ isDark = true, onComplete }: Onboardi
368373
transition={{ delay: 0.7 }}
369374
onClick={startConversation}
370375
className={cn(
371-
"relative inline-flex items-center gap-3 px-8 py-4 rounded-2xl text-base font-semibold transition-all duration-300 cursor-pointer overflow-hidden",
372-
"backdrop-blur-xl border",
373-
isDark
374-
? "bg-white/10 hover:bg-white/20 border-white/20 text-white shadow-lg shadow-black/20 hover:shadow-white/10"
375-
: "bg-black/5 hover:bg-black/10 border-black/10 text-black shadow-lg shadow-black/5 hover:shadow-black/10",
376+
"relative inline-flex items-center gap-3 px-8 py-4 rounded-2xl text-base font-semibold transition-all duration-300 cursor-pointer overflow-hidden border shadow-lg",
377+
"bg-gradient-to-r from-[#FF8A5B] to-[#FFB286] text-white border-[#FF8A5B]/30 shadow-[#FF8A5B]/30",
376378
"hover:scale-[1.02] active:scale-[0.98]"
377379
)}
378380
>
379-
<div className="absolute inset-0 bg-gradient-to-tr from-white/5 to-transparent pointer-events-none" />
380381
<Sparkles className="w-5 h-5 relative z-10" />
381382
<span className="relative z-10">{t('onboarding.startButton')}</span>
382383
<ArrowRight className="w-5 h-5 relative z-10" />
@@ -412,7 +413,10 @@ export default function OnboardingWizard({ isDark = true, onComplete }: Onboardi
412413
) : (
413414
<div className="flex-1 flex flex-col h-full bg-transparent relative z-10">
414415
{/* Chat Messages */}
415-
<div className="flex-1 overflow-y-auto px-6 py-6 space-y-4 scrollbar-hide max-w-4xl mx-auto w-full">
416+
<div className={cn(
417+
"flex-1 overflow-y-auto px-6 py-6 space-y-4 scrollbar-hide max-w-4xl mx-auto w-full rounded-2xl border shadow-inner",
418+
isDark ? "bg-black/30 border-white/10 shadow-black/30" : "bg-gray-50 border-gray-200"
419+
)}>
416420
<AnimatePresence mode="popLayout">
417421
{messages.map((msg) => (
418422
<motion.div
@@ -430,10 +434,10 @@ export default function OnboardingWizard({ isDark = true, onComplete }: Onboardi
430434
<div className={cn(
431435
"w-8 h-8 rounded-xl flex items-center justify-center flex-shrink-0 mt-1",
432436
isDark
433-
? "bg-gradient-to-br from-purple-500/20 to-blue-500/20 border border-purple-500/30"
434-
: "bg-gradient-to-br from-purple-100 to-blue-100 border border-purple-200"
437+
? "bg-[#FF8A5B]/10 border border-[#FF8A5B]/30"
438+
: "bg-orange-50 border border-orange-200"
435439
)}>
436-
<Bot className={cn("w-4 h-4", isDark ? "text-purple-400" : "text-purple-600")} />
440+
<Bot className={cn("w-4 h-4", isDark ? "text-[#FFB286]" : "text-[#FF8A5B]")} />
437441
</div>
438442
)}
439443

@@ -442,12 +446,12 @@ export default function OnboardingWizard({ isDark = true, onComplete }: Onboardi
442446
msg.role === 'user'
443447
? cn(
444448
"rounded-br-md shadow-md",
445-
"bg-gradient-to-r from-blue-600/90 to-blue-500/90 text-white border border-blue-400/20 shadow-blue-500/20"
449+
"bg-gradient-to-r from-[#FF8A5B] to-[#FFB286] text-white border border-[#FF8A5B]/30 shadow-[#FF8A5B]/20"
446450
)
447451
: cn(
448452
"rounded-bl-md border shadow-sm",
449453
isDark
450-
? "bg-[#121214] border-white/10 text-white/90"
454+
? "bg-white/[0.05] border-white/10 text-white/90"
451455
: "bg-white border-gray-200 text-gray-800"
452456
)
453457
)}>
@@ -485,15 +489,15 @@ export default function OnboardingWizard({ isDark = true, onComplete }: Onboardi
485489
<div className={cn(
486490
"w-8 h-8 rounded-xl flex items-center justify-center flex-shrink-0",
487491
isDark
488-
? "bg-gradient-to-br from-purple-500/20 to-blue-500/20 border border-purple-500/30"
489-
: "bg-gradient-to-br from-purple-100 to-blue-100 border border-purple-200"
492+
? "bg-[#FF8A5B]/10 border border-[#FF8A5B]/30"
493+
: "bg-orange-50 border border-orange-200"
490494
)}>
491-
<Bot className={cn("w-4 h-4", isDark ? "text-purple-400" : "text-purple-600")} />
495+
<Bot className={cn("w-4 h-4", isDark ? "text-[#FFB286]" : "text-[#FF8A5B]")} />
492496
</div>
493497
<div className={cn(
494498
"rounded-2xl rounded-bl-md px-5 py-3.5 border shadow-sm",
495499
isDark
496-
? "bg-[#121214] border-white/10"
500+
? "bg-white/[0.05] border-white/10"
497501
: "bg-white border-gray-200"
498502
)}>
499503
<div className="flex gap-1.5 mt-1">
@@ -504,7 +508,7 @@ export default function OnboardingWizard({ isDark = true, onComplete }: Onboardi
504508
transition={{ repeat: Infinity, duration: 0.8, delay: i * 0.15 }}
505509
className={cn(
506510
"w-2 h-2 rounded-full",
507-
isDark ? "bg-purple-400/60" : "bg-purple-500/50"
511+
isDark ? "bg-[#FFB286]/70" : "bg-[#FF8A5B]/60"
508512
)}
509513
/>
510514
))}
@@ -521,15 +525,15 @@ export default function OnboardingWizard({ isDark = true, onComplete }: Onboardi
521525
initial={{ opacity: 0, y: 20 }}
522526
animate={{ opacity: 1, y: 0 }}
523527
className={cn(
524-
"mx-6 mb-4 rounded-xl border p-5 overflow-hidden max-w-4xl self-center w-full shadow-lg shadow-black/5",
528+
"mx-6 mb-4 rounded-2xl border p-5 overflow-hidden max-w-4xl self-center w-full shadow-lg shadow-black/10 backdrop-blur-xl",
525529
isDark
526-
? "bg-gradient-to-br from-purple-500/5 to-blue-500/5 border-purple-500/20"
527-
: "bg-gradient-to-br from-purple-50 to-blue-50 border-purple-200"
530+
? "bg-white/[0.03] border-white/10"
531+
: "bg-orange-50 border-orange-200"
528532
)}
529533
>
530534
<div className="flex items-center justify-between mb-4">
531535
<div className="flex items-center gap-2">
532-
<Sparkles className={cn("w-5 h-5", isDark ? "text-purple-400" : "text-purple-600")} />
536+
<Sparkles className={cn("w-5 h-5", isDark ? "text-[#FFB286]" : "text-[#FF8A5B]")} />
533537
<h3 className={cn("font-bold text-base", textPrimary)}>{t('onboarding.configReady')}</h3>
534538
</div>
535539
</div>
@@ -585,8 +589,8 @@ export default function OnboardingWizard({ isDark = true, onComplete }: Onboardi
585589
disabled={isDeploying}
586590
className={cn(
587591
"flex-1 flex items-center justify-center gap-2 px-5 py-3 rounded-xl text-sm font-semibold transition-all duration-200 cursor-pointer shadow-md",
588-
"bg-gradient-to-r from-emerald-600 to-green-600 text-white shadow-emerald-500/20",
589-
"hover:from-emerald-500 hover:to-green-500 hover:shadow-lg hover:shadow-emerald-500/30 hover:-translate-y-0.5",
592+
"bg-gradient-to-r from-[#FF8A5B] to-[#FFB286] text-white shadow-[#FF8A5B]/25",
593+
"hover:from-[#FF8A5B] hover:to-[#FFC7A1] hover:shadow-lg hover:shadow-[#FF8A5B]/30 hover:-translate-y-0.5",
590594
isDeploying && "opacity-70 pointer-events-none"
591595
)}
592596
>
@@ -620,10 +624,10 @@ export default function OnboardingWizard({ isDark = true, onComplete }: Onboardi
620624
{/* Uploaded document badge */}
621625
{uploadedDoc && (
622626
<div className={cn(
623-
"max-w-4xl self-center w-[calc(100%-3rem)] mx-6 mb-3 flex items-center gap-2 px-3 py-2.5 rounded-lg border text-xs shadow-sm",
627+
"max-w-4xl self-center w-[calc(100%-3rem)] mx-6 mb-3 flex items-center gap-2 px-3 py-2.5 rounded-lg border text-xs shadow-sm backdrop-blur",
624628
isDark
625-
? "bg-blue-500/10 border-blue-500/20 text-blue-400"
626-
: "bg-blue-50 border-blue-200 text-blue-600"
629+
? "bg-[#FF8A5B]/10 border-[#FF8A5B]/20 text-[#FFB286]"
630+
: "bg-orange-50 border-orange-200 text-[#FF8A5B]"
627631
)}>
628632
<FileText className="w-4 h-4" />
629633
<span className="font-medium truncate">{uploadedDoc.name}</span>
@@ -639,14 +643,14 @@ export default function OnboardingWizard({ isDark = true, onComplete }: Onboardi
639643
{/* Input Area */}
640644
<div className={cn(
641645
"p-4 border-t flex-shrink-0 z-20",
642-
isDark ? "bg-[#0A0A0A] border-white/10" : "bg-gray-50 border-black/10"
646+
isDark ? "bg-black/40 border-white/10" : "bg-gray-50 border-black/10"
643647
)}>
644648
<div className={cn(
645-
"flex items-end gap-2 rounded-2xl border px-4 py-3 transition-all duration-200 max-w-4xl mx-auto w-full shadow-sm",
649+
"flex items-end gap-2 rounded-2xl border px-4 py-3 transition-all duration-200 max-w-4xl mx-auto w-full shadow-sm backdrop-blur",
646650
"focus-within:ring-2 focus-within:ring-offset-0",
647651
isDark
648-
? "bg-[#121214] border-white/10 focus-within:border-purple-500/50 focus-within:ring-purple-500/20"
649-
: "bg-white border-gray-200 focus-within:border-purple-400 focus-within:ring-purple-500/10"
652+
? "bg-black/30 border-white/10 focus-within:border-[#FF8A5B]/50 focus-within:ring-[#FF8A5B]/20"
653+
: "bg-white border-gray-200 focus-within:border-[#FF8A5B] focus-within:ring-[#FF8A5B]/10"
650654
)}>
651655
{/* Upload button */}
652656
<button
@@ -705,7 +709,7 @@ export default function OnboardingWizard({ isDark = true, onComplete }: Onboardi
705709
className={cn(
706710
"p-2 rounded-xl transition-all duration-200 flex-shrink-0 cursor-pointer",
707711
input.trim() && !isLoading
708-
? "bg-gradient-to-r from-purple-600 to-blue-600 text-white shadow-md shadow-purple-500/20 hover:scale-105 hover:shadow-lg hover:shadow-purple-500/30"
712+
? "bg-gradient-to-r from-[#FF8A5B] to-[#FFB286] text-white shadow-md shadow-[#FF8A5B]/20 hover:scale-105 hover:shadow-lg hover:shadow-[#FF8A5B]/30"
709713
: cn(isDark ? "text-white/20 bg-white/5" : "text-gray-300 bg-gray-100")
710714
)}
711715
>

0 commit comments

Comments
 (0)