Merge pull request #39 from deco-sites/fix/home

fix ajustes parte ll
deco-sites · Apr 9, 2024 · f9a9fc2 · f9a9fc2
2 parents 1b5ea04 + 47afcf0
commit f9a9fc2
Show file tree

Hide file tree

Showing 19 changed files with 241 additions and 77 deletions.
diff --git a/components/footer/FooterItems.tsx b/components/footer/FooterItems.tsx
@@ -36,11 +36,13 @@ export default function FooterItems(
                       {section.label}
                     </span>
                     <ul
-                      class={clx(`flex flex-col ${
-                        section.label === "Certificações"
-                          ? "gap-y-[10px]"
-                          : "gap-y-[16px] md:gap-y-[22px]"
-                      } flex-wrap text-sm`)}
+                      class={clx(
+                        `flex flex-col ${
+                          section.label === "Certificações"
+                            ? "gap-y-[10px]"
+                            : "gap-y-[16px] md:gap-y-[22px]"
+                        } flex-wrap text-sm`,
+                      )}
                     >
                       {section.items?.map((item) => {
                         return (
@@ -55,10 +57,18 @@ export default function FooterItems(
                               : (
                                 <li>
                                   <a
-                                    href={`${item?.href && item.href !== "#" ? item?.href : "javascript:void(0)"}`}
+                                    href={`${
+                                      item?.href && item.href !== "#"
+                                        ? item?.href
+                                        : "javascript:void(0)"
+                                    }`}
                                     style={{
-                                      pointerEvents: `${item?.href && item?.href !== "#" ? "all" : "none"}`
-                                    }}                                       
+                                      pointerEvents: `${
+                                        item?.href && item?.href !== "#"
+                                          ? "all"
+                                          : "none"
+                                      }`,
+                                    }}
                                     class={clx(
                                       `text-[14px] leading-[21.6px] block py-1 link link-hover md:text-16 font-noto-sans font-normal text-base-150`,
                                     )}
@@ -96,10 +106,18 @@ export default function FooterItems(
                       {section.items?.map((item) => (
                         <li>
                           <a
-                            href={`${item?.href && item.href !== "#" ? item?.href : "javascript:void(0)"}`}
+                            href={`${
+                              item?.href && item.href !== "#"
+                                ? item?.href
+                                : "javascript:void(0)"
+                            }`}
                             style={{
-                              pointerEvents: `${item?.href && item?.href !== "#" ? "all" : "none"}`
-                            }} 
+                              pointerEvents: `${
+                                item?.href && item?.href !== "#"
+                                  ? "all"
+                                  : "none"
+                              }`,
+                            }}
                             class="block py-1 link link-hover"
                           >
                             {item.label}

diff --git a/components/footer/Social.tsx b/components/footer/Social.tsx
@@ -45,10 +45,16 @@ export default function Social(
                     class={`n1-footer__social relative mobile:order-first mobile:col-span-6 xl:ml-[60px] ${item.label}`}
                   >
                     <a
-                      href={`${item.link && item.link !== "#" ? "mailto:" + item.link : "javascript:void(0)"}`}
+                      href={`${
+                        item.link && item.link !== "#"
+                          ? "mailto:" + item.link
+                          : "javascript:void(0)"
+                      }`}
                       style={{
-                        pointerEvents: `${item.link && item.link !== "#" ? "all" : "none"}`
-                      }}                      
+                        pointerEvents: `${
+                          item.link && item.link !== "#" ? "all" : "none"
+                        }`,
+                      }}
                       rel="noopener noreferrer"
                       aria-label={`${item.label} Logo`}
                       class="flex gap-2 items-center"
@@ -69,9 +75,15 @@ export default function Social(
                 return (
                   <li class={`n1-footer__social relative ${item.label}`}>
                     <a
-                      href={`${item.link && item.link !== "#" ?  item.link : "javascript:void(0)"}`}
+                      href={`${
+                        item.link && item.link !== "#"
+                          ? item.link
+                          : "javascript:void(0)"
+                      }`}
                       style={{
-                        pointerEvents: `${item.link && item.link !== "#" ? "all" : "none"}`
+                        pointerEvents: `${
+                          item.link && item.link !== "#" ? "all" : "none"
+                        }`,
                       }}
                       target="_blank"
                       rel="noopener noreferrer"

diff --git a/components/header/NavItem.tsx b/components/header/NavItem.tsx
@@ -45,8 +45,10 @@ function NavItem({ item, btnTextMenu, btnUrlMenu }: Props) {
   const image = item?.image?.[0];
   const nameItemScape = item?.name?.replaceAll(/\s/g, "-").toLowerCase();
   const headerHeightNumber = headerHeight &&
-  Number(headerHeight?.replace("px", ""));
-  const lasfHeaderHeight = headerHeightNumber > 2 ? headerHeightNumber / 2.5 : headerHeightNumber;
+    Number(headerHeight?.replace("px", ""));
+  const lasfHeaderHeight = headerHeightNumber > 2
+    ? headerHeightNumber / 2.5
+    : headerHeightNumber;
 
   return (
     <>
@@ -61,7 +63,7 @@ function NavItem({ item, btnTextMenu, btnUrlMenu }: Props) {
         }
         ${
           children && children.length > 0
-            ? "n1-header__navlink--active relative pr-[25px] pl-[10px] cursor-pointer hover:before:rotate-[-135deg] hover:after:rotate-[135deg] hover:before:border-secondary hover:after:border-secondary hover:text-[#3CCBDA]"
+            ? "n1-header__navlink--active relative pr-[25px] pl-[10px] cursor-pointer hover:is-active hover:before:rotate-[135deg] hover:after:rotate-[45deg] hover:before:border-secondary hover:after:border-secondary hover:text-secondary"
             : ""
         } 
           group flex justify-between text-16 font-archimoto-medium uppercase whitespace-nowrap is-${nameItemScape} items-center`)}
@@ -97,7 +99,7 @@ function NavItem({ item, btnTextMenu, btnUrlMenu }: Props) {
             >
               <div
                 class={clx(
-                  `mt-[35px] bg-[#fff] !w-auto rounded-b-[40px] pt-[20px] pb-[40px] px-[40px] 
+                  `mt-[35px] bg-[#fff] !w-auto rounded-b-[40px] pt-[20px] pb-[40px] px-[40px] n1-submenu-children__container 
                 ${children.length < 3 ? "flex max-w-[835px]" : ""}`,
                 )}
               >

diff --git a/components/ui/BannerCarousel.tsx b/components/ui/BannerCarousel.tsx
@@ -202,7 +202,7 @@ function Dots({ images, interval = 0 }: Props) {
 function Buttons() {
   return (
     <>
-      <div class="flex items-center justify-center z-10 col-start-1 row-start-2">
+      <div class="flex items-center justify-end z-10 col-start-1 row-start-2">
         <Slider.PrevButton class="btn btn-circle bg-[#ffffff] w-[40px] !h-[40px]">
           <Icon
             size={18}
@@ -211,7 +211,7 @@ function Buttons() {
           />
         </Slider.PrevButton>
       </div>
-      <div class="flex items-center justify-center z-10 col-start-3 row-start-2">
+      <div class="flex items-center justify-start z-10 col-start-3 row-start-2">
         <Slider.NextButton class="btn btn-circle bg-[#ffffff] w-[40px] !h-[40px]">
           <Icon
             size={18}

diff --git a/components/ui/BlueBall.tsx b/components/ui/BlueBall.tsx
@@ -0,0 +1,31 @@
+import { clx } from "$store/sdk/clx.ts";
+
+interface Props {
+  textCircleSm?: string;
+}
+
+function BlueBall({ textCircleSm }: Props) {
+  function handleMouseMove(e: MouseEvent) {
+    const { target } = e;
+    if (!target) return;
+  }
+
+  return (
+    <>
+      <div
+        id="blue-ball"
+        onMouseMove={handleMouseMove}
+        class={clx(
+          `mobile:w-[100px] mobile:h-[100px] mobile:bottom-[30px] mobile:right-[40px] group-hover:visible duration-500 group-hover:opacity-100 
+                invisible opacity-0 bg-secondary  w-[130px] h-[130px] absolute bottom-[40px] right-[50px] rounded-full flex items-center justify-center`,
+        )}
+      >
+        <span class="mobile:text-[18px] text-[22px] font-archimoto-medium font-black leading-normal">
+          {textCircleSm}
+        </span>
+      </div>
+    </>
+  );
+}
+
+export default BlueBall;
diff --git a/components/ui/CasesComponentDesktop.tsx b/components/ui/CasesComponentDesktop.tsx
@@ -1,6 +1,5 @@
 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;
@@ -37,7 +36,6 @@ interface Props {
   settingsImage?: PropsImage[];
 }
 
-// function CasesComponentDesktop(props: SectionProps<ReturnType<typeof loader>>){
 function CasesComponentDesktop({ settingsImage }: Props) {
   function handleMouserHover(e: MouseEvent) {
     const { target } = e;
@@ -60,12 +58,6 @@ function CasesComponentDesktop({ settingsImage }: Props) {
         e?.classList.remove("is-active");
         e?.setAttribute("style", "width: 300px");
       });
-      // console.log('cardElement --> ', cardElement?.parentElement?.getElementsByClassName('n1-cases-card'))
-
-      // if(){
-      //   cardElement?.classList.remove('is-active')
-      // }
-      // cardElement?.classList.contains('is-active') ?? cardElement?.classList.remove('is-active');
 
       const bgWidth = cardElement?.querySelector<HTMLElement>(".bg-width")
         ?.dataset.bgwidth;
@@ -326,7 +318,7 @@ function CasesComponentDesktop({ settingsImage }: Props) {
                 <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`,
+                     absolute top-0 left-0 duration-300 [transition:all_.2s_linear] rounded-[20px] is-active`,
                   )}
                   style={{
                     backgroundImage: `${

diff --git a/components/ui/Drawer.tsx b/components/ui/Drawer.tsx
@@ -40,25 +40,28 @@ function Drawer(props: Props) {
   }, []);
 
   return (
-    <div class={`drawer ${_class}`}>
-      <input
-        id={id}
-        checked={open}
-        type="checkbox"
-        class="drawer-toggle"
-        onChange={(e) => e.currentTarget.checked === false && onClose?.()}
-        aria-label={open ? "open drawer" : "closed drawer"}
-      />
+    <>
+      <div class={`drawer ${_class}`}>
+        <input
+          id={id}
+          checked={open}
+          type="checkbox"
+          class="drawer-toggle"
+          onChange={(e) => e.currentTarget.checked === false && onClose?.()}
+          aria-label={open ? "open drawer" : "closed drawer"}
+        />
 
-      <div class="drawer-content">
-        {children}
-      </div>
+        <div class="drawer-content">
+          {children}
+        </div>
 
-      <aside class="drawer-side h-full z-50 overflow-hidden">
-        <label for={id} class="drawer-overlay" />
-        {!lazy.value && aside}
-      </aside>
-    </div>
+        <aside class="drawer-side h-full z-50 overflow-hidden">
+          <label for={id} class="drawer-overlay" />
+          {!lazy.value && aside}
+        </aside>
+      </div>
+      <div class="n1-overlay is-menu"></div>
+    </>
   );
 }
 

diff --git a/fresh.gen.ts b/fresh.gen.ts
@@ -21,13 +21,15 @@ 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 $Hero from "./islands/Hero.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";
 import * as $SearchControls from "./islands/SearchControls.tsx";
 import * as $ShippingSimulation from "./islands/ShippingSimulation.tsx";
 import * as $SliderJS from "./islands/SliderJS.tsx";
+import * as $TextWithImageCustom from "./islands/TextWithImageCustom.tsx";
 import * as $WishlistButton_vtex from "./islands/WishlistButton/vtex.tsx";
 import * as $WishlistButton_wake from "./islands/WishlistButton/wake.tsx";
 import { type Manifest } from "$fresh/server.ts";
@@ -55,13 +57,15 @@ const manifest = {
     "./islands/Header/Cart/wake.tsx": $Header_Cart_wake,
     "./islands/Header/Drawers.tsx": $Header_Drawers,
     "./islands/Header/Searchbar.tsx": $Header_Searchbar,
+    "./islands/Hero.tsx": $Hero,
     "./islands/Mosaic.tsx": $Mosaic,
     "./islands/Newsletter.tsx": $Newsletter,
     "./islands/OutOfStock.tsx": $OutOfStock,
     "./islands/ProductImageZoom.tsx": $ProductImageZoom,
     "./islands/SearchControls.tsx": $SearchControls,
     "./islands/ShippingSimulation.tsx": $ShippingSimulation,
     "./islands/SliderJS.tsx": $SliderJS,
+    "./islands/TextWithImageCustom.tsx": $TextWithImageCustom,
     "./islands/WishlistButton/vtex.tsx": $WishlistButton_vtex,
     "./islands/WishlistButton/wake.tsx": $WishlistButton_wake,
   },

diff --git a/islands/Hero.tsx b/islands/Hero.tsx
@@ -0,0 +1 @@
+export { default } from "$store/sections/Content/Hero.tsx";
diff --git a/islands/TextWithImageCustom.tsx b/islands/TextWithImageCustom.tsx
@@ -0,0 +1 @@
+export { default } from "$store/sections/Content/TextWithImageCustom.tsx";
diff --git a/sections/Content/CasesComponent.tsx b/sections/Content/CasesComponent.tsx
@@ -109,7 +109,7 @@ function CasesComponent(props: SectionProps<ReturnType<typeof loader>>) {
 
   return (
     <>
-      <div class="mobile:px-[20px] md:mt-[120px] relative z-1 overflow-hidden">
+      <div class="n1-cases 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">

diff --git a/sections/Content/Hero.tsx b/sections/Content/Hero.tsx
@@ -2,6 +2,7 @@ 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";
+import { useEffect } from "preact/hooks";
 
 export interface CTA {
   id?: string;
@@ -24,6 +25,7 @@ export interface Props {
   /** @format html */
   description: string;
   /** @title Texto para animação */
+  /** @description (Separar frase por vírgula. Ex: Uau commerce, Performance ) */
   descriptionAnimation?: string;
   /** @title Imagem */
   image?: ImageWidget;
@@ -82,6 +84,47 @@ export default function HeroFlats(
 
   const HEIGHT = 508;
 
+  function typingWrite(word: number) {
+    const loop = localStorage.getItem("loop")
+      ? localStorage.getItem("loop")
+      : null;
+    const loopNumber = Number(loop);
+
+    if (loop && loopNumber < 1) {
+      word = loopNumber + 1;
+    } else if (loopNumber > 1) {
+      word = 0;
+    } else {
+      word = 0;
+    }
+
+    localStorage.setItem("loop", String(word));
+
+    const textElement = document.querySelector<HTMLElement>(
+      ".text-animation--typing",
+    );
+
+    if (textElement && textElement instanceof HTMLElement) {
+      const elementDataType = textElement.getAttribute("data-write");
+      const textArray = elementDataType ? elementDataType.split(",") : null;
+
+      if (textArray) {
+        textElement.classList.add("is-active");
+        textElement.innerHTML = textArray[word];
+
+        setTimeout(typingWrite, 3000);
+        setTimeout(() => {
+          textElement.innerHTML = "";
+          textElement.classList.remove("is-active");
+        }, 2950);
+      }
+    }
+  }
+
+  useEffect(() => {
+    typingWrite(0);
+  }, []);
+
   return (
     <div class="mobile:mt-[10px] mobile:px-[20px]">
       <div class="mx-auto flex flex-col items-center gap-8 overflow-hidden">
@@ -140,8 +183,10 @@ export default function HeroFlats(
             )}
             {descriptionAnimation && (
               <div class="n1-typing mobile:[&_*]:!text-24">
-                <span class={`font-archimoto-medium `}>
-                  {descriptionAnimation}
+                <span
+                  class="text-animation--typing mobile:h-[28.8px] h-[88px] font-archimoto-medium grid text-secondary font-black text-[80px] leading-[88px] overflow-hidden"
+                  data-write={descriptionAnimation}
+                >
                 </span>
               </div>
             )}

diff --git a/sections/Content/IconTitleAndTex.tsx b/sections/Content/IconTitleAndTex.tsx
@@ -44,8 +44,6 @@ function IconTitleAndTex(props: SectionProps<ReturnType<typeof loader>>) {
     backgroundImage && backgroundImage?.src && backgroundImage?.width &&
     backgroundImage?.height;
 
-  // console.log('device ---> ', device)
-
   return (
     <>
       <div class="text-[#ffffff]">