fix: copy and modal cleanups

src/components/home/Hero.tsx

@@ -1,14 +1,20 @@
 import { Box, Button, Flex, Heading, Text } from "@chakra-ui/react";
-import React from "react";
+import React, { SetStateAction } from "react";
 import GlobalContainer from "../GlobalContainer";
+import { YoutubeModalInfo } from "./Youtube";
 
 const Hero = ({
   getStarted,
   youtube,
+  setModalInfo,
 }: {
   getStarted: () => void;
   youtube?: React.ReactNode;
+  setModalInfo: React.Dispatch<SetStateAction<YoutubeModalInfo>>;
 }) => {
+  const openYoutubePlayer = () => {
+    setModalInfo({ visible: true, accordionStep: 0 });
+  };
   return (
     <Box bgColor="gray.100" width={"100%"}>
       <GlobalContainer py={4}>
@@ -20,7 +26,7 @@ const Hero = ({
               color="gray.800"
               textShadow="dark-lg"
             >
-              Earn sats to review technical Bitcoin talk transcripts
+              To review technical Bitcoin talk transcripts
             </Heading>
             <Box
               as="ul"
@@ -40,15 +46,23 @@ const Hero = ({
                 <Text>Step 3: Submit (and earn 🤑)</Text>
               </li>
             </Box>
-            <Button
-              mt={4}
-              alignSelf="center"
-              variant="outline"
-              colorScheme="blue"
-              onClick={getStarted}
-            >
-              Get Started
-            </Button>
+            <Flex alignItems={"center"} mt={4} gap={4}>
+              <Button
+                onClick={openYoutubePlayer}
+                variant="solid"
+                colorScheme="blue"
+              >
+                Watch Video
+              </Button>
+              <Button
+                variant="outline"
+                colorScheme="blue"
+                onClick={getStarted}
+                maxW={"fit-content"}
+              >
+                Read Instructions.
+              </Button>
+            </Flex>
           </Flex>
           <Box flex="1 1 50%">{youtube}</Box>
         </Flex>

src/components/home/HeroSection.tsx

@@ -190,7 +190,7 @@ const HeroSection = ({ getStarted }: { getStarted: () => void }) => {
               onMouseLeave={() => setMoreHover(false)}
               rightIcon={moreHover ? <ArrowDown /> : <></>}
             >
-              Tell me more
+              Tell Me More
             </Button>
           </Flex>
         </Flex>

src/components/home/ReadyToReview.tsx

@@ -46,18 +46,19 @@ const ReadyToReview = ({ getStarted }: { getStarted: () => void }) => {
             Ready to review transcripts and earn sats?
           </Text>
           <Button
-            size={{ base: "md", "2xl": "lg" }}
-            maxW={"max-content"}
+            size={{ base: "md", xl: "lg" }}
+            maxW={{ base: "100%", md: "max-content" }}
             bg="#262626"
-            borderRadius={["8px", "8px", null]}
-            fontFamily={"Mona-Sans"}
+            borderRadius={{ base: "8px", xl: "12px" }}
+            py={{ base: "14px", xl: "28px" }}
+            px={{ base: "18px", xl: "36px" }}
             color={"#F7F7F7"}
-            onClick={getStarted}
             variant="outline"
-            _hover={{}}
+            onClick={getStarted}
+            _hover={{ backgroundColor: "orange" }}
             _active={{}}
           >
-            Get started for free!
+            Get Started
           </Button>
         </Flex>
       </Flex>

src/components/home/StepLayout.tsx

@@ -1,12 +1,16 @@
 import { Box, Button, Flex, Image, Text } from "@chakra-ui/react";
-import React, { FC } from "react";
+import React, { FC, useState } from "react";
 import PlayIcon from "../svgs/PlayIcon";
-
+import YoutubePortal, { YoutubeModalInfo } from "./YoutubePortal";
+import YoutubeComponent from "./YoutubeComponent";
+import { YouTubePlayer } from "react-youtube";
+import { PreverVideoProps } from "./Steps";
+import { UI_CONFIG } from "@/config/ui-config";
 interface IStepLayout {
   children: React.ReactNode;
   heading: string;
   sub: string;
-  stepNumber: number;
+  stepNumber: 1 | 2 | 3;
   maxW?: string;
   src?: string;
   headingMaxW?: string;
@@ -22,6 +26,36 @@ const StepLayout: FC<IStepLayout> = ({
   headingMaxW,
   link,
 }) => {
+  const [modalPlayer, setModalPlayer] = useState<YouTubePlayer>(null);
+  const [modalInfo, setModalInfo] = useState<YoutubeModalInfo>({
+    visible: false,
+    accordionStep: null,
+  });
+  const handlePreferVideo: PreverVideoProps["handlePreferVideo"] = (
+    e,
+    step
+  ) => {
+    // continue from last playback if played on same accordion step
+    const playFromTimestamp = step !== modalInfo.accordionStep;
+    setModalInfo({ visible: true, accordionStep: step });
+    if (playFromTimestamp) {
+      //@ts-ignore
+      const timeStamp = UI_CONFIG.YOUTUBE_TIMESTAMP_IN_SECONDS[step];
+      modalPlayer.mute();
+      modalPlayer.seekTo(timeStamp);
+      // some delay to load thumbnail before pause, prevents infinite ui loading
+      setTimeout(() => {
+        modalPlayer.pauseVideo();
+        modalPlayer.unMute();
+      }, 1000);
+    }
+  };
+
+  const handleClose = () => {
+    modalPlayer.pauseVideo();
+    setModalInfo((prev) => ({ ...prev, visible: false }));
+  };
+
   const coloredText = heading.split(" ")[0];
   const othersText = heading.split(coloredText);
   return (
@@ -76,9 +110,7 @@ const StepLayout: FC<IStepLayout> = ({
           fontFamily={" Aeonik Fono"}
         >
           <Button
-            as={"a"}
-            target="_blank"
-            href={link}
+            onClick={(e) => handlePreferVideo(e, stepNumber)}
             leftIcon={
               <Box className="dark-wrapper">
                 <PlayIcon />
@@ -98,6 +130,9 @@ const StepLayout: FC<IStepLayout> = ({
         </Flex>
         {children}
       </Flex>
+      <YoutubePortal modalInfo={modalInfo} handleClose={handleClose}>
+        <YoutubeComponent player={modalPlayer} setPlayer={setModalPlayer} />
+      </YoutubePortal>
     </Flex>
   );
 };

src/components/home/Tutorial.tsx

@@ -80,6 +80,7 @@ const HomePageTutorial = () => {
     <Box width={"100%"}>
       <Hero
         getStarted={getStarted}
+        setModalInfo={setModalInfo}
         youtube={<YoutubeComponent player={player} setPlayer={setPlayer} />}
       />
       <Box>

src/components/home/steps/Step1.tsx

@@ -32,11 +32,11 @@ const Step1 = () => {
       setCurrentIndex((prevIndex) =>
         prevIndex === images.length - 1 ? 0 : prevIndex + 1
       );
-    }, 10000);
+    }, 6000);
     return () => {
       clearInterval(interval);
     };
-  });
+  }, [currentIndex, images.length]);
   return (
     <StepLayout
       stepNumber={1}
@@ -67,6 +67,8 @@ const Step1 = () => {
           >
             <SubStepSingle
               isActive={currentIndex === 0}
+              step={0}
+              setStep={setCurrentIndex}
               heading="Connect"
               sub="Connect your GitHub account to BTCTranscripts by clicking “Get Started”"
               maxW="332px"
@@ -75,13 +77,18 @@ const Step1 = () => {
             />
             <SubStepSingle
               isActive={currentIndex === 1}
+              step={1}
+              setStep={setCurrentIndex}
               heading="Authorize"
               sub="Authorize Bitcoin Transcripts Dev to access to your Github account"
               maxW="332px"
               activeIcon="/steps-icon/step-authorize-active.png"
               inActiveIcon="/steps-icon/step-authorize-inactive.png"
             />
             <SubStepSingle
+              isActive={currentIndex === 1}
+              step={1}
+              setStep={setCurrentIndex}
               sub="In simple English, it means that BTCTranscripts will write your transcript onto GitHub so that it can be reviewed."
               maxW="412px"
             />

src/components/home/steps/Step2.tsx

@@ -36,14 +36,18 @@ const Step2 = () => {
             borderWidth={{ base: 1.5, lg: "0px" }}
           >
             <SubStepSingle
+              step={0}
+              setStep={() => false}
               isActive
               heading="Using Markdown"
               sub="We use markdown. This is a way of writing text that tells computers how to display information - like what's a title, header, what’s bolded, and the like."
               maxW="540px"
             />
             <SubStepSingle
               isActive
-              sub="You probably won’t need to use anything apart from Header 1, Header 2, bolding, italics, and hyperlinks. Here's a super quick primer."
+              step={0}
+              setStep={() => false}
+              sub="You probably won’t need to use anything apart from Header 1, Header 2, bolding, italics, and hyperlinks."
               maxW="536px"
               href="https://www.markdownguide.org/basic-syntax/"
               otherText="Here's a super "

src/components/home/steps/Step3.tsx

@@ -62,6 +62,8 @@ const Step3 = () => {
           <Flex gap={10}>
             <SubStepSingle
               isActive={currentIndex === 0}
+              step={0}
+              setStep={setCurrentIndex}
               heading="Submission"
               sub="Once you submit your transcript, it will create a PR (pull request)* of your edited transcript from the original transcript"
               maxW="528px"
@@ -70,6 +72,8 @@ const Step3 = () => {
             />
             <SubStepSingle
               isActive={currentIndex === 1}
+              step={1}
+              setStep={setCurrentIndex}
               heading="Check the PR"
               sub="If you want to see your transcript, visit your profile and click the link. On the transcript’s GitHub PR, you can click the “Files changed” nav button to view."
               maxW="660px"

src/components/home/steps/SubStepSingle.tsx

@@ -1,8 +1,10 @@
 import { Flex, Link, Text, Image } from "@chakra-ui/react";
-import React, { FC } from "react";
+import React, { FC, SetStateAction } from "react";
 
 interface ISubStepSingle {
   heading?: string;
+  setStep: React.Dispatch<SetStateAction<number>>;
+  step: number;
   isActive?: boolean;
   boldString?: string;
   sub: string;
@@ -24,34 +26,39 @@ const SubStepSingle: FC<ISubStepSingle> = ({
   maxW,
   inActiveIcon,
   activeIcon,
+  step,
+  setStep,
 }) => {
+  const handleClick = () => setStep(step);
+
   return (
     <Flex
       flexDir={"column"}
       width={"100%"}
       gap={{ base: 4, lg: 6 }}
       maxW={maxW}
+      cursor={"pointer"}
+      onClick={handleClick}
     >
-      {heading && (
-        <Flex gap={{ base: 3, lg: 4 }} alignItems={"center"}>
-          {activeIcon && inActiveIcon && (
-            <Image
-              objectFit={"contain"}
-              width={"30px"}
-              src={isActive ? activeIcon : inActiveIcon}
-              alt={heading}
-            />
-          )}
-          <Text
-            fontFamily={"Polysans"}
-            color={isActive ? "#333" : "#A6A6A6"}
-            fontSize={{ base: "1.125rem", xl: "1.5rem", "2xl": "1.5rem" }}
-            fontWeight={700}
-          >
-            {heading || ""} <Text as="span">{boldString || ""}</Text>
-          </Text>
-        </Flex>
-      )}
+      <Flex gap={{ base: 3, lg: 4 }} alignItems={"center"}>
+        {activeIcon && inActiveIcon && (
+          <Image
+            objectFit={"contain"}
+            width={"30px"}
+            src={isActive ? activeIcon : inActiveIcon}
+            alt={heading}
+          />
+        )}
+        <Text
+          fontFamily={"Polysans"}
+          color={isActive ? "#333" : "#A6A6A6"}
+          fontSize={{ base: "1.125rem", xl: "1.5rem", "2xl": "1.5rem" }}
+          minH={{ base: "1.225rem", xl: "1.7rem", "2xl": "1.7rem" }}
+          fontWeight={700}
+        >
+          {heading || ""} <Text as="span">{boldString || ""}</Text>
+        </Text>
+      </Flex>{" "}
       <Text
         fontFamily={"Aeonik Fono"}
         color={isActive ? "#333" : "#A6A6A6"}