feat: update signin signup ui

Signed-off-by: Adithya Krishna <adithya@documenso.com>

apps/web/src/components/(dashboard)/layout/new/new-header.tsx

@@ -0,0 +1,87 @@
+'use client';
+
+import type { HTMLAttributes } from 'react';
+import { useState } from 'react';
+
+import Image from 'next/image';
+import Link from 'next/link';
+
+import LogoImage from '@documenso/assets/logo.png';
+import { cn } from '@documenso/ui/lib/utils';
+
+import { NewHamburgerMenu } from './new-mobile-hamburger';
+import { NewMobileNavigation } from './new-mobile-navigation';
+
+export type HeaderProps = HTMLAttributes<HTMLElement>;
+
+export const NewHeader = ({ className, ...props }: HeaderProps) => {
+  const [isHamburgerMenuOpen, setIsHamburgerMenuOpen] = useState(false);
+
+  return (
+    <header className={cn('flex items-center justify-between', className)} {...props}>
+      <div className="flex items-center space-x-4">
+        <Link href="/" className="z-10" onClick={() => setIsHamburgerMenuOpen(false)}>
+          <Image
+            src={LogoImage}
+            alt="Documenso Logo"
+            className="dark:invert"
+            width={170}
+            height={25}
+          />
+        </Link>
+      </div>
+
+      <div className="hidden items-center gap-x-6 md:flex">
+        <Link
+          href="https://documenso.com/pricing"
+          target="_blank"
+          className="text-muted-foreground hover:text-muted-foreground/80 text-sm font-semibold"
+        >
+          Pricing
+        </Link>
+
+        <Link
+          href="https://documenso.com/blog"
+          target="_blank"
+          className="text-muted-foreground hover:text-muted-foreground/80 text-sm font-semibold"
+        >
+          Blog
+        </Link>
+
+        <Link
+          href="https://documenso.com/open"
+          target="_blank"
+          className="text-muted-foreground hover:text-muted-foreground/80 text-sm font-semibold"
+        >
+          Open Startup
+        </Link>
+
+        <Link
+          href="/signin"
+          target="_blank"
+          className="text-muted-foreground hover:text-muted-foreground/80 text-sm font-semibold"
+        >
+          Sign in
+        </Link>
+        <Link
+          href="/signup"
+          target="_blank"
+          className="text-muted-foreground hover:text-muted-foreground/80 text-sm font-semibold"
+        >
+          <span className="bg-primary dark:text-background rounded-full px-3 py-2 text-xs">
+            Sign up
+          </span>
+        </Link>
+      </div>
+
+      <NewHamburgerMenu
+        onToggleMenuOpen={() => setIsHamburgerMenuOpen((v) => !v)}
+        isMenuOpen={isHamburgerMenuOpen}
+      />
+      <NewMobileNavigation
+        isMenuOpen={isHamburgerMenuOpen}
+        onMenuOpenChange={setIsHamburgerMenuOpen}
+      />
+    </header>
+  );
+};

apps/web/src/components/(dashboard)/layout/new/new-mobile-hamburger.tsx

@@ -0,0 +1,20 @@
+'use client';
+
+import { Menu, X } from 'lucide-react';
+
+import { Button } from '@documenso/ui/primitives/button';
+
+export interface HamburgerMenuProps {
+  isMenuOpen: boolean;
+  onToggleMenuOpen?: () => void;
+}
+
+export const NewHamburgerMenu = ({ isMenuOpen, onToggleMenuOpen }: HamburgerMenuProps) => {
+  return (
+    <div className="flex md:hidden">
+      <Button variant="outline" className="z-20 w-10 p-0" onClick={onToggleMenuOpen}>
+        {isMenuOpen ? <X /> : <Menu />}
+      </Button>
+    </div>
+  );
+};

apps/web/src/components/(dashboard)/layout/new/new-mobile-navigation.tsx

