Skip to content

Commit

Permalink
feat: use PageLayout for index page
Browse files Browse the repository at this point in the history
  • Loading branch information
@jerelmiller
jerelmiller committed Jul 30, 2020
1 parent 11d156e commit b9a5fc8
Showing 1 changed file with 170 additions and 174 deletions.
344 changes: 170 additions & 174 deletions src/pages/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,14 @@
import React, { useState } from 'react';
import PropTypes from 'prop-types';
import cx from 'classnames';
import { css } from '@emotion/core';
import { graphql, Link } from 'gatsby';

import SEO from '../components/Seo';
import { Button } from '@newrelic/gatsby-theme-newrelic';
import GuideListing from '../components/GuideListing/GuideListing';
import GuideTile from '../components/GuideTile/GuideTile';
import PageTitle from '../components/PageTitle';
import PageLayout from '../components/PageLayout';
import Video from '../components/Video';
import FeatherIcon from '../components/FeatherIcon';
import ExternalLink from '../components/ExternalLink';
Expand Down Expand Up @@ -42,28 +43,6 @@ const getStartedGuides = [
},
];

// TODO: Remove the following after the guides have been created
// const guides = [
// {
// minutes: 25,
// title: 'Provision with Terraform',
// description: 'Provision an alert policy with notifications using Terraform',
// path: '/',
// },
// {
// minutes: 15,
// title: ' Set up dev tools',
// description: 'Get an API key, download the CLI, and start building apps',
// path: '/build-apps/set-up-dev-env',
// },
// {
// minutes: 30,
// title: 'Add a table to your app',
// description: 'Use New Relic One components to add a table to your app',
// path: '/build-apps/howto-use-nrone-table-components',
// },
// ];

