Skip to content
This repository was archived by the owner on Oct 11, 2022. It is now read-only.

Commit b205492

Browse files
brianlovinbrianlovin
authored
Merge pull request #3251 from withspectrum/concierge-page
Add concierge page and section on pricing
2 parents 31ab6e8 + 473d533 commit b205492

File tree

14 files changed

+201
-25
lines changed

14 files changed

+201
-25
lines changed

‎cypress/integration/concierge_spec.js‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
describe('Renders conceirge page ', () => {
2+
beforeEach(() => {
3+
cy.visit(`/pricing/concierge`);
4+
});
5+
6+
it('should render key conceirge page components', () => {
7+
cy.get('[data-cy="concierge-page"]').should('be.visible');
8+
});
9+
});

‎shared/analytics/event-types/index.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import * as pageHomeEvents from './page-home'
1414
import * as pageInboxEvents from './page-inbox'
1515
import * as pageLoginEvents from './page-login'
1616
import * as pagePricingEvents from './page-pricing'
17+
import * as pageConciergeEvents from './page-concierge'
1718
import * as pageSupportEvents from './page-support'
1819
import * as pwaEvents from './pwa'
1920
import * as reactionEvents from './reaction'
@@ -39,6 +40,7 @@ export const events = {
3940
...pageInboxEvents,
4041
...pageLoginEvents,
4142
...pagePricingEvents,
43+
...pageConciergeEvents,
4244
...pageSupportEvents,
4345
...pagePricingEvents,
4446
...pwaEvents,

‎shared/analytics/event-types/page-concierge.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
// @flow
2+
3+
export const CONCIERGE_PAGE_VIEWED = 'Concierge Page Viewed';
4+
export const CONCIERGE_PAGE_CONTACT_US_CLICKED = 'Concierge Page Contact Us Clicked';
5+
export const CONCIERGE_PAGE_LEARN_MORE_CLICKED = 'Concierge Page Learn More Clicked';

‎src/helpers/is-viewing-marketing-page.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ export const isViewingMarketingPage = (
1313
viewing === '/about' ||
1414
viewing === '/code-of-conduct' ||
1515
viewing === '/contact' ||
16+
viewing === '/pricing/concierge' ||
1617
viewing === '/pricing' ||
1718
viewing === '/privacy' ||
1819
viewing === '/privacy.html' ||

‎src/routes.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -205,6 +205,7 @@ class Routes extends React.Component<{||}> {
205205
<Route path="/terms.html" component={Pages} />
206206
<Route path="/privacy.html" component={Pages} />
207207
<Route path="/code-of-conduct" component={Pages} />
208+
<Route path="/pricing/concierge" component={Pages} />
208209
<Route path="/pricing" component={Pages} />
209210
<Route path="/support" component={Pages} />
210211
<Route path="/features" component={Pages} />

‎src/views/explore/style.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -266,6 +266,7 @@ export const SearchWrapper = styled(Card)`
266266
box-shadow: ${Shadow.low} ${props => hexa(props.theme.bg.reverse, 0.15)};
267267
transition: ${Transition.hover.off};
268268
z-index: ${zIndex.search};
269+
border-radius: 8px;
269270
270271
&:hover {
271272
box-shadow: ${Shadow.high} ${props => hexa(props.theme.bg.reverse, 0.25)};

‎src/views/pages/components/nav.js‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,10 @@ class Nav extends React.Component<Props, State> {
7777
</FeaturesTab>
7878
<PricingTab
7979
dark={this.props.dark}
80-
selected={this.props.location === 'pricing'}
80+
selected={
81+
this.props.location === 'pricing' ||
82+
this.props.location === 'pricing/concierge'
83+
}
8184
to="/pricing"
8285
data-cy="navbar-splash-pricing"
8386
>
@@ -134,7 +137,10 @@ class Nav extends React.Component<Props, State> {
134137
</FeaturesLink>
135138
<PricingLink
136139
to="/pricing"
137-
selected={this.props.location === 'pricing'}
140+
selected={
141+
this.props.location === 'pricing' ||
142+
this.props.location === 'pricing/concierge'
143+
}
138144
>
139145
<Icon glyph="payment" />Pricing<Icon glyph="enter" />
140146
</PricingLink>

‎src/views/pages/concierge/components/intro.js‎

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
// @flow
2+
import React from 'react';
3+
import Link from 'src/components/link';
4+
import Section from 'src/components/themedSection';
5+
import Feature from '../../pricing/components/feature';
6+
import {
7+
TwoUp,
8+
Left,
9+
Right,
10+
Heading,
11+
Copy,
12+
CTA,
13+
TextCTA,
14+
PlanSection,
15+
PlanPrice,
16+
PlanDescription,
17+
PlanFeatures,
18+
Actions,
19+
} from '../../pricing/style';
20+
import { track, events } from 'src/helpers/analytics';
21+
22+
type Props = {
23+
goopColor?: string,
24+
};
25+
26+
const Intro = (props: Props) => {
27+
const { goopColor = 'bg.reverse' } = props;
28+
return (
29+
<Section goop={4} color={goopColor}>
30+
<TwoUp>
31+
<Left>
32+
<Heading>Introducing Concierge</Heading>
33+
<Copy>
34+
As a team, we’ve spent years building online communities and we’ve
35+
seen how valuable they can be to businesses when managed well. But
36+
that’s a full-time job, and a lot of businesses don’t have the
37+
access or the budget to hire experienced, full-time community
38+
managers.
39+
</Copy>
40+
<Copy>
41+
There are a lot of hard problems to solve when you’re starting a
42+
community from scratch, but now you don’t have to face these
43+
problems alone.
44+
</Copy>
45+
<Actions>
46+
<a
47+
onClick={() => track(events.CONCIERGE_PAGE_CONTACT_US_CLICKED)}
48+
href={'mailto:[email protected]'}
49+
>
50+
<CTA
51+
style={{
52+
padding: '16px 24px',
53+
fontSize: '18px',
54+
marginTop: '0',
55+
}}
56+
large
57+
>
58+
Contact our team
59+
</CTA>
60+
</a>
61+
62+
<Link
63+
onClick={() => track(events.CONCIERGE_PAGE_LEARN_MORE_CLICKED)}
64+
to={`/thread/c5a6ea22-eb8f-4247-bed4-c322f6177c94`}
65+
>
66+
<TextCTA>Learn more</TextCTA>
67+
</Link>
68+
</Actions>
69+
</Left>
70+
<Right>
71+
<PlanSection>
72+
<PlanPrice>Let Spectrum handle the hard parts.</PlanPrice>
73+
<PlanDescription>
74+
Concierge makes the most painful elements of community management
75+
easy:
76+
</PlanDescription>
77+
<PlanFeatures>
78+
<Feature title={'Formulating a community strategy'} />
79+
<Feature title={'Launching or migrating your community'} />
80+
<Feature title={'Developing a content pipeline'} />
81+
<Feature title={`Understanding your community's impact`} />
82+
<Feature title={'Managing time efficiently'} />
83+
</PlanFeatures>
84+
</PlanSection>
85+
</Right>
86+
</TwoUp>
87+
</Section>
88+
);
89+
};
90+
91+
export default Intro;

‎src/views/pages/concierge/index.js‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
// @flow
2+
import * as React from 'react';
3+
import PageFooter from '../components/footer';
4+
import { Wrapper } from '../style';
5+
import Intro from './components/intro';
6+
import type { ContextRouter } from 'react-router';
7+
import { track, events } from 'src/helpers/analytics';
8+
9+
type Props = {
10+
...$Exact<ContextRouter>,
11+
};
12+
13+
class Concierge extends React.Component<Props> {
14+
componentDidMount() {
15+
track(events.CONCIERGE_PAGE_VIEWED);
16+
}
17+
18+
render() {
19+
return (
20+
<Wrapper data-cy="concierge-page">
21+
<Intro />
22+
<PageFooter />
23+
</Wrapper>
24+
);
25+
}
26+
}
27+
28+
export { Intro };
29+
30+
export default Concierge;

‎src/views/pages/index.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import Nav from './components/nav';
44
import Support from './support';
55
import Features from './features';
66
import Pricing from './pricing';
7+
import Concierge from './concierge';
78
import Home from './home';
89
import Terms from './terms';
910
import Privacy from './privacy';
@@ -20,6 +21,9 @@ class Pages extends React.Component<Props> {
2021
case '/support': {
2122
return <Support {...this.props} />;
2223
}
24+
case '/pricing/concierge': {
25+
return <Concierge {...this.props} />;
26+
}
2327
case '/pricing': {
2428
return <Pricing {...this.props} />;
2529
}

0 commit comments

Comments
 (0)