Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add newsletter signup form to footer #642

Merged
merged 3 commits into from Mar 12, 2020
Merged

Add newsletter signup form to footer #642

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
387ceb5
Add neswletter signup form to footer
ryan-blunden Mar 5, 2020
da118ec
Merge branch 'master' into rb-newsletter-subscribe-footer
ryan-blunden Mar 5, 2020
fe4e8a3
Use HubSpot component
ryan-blunden Mar 5, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
213 changes: 117 additions & 96 deletions website/src/components/Footer.tsx
View file
Open in desktop
Expand Up @@ -4,107 +4,128 @@ import LinkedinIcon from 'mdi-react/LinkedinBoxIcon'
import TwitterIcon from 'mdi-react/TwitterIcon'
import * as React from 'react'
import { PRODUCT_FEATURES, PRODUCT_USE_CASES } from './ProductPopover'
import { useLayoutEffect } from 'react'
import { createHubSpotForm } from '../components/HubSpot'

export const Footer: React.FunctionComponent<{ minimal?: boolean }> = ({ minimal }) => (
const hubspotNewsletterFormId = 'hubspot-newsletter-form'

export const Footer: React.FunctionComponent<{ minimal?: boolean }> = ({ minimal }) => {
useLayoutEffect(() => {
createHubSpotForm({
portalId: '2762526',
formId: '9e9cd4d5-7a88-47e0-97e2-93dd11348ae5',
targetId: hubspotNewsletterFormId
})
}, [])
return (
<footer className="footer pt-6 pb-2">
<div className="footer__container container">
{!minimal && (
<div className="row footer__nav-sections">
<div className="col-12 col-lg-3 mb-5">
<Link to="/">
<img className="footer__logo" src="/sourcegraph/logo--light.svg" />
</Link>
<ul className="nav footer__social mt-1">
<li className="nav-item">
<a href="https://github.com/sourcegraph" target="_blank">
<GitHubCircleIcon />
</a>
</li>
<li className="nav-item">
<a href="https://twitter.com/srcgraph" target="_blank">
<TwitterIcon />
</a>
</li>
<li className="nav-item">
<a href="https://www.linkedin.com/company/4803356/" target="_blank">
<LinkedinIcon />
</a>
</li>
</ul>
</div>
<div className="col-sm-6 col-md-3 col-lg-2 mb-3">
<h3 className="footer__nav-header">Why Sourcegraph?</h3>
<ul className="nav flex-column">
<li className="nav-item">
<Link to="/product">Product</Link>
</li>
<li className="nav-item">
<Link to="/universal-code-search">What is Universal Code
Search?</Link>
</li>
<li className="nav-item">
<Link to="/pricing">Pricing</Link>
</li>
</ul>
</div>
<div className="col-sm-6 col-md-3 col-lg-2 mb-3">
<h3 className="footer__nav-header">Features &amp; use cases</h3>
<ul className="nav flex-column">
{PRODUCT_FEATURES.map(({ text, to }, i) => (
<li key={i} className="nav-item">
<Link to={to}>{text}</Link>
</li>
))}
{PRODUCT_USE_CASES.map(({ text, to }, i) => (
<li key={i} className="nav-item">
<Link to={to}>{text}</Link>
</li>
))}
</ul>
</div>
<div className="col-sm-6 col-md-3 col-lg-2 mb-3">
<h3 className="footer__nav-header">Resources</h3>
<ul className="nav flex-column">
<li className="nav-item">
<a href="https://docs.sourcegraph.com">Documentation</a>
</li>
<li className="nav-item">
<a href="https://sourcegraph.com/github.com/sourcegraph/sourcegraph/-/blob/CHANGELOG.md">
Changelog
</a>
</li>
<li className="nav-item">
<Link to="/blog">Blog</Link>
</li>
<li className="nav-item">
<Link to="/events">Events</Link>
</li>
</ul>
<React.Fragment>
<div className="row footer__nav-sections">
<div className="col-12 col-lg-3 mb-5">
<Link to="/">
<img className="footer__logo" src="/sourcegraph/logo--light.svg" />
</Link>
<ul className="nav footer__social mt-1">
<li className="nav-item">
<a href="https://github.com/sourcegraph" target="_blank">
<GitHubCircleIcon />
</a>
</li>
<li className="nav-item">
<a href="https://twitter.com/srcgraph" target="_blank">
<TwitterIcon />
</a>
</li>
<li className="nav-item">
<a href="https://www.linkedin.com/company/4803356/" target="_blank">
<LinkedinIcon />
</a>
</li>
</ul>
</div>
<div className="col-sm-6 col-md-3 col-lg-2 mb-3">
<h3 className="footer__nav-header">Why Sourcegraph?</h3>
<ul className="nav flex-column">
<li className="nav-item">
<Link to="/product">Product</Link>
</li>
<li className="nav-item">
<Link to="/universal-code-search">What is Universal Code
Search?</Link>
</li>
<li className="nav-item">
<Link to="/pricing">Pricing</Link>
</li>
</ul>
</div>
<div className="col-sm-6 col-md-3 col-lg-2 mb-3">
<h3 className="footer__nav-header">Features &amp; use cases</h3>
<ul className="nav flex-column">
{PRODUCT_FEATURES.map(({ text, to }, i) => (
<li key={i} className="nav-item">
<Link to={to}>{text}</Link>
</li>
))}
{PRODUCT_USE_CASES.map(({ text, to }, i) => (
<li key={i} className="nav-item">
<Link to={to}>{text}</Link>
</li>
))}
</ul>
</div>
<div className="col-sm-6 col-md-3 col-lg-2 mb-3">
<h3 className="footer__nav-header">Resources</h3>
<ul className="nav flex-column">
<li className="nav-item">
<a href="https://docs.sourcegraph.com">Documentation</a>
</li>
<li className="nav-item">
<a href="https://sourcegraph.com/github.com/sourcegraph/sourcegraph/-/blob/CHANGELOG.md">
Changelog
</a>
</li>
<li className="nav-item">
<Link to="/blog">Blog</Link>
</li>
<li className="nav-item">
<Link to="/events">Events</Link>
</li>
</ul>
</div>
<div className="col-sm-6 col-md-3 col-lg-2 mb-3">
<h3 className="footer__nav-header">Company</h3>
<ul className="nav flex-column">
<li className="nav-item">
<Link to="/plan">Master plan</Link>
</li>
<li className="nav-item">
<Link to="/about">About</Link>
</li>
<li className="nav-item">
<Link to="/news">News</Link>
</li>
<li className="nav-item">
<a href="/handbook">Handbook</a>
</li>
<li className="nav-item">
<Link to="/contact">Contact</Link>
</li>
<li className="nav-item">
<Link to="/jobs">Careers</Link>
</li>
</ul>
</div>
</div>
<div className="col-sm-6 col-md-3 col-lg-2 mb-3">
<h3 className="footer__nav-header">Company</h3>
<ul className="nav flex-column">
<li className="nav-item">
<Link to="/plan">Master plan</Link>
</li>
<li className="nav-item">
<Link to="/about">About</Link>
</li>
<li className="nav-item">
<Link to="/news">News</Link>
</li>
<li className="nav-item">
<a href="/handbook">Handbook</a>
</li>
<li className="nav-item">
<Link to="/contact">Contact</Link>
</li>
<li className="nav-item">
<Link to="/jobs">Careers</Link>
</li>
</ul>
<div id="newsletter-signup-footer" className="newsletter-form-footer row">
<h3 className="footer__newsletter-form-heading col-sm-12 col-md-3 pb-4">
Subscribe to our newsletter
</h3>
<div id={hubspotNewsletterFormId} className="col-md-9">
</div>
</div>
</div>
</React.Fragment>
)}
<div className="footer__postscript d-flex justify-content-between pt-4 pb-2 small">
<ul className="nav">
Expand All @@ -128,4 +149,4 @@ export const Footer: React.FunctionComponent<{ minimal?: boolean }> = ({ minimal
</div>
</div>
</footer>
)
)}
7 changes: 7 additions & 0 deletions website/src/css/components/_Footer.scss
View file
Open in desktop
Expand Up @@ -39,4 +39,11 @@
padding-right: $navbar-nav-link-padding-x * 0.5;
}
}

&__newsletter-form-heading {
opacity: 0.4;
text-transform: uppercase;
font-size: 0.9rem;
font-weight: bolder;
}
}