Repository: novuhq/novu
File: apps/dashboard/src/components/welcome/inbox-framework-guide.tsx (TypeScript)

Code before:
              value={installationMethod}
              onValueChange={(value) => setInstallationMethod(value as 'cli' | 'manual')}
            >
              <TabsList className="inline-flex items-center gap-2 bg-transparent p-0">
                <TabsTrigger
                  value="cli"
                  className="relative text-xs font-medium text-[#525866] transition-colors hover:text-[#dd2476] data-[state=active]:text-[#dd2476]"
                >
                  CLI
                </TabsTrigger>
                <TabsTrigger
                  value="manual"
                  className="relative text-xs font-medium text-[#525866] transition-colors hover:text-[#dd2476] data-[state=active]:text-[#dd2476]"
                >
                  Manual
                </TabsTrigger>
              </TabsList>
              <div className="relative mt-2 overflow-hidden pl-0">
                <AnimatePresence mode="wait">
                  {installationMethod === 'cli' && (
                    <motion.div
                      key="cli"
                      initial={{ opacity: 0 }}
                      animate={{ opacity: 1 }}
                      exit={{ opacity: 0 }}
                      transition={{ duration: 0.15 }}
                      className="w-full"
                    >
                      <FrameworkCliInstructions framework={selectedFramework as CliFramework} />
                    </motion.div>
                  )}
                  {installationMethod === 'manual' && (
                    <motion.div
                      key="manual"
                      initial={{ opacity: 0 }}
                      animate={{ opacity: 1 }}
                      exit={{ opacity: 0 }}
                      transition={{ duration: 0.15 }}
                      className="w-full"
                    >
                      <FrameworkInstructions framework={selectedFramework as ManualFramework} />
                    </motion.div>
                  )}
                </AnimatePresence>
              </div>
            </Tabs>
          </div>
        ) : (
          <div className="relative mt-2 overflow-hidden pl-0">
            <motion.div
              key="manual"

Review comment (suggestion):
```suggestion
                      {...fadeIn}
```


please use the `fadeIn` constant from the `animations.ts` file, also please update it in the other places

Code after:
              <span className="text-base font-medium text-[#222]">Installation method</span>
              <Tabs
                defaultValue="cli"
                value={installationMethod}
                onValueChange={(value) => setInstallationMethod(value as 'cli' | 'manual')}
              >
                <TabsList className="ml-4 h-6 bg-transparent p-0 shadow-none">
                  <TabsTrigger value="cli" className={TABS_TRIGGER_CLASSES}>
                    CLI Installation
                  </TabsTrigger>
                  <TabsTrigger value="manual" className={TABS_TRIGGER_CLASSES}>
                    Manual
                  </TabsTrigger>
                </TabsList>
              </Tabs>
            </div>
            <div className="relative overflow-hidden pl-0">
              <AnimatePresence mode="wait">
                <motion.div key={installationMethod} {...fadeIn} className="w-full">
                  {installationMethod === 'cli' ? (
                    <FrameworkCliInstructions framework={selectedFramework as Framework} />
                  ) : (
                    <FrameworkInstructions framework={selectedFramework as Framework} />
                  )}
                </motion.div>
              </AnimatePresence>
            </div>
          </div>
        ) : (
          <div className="relative mt-2 overflow-hidden pl-0">
            <motion.div key="manual" {...fadeIn} className="w-full">
              <FrameworkInstructions framework={selectedFramework as Framework} />
            </motion.div>
          </div>
        )}
      </motion.div>
    </>
  );
}