pricing, forms, CTAs, etc

sourcegraph · May 2, 2019 · 82017aa · 82017aa
1 parent 20317c5
commit 82017aa
Show file tree

Hide file tree

Showing 11 changed files with 55 additions and 38 deletions.
diff --git a/website/src/components/PricingPlan.tsx b/website/src/components/PricingPlan.tsx
@@ -14,6 +14,7 @@ interface Props {
     priceInterval?: string | React.ReactFragment
     priceCaption?: string | React.ReactFragment
     features: PricingPlanFeature[]
+    plusEverythingIn?: string
     buttonLabel: string
     buttonOnClick?: () => void
     buttonHref: string
@@ -36,11 +37,12 @@ export const PricingPlan: React.FunctionComponent<Props> = ({
     ),
     priceCaption,
     features,
+    plusEverythingIn,
     buttonLabel,
     buttonOnClick,
     buttonHref,
 }) => (
-    <div className={`card pricing__card ${className}`}>
+    <div className={`card border-0 pricing__card ${className}`}>
         <h1 className="card-title border-bottom py-2">{name}</h1>
         <div className="card-body py-1 pricing-plan__description text-center flex-grow-0">{description}</div>
         <div className="card-body pt-2 d-flex flex-column align-items-center flex-grow-0">
@@ -74,6 +76,11 @@ export const PricingPlan: React.FunctionComponent<Props> = ({
                     {name}
                 </a>
             ))}
+            {plusEverythingIn && (
+                <div className="list-group-item border-0 text-muted font-italic pt-1">
+                    Plus everything in {plusEverythingIn}
+                </div>
+            )}
         </div>
     </div>
 )
diff --git a/website/src/css/components/actions/GetSourcegraphNowActions.tsx b/website/src/css/components/actions/GetSourcegraphNowActions.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import { ContactPresalesSupportAction } from './ContactPresalesSupportAction'
-import { GetStartedAction } from './GetStartedAction'
+import { RequestDemoAction } from './RequestDemoAction'
 import { ViewDeveloperDocumentationAction } from './ViewDeveloperDocumentationAction'
 
 export const GetSourcegraphNowActions: React.FunctionComponent<any> = () => (
@@ -12,7 +12,7 @@ export const GetSourcegraphNowActions: React.FunctionComponent<any> = () => (
                 boxShadow: 'rgba(255,255,255,0.3) 0 0 30px 20px',
             }}
         >
-            <GetStartedAction className="mt-4" />
+            <RequestDemoAction className="mt-4" />
             <ContactPresalesSupportAction className="text-light mt-3" />
             <ViewDeveloperDocumentationAction className="text-light mt-2 mb-3" />
         </div>

diff --git a/website/src/css/components/actions/GetStartedAction.tsx b/website/src/css/components/actions/GetStartedAction.tsx
diff --git a/website/src/css/components/actions/RequestADemoAction.tsx b/website/src/css/components/actions/RequestADemoAction.tsx
diff --git a/website/src/css/components/actions/RequestDemoAction.tsx b/website/src/css/components/actions/RequestDemoAction.tsx
@@ -0,0 +1,6 @@
+import React from 'react'
+import { SubmitEmailForm } from './SubmitEmailForm'
+
+export const RequestDemoAction: React.FunctionComponent<{ className?: string }> = ({ className = '' }) => (
+    <SubmitEmailForm formAction="/contact/request-demo" buttonText="Request a demo" className={className} />
+)
diff --git a/website/src/pages/index.tsx b/website/src/pages/index.tsx
@@ -11,7 +11,7 @@ import { ProductFeaturesAndUseCases } from '../components/product/ProductFeature
 import { Testimonials } from '../components/Testimonials'
 import { ContactPresalesSupportAction } from '../css/components/actions/ContactPresalesSupportAction'
 import { GetSourcegraphNowActions } from '../css/components/actions/GetSourcegraphNowActions'
-import { GetStartedAction } from '../css/components/actions/GetStartedAction'
+import { RequestDemoAction } from '../css/components/actions/RequestDemoAction'
 import { ViewDeveloperDocumentationAction } from '../css/components/actions/ViewDeveloperDocumentationAction'
 
 export default ((props: any) => (
@@ -50,7 +50,7 @@ export default ((props: any) => (
                             <strong>Sourcegraph</strong> provides this standard developer&nbsp;platform to every
                             company, helping startups and large&nbsp;enterprises ship better software faster.
                         </p>
-                        <GetStartedAction className="mt-5" />
+                        <RequestDemoAction className="mt-5" />
                         <ContactPresalesSupportAction className="text-light mt-3" />
                         <ViewDeveloperDocumentationAction className="text-light mt-2" />
                     </div>

diff --git a/website/src/pages/pricing.tsx b/website/src/pages/pricing.tsx
@@ -1,3 +1,4 @@
+import { Link } from 'gatsby'
 import * as React from 'react'
 import Helmet from 'react-helmet'
 import { ContentSection } from '../components/content/ContentSection'
@@ -79,6 +80,7 @@ export default ((props: any) => (
                                     { name: 'Cloud-managed option', id: 'deployment' },
                                     { name: 'Priority support', id: 'support' },
                                 ]}
+                                plusEverythingIn="Core"
                                 buttonLabel="Buy now"
                                 buttonHref="http://sourcegraph.com/subscriptions/new"
                             />
@@ -113,18 +115,25 @@ export default ((props: any) => (
                                     },
                                     { name: 'Audit logs', id: 'admin', future: true },
                                 ]}
+                                plusEverythingIn="Enterprise"
                                 buttonLabel="Buy now"
-                                buttonHref="/contact/sales"
+                                buttonHref="http://sourcegraph.com/subscriptions/new"
                             />
                         </div>
                     </div>
                 </div>
             </div>
             <ContentSection color="purple" className="hero-section text-center py-5">
                 <h2>Try Sourcegraph Unlimited risk-free for 30 days</h2>
-                <a className="btn btn-lg btn-outline-light mt-3" href="/contact/sales">
+                <Link className="btn btn-lg btn-outline-light mt-3 font-weight-normal" to="/contact/request-demo">
                     Free trial
-                </a>
+                </Link>
+            </ContentSection>
+            <ContentSection color="primary" className="hero-section text-center py-5">
+                <h2>Questions?</h2>
+                <Link className="btn btn-lg btn-outline-light mt-3 font-weight-normal" to="/contact/sales">
+                    Contact sales
+                </Link>
             </ContentSection>
             <div className="pricing-page__compare container-fluid py-6">
                 <h2 className="text-center display-4 mb-6">Compare plans</h2>

diff --git a/website/src/pages/product/code-alerts-automation.tsx b/website/src/pages/product/code-alerts-automation.tsx
@@ -13,8 +13,8 @@ import { IntegratesWithSection } from '../../components/product/IntegratesWithSe
 import { OpenSourcePrivacyFeatureItem } from '../../components/product/OpenSourcePrivacyFeatureItem'
 import { ContactPresalesSupportAction } from '../../css/components/actions/ContactPresalesSupportAction'
 import { GetSourcegraphNowActions } from '../../css/components/actions/GetSourcegraphNowActions'
+import { RequestDemoAction } from '../../css/components/actions/RequestDemoAction'
 import { ViewDeveloperDocumentationAction } from '../../css/components/actions/ViewDeveloperDocumentationAction'
-import { GetStartedAction } from '../../css/components/actions/GetStartedAction'
 
 export default ((props: any) => (
     <Layout location={props.location}>
@@ -23,14 +23,20 @@ export default ((props: any) => (
             description="Continuously monitor all changes to all repositories for risky or important changes. Get instant email, Slack, or webhook notifications for every hit."
             mainActions={
                 <div className="d-flex flex-column align-items-center">
-                    <GetStartedAction className="mt-4" />
+                    <RequestDemoAction className="mt-3" />
+                    <ContactPresalesSupportAction className="mt-3 text-light" />
                     <ViewDeveloperDocumentationAction
-                        className="text-light my-3"
+                        className="text-light mt-2"
                         url="https://docs.sourcegraph.com/user/search/saved_searches"
                     >
                         Documentation
                     </ViewDeveloperDocumentationAction>
-                    {/*<ContactPresalesSupportAction className="text-light" /> TODO(sqs) */}
+                    <ViewDeveloperDocumentationAction
+                        className="text-light mt-2"
+                        url="https://docs.sourcegraph.com/#quickstart"
+                    >
+                        Install
+                    </ViewDeveloperDocumentationAction>
                 </div>
             }
         >

diff --git a/website/src/pages/product/code-review.tsx b/website/src/pages/product/code-review.tsx
@@ -19,6 +19,7 @@ import { OpenSourcePrivacyFeatureItem } from '../../components/product/OpenSourc
 import { SupportedProgrammingLanguagesLink } from '../../components/product/SupportedProgrammingLanguagesLink'
 import { ContactPresalesSupportAction } from '../../css/components/actions/ContactPresalesSupportAction'
 import { GetSourcegraphNowActions } from '../../css/components/actions/GetSourcegraphNowActions'
+import { RequestDemoAction } from '../../css/components/actions/RequestDemoAction'
 import { ViewDeveloperDocumentationAction } from '../../css/components/actions/ViewDeveloperDocumentationAction'
 
 export default ((props: any) => (
@@ -28,19 +29,20 @@ export default ((props: any) => (
             description="Start doing code reviews right. Sourcegraph enhances your existing code review tool with inline code intelligence, helping you speed up the review cycle and catch more bugs before they're deployed to production."
             mainActions={
                 <div className="d-flex flex-column align-items-center">
+                    <RequestDemoAction className="mt-3" />
                     <a
-                        className="btn btn-primary mb-2"
+                        className="btn btn-outline-primary mt-3"
                         href="https://docs.sourcegraph.com/integration/browser_extension"
                     >
                         Install browser extension
                     </a>
+                    <ContactPresalesSupportAction className="mt-3 text-light" />
                     <ViewDeveloperDocumentationAction
-                        className="text-light my-1"
+                        className="text-light mt-2"
                         url="https://docs.sourcegraph.com/integration"
                     >
                         Code review integrations documentation
                     </ViewDeveloperDocumentationAction>
-                    {/*<ContactPresalesSupportAction className="text-light" /> TODO(sqs) */}
                 </div>
             }
         >

diff --git a/website/src/pages/product/code-search-navigation.tsx b/website/src/pages/product/code-search-navigation.tsx
@@ -20,6 +20,7 @@ import { SupportedProgrammingLanguagesLink } from '../../components/product/Supp
 import { UseCasesTable } from '../../components/product/UseCasesTable'
 import { ContactPresalesSupportAction } from '../../css/components/actions/ContactPresalesSupportAction'
 import { GetSourcegraphNowActions } from '../../css/components/actions/GetSourcegraphNowActions'
+import { RequestDemoAction } from '../../css/components/actions/RequestDemoAction'
 import { ViewDeveloperDocumentationAction } from '../../css/components/actions/ViewDeveloperDocumentationAction'
 
 export default ((props: any) => (
@@ -29,16 +30,14 @@ export default ((props: any) => (
             description="Code search helps you grok code so you can write better code more quickly. Sourcegraph's code search is used by elite software teams."
             mainActions={
                 <div className="d-flex flex-column align-items-center">
-                    <a className="btn btn-primary mb-2" href="https://docs.sourcegraph.com/#quickstart">
-                        Install
-                    </a>
+                    <RequestDemoAction className="mt-3" />
+                    <ContactPresalesSupportAction className="mt-3 text-light" />
                     <ViewDeveloperDocumentationAction
-                        className="text-light my-1"
-                        url="https://docs.sourcegraph.com/user/search"
+                        className="text-light mt-2"
+                        url="https://docs.sourcegraph.com/#quickstart"
                     >
-                        Code search documentation
+                        Documentation &amp; self-service install
                     </ViewDeveloperDocumentationAction>
-                    {/*<ContactPresalesSupportAction className="text-light" /> TODO(sqs) */}
                 </div>
             }
         >

diff --git a/website/src/pages/product/index.tsx b/website/src/pages/product/index.tsx
@@ -18,15 +18,15 @@ import { ProductDemoVideo } from '../../components/product/ProductDemoVideo'
 import { ProductFeaturesAndUseCases } from '../../components/product/ProductFeaturesAndUseCases'
 import { ContactPresalesSupportAction } from '../../css/components/actions/ContactPresalesSupportAction'
 import { GetSourcegraphNowActions } from '../../css/components/actions/GetSourcegraphNowActions'
-import { GetStartedAction } from '../../css/components/actions/GetStartedAction'
+import { RequestDemoAction } from '../../css/components/actions/RequestDemoAction'
 import { ViewDeveloperDocumentationAction } from '../../css/components/actions/ViewDeveloperDocumentationAction'
 export default ((props: any) => {
     const actions = (
         <div className="d-flex justify-content-center mt-6">
             <div>
-                <GetStartedAction />
-                {/*<ContactPresalesSupportAction className="text-light" /> TODO(sqs) */}
-                <ViewDeveloperDocumentationAction className="mt-3 text-light" />
+                <RequestDemoAction />
+                <ContactPresalesSupportAction className="mt-3 text-light" />
+                <ViewDeveloperDocumentationAction className="mt-2 text-light" />
             </div>
         </div>
     )