mirror of
https://github.com/BillyOutlast/posthog.com.git
synced 2026-02-04 03:11:21 +01:00
Refreshed homepage hero, platform section, buttons (#1319)
* add osiris, new primary button styles, update nav * remove primary button brackets * fix local env issues * refactor button styles, secondary button * sunset the moon, land (remove) the rocket * correctly angle icons in buttons * Update yarn.lock * polish button styles * broken cta hover states (for debugging) * Install postcss-nested for nesting in .css * switch button css to scss * Update global.css * updating proof ui * get fonts in order - use SK Curiosity for all text fonts - remove one-off hard-coded fonts - fix font stacks * getting new hero graphic, headline, buttons in order * 5-step process view * transition to those sweet sweet mountains * button css -> scss * v1 of new platform section * platform background embellishments * restructure platform block for responsivity * hero responsive polish * propagate button styles throughout site * fix homepage header on light mode to always stay dark * use tailwind * remove 3D hero image until we roll out 3D site-wide * minor pricing page cleanup, verbiage tweaks * hero style tweaks - removed upper mountain range - data lakes -> data warehouse - smooth out gradients between sections Co-authored-by: Cory Watilo <corywatilo@gmail.com> Co-authored-by: Michael Matloka <dev@twixes.com>
This commit is contained in:
Cory Watilo
@@ -59,6 +59,7 @@
|
||||
"kea-typegen": "^0.5.3",
|
||||
"node-fetch": "^2.6.1",
|
||||
"postcss": "^8.2.6",
|
||||
"postcss-nested": "^5.0.5",
|
||||
"prism-react-renderer": "^1.2.0",
|
||||
"prismjs": "^1.23.0",
|
||||
"query-string": "^6.13.1",
|
||||
@@ -75,6 +76,7 @@
|
||||
"redux": "^4.0.5",
|
||||
"reselect": "^4.0.0",
|
||||
"sass": "^1.32.8",
|
||||
"sharp": "^0.27.2",
|
||||
"typescript": "^4.0.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
@@ -89,6 +91,7 @@
|
||||
"lint-staged": "^10.2.12",
|
||||
"mem": "^5.1.1",
|
||||
"prettier": "^2.1.0",
|
||||
"react-dev-utils": "^11.0.4",
|
||||
"tailwindcss": "^2.0.3"
|
||||
},
|
||||
"husky": {
|
||||
|
||||
@@ -1,3 +1,3 @@
|
||||
module.exports = () => ({
|
||||
plugins: [require('tailwindcss')],
|
||||
plugins: [require('tailwindcss'), require('postcss-nested')],
|
||||
})
|
||||
|
||||
@@ -3,7 +3,6 @@
|
||||
import React from 'react'
|
||||
import { Link } from 'gatsby'
|
||||
|
||||
import { CornerBrackets } from '../CornerBrackets'
|
||||
import { mergeClassList } from '../../lib/utils'
|
||||
|
||||
import rocketImg from './images/rocket.svg'
|
||||
@@ -26,7 +25,6 @@ interface CallToActionProps {
|
||||
width?: string
|
||||
href?: string
|
||||
to?: string
|
||||
displayBrackets?: boolean
|
||||
}
|
||||
|
||||
const icons = {
|
||||
@@ -43,10 +41,9 @@ const icons = {
|
||||
}
|
||||
|
||||
const buttonTypeClasses = {
|
||||
secondary:
|
||||
'bg-transparent border-3 border-white border-opacity-30 text-white mt-2 hover:bg-white hover:bg-opacity-10 hover:text-white',
|
||||
primary:
|
||||
'brackets rounded-sm bg-primary border-primary text-white hover:border-primary-dark hover:bg-primary-dark hover:text-white',
|
||||
primary: 'button-primary rounded text-white hover:text-white',
|
||||
secondary: 'button-secondary rounded text-white hover:text-white',
|
||||
button: 'button rounded text-white hover:text-white',
|
||||
custom: '',
|
||||
}
|
||||
|
||||
@@ -60,31 +57,26 @@ export const CallToAction = ({
|
||||
href,
|
||||
to,
|
||||
onClick,
|
||||
displayBrackets = false,
|
||||
}: CallToActionProps) => {
|
||||
const iconNode = icons[icon] ? (
|
||||
<div className={`${iconBg} bg-opacity-10 rounded rounded-sm p-2 mr-8`}>
|
||||
<span className={`${iconBg} icon inline-block bg-opacity-10 bg-yellow-100 rounded rounded-sm px-3 py-2 mr-8`}>
|
||||
<img src={icons[icon]} className="h-4 w-4 mb-0" alt="Get started with PostHog" />
|
||||
</div>
|
||||
</span>
|
||||
) : null
|
||||
|
||||
const brackets = type === 'primary' || displayBrackets ? <CornerBrackets /> : null
|
||||
|
||||
const widthClass = `w-${width}`
|
||||
const baseClasses = `p-2 ${widthClass} uppercase rounded-sm inline-flex items-center justify-between select-none text-base font-gosha relative button`
|
||||
const baseClasses = `px-4 py-2 ${widthClass} rounded inline-flex items-center justify-between text-sm relative`
|
||||
const classList = mergeClassList(baseClasses, buttonTypeClasses[type], className)
|
||||
|
||||
const innerHtml = (
|
||||
<>
|
||||
{brackets}
|
||||
{iconNode}
|
||||
<div className="mr-8 button-label">{children}</div>
|
||||
<span></span>
|
||||
<span className="mx-auto pr-8 button-label">{children}</span>
|
||||
</>
|
||||
)
|
||||
|
||||
return href ? (
|
||||
<a href={href} target="_blank" className={classList} rel="noreferrer">
|
||||
<a href={href} className={classList}>
|
||||
{innerHtml}
|
||||
</a>
|
||||
) : to ? (
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
interface CompensationCalculatorLocation {
|
||||
country: string
|
||||
area: string
|
||||
locationFactor: Number
|
||||
locationFactor: number
|
||||
currency?: string
|
||||
}
|
||||
|
||||
|
||||
@@ -1,17 +1,17 @@
|
||||
export const sfBenchmark: Record<string, number> = {
|
||||
'Content Marketer': 165000,
|
||||
'Designer': 174000,
|
||||
'Full Stack Engineer': 216000,
|
||||
'Front End Developer': 199000,
|
||||
'Graphic Designer': 128400,
|
||||
'Growth Engineer': 192000,
|
||||
'Mobile Engineer': 200000,
|
||||
'Product Designer': 186000,
|
||||
'Product Manager': 213600,
|
||||
'Product Marketer': 195000,
|
||||
'Recruiter': 144000,
|
||||
'Recruitment & Operations Coordinator': 99000,
|
||||
'Site Reliability Engineer': 205000,
|
||||
'Technical Writer': 150000,
|
||||
// 'Sales Engineer': 190000,
|
||||
'Content Marketer': 165000,
|
||||
Designer: 174000,
|
||||
'Full Stack Engineer': 216000,
|
||||
'Front End Developer': 199000,
|
||||
'Graphic Designer': 128400,
|
||||
'Growth Engineer': 192000,
|
||||
'Mobile Engineer': 200000,
|
||||
'Product Designer': 186000,
|
||||
'Product Manager': 213600,
|
||||
'Product Marketer': 195000,
|
||||
Recruiter: 144000,
|
||||
'Recruitment & Operations Coordinator': 99000,
|
||||
'Site Reliability Engineer': 205000,
|
||||
'Technical Writer': 150000,
|
||||
// 'Sales Engineer': 190000,
|
||||
}
|
||||
|
||||
@@ -1,44 +0,0 @@
|
||||
import React from 'react'
|
||||
|
||||
import buttonBracketImg from '../LandingPage/images/rounded-corner.svg'
|
||||
import purpleishButtonBracketImg from '../LandingPage/images/rounded-corner-purpleish.svg'
|
||||
|
||||
const supportedColors = {
|
||||
white: buttonBracketImg,
|
||||
purpleish: purpleishButtonBracketImg,
|
||||
}
|
||||
|
||||
const spacingClasses = {
|
||||
md: 2,
|
||||
lg: 4,
|
||||
}
|
||||
|
||||
export const CornerBrackets = ({ spacing = 'md', color = 'white' }: { spacing?: string; color?: string }) => {
|
||||
const img = supportedColors[color]
|
||||
const spacingClass = spacingClasses[spacing]
|
||||
|
||||
return (
|
||||
<>
|
||||
<img
|
||||
src={img}
|
||||
alt="button bracket"
|
||||
className={`absolute top-0 left-0 -mt-${spacingClass} -ml-${spacingClass} opacity-30`}
|
||||
/>
|
||||
<img
|
||||
src={img}
|
||||
alt="button bracket"
|
||||
className={`absolute top-0 right-0 -mt-${spacingClass} -mr-${spacingClass} opacity-30 transform rotate-90`}
|
||||
/>
|
||||
<img
|
||||
src={img}
|
||||
alt="button bracket"
|
||||
className={`absolute bottom-0 left-0 -mb-${spacingClass} -ml-${spacingClass} opacity-30 transform -rotate-90`}
|
||||
/>
|
||||
<img
|
||||
src={img}
|
||||
alt="button bracket"
|
||||
className={`absolute bottom-0 right-0 -mb-${spacingClass} -mr-${spacingClass} opacity-30 transform rotate-180`}
|
||||
/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -27,7 +27,7 @@ const FooterListItem = ({ to = '', border = true, href = '', children }: FooterL
|
||||
}
|
||||
|
||||
const FooterSubCategory = ({ children }: { children: any }) => (
|
||||
<header className="block gosha text-white mt-8 font-bold text-sm">{children}</header>
|
||||
<header className="block text-white mt-8 mb-2 font-bold text-sm">{children}</header>
|
||||
)
|
||||
|
||||
const FooterCategory = ({ children, title }: { children: any; title: string }) => {
|
||||
|
||||
@@ -67,7 +67,6 @@
|
||||
}
|
||||
|
||||
.modalCard h4 {
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
color: #f96132;
|
||||
font-size: 14px;
|
||||
line-height: 24px;
|
||||
|
||||
@@ -16,7 +16,7 @@ interface NavbarLinkProps {
|
||||
}
|
||||
|
||||
const NavbarLink = ({ to, href, children, textLight, className = '' }: NavbarLinkProps) => {
|
||||
const baseClasses = 'opacity-80 hover:opacity-100 px-4 py-2 text-xs font-semibold '.concat(className)
|
||||
const baseClasses = 'opacity-80 hover:opacity-100 px-4 py-2 text-xs '.concat(className)
|
||||
const classList = textLight
|
||||
? `text-white hover:text-white ${baseClasses}`
|
||||
: `text-black hover:text-black ${baseClasses}`
|
||||
@@ -37,7 +37,7 @@ const NavbarLink = ({ to, href, children, textLight, className = '' }: NavbarLin
|
||||
}
|
||||
|
||||
const PrimaryCta = ({ children, className = '' }: { children: any; className?: string }) => {
|
||||
const classList = `button-primary ${className} border-none`
|
||||
const classList = `button-primary ${className} border-none px-4 py-2 ml-4 transition-none hover:transition-none text-xs rounded-sm`
|
||||
|
||||
return (
|
||||
<li className="leading-none">
|
||||
@@ -90,7 +90,7 @@ export const Header = ({
|
||||
<img alt="logo" src={logo} />
|
||||
</Link>
|
||||
|
||||
<ul className="hidden lg:flex list-none justify-between items-center mb-0">
|
||||
<ul className="hidden lg:flex list-none justify-between items-center mb-0 font-nav">
|
||||
<NavbarLink to="/product-features" textLight={textLight}>
|
||||
Product
|
||||
</NavbarLink>
|
||||
@@ -103,20 +103,19 @@ export const Header = ({
|
||||
<NavbarLink to="/pricing" textLight={textLight}>
|
||||
Pricing
|
||||
</NavbarLink>
|
||||
<NavbarLink to="/blog" textLight={textLight}>
|
||||
Blog
|
||||
</NavbarLink>
|
||||
<NavbarLink href="https://github.com/posthog/posthog" textLight={textLight}>
|
||||
GitHub
|
||||
</NavbarLink>
|
||||
</ul>
|
||||
|
||||
<ul className="hidden lg:flex list-none flex justify-between items-center mb-0 text-2xs">
|
||||
<PrimaryCta>Get Started</PrimaryCta>
|
||||
<ul className="hidden lg:flex list-none flex justify-between items-center mb-0 text-xs">
|
||||
<PrimaryCta>
|
||||
<span>Get Started</span>
|
||||
</PrimaryCta>
|
||||
<NavbarLink
|
||||
href="https://app.posthog.com/login"
|
||||
textLight={textLight}
|
||||
className="uppercase text-xs"
|
||||
className="font-nav opacity-80 hover:opacity-100 px-4 py-2 text-xs"
|
||||
>
|
||||
Login
|
||||
</NavbarLink>
|
||||
@@ -179,7 +178,7 @@ export const Header = ({
|
||||
Login
|
||||
</NavbarLink>
|
||||
|
||||
<PrimaryCta className="my-2 ml-4 transition-none hover:transition-none">Get Started</PrimaryCta>
|
||||
<PrimaryCta className=" ">Get Started</PrimaryCta>
|
||||
</ul>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
@@ -1,13 +1,10 @@
|
||||
import React from 'react'
|
||||
|
||||
import { CornerBrackets } from '../../CornerBrackets'
|
||||
|
||||
export const Blockquote = () => {
|
||||
return (
|
||||
<div className="blockquote-section pt-2">
|
||||
<div className="blockquote-section pt-6 pb-24">
|
||||
|
||||
<div className="w-11/12 max-w-xl mx-auto bg-purple-500 md:mt-12 bg-opacity-20 rounded p-8 text-center text-white relative">
|
||||
<CornerBrackets spacing="lg" />
|
||||
<div className="w-11/12 max-w-xl mx-auto md:mt-12 bg-opacity-20 rounded p-8 text-center text-white relative">
|
||||
<p className="opacity-80">
|
||||
PostHog is what I always wanted a Product Analytics SaaS to be. Private cloud option so GDPR becomes
|
||||
way more manageable, features built based on direct community feedback, focus on simplicity and
|
||||
|
||||
@@ -1,244 +1,271 @@
|
||||
import React from 'react'
|
||||
|
||||
import graphicAnalytics from '../images/analytics@2x.png'
|
||||
import graphicInsights from '../images/insights@2x.png'
|
||||
import graphicPlatform from '../images/platform@2x.png'
|
||||
|
||||
export const Features = () => {
|
||||
return (
|
||||
<div className="lp-features text-white text-center">
|
||||
<div className="w-11/12 max-w-4xl mx-auto">
|
||||
<div className="lp-features text-white text-center pt-4">
|
||||
<div className="w-11/12 max-w-4xl mx-auto relative">
|
||||
<h2>A single platform that does it all</h2>
|
||||
<p className="opacity-80 mt-1 text-center mb-12 mx-auto lg:w-9/12">
|
||||
Until now, you’d need multiple services to do all this. Plus only PostHog lets you keep customer
|
||||
<p className="opacity-60 mt-1 text-center mb-12 mx-auto lg:w-9/12 text-base">
|
||||
Until now, you'd need multiple services to do all this. Plus only PostHog lets you keep customer
|
||||
data on your own infrastructure.
|
||||
</p>
|
||||
|
||||
<div className="inline-flex flex-col md:flex-row text-left">
|
||||
<div className="column flex-grow mb-8 lg:mb-0">
|
||||
<h3>Analytics</h3>
|
||||
<ul className="list-none pl-0">
|
||||
<li>
|
||||
<figure>
|
||||
<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M18 4.8v2.4h1.92l-6.72 6.72-4.8-4.8-8.4 8.4 1.68 1.68 6.72-6.72 4.8 4.8 8.4-8.4v1.92H24v-6h-6z"
|
||||
fill="#fff"
|
||||
opacity=".5"
|
||||
/>
|
||||
</svg>
|
||||
</figure>
|
||||
<span>Trends</span>
|
||||
</li>
|
||||
<li>
|
||||
<figure>
|
||||
<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M4 5.833a.5.5 0 01.5-.5h15a.5.5 0 01.5.5V7.5a.5.5 0 01-.5.5h-15a.5.5 0 01-.5-.5V5.833zm2.667 5.334a.5.5 0 01.5-.5h9.666a.5.5 0 01.5.5v1.666a.5.5 0 01-.5.5H7.167a.5.5 0 01-.5-.5v-1.666zM9.833 16a.5.5 0 00-.5.5v1.667a.5.5 0 00.5.5h4.334a.5.5 0 00.5-.5V16.5a.5.5 0 00-.5-.5H9.833z"
|
||||
fill="#fff"
|
||||
opacity=".5"
|
||||
/>
|
||||
</svg>
|
||||
</figure>
|
||||
<span>Funnels</span>
|
||||
</li>
|
||||
<li>
|
||||
<figure>
|
||||
<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g opacity=".5" fill="#fff">
|
||||
<path d="M3.626 9.19H1.892a.693.693 0 00-.693.693v2.502c0 .383.31.693.692.693h.168v3.649c0 .295.239.534.534.534h.812c.295 0 .535-.239.535-.534v-3.175a1.8 1.8 0 01-.314-1.012V9.19zM3 6.739c-.595 0-1.078.483-1.078 1.079 0 .194.055.374.145.531.186.326.533.548.934.548.253 0 .483-.091.666-.237.066-.308.21-.585.41-.813l.002-.03c0-.595-.483-1.078-1.078-1.078zM22.106 9.19h-1.734v3.35c0 .375-.117.723-.313 1.012v3.175c0 .295.239.534.534.534h.812a.534.534 0 00.534-.534v-3.649h.167c.383 0 .693-.31.693-.693V9.883a.693.693 0 00-.693-.693zM20.999 8.897c.402 0 .748-.222.934-.548.09-.157.145-.337.145-.531a1.079 1.079 0 10-2.158 0c0 .01.003.019.003.028.2.229.344.506.41.814.183.146.413.237.666.237zM7.916 8.19c0-.041.004-.082.007-.124H5.438a.97.97 0 00-.97.97v3.504c0 .535.435.97.97.97h.235v5.109c0 .412.335.747.748.747h1.136a.748.748 0 00.748-.747l.001-4.714a2.073 2.073 0 01-.39-1.21V8.19zM6.99 4.634a1.51 1.51 0 10-.001 3.022 1.51 1.51 0 000-3.022zM18.56 8.067h-2.484c.002.042.005.082.005.124v4.505c0 .452-.145.869-.39 1.211v4.713c0 .412.335.747.748.747h1.136a.748.748 0 00.748-.747l.002-5.11h.235a.97.97 0 00.97-.97V9.037a.969.969 0 00-.97-.97zM13.994 6.943h-3.99c-.688 0-1.247.558-1.247 1.247v4.505c0 .688.558 1.247 1.246 1.247h.303v6.568c0 .53.43.962.96.962h1.462c.532 0 .962-.43.962-.962v-6.568h.304c.688 0 1.247-.559 1.247-1.247V8.19c0-.689-.56-1.247-1.247-1.247zM10.944 6.101a1.933 1.933 0 002.11 0 1.942 1.942 0 10-2.11 0zM17.008 7.655c.411 0 .783-.164 1.055-.43a1.51 1.51 0 10-1.055.43z" />
|
||||
</g>
|
||||
</svg>
|
||||
</figure>
|
||||
<span>Cohorts</span>
|
||||
</li>
|
||||
<li>
|
||||
<figure>
|
||||
<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g opacity=".5" fill="#fff">
|
||||
<path d="M15.913 17.976A6.986 6.986 0 0112 19.15c-3.625 0-6.673-2.735-7.056-6.168h1.176c.384 0 .695-.192.887-.48a.912.912 0 000-.984l-2.255-3.72a1.02 1.02 0 00-.888-.48 1.05 1.05 0 00-.888.48c-.792 1.272-1.968 3.335-2.16 3.625-.095.192-.192.384-.192.575 0 .576.384.984.984.984l1.272.001c.504 4.608 4.415 8.136 9.12 8.136 1.752 0 3.527-.48 4.992-1.465.48-.287.576-.887.288-1.367a1.04 1.04 0 00-1.368-.313zM22.393 11.015H21.12C20.616 6.408 16.705 2.88 12 2.88c-1.753 0-3.528.48-4.993 1.464-.48.288-.575.888-.287 1.368.287.48.887.576 1.367.288a6.986 6.986 0 013.913-1.176c3.624 0 6.672 2.736 7.055 6.168h-1.175a1.05 1.05 0 00-.888.48.912.912 0 000 .985l2.255 3.72c.192.287.48.48.888.48.384 0 .696-.193.888-.48.792-1.273 1.968-3.336 2.16-3.625.096-.192.192-.384.192-.576 0-.552-.408-.96-.983-.96z" />
|
||||
</g>
|
||||
</svg>
|
||||
</figure>
|
||||
<span>Retention</span>
|
||||
</li>
|
||||
<li>
|
||||
<figure>
|
||||
<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g opacity=".5" fill="#fff">
|
||||
<path d="M19.584 10.225c.912-1.248 2.88-4.2 2.88-6.288A3.328 3.328 0 0019.129.6a3.328 3.328 0 00-3.336 3.336c0 2.088 1.968 5.015 2.88 6.288.215.287.671.287.911 0zM17.52 3.912a1.608 1.608 0 111.607 1.608c-.887.024-1.607-.696-1.607-1.608zM19.128 11.64h-6.072a2.838 2.838 0 00-2.833 2.832 2.838 2.838 0 002.832 2.833h1.248a1.367 1.367 0 110 2.735H7.728a.748.748 0 00-.745.745c0 .407.336.744.745.744h6.575a2.838 2.838 0 002.832-2.832 2.838 2.838 0 00-2.832-2.833h-1.248a1.367 1.367 0 110-2.735h6.073a.748.748 0 00.744-.745.748.748 0 00-.744-.744zM6.575 18.384a.753.753 0 00-1.055 0l-1.368 1.368-1.368-1.368a.753.753 0 00-1.055 0 .753.753 0 000 1.056l1.367 1.368-1.367 1.368a.753.753 0 000 1.055.742.742 0 00.527.216.745.745 0 00.528-.216l1.368-1.368 1.368 1.368a.742.742 0 00.528.216.745.745 0 00.527-.216.753.753 0 000-1.055l-1.367-1.368 1.367-1.368c.29-.312.29-.768 0-1.056z" />
|
||||
</g>
|
||||
</svg>
|
||||
</figure>
|
||||
<span>Paths</span>
|
||||
</li>
|
||||
<li>
|
||||
<figure>
|
||||
<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M12.627 3.6A8.516 8.516 0 004.94 8.423l-.255-.45a.958.958 0 00-.87-.503.96.96 0 00-.81 1.44l1.32 2.355a.96.96 0 001.275.39l2.347-1.2a.965.965 0 00.456-1.309.963.963 0 00-1.326-.401l-.21.105a6.6 6.6 0 015.76-3.33c3.653 0 6.578 2.897 6.578 6.48 0 3.554-2.886 6.433-6.495 6.48a.96.96 0 10.03 1.92c4.625-.06 8.385-3.802 8.385-8.4 0-4.635-3.821-8.4-8.498-8.4zm-.157 3.585a.96.96 0 00-.945.975V12c-.001.292.132.567.36.75l2.4 1.92a.962.962 0 001.2-1.5l-2.04-1.635V8.16a.957.957 0 00-.975-.975z"
|
||||
fill="#fff"
|
||||
opacity=".5"
|
||||
/>
|
||||
</svg>
|
||||
</figure>
|
||||
<span>Session browsing</span>
|
||||
</li>
|
||||
<li>
|
||||
<figure>
|
||||
<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g opacity=".5" fill="#fff">
|
||||
<path d="M6.789 5.61C5.41 5.266 5.41 4.885 5.41 4.722c0-.59.79-.678 1.261-.678.825 0 1.682.278 2.038.407.095.035.2.019.257-.072l.737-1.174c.058-.092.012-.17-.083-.205-.379-.144-1.339-.473-2.411-.563l.002-1.04c0-.13-.067-.196-.198-.196H5.987c-.131 0-.198.067-.198.197V2.48c-1.614.271-2.36 1.286-2.36 2.24 0 1.163.936 1.988 2.782 2.45 1.378.347 1.378.727 1.378.89 0 .59-.79.678-1.261.678-.826 0-1.684-.278-2.04-.407-.095-.035-.2-.02-.256.072l-.735 1.174c-.058.092-.012.17.083.207.379.144 1.339.473 2.411.563v1.037c0 .131.067.197.198.197h1.027c.13 0 .197-.067.197-.197v-1.084c1.615-.272 2.36-1.286 2.36-2.24-.002-1.163-.937-1.987-2.784-2.45zM6.592 16.309H2.265c-.389 0-.541.152-.541.54v5.409c0 .389.152.542.54.542h4.327c.388 0 .541-.153.541-.541V16.85c0-.389-.152-.541-.54-.541zM14.164 11.982H9.837c-.388 0-.541.153-.541.541v9.736c0 .388.153.54.54.54h4.328c.388 0 .541-.152.541-.54v-9.736c0-.388-.153-.54-.54-.54zM21.736 6.573H17.41c-.388 0-.54.152-.54.54V22.26c0 .388.152.54.54.54h4.327c.388 0 .54-.152.54-.54l.002-15.145c0-.389-.152-.541-.541-.541z" />
|
||||
</g>
|
||||
</svg>
|
||||
</figure>
|
||||
<span>Revenue tracking (soon)</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="column flex-grow mb-8 lg:mb-0 lg:mx-24">
|
||||
<h3>Insights</h3>
|
||||
<ul className="list-none pl-0">
|
||||
<li>
|
||||
<figure>
|
||||
<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M17.087 21.168a.569.569 0 01-.575.575h-9a.569.569 0 01-.576-.575c0-.336.265-.576.576-.576H7.44c1.032-.12 1.607-.552 1.895-.96h5.376c.287.408.864.84 1.895.96h-.095c.313 0 .576.24.576.576zm5.448-6.36v2.52a1.348 1.348 0 01-1.344 1.295H2.806c-.72 0-1.32-.575-1.344-1.295V3.766c0-.84.696-1.536 1.536-1.536h18.024c.84 0 1.536.696 1.536 1.536l-.023 11.042zm-9.311 2.136a.328.328 0 00-.336-.335h-1.775a.328.328 0 00-.336.335v.24c0 .192.144.336.336.336h1.775a.328.328 0 00.336-.336v-.24zm8.063-1.849V3.791a.267.267 0 00-.264-.264H2.999a.267.267 0 00-.265.264v11.304c0 .145.12.265.265.265h18.024c.144 0 .264-.12.264-.265zm-4.632-5.663A4.66 4.66 0 0112 14.087a4.66 4.66 0 01-4.656-4.655A4.66 4.66 0 0112 4.776a4.66 4.66 0 014.655 4.656zm-2.111-.24l-3.625-2.088c-.192-.096-.407.024-.407.24v4.176c0 .215.24.335.407.24l3.625-2.088c.191-.12.191-.385 0-.48z"
|
||||
fill="#fff"
|
||||
opacity=".5"
|
||||
/>
|
||||
</svg>
|
||||
</figure>
|
||||
<span>Session recordings</span>
|
||||
</li>
|
||||
<li>
|
||||
<figure>
|
||||
<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M4.08 1.2a.48.48 0 00-.48.48v20.64a.48.48 0 10.96 0V1.68a.48.48 0 00-.48-.48zm.96 1.44v9.12h9.6V2.64h-9.6zm10.08 2.4v7.2H10.8v2.4h9.6v-9.6h-5.28z"
|
||||
fill="#fff"
|
||||
opacity=".5"
|
||||
/>
|
||||
</svg>
|
||||
</figure>
|
||||
<span>Feature flags</span>
|
||||
</li>
|
||||
<li>
|
||||
<figure>
|
||||
<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M2.16 17.76c0 .792.648 1.44 1.44 1.44h6.72v-6.072c0-.192.096-.36.265-.432.168-.073.36-.073.504.047l6 4.513a.443.443 0 01.192.432.502.502 0 01-.264.384l-1.512.745.192.384h4.704c.792 0 1.44-.649 1.44-1.44V7.2H2.16v10.56zM13.848 12l.864-.432a.48.48 0 01.648.216.48.48 0 01-.215.647l-.865.433a.692.692 0 01-.215.047.506.506 0 01-.432-.264c-.12-.24 0-.527.215-.647zm-2.112-1.344l.312-.913c.072-.264.36-.384.6-.312.24.072.385.36.312.6l-.312.912a.516.516 0 01-.455.336c-.048 0-.096 0-.145-.024-.24-.07-.383-.36-.312-.6zm-2.664-.96a.48.48 0 01.648.215l.432.865a.48.48 0 01-.215.648.693.693 0 01-.216.047.506.506 0 01-.432-.264l-.409-.863c-.12-.24-.048-.528.192-.648zm-.36 5.424a.48.48 0 01-.215.648l-.865.432a.693.693 0 01-.215.048.506.506 0 01-.432-.264.48.48 0 01.215-.648l.865-.432a.482.482 0 01.647.216zm-1.967-2.712c.072-.264.36-.384.6-.312l.912.312c.24.072.384.36.312.6a.516.516 0 01-.456.336c-.047 0-.095 0-.144-.025l-.912-.312a.457.457 0 01-.312-.6zM20.4 2.4H3.6c-.792 0-1.44.648-1.44 1.44v2.4h19.68v-2.4c0-.792-.648-1.44-1.44-1.44zM4.08 4.8a.48.48 0 010-.96.48.48 0 010 .96zm2.4 0a.48.48 0 010-.96.48.48 0 010 .96zm2.4 0a.48.48 0 010-.96.48.48 0 010 .96zm5.568 14.016l1.08 2.16-1.296.624-1.08-2.136a.453.453 0 00-.432-.264c-.072 0-.144.024-.216.048l-1.224.624v-5.784l4.608 3.455-1.248.625a.494.494 0 00-.192.648z"
|
||||
fill="#fff"
|
||||
opacity=".5"
|
||||
/>
|
||||
</svg>
|
||||
</figure>
|
||||
<span>Heatmaps</span>
|
||||
</li>
|
||||
<li>
|
||||
<figure>
|
||||
<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g opacity=".5" fill="#fff">
|
||||
<path d="M12 24h-1.5V0H12v24zM1.5 21V3a.75.75 0 01.75-.75h8.25a.75.75 0 01.75.75v18a.75.75 0 01-.75.75H2.25A.75.75 0 011.5 21zm3-15.75a.75.75 0 10-1.5 0 .75.75 0 001.5 0zm0 2.25a.75.75 0 10-1.5 0 .75.75 0 001.5 0zM3 19.5h6.75V18H3v1.5zm0-3h6.75V15H3v1.5zm0-3h6.75V12H3v1.5zM15 3.75v6h6v-6h-6zm7.5-1.5v9h-9v-9h9zM13.5 12.75h9v9h-9v-9z" />
|
||||
</g>
|
||||
</svg>
|
||||
</figure>
|
||||
<span>A/B testing</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="column flex-grow mb-8 lg:mb-0">
|
||||
<h3>Platform</h3>
|
||||
<ul className="list-none pl-0">
|
||||
<li>
|
||||
<figure>
|
||||
<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M11.789 15.034a2.945 2.945 0 00.421 5.861 2.945 2.945 0 00.421-5.861v-2.122h9.685v-2.779L24 9.123V6.596l-2.105-1.263-2.106 1.263v2.527l1.685 1.01v1.937h-5.895V9.923a2.105 2.105 0 10-.842 0v2.147H9.263V9.965h1.684v-4.21h-4.21v4.21H8.42v2.105H2.526V9.965h1.685L2.105 5.333 0 9.965h1.684v2.947H11.79v2.122zm1.982 2.37l-1.982 1.982-1.14-1.14.596-.596.544.544 1.386-1.386.596.596z"
|
||||
fill="#fff"
|
||||
opacity=".5"
|
||||
/>
|
||||
</svg>
|
||||
</figure>
|
||||
<span>Event pipeline</span>
|
||||
</li>
|
||||
<li>
|
||||
<figure>
|
||||
<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g opacity=".5" fill="#fff">
|
||||
<path d="M22.007 9.192H2.64c-.625 0-1.128.505-1.128 1.128v3.744c0 .625.504 1.128 1.128 1.128h19.344c.624 0 1.128-.504 1.128-1.128V10.32c0-.624-.505-1.128-1.105-1.128zm-15.6 3.36a.292.292 0 01-.288.288h-.6a.292.292 0 01-.287-.288v-.6c0-.168.144-.312.287-.312h.6c.168 0 .288.144.288.312v.6zm2.377 0a.292.292 0 01-.288.288h-.6a.292.292 0 01-.288-.288v-.6c0-.168.145-.312.288-.312h.6c.168 0 .288.144.288.312v.6zm10.823 0a.292.292 0 01-.287.288h-4.248a.292.292 0 01-.288-.288v-.6c0-.168.144-.312.288-.312h4.224c.168 0 .288.144.288.312v.6h.023zM22.007 16.512H2.64c-.625 0-1.128.505-1.128 1.128v3.744c0 .625.504 1.128 1.128 1.128h19.344c.624 0 1.128-.504 1.128-1.128V17.64c0-.624-.505-1.128-1.105-1.128zm-15.6 3.36a.292.292 0 01-.288.288h-.6a.292.292 0 01-.287-.288v-.6c0-.168.144-.312.287-.312h.6c.168 0 .288.144.288.312v.6zm2.377 0a.292.292 0 01-.288.288h-.6a.292.292 0 01-.288-.288v-.6c0-.168.145-.312.288-.312h.6c.168 0 .288.144.288.312v.6zm10.823 0a.292.292 0 01-.287.288h-4.248a.292.292 0 01-.288-.288v-.6c0-.168.144-.312.288-.312h4.224c.168 0 .288.144.288.312v.6h.023zM22.007 1.872H2.64c-.625 0-1.128.505-1.128 1.128v3.744c0 .625.504 1.128 1.128 1.128h19.344c.624 0 1.128-.504 1.128-1.128V3c0-.624-.505-1.128-1.105-1.128zm-15.6 3.36a.292.292 0 01-.288.288h-.6a.292.292 0 01-.287-.288v-.6c0-.168.144-.312.287-.312h.6c.168 0 .288.144.288.312v.6zm2.377 0a.292.292 0 01-.288.288h-.6a.292.292 0 01-.288-.288v-.6c0-.168.145-.312.288-.312h.6c.168 0 .288.144.288.312v.6zm10.823 0a.292.292 0 01-.287.288h-4.248a.292.292 0 01-.288-.288v-.6c0-.168.144-.312.288-.312h4.224c.168 0 .288.144.288.312v.6h.023z" />
|
||||
</g>
|
||||
</svg>
|
||||
</figure>
|
||||
<span>Self-hosting capability</span>
|
||||
</li>
|
||||
<li>
|
||||
<figure>
|
||||
<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g opacity=".5" clipPath="url(#clip0)">
|
||||
<div className="grid platform-columns">
|
||||
<div className="">
|
||||
<figure className="my-0">
|
||||
<img
|
||||
src={graphicAnalytics}
|
||||
alt="Foobar"
|
||||
width="296"
|
||||
height="296"
|
||||
className="mx-auto my-0"
|
||||
/>
|
||||
</figure>
|
||||
<div className="mb-8 lg:mb-0">
|
||||
<h4 className="font-osiris font-normal lowercase">Analytics</h4>
|
||||
<ul className="list-none px-4">
|
||||
<li>
|
||||
<figure>
|
||||
<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M24 15.653a2.61 2.61 0 01-2.61 2.61 2.582 2.582 0 01-2.075-1.044H17.74v6.784H0V17.22h2.62a2.582 2.582 0 002.075 1.044 2.61 2.61 0 10-2.075-4.175H0V6.263h6.785V4.688A2.582 2.582 0 015.74 2.613a2.61 2.61 0 114.175 2.075v1.575h7.825v7.825h1.575A2.606 2.606 0 0124 15.653z"
|
||||
d="M18 4.8v2.4h1.92l-6.72 6.72-4.8-4.8-8.4 8.4 1.68 1.68 6.72-6.72 4.8 4.8 8.4-8.4v1.92H24v-6h-6z"
|
||||
fill="#fff"
|
||||
opacity=".5"
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0">
|
||||
<path fill="#fff" d="M0 0h24v24H0z" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
</figure>
|
||||
<span>Plugins library</span>
|
||||
</li>
|
||||
<li>
|
||||
<figure>
|
||||
<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g opacity=".5" clipPath="url(#clip0)">
|
||||
</svg>
|
||||
</figure>
|
||||
<span>Trends</span>
|
||||
</li>
|
||||
<li>
|
||||
<figure>
|
||||
<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M19.5 16.922V7.5C19.5 5.25 17.25 3 15 3h-1.5V0L9 4.5 13.5 9V6H15c.75 0 1.5.75 1.5 1.5v9.422A2.985 2.985 0 0015 19.5c0 1.664 1.336 3 3 3s3-1.336 3-3c0-1.102-.61-2.063-1.5-2.578zM18 21c-.82 0-1.5-.68-1.5-1.5S17.18 18 18 18s1.5.68 1.5 1.5S18.82 21 18 21zM6 1.5a2.99 2.99 0 00-3 3c0 1.102.61 2.063 1.5 2.578v9.82A2.985 2.985 0 003 19.477c0 1.663 1.336 3 3 3s3-1.337 3-3c0-1.102-.61-2.063-1.5-2.579v-9.82A2.985 2.985 0 009 4.5c0-1.664-1.336-3-3-3zM6 21c-.82 0-1.5-.68-1.5-1.5S5.18 18 6 18s1.5.68 1.5 1.5S6.82 21 6 21zM6 6c-.82 0-1.5-.68-1.5-1.5S5.18 3 6 3s1.5.68 1.5 1.5S6.82 6 6 6z"
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M4 5.833a.5.5 0 01.5-.5h15a.5.5 0 01.5.5V7.5a.5.5 0 01-.5.5h-15a.5.5 0 01-.5-.5V5.833zm2.667 5.334a.5.5 0 01.5-.5h9.666a.5.5 0 01.5.5v1.666a.5.5 0 01-.5.5H7.167a.5.5 0 01-.5-.5v-1.666zM9.833 16a.5.5 0 00-.5.5v1.667a.5.5 0 00.5.5h4.334a.5.5 0 00.5-.5V16.5a.5.5 0 00-.5-.5H9.833z"
|
||||
fill="#fff"
|
||||
opacity=".5"
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0">
|
||||
<path fill="#fff" d="M0 0h24v24H0z" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
</figure>
|
||||
<span>Open source</span>
|
||||
</li>
|
||||
<li>
|
||||
<figure>
|
||||
<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g opacity=".5" fill="#fff">
|
||||
<path d="M22.488 14.568l-5.304 2.352a.478.478 0 00-.265.264l-2.352 5.305c-.24.528-1.056.36-1.272-.265L8.735 9.48c-.191-.504.216-.936.745-.744l12.745 4.56c.623.24.791 1.056.263 1.272zM6.768 7.512L3.505 4.248c-.144-.168-.097-.456.096-.648.192-.192.48-.24.647-.096L7.513 6.77c.144.144.12.432-.096.648-.216.191-.48.239-.648.095zM7.535 12.048l-3.263 3.264c-.144.145-.432.12-.648-.095-.216-.216-.24-.48-.096-.648l3.265-3.265c.144-.144.432-.12.648.096.214.216.239.48.094.648zM6.216 9.936H1.585c-.216 0-.385-.24-.385-.505 0-.264.168-.504.385-.504h4.607c.216 0 .385.24.385.504-.001.265-.169.505-.361.505zM8.856 6.192V1.585c0-.216.24-.385.505-.385.264 0 .504.168.504.385v4.607c0 .216-.24.385-.504.385-.265-.001-.505-.169-.505-.385zM11.281 6.745l3.265-3.265c.144-.144.432-.12.648.096.192.192.24.48.095.648l-3.288 3.264c-.144.144-.432.12-.647-.096-.193-.216-.24-.48-.073-.647z" />
|
||||
</g>
|
||||
</svg>
|
||||
</figure>
|
||||
<span>Event autocapture</span>
|
||||
</li>
|
||||
<li>
|
||||
<figure>
|
||||
<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g opacity=".5" fill="#fff">
|
||||
<path d="M7.536 11.496V16.2a.8.8 0 00.792.792h7.368a.8.8 0 00.792-.792v-4.704c0-.313-.192-.576-.455-.72a7.158 7.158 0 00-.865-.336V8.736a3.114 3.114 0 00-3.12-3.12 3.114 3.114 0 00-3.12 3.12v1.704c-.312.096-.6.216-.864.336a.763.763 0 00-.528.72zm3.145-2.76c0-.745.6-1.32 1.32-1.32.744 0 1.32.6 1.32 1.32v1.272a9.905 9.905 0 00-2.665 0V8.736h.025zm-.793 4.296a.71.71 0 01.985 0l.575.576 1.68-1.68a.71.71 0 01.985 0 .71.71 0 010 .984l-2.16 2.16a.69.69 0 01-.505.216.736.736 0 01-.504-.216l-1.08-1.08c-.239-.24-.239-.672.024-.96zM10.896 2.592c.072.072.12.192.095.288l-.168.672a.283.283 0 00.433.312l.575-.36a.358.358 0 01.313 0l.575.36c.216.145.505-.072.432-.312l-.143-.672a.275.275 0 01.096-.288l.528-.432c.192-.168.096-.504-.168-.504l-.672-.048c-.12 0-.215-.072-.24-.168l-.264-.624c-.096-.24-.432-.24-.552 0l-.265.624c-.047.096-.144.168-.24.168l-.672.048a.286.286 0 00-.168.504l.505.432zM5.664 4.295l.673.12c.12.025.192.096.215.216l.192.648c.073.24.408.288.528.048l.336-.6c.048-.096.144-.145.264-.145l.672.025c.265 0 .408-.313.216-.505L8.328 3.6c-.072-.072-.096-.192-.072-.288l.215-.648c.096-.24-.168-.48-.408-.36l-.624.288c-.096.048-.216.024-.312-.024l-.503-.408a.295.295 0 00-.48.264l.096.672c.024.12-.024.216-.12.288l-.552.385c-.216.143-.144.479.096.526zM2.568 7.176a.295.295 0 01.024.312l-.288.624c-.12.24.12.48.36.408l.648-.216c.096-.048.216 0 .288.072l.504.456c.193.168.505.048.505-.216l-.025-.672c0-.12.048-.215.145-.264l.6-.336c.24-.12.192-.455-.048-.528l-.648-.192a.325.325 0 01-.215-.215l-.12-.673c-.048-.264-.385-.335-.528-.12l-.385.553c-.072.095-.167.144-.287.12l-.673-.096a.295.295 0 00-.264.48l.407.503zM2.592 13.104c.073-.072.193-.12.288-.095l.672.168a.283.283 0 00.313-.433l-.36-.575a.358.358 0 010-.312l.36-.576c.144-.216-.073-.504-.313-.432l-.672.168a.275.275 0 01-.288-.096l-.432-.553c-.168-.192-.504-.096-.504.168l-.048.672c0 .12-.072.216-.168.24l-.624.264c-.24.096-.24.432 0 .552l.624.265c.096.048.168.144.168.24l.048.672c.024.264.335.36.504.168l.432-.505zM5.328 16.704l-.6-.335c-.096-.048-.144-.145-.144-.265l.024-.672c0-.264-.312-.408-.504-.215l-.504.455a.317.317 0 01-.288.072l-.648-.215c-.24-.096-.48.168-.36.408l.288.624c.048.096.025.216-.024.312l-.408.503c-.168.215.024.504.264.48l.673-.096c.12-.024.215.024.287.12l.385.552c.144.216.48.145.528-.12l.12-.672a.254.254 0 01.215-.216l.648-.192c.24-.072.288-.408.048-.528zM8.567 19.416l-.672.024c-.12 0-.215-.048-.264-.145l-.336-.6c-.12-.24-.455-.192-.528.048l-.192.648a.325.325 0 01-.215.216l-.673.12c-.264.047-.335.384-.12.527l.553.385c.095.072.144.168.12.288l-.096.672a.295.295 0 00.48.264l.552-.407a.295.295 0 01.312-.025l.625.288c.24.12.48-.12.408-.36l-.216-.648c-.048-.095 0-.215.072-.288l.456-.504c.142-.215-.001-.527-.266-.503zM13.105 21.408c-.072-.072-.12-.192-.096-.288l.168-.672a.283.283 0 00-.432-.312l-.575.36a.358.358 0 01-.313 0l-.575-.36c-.216-.145-.505.072-.432.312l.167.672a.275.275 0 01-.095.288l-.553.432c-.193.168-.096.504.167.504l.673.048c.12 0 .215.072.24.168l.264.624c.096.24.432.24.552 0l.264-.624c.048-.096.145-.168.24-.168l.673-.048a.286.286 0 00.168-.504l-.505-.432zM18.335 19.704l-.672-.12a.283.283 0 01-.215-.215l-.216-.649c-.072-.24-.408-.288-.528-.048l-.335.6c-.048.096-.145.145-.265.145l-.672-.025c-.264 0-.408.313-.216.505l.456.504c.072.072.096.192.072.288l-.216.648c-.095.24.168.48.408.36l.625-.288c.095-.048.215-.024.312.024l.552.408c.216.168.505 0 .48-.264l-.145-.673c-.025-.12.024-.215.12-.287l.552-.385c.216-.144.143-.48-.097-.527zM21.433 16.824a.295.295 0 01-.025-.312l.288-.624c.12-.24-.12-.48-.36-.408l-.648.216c-.095.047-.215 0-.288-.072l-.504-.456c-.192-.168-.505-.048-.505.216l.025.672c0 .12-.048.215-.145.264l-.6.336c-.24.12-.192.455.048.527l.648.193c.096.024.192.12.216.215l.12.672c.048.265.384.336.528.12l.384-.552c.072-.095.168-.144.288-.12l.672.096a.295.295 0 00.264-.48l-.406-.503zM23.208 11.736l-.624-.265c-.096-.048-.168-.144-.168-.24l-.048-.672a.287.287 0 00-.504-.168l-.432.528c-.073.072-.193.12-.288.096l-.672-.168a.283.283 0 00-.313.432l.36.576a.358.358 0 010 .312l-.36.575c-.144.216.073.505.313.433l.672-.168a.275.275 0 01.288.095l.432.528c.168.192.504.096.504-.168l.048-.672c0-.12.072-.215.168-.24l.624-.264c.265-.118.265-.454 0-.55zM18.672 7.295l.6.336c.095.048.144.144.144.264l-.024.673c0 .264.312.407.504.215l.504-.455c.073-.073.193-.096.288-.073l.648.216c.24.096.48-.168.36-.408l-.288-.624c-.048-.096-.024-.216.024-.312l.408-.553c.168-.215-.024-.504-.264-.48l-.672.146c-.12.024-.216-.025-.288-.12l-.384-.552c-.145-.216-.48-.145-.528.12l-.12.672a.254.254 0 01-.216.215l-.649.193c-.24.072-.288.407-.047.527zM15.432 4.584l.672-.024c.12 0 .216.048.264.144l.336.6c.12.24.456.193.528-.047l.192-.648a.325.325 0 01.216-.216l.672-.12c.264-.048.335-.384.12-.528l-.552-.384c-.096-.072-.145-.168-.12-.288l.095-.672a.295.295 0 00-.48-.264l-.552.407a.295.295 0 01-.312.025l-.624-.288c-.24-.12-.48.12-.408.36l.215.648c.048.095 0 .215-.072.288l-.456.504c-.142.215.001.527.266.503z" />
|
||||
</g>
|
||||
</svg>
|
||||
</figure>
|
||||
<span>Compliance-friendly</span>
|
||||
</li>
|
||||
<li>
|
||||
<figure>
|
||||
<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g opacity=".5" fill="#fff">
|
||||
<path d="M18.25 7.142L14.437 3.33 12.92 1.811c-.245-.245-.485-.504-.74-.74-.005-.002-.008-.008-.011-.012a.237.237 0 00-.33 0l-.605.605c-.486.483-.968.968-1.451 1.451L6.507 6.39c-.246.246-.504.486-.74.74l-.012.015c-.142.142-.037.403.167.403l3.594-.001v5.869c0 .126.099.225.227.225h4.517a.224.224 0 00.227-.225V7.547h3.61a.2.2 0 00.194-.14.215.215 0 00-.042-.265zM21.727 17.467a3.602 3.602 0 00-2.934-1.554l-.823-.002H6.232l-.989.002c-.998 0-1.964.405-2.644 1.142-.88.956-1.183 2.358-.74 3.586.436 1.204 1.517 2.133 2.792 2.323.356.053.712.047 1.07.047H18.8l.014-.002a3.594 3.594 0 003.115-1.883 3.552 3.552 0 00-.2-3.659zm-6.694 2.277c-.001.01-.009.023-.009.037 0 .014-.01.028-.014.042-.01.029-.019.057-.03.085-.005.01-.002.02-.008.03l.005.002c-.023.002-.007.004-.01.007 0 .002-.004.005-.007.01-.002.004-.007.009-.01.016a.505.505 0 01-.037.068l-.014.023c-.004.008-.009.014-.014.02l-.028.043c-.005.005-.007.011-.011.017-.008.01-.011.017-.019.026-.005.008-.011.014-.017.02a.21.21 0 01-.017.024c-.291.353-.807.481-1.245.34-.087-.046-.17-.07-.244-.117l-.03-.02c-.024-.017-.047-.047-.07-.047-.005-.008-.012-.011-.017-.017-.017-.017-.033-.03-.047-.045-.002 0-.002-.002-.005-.005a1.175 1.175 0 01-.338-.617l-.001-.018-.008-.043-.007-.044c-.002-.012-.002-.024-.002-.036l-.002-.033-.002-.023V19.436c.023-.525.396-1.005.926-1.101a1.14 1.14 0 01.414-.002l.029.004a.91.91 0 01.084.02c.01.001.019.004.028.007a.363.363 0 01.054.018c.01.002.018.008.026.01.01.002.019.007.026.01l.027.01a.864.864 0 01.076.038c.01.005.017.01.027.014.009.005.016.01.026.014.017.01.033.019.049.03l.02.014.008.005c.007.005.011.01.018.014 0 0 .002 0 .002.002.014.011.028.02.043.033.009.007.016.014.026.02.007.008.014.011.019.019.014.011.028.026.042.04l.023.023c.008.007.014.017.02.023.008.008.015.017.021.026.008.008.012.014.02.024.001.002.001.005.004.007l.019.024c.007.01.014.018.018.026.012.019.027.038.038.056.005.01.01.017.017.026.004.01.01.017.014.027l.014.026a.33.33 0 00.014.026l.014.03c0 .002.002.002.002.005.01.023.019.047.028.073h-.004c.002.008.005.011.008.019l.007.019.002.009.005.019v.01a.042.042 0 01.01.01c.001.002.001.005.004.008.005.01.005.019.005.028v.019l.001.01.002.008.008.029c.026.151.02.31-.014.46 0 .003 0 .006-.002.008v.002c-.007.004-.007.007-.01.009zm4.1.466a1.157 1.157 0 01-1.249.343 1.168 1.168 0 01-.773-1.06V19.44c.023-.525.396-1.005.926-1.102.472-.084.952.117 1.205.53.257.418.204.965-.109 1.343z" />
|
||||
</g>
|
||||
</svg>
|
||||
</figure>
|
||||
<span>Export to data lakes</span>
|
||||
</li>
|
||||
</ul>
|
||||
</svg>
|
||||
</figure>
|
||||
<span>Funnels</span>
|
||||
</li>
|
||||
<li>
|
||||
<figure>
|
||||
<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g opacity=".5" fill="#fff">
|
||||
<path d="M3.626 9.19H1.892a.693.693 0 00-.693.693v2.502c0 .383.31.693.692.693h.168v3.649c0 .295.239.534.534.534h.812c.295 0 .535-.239.535-.534v-3.175a1.8 1.8 0 01-.314-1.012V9.19zM3 6.739c-.595 0-1.078.483-1.078 1.079 0 .194.055.374.145.531.186.326.533.548.934.548.253 0 .483-.091.666-.237.066-.308.21-.585.41-.813l.002-.03c0-.595-.483-1.078-1.078-1.078zM22.106 9.19h-1.734v3.35c0 .375-.117.723-.313 1.012v3.175c0 .295.239.534.534.534h.812a.534.534 0 00.534-.534v-3.649h.167c.383 0 .693-.31.693-.693V9.883a.693.693 0 00-.693-.693zM20.999 8.897c.402 0 .748-.222.934-.548.09-.157.145-.337.145-.531a1.079 1.079 0 10-2.158 0c0 .01.003.019.003.028.2.229.344.506.41.814.183.146.413.237.666.237zM7.916 8.19c0-.041.004-.082.007-.124H5.438a.97.97 0 00-.97.97v3.504c0 .535.435.97.97.97h.235v5.109c0 .412.335.747.748.747h1.136a.748.748 0 00.748-.747l.001-4.714a2.073 2.073 0 01-.39-1.21V8.19zM6.99 4.634a1.51 1.51 0 10-.001 3.022 1.51 1.51 0 000-3.022zM18.56 8.067h-2.484c.002.042.005.082.005.124v4.505c0 .452-.145.869-.39 1.211v4.713c0 .412.335.747.748.747h1.136a.748.748 0 00.748-.747l.002-5.11h.235a.97.97 0 00.97-.97V9.037a.969.969 0 00-.97-.97zM13.994 6.943h-3.99c-.688 0-1.247.558-1.247 1.247v4.505c0 .688.558 1.247 1.246 1.247h.303v6.568c0 .53.43.962.96.962h1.462c.532 0 .962-.43.962-.962v-6.568h.304c.688 0 1.247-.559 1.247-1.247V8.19c0-.689-.56-1.247-1.247-1.247zM10.944 6.101a1.933 1.933 0 002.11 0 1.942 1.942 0 10-2.11 0zM17.008 7.655c.411 0 .783-.164 1.055-.43a1.51 1.51 0 10-1.055.43z" />
|
||||
</g>
|
||||
</svg>
|
||||
</figure>
|
||||
<span>Cohorts</span>
|
||||
</li>
|
||||
<li>
|
||||
<figure>
|
||||
<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g opacity=".5" fill="#fff">
|
||||
<path d="M15.913 17.976A6.986 6.986 0 0112 19.15c-3.625 0-6.673-2.735-7.056-6.168h1.176c.384 0 .695-.192.887-.48a.912.912 0 000-.984l-2.255-3.72a1.02 1.02 0 00-.888-.48 1.05 1.05 0 00-.888.48c-.792 1.272-1.968 3.335-2.16 3.625-.095.192-.192.384-.192.575 0 .576.384.984.984.984l1.272.001c.504 4.608 4.415 8.136 9.12 8.136 1.752 0 3.527-.48 4.992-1.465.48-.287.576-.887.288-1.367a1.04 1.04 0 00-1.368-.313zM22.393 11.015H21.12C20.616 6.408 16.705 2.88 12 2.88c-1.753 0-3.528.48-4.993 1.464-.48.288-.575.888-.287 1.368.287.48.887.576 1.367.288a6.986 6.986 0 013.913-1.176c3.624 0 6.672 2.736 7.055 6.168h-1.175a1.05 1.05 0 00-.888.48.912.912 0 000 .985l2.255 3.72c.192.287.48.48.888.48.384 0 .696-.193.888-.48.792-1.273 1.968-3.336 2.16-3.625.096-.192.192-.384.192-.576 0-.552-.408-.96-.983-.96z" />
|
||||
</g>
|
||||
</svg>
|
||||
</figure>
|
||||
<span>Retention</span>
|
||||
</li>
|
||||
<li>
|
||||
<figure>
|
||||
<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g opacity=".5" fill="#fff">
|
||||
<path d="M19.584 10.225c.912-1.248 2.88-4.2 2.88-6.288A3.328 3.328 0 0019.129.6a3.328 3.328 0 00-3.336 3.336c0 2.088 1.968 5.015 2.88 6.288.215.287.671.287.911 0zM17.52 3.912a1.608 1.608 0 111.607 1.608c-.887.024-1.607-.696-1.607-1.608zM19.128 11.64h-6.072a2.838 2.838 0 00-2.833 2.832 2.838 2.838 0 002.832 2.833h1.248a1.367 1.367 0 110 2.735H7.728a.748.748 0 00-.745.745c0 .407.336.744.745.744h6.575a2.838 2.838 0 002.832-2.832 2.838 2.838 0 00-2.832-2.833h-1.248a1.367 1.367 0 110-2.735h6.073a.748.748 0 00.744-.745.748.748 0 00-.744-.744zM6.575 18.384a.753.753 0 00-1.055 0l-1.368 1.368-1.368-1.368a.753.753 0 00-1.055 0 .753.753 0 000 1.056l1.367 1.368-1.367 1.368a.753.753 0 000 1.055.742.742 0 00.527.216.745.745 0 00.528-.216l1.368-1.368 1.368 1.368a.742.742 0 00.528.216.745.745 0 00.527-.216.753.753 0 000-1.055l-1.367-1.368 1.367-1.368c.29-.312.29-.768 0-1.056z" />
|
||||
</g>
|
||||
</svg>
|
||||
</figure>
|
||||
<span>Paths</span>
|
||||
</li>
|
||||
<li>
|
||||
<figure>
|
||||
<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M12.627 3.6A8.516 8.516 0 004.94 8.423l-.255-.45a.958.958 0 00-.87-.503.96.96 0 00-.81 1.44l1.32 2.355a.96.96 0 001.275.39l2.347-1.2a.965.965 0 00.456-1.309.963.963 0 00-1.326-.401l-.21.105a6.6 6.6 0 015.76-3.33c3.653 0 6.578 2.897 6.578 6.48 0 3.554-2.886 6.433-6.495 6.48a.96.96 0 10.03 1.92c4.625-.06 8.385-3.802 8.385-8.4 0-4.635-3.821-8.4-8.498-8.4zm-.157 3.585a.96.96 0 00-.945.975V12c-.001.292.132.567.36.75l2.4 1.92a.962.962 0 001.2-1.5l-2.04-1.635V8.16a.957.957 0 00-.975-.975z"
|
||||
fill="#fff"
|
||||
opacity=".5"
|
||||
/>
|
||||
</svg>
|
||||
</figure>
|
||||
<span>Session browsing</span>
|
||||
</li>
|
||||
<li>
|
||||
<figure>
|
||||
<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g opacity=".5" fill="#fff">
|
||||
<path d="M6.789 5.61C5.41 5.266 5.41 4.885 5.41 4.722c0-.59.79-.678 1.261-.678.825 0 1.682.278 2.038.407.095.035.2.019.257-.072l.737-1.174c.058-.092.012-.17-.083-.205-.379-.144-1.339-.473-2.411-.563l.002-1.04c0-.13-.067-.196-.198-.196H5.987c-.131 0-.198.067-.198.197V2.48c-1.614.271-2.36 1.286-2.36 2.24 0 1.163.936 1.988 2.782 2.45 1.378.347 1.378.727 1.378.89 0 .59-.79.678-1.261.678-.826 0-1.684-.278-2.04-.407-.095-.035-.2-.02-.256.072l-.735 1.174c-.058.092-.012.17.083.207.379.144 1.339.473 2.411.563v1.037c0 .131.067.197.198.197h1.027c.13 0 .197-.067.197-.197v-1.084c1.615-.272 2.36-1.286 2.36-2.24-.002-1.163-.937-1.987-2.784-2.45zM6.592 16.309H2.265c-.389 0-.541.152-.541.54v5.409c0 .389.152.542.54.542h4.327c.388 0 .541-.153.541-.541V16.85c0-.389-.152-.541-.54-.541zM14.164 11.982H9.837c-.388 0-.541.153-.541.541v9.736c0 .388.153.54.54.54h4.328c.388 0 .541-.152.541-.54v-9.736c0-.388-.153-.54-.54-.54zM21.736 6.573H17.41c-.388 0-.54.152-.54.54V22.26c0 .388.152.54.54.54h4.327c.388 0 .54-.152.54-.54l.002-15.145c0-.389-.152-.541-.541-.541z" />
|
||||
</g>
|
||||
</svg>
|
||||
</figure>
|
||||
<span>Revenue tracking</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div className="insights-column">
|
||||
<figure className="my-0">
|
||||
<img src={graphicInsights} alt="Foobar" width="296" height="296" className="mx-auto my-0" />
|
||||
</figure>
|
||||
<div className="mb-8 lg:mb-0">
|
||||
<h4 className="font-osiris font-normal lowercase">Insights</h4>
|
||||
<ul className="list-none px-4">
|
||||
<li>
|
||||
<figure>
|
||||
<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M17.087 21.168a.569.569 0 01-.575.575h-9a.569.569 0 01-.576-.575c0-.336.265-.576.576-.576H7.44c1.032-.12 1.607-.552 1.895-.96h5.376c.287.408.864.84 1.895.96h-.095c.313 0 .576.24.576.576zm5.448-6.36v2.52a1.348 1.348 0 01-1.344 1.295H2.806c-.72 0-1.32-.575-1.344-1.295V3.766c0-.84.696-1.536 1.536-1.536h18.024c.84 0 1.536.696 1.536 1.536l-.023 11.042zm-9.311 2.136a.328.328 0 00-.336-.335h-1.775a.328.328 0 00-.336.335v.24c0 .192.144.336.336.336h1.775a.328.328 0 00.336-.336v-.24zm8.063-1.849V3.791a.267.267 0 00-.264-.264H2.999a.267.267 0 00-.265.264v11.304c0 .145.12.265.265.265h18.024c.144 0 .264-.12.264-.265zm-4.632-5.663A4.66 4.66 0 0112 14.087a4.66 4.66 0 01-4.656-4.655A4.66 4.66 0 0112 4.776a4.66 4.66 0 014.655 4.656zm-2.111-.24l-3.625-2.088c-.192-.096-.407.024-.407.24v4.176c0 .215.24.335.407.24l3.625-2.088c.191-.12.191-.385 0-.48z"
|
||||
fill="#fff"
|
||||
opacity=".5"
|
||||
/>
|
||||
</svg>
|
||||
</figure>
|
||||
<span>Session recordings</span>
|
||||
</li>
|
||||
<li>
|
||||
<figure>
|
||||
<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M4.08 1.2a.48.48 0 00-.48.48v20.64a.48.48 0 10.96 0V1.68a.48.48 0 00-.48-.48zm.96 1.44v9.12h9.6V2.64h-9.6zm10.08 2.4v7.2H10.8v2.4h9.6v-9.6h-5.28z"
|
||||
fill="#fff"
|
||||
opacity=".5"
|
||||
/>
|
||||
</svg>
|
||||
</figure>
|
||||
<span>Feature flags</span>
|
||||
</li>
|
||||
<li>
|
||||
<figure>
|
||||
<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M2.16 17.76c0 .792.648 1.44 1.44 1.44h6.72v-6.072c0-.192.096-.36.265-.432.168-.073.36-.073.504.047l6 4.513a.443.443 0 01.192.432.502.502 0 01-.264.384l-1.512.745.192.384h4.704c.792 0 1.44-.649 1.44-1.44V7.2H2.16v10.56zM13.848 12l.864-.432a.48.48 0 01.648.216.48.48 0 01-.215.647l-.865.433a.692.692 0 01-.215.047.506.506 0 01-.432-.264c-.12-.24 0-.527.215-.647zm-2.112-1.344l.312-.913c.072-.264.36-.384.6-.312.24.072.385.36.312.6l-.312.912a.516.516 0 01-.455.336c-.048 0-.096 0-.145-.024-.24-.07-.383-.36-.312-.6zm-2.664-.96a.48.48 0 01.648.215l.432.865a.48.48 0 01-.215.648.693.693 0 01-.216.047.506.506 0 01-.432-.264l-.409-.863c-.12-.24-.048-.528.192-.648zm-.36 5.424a.48.48 0 01-.215.648l-.865.432a.693.693 0 01-.215.048.506.506 0 01-.432-.264.48.48 0 01.215-.648l.865-.432a.482.482 0 01.647.216zm-1.967-2.712c.072-.264.36-.384.6-.312l.912.312c.24.072.384.36.312.6a.516.516 0 01-.456.336c-.047 0-.095 0-.144-.025l-.912-.312a.457.457 0 01-.312-.6zM20.4 2.4H3.6c-.792 0-1.44.648-1.44 1.44v2.4h19.68v-2.4c0-.792-.648-1.44-1.44-1.44zM4.08 4.8a.48.48 0 010-.96.48.48 0 010 .96zm2.4 0a.48.48 0 010-.96.48.48 0 010 .96zm2.4 0a.48.48 0 010-.96.48.48 0 010 .96zm5.568 14.016l1.08 2.16-1.296.624-1.08-2.136a.453.453 0 00-.432-.264c-.072 0-.144.024-.216.048l-1.224.624v-5.784l4.608 3.455-1.248.625a.494.494 0 00-.192.648z"
|
||||
fill="#fff"
|
||||
opacity=".5"
|
||||
/>
|
||||
</svg>
|
||||
</figure>
|
||||
<span>Heatmaps</span>
|
||||
</li>
|
||||
<li>
|
||||
<figure>
|
||||
<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g opacity=".5" fill="#fff">
|
||||
<path d="M12 24h-1.5V0H12v24zM1.5 21V3a.75.75 0 01.75-.75h8.25a.75.75 0 01.75.75v18a.75.75 0 01-.75.75H2.25A.75.75 0 011.5 21zm3-15.75a.75.75 0 10-1.5 0 .75.75 0 001.5 0zm0 2.25a.75.75 0 10-1.5 0 .75.75 0 001.5 0zM3 19.5h6.75V18H3v1.5zm0-3h6.75V15H3v1.5zm0-3h6.75V12H3v1.5zM15 3.75v6h6v-6h-6zm7.5-1.5v9h-9v-9h9zM13.5 12.75h9v9h-9v-9z" />
|
||||
</g>
|
||||
</svg>
|
||||
</figure>
|
||||
<span>A/B testing</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div className="">
|
||||
<figure className="my-0">
|
||||
<img src={graphicPlatform} alt="Foobar" width="296" height="296" className="mx-auto my-0" />
|
||||
</figure>
|
||||
<div className="mb-8 lg:mb-0">
|
||||
<h4 className="font-osiris font-normal lowercase">Platform</h4>
|
||||
<ul className="list-none px-4">
|
||||
<li>
|
||||
<figure>
|
||||
<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M11.789 15.034a2.945 2.945 0 00.421 5.861 2.945 2.945 0 00.421-5.861v-2.122h9.685v-2.779L24 9.123V6.596l-2.105-1.263-2.106 1.263v2.527l1.685 1.01v1.937h-5.895V9.923a2.105 2.105 0 10-.842 0v2.147H9.263V9.965h1.684v-4.21h-4.21v4.21H8.42v2.105H2.526V9.965h1.685L2.105 5.333 0 9.965h1.684v2.947H11.79v2.122zm1.982 2.37l-1.982 1.982-1.14-1.14.596-.596.544.544 1.386-1.386.596.596z"
|
||||
fill="#fff"
|
||||
opacity=".5"
|
||||
/>
|
||||
</svg>
|
||||
</figure>
|
||||
<span>Event pipelines</span>
|
||||
</li>
|
||||
<li>
|
||||
<figure></figure>
|
||||
<span>SDKs</span>
|
||||
</li>
|
||||
<li>
|
||||
<figure>
|
||||
<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g opacity=".5" fill="#fff">
|
||||
<path d="M22.007 9.192H2.64c-.625 0-1.128.505-1.128 1.128v3.744c0 .625.504 1.128 1.128 1.128h19.344c.624 0 1.128-.504 1.128-1.128V10.32c0-.624-.505-1.128-1.105-1.128zm-15.6 3.36a.292.292 0 01-.288.288h-.6a.292.292 0 01-.287-.288v-.6c0-.168.144-.312.287-.312h.6c.168 0 .288.144.288.312v.6zm2.377 0a.292.292 0 01-.288.288h-.6a.292.292 0 01-.288-.288v-.6c0-.168.145-.312.288-.312h.6c.168 0 .288.144.288.312v.6zm10.823 0a.292.292 0 01-.287.288h-4.248a.292.292 0 01-.288-.288v-.6c0-.168.144-.312.288-.312h4.224c.168 0 .288.144.288.312v.6h.023zM22.007 16.512H2.64c-.625 0-1.128.505-1.128 1.128v3.744c0 .625.504 1.128 1.128 1.128h19.344c.624 0 1.128-.504 1.128-1.128V17.64c0-.624-.505-1.128-1.105-1.128zm-15.6 3.36a.292.292 0 01-.288.288h-.6a.292.292 0 01-.287-.288v-.6c0-.168.144-.312.287-.312h.6c.168 0 .288.144.288.312v.6zm2.377 0a.292.292 0 01-.288.288h-.6a.292.292 0 01-.288-.288v-.6c0-.168.145-.312.288-.312h.6c.168 0 .288.144.288.312v.6zm10.823 0a.292.292 0 01-.287.288h-4.248a.292.292 0 01-.288-.288v-.6c0-.168.144-.312.288-.312h4.224c.168 0 .288.144.288.312v.6h.023zM22.007 1.872H2.64c-.625 0-1.128.505-1.128 1.128v3.744c0 .625.504 1.128 1.128 1.128h19.344c.624 0 1.128-.504 1.128-1.128V3c0-.624-.505-1.128-1.105-1.128zm-15.6 3.36a.292.292 0 01-.288.288h-.6a.292.292 0 01-.287-.288v-.6c0-.168.144-.312.287-.312h.6c.168 0 .288.144.288.312v.6zm2.377 0a.292.292 0 01-.288.288h-.6a.292.292 0 01-.288-.288v-.6c0-.168.145-.312.288-.312h.6c.168 0 .288.144.288.312v.6zm10.823 0a.292.292 0 01-.287.288h-4.248a.292.292 0 01-.288-.288v-.6c0-.168.144-.312.288-.312h4.224c.168 0 .288.144.288.312v.6h.023z" />
|
||||
</g>
|
||||
</svg>
|
||||
</figure>
|
||||
<span>Self-hosting options</span>
|
||||
</li>
|
||||
<li>
|
||||
<figure>
|
||||
<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g opacity=".5" clipPath="url(#clip0)">
|
||||
<path
|
||||
d="M24 15.653a2.61 2.61 0 01-2.61 2.61 2.582 2.582 0 01-2.075-1.044H17.74v6.784H0V17.22h2.62a2.582 2.582 0 002.075 1.044 2.61 2.61 0 10-2.075-4.175H0V6.263h6.785V4.688A2.582 2.582 0 015.74 2.613a2.61 2.61 0 114.175 2.075v1.575h7.825v7.825h1.575A2.606 2.606 0 0124 15.653z"
|
||||
fill="#fff"
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0">
|
||||
<path fill="#fff" d="M0 0h24v24H0z" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
</figure>
|
||||
<span>Plugins library</span>
|
||||
</li>
|
||||
<li>
|
||||
<figure>
|
||||
<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g opacity=".5" clipPath="url(#clip0)">
|
||||
<path
|
||||
d="M19.5 16.922V7.5C19.5 5.25 17.25 3 15 3h-1.5V0L9 4.5 13.5 9V6H15c.75 0 1.5.75 1.5 1.5v9.422A2.985 2.985 0 0015 19.5c0 1.664 1.336 3 3 3s3-1.336 3-3c0-1.102-.61-2.063-1.5-2.578zM18 21c-.82 0-1.5-.68-1.5-1.5S17.18 18 18 18s1.5.68 1.5 1.5S18.82 21 18 21zM6 1.5a2.99 2.99 0 00-3 3c0 1.102.61 2.063 1.5 2.578v9.82A2.985 2.985 0 003 19.477c0 1.663 1.336 3 3 3s3-1.337 3-3c0-1.102-.61-2.063-1.5-2.579v-9.82A2.985 2.985 0 009 4.5c0-1.664-1.336-3-3-3zM6 21c-.82 0-1.5-.68-1.5-1.5S5.18 18 6 18s1.5.68 1.5 1.5S6.82 21 6 21zM6 6c-.82 0-1.5-.68-1.5-1.5S5.18 3 6 3s1.5.68 1.5 1.5S6.82 6 6 6z"
|
||||
fill="#fff"
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0">
|
||||
<path fill="#fff" d="M0 0h24v24H0z" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
</figure>
|
||||
<span>Open source</span>
|
||||
</li>
|
||||
<li>
|
||||
<figure>
|
||||
<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g opacity=".5" fill="#fff">
|
||||
<path d="M22.488 14.568l-5.304 2.352a.478.478 0 00-.265.264l-2.352 5.305c-.24.528-1.056.36-1.272-.265L8.735 9.48c-.191-.504.216-.936.745-.744l12.745 4.56c.623.24.791 1.056.263 1.272zM6.768 7.512L3.505 4.248c-.144-.168-.097-.456.096-.648.192-.192.48-.24.647-.096L7.513 6.77c.144.144.12.432-.096.648-.216.191-.48.239-.648.095zM7.535 12.048l-3.263 3.264c-.144.145-.432.12-.648-.095-.216-.216-.24-.48-.096-.648l3.265-3.265c.144-.144.432-.12.648.096.214.216.239.48.094.648zM6.216 9.936H1.585c-.216 0-.385-.24-.385-.505 0-.264.168-.504.385-.504h4.607c.216 0 .385.24.385.504-.001.265-.169.505-.361.505zM8.856 6.192V1.585c0-.216.24-.385.505-.385.264 0 .504.168.504.385v4.607c0 .216-.24.385-.504.385-.265-.001-.505-.169-.505-.385zM11.281 6.745l3.265-3.265c.144-.144.432-.12.648.096.192.192.24.48.095.648l-3.288 3.264c-.144.144-.432.12-.647-.096-.193-.216-.24-.48-.073-.647z" />
|
||||
</g>
|
||||
</svg>
|
||||
</figure>
|
||||
<span>Event autocapture</span>
|
||||
</li>
|
||||
<li>
|
||||
<figure>
|
||||
<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g opacity=".5" fill="#fff">
|
||||
<path d="M7.536 11.496V16.2a.8.8 0 00.792.792h7.368a.8.8 0 00.792-.792v-4.704c0-.313-.192-.576-.455-.72a7.158 7.158 0 00-.865-.336V8.736a3.114 3.114 0 00-3.12-3.12 3.114 3.114 0 00-3.12 3.12v1.704c-.312.096-.6.216-.864.336a.763.763 0 00-.528.72zm3.145-2.76c0-.745.6-1.32 1.32-1.32.744 0 1.32.6 1.32 1.32v1.272a9.905 9.905 0 00-2.665 0V8.736h.025zm-.793 4.296a.71.71 0 01.985 0l.575.576 1.68-1.68a.71.71 0 01.985 0 .71.71 0 010 .984l-2.16 2.16a.69.69 0 01-.505.216.736.736 0 01-.504-.216l-1.08-1.08c-.239-.24-.239-.672.024-.96zM10.896 2.592c.072.072.12.192.095.288l-.168.672a.283.283 0 00.433.312l.575-.36a.358.358 0 01.313 0l.575.36c.216.145.505-.072.432-.312l-.143-.672a.275.275 0 01.096-.288l.528-.432c.192-.168.096-.504-.168-.504l-.672-.048c-.12 0-.215-.072-.24-.168l-.264-.624c-.096-.24-.432-.24-.552 0l-.265.624c-.047.096-.144.168-.24.168l-.672.048a.286.286 0 00-.168.504l.505.432zM5.664 4.295l.673.12c.12.025.192.096.215.216l.192.648c.073.24.408.288.528.048l.336-.6c.048-.096.144-.145.264-.145l.672.025c.265 0 .408-.313.216-.505L8.328 3.6c-.072-.072-.096-.192-.072-.288l.215-.648c.096-.24-.168-.48-.408-.36l-.624.288c-.096.048-.216.024-.312-.024l-.503-.408a.295.295 0 00-.48.264l.096.672c.024.12-.024.216-.12.288l-.552.385c-.216.143-.144.479.096.526zM2.568 7.176a.295.295 0 01.024.312l-.288.624c-.12.24.12.48.36.408l.648-.216c.096-.048.216 0 .288.072l.504.456c.193.168.505.048.505-.216l-.025-.672c0-.12.048-.215.145-.264l.6-.336c.24-.12.192-.455-.048-.528l-.648-.192a.325.325 0 01-.215-.215l-.12-.673c-.048-.264-.385-.335-.528-.12l-.385.553c-.072.095-.167.144-.287.12l-.673-.096a.295.295 0 00-.264.48l.407.503zM2.592 13.104c.073-.072.193-.12.288-.095l.672.168a.283.283 0 00.313-.433l-.36-.575a.358.358 0 010-.312l.36-.576c.144-.216-.073-.504-.313-.432l-.672.168a.275.275 0 01-.288-.096l-.432-.553c-.168-.192-.504-.096-.504.168l-.048.672c0 .12-.072.216-.168.24l-.624.264c-.24.096-.24.432 0 .552l.624.265c.096.048.168.144.168.24l.048.672c.024.264.335.36.504.168l.432-.505zM5.328 16.704l-.6-.335c-.096-.048-.144-.145-.144-.265l.024-.672c0-.264-.312-.408-.504-.215l-.504.455a.317.317 0 01-.288.072l-.648-.215c-.24-.096-.48.168-.36.408l.288.624c.048.096.025.216-.024.312l-.408.503c-.168.215.024.504.264.48l.673-.096c.12-.024.215.024.287.12l.385.552c.144.216.48.145.528-.12l.12-.672a.254.254 0 01.215-.216l.648-.192c.24-.072.288-.408.048-.528zM8.567 19.416l-.672.024c-.12 0-.215-.048-.264-.145l-.336-.6c-.12-.24-.455-.192-.528.048l-.192.648a.325.325 0 01-.215.216l-.673.12c-.264.047-.335.384-.12.527l.553.385c.095.072.144.168.12.288l-.096.672a.295.295 0 00.48.264l.552-.407a.295.295 0 01.312-.025l.625.288c.24.12.48-.12.408-.36l-.216-.648c-.048-.095 0-.215.072-.288l.456-.504c.142-.215-.001-.527-.266-.503zM13.105 21.408c-.072-.072-.12-.192-.096-.288l.168-.672a.283.283 0 00-.432-.312l-.575.36a.358.358 0 01-.313 0l-.575-.36c-.216-.145-.505.072-.432.312l.167.672a.275.275 0 01-.095.288l-.553.432c-.193.168-.096.504.167.504l.673.048c.12 0 .215.072.24.168l.264.624c.096.24.432.24.552 0l.264-.624c.048-.096.145-.168.24-.168l.673-.048a.286.286 0 00.168-.504l-.505-.432zM18.335 19.704l-.672-.12a.283.283 0 01-.215-.215l-.216-.649c-.072-.24-.408-.288-.528-.048l-.335.6c-.048.096-.145.145-.265.145l-.672-.025c-.264 0-.408.313-.216.505l.456.504c.072.072.096.192.072.288l-.216.648c-.095.24.168.48.408.36l.625-.288c.095-.048.215-.024.312.024l.552.408c.216.168.505 0 .48-.264l-.145-.673c-.025-.12.024-.215.12-.287l.552-.385c.216-.144.143-.48-.097-.527zM21.433 16.824a.295.295 0 01-.025-.312l.288-.624c.12-.24-.12-.48-.36-.408l-.648.216c-.095.047-.215 0-.288-.072l-.504-.456c-.192-.168-.505-.048-.505.216l.025.672c0 .12-.048.215-.145.264l-.6.336c-.24.12-.192.455.048.527l.648.193c.096.024.192.12.216.215l.12.672c.048.265.384.336.528.12l.384-.552c.072-.095.168-.144.288-.12l.672.096a.295.295 0 00.264-.48l-.406-.503zM23.208 11.736l-.624-.265c-.096-.048-.168-.144-.168-.24l-.048-.672a.287.287 0 00-.504-.168l-.432.528c-.073.072-.193.12-.288.096l-.672-.168a.283.283 0 00-.313.432l.36.576a.358.358 0 010 .312l-.36.575c-.144.216.073.505.313.433l.672-.168a.275.275 0 01.288.095l.432.528c.168.192.504.096.504-.168l.048-.672c0-.12.072-.215.168-.24l.624-.264c.265-.118.265-.454 0-.55zM18.672 7.295l.6.336c.095.048.144.144.144.264l-.024.673c0 .264.312.407.504.215l.504-.455c.073-.073.193-.096.288-.073l.648.216c.24.096.48-.168.36-.408l-.288-.624c-.048-.096-.024-.216.024-.312l.408-.553c.168-.215-.024-.504-.264-.48l-.672.146c-.12.024-.216-.025-.288-.12l-.384-.552c-.145-.216-.48-.145-.528.12l-.12.672a.254.254 0 01-.216.215l-.649.193c-.24.072-.288.407-.047.527zM15.432 4.584l.672-.024c.12 0 .216.048.264.144l.336.6c.12.24.456.193.528-.047l.192-.648a.325.325 0 01.216-.216l.672-.12c.264-.048.335-.384.12-.528l-.552-.384c-.096-.072-.145-.168-.12-.288l.095-.672a.295.295 0 00-.48-.264l-.552.407a.295.295 0 01-.312.025l-.624-.288c-.24-.12-.48.12-.408.36l.215.648c.048.095 0 .215-.072.288l-.456.504c-.142.215.001.527.266.503z" />
|
||||
</g>
|
||||
</svg>
|
||||
</figure>
|
||||
<span>Compliance-friendly</span>
|
||||
</li>
|
||||
<li>
|
||||
<figure>
|
||||
<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g opacity=".5" fill="#fff">
|
||||
<path d="M18.25 7.142L14.437 3.33 12.92 1.811c-.245-.245-.485-.504-.74-.74-.005-.002-.008-.008-.011-.012a.237.237 0 00-.33 0l-.605.605c-.486.483-.968.968-1.451 1.451L6.507 6.39c-.246.246-.504.486-.74.74l-.012.015c-.142.142-.037.403.167.403l3.594-.001v5.869c0 .126.099.225.227.225h4.517a.224.224 0 00.227-.225V7.547h3.61a.2.2 0 00.194-.14.215.215 0 00-.042-.265zM21.727 17.467a3.602 3.602 0 00-2.934-1.554l-.823-.002H6.232l-.989.002c-.998 0-1.964.405-2.644 1.142-.88.956-1.183 2.358-.74 3.586.436 1.204 1.517 2.133 2.792 2.323.356.053.712.047 1.07.047H18.8l.014-.002a3.594 3.594 0 003.115-1.883 3.552 3.552 0 00-.2-3.659zm-6.694 2.277c-.001.01-.009.023-.009.037 0 .014-.01.028-.014.042-.01.029-.019.057-.03.085-.005.01-.002.02-.008.03l.005.002c-.023.002-.007.004-.01.007 0 .002-.004.005-.007.01-.002.004-.007.009-.01.016a.505.505 0 01-.037.068l-.014.023c-.004.008-.009.014-.014.02l-.028.043c-.005.005-.007.011-.011.017-.008.01-.011.017-.019.026-.005.008-.011.014-.017.02a.21.21 0 01-.017.024c-.291.353-.807.481-1.245.34-.087-.046-.17-.07-.244-.117l-.03-.02c-.024-.017-.047-.047-.07-.047-.005-.008-.012-.011-.017-.017-.017-.017-.033-.03-.047-.045-.002 0-.002-.002-.005-.005a1.175 1.175 0 01-.338-.617l-.001-.018-.008-.043-.007-.044c-.002-.012-.002-.024-.002-.036l-.002-.033-.002-.023V19.436c.023-.525.396-1.005.926-1.101a1.14 1.14 0 01.414-.002l.029.004a.91.91 0 01.084.02c.01.001.019.004.028.007a.363.363 0 01.054.018c.01.002.018.008.026.01.01.002.019.007.026.01l.027.01a.864.864 0 01.076.038c.01.005.017.01.027.014.009.005.016.01.026.014.017.01.033.019.049.03l.02.014.008.005c.007.005.011.01.018.014 0 0 .002 0 .002.002.014.011.028.02.043.033.009.007.016.014.026.02.007.008.014.011.019.019.014.011.028.026.042.04l.023.023c.008.007.014.017.02.023.008.008.015.017.021.026.008.008.012.014.02.024.001.002.001.005.004.007l.019.024c.007.01.014.018.018.026.012.019.027.038.038.056.005.01.01.017.017.026.004.01.01.017.014.027l.014.026a.33.33 0 00.014.026l.014.03c0 .002.002.002.002.005.01.023.019.047.028.073h-.004c.002.008.005.011.008.019l.007.019.002.009.005.019v.01a.042.042 0 01.01.01c.001.002.001.005.004.008.005.01.005.019.005.028v.019l.001.01.002.008.008.029c.026.151.02.31-.014.46 0 .003 0 .006-.002.008v.002c-.007.004-.007.007-.01.009zm4.1.466a1.157 1.157 0 01-1.249.343 1.168 1.168 0 01-.773-1.06V19.44c.023-.525.396-1.005.926-1.102.472-.084.952.117 1.205.53.257.418.204.965-.109 1.343z" />
|
||||
</g>
|
||||
</svg>
|
||||
</figure>
|
||||
<span>Export to data warehouse</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -3,30 +3,66 @@ import { ProductFeatureIcons } from '../ProductFeatureIcons'
|
||||
import { SocialProof } from '../SocialProof'
|
||||
import { LandingPageCallToAction } from '../LandingPageCallToAction'
|
||||
|
||||
import heroGraphic from '../images/hero@2x.png'
|
||||
import sequenceGraphic from '../images/sequence@2x.png'
|
||||
import sequenceMobileGraphic from '../images/sequence-mobile@2x.png'
|
||||
|
||||
export const Hero = () => {
|
||||
return (
|
||||
<div className="hero py-12 md:py-24">
|
||||
<div className="w-11/12 mx-auto md:text-center relative z-10 rounded flex flex-col">
|
||||
<div className="max-w-full mx-auto hero-headline mt-4 mb-12 sm: mt-0 sm:mb-0">
|
||||
<h1 className="text-white mb-0 pb-0 leading-tight text-center">
|
||||
<div className="hero py-6 text-center">
|
||||
<div>
|
||||
<style>
|
||||
{
|
||||
'\
|
||||
body{\
|
||||
background: #220f3f;\
|
||||
}\
|
||||
.bg-purple-gradient, .header-wrapper, body.dark .header-wrapper{\
|
||||
background: none;\
|
||||
}\
|
||||
'
|
||||
}
|
||||
</style>
|
||||
</div>
|
||||
<div className="flex justify-center w-11/12 mx-auto mb-8 pt-12 flex-col relative z-10">
|
||||
<div className="max-w-full hero-headline mt-4">
|
||||
<h1 className="text-white leading-tight mb-4">
|
||||
The <span className="relative open-source">platform</span> for
|
||||
<br />
|
||||
<span className="text-orange">building better products</span>
|
||||
<span className="text-5xl">building better products</span>
|
||||
</h1>
|
||||
<p className="text-baby-blue text-base">
|
||||
Analytics with autocapture, session recordings, feature flags, heatmaps and more.
|
||||
<br />
|
||||
In a single product you can host yourself.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="max-w-4xl text-center hero-icons -mx-4 md:mx-auto">
|
||||
<ProductFeatureIcons />
|
||||
</div>
|
||||
|
||||
<p className="hero-more-features text-white text-center sm:mt-4 max-w-xl mx-auto text-xs md:mb-12">
|
||||
<span className="opacity-70">+ Heatmaps, Session Browsing, Autocapture & more</span>
|
||||
</p>
|
||||
|
||||
<LandingPageCallToAction />
|
||||
|
||||
<SocialProof />
|
||||
<div className="p-4 mt-10 md:mt-20 relative z-20">
|
||||
<div className="md:hidden">
|
||||
<img
|
||||
src={sequenceMobileGraphic}
|
||||
alt="Ingest data with Event Pipelines. Discover insights with Analytics Suite. Test & iterate with Feature Flags. Observe adoption with Session Recordings. Export to Data Lakes."
|
||||
width="339"
|
||||
height="580"
|
||||
className="mx-auto"
|
||||
/>
|
||||
</div>
|
||||
<div className="hidden md:block">
|
||||
<img
|
||||
src={sequenceGraphic}
|
||||
alt="Ingest data with Event Pipelines. Discover insights with Analytics Suite. Test & iterate with Feature Flags. Observe adoption with Session Recordings. Export to Data Lakes."
|
||||
width="1020"
|
||||
height="177"
|
||||
className="mx-auto"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<SocialProof />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -3,11 +3,11 @@ import { CallToAction } from 'components/CallToAction'
|
||||
|
||||
export const LandingPageCallToAction = () => {
|
||||
return (
|
||||
<div className="flex flex-col hero-cta">
|
||||
<CallToAction icon="rocket" href="https://app.posthog.com/signup?src=home-hero" className="mx-auto">
|
||||
<div className="ctas flex flex-col items-center justify-center sm:flex-row">
|
||||
<CallToAction icon="rocket" href="https://app.posthog.com/signup?src=home-hero">
|
||||
Get Started
|
||||
</CallToAction>
|
||||
<CallToAction icon="calendar" type="secondary" className="mt-3 mx-auto" to="/schedule-demo">
|
||||
<CallToAction icon="calendar" type="secondary" className="mt-3 sm:mt-0 sm:ml-4" to="/schedule-demo">
|
||||
Book a demo
|
||||
</CallToAction>
|
||||
</div>
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
import React from 'react'
|
||||
import { CallToAction } from '../../CallToAction'
|
||||
import { Roadmap } from '../Roadmap'
|
||||
import { CornerBrackets } from '../../CornerBrackets'
|
||||
import { ContributorAvatars } from '../../ContributorAvatars'
|
||||
|
||||
import checkImg from '../images/green-check.svg'
|
||||
@@ -20,7 +19,7 @@ const FeatureBenefit = ({ feature, benefit }: { feature: string; benefit: string
|
||||
|
||||
export const PrivateCloud = () => {
|
||||
return (
|
||||
<div className="private-cloud pt-24 text-white text-center">
|
||||
<div className="private-cloud text-white text-center">
|
||||
<div className="w-11/12 max-w-5xl mx-auto">
|
||||
<h2>Host on your own private cloud</h2>
|
||||
<p className="opacity-80 mt-1 text-center max-w-4xl mx-auto">
|
||||
@@ -74,7 +73,6 @@ export const PrivateCloud = () => {
|
||||
width="full"
|
||||
href="https://github.com/posthog"
|
||||
>
|
||||
<CornerBrackets color="purpleish" />
|
||||
Browse GitHub
|
||||
</CallToAction>
|
||||
<CallToAction
|
||||
|
||||
@@ -34,7 +34,7 @@ export const RecentBlogPosts = () => {
|
||||
<p className="mt-1 opacity-70 text-sm">This is that story and what we learned from it.</p>
|
||||
|
||||
<CallToAction
|
||||
type="secondary"
|
||||
type="button"
|
||||
className="mx-0 mt-4"
|
||||
to="/blog/story-about-pivots"
|
||||
icon="book"
|
||||
@@ -83,7 +83,7 @@ export const RecentBlogPosts = () => {
|
||||
</div>
|
||||
|
||||
<div className="flex">
|
||||
<CallToAction type="secondary" className="mt-12 mx-auto" to="/blog" icon="book">
|
||||
<CallToAction type="button" className="mt-12 mx-auto" to="/blog" icon="book">
|
||||
Visit Blog
|
||||
</CallToAction>
|
||||
</div>
|
||||
|
||||
@@ -1,7 +1,5 @@
|
||||
import React from 'react'
|
||||
|
||||
import { CornerBrackets } from '../../CornerBrackets'
|
||||
|
||||
import airbalticLogo from '../images/SocialProofLogos/airbaltic.svg'
|
||||
import landmarkLogo from '../images/SocialProofLogos/landmark.svg'
|
||||
import tinkoffLogo from '../images/SocialProofLogos/tinkoff.svg'
|
||||
@@ -12,18 +10,20 @@ import staplesLogo from '../images/SocialProofLogos/staples.svg'
|
||||
import webinyLogo from '../images/SocialProofLogos/webiny.svg'
|
||||
import grafanaLogo from '../images/SocialProofLogos/grafana.svg'
|
||||
|
||||
const Logo = ({ logo, alt }: { logo: string; alt: string }) => <img src={logo} alt={alt} className="px-2" />
|
||||
const Logo = ({ logo, alt }: { logo: string; alt: string }) => (
|
||||
<img src={logo} alt={alt} className="px-2 xl:flex-1 max-h-6 flex-shrink" />
|
||||
)
|
||||
|
||||
export const SocialProof = () => {
|
||||
return (
|
||||
<div className="mt-24 hero-proof">
|
||||
<div className="w-11/12 max-w-3xl mx-auto mb-4 flex justify-center sm:justify-between flex-row flex-wrap">
|
||||
<div className="xl:flex xl:justify-center mx-auto relative z-40 pb-12">
|
||||
<div className="flex flex-wrap md:flex-nowrap items-center gap-x-6 xl:gap-x-2 justify-center">
|
||||
<Logo logo={hasuraLogo} alt="Hasura" />
|
||||
<Logo logo={ycombinatorLogo} alt="Y Combinator" />
|
||||
<Logo logo={staplesLogo} alt="Staples" />
|
||||
<Logo logo={spacexLogo} alt="Spacex" />
|
||||
</div>
|
||||
<div className="w-11/12 max-w-3xl mx-auto flex justify-around flex-row flex-wrap">
|
||||
<div className="flex flex-wrap md:flex-nowrap items-center gap-x-6 xl:gap-x-2 justify-center">
|
||||
<Logo logo={grafanaLogo} alt="Grafana" />
|
||||
<Logo logo={webinyLogo} alt="Webiny" />
|
||||
<Logo logo={landmarkLogo} alt="Landmark Group" />
|
||||
|
||||
@@ -12,7 +12,7 @@ export const Tutorials = () => {
|
||||
<div className="w-11/12 max-w-3xl mx-auto">
|
||||
<h2 className="text-white text-center">Hop aboard</h2>
|
||||
<p className="text-white opacity-80 mt-1 text-center">
|
||||
Don’t get left behind. Join 2,700 companies using PostHog.
|
||||
Don't get left behind. Join 2,700 companies using PostHog.
|
||||
</p>
|
||||
|
||||
<LandingPageCallToAction />
|
||||
@@ -56,7 +56,7 @@ export const Tutorials = () => {
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<CallToAction type="secondary" className="mt-8 mx-auto" to="/docs/tutorials" icon="book" width="72">
|
||||
<CallToAction type="button" className="mt-8 mx-auto" to="/docs/tutorials" icon="book" width="84">
|
||||
See all tutorials
|
||||
<span className="text-xs text-white text-opacity-50 ml-1">13</span>
|
||||
</CallToAction>
|
||||
|
||||
BIN
src/components/LandingPage/images/analytics.png
Normal file
BIN
src/components/LandingPage/images/analytics.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
BIN
src/components/LandingPage/images/analytics@2x.png
Normal file
BIN
src/components/LandingPage/images/analytics@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 38 KiB |
1
src/components/LandingPage/images/circles-1.svg
Normal file
1
src/components/LandingPage/images/circles-1.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg width="689" height="689" fill="none" xmlns="http://www.w3.org/2000/svg"><g opacity=".6"><circle opacity=".3" cx="346.309" cy="344.5" r="231.475" stroke="#FFC1E4" stroke-width="1.808"/><g opacity=".3" filter="url(#filter0_f)"><circle cx="346.309" cy="342.692" r="231.879" stroke="#fff"/></g><circle opacity=".3" cx="344.498" cy="344.5" r="285.727" stroke="#FB39BA" stroke-width="1.808"/><g opacity=".2" filter="url(#filter1_f)"><circle cx="344.498" cy="342.692" r="286.131" stroke="#fff"/></g><circle opacity=".4" cx="344.5" cy="344.5" r="344" stroke="#FF7880"/></g><defs><filter id="filter0_f" x="106.696" y="103.079" width="479.226" height="479.226" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur stdDeviation="3.617" result="effect1_foregroundBlur"/></filter><filter id="filter1_f" x="54.25" y="52.444" width="580.496" height="580.496" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur stdDeviation="1.808" result="effect1_foregroundBlur"/></filter></defs></svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
1
src/components/LandingPage/images/circles-2.svg
Normal file
1
src/components/LandingPage/images/circles-2.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg width="886" height="886" fill="none" xmlns="http://www.w3.org/2000/svg"><circle opacity=".4" cx="442.722" cy="442.722" r="441.56" stroke="#81E1FF" stroke-opacity=".4" stroke-width="2.324"/></svg>
|
||||
|
After Width: | Height: | Size: 200 B |
BIN
src/components/LandingPage/images/hero.png
Normal file
BIN
src/components/LandingPage/images/hero.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
BIN
src/components/LandingPage/images/hero@2x.png
Normal file
BIN
src/components/LandingPage/images/hero@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 52 KiB |
BIN
src/components/LandingPage/images/insights.png
Normal file
BIN
src/components/LandingPage/images/insights.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
BIN
src/components/LandingPage/images/insights@2x.png
Normal file
BIN
src/components/LandingPage/images/insights@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 44 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 306 KiB |
@@ -1 +0,0 @@
|
||||
<svg width="659" height="659" fill="none" xmlns="http://www.w3.org/2000/svg"><g opacity=".75" filter="url(#a)" transform="rotate(-46.596 329.407 299.407)"><circle cx="329.407" cy="299.407" r="190.574" fill="url(#b)" fill-opacity=".8"/><circle cx="329.407" cy="299.407" r="190.574" fill="url(#c)" fill-opacity=".97"/></g><defs><radialGradient id="b" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="rotate(-40.78 567.813 -292.628) scale(190.006)"><stop offset=".246" stop-color="#200D3A"/><stop offset=".833" stop-color="#200D3A"/><stop offset="1" stop-color="#566D82" stop-opacity=".8"/></radialGradient><linearGradient id="c" x1="321.423" y1="83.972" x2="272.946" y2="473.14" gradientUnits="userSpaceOnUse"><stop offset=".26" stop-color="#210F3E"/><stop offset="1" stop-color="#4339B6" stop-opacity="0"/></linearGradient><filter id="a" x="0" y="0" width="658.814" height="658.814" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feGaussianBlur in="BackgroundImage" stdDeviation="2"/><feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur"/><feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dy="30"/><feGaussianBlur stdDeviation="30"/><feColorMatrix values="0 0 0 0 1 0 0 0 0 0.912222 0 0 0 0 0.670833 0 0 0 0.1 0"/><feBlend in2="effect1_backgroundBlur" result="effect2_dropShadow"/><feBlend in="SourceGraphic" in2="effect2_dropShadow" result="shape"/></filter></defs></svg>
|
||||
|
Before Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 MiB |
BIN
src/components/LandingPage/images/platform.png
Normal file
BIN
src/components/LandingPage/images/platform.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
BIN
src/components/LandingPage/images/platform@2x.png
Normal file
BIN
src/components/LandingPage/images/platform@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 41 KiB |
BIN
src/components/LandingPage/images/sequence-mobile.png
Normal file
BIN
src/components/LandingPage/images/sequence-mobile.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
BIN
src/components/LandingPage/images/sequence-mobile@2x.png
Normal file
BIN
src/components/LandingPage/images/sequence-mobile@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 48 KiB |
BIN
src/components/LandingPage/images/sequence.png
Normal file
BIN
src/components/LandingPage/images/sequence.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
BIN
src/components/LandingPage/images/sequence@2x.png
Normal file
BIN
src/components/LandingPage/images/sequence@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 82 KiB |
@@ -1,52 +1,90 @@
|
||||
.hero {
|
||||
background: url(../images/hero-bg.svg), linear-gradient(180deg, #220f3f 0%, #2c1e60 100%);
|
||||
background: url(../images/hero-bg.svg), linear-gradient(180deg, #220f3f 0%, #3f086d 100%);
|
||||
background-position: center center;
|
||||
background-repeat: repeat-x;
|
||||
position: relative;
|
||||
|
||||
&:before {
|
||||
background: url(../images/rocket.svg);
|
||||
bottom: 10%;
|
||||
&:after {
|
||||
background: rgba(2, 116, 123, 0.2);
|
||||
bottom: 0;
|
||||
content: '';
|
||||
display: block;
|
||||
height: 939px;
|
||||
left: -3%;
|
||||
filter: blur(242.308px);
|
||||
left: 0;
|
||||
position: absolute;
|
||||
width: 174px;
|
||||
zoom: 0.5;
|
||||
top: 0px;
|
||||
width: 100vw;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 640px) {
|
||||
bottom: -40%;
|
||||
zoom: 1;
|
||||
}
|
||||
.platform-columns {
|
||||
//grid-template-columns: repeat(3, 1fr);
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
left: 3%;
|
||||
@media (min-width: 840px) {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
position: relative;
|
||||
z-index: 11;
|
||||
|
||||
.insights-column {
|
||||
position: relative;
|
||||
|
||||
@media (min-width: 1092px) {
|
||||
&:before,
|
||||
&:after {
|
||||
content: '';
|
||||
height: 1px;
|
||||
opacity: 0.5;
|
||||
position: absolute;
|
||||
top: 148px;
|
||||
}
|
||||
|
||||
&:before {
|
||||
background: linear-gradient(90deg, #3954c2 0%, #f1764f 100%);
|
||||
left: -14%;
|
||||
right: calc(100% - 14%);
|
||||
}
|
||||
|
||||
&:after {
|
||||
background: linear-gradient(90deg, #d7684b 0%, #ff9900 100%);
|
||||
right: -14%;
|
||||
left: calc(100% - 14%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:after {
|
||||
background: url(../images/moon.png);
|
||||
@media (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) {
|
||||
background: url(../images/moon@2x.png);
|
||||
background-size: 100%;
|
||||
}
|
||||
content: '';
|
||||
height: 759px;
|
||||
position: absolute;
|
||||
right: -50%;
|
||||
top: -10%;
|
||||
width: 759px;
|
||||
zoom: 0.75;
|
||||
li {
|
||||
backdrop-filter: blur(5px);
|
||||
border: solid 1px rgba(255, 255, 255, 0.2);
|
||||
border-radius: 3px;
|
||||
color: #8fbcff;
|
||||
display: flex;
|
||||
font-family: 'Osiris';
|
||||
font-size: 1em;
|
||||
margin: 0 auto 0.75rem;
|
||||
max-width: 250px;
|
||||
padding: 0.5rem;
|
||||
text-transform: lowercase;
|
||||
|
||||
@media (min-width: 640px) {
|
||||
right: -25%;
|
||||
top: -10%;
|
||||
zoom: 1;
|
||||
-ms-transform: skewX(-20deg);
|
||||
-webkit-transform: skewX(-20deg);
|
||||
transform: skewX(-20deg);
|
||||
|
||||
> * {
|
||||
-ms-transform: skewX(20deg);
|
||||
-webkit-transform: skewX(20deg);
|
||||
transform: skewX(20deg);
|
||||
}
|
||||
@media (min-width: 1280px) {
|
||||
right: -20%;
|
||||
zoom: 1;
|
||||
|
||||
figure {
|
||||
display: none;
|
||||
|
||||
flex: 0 0 auto;
|
||||
margin: 0 0.5em 0 0;
|
||||
}
|
||||
|
||||
span {
|
||||
flex: 1;
|
||||
// padding-right: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -97,27 +135,6 @@
|
||||
transition: none;
|
||||
}
|
||||
|
||||
// cta gets pushed too low on mobile, so we set an order so we can change it
|
||||
|
||||
.hero-headline {
|
||||
order: 1;
|
||||
}
|
||||
.hero-icons {
|
||||
order: 2;
|
||||
}
|
||||
.hero-more-features {
|
||||
order: 3;
|
||||
}
|
||||
.hero-cta {
|
||||
order: 4;
|
||||
@media (max-width: 639px) {
|
||||
order: 1;
|
||||
}
|
||||
}
|
||||
.hero-proof {
|
||||
order: 5;
|
||||
}
|
||||
|
||||
.product-features {
|
||||
grid-template-columns: repeat(1, 1fr);
|
||||
|
||||
@@ -266,18 +283,41 @@
|
||||
}
|
||||
|
||||
.lp-features {
|
||||
background: linear-gradient(180deg, #2c1e60 0%, #3c3288 100%);
|
||||
background: #180834;
|
||||
//background: linear-gradient(180deg, #180834 0%, #3c3288 100%);
|
||||
position: relative;
|
||||
|
||||
li {
|
||||
display: flex;
|
||||
&:before {
|
||||
background: linear-gradient(180deg, rgba(24, 8, 52, 0), rgba(24, 8, 52, 1));
|
||||
content: '';
|
||||
height: 400px;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
top: -400px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
figure {
|
||||
flex: 0 0 auto;
|
||||
margin-right: 0.5em;
|
||||
> div {
|
||||
&:before,
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
span {
|
||||
flex: 1;
|
||||
&:before {
|
||||
background: url(../images/circles-1.svg);
|
||||
bottom: -400px;
|
||||
left: -500px;
|
||||
height: 689px;
|
||||
width: 689px;
|
||||
}
|
||||
|
||||
&:after {
|
||||
background: url(../images/circles-2.svg);
|
||||
height: 886px;
|
||||
left: 65%;
|
||||
top: 300px;
|
||||
width: 886px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -287,8 +327,13 @@
|
||||
}
|
||||
|
||||
.blockquote-section {
|
||||
background: #3c3288;
|
||||
background: linear-gradient(180deg, #180834 0%, #3c3288 100%);
|
||||
// background: #3c3288;
|
||||
// background: linear-gradient(180deg, #3c3288 0%, #3c3288 100%;)
|
||||
|
||||
div {
|
||||
background: rgba(255, 255, 255, 0.025);
|
||||
}
|
||||
}
|
||||
|
||||
.private-cloud {
|
||||
|
||||
@@ -1,44 +1,53 @@
|
||||
@import '../../vars';
|
||||
|
||||
/* Gosha Sans */
|
||||
/* Gosha Sans (titles) */
|
||||
@font-face {
|
||||
font-family: 'Gosha Sans';
|
||||
src: url('/fonts/GoshaSans-Bold.woff') format('woff');
|
||||
src: url('/fonts/GoshaSans-Bold.woff2') format('woff2');
|
||||
}
|
||||
|
||||
/* Good Sans */
|
||||
/* Osiris (buttons) */
|
||||
@font-face {
|
||||
font-family: 'Good Sans';
|
||||
src: url('/fonts/GoodSans-Medium.woff') format('woff');
|
||||
src: url('/fonts/GoodSans-Medium.woff2') format('woff2');
|
||||
font-family: 'Osiris';
|
||||
src: url('/fonts/Osiris.woff2') format('woff2');
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
/* Good Sans Bold */
|
||||
/* SK Curiosity (body) */
|
||||
@font-face {
|
||||
font-family: 'Good Sans';
|
||||
src: url('/fonts/GoodSans-Bold.woff') format('woff');
|
||||
src: url('/fonts/GoodSans-Bold.woff2') formt('woff2');
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* Inter */
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
src: url('/fonts/Inter-Regular.ttf') format('truetype');
|
||||
font-family: 'SK Curiosity';
|
||||
src: url('/fonts/skcuriosity-medium-webfont.woff') format('woff');
|
||||
src: url('/fonts/skcuriosity-medium-webfont.woff2') formt('woff2');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
/* Inter Bold */
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
src: url('/fonts/Inter-SemiBold.ttf') format('truetype');
|
||||
font-family: 'SK Curiosity';
|
||||
src: url('/fonts/skcuriosity-mediumitalic-webfont.woff') format('woff');
|
||||
src: url('/fonts/skcuriosity-mediumitalic-webfont.woff2') formt('woff2');
|
||||
font-weight: normal;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'SK Curiosity';
|
||||
src: url('/fonts/skcuriosity-heavy-webfont.woff') format('woff');
|
||||
src: url('/fonts/skcuriosity-heavy-webfont.woff2') formt('woff2');
|
||||
font-weight: bold;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'SK Curiosity';
|
||||
src: url('/fonts/skcuriosity-heavyitalic-webfont.woff') format('woff');
|
||||
src: url('/fonts/skcuriosity-heavyitalic-webfont.woff2') formt('woff2');
|
||||
font-weight: bold;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
html {
|
||||
font-family: 'Good Sans' !important;
|
||||
-ms-text-size-adjust: 100%;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
overscroll-behavior-y: none;
|
||||
@@ -226,7 +235,8 @@ html {
|
||||
}
|
||||
body {
|
||||
color: hsla(0, 0%, 0%, 0.8);
|
||||
font-family: 'Good Sans', Helvetica, Arial, sans-serif !important;
|
||||
font-family: 'SK Curiosity', '-apple-system', 'BlinkMacSystemFont', 'avenir next', 'avenir', 'segoe ui',
|
||||
'helvetica neue', 'helvetica', 'Ubuntu', 'roboto', 'noto', 'arial', 'sans-serif';
|
||||
font-kerning: normal;
|
||||
font-feature-settings: 'kern', 'liga', 'clig', 'calt';
|
||||
-moz-font-feature-settings: 'kern', 'liga', 'clig', 'calt';
|
||||
@@ -743,7 +753,6 @@ header {
|
||||
|
||||
.sidebarWrapper {
|
||||
margin: 0 10px;
|
||||
font-family: 'Inter', 'Good Sans', 'Arial' !important;
|
||||
}
|
||||
|
||||
.ant-menu,
|
||||
@@ -1269,15 +1278,6 @@ table td {
|
||||
|
||||
.post-page-wrapper .docsPagesContent,
|
||||
.rightBar {
|
||||
p,
|
||||
li,
|
||||
ul,
|
||||
a,
|
||||
td,
|
||||
th {
|
||||
font-family: 'Inter', 'Good Sans', 'Arial' !important;
|
||||
}
|
||||
|
||||
a img:hover {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
@@ -118,7 +118,7 @@ export const NewsletterForm = ({
|
||||
/>
|
||||
</div>
|
||||
<div className="clear">
|
||||
<CallToAction type="secondary" icon="check" width="full" submit={true}>
|
||||
<CallToAction type="button" icon="check" width="full" submit={true}>
|
||||
Join the List
|
||||
</CallToAction>
|
||||
</div>
|
||||
|
||||
@@ -22,7 +22,7 @@ interface PostType {
|
||||
const ReadPost = ({ to }: { to: string }) => {
|
||||
return (
|
||||
<CallToAction
|
||||
type="secondary"
|
||||
type="button"
|
||||
icon="read-dark"
|
||||
iconBg="bg-gray-500 dark:bg-gray-400"
|
||||
to={to}
|
||||
|
||||
@@ -248,7 +248,7 @@ export const PricingComparisonTable = () => {
|
||||
<img src={imgCloud} alt="" style={{ paddingRight: 0 }} />
|
||||
Cloud
|
||||
</h4>
|
||||
<ul className="p-comparison-list">
|
||||
<ul className="p-comparison-list max-w-sm text-left mx-auto">
|
||||
<li>Immediate start</li>
|
||||
<li>
|
||||
Recommended if you want to get started <b>right now</b>. Start capturing events in under 5
|
||||
@@ -275,7 +275,7 @@ export const PricingComparisonTable = () => {
|
||||
<h4 className="p-text-primary p-title-with-icon">
|
||||
<img src={imgBuilding} alt="" /> Self Hosted Scale
|
||||
</h4>
|
||||
<ul className="p-comparison-list">
|
||||
<ul className="p-comparison-list max-w-sm text-left mx-auto">
|
||||
<li>Recommended if you have large volumes of events or users ({'>10k monthly users'}).</li>
|
||||
<li>You don't want user data to leave your infrastructure (e.g. HIPAA, SOC2).</li>
|
||||
<li>You need full access to the production instance.</li>
|
||||
|
||||
@@ -44,7 +44,7 @@ export const PricingSlider = () => {
|
||||
</div>
|
||||
<br />
|
||||
<br />
|
||||
<div style={{ fontSize: '1rem', textAlign: 'right' }}>
|
||||
<div className="text-right -mt-16 text-base">
|
||||
<span className="text-muted">Price:</span> <b>${finalCost}</b>/month
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -25,7 +25,6 @@ import { ContributorAvatars } from './components/ContributorAvatars'
|
||||
import { ContributorCard } from './components/ContributorCard'
|
||||
import { ContributorSearch } from './components/ContributorSearch'
|
||||
import { ContributorsChart } from './components/ContributorsChart'
|
||||
import { CornerBrackets } from './components/CornerBrackets'
|
||||
import { DarkModeToggle } from './components/DarkModeToggle'
|
||||
import { DemoScheduler } from './components/DemoScheduler'
|
||||
import { DocsPageSurvey } from './components/DocsPageSurvey'
|
||||
@@ -92,7 +91,6 @@ export const shortcodes = {
|
||||
ContributorCard,
|
||||
ContributorSearch,
|
||||
ContributorsChart,
|
||||
CornerBrackets,
|
||||
DarkModeToggle,
|
||||
DemoScheduler,
|
||||
DocsPageSurvey,
|
||||
|
||||
@@ -13,6 +13,7 @@ import imgCloud from '../images/cloud.svg'
|
||||
import imgEnterprise1 from '../images/plan-enterprise1.svg'
|
||||
import imgOpenSource from '../images/plan-open-source.svg'
|
||||
import imgEnterprise2 from '../images/plan-enterprise2.svg'
|
||||
import { CallToAction } from 'components/CallToAction'
|
||||
import { pricingSliderLogic } from 'components/PricingSlider/pricingSliderLogic'
|
||||
import { useActions } from 'kea'
|
||||
|
||||
@@ -140,7 +141,7 @@ const PricingPage = () => {
|
||||
))}
|
||||
{state.planOptions === 'self-hosted' && (
|
||||
<div className="pricing-cloud">
|
||||
<h4>For those that want flexibility.</h4>
|
||||
<h4>For those who want flexibility.</h4>
|
||||
<div></div>
|
||||
<div>
|
||||
<Row type="flex" gutter={[24, 24]} style={{ paddingLeft: '16px' }}>
|
||||
@@ -246,15 +247,21 @@ const PricingPage = () => {
|
||||
<div>
|
||||
<PricingSlider pricingOption="vpc" />
|
||||
</div>
|
||||
<div style={{ fontSize: 16, marginTop: 16 }}>
|
||||
<div className="text-base text-center mt-8 mb-4">
|
||||
Minimum price <b>$2,000</b> / month. <b>No setup cost</b>.
|
||||
</div>
|
||||
<div style={{ fontSize: 16, marginTop: 16 }}>
|
||||
Want to get started or to discuss?{' '}
|
||||
<a href="mailto:sales@posthog.com?title=VPC%20Volumes%20Enquiry">Contact us</a>.
|
||||
<div className="text-sm text-center mb-8">
|
||||
Want to get started or have questions?{' '}
|
||||
<a
|
||||
href="mailto:sales@posthog.com?title=VPC%20Volumes%20Enquiry"
|
||||
className="font-bold"
|
||||
>
|
||||
Contact us
|
||||
</a>
|
||||
.
|
||||
</div>
|
||||
|
||||
<ul className="p-comparison-list">
|
||||
<ul className="p-comparison-list max-w-sm text-left mx-auto">
|
||||
<li>
|
||||
You want to export product data to your data lake from PostHog on the same
|
||||
infrastructure.
|
||||
@@ -284,23 +291,25 @@ const PricingPage = () => {
|
||||
<PricingSlider pricingOption="cloud" />
|
||||
</div>
|
||||
|
||||
<h5>Completely self-serve, get started without a credit card.</h5>
|
||||
<div style={{ fontSize: 16, marginTop: 16 }}>
|
||||
<a href="https://app.posthog.com/signup">
|
||||
<Button type="primary" size="large">
|
||||
Start free
|
||||
</Button>
|
||||
</a>
|
||||
<br />
|
||||
<br />
|
||||
Unsure about your numbers or want to talk?{' '}
|
||||
<a href="mailto:sales@posthog.com?title=Cloud%20Large%20Volumes%20Enquiry">
|
||||
Contact us
|
||||
</a>
|
||||
.
|
||||
<div className="text-center pt-8">
|
||||
<h5>Completely self-serve, get started without a credit card.</h5>
|
||||
<div className="text-sm">
|
||||
<CallToAction icon="rocket" href="https://app.posthog.com/signup">
|
||||
Get Started
|
||||
</CallToAction>
|
||||
<br />
|
||||
<br />
|
||||
Unsure about your numbers or want to talk?{' '}
|
||||
<a href="mailto:sales@posthog.com?title=Cloud%20Large%20Volumes%20Enquiry">
|
||||
Contact us
|
||||
</a>
|
||||
.
|
||||
</div>
|
||||
</div>
|
||||
<br />
|
||||
<br />
|
||||
|
||||
<ul className="p-comparison-list">
|
||||
<ul className="p-comparison-list max-w-sm text-left mx-auto">
|
||||
<li>Immediate start</li>
|
||||
<li>You don't have significant privacy requirements</li>
|
||||
<li>You don't want PostHog on your infrastructure</li>
|
||||
|
||||
@@ -163,16 +163,10 @@
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.p-comparison-list {
|
||||
margin-left: 0;
|
||||
margin-top: 16px;
|
||||
padding-bottom: 16px;
|
||||
}
|
||||
|
||||
.p-comparison-list li {
|
||||
list-style: none;
|
||||
line-height: 1.5;
|
||||
margin-bottom: 2em;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.p-comparison-list li:before {
|
||||
@@ -187,8 +181,6 @@
|
||||
}
|
||||
|
||||
.p-comparison-btn {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -265,7 +257,6 @@
|
||||
|
||||
.pricing-cloud {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
|
||||
.feature-card {
|
||||
max-width: 400px;
|
||||
@@ -298,8 +289,6 @@
|
||||
}
|
||||
|
||||
ul {
|
||||
text-align: center;
|
||||
|
||||
li {
|
||||
font-size: 14px;
|
||||
position: relative;
|
||||
|
||||
@@ -278,10 +278,7 @@
|
||||
{
|
||||
"entry": "Getting started",
|
||||
"name": "Getting started",
|
||||
"items": [
|
||||
"handbook/getting-started/start-here",
|
||||
"handbook/getting-started/meetings"
|
||||
]
|
||||
"items": ["handbook/getting-started/start-here", "handbook/getting-started/meetings"]
|
||||
},
|
||||
{
|
||||
"entry": "How we work",
|
||||
|
||||
91
src/styles/buttons.scss
Normal file
91
src/styles/buttons.scss
Normal file
@@ -0,0 +1,91 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
.button-primary,
|
||||
.button-secondary,
|
||||
.button {
|
||||
@apply font-button text-white hover:text-white lowercase select-none;
|
||||
-ms-transform: skewX(-20deg);
|
||||
-webkit-transform: skewX(-20deg);
|
||||
transform: skewX(-20deg);
|
||||
transition: 0.25s ease all;
|
||||
|
||||
span {
|
||||
display: inline-block;
|
||||
-ms-transform: skewX(20deg);
|
||||
-webkit-transform: skewX(20deg);
|
||||
transform: skewX(20deg);
|
||||
@apply relative inline-block;
|
||||
|
||||
span {
|
||||
-ms-transform: skewX(0deg);
|
||||
-webkit-transform: skewX(0deg);
|
||||
transform: skewX(0deg);
|
||||
}
|
||||
|
||||
&.icon {
|
||||
-ms-transform: skewX(0deg);
|
||||
-webkit-transform: skewX(0deg);
|
||||
transform: skewX(0deg);
|
||||
|
||||
img {
|
||||
-ms-transform: skewX(20deg);
|
||||
-webkit-transform: skewX(20deg);
|
||||
transform: skewX(20deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.button {
|
||||
background: linear-gradient(90deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%);
|
||||
border: solid 2px rgba(255, 255, 255, 0.3);
|
||||
|
||||
&:hover {
|
||||
background: linear-gradient(90deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.05) 100%);
|
||||
}
|
||||
}
|
||||
|
||||
.button-primary {
|
||||
background: linear-gradient(98.18deg, #d66f0f 8.47%, #ef7632 56.29%);
|
||||
box-shadow: 0px 0.125rem 1rem rgba(239, 118, 50, 0.5);
|
||||
border: solid 2px transparent;
|
||||
|
||||
&:hover {
|
||||
background: linear-gradient(98.18deg, #d66f0f 8.47%, #fe7a30 56.29%);
|
||||
}
|
||||
}
|
||||
|
||||
.button-secondary {
|
||||
background: linear-gradient(103.46deg, #1f5879 13.26%, #0c3248 51.69%);
|
||||
box-shadow: 0px 0.125rem 1rem rgba(58, 128, 169, 0.5);
|
||||
border: solid 2px #3a80a9;
|
||||
|
||||
&:hover {
|
||||
background: linear-gradient(103.46deg, #1f5879 13.26%, #0f405c 51.69%);
|
||||
border: 2px solid #509dca;
|
||||
}
|
||||
}
|
||||
|
||||
.button-primary:focus,
|
||||
.button-secondary:focus {
|
||||
outline: 5px auto -webkit-focus-ring-color;
|
||||
}
|
||||
.button-primary:active,
|
||||
.button-primary:focus {
|
||||
background: linear-gradient(98.18deg, #ce6b0e 8.47%, #ed6f27 56.29%);
|
||||
}
|
||||
|
||||
.button-secondary:active,
|
||||
.button-secondary:focus {
|
||||
background: linear-gradient(103.46deg, #1a5070 13.26%, #093148 51.69%);
|
||||
border: 2px solid #2d79a5;
|
||||
}
|
||||
|
||||
.button-primary:active span,
|
||||
.button-primary:focus span .button-secondary:active span,
|
||||
.button-secondary:focus span {
|
||||
left: 1px;
|
||||
top: 1px;
|
||||
}
|
||||
@@ -4,6 +4,7 @@
|
||||
|
||||
@import 'workable-overrides.css';
|
||||
@import 'backgrounds.css';
|
||||
@import 'buttons.scss';
|
||||
|
||||
body {
|
||||
font-smooth: 1.5px;
|
||||
@@ -25,8 +26,8 @@ ul {
|
||||
list-style: disc;
|
||||
}
|
||||
|
||||
.bg-primary {
|
||||
background: linear-gradient(91.54deg, rgba(255, 99, 39, 0.9) 0%, rgba(248, 88, 27, 0.9) 100%);
|
||||
.font-nav {
|
||||
@apply lowercase;
|
||||
}
|
||||
|
||||
.bg-primary-dark {
|
||||
@@ -34,22 +35,6 @@ ul {
|
||||
border-color: rgba(218, 72, 16, 0.9);
|
||||
}
|
||||
|
||||
.button-primary {
|
||||
box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.05);
|
||||
backdrop-filter: blur(2px);
|
||||
text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.1);
|
||||
transition: 0.25s ease all;
|
||||
|
||||
@apply bg-primary px-4 py-2 font-gosha inline-block rounded font-semibold border text-base-larger text-white hover:text-white uppercase;
|
||||
}
|
||||
|
||||
.button-primary:hover,
|
||||
.button-primary:active,
|
||||
.button-primary:focus {
|
||||
background: rgba(218, 72, 16, 0.9);
|
||||
border-color: rgba(218, 72, 16, 0.9);
|
||||
}
|
||||
|
||||
.contributor-images > img {
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
|
||||
@@ -39,8 +39,6 @@
|
||||
.blogPageContent p,
|
||||
.blogPageContent blockquote,
|
||||
.blogPageContent li {
|
||||
font-family: 'Inter', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Helvetica', 'Arial',
|
||||
'sans-serif', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
|
||||
font-size: 1.2em;
|
||||
line-height: 1.6;
|
||||
text-align: justify;
|
||||
|
||||
BIN
static/fonts/Osiris.woff2
Normal file
BIN
static/fonts/Osiris.woff2
Normal file
Binary file not shown.
BIN
static/fonts/skcuriosity-heavy-webfont.woff
Normal file
BIN
static/fonts/skcuriosity-heavy-webfont.woff
Normal file
Binary file not shown.
BIN
static/fonts/skcuriosity-heavy-webfont.woff2
Normal file
BIN
static/fonts/skcuriosity-heavy-webfont.woff2
Normal file
Binary file not shown.
BIN
static/fonts/skcuriosity-heavyitalic-webfont.woff
Normal file
BIN
static/fonts/skcuriosity-heavyitalic-webfont.woff
Normal file
Binary file not shown.
BIN
static/fonts/skcuriosity-heavyitalic-webfont.woff2
Normal file
BIN
static/fonts/skcuriosity-heavyitalic-webfont.woff2
Normal file
Binary file not shown.
BIN
static/fonts/skcuriosity-medium-webfont.woff
Normal file
BIN
static/fonts/skcuriosity-medium-webfont.woff
Normal file
Binary file not shown.
BIN
static/fonts/skcuriosity-medium-webfont.woff2
Normal file
BIN
static/fonts/skcuriosity-medium-webfont.woff2
Normal file
Binary file not shown.
BIN
static/fonts/skcuriosity-mediumitalic-webfont.woff
Normal file
BIN
static/fonts/skcuriosity-mediumitalic-webfont.woff
Normal file
Binary file not shown.
BIN
static/fonts/skcuriosity-mediumitalic-webfont.woff2
Normal file
BIN
static/fonts/skcuriosity-mediumitalic-webfont.woff2
Normal file
Binary file not shown.
@@ -29,20 +29,24 @@ module.exports = {
|
||||
fontFamily: {
|
||||
gosha: ['Gosha Sans', 'Arial', 'Helvetica', 'sans-serif'],
|
||||
serif: ['Gosha Sans', 'Arial', 'Helvetica', 'sans-serif'],
|
||||
sans: ['Good Sans', 'Arial', 'Helvetica', 'sans-serif', 'Inter'],
|
||||
inter: [
|
||||
'Inter',
|
||||
sans: [
|
||||
'SK Curiosity',
|
||||
'-apple-system',
|
||||
'BlinkMacSystemFont',
|
||||
'Segoe UI',
|
||||
'Roboto',
|
||||
'Helvetica',
|
||||
'Arial',
|
||||
'avenir next',
|
||||
'avenir',
|
||||
'segoe ui',
|
||||
'helvetica neue',
|
||||
'helvetica',
|
||||
'Ubuntu',
|
||||
'roboto',
|
||||
'noto',
|
||||
'arial',
|
||||
'sans-serif',
|
||||
'Apple Color Emoji',
|
||||
'Segoe UI Emoji',
|
||||
'Segoe UI Symbol',
|
||||
],
|
||||
button: ['Osiris'],
|
||||
nav: ['Osiris'],
|
||||
osiris: ['Osiris'],
|
||||
},
|
||||
fontSize: {
|
||||
'2xs': '0.65rem',
|
||||
@@ -56,6 +60,7 @@ module.exports = {
|
||||
orange: '#FFB877',
|
||||
'darkmode-purple': '#220f3f',
|
||||
'offwhite-purple': '#F4F1F8',
|
||||
'baby-blue': '#CDD0FF',
|
||||
footer: '#08042f',
|
||||
},
|
||||
minHeight: {
|
||||
|
||||
Reference in New Issue
Block a user