diff --git a/src/components/FeatherIcon.js b/src/components/FeatherIcon.js index 1afc2cf29..ed7cb715a 100644 --- a/src/components/FeatherIcon.js +++ b/src/components/FeatherIcon.js @@ -177,6 +177,35 @@ const ICONS = { ), + 'hard-drive': ( + <> + + + + + + ), + database: ( + <> + + + + + ), + cpu: ( + <> + + + + + + + + + + + + ), }; FeatherIcon.propTypes = { diff --git a/src/images/students/students-banner.png b/src/images/students/students-banner.png new file mode 100644 index 000000000..49318e446 Binary files /dev/null and b/src/images/students/students-banner.png differ diff --git a/src/pages/students.js b/src/pages/students.js new file mode 100644 index 000000000..3ae4798fa --- /dev/null +++ b/src/pages/students.js @@ -0,0 +1,120 @@ +import React from 'react'; +import cx from 'classnames'; +import PropTypes from 'prop-types'; +import DevSiteSeo from '../components/DevSiteSeo'; +import { Button } from '@newrelic/gatsby-theme-newrelic'; +import PageLayout from '../components/PageLayout'; +import ExternalLink from '../components/ExternalLink'; +import FeatherIcon from '../components/FeatherIcon'; +import studentsHeader from '../images/students/students-banner.png'; +import uptimeEverythingHeader from '../images/developer-champion/uptime-everything-header-image.jpg'; +import styles from './students.module.scss'; + +const StudentsPage = ({ location }) => { + return ( + <> + {/* */} + + + +
+
+

+ Traditional computer sciences are great, but hands-on experience + with modern platforms positions you as a more competitive + candidate. The New Relic Student Edition gives you access to the + same industry tools that observability professionals use -- for + free. +

+

+ Whether you’re just getting started with your engineering + career, looking to pivot, or an educator ready to share the + value of modern technology - we’ve got you covered. From access + to the best-in-class observability platform, training, and + certifications, you’ll have access to everything you need to + compete in the market. +

+

+ We are excited to announce the New Relic Student Edition as an + exclusive offer in the GitHub Student Pack. Github created the + Student Pack to help students ship software like a pro, and with + New Relic, the Student Edition adds to making that possible. +

+

+ To get access to the Student Edition,{' '} + sign up for a free account and verify your + student status using the GitHub Student Pack +

+
+ student edition header +
+
+

What does the Student Edition offer?

+

+ There's no substitute for hands-on experience. That’s why we + designed the New Relic Student Edition, +
which gives students and educators full access to New Relic + One, including: +

+
+
+
+ +

Three Full Users

+

+ Work with your friends and classmates like a real-world + production team +

+
+
+ +

500 GB/month of Data Ingest

+

+ Collect, analyze, and alert on all your metrics, events, logs, + and traces from any source +

+
+
+ +

Free Tier AI

+

+ Instantly detect, diagnose, and resolve issues before they + become a problem +

+
+ +
+
+
+ + ); +}; + +StudentsPage.propTypes = { + location: PropTypes.object.isRequired, +}; + +export default StudentsPage; diff --git a/src/pages/students.module.scss b/src/pages/students.module.scss new file mode 100644 index 000000000..79f1e1648 --- /dev/null +++ b/src/pages/students.module.scss @@ -0,0 +1,65 @@ +.section { + &:not(:last-child) { + margin-bottom: 4rem; + } +} + +.twoColumn { + display: grid; + grid-template-columns: repeat(2, calc(50% - 1rem)); + grid-gap: 2rem; + + @media (max-width: 760px) { + grid-template-columns: 1fr; + } +} + +.offerSection { + text-align: center; + margin: 6rem 0 2.5rem; + + h2{ + text-align: center; + } +} + +.img { + width: 100%; +} + +.championProgram { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-gap: 2rem; + + @media (max-width: 760px) { + display: block; + text-align: center; + } +} + +.point { + text-align: center; + max-width: 400px; + margin: auto; + + @media (max-width: 760px) { + margin-bottom: 40px; + } +} + +.pointIcon { + --feather-icon-stroke-width: 1; + + margin-bottom: 2rem; + color: var(--color-brand-500); +} + +.nominateButton { + grid-column: 2; + justify-self: center; +} + +.externalLinkIcon { + margin-left: 0.5rem; +}