diff --git a/components/daisy/Hero.tsx b/components/daisy/Hero.tsx
index aa60569..ccae1df 100644
--- a/components/daisy/Hero.tsx
+++ b/components/daisy/Hero.tsx
@@ -1,9 +1,12 @@
 import Image from "apps/website/components/Image.tsx";
 
 export interface Props {
+  /**@title Título */
   title: string;
+  /**@title Descrição */
   description: string;
   cta?: { text: string; href: string };
+  /**@title Imagem */
   image?: { src: string; alt: string };
   imageOnRight?: boolean;
 }
diff --git a/components/footer/Newsletter.tsx b/components/footer/Newsletter.tsx
index 661ae85..0e50d86 100644
--- a/components/footer/Newsletter.tsx
+++ b/components/footer/Newsletter.tsx
@@ -68,7 +68,7 @@ function Newsletter(
           <div class="flex flex-wrap gap-[18px]">
             <input
               name="email"
-              class="flex-auto md:flex-none input input-bordered md:w-[273px] bg-white text-base-content font-noto-sans rounded-[90px] text-14 n1-text-base-400"
+              class="bg-[#ffffff] flex-auto md:flex-none input input-bordered md:w-[273px] bg-white text-base-content font-noto-sans rounded-[90px] text-14 n1-text-base-400"
               placeholder={content?.form?.placeholder || "Digite seu email"}
             />
             <button
diff --git a/components/header/Header.tsx b/components/header/Header.tsx
index c6eda8a..2c31b92 100644
--- a/components/header/Header.tsx
+++ b/components/header/Header.tsx
@@ -6,7 +6,7 @@ import type { SiteNavigationElement } from "apps/commerce/types.ts";
 import Alert from "./Alert.tsx";
 import Navbar from "./Navbar.tsx";
 import { headerHeight } from "./constants.ts";
-import LinkButtonWithOptionArrow from '../ui/LinkButtonWithOptionArrow.tsx';
+import LinkTelephoneWithOptionArrow from '../ui/LinkTelephoneWithOptionArrow.tsx';
 import { HTMLWidget as HTML } from "apps/admin/widgets.ts";
 
 export interface Logo {
@@ -144,7 +144,11 @@ function Header({
                 buttons={buttons}
                 btnTextMenu={btnTextMenu}
               />
-              {whatsapp && <LinkButtonWithOptionArrow activeArrow={true} telephone={whatsapp} />}            
+              {whatsapp && (
+                <div class="mobile:flex mobile:justify-center">
+                  <LinkTelephoneWithOptionArrow fontSize='14' activeArrow={true} telephone={whatsapp} />
+                </div>                
+              )}            
               
             </div>
           </div>
diff --git a/components/header/Menu.tsx b/components/header/Menu.tsx
index 29440c7..95e8576 100644
--- a/components/header/Menu.tsx
+++ b/components/header/Menu.tsx
@@ -1,6 +1,6 @@
 import Icon from "$store/components/ui/Icon.tsx";
 import type { SiteNavigationElement } from "apps/commerce/types.ts";
-import LinkButtonWithOptionArrow from "../ui/LinkButtonWithOptionArrow.tsx";
+import LinkTelephoneWithOptionArrow from "../ui/LinkTelephoneWithOptionArrow.tsx";
 import Legend from '$store/components/header/Legend.tsx';
 import { clx } from "$store/sdk/clx.ts";
 
@@ -65,7 +65,7 @@ function Menu({ items, whatsapp }: Props) {
       </ul>
       <div class="w-[90%] mx-auto">
           {whatsapp && (
-            <LinkButtonWithOptionArrow activeArrow={false} width={'full'} telephone={whatsapp} />
+            <LinkTelephoneWithOptionArrow activeArrow={false} width={'full'} telephone={whatsapp} />
           )}
       </div>
     </div>
diff --git a/components/header/NavItem.tsx b/components/header/NavItem.tsx
index 1730aeb..acf9492 100644
--- a/components/header/NavItem.tsx
+++ b/components/header/NavItem.tsx
@@ -116,11 +116,10 @@ function NavItem({ item, btnTextMenu, btnUrlMenu }: Props) {
                     )
                   })}
                 </ul>
-                {/* {btnTextMenu && <a class="btnTextMenu"> {btnTextMenu} </a>} */}
                 
-                {activePropsButton && btnTextMenu && 
-                  <LinkButtonSubMenu btnTextMenu={btnTextMenu} btnUrlMenu={btnUrlMenu} /> 
-                }
+                {activePropsButton && btnTextMenu && (                  
+                    <LinkButtonSubMenu btnTextMenu={btnTextMenu} btnUrlMenu={btnUrlMenu} />                   
+                )}
               </div>         
             </div>
           )}
diff --git a/components/header/Navbar.tsx b/components/header/Navbar.tsx
index a2ae25b..e4c569c 100644
--- a/components/header/Navbar.tsx
+++ b/components/header/Navbar.tsx
@@ -62,7 +62,7 @@ function Navbar({
           </a>
         )}
 
-        <div class="flex justify-end mobile:hidden">
+        <div class="justify-end hidden">
           <SearchButton />
           {platform === "vtex" && <CartButtonVTEX />}
           {platform === "vnda" && <CartButtonVDNA />}
diff --git a/components/ui/BannerCarousel.tsx b/components/ui/BannerCarousel.tsx
index bab2b44..3853fef 100644
--- a/components/ui/BannerCarousel.tsx
+++ b/components/ui/BannerCarousel.tsx
@@ -10,14 +10,15 @@ import { useId } from "$store/sdk/useId.ts";
 import type { ImageWidget } from "apps/admin/widgets.ts";
 import { Picture, Source } from "apps/website/components/Picture.tsx";
 import Image from "apps/website/components/Image.tsx";
