logged in vs out

docusaurus.config.js

@@ -45,7 +45,10 @@ module.exports = {
           target: '_self',
           activeBasePath: '/docs'
         },
-
+        {
+          type: 'custom-LoginStatus',
+          position: 'right',
+        },
       ],
     },
     footer: {
@@ -84,6 +87,7 @@ module.exports = {
             { label: 'vs Cloudflare', href: 'https://plausible.io/vs-cloudflare-web-analytics' },
             { label: 'GA4 accuracy comparison', href: 'https://plausible.io/most-accurate-web-analytics' },
             { label: 'Why pay for analytics?', href: 'https://plausible.io/paid-analytics-vs-free-ga' },
+            { label: 'Is Plausible right for you?', href: 'https://plausible.io/when-not-to-use-plausible' },
             { label: 'WordPress plugin', href: 'https://plausible.io/wordpress-analytics-plugin' },
             { label: 'Google Tag Manager', href: 'https://plausible.io/gtm-template' },
             { label: 'Looker Studio', href: 'https://plausible.io/looker-studio-connector' },
@@ -116,6 +120,7 @@ module.exports = {
             { label: 'Terms', href: 'https://plausible.io/terms' },
             { label: 'DPA', href: 'https://plausible.io/dpa' },
             { label: 'Security', href: 'https://plausible.io/security' },
+            { label: 'Compliance', href: 'https://plausible.io/compliance' },
             { label: 'Imprint', href: 'https://plausible.io/imprint' },
           ],
         },

src/components/CtaBox.js

@@ -1,6 +1,11 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 
 export default function CtaBox({ headline, link, linkText, secondaryLink, secondaryText }) {
+  const [loggedIn, setLoggedIn] = useState(false);
+  useEffect(() => {
+    setLoggedIn(document.cookie.includes('logged_in=true'));
+  }, []);
+
   const canonicalButton = (href) => {
     if (href && href.includes('/register')) return 'Start free trial';
     if (href && href.includes('/plausible.io')) return 'View live demo';
@@ -14,6 +19,8 @@ export default function CtaBox({ headline, link, linkText, secondaryLink, second
     }
   };
 
+  if (loggedIn) return null;
+
   return (
     <div className="cta-box">
       <p>{headline}</p>

src/css/custom.css

@@ -443,15 +443,36 @@ html[data-theme='dark'] {
 
 /* footer */
 .footer--dark {
-  --ifm-footer-background-color: var(--zinc-800);
+  --ifm-footer-background-color: #1f2937;
+  --ifm-footer-link-color: #d1d5db;
+  --ifm-footer-link-hover-color: #ffffff;
+  --ifm-footer-title-color: #9ca3af;
+}
+
+.footer__title {
+  font-size: 0.75rem;
+  font-weight: 600;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  color: #9ca3af;
+}
+
+.footer__link-item {
+  font-size: 0.9rem;
+  line-height: 1.5rem;
+  color: #d1d5db;
+}
+
+.footer__link-item:hover {
+  color: #ffffff;
 }
 
 [class*="footerLogoLink"] {
   opacity: 1 !important;
 }
 
 [class*="footerLogoLink"]:hover {
-  opacity: 0.6 !important;
+  opacity: 0.7 !important;
 }
 
 .footer__logo-image {
@@ -460,9 +481,10 @@ html[data-theme='dark'] {
 }
 
 .footer__copyright {
-  padding-top: 2rem;
+  padding-top: 1rem;
   text-align: center;
-  color: var(--zinc-400);
+  font-size: 0.875rem;
+  color: #9ca3af;
 }
 
 /* Search modal */

src/theme/Footer/index.js

@@ -1,19 +1,87 @@
-import React from 'react';
-import OriginalFooter from '@theme-original/Footer';
+import React, { useState, useEffect } from 'react';
+import { useThemeConfig } from '@docusaurus/theme-common';
+import useBaseUrl from '@docusaurus/useBaseUrl';
 import styles from './styles.module.css';
 
-export default function Footer(props) {
+function FooterLinks({ links }) {
+  const pairs = [
+    [links[0], links[1]],
+    [links[2], links[3]],
+  ];
+  return (
+    <div className={styles.footerLinkGroups}>
+      {pairs.map((pair, i) => (
+        <div key={i} className={styles.footerLinkPair}>
+          {pair.map((col) => col && (
+            <div key={col.title} className={styles.footerCol}>
+              <h4 className={styles.footerColTitle}>{col.title}</h4>
+              <ul className={styles.footerColList}>
+                {col.items.map((item) => (
+                  <li key={item.label}>
+                    <a href={item.href} className={styles.footerLink}>{item.label}</a>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          ))}
+        </div>
+      ))}
+    </div>
+  );
+}
+
+export default function Footer() {
+  const [loggedIn, setLoggedIn] = useState(false);
+  useEffect(() => {
+    setLoggedIn(document.cookie.includes('logged_in=true'));
+  }, []);
+
+  const { footer } = useThemeConfig();
+  const { logo, copyright, links } = footer;
+  const logoSrc = useBaseUrl(logo.src);
+
   return (
     <>
-      <div className={styles.ctaBanner}>
-        <p className={styles.ctaText}>
-          Haven't tried Plausible yet?{' '}
-          <a href="https://plausible.io/register" onClick={() => window.plausible && window.plausible('CTA Click', {props: {position: 'Bottom', type: 'Docs', button: 'Start free trial'}})} className={styles.ctaLink}>Start a free trial</a>
-          {' '}or{' '}
-          <a href="https://plausible.io/plausible.io" onClick={() => window.plausible && window.plausible('CTA Click', {props: {position: 'Bottom', type: 'Docs', button: 'View live demo'}})} className={styles.ctaLink}>view the live demo</a>.
-        </p>
-      </div>
-      <OriginalFooter {...props} />
+      {!loggedIn && (
+        <div className={styles.ctaBanner}>
+          <div className={styles.ctaInner}>
+            <div className={styles.ctaText}>
+              <h2 className={styles.ctaHeading}>Ready to ditch Google Analytics?</h2>
+              <span className={styles.ctaAccent}>Start your free trial today</span>
+            </div>
+            <div className={styles.ctaButtons}>
+              <a
+                href="https://plausible.io/register"
+                className={styles.ctaPrimary}
+                onClick={() => window.plausible && window.plausible('CTA Click', {props: {position: 'Bottom', type: 'Docs', button: 'Start free trial'}})}
+              >
+                Start free trial
+              </a>
+              <a
+                href="https://plausible.io/plausible.io"
+                className={styles.ctaSecondary}
+                onClick={() => window.plausible && window.plausible('CTA Click', {props: {position: 'Bottom', type: 'Docs', button: 'View live demo'}})}
+              >
+                View live demo
+              </a>
+            </div>
+          </div>
+        </div>
+      )}
+      <footer className={styles.footer}>
+        <div className={styles.footerInner}>
+          <div className={styles.footerBrand}>
+            <a href={logo.href} className={styles.footerLogoLink}>
+              <img src={logoSrc} alt={logo.alt} width={logo.width} className={styles.footerLogo} />
+            </a>
+            <p className={styles.footerTagline}>
+              <a href="https://plausible.io/eu-hosted-web-analytics" className={styles.footerTaglineLink}>Made and hosted in the EU 🇪🇺</a><br />
+              Funded entirely by our subscribers.
+            </p>
+          </div>
+          <FooterLinks links={links} />
+        </div>
+      </footer>
     </>
   );
 }