Skip to content

Commit fde0d84

Browse files
bbiggerrbbiggerr
authored
Merge pull request linode#241 from hzoppetti/header-footer-feature-update
[Update] Header/Footer New Pricing Submenu/Feature Columns
2 parents 43f9e60 + 1368bda commit fde0d84

File tree

16 files changed

+682
-409
lines changed

16 files changed

+682
-409
lines changed

‎gatsby-node.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -119,6 +119,10 @@ exports.sourceNodes = async ({ actions }) => {
119119
path: `${baseUrl}/submenu-products-developer-tools`,
120120
name: "ProductsDevTools"
121121
},
122+
{
123+
path: `${baseUrl}/submenu-pricing-primary`,
124+
name: "PricingPrimary"
125+
},
122126
{
123127
path: `${baseUrl}/submenu-community-primary`,
124128
name: "CommunityPrimary"

‎src/components/2_molecules/navigation/communityFeatured.js

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
import React from "react";
2+
3+
const styles = {
4+
color: '#ffffff'
5+
};
6+
7+
const CommunityFeaturedNav = () => (
8+
<div className="o-layout__module">
9+
<h6>Featured</h6>
10+
<a
11+
id="c-featured--community"
12+
className="c-featured"
13+
href="https://www.linode.com/marketplace/apps/linode/nextcloud/"
14+
style={styles}
15+
>
16+
<img
17+
width="632"
18+
height="418"
19+
src="https://www.linode.com/wp-content/uploads/2020/08/nextcloud-gradient-632x418.png"
20+
className="c-featured__background"
21+
alt=""
22+
srcSet="https://www.linode.com/wp-content/uploads/2020/08/nextcloud-gradient-632x418.png 632w, https://www.linode.com/wp-content/uploads/2020/08/nextcloud-gradient-416x275.png 416w, https://www.linode.com/wp-content/uploads/2020/08/nextcloud-gradient-768x508.png 768w, https://www.linode.com/wp-content/uploads/2020/08/nextcloud-gradient.png 1000w"
23+
sizes="(max-width: 632px) 100vw, 632px"
24+
/>
25+
<img
26+
width="416"
27+
height="416"
28+
src="https://www.linode.com/wp-content/uploads/2020/05/linode-nextcloud-white.svg"
29+
className="c-featured__image"
30+
alt=""
31+
srcSet="https://www.linode.com/wp-content/uploads//2020/05/linode-nextcloud-white.svg 416w, https://www.linode.com/wp-content/uploads//2020/05/linode-nextcloud-white.svg 632w, https://www.linode.com/wp-content/uploads//2020/05/linode-nextcloud-white.svg 1064w"
32+
sizes="(max-width: 416px) 100vw, 416px"
33+
/>
34+
<div className="c-featured__text">
35+
<div className="c-featured__headline">
36+
New One Click App:<br/>
37+
<b>Nextcloud</b>
38+
</div>
39+
<div className="c-featured__excerpt">Open source productivity and storage management platform.</div>
40+
<span
41+
className="c-featured__button"
42+
href="https://www.linode.com/marketplace/apps/linode/nextcloud/"
43+
>
44+
Deploy App
45+
</span>
46+
</div>
47+
</a>
48+
</div>
49+
);
50+
51+
export default CommunityFeaturedNav;

‎src/components/2_molecules/navigation/communityMenus.js

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,20 @@
11
import React from "react";
22

3+
import CommunityFeatured from "./CommunityFeatured";
34
import CommunityPrimary from "./communityPrimary";
45
import CommunityServices from "./communityServices";
56

67
const CommunityMenus = () => (
78
<div className="o-layout__row c-sub-menu c-sub-menu--community" id="sub-menu--community">
89
<div className="o-layout__colset">
910
<div className="o-layout__col">
10-
<CommunityPrimary />
11+
<CommunityFeatured />
1112
</div>
1213
<div className="o-layout__col">
13-
<CommunityServices />
14+
<CommunityPrimary />
1415
</div>
1516
<div className="o-layout__col">
16-
17+
<CommunityServices />
1718
</div>
1819
</div>
1920
</div>

‎src/components/2_molecules/navigation/pricingFeatured.js

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import React from "react";
2+
const styles = {
3+
borderWidth: 2,
4+
borderColor: '#ededf4'
5+
};
6+
7+
const PricingFeaturedNav = () => (
8+
<div className="o-layout__module">
9+
<h6>Featured</h6>
10+
<a
11+
id="c-featured--pricing"
12+
className="c-featured"
13+
href="https://www.linode.com/lp/tco-calculator/"
14+
style={styles}
15+
>
16+
<img
17+
width="416"
18+
height="376"
19+
src="https://www.linode.com/wp-content/uploads/2020/08/TCOReport_MockUp2-416x376.png"
20+
className="c-featured__image"
21+
alt=""
22+
srcSet="https://www.linode.com/wp-content/uploads/2020/08/TCOReport_MockUp2-416x376.png 416w, https://www.linode.com/wp-content/uploads/2020/08/TCOReport_MockUp2.png 620w"
23+
sizes="(max-width: 416px) 100vw, 416px"
24+
/>
25+
<div className="c-featured__text">
26+
<div className="c-featured__headline">
27+
Total Cost of Ownership Calculator
28+
</div>
29+
<div className="c-featured__excerpt">
30+
Migrating from on-premises or between cloud providers for hosting, cloud storage, or cloud computing?
31+
</div>
32+
<span
33+
className="c-featured__button"
34+
href="https://www.linode.com/lp/tco-calculator/"
35+
>
36+
Launch Calculator
37+
</span>
38+
</div>
39+
</a>
40+
</div>
41+
);
42+
43+
export default PricingFeaturedNav;

‎src/components/2_molecules/navigation/pricingMenus.js

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import React from "react";
2+
3+
import PricingFeatured from "./pricingFeatured";
4+
import PricingPrimary from "./pricingPrimary";
5+
6+
const PricingMenus = () => (
7+
<div className="o-layout__row c-sub-menu c-sub-menu--pricing" id="sub-menu--pricing">
8+
<div className="o-layout__colset">
9+
<div className="o-layout__col">
10+
<PricingFeatured />
11+
</div>
12+
<div className="o-layout__col">
13+
<PricingPrimary />
14+
</div>
15+
</div>
16+
</div>
17+
);
18+
19+
export default PricingMenus;

‎src/components/2_molecules/navigation/pricingPrimary.js

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
import React from "react";
2+
import { StaticQuery, graphql } from "gatsby";
3+
import Col from "./col";
4+
5+
const PricingPrimary = ({ data }) => {
6+
return (
7+
<Col name="pricing-primary" header="Pricing">
8+
{data.allPricingPrimary.edges.map((link, i) => {
9+
const node = link.node;
10+
return (
11+
<li className="o-menu__item" key={i}>
12+
<a
13+
key={node.id}
14+
href={node.url ? node.url : null}
15+
className="o-menu__link"
16+
role="menuitem"
17+
>
18+
<span className="o-menu__title">
19+
{node.title}
20+
</span>
21+
</a>
22+
</li>
23+
);
24+
})}
25+
</Col>
26+
);
27+
};
28+
29+
export default props => (
30+
<StaticQuery
31+
query={graphql`
32+
query pricingPrimary {
33+
allPricingPrimary {
34+
edges {
35+
node {
36+
id
37+
title
38+
url
39+
}
40+
}
41+
}
42+
}
43+
`}
44+
render={data => <PricingPrimary data={data} {...props} />}
45+
/>
46+
);

‎src/components/2_molecules/navigation/primaryNav.js

Lines changed: 3 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -123,9 +123,9 @@ class MainSiteNav extends React.Component {
123123
</span>
124124
</a>
125125
</li>
126-
<li className="o-menu__item">
127-
<a className="o-menu__link" href="https://linode.com/pricing">
128-
<span className="o-menu__title">
126+
<li className="o-menu__item" data-submenu="sub-menu--pricing">
127+
<a className="o-menu__link" href="#sub-menu--pricing" data-submenu="sub-menu--pricing">
128+
<span className="o-menu__title" data-submenu="sub-menu--pricing">
129129
Pricing
130130
</span>
131131
</a>
@@ -144,13 +144,6 @@ class MainSiteNav extends React.Component {
144144
</span>
145145
</a>
146146
</li>
147-
<li className="o-menu__item o-menu__item--search">
148-
<a className="o-menu__link" href="https://linode.com/search">
149-
<span className="o-menu__title">
150-
Search
151-
</span>
152-
</a>
153-
</li>
154147
<li className="o-menu__item o-menu__item--mobile" data-submenu="sub-menu--mobile">
155148
<a id="o-menu__link--mobile" className="o-menu__link" href="#sub-menu--mobile" data-submenu="sub-menu--mobile">
156149
<span className="o-menu__title" data-submenu="sub-menu--mobile">

‎src/components/2_molecules/navigation/productsFeatured.js

Lines changed: 46 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -1,64 +1,50 @@
11
import React from "react";
2-
import { StaticQuery, graphql } from "gatsby";
3-
import Col from "./col";
4-
5-
const _ = require("lodash");
6-
7-
const ProductsFeaturedNav = ({ data }) => {
8-
return (
9-
<Col name="products-featured" header="Featured">
10-
{data.allProductsFeatured.edges.map((link, i) => {
11-
const node = link.node;
12-
return (
13-
<li className="sub-menu__li sub-menu__header-li" key={i}>
14-
<a
15-
key={node.id}
16-
href={node.url ? node.url : null}
17-
className={`
18-
header__link
19-
sub-menu__link
20-
sub-menu__header-link
21-
sub-menu__header-link--w-icon
22-
why-primary-nav__link
23-
${_.kebabCase(node.title)}
24-
`}
25-
role="menuitem"
26-
>
27-
<img
28-
src={node.icon}
29-
className="sub-menu__icon"
30-
alt={node.title}
31-
/>
32-
<span className="sub-menu__body">
33-
<span className="sub-menu__title">{node.title}</span>
34-
<span className="sub-menu__description">
35-
{node.description}
36-
</span>
37-
</span>
38-
</a>
39-
</li>
40-
);
41-
})}
42-
</Col>
43-
);
2+
const styles1 = {
3+
borderWidth: 2,
4+
borderColor: '#ededf4'
5+
};
6+
const styles2 = {
7+
alignSelf: 'flex-end',
8+
marginBottom: -24,
9+
marginLeft: -24,
10+
marginRight: -24,
11+
maxWidth: '50%'
4412
};
4513

46-
export default props => (
47-
<StaticQuery
48-
query={graphql`
49-
query productsFeatured {
50-
allProductsFeatured {
51-
edges {
52-
node {
53-
id
54-
title
55-
url
56-
description
57-
}
58-
}
59-
}
60-
}
61-
`}
62-
render={data => <ProductsFeaturedNav data={data} {...props} />}
63-
/>
14+
const ProductsFeaturedNav = () => (
15+
16+
<div className="o-layout__module">
17+
<h6>Featured</h6>
18+
<a
19+
id="c-featured--products"
20+
className="c-featured"
21+
href="https://www.linode.com/products/gpu/"
22+
style={styles1}
23+
>
24+
<img
25+
width="400"
26+
height="339"
27+
src="https://www.linode.com/wp-content/uploads/2020/08/mum-fg.png"
28+
className="c-featured__image"
29+
alt=""
30+
style={styles2}
31+
/>
32+
<div className="c-featured__text">
33+
<div className="c-featured__headline">
34+
<b>GPUs have landed in Mumbai!</b>
35+
</div>
36+
<div className="c-featured__excerpt">
37+
On-demand GPUs for machine learning, scientific computing, and video processing.
38+
</div>
39+
<span
40+
className="c-featured__button"
41+
href="https://www.linode.com/products/gpu/"
42+
>
43+
Try Today
44+
</span>
45+
</div>
46+
</a>
47+
</div>
6448
);
49+
50+
export default ProductsFeaturedNav;

‎src/components/2_molecules/navigation/productsMenus.js

Lines changed: 9 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React from "react";
22

3+
import ProductsFeatured from "./ProductsFeatured";
34
import ProductsCompute from "./productsCompute";
45
import ProductsStorage from "./productsStorage";
56
import ProductsServices from "./productsServices";
@@ -9,6 +10,14 @@ import ProductsDevTools from "./productsDevTools";
910
const ProductMenus = () => (
1011
<div className="o-layout__row c-sub-menu c-sub-menu--products" id="sub-menu--products">
1112
<div className="o-layout__colset">
13+
<div className="o-layout__col">
14+
<ProductsFeatured />
15+
<div className="o-layout__module">
16+
<a href="https://linode.com/products/" className="o-button o-button--link">
17+
View All Products
18+
</a>
19+
</div>
20+
</div>
1221
<div className="o-layout__col">
1322
<ProductsCompute />
1423
<ProductsStorage />
@@ -18,18 +27,6 @@ const ProductMenus = () => (
1827
<ProductsNetworking />
1928
<ProductsDevTools />
2029
</div>
21-
<div className="o-layout__col">
22-
23-
</div>
24-
</div>
25-
<div className="o-layout__colset">
26-
<div className="o-layout__col">
27-
<div className="o-layout__module">
28-
<a href="https://linode.com/products/" className="o-button o-button--link">
29-
View All Products
30-
</a>
31-
</div>
32-
</div>
3330
</div>
3431
</div>
3532
);

‎src/components/2_molecules/navigation/utilityNav.js

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,18 @@ const MainSiteGlobalMenu = ({ data }) => {
1111
className="o-menu__list"
1212
aria-expanded="false"
1313
>
14+
<li className="o-menu__item o-menu__item--search">
15+
<a
16+
className="o-menu__link"
17+
href="https://www.linode.com/search/"
18+
>
19+
<span
20+
className="o-menu__title"
21+
>
22+
Search
23+
</span>
24+
</a>
25+
</li>
1426
{data.allHeaderUtility.edges.map(link => {
1527
const node = link.node;
1628
return (

0 commit comments

Comments
 (0)