studio landing scene change/thumbnail, style selection animated thumbnail

packages/fakeyou.com/src/components/common/SelectionBubblesV2/SelectionBubblesV2.scss

@@ -129,6 +129,7 @@
       bottom: 0;
       left: 0;
       font-size: 14px;
+      text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
     }
 
     &::after {
@@ -140,14 +141,12 @@
       height: 50%;
       background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
       z-index: 2;
+      height: 35%;
     }
 
     &.selected::after {
-      background: linear-gradient(
-        to top,
-        rgba(desaturate(darken($primary, 20%), 30%), 70%),
-        transparent
-      );
+      background: linear-gradient(to top, rgba(#632323, 90%), transparent);
+      height: 35%;
     }
   }
 

packages/fakeyou.com/src/v2/view/pages/landing/LandingPage.tsx

@@ -43,6 +43,8 @@ function LandingPage(props: Props) {
 
   const isLoggedIn = props.sessionWrapper.isLoggedIn();
 
+  const canAccessStudio = props.sessionWrapper.canAccessStudio();
+
   return (
     <>
       {domain.website === Website.StorytellerAi && !isLoggedIn && (
@@ -79,7 +81,7 @@ function LandingPage(props: Props) {
             {/* STORYTELLER,AI */}
             {!isLoggedIn ? (
               <>
-                <OnboardingSelection />
+                {!canAccessStudio && <OnboardingSelection />}
                 <VstSectionV2 />
                 <TtsDemoSection
                   sessionWrapper={props.sessionWrapper}

packages/fakeyou.com/src/v2/view/pages/landing/storyteller/OnboardingSelection/OnboardingSelection.tsx

@@ -10,31 +10,31 @@ export default function OnboardingSelection(props: OnboardingSelectionProps) {
 
   const cards = [
     {
-      text: "Scene 1",
-      backgroundImage: "",
+      text: "Room Scene",
+      backgroundImage: "/images/landing/onboarding/room-scene-thumbnail.webp",
       onClick: () => {
-        history.push("/studio-intro/");
+        history.push("/studio-intro/m_ejhs95fc5aybp36h4a79k7523ds6an");
       },
     },
     {
       text: "Scene 2",
       backgroundImage: "",
       onClick: () => {
-        history.push("/studio-intro/");
+        history.push("/studio-intro");
       },
     },
     {
       text: "Scene 3",
       backgroundImage: "",
       onClick: () => {
-        history.push("/studio-intro/");
+        history.push("/studio-intro");
       },
     },
     {
       text: "Scene 4",
       backgroundImage: "",
       onClick: () => {
-        history.push("/studio-intro/");
+        history.push("/studio-intro");
       },
     },
   ];

packages/fakeyou.com/src/v2/view/pages/storyteller_studio_intro/StudioVST/StudioVSTPage.tsx

@@ -75,23 +75,23 @@ export default function PageVSTApp() {
 
   const styleOptions = [
     {
-      label: "Anime",
-      imageUrl: "/images/dummy-image.jpg",
+      label: "2D Anime",
+      imageUrl: "/images/landing/onboarding/styles/style-2d-anime.webp",
       token: "weight_yqexh77ntqyawzgh9fzash798",
     },
     {
-      label: "Pixel",
-      imageUrl: "/images/dummy-image-2.jpg",
+      label: "3D Cartoon",
+      imageUrl: "/images/landing/onboarding/styles/style-3d-cartoon.webp",
       token: "weight_yqexh77ntqyawzgh9fzash798",
     },
     {
-      label: "Painting",
-      imageUrl: "/images/dummy-image-3.jpg",
+      label: "Ink B&W",
+      imageUrl: "/images/landing/onboarding/styles/style-ink-bw.webp",
       token: "weight_yqexh77ntqyawzgh9fzash798",
     },
     {
-      label: "Ink",
-      imageUrl: "/images/dummy-image-4.jpg",
+      label: "Origami",
+      imageUrl: "/images/landing/onboarding/styles/style-origami.webp",
       token: "weight_yqexh77ntqyawzgh9fzash798",
     },
   ];