@@ -0,0 +1,151 @@
+'use client';
+
+import Image from 'next/image';
+import Link from 'next/link';
+
+import { motion, useReducedMotion } from 'framer-motion';
+import { FaXTwitter } from 'react-icons/fa6';
+import { LiaDiscord } from 'react-icons/lia';
+import { LuGithub } from 'react-icons/lu';
+
+import LogoImage from '@documenso/assets/logo.png';
+import { Sheet, SheetContent } from '@documenso/ui/primitives/sheet';
+
+export type MobileNavigationProps = {
+  isMenuOpen: boolean;
+  onMenuOpenChange?: (_value: boolean) => void;
+};
+
+export const MENU_NAVIGATION_LINKS = [
+  {
+    href: 'https://documenso.com/singleplayer',
+    text: 'Singleplayer',
+  },
+  {
+    href: 'https://documenso.com/blog',
+    text: 'Blog',
+  },
+  {
+    href: 'https://documenso.com/pricing',
+    text: 'Pricing',
+  },
+  {
+    href: 'https://documenso.com/open',
+    text: 'Open Startup',
+  },
+  {
+    href: 'https://status.documenso.com',
+    text: 'Status',
+  },
+  {
+    href: 'mailto:support@documenso.com',
+    text: 'Support',
+    target: '_blank',
+  },
+  {
+    href: 'https://documenso.com/privacy',
+    text: 'Privacy',
+  },
+  {
+    href: '/signin',
+    text: 'Sign in',
+  },
+  {
+    href: '/signup',
+    text: 'Sign up',
+  },
+];
+
+export const NewMobileNavigation = ({ isMenuOpen, onMenuOpenChange }: MobileNavigationProps) => {
+  const shouldReduceMotion = useReducedMotion();
+
+  const handleMenuItemClick = () => {
+    onMenuOpenChange?.(false);
+  };
+
+  return (
+    <Sheet open={isMenuOpen} onOpenChange={onMenuOpenChange}>
+      <SheetContent className="w-full max-w-[400px]">
+        <Link href="/" className="z-10" onClick={handleMenuItemClick}>
+          <Image
+            src={LogoImage}
+            alt="Documenso Logo"
+            className="dark:invert"
+            width={170}
+            height={25}
+          />
+        </Link>
+
+        <motion.div
+          className="mt-12 flex w-full flex-col items-start gap-y-4"
+          initial="initial"
+          animate="animate"
+          transition={{
+            staggerChildren: 0.03,
+          }}
+        >
+          {MENU_NAVIGATION_LINKS.map(({ href, text, target }) => (
+            <motion.div
+              key={href}
+              variants={{
+                initial: {
+                  opacity: 0,
+                  x: shouldReduceMotion ? 0 : 100,
+                },
+                animate: {
+                  opacity: 1,
+                  x: 0,
+                  transition: {
+                    duration: 0.5,
+                    ease: 'backInOut',
+                  },
+                },
+              }}
+            >
+              <Link
+                className="text-foreground hover:text-foreground/80 text-2xl font-semibold"
+                href={href}
+                onClick={() => handleMenuItemClick()}
+                target={target}
+              >
+                {href === 'https://app.documenso.com/signup' ? (
+                  <span className="bg-primary dark:text-background rounded-full px-3 py-2 text-xl">
+                    {text}
+                  </span>
+                ) : (
+                  text
+                )}
+              </Link>
+            </motion.div>
+          ))}
+        </motion.div>
+
+        <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-foreground hover:text-foreground/80"
+          >
+            <FaXTwitter className="h-6 w-6" />
+          </Link>
+
+          <Link
+            href="https://github.com/documenso/documenso"
+            target="_blank"
+            className="text-foreground hover:text-foreground/80"
+          >
+            <LuGithub className="h-6 w-6" />
+          </Link>
+
+          <Link
+            href="https://documen.so/discord"
+            target="_blank"
+            className="text-foreground hover:text-foreground/80"
+          >
+            <LiaDiscord className="h-7 w-7" />
+          </Link>
+        </div>
+      </SheetContent>
+    </Sheet>
+  );
+};

