[resumes][feat] embed marketing video

apps/portal/src/components/resumes/landing/CallToAction.tsx

@@ -1,26 +1,29 @@
-import { Button } from '@tih/ui';
-
 import { Container } from './Container';
 
 export function CallToAction() {
   return (
     <section className="relative overflow-hidden py-32" id="get-started-today">
       <Container className="relative">
-        <div className="mx-auto max-w-lg text-center">
+        <div className="mx-auto text-center">
           <h2 className="font-display text-3xl tracking-tight text-slate-900 sm:text-4xl">
-            Resume review can start right now.
+            People are using it as we speak
           </h2>
           <p className="mt-4 text-lg tracking-tight text-slate-600">
-            It's free! Take charge of your resume game by learning from the top
-            engineers in the field.
+            Check out how Alwyn from Open Government Products uses the platform
+            to provide actionable feedback on a student's resume:
           </p>
-          <Button
-            className="mt-4"
-            href="/resumes"
-            label="Start browsing now"
-            variant="primary"
+          <div className="mt-10 flex justify-center">
+            <iframe
+              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+              allowFullScreen={true}
+              frameBorder="0"
+              height="480"
+              src="https://www.youtube.com/embed/wVi5dhjDT8Y"
+              title="Resume Review with Alwyn from OGP"
+              width="853"
             />
           </div>
+        </div>
       </Container>
     </section>
   );

apps/portal/src/components/resumes/landing/Hero.tsx

@@ -1,4 +1,3 @@
-import Link from 'next/link';
 import { Button } from '@tih/ui';
 
 import { Container } from './Container';
@@ -26,19 +25,18 @@ export function Hero() {
       </p>
       <div className="mt-10 flex justify-center gap-x-4">
         <Button href="/resumes" label="Start browsing now" variant="primary" />
-        {/* TODO: Update video */}
-        <Link href="https://www.youtube.com/watch?v=dQw4w9WgXcQ">
-          <button
-            className="focus-visible:outline-primary-600 group inline-flex items-center justify-center rounded-md py-2 px-4 text-sm ring-1 ring-slate-200 hover:text-slate-900 hover:ring-slate-300 focus:outline-none focus-visible:ring-slate-300 active:bg-slate-100 active:text-slate-600"
-            type="button">
-            <svg
-              aria-hidden="true"
-              className="fill-primary-600 h-3 w-3 flex-none group-active:fill-current">
-              <path d="m9.997 6.91-7.583 3.447A1 1 0 0 1 1 9.447V2.553a1 1 0 0 1 1.414-.91L9.997 5.09c.782.355.782 1.465 0 1.82Z" />
-            </svg>
-            <span className="ml-3">Watch video</span>
-          </button>
-        </Link>
+      </div>
+
+      <div className="mt-10 flex justify-center">
+        <iframe
+          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+          allowFullScreen={true}
+          frameBorder="0"
+          height="480"
+          src="https://www.youtube.com/embed/7jNiW4extlI"
+          title="Resume Review Walkthrough"
+          width="853"
+        />
       </div>
     </Container>
   );

apps/portal/src/components/resumes/landing/PrimaryFeatures.tsx

@@ -84,7 +84,7 @@ export function PrimaryFeatures() {
                               : 'text-blue-100 hover:text-white lg:text-white',
                           )}>
                           <span className="absolute inset-0 rounded-full lg:rounded-r-none lg:rounded-l-xl" />
-                          {feature.title}
+                          <div className="font-bold">{feature.title}</div>
                         </Tab>
                       </h3>
                       <p

apps/portal/src/pages/resumes/index.tsx

@@ -614,7 +614,7 @@ export default function ResumeHomePage() {
             </div>
           </div>
           <div className="relative lg:left-64 lg:w-[calc(100%-16rem)]">
-            <div className="lg:border-grey-200 sticky top-16 z-10 flex flex-wrap items-center justify-between bg-slate-50 pt-6 pb-2 lg:border-b">
+            <div className="lg:border-grey-200 z-1 sticky top-16 flex flex-wrap items-center justify-between bg-slate-50 pt-6 pb-2 lg:border-b">
               <div className="border-grey-200 mb-4 flex w-full justify-between border-b pb-2 lg:mb-0 lg:w-auto lg:border-none xl:pb-0">
                 <div>
                   <Tabs