feat(components): add section new proprierties on header and remove animations on subsection

Author: raferdev

src/components/Section/SubSection/animations.tsx

@@ -4,46 +4,20 @@ import { cva } from 'class-variance-authority'
 
 export const animationVariants = cva('', {
   variants: {
-    color_small: {
-      gray_300: 'bg-gray-300',
-      gray_400: 'bg-slate-400',
-      rose_200: 'bg-rose-200',
-      rose_250: 'bg-rose-250',
-      green_200: 'bg-green-200',
-      green_300: 'bg-green-300',
-    },
     color_big: {
       gray_300: 'bg-gray-300',
-      gray_400: 'bg-slate-400',
+      gray_400: 'bg-gradient-to-tl from-gray-400 via-gray-900 to-black',
       rose_200: 'bg-rose-200',
-      rose_250: 'bg-rose-250',
+      rose_250: 'bg-gradient-to-tl from-gray-300 via-pink-400 to-pink-600',
       green_200: 'bg-green-200',
-      green_300: 'bg-green-300',
+      green_300: 'bg-gradient-to-tl from-gray-300 via-green-500 to-green-700',
     },
   },
 })
 
-const AnimationBacklight = ({
-  color_small,
-  color_big,
-}: AnimationBacklightProps) => {
+const AnimationBacklight = ({ color_big }: AnimationBacklightProps) => {
   return (
     <>
-      <div
-        className={
-          'absolute left-0 top-0 -z-10 h-24 w-64 animate-spin animate-duration-[120s]'
-        }
-      >
-        <div
-          className={cn(
-            animationVariants({
-              color_small,
-              className:
-                'absolute left-0 top-0 h-4 w-4 animate-bounce rounded-full blur-sm animate-duration-[180s]',
-            })
-          )}
-        ></div>
-      </div>
       <div
         className={
           'absolute bottom-0 left-0 -z-10 h-24 w-44 animate-spin  animate-duration-[120s]'
@@ -54,7 +28,7 @@ const AnimationBacklight = ({
             animationVariants({
               color_big,
               className:
-                'absolute left-0 top-0 h-8 w-8 animate-bounce rounded-full blur-sm animate-duration-[180s]',
+                'absolute left-0 top-0 h-6 w-6 animate-bounce rounded-full animate-duration-[180s]',
             })
           )}
         ></div>

src/components/Section/header.tsx

@@ -8,7 +8,7 @@ const SectionHeader = ({
 }: OptReactCompProps<HTMLDivElement>) => (
   <div
     className={cn(
-      'via-red flex flex-col space-y-1 rounded-full bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] from-white via-red-400 to-transparent to-50% px-10 py-6 text-neutral-950 md:min-w-[502px]',
+      'relative flex flex-col space-y-1 px-10 py-6 text-8xl font-extrabold text-white  md:min-w-[502px]',
       className
     )}
     {...props}