asset creation clean ui

Author: 0xkid-root

src/components/FeeStructure/FeeStructureComponent.tsx

@@ -136,7 +136,7 @@ export const FeeStructureComponent: React.FC<FeeStructureComponentProps> = ({
     >
       {/* Header */}
       <motion.div variants={itemVariants}>
-        <Card className="bg-gradient-to-r from-blue-50 to-indigo-50 border-blue-200">
+        <Card className=" m-4">
           <CardHeader>
             <CardTitle className="flex items-center gap-3">
               <div className="p-2 bg-blue-100 rounded-lg">

src/pages/asset/AddAsset/AdditionalDetails/RiskFactors/index.tsx

@@ -186,7 +186,7 @@ const RiskFactor = memo(() => {
       {/* Enhanced Header */}
       <motion.div
         variants={headerVariants}
-        className="bg-gradient-to-r from-red-50 to-orange-50 rounded-xl p-6 border border-red-100 shadow-sm overflow-hidden relative"
+        className="rounded-xl m-4 p-6 border  shadow-sm overflow-hidden relative"
       >
         {/* Background Pattern */}
         <div className="absolute inset-0 opacity-5">
@@ -220,15 +220,7 @@ const RiskFactor = memo(() => {
             </div>
 
             {/* Add Button */}
-            <motion.button
-              onClick={handleAdd}
-              className="bg-gradient-to-r from-red-500 to-orange-600 hover:from-red-600 hover:to-orange-700 text-white px-6 py-2 rounded-xl transition-all duration-300 flex items-center gap-2 shadow-lg hover:shadow-xl"
-              whileHover={{ scale: 1.05 }}
-              whileTap={{ scale: 0.95 }}
-            >
-              <Plus className="w-4 h-4" />
-              <span className="font-medium">Add Risk Factor</span>
-            </motion.button>
+            
           </div>
         </div>
       </motion.div>

src/pages/asset/AddAsset/AdditionalDetails/index.tsx

@@ -162,109 +162,10 @@ const AdditionalDetails = memo(({ tab, step }: Props) => {
       animate="animate"
     >
       {/* Enhanced Header */}
-      <motion.div
-        variants={headerVariants}
-        className="bg-gradient-to-r from-orange-50 via-red-50 to-pink-50 rounded-xl p-6 border border-orange-100 shadow-sm overflow-hidden relative"
-      >
-        {/* Background Pattern */}
-        <div className="absolute inset-0 opacity-5">
-          <div className="absolute top-4 right-4 w-32 h-32 bg-orange-500 rounded-full blur-3xl" />
-          <div className="absolute bottom-4 left-4 w-24 h-24 bg-red-500 rounded-full blur-2xl" />
-        </div>
-        
-        <div className="relative">
-          <div className="flex justify-between items-start">
-            <div className="flex items-center gap-4">
-              <motion.div
-                className="p-3 bg-gradient-to-br from-orange-500 to-red-600 rounded-xl shadow-lg relative overflow-hidden"
-                whileHover={{ scale: 1.05, rotate: 5 }}
-                transition={{ duration: 0.2 }}
-              >
-                <motion.div
-                  className="absolute inset-0 bg-gradient-to-r from-white/20 to-transparent"
-                  animate={{ x: ['-100%', '100%'] }}
-                  transition={{ repeat: Infinity, duration: 3, ease: "linear" }}
-                />
-                <Shield className="w-6 h-6 text-white relative z-10" />
-              </motion.div>
-              <div>
-                <h1 className="text-2xl font-bold bg-gradient-to-r from-orange-600 via-red-600 to-pink-600 bg-clip-text text-transparent">
-                  Additional Details
-                </h1>
-                <p className="text-gray-600 text-sm font-medium mt-1">
-                  Risk assessment, disclosures, and financial considerations
-                </p>
-              </div>
-            </div>
-            
-            {/* Progress Indicator */}
-            <motion.div
-              variants={statsVariants}
-              className="text-right"
-            >
-              <div className="text-lg font-bold text-orange-600">{tabs.length}</div>
-              <div className="text-xs text-gray-500">Categories</div>
-            </motion.div>
-          </div>
-          
-          {/* Enhanced Categories Overview */}
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mt-6">
-            {tabs.map((tab, index) => {
-              const Icon = tab.icon;
-              const colors = ['orange', 'red', 'pink', 'rose'];
-              const color = colors[index % colors.length];
-              
-              return (
-                <motion.div
-                  key={tab.id}
-                  variants={featureVariants}
-                  className={`bg-white/80 backdrop-blur-sm rounded-xl p-4 border border-${color}-200 shadow-sm hover:shadow-md transition-all duration-300 cursor-pointer`}
-                  whileHover={{ scale: 1.02, y: -2 }}
-                  onClick={() => handleTabChange(tab.id)}
-                >
-                  <div className="flex items-start gap-3">
-                    <div className={`p-2 bg-${color}-100 rounded-lg flex-shrink-0`}>
-                      <Icon className={`w-4 h-4 text-${color}-600`} />
-                    </div>
-                    <div className="flex-1 min-w-0">
-                      <span className="text-sm font-semibold text-gray-800 block truncate">{tab.title}</span>
-                      <p className="text-xs text-gray-500 mt-1 line-clamp-2">{tab.description}</p>
-                    </div>
-                  </div>
-                </motion.div>
-              );
-            })}
-          </div>
-        </div>
-      </motion.div>
+      
 
       {/* Quick Stats */}
-      <motion.div
-        className="grid grid-cols-1 md:grid-cols-3 gap-4"
-        initial={{ opacity: 0, y: 20 }}
-        animate={{ opacity: 1, y: 0 }}
-        transition={{ delay: 0.3, staggerChildren: 0.1 }}
-      >
-        <StatsCard
-          icon={Shield}
-          label="Risk Management"
-          value="Active"
-          color="orange"
-          trend="up"
-        />
-        <StatsCard
-          icon={FileText}
-          label="Documentation"
-          value="Ready"
-          color="red"
-        />
-        <StatsCard
-          icon={CheckCircle2}
-          label="Compliance"
-          value="Verified"
-          color="emerald"
-        />
-      </motion.div>
+      
 
       {/* Enhanced Content */}
       <motion.div