diff --git a/docusaurus.config.js b/docusaurus.config.js index bf911c19..039858ae 100644 --- a/docusaurus.config.js +++ b/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' }, ], }, diff --git a/src/components/CtaBox.js b/src/components/CtaBox.js index 3474dd30..2c51b8fc 100644 --- a/src/components/CtaBox.js +++ b/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 (

{headline}

diff --git a/src/css/custom.css b/src/css/custom.css index ea86e8c4..1c97a614 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -443,7 +443,28 @@ 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"] { @@ -451,7 +472,7 @@ html[data-theme='dark'] { } [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 */ diff --git a/src/theme/Footer/index.js b/src/theme/Footer/index.js index d8ec69ae..87feab77 100644 --- a/src/theme/Footer/index.js +++ b/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 ( +
+ {pairs.map((pair, i) => ( +
+ {pair.map((col) => col && ( +
+

{col.title}

+ +
+ ))} +
+ ))} +
+ ); +} + +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 ( <> -
-

- Haven't tried Plausible yet?{' '} - window.plausible && window.plausible('CTA Click', {props: {position: 'Bottom', type: 'Docs', button: 'Start free trial'}})} className={styles.ctaLink}>Start a free trial - {' '}or{' '} - window.plausible && window.plausible('CTA Click', {props: {position: 'Bottom', type: 'Docs', button: 'View live demo'}})} className={styles.ctaLink}>view the live demo. -

-
- + {!loggedIn && ( +
+
+
+

Ready to ditch Google Analytics?

+ Start your free trial today +
+
+ window.plausible && window.plausible('CTA Click', {props: {position: 'Bottom', type: 'Docs', button: 'Start free trial'}})} + > + Start free trial + + window.plausible && window.plausible('CTA Click', {props: {position: 'Bottom', type: 'Docs', button: 'View live demo'}})} + > + View live demo + +
+
+
+ )} + ); } diff --git a/src/theme/Footer/styles.module.css b/src/theme/Footer/styles.module.css index c8b54435..d29f1e57 100644 --- a/src/theme/Footer/styles.module.css +++ b/src/theme/Footer/styles.module.css @@ -1,35 +1,227 @@ +/* ── CTA banner ─────────────────────────────────────────────────────────── */ + .ctaBanner { - background-color: var(--zinc-100); - padding: 1.25rem 2rem; - text-align: center; - border-top: 1px solid var(--zinc-200); + background-color: #f9fafb; + padding: 3rem 1.5rem; + border-top: 1px solid #e5e7eb; } [data-theme='dark'] .ctaBanner { - background-color: var(--zinc-800); - border-top: 1px solid var(--zinc-700); + background-color: #18181b; + border-top: 1px solid #27272a; +} + +.ctaInner { + max-width: 1200px; + margin: 0 auto; + display: flex; + align-items: center; + justify-content: space-between; + gap: 2rem; +} + +@media (max-width: 768px) { + .ctaInner { + flex-direction: column; + text-align: center; + } } .ctaText { + flex: 1; +} + +.ctaHeading { + margin: 0; + font-size: 1.875rem; + font-weight: 800; + color: #111827; + line-height: 1.2; + letter-spacing: -0.025em; +} + +[data-theme='dark'] .ctaHeading { + color: #f4f4f5; +} + +.ctaAccent { + display: block; + font-size: 1.875rem; + font-weight: 800; + color: #4f46e5; + line-height: 1.2; + letter-spacing: -0.025em; +} + +.ctaButtons { + display: flex; + align-items: center; + gap: 0.75rem; + flex-shrink: 0; +} + +.ctaPrimary { + display: inline-flex; + align-items: center; + justify-content: center; + padding: 0.75rem 1.25rem; + font-size: 1rem; + font-weight: 500; + border-radius: 6px; + background-color: #4f46e5; + color: #ffffff !important; + text-decoration: none !important; + box-shadow: 0 1px 3px rgba(0,0,0,0.1); + transition: background-color 0.15s ease; + white-space: nowrap; +} + +.ctaPrimary:hover { + background-color: #4338ca; + color: #ffffff !important; +} + +.ctaSecondary { + display: inline-flex; + align-items: center; + justify-content: center; + padding: 0.75rem 1.25rem; + font-size: 1rem; + font-weight: 500; + border-radius: 6px; + border: none; + background-color: #ffffff; + color: #4f46e5 !important; + text-decoration: none !important; + box-shadow: 0 1px 3px rgba(0,0,0,0.15); + transition: color 0.15s ease; + white-space: nowrap; +} + +.ctaSecondary:hover { + color: #4338ca !important; +} + +[data-theme='dark'] .ctaSecondary { + background-color: #27272a; + color: #818cf8 !important; +} + +[data-theme='dark'] .ctaSecondary:hover { + color: #a5b4fc !important; +} + +/* ── Footer ─────────────────────────────────────────────────────────────── */ + +.footer { + background-color: #1f2937; + padding: 3rem 1.5rem 4rem; +} + +.footerInner { + max-width: 1400px; + margin: 0 auto; + display: grid; + grid-template-columns: 260px 1fr; + gap: 3rem; +} + +@media (max-width: 996px) { + .footerInner { + grid-template-columns: 1fr; + } +} + +.footerBrand { + padding-right: 2rem; +} + +.footerLogoLink { + display: inline-block; + opacity: 1; + transition: opacity 0.15s ease; +} + +.footerLogoLink:hover { + opacity: 0.7; +} + +.footerLogo { + display: block; + margin-bottom: 1rem; +} + +.footerTagline { margin: 0; - font-size: 0.95rem; - color: var(--zinc-700); + font-size: 0.9rem; + line-height: 1.6; + color: #9ca3af; +} + +.footerTaglineLink { + color: #d1d5db !important; + text-decoration: none !important; } -[data-theme='dark'] .ctaText { - color: var(--zinc-300); +.footerTaglineLink:hover { + color: #ffffff !important; } -.ctaLink { - color: var(--ifm-color-primary); +.footerLinkGroups { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 2rem; +} + +@media (max-width: 640px) { + .footerLinkGroups { + grid-template-columns: 1fr; + } +} + +.footerLinkPair { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 2rem; +} + +@media (max-width: 480px) { + .footerLinkPair { + grid-template-columns: 1fr; + } +} + +.footerCol { + min-width: 0; +} + +.footerColTitle { + margin: 0 0 1rem; + font-size: 0.75rem; font-weight: 600; - text-decoration: none; + letter-spacing: 0.05em; + text-transform: uppercase; + color: #9ca3af; +} + +.footerColList { + list-style: none; + margin: 0; + padding: 0; +} + +.footerColList li { + margin-bottom: 0.75rem; } -.ctaLink:hover { - text-decoration: underline; +.footerLink { + font-size: 0.9rem; + line-height: 1.5; + color: #d1d5db !important; + text-decoration: none !important; + transition: color 0.15s ease; } -[data-theme='dark'] .ctaLink { - color: var(--ifm-color-primary-light); +.footerLink:hover { + color: #ffffff !important; } diff --git a/src/theme/NavbarItem/ComponentTypes.js b/src/theme/NavbarItem/ComponentTypes.js new file mode 100644 index 00000000..5b78c61f --- /dev/null +++ b/src/theme/NavbarItem/ComponentTypes.js @@ -0,0 +1,7 @@ +import ComponentTypes from '@theme-original/NavbarItem/ComponentTypes'; +import CustomLoginStatusNavbarItem from './CustomLoginStatusNavbarItem'; + +export default { + ...ComponentTypes, + 'custom-LoginStatus': CustomLoginStatusNavbarItem, +}; diff --git a/src/theme/NavbarItem/CustomLoginStatusNavbarItem.js b/src/theme/NavbarItem/CustomLoginStatusNavbarItem.js new file mode 100644 index 00000000..2a4f2267 --- /dev/null +++ b/src/theme/NavbarItem/CustomLoginStatusNavbarItem.js @@ -0,0 +1,65 @@ +import React, { useState, useEffect } from 'react'; + +export default function CustomLoginStatusNavbarItem({ mobile }) { + const [loggedIn, setLoggedIn] = useState(false); + useEffect(() => { + setLoggedIn(document.cookie.includes('logged_in=true')); + }, []); + + if (mobile) { + if (loggedIn) { + return ( + + My dashboard + + ); + } + return ( + <> + window.plausible && window.plausible('CTA Click', { props: { position: 'Nav', type: 'Docs', button: 'Start free trial' } })}> + Start free trial + + + Log in + + + ); + } + + const btnStyle = { + color: '#ffffff', + padding: '0.5rem 1.25rem', + fontSize: '0.95rem', + fontWeight: 500, + borderRadius: '6px', + }; + + if (loggedIn) { + return ( + + My dashboard + + ); + } + + return ( +
+ + Log in + + window.plausible && window.plausible('CTA Click', { props: { position: 'Nav', type: 'Docs', button: 'Start free trial' } })} + > + Start free trial + +
+ ); +}