init mobileNavigation and added documenso symbol

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

@@ -1,24 +1,28 @@
-import { HTMLAttributes } from 'react';
+'use client';
+
+import { HTMLAttributes, useState } from 'react';
 
 import Image from 'next/image';
 import Link from 'next/link';
 
+import { Menu, X } from 'lucide-react';
+
 import { cn } from '@documenso/ui/lib/utils';
+import { Button } from '@documenso/ui/primitives/button';
+
+import { MobileNavigation } from './mobile-navigation';
 
 export type HeaderProps = HTMLAttributes<HTMLElement>;
 
 export const Header = ({ className, ...props }: HeaderProps) => {
+  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState<boolean>(false);
   return (
     <header className={cn('flex items-center justify-between', className)} {...props}>
       <Link href="/">
         <Image src="/logo.png" alt="Documenso Logo" width={170} height={0}></Image>
       </Link>
 
-      <div className="flex items-center gap-x-6">
+      <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>
@@ -35,6 +39,17 @@ export const Header = ({ className, ...props }: HeaderProps) => {
           Sign in
         </Link>
       </div>
+
+      <div className="flex md:hidden">
+        <Button
+          variant="default"
+          className="z-20 w-10 p-0"
+          onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
+        >
+          {isMobileMenuOpen ? <X /> : <Menu />}
+        </Button>
+      </div>
+      <MobileNavigation isMenuOpen={isMobileMenuOpen} />
     </header>
   );
 };

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

@@ -0,0 +1,153 @@
+'use client';
+
+import Image from 'next/image';
+import Link from 'next/link';
+
+import { Variants, motion } from 'framer-motion';
+import { Github, Slack, Twitter } from 'lucide-react';
+
+import { cn } from '@documenso/ui/lib/utils';
+
+import backgroundPattern from '~/assets/background-pattern.png';
+
+export type MobileNavigationProps = {
+  isMenuOpen: boolean;
+  className?: string;
+};
+
+const itemVariants: Variants = {
+  open: {
+    opacity: 1,
+    y: 0,
+    x: 0,
+    transition: { type: 'spring', stiffness: 300, damping: 24 },
+  },
+  closed: { opacity: 0, y: 0, x: 60, transition: { duration: 0.2 } },
+  exit: {
+    opacity: 0,
+    y: 0,
+    x: 60,
+    transition: { duration: 0.2 },
+  },
+};
+
+export const MobileNavigation = ({ isMenuOpen }: MobileNavigationProps) => {
+  // used for testing alternate animations
+  // const vertical = `${!isMenuOpen ? '-translate-y-full' : 'translate-y-0'}`;
+  const horizontal = `${!isMenuOpen ? 'translate-x-full' : 'translate-x-0'}`;
+
+  return (
+    <motion.div
+      animate={isMenuOpen ? 'open' : 'closed'}
+      className={cn(
+        horizontal,
+        'bg-secondary fixed left-0 right-0 top-16 z-10 flex h-[94dvh] w-full transform flex-col items-start justify-start gap-4 shadow-md backdrop-blur-lg transition duration-500 ease-in-out md:hidden',
+      )}
+      variants={{
+        open: {
+          transition: {
+            type: 'spring',
+            bounce: 0,
+            duration: 0.7,
+            delayChildren: 0.3,
+            staggerChildren: 0.05,
+          },
+        },
+        closed: {
+          transition: {
+            type: 'spring',
+            bounce: 0,
+            duration: 0.3,
+          },
+        },
+        exit: {
+          transition: {
+            type: 'spring',
+            bounce: 0,
+            duration: 0.3,
+          },
+        },
+      }}
+    >
+      <motion.div className="flex w-full flex-col items-start gap-y-2 px-8 pt-12">
+        <Link
+          passHref
+          href="/blog"
+          className="text-4xl font-semibold text-[#8D8D8D] hover:text-[#6D6D6D]"
+        >
+          <motion.p variants={itemVariants}>Blog</motion.p>
+        </Link>
+
+        <Link
+          href="/pricing"
+          className="text-4xl font-semibold text-[#8D8D8D] hover:text-[#6D6D6D]"
+        >
+          <motion.p variants={itemVariants}>Pricing</motion.p>
+        </Link>
+
+        <Link
+          href="https://status.documenso.com"
+          target="_blank"
+          className="text-4xl font-semibold text-[#8D8D8D] hover:text-[#6D6D6D]"
+        >
+          <motion.p variants={itemVariants}>Status</motion.p>
+        </Link>
+
+        <Link
+          href="mailto:support@documenso.com"
+          className="text-4xl font-semibold text-[#8D8D8D] hover:text-[#6D6D6D]"
+        >
+          <motion.p variants={itemVariants}>Support</motion.p>
+        </Link>
+
+        <Link
+          href="/privacy"
+          className="text-4xl font-semibold text-[#8D8D8D] hover:text-[#6D6D6D]"
+        >
+          <motion.p variants={itemVariants}>Privacy</motion.p>
+        </Link>
+
+        <Link
+          href="https://app.documenso.com/login"
+          target="_blank"
+          className="text-4xl font-semibold text-[#8D8D8D] hover:text-[#6D6D6D]"
+        >
+          <motion.p variants={itemVariants}>Sign in</motion.p>
+        </Link>
+      </motion.div>
+
+      <div className="mx-auto mt-8 flex w-full flex-wrap items-center justify-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" />
+        </Link>
+
+        <Link
+          href="https://github.com/documenso/documenso"
+          target="_blank"
+          className="text-[#8D8D8D] hover:text-[#6D6D6D]"
+        >
+          <Github className="h-8 w-8" />
+        </Link>
+
+        <Link
+          href="https://documenso.slack.com"
+          target="_blank"
+          className="text-[#8D8D8D] hover:text-[#6D6D6D]"
+        >
+          <Slack className="h-8 w-8" />
+        </Link>
+      </div>
+      <div className="absolute inset-0 -z-10 flex items-start justify-center">
+        <Image
+          src={backgroundPattern}
+          alt="background pattern"
+          className="-mr-[15vw] -mt-[15vh] h-full max-h-[150vh] scale-125 object-cover md:-mr-[50vw] md:scale-150 lg:scale-[175%]"
+        />
+      </div>
+    </motion.div>
+  );
+};