[Update] Header/Footer New Pricing Submenu/Feature Columns

gatsby-node.js

@@ -119,6 +119,10 @@ exports.sourceNodes = async ({ actions }) => {
       path: `${baseUrl}/submenu-products-developer-tools`,
       name: "ProductsDevTools"
     },
+    {
+      path: `${baseUrl}/submenu-pricing-primary`,
+      name: "PricingPrimary"
+    },
     {
       path: `${baseUrl}/submenu-community-primary`,
       name: "CommunityPrimary"

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

@@ -0,0 +1,51 @@
+import React from "react";
+
+const styles = {
+  color: '#ffffff'
+};
+
+const CommunityFeaturedNav = () => (
+    <div className="o-layout__module">
+      <h6>Featured</h6>
+      <a
+        id="c-featured--community"
+        className="c-featured"
+        href="https://www.linode.com/marketplace/apps/linode/nextcloud/"
+        style={styles}
+      >
+        <img
+          width="632"
+          height="418"
+          src="https://www.linode.com/wp-content/uploads/2020/08/nextcloud-gradient-632x418.png"
+          className="c-featured__background"
+          alt=""
+          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"
+          sizes="(max-width: 632px) 100vw, 632px"
+        />
+        <img
+          width="416"
+          height="416"
+          src="https://www.linode.com/wp-content/uploads/2020/05/linode-nextcloud-white.svg"
+          className="c-featured__image"
+          alt=""
+          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"
+          sizes="(max-width: 416px) 100vw, 416px"
+        />
+        <div className="c-featured__text">
+          <div className="c-featured__headline">
+            New One Click App:<br/>
+            <b>Nextcloud</b>
+          </div>
+          <div className="c-featured__excerpt">Open source productivity and storage management platform.</div>
+          <span
+            className="c-featured__button"
+            href="https://www.linode.com/marketplace/apps/linode/nextcloud/"
+          >
+            Deploy App
+          </span>
+        </div>
+      </a>
+    </div>
+);
+
+export default CommunityFeaturedNav;

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

@@ -1,19 +1,20 @@
 import React from "react";
 
+import CommunityFeatured from "./CommunityFeatured";
 import CommunityPrimary from "./communityPrimary";
 import CommunityServices from "./communityServices";
 
 const CommunityMenus = () => (
   <div className="o-layout__row c-sub-menu c-sub-menu--community" id="sub-menu--community">
     <div className="o-layout__colset">
       <div className="o-layout__col">
-        <CommunityPrimary />
+        <CommunityFeatured />
       </div>
       <div className="o-layout__col">
-        <CommunityServices />
+        <CommunityPrimary />
       </div>
       <div className="o-layout__col">
-
+        <CommunityServices />
       </div>
     </div>
   </div>

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

@@ -0,0 +1,43 @@
+import React from "react";
+const styles = {
+  borderWidth: 2,
+  borderColor: '#ededf4'
+};
+
+const PricingFeaturedNav = () => (
+    <div className="o-layout__module">
+      <h6>Featured</h6>
+        <a
+          id="c-featured--pricing"
+          className="c-featured"
+          href="https://www.linode.com/lp/tco-calculator/"
+          style={styles}
+        >
+          <img
+            width="416"
+            height="376"
+            src="https://www.linode.com/wp-content/uploads/2020/08/TCOReport_MockUp2-416x376.png"
+            className="c-featured__image"
+            alt=""
+            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"
+            sizes="(max-width: 416px) 100vw, 416px"
+          />
+          <div className="c-featured__text">
+            <div className="c-featured__headline">
+              Total Cost of Ownership Calculator
+            </div>
+            <div className="c-featured__excerpt">
+              Migrating from on-premises or between cloud providers for hosting, cloud storage, or cloud computing?
+            </div>
+            <span
+              className="c-featured__button"
+              href="https://www.linode.com/lp/tco-calculator/"
+            >
+              Launch Calculator
+            </span>
+          </div>
+        </a>
+    </div>
+);
+
+export default PricingFeaturedNav;

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

@@ -0,0 +1,19 @@
+import React from "react";
+
+import PricingFeatured from "./pricingFeatured";
+import PricingPrimary from "./pricingPrimary";
+
+const PricingMenus = () => (
+  <div className="o-layout__row c-sub-menu c-sub-menu--pricing" id="sub-menu--pricing">
+    <div className="o-layout__colset">
+      <div className="o-layout__col">
+        <PricingFeatured />
+      </div>
+      <div className="o-layout__col">
+        <PricingPrimary />
+      </div>
+    </div>
+  </div>
+);
+
+export default PricingMenus;

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

@@ -0,0 +1,46 @@
+import React from "react";
+import { StaticQuery, graphql } from "gatsby";
+import Col from "./col";
+
+const PricingPrimary = ({ data }) => {
+  return (
+    <Col name="pricing-primary" header="Pricing">
+      {data.allPricingPrimary.edges.map((link, i) => {
+        const node = link.node;
+        return (
+          <li className="o-menu__item" key={i}>
+            <a
+              key={node.id}
+              href={node.url ? node.url : null}
+              className="o-menu__link"
+              role="menuitem"
+            >
+              <span className="o-menu__title">
+                {node.title}
+              </span>
+            </a>
+          </li>
+        );
+      })}
+    </Col>
+  );
+};
+
+export default props => (
+  <StaticQuery
+    query={graphql`
+      query pricingPrimary {
+        allPricingPrimary {
+          edges {
+            node {
+              id
+              title
+              url
+            }
+          }
+        }
+      }
+    `}
+    render={data => <PricingPrimary data={data} {...props} />}
+  />
+);

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

@@ -123,9 +123,9 @@ class MainSiteNav extends React.Component {
                   </span>
                 </a>
               </li>
-              <li className="o-menu__item">
-                <a className="o-menu__link" href="https://linode.com/pricing">
-                  <span className="o-menu__title">
+              <li className="o-menu__item" data-submenu="sub-menu--pricing">
+                <a className="o-menu__link" href="#sub-menu--pricing" data-submenu="sub-menu--pricing">
+                  <span className="o-menu__title" data-submenu="sub-menu--pricing">
                     Pricing
                   </span>
                 </a>
@@ -144,13 +144,6 @@ class MainSiteNav extends React.Component {
                   </span>
                 </a>
               </li>
-              <li className="o-menu__item o-menu__item--search">
-                <a className="o-menu__link" href="https://linode.com/search">
-                  <span className="o-menu__title">
-                    Search
-                  </span>
-                </a>
-              </li>
               <li className="o-menu__item o-menu__item--mobile" data-submenu="sub-menu--mobile">
                 <a id="o-menu__link--mobile" className="o-menu__link" href="#sub-menu--mobile" data-submenu="sub-menu--mobile">
                   <span className="o-menu__title" data-submenu="sub-menu--mobile">

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

@@ -1,64 +1,50 @@
 import React from "react";
-import { StaticQuery, graphql } from "gatsby";
-import Col from "./col";
-
-const _ = require("lodash");
-
-const ProductsFeaturedNav = ({ data }) => {
-  return (
-    <Col name="products-featured" header="Featured">
-      {data.allProductsFeatured.edges.map((link, i) => {
-        const node = link.node;
-        return (
-          <li className="sub-menu__li sub-menu__header-li" key={i}>
-            <a
-              key={node.id}
-              href={node.url ? node.url : null}
-              className={`
-                  header__link
-                  sub-menu__link
-                  sub-menu__header-link
-                  sub-menu__header-link--w-icon
-                  why-primary-nav__link
-                  ${_.kebabCase(node.title)}
-                `}
-              role="menuitem"
-            >
-              <img
-                src={node.icon}
-                className="sub-menu__icon"
-                alt={node.title}
-              />
-              <span className="sub-menu__body">
-                <span className="sub-menu__title">{node.title}</span>
-                <span className="sub-menu__description">
-                  {node.description}
-                </span>
-              </span>
-            </a>
-          </li>
-        );
-      })}
-    </Col>
-  );
+const styles1 = {
+  borderWidth: 2,
+  borderColor: '#ededf4'
+};
+const styles2 = {
+  alignSelf: 'flex-end',
+  marginBottom: -24,
+  marginLeft: -24,
+  marginRight: -24,
+  maxWidth: '50%'
 };
 
-export default props => (
-  <StaticQuery
-    query={graphql`
-      query productsFeatured {
-        allProductsFeatured {
-          edges {
-            node {
-              id
-              title
-              url
-              description
-            }
-          }
-        }
-      }
-    `}
-    render={data => <ProductsFeaturedNav data={data} {...props} />}
-  />
+const ProductsFeaturedNav = () => (
+
+    <div className="o-layout__module">
+      <h6>Featured</h6>
+      <a
+        id="c-featured--products"
+        className="c-featured"
+        href="https://www.linode.com/products/gpu/"
+        style={styles1}
+      >
+        <img
+          width="400"
+          height="339"
+          src="https://www.linode.com/wp-content/uploads/2020/08/mum-fg.png"
+          className="c-featured__image"
+          alt=""
+          style={styles2}
+        />
+        <div className="c-featured__text">
+          <div className="c-featured__headline">
+            <b>GPUs have landed in Mumbai!</b>
+          </div>
+          <div className="c-featured__excerpt">
+            On-demand GPUs for machine learning, scientific computing, and video processing.
+          </div>
+          <span
+            className="c-featured__button"
+            href="https://www.linode.com/products/gpu/"
+          >
+            Try Today
+          </span>
+        </div>
+      </a>
+    </div>
 );
+
+export default ProductsFeaturedNav;

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

@@ -1,5 +1,6 @@
 import React from "react";
 
+import ProductsFeatured from "./ProductsFeatured";
 import ProductsCompute from "./productsCompute";
 import ProductsStorage from "./productsStorage";
 import ProductsServices from "./productsServices";
@@ -9,6 +10,14 @@ import ProductsDevTools from "./productsDevTools";
 const ProductMenus = () => (
   <div className="o-layout__row c-sub-menu c-sub-menu--products" id="sub-menu--products">
     <div className="o-layout__colset">
+      <div className="o-layout__col">
+        <ProductsFeatured />
+        <div className="o-layout__module">
+          <a href="https://linode.com/products/" className="o-button o-button--link">
+            View All Products
+          </a>
+        </div>
+      </div>
       <div className="o-layout__col">
         <ProductsCompute />
         <ProductsStorage />
@@ -18,18 +27,6 @@ const ProductMenus = () => (
         <ProductsNetworking />
         <ProductsDevTools />
       </div>
-      <div className="o-layout__col">
-
-      </div>
-    </div>
-    <div className="o-layout__colset">
-      <div className="o-layout__col">
-        <div className="o-layout__module">
-          <a href="https://linode.com/products/" className="o-button o-button--link">
-            View All Products
-          </a>
-        </div>
-      </div>
     </div>
   </div>
 );

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

@@ -11,6 +11,18 @@ const MainSiteGlobalMenu = ({ data }) => {
           className="o-menu__list"
           aria-expanded="false"
         >
+          <li className="o-menu__item o-menu__item--search">
+            <a
+              className="o-menu__link"
+              href="https://www.linode.com/search/"
+            >
+              <span
+                className="o-menu__title"
+              >
+                Search
+              </span>
+            </a>
+          </li>
           {data.allHeaderUtility.edges.map(link => {
             const node = link.node;
             return (