+
@@ -84,7 +84,7 @@ export const Header = ({ onPostPage }: { onPostPage: boolean }) => {
-
+
- expandMenu(!expanded)}>
+ expandMenu(!expanded)}>
@@ -145,7 +145,7 @@ export const Header = ({ onPostPage }: { onPostPage: boolean }) => {
Login
-
Get Started
+
Get Started
) : null}
diff --git a/src/components/Header/index.js b/src/components/Header/index.js
index 3f34bdf74..57e94a707 100644
--- a/src/components/Header/index.js
+++ b/src/components/Header/index.js
@@ -1,4 +1,4 @@
-import Header from './Header'
+import { Header } from './Header'
export default Header
export { Header }
diff --git a/src/components/LandingPage/Features/index.js b/src/components/LandingPage/Features/index.js
new file mode 100644
index 000000000..8a0f9d5ee
--- /dev/null
+++ b/src/components/LandingPage/Features/index.js
@@ -0,0 +1,32 @@
+import React from 'react'
+
+import oldWayImg from '../images/platform-old-way.svg'
+import newWayImg from '../images/platform-new-way.svg'
+
+export const Features = () => {
+ return (
+
+
+
A single platform that does it all
+
+ PostHog eliminates the need for multiple tools that weren’t built to work together.
+
+
+
+
+
+
+
+
+
+
+
+
+ Our all-in-one solution was built from the ground up to seamlessly work together.
+
+
+
+
+
+ )
+}
diff --git a/src/components/LandingPage/Hero/index.js b/src/components/LandingPage/Hero/index.js
new file mode 100644
index 000000000..55ed3055c
--- /dev/null
+++ b/src/components/LandingPage/Hero/index.js
@@ -0,0 +1,45 @@
+import React from 'react'
+import { ProductFeatureIcons } from '../ProductFeatureIcons'
+import { SocialProof } from '../SocialProof'
+import { CallToAction } from '../../CallToAction'
+
+export const Hero = () => {
+ return (
+
+
+
+
More than product analytics
+
+ PostHog is an {' '}
+
+ open source platform
+ {' '}
+
+ designed to help you understand customers, quantify value, and ship new features faster.
+
+
+
+
+
+
+
+
+ Get Started
+
+
+ Book a demo
+
+
+
+
+
+
+ )
+}
diff --git a/src/components/LandingPage/PrivateCloud/index.js b/src/components/LandingPage/PrivateCloud/index.js
new file mode 100644
index 000000000..e104fa5f7
--- /dev/null
+++ b/src/components/LandingPage/PrivateCloud/index.js
@@ -0,0 +1,108 @@
+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'
+
+const FeatureBenefit = ({ feature, benefit }) => {
+ return (
+
+
+
+
+ {benefit}
+
+
+ )
+}
+
+export const PrivateCloud = () => {
+ return (
+
+
+
Host on your own private cloud
+
+ Optionally host PostHog yourself with a private cloud deployment - a great solution for
+ privacy-conscious and compliance-oriented companies.
+
+
+
+
+
+
+
+
+
Open-source to our core
+
+ Our workflow, strategy, internal policies, handbook, and brand book are public and open
+ source.
+
+
+
+
+
+ Explore Handbook
+
+
+
+
+
+
+
+
+ Here’s a handful of the 263 people we have to thank for our
+ success.
+
+
Based on contributions to PostHog Github libraries
+
+
+
+
+
+
+
+ )
+}
diff --git a/src/components/LandingPage/ProductFeatureIcons/index.tsx b/src/components/LandingPage/ProductFeatureIcons/index.tsx
new file mode 100644
index 000000000..2d557d300
--- /dev/null
+++ b/src/components/LandingPage/ProductFeatureIcons/index.tsx
@@ -0,0 +1,46 @@
+import React from 'react'
+
+import analyticsImg from '../images/ProductFeatureIcons/analytics.svg'
+import heatmapsImg from '../images/ProductFeatureIcons/heatmaps.svg'
+import sessionReplayImg from '../images/ProductFeatureIcons/session-replay.svg'
+import featureFlagsImg from '../images/ProductFeatureIcons/feature-flags.svg'
+import abTestingImg from '../images/ProductFeatureIcons/ab-testing.svg'
+import userFeedbackImg from '../images/ProductFeatureIcons/user-feedback.svg'
+import revenueTrackingImg from '../images/ProductFeatureIcons/revenue-tracking.svg'
+
+interface ProductIconData {
+ label: string
+ icon: string
+ expectedLaunchDate?: string
+}
+
+const ProductFeatureIcon = ({ label, icon, expectedLaunchDate }: ProductIconData) => {
+ const opacity = expectedLaunchDate ? 'opacity-50' : 'opacity-100'
+ const expectedLabel = expectedLaunchDate ? (
+
{expectedLaunchDate}
+ ) : null
+
+ return (
+
+
+
+
+
{label}
+
{expectedLabel}
+
+ )
+}
+
+export const ProductFeatureIcons = () => {
+ return (
+
+ )
+}
diff --git a/src/components/LandingPage/RecentBlogPosts/images/blog-post.png b/src/components/LandingPage/RecentBlogPosts/images/blog-post.png
new file mode 100644
index 000000000..a4d3f2013
Binary files /dev/null and b/src/components/LandingPage/RecentBlogPosts/images/blog-post.png differ
diff --git a/src/components/LandingPage/RecentBlogPosts/index.js b/src/components/LandingPage/RecentBlogPosts/index.js
new file mode 100644
index 000000000..221af3029
--- /dev/null
+++ b/src/components/LandingPage/RecentBlogPosts/index.js
@@ -0,0 +1,93 @@
+import React from 'react'
+import { Link } from 'gatsby'
+
+import { CallToAction } from '../../CallToAction'
+import blogPostImg from './images/blog-post.png'
+
+export const RecentBlogPosts = () => {
+ return (
+
+
+
News & Blog
+
Follow our journey as we grow
+
+
+
+
+
+
+
+
+
Latest post
+
+
A story about pivots
+
+
PostHog has pivoted a lot.
+
+
+ After 5 pivots in 6 months, we got into YCombinator last year, pivoted again whilst we
+ were there and have now gone from the first commit to thousands of deployments, a team
+ across 10 countries and $12M raised, in well under a year. We've a long way to go, but
+ we're delighted at how it has gone so far.
+
+
+
This is that story and what we learned from it.
+
+
+ Continue reading
+
+
+
+
+
+ Popular articles
+
+ 8 min read
+
+
+ 8 min read
+
+
+ 8 min read
+
+
+ 8 min read
+
+
+
+
+
+
+ Visit Blog
+
+
+
+
+ )
+}
diff --git a/src/components/LandingPage/Roadmap/index.js b/src/components/LandingPage/Roadmap/index.js
new file mode 100644
index 000000000..a719a6f32
--- /dev/null
+++ b/src/components/LandingPage/Roadmap/index.js
@@ -0,0 +1,40 @@
+import React from 'react'
+import mountainsImg from '../images/mountains.png'
+import sunImg from '../images/sun.png'
+import cityImg from '../images/city.png'
+import timelineImg from '../images/timeline.png'
+import { CallToAction } from '../../CallToAction'
+
+export const Roadmap = () => (
+
+
+
+
+
Getting better every day
+
+ We built a ton in 2020. We’re going to build even more in 2021.
+
+
+ Explore Roadmap
+
+
+
+
+
+
+
+
+
+
+
+
+
+)
diff --git a/src/components/LandingPage/SocialProof/index.js b/src/components/LandingPage/SocialProof/index.js
new file mode 100644
index 000000000..cb41008a9
--- /dev/null
+++ b/src/components/LandingPage/SocialProof/index.js
@@ -0,0 +1,45 @@
+import React from 'react'
+
+import { CornerBrackets } from '../../CornerBrackets'
+
+import airbalticLogo from '../images/SocialProofLogos/airbaltic.svg'
+import dataikuLogo from '../images/SocialProofLogos/dataiku.svg'
+import landmarkLogo from '../images/SocialProofLogos/landmark.svg'
+import tinkoffLogo from '../images/SocialProofLogos/webiny.svg'
+import hasuraLogo from '../images/SocialProofLogos/hasura.svg'
+import spacexLogo from '../images/SocialProofLogos/spacex.svg'
+import ycombinatorLogo from '../images/SocialProofLogos/ycombinator.svg'
+import staplesLogo from '../images/SocialProofLogos/staples.svg'
+import webinyLogo from '../images/SocialProofLogos/webiny.svg'
+
+const Logo = ({ logo, alt }) =>
+
+export const SocialProof = () => {
+ return (
+
+
+
+
+
+
+
+
+
+ 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
+ usefulness over vanity features...Great job people!
+
+
@benjackwhite
+
+
+ )
+}
diff --git a/src/components/LandingPage/Tutorials/index.js b/src/components/LandingPage/Tutorials/index.js
new file mode 100644
index 000000000..935d55b18
--- /dev/null
+++ b/src/components/LandingPage/Tutorials/index.js
@@ -0,0 +1,72 @@
+import React from 'react'
+import { Link } from 'gatsby'
+import { CallToAction } from '../../CallToAction'
+import featuresImg from '../images/safe-features.png'
+import userBehaviorImg from '../images/user-behavior.png'
+import funnelsImg from '../images/funnels.png'
+
+export const Tutorials = () => {
+ return (
+
+
+
Hop aboard
+
+ Don’t get left behind. Join 2,700 companies using PostHog.
+
+
+
+
+ Get Started
+
+
+ Book a demo
+
+
+
+
+
+
Tutorials
+
Our developers highlight some of the functionality inside PostHog.
+
+
Popular tutorials
+
+
+
+
+
+
How to Safely Rollout New Features
+
7 min read
+
+
+
+
+
+
Visualizing User Behavior - Toolbar
+
6 min read
+
+
+
+
+
+
Analyzing Your Conversion with Funnels
+
8 min read
+
+
+
+
+ See all tutorials
+ 13
+
+
+
+ )
+}
diff --git a/src/components/LandingPage/images/ProductFeatureIcons/ab-testing.svg b/src/components/LandingPage/images/ProductFeatureIcons/ab-testing.svg
new file mode 100644
index 000000000..8e183fdce
--- /dev/null
+++ b/src/components/LandingPage/images/ProductFeatureIcons/ab-testing.svg
@@ -0,0 +1,28 @@
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/LandingPage/images/ProductFeatureIcons/analytics.svg b/src/components/LandingPage/images/ProductFeatureIcons/analytics.svg
new file mode 100644
index 000000000..cb9e18e59
--- /dev/null
+++ b/src/components/LandingPage/images/ProductFeatureIcons/analytics.svg
@@ -0,0 +1,46 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/LandingPage/images/ProductFeatureIcons/feature-flags.svg b/src/components/LandingPage/images/ProductFeatureIcons/feature-flags.svg
new file mode 100644
index 000000000..ef3ff89e7
--- /dev/null
+++ b/src/components/LandingPage/images/ProductFeatureIcons/feature-flags.svg
@@ -0,0 +1,58 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/LandingPage/images/ProductFeatureIcons/heatmaps.svg b/src/components/LandingPage/images/ProductFeatureIcons/heatmaps.svg
new file mode 100644
index 000000000..b5714b50d
--- /dev/null
+++ b/src/components/LandingPage/images/ProductFeatureIcons/heatmaps.svg
@@ -0,0 +1,100 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/LandingPage/images/ProductFeatureIcons/revenue-tracking.svg b/src/components/LandingPage/images/ProductFeatureIcons/revenue-tracking.svg
new file mode 100644
index 000000000..da0dc4a0b
--- /dev/null
+++ b/src/components/LandingPage/images/ProductFeatureIcons/revenue-tracking.svg
@@ -0,0 +1,28 @@
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/LandingPage/images/ProductFeatureIcons/session-replay.svg b/src/components/LandingPage/images/ProductFeatureIcons/session-replay.svg
new file mode 100644
index 000000000..334190c44
--- /dev/null
+++ b/src/components/LandingPage/images/ProductFeatureIcons/session-replay.svg
@@ -0,0 +1,40 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/LandingPage/images/ProductFeatureIcons/user-feedback.svg b/src/components/LandingPage/images/ProductFeatureIcons/user-feedback.svg
new file mode 100644
index 000000000..194571969
--- /dev/null
+++ b/src/components/LandingPage/images/ProductFeatureIcons/user-feedback.svg
@@ -0,0 +1,22 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/LandingPage/images/SocialProofLogos/airbaltic.svg b/src/components/LandingPage/images/SocialProofLogos/airbaltic.svg
new file mode 100644
index 000000000..b436bd6dc
--- /dev/null
+++ b/src/components/LandingPage/images/SocialProofLogos/airbaltic.svg
@@ -0,0 +1,18 @@
+
+
+
+
+
+
+
+
diff --git a/src/components/LandingPage/images/SocialProofLogos/dataiku.svg b/src/components/LandingPage/images/SocialProofLogos/dataiku.svg
new file mode 100644
index 000000000..8bfd4e27e
--- /dev/null
+++ b/src/components/LandingPage/images/SocialProofLogos/dataiku.svg
@@ -0,0 +1,13 @@
+
+
+
+
diff --git a/src/components/LandingPage/images/SocialProofLogos/hasura.svg b/src/components/LandingPage/images/SocialProofLogos/hasura.svg
new file mode 100644
index 000000000..bfbf659e5
--- /dev/null
+++ b/src/components/LandingPage/images/SocialProofLogos/hasura.svg
@@ -0,0 +1,12 @@
+
+
+
+
diff --git a/src/components/LandingPage/images/SocialProofLogos/landmark.svg b/src/components/LandingPage/images/SocialProofLogos/landmark.svg
new file mode 100644
index 000000000..730936875
--- /dev/null
+++ b/src/components/LandingPage/images/SocialProofLogos/landmark.svg
@@ -0,0 +1,11 @@
+
+
+
+
+
+
+
+
diff --git a/src/components/LandingPage/images/SocialProofLogos/spacex.svg b/src/components/LandingPage/images/SocialProofLogos/spacex.svg
new file mode 100644
index 000000000..a48d5d130
--- /dev/null
+++ b/src/components/LandingPage/images/SocialProofLogos/spacex.svg
@@ -0,0 +1,18 @@
+
+
+
+
+
+
+
+
diff --git a/src/components/LandingPage/images/SocialProofLogos/staples.svg b/src/components/LandingPage/images/SocialProofLogos/staples.svg
new file mode 100644
index 000000000..f8fb9c510
--- /dev/null
+++ b/src/components/LandingPage/images/SocialProofLogos/staples.svg
@@ -0,0 +1,17 @@
+
+
+
+
+
+
+
+
diff --git a/src/components/LandingPage/images/SocialProofLogos/tinkoff.svg b/src/components/LandingPage/images/SocialProofLogos/tinkoff.svg
new file mode 100644
index 000000000..e1b54ddaa
--- /dev/null
+++ b/src/components/LandingPage/images/SocialProofLogos/tinkoff.svg
@@ -0,0 +1,45 @@
+
+
+
+
+
+
+
+
diff --git a/src/components/LandingPage/images/SocialProofLogos/webiny.svg b/src/components/LandingPage/images/SocialProofLogos/webiny.svg
new file mode 100644
index 000000000..411031681
--- /dev/null
+++ b/src/components/LandingPage/images/SocialProofLogos/webiny.svg
@@ -0,0 +1,16 @@
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/LandingPage/images/SocialProofLogos/ycombinator.svg b/src/components/LandingPage/images/SocialProofLogos/ycombinator.svg
new file mode 100644
index 000000000..aa0503bbe
--- /dev/null
+++ b/src/components/LandingPage/images/SocialProofLogos/ycombinator.svg
@@ -0,0 +1,20 @@
+
+
+
+
+
+
+
+
diff --git a/src/components/LandingPage/images/brackets.svg b/src/components/LandingPage/images/brackets.svg
new file mode 100644
index 000000000..7fe3ddf8f
--- /dev/null
+++ b/src/components/LandingPage/images/brackets.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/components/LandingPage/images/city.png b/src/components/LandingPage/images/city.png
new file mode 100644
index 000000000..f6aeeaeb5
Binary files /dev/null and b/src/components/LandingPage/images/city.png differ
diff --git a/src/components/LandingPage/images/clouds.png b/src/components/LandingPage/images/clouds.png
new file mode 100644
index 000000000..503f99368
Binary files /dev/null and b/src/components/LandingPage/images/clouds.png differ
diff --git a/src/components/LandingPage/images/funnels.png b/src/components/LandingPage/images/funnels.png
new file mode 100644
index 000000000..2d5c932c1
Binary files /dev/null and b/src/components/LandingPage/images/funnels.png differ
diff --git a/src/components/LandingPage/images/green-check.svg b/src/components/LandingPage/images/green-check.svg
new file mode 100644
index 000000000..bf9014296
--- /dev/null
+++ b/src/components/LandingPage/images/green-check.svg
@@ -0,0 +1,16 @@
+
+
+
+
+
+
+
+
diff --git a/src/components/LandingPage/images/hero-bg.svg b/src/components/LandingPage/images/hero-bg.svg
new file mode 100644
index 000000000..3b7d04b91
--- /dev/null
+++ b/src/components/LandingPage/images/hero-bg.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/components/LandingPage/images/moon.svg b/src/components/LandingPage/images/moon.svg
new file mode 100644
index 000000000..3f0768f4d
--- /dev/null
+++ b/src/components/LandingPage/images/moon.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/components/LandingPage/images/mountains.png b/src/components/LandingPage/images/mountains.png
new file mode 100644
index 000000000..ecec3ed9a
Binary files /dev/null and b/src/components/LandingPage/images/mountains.png differ
diff --git a/src/components/LandingPage/images/mountains.svg b/src/components/LandingPage/images/mountains.svg
new file mode 100644
index 000000000..0a06a588b
--- /dev/null
+++ b/src/components/LandingPage/images/mountains.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/components/LandingPage/images/pipes.svg b/src/components/LandingPage/images/pipes.svg
new file mode 100644
index 000000000..63061d2df
--- /dev/null
+++ b/src/components/LandingPage/images/pipes.svg
@@ -0,0 +1,7 @@
+
+
diff --git a/src/components/LandingPage/images/platform-new-way.svg b/src/components/LandingPage/images/platform-new-way.svg
new file mode 100644
index 000000000..2eb1fadd8
--- /dev/null
+++ b/src/components/LandingPage/images/platform-new-way.svg
@@ -0,0 +1,91 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/LandingPage/images/platform-old-way.svg b/src/components/LandingPage/images/platform-old-way.svg
new file mode 100644
index 000000000..03ae25436
--- /dev/null
+++ b/src/components/LandingPage/images/platform-old-way.svg
@@ -0,0 +1,466 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/LandingPage/images/roadmap.svg b/src/components/LandingPage/images/roadmap.svg
new file mode 100644
index 000000000..55b8c61c9
--- /dev/null
+++ b/src/components/LandingPage/images/roadmap.svg
@@ -0,0 +1,633 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/LandingPage/images/rocket.svg b/src/components/LandingPage/images/rocket.svg
new file mode 100644
index 000000000..7a506021a
--- /dev/null
+++ b/src/components/LandingPage/images/rocket.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/components/LandingPage/images/rounded-corner-purpleish.svg b/src/components/LandingPage/images/rounded-corner-purpleish.svg
new file mode 100644
index 000000000..9bbf66b1c
--- /dev/null
+++ b/src/components/LandingPage/images/rounded-corner-purpleish.svg
@@ -0,0 +1,3 @@
+
+
diff --git a/src/components/LandingPage/images/rounded-corner.svg b/src/components/LandingPage/images/rounded-corner.svg
new file mode 100644
index 000000000..f058732e0
--- /dev/null
+++ b/src/components/LandingPage/images/rounded-corner.svg
@@ -0,0 +1,3 @@
+
+
diff --git a/src/components/LandingPage/images/safe-features.png b/src/components/LandingPage/images/safe-features.png
new file mode 100644
index 000000000..497f4fbd9
Binary files /dev/null and b/src/components/LandingPage/images/safe-features.png differ
diff --git a/src/components/LandingPage/images/subway.svg b/src/components/LandingPage/images/subway.svg
new file mode 100644
index 000000000..018660395
--- /dev/null
+++ b/src/components/LandingPage/images/subway.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/components/LandingPage/images/sun.png b/src/components/LandingPage/images/sun.png
new file mode 100644
index 000000000..edc82d36b
Binary files /dev/null and b/src/components/LandingPage/images/sun.png differ
diff --git a/src/components/LandingPage/images/sun.svg b/src/components/LandingPage/images/sun.svg
new file mode 100644
index 000000000..77aa8ada9
--- /dev/null
+++ b/src/components/LandingPage/images/sun.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/components/LandingPage/images/timeline.png b/src/components/LandingPage/images/timeline.png
new file mode 100644
index 000000000..0e50434ff
Binary files /dev/null and b/src/components/LandingPage/images/timeline.png differ
diff --git a/src/components/LandingPage/images/timeline.svg b/src/components/LandingPage/images/timeline.svg
new file mode 100644
index 000000000..252797b2e
--- /dev/null
+++ b/src/components/LandingPage/images/timeline.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/components/LandingPage/images/user-behavior.png b/src/components/LandingPage/images/user-behavior.png
new file mode 100644
index 000000000..41904ce3d
Binary files /dev/null and b/src/components/LandingPage/images/user-behavior.png differ
diff --git a/src/components/LandingPage/styles/index.scss b/src/components/LandingPage/styles/index.scss
new file mode 100644
index 000000000..a36e6a946
--- /dev/null
+++ b/src/components/LandingPage/styles/index.scss
@@ -0,0 +1,271 @@
+.hero {
+ background: url(../images/hero-bg.svg), linear-gradient(180deg, #220f3f 0%, #2c1e60 100%);
+ background-position: center center;
+ background-repeat: repeat-x;
+ position: relative;
+
+ &:before {
+ background: url(../images/rocket.svg);
+ bottom: -10%;
+ content: '';
+ display: none;
+ height: 939px;
+ position: absolute;
+ left: 3%;
+ width: 174px;
+
+ @media (min-width: 640px) {
+ display: block;
+ }
+ }
+
+ &:after {
+ background: url(../images/moon.svg);
+ content: '';
+ height: 539px;
+ position: absolute;
+ right: -10%;
+ top: -1%;
+ width: 539px;
+ zoom: 0.5;
+
+ @media (min-width: 640px) {
+ top: -5%;
+ zoom: 1;
+ }
+ }
+}
+
+@keyframes animateIn100 {
+ 0% {
+ opacity: 0;
+ top: 10px;
+ }
+
+ 85% {
+ opacity: 1;
+ }
+ 100% {
+ opacity: 1;
+ top: 0;
+ }
+}
+
+@keyframes animateIn50 {
+ 0% {
+ opacity: 0;
+ top: 10px;
+ }
+
+ 85% {
+ opacity: 0.5;
+ }
+ 100% {
+ opacity: 0.5;
+ top: 0;
+ }
+}
+
+.primary-navbar button {
+ transition: none;
+}
+
+.product-features {
+ grid-template-columns: repeat(4, 1fr);
+
+ @media (min-width: 640px) and (max-width: 1023px) {
+ grid-template-columns: repeat(4, 115px);
+ }
+
+ @media (min-width: 1024px) {
+ grid-template-columns: repeat(7, 115px);
+ }
+
+ > div {
+ &.opacity-100 {
+ animation: animateIn100 0.5s ease;
+ }
+
+ &.opacity-50 {
+ animation: animateIn50 0.5s ease;
+ }
+
+ animation-fill-mode: forwards !important;
+ position: relative;
+ opacity: 0;
+ //width: 115px;
+
+ &:nth-child(1) {
+ animation-delay: 0.15s;
+ }
+ &:nth-child(2) {
+ animation-delay: 0.3s;
+ }
+ &:nth-child(3) {
+ animation-delay: 0.45s;
+ }
+ &:nth-child(4) {
+ animation-delay: 0.6s;
+ }
+ &:nth-child(5) {
+ animation-delay: 0.75s;
+ }
+ &:nth-child(6) {
+ animation-delay: 0.9s;
+ }
+ &:nth-child(7) {
+ animation-delay: 1.05s;
+ }
+ &:nth-child(8) {
+ animation-delay: 1.2s;
+ }
+ }
+}
+
+.spotlight {
+ background: linear-gradient(180deg, #2c1e60 0%, #30246d 100%);
+}
+
+.bg-pipes {
+ background: url(../images/pipes.svg), linear-gradient(180deg, #2b114d 0%, #2a235b 100%);
+ background-size: contain;
+ background-position: top center;
+ background-repeat: no-repeat;
+}
+
+.social-proof {
+ background: linear-gradient(180deg, #2c1e60 0%, #30246d 100%);
+}
+
+.lp-features {
+ background: linear-gradient(180deg, #2c1e60 0%, #3c3288 100%);
+}
+
+.recent-blog-posts {
+ background: linear-gradient(180deg, #2a235b 0%, #08042f 100%);
+}
+
+.private-cloud {
+ background: url(../images/clouds.png), linear-gradient(180deg, #3c3288 0%, #b75184 100%);
+ background-size: cover;
+}
+
+.scene-wrapper {
+ position: relative;
+
+ .text-wrapper {
+ @media (max-width: 639px) {
+ background: linear-gradient(180deg, #b55174 0%, #cb7084 100%);
+ margin-top: 40%;
+ }
+
+ @media (min-width: 640px) {
+ margin-top: 10%;
+ }
+ }
+}
+
+.city-wrapper {
+ @media (min-width: 1024px) and (max-width: 1400px) {
+ padding-bottom: 4vw;
+ }
+}
+
+.mountains {
+ @media (max-width: 599px) {
+ margin-top: -110%;
+ }
+ @media (max-width: 639px) {
+ margin-top: -90%;
+ }
+ @media (min-width: 640px) {
+ margin-top: -30%;
+ }
+ @media (min-width: 1024px) {
+ margin-top: -25%;
+ }
+ @media (min-width: 2200px) {
+ margin-top: -22%;
+ }
+ @media (min-width: 2800px) {
+ margin-top: -20%;
+ }
+ width: 100%;
+}
+
+.sun {
+ height: 1259px;
+ @media (max-width: 1023px) {
+ // left: -400px;
+ }
+ @media (min-width: 1024px) {
+ // left: -200px;
+ }
+ @media (min-width: 2800px) {
+ // left: 25%;
+ }
+ // top: -700px;
+ left: calc(50% - 830px);
+ max-width: none;
+ position: absolute;
+ top: calc(-630px + (-10vw / 2)); // don't ask
+ width: 1260px;
+}
+
+.timeline-wrapper {
+ @media (max-width: 1440px) {
+ height: 595px; // leave room for scrollbar
+ }
+ height: 580px;
+ overflow-x: auto;
+ overflow-y: hidden;
+ position: relative;
+ z-index: 20;
+
+ @media (max-width: 639px) {
+ margin-top: 55%;
+ zoom: 0.75;
+ }
+ @media (min-width: 640px) {
+ margin-top: -30%;
+ }
+
+ @media (min-width: 1440px) {
+ height: 0;
+ padding-bottom: 40.28%;
+ }
+
+ @media (min-width: 1280px) {
+ // margin-top: -26%;
+ // padding-bottom: 34.6%;
+ // position: relative;
+
+ // .timeline {
+ // height: 100%;
+ // left: 0;
+ // position: absolute;
+ // top: 0;
+ // width: 100%;
+ // }
+ }
+
+ @media (min-width: 1440px) {
+ // overflow-x: hidden;
+ }
+}
+
+.timeline,
+.city {
+ height: auto;
+ left: 0;
+ min-width: 1440px;
+ max-width: none;
+ position: absolute;
+ top: 0;
+ width: 100%;
+}
+
+.timeline {
+ max-width: none;
+ // width: 1440px;
+}
diff --git a/src/components/Layout/Layout.scss b/src/components/Layout/Layout.scss
index 90dd70218..cc48933b2 100644
--- a/src/components/Layout/Layout.scss
+++ b/src/components/Layout/Layout.scss
@@ -12,13 +12,15 @@
font-family: 'Good Sans';
src: url('/fonts/GoodSans-Medium.woff') format('woff');
src: url('/fonts/GoodSans-Medium.woff2') format('woff2');
+ font-weight: normal;
}
/* Good Sans Bold */
@font-face {
- font-family: 'Good Sans Bold';
+ font-family: 'Good Sans';
src: url('/fonts/GoodSans-Bold.woff') format('woff');
src: url('/fonts/GoodSans-Bold.woff2') formt('woff2');
+ font-weight: bold;
}
html {
@@ -202,7 +204,6 @@ textarea {
html {
font: 112.5%/1.45em georgia, serif;
box-sizing: border-box;
- overflow-y: scroll;
}
* {
box-sizing: inherit;
@@ -216,13 +217,14 @@ html {
body {
color: hsla(0, 0%, 0%, 0.8);
font-family: 'Good Sans', Helvetica, Arial, sans-serif !important;
- font-weight: normal;
- word-wrap: break-word;
font-kerning: normal;
+ font-feature-settings: 'kern', 'liga', 'clig', 'calt';
-moz-font-feature-settings: 'kern', 'liga', 'clig', 'calt';
-ms-font-feature-settings: 'kern', 'liga', 'clig', 'calt';
-webkit-font-feature-settings: 'kern', 'liga', 'clig', 'calt';
- font-feature-settings: 'kern', 'liga', 'clig', 'calt';
+ font-weight: normal;
+ overflow-x: hidden;
+ word-wrap: break-word;
}
img {
max-width: 100%;
@@ -247,7 +249,7 @@ h1 {
color: inherit;
font-weight: bold;
text-rendering: optimizeLegibility;
- font-size: 42px;
+ font-size: 48px;
line-height: 150%;
font-family: 'Gosha Sans', Helvetica, Arial, Sans-Serif;
}
@@ -264,7 +266,7 @@ h2 {
color: inherit;
font-weight: bold;
text-rendering: optimizeLegibility;
- font-size: 36px;
+ font-size: 40px;
line-height: normal;
font-family: 'Gosha Sans', Helvetica, Arial, Sans-Serif;
font-style: normal;
diff --git a/src/components/NewsletterForm/index.js b/src/components/NewsletterForm/index.js
index 02587ccf6..ca3bf373c 100644
--- a/src/components/NewsletterForm/index.js
+++ b/src/components/NewsletterForm/index.js
@@ -1,5 +1,5 @@
import React from 'react'
-import './style.scss'
+import { CallToAction } from '../CallToAction'
export class NewsletterForm extends React.Component {
constructor(props) {
@@ -17,55 +17,67 @@ export class NewsletterForm extends React.Component {
render() {
return (
-
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+