Web analytics product page (#8001)

* web analytics screenshots, hero copy * PostHog Vs content * Update index.tsx * Added some generic tutorials * Pairs with * web analytics topic * comparison chart * new tutorial * Update index.tsx * Subfeatures - words, not icons * Merge branch 'master' into web-analytics * removed unused sections, added icons, linked to page * open graph * fixed "posthog vs" mobile padding when in wide mode * beta flag * added line about pricing * clarified how web analytics is billed --------- Co-authored-by: Joe Martin <[email protected]>
PostHog · Mar 18, 2024 · 74428b9 · 74428b9
1 parent 57f154c
commit 74428b9
Show file tree

Hide file tree

Showing 26 changed files with 694 additions and 40 deletions.
diff --git a/package.json b/package.json
@@ -34,7 +34,7 @@
         "@heroicons/react": "^1.0.6",
         "@hubspot/api-client": "^7.1.2",
         "@popperjs/core": "^2.11.2",
-        "@posthog/icons": "0.6.7",
+        "@posthog/icons": "0.6.8",
         "@slack/bolt": "^3.8.1",
         "@supabase/supabase-js": "^1.29.4",
         "@tailwindcss/container-queries": "^0.1.1",

diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx
@@ -12,19 +12,23 @@ const linklist: IProps[] = [
         url: '/products/product-analytics',
         items: [
             {
-                title: 'Product Analytics',
+                title: 'Product analytics',
                 url: '/product-analytics',
             },
             {
-                title: 'Session Replay',
+                title: 'Web analytics',
+                url: '/web-analytics',
+            },
+            {
+                title: 'Session replay',
                 url: '/session-replay',
             },
             {
-                title: 'Feature Flags',
+                title: 'Feature flags',
                 url: '/feature-flags',
             },
             {
-                title: 'A/B Testing',
+                title: 'A/B testing',
                 url: '/ab-testing',
             },
             {
@@ -100,19 +104,19 @@ const linklist: IProps[] = [
         url: '/docs',
         items: [
             {
-                title: 'Product Analytics',
+                title: 'Product analytics',
                 url: '/docs/product-analytics/',
             },
             {
-                title: 'Session Recording',
+                title: 'Session recording',
                 url: '/docs/session-replay',
             },
             {
-                title: 'Feature Flags',
+                title: 'Feature flags',
                 url: '/docs/feature-flags',
             },
             {
-                title: 'A/B Testing',
+                title: 'A/B testing',
                 url: '/docs/experiments',
             },
             {
@@ -124,7 +128,7 @@ const linklist: IProps[] = [
                 url: '/docs/cdp',
             },
             {
-                title: 'Data Warehouse',
+                title: 'Data warehouse',
                 url: '/docs/data-warehouse',
             },
             {

diff --git a/src/components/Home/Slider/Slides.js b/src/components/Home/Slider/Slides.js
@@ -369,8 +369,8 @@ export const WebAnalytics = () => {
                 />
             )}
             contentOffset="mdlg:pb-6 lg:pb-8 lg:pr-8 xl:pb-12 2xl:pb-8"
-            buttonLabel="Read the docs"
-            buttonUrl="/docs/web-analytics"
+            buttonLabel="Explore"
+            buttonUrl="/web-analytics"
             buttonClasses="group !border-black/25 !bg-black/10 md:!w-auto !w-full"
             buttonChildClasses="!bg-lime-green border-primary !text-primary group-hover:text-black"
         />

diff --git a/src/components/Job/Apply.tsx b/src/components/Job/Apply.tsx
@@ -279,8 +279,9 @@ export default function Apply({ id, info }) {
                                 <p className="font-semibold font-code m-0">{code}</p>
                                 <button
                                     disabled={copied}
-                                    className={`${copied ? '' : 'active:top-[0.5px] active:scale-[.90]'
-                                        } relative outline-none`}
+                                    className={`${
+                                        copied ? '' : 'active:top-[0.5px] active:scale-[.90]'
+                                    } relative outline-none`}
                                     onClick={handleCopy}
                                 >
                                     <AnimatePresence>
@@ -366,11 +367,11 @@ export default function Apply({ id, info }) {
                                 render={() => (
                                     <TrackedCTA
                                         className="mt-auto"
-                                        to={`https://${posthog?.isFeatureEnabled &&
-                                            posthog?.isFeatureEnabled('direct-to-eu-cloud')
-                                            ? 'eu'
-                                            : 'app'
-                                            }.posthog.com/signup`}
+                                        to={`https://${
+                                            posthog?.isFeatureEnabled && posthog?.isFeatureEnabled('direct-to-eu-cloud')
+                                                ? 'eu'
+                                                : 'app'
+                                        }.posthog.com/signup`}
                                         event={{ name: `clicked Continue`, type: 'cloud' }}
                                     >
                                         Get started - free

diff --git a/src/components/Product/AbTesting/index.tsx b/src/components/Product/AbTesting/index.tsx
@@ -386,7 +386,7 @@ export const ProductAbTesting = () => {
                 </div>
             </section>
 
-            <div className={`${fullWidthContent ? 'max-w-full px-8' : 'max-w-7xl'} mx-auto`}>
+            <div className={`${fullWidthContent ? 'max-w-full px-0 md:px-8' : 'max-w-7xl'} mx-auto`}>
                 <div id="posthog-vs">
                     <section>
                         <h2 className="text-center text-3xl lg:text-4xl">PostHog vs...</h2>

diff --git a/src/components/Product/Comparison.tsx b/src/components/Product/Comparison.tsx
@@ -19,6 +19,9 @@ const companies = {
     FullStory: {
         comparisonURL: '/blog/posthog-vs-fullstory',
     },
+    GA4: {
+        comparisonURL: '/blog/posthog-vs-ga4',
+    },
     Hotjar: {
         comparisonURL: '/blog/posthog-vs-hotjar',
     },

diff --git a/src/components/Product/FeatureFlags/index.tsx b/src/components/Product/FeatureFlags/index.tsx
@@ -482,7 +482,7 @@ export const ProductFeatureFlags = () => {
                 </div>
             </section>
 
-            <div className={`${fullWidthContent ? 'max-w-full px-8' : 'max-w-7xl'} mx-auto`}>
+            <div className={`${fullWidthContent ? 'max-w-full px-0 md:px-8' : 'max-w-7xl'} mx-auto`}>
                 <div id="posthog-vs">
                     <section>
                         <h2 className="text-center text-3xl lg:text-4xl">PostHog vs...</h2>

diff --git a/src/components/Product/ProductAnalytics/index.tsx b/src/components/Product/ProductAnalytics/index.tsx
@@ -876,7 +876,7 @@ export const ProductProductAnalytics = () => {
                 </div>
             </section>
 
-            <div className={`${fullWidthContent ? 'max-w-full px-8' : 'max-w-7xl'} mx-auto`}>
+            <div className={`${fullWidthContent ? 'max-w-full px-0 md:px-8' : 'max-w-7xl'} mx-auto`}>
                 <div id="posthog-vs">
                     <section>
                         <h2 className="text-center text-3xl lg:text-4xl">PostHog vs...</h2>

diff --git a/src/components/Product/SessionReplay/index.tsx b/src/components/Product/SessionReplay/index.tsx
@@ -459,7 +459,7 @@ export const ProductSessionReplay = () => {
                 </div>
             </section>
 
-            <div className={`${fullWidthContent ? 'max-w-full px-8' : 'max-w-7xl'} mx-auto`}>
+            <div className={`${fullWidthContent ? 'max-w-full px-0 md:px-8' : 'max-w-7xl'} mx-auto`}>
                 <div id="posthog-vs">
                     <section>
                         <h2 className="text-center text-3xl lg:text-4xl">PostHog vs...</h2>

diff --git a/src/components/Product/Surveys/index.tsx b/src/components/Product/Surveys/index.tsx
@@ -434,7 +434,7 @@ export const ProductSurveys = () => {
                 </div>
             </section>
 
-            <div className={`${fullWidthContent ? 'max-w-full px-8' : 'max-w-7xl'} mx-auto`}>
+            <div className={`${fullWidthContent ? 'max-w-full px-0 md:px-8' : 'max-w-7xl'} mx-auto`}>
                 <div id="posthog-vs">
                     <section>
                         <h2 className="text-center text-3xl lg:text-4xl">PostHog vs...</h2>