feat(components): add new section proprierties

Author: raferdev

src/components/Section/SubSection/animations.tsx

@@ -1,26 +1,19 @@
-import { Children, IllustrationProps } from '@/@types/components'
-
-import { AnimationBacklight } from './animations'
+import { Children } from '@/@types/components'
 
 const Container = ({ children }: Children) => (
-  <div className="flex flex-col items-center gap-16 md:grid md:grid-cols-section-1 md:gap-0">
+  <div className="grid grid-cols-1 grid-rows-2 place-items-center items-center gap-16 md:grid-cols-section-1  md:grid-rows-1 md:gap-0">
     {children}
   </div>
 )
 
-const Illustration = ({
-  children,
-  color_big,
-  color_small,
-}: IllustrationProps) => (
-  <div className="relative flex justify-center">
-    <AnimationBacklight color_small={color_small} color_big={color_big} />
+const Illustration = ({ children }: Children) => (
+  <div className="relative flex min-w-[200px] items-center justify-center lg:ml-8">
     {children}
   </div>
 )
 
 const Description = ({ children }: Children) => (
-  <div className="md:pl-4 md:pr-24">{children}</div>
+  <div className="md:pl-8 md:pr-12">{children}</div>
 )
 
 const Content = {

src/components/Section/SubSection/content.tsx

@@ -1,7 +1,13 @@
-import { Children } from '@/@types/components'
+import { OptChildClassNameProps } from '@/@types/components'
+import { cn } from '@/utils/cn'
 
-const Container = ({ children }: Children) => (
-  <div className="grid min-h-[200px] w-full grid-cols-1 grid-rows-3 place-items-center justify-items-center md:gap-2">
+const Container = ({ children, className }: OptChildClassNameProps) => (
+  <div
+    className={cn(
+      'grid min-h-[200px] w-full grid-cols-1 grid-rows-3 place-items-center justify-items-center md:gap-2',
+      className
+    )}
+  >
     {children}
   </div>
 )

src/components/Section/SubSection/links.tsx

@@ -8,7 +8,7 @@ const SectionContent = ({
 }: OptReactCompProps<HTMLDivElement>) => (
   <div
     className={cn(
-      'flex w-full flex-col gap-8 border-0 bg-inherit p-6 pl-4 pt-0 indent-2 text-base font-normal text-white shadow-none sm:text-lg md:min-h-[200px] md:grid-rows-1 md:gap-y-16 lg:grid lg:grid-cols-section-content lg:gap-8',
+      'grid w-full border-0 bg-inherit p-6 pt-0 text-justify indent-2 text-base font-normal text-white shadow-none sm:text-lg md:min-h-[200px] md:grid-rows-1 md:gap-y-16 lg:grid lg:grid-cols-section-content',
       className
     )}
     {...props}

src/components/Section/content.tsx

@@ -19,7 +19,7 @@ const Container = ({
   return (
     <Comp
       className={cn(
-        'flex  w-full max-w-[90rem] flex-wrap items-center gap-8 rounded-xl px-0 text-white sm:px-14 md:min-h-[17rem] md:gap-y-10',
+        'flex w-full max-w-[90rem] flex-wrap items-center gap-8 rounded-xl px-0 text-white sm:px-14 md:min-h-[17rem] md:gap-y-10',
         className
       )}
       {...props}