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

Code before:
                key={framework.name}
                variants={cardVariants}
                initial="initial"
                whileHover="hover"
                animate={framework.name === selectedFramework.name ? 'hover' : 'initial'}
                className="relative"
              >
                <Card
                  onClick={() => handleFrameworkSelect(framework)}
                  className={`flex h-[100px] w-[100px] flex-col items-center justify-center border-none p-6 shadow-none hover:cursor-pointer ${
                    framework.name === selectedFramework.name ? 'bg-neutral-100' : ''
                  }`}
                >
                  <CardContent className="flex flex-col items-center gap-3 p-0">
                    <motion.div variants={iconVariants} className="relative text-2xl">
                      {framework.icon}
                    </motion.div>
                    <span className="text-sm text-[#525866]">{framework.name}</span>
                  </CardContent>
                </Card>
              </motion.div>
            ))}
          </div>
        </div>

        {!['Remix', 'Native', 'Angular', 'JavaScript'].includes(selectedFramework.name) ? (
          <div className="flex flex-col gap-4">
            <h3 className="text-sm font-medium text-[#525866]">Choose installation method</h3>
            <Tabs
              defaultValue="cli"
              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

Review comment (suggestion):
```suggestion
        {['Next.js', 'React'].includes(selectedFramework.name) ? (
```

Code after:
                key={framework.name}
                variants={cardVariants}
                initial="initial"
                whileHover="hover"
                animate={framework.name === selectedFramework.name ? 'hover' : 'initial'}
                className="relative"
              >
                <Card
                  onClick={() => handleFrameworkSelect(framework)}
                  className={`flex h-[100px] w-[100px] flex-col items-center justify-center border-none p-6 shadow-none hover:cursor-pointer ${
                    framework.name === selectedFramework.name ? 'bg-neutral-100' : ''
                  }`}
                >
                  <CardContent className="flex flex-col items-center gap-3 p-0">
                    <motion.div variants={iconVariants} className="relative text-2xl">
                      {framework.icon}
                    </motion.div>
                    <span className="text-sm text-[#525866]">{framework.name}</span>
                  </CardContent>
                </Card>
              </motion.div>
            ))}
          </div>
        </div>

        {/* Code block area with subtle installation method selector above */}
        {['Next.js', 'React'].includes(selectedFramework.name) ? (
          <div className="flex flex-col gap-3">
            {/* Header row: label left, tabs right */}
            <div className="mb-2 flex items-center gap-64 pl-8">
              <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} />