diff --git a/packages/fakeyou.com/src/components/layout/TopNav/TopNav.tsx b/packages/fakeyou.com/src/components/layout/TopNav/TopNav.tsx
index b9ad3b1738..2137c53d40 100644
--- a/packages/fakeyou.com/src/components/layout/TopNav/TopNav.tsx
+++ b/packages/fakeyou.com/src/components/layout/TopNav/TopNav.tsx
@@ -9,7 +9,6 @@ import {
faXmark,
faClipboardList,
faPortalEnter,
- faHome,
faCompass,
faCloudUpload,
faTrophy,
@@ -31,7 +30,6 @@ import { useDomainConfig } from "context/DomainConfigContext";
import NavItem from "../../common/NavItem/NavItem";
import ProfileDropdown from "components/common/ProfileDropdown";
import "./TopNav.scss";
-import { Website } from "@storyteller/components/src/env/GetWebsite";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faDiscord } from "@fortawesome/free-brands-svg-icons";
import { GetDiscordLink } from "@storyteller/components/src/env/GetDiscordLink";
@@ -591,15 +589,15 @@ export default function TopNav({
- {domain.website === Website.FakeYou ? "Home" : "Dashboard"}
+ Creator Tools
diff --git a/packages/fakeyou.com/src/v2/view/pages/style-video/StyleVideo.scss b/packages/fakeyou.com/src/v2/view/pages/style-video/StyleVideo.scss
index b9b33371f8..ccf6de8619 100644
--- a/packages/fakeyou.com/src/v2/view/pages/style-video/StyleVideo.scss
+++ b/packages/fakeyou.com/src/v2/view/pages/style-video/StyleVideo.scss
@@ -1,26 +1,25 @@
.fy-style-video-page {
- .fy-style-video-page-ipa-input {
- max-height: 33vh;
- margin-bottom: 1rem;
- }
+ .fy-style-video-page-ipa-input {
+ margin-bottom: 1rem;
+ }
- .prompt-row {
- display: flex;
- gap: 1rem;
+ .prompt-row {
+ display: flex;
+ gap: 1rem;
- .fy-textarea {
- flex: 1;
- }
- }
+ .fy-textarea {
+ flex: 1;
+ }
+ }
- .prompt-column {
- display: inline-block;
- &:nth-child(2) {
- flex-grow: 1;
- }
- }
+ .prompt-column {
+ display: inline-block;
+ &:nth-child(2) {
+ flex-grow: 1;
+ }
+ }
- .button {
- width: 33%;
- }
+ .button {
+ width: 33%;
+ }
}
diff --git a/packages/fakeyou.com/src/v2/view/pages/style-video/StyleVideo.tsx b/packages/fakeyou.com/src/v2/view/pages/style-video/StyleVideo.tsx
index 7065325b25..701bd4c343 100644
--- a/packages/fakeyou.com/src/v2/view/pages/style-video/StyleVideo.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/style-video/StyleVideo.tsx
@@ -10,6 +10,7 @@ import {
TextArea,
Slider,
TempSelect as Select,
+ Label,
} from "components/common";
import { EntityInput } from "components/entities";
import {
@@ -21,6 +22,7 @@ import "./StyleVideo.scss";
import { useParams } from "react-router-dom";
import { STYLE_OPTIONS } from "common/StyleOptions";
import { usePrefixedDocumentTitle } from "common/UsePrefixedDocumentTitle";
+import { faArrowRight } from "@fortawesome/pro-solid-svg-icons";
export default function StyleVideo() {
const { mediaToken: pageMediaToken } = useParams<{ mediaToken: string }>();
@@ -96,30 +98,92 @@ export default function StyleVideo() {
setEnableLipsync(!!prompt?.lipsync_enabled);
};
+ const storytellerCTA = (
+
+
+
+
+
+ Get Creative with 3D to Video Style Transfer!
+
+
+ Build simple 3D scenes, and turn them into incredible visuals using
+ Storyteller Studio!
+
+
+
+
+
+
+
+ );
+
return studioAccessCheck(
<>
-
-
- Style a Video
- {
- mediaTokenSet(target.value);
- },
- type: "media",
- }}
- />
+
+
+ {storytellerCTA}
-
+
+
+ Style a Video
+
+
+ {
+ mediaTokenSet(target.value);
+ },
+ type: "media",
+ }}
+ />
+
+
+
+
-
+
@@ -277,8 +341,15 @@ export default function StyleVideo() {
+
+ {storytellerCTA}
+
-