const IndexPage = ({ data, pageContext }) => {
const {
allMdx: { nodes },
Expand All @@ -74,169 +53,186 @@ const IndexPage = ({ data, pageContext }) => {

return (
<PageContext.Provider value={pageContext}>
<>
<SEO />
<PageTitle>Observability for every developer</PageTitle>
<SEO />
<PageLayout type={PageLayout.TYPE.SINGLE_COLUMN}>
<PageLayout.Header title="Observability for every developer" />

<section className={cx(styles.intro, 'intro-text')}>
<div className={styles.introText}>
<p>
Whether you're new to New Relic or already a data nerd, you can
start building right now. For free.
</p>
<p>
With our platform as your foundation, create custom observability
apps fast. Answer your unique questions, improve your software,
and deliver new value to your business.
</p>
<p>We're glad you are here. Let's start building.</p>
</div>
<Video
className={styles.introVideo}
id="lzrwubc09a"
type="wistia"
title="Develop with New Relic"
/>
</section>
<PageLayout.Content>
<section
css={css`
margin-top: 0;
`}
className={cx(styles.intro, 'intro-text')}
>
<div className={styles.introText}>
<p>
Whether you're new to New Relic or already a data nerd, you can
start building right now. For free.
</p>
<p>
With our platform as your foundation, create custom
observability apps fast. Answer your unique questions, improve
your software, and deliver new value to your business.
</p>
<p>We're glad you are here. Let's start building.</p>
</div>
<Video
className={styles.introVideo}
id="lzrwubc09a"
type="wistia"
title="Develop with New Relic"
/>
</section>

<section className={cx(styles.section, styles.stripedSection)}>
<GuideListing className={styles.guideListing}>
<header className={styles.guideListingHeader}>
<GuideListing.Heading className={cx(styles.guideListingHeading)}>
Get coding
</GuideListing.Heading>
<Button
as={ExternalLink}
variant={Button.VARIANT.PRIMARY}
href="https://newrelic.com/signup?partner=Developer+Edition"
>
Create an account
</Button>
</header>
<GuideListing.List>
{getStartedGuides.map((guide, index) => (
<GuideTile key={index} featured {...guide}>
<GuideTile.Button to={guide.path}>
Start the guide
</GuideTile.Button>
</GuideTile>
<section className={cx(styles.section, styles.stripedSection)}>
<GuideListing className={styles.guideListing}>
<header className={styles.guideListingHeader}>
<GuideListing.Heading
className={cx(styles.guideListingHeading)}
>
Get coding
</GuideListing.Heading>
<Button
as={ExternalLink}
variant={Button.VARIANT.PRIMARY}
href="https://newrelic.com/signup?partner=Developer+Edition"
>
Create an account
</Button>
</header>
<GuideListing.List>
{getStartedGuides.map((guide, index) => (
<GuideTile key={index} featured {...guide}>
<GuideTile.Button to={guide.path}>
Start the guide
</GuideTile.Button>
</GuideTile>
))}
</GuideListing.List>
</GuideListing>
</section>

<GuideListing className={styles.section}>
<GuideListing.Heading className={styles.guideListingHeading}>
Get inspired
</GuideListing.Heading>
<GuideListing.List className={styles.allGuidesListing}>
{guides.map(({ frontmatter }, index) => (
<GuideTile
as={Link}
to={frontmatter.path}
key={index}
duration={frontmatter.duration}
title={frontmatter.tileShorthand?.title || frontmatter.title}
description={
frontmatter.tileShorthand?.description ||
frontmatter.description
}
path={frontmatter.path}
alignment={GuideTile.ALIGNMENT.LEFT}
/>
))}
</GuideListing.List>
</GuideListing>
</section>

<GuideListing className={styles.section}>
<GuideListing.Heading className={styles.guideListingHeading}>
Get inspired
</GuideListing.Heading>
<GuideListing.List className={styles.allGuidesListing}>
{guides.map(({ frontmatter }, index) => (
<GuideTile
as={Link}
to={frontmatter.path}
key={index}
duration={frontmatter.duration}
title={frontmatter.tileShorthand?.title || frontmatter.title}
description={
frontmatter.tileShorthand?.description ||
frontmatter.description
}
path={frontmatter.path}
alignment={GuideTile.ALIGNMENT.LEFT}
/>
))}
</GuideListing.List>
</GuideListing>
{guides.length === numberOfPromotedGuides && (
<div className={styles.buttonContainer}>
<Button
className={styles.expandGuides}
type="button"
onClick={() => setGuides(nodes)}
variant={Button.VARIANT.NORMAL}
>
{`Show ${guidesMinusPromoted} more guides`}
</Button>
</div>
)}

<p className={styles.inspiration}>
Looking for more inspiration? Check out the{' '}
<ExternalLink
className={styles.externalLink}
href="https://opensource.newrelic.com"
>
open source projects
<FeatherIcon
className={styles.externalLinkIcon}
name="external-link"
/>
</ExternalLink>{' '}
built by the New Relic community.
</p>

<section
className={cx(
styles.section,
styles.stripedSection,
styles.developerChampions
{guides.length === numberOfPromotedGuides && (
<div className={styles.buttonContainer}>
<Button
className={styles.expandGuides}
type="button"
onClick={() => setGuides(nodes)}
variant={Button.VARIANT.NORMAL}
>
{`Show ${guidesMinusPromoted} more guides`}
</Button>
</div>
)}
>
<div>
<h1>New Relic developer champions</h1>
<p>
New Relic Champions are solving big problems using New Relic as
their linchpin and are recognized as experts and leaders in the
New Relic technical community.
</p>
<Button
as={ExternalLink}
variant={Button.VARIANT.PRIMARY}
href="https://forms.gle/Zkdub5e1x4MNqSKW9"

<p className={styles.inspiration}>
Looking for more inspiration? Check out the{' '}
<ExternalLink
className={styles.externalLink}
href="https://opensource.newrelic.com"
>
Nominate a developer champion
open source projects
<FeatherIcon
className={styles.externalLinkIcon}
name="external-link"
/>
</Button>
<Button
as={Link}
variant={Button.VARIANT.PLAIN}
to="/developer-champion"
>
Learn more about developer champions
</Button>
</div>
<img
className={styles.img}
src={devChampionBadge}
alt="developer champion badge"
/>
</section>
</ExternalLink>{' '}
built by the New Relic community.
</p>

<section
className={cx(
styles.section,
styles.stripedSection,
styles.developerChampions
)}
>
<div>
<h1>New Relic Podcasts</h1>
<p>
We like to talk, especially to developers about developer things.
Join us for conversations on open source, observability, software
design and industry news.
</p>
<Button as={Link} variant={Button.VARIANT.PRIMARY} href="/podcasts">
Listen
<FeatherIcon className={styles.Icon} name="link" />
</Button>
</div>
<img className={styles.img} src={podcastBadge} alt="podcast badge" />
</section>
</>
<section
className={cx(
styles.section,
styles.stripedSection,
styles.developerChampions
)}
>
<div>
<h1>New Relic developer champions</h1>
<p>
New Relic Champions are solving big problems using New Relic as
their linchpin and are recognized as experts and leaders in the
New Relic technical community.
</p>
<Button
as={ExternalLink}
variant={Button.VARIANT.PRIMARY}
href="https://forms.gle/Zkdub5e1x4MNqSKW9"
>
Nominate a developer champion
<FeatherIcon
className={styles.externalLinkIcon}
name="external-link"
/>
</Button>
<Button
as={Link}
variant={Button.VARIANT.PLAIN}
to="/developer-champion"
>
Learn more about developer champions
</Button>
</div>
<img
className={styles.img}
src={devChampionBadge}
alt="developer champion badge"
/>
</section>

<section
className={cx(
styles.section,
styles.stripedSection,
styles.developerChampions
)}
>
<div>
<h1>New Relic Podcasts</h1>
<p>
We like to talk, especially to developers about developer
things. Join us for conversations on open source, observability,
software design and industry news.
</p>
<Button
as={Link}
variant={Button.VARIANT.PRIMARY}
href="/podcasts"
>
Listen
<FeatherIcon className={styles.Icon} name="link" />
</Button>
</div>
<img
className={styles.img}
src={podcastBadge}
alt="podcast badge"
/>
</section>
</PageLayout.Content>
</PageLayout>
</PageContext.Provider>
);
};
Expand Down

0 comments on commit b9a5fc8

Please sign in to comment.