fix: styling updates

apps/marketing/src/components/(marketing)/footer.tsx

@@ -3,7 +3,7 @@ import { HTMLAttributes } from 'react';
 import Image from 'next/image';
 import Link from 'next/link';
 
-import { Github, Slack, Twitter } from 'lucide-react';
+import { Github, MessagesSquare, Twitter } from 'lucide-react';
 
 import { cn } from '@documenso/ui/lib/utils';
 
@@ -36,11 +36,11 @@ export const Footer = ({ className, ...props }: FooterProps) => {
             </Link>
 
             <Link
-              href="https://documenso.slack.com"
+              href="https://documen.so/discord"
               target="_blank"
               className="hover:text-[#6D6D6D]"
             >
-              <Slack className="h-6 w-6" />
+              <MessagesSquare className="h-6 w-6" />
             </Link>
           </div>
         </div>

apps/marketing/src/components/(marketing)/header.tsx

@@ -13,19 +13,19 @@ import { MobileNavigation } from './mobile-navigation';
 export type HeaderProps = HTMLAttributes<HTMLElement>;
 
 export const Header = ({ className, ...props }: HeaderProps) => {
-  const [isMobileOpen, setIsMobileOpen] = useState<boolean>(false);
+  const [isHamburgerMenuOpen, setIsHamburgerMenuOpen] = useState(false);
-
-  const handleMenuToggle = () => {
-    setIsMobileOpen(!isMobileOpen);
-  };
 
   return (
     <header className={cn('flex items-center justify-between', className)} {...props}>
-      <Link href="/" className="z-10" onClick={() => isMobileOpen && handleMenuToggle()}>
+      <Link href="/" className="z-10" onClick={() => setIsHamburgerMenuOpen(false)}>
-        <Image src="/logo.png" alt="Documenso Logo" width={170} height={0}></Image>
+        <Image src="/logo.png" alt="Documenso Logo" width={170} height={25} />
       </Link>
 
       <div className="hidden items-center gap-x-6 md:flex">
+        <Link href="/pricing" className="text-sm font-semibold text-[#8D8D8D] hover:text-[#6D6D6D]">
+          Pricing
+        </Link>
+
         <Link href="/blog" className="text-sm font-semibold text-[#8D8D8D] hover:text-[#6D6D6D]">
           Blog
         </Link>
@@ -43,8 +43,14 @@ export const Header = ({ className, ...props }: HeaderProps) => {
         </Link>
       </div>
 
-      <HamburgerMenu menuToggle={handleMenuToggle} isMenuOpen={isMobileOpen} />
+      <HamburgerMenu
-      <MobileNavigation isMenuOpen={isMobileOpen} menuToggle={handleMenuToggle} />
+        onToggleMenuOpen={() => setIsHamburgerMenuOpen((v) => !v)}
+        isMenuOpen={isHamburgerMenuOpen}
+      />
+      <MobileNavigation
+        isMenuOpen={isHamburgerMenuOpen}
+        onMenuOpenChange={setIsHamburgerMenuOpen}
+      />
     </header>
   );
 };

apps/marketing/src/components/(marketing)/mobile-hamburger.tsx

@@ -1,34 +1,18 @@
 'use client';
 
-import { useEffect } from 'react';
-
 import { Menu, X } from 'lucide-react';
 
 import { Button } from '@documenso/ui/primitives/button';
 
-import { useWindowSize } from '~/hooks/use-window-size';
-
 export interface HamburgerMenuProps {
   isMenuOpen: boolean;
-  menuToggle: () => void;
+  onToggleMenuOpen?: () => void;
 }
 
-export const HamburgerMenu = ({ isMenuOpen, menuToggle }: HamburgerMenuProps) => {
+export const HamburgerMenu = ({ isMenuOpen, onToggleMenuOpen }: HamburgerMenuProps) => {
-  const { width } = useWindowSize();
-
-  useEffect(() => {
-    // Update document.body.style.overflow based on the menu state
-    // If the window width is less than 768px, we want to prevent scrolling when the menu is open
-    if (width < 768 && isMenuOpen) {
-      document.body.style.overflow = 'hidden';
-    } else {
-      document.body.style.overflow = 'auto';
-    }
-  }, [isMenuOpen, width]);
-
   return (
     <div className="flex md:hidden">
-      <Button variant="default" className="z-20 w-10 p-0" onClick={menuToggle}>
+      <Button variant="outline" className="z-20 w-10 p-0" onClick={onToggleMenuOpen}>
         {isMenuOpen ? <X /> : <Menu />}
       </Button>
     </div>

apps/marketing/src/components/(marketing)/mobile-navigation.tsx

@@ -3,24 +3,17 @@
 import Image from 'next/image';
 import Link from 'next/link';
 
-import { Variants, motion, useReducedMotion } from 'framer-motion';
+import { motion, useReducedMotion } from 'framer-motion';
-import { Github, Slack, Twitter } from 'lucide-react';
+import { Github, MessagesSquare, Twitter } from 'lucide-react';
 
-import { cn } from '@documenso/ui/lib/utils';
+import { Sheet, SheetContent } from '@documenso/ui/primitives/sheet';
-
-import backgroundPattern from '~/assets/background-pattern.png';
 
 export type MobileNavigationProps = {
   isMenuOpen: boolean;
-  menuToggle: () => void;
+  onMenuOpenChange?: (_value: boolean) => void;
 };
 
-export interface MenuNavigationLinksProps {
+export const MENU_NAVIGATION_LINKS = [
-  href: string;
-  text: string;
-}
-
-export const MenuNavigationLinks = [
   {
     href: '/blog',
     text: 'Blog',
@@ -47,87 +40,63 @@ export const MenuNavigationLinks = [
   },
 ];
 
-export const MobileNavigation = ({ isMenuOpen, menuToggle }: MobileNavigationProps) => {
+export const MobileNavigation = ({ isMenuOpen, onMenuOpenChange }: MobileNavigationProps) => {
   const shouldReduceMotion = useReducedMotion();
 
   const handleMenuItemClick = () => {
-    menuToggle();
+    onMenuOpenChange?.(false);
   };
 
-  const itemVariants: Variants = {
-    open: {
-      opacity: 1,
-      y: 0,
-      x: 0,
-      transition: { type: 'spring', stiffness: 300, damping: 24 },
-    },
-    closed: { opacity: 0, y: 0, x: shouldReduceMotion ? 0 : 60, transition: { duration: 0.2 } },
-    exit: {
-      opacity: 0,
-      y: 0,
-      x: shouldReduceMotion ? 0 : 60,
-      transition: { duration: 0.2 },
-    },
-  };
-
-  // used for testing alternate animations
-  // const vertical = `${!isMenuOpen ? '-translate-y-full' : 'translate-y-0'}`;
-  const horizontal = `${!isMenuOpen ? 'translate-x-full' : 'translate-x-0'}`;
-
   return (
+    <Sheet open={isMenuOpen} onOpenChange={onMenuOpenChange}>
+      <SheetContent className="w-full max-w-[400px]">
+        <Link href="/" className="z-10" onClick={handleMenuItemClick}>
+          <Image src="/logo.png" alt="Documenso Logo" width={170} height={25} />
+        </Link>
+
         <motion.div
-      animate={isMenuOpen ? 'open' : 'closed'}
+          className="mt-12 flex w-full flex-col items-start gap-y-4"
-      className={cn(
+          initial="initial"
-        horizontal,
+          animate="animate"
-        'bg-secondary fixed left-0 right-0 top-16 z-10 flex h-[94dvh] w-full transform flex-col items-center justify-start gap-4 shadow-md backdrop-blur-lg transition duration-500 ease-in-out md:hidden',
+          transition={{
-      )}
+            staggerChildren: 0.2,
+          }}
+        >
+          {MENU_NAVIGATION_LINKS.map(({ href, text }) => (
+            <motion.div
+              key={href}
               variants={{
-        open: {
+                initial: {
+                  opacity: 0,
+                  x: shouldReduceMotion ? 0 : 100,
+                },
+                animate: {
+                  opacity: 1,
+                  x: 0,
                   transition: {
-            type: 'spring',
+                    duration: 0.5,
-            bounce: 0,
-            duration: shouldReduceMotion ? 0 : 0.7,
-            delayChildren: shouldReduceMotion ? 0 : 0.3,
-            staggerChildren: shouldReduceMotion ? 0 : 0.05,
-          },
-        },
-        closed: {
-          transition: {
-            type: 'spring',
-            bounce: 0,
-            duration: shouldReduceMotion ? 0 : 0.3,
-          },
-        },
-        exit: {
-          transition: {
-            type: 'spring',
-            bounce: 0,
-            duration: shouldReduceMotion ? 0 : 0.3,
                   },
                 },
               }}
             >
-      <motion.div className="flex w-full flex-col items-center gap-y-4 px-8 pt-12">
-        {MenuNavigationLinks.map((link: MenuNavigationLinksProps) => (
               <Link
-            key={link.href}
+                className="text-2xl font-semibold text-[#8D8D8D] hover:text-[#6D6D6D]"
-            passHref
+                href={href}
                 onClick={() => handleMenuItemClick()}
-            href={link.href}
-            className="text-4xl font-semibold text-[#8D8D8D] hover:text-[#6D6D6D]"
               >
-            <motion.p variants={itemVariants}>{link.text}</motion.p>
+                {text}
               </Link>
+            </motion.div>
           ))}
         </motion.div>
 
-      <div className="mx-auto mt-8 flex w-full flex-wrap items-center justify-center gap-x-4 gap-y-4 ">
+        <div className="mx-auto mt-8 flex w-full flex-wrap items-center gap-x-4 gap-y-4 ">
           <Link
             href="https://twitter.com/documenso"
             target="_blank"
             className="text-[#8D8D8D] hover:text-[#6D6D6D]"
           >
-          <Twitter className="h-8 w-8" />
+            <Twitter className="h-6 w-6" />
           </Link>
 
           <Link
@@ -135,24 +104,18 @@ export const MobileNavigation = ({ isMenuOpen, menuToggle }: MobileNavigationPro
             target="_blank"
             className="text-[#8D8D8D] hover:text-[#6D6D6D]"
           >
-          <Github className="h-8 w-8" />
+            <Github className="h-6 w-6" />
           </Link>
 
           <Link
-          href="https://documenso.slack.com"
+            href="https://documen.so/discord"
             target="_blank"
             className="text-[#8D8D8D] hover:text-[#6D6D6D]"
           >
-          <Slack className="h-8 w-8" />
+            <MessagesSquare className="h-6 w-6" />
           </Link>
         </div>
-      <div className="absolute inset-0 -z-10 flex items-start justify-center">
+      </SheetContent>
-        <Image
+    </Sheet>
-          src={backgroundPattern}
-          alt="background pattern"
-          className="-mr-[15vw] mt-[12vh] h-full max-h-[150vh] scale-125 object-cover md:-mr-[50vw] md:scale-150 lg:scale-[175%]"
-        />
-      </div>
-    </motion.div>
   );
 };

apps/marketing/src/hooks/use-window-size.ts

@@ -1,35 +1,27 @@
 import { useEffect, useState } from 'react';
 
-// This hook is used to get the window size
+export function useWindowSize() {
-// It returns an object with the width and height of the window
+  const [size, setSize] = useState({
-// Works with window resizing as well, not to be confused with isMobile from is-mobile package
-
-interface WindowSize {
-  width: number;
-  height: number;
-}
-
-export function useWindowSize(): WindowSize {
-  const [windowSize, setWindowSize] = useState<WindowSize>({
     width: 0,
     height: 0,
   });
 
-  const handleSize = () => {
+  const onResize = () => {
-    setWindowSize({
+    setSize({
       width: window.innerWidth,
       height: window.innerHeight,
     });
   };
 
   useEffect(() => {
-    handleSize();
+    onResize();
-    window.addEventListener('resize', handleSize);
+
+    window.addEventListener('resize', onResize);
 
     return () => {
-      window.removeEventListener('resize', handleSize);
+      window.removeEventListener('resize', onResize);
     };
   }, []);
 
-  return windowSize;
+  return size;
 }