+import { FnContext, SectionProps } from "deco/mod.ts";
 
 /**
  * @titleBy alt
  */
 export interface Banner {
-  /** @description desktop otimized image */
+  /** @description desktop imagem otimizada */
   desktop: ImageWidget;
-  /** @description mobile otimized image */
+  /** @description mobile imagem otimizada */
   mobile: ImageWidget;
   /** @description Image's alt text */
   alt: string;
@@ -36,22 +37,22 @@ export interface Banner {
 export interface Props {
   images?: Banner[];
   /**
-   * @description Check this option when this banner is the biggest image on the screen for image optimizations
+   * @description (Marque esta opção quando este banner for a maior imagem na tela para otimizações de imagem)
    */
   preload?: boolean;
   /**
-   * @title Show arrows
-   * @description show arrows to navigate through the images
+   * @title Mostrar setas
+   * @description (mostre setas para navegar pelas imagens)
    */
   arrows?: boolean;
   /**
-   * @title Show dots
-   * @description show dots to navigate through the images
+   * @title Mostrar pontos
+   * @description (mostre pontos para navegar pelas imagens)
    */
   dots?: boolean;
   /**
-   * @title Autoplay interval
-   * @description time (in seconds) to start the carousel autoplay
+   * @title Autoplay intervalo
+   * @description [tempo (em segundos) para iniciar a reprodução automática do carrossel (ex: 1 - significa 1 segundo)]
    */
   interval?: number;
 }
@@ -139,7 +140,7 @@ function BannerItem(
           media="(max-width: 767px)"
           fetchPriority={lcp ? "high" : "auto"}
           src={mobile}
-          width={430}
+          width={390}
           height={590}
         />
         <Source
@@ -150,7 +151,7 @@ function BannerItem(
           height={600}
         />
         <img
-          class="object-cover w-full h-full"
+          class="mobile:object-none mobile:h-auto mobile:max-w-full object-cover w-full h-full"
           loading={lcp ? "eager" : "lazy"}
           src={desktop}
           alt={alt}
@@ -174,13 +175,13 @@ function Dots({ images, interval = 0 }: Props) {
           `,
         }}
       />
-      <ul class="carousel justify-center col-span-full gap-6 z-10 row-start-4">
+      <ul class="mobile:relative mobile:top-0 carousel justify-center col-span-full gap-6 z-10 row-start-4">
         {images?.map((_, index) => (
           <li class="carousel-item">
             <Slider.Dot index={index}>
               <div class="py-5">
                 <div
-                  class="w-16 sm:w-20 h-0.5 rounded group-disabled:animate-progress bg-gradient-to-r from-base-100 from-[length:var(--dot-progress)] to-[rgba(255,255,255,0.4)] to-[length:var(--dot-progress)]"
+                  class="n1-banner-btn__dot--item w-8 sm:w-20 h-0.5 rounded group-disabled:animate-progress bg-gradient-to-r from-[#06ADC2] from-[length:var(--dot-progress)] to-[rgba(255,255,255,0.4)] to-[length:var(--dot-progress)]"
                   style={{ animationDuration: `${interval}s` }}
                 />
               </div>
@@ -196,21 +197,19 @@ function Buttons() {
   return (
     <>
       <div class="flex items-center justify-center z-10 col-start-1 row-start-2">
-        <Slider.PrevButton class="btn btn-circle glass">
+        <Slider.PrevButton class="btn btn-circle bg-[#ffffff] w-[40px] !h-[40px]">
           <Icon
-            class="text-base-100"
-            size={24}
-            id="ChevronLeft"
+            size={18}
+            id="Banner-arrow-left"
             strokeWidth={3}
           />
         </Slider.PrevButton>
       </div>
       <div class="flex items-center justify-center z-10 col-start-3 row-start-2">
-        <Slider.NextButton class="btn btn-circle glass">
+        <Slider.NextButton class="btn btn-circle bg-[#ffffff] w-[40px] !h-[40px]">
           <Icon
-            class="text-base-100"
-            size={24}
-            id="ChevronRight"
+            size={18}
+            id="Banner-arrow-right"
             strokeWidth={3}
           />
         </Slider.NextButton>
@@ -219,9 +218,9 @@ function Buttons() {
   );
 }
 
-function BannerCarousel(props: Props) {
+function BannerCarousel(props: SectionProps<ReturnType<typeof loader>>) {
   const id = useId();
-  const { images, preload, interval } = { ...DEFAULT_PROPS, ...props };
+  const { images, preload, interval, device } = { ...DEFAULT_PROPS, ...props };
 
   return (
     <div
@@ -260,4 +259,11 @@ function BannerCarousel(props: Props) {
   );
 }
 
+export const loader = (props: Props, _req: Request, ctx: FnContext) => {
+  return {
+    ...props,
+    device: ctx.device,
+  };
+};
+
 export default BannerCarousel;
diff --git a/components/ui/CasesComponentDesktop.tsx b/components/ui/CasesComponentDesktop.tsx
new file mode 100644
index 0000000..f266f30
--- /dev/null
+++ b/components/ui/CasesComponentDesktop.tsx
@@ -0,0 +1,261 @@
+import { clx } from "$store/sdk/clx.ts";
+import type { ImageWidget } from "apps/admin/widgets.ts";
+// import { FnContext, SectionProps } from "deco/mod.ts";
+
+interface TagProps{
+    imageTag?:ImageWidget;
+    nameTag?: string; 
+}
+
+interface PropsImage{
+    imageLogo?: ImageWidget;
+    alt?: string;
+    href?:string;
+    widthLogo?:number;    
+    heightLogo?:number;
+    imageBackground?: ImageWidget;
+    widthImageBackground?:number;    
+    heightImageBackground?:number;    
+    infoPorcentagem?:string;
+    infoText?:string;
+    icon?:ImageWidget;
+
+    /********CONFIGURAÇÃO DO HOVER******* */
+
+    imageLogoHover?: ImageWidget;
+    imageLogoMobileHover?: ImageWidget;   
+    widthLogoHover?:number; 
+    heightLogoHover?:number;  
+    imageBackgroundHover?: ImageWidget;
+    widthImageBackgroundHover?:number;
+    heightImageBackgroundHover?:number; 
+    iconHover?:ImageWidget;  
+    tagProps?:TagProps[]
+}
+
+interface Props{
+    settingsImage?:PropsImage[];
+}
+
+// function CasesComponentDesktop(props: SectionProps<ReturnType<typeof loader>>){
+function CasesComponentDesktop({ settingsImage }:Props){
+
+    function handleMouserHover( e:MouseEvent ){
+        const { target } = e;
+        const modeDesktop = globalThis.matchMedia("(min-width: 1281px)").matches;
+        const modePortatil = globalThis.matchMedia('(min-width:1024px) and (max-width: 1280px)').matches;
+        const modeTablet = globalThis.matchMedia('(min-width:768px) and (max-width: 1024px)').matches;
+        
+        if(!target) return;
+        
+        if( target && target instanceof HTMLElement ){
+            const cardElement = target?.closest('.n1-cases-card');
+            const bgWidth = cardElement?.querySelector<HTMLElement>('.bg-width')?.dataset.bgwidth;
+            const bgWidthHover = cardElement?.querySelector<HTMLElement>('.bg-width-hover')?.dataset.bgwidthhover;
+            const logoWidth = cardElement?.querySelector<HTMLElement>('.logo-width')?.dataset.logowidth;
+            const logoWidthHover = cardElement?.querySelector<HTMLElement>('.logo-width-hover')?.dataset.logowidthhover;
+
+            if(modeDesktop){
+                switch (e.type) {
+                    case 'mouseleave':
+                        cardElement?.classList.remove('is-active');
+                        bgWidth && cardElement?.setAttribute('style', `width: ${bgWidth}px`);
+                        bgWidth && cardElement?.querySelector<HTMLElement>('.n1-cases-card__item--hover')?.style?.width == bgWidth ? bgWidth + 'px' : '300px';
+                        logoWidth && cardElement?.querySelector<HTMLElement>('.n1-cases-card__logo--hover')?.setAttribute('style', `width: ${logoWidth}px`);
+                    break;
+                    case 'mouseover':
+                        cardElement?.classList.add('is-active');
+                        bgWidthHover && cardElement?.setAttribute('style', `width: ${bgWidthHover}px`);
+                        bgWidthHover && cardElement?.querySelector<HTMLElement>('.n1-cases-card__item--hover')?.style?.width == bgWidthHover ? bgWidthHover + 'px' : '560px';
+                        logoWidthHover && cardElement?.querySelector<HTMLElement>('.n1-cases-card__logo--hover')?.setAttribute('style', `width: ${logoWidthHover}px`);
+                    break;
+                }
+            }
+
+            if( modePortatil ){
+                switch (e.type) {
+                    case 'mouseleave':
+                        cardElement?.classList.remove('is-active');
+                        bgWidth && cardElement?.setAttribute('style', `width: ${bgWidth}px`);
+                        bgWidth && cardElement?.querySelector<HTMLElement>('.n1-cases-card__item--hover')?.style?.width == bgWidth ? (Number(bgWidth) / 2) + 'px' : '300px';
+                        logoWidth && cardElement?.querySelector<HTMLElement>('.n1-cases-card__logo--hover')?.setAttribute('style', `width: ${logoWidth}px`);
+                    break;
+                    case 'mouseover':
+                        cardElement?.classList.add('is-active');
+                        bgWidthHover && cardElement?.setAttribute('style', `width: ${Number(bgWidthHover)/1.7}px`);
+                        bgWidthHover && cardElement?.querySelector<HTMLElement>('.n1-cases-card__item--hover')?.style?.width == bgWidthHover ? (Number(bgWidthHover)) + 'px' : '360px';
+                    break;
+                }
+            }
+
+            if( modeTablet ){
+                switch (e.type) {
+                    case 'mouseleave':
+                        cardElement?.classList.remove('is-active');
+                        bgWidth && cardElement?.setAttribute('style', `width: ${bgWidth}px`);
+                        bgWidth && cardElement?.querySelector<HTMLElement>('.n1-cases-card__item--hover')?.style?.width == bgWidth ? (Number(bgWidth) / 2) + 'px' : '300px';
+                        logoWidth && cardElement?.querySelector<HTMLElement>('.n1-cases-card__logo--hover')?.setAttribute('style', `width: ${logoWidth}px`);
+                    break;
+                    case 'mouseover':
+                        cardElement?.classList.add('is-active');
+                        bgWidthHover && cardElement?.setAttribute('style', `width: ${Number(bgWidthHover)/1.7}px`);
+                        bgWidthHover && cardElement?.querySelector<HTMLElement>('.n1-cases-card__item--hover')?.style?.width == bgWidthHover ? (Number(bgWidthHover)) + 'px' : '360px';
+                    break;
+                }
+            }
+        }
+    }    
+
+    return(
+        <>
+            <div class={clx(`sm:col-[1_/_2_span] grid sm:grid-cols-[repeat(2,_1fr)] lg:grid-cols-[repeat(3,_1fr)] sm:justify-center md:mt-[64px] gap-x-[18px] sm:gap-y-[10px]`)} 
+                onMouseOver={handleMouserHover}>
+
+                {settingsImage && settingsImage.length > 1 && settingsImage.map(({
+                    imageLogo,
+                    alt,
+                    href,
+                    widthLogo,  
+                    heightLogo,
+                    imageBackground,                              
+                    widthImageBackground,                              
+                    heightImageBackground,   
+                    infoPorcentagem, 
+                    infoText,
+                    icon,
+                    imageLogoHover,   
+                    imageBackgroundHover,   
+                    widthLogoHover,  
+                    widthImageBackgroundHover,    
+                    heightImageBackgroundHover, 
+                    iconHover,  
+                    tagProps                         
+                })=>{
+
+                    const nameScape = alt?.replaceAll(/\s/g, '-').toLowerCase();
+
+                    return(
+                        <>
+                            <a href={`${href ? href : "javascript:void(0)"}`}
+                                class="relative n1-cases-card cursor-grab [transition:all_.375s_linear] md:w-0 mobile:mb-[10px]"  
+                                onMouseLeave={handleMouserHover}
+                                style={{
+                                    height : `${heightImageBackgroundHover ? heightImageBackgroundHover + 'px' : '500px'}`,
+                                    pointerEvents : `${href ? 'all' : 'grab'}`
+                                }}>
+
+                                {widthLogo && (
+                                    <input type="hidden" class="logo-width" data-logowidth={widthLogo} />
+                                )}	
+
+                                {widthLogoHover && (
+                                    <input type="hidden" class="logo-width-hover" data-logowidthhover={widthLogoHover} />
+                                )}	                                            
+
+                                {widthImageBackground && (
+                                    <input type="hidden" class="bg-width" data-bgwidth={widthImageBackground} />
+                                )}
+
+                                {widthImageBackgroundHover && (
+                                    <input type="hidden" class="bg-width-hover" data-bgwidthhover={widthImageBackgroundHover} />
+                                )}
+
+                                <div class="mobile:hidden n1-cases-card__item rounded-[20px] portatil:!w-[270px]"
+                                    style={{ 
+                                        backgroundImage : `url(${imageBackground})`,
+                                        backgroundColor : "#ffffff",
+                                        width: `${widthImageBackground ? widthImageBackground + 'px' : '300px'}`,
+                                        height: `${heightImageBackground ? heightImageBackground + 'px' : '500px'}`,
+                                        backgroundSize : 'cover',
+                                    }} >
+                                    <div class="flex flex-col justify-between h-full pr-[28px] pb-[29px] pl-[25px]"
+                                        style={{ paddingTop : `${ nameScape && nameScape === 'costa' || nameScape === 'costa-atacado' ? '41px' : '71px' }` }}
+                                    >
+
+                                        {imageLogo && (
+                                            <img src={`${imageLogo}`} class="w-full n1-cases-card__logo duration-200" 
+                                                style={{ 
+                                                    width: `${widthLogo ? widthLogo + 'px' : '100%'}`,
+                                                    height: `${heightLogo ? heightLogo + 'px' : 'auto'}`,
+                                                }}                                                  
+                                            />
+                                        )}
+
+                                        <div class="flex justify-between items-center">
+                                            <div class="flex flex-col">
+                                                {infoPorcentagem && (
+                                                    <span class="font-archimoto-medium md:text-50 text-primary font-black">{ infoPorcentagem }</span>
+                                                )}
+                                                {infoText && (
+                                                        <span class="font-archimoto-medium md:text-27 text-primary font-black uppercase">{ infoText }</span>
+                                                )}
+                                            </div>
+                                            {icon && (
+                                                <img src={`${icon}`} />
+                                            )}
+                                        </div>
+                                    </div>
+                                </div>
+
+                                {/* EFEITO HOVER  */}                                
+                                <div 
+                                    class={clx(`n1-cases-card__item--hover md:invisible md:opacity-0 mobile:w-[346px] tablet:!max-w-[300px] mobile:min-h-[342px] 
+                                        absolute top-0 left-0 duration-300 [transition:all_.2s_linear] rounded-[20px] is-active`)}
+                                    style={{ 
+                                        backgroundImage : `${ imageBackgroundHover && 'url('+imageBackgroundHover+')'}`,
+                                        height: `${heightImageBackgroundHover ? heightImageBackgroundHover + 'px' : '500px'}`,
+                                        backgroundSize : 'cover',
+                                    }} 
+                                >
+
+                                    <div class="flex flex-col justify-between h-full pt-[71px] pr-[28px] pb-[29px] pl-[25px]"
+                                        style={{ paddingTop : `${ nameScape && nameScape === 'costa' || nameScape === 'costa-atacado' ? '41px' : '71px' }` }}  
+                                    >
+
+                                        {imageLogoHover && (
+                                            <img src={`${imageLogoHover}`} class="n1-cases-card__logo--hover duration-200 h-auto"
+                                            />
+                                        )}
+
+                                        <div class="grid grid-cols-[repeat(2,_auto)] justify-between items-end">
+                                            <div>
+                                                <div class="flex flex-col">
+                                                    {infoPorcentagem && (
+                                                        <span class="font-archimoto-medium md:text-50 text-[#ffffff] font-black">{ infoPorcentagem }</span>
+                                                    )}
+                                                    {infoText && (
+                                                        <span class="font-archimoto-medium md:text-27 text-[#ffffff] font-black uppercase">{ infoText }</span>
+                                                    )}
+                                                </div>
+
+                                                <div class="grid grid-cols-[repeat(3,auto)] grid-rows-[repeat(2,_1fr)] justify-between gap-[16px] mt-[30px]">
+                                                    {tagProps && tagProps.length > 1 && tagProps.map(({ imageTag, nameTag })=>{
+                                                        return(
+                                                            <>
+                                                                <div class="flex items-center justify-left">
+                                                                    {imageTag && (
+                                                                        <img src={`${imageTag}`} alt={`${nameTag ? nameTag : 'Tag'}`} />
+                                                                    )}
+                                                                </div>
+                                                            </>
+                                                        )
+                                                    })}
+                                                </div>
+                                            </div>
+
+                                            {iconHover && (
+                                                <img src={`${iconHover}`} />
+                                            )}
+                                        </div>
+                                    </div>
+                                </div>
+                            </a>                                
+                        </>
+                    )
+                })}
+            </div>        
+        </>
+    )
+}
+
+export default CasesComponentDesktop;
\ No newline at end of file
diff --git a/components/ui/CasesComponentMobile.tsx b/components/ui/CasesComponentMobile.tsx
new file mode 100644
index 0000000..2c73d7a
--- /dev/null
+++ b/components/ui/CasesComponentMobile.tsx
@@ -0,0 +1,133 @@
+import { clx } from "$store/sdk/clx.ts";
+import type { ImageWidget } from "apps/admin/widgets.ts";
+import Slider from "$store/components/ui/Slider.tsx";
+import SliderJS from "$store/islands/SliderJS.tsx";
+import { useId } from "preact/hooks";
+
+interface TagProps{
+    imageTag?:ImageWidget;
+    nameTag?: string; 
+}
+
+interface PropsImage{
+    imageLogo?: ImageWidget;
+    alt?: string;
+    href?:string;
+    widthLogo?:number;    
+    heightLogo?:number;
+    imageBackground?: ImageWidget;
+    widthImageBackground?:number;    
+    heightImageBackground?:number;    
+    infoPorcentagem?:string;
+    infoText?:string;
+    icon?:ImageWidget;
+
+    /********CONFIGURAÇÃO DO HOVER******* */
+
+    imageLogoHover?: ImageWidget;
+    imageLogoMobileHover?: ImageWidget;   
+    widthLogoHover?:number; 
+    heightLogoHover?:number;  
+    imageBackgroundHover?: ImageWidget;
+    widthImageBackgroundHover?:number;
+    heightImageBackgroundHover?:number; 
+    iconHover?:ImageWidget;   
+    tagProps?:TagProps[]
+}
+
+interface Props{
+    settingsImage?:PropsImage[];
+}
+
+function CasesComponentMobile({ settingsImage }:Props){
+    const id = useId();
+
+    return(
+        <>
+            <div class="n1-cases-card__mobile tablet:mt-[64px] tablet:max-w-full tablet:w-full tablet:grid tablet:col-[1_/_2_span]" id={id}>
+                <Slider class="n1-cases-card__carousel carousel carousel-center w-full flex py-[0] tablet:w-full gap-x-[11px] tablet:gap-x-[18px]">           
+                    {settingsImage && settingsImage.length > 1 && settingsImage.map(({
+                        alt,
+                        href,  
+                        infoPorcentagem, 
+                        infoText,
+                        imageLogoHover, 
+                        widthLogoHover,  
+                        imageBackgroundHover, 
+                        iconHover,
+                        tagProps,                            
+                    }, index)=>{
+                        return(
+                            <>
+                                <Slider.Item index={index} class="n1-cases-card__item carousel-item  mobile:w-[95%] tablet:w-[31.666%] w-full">
+                                    <a href={`${href ? href : "javascript:void(0)"}`}
+                                        class="relative n1-cases-card cursor-grab h-[342px] w-full [transition:all_.375s_linear]"
+                                        style={{ pointerEvents : `${href ? 'all' : 'grab'}` }}
+                                    >
+
+                                        <div 
+                                            class={clx(`n1-cases-card__item--hover w-full absolute top-0 left-0 duration-300 
+                                            [transition:all_.2s_linear] rounded-[20px] is-active`)}
+                                            style={{ 
+                                                backgroundImage : `${ imageBackgroundHover && 'url('+imageBackgroundHover+')'}`,
+                                                height: '342px',
+                                                backgroundSize : 'cover',
+                                            }} 
+                                        >
+                                            <div class="flex flex-col justify-between h-full pt-[38px] pb-[24px] px-[18px]">                
+                                                {imageLogoHover && (
+                                                    <img src={`${imageLogoHover}`} class="w-full h-auto n1-cases-card__image duration-200" alt={alt ? alt : "Logo"}
+                                                        style={{ maxWidth : `${widthLogoHover ? widthLogoHover + 'px' : '346px' }` }}
+                                                    />
+                                                )}
+
+                                                <div class="grid grid-cols-[repeat(2,_auto)] justify-between items-end">
+                                                    <div class="n1-cases__info">
+                                                        <div class="flex flex-col">
+                                                            {infoPorcentagem && (
+                                                                <span class="font-archimoto-medium text-60 text-[#ffffff] font-black">{ infoPorcentagem }</span>
+                                                            )}
+                                                            {infoText && (
+                                                                <span class="font-archimoto-medium text-25 text-[#ffffff] font-black uppercase">{ infoText }</span>
+                                                            )}
+                                                        </div>
+
+                                                        <div class={clx(`n1-cases-card__tags grid grid-cols-[repeat(3,1fr)] tablet:grid-cols-[repeat(2,1fr)] 
+                                                            grid-rows-[repeat(2,_1fr)] justify-between gap-x-[4px] gap-y-[3px] mt-[30px]`)}
+                                                        >
+
+                                                            {tagProps && tagProps.length > 1 && tagProps.map(({ imageTag, nameTag })=>{
+                                                                return(
+                                                                    <>
+                                                                        <div class="flex items-center justify-left w-[70px]">
+                                                                            {imageTag && (
+                                                                                <img src={`${imageTag}`} alt={`${nameTag ? nameTag : 'Tag'}`} />
+                                                                            )}
+                                                                        </div>
+                                                                    </>
+                                                                )
+                                                            })}
+                                                        </div>
+                                                    </div>
+
+                                                    {iconHover && (
+                                                        <div class="flex justify-end w-[42px] n1-cases__icon-mobile">
+                                                            <img src={`${iconHover}`} alt={alt ? alt : "Icon"} />
+                                                        </div>
+                                                    )}
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </a>
+                                </Slider.Item>
+                            </>
+                        )
+                    })}
+                </Slider> 
+            </div>
+            <SliderJS rootId={id} />        
+        </>
+    )
+}
+
+export default CasesComponentMobile;
\ No newline at end of file
diff --git a/components/ui/CasesComponentTextWithButton.tsx b/components/ui/CasesComponentTextWithButton.tsx
new file mode 100644
index 0000000..24e14e3
--- /dev/null
+++ b/components/ui/CasesComponentTextWithButton.tsx
@@ -0,0 +1,47 @@
+
+import LinkWithOptionArrow from '$store/components/ui/LinkWithOptionArrow.tsx';
+import { clx } from "$store/sdk/clx.ts";
+
+interface Props{
+    subtitle?:string;
+    text?:string;
+    textButton?:string;
+    hrefButton?:string;
+    activeArrow?: boolean;
+}
+
+
+function CasesComponentTextWithButton({ subtitle, text, textButton, hrefButton, activeArrow }:Props ){
+    return(
+        <>
+            <div class="mobile:my-[24px] text-[#ffffff] flex items-center justify-between">
+                <div>
+                    {subtitle && (
+                        <h2 class="n1-cases-component__title font-archimoto-medium text-24 leading-[28.8px] md:text-56 md:leading-[20px]" 
+                        dangerouslySetInnerHTML={{__html: subtitle}}> </h2>
+                    )}
+                    {text && (
+                        <span class="hidden md:flex font-noto-sans text-20 leading-[26px]"> {text} </span>
+                    )}
+                </div>
+            </div>
+
+            {textButton && (
+                <div class={clx(`mobile:mt-[15px] mobile:mb-[20px] mobile:order-3 mobile:justify-start 
+                    col-[2] flex items-center justify-end md:w-[90%] my-0 md:mx-auto`)}
+                >
+                    <LinkWithOptionArrow 
+                        text={textButton} 
+                        link={hrefButton} 
+                        activeArrow={activeArrow} 
+                        width={'236'} 
+                        fontSize='16'
+                        margin={'0'}
+                    />
+                </div>
+            )}        
+        </>
+    )
+}
+
+export default CasesComponentTextWithButton;
\ No newline at end of file
diff --git a/components/ui/Icon.tsx b/components/ui/Icon.tsx
index c04dd71..3ff8e13 100644
--- a/components/ui/Icon.tsx
+++ b/components/ui/Icon.tsx
@@ -51,7 +51,9 @@ export type AvailableIcons =
   | "AlertError"
   | "share"
   | "ArrowUpMenuMobile"
-  | "ArrowDownMenuMobile";
+  | "ArrowDownMenuMobile"
+  | "Banner-arrow-left"
+  | "Banner-arrow-right";
 
 interface Props extends JSX.SVGAttributes<SVGSVGElement> {
   /**
diff --git a/components/ui/LinkButtonWithOptionArrow.tsx b/components/ui/LinkTelephoneWithOptionArrow.tsx
similarity index 60%
rename from components/ui/LinkButtonWithOptionArrow.tsx
rename to components/ui/LinkTelephoneWithOptionArrow.tsx
index fc9e86c..71c6d12 100644
--- a/components/ui/LinkButtonWithOptionArrow.tsx
+++ b/components/ui/LinkTelephoneWithOptionArrow.tsx
@@ -1,12 +1,15 @@
 import { clx } from "$store/sdk/clx.ts";
 
 interface Props{
+    text?:string;
     telephone?: string  | undefined;
     activeArrow?: boolean;
     width?: string;
+    customClass?:string;
+    fontSize?:string;
 }
 
-function LinkButtonWithOptionArrow( {telephone, activeArrow, width}:Props ){
+function LinkTelephoneWithOptionArrow( {text, telephone, activeArrow, width, customClass, fontSize}:Props ){
     const formatNumber = telephone && telephone.replace(/\D/g, '');
     
     if (!formatNumber) {
@@ -19,15 +22,20 @@ function LinkButtonWithOptionArrow( {telephone, activeArrow, width}:Props ){
             target="_blank" 
             aria-label="Converse no WhatsApp" 
             alt="Converse no WhatsApp" 
-            class={clx(`${width ? `w-${width} mobile:my-0 mobile:mx-auto` : 'mobile:w-[130px]' } 
-                mobile:relative mobile:py-[7px] mobile:mr-[20px] px-[10px] py-[10px] group flex items-center 
-                text-16 uppercase bg-accent n1-btn-header-item--rounded border-none w-[142px] ml-[40px]`)}
-        >
-            <span class="text-primary text-16 font-archimoto-medium pt-[3px] mobile:mr-[25px] md:mr-[8px] font-black">
-                WhatsApp
+            class={clx(`${width ? `mobile:my-0 mobile:mx-auto` : 'mobile:w-[130px]' } 
+                mobile:relative mobile:py-[7px] mobile:mr-[20px] px-[10px] py-[10px] group flex items-center relative
+                text-16 uppercase bg-accent n1-btn-header-item--rounded border-none w-[142px] ml-[40px] ${customClass ? customClass : ''}`)}
+            style={{ width : `${width ? width + 'px' : '130px'}`}}
+        >            
+            <span 
+                class={`${fontSize ? 'text-16' : 'mobile:text-14'} text-primary text-16 mobile:text-14 font-archimoto-medium pt-[3px] !mobile:mr-[25px] font-black`}
+                style={{ marginRight: `${activeArrow ? '30px' : '0'}`}}
+            >
+                {text ? text : 'WhatsApp'}
             </span>
+
             {activeArrow && (
-                <div class="rounded-[50%] p-[5px] bg-[#F8BC33] mobile:absolute mobile:right-[8px]">
+                <div class="rounded-[50%] p-[5px] bg-[#F8BC33] mobile:absolute mobile:right-[8px] absolute right-[10px]">
                     <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
                         <path fill-rule="evenodd" clip-rule="evenodd" d="M5.83333 5.83333C5.83333 5.3731 6.20643 5 6.66667 5H14.1667C14.6269 5 15 5.3731 15 5.83333V13.3333C15 13.7936 14.6269 14.1667 14.1667 14.1667C13.7064 14.1667 13.3333 13.7936 13.3333 13.3333V7.84518L6.42259 14.7559C6.09715 15.0814 5.56951 15.0814 5.24408 14.7559C4.91864 14.4305 4.91864 13.9028 5.24408 13.5774L12.1548 6.66667H6.66667C6.20643 6.66667 5.83333 6.29357 5.83333 5.83333Z" fill="#0C1F59"/>
                     </svg>
@@ -37,4 +45,4 @@ function LinkButtonWithOptionArrow( {telephone, activeArrow, width}:Props ){
     )
 }
 
-export default LinkButtonWithOptionArrow;
\ No newline at end of file
+export default LinkTelephoneWithOptionArrow;
\ No newline at end of file
diff --git a/components/ui/LinkWithOptionArrow.tsx b/components/ui/LinkWithOptionArrow.tsx
new file mode 100644
index 0000000..b234664
--- /dev/null
+++ b/components/ui/LinkWithOptionArrow.tsx
@@ -0,0 +1,56 @@
+import { clx } from "$store/sdk/clx.ts";
+
+interface Props{
+    text?:string;
+    link?: string  | undefined;
+    activeArrow?: boolean;
+    width?: string;
+    customClass?:string;
+    fontSize?:string;
+    margin?:string;
+    activeArrowBlue?:boolean;
+}
+
+function LinkWithOptionArrow( {text, link, activeArrow, width, customClass, fontSize, margin, activeArrowBlue}:Props ){
+
+    return(
+        <a 
+            href={`${link ? link : "javascript:void(0)"}`} 
+            style={{ 
+                width : `${width ? width : '142'}px`,
+                pointerEvents : `${link ? 'all' : 'none'}`
+            }}
+            target="_blank" 
+            class={clx(`${width && !margin ? `mobile:my-0 mobile:mx-auto` : margin ? 'ml-[0]' : 'mobile:w-[130px]' } ${activeArrowBlue ? 'bg-[#ffffff]' : 'bg-transparent'}
+                n1-Link-with-option-arrow mobile:relative mobile:py-[7px] px-[10px] py-[10px] group flex items-center relative min-w-[125px]
+                border border-solid border-[#ffffff] text-16 uppercase n1-btn-header-item--rounded ${customClass ? customClass : ''}`)}
+        >
+            <span 
+                class={`${activeArrowBlue ? 'text-primary' : 'text-[#ffffff]'} text-16 font-archimoto-medium pt-[3px] !mobile:mr-[25px] font-black`}
+                style={{ 
+                    fontSize: `${fontSize ? fontSize + 'px' : '16px' }`,
+                    marginRight: `${activeArrow || activeArrowBlue ? '20px' : '0'}`
+                }}>
+                {text ? text : ''}
+            </span>
+            {activeArrow && (
+                <div class="rounded-[50%] p-[5px] mobile:absolute mobile:right-[8px] absolute right-[10px]">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
+                        <path fill-rule="evenodd" clip-rule="evenodd" d="M5.25 6.22656C5.25 5.81235 5.58579 5.47656 6 5.47656H12.75C13.1642 5.47656 13.5 5.81235 13.5 6.22656V12.9766C13.5 13.3908 13.1642 13.7266 12.75 13.7266C12.3358 13.7266 12 13.3908 12 12.9766V8.03722L5.78033 14.2569C5.48744 14.5498 5.01256 14.5498 4.71967 14.2569C4.42678 13.964 4.42678 13.4891 4.71967 13.1962L10.9393 6.97656H6C5.58579 6.97656 5.25 6.64078 5.25 6.22656Z" fill="white"/>
+                    </svg>
+                </div>
+            )}
+
+            {activeArrowBlue && (
+                <div class="p-[5px] mobile:absolute mobile:right-[8px] absolute right-[5px]">                
+                    <svg width="23" height="23" viewBox="0 0 23 23" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <path d="M0.278564 11.273C0.278564 5.12786 5.26018 0.14624 11.4053 0.14624V0.14624C17.5505 0.14624 22.5321 5.12786 22.5321 11.273V11.273C22.5321 17.4181 17.5505 22.3998 11.4053 22.3998V22.3998C5.26018 22.3998 0.278564 17.4181 0.278564 11.273V11.273Z" fill="#F3F4F7"/>
+                        <path fill-rule="evenodd" clip-rule="evenodd" d="M8.2646 8.1324C8.2646 7.78549 8.54582 7.50427 8.89272 7.50427H14.5458C14.8927 7.50427 15.174 7.78549 15.174 8.1324V13.7855C15.174 14.1324 14.8927 14.4136 14.5458 14.4136C14.1989 14.4136 13.9177 14.1324 13.9177 13.7855V9.64882L8.70875 14.8578C8.46345 15.1031 8.06575 15.1031 7.82045 14.8578C7.57515 14.6125 7.57515 14.2148 7.82045 13.9695L13.0294 8.76052H8.89272C8.54582 8.76052 8.2646 8.4793 8.2646 8.1324Z" fill="#0C1F59"/>
+                    </svg>
+                </div> 
+            )}                       
+        </a>        
+    )
+}
+
+export default LinkWithOptionArrow;
\ No newline at end of file
diff --git a/components/ui/Slider.tsx b/components/ui/Slider.tsx
index c0854af..b56c44a 100644
--- a/components/ui/Slider.tsx
+++ b/components/ui/Slider.tsx
@@ -1,14 +1,15 @@
 import type { ComponentChildren, JSX } from "preact";
 
-function Dot({ index, children }: {
+function Dot({ index, classes, children }: {
   index: number;
+  classes?:string;
   children: ComponentChildren;
 }) {
   return (
     <button
       data-dot={index}
       aria-label={`go to slider item ${index}`}
-      class="focus:outline-none group"
+      class={`focus:outline-none group n1-banner-btn__dot ${classes ? classes : ""}`}
     >
       {children}
     </button>
diff --git a/fresh.gen.ts b/fresh.gen.ts
index 3f7d0a3..5d46c35 100644
--- a/fresh.gen.ts
+++ b/fresh.gen.ts
@@ -9,6 +9,7 @@ import * as $AddToCartButton_shopify from "./islands/AddToCartButton/shopify.tsx
 import * as $AddToCartButton_vnda from "./islands/AddToCartButton/vnda.tsx";
 import * as $AddToCartButton_vtex from "./islands/AddToCartButton/vtex.tsx";
 import * as $AddToCartButton_wake from "./islands/AddToCartButton/wake.tsx";
+import * as $CasesComponent from "./islands/CasesComponent.tsx";
 import * as $Header_Buttons from "./islands/Header/Buttons.tsx";
 import * as $Header_Cart_linx from "./islands/Header/Cart/linx.tsx";
 import * as $Header_Cart_nuvemshop from "./islands/Header/Cart/nuvemshop.tsx";
@@ -18,6 +19,7 @@ import * as $Header_Cart_vtex from "./islands/Header/Cart/vtex.tsx";
 import * as $Header_Cart_wake from "./islands/Header/Cart/wake.tsx";
 import * as $Header_Drawers from "./islands/Header/Drawers.tsx";
 import * as $Header_Searchbar from "./islands/Header/Searchbar.tsx";
+import * as $Mosaic from "./islands/Mosaic.tsx";
 import * as $Newsletter from "./islands/Newsletter.tsx";
 import * as $OutOfStock from "./islands/OutOfStock.tsx";
 import * as $ProductImageZoom from "./islands/ProductImageZoom.tsx";
@@ -39,6 +41,7 @@ const manifest = {
     "./islands/AddToCartButton/vnda.tsx": $AddToCartButton_vnda,
     "./islands/AddToCartButton/vtex.tsx": $AddToCartButton_vtex,
     "./islands/AddToCartButton/wake.tsx": $AddToCartButton_wake,
+    "./islands/CasesComponent.tsx": $CasesComponent,
     "./islands/Header/Buttons.tsx": $Header_Buttons,
     "./islands/Header/Cart/linx.tsx": $Header_Cart_linx,
     "./islands/Header/Cart/nuvemshop.tsx": $Header_Cart_nuvemshop,
@@ -48,6 +51,7 @@ const manifest = {
     "./islands/Header/Cart/wake.tsx": $Header_Cart_wake,
     "./islands/Header/Drawers.tsx": $Header_Drawers,
     "./islands/Header/Searchbar.tsx": $Header_Searchbar,
+    "./islands/Mosaic.tsx": $Mosaic,
     "./islands/Newsletter.tsx": $Newsletter,
     "./islands/OutOfStock.tsx": $OutOfStock,
     "./islands/ProductImageZoom.tsx": $ProductImageZoom,
diff --git a/islands/CasesComponent.tsx b/islands/CasesComponent.tsx
new file mode 100644
index 0000000..485ae73
--- /dev/null
+++ b/islands/CasesComponent.tsx
@@ -0,0 +1 @@
+export { default } from '$store/sections/Content/CasesComponent.tsx';
\ No newline at end of file
diff --git a/islands/Mosaic.tsx b/islands/Mosaic.tsx
new file mode 100644
index 0000000..0b91e07
--- /dev/null
+++ b/islands/Mosaic.tsx
@@ -0,0 +1 @@
+export { default } from '$store/sections/Content/Mosaic.tsx';
\ No newline at end of file
diff --git a/manifest.gen.ts b/manifest.gen.ts
index 312ac8a..0bd971d 100644
--- a/manifest.gen.ts
+++ b/manifest.gen.ts
@@ -14,48 +14,54 @@ import * as $$$$$$6 from "./sections/Category/CategoryGrid.tsx";
 import * as $$$$$$7 from "./sections/Category/CategoryList.tsx";
 import * as $$$$$$8 from "./sections/Content/Benefits.tsx";
 import * as $$$$$$9 from "./sections/Content/BlogPosts.tsx";
-import * as $$$$$$10 from "./sections/Content/CallToAction.tsx";
-import * as $$$$$$11 from "./sections/Content/Faq.tsx";
-import * as $$$$$$12 from "./sections/Content/Features.tsx";
-import * as $$$$$$13 from "./sections/Content/Hero.tsx";
-import * as $$$$$$14 from "./sections/Content/ImageSection.tsx";
-import * as $$$$$$15 from "./sections/Content/Intro.tsx";
-import * as $$$$$$16 from "./sections/Content/Logos.tsx";
-import * as $$$$$$17 from "./sections/Content/Partners.tsx";
-import * as $$$$$$18 from "./sections/Content/RichText.tsx";
-import * as $$$$$$19 from "./sections/Content/Table.tsx";
-import * as $$$$$$20 from "./sections/Content/Testimonials.tsx";
-import * as $$$$$$21 from "./sections/Content/TextWithImage.tsx";
-import * as $$$$$$22 from "./sections/Footer/Footer.tsx";
-import * as $$$$$$23 from "./sections/Gallery.tsx";
-import * as $$$$$$24 from "./sections/Header/Header.tsx";
-import * as $$$$$$25 from "./sections/Images/BannerGrid.tsx";
-import * as $$$$$$26 from "./sections/Images/Carousel.tsx";
-import * as $$$$$$27 from "./sections/Images/ImageGallery.tsx";
-import * as $$$$$$28 from "./sections/Images/ShoppableBanner.tsx";
-import * as $$$$$$29 from "./sections/Layout/Container.tsx";
-import * as $$$$$$30 from "./sections/Layout/Flex.tsx";
-import * as $$$$$$31 from "./sections/Layout/Grid.tsx";
-import * as $$$$$$32 from "./sections/Layout/GridItem.tsx";
-import * as $$$$$$33 from "./sections/Links/LinkTree.tsx";
-import * as $$$$$$34 from "./sections/Links/Shortcuts.tsx";
-import * as $$$$$$35 from "./sections/Miscellaneous/CampaignTimer.tsx";
-import * as $$$$$$36 from "./sections/Miscellaneous/CookieConsent.tsx";
-import * as $$$$$$37 from "./sections/Miscellaneous/Slide.tsx";
-import * as $$$$$$38 from "./sections/Newsletter/Newsletter.tsx";
-import * as $$$$$$39 from "./sections/Product/ImageGalleryFrontBack.tsx";
-import * as $$$$$$40 from "./sections/Product/ImageGallerySlider.tsx";
-import * as $$$$$$41 from "./sections/Product/NotFound.tsx";
-import * as $$$$$$42 from "./sections/Product/NotFoundChallenge.tsx";
-import * as $$$$$$43 from "./sections/Product/ProductInfo.tsx";
-import * as $$$$$$44 from "./sections/Product/ProductShelf.tsx";
-import * as $$$$$$45 from "./sections/Product/ProductShelfTabbed.tsx";
-import * as $$$$$$46 from "./sections/Product/SearchResult.tsx";
-import * as $$$$$$47 from "./sections/Product/ShelfWithImage.tsx";
-import * as $$$$$$48 from "./sections/Product/Wishlist.tsx";
-import * as $$$$$$49 from "./sections/Social/InstagramPosts.tsx";
-import * as $$$$$$50 from "./sections/Social/WhatsApp.tsx";
-import * as $$$$$$51 from "./sections/Theme/Theme.tsx";
+import * as $$$$$$10 from "./sections/Content/BrandAnimation.tsx";
+import * as $$$$$$11 from "./sections/Content/CallToAction.tsx";
+import * as $$$$$$12 from "./sections/Content/CasesComponent.tsx";
+import * as $$$$$$13 from "./sections/Content/Faq.tsx";
+import * as $$$$$$14 from "./sections/Content/Features.tsx";
+import * as $$$$$$15 from "./sections/Content/Hero.tsx";
+import * as $$$$$$16 from "./sections/Content/ImageSection.tsx";
+import * as $$$$$$17 from "./sections/Content/Intro.tsx";
+import * as $$$$$$18 from "./sections/Content/Logos.tsx";
+import * as $$$$$$19 from "./sections/Content/Mosaic.tsx";
+import * as $$$$$$20 from "./sections/Content/Partners.tsx";
+import * as $$$$$$21 from "./sections/Content/RichText.tsx";
+import * as $$$$$$22 from "./sections/Content/Table.tsx";
+import * as $$$$$$23 from "./sections/Content/Testimonials.tsx";
+import * as $$$$$$24 from "./sections/Content/TextTopWidthCarousel.tsx";
+import * as $$$$$$25 from "./sections/Content/TextWithImage.tsx";
+import * as $$$$$$26 from "./sections/Content/TextWithImageAnimation.tsx";
+import * as $$$$$$27 from "./sections/Content/TextWithImageCustom.tsx";
+import * as $$$$$$28 from "./sections/Footer/Footer.tsx";
+import * as $$$$$$29 from "./sections/Gallery.tsx";
+import * as $$$$$$30 from "./sections/Header/Header.tsx";
+import * as $$$$$$31 from "./sections/Images/BannerGrid.tsx";
+import * as $$$$$$32 from "./sections/Images/Carousel.tsx";
+import * as $$$$$$33 from "./sections/Images/ImageGallery.tsx";
+import * as $$$$$$34 from "./sections/Images/ShoppableBanner.tsx";
+import * as $$$$$$35 from "./sections/Layout/Container.tsx";
+import * as $$$$$$36 from "./sections/Layout/Flex.tsx";
+import * as $$$$$$37 from "./sections/Layout/Grid.tsx";
+import * as $$$$$$38 from "./sections/Layout/GridItem.tsx";
+import * as $$$$$$39 from "./sections/Links/LinkTree.tsx";
+import * as $$$$$$40 from "./sections/Links/Shortcuts.tsx";
+import * as $$$$$$41 from "./sections/Miscellaneous/CampaignTimer.tsx";
+import * as $$$$$$42 from "./sections/Miscellaneous/CookieConsent.tsx";
+import * as $$$$$$43 from "./sections/Miscellaneous/Slide.tsx";
+import * as $$$$$$44 from "./sections/Newsletter/Newsletter.tsx";
+import * as $$$$$$45 from "./sections/Product/ImageGalleryFrontBack.tsx";
+import * as $$$$$$46 from "./sections/Product/ImageGallerySlider.tsx";
+import * as $$$$$$47 from "./sections/Product/NotFound.tsx";
+import * as $$$$$$48 from "./sections/Product/NotFoundChallenge.tsx";
+import * as $$$$$$49 from "./sections/Product/ProductInfo.tsx";
+import * as $$$$$$50 from "./sections/Product/ProductShelf.tsx";
+import * as $$$$$$51 from "./sections/Product/ProductShelfTabbed.tsx";
+import * as $$$$$$52 from "./sections/Product/SearchResult.tsx";
+import * as $$$$$$53 from "./sections/Product/ShelfWithImage.tsx";
+import * as $$$$$$54 from "./sections/Product/Wishlist.tsx";
+import * as $$$$$$55 from "./sections/Social/InstagramPosts.tsx";
+import * as $$$$$$56 from "./sections/Social/WhatsApp.tsx";
+import * as $$$$$$57 from "./sections/Theme/Theme.tsx";
 import * as $$$$$$$$$$$0 from "./apps/decohub.ts";
 import * as $$$$$$$$$$$1 from "./apps/site.ts";
 
@@ -77,48 +83,55 @@ const manifest = {
     "deco-sites/agencian1/sections/Category/CategoryList.tsx": $$$$$$7,
     "deco-sites/agencian1/sections/Content/Benefits.tsx": $$$$$$8,
     "deco-sites/agencian1/sections/Content/BlogPosts.tsx": $$$$$$9,
-    "deco-sites/agencian1/sections/Content/CallToAction.tsx": $$$$$$10,
-    "deco-sites/agencian1/sections/Content/Faq.tsx": $$$$$$11,
-    "deco-sites/agencian1/sections/Content/Features.tsx": $$$$$$12,
-    "deco-sites/agencian1/sections/Content/Hero.tsx": $$$$$$13,
-    "deco-sites/agencian1/sections/Content/ImageSection.tsx": $$$$$$14,
-    "deco-sites/agencian1/sections/Content/Intro.tsx": $$$$$$15,
-    "deco-sites/agencian1/sections/Content/Logos.tsx": $$$$$$16,
-    "deco-sites/agencian1/sections/Content/Partners.tsx": $$$$$$17,
-    "deco-sites/agencian1/sections/Content/RichText.tsx": $$$$$$18,
-    "deco-sites/agencian1/sections/Content/Table.tsx": $$$$$$19,
-    "deco-sites/agencian1/sections/Content/Testimonials.tsx": $$$$$$20,
-    "deco-sites/agencian1/sections/Content/TextWithImage.tsx": $$$$$$21,
-    "deco-sites/agencian1/sections/Footer/Footer.tsx": $$$$$$22,
-    "deco-sites/agencian1/sections/Gallery.tsx": $$$$$$23,
-    "deco-sites/agencian1/sections/Header/Header.tsx": $$$$$$24,
-    "deco-sites/agencian1/sections/Images/BannerGrid.tsx": $$$$$$25,
-    "deco-sites/agencian1/sections/Images/Carousel.tsx": $$$$$$26,
-    "deco-sites/agencian1/sections/Images/ImageGallery.tsx": $$$$$$27,
-    "deco-sites/agencian1/sections/Images/ShoppableBanner.tsx": $$$$$$28,
-    "deco-sites/agencian1/sections/Layout/Container.tsx": $$$$$$29,
-    "deco-sites/agencian1/sections/Layout/Flex.tsx": $$$$$$30,
-    "deco-sites/agencian1/sections/Layout/Grid.tsx": $$$$$$31,
-    "deco-sites/agencian1/sections/Layout/GridItem.tsx": $$$$$$32,
-    "deco-sites/agencian1/sections/Links/LinkTree.tsx": $$$$$$33,
-    "deco-sites/agencian1/sections/Links/Shortcuts.tsx": $$$$$$34,
-    "deco-sites/agencian1/sections/Miscellaneous/CampaignTimer.tsx": $$$$$$35,
-    "deco-sites/agencian1/sections/Miscellaneous/CookieConsent.tsx": $$$$$$36,
-    "deco-sites/agencian1/sections/Miscellaneous/Slide.tsx": $$$$$$37,
-    "deco-sites/agencian1/sections/Newsletter/Newsletter.tsx": $$$$$$38,
-    "deco-sites/agencian1/sections/Product/ImageGalleryFrontBack.tsx": $$$$$$39,
-    "deco-sites/agencian1/sections/Product/ImageGallerySlider.tsx": $$$$$$40,
-    "deco-sites/agencian1/sections/Product/NotFound.tsx": $$$$$$41,
-    "deco-sites/agencian1/sections/Product/NotFoundChallenge.tsx": $$$$$$42,
-    "deco-sites/agencian1/sections/Product/ProductInfo.tsx": $$$$$$43,
-    "deco-sites/agencian1/sections/Product/ProductShelf.tsx": $$$$$$44,
-    "deco-sites/agencian1/sections/Product/ProductShelfTabbed.tsx": $$$$$$45,
-    "deco-sites/agencian1/sections/Product/SearchResult.tsx": $$$$$$46,
-    "deco-sites/agencian1/sections/Product/ShelfWithImage.tsx": $$$$$$47,
-    "deco-sites/agencian1/sections/Product/Wishlist.tsx": $$$$$$48,
-    "deco-sites/agencian1/sections/Social/InstagramPosts.tsx": $$$$$$49,
-    "deco-sites/agencian1/sections/Social/WhatsApp.tsx": $$$$$$50,
-    "deco-sites/agencian1/sections/Theme/Theme.tsx": $$$$$$51,
+    "deco-sites/agencian1/sections/Content/BrandAnimation.tsx": $$$$$$10,
+    "deco-sites/agencian1/sections/Content/CallToAction.tsx": $$$$$$11,
+    "deco-sites/agencian1/sections/Content/CasesComponent.tsx": $$$$$$12,
+    "deco-sites/agencian1/sections/Content/Faq.tsx": $$$$$$13,
+    "deco-sites/agencian1/sections/Content/Features.tsx": $$$$$$14,
+    "deco-sites/agencian1/sections/Content/Hero.tsx": $$$$$$15,
+    "deco-sites/agencian1/sections/Content/ImageSection.tsx": $$$$$$16,
+    "deco-sites/agencian1/sections/Content/Intro.tsx": $$$$$$17,
+    "deco-sites/agencian1/sections/Content/Logos.tsx": $$$$$$18,
+    "deco-sites/agencian1/sections/Content/Mosaic.tsx": $$$$$$19,
+    "deco-sites/agencian1/sections/Content/Partners.tsx": $$$$$$20,
+    "deco-sites/agencian1/sections/Content/RichText.tsx": $$$$$$21,
+    "deco-sites/agencian1/sections/Content/Table.tsx": $$$$$$22,
+    "deco-sites/agencian1/sections/Content/Testimonials.tsx": $$$$$$23,
+    "deco-sites/agencian1/sections/Content/TextTopWidthCarousel.tsx": $$$$$$24,
+    "deco-sites/agencian1/sections/Content/TextWithImage.tsx": $$$$$$25,
+    "deco-sites/agencian1/sections/Content/TextWithImageAnimation.tsx":
+      $$$$$$26,
+    "deco-sites/agencian1/sections/Content/TextWithImageCustom.tsx": $$$$$$27,
+    "deco-sites/agencian1/sections/Footer/Footer.tsx": $$$$$$28,
+    "deco-sites/agencian1/sections/Gallery.tsx": $$$$$$29,
+    "deco-sites/agencian1/sections/Header/Header.tsx": $$$$$$30,
+    "deco-sites/agencian1/sections/Images/BannerGrid.tsx": $$$$$$31,
+    "deco-sites/agencian1/sections/Images/Carousel.tsx": $$$$$$32,
+    "deco-sites/agencian1/sections/Images/ImageGallery.tsx": $$$$$$33,
+    "deco-sites/agencian1/sections/Images/ShoppableBanner.tsx": $$$$$$34,
+    "deco-sites/agencian1/sections/Layout/Container.tsx": $$$$$$35,
+    "deco-sites/agencian1/sections/Layout/Flex.tsx": $$$$$$36,
+    "deco-sites/agencian1/sections/Layout/Grid.tsx": $$$$$$37,
+    "deco-sites/agencian1/sections/Layout/GridItem.tsx": $$$$$$38,
+    "deco-sites/agencian1/sections/Links/LinkTree.tsx": $$$$$$39,
+    "deco-sites/agencian1/sections/Links/Shortcuts.tsx": $$$$$$40,
+    "deco-sites/agencian1/sections/Miscellaneous/CampaignTimer.tsx": $$$$$$41,
+    "deco-sites/agencian1/sections/Miscellaneous/CookieConsent.tsx": $$$$$$42,
+    "deco-sites/agencian1/sections/Miscellaneous/Slide.tsx": $$$$$$43,
+    "deco-sites/agencian1/sections/Newsletter/Newsletter.tsx": $$$$$$44,
+    "deco-sites/agencian1/sections/Product/ImageGalleryFrontBack.tsx": $$$$$$45,
+    "deco-sites/agencian1/sections/Product/ImageGallerySlider.tsx": $$$$$$46,
+    "deco-sites/agencian1/sections/Product/NotFound.tsx": $$$$$$47,
+    "deco-sites/agencian1/sections/Product/NotFoundChallenge.tsx": $$$$$$48,
+    "deco-sites/agencian1/sections/Product/ProductInfo.tsx": $$$$$$49,
+    "deco-sites/agencian1/sections/Product/ProductShelf.tsx": $$$$$$50,
+    "deco-sites/agencian1/sections/Product/ProductShelfTabbed.tsx": $$$$$$51,
+    "deco-sites/agencian1/sections/Product/SearchResult.tsx": $$$$$$52,
+    "deco-sites/agencian1/sections/Product/ShelfWithImage.tsx": $$$$$$53,
+    "deco-sites/agencian1/sections/Product/Wishlist.tsx": $$$$$$54,
+    "deco-sites/agencian1/sections/Social/InstagramPosts.tsx": $$$$$$55,
+    "deco-sites/agencian1/sections/Social/WhatsApp.tsx": $$$$$$56,
+    "deco-sites/agencian1/sections/Theme/Theme.tsx": $$$$$$57,
   },
   "apps": {
     "deco-sites/agencian1/apps/decohub.ts": $$$$$$$$$$$0,
diff --git a/sections/Content/BrandAnimation.tsx b/sections/Content/BrandAnimation.tsx
new file mode 100644
index 0000000..49562a7
--- /dev/null
+++ b/sections/Content/BrandAnimation.tsx
@@ -0,0 +1,104 @@
+import type { ImageWidget } from "apps/admin/widgets.ts";
+import Image from "apps/website/components/Image.tsx";
+import { FnContext, SectionProps } from "deco/mod.ts";
+
+/** @title {{{alt}}}  */
+interface PropsImage {
+    /** @title Insira a imagem */
+    image?: ImageWidget;
+    /** @title Insira o nome da imagem */
+    alt?: string;
+    /** @title Insira o link da imagem */
+    href?: string;   
+    /** 
+     * @title Insira a largura da imagem 
+     * @description (ex: 112) 
+     * */
+    width?:number;
+    /** 
+     * @title Insira a altura da imagem 
+     * @description (ex: 111) 
+     * */    
+    height?:number;    
+}
+
+
+/** @title Marca */
+interface Props{
+    /** @title Imagem  */
+    allImage:PropsImage[]
+    /** @title Deseja animação ? */
+    animationAction?:boolean;
+    /** 
+     * @title Insira cor de fundo 
+     * @description (ex: #ffffff) 
+     * @format color
+     * */      
+    backgroundColor?: string;
+    /** 
+     * @title Insira o espaço entre as imagens 
+     * @description (ex: 30)
+     * */      
+    columnGap?: string;
+}
+
+function BrandAnimation( props: SectionProps<ReturnType<typeof loader>> ){
+    const { allImage, animationAction, backgroundColor, columnGap, device } = props;
+    const sizeImage = allImage?.length;
+    const arryTest = allImage && allImage.map(( {width} )=> width);
+    const sumColumn = sizeImage && columnGap ? sizeImage * Number(columnGap) : null;
+    const sumAllWidthImage = arryTest && arryTest.reduce((acc, curr) => acc && curr && (acc + curr));
+    const sumWidthTotal = sumAllWidthImage && sumColumn && sumAllWidthImage + sumColumn + (50*12);
+
+    return(
+        <>
+            <div class="n1-brand-animation mobile:h-[250px] h-[300px] 2xl:h-[340px] overflow-x-hidden relative">
+                <div class="n1-brand-animation__container mobile:top-[50px] mobile:w-[105%] mobile:pl-[10px] pl-[30px] rotate-[6.44deg] bg-[#ffffff] h-[110px] 2xl:top-[110px] w-[102%] left-[-10px] overflow-hidden top-[90px] relative">  
+                    <div class={`n1-brand-animation__wrapper ${animationAction ? 'animation-section-brand rotate-[6.44deg]' : '' }`} 
+                        style={{ minWidth : `${device === 'desktop' ? '1690px' : '2750px' }` }}>
+                        <div class="n1-brand-animation__wrapper-item">
+                            <div class="n1-brand-animation__wrapper-slide"
+                                style={{ 
+                                    width: sumWidthTotal && device === 'desktop' ? sumWidthTotal + 'px' : sumWidthTotal && device === 'mobile' ? 'initial' : '3700px',
+                                    display : 'grid', 
+                                    gridTemplateColumns: `repeat(${sizeImage}, auto)`,                                     
+                                    columnGap : `${columnGap ? columnGap + 'px' : '30px'}`, 
+                                    backgroundColor: `${backgroundColor ? backgroundColor : '#ffffff'}` }}
+                                >
+                                {allImage && allImage.map(( { alt, image, width, height, href} )=>{
+
+                                    if( !image ) return null;
+
+                                    return(
+                                        <>
+                                            {image && (   
+                                                <a href={`${href ? href : "javascript:void(0)"}`} style={{ pointerEvents : `${href ? 'all' : 'none'}` }}>
+                                                    <Image 
+                                                        style={{ minWidth : width ? width : '112px' }}                                                    
+                                                        src={image} 
+                                                        alt={alt ? alt : "Marca"} 
+                                                        width={width ? width : 112} 
+                                                        height={height ? height : 111} 
+                                                        loading="lazy" />
+                                                </a>                                        
+                                            )}
+                                        </>
+                                    )
+                                })}                                       
+                            </div>
+                        </div>
+                    </div>  
+                </div>        
+            </div>
+        </>
+    )
+}
+
+export const loader = (props: Props, _req: Request, ctx: FnContext) => {
+    return {
+      ...props,
+      device: ctx.device,
+    };
+};
+
+export default BrandAnimation;
\ No newline at end of file
diff --git a/sections/Content/CasesComponent.tsx b/sections/Content/CasesComponent.tsx
new file mode 100644
index 0000000..62f096a
--- /dev/null
+++ b/sections/Content/CasesComponent.tsx
@@ -0,0 +1,150 @@
+import type { ImageWidget } from "apps/admin/widgets.ts";
+import Image from "apps/website/components/Image.tsx";
+import { FnContext, SectionProps } from "deco/mod.ts";
+import CasesComponentMobile from '$store/components/ui/CasesComponentMobile.tsx';
+import CasesComponentDesktop from '$store/components/ui/CasesComponentDesktop.tsx';
+import CasesComponentTextWithButton from '$store/components/ui/CasesComponentTextWithButton.tsx';
+
+/** @title {{{nameTag}}}*/
+interface TagProps{
+    imageTag?:ImageWidget;
+    /**@title nome da TAG */
+    nameTag?: string; 
+}
+
+/** @title {{{alt}}}*/
+interface PropsImage{
+    /**@title Logo */
+    imageLogo?: ImageWidget;
+    /**@title nome da imagem */
+    alt?: string;
+    /**@title link */
+    href?:string;
+    /**@title Largura do logo */
+    /**@description (ex: 300) */
+    widthLogo?:number;
+    /**@title Altura do logo */
+    /**@description (ex: 300) */    
+    heightLogo?:number;
+    /**@title Imagem de fundo*/
+    imageBackground?: ImageWidget;
+    /**@title Largura da imagem de fundo */
+    /**@description (ex: 300) */    
+    widthImageBackground?:number;
+    /**@title Altura da imagem de fundo */
+    /**@description (ex: 300) */       
+    heightImageBackground?:number;
+    /**@title Texto da porcentagem */    
+    infoPorcentagem?:string;
+    /**@title Texto */    
+    infoText?:string;
+    /**@title Ícone */
+    icon?:ImageWidget;
+
+    /********CONFIGURAÇÃO DO HOVER******* */
+
+    /**@title Logo (efeito hover) */
+    imageLogoHover?: ImageWidget;
+    /**@title Logo (efeito hover) Mobile*/
+    imageLogoMobileHover?: ImageWidget;    
+    /**@title Largura do logo (efeito hover) */
+    /**@description (ex: 300) */     
+    widthLogoHover?:number;
+    /**@title Altura do logo (efeito hover)*/
+    /**@description (ex: 300) */     
+    heightLogoHover?:number;
+    /**@title Imagem de fundo (efeito hover)*/    
+    imageBackgroundHover?: ImageWidget;
+    /**@title Larugura da imagem de fundo (efeito hover) */
+    /**@description (ex: 300) */      
+    widthImageBackgroundHover?:number;
+    /**@title Altura da imagem de fundo (efeito hover) */
+    /**@description (ex: 300) */      
+    heightImageBackgroundHover?:number;   
+    /**@title Ícone (efeito hover)*/ 
+    iconHover?:ImageWidget;   
+    /**@title Tags (efeito hover)*/ 
+    /** @maxItems 6 */ 
+    tagProps?:TagProps[]
+}
+
+interface Props{
+    /**@title Subtítulo */
+    /**@format html */
+    subtitle?:string;
+    /**@title Texto */
+    text?:string;
+    /**@title Texto do botão  */
+    textButton?:string;
+    /**@title Link do botão  */
+    hrefButton?:string;
+    /**@title Ativar icon arrow no link  */
+    activeArrow?: boolean;
+    /** @description Configuração das imagens */
+    /** @maxItems 5 */
+    settingsImage?:PropsImage[];
+    /**@title Imagem de fundo da seção  */
+    imageBackgroundSection?:ImageWidget; 
+    /**@title Largura da imagem de fundo da seção  */
+    /** @description (ex: 235) */
+    widthBackgroundSection?:number; 
+    /**@title Altura da imagem de fundo da seção  */
+    /** @description (ex: 396) */    
+    heightBackgroundSection?:number; 
+}
+
+function CasesComponent(props: SectionProps<ReturnType<typeof loader>>){
+    const { 
+        subtitle,
+        text, 
+        textButton, 
+        hrefButton, 
+        activeArrow, 
+        settingsImage, 
+        device, 
+        imageBackgroundSection, 
+        widthBackgroundSection, 
+        heightBackgroundSection 
+    } = props;
+
+    return(
+        <>
+            <div class="mobile:px-[20px] md:mt-[120px] relative z-1 overflow-hidden">
+                {imageBackgroundSection && (
+                    <div class="hidden md:flex absolute top-0 left-0 w-full h-full">
+                        <div class="absolute bottom-0 left-0">
+                            <Image
+                                class='hidden mobile:flex lg:flex'
+                                width={widthBackgroundSection ? widthBackgroundSection : 235}
+                                height={heightBackgroundSection ? heightBackgroundSection : 396}
+                                sizes="(max-width: 300px) 100vw, 30vw"
+                                src={imageBackgroundSection}
+                                alt={"Background Image"}
+                                loading="lazy"
+                            />                        
+                        </div>
+                    </div>
+                )}
+
+                <div class=" flex flex-col flex-wrap lg:grid lg:grid-rows-[repeat(2,_auto)] xl:n1-container md:px-[120px] py-[0]">
+
+                    <CasesComponentTextWithButton subtitle={subtitle} text={text} textButton={textButton} hrefButton={hrefButton} activeArrow={activeArrow} />
+
+                    {device === 'desktop' && (<CasesComponentDesktop settingsImage={settingsImage} />)}
+
+                    {device === 'mobile' && (<CasesComponentMobile settingsImage={settingsImage} />)}
+
+                </div>
+            </div>
+        </>
+    )    
+}
+
+export const loader = (props: Props, _req: Request, ctx: FnContext) => {
+    return {
+      ...props,
+      device: ctx.device,
+    };
+};
+
+export default CasesComponent;
\ No newline at end of file
diff --git a/sections/Content/Hero.tsx b/sections/Content/Hero.tsx
index 7a50a43..04662f1 100644
--- a/sections/Content/Hero.tsx
+++ b/sections/Content/Hero.tsx
@@ -1,10 +1,16 @@
 import type { ImageWidget } from "apps/admin/widgets.ts";
 import Image from "apps/website/components/Image.tsx";
+import { FnContext, SectionProps } from "deco/mod.ts";
+import { clx } from "$store/sdk/clx.ts";
 
 export interface CTA {
   id?: string;
-  href: string;
+  /**@title Link do botão */
+  href?: string;
+  /**@title Texto 01 */
   text: string;
+  /**@title Texto 02 */
+  text2?: string;
   variant: "Normal" | "Reverse";
 }
 
@@ -12,10 +18,38 @@ export interface Props {
   /**
    * @format html
    */
+  /** @title Título */
   title: string;
+  /** @title Descrição */
+  /** @format html */
   description: string;
+  /** @title Texto para animação */
+  descriptionAnimation?:string; 
+  /** @title Imagem */
   image?: ImageWidget;
+  /** @title Deseja posicionar manualmente? */
+  positionManual?: boolean;
+  /** @title Posição da imagem */
+  /** @description (Horizontal) */
+  translateX?: number;
+  /** @title Posição da imagem */
+  /** @description (Vertical) */  
+  translateY?: number;
+  /** @title Largura da imagem */
+  widthImage?:number;
+  /** @title Lado do Bloco de texto */
   placement: "left" | "right";
+  /** 
+   * @title Lado do Imagem 
+   * @description (valido caso posicionamento manual estiver ativado)
+  */
+  placementImage?: "right" | "left";
+  /** 
+   * @title Título CTA 
+   * @format html
+  */
+  titleCta?: string;
+  /** @title CTA */
   cta: CTA[];
 }
 
@@ -24,27 +58,53 @@ const PLACEMENT = {
   right: "flex-col text-left lg:flex-row",
 };
 
-export default function HeroFlats({
-  title = "Hero",
-  description = "Your description here",
-  image,
-  placement,
-  cta,
-}: Props) {
+export default function HeroFlats(props: SectionProps<ReturnType<typeof loader>>) {
+  const {
+    title = "Hero",
+    description = "Your description here",
+    descriptionAnimation,
+    image,
+    positionManual,
+    translateX,
+    translateY,
+    widthImage,
+    placement,
+    placementImage,
+    titleCta,
+    cta,
+    device
+  } = props;
+
+  const positionX = translateX ? translateX + 'px' : 0;
+  const positionY = translateY ? translateY + 'px' : 0; 
+  
+  const HEIGHT = 508;
+  
   return (
-    <div>
-      <div class="mx-auto flex flex-col items-center gap-8">
+    <div class="mobile:mt-[10px] mobile:px-[20px]">
+      <div class="mx-auto flex flex-col items-center gap-8 overflow-hidden">
         <div
-          class={`flex w-full xl:container xl:mx-auto py-20 mx-5 md:mx-10 z-10 ${
-            image
+          class={clx(`tablet:items-start n1-hero__image flex w-full md:n1-container md:px-[120px] justify-end relative 
+            ${image
               ? PLACEMENT[placement]
               : "flex-col items-center justify-center text-center"
-          } lg:py-36 gap-12 md:gap-20 items-center`}
+            } lg:pt-[120px] pb-[60px] gap-12 md:gap-20 items-center`)}
         >
-          {image && (
+          {image && device === 'desktop' && (
             <Image
-              width={640}
-              class="w-full lg:w-1/2 object-fit"
+              class='hidden mobile:flex lg:flex'
+              width={widthImage ? widthImage : 640}
+              height={HEIGHT}
+              style={
+                positionManual 
+                ? {
+                  position: 'absolute',
+                  top: positionY,
+                  right: positionX,
+                  left: placementImage === 'left' ? 0 : 'initial'
+                }
+                :{}
+              }
               sizes="(max-width: 640px) 100vw, 30vw"
               src={image}
               alt={image}
@@ -53,42 +113,72 @@ export default function HeroFlats({
             />
           )}
           <div
-            class={`mx-6 lg:mx-auto lg:w-full space-y-4 gap-4 ${
-              image
-                ? "lg:w-1/2 lg:max-w-xl"
-                : "flex flex-col items-center justify-center lg:max-w-3xl"
-            }`}
+            class={clx(`tablet:max-w-[90%] ${image && device === 'desktop'? "md:max-w-[56%]": "mobile:w-full"}`)}
+            // class={`mx-6 lg:mx-auto lg:w-full space-y-4 gap-4 ${
+            //   image
+            //     ? "lg:w-1/2 lg:max-w-xl"
+            //     : "flex flex-col items-center justify-center lg:max-w-3xl"
+            // }`}
           >
-            <div
-              class="inline-block text-[80px] leading-[100%] font-medium tracking-[-2.4px]"
-              dangerouslySetInnerHTML={{
-                __html: title,
-              }}
-            >
-            </div>
-            <p class="text-zinc-400 text-[16px] md:text-[18px] leading-[150%]">
-              {description}
-            </p>
-            <div class="flex flex-col items-center lg:items-start lg:flex-row gap-4">
-              {cta?.map((item) => (
-                <a
-                  key={item?.id}
-                  id={item?.id}
-                  href={item?.href}
-                  target={item?.href.includes("http") ? "_blank" : "_self"}
-                  class={`group relative overflow-hidden rounded-full hover:bg-gradient-to-r px-6 py-2 lg:px-8 lg:py-3 transition-all duration-300 ease-out ${
-                    item.variant === "Reverse"
-                      ? "bg-secondary text-white"
-                      : "bg-accent text-black"
-                  }`}
-                >
-                  <span class="ease absolute right-0 -mt-12 h-32 w-8 translate-x-12 rotate-12 transform bg-white opacity-10 transition-all duration-1000 group-hover:-translate-x-40">
-                  </span>
-                  <span class="relative font-medium lg:text-[20px]">
-                    {item?.text}
-                  </span>
-                </a>
-              ))}
+            {title && (
+              <div
+                class="inline-block font-archimoto-medium n1-hero__title"
+                dangerouslySetInnerHTML={{
+                  __html: title,
+                }}
+              >
+              </div>
+            )}
+            {descriptionAnimation &&(              
+              <div class="n1-typing">
+                  <span class={`font-archimoto-medium `}>{descriptionAnimation}</span>
+              </div>
+            )}           
+
+            {description && (
+              <div
+                class="inline-block font-noto-sans font-normal md:max-w-[80%] n1-hero__description"
+                dangerouslySetInnerHTML={{
+                  __html: description,
+                }}
+              >
+              </div>
+            )}
+            {titleCta && (
+              <div class="inline-block font-medium n1-hero__titleCta md:mt-[30px] md:mb-[20px]"
+                dangerouslySetInnerHTML={{
+                  __html: titleCta,
+                }}
+              ></div>            
+            )}
+            <div class="flex flex-row tablet:flex-wrap items-center lg:items-start gap-4">
+              {cta?.map((item) => {
+                return(
+                  <>
+                    <a
+                      key={item?.id}
+                      id={item?.id}
+                      href={item?.href}
+                      target={item && item.href && item.href.includes("http") ? "_blank" : "_self"}
+                      class={clx(`mobile:py-[8px] mobile:px-[6px] lg:w-[240px] lg:min-w-[240px] px-[20px] py-[24px] flex flex-col items-center 
+                        text-center group relative overflow-hidden rounded-[10px] hover:bg-gradient-to-r transition-all duration-300 ease-out 
+                        ${item.variant === "Reverse"
+                          ? "bg-secondary text-white"
+                          : "text-[#ffffff] bg-[linear-gradient(161deg,_rgba(255,_255,_255,_0.10)_0%,_rgba(255,_255,_255,_0.05)_101.7%)] backdrop-filter backdrop-blur-[18px]"
+                      }`)}
+                    >
+                      <span class="ease absolute right-0 -mt-12 h-32 w-8 translate-x-12 rotate-12 transform bg-white opacity-10 transition-all duration-1000 group-hover:-translate-x-40">
+                      </span>
+                      <span class={`mobile:text-20 mobile:leading-[24px] text-secondary font-bold font-archimoto-medium text-50 relative`}>
+                        {item?.text}
+                      </span>
+                      <span class={`mobile:text-12 mobile:leading-[16.8px] text-[#ffffff] relative font-normal font-noto-sans md:text-18 md:max-w-[80%]`}>
+                        {item?.text2} 
+                      </span>
+                    </a>
+                  </>
+                )
+              })}
             </div>
           </div>
         </div>
@@ -96,3 +186,10 @@ export default function HeroFlats({
     </div>
   );
 }
+
+export const loader = (props: Props, _req: Request, ctx: FnContext) => {
+  return {
+    ...props,
+    device: ctx.device,
+  };
+};
\ No newline at end of file
diff --git a/sections/Content/Mosaic.tsx b/sections/Content/Mosaic.tsx
new file mode 100644
index 0000000..80a113d
--- /dev/null
+++ b/sections/Content/Mosaic.tsx
@@ -0,0 +1,387 @@
+import { FnContext, SectionProps } from "deco/mod.ts";
+import LinkWithOptionArrow from '$store/components/ui/LinkWithOptionArrow.tsx';
+import type { ImageWidget } from "apps/admin/widgets.ts";
+import Image from "apps/website/components/Image.tsx";
+import { HTMLWidget as HTML } from "apps/admin/widgets.ts";
+import { clx } from "$store/sdk/clx.ts";
+
+
+// INTERFACE GENERICA P/ IMAGEM
+interface ImageGeneric{
+    /**@title Imagem */ 
+    image?:ImageWidget;
+    /**@title Largura da imagem */
+    /**@description (ex: 390) */    
+    width?:number;
+    /**@title Altura da imagem */
+    /**@description (ex: 250) */    
+    height?:number;        
+}
+
+// INTERFACE GENERICA P/ TEXTOS
+interface TextGeneric{
+    /** @title Título */
+    /** @format html */        
+    title?:string;
+    /** @title Texto */
+    /** @format textarea */            
+    text?:string;
+    /** @title Texto do Link */
+    textLink?:string;
+    /** @title Link */
+    /** @description (ex: https://agencian1.com.br/) */
+    link?:string;
+    /** @title Cor de fundo */
+    bgColor?: 'primary' | 'base-50'
+}
+
+const colorBackground = {
+    'primary' : '#0C1F59',
+    'base-50' : '#F3F4F7'
+}
+
+
+//* LAYOUT SUPERIOR
+/** @titleBy name */
+interface LayoutTop{
+    /**@title Nome do Bloco */    
+    name?: string;
+
+    /** @title Textos */
+    text?: TextGeneric;
+
+    /** @title Desktop */
+    desktop?:ImageGeneric
+
+    /** @title Mobile */
+    mobile?:ImageGeneric
+}
+
+interface BottomLayout{
+    /** @title Imagem Superior */
+    top: ImageGeneric;
+    /** @title Imagem Inferior */
+    bottom: ImageGeneric      
+}
+
+interface BottomSide{   
+    /** @title Lado esquerdo */
+    left?:BottomLayout;
+    /** @title Lado direito */
+    right?:BottomLayout;
+}
+
+//* LAYOUT INFERIOR
+/** @titleBy name */
+interface LayoutBottom{   
+    /**@title Nome do Bloco */    
+    name?: string;  
+
+    /** @title Textos */
+    text?:TextGeneric;
+
+    /** @title Desktop */
+    desktop?:BottomSide;
+
+    /** @title Mobile */
+    mobile?:BottomSide;
+}
+
+interface Props{    
+    /** @title Imagem Superior */
+    /** @description (Limite 3 imagens) */
+    /** @maxItems 3 */ 
+    imageTop:LayoutTop[];
+    /** @title Imagem Inferior */
+    /** @description (Limite 2 imagens) */
+    /** @maxItems 2 */     
+    imageBottom: LayoutBottom[];
+}
+
+
+function Mosaic( props: SectionProps<ReturnType<typeof loader>> ){
+    const { imageTop, imageBottom, device } = props;
+
+    // console.log('imageTop ----> ', imageTop)
+    // console.log('imageBottom ----> ', imageBottom)
+    // console.log('Mosaic device -----> ', device)
+
+    function handleMouserHover( e:MouseEvent  ){
+        const { target } = e;
+        if(!target) return;
+        if( target && target instanceof HTMLElement ){
+            switch (e.type) {
+                case 'mouseleave':
+                    console.log('event mouseleave ----> ', target)
+                break;
+                case 'mouseover':
+                    console.log('event mouseover ----> ', target)
+                break;
+            }            
+        }
+    }
+
+    return(
+        <>
+            <div class="n1-mosaic md:mt-[100px]">
+                <div class="flex flex-col text-[#ffffff] md:n1-container md:px-[120px] gap-[22px] pb-[10px] mobile:px-[20px]"
+                    onMouseLeave={handleMouserHover}>
+
+                    {/* ITEMS TOP - INITIAL */}
+                    
+                    <div class={clx(`n1-mosaic is-top grid grid-cols-[repeat(3,_1fr)] grid-rows-1 text-[#ffffff] 
+                        gap-x-[22px] mobile:flex mobile:flex-col mobile:gap-y-[24px]`)}>
+
+                        {imageTop && imageTop?.map(({ desktop, mobile, text, name })=>{
+                            return(
+                                <>
+                                    <div 
+                                        class={clx(`n1-mosaic__container top is-${text && text?.bgColor === 'base-50' ? 'white' : 'primary' } 
+                                            rounded-[16px] bg-primary md:pt-[30px] mobile:max-h-[345px] h-[430px] overflow-hidden`)}
+                                        onMouseLeave={handleMouserHover}
+                                        style={{ 
+                                            backgroundColor : `${ text && text?.bgColor ? colorBackground[text?.bgColor] : '#0C1F59' }`,
+                                            color:   `${ text && text?.bgColor === 'base-50' ? '#0C1F59' : "#ffffff" }`
+                                        }}>
+
+                                        <div class="md:px-[30px] relative z-20">
+                                            <div class="mobile:pt-[24px] mobile:px-[24px]">                                            
+                                            
+                                                { text && text?.title && (
+                                                    <h3 
+                                                        class={clx(`n1-mosaic__title is-${text && text?.bgColor === 'base-50' ? 'white' : 'primary' } 
+                                                            text-34 font-archimoto-medium font-black`)}
+                                                        dangerouslySetInnerHTML={{__html: text.title}}>
+                                                    </h3>
+                                                ) }
+
+                                                {text && text?.text && (
+                                                    <span 
+                                                        class={clx(`n1-mosaic__text text-13 is-${text && text?.bgColor === 'base-50' ? 'white' : 'primary' } 
+                                                        font-noto-sans font-normal mt-[5px]`)}>
+
+                                                        {text.text}
+                                                    </span>
+                                                )}
+                                            </div>
+                                            {text && text?.textLink && (
+                                                <div class="n1-mosaic__link my-[15px] mobile:px-[24px]">
+                                                    <LinkWithOptionArrow 
+                                                        text={text?.textLink} 
+                                                        link={text?.link} 
+                                                        width={'127'} 
+                                                        fontSize='11'
+                                                        margin={'0'}
+                                                        activeArrowBlue={true}
+                                                    />
+                                                </div>
+                                            )}
+                                        </div>
+                                        <div class="relative">
+                                            {device === 'desktop' && desktop && desktop.image && desktop?.width && desktop?.height && (
+                                                <Image
+                                                    class="z-0 absolute top-0 left-0"
+                                                    src={desktop.image}
+                                                    width={desktop.width}
+                                                    height={desktop.height}
+                                                    alt={name ? name : 'Imagem Top'}
+                                                    loading="lazy"                                            
+                                                /> 
+                                            )}
+                                            {device === 'mobile' && mobile && mobile.image && mobile?.width && mobile?.height && (
+                                                <Image
+                                                    // quando efetuar animação alterar isso 
+                                                    class={`z-0 absolute ${name && name === 'Tecnologia Deco' ? 'left-2/5 -top-[100px] scale-[2] left-[60%]' : 'top-0 left-0' }`}
+                                                    src={mobile.image}
+                                                    width={mobile.width}
+                                                    height={mobile.height}
+                                                    alt={name ? name : 'Imagem Top'}
+                                                    loading="lazy"                                            
+                                                /> 
+                                            )}
+                                        </div>
+                                    </div>                                
+                                </>
+                            )
+                        })} 
+                    </div>{/* ITEMS TOP - FINAL */}
+
+                    {/* ITEMS BOTTOM - INITIAL */}
+                    <div class="n1-mosaic is-bottom grid grid-cols-[repeat(2,_1fr)] grid-rows-1 text-[#ffffff] gap-x-[22px] mobile:flex mobile:flex-col">
+                        {imageBottom && imageBottom?.map(( { desktop, mobile, name, text } )=>{
+                            return(
+                                <>                               
+                                    <div 
+                                        class={clx(`n1-mosaic__container mobile:mb-[24px] bottom rounded-[16px] bg-primary md:px-[30px] 
+                                            md:pt-[30px] mobile:max-h-[340px] max-h-[430px] overflow-hidden`)}
+                                        style={{ 
+                                            backgroundColor : `${ text && text?.bgColor ? colorBackground[text?.bgColor] : '#0C1F59' }`,
+                                            color:   `${ text && text?.bgColor === 'base-50' ? '#0C1F59' : "#ffffff" }`
+                                        }}>
+
+                                        <div class="mobile:pt-[24px] mobile:px-[24px]">
+                                            {text && text?.title && (
+                                                <h3 
+                                                    class={clx(`n1-mosaic__title is-${text && text?.bgColor === 'base-50' ? 'white' : 'primary' } 
+                                                        text-34 font-archimoto-medium font-black`)}
+                                                    dangerouslySetInnerHTML={{__html: text.title}}>
+                                                </h3>
+                                            )}
+                                            {text && text?.text && (                                                
+                                                <span 
+                                                    class={clx(`n1-mosaic__text is-${text && text?.bgColor === 'base-50' ? 'white' : 'primary' } 
+                                                        text-13 font-noto-sans font-normal mt-[5px]`)}>
+                                                    {text.text}
+                                                </span>
+                                            )}
+                                        </div>
+                                        {text && text?.textLink && (
+                                            <div class="n1-mosaic__link my-[15px] mobile:px-[24px]">
+                                                <LinkWithOptionArrow 
+                                                    text={text.textLink} 
+                                                    link={text?.link} 
+                                                    width={'127'} 
+                                                    fontSize='11'
+                                                    margin={'0'}
+                                                    activeArrowBlue={true}
+                                                />
+                                            </div>
+                                        )}
+                                        
+                                        <div 
+                                            class={clx(`mobile:h-[202px] mobile:px-[13px] mobile:grid mobile:grid-cols-[repeat(2,_1fr)] 
+                                                h-[233px] overflow-hidden flex gap-[13px]`)}>
+                                            <div>
+                                                {device === 'desktop' && 
+                                                    desktop && desktop?.left &&
+                                                    desktop.left.top?.image && 
+                                                    desktop.left?.top?.width && 
+                                                    desktop.left?.top?.height && (
+                                                        <Image
+                                                            class="mb-[14px]"
+                                                            src={desktop.left.top.image}
+                                                            width={desktop.left.top.width}
+                                                            height={desktop.left.top.height}
+                                                            alt={name ? name : 'Imagem Top'}
+                                                            loading="lazy"
+                                                        />
+                                                )} 
+                                                {device === 'mobile' && 
+                                                    mobile && mobile?.left &&
+                                                    mobile.left.top?.image && 
+                                                    mobile.left?.top?.width && 
+                                                    mobile.left?.top?.height && (
+                                                        <Image
+                                                            class="mb-[14px]"
+                                                            src={mobile.left.top.image}
+                                                            width={mobile.left.top.width}
+                                                            height={mobile.left.top.height}
+                                                            alt={name ? name : 'Imagem Top'}
+                                                            loading="lazy"
+                                                        />
+                                                )} 
+
+                                                {device === 'desktop' && 
+                                                    desktop && desktop?.left &&
+                                                    desktop.left.bottom?.image && 
+                                                    desktop.left?.bottom?.width && 
+                                                    desktop.left?.bottom?.height && (
+                                                        <Image
+                                                            src={desktop.left.bottom.image}
+                                                            width={desktop.left.bottom.width}
+                                                            height={desktop.left.bottom.height}
+                                                            alt={name ? name : 'Imagem Bottom'}
+                                                            loading="lazy"
+                                                        />
+                                                )}   
+
+                                                {device === 'mobile' && 
+                                                    mobile && mobile?.left &&
+                                                    mobile.left.bottom?.image && 
+                                                    mobile.left?.bottom?.width && 
+                                                    mobile.left?.bottom?.height && (
+                                                        <Image
+                                                            src={mobile.left.bottom.image}
+                                                            width={mobile.left.bottom.width}
+                                                            height={mobile.left.bottom.height}
+                                                            alt={name ? name : 'Imagem Bottom'}
+                                                            loading="lazy"
+                                                        />
+                                                )}                                                     
+                                            </div>
+                                            <div>
+                                                {device === 'desktop' && 
+                                                    desktop && desktop?.right &&
+                                                    desktop.right.top?.image && 
+                                                    desktop.right?.top?.width && 
+                                                    desktop.right?.top?.height && (
+                                                        <Image
+                                                            class="mb-[14px]"
+                                                            src={desktop.right.top.image}
+                                                            width={desktop.right.top.width}
+                                                            height={desktop.right.top.height}
+                                                            alt={name ? name : 'Imagem Bottom'}
+                                                            loading="lazy"
+                                                        />
+                                                )}                                                   
+                                                {device === 'mobile' && 
+                                                    mobile && mobile?.right &&
+                                                    mobile.right.top?.image && 
+                                                    mobile.right?.top?.width && 
+                                                    mobile.right?.top?.height && (
+                                                        <Image
+                                                            class="mb-[14px]"
+                                                            src={mobile.right.top.image}
+                                                            width={mobile.right.top.width}
+                                                            height={mobile.right.top.height}
+                                                            alt={name ? name : 'Imagem Bottom'}
+                                                            loading="lazy"
+                                                        />
+                                                )}                                                   
+                                                {device === 'desktop' && 
+                                                    desktop && desktop?.right &&
+                                                    desktop.right.bottom?.image && 
+                                                    desktop.right?.bottom?.width && 
+                                                    desktop.right?.bottom?.height && (
+                                                        <Image
+                                                            src={desktop.right.bottom.image}
+                                                            width={desktop.right.bottom.width}
+                                                            height={desktop.right.bottom.height}
+                                                            alt={name ? name : 'Imagem Bottom'}
+                                                            loading="lazy"
+                                                        />
+                                                )}                                                   
+                                                {device === 'mobile' && 
+                                                    mobile && mobile?.right &&
+                                                    mobile.right.bottom?.image && 
+                                                    mobile.right?.bottom?.width && 
+                                                    mobile.right?.bottom?.height && (
+                                                        <Image
+                                                            src={mobile.right.bottom.image}
+                                                            width={mobile.right.bottom.width}
+                                                            height={mobile.right.bottom.height}
+                                                            alt={name ? name : 'Imagem Bottom'}
+                                                            loading="lazy"
+                                                        />
+                                                )}                                                   
+                                            </div>
+                                        </div>
+                                    </div>
+                                </>
+                            )
+                        })}
+                    </div>
+                </div>
+            </div>
+        </>
+    )
+}
+
+export const loader = (props: Props, _req: Request, ctx: FnContext) => {
+    return {
+      ...props,
+      device: ctx.device,
+    };
+};
+
+export default Mosaic;
\ No newline at end of file
diff --git a/sections/Content/TextTopWidthCarousel.tsx b/sections/Content/TextTopWidthCarousel.tsx
new file mode 100644
index 0000000..9c5968a
--- /dev/null
+++ b/sections/Content/TextTopWidthCarousel.tsx
@@ -0,0 +1,233 @@
+import Slider from "$store/components/ui/Slider.tsx";
+import SliderJS from "$store/islands/SliderJS.tsx";
+import { useId } from "$store/sdk/useId.ts";
+import type { ImageWidget } from "apps/admin/widgets.ts";
+import { FnContext, SectionProps } from "deco/mod.ts";
+import Icon from "$store/components/ui/Icon.tsx";
+import { clx } from "$store/sdk/clx.ts";
+
+/** @titleBy name */
+interface InfoProps{
+    /**@title Nome*/    
+    name?:string;
+    /**@title Título*/    
+    title?:string;
+    /**@title Texto*/
+    /**@format textarea*/
+    text?:string
+    /**@title Texto do link*/    
+    textLink?:string;
+    /**@title link*/    
+    /**@description (ex: https://agencian1.com.br/)*/    
+    href?:string;
+}
+
+/** @titleBy alt */
+export interface ImageCarousel {
+    settingsInfo?:InfoProps;    
+    /** @title Imagem Desktop */
+    desktop: ImageWidget;
+    /** @title Nome da imagem */
+    alt: string;
+}
+
+export interface Props {
+    /**@title Título  */  
+    /**@format html  */        
+    title?:string;
+    /**@title Texto  */    
+    /**@format html  */    
+    text?:string;
+
+    images?: ImageCarousel[];
+    /** @title (Marque esta opção quando este banner for a maior imagem na tela para otimizações de imagem)  */
+    preload?: boolean;
+    /** @title Mostrar setas */
+    /** @description (mostre setas para navegar pelas imagens) */
+    arrows?: boolean;
+    /** @title Mostrar pontos */
+    /** @description (mostre pontos para navegar pelas imagens) */
+    dots?: boolean;
+}
+
+function ImageCarouselItem({ image, lcp, id }: { image: ImageCarousel; lcp?: boolean; id: string }) {
+    const { alt, desktop, settingsInfo } = image;
+
+    return (
+        <>
+            <a
+                id={id}
+                href={settingsInfo?.href ?? "javascript:void(0)"}
+                aria-label={settingsInfo?.name}
+                class="n1-text-top-width-carousel__link relative overflow-hidden w-full border border-[#3B5D5F] rounded-[20px] pt-[20px] pb-[40px] px-[20px]"
+            >
+                <div class="n1-text-top-width-carousel__overlay absolute w-full h-full top-[0] left-[0] invisible opacity-0"></div>
+
+                <img class="mobile:h-auto mobile:max-w-full w-[100px] h-[100px] relative -left-[30px]"
+                    loading={lcp ? "eager" : "lazy"}
+                    src={desktop}
+                    alt={alt}
+                />
+
+                <div>
+                    { settingsInfo?.name && (
+                        <span class="text-[#ffffff] flex font-archimoto-medium md:text-20 font-thin md:mt-[22px] mb-[8px]"> { settingsInfo?.name } </span>
+                    ) }
+                    { settingsInfo?.title && (
+                        <h3 class="text-[#ffffff] flex font-archimoto-medium md:text-40 font-black n1-text-top-width-carousel__title
+                        "> { settingsInfo?.title } </h3>
+                    ) }
+                    { settingsInfo?.text && (
+                        <span class="text-[#ffffff] flex font-noto-sans md:text-14 font-normal mt-[16px] mobile:mb-[32px] md:mb-[59px]"> { settingsInfo?.text } </span>
+                    ) }
+                    { settingsInfo?.textLink && (                        
+                        <div class={clx(`mobile:w-[55%] md:w-[43%] flex border border-[#fff] px-[20px] pb-[11px] 
+                            pt-[12px] rounded-[100px] justify-center items-center min-w-[144px]`)}
+                        >
+                            <span class="text-[#ffffff] flex font-archimoto-medium md:text-14 font-black"> { settingsInfo?.textLink } </span>
+                            <svg class="ml-[10px] relative bottom-[2px]" xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
+                                <path fill-rule="evenodd" clip-rule="evenodd" d="M5.25 6.22656C5.25 5.81235 5.58579 5.47656 6 5.47656H12.75C13.1642 5.47656 13.5 5.81235 13.5 6.22656V12.9766C13.5 13.3908 13.1642 13.7266 12.75 13.7266C12.3358 13.7266 12 13.3908 12 12.9766V8.03722L5.78033 14.2569C5.48744 14.5498 5.01256 14.5498 4.71967 14.2569C4.42678 13.964 4.42678 13.4891 4.71967 13.1962L10.9393 6.97656H6C5.58579 6.97656 5.25 6.64078 5.25 6.22656Z" fill="white"/>
+                            </svg>
+                        </div>
+                    ) }                
+                </div>          
+            </a>
+        </>
+    );
+}
+
+function Dots( { images }: Props ) {
+    return (
+        <>
+            <style
+                dangerouslySetInnerHTML={{
+                __html: `
+                    @property --dot-progress {
+                        syntax: '<percentage>';
+                        inherits: false;
+                        initial-value: 0%;
+                    }
+                `,
+                }}
+            />
+
+            <ul class="n1-text-top-width-carousel__dots relative z-10 mobile:top-0 carousel justify-center col-span-full gap-x-[5px] row-start-4 w-full">
+                {images?.map((_, index) => {                
+                    return(
+                        <>
+                            <li class="carousel-item">
+                                <Slider.Dot 
+                                    index={index}
+                                    classes={`${(( index === 0 ) || ( index % 4 === 0 ) ) ? "" : 'hidden'}`}
+                                >
+
+                                    <div class='pb-5'>
+                                        <div 
+                                            class={clx(`n1-banner-btn__dot--item w-[140px] sm:w-20 h-[3px] rounded group-disabled:animate-progress group-disabled:bg-[#06ADC2] 
+                                            bg-gradient-to-r from-[#06ADC2] from-[length:var(--dot-progress)] to-[rgba(255,255,255,0.4)] to-[length:var(--dot-progress)]`)}
+                                        />
+                                    </div>
+                                </Slider.Dot>
+                            </li>
+                        </>
+                    )
+                })}
+            </ul>
+        </>
+    );
+}
+
+function Buttons() {
+    return (
+        <>
+            <div class="absolute w-full flex mobile:justify-center mobile:items-end justify-between h-full top-[0] items-center pb-[10px]">
+                <div class="flex items-center justify-start z-10 col-start-1 row-start-2 md:ml-[5%] mobile:mr-[30px]">
+                    <Slider.PrevButton class="btn btn-circle bg-[#ffffff] w-[40px] !h-[40px]">
+                        <Icon
+                            size={18}
+                            id="Banner-arrow-left"
+                            strokeWidth={3}
+                        />
+                    </Slider.PrevButton>
+                </div>
+                <div class="flex items-center justify-end z-10 col-start-3 row-start-2 md:mr-[5%] mobile:ml-[30px]">
+                    <Slider.NextButton class="btn btn-circle bg-[#ffffff] w-[40px] !h-[40px]">
+                        <Icon
+                            size={18}
+                            id="Banner-arrow-right"
+                            strokeWidth={3}
+                        />
+                    </Slider.NextButton>
+                </div>
+            </div>
+        </>
+    );
+}
+
+function TextTopWidthCarousel(props: SectionProps<ReturnType<typeof loader>>) {
+    const id = useId();
+    const { images, preload, title, text, device } = props;
+
+    return (
+        <>
+            <div id={id} class="relative mobile:pb-[60px]">
+                <div class=" md:n1-container md:px-[120px] z-10 md:mb-[40px] relative">
+
+                    <div class="mobile:my-[24px] mt-[120px] mb-[43px] text-[#ffffff] flex items-center justify-between">
+                        <div class="mobile:px-[20px]">
+                            {title && (
+                                <h2 class="n1-cases-component__title font-archimoto-medium text-24 leading-[28.8px] md:text-56 md:leading-[20px]"
+                                    dangerouslySetInnerHTML={{
+                                        __html: title,
+                                    }}
+                                > 
+                                </h2>
+                            )}
+                            {text && (
+                                <span class="md:flex font-noto-sans block mt-[11px] text-20 leading-[26px]"
+                                    dangerouslySetInnerHTML={{
+                                        __html: text,
+                                    }}
+                                >                                
+                                </span>
+                            )}
+                        </div>
+                    </div>
+
+
+                    <Slider class="carousel carousel-center gap-x-[22px] flex mobile:px-[20px]">
+                        {images?.map((image, index) => {
+                            
+                            return (
+                                <>
+                                    <Slider.Item index={index} class="carousel-item mobile:w-full w-[31.666%]">
+                                        <ImageCarouselItem
+                                            image={image}
+                                            lcp={index === 0 && preload}
+                                            id={`${id}::${index}`}
+                                        />
+                                    </Slider.Item>
+                                </>
+                            );
+                        })}
+                    </Slider>
+                </div>
+        
+                {props.arrows && <Buttons />}
+        
+                {props.dots && device === 'desktop' && <Dots images={images} />}
+        
+                <SliderJS rootId={id} />
+            </div>
+        </>
+    );
+}
+
+export const loader = (props: Props, _req: Request, ctx: FnContext) => {
+    return {
+        ...props,
+        device: ctx.device,
+    };
+};
+
+export default TextTopWidthCarousel;
diff --git a/sections/Content/TextWithImage.tsx b/sections/Content/TextWithImage.tsx
index 7d4e924..0b2fa6e 100644
--- a/sections/Content/TextWithImage.tsx
+++ b/sections/Content/TextWithImage.tsx
@@ -1,66 +1,261 @@
+import Slider from "$store/components/ui/Slider.tsx";
+import SliderJS from "$store/islands/SliderJS.tsx";
+import { useId } from "$store/sdk/useId.ts";
 import type { ImageWidget } from "apps/admin/widgets.ts";
-import type { HTMLWidget } from "apps/admin/widgets.ts";
-
-export interface ServiceProps {
-  type?: string;
-  label?: string;
-  description?: HTMLWidget;
-  image: ImageWidget;
-  placement: "left" | "right";
+import { FnContext, SectionProps } from "deco/mod.ts";
+import Image from "apps/website/components/Image.tsx";
+import Icon from "$store/components/ui/Icon.tsx";
+import { clx } from "$store/sdk/clx.ts";
+import LinkWithOptionArrow from '$store/components/ui/LinkWithOptionArrow.tsx';
+
+interface InfoProps{
+    /**@title Título*/    
+    /**@format textarea*/    
+    title?:string;
+    /**@title Texto*/
+    /**@format textarea*/
+    text?:string
+    /**@title Texto do link*/    
+    textLink?:string;
+    /**@title link*/    
+    /**@description (ex: https://agencian1.com.br/)*/    
+    href?:string;
+}
+
+interface ImageGeneric{
+  /** @title Imagem */
+  image?:ImageWidget;
+  /** @title Largura da Imagem */  
+  width?:number;
+  /** @title Altura da Imagem */    
+  height?:number;
+  /** @title Nome da Imagem */    
+  alt?:string
+}
+
+/** @titleBy alt */
+export interface ImageCarousel {
+    /** @title Nome do Bloco */
+    alt: string;
+    /** @title Informações */
+    settingsInfo?:InfoProps;    
+    /** @title Imagem */
+    desktop: ImageGeneric;
 }
 
 export interface Props {
-  services?: ServiceProps[];
+    /** @title Texto do Link */
+    textLink?:string;
+    /** @title Link */
+    /** @description (ex: https://agencian1.com.br/) */
+    link?:string;  
+    /**@title Título  */  
+    /**@format html  */        
+    title?:string;
+    /**@title Texto  */    
+    /**@format html  */    
+    texto?:string;
+    /**@title Imagem  */
+    /** @description (Limite 5 imagens) */
+    /** @maxItems 5 */    
+    images?: ImageCarousel[];
+    /** @title (Marque esta opção quando este banner for a maior imagem na tela para otimizações de imagem)  */
+    preload?: boolean;
+    /** @title Mostrar setas */
+    /** @description (mostre setas para navegar pelas imagens) */
+    arrows?: boolean;
+    /** @title Mostrar pontos */
+    /** @description (mostre pontos para navegar pelas imagens) */
+    dots?: boolean;
 }
 
-const PLACEMENT = {
-  left: "flex-col lg:flex-row-reverse",
-  right: "flex-col lg:flex-row",
-};
+function ImageCarouselItem({ image, lcp, id }: { image: ImageCarousel; lcp?: boolean; id: string }) {
+    const { alt, desktop, settingsInfo } = image;
 
-export default function Services({
-  services = [
-    {
-      type: "Service",
-      label: "Your Title Here",
-      description:
-        "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, diam id tincidunt dapibus, elit arcu ultricies massa, quis ornare nisl libero vitae urna.",
-      image:
-        "https://ozksgdmyrqcxcwhnbepg.supabase.co/storage/v1/object/public/assets/3290/488e5dc5-9a24-48c9-9795-09b97394fb5f",
-      placement: "left",
-    },
-  ],
-}: Props) {
-  return (
-    <div class="bg-base-100 flex flex-col py-28">
-      {services?.map((service, index) => (
-        <div
-          key={index}
-          class={`flex xl:container xl:mx-auto first:pt-0 py-12 lg:py-28 mx-5 md:mx-10 ${
-            PLACEMENT[service.placement]
-          } gap-12 md:gap-20 text-left items-center justify-evenly`}
-        >
-          <img
-            class="w-full lg:w-1/2 flex-1 object-cover rounded-xl aspect-[31/21]"
-            sizes="(max-width: 640px) 100vw, 30vw"
-            src={service.image}
-            alt={service.label}
-            decoding="async"
-            loading="lazy"
-          />
-          <div class="w-full lg:w-1/2 flex-1 space-y-2 lg:space-y-4 lg:max-w-xl gap-4">
-            {service.type && <p>{service.type}</p>}
-            <p class="text-base-content text-[36px] md:text-[48px] leading-[120%] font-bold">
-              {service.label}
-            </p>
-            <p
-              class="text-base-content text-[16px] md:text-[18px]"
-              dangerouslySetInnerHTML={{ __html: service.description || "" }}
+    return (
+        <>
+            <div id={id}
+                class="n1-text-width-image__link relative overflow-hidden w-full py-[30px] px-[20px]"
             >
-            </p>
-          </div>
-        </div>
-      ))}
-    </div>
-  );
+                {desktop && desktop?.image && desktop?.width && desktop?.height && (
+                    <Image
+                      class="mobile:h-auto mobile:max-w-full relative"
+                      src={desktop.image}
+                      width={desktop.width}
+                      height={desktop.height}
+                      alt={desktop && desktop?.alt ? desktop?.alt : 'Imagem'}
+                      loading={lcp ? "eager" : "lazy"}                                          
+                    /> 
+                )}
+
+                <div class="flex flex-col">
+                    { settingsInfo?.title && (
+                        <span class="text-[#ffffff] font-archimoto-medium md:text-24 !leading-[31.8px] font-black md:mt-[30px] mb-[10px] n1-text-top-width-image__title"> 
+                        { settingsInfo?.title } 
+                        </span>
+                    ) }
+
+                    { settingsInfo?.text && (
+                        <span class="text-[#ffffff] font-noto-sans md:text-16 font-normal mobile:mb-[32px] md:mb-[30px] n1-text-top-width-image__text"> { settingsInfo?.text } </span>
+                    ) }
+
+                    { settingsInfo?.textLink && (                        
+                        <a 
+                          href={settingsInfo?.href ?? "javascript:void(0)"}
+                          aria-label={settingsInfo?.title}                        
+                          class={clx(`mobile:w-[55%] md:w-[43%] flex border border-[#fff] px-[20px] pb-[11px] 
+                            pt-[12px] rounded-[100px] justify-center items-center min-w-[134px]`)}>
+
+                            <span class="text-[#ffffff] flex font-archimoto-medium md:text-14 font-black"> { settingsInfo?.textLink } </span>
+                        </a>
+                    ) }                
+                </div>          
+            </div>
+        </>
+    );
+}
+
+function Dots( { images }: Props ) {
+    return (
+        <>
+            <style
+                dangerouslySetInnerHTML={{
+                __html: `
+                    @property --dot-progress {
+                        syntax: '<percentage>';
+                        inherits: false;
+                        initial-value: 0%;
+                    }
+                `,
+                }}
+            />
+
+            <ul class="n1-text-top-width-carousel__dots relative z-10 mobile:top-0 carousel justify-center col-span-full gap-x-[5px] row-start-4 w-full">
+                {images?.map((_, index) => {                
+                    return(
+                        <>
+                            <li class="carousel-item">
+                                <Slider.Dot 
+                                    index={index}
+                                    classes={`${(( index === 0 ) || ( index % 4 === 0 ) ) ? "" : 'hidden'}`}
+                                >
+
+                                    <div class='pb-5'>
+                                        <div 
+                                            class={clx(`n1-banner-btn__dot--item w-[140px] sm:w-20 h-[3px] rounded group-disabled:animate-progress group-disabled:bg-[#06ADC2] 
+                                            bg-gradient-to-r from-[#06ADC2] from-[length:var(--dot-progress)] to-[rgba(255,255,255,0.4)] to-[length:var(--dot-progress)]`)}
+                                        />
+                                    </div>
+                                </Slider.Dot>
+                            </li>
+                        </>
+                    )
+                })}
+            </ul>
+        </>
+    );
+}
+
+function Buttons() {
+    return (
+        <>
+            <div class="absolute w-full flex mobile:justify-center mobile:items-end justify-between h-full top-[0] items-center pb-[10px]">
+                <div class="flex items-center justify-start z-10 col-start-1 row-start-2 md:ml-[5%] mobile:mr-[30px]">
+                    <Slider.PrevButton class="btn btn-circle bg-[#ffffff] w-[40px] !h-[40px]">
+                        <Icon
+                            size={18}
+                            id="Banner-arrow-left"
+                            strokeWidth={3}
+                        />
+                    </Slider.PrevButton>
+                </div>
+                <div class="flex items-center justify-end z-10 col-start-3 row-start-2 md:mr-[5%] mobile:ml-[30px]">
+                    <Slider.NextButton class="btn btn-circle bg-[#ffffff] w-[40px] !h-[40px]">
+                        <Icon
+                            size={18}
+                            id="Banner-arrow-right"
+                            strokeWidth={3}
+                        />
+                    </Slider.NextButton>
+                </div>
+            </div>
+        </>
+    );
 }
+
+function TextTopWidthCarousel(props: SectionProps<ReturnType<typeof loader>>) {
+    const id = useId();
+    const { images, preload, title, texto, textLink, link, device } = props;
+
+    return (
+        <>
+            <div id={id} class="relative mobile:pb-[60px]">
+                <div class=" md:n1-container md:px-[120px] z-10 md:mb-[40px] relative">
+
+                    <div class="mobile:my-[24px] mt-[120px] mb-[43px] text-[#ffffff] flex items-center justify-between flex-wrap">
+                        <div class="mobile:px-[20px]">
+                            {title && (
+                                <div class="n1-text-widt-image__title uppercase font-archimoto-medium text-56 md:text-56 md:leading-[20px]"
+                                    dangerouslySetInnerHTML={{__html: title}}> 
+                                </div>                                 
+                            )}
+                            {texto &&  (
+                                <div class="n1-text-widt-image__text md:flex font-noto-sans block mt-[11px] text-20 leading-[26px]"
+                                    dangerouslySetInnerHTML={{__html: texto}}>                                
+                                </div>
+                            )}
+                        </div>
+                        {textLink && (
+                            <div class="n1-mosaic__link my-[15px] mobile:px-[24px]">
+                                <LinkWithOptionArrow 
+                                    text={textLink} 
+                                    link={link} 
+                                    width={'255'} 
+                                    fontSize='16'
+                                    margin={'0'}
+                                />
+                            </div>
+                        )}                        
+                    </div>
+
+
+                    <Slider class="carousel carousel-center gap-x-[22px] flex mobile:px-[20px]">
+                        {images?.map((image, index) => {
+                            
+                            return (
+                                <>
+                                    <Slider.Item 
+                                      index={index} 
+                                      class="carousel-item mobile:w-[90%] w-[31.666%] rounded-[10px]
+                                        bg-[linear-gradient(181deg,_#FFF_-176.1%,_rgba(255,_255,_255,_0.29)_-85.87%,_rgba(255,_255,_255,_0.00)_124.35%)]">
+
+                                        <ImageCarouselItem
+                                            image={image}
+                                            lcp={index === 0 && preload}
+                                            id={`${id}::${index}`}
+                                        />
+                                    </Slider.Item>
+                                </>
+                            );
+                        })}
+                    </Slider>
+                </div>
+        
+                {props.arrows && <Buttons />}
+        
+                {props.dots && device === 'desktop' && <Dots images={images} />}
+        
+                <SliderJS rootId={id} />
+            </div>
+        </>
+    );
+}
+
+export const loader = (props: Props, _req: Request, ctx: FnContext) => {
+    return {
+        ...props,
+        device: ctx.device,
+    };
+};
+
+export default TextTopWidthCarousel;
diff --git a/sections/Content/TextWithImageAnimation.tsx b/sections/Content/TextWithImageAnimation.tsx
new file mode 100644
index 0000000..13f1572
--- /dev/null
+++ b/sections/Content/TextWithImageAnimation.tsx
@@ -0,0 +1,226 @@
+import type { ImageWidget } from "apps/admin/widgets.ts";
+import Image from "apps/website/components/Image.tsx";
+import LinkTelephoneWithOptionArrow from '../../components/ui/LinkTelephoneWithOptionArrow.tsx';
+import { FnContext, SectionProps } from "deco/mod.ts";
+import { clx } from "$store/sdk/clx.ts";
+
+/** @title {{{alt}}}  */
+interface PropsImage {
+    /** @title Insira a imagem */
+    image: ImageWidget;
+    /** @title Ordem da imagem */
+    /** @description (ex: 1) */        
+    orderImage: number;
+    /** @title Insira o nome da imagem */
+    alt?: string;
+    /** @title Insira o link da imagem */
+    href?: string;   
+    /** 
+     * @title Insira a largura da imagem 
+     * @description (ex: 112) 
+     * */
+    width:number;
+    /** 
+     * @title Insira a altura da imagem 
+     * @description (ex: 111) 
+     * */    
+    height:number;
+}
+
+interface PropsText{
+    /** 
+     * @title Insira o subtítulo
+     * @format html 
+     * */     
+    subtitle?:string;
+    /** 
+     * @title Insira o parágrafo 
+     * @format html 
+     * */     
+    paragraph?:string;
+}
+
+interface Props{
+    /** @title Texto - config */
+    settingsText?: PropsText;
+    /** @title Texto para o centro das imagens */
+    textImage?:string
+    /** @title Imagem  */
+    /** @description (limite de 5 imagens) */ 
+    /** @maxItems 5 */
+    allImage?:PropsImage[];
+
+    /** @title Texto do botão/link  */
+    textbutton?:string;
+
+    /** @title WhatsApp */
+    /** @description (ex: 99-99999-9999) */      
+    telephone?: string;
+
+    /** @title Deseja botão com seta? */
+    activeArrow?: boolean;
+
+    /** 
+     * @title Tamanho do botão 
+     * @description (ex: 300) 
+    */
+    width?: string;
+
+    /** @title Deseja animação ? */
+    animationAction?:boolean; 
+    /** @title Imagem de fundo */    
+    /** @description (de preferencia imagem com opacidade) ? */    
+    backgraoundImage?:ImageWidget;
+    /** @title Largura da imagem */ 
+    /** @description (ex: 650) */ 
+    backgroundImageWidth?:number;       
+    /** @title Altura da imagem */ 
+    /** @description (ex: 850) */ 
+    backgroundImageHeight?:number;
+    /** @title Posição vertical da imagem */ 
+    /** @description (ex: 100) */ 
+    backgroundImageTop?:number;
+    /** @title Posição horizonatal da imagem */ 
+    /** @description (ex: 100) */     
+    backgroundImageRight?:number;
+    /** @title Ativar imagem de fundo? */
+    backgroundImageActive?: boolean;
+}
+
+function TextWithImageAnimation ( props: SectionProps<ReturnType<typeof loader>> ){
+    const { 
+        settingsText, 
+        textImage, 
+        allImage, 
+        textbutton, 
+        telephone, 
+        activeArrow, 
+        width, 
+        animationAction,
+        backgraoundImage,
+        backgroundImageWidth,
+        backgroundImageHeight,
+        backgroundImageTop, 
+        backgroundImageRight,
+        backgroundImageActive,
+        device
+    } = props;
+    
+    return(
+        <>
+            <div class="relative z-0">
+                {backgraoundImage && backgroundImageActive && device === 'desktop' && (
+                    <Image
+                        src={backgraoundImage}
+                        width={backgroundImageWidth ? backgroundImageWidth : 650}
+                        height={backgroundImageHeight ? backgroundImageHeight : 850}
+                        sizes="(max-width: 100px)"
+                        style={{
+                            position: 'absolute',
+                            top: backgroundImageTop ? backgroundImageTop + 'px' : '-270px',
+                            right: backgroundImageRight ? backgroundImageRight + 'px' : '0px'
+                        }}
+                    />                    
+                )}
+                <div 
+                
+                    class={clx(`mobile:flex mobile:flex-col-reverse grid grid-cols-[repeat(2,_1fr)] 
+                        md:max-w-[1440px] md:mx-[auto] my-[0] md:px-[120px] py-[0] tablet:flex tablet:flex-col-reverse`)}
+                    >
+                    <div class="max-w-full flex items-center justify-center tablet:mt-[36px] mobile:mt-[32px]">
+                        <div class="flex flex-col items-start">
+                            <div class="flex flex-col items-start justify-start">
+                                {settingsText && settingsText?.subtitle && (
+                                    <div
+                                        class="mobile:px-[20px] n1-textwithimageanimation__subtitle inline-block font-archimoto-medium text-48 font-black"
+                                        dangerouslySetInnerHTML={{
+                                            __html: settingsText?.subtitle,
+                                        }}
+                                    >
+                                    </div>                               
+                                )}
+
+                                {settingsText && settingsText?.paragraph && (
+                                    <div
+                                        class="mobile:px-[20px] n1-textwithimageanimation__paragraph inline-block font-noto-sans text-20 mt-[6px]"
+                                        dangerouslySetInnerHTML={{
+                                            __html: settingsText?.paragraph,
+                                        }}
+                                    >
+                                    </div>                               
+                                )}
+                            </div>
+
+                            {textbutton && (
+                                <div class="mobile:w-[90%] mobile:my-0 mobile:mx-auto mobile:flex mobile:flex-wrap">
+                                    <LinkTelephoneWithOptionArrow 
+                                        customClass={`!m-0 !mt-[32px]`} 
+                                        text={textbutton} 
+                                        telephone={telephone} 
+                                        activeArrow={activeArrow} 
+                                        width={device === 'mobile' ? '329' : width} 
+                                        fontSize='14'
+                                    />
+                                </div>
+                            )}
+                        </div>
+                    </div>
+                    <div class="flex items-center justify-center">
+                        <div 
+                            class={clx(`mobile:grid-rows-[repeat(3,_auto)] mobile:w-[360px] mobile:mt-[10px] mobile:mb-[30px] 
+                                grid grid-cols-[repeat(5,auto)] grid-rows-[repeat(5,_auto)] w-[448px]`)}
+                            >
+                            {allImage && allImage.length > 0 && allImage.map(({alt, href, image, width, height, orderImage})=>{
+                                if(image){
+                                    return(
+                                        <a href={`${href ? href : "javascript:void(0)"}`} style={{ pointerEvents : `${href ? 'all' : 'none'}` }}
+                                            class={`
+                                                ${orderImage === 1 ? 'mobile:col-[2] col-[3] row-[1] flex justify-center z-10' 
+                                                : orderImage === 2 ? 'mobile:col-[3] mobile:mt-[57px] mobile:mb-[55px] row-[2] col-[5] mt-[70px] mb-[60px] flex justify-end z-10'
+                                                : orderImage === 3 ? 'mobile:col-[3] row-[3] col-[4_/_2_span] -translate-x-[50px] flex justify-start z-10'
+                                                : orderImage === 4 ? 'mobile:col-[1] row-[3] col-[1_/_2_span] translate-x-[50px] flex justify-end z-10'
+                                                : orderImage === 5 ? 'mobile:mt-[57px] mobile:mb-[55px] row-[2] col-[1] mt-[70px] mb-[60px] z-10'
+                                                : ""
+                                                }                                
+                                            `}> 
+
+                                            <Image
+                                                src={image}
+                                                alt={alt}
+                                                width={Number(width)}
+                                                height={height}
+                                                sizes="(max-width: 100px)"
+                                                class={`mobile:w-[70px] min-w-[${width + 'px'}] n1-textwithimageanimation__image ${animationAction ? 'is-active' : ''}`} 
+                                            />
+                                        </a>                         
+                                    )
+                                }
+                            })}
+                            {textImage && (
+                                <div 
+                                    class={clx(`mobile:col-[2] col-[3] row-[2] flex items-center justify-center relative
+                                        before:content-[""] before:border-[0.268px] before:border-solid before:border-[rgba(198,_198,_198,_.3)] before:opacity-20 before:w-[70%] before:h-[85%] before:absolute before:rounded-[50%] before:top-[25px]
+                                        after:content-[""] after:border-[0.268px] after:border-solid after:border-[rgba(198,_198,_198,_.3)] after:opacity-20 after:w-[140%] after:h-[160%] after:absolute after:rounded-[50%] after:-top-[55px]                        
+                                    `)}> 
+                                    <span 
+                                        class={`mobile:max-w-[70%] mobile:text-19 text-[#ffffff] text-center text-24 font-black font-archimoto-medium leading-[26.797px] max-w-[60%] mt-[30px]`}>
+                                            {textImage}
+                                    </span> 
+                                </div>                                            
+                            )}                        
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </>
+    )    
+}
+
+export const loader = (props: Props, _req: Request, ctx: FnContext) => {
+    return {
+      ...props,
+      device: ctx.device,
+    };
+};
+
+export default TextWithImageAnimation;
\ No newline at end of file
diff --git a/sections/Content/TextWithImageCustom.tsx b/sections/Content/TextWithImageCustom.tsx
new file mode 100644
index 0000000..4476099
--- /dev/null
+++ b/sections/Content/TextWithImageCustom.tsx
@@ -0,0 +1,29 @@
+import type { ImageWidget } from "apps/admin/widgets.ts";
+
+interface Props{
+    image?:ImageWidget;
+}
+
+function TextWithImageCustom( { image } : Props ){
+    return(
+        <>
+            <div class="text-[#ffffff] md:n1-container md:px-[120px]">
+                <h1 class="text-[90px] md:max-w-[60%] font-archimoto-medium font-black">vamos dar vida as suas ideias!</h1>
+                {image && (
+                    <img src={image} />
+                )}
+                <div>
+                    <div>
+                        <span>Fale com a gente</span>
+                    </div>
+                    <div>
+                        <span>Diga oi!</span>
+                    </div>
+                </div>
+            </div>
+
+        </>
+    )
+}
+
+export default TextWithImageCustom;
\ No newline at end of file
diff --git a/sections/Images/Carousel.tsx b/sections/Images/Carousel.tsx
index c948b9e..b3084cb 100644
--- a/sections/Images/Carousel.tsx
+++ b/sections/Images/Carousel.tsx
@@ -1 +1 @@
-export { default } from "$store/components/ui/BannerCarousel.tsx";
+export { default, loader } from "$store/components/ui/BannerCarousel.tsx";
diff --git a/static/image/cases/cases-arrow-up-hover.png b/static/image/cases/cases-arrow-up-hover.png
new file mode 100644
index 0000000..ada4e0e
Binary files /dev/null and b/static/image/cases/cases-arrow-up-hover.png differ
diff --git a/static/image/cases/cases-arrow-up.png b/static/image/cases/cases-arrow-up.png
new file mode 100644
index 0000000..64442a6
Binary files /dev/null and b/static/image/cases/cases-arrow-up.png differ
diff --git a/static/image/cases/cases-background-costa.png b/static/image/cases/cases-background-costa.png
new file mode 100644
index 0000000..5766a29
Binary files /dev/null and b/static/image/cases/cases-background-costa.png differ
diff --git a/static/image/cases/cases-background-hospitalar.png b/static/image/cases/cases-background-hospitalar.png
new file mode 100644
index 0000000..5766a29
Binary files /dev/null and b/static/image/cases/cases-background-hospitalar.png differ
diff --git a/static/image/cases/cases-background-hover.png b/static/image/cases/cases-background-hover.png
new file mode 100644
index 0000000..edba8cf
Binary files /dev/null and b/static/image/cases/cases-background-hover.png differ
diff --git a/static/image/cases/cases-background-ohboy.png b/static/image/cases/cases-background-ohboy.png
new file mode 100644
index 0000000..5766a29
Binary files /dev/null and b/static/image/cases/cases-background-ohboy.png differ
diff --git a/static/image/cases/cases-costa-hover.png b/static/image/cases/cases-costa-hover.png
new file mode 100644
index 0000000..7e7fb2e
Binary files /dev/null and b/static/image/cases/cases-costa-hover.png differ
diff --git a/static/image/cases/cases-costa.png b/static/image/cases/cases-costa.png
new file mode 100644
index 0000000..af69d71
Binary files /dev/null and b/static/image/cases/cases-costa.png differ
diff --git a/static/image/cases/cases-hospitalar-hover.png b/static/image/cases/cases-hospitalar-hover.png
new file mode 100644
index 0000000..fccfafd
Binary files /dev/null and b/static/image/cases/cases-hospitalar-hover.png differ
diff --git a/static/image/cases/cases-hospitalar.png b/static/image/cases/cases-hospitalar.png
new file mode 100644
index 0000000..de6c825
Binary files /dev/null and b/static/image/cases/cases-hospitalar.png differ
diff --git a/static/image/cases/cases-ohboy-hover.png b/static/image/cases/cases-ohboy-hover.png
new file mode 100644
index 0000000..c255554
Binary files /dev/null and b/static/image/cases/cases-ohboy-hover.png differ
diff --git a/static/image/cases/cases-ohboy.png b/static/image/cases/cases-ohboy.png
new file mode 100644
index 0000000..6de1bd9
Binary files /dev/null and b/static/image/cases/cases-ohboy.png differ
diff --git a/static/image/cases/cases-tag-deco.png b/static/image/cases/cases-tag-deco.png
new file mode 100644
index 0000000..aabeb78
Binary files /dev/null and b/static/image/cases/cases-tag-deco.png differ
diff --git a/static/image/cases/cases-tag-evolucao.png b/static/image/cases/cases-tag-evolucao.png
new file mode 100644
index 0000000..f37a76d
Binary files /dev/null and b/static/image/cases/cases-tag-evolucao.png differ
diff --git a/static/image/cases/cases-tag-midia-paga.png b/static/image/cases/cases-tag-midia-paga.png
new file mode 100644
index 0000000..5fb0119
Binary files /dev/null and b/static/image/cases/cases-tag-midia-paga.png differ
diff --git a/static/image/cases/cases-tag-midia-sociais.png b/static/image/cases/cases-tag-midia-sociais.png
new file mode 100644
index 0000000..3be3d7c
Binary files /dev/null and b/static/image/cases/cases-tag-midia-sociais.png differ
diff --git a/static/image/cases/cases-tag-moda.png b/static/image/cases/cases-tag-moda.png
new file mode 100644
index 0000000..fe0e1bd
Binary files /dev/null and b/static/image/cases/cases-tag-moda.png differ
diff --git a/static/image/cases/cases-tag-papelaria.png b/static/image/cases/cases-tag-papelaria.png
new file mode 100644
index 0000000..11785fb
Binary files /dev/null and b/static/image/cases/cases-tag-papelaria.png differ
diff --git a/static/image/cases/cases-tag-saude.png b/static/image/cases/cases-tag-saude.png
new file mode 100644
index 0000000..f74c97d
Binary files /dev/null and b/static/image/cases/cases-tag-saude.png differ
diff --git a/static/image/cases/cases-tag-suporte.png b/static/image/cases/cases-tag-suporte.png
new file mode 100644
index 0000000..02e74ee
Binary files /dev/null and b/static/image/cases/cases-tag-suporte.png differ
diff --git a/static/sprites.svg b/static/sprites.svg
index f09c31e..5e6f1df 100644
--- a/static/sprites.svg
+++ b/static/sprites.svg
@@ -1,4 +1,6 @@
 <svg style="display:none">
+	<symbol id="Banner-arrow-left" style="width: 1em; height: 1em;vertical-align: middle;fill: #0C1F59;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M426.65984 170.65984q17.67424 0 30.16704 12.4928t12.4928 30.16704q0 18.00192-12.67712 30.33088l-225.66912 225.66912 665.00608 0q17.67424 0 30.16704 12.4928t12.4928 30.16704-12.4928 30.16704-30.16704 12.4928l-665.00608 0 225.66912 225.66912q12.67712 12.32896 12.67712 30.33088 0 17.67424-12.4928 30.16704t-30.16704 12.4928q-18.00192 0-30.33088-12.32896l-298.65984-298.65984q-12.32896-13.0048-12.32896-30.33088t12.32896-30.33088l298.65984-298.65984q12.67712-12.32896 30.33088-12.32896z"  /></symbol>
+	<symbol id="Banner-arrow-right" style="width: 1em; height: 1em;vertical-align: middle;fill: #0C1F59;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M597.34016 170.65984q18.00192 0 30.33088 12.32896l298.65984 298.65984q12.32896 12.32896 12.32896 30.33088t-12.32896 30.33088l-298.65984 298.65984q-12.32896 12.32896-30.33088 12.32896-18.3296 0-30.49472-12.16512t-12.16512-30.49472q0-18.00192 12.32896-30.33088l225.9968-225.66912-665.00608 0q-17.67424 0-30.16704-12.4928t-12.4928-30.16704 12.4928-30.16704 30.16704-12.4928l665.00608 0-225.9968-225.66912q-12.32896-12.32896-12.32896-30.33088 0-18.3296 12.16512-30.49472t30.49472-12.16512z"  /></symbol>
 	<symbol id="ChevronLeft" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" /></symbol>
 	<symbol id="ChevronRight" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M11.057 7.05721C11.5777 6.53651 12.4219 6.53651 12.9426 7.05721L20.9426 15.0572C21.4633 15.5779 21.4633 16.4221 20.9426 16.9428L12.9426 24.9428C12.4219 25.4635 11.5777 25.4635 11.057 24.9428C10.5363 24.4221 10.5363 23.5779 11.057 23.0572L18.1142 16L11.057 8.94283C10.5363 8.42213 10.5363 7.57791 11.057 7.05721Z"/></symbol>
 	<symbol id="ChevronUp" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 24" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M11.7929 8.29289C12.1834 7.90237 12.8166 7.90237 13.2071 8.29289L19.2071 14.2929C19.5976 14.6834 19.5976 15.3166 19.2071 15.7071C18.8166 16.0976 18.1834 16.0976 17.7929 15.7071L12.5 10.4142L7.20711 15.7071C6.81658 16.0976 6.18342 16.0976 5.79289 15.7071C5.40237 15.3166 5.40237 14.6834 5.79289 14.2929L11.7929 8.29289Z"/></symbol>
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 90ea8cf..bbf3933 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -21,13 +21,22 @@ export default {
     },
     fontSize:{
       12: ['12px', '22.4px'],
+      13: ['13px', '17px'],
       14: ['14px', '19.6px'],
       16: ['16px', '22px'],
       18: ['18px', '21.6px'],
+      19: ['19px', '21.87px'],
+      20: ['20px', '24px'],
       24: ['24px', '28.8px'],
+      25: ['25px', '30px'],
+      27: ['27px', '32.4px'],
       32: ['32px', '38.4px'],
+      34: ['34px', '41.34px'],
+      40: ['32px', '48px'],
       48: ['48px', '57.6px'],
-
+      50: ['50px', '60px'],
+      56: ['56px', '20px'],
+      60: ['60px', '66px'],
     },
     extend: {
       gridTemplateColumns:{
@@ -36,7 +45,7 @@ export default {
         '4-auto'  : 'repeat(4, auto)',
         '5-auto'  : 'repeat(5, auto)',
         '3-200'  : 'repeat(3, 200px)',
-        '2-200'  : 'repeat(3, 200px)',
+        '2-200'  : 'repeat(2, 200px)',
         '6-auto' : 'repeat(6, auto)',
       },
       animation: {
@@ -49,9 +58,10 @@ export default {
         },
       },
       screens:{
-        'mobile'          : {'max': '767px'},
-        'tablet'          : {'min' : '768px', 'max': '1023px'},
-        'portatil'        : {'min' : '1024px','max': '1280px'}
+        'mobile'          : {'max': '768px'},
+        'tablet'          : {'min' : '768px', 'max': '1024px'},
+        'notebook'        : {'min' : '768px', 'max': '1536px'},
+        'portatil'        : {'min' : '1024px','max': '1280px'},
       }
     },
   },
diff --git a/tailwind.css b/tailwind.css
index 0de6642..d7c77cb 100644
--- a/tailwind.css
+++ b/tailwind.css
@@ -60,7 +60,7 @@
   }
 
   .n1-header__desktop{
-    background: linear-gradient(180deg, #0C1F59 -18.75%, #0B1227 100%);
+    background: linear-gradient(180deg, #0C1F59 -18.75%, rgba(12, 31, 89, 0.00) 100%);
     backdrop-filter: blur(135px);
     color: #fff;
   }
@@ -76,6 +76,31 @@
 
   .n1-header__navlink-children-title{white-space: initial !important;}
 
+  .n1-header__navlink--active:before,
+  .n1-header__navlink--active:after{
+    content: "";
+    display: block;
+    border: 1px solid #fff;
+    border-radius: 10px;
+    width: 10px;
+    position: absolute;
+    background: #fff; 
+    transition: all .2s linear;
+  }
+
+  .n1-header__navlink--active:before{
+    top: 10px;
+    right: 10px;
+    transform: rotate(-45deg); 
+  }
+
+  .n1-header__navlink--active:after{
+    position: absolute;
+    top: 10px;
+    right: 3px;
+    transform: rotate(45deg); 
+  }    
+
   .moveFromTop:hover { transform: translateY(20px) }
 
   /*  ESTILIZAÇÃO COLLAPSE DO MENU MOBILE ______________________________________________________________| INICIAL | */
@@ -151,6 +176,149 @@
 
   /*  ESTILIZAÇÃO COLLAPSE DO MENU MOBILE ______________________________________________________________| FINAL | */
 
+  .n1-banner-btn__dot:disabled .n1-banner-btn__dot--item{
+    @apply w-32 duration-200
+  }
+
+
+  /*  ESTILIZAÇÃO HOVER DO CARRROSSEL TEXTTOPWIDTHCAROUSEL __________________________________________| INICIAL | */
+  .n1-text-top-width-carousel__link .n1-text-top-width-carousel__overlay{transition: all 1s linear;}
+
+  .n1-text-top-width-carousel__link:hover .n1-text-top-width-carousel__overlay{
+    animation: overlayCard .275s linear both;
+    visibility: visible;
+    opacity: 1;
+    transition: all 1s linear;
+  }
+
+  @keyframes overlayCard {
+    0%{background: transparent;}
+    100%{background: linear-gradient(8deg, rgba(60, 203, 218, 0.01) -32.53%, rgba(60, 203, 218, 0.27) 63.83%, rgba(60, 203, 218, 0.40) 276.77%);}
+  }  
+
+  .n1-text-top-width-carousel__link:hover .n1-text-top-width-carousel__title{
+    animation: overlayText .275s linear forwards;
+  }
+
+
+  @keyframes overlayText {
+    0%{background: transparent;}
+    100%{
+      background: linear-gradient(180deg, #69C7F0 0%, rgba(255, 255, 255, 0.00) 100%);
+      background-clip: text;
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+    }
+  }
+  /*  ESTILIZAÇÃO HOVER DO CARRROSSEL TEXTTOPWIDTHCAROUSEL __________________________________________| FINAL | */  
+
+  /*  ESTILIZAÇÃO ANIMAÇÃO DE ESCRITA DE TEXTO ______________________________________________________________| INICIAL | */
+  .n1-typing span {
+    display: grid;
+    color: #3CCBDA;
+    font-size: 80px;
+    font-style: normal;
+    font-weight: 900;
+    line-height: 88px;
+    overflow: hidden; 
+    border-right: 0.15em solid #3CCBDA;
+    white-space: nowrap; 
+    max-width:max-content;
+    animation: typingText 2.3s steps(120, end) alternate infinite, blinkBorder .75s step-end infinite;
+  }
+  
+  @keyframes typingText {
+    from {width: 0;}
+    to {width: 100%;}
+  }
+  
+  @keyframes blinkBorder {
+    from,to {border-color: transparent;}
+    50% {border-color: #3CCBDA;}
+  } 
+
+  /*  ESTILIZAÇÃO ANIMAÇÃO DE ESCRITA DE TEXTO ______________________________________________________________| FINAL | */ 
+
+
+  /*  ESTILIZAÇÃO ANIMAÇÃO DA MARCA ______________________________________________________________________| INICIAL | */  
+
+  .animation-section-brand{
+    animation: slide 10s linear infinite;
+  }
+
+  @keyframes slide {
+    0% { transform: translateX(0);}
+    100% { transform: translateX(-100%);}
+  } 
+  /*  ESTILIZAÇÃO ANIMAÇÃO DA MARCA ______________________________________________________________________| FINAL | */ 
+
+  /*  ESTILIZAÇÃO IMAGEM PLATAFORMAS ______________________________________________________________________| INICIAL | */ 
+  .n1-textwithimageanimation__image.is-active{
+    animation: scaleImage 2s linear infinite alternate;
+  }
+
+  @keyframes scaleImage {
+    0% {transform: scale(.7);}
+    100% {transform: scale(1);} 
+  }  
+  /*  ESTILIZAÇÃO IMAGEM PLATAFORMAS ______________________________________________________________________| FINAL | */  
+
+  .n1-cases-card.is-active .n1-cases-card__item .n1-cases-card__logo{
+    width: 0%;
+    /* /* opacity: 0; */
+    visibility: hidden; 
+    transition: all 1s linear;
+  }
+
+  .n1-cases-card.is-active .n1-cases-card__item{
+    opacity: 0;
+    visibility: hidden; 
+    transition: all .175s linear;
+  }
+
+  .n1-cases-card.is-active .n1-cases-card__item--hover{
+    visibility: visible ;
+    opacity: 1;
+    width: 100%;
+    transition: all .575s linear;
+  }  
+
+  .n1-cases-card__item{
+    scroll-snap-align: start !important;
+  }
+
+
+  .n1-mosaic__title.is-white *,
+  .n1-mosaic__title.is-white > *,
+  .n1-mosaic__title.is-white > * > *,
+  .n1-mosaic__title.is-white > * > * > *{
+    color: #0C1F59 !important;
+  }
+
+  .n1-mosaic__text.is-white *,
+  .n1-mosaic__text.is-white > *,
+  .n1-mosaic__text.is-white > * > *,
+  .n1-mosaic__text.is-white > * > * > *{
+    color: #0C1F59 !important;
+  }
+
+  .n1-mosaic__text.is-primary *,
+  .n1-mosaic__text.is-primary > *,
+  .n1-mosaic__text.is-primary > * > *,
+  .n1-mosaic__text.is-primary > * > * > *{
+    color: #ffffff !important;
+  } 
+  
+  
+  .n1-text-top-width-image__name,
+  .n1-text-top-width-image__title,
+  .n1-text-top-width-image__text{
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    overflow: hidden;
+    -webkit-box-orient: vertical;    
+  }
+
   .n1-footer__bg-social:before{
     content: "";
     border-radius: 50px;
@@ -179,8 +347,7 @@
     left: 15%;
     position: absolute;
     background: radial-gradient(46.49% 46.49% at 49.96% 53.51%, rgba(59, 200, 216, 0.50) 0%, rgba(59, 200, 216, 0.00) 100%)    
-  }
-  
+  }  
   
   .n1-footer__overlay--bottom-right{
     bottom: 0%;
@@ -189,7 +356,6 @@
     background: radial-gradient(46.49% 46.49% at 49.96% 53.51%, rgba(248, 188, 51, 0.50) 0%, rgba(248, 188, 51, 0.00) 100%);
   }
 
-
   .n1-footer__overlay--middle-right{
     top: 0;
     right: -390px;
@@ -197,35 +363,156 @@
     background: radial-gradient(46.49% 46.49% at 49.96% 53.51%, rgba(59, 200, 216, 0.50) 0%, rgba(59, 200, 216, 0.00) 100%) 
   }
 
-  .n1-header__navlink--active:before{
-    content: "";
-    display: block;
-    border: 1px solid #fff;
-    border-radius: 10px;
-    width: 10px;
-    position: absolute;
-    top: 10px;
-    right: 10px;
-    transform: rotate(-45deg); 
-    background: #fff;
-    transition: all .2s linear;   
+  @media (max-width: 426px){
+    .n1-cases__info{margin-bottom: 15px;}
+    .n1-cases__icon-mobile{
+      position: absolute;
+      right: 20px;
+      bottom: 20px;      
+    }
+    .n1-cases-card__tags{grid-template-columns: repeat(4,auto) !important;}
+  } 
+
+  @media (max-width: 376px){
+    .n1-cases-card__item .n1-cases-card__item--hover{width: 300px !important;}
+    .n1-cases-card__item{width: 91.333% !important;}
+    .n1-cases__info{margin-bottom: initial;}
+    .n1-cases__icon-mobile{
+      position: initial;
+      right: initial;
+      bottom: initial;      
+    }    
+    .n1-cases-card__tags{grid-template-columns: repeat(3,auto) !important;}
   }
 
-  .n1-header__navlink--active:after{
-    content: "";
-    display: block;
-    border: 1px solid #fff;
-    border-radius: 10px;
-    width: 10px;
-    position: absolute;
-    top: 10px;
-    right: 3px;
-    transform: rotate(45deg); 
-    background: #fff;
-    transition: all .2s linear;   
+  @media (max-width: 320px){
+    .n1-cases-card__item .n1-cases-card__item--hover{width: 250px !important;}
+    .n1-cases-card__tags{
+      grid-template-columns: repeat(2, 1fr) !important;
+    }
+  }  
+
+  @media (min-width: 426px) and (max-width: 768px){
+    .n1-cases-card__mobile{max-width: 100%;}
+    .n1-cases-card__carousel{
+      column-gap: 15px;
+      max-width: 100%;
+      width: 100% !important;      
+    }
+
+    .n1-cases-card__item{width:95% !important;}
+
+    .n1-cases-card__tags{grid-template-columns: repeat(4,1fr) !important;}
+
   }
 
-  @media (max-width: 767px){
+  @media (max-width: 768px){
+    .n1-banner-btn__dot:disabled .n1-banner-btn__dot--item{@apply w-20}
+
+    .animation-section-brand{animation: slide 20s linear infinite;}
+
+    /*  ESTILIZAÇÃO TEXTS (EDIT RICH TEXT - ADMIN DECO) ______________________________________________________________________| INICIAL | */ 
+    .n1-typing > *,
+    .n1-typing *,
+    .n1-typing > * > *,
+    .n1-typing > * > * > *,
+    .n1-hero__title > *,
+    .n1-hero__title *,
+    .n1-hero__title > * > *,
+    .n1-hero__title > * > * > * {
+      font-size: 24px !important;
+      line-height: 27.793px !important;
+    }    
+    
+    .n1-hero__description{
+      margin-top: 16px;
+      margin-bottom: 24px;
+    }
+
+    .n1-hero__title{
+      margin-bottom: 10px;
+    }
+    .n1-hero__description > *,
+    .n1-hero__description *,
+    .n1-hero__description > * > *,
+    .n1-hero__description > * > * > *{
+      font-size: 14px !important;
+      line-height: 19.6px !important;
+    }
+
+    .n1-hero__titleCta > *,
+    .n1-hero__titleCta *,
+    .n1-hero__titleCta > * > *,
+    .n1-hero__titleCta > * > * > *{
+      font-size: 14px !important;
+      line-height: 14.528px !important;
+    }
+
+    .n1-hero__titleCta{
+      margin-bottom: 8px;
+    }
+
+    .n1-textwithimageanimation__subtitle > *,
+    .n1-textwithimageanimation__subtitle *,
+    .n1-textwithimageanimation__subtitle > * > *,
+    .n1-textwithimageanimation__subtitle > * > * > *{
+      font-size: 24px !important;
+      line-height: 28.8px !important;    
+    }    
+
+    .n1-textwithimageanimation__paragraph > *,
+    .n1-textwithimageanimation__paragraph *,
+    .n1-textwithimageanimation__paragraph > * > *,
+    .n1-textwithimageanimation__paragraph > * > * > *{
+      font-size: 16px !important;
+      line-height: 22.4px !important;    
+    } 
+
+    .n1-cases-component__title *,
+    .n1-cases-component__title > *,
+    .n1-cases-component__title > * > *,
+    .n1-cases-component__title > * > * > *{
+      font-size: 24px !important;
+      line-height: 28.8px !important;    
+    } 
+
+    .n1-mosaic__title *,
+    .n1-mosaic__title > *,
+    .n1-mosaic__title > * > *,
+    .n1-mosaic__title > * > * > *{
+      font-size: 27px !important;
+      line-height: 33.38px !important;    
+    } 
+
+    .n1-mosaic__text *,
+    .n1-mosaic__text > *,
+    .n1-mosaic__text > * > *,
+    .n1-mosaic__text > * > * > *{
+      font-size: 12px !important;
+      line-height: 15.16px !important;    
+    }     
+    .n1-text-widt-image__title *,
+    .n1-text-widt-image__title > *,
+    .n1-text-widt-image__title > * > *,
+    .n1-text-widt-image__title > * > * > *{
+      font-size: 32px !important;
+      line-height: 38.4px !important;  
+    }
+
+    .n1-text-widt-image__text *,
+    .n1-text-widt-image__text > *,
+    .n1-text-widt-image__text > * > *,
+    .n1-text-widt-image__text > * > * > *{
+      font-size: 14px !important;
+      line-height: 14px !important; 
+    }
+
+    /*  ESTILIZAÇÃO TEXTS (EDIT RICH TEXT - ADMIN DECO) ______________________________________________________________________| FINAL | */    
+
+    /* .n1-text-top-width-carousel__dots{
+      gap: initial !important;
+    } */
+
     .n1-footer__overlay--bottom-left{
       transform: rotate(90deg);
       top: -510px;
@@ -254,18 +541,13 @@
       right: initial;
       left: -10px;
       bottom: 30px;      
-    }
-
-
-
-
-    
+    }    
   }
 
 }
 
 .group:disabled .group-disabled\:animate-progress {
-  animation: progress-frame ease normal
+  animation: progress-frame ease normal;
 }
 
 @keyframes progress-frame {