DPA generator, 10x terms (#8470)

* initial layout, form * sticky/make button work * actually make button work * fairytale fonts * formatted page * print button, short screen formatting * tooltips * being extra * form-matting * general mobile formatting * formatted table * responsive * text formatting * signature fields * all document formatting * tooltips, all variables filled in * details * everything looks good * print styles * print instructions * web is :pinch: * print padding * moved subprocessors table to grid * og image * slim luv * footer link to dpa * sticky * round dem corners * making terms great again * movin de assets * fixed print settings image * text gradient for dpa footer link * terms on desktop * small fixes * added data region toggle * submenu * updated tweets * can't remember * mobile formatting * responsive fixes * file name * fairytale image positioning * changes how page scrolls (wip) * default to eu data region * fixed subprocessor font, added temp offset for new scrolling * better tooltips * privacy policy content * summarized privacy policy into tweets * og images * scroll fixes * smooth * bold posthog name * header blur prop * dark mode fixes * border color in dark mode * light logo * disclaimer that summaries are not legal terms * added new lawyers * taylor's version * copy niggles * commented out sticker offer --------- Co-authored-by: Eli Kinsey <[email protected]>
PostHog · May 21, 2024 · 92b5482 · 92b5482
1 parent 18f134e
commit 92b5482
Show file tree

Hide file tree

Showing 32 changed files with 4,195 additions and 20 deletions.
diff --git a/contents/privacy.mdx → contents/privacy-old.mdx b/contents/privacy.mdx → contents/privacy-old.mdx
diff --git a/contents/terms.mdx → contents/terms-old.mdx b/contents/terms.mdx → contents/terms-old.mdx
diff --git a/gatsby-ssr.js b/gatsby-ssr.js
@@ -68,7 +68,9 @@ export const onRenderBody = function ({ setPreBodyComponents }) {
     var slug = window.location.pathname.substring(1)
     var darkQuery = window.matchMedia('(prefers-color-scheme: dark)')
     darkQuery.addListener(function (e) {
-        window.__setPreferredTheme(e.matches ? 'dark' : 'light')
+        if (!localStorage.getItem('theme')) {
+            window.__setPreferredTheme(e.matches ? 'dark' : 'light')
+        }
     })
     try {
         preferredTheme =

diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx
@@ -319,7 +319,7 @@ const link = (marginBottom = '1') => cntl`
     leading-tight
     text-primary
     hover:text-primary
-    dark:text-primary-dark
+    dark:text-primary-dark/75
     dark:hover:text-white
     text-base
     font-bold
@@ -370,7 +370,7 @@ export function Footer(): JSX.Element {
     ]
 
     return (
-        <footer className="bg-accent dark:bg-accent-dark border-y border-light dark:border-dark">
+        <footer className="bg-accent dark:bg-accent-dark border-y border-light dark:border-dark print:hidden">
             <div className="relative -top-6">
                 <Link
                     to="/"
@@ -382,7 +382,7 @@ export function Footer(): JSX.Element {
                 </Link>
             </div>
 
-            <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 w-full max-w-screen-2xl mx-auto">
+            <div className="grid grid-cols-2 mdlg:grid-cols-3 lg:grid-cols-6 w-full max-w-screen-2xl mx-auto">
                 {linklist.map((item) => (
                     <LinkListItem {...item} key={item.url} />
                 ))}
@@ -405,47 +405,60 @@ export function Footer(): JSX.Element {
                 </ul>
             </div>
             <div className="py-5  border-l-0 border-r-0">
-                <div className="max-w-7xl mx-auto flex flex-col sm:flex-row items-center text-lg px-5">
+                <div className="max-w-7xl mx-auto flex flex-col sm:flex-row items-baseline text-lg px-5">
                     <small className="font-semibold dark:text-gray">
                         &copy; {new Date().getFullYear()} PostHog, Inc.
                     </small>
-                    <ul className="m-0 p-0 list-none sm:ml-auto flex sm:space-x-8 space-x-4 mt-2 sm:mt-0">
+                    <ul className="m-0 pl-0 pb-32 mdlg:pb-0 list-none sm:ml-auto flex flex-col mdlg:flex-row items-baseline sm:space-x-8 mdlg:space-x-4 mt-2 sm:mt-0 gap-2 mdlg:gap-0">
                         <li>
                             <Link
                                 to="https://status.posthog.com"
-                                className="font-bold text-sm text-primary/70 hover:text-primary/90 dark:text-primary-dark dark:hover:text-primary-dark"
+                                className="font-bold text-sm text-primary/70 hover:text-red dark:text-primary-dark/75 dark:hover:text-yellow"
                             >
                                 System status
                             </Link>
                         </li>
+                        <li className="-mt-1 mdlg:mt-0">
+                            <span className="hidden mdlg:inline-block pr-1 text-xl relative top-0.5">👉</span>
+                            <Link
+                                to="/dpa"
+                                className="font-bold text-sm text-primary/70 hover:text-red dark:text-primary-dark/75 dark:hover:text-yellow"
+                            >
+                                Generate a DPA
+                            </Link>
+                            <span className="inline-block px-1 text-xl relative top-0.5">👈</span>
+                            <span className="text-gradient bg-[length:700%_100%] text-sm ml-1 font-semibold italic">
+                                (It's guaranteed fun!)
+                            </span>
+                        </li>
                         <li>
                             <Link
                                 to="/handbook/company/security#soc-2"
-                                className="font-bold text-sm text-primary/70 hover:text-primary/90 dark:text-primary-dark dark:hover:text-primary-dark"
+                                className="font-bold text-sm text-primary/70 hover:text-red dark:text-primary-dark/75 dark:hover:text-yellow"
                             >
                                 SOC 2
                             </Link>
                         </li>
                         <li>
                             <Link
                                 to="/docs/privacy/hipaa-compliance"
-                                className="font-bold text-sm text-primary/70 hover:text-primary/90 dark:text-primary-dark dark:hover:text-primary-dark"
+                                className="font-bold text-sm text-primary/70 hover:text-red dark:text-primary-dark/75 dark:hover:text-yellow"
                             >
                                 HIPAA
                             </Link>
                         </li>
                         <li>
                             <Link
                                 to="/privacy"
-                                className="font-bold text-sm text-primary/70 hover:text-primary/90 dark:text-primary-dark dark:hover:text-primary-dark"
+                                className="font-bold text-sm text-primary/70 hover:text-red dark:text-primary-dark/75 dark:hover:text-yellow"
                             >
                                 Privacy policy
                             </Link>
                         </li>
                         <li>
                             <Link
                                 to="/terms"
-                                className="font-bold text-sm text-primary/70 hover:text-primary/90 dark:text-primary-dark dark:hover:text-primary-dark"
+                                className="font-bold text-sm text-primary/70 hover:text-red dark:text-primary-dark/75 dark:hover:text-yellow"
                             >
                                 Terms
                             </Link>

diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
@@ -1,12 +1,14 @@
 import React from 'react'
 import { Main } from '../MainNav'
 
-export const Header = (): JSX.Element => {
+export const Header = ({ blur = true }): JSX.Element => {
     return (
         <>
             <header
                 id="header"
-                className="relative z-[999999] reasonable:sticky reasonable:top-0 bg-gradient-to-b from-primary-dark/100 via-primary-dark/100 to-primary-dark/50 dark:from-dark/100 dark:via-dark/100 dark:to-dark/50 backdrop-blur"
+                className={`relative z-[999999] reasonable:sticky reasonable:top-0 bg-gradient-to-b from-primary-dark/100 via-primary-dark/100 to-primary-dark/50 dark:from-dark/100 dark:via-dark/100 dark:to-dark/50 print:hidden ${
+                    blur ? 'backdrop-blur' : 'bg-light dark:bg-dark'
+                }`}
             >
                 <Main />
             </header>

diff --git a/src/components/Lawyers/index.tsx b/src/components/Lawyers/index.tsx
@@ -0,0 +1,116 @@
+import React from 'react'
+import { StaticImage } from 'gatsby-plugin-image'
+import Link from 'components/Link'
+import { YouTube, LinkedIn } from 'components/Icons'
+
+export default function Lawyers() {
+    return (
+        <>
+            <p className="text-sm opacity-60 uppercase mb-4 text-center">Some of our crack team of lawyers:</p>
+            <div className="grid grid-cols-2 md:grid-cols-4 gap-4 pb-4 mb-4 border-b border-light dark:border-dark">
+                <div className="flex flex-col items-center gap-1 text-center">
+                    <figure className="size-24 rounded-full overflow-hidden p-0.5 border border-light dark:border-dark">
+                        <StaticImage
+                            src="../../images/lawyers/barry-zuckerkorn.jpg"
+                            className="rounded-full "
+                            alt="Barry Zuckerkorn"
+                        />
+                    </figure>
+                    <span className="pt-1">Barry Zuckerkorn</span>
+                    <div>
+                        <Link
+                            href="https://www.youtube.com/watch?v=v84IxZHQ6wQ"
+                            externalNoIcon
+                            className="opacity-60 hover:opacity-100"
+                        >
+                            <YouTube className="size-6 inline-block relative -top-0.5" />
+                        </Link>
+                    </div>
+                </div>
+                <div className="flex flex-col items-center gap-1 text-center">
+                    <figure className="size-24 rounded-full overflow-hidden p-0.5 border border-light dark:border-dark">
+                        <StaticImage
+                            src="../../images/lawyers/wayne-jarvis.jpg"
+                            className="rounded-full "
+                            alt="Wayne Jarvis"
+                        />
+                    </figure>
+                    <span className="pt-1">Wayne Jarvis</span>
+                    <div>
+                        <Link
+                            href="https://www.youtube.com/watch?v=PcW8yfJFWBw"
+                            externalNoIcon
+                            className="opacity-60 hover:opacity-100"
+                        >
+                            <YouTube className="size-6 inline-block relative -top-0.5" />
+                        </Link>
+                    </div>
+                </div>
+                <div className="flex flex-col items-center gap-1 text-center">
+                    <figure className="size-24 rounded-full overflow-hidden p-0.5 border border-light dark:border-dark">
+                        <StaticImage
+                            src="../../images/lawyers/maggie-lizer.jpg"
+                            className="rounded-full "
+                            alt="Maggie Lizer"
+                        />
+                    </figure>
+                    <span className="pt-1">Maggie Lizer</span>
+                    <div>
+                        <Link
+                            href="https://www.youtube.com/watch?v=cPHtRs5tfkw"
+                            externalNoIcon
+                            className="opacity-60 hover:opacity-100"
+                        >
+                            <YouTube className="size-6 inline-block relative -top-0.5" />
+                        </Link>
+                    </div>
+                </div>
+                <div className="flex flex-col items-center gap-1 text-center">
+                    <figure className="size-24 rounded-full overflow-hidden p-0.5 border border-light dark:border-dark">
+                        <StaticImage
+                            src="../../images/lawyers/bob-loblaw.jpg"
+                            className="rounded-full "
+                            alt="Bob Loblaw"
+                        />
+                    </figure>
+                    <span className="pt-1">Bob Loblaw</span>
+                    <div className="flex items-center gap-1">
+                        <Link
+                            href="https://youtu.be/ZgfiV2g5DPY?si=BkFB4Eoj1PN18AcX&t=55"
+                            externalNoIcon
+                            className="opacity-60 hover:opacity-100"
+                        >
+                            <YouTube className="size-6 inline-block relative -top-0.5" />
+                        </Link>
+                        <Link
+                            href="https://www.linkedin.com/in/bob-loblaw-934693118"
+                            externalNoIcon
+                            className="opacity-60 hover:opacity-100"
+                        >
+                            <LinkedIn className="size-5 inline-block relative top-[-3px]" />
+                        </Link>
+                    </div>
+                </div>
+            </div>
+            <div className="flex gap-3 justify-center py-1">
+                <div className="mt-1 rounded-full bg-accent w-12 h-12 overflow-hidden">
+                    <StaticImage
+                        src="https://res.cloudinary.com/dmukukwp6/image/upload/v1683655764/james_b841adce96.png"
+                        alt='James ("Veg"/"JC") Hawkins'
+                        className="w-12 h-12"
+                    />
+                </div>
+                <div>
+                    <p className="max-w-sm !mb-0 !pb-0">
+                        <em>"They're expensive, but we haven't gotten sued yet!"</em>
+                    </p>
+                    <p className="mb-0 leading-tight">
+                        <span className="font-semibold">James Hawkins</span>
+                        <br />
+                        <span className="text-xs opacity-70">CEO &amp; Co-founder</span>
+                    </p>
+                </div>
+            </div>
+        </>
+    )
+}
diff --git a/src/components/Layout/Fonts.scss b/src/components/Layout/Fonts.scss
@@ -42,3 +42,18 @@
     font-weight: 300 900;
     font-display: swap;
 }
+
+@font-face {
+    font-family: 'Fairytale';
+    src: url('/fonts/fairytale_serif-webfont.woff2') format('woff2'),
+        url('/fonts/fairytale_serif-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Computer Modern';
+    src: url('/fonts/cmunti-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+}
diff --git a/src/components/Layout/index.tsx b/src/components/Layout/index.tsx
@@ -13,7 +13,15 @@ import { Mobile as MobileNav } from 'components/MainNav'
 import { useLayoutData } from './hooks'
 import SearchBox from 'components/Search/SearchBox'
 
-const Article = ({ children, className = '' }: { children: React.ReactNode; className?: string }) => {
+const Article = ({
+    children,
+    className = '',
+    headerBlur = true,
+}: {
+    children: React.ReactNode
+    className?: string
+    headerBlur?: boolean
+}) => {
     const { compact } = useLayoutData()
 
     return (
@@ -23,7 +31,7 @@ const Article = ({ children, className = '' }: { children: React.ReactNode; clas
                     <SearchBox className="!w-full !py-2" location="mobile-header" />
                 </div>
             ) : (
-                <Header />
+                <Header blur={headerBlur} />
             )}
             <main>{children}</main>
             {!compact && (
@@ -42,7 +50,8 @@ const Layout = ({
     parent,
     activeInternalMenu,
     className = '',
-}: IProps & { className?: string }): JSX.Element => {
+    headerBlur = true,
+}: IProps & { className?: string; headerBlur?: boolean }): JSX.Element => {
     const posthog = usePostHog()
 
     useEffect(() => {
@@ -58,7 +67,9 @@ const Layout = ({
     return (
         <SearchProvider>
             <LayoutProvider parent={parent} activeInternalMenu={activeInternalMenu}>
-                <Article className={className}>{children}</Article>
+                <Article className={className} headerBlur={headerBlur}>
+                    {children}
+                </Article>
             </LayoutProvider>
         </SearchProvider>
     )

diff --git a/src/components/MainNav/index.tsx b/src/components/MainNav/index.tsx
@@ -662,7 +662,7 @@ export const Mobile = () => {
     const { menu, parent, internalMenu, activeInternalMenu, enterpriseMode, setEnterpriseMode } = useLayoutData()
 
     return (
-        <div className="fixed bottom-0 w-full md:hidden z-[9999999]">
+        <div className="fixed bottom-0 w-full md:hidden z-[9999999] print:hidden">
             <InternalMenu
                 mobile
                 className="bg-light dark:bg-dark border-t mb-[-1px]"

diff --git a/src/components/Tooltip/index.tsx b/src/components/Tooltip/index.tsx
@@ -42,7 +42,7 @@ export default function Tooltip({
             {open &&
                 createPortal(
                     <div
-                        className="z-[9999999999]"
+                        className="z-[9999999999] print:hidden"
                         role="tooltip"
                         ref={setPopperElement}
                         style={{ ...styles.popper, paddingTop: offset[1], paddingBottom: offset[1] }}