apps/web/src/components/(dashboard)/settings/layout/activity-back.tsx

@@ -0,0 +1,22 @@
+'use client';
+
+import { useRouter } from 'next/navigation';
+
+import { Button } from '@documenso/ui/primitives/button';
+
+export default function ActivityPageBackButton() {
+  const router = useRouter();
+  return (
+    <div>
+      <Button
+        className="flex-shrink-0"
+        variant="secondary"
+        onClick={() => {
+          void router.back();
+        }}
+      >
+        Back
+      </Button>
+    </div>
+  );
+}

apps/web/src/components/(dashboard)/settings/layout/desktop-nav.tsx

@@ -5,7 +5,7 @@ import type { HTMLAttributes } from 'react';
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 
-import { Braces, CreditCard, Lock, User, Users } from 'lucide-react';
+import { Braces, CreditCard, Globe2, Lock, User, Users } from 'lucide-react';
 
 import { useFeatureFlags } from '@documenso/lib/client-only/providers/feature-flag';
 import { cn } from '@documenso/ui/lib/utils';
@@ -91,6 +91,19 @@ export const DesktopNav = ({ className, ...props }: DesktopNavProps) => {
           </Button>
         </Link>
       )}
+
+      <Link href="/settings/public-profile">
+        <Button
+          variant="ghost"
+          className={cn(
+            'w-full justify-start',
+            pathname?.startsWith('/settings/public-profile') && 'bg-secondary',
+          )}
+        >
+          <Globe2 className="mr-2 h-5 w-5" />
+          Public profile
+        </Button>
+      </Link>
     </div>
   );
 };

apps/web/src/components/(dashboard)/settings/layout/header.tsx

@@ -1,21 +1,33 @@
 import React from 'react';
 
+import { cn } from '@documenso/ui/lib/utils';
+
 export type SettingsHeaderProps = {
   title: string;
   subtitle: string;
   children?: React.ReactNode;
+  titleChildren?: React.ReactNode;
+  className?: string;
 };
 
-export const SettingsHeader = ({ children, title, subtitle }: SettingsHeaderProps) => {
+export const SettingsHeader = ({
+  children,
+  title,
+  subtitle,
+  titleChildren,
+  className,
+}: SettingsHeaderProps) => {
   return (
     <>
-      <div className="flex flex-row items-center justify-between">
+      <div className={cn('flex flex-row items-center justify-between', className)}>
         <div>
           <h3 className="text-lg font-medium">{title}</h3>
 
           <p className="text-muted-foreground text-sm md:mt-2">{subtitle}</p>
         </div>
 
+        <div>{titleChildren}</div>
+
         {children}
       </div>
 

apps/web/src/components/(dashboard)/settings/layout/mobile-nav.tsx

@@ -5,7 +5,7 @@ import type { HTMLAttributes } from 'react';
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 
-import { Braces, CreditCard, Lock, User, Users } from 'lucide-react';
+import { Braces, CreditCard, Globe2, Lock, User, Users } from 'lucide-react';
 
 import { useFeatureFlags } from '@documenso/lib/client-only/providers/feature-flag';
 import { cn } from '@documenso/ui/lib/utils';
@@ -94,6 +94,19 @@ export const MobileNav = ({ className, ...props }: MobileNavProps) => {
           </Button>
         </Link>
       )}
+
+      <Link href="/settings/public-profile">
+        <Button
+          variant="ghost"
+          className={cn(
+            'w-full justify-start',
+            pathname?.startsWith('/settings/public-profile') && 'bg-secondary',
+          )}
+        >
+          <Globe2 className="mr-2 h-5 w-5" />
+          Public profile
+        </Button>
+      </Link>
     </div>
   );
 };