From e531aaf0fc74c1dc935be0949dfbea0a52bc3be5 Mon Sep 17 00:00:00 2001 From: Quinn Slack Date: Wed, 1 May 2019 00:10:57 -0700 Subject: [PATCH 1/3] contact page --- docs/contact.md | 34 -------- website/src/css/styles.scss | 26 ++++++ website/src/pages/contact/index.tsx | 129 ++++++++++++++++++++++++++++ 3 files changed, 155 insertions(+), 34 deletions(-) delete mode 100644 docs/contact.md create mode 100644 website/src/pages/contact/index.tsx diff --git a/docs/contact.md b/docs/contact.md deleted file mode 100644 index e3672f20e78..00000000000 --- a/docs/contact.md +++ /dev/null @@ -1,34 +0,0 @@ ---- -layout: markdown -title: Contact -permalink: contact ---- - -Sourcegraph is how developers search code. Need to reach a real human being on our team? - -## Help using Sourcegraph - -Start chatting with us now, file issues on our [public issue tracker](https://github.com/sourcegraph/sourcegraph/issues), or send an email to support@sourcegraph.com with as much information as possible. - -- List the steps you took, what you expected, and what you saw. -- Include links and screenshots, if relevant. - -Reporting a security vulnerability? See our responsible disclosure policy. - -## Around the web - -- Twitter: @srcgraph -- GitHub: github.com/sourcegraph -- LinkedIn: Sourcegraph LinkedIn page - -## Plans, pricing, sales - -For enterprise accounts or any questions about getting Sourcegraph for your private code, submit our contact form, or email us at sales@sourcegraph.com. - -## In the real world - -Sourcegraph
-142 Minna St, 2nd Floor
-San Francisco, CA 94105 (USA) - -View on Google Maps diff --git a/website/src/css/styles.scss b/website/src/css/styles.scss index 14552772970..44fad157080 100644 --- a/website/src/css/styles.scss +++ b/website/src/css/styles.scss @@ -110,6 +110,8 @@ $input-placeholder-color: $gray-600; $input-focus-border-color: darken($component-active-bg, 25%); $input-focus-box-shadow: none; +$list-group-action-hover-color: $link-hover-color; + $popover-arrow-width: 0; $popover-arrow-color: transparent; $popover-arrow-outer-color: transparent; @@ -124,6 +126,7 @@ $popover-max-width: 400px; @import 'node_modules/bootstrap/scss/transitions'; @import 'node_modules/bootstrap/scss/nav'; @import 'node_modules/bootstrap/scss/navbar'; +@import 'node_modules/bootstrap/scss/card'; @import 'node_modules/bootstrap/scss/media'; @import 'node_modules/bootstrap/scss/list-group'; @import 'node_modules/bootstrap/scss/popover'; @@ -163,6 +166,29 @@ body { box-shadow: rgba(0, 0, 0, 0.1) 0 0 9px 3px; } +// Formats an icon so that it appears inline in the text +// with height matching the text +.icon-inline { + // SVGs already include padding to account for text baseline, + // so align with the bottom of the text + vertical-align: bottom; + display: inline-flex; + align-items: center; +} +svg.icon-inline, +img.icon-inline, +.icon-inline svg, +.icon-inline img { + // TODO find a better way to scale icons that is not proportional to the font size + // 14px font size -> 20px icon size + // stylelint-disable-next-line declaration-property-unit-whitelist + width: (20em / 14); + // stylelint-disable-next-line declaration-property-unit-whitelist + height: (20em / 14); + // Match color of the text + fill: currentColor; +} + @import 'circular-font'; @import 'components/ProductPopover'; @import 'components/content/ContentPage'; diff --git a/website/src/pages/contact/index.tsx b/website/src/pages/contact/index.tsx new file mode 100644 index 00000000000..f9b82d4f748 --- /dev/null +++ b/website/src/pages/contact/index.tsx @@ -0,0 +1,129 @@ +import { Link } from 'gatsby' +import EmailIcon from 'mdi-react/EmailIcon' +import GithubCircleIcon from 'mdi-react/GithubCircleIcon' +import LinkedinBoxIcon from 'mdi-react/LinkedinBoxIcon' +import MapMarkerIcon from 'mdi-react/MapMarkerIcon' +import TwitterIcon from 'mdi-react/TwitterIcon' +import React from 'react' +import { ContentPage } from '../../components/content/ContentPage' +import { ContentSection } from '../../components/content/ContentSection' +import Layout from '../../components/Layout' + +export default ((props: any) => ( + + + +
+
+
+
Product support
+
+

For help using Sourcegraph:

+
+ +
+
+
+
+
Sales
+
+

For information about products and purchasing:

+ + Contact sales + +
+
+
+
+
+
Jobs
+
+

For information about joining our team:

+ + See career opportunities + +
+
+
+
+
+
Everything else
+
+ + hi@sourcegraph.com + + + @srcgraph + + + github.com/sourcegraph + + + Sourcegraph on LinkedIn + +
+ +
+ Sourcegraph +
+ 142 Minna St, 2nd Floor +
+ San Francisco, CA 94105 (USA) +
+ + + View on Google Maps + + +
+
+
+
+
+
+ + + +)) as React.FunctionComponent + +/* +## Around the web + +## Plans, pricing, sales + +For enterprise accounts or any questions about getting Sourcegraph for your private code, submit our contact form, or email us at sales@sourcegraph.com. + +## In the real world + +*/ From 20317c5aa42b23b694456e2970129d6d16200708 Mon Sep 17 00:00:00 2001 From: Quinn Slack Date: Wed, 1 May 2019 22:21:57 -0700 Subject: [PATCH 2/3] product specialist and demo forms --- website/src/components/Footer.tsx | 173 ++++++++-------- website/src/components/Header.tsx | 185 ++++++++++-------- website/src/components/Layout.tsx | 5 +- .../actions/GetSourcegraphNowActions.tsx | 5 +- .../components/actions/GetStartedAction.tsx | 7 +- .../components/actions/SubmitEmailForm.tsx | 23 ++- website/src/css/styles.scss | 6 + website/src/pages/contact/request-demo.tsx | 37 ++++ website/src/pages/contact/sales.tsx | 121 +++++------- website/src/pages/index.tsx | 3 +- 10 files changed, 311 insertions(+), 254 deletions(-) create mode 100644 website/src/pages/contact/request-demo.tsx diff --git a/website/src/components/Footer.tsx b/website/src/components/Footer.tsx index 2dfb1df4b10..61e31c0e06d 100644 --- a/website/src/components/Footer.tsx +++ b/website/src/components/Footer.tsx @@ -5,98 +5,101 @@ import TwitterIcon from 'mdi-react/TwitterIcon' import * as React from 'react' import { PRODUCT_FEATURES, PRODUCT_USE_CASES } from './ProductPopover' -export const Footer: React.FunctionComponent = () => ( +export const Footer: React.FunctionComponent<{ minimal?: boolean }> = ({ minimal }) => (