Merge pull request #16 from deco-sites/feat/servicos

style: add estile para page de implantação
deco-sites · Mar 21, 2024 · 7cad864 · 7cad864
2 parents 556fd9b + b7a9418
commit 7cad864
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 78 deletions.
diff --git a/sections/Content/TextIconAndImage.tsx b/sections/Content/TextIconAndImage.tsx
@@ -66,7 +66,7 @@ interface BlockTextProps {
   nameIcon?: string;
   /** @title Subtítulo */
   /** @format html */
-  subtitle: string;
+  subtitle?: string;
   /** @title Descrição */
   /** @format html */
   description: string;
@@ -123,30 +123,9 @@ const PLACEMENT = {
   direito: "flex-col lg:flex-row",
 };
 
-export default function ImageSection(
-  props: SectionProps<ReturnType<typeof loader>>,
-) {
-  const {
-    titleCenter,
-    blockText,
-    image,
-    placement,
-    bgSpital,
-    disableSpacing,
-    disabledProps,
-    device,
-  } = props;
-  const {
-    subtitle,
-    icon,
-    nameIcon,
-    subtitleWithTags,
-    description,
-    miniImage,
-    cta,
-    widthBlock,
-    activeEclipseText,
-  } = blockText;
+export default function ImageSection(props: SectionProps<ReturnType<typeof loader>>) {
+  const { titleCenter, blockText, image, placement, bgSpital, disableSpacing, disabledProps, device } = props;
+  const { subtitle, icon, nameIcon, subtitleWithTags, description, miniImage, cta, widthBlock, activeEclipseText } = blockText;
 
   return (
     <div class="relative">
@@ -179,17 +158,12 @@ export default function ImageSection(
           </div>
         )}
         <div
-          class={clx(
-            `n1-text-icon-image__container flex justify-between md:gap-x-[60px] mobile:mt-[60px] relative 
-                      ${PLACEMENT[placement]} text-left items-center z-10 ${
-              activeEclipseText && device === "desktop" ? "is-active" : ""
-            }
-                      ${placement === "direito" ? "is-active--rigth-0" : ""}
-                  `,
-          )}
+          class={clx(`n1-text-icon-image__container flex justify-between md:gap-x-[60px] mobile:mt-[60px] relative 
+              ${PLACEMENT[placement]} text-left items-center z-10 ${activeEclipseText ? "is-active" : ""}
+              ${placement === "direito" ? "is-active--rigth-0" : ""}`)}
         >
           {image && (
-            <div class="flex justify-center mobile:mb-[40px] relative max-w-[50%]">
+            <div class="flex justify-center mobile:mb-[40px] relative md:max-w-[50%]">
               <Picture>
                 {image?.desktop && image.desktop?.src && image.desktop?.width &&
                   image?.desktop?.height && (
@@ -227,15 +201,9 @@ export default function ImageSection(
               </Picture>
             </div>
           )}
-          <div
+          <div class="mobile:w-[100%] md:w-[50%]"
             style={{
-              width: `${
-                widthBlock && device === "desktop"
-                  ? widthBlock + "%"
-                  : device === "mobile"
-                  ? "50%"
-                  : "50%"
-              }`,
+              width: `${widthBlock && device === "desktop" ? widthBlock + "%" : ""}`,
             }}
           >
             {icon && !disabledProps?.icon && (
@@ -326,7 +294,7 @@ export default function ImageSection(
 
             {cta?.text && (
               <div class="md:mt-[20px]">
-                {!cta?.colorLink && (
+                {cta?.colorLink && (
                     <LinkWithOptionArrow
                       text={cta.text}
                       link={cta?.href}
@@ -336,7 +304,7 @@ export default function ImageSection(
                       margin={"0"}
                     />
                 )}
-                {cta?.colorLink && (
+                {!cta?.colorLink && (
                     <LinkWithOptionArrow
                       text={cta.text}
                       link={cta?.href}

diff --git a/tailwind.css b/tailwind.css
@@ -319,40 +319,6 @@
     -webkit-box-orient: vertical;    
   }
 
-
-  .n1-text-icon-image__container.is-active:after{
-    content: "";
-    border-radius: var(--radius-default, 1105.45px);
-    opacity: 0.3;
-    background: radial-gradient(105.4% 101.68% at 89.06% 88.91%, #3CCBDA 43.01%, #0C1F59 88.98%);
-    filter: blur(82px);
-    width: 1105.45px;
-    height: 419.496px;
-    transform: rotate(-1.426deg);
-    position: absolute;
-    top: 0;
-    right: 40%;            
-  }
-
-  .n1-text-icon-image__container.is-active--rigth-0:after{
-    content: "";
-    right: 0%;
-  }
-
-  .n1-text-icon-image__image.is-active:after{
-    content: "";
-    position: absolute;
-    top: -60px;
-    border-radius: var(--radius-default, 641.325px);
-    opacity: 0.25;
-    background: radial-gradient(105.4% 101.68% at 89.06% 88.91%, #3CCBDA 43.01%, #0C1F59 88.98%);
-    filter: blur(82px);
-    width: 641.325px;
-    height: 641.325px;
-    transform: rotate(-15.911deg);
-    right: -30px;    
-  }
-
   .n1-mosaic__link.is-primary a{
     background-color: transparent !important;
     border: 1px solid #ffffff;
@@ -414,6 +380,42 @@
     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%) 
   }
 
+  @media(min-width: 1024px){
+    .n1-text-icon-image__container.is-active:after{
+      content: "";
+      border-radius: var(--radius-default, 1105.45px);
+      opacity: 0.3;
+      background: radial-gradient(105.4% 101.68% at 89.06% 88.91%, #3CCBDA 43.01%, #0C1F59 88.98%);
+      filter: blur(82px);
+      width: 1105.45px;
+      height: 419.496px;
+      transform: rotate(-1.426deg);
+      position: absolute;
+      top: 0;
+      right: 40%;
+      z-index: -1;            
+    }
+
+    .n1-text-icon-image__container.is-active--rigth-0:after{
+      content: "";
+      right: 0%;
+    }
+
+    .n1-text-icon-image__image.is-active:after{
+      content: "";
+      position: absolute;
+      top: -60px;
+      border-radius: var(--radius-default, 641.325px);
+      opacity: 0.25;
+      background: radial-gradient(105.4% 101.68% at 89.06% 88.91%, #3CCBDA 43.01%, #0C1F59 88.98%);
+      filter: blur(82px);
+      width: 641.325px;
+      height: 641.325px;
+      transform: rotate(-15.911deg);
+      right: -30px;    
+    }    
+  }
+
   @media (max-width: 426px){
     .n1-cases__info{margin-bottom: 15px;}
     .n1-cases__icon-mobile{