make nice & extract into components (skillrecordings#177)

Author: vojtaholik

src/components/pages/lessons/CreateAccountCTA.tsx

@@ -0,0 +1,21 @@
+import React, {FunctionComponent} from 'react'
+import Link from 'next/link'
+
+type CreateAccountCTAProps = {}
+
+const CreateAccountCTA: FunctionComponent<CreateAccountCTAProps> = () => {
+  return (
+    <div className="flex flex-col items-center px-5">
+      <h2 className="sm:text-2xl text-xl leading-tighter tracking-tight font-light text-center max-w-sm">
+        This lesson is <strong className="font-bold">free to watch</strong>.
+      </h2>
+      <Link href="/login">
+        <a className="mt-8 text-white py-3 px-5 rounded-md text-base font-semibold bg-blue-600 hover:bg-indigo-600 hover:shadow-xl transition-all ease-in-out duration-300 hover:scale-105 transform">
+          Click here to Create an account or Login to view
+        </a>
+      </Link>
+    </div>
+  )
+}
+
+export default CreateAccountCTA

src/components/pages/lessons/JoinCTA copy.tsx

@@ -0,0 +1,22 @@
+import React, {FunctionComponent} from 'react'
+import Link from 'next/link'
+
+type JoinCTAProps = {}
+
+const JoinCTA: FunctionComponent<JoinCTAProps> = () => {
+  return (
+    <div className="flex flex-col items-center px-5">
+      <h2 className="sm:text-2xl text-xl leading-tighter tracking-tight font-light text-center">
+        This lesson is an{' '}
+        <strong className="font-bold">egghead member exclusive</strong>.
+      </h2>
+      <Link href="/pricing">
+        <a className="mt-8 text-white py-3 px-5 rounded-md text-base font-semibold bg-blue-600 hover:bg-indigo-600 hover:shadow-xl transition-all ease-in-out duration-300 hover:scale-105 transform">
+          Click here to join today and unlock this lesson
+        </a>
+      </Link>
+    </div>
+  )
+}
+
+export default JoinCTA

src/pages/lessons/[slug].tsx

@@ -19,6 +19,8 @@ import {NextSeo} from 'next-seo'
 import removeMarkdown from 'remove-markdown'
 import getTracer from 'utils/honeycomb-tracer'
 import {setupHttpTracing} from '@vercel/tracing-js'
+import CreateAccountCTA from 'components/pages/lessons/CreateAccountCTA'
+import JoinCTA from 'components/pages/lessons/JoinCTA copy'
 
 const tracer = getTracer('lesson-page')
 
@@ -239,7 +241,7 @@ const Lesson: FunctionComponent<LessonProps> = ({initialLesson}) => {
             }}
           >
             <div
-              className="w-full relative overflow-hidden bg-gray-200"
+              className="w-full relative overflow-hidden bg-black text-white"
               css={{paddingTop: '56.25%'}}
             >
               <div className="absolute w-full h-full top-0 left-0">
@@ -264,26 +266,12 @@ const Lesson: FunctionComponent<LessonProps> = ({initialLesson}) => {
 
                 {currentPlayerState === 'joining' && (
                   <OverlayWrapper>
-                    <h2 className="sm:text-xl text-lg leading-tight font-bold text-center">
-                      This Lesson is Free to Watch
-                    </h2>
-                    <Link href="/login">
-                      <a className="no-underline hover:underline text-blue-500 mt-5 text-center">
-                        Click here to Create an Account or Login to View
-                      </a>
-                    </Link>
+                    <CreateAccountCTA />
                   </OverlayWrapper>
                 )}
                 {currentPlayerState === 'subscribing' && (
                   <OverlayWrapper>
-                    <h2 className="sm:text-xl text-lg leading-tight font-bold text-center">
-                      This Lesson is an egghead Member Exclusive
-                    </h2>
-                    <Link href="/pricing">
-                      <a className="no-underline hover:underline text-blue-500 mt-5 text-center">
-                        Click here to join today and unlock this lesson!
-                      </a>
-                    </Link>
+                    <JoinCTA />
                   </OverlayWrapper>
                 )}
                 {currentPlayerState === 'showingNext' && (