Fixing transparency issue on front home

Author: édouard wautier

front/components/home/scrollingHeader.tsx

@@ -31,9 +31,9 @@ const ScrollingHeader = ({
     invisibleFirstElements.forEach((element: Element) => {
       if (element instanceof HTMLElement) {
         if (isScrolled2) {
-          element.style.opacity = "1";
+          element.classList.remove("opacity-0");
         } else {
-          element.style.opacity = "0";
+          element.classList.add("opacity-0");
         }
       }
     });

front/pages/index.tsx

@@ -117,16 +117,10 @@ export default function Home({
       <Header />
       <ScrollingHeader showItemY={logoY}>
         <div className="flex h-full w-full items-center gap-10 px-4">
-          <div
-            style={{ opacity: 0 }}
-            className="invisibleFirst hidden h-[24px] w-[96px] transition-all duration-500 ease-out md:block"
-          >
+          <div className="invisibleFirst hidden h-[24px] w-[96px] opacity-0 transition-all duration-500 ease-out md:block">
             <Logo className="h-[24px] w-[96px]" />
           </div>
-          <div
-            style={{ opacity: 0 }}
-            className="invisibleFirst hidden flex-row justify-start gap-6 transition-all duration-500 ease-out lg:flex"
-          >
+          <div className="invisibleFirst hidden flex-row justify-start gap-6 opacity-0 transition-all duration-500 ease-out lg:flex">
             <P size="xs">
               <A variant="tertiary" href="#sectionProduct">
                 The product
@@ -137,11 +131,6 @@ export default function Home({
                 Price plans
               </A>
             </P>
-            {/* <P size="xs">
-              <A variant="tertiary" href="#section3">
-                Testimonials
-              </A>
-            </P> */}
           </div>
           <div className="flex-grow" />
           <Button.List>