Fix build

src/components/header/index.tsx

@@ -1,6 +1,5 @@
 'use client';
 
-import { useState, useEffect } from "react";
 import HoverRepeatAnimation from "@/components/animations/hover-repeat";
 import { useRecoilState } from "recoil";
 import { menuAtom } from "@/store";
@@ -9,27 +8,9 @@ import { cn } from "@/lib/utils";
 import Menu from "@/svgs/menu.svg";
 import Logo from "@/svgs/logo.svg";
 
-const useScrolled = () => {
-  const [isScrolled, setIsScrolled] = useState(false);
-  useEffect(() => {
-    const handleScroll = () => {
-      const mainElement = document?.getElementsByTagName('main')[0];
-      const mainElementOffset = mainElement?.getBoundingClientRect().top || 0;
-      setIsScrolled(mainElementOffset < 0);
-    };
-
-    window.addEventListener("scroll", handleScroll);
-
-    handleScroll();
-
-    return () => window.removeEventListener("scroll", handleScroll);
-  }, []);
-  return isScrolled;
-}
-
 export default function Header() {
   const [, setOpenedMenu] = useRecoilState(menuAtom);
-  const isScrolled = useScrolled();
+  const isScrolled = true;
   const MenuButton = () => (
     <MotionButton onClick={() => setOpenedMenu(true)}
       variant="light-green"

src/components/menu-lines/index.tsx

@@ -1,4 +1,5 @@
 'use client';
+
 import { cn } from '@/lib/utils';
 import { AnimatePresence, motion } from 'framer-motion';
 import { createPortal } from 'react-dom';

src/components/menu/index.tsx

@@ -10,7 +10,9 @@ import CloseSmall from "@/svgs/close-small.svg";
 import Logo from "@/svgs/logo.svg";
 import Instagram from "@/svgs/instagram.svg";
 import Linkedin from "@/svgs/linkedin.svg";
-import MenuLines from "@/components/menu-lines";
+import dynamic from "next/dynamic";
+
+const MenuLines = dynamic(() => import("@/components/menu-lines"), { ssr: false });
 
 export default function Menu() {
   const [openedMenu, setOpenedMenu] = useRecoilState(menuAtom);

src/components/section-2/index.tsx

@@ -1,4 +1,5 @@
 'use client';
+
 import { useRef, useEffect, useState, useCallback, useMemo } from 'react';
 import Lines from "@/components/lines";
 import GlobeMap from "@/components/globe-map";
@@ -7,6 +8,8 @@ import { Button } from "@/components/button";
 import CaretRight from '@/svgs/caret-right.svg';
 import { cn } from "@/lib/utils";
 import { useScroll, useTransform, motion, useMotionValueEvent } from "framer-motion";
+import { useScreenWidthWithResize } from '@/lib/hooks';
+import { scrollToSection } from "@/lib/utils";
 
 const ResizeButton = () => (
   <>
@@ -24,20 +27,6 @@ const ResizeButton = () => (
   </>
 );
 
-const useScreenWidthWithResize = () => {
-  const [width, setWidth] = useState(window.innerWidth);
-  const handleResize = useCallback(() => {
-    setWidth(window.innerWidth);
-  }, []);
-
-  useEffect(() => {
-    window.addEventListener('resize', handleResize);
-    return () => window.removeEventListener('resize', handleResize);
-  }, []);
-
-  return width;
-}
-
 export default function Section2() {
   const scrollSectionRef = useRef<HTMLDivElement>(null);
   const { scrollYProgress } = useScroll({
@@ -47,17 +36,6 @@ export default function Section2() {
   const [resizableWidth, setResizableWidth] = useState(400);
 
   const screenWidth = useScreenWidthWithResize();
-  const scrollToSection = (section: string) => {
-    const element = document.getElementById(section);
-    if (element) {
-      const rect = element.getBoundingClientRect();
-
-      window.scrollTo({
-        top: rect.top + window.scrollY,
-        behavior: 'smooth',
-      });
-    }
-  };
 
   useEffect(() => {
     scrollToSection(`globe-phase-${globePhase + 1}`);

src/components/section-3/index.tsx

@@ -120,7 +120,7 @@ export default function Section3() {
             ))}
           </AnimatePresence>
         </div>
-        <div className={cn(gridColumns)}>
+        <div className={cn('min-h-[290px]', gridColumns)}>
           <div className="pt-10 pb-20 pl-1 flex-col gap-4 flex text-green-700 text-base" onMouseEnter={() => setHoveredIndex(0)} onMouseLeave={() => setHoveredIndex(null)}>
             <div className="leading-relaxed">
               <div>01</div>

src/lib/hooks.ts

@@ -0,0 +1,20 @@
+import { useState, useEffect, useCallback } from "react";
+
+export const useScreenWidthWithResize = () => {
+  const [width, setWidth] = useState(0);
+  // Set initial width on mount. Window is not available on server side.
+  useEffect(() => {
+    setWidth(window.innerWidth);
+  }, []);
+
+  const handleResize = useCallback(() => {
+    setWidth(window.innerWidth);
+  }, []);
+
+  useEffect(() => {
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+
+  return width;
+};

src/lib/utils.ts

@@ -4,3 +4,14 @@ import { twMerge } from "tailwind-merge";
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs));
 }
+
+export const scrollToSection = (section: string) => {
+  const element = document.getElementById(section);
+  if (element && typeof window !== "undefined") {
+    const rect = element.getBoundingClientRect();
+    window.scrollTo({
+      top: rect.top + window.scrollY,
+      behavior: "smooth",
+    });
+  }
+};