chore: update marketing site

2025-11-13 16:23:06 +10:00 · 2024-08-20 23:23:36 +10:00
parent 2c9136498c
commit 9178dbd3c1
13 changed files with 136 additions and 76 deletions
--- a/apps/marketing/src/app/(marketing)/oss-friends/page.tsx
+++ b/apps/marketing/src/app/(marketing)/oss-friends/page.tsx
@ -44,6 +44,10 @@ export default async function OSSFriendsPage() {
          src={backgroundPattern}
          alt="background pattern"
          className="-mr-[15vw] -mt-[15vh] h-full max-h-[150vh] scale-125 object-cover dark:contrast-[70%] dark:invert dark:sepia md:-mr-[50vw] md:scale-150 lg:scale-[175%]"
+          style={{
+            mask: 'radial-gradient(rgba(255, 255, 255, 1) 0%, transparent 67%)',
+            WebkitMask: 'radial-gradient(rgba(255, 255, 255, 1) 0%, transparent 67%)',
+          }}
        />
      </div>
    </div>
--- a/apps/marketing/src/app/not-found.tsx
+++ b/apps/marketing/src/app/not-found.tsx
@ -26,6 +26,10 @@ export default function NotFound() {
            src={backgroundPattern}
            alt="background pattern"
            className="-mr-[50vw] -mt-[15vh] h-full scale-100 object-cover dark:contrast-[70%] dark:invert dark:sepia md:scale-100 lg:scale-[100%]"
+            style={{
+              mask: 'radial-gradient(rgba(255, 255, 255, 1) 0%, transparent 67%)',
+              WebkitMask: 'radial-gradient(rgba(255, 255, 255, 1) 0%, transparent 67%)',
+            }}
            priority
          />
        </motion.div>
--- a/apps/marketing/src/components/(marketing)/carousel.tsx
+++ b/apps/marketing/src/components/(marketing)/carousel.tsx
@ -2,11 +2,14 @@

 import React, { useCallback, useEffect, useRef, useState } from 'react';

+import Link from 'next/link';
+
 import { Trans, msg } from '@lingui/macro';
 import { useLingui } from '@lingui/react';
 import type { AutoplayType } from 'embla-carousel-autoplay';
 import Autoplay from 'embla-carousel-autoplay';
 import useEmblaCarousel from 'embla-carousel-react';
+import { usePlausible } from 'next-plausible';
 import { useTheme } from 'next-themes';

 import { Card } from '@documenso/ui/primitives/card';
@ -61,6 +64,7 @@ const SLIDES = [

 export const Carousel = () => {
  const { _ } = useLingui();
+  const event = usePlausible();

  const slides = SLIDES;
  const [_isPlaying, setIsPlaying] = useState(false);
@ -238,7 +242,10 @@ export const Carousel = () => {
  if (!mounted) return null;
  return (
    <>
-      <Card className="mx-auto mt-12 w-full max-w-4xl rounded-2xl p-1 before:rounded-2xl" gradient>
+      <Card
+        className="relative mx-auto mt-12 w-full max-w-4xl rounded-2xl p-1 before:rounded-2xl"
+        gradient
+      >
        <div className="overflow-hidden rounded-xl" ref={emblaRef}>
          <div className="flex touch-pan-y rounded-xl">
            {slides.map((slide, index) => (
@ -269,6 +276,19 @@ export const Carousel = () => {
          </span>
          <Progress value={progress} className="h-1" />
        </div>
+
+        <Link
+          href="https://documen.so/book-a-demo"
+          className="bg-foreground/70 dark:bg-foreground/80 absolute inset-0 hidden flex-col items-center justify-center gap-y-2 rounded-xl opacity-0 backdrop-blur-[2px] transition-opacity group-hover:opacity-100 md:flex"
+          onClick={() => event('view-demo')}
+        >
+          <span className="text-background max-w-[60ch] text-2xl font-semibold">Book a Demo</span>
+          <span className="text-background max-w-[60ch] text-center text-sm">
+            Want to learn more about Documenso and how it works? Book a demo today! Our founders
+            will walk you through the application and answer any questions you may have regarding
+            usage, integration, and more.
+          </span>
+        </Link>
      </Card>

      <div className="mx-auto mt-6 w-full max-w-4xl px-2 sm:mt-12">
--- a/apps/marketing/src/components/(marketing)/faster-smarter-beautiful-bento.tsx
+++ b/apps/marketing/src/components/(marketing)/faster-smarter-beautiful-bento.tsx
@ -24,6 +24,10 @@ export const FasterSmarterBeautifulBento = ({
          src={backgroundPattern}
          alt="background pattern"
          className="h-full scale-125 object-cover dark:contrast-[70%] dark:invert dark:sepia md:scale-150 lg:scale-[175%]"
+          style={{
+            mask: 'radial-gradient(rgba(255, 255, 255, 1) 0%, transparent 67%)',
+            WebkitMask: 'radial-gradient(rgba(255, 255, 255, 1) 0%, transparent 67%)',
+          }}
        />
      </div>
      <h2 className="px-0 text-[22px] font-semibold md:px-12 md:text-4xl lg:px-24">
--- a/apps/marketing/src/components/(marketing)/hero.tsx
+++ b/apps/marketing/src/components/(marketing)/hero.tsx
@ -86,6 +86,10 @@ export const Hero = ({ className, ...props }: HeroProps) => {
            src={backgroundPattern}
            alt="background pattern"
            className="-mr-[50vw] -mt-[15vh] h-full scale-125 object-cover dark:contrast-[70%] dark:invert dark:sepia md:scale-150 lg:scale-[175%]"
+            style={{
+              mask: 'radial-gradient(rgba(255, 255, 255, 1) 0%, transparent 80%)',
+              WebkitMask: 'radial-gradient(rgba(255, 255, 255, 1) 0%, transparent 80%)',
+            }}
          />
        </motion.div>
      </div>
--- a/apps/marketing/src/components/(marketing)/open-build-template-bento.tsx
+++ b/apps/marketing/src/components/(marketing)/open-build-template-bento.tsx
@ -21,6 +21,10 @@ export const OpenBuildTemplateBento = ({ className, ...props }: OpenBuildTemplat
          src={backgroundPattern}
          alt="background pattern"
          className="h-full scale-125 object-cover dark:contrast-[70%] dark:invert dark:sepia md:scale-150 lg:scale-[175%]"
+          style={{
+            mask: 'radial-gradient(rgba(255, 255, 255, 1) 0%, transparent 80%)',
+            WebkitMask: 'radial-gradient(rgba(255, 255, 255, 1) 0%, transparent 80%)',
+          }}
        />
      </div>
      <h2 className="px-0 text-[22px] font-semibold md:px-12 md:text-4xl lg:px-24">
--- a/apps/marketing/src/components/(marketing)/share-connect-paid-widget-bento.tsx
+++ b/apps/marketing/src/components/(marketing)/share-connect-paid-widget-bento.tsx
@ -25,6 +25,10 @@ export const ShareConnectPaidWidgetBento = ({
          src={backgroundPattern}
          alt="background pattern"
          className="h-full scale-125 object-cover dark:contrast-[70%] dark:invert dark:sepia md:scale-150 lg:scale-[175%]"
+          style={{
+            mask: 'radial-gradient(rgba(255, 255, 255, 1) 0%, transparent 80%)',
+            WebkitMask: 'radial-gradient(rgba(255, 255, 255, 1) 0%, transparent 80%)',
+          }}
        />
      </div>
      <h2 className="px-0 text-[22px] font-semibold md:px-12 md:text-4xl lg:px-24">
@ -39,7 +43,7 @@ export const ShareConnectPaidWidgetBento = ({
          <CardContent className="grid grid-cols-1 gap-8 p-6">
            <p className="text-foreground/80 leading-relaxed">
              <strong className="block">
-                <Trans>Easy Sharing (Soon).</Trans>
+                <Trans>Easy Sharing.</Trans>
              </strong>
              <Trans>Receive your personal link to share with everyone you care about.</Trans>
            </p>
--- a/apps/web/src/app/(unauthenticated)/layout.tsx
+++ b/apps/web/src/app/(unauthenticated)/layout.tsx
@ -17,6 +17,10 @@ export default function UnauthenticatedLayout({ children }: UnauthenticatedLayou
            src={backgroundPattern}
            alt="background pattern"
            className="dark:brightness-95 dark:contrast-[70%] dark:invert dark:sepia"
+            style={{
+              mask: 'radial-gradient(rgba(255, 255, 255, 1) 0%, transparent 80%)',
+              WebkitMask: 'radial-gradient(rgba(255, 255, 255, 1) 0%, transparent 80%)',
+            }}
          />
        </div>

--- a/apps/web/src/components/partials/not-found.tsx
+++ b/apps/web/src/components/partials/not-found.tsx
@ -29,6 +29,10 @@ export default function NotFoundPartial({ children }: NotFoundPartialProps) {
            src={backgroundPattern}
            alt="background pattern"
            className="-mr-[50vw] -mt-[15vh] h-full scale-100 object-cover dark:contrast-[70%] dark:invert dark:sepia md:scale-100 lg:scale-[100%]"
+            style={{
+              mask: 'radial-gradient(rgba(255, 255, 255, 1) 0%, transparent 80%)',
+              WebkitMask: 'radial-gradient(rgba(255, 255, 255, 1) 0%, transparent 80%)',
+            }}
            priority
          />
        </motion.div>