diff --git a/apps/total-typescript/public/assets/landing/exercise-screenshots@2x.png b/apps/total-typescript/public/assets/landing/exercise-screenshots@2x.png
index 55761320dd..6ba1d6fd35 100644
Binary files a/apps/total-typescript/public/assets/landing/exercise-screenshots@2x.png and b/apps/total-typescript/public/assets/landing/exercise-screenshots@2x.png differ
diff --git a/apps/total-typescript/public/assets/matt-in-new-studio@2x.jpg b/apps/total-typescript/public/assets/matt-in-new-studio@2x.jpg
new file mode 100644
index 0000000000..97010417a1
Binary files /dev/null and b/apps/total-typescript/public/assets/matt-in-new-studio@2x.jpg differ
diff --git a/apps/total-typescript/public/assets/wizard-in-a-cave@2x.png b/apps/total-typescript/public/assets/wizard-in-a-cave@2x.png
index d2a333dd0f..f295fbd4b1 100644
Binary files a/apps/total-typescript/public/assets/wizard-in-a-cave@2x.png and b/apps/total-typescript/public/assets/wizard-in-a-cave@2x.png differ
diff --git a/apps/total-typescript/src/components/app/layout.tsx b/apps/total-typescript/src/components/app/layout.tsx
index 412c0f24ca..0585d81444 100644
--- a/apps/total-typescript/src/components/app/layout.tsx
+++ b/apps/total-typescript/src/components/app/layout.tsx
@@ -20,6 +20,7 @@ type LayoutProps = {
   footer?: React.ReactElement | null
   survey?: boolean
   children?: any
+  withNavLinks?: boolean
 }
 
 const Layout: FunctionComponent<LayoutProps> = ({
@@ -28,6 +29,7 @@ const Layout: FunctionComponent<LayoutProps> = ({
   meta,
   noIndex,
   nav,
+  withNavLinks = true,
   footer,
   survey = true,
 }) => {
@@ -94,7 +96,7 @@ const Layout: FunctionComponent<LayoutProps> = ({
       <RedeemDialogForCoupon />
       <Toaster position="top-center" />
       {isFeedbackDialogOpen && feedbackComponent}
-      {nav ? nav : isNull(nav) ? null : <Navigation />}
+      {nav ? nav : isNull(nav) ? null : <Navigation withLinks={withNavLinks} />}
       <div
         className={cn(
           'flex h-full min-h-screen flex-grow flex-col',
diff --git a/apps/total-typescript/src/components/app/navigation.tsx b/apps/total-typescript/src/components/app/navigation.tsx
index 20459f7eed..2199c23508 100644
--- a/apps/total-typescript/src/components/app/navigation.tsx
+++ b/apps/total-typescript/src/components/app/navigation.tsx
@@ -26,12 +26,14 @@ type Props = {
   className?: string
   containerClassName?: string
   isMinified?: boolean
+  withLinks?: boolean
 }
 
 const Navigation: React.FC<React.PropsWithChildren<Props>> = ({
   className,
   containerClassName = 'flex items-stretch justify-between w-full h-full',
   isMinified = false,
+  withLinks = true,
 }) => {
   return (
     <>
@@ -49,7 +51,7 @@ const Navigation: React.FC<React.PropsWithChildren<Props>> = ({
       >
         <div className={containerClassName}>
           <NavLogo isMinified={isMinified} />
-          <DesktopNav isMinified={isMinified} />
+          <DesktopNav isMinified={isMinified} withLinks={withLinks} />
           <MobileNav />
         </div>
       </nav>
@@ -65,9 +67,10 @@ const useAbilities = () => {
 
 type DesktopNavProps = {
   isMinified?: boolean
+  withLinks?: boolean
 }
 
-const DesktopNav: React.FC<DesktopNavProps> = ({isMinified}) => {
+const DesktopNav: React.FC<DesktopNavProps> = ({isMinified, withLinks}) => {
   const ability = useAbilities()
   const {status} = useSession()
   const {setIsFeedbackDialogOpen} = useFeedback()
@@ -80,76 +83,82 @@ const DesktopNav: React.FC<DesktopNavProps> = ({isMinified}) => {
 
   const {subscriber, loadingSubscriber} = useConvertkit()
 
+  const isRoot = usePathname() === '/'
+
   return (
     <div className={cx('hidden w-full items-center justify-end md:flex')}>
-      <ul
-        className={cn(
-          ' left-0 top-0 flex h-full w-full items-center justify-start  ',
-          {
-            'absolute pl-16 lg:justify-center lg:pl-0': !isMinified,
-            'pl-4': isMinified,
-          },
-        )}
-      >
-        {/* <hr
+      {withLinks && (
+        <>
+          <ul
+            className={cn(
+              ' left-0 top-0 flex h-full w-full items-center justify-start  ',
+              {
+                'absolute pl-16 lg:justify-center lg:pl-0': !isMinified,
+                'pl-4': isMinified,
+              },
+            )}
+          >
+            {/* <hr
           className="ml-4 mr-1 h-1/4 w-px border-transparent bg-gray-700 lg:ml-5 lg:mr-2"
           aria-hidden="true"
         /> */}
-        <NavLink
-          path="/workshops"
-          title="Workshops"
-          className="font-medium text-white"
-          labelString="Pro Workshops"
-          label={
-            <>
-              <span
-                className={cx('hidden', {
-                  'xl:inline-block': isMinified,
-                  'lg:inline-block': !isMinified,
-                })}
-              >
-                Pro
-              </span>{' '}
-              Workshops {/* NEW INDICATOR */}
-              {/* <div className="absolute right-1 h-1 w-1 -translate-y-5 animate-pulse rounded-full bg-primary" /> */}
-            </>
-          }
-          // icon={KeyIcon}
-        />
-        <NavLink
-          path="/tutorials"
-          title="Tutorials"
-          className="font-medium text-white"
-          labelString="Tutorials"
-          label="Tutorials"
-          // icon={PlayIcon}
-        />
-        <NavLink
-          path="/tips"
-          label="Tips"
-          className="font-medium text-white"
-          // icon={FireIcon}
-        />
-        <NavLink
-          path="/articles"
-          label="Articles"
-          className="font-medium text-white"
-          // icon={BookIcon}
-        />
-        <NavLink
-          path="/books/total-typescript-essentials"
-          labelString="Book"
-          label={
-            <>
-              Book{' '}
-              <span className="absolute inline-block -translate-y-1 scale-75 rounded bg-white/5 px-1 py-0.5 text-xs font-semibold uppercase tracking-wide text-primary">
-                New
-              </span>
-            </>
-          }
-          className="font-medium text-white"
-        />
-      </ul>
+            <NavLink
+              path="/workshops"
+              title="Workshops"
+              className="font-medium text-white"
+              labelString="Pro Workshops"
+              label={
+                <>
+                  <span
+                    className={cx('hidden', {
+                      'xl:inline-block': isMinified,
+                      'lg:inline-block': !isMinified,
+                    })}
+                  >
+                    Pro
+                  </span>{' '}
+                  Workshops {/* NEW INDICATOR */}
+                  {/* <div className="absolute right-1 h-1 w-1 -translate-y-5 animate-pulse rounded-full bg-primary" /> */}
+                </>
+              }
+              // icon={KeyIcon}
+            />
+            <NavLink
+              path="/tutorials"
+              title="Tutorials"
+              className="font-medium text-white"
+              labelString="Tutorials"
+              label="Tutorials"
+              // icon={PlayIcon}
+            />
+            <NavLink
+              path="/tips"
+              label="Tips"
+              className="font-medium text-white"
+              // icon={FireIcon}
+            />
+            <NavLink
+              path="/articles"
+              label="Articles"
+              className="font-medium text-white"
+              // icon={BookIcon}
+            />
+            <NavLink
+              path="/books/total-typescript-essentials"
+              labelString="Book"
+              label={
+                <>
+                  Book{' '}
+                  <span className="absolute inline-block -translate-y-1 scale-75 rounded bg-white/5 px-1 py-0.5 text-xs font-semibold uppercase tracking-wide text-primary">
+                    New
+                  </span>
+                </>
+              }
+              className="font-medium text-white"
+            />
+          </ul>
+        </>
+      )}
       <ul className="flex h-full flex-shrink-0 items-center justify-center">
         {status === 'loading' ? null : <SearchBar isMinified={isMinified} />}
         {status === 'unauthenticated' && (
@@ -187,14 +196,24 @@ const DesktopNav: React.FC<DesktopNavProps> = ({isMinified}) => {
               label="Log in"
               className="min-w-full sm:min-w-full lg:min-w-full lg:text-sm"
             />
-            {!loadingSubscriber && !subscriber && (
+            {isRoot ? (
+              <NavLink
+                className="min-w-full rounded bg-primary font-semibold text-primary-foreground sm:h-8 sm:min-w-full lg:min-w-full lg:text-sm"
+                path={'/#buy'}
+                label={'Get Access'}
+              />
+            ) : (
               <>
-                <div className="px-1.5" aria-hidden="true" />
-                <NavLink
-                  className="min-w-full rounded bg-primary font-semibold text-primary-foreground sm:h-8 sm:min-w-full lg:min-w-full lg:text-sm"
-                  path={'/newsletter'}
-                  label={'Sign Up'}
-                />
+                {!loadingSubscriber && !subscriber && (
+                  <>
+                    <div className="px-1.5" aria-hidden="true" />
+                    <NavLink
+                      className="min-w-full rounded bg-primary font-semibold text-primary-foreground sm:h-8 sm:min-w-full lg:min-w-full lg:text-sm"
+                      path={'/newsletter'}
+                      label={'Sign Up'}
+                    />
+                  </>
+                )}
               </>
             )}
           </>
diff --git a/apps/total-typescript/src/components/companies.tsx b/apps/total-typescript/src/components/companies.tsx
index cf2052dd8a..fa2f3605c9 100644
--- a/apps/total-typescript/src/components/companies.tsx
+++ b/apps/total-typescript/src/components/companies.tsx
@@ -1,6 +1,13 @@
-export const Companies = () => {
+import {cn} from '@skillrecordings/ui/utils/cn'
+
+export const Companies = ({className}: {className?: string}) => {
   return (
-    <section className="not-prose mx-auto mb-0 flex w-full flex-col items-center justify-center bg-transparent px-5 pt-10 md:pt-16">
+    <section
+      className={cn(
+        'not-prose mx-auto mb-0 flex w-full flex-col items-center justify-center bg-transparent px-5',
+        className,
+      )}
+    >
       <h2 className="font-text text-lg text-foreground opacity-75">
         Trusted by developers from
       </h2>
diff --git a/apps/total-typescript/src/components/home/home-body-copy.tsx b/apps/total-typescript/src/components/home/home-body-copy.tsx
index a3bed1b2dc..ad1eb46fb6 100644
--- a/apps/total-typescript/src/components/home/home-body-copy.tsx
+++ b/apps/total-typescript/src/components/home/home-body-copy.tsx
@@ -1,11 +1,18 @@
 import LandingCopy from '../landing-copy.mdx'
 import * as React from 'react'
 import {SkillLevel} from './use-skill-level'
+import type {MDXComponents} from 'mdx/types'
 
-export const Copy = ({level}: {level?: SkillLevel}) => {
+export const Copy = ({
+  level,
+  components,
+}: {
+  level?: SkillLevel
+  components: MDXComponents
+}) => {
   return (
-    <article className="prose-base w-full opacity-90 sm:prose-lg md:prose-xl marker:text-cyan-400 prose-headings:mx-auto prose-headings:max-w-2xl prose-headings:px-5 prose-headings:font-text prose-headings:font-bold prose-h2:text-center prose-h2:text-3xl prose-p:mx-auto prose-p:max-w-2xl prose-p:px-5 prose-p:font-normal prose-p:text-gray-200 prose-a:text-cyan-300 prose-strong:font-semibold prose-pre:mx-auto prose-pre:max-w-2xl prose-pre:overflow-auto prose-ul:mx-auto prose-ul:max-w-2xl prose-ul:translate-x-1 prose-ul:list-disc hover:prose-a:underline md:prose-h2:text-5xl">
-      <LandingCopy level={level} />
+    <article className="prose-base w-full sm:prose-lg md:prose-xl marker:text-cyan-400 prose-headings:mx-auto prose-headings:max-w-2xl prose-headings:text-balance prose-headings:px-5 prose-headings:font-text prose-headings:font-semibold prose-h2:text-center prose-h2:text-3xl prose-p:mx-auto prose-p:max-w-2xl prose-p:px-5 prose-p:font-normal prose-p:text-foreground prose-a:text-cyan-300 prose-strong:font-semibold prose-strong:text-white prose-pre:mx-auto prose-pre:max-w-2xl prose-pre:overflow-auto prose-ul:mx-auto prose-ul:max-w-2xl prose-ul:translate-x-1 prose-ul:list-disc hover:prose-a:underline md:prose-h2:text-5xl">
+      <LandingCopy components={components} level={level} />
     </article>
   )
 }
diff --git a/apps/total-typescript/src/components/home/home-header.tsx b/apps/total-typescript/src/components/home/home-header.tsx
index 17c81dd82b..90a97e53d5 100644
--- a/apps/total-typescript/src/components/home/home-header.tsx
+++ b/apps/total-typescript/src/components/home/home-header.tsx
@@ -25,13 +25,14 @@ export const Header = ({level}: {level?: SkillLevel}) => {
   const Title = level && level.rank > 3 ? ExpertTitle : DefaultTitle
   return (
     <header className="relative -mt-16 flex flex-col items-center justify-center overflow-hidden px-5 pt-24 sm:pt-0 lg:mt-0">
-      <div className="relative z-10 flex w-full max-w-screen-lg flex-col-reverse items-center text-center lg:min-h-[80vh] lg:flex-row lg:text-left">
+      <div className="relative z-10 flex w-full max-w-screen-lg flex-col-reverse items-center text-center  lg:flex-row lg:text-left">
         <div className="relative z-10 -mt-8 flex w-full max-w-2xl flex-col items-center bg-gradient-to-b from-transparent via-background to-background pb-10 lg:mt-0 lg:items-start lg:via-transparent lg:to-transparent lg:py-48 lg:pb-48">
           <h1 className="mt-16 w-full max-w-[14ch] font-heading text-4xl font-normal leading-[1.25] drop-shadow-md sm:mt-0 sm:text-5xl sm:leading-[1.15] lg:text-5xl lg:leading-[1.15] xl:text-6xl xl:leading-[1.15]">
             <Title />
           </h1>
-          <h2 className="max-w-[28ch] text-balance bg-gradient-to-bl from-teal-200 to-cyan-200 bg-clip-text pb-8 pt-2 font-text text-lg font-normal text-transparent sm:text-2xl">
-            A comprehensive production-grade TypeScript training
+          <h2 className="mt-3 max-w-[35ch] text-balance bg-gradient-to-bl from-teal-200 to-cyan-200 bg-clip-text pb-8 font-text text-lg font-normal text-transparent sm:text-2xl">
+            Master the deep magic of types with bite-sized challenges that
+            stretch your brain
           </h2>
           <div className="flex items-center gap-3 sm:text-lg">
             <Image
@@ -58,13 +59,13 @@ export const Header = ({level}: {level?: SkillLevel}) => {
           />
         </div>
       </div>
-      <Image
+      {/* <Image
         src={require('../../../public/assets/landing/bg-divider-1.png')}
         fill
         className="pointer-events-none translate-y-48 select-none object-contain object-bottom"
         alt=""
         aria-hidden="true"
-      />
+      /> */}
     </header>
   )
 }
diff --git a/apps/total-typescript/src/components/landing-copy.mdx b/apps/total-typescript/src/components/landing-copy.mdx
index 1645fa765d..e388966382 100644
--- a/apps/total-typescript/src/components/landing-copy.mdx
+++ b/apps/total-typescript/src/components/landing-copy.mdx
@@ -1,73 +1,4 @@
-import {isSellingLive} from '@/utils/is-selling-live'
-import Balancer from 'react-wrap-balancer'
-import SeaOfRedLines from '../../public/assets/landing/bg-sea-of-red-lines@2x.png'
-import TSErrors from '../../public/assets/landing/ts-errors@2x.png'
-import HandPointingDownSparkles from '../../public/assets/landing/hand-pointing-down-sparkles@2x.png'
-import ExerciseScreenshots from '../../public/assets/landing/exercise-screenshots@2x.png'
-import Cauldron from '../../public/assets/landing/cauldron@2x.png'
-import Compass from '../../public/assets/landing/compass@2x.png'
-import Wand from '../../public/assets/landing/wand@2x.png'
-import FiveStarRating from '../../public/assets/landing/5-star-rating@2x.png'
-import Shine from '../../public/assets/landing/shine@2x.png'
-import MattPocock from '../../public/assets/landing/matt-pocock@2x.png'
-import {motion} from 'framer-motion'
-
-<div
-  className="h-20 w-full bg-gradient-to-b from-background to-[#191427] md:h-24"
-  aria-hidden="true"
-/>
-
-<section className="bg-gradient-to-t from-background selection:bg-[#CC5344] selection:text-white to-[#191427] via-[#191427] relative">
-<div className="relative z-10 overflow-x-hidden">
-  <div className="md:pt-32 md:pb-64 pt-0 pb-16">
-    <div  className="not-prose md:scale-150 flex flex-col gap-8 text-center font-heading font-normal text-transparent bg-clip-text bg-gradient-to-b from-[#866583] to-white">
-    <p className="text-lg">The feature’s working.</p>
-    <p className="text-xl">The tests are passing.</p>
-    <p className="text-2xl">But your IDE is a sea of red lines.</p>
-    <p className="text-3xl font-semibold text-balance">TypeScript’s not happy again.</p>
-    </div>
-  </div>
-{<div className='flex text-[#CCC4E0] flex-col items-center text-center not-prose gap-5'>
-<p>You move on to the next error:</p>
-<p className="font-heading md:text-5xl text-balance text-3xl font-semibold text-white">
-  “What on earth is this?”
-</p>
-<p>you think to yourself.</p>
-</div>}
-
-<ErrorFromHell>
-  {`Element implicitly has an ‘any’ type because expression of type ‘string’ can’t be used to index type ‘{ string: string | undefined; }’`}
-  <br />
-  <br />
-  {`No index signature with a parameter of type ‘string’ was found on type ‘{ string: string | undefined; }’`}
-</ErrorFromHell>
-
-{<div className="not-prose flex flex-col w-full items-center gap-5 text-center justify-center mt-16 text-white mx-auto">
-
-  <p className="text-balance max-w-2xl [&_strong]:font-semibold">
-    <strong>It’s impossible to Google.</strong> Every search result is either{' '}
-    <strong>"here’s 100 lines of complex code"</strong> or{' '}
-    <strong>"here's a solution that doesn't work”</strong>
-  </p>
-  <p className="text-[#CCC4E0] text-balance py-3 italic">
-    You contemplate the absurd amount of hours you spend solving these problems.
-  </p>
-  <p className="">You'd rather give up than deal with another:</p>
-</div>}
-
-<Image
-  src={TSErrors}
-  width={756}
-  height={483}
-  className="relative mx-auto mb-0 -translate-y-10 md:-translate-y-16"
-  alt="TypeScript Error: The intersection 'User & PublicUser' was reduced to 'never' because property 'email' has conflicting types in some constituents."
-/>
-
-{<h2 className="not-prose mb-16 flex flex-col text-center font-heading md:text-5xl text-4xl font-normal leading-tight">
-
-  <i className="text-[#CCC4E0] scale-75 pb-2">Your time is precious.</i>
-  <strong className="font-semibold text-balance">You have bigger fish to fry.</strong>
-</h2>}
+## You're good, but you want to be _great_
 
 You could spend that time building new features or bugfixes. You could be providing value. Instead, you're fighting TypeScript.
 
@@ -87,15 +18,43 @@ Ultimately…
 
 **You never learned the underlying principles and patterns of being an effective TypeScript engineer.**
 
-</div>
-  <Image alt="sea of red lines" aria-hidden="true" src={SeaOfRedLines} fill className="object-top object-contain mix-blend-lighten z-0" />
-</section>
-<section className='bg-background pb-24' id="approach" aria-label="approach">
+## Make TypeScript work for you, not against you
+
+What’s the thing that separates TypeScript wizards from the rest?
+
+Understanding.
+
+To them, TypeScript doesn’t feel like magic. It feels simple, predictable and malleable.
+
+They can bend it to their will, and use its power for amazing DX.
+
+Total TypeScript is all about building that understanding at a deep level.
+
+When you’ve completed the exercises, you’ll reach a point of mastery where very little surprises you any more.
+
+You’ll have less fear when approaching nasty TypeScript errors, more confidence when typing dynamic signatures, gain velocity by cutting lines of code, and so much more.
+
+## You deserve so much better
+
+You deserve a practical, systematic approach to learning TypeScript in depth.
+
+Total TypeScript shows you the techniques used by the most complex OSS libraries.
+
+Become your company’s resident TypeScript Wizard.
+
+<span className="text-primary mr-2">✓</span> You will become a better contributor and reviewer.
+
+<span className="text-primary mr-2">✓</span> You will be the one to unblock others and raise their velocity.
+
+<span className="text-primary mr-2">✓</span> You will be the one who knows instinctively what TypeScript is doing.
+
+You are indispensable.
+
+<section className='bg-background'>
 <div className='not-prose flex w-full flex-col items-center'>
-  <Image aria-hidden="true" src={HandPointingDownSparkles} alt="hand pointing down with sparkles" width={512} height={633} className="mx-auto -mt-10" />
-  <h2 className='text-center max-w-screen-lg text-balance font-heading md:text-6xl sm:text-5xl text-4xl font-normal pb-5'>An exercise-driven approach for learning TypeScript</h2>
-  <h3 className='text-center text-primary max-w-screen-lg text-balance font-text text-xl font-normal'>Total TypeScript's approach is different than what you'll find in other online courses.</h3>
-  <Image src={ExerciseScreenshots} className="flex sm:min-w-full min-w-[550px] sm:rotate-0 -rotate-6" width={1276} height={913} alt="Total TypeScript screenshots" />
+  <Image aria-hidden="true" src={HandPointingDownSparkles} alt="hand pointing down with sparkles" width={512} height={633} className="select-none pointer-events-none mx-auto sm:-mt-24 -mt-16 sm:max-w-full max-w-[300px]" />
+  <h2 className='text-center max-w-screen-lg text-balance font-text md:text-6xl sm:text-5xl text-4xl font-semibold pb-5'>An exercise-driven approach for learning TypeScript</h2>
+  <h3 className='text-center text-primary max-w-screen-lg mb-8 text-balance font-sans sm:text-3xl text-xl font-normal'>Total TypeScript's approach is different than what you'll find in other online courses.</h3>
 </div>
 
 Instead of sitting through hours of lectures, you'll be presented with problematic code and a concise explanation of what needs to be done.
@@ -106,84 +65,93 @@ When you're ready, you can watch how a true TypeScript Wizard approaches solving
 
 The exercises build upon another, demonstrating the most important TypeScript concepts in a variety different contexts so you can build understanding of when, where, and how to best apply them in your own application and library code.
 
+<Testimonial className="my-24 max-w-4xl mx-auto w-full [&_p]:italic text-center [&_blockquote]:items-center" author={{name: 'Alex Tana', image: require('../../public/testimonials/alex-tana.jpg')}}>
+
+Total TypeScript is hands down the best course out there, and the format is the best I've seen. It feels like you're doing a 1 on 1 with Matt Pocock.
+
+</Testimonial>
+
+<Image src={ExerciseScreenshots} className="w-full lg:max-w-screen-lg max-w-[90vw] mx-auto" loading="eager" quality={100} alt="Total TypeScript screenshots" />
+
 </section>
-<section className='bg-[#07090F] flex items-center'>
-<div className="max-w-screen-lg sm:py-24 py-16 md:flex-row flex-col flex w-full mx-auto relative">
-<Image src={Cauldron} alt="a cauldron with TS written on it" width={400} height={400} aria-hidden="true" className="md:absolute md:mt-0 -mt-48 xl:max-w-full sm:max-w-[300px] mx-auto max-w-[300px] right-0 xl:-top-40 sm:-top-32 md:-rotate-12" />
-<div className=''>
-<h2 className='px-5 mb-12 not-prose md:text-left text-center md:text-5xl sm:text-4xl text-3xl font-medium font-heading flex flex-col'><span>Make TypeScript work </span><span className='italic'>for you, not against you</span></h2>
 
-What’s the thing that separates TypeScript wizards from the rest?
+<Testimonial className="my-24 max-w-4xl mx-auto w-full [&_p]:italic text-center [&_blockquote]:items-center" author={{name: 'Jökull Sólberg', image: require('../../public/testimonials/jokull-solberg.jpg')}}>
 
-Understanding.
+The content itself was incredible. Videos are superb. Delivery, pacing, tone, everything- wow. **I feel like I have superpowers.** I’ve already made one library available!
 
-To them, TypeScript doesn’t feel like magic. It feels simple, predictable and malleable.
+</Testimonial>
 
-They can bend it to their will, and use its power for amazing DX.
 
-Total TypeScript is all about building that understanding at a deep level.
+## What you'll learn
 
-When you’ve completed the exercises, you’ll reach a point of mastery where very little surprises you any more.
+Total TypeScript contains five professional-grade workshops for you to achieve TypeScript Wizardry:
 
-You’ll have less fear when approaching nasty TypeScript errors, more confidence when typing dynamic signatures, gain velocity by cutting lines of code, and so much more.
+Each workshop contains dozens of exercises designed to put your problem solving skills to the test.
 
-</div>
+  
+<section id="workshops" className='bg-gradient-to-b mt-16 pb-16 from-background to-black/40 border-b border-white/5 w-full flex flex-col'>
 
-</div>
-</section>
-<section className='bg-[#180F24] px-3 flex flex-col justify-center relative items-center'>
-<div className="max-w-screen-lg sm:py-24 pb-16 flex md:flex-row flex-col w-full mx-auto items-start relative">
-<Image src={Compass} alt="" width={540} height={540} className="relative sm:-translate-y-32 sm:mt-10 mb-0 -mt-24" />
-<div className='md:pr-10'>
-<h2 className='px-5 text-balance mb-12 not-prose md:text-left text-center sm:text-5xl text-4xl font-medium font-heading'>**You deserve** so much better</h2>
+<div className="flex flex-col gap-20 pb-24">
 
-You deserve a practical, systematic approach to learning TypeScript in depth.
+<Module title="TypeScript Pro Essentials" slug="typescript-pro-essentials" metaLabel="200+ exercises" sub="Everything you need from setup to application development patterns" image="https://cdn.sanity.io/images/z9io1e0u/production/80da574ffbb12904f823723d5ea0a8e20add0270-1200x1200.png">
 
-Total TypeScript shows you the techniques used by the most complex OSS libraries.
+Whether you're new to the language or looking to reenforce your foundation, this workshop covers all of the essential TypeScript knowledge and skills you need.
 
-Become your company’s resident TypeScript Wizard.
+From setting up your dev environment through best practices for designing types, this workshop bridges the gap between TypeScript theory and practice with type manipulation techniques, OOP with classes, annotations, assertions, and more!
 
-- You will become a better contributor and reviewer.
-- You will be the one to unblock others and raise their velocity.
-- You will be the one who knows instinctively what TypeScript is doing.
+</Module>
 
-You are indispensable.
+<Module title="Type Transformations" slug="type-transformations" metaLabel="50+ exercises" sub="Wield the power of transformation to move from one type to another with ease" image="https://cdn.sanity.io/images/z9io1e0u/production/8d26aee5def2397f419bb038fd8879286fd41bda-768x768.png">
 
-</div>
-</div>
-<div className="bg-gradient-to-t from-white/5 to-white/10 border-t border-x rounded-t-lg border-white/10 sm:px-10 px-2 sm:pb-16 pb-24">
-<div className="flex md:flex-row flex-col-reverse max-w-screen-lg mx-auto w-full items-start">
-<div>
-<h3 className="not-prose mb-8 text-balance px-5 md:pt-20 pt-0 md:mt-0 -mt-48 text-center font-heading text-4xl font-semibold md:text-left">
-  Who is Total TypeScript for?
-</h3>
+Many problems in TypeScript come down to transforming types into other types.
 
-Total TypeScript is suitable for any developer who is ready to work at becoming a wizard, though some basic familiarity with TypeScript is recommended.
+This workshop is your first step on the path to wizardry with topics including unions, template literals, conditional types and mapped types. You'll also see how to take advantage of inference and type helpers to ensure you retain flexibility while ensuring your types are exactly how you expect them to be.
 
-The Type Transformations workshop begins by warming you up with exercises on basic inference and essential types.
+</Module>
 
-Then nearly 150 exercises later, the Advanced TypeScript Patterns workshop will have you creating chainable method abstractions with generics and the builder pattern.
+<Module title="TypeScript Generics" slug="typescript-generics" metaLabel="40+ exercises" sub="Unlock amazing inference in the functions you create and the abstractions you build" image="https://cdn.sanity.io/images/z9io1e0u/production/12ef51ed533404ccf132765c75be8b6fe600bcda-769x769.png">
 
-Check out the free [Beginner's Tutorial](/tutorials/beginners-typescript) to set a foundation and get an idea for the workshop's teaching approach.
+Generics are one of TypeScript's most complex and intimidating features.
+
+Getting good at generics requires deep knowledge of the TypeScript Compiler, as well as an understanding of how their placement impacts their usefulness.
+
+You'll practice with using generics in a variety of situations, as well as how to use function overloads when generics aren't the best fit.
+
+</Module>
+
+<Module title="Advanced TypeScript Patterns" slug="advanced-typescript-patterns" metaLabel="40+ exercises" sub="Become fluent in TypeScript's undocumented patterns" image="https://cdn.sanity.io/images/z9io1e0u/production/ce94d457bbfa7580dd803aaa5630a7c6ebed9fee-927x927.png">
+
+The TypeScript community has discovered and iterated upon several patterns that build on the type transformation and generics techniques explored in the earlier workshops.
+
+Here you'll grow more powerful through practice with branded types and the builder pattern, among others. You will also discover the best practices for strongly typing the global scope and how to understand the flow of generics through external libraries.
+
+</Module>
+
+<Module title="Advanced React with TypeScript" slug="advanced-react-with-typescript" metaLabel="50+ exercises" sub="Expert-level knowledge for typing your React apps with TypeScript" image="https://cdn.sanity.io/images/z9io1e0u/production/bb6a657e3e8d8a8dc4d66783d23a56797b22b882-1200x1200.png">
+
+Using TypeScript with React can be tricky, requiring flexible, type-safe, and structured components.
+
+This workshop empowers developers to combine React and TypeScript effectively. It covers advanced props handling, leveraging TypeScript generics for components and hooks, safer React hooks using types, understanding the TypeScript type system, recognizing industry-standard patterns, and safely integrating external libraries into React components.
+
+</Module>
 
-</div>
-<Image
-  src={Wand}
-  alt="a wand"
-  width={444}
-  height={586}
-  className="relative md:-translate-y-28 md:mt-0 -mt-16"
-/>
-</div>
 </div>
 </section>
-<section id="feedback" className='bg-gradient-to-b from-black relative to-background w-full sm:pb-24 pb-5 pt-10 border-x'>
+
+
+<Buy />
+
+<Companies />
+
+<section id="feedback" className='bg-gradient-to-b from-black relative to-background w-full sm:pb-24 pb-5 mt-40 flex flex-col items-center'>
+  <svg className='absolute top-[-60px]' width="1550" height="61" viewBox="0 0 1550 61" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M0 60.35L775 0L1550 60.35H0Z" fill="#000"/>
+  </svg>
+  {/* <Image src={FiveStarRating} alt="5-star rating" width={110} height={37} className="sm:mb-16 mx-auto mb-10" /> */}
+  <h2 className='px-5 text-balance sm:mb-24 mb-16 text-center not-prose mt-16 lg:text-5xl sm:text-4xl text-3xl font-medium font-heading max-w-3xl'>
+  See what fellow wizards have to say about Total TypeScript
+  </h2>
   <div className='not-prose flex flex-col items-center w-full'>
-    <svg className='absolute top-[-60px]' width="1550" height="61" viewBox="0 0 1550 61" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <path d="M0 60.35L775 0L1550 60.35H0Z" fill="#000"/>
-    </svg>
-    <Image src={FiveStarRating} alt="5-star rating" width={110} height={37} className="sm:mb-16 mb-10" />
-    <h2 className='px-5 text-balance sm:mb-24 mb-16 text-center lg:text-5xl sm:text-4xl text-3xl font-medium font-heading'>Feedback for Total TypeScript</h2>
     <div className="grid origin-top md:grid-cols-2 grid-cols-1 md:gap-16 sm:gap-10 gap-0 max-w-screen-lg w-full mx-auto px-5">
 
     <Testimonial author={{name: 'Tomasz Łakomy', image: require('../../public/testimonials/tomasz-lakomy.jpg')}}>
@@ -192,15 +160,15 @@ Check out the free [Beginner's Tutorial](/tutorials/beginners-typescript) to set
 
     </Testimonial>
 
-    <Testimonial author={{name: 'Alex Tana', image: require('../../public/testimonials/alex-tana.jpg')}}>
+    <Testimonial author={{name: 'Rares Golea', image: require('../../public/testimonials/rares-golea.jpg')}}>
 
-    Total TypeScript is hands down the best course out there, and the format is the best I've seen. It feels like you're doing a 1 on 1 with Matt Pocock.
+    **I truly feel like a wizard** and I can’t stop recommending it!
 
     </Testimonial>
 
     <Testimonial author={{name: 'John D. Jameson', image: require('../../public/testimonials/john-d-jameson.jpg')}}>
 
-    I’m really digging Total TypeScript by Matt Pocock. It’s taking all the random TypeScript knowledge I’ve found in docs and Stack Overflow over the years and showing how it all works under the hood. Highly recommended!
+    I’m really digging Total TypeScript by Matt Pocock. It’s taking all the random TypeScript knowledge I’ve found in docs and Stack Overflow over the years and showing how it all works under the hood. **Highly recommended!**
 
     </Testimonial>
 
@@ -214,13 +182,13 @@ Check out the free [Beginner's Tutorial](/tutorials/beginners-typescript) to set
 
     <Testimonial author={{name: 'Andrew C.', image: require('../../public/testimonials/andrew-cherniavskii.jpeg')}}>
 
-    The challenges were not too easy, and some of them took me a fair amount of time to find a working solution. This ultimately helped me to better understand TypeScript!
+    The challenges were not too easy, and some of them took me a fair amount of time to find a working solution. **This ultimately helped me to better understand TypeScript!**
 
     </Testimonial>
 
     <Testimonial author={{name: 'Mr. Steal Your Code', image: require('../../public/testimonials/mr-steal-your-code.jpg')}}>
 
-    Matt Pocock is saving my life with his Total TypeScript course. Can't tell you how many other videos I've watched that didn't click as much as his have. Looking forward to the more advanced courses.
+    **Matt Pocock is saving my life with his Total TypeScript course.** Can't tell you how many other videos I've watched that didn't click as much as his have. Looking forward to the more advanced courses.
 
     </Testimonial>
 
@@ -232,134 +200,80 @@ Check out the free [Beginner's Tutorial](/tutorials/beginners-typescript) to set
 
     <Testimonial author={{name: 'Sebastian Kasanzew', image: require('../../public/testimonials/sebastian-kasanzew.jpg')}}>
 
-    These videos and exercises really helped me to get to the next level in TS. I could improve types in some projects at work right on the next day.
+    These videos and exercises really **helped me to get to the next level in TS**. I could improve types in some projects at work right on the next day.
 
     </Testimonial>
-
+    
     <Testimonial className="md:col-span-2" author={{name: 'David Stinemetze', image: require('../../public/testimonials/david-stinemetze.png')}}>
 
-    I’ve just completed the Type Transformations, Generics and Advanced Patterns workshops, and I can say TotalTypeScript is worth every penny. Matt’s mastery of the subject and ability to explain the more complex parts of TypeScript in an understandable way have fundamentally changed and expanded my understanding of the language. While I do think it will take a bit of time to fully process everything I’ve just learned, I definitely feel armed with the knowledge and resources I need to solve <code className="!bg-gray-700 rounded !px-1 py-0.5">any</code> TypeScript problem in front of me. Thank you, Matt for all of the work you put into this!
-
-    </Testimonial>
-
-    <Testimonial author={{name: 'Jökull Sólberg', image: require('../../public/testimonials/jokull-solberg.jpg')}}>
-
-    The content itself was incredible. Videos are superb. Delivery, pacing, tone, everything- wow. I feel like I have superpowers. I’ve Already made one library available!
+    I’ve just completed the Type Transformations, Generics and Advanced Patterns workshops, and I can say **Total TypeScript is worth every penny**. Matt’s mastery of the subject and ability to explain the more complex parts of TypeScript in an understandable way have fundamentally changed and expanded my understanding of the language. While I do think it will take a bit of time to fully process everything I’ve just learned, I definitely feel armed with the knowledge and resources I need to solve <code className="!bg-gray-700 rounded !px-1 py-0.5">any</code> TypeScript problem in front of me. Thank you, Matt for all of the work you put into this!
 
     </Testimonial>
 
-    <Testimonial author={{name: 'Rares Golea', image: require('../../public/testimonials/rares-golea.jpg')}}>
-
-    I truly feel like a wizard and I can’t stop recommending it!
-
-    </Testimonial>
 
     </div>
 
   </div>
 </section>
 
-<section
-  id="about"
-  className="sm:text-lg text-base relative flex flex-col items-center border-t border-white/5 bg-background pt-24"
->
-<div className='absolute w-1/2 h-px top-0 bg-gradient-to-r from-transparent via-primary to-transparent opacity-20' aria-hidden="true" />
-<div className='absolute w-1/2 h-px top-px bg-gradient-to-r from-transparent via-black to-transparent opacity-75' aria-hidden="true" />
+
+<section id="instructor" className='max-w-screen-lg mx-auto w-full md:flex-row [&_img]:my-0 flex-col gap-5 mb-24 flex [&_h3]:mt-0'>
   <Image
-    src={Shine}
-    alt="shine"
-    width={1006}
-    height={588}
-    aria-hidden="true"
-    className="not-prose absolute top-0 pointer-events-none select-none"
+    src={MattInNewStudio}
+    className="w-full h-full rounded max-w-lg"
+    alt="Matt Pocock"
+    loading="eager"
+    quality={100}
   />
-  <h2 className="not-prose flex flex-col items-center font-heading md:text-6xl text-5xl text-white">
-    <span className="text-3xl text-primary">Total</span>
-    <span className='font-medium'>TypeScript</span>
-  </h2>
-  <div className="sm:py-24 py-10 flex md:flex-row flex-col max-w-screen-lg gap-5">
-  <div className='[&_li>p]:pl-0'>
-
-Total TypeScript contains five professional-grade workshops for you to achieve TypeScript Wizardry:
 
-- TypeScript Pro Essentials (200+ exercises, 17 sections)
-
-- Type Transformations (50+ exercises, 7 sections)
-
-- TypeScript Generics (40+ exercises, 6 sections)
+<div>
 
-- Advanced TypeScript Patterns (40+ exercises, 7 sections)
+  ### Hi, I'm Matt Pocock
 
-- Advanced React with TypeScript (50+ exercises, 6 sections)
+  Before creating Total TypeScript, I was a member of the **XState** core team and worked as a developer advocate at **Vercel**.
 
-Each workshop contains dozens of exercises designed to put your problem solving skills to the test.
+  I've worked with TypeScript as a lead fullstack dev, a library maintainer, and now as a full-time educator.
 
-  </div>
-  <div>
-    <div className="flex items-center gap-5 px-5">
-      <Image
-        src={MattPocock}
-        className="flex-shrink-0 rounded sm:my-0 my-0"
-        alt="Matt Pocock"
-        width={139}
-        height={116}
-      />
-      <span className="text-balance font-text md:text-4xl text-3xl text-white">Hi, I’m Matt Pocock</span>
-    </div>
+  I built Total TypeScript to make the secrets of open-source maintainers and industry experts available to everyone.
 
-Before creating Total TypeScript, I was a member of the XState core team and worked as a developer advocate at Vercel.
-
-I've worked with TypeScript as a lead fullstack dev, a library maintainer, and now as a full-time educator.
-
-I built Total TypeScript to make the secrets of open-source maintainers and industry experts available to everyone.
+</div>
 
-  </div>
-  </div>
 </section>
-<section id="workshops" className='bg-gradient-to-b from-background to-black/40 border-b border-white/5 w-full flex flex-col'>
-<h3 className='font-medium not-prose text-2xl pb-10 px-5 text-center max-w-screen-lg mx-auto text-foreground w-full'>Workshops Include</h3>
-<div className="flex flex-col gap-20 pb-24">
-
-<Module title="Type Transformations" slug="type-transformations" metaLabel="over 50 lessons" sub="Wield the power of transformation to move from one type to another with ease" image="https://cdn.sanity.io/images/z9io1e0u/production/8d26aee5def2397f419bb038fd8879286fd41bda-768x768.png">
-
-Many problems in TypeScript come down to transforming types into other types.
-
-This workshop is your first step on the path to wizardry with topics including unions, template literals, conditional types and mapped types. You'll also see how to take advantage of inference and type helpers to ensure you retain flexibility while ensuring your types are exactly how you expect them to be.
-
-</Module>
-
-<Module title="TypeScript Generics" slug="typescript-generics" metaLabel="49 lessons" sub="Unlock amazing inference in the functions you create and the abstractions you build" image="https://cdn.sanity.io/images/z9io1e0u/production/12ef51ed533404ccf132765c75be8b6fe600bcda-769x769.png">
-
-Generics are one of TypeScript's most complex and intimidating features.
-
-Getting good at generics requires deep knowledge of the TypeScript Compiler, as well as an understanding of how their placement impacts their usefulness.
-
-You'll practice with using generics in a variety of situations, as well as how to use function overloads when generics aren't the best fit.
-
-</Module>
-
-<Module title="Advanced TypeScript Patterns" slug="advanced-typescript-patterns" metaLabel="45 lessons" sub="Become fluent in TypeScript's undocumented patterns" image="https://cdn.sanity.io/images/z9io1e0u/production/ce94d457bbfa7580dd803aaa5630a7c6ebed9fee-927x927.png">
-
-The TypeScript community has discovered and iterated upon several patterns that build on the type transformation and generics techniques explored in the earlier workshops.
 
-Here you'll grow more powerful through practice with branded types and the builder pattern, among others. You will also discover the best practices for strongly typing the global scope and how to understand the flow of generics through external libraries.
-
-</Module>
-
-<Module title="Advanced React with TypeScript" slug="advanced-react-with-typescript" metaLabel="57 lessons" sub="Expert-level knowledge for typing your React apps with TypeScript" image="https://cdn.sanity.io/images/z9io1e0u/production/bb6a657e3e8d8a8dc4d66783d23a56797b22b882-1200x1200.png">
+<div className="bg-gradient-to-t from-transparent to-white/10 border-t border-x rounded-t-lg border-white/10 sm:px-10 px-2 sm:pb-16 pb-24">
+<div className="flex md:flex-row flex-col-reverse max-w-screen-lg mx-auto w-full items-start">
+<div>
+<h3 className="not-prose mb-8 text-balance px-5 md:pt-20 pt-0 md:mt-0 -mt-48 text-center font-heading text-4xl font-semibold md:text-left">
+  Who is Total TypeScript for?
+</h3>
 
-Using TypeScript with React can be tricky, requiring flexible, type-safe, and structured components.
+Total TypeScript is suitable for any developer who is ready to work at becoming a wizard, though some basic familiarity with TypeScript is recommended.
 
-This workshop empowers developers to combine React and TypeScript effectively. It covers advanced props handling, leveraging TypeScript generics for components and hooks, safer React hooks using types, understanding the TypeScript type system, recognizing industry-standard patterns, and safely integrating external libraries into React components.
+The Type Transformations workshop begins by warming you up with exercises on basic inference and essential types.
 
-</Module>
+Then nearly 150 exercises later, the Advanced TypeScript Patterns workshop will have you creating chainable method abstractions with generics and the builder pattern.
 
-<Module title="TypeScript Pro Essentials" slug="typescript-pro-essentials" metaLabel="220 lessons" sub="Everything you need from setup to application development patterns" image="https://cdn.sanity.io/images/z9io1e0u/production/80da574ffbb12904f823723d5ea0a8e20add0270-1200x1200.png">
+Check out the free [Beginner's Tutorial](/tutorials/beginners-typescript) to set a foundation and get an idea for the workshop's teaching approach.
 
-Whether you're new to the language or looking to reenforce your foundation, this workshop covers all of the essential TypeScript knowledge and skills you need.
+</div>
+<Image
+  src={Wand}
+  alt="a wand"
+  width={444}
+  height={586}
+  
+  className="relative md:-translate-y-28 md:mt-0 -mt-16 -scale-x-100"
+/>
+</div>
+</div>
 
-From setting up your dev environment through best practices for designing types, this workshop bridges the gap between TypeScript theory and practice with type manipulation techniques, OOP with classes, annotations, assertions, and more!
 
-</Module>
-</div>
-</section>
+import HandPointingDownSparkles from '../../public/assets/landing/hand-pointing-down-sparkles@2x.png'
+import ExerciseScreenshots from '../../public/assets/landing/exercise-screenshots@2x.png'
+import Compass from '../../public/assets/landing/compass@2x.png'
+import Wand from '../../public/assets/landing/wand@2x.png'
+import FiveStarRating from '../../public/assets/landing/5-star-rating@2x.png'
+import Shine from '../../public/assets/landing/shine@2x.png'
+import MattPocock from '../../public/matt-pocock.jpg'
+import MattInNewStudio from '../../public/assets/matt-in-new-studio@2x.jpg'
+import {motion} from 'framer-motion'
diff --git a/apps/total-typescript/src/components/mdx/index.tsx b/apps/total-typescript/src/components/mdx/index.tsx
index c7c4e7ed94..3a817ad7a1 100644
--- a/apps/total-typescript/src/components/mdx/index.tsx
+++ b/apps/total-typescript/src/components/mdx/index.tsx
@@ -26,6 +26,7 @@ export const MDXComponents = {
   Module: (props) => <Module {...props} />,
   Editor: (props) => <MDXEditor {...props} />,
   TranspilePreview: (props) => <MDXTranspilePreview {...props} />,
+  TypeErrorSection: (props) => <TypeErrorSection {...props} />,
 } satisfies Record<string, React.FC<any>>
 
 type TypeErrorProps = {
@@ -167,15 +168,10 @@ const Testimonial: React.FC<
   }>
 > = ({children, className, author}) => {
   return (
-    <div
-      className={cn(
-        'not-prose -mx-5 border-t px-5 py-5 sm:border-0 sm:py-0',
-        className,
-      )}
-    >
+    <div className={cn('not-prose -mx-5 px-5 py-5 sm:py-0', className)}>
       <blockquote className="relative flex h-full flex-col justify-between">
         <div
-          className="text-base font-normal sm:text-balance sm:text-lg"
+          className="text-base font-normal leading-relaxed text-foreground sm:text-balance sm:text-lg sm:leading-relaxed lg:text-xl lg:leading-relaxed [&_strong]:font-semibold [&_strong]:text-white"
           // before:absolute before:bottom-9 before:right-8 before:flex before:items-center before:justify-center before:font-heading before:text-3xl before:font-extrabold before:leading-none before:text-cyan-300 before:content-['”']
         >
           {children}
@@ -191,7 +187,7 @@ const Testimonial: React.FC<
                 className="rounded-full"
               />
             )}
-            <span className="font-heading text-sm">{author.name}</span>
+            <span className="text-sm sm:text-base">{author.name}</span>
           </div>
         )}
       </blockquote>
@@ -209,24 +205,24 @@ const Module: React.FC<React.PropsWithChildren<any>> = ({
 }) => {
   return (
     <div className="not-prose">
-      <div className="mx-auto flex w-full max-w-screen-lg flex-col items-center gap-5 md:flex-row">
+      <div className="mx-auto flex w-full max-w-screen-lg flex-col items-center gap-5 md:flex-row md:items-start">
         <Link
           href={`/workshops/${slug}`}
           className="flex flex-shrink-0 items-center justify-center md:items-start"
         >
-          <Image src={image} alt={title} width={400} height={400} />
+          <Image src={image} alt={title} width={300} height={300} />
         </Link>
-        <div className="px-5">
+        <div className="px-5 md:pt-5">
           <Link href={`/workshops/${slug}`}>
-            <h3 className="text-center font-text text-3xl font-semibold sm:text-4xl md:text-left">
+            <h3 className="text-balance text-center font-text text-3xl font-semibold sm:text-4xl md:text-left">
               {title}
             </h3>
           </Link>
           {/* {metaLabel && <p className="text-center md:text-left">{metaLabel}</p>} */}
-          <h4 className="pt-2 text-center text-lg font-normal text-primary sm:text-xl sm:font-medium md:pt-3 md:text-left">
+          <h4 className="text-balance pt-2 text-center text-lg font-normal text-primary sm:text-xl sm:font-medium md:pt-3 md:text-left lg:text-2xl">
             {sub}
           </h4>
-          <div className="flex flex-col space-y-3 pt-5 text-foreground sm:text-lg md:pt-8">
+          <div className="flex flex-col space-y-5 pt-5 leading-relaxed text-foreground sm:text-lg sm:leading-relaxed md:pt-8 lg:text-xl lg:leading-relaxed">
             {children}
           </div>
         </div>
@@ -279,6 +275,68 @@ export const ShareImageMDX: React.FC<{src: string}> = ({src}) => {
   ) : null
 }
 
+const TypeErrorSection = () => {
+  return (
+    <section className="relative bg-gradient-to-t from-background via-[#191427] to-[#191427] selection:bg-[#CC5344] selection:text-white">
+      <div className="relative z-10 overflow-x-hidden">
+        <div className="pb-16 pt-0 md:pb-64 md:pt-32">
+          <div className="not-prose flex flex-col gap-8 bg-gradient-to-b from-[#866583] to-white bg-clip-text text-center font-heading font-normal text-transparent md:scale-150">
+            <p className="text-lg">The feature’s working.</p>
+            <p className="text-xl">The tests are passing.</p>
+            <p className="text-2xl">But your IDE is a sea of red lines.</p>
+            <p className="text-balance text-3xl font-semibold">
+              TypeScript’s not happy again.
+            </p>
+          </div>
+        </div>
+
+        <div className="not-prose flex flex-col items-center gap-5 text-center text-[#CCC4E0]">
+          <p>You move on to the next error:</p>
+          <p className="text-balance font-heading text-3xl font-semibold text-white md:text-5xl">
+            “What on earth is this?”
+          </p>
+          <p>you think to yourself.</p>
+        </div>
+
+        <ErrorFromHell>
+          {`Element implicitly has an ‘any’ type because expression of type ‘string’ can’t be used to index type ‘{ string: string | undefined; }’`}
+          <br />
+          <br />
+          {`No index signature with a parameter of type ‘string’ was found on type ‘{ string: string | undefined; }’`}
+        </ErrorFromHell>
+
+        <div className="not-prose mx-auto mt-16 flex w-full flex-col items-center justify-center gap-5 text-center text-white">
+          <p className="max-w-2xl text-balance [&_strong]:font-semibold">
+            <strong>It’s impossible to Google.</strong> Every search result is
+            either <strong>"here’s 100 lines of complex code"</strong> or{' '}
+            <strong>"here's a solution that doesn't work”</strong>
+          </p>
+          <p className="text-balance py-3 italic text-[#CCC4E0]">
+            You contemplate the absurd amount of hours you spend solving these
+            problems.
+          </p>
+          <p className="">You'd rather give up than deal with another:</p>
+        </div>
+
+        <Image
+          src={require('../../../public/assets/landing/ts-errors@2x.png')}
+          width={756}
+          height={483}
+          className="relative mx-auto mb-0 -translate-y-10 md:-translate-y-16"
+          alt="TypeScript Error: The intersection 'User & PublicUser' was reduced to 'never' because property 'email' has conflicting types in some constituents."
+        />
+      </div>
+      <Image
+        alt="sea of red lines"
+        aria-hidden="true"
+        src={require('../../../public/assets/landing/bg-sea-of-red-lines@2x.png')}
+        fill
+        className="z-0 object-contain object-top mix-blend-lighten"
+      />
+    </section>
+  )
+}
+
 interface LinkedHeadingProps extends React.HTMLProps<HTMLHeadingElement> {
   as?: Extract<
     keyof JSX.IntrinsicElements,
diff --git a/apps/total-typescript/src/pages/buy.tsx b/apps/total-typescript/src/pages/buy.tsx
index a5f895c7ae..cafcd47e60 100644
--- a/apps/total-typescript/src/pages/buy.tsx
+++ b/apps/total-typescript/src/pages/buy.tsx
@@ -15,6 +15,7 @@ import {useCoupon} from '@skillrecordings/skill-lesson/path-to-purchase/use-coup
 import cx from 'classnames'
 import {PriceCheckProvider} from '@skillrecordings/skill-lesson/path-to-purchase/pricing-check-context'
 import {getPricing} from '@/lib/pricing'
+import {totalTypescriptPurchaseButtonRenderer} from '@/utils/purchase-button-renderer'
 
 export const getServerSideProps: GetServerSideProps = async (context) => {
   const {req, query} = context
@@ -138,6 +139,9 @@ const Buy: React.FC<React.PropsWithChildren<CommerceProps>> = ({
                       index={i}
                       couponId={couponId}
                       allowPurchase={allowPurchase}
+                      purchaseButtonRenderer={
+                        totalTypescriptPurchaseButtonRenderer
+                      }
                     />
                   </div>
                 </PriceCheckProvider>
diff --git a/apps/total-typescript/src/styles/pricing.css b/apps/total-typescript/src/styles/pricing.css
index 35ea9e0df6..f000fcfeba 100644
--- a/apps/total-typescript/src/styles/pricing.css
+++ b/apps/total-typescript/src/styles/pricing.css
@@ -38,16 +38,26 @@
           @apply pt-20;
         }
       }
+
+      /* [data-pricing-product-checkout-button] {
+        @apply from-amber-400 to-amber-500 text-amber-950 hover:shadow-amber-700/20 !important;
+      } */
+    }
+    [data-pricing-product='0'] {
+      [data-pricing-product-checkout-button] {
+        @apply from-gray-400 to-gray-500 text-gray-950 brightness-125 hover:shadow-gray-700/20 hover:brightness-150 !important;
+      }
     }
+
     [data-pricing-product] {
       @apply relative flex w-full max-w-[406px] flex-col items-center justify-center rounded-md border bg-card shadow-2xl;
 
       [data-pricing-product-image] {
-        @apply pointer-events-none absolute top-[-130px] z-0 h-full max-h-[300px] w-full max-w-[300px] select-none;
+        @apply pointer-events-none absolute top-[-100px] z-0 h-full max-h-[250px] w-full max-w-[250px] select-none;
       }
 
       article {
-        @apply relative z-10 pt-16;
+        @apply relative z-10 pt-16 text-base;
         [data-pricing-footer] {
           [data-guarantee-image] {
             @apply hidden;
@@ -59,14 +69,14 @@
         @apply flex flex-col items-center pt-24;
 
         [data-title] {
-          @apply w-full text-center font-medium text-cyan-200;
+          @apply w-full text-center text-xl font-medium text-gray-200;
         }
 
         [data-byline] {
           @apply pt-2 text-base font-medium text-gray-200;
         }
         [data-byline]:last-of-type {
-          @apply pt-0 text-cyan-200;
+          @apply pt-1 text-lg font-medium text-gray-200;
         }
 
         [data-name-badge] {
@@ -98,7 +108,7 @@
         }
 
         [data-price-container='loading'] {
-          @apply flex h-[56px] items-center justify-center;
+          @apply flex h-[88px] items-center justify-center;
         }
       }
 
@@ -221,13 +231,17 @@
       }
 
       [data-pricing-product-checkout-button] {
-        @apply flex w-full items-center justify-center rounded-md bg-gradient-to-b from-cyan-300 to-cyan-400 px-5 py-4 text-center text-lg font-semibold text-gray-900 brightness-105 transition ease-in-out hover:scale-105 hover:shadow-xl hover:shadow-cyan-700/40 hover:brightness-110 focus-visible:ring-white disabled:cursor-wait;
+        @apply flex w-full items-center justify-center rounded-md bg-gradient-to-b from-green-300 to-green-600 px-5 py-4 text-center text-lg font-semibold text-gray-950 brightness-105 transition ease-in-out hover:scale-105 hover:shadow-xl hover:shadow-green-700/40 hover:brightness-110 focus-visible:ring-white disabled:cursor-wait;
 
         span {
           @apply relative z-10;
         }
       }
 
+      [data-pricing-product-checkout-button='typescript-pro-essentials'] {
+        @apply bg-gradient-to-b from-emerald-600 to-emerald-800  text-gray-950  hover:shadow-emerald-950/30;
+      }
+
       [data-pricing-product-checkout-button]:disabled {
         @apply cursor-wait;
       }
diff --git a/apps/total-typescript/src/templates/home-template.tsx b/apps/total-typescript/src/templates/home-template.tsx
index 34dd71e165..626d4669f9 100644
--- a/apps/total-typescript/src/templates/home-template.tsx
+++ b/apps/total-typescript/src/templates/home-template.tsx
@@ -19,6 +19,9 @@ import {trpc} from '@/trpc/trpc.client'
 import {cn} from '@skillrecordings/ui/utils/cn'
 import {Companies} from '@/components/companies'
 import Head from 'next/head'
+import {QueryStatus} from '@tanstack/react-query'
+import {NextRouter} from 'next/router'
+import {totalTypescriptPurchaseButtonRenderer} from '@/utils/purchase-button-renderer'
 
 export const HomeTemplate: React.FC<
   React.PropsWithChildren<CommerceProps & {level?: string}>
@@ -72,6 +75,7 @@ export const HomeTemplate: React.FC<
       className={cn('', {
         'lg:pt-16': defaultCouponData,
       })}
+      withNavLinks={false}
       meta={{
         title: `Professional TypeScript Training by Matt Pocock `,
         ogImage: couponFromCode && {
@@ -90,80 +94,87 @@ export const HomeTemplate: React.FC<
       </Head>
       <Header level={skillLevel} />
       <main className="overflow-x-hidden">
-        <Copy level={skillLevel} />
-        {isSellingLive ? (
-          <div
-            className="flex flex-col items-center pb-16 pt-16 sm:pt-24"
-            id="buy"
-          >
-            <Image
-              width={300}
-              src={require('../../public/assets/feather@2x.png')}
-              alt=""
-              aria-hidden="true"
-              className="-mt-24 mb-16 max-w-[300px] -rotate-12 sm:-mt-32 sm:mb-24 sm:max-w-full"
-            />
-            <h2 className="mx-auto max-w-screen-lg text-balance px-3 text-center font-heading text-3xl font-bold sm:text-5xl lg:text-6xl xl:text-6xl">
-              Your Total TypeScript Adventure Starts Now
-            </h2>
-            <Companies />
-            <div className="flex w-full flex-col items-center px-5 pb-0 pt-12 sm:pb-24">
-              <section className="pt-32">
-                <div className="flex flex-col-reverse gap-40 lg:flex lg:flex-row lg:gap-0">
-                  {sortedProductsByName?.map((product, i) => {
-                    const isFirst = products.length > 1 && i === 0
-                    const isLast =
-                      products.length > 1 && i === products.length - 1
-                    const isPro = !isFirst && isLast
+        <Copy
+          components={{
+            Companies,
+            Buy: () => {
+              return (
+                <section
+                  className="not-prose flex flex-col items-center pb-10 pt-16 sm:pt-24"
+                  id="buy"
+                >
+                  <Image
+                    width={300}
+                    src={require('../../public/assets/feather@2x.png')}
+                    alt=""
+                    aria-hidden="true"
+                    className="-mt-24 mb-16 max-w-[300px] rotate-[-33deg] sm:-mt-32 sm:mb-24 sm:max-w-full"
+                  />
+                  <h2 className="mx-auto max-w-screen-lg text-balance px-3 text-center font-heading text-3xl font-bold sm:text-5xl lg:text-6xl xl:text-6xl">
+                    Your Total TypeScript adventure starts now
+                  </h2>
+                  <div className="flex w-full flex-col items-center px-5 pb-0 pt-12 sm:pb-24">
+                    <div className="pt-32">
+                      <div className="flex flex-col-reverse gap-40 lg:flex lg:flex-row lg:gap-0">
+                        {sortedProductsByName?.map((product, i) => {
+                          const isFirst = products.length > 1 && i === 0
+                          const isLast =
+                            products.length > 1 && i === products.length - 1
+                          const isPro = !isFirst && isLast
 
-                    return (
-                      <PriceCheckProvider
-                        key={product.productId}
-                        purchasedProductIds={purchasedProductIds}
-                      >
-                        <div
-                          key={product.name}
-                          className={cx('transition hover:opacity-100', {
-                            'mx-auto max-w-sm origin-top-left opacity-80 lg:mt-28 lg:scale-[90%]':
-                              isFirst,
-                            'origin-top lg:scale-105': isPro,
-                          })}
-                        >
-                          <Element name="buy" aria-hidden="true" />
-                          <Pricing
-                            index={i}
-                            product={product}
-                            userId={userId}
-                            purchased={purchasedProductIds.includes(
-                              product.productId,
-                            )}
-                            couponId={couponId}
-                            options={{
-                              withGuaranteeBadge: true,
-                              withImage: true,
-                            }}
-                            allowPurchase={allowPurchase}
-                          />
-                        </div>
-                      </PriceCheckProvider>
-                    )
-                  })}
-                </div>
-              </section>
-            </div>
-            <div className="flex w-full items-center justify-center pt-16">
-              <Image
-                src="https://res.cloudinary.com/total-typescript/image/upload/v1689864739/money-back-guarantee-large_l3sikc.png"
-                alt="30-Day Money Back Guarantee"
-                width={700 / 1.7}
-                height={252 / 1.7}
-                priority
-              />
-            </div>
-          </div>
-        ) : (
-          <SubscribeToNewsletter level={skillLevel} />
-        )}
+                          return (
+                            <PriceCheckProvider
+                              key={product.productId}
+                              purchasedProductIds={purchasedProductIds}
+                            >
+                              <div
+                                key={product.name}
+                                className={cx('transition hover:opacity-100', {
+                                  'mx-auto max-w-sm origin-top-left opacity-80 lg:mt-28 lg:scale-[90%]':
+                                    isFirst,
+                                  'origin-top lg:scale-105': isPro,
+                                })}
+                              >
+                                <Element name="buy" aria-hidden="true" />
+                                <Pricing
+                                  index={i}
+                                  product={product}
+                                  userId={userId}
+                                  purchased={purchasedProductIds.includes(
+                                    product.productId,
+                                  )}
+                                  couponId={couponId}
+                                  options={{
+                                    withGuaranteeBadge: true,
+                                    withImage: true,
+                                  }}
+                                  allowPurchase={allowPurchase}
+                                  purchaseButtonRenderer={
+                                    totalTypescriptPurchaseButtonRenderer
+                                  }
+                                />
+                              </div>
+                            </PriceCheckProvider>
+                          )
+                        })}
+                      </div>
+                    </div>
+                  </div>
+                  <div className="flex w-full items-center justify-center pt-16">
+                    <Image
+                      src="https://res.cloudinary.com/total-typescript/image/upload/v1689864739/money-back-guarantee-large_l3sikc.png"
+                      alt="30-Day Money Back Guarantee"
+                      width={700 / 1.7}
+                      height={252 / 1.7}
+                      priority
+                    />
+                  </div>
+                </section>
+              )
+            },
+          }}
+          level={skillLevel}
+        />
       </main>
     </Layout>
   )
diff --git a/apps/total-typescript/src/utils/purchase-button-renderer.tsx b/apps/total-typescript/src/utils/purchase-button-renderer.tsx
new file mode 100644
index 0000000000..c7c7e15882
--- /dev/null
+++ b/apps/total-typescript/src/utils/purchase-button-renderer.tsx
@@ -0,0 +1,40 @@
+import {NextRouter} from 'next/router'
+import {QueryStatus} from '@tanstack/react-query'
+import {SanityProduct} from '@skillrecordings/commerce-server/dist/@types'
+
+export const totalTypescriptPurchaseButtonRenderer = (
+  formattedPrice: any,
+  product: SanityProduct,
+  status: QueryStatus,
+  quantity: number,
+  canPurchaseTier: boolean,
+  router?: NextRouter,
+  buttonCtaLabel: string = 'Buy Now',
+) => {
+  const isContactUs = quantity >= 30
+
+  console.log('product', product)
+
+  return (
+    <button
+      data-pricing-product-checkout-button={product.slug}
+      type={isContactUs ? 'button' : 'submit'}
+      disabled={status === 'loading' || status === 'error' || !canPurchaseTier}
+      onClick={() => {
+        if (isContactUs) {
+          router?.push('/for-teams')
+        }
+      }}
+    >
+      <span>
+        {!canPurchaseTier
+          ? 'Not Available'
+          : isContactUs
+          ? 'Contact Us'
+          : formattedPrice?.upgradeFromPurchaseId
+          ? 'Upgrade Now'
+          : product?.action || buttonCtaLabel}
+      </span>
+    </button>
+  )
+}
diff --git a/packages/skill-lesson/path-to-purchase/pricing.tsx b/packages/skill-lesson/path-to-purchase/pricing.tsx
index ef44b5c596..032801bf5a 100644
--- a/packages/skill-lesson/path-to-purchase/pricing.tsx
+++ b/packages/skill-lesson/path-to-purchase/pricing.tsx
@@ -21,7 +21,7 @@ import {redirectUrlBuilder, SubscribeToConvertkitForm} from '../convertkit'
 import {useConvertkit} from '../hooks/use-convertkit'
 import {setUserId} from '@amplitude/analytics-browser'
 import {track} from '../utils/analytics'
-import {useRouter} from 'next/router'
+import {NextRouter, useRouter} from 'next/router'
 import * as Switch from '@radix-ui/react-switch'
 import Link from 'next/link'
 import {trpcSkillLessons} from '../utils/trpc-skill-lessons'
@@ -75,6 +75,9 @@ type PricingProps = {
     product: SanityProduct,
     status: QueryStatus,
     quantity: number,
+    canPurchaseTier: boolean,
+    router?: NextRouter,
+    buttonCtaLabel?: string,
   ) => React.ReactNode
   options?: {
     withImage?: boolean
@@ -178,6 +181,8 @@ export const Pricing: React.FC<React.PropsWithChildren<PricingProps>> = ({
     status: QueryStatus,
     quantity: number,
     canPurchaseTier: boolean,
+    router?: NextRouter,
+    buttonCtaLabel: string = 'Buy Now',
   ) => {
     const isContactUs = quantity >= 30
 
@@ -190,7 +195,7 @@ export const Pricing: React.FC<React.PropsWithChildren<PricingProps>> = ({
         }
         onClick={() => {
           if (isContactUs) {
-            router.push('/for-teams')
+            router?.push('/for-teams')
           }
         }}
       >
@@ -614,6 +619,8 @@ export const Pricing: React.FC<React.PropsWithChildren<PricingProps>> = ({
                       status,
                       quantity,
                       canPurchaseTier,
+                      router,
+                      buttonCtaLabel,
                     )}
                     {withGuaranteeBadge && (
                       <span data-guarantee="">30-Day Money-Back Guarantee</span>