update(tt): landing page revamp (#1762)

* update(tt): revamp landing page * update(tt): revamp landing page * chore: merge some changes * feat: tweak the green --------- Co-authored-by: Joel Hooks <[email protected]>
skillrecordings · Oct 31, 2024 · d909a7a · d909a7a
1 parent 9e7069a
commit d909a7a
Show file tree

Hide file tree

Showing 15 changed files with 501 additions and 417 deletions.
diff --git a/apps/total-typescript/public/assets/landing/[email protected] b/apps/total-typescript/public/assets/landing/[email protected]
diff --git a/apps/total-typescript/public/assets/[email protected] b/apps/total-typescript/public/assets/[email protected]
diff --git a/apps/total-typescript/public/assets/[email protected] b/apps/total-typescript/public/assets/[email protected]
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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>
   )
 }