diff --git a/apps/marketing/package.json b/apps/marketing/package.json index f6af3a9ff..2a7f5a024 100644 --- a/apps/marketing/package.json +++ b/apps/marketing/package.json @@ -19,6 +19,7 @@ "@documenso/trpc": "*", "@documenso/ui": "*", "@hookform/resolvers": "^3.1.0", + "@openstatus/react": "^0.0.3", "contentlayer": "^0.3.4", "framer-motion": "^10.12.8", "lucide-react": "^0.279.0", diff --git a/apps/marketing/src/app/(marketing)/layout.tsx b/apps/marketing/src/app/(marketing)/layout.tsx index a7c599b36..ee477e3ff 100644 --- a/apps/marketing/src/app/(marketing)/layout.tsx +++ b/apps/marketing/src/app/(marketing)/layout.tsx @@ -1,78 +1,14 @@ -'use client'; - -import React, { useEffect, useState } from 'react'; - -import Image from 'next/image'; -import { usePathname } from 'next/navigation'; - -import launchWeekTwoImage from '@documenso/assets/images/background-lw-2.png'; -import { useFeatureFlags } from '@documenso/lib/client-only/providers/feature-flag'; -import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app'; -import { cn } from '@documenso/ui/lib/utils'; - import { Footer } from '~/components/(marketing)/footer'; -import { Header } from '~/components/(marketing)/header'; +import { LayoutHeader } from '~/components/(marketing)/layout-header'; export type MarketingLayoutProps = { children: React.ReactNode; }; export default function MarketingLayout({ children }: MarketingLayoutProps) { - const [scrollY, setScrollY] = useState(0); - const pathname = usePathname(); - - const { getFlag } = useFeatureFlags(); - - const showProfilesAnnouncementBar = getFlag('marketing_profiles_announcement_bar'); - - useEffect(() => { - const onScroll = () => { - setScrollY(window.scrollY); - }; - - window.addEventListener('scroll', onScroll); - - return () => window.removeEventListener('scroll', onScroll); - }, []); - return ( -
-
5, - })} - > - {showProfilesAnnouncementBar && ( -
-
- Launch Week 2 -
- -
- Claim your documenso public profile username now!{' '} - documenso.com/u/yourname -
- - Claim Now - -
-
-
- )} - -
-
+
+
{children}
diff --git a/apps/marketing/src/app/(marketing)/singleplayer/client.tsx b/apps/marketing/src/app/(marketing)/singleplayer/client.tsx index a8e0a0c63..736bbb6ce 100644 --- a/apps/marketing/src/app/(marketing)/singleplayer/client.tsx +++ b/apps/marketing/src/app/(marketing)/singleplayer/client.tsx @@ -184,83 +184,85 @@ export const SinglePlayerClient = () => { }; return ( -
-
-

Single Player Mode

+
+
+
+

Single Player Mode

-

- Create a{' '} - - free account - {' '} - or view our{' '} - - early adopter plan - {' '} - for exclusive features, including the ability to collaborate with multiple signers. -

-
- -
-
- {uploadedFile ? ( - - - - - - ) : ( - - )} +

+ Create a{' '} + + free account + {' '} + or view our{' '} + + early adopter plan + {' '} + for exclusive features, including the ability to collaborate with multiple signers. +

-
- e.preventDefault()} - > - setStep(SinglePlayerModeSteps[step - 1])} +
+
+ {uploadedFile ? ( + + + + + + ) : ( + + )} +
+ +
+ e.preventDefault()} > - {/* Add fields to PDF page. */} -
- setStep(SinglePlayerModeSteps[step - 1])} + > + {/* Add fields to PDF page. */} +
+ +
+ + {/* Enter user details and signature. */} + + field.type === 'NAME'))} + requireCustomText={Boolean(fields.find((field) => field.type === 'TEXT'))} + requireSignature={Boolean(fields.find((field) => field.type === 'SIGNATURE'))} /> -
- - {/* Enter user details and signature. */} - - field.type === 'NAME'))} - requireCustomText={Boolean(fields.find((field) => field.type === 'TEXT'))} - requireSignature={Boolean(fields.find((field) => field.type === 'SIGNATURE'))} - /> - - + + +
diff --git a/apps/marketing/src/components/(marketing)/footer.tsx b/apps/marketing/src/components/(marketing)/footer.tsx index a687af0d3..b582dc286 100644 --- a/apps/marketing/src/components/(marketing)/footer.tsx +++ b/apps/marketing/src/components/(marketing)/footer.tsx @@ -1,10 +1,9 @@ -'use client'; - import type { HTMLAttributes } from 'react'; import Image from 'next/image'; import Link from 'next/link'; +import { StatusWidget } from '@openstatus/react'; import { FaXTwitter } from 'react-icons/fa6'; import { LiaDiscord } from 'react-icons/lia'; import { LuGithub } from 'react-icons/lu'; @@ -62,6 +61,10 @@ export const Footer = ({ className, ...props }: FooterProps) => { ))}
+ +
+ +
diff --git a/apps/marketing/src/components/(marketing)/layout-header.tsx b/apps/marketing/src/components/(marketing)/layout-header.tsx new file mode 100644 index 000000000..1f098cb84 --- /dev/null +++ b/apps/marketing/src/components/(marketing)/layout-header.tsx @@ -0,0 +1,65 @@ +'use client'; + +import React, { useEffect, useState } from 'react'; + +import Image from 'next/image'; + +import launchWeekTwoImage from '@documenso/assets/images/background-lw-2.png'; +import { useFeatureFlags } from '@documenso/lib/client-only/providers/feature-flag'; +import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app'; +import { cn } from '@documenso/ui/lib/utils'; + +import { Header } from '~/components/(marketing)/header'; + +export function LayoutHeader() { + const [scrollY, setScrollY] = useState(0); + + const { getFlag } = useFeatureFlags(); + + const showProfilesAnnouncementBar = getFlag('marketing_profiles_announcement_bar'); + + useEffect(() => { + const onScroll = () => { + setScrollY(window.scrollY); + }; + + window.addEventListener('scroll', onScroll); + + return () => window.removeEventListener('scroll', onScroll); + }, []); + + return ( +
5, + })} + > + {showProfilesAnnouncementBar && ( +
+
+ Launch Week 2 +
+ +
+ Claim your documenso public profile username now!{' '} + documenso.com/u/yourname + +
+
+ )} + +
+
+ ); +} diff --git a/package-lock.json b/package-lock.json index 8d47958aa..9a5fe02dc 100644 --- a/package-lock.json +++ b/package-lock.json @@ -42,6 +42,7 @@ "@documenso/trpc": "*", "@documenso/ui": "*", "@hookform/resolvers": "^3.1.0", + "@openstatus/react": "^0.0.3", "contentlayer": "^0.3.4", "framer-motion": "^10.12.8", "lucide-react": "^0.279.0", @@ -4124,6 +4125,14 @@ "resolved": "https://registry.npmjs.org/@one-ini/wasm/-/wasm-0.1.1.tgz", "integrity": "sha512-XuySG1E38YScSJoMlqovLru4KTUNSjgVTIjyh7qMX6aNN5HY5Ct5LhRJdxO79JtTzKfzV/bnWpz+zquYrISsvw==" }, + "node_modules/@openstatus/react": { + "version": "0.0.3", + "resolved": "https://registry.npmjs.org/@openstatus/react/-/react-0.0.3.tgz", + "integrity": "sha512-uDiegz7e3H67pG8lTT+op+6w5keTT7XpcENrREaqlWl5j53TYyO8nheOG1PeNw2/Qgd5KaGeRJJFn1crhTUSYw==", + "peerDependencies": { + "react": "^18.0.0" + } + }, "node_modules/@opentelemetry/api": { "version": "1.4.1", "resolved": "https://registry.npmjs.org/@opentelemetry/api/-/api-1.4.1.tgz", diff --git a/packages/ui/primitives/theme-switcher.tsx b/packages/ui/primitives/theme-switcher.tsx index ab7a7d2bd..cdf6c00b0 100644 --- a/packages/ui/primitives/theme-switcher.tsx +++ b/packages/ui/primitives/theme-switcher.tsx @@ -1,3 +1,5 @@ +'use client'; + import { motion } from 'framer-motion'; import { Monitor, MoonStar, Sun } from 'lucide-react'; import { useTheme } from 'next-themes';