Update deets and add Elon quote

Author: lorensr

src/components/landing/AboveFold.css

@@ -59,7 +59,7 @@
 
 .AboveFold-subtitle {
   font-size: 1.3rem !important;
-  margin: 25px 0 70px !important;
+  margin: 20px 0 35px !important;
   color: var(--gray700) !important;
   font-weight: 300 !important;
   text-align: center;

src/components/landing/AboveFold.js

@@ -6,6 +6,7 @@ import scrollIntoView from 'scroll-into-view-if-needed'
 
 import './AboveFold.css'
 import LogoName from './LogoName'
+import ElonLanding from './ElonLanding'
 
 const scrollTo = (selector) => () => {
   scrollIntoView(document.querySelector(selector), {
@@ -21,9 +22,10 @@ const AboveFold = () => (
       <div className="AboveFold-main-container">
         <LogoName />
         <div className="AboveFold-main">
+          <ElonLanding />
           <div className="AboveFold-text">
-            <Typography className="AboveFold-title" variant="display3">
-              GraphQL is the <span className="-nowrap">new REST</span>
+            <Typography className="AboveFold-title" variant="display1">
+              GraphQL is <span className="-nowrap">pain-free</span> REST
             </Typography>
             <Typography className="AboveFold-subtitle" variant="body1">
               GraphQL is the best way to fetch data for your app, and The

src/components/landing/ElonLanding.css

@@ -0,0 +1,12 @@
+.ElonLanding {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin: 50px 0 80px;
+  text-align: center;
+}
+
+.ElonLanding-avatar {
+  width: 200px;
+  margin-top: 10px;
+}

src/components/landing/ElonLanding.js

@@ -0,0 +1,31 @@
+import React from 'react'
+import { Image } from 'cloudinary-react'
+import Typography from 'material-ui/Typography'
+
+import './ElonLanding.css'
+
+const ElonLanding = () => (
+  <div className="ElonLanding">
+    {/* <Typography className="ElonLanding-title" variant="display1">
+      As recommended by Elon Musk!
+    </Typography> */}
+
+    <Typography className="ElonLanding-quote" variant="display1">
+      “The future is all… GraphQL.”
+    </Typography>
+
+    <a
+      href="https://twitter.com/boredelonmusk"
+      target="_blank"
+      rel="noopener noreferrer"
+    >
+      <Image
+        className="ElonLanding-avatar"
+        publicId="bored-elon-musk"
+        fetchFormat="auto"
+        quality="auto"
+      />
+    </a>
+  </div>
+)
+export default ElonLanding

src/components/landing/Package.js

@@ -134,8 +134,8 @@ const Package = ({
               <div className={classNames('Package-feature-list', { full })}>
                 {pro ? 'Videos:' : 'More videos:'}
               </div>
-              {videos.map((video) => (
-                <div className="Package-extra-item" key={video}>
+              {videos.map((video, i) => (
+                <div className="Package-extra-item" key={i}>
                   {video}
                 </div>
               ))}

src/components/landing/Pricing.js

@@ -28,12 +28,15 @@ const Pricing = () => (
           </span>
         }
         extraChapters={[
-          'Server-side rendering',
-          'Offline data and mutations',
-          'Serverless',
-          'Stripe integration',
+          'Server-Side Rendering',
+          'Apollo Federation',
+          'Server Analytics',
+        ]}
+        videos={[
+          'Introduction to the codebases',
+          'Apollo Devtools',
+          'Apollo Studio',
         ]}
-        videos={['Meet the authors', 'Introduction to the codebases']}
       />
       <Package
         full
@@ -46,14 +49,31 @@ const Pricing = () => (
           </span>
         }
         extraChapters={[
-          'Using the GitHub GraphQL API',
-          'Schema stitching',
-          'Rate limiting',
-          'Caching with Redis',
+          'Stripe and Service Integrations',
+          'Preventing DoS Attacks',
         ]}
         videos={[
           'Code run-throughs of Chapters 6–11',
-          'Interview with TBD interesting person',
+          <span>
+            Interview with{' '}
+            <a
+              href="https://www.scotttolinski.com/"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              Scott Tolinski
+            </a>
+          </span>,
+          <span>
+            Interview with{' '}
+            <a
+              href="https://www.swyx.io/"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              Shawn “swyx” Wang
+            </a>
+          </span>,
         ]}
       />
       <Package training price="749" color="blue">
@@ -84,8 +104,7 @@ const Pricing = () => (
 
     <div className="Pricing-notes" id="pricing-notes">
       <div className="Pricing-note">
-        <sup>1</sup> Two years after v1.0 is released (all packages get free
-        updates during the beta).
+        <sup>1</sup> Two years after v1.0 is released (ETA March 2021).
       </div>
       <div className="Pricing-note">
         <sup>2</sup> Free updates for the lifetime of the book. We’ll keep it up

src/components/landing/Stats.js

@@ -12,7 +12,7 @@ const Stats = () => (
     <div className="Stats-list">
       <div className="Stat">
         <FontAwesomeIcon icon={faFileAlt} />
-        <h3 className="Stat-number -with-plus">500</h3>
+        <h3 className="Stat-number -with-plus">550</h3>
         <div className="Stat-caption">Total pages</div>
       </div>
       <div className="Stat">
@@ -27,7 +27,7 @@ const Stats = () => (
       </div>
       <div className="Stat">
         <FontAwesomeIcon icon={faVideo} />
-        <h3 className="Stat-number">9</h3>
+        <h3 className="Stat-number">11</h3>
         <div className="Stat-caption">Videos</div>
       </div>
     </div>

src/components/landing/Topics.js

@@ -18,13 +18,13 @@ const topics = [
     icon: faChalkboardTeacher,
     title: 'Beginner introduction',
     text:
-      'We start out in Chapter 1 by introducing the basics of GraphQL in contrast to REST. Then in Chapters 2–4 we go through the whole GraphQL specification from its basic building blocks. We also have an extensive Background chapter that covers everything from JSON to HTTP to server-side rendering.',
+      'We start out in Chapter 1 by introducing the basics of GraphQL in contrast to REST. Then in Chapters 2–4 we go through the whole GraphQL specification from its basic building blocks. We also have an extensive Background chapter that covers everything from JSON to databases to server-side rendering.',
   },
   {
     icon: faGraduationCap,
     title: 'Advanced topics',
     text:
-      'In the client chapters, we cover topics like infinite scrolling, local state, performance, and working offline. In our server chapter, we cover four different data sources, as well as how to create your own. We also cover security and various performance improvements.',
+      'In the client chapters, we cover topics like infinite scrolling, local state, prefetching, and persisting. In our server chapter, we cover schema design, four different data sources (as well as how to create your own), security, performance, and more.',
   },
   {
     icon: faDesktop,
@@ -40,13 +40,13 @@ const topics = [
     icon: faReact,
     title: 'React',
     text:
-      'React is becoming the lingua franca of modern web dev, so this is our longest client chapter. We go through everything in the React Apollo library, including the render prop API, the HOC API, managing local state, subscriptions, optimistic updates, error handling, pagination, persisting, SSR, and more.',
+      'React is becoming the lingua franca of modern web dev, so this is our longest client chapter. We go through everything in the Apollo Client library, including hooks, managing local state, subscriptions, optimistic updates, error handling, pagination, batching, linting, testing, and more.',
   },
   {
     icon: faVuejs,
     title: 'Vue',
     text:
-      'From getting set up to implementing infinite scroll, our Vue chapter teaches the Apollo Vue library. Add a provider to your root component, add a query when creating a component, and access the loading state and response data in the template. Or use the ApolloQuery component directly in your template.',
+      'Our Vue chapter teaches Apollo Vue’s composition API. Provide an ApolloClient instance and query inside a component’s setup function to get refs with the data, loading status, and error status. Query with variables and options, send mutations, and watch subscription results.',
   },
   {
     icon: faAppStoreIos,
@@ -57,7 +57,7 @@ const topics = [
     icon: faAndroid,
     title: 'Android',
     text:
-      'In addition to our React Native chapter, we also have a native Android chapter based on the Apollo-Android library. Get typed Java models generated from your queries and mutations, make your own custom scalars, save query responses in the cache, or get RxJava Observables.',
+      'In addition to our React Native chapter, we also have a native Android chapter based on the Apollo Android library. Get typed Kotlin models generated from your queries and mutations, configure caching, and use coroutines, ViewModel, and Flow.',
   },
 ]