fix(landing): prevent connectors image overflow

apps/web/app/(landing)/components/ConnectorLogos.tsx

@@ -1,8 +1,10 @@
 'use client'
+
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@linkerry/ui-components/client'
 import { cn } from '@linkerry/ui-components/utils'
 import Image from 'next/image'
 import { HTMLAttributes } from 'react'
+import { useBodyClass } from '../../../shared/hooks/useBodyClass'
 import './connectorLogos.css'
 
 const connectorNamesToShow = [
@@ -45,6 +47,9 @@ const ConnectorLogo = ({ connectorName }: ConnectorLogoProps) => {
 export interface ConnectorImagesProps extends HTMLAttributes<HTMLElement> {}
 
 export const ConnectorImages = ({ className, ...rest }: ConnectorImagesProps) => {
+  // the connectors image are overlfow X axies, so after mount, add class to body
+  useBodyClass('overflow-x-hidden')
+
   return (
     <section className={cn('scroll-container', className)} {...rest}>
       <div className="carousel-primary">

apps/web/app/(landing)/components/connectorLogos.css

@@ -1,4 +1,5 @@
 .scroll-container {
+  overflow: hidden;
   /* height: 100vh; */
 }
 

apps/web/shared/hooks/useBodyClass.ts

@@ -0,0 +1,33 @@
+'use client'
+
+import { useEffect } from 'react'
+
+export const useBodyClass = (className: string) => {
+  useEffect(() => {
+    document.body.classList.add(className)
+
+    return () => {
+      document.body.classList.remove(className)
+    }
+  }, [className])
+}
+// 'use client'
+
+// import { useRouter } from 'next/router'
+// import { useEffect } from 'react'
+
+// export const useBodyClass = (className: string, route: string) => {
+//   const router = useRouter()
+
+//   useEffect(() => {
+//     if (router.pathname === route) {
+//       document.body.classList.add(className)
+//     } else {
+//       document.body.classList.remove(className)
+//     }
+
+//     return () => {
+//       document.body.classList.remove(className)
+//     }
+//   }, [router.pathname, className, route])
+// }