diff --git a/packages/storyteller.io/public/images/vision.webp b/packages/storyteller.io/public/images/vision.webp index ab64470580..f2a1082e6a 100644 Binary files a/packages/storyteller.io/public/images/vision.webp and b/packages/storyteller.io/public/images/vision.webp differ diff --git a/packages/storyteller.io/src/App.scss b/packages/storyteller.io/src/App.scss index 77c00f3acc..5417ded8ad 100644 --- a/packages/storyteller.io/src/App.scss +++ b/packages/storyteller.io/src/App.scss @@ -460,13 +460,13 @@ li { .section { margin-top: -1px; - padding-top: 5rem; - padding-bottom: 5rem; + padding-top: 3rem; + padding-bottom: 3rem; } .section-2 { - padding-top: 9rem; - padding-bottom: 9rem; + padding-top: 6rem; + padding-bottom: 6rem; } .section-pb-extra { diff --git a/packages/storyteller.io/src/pages/index/IndexPage.tsx b/packages/storyteller.io/src/pages/index/IndexPage.tsx index 79286be21a..1244835fea 100644 --- a/packages/storyteller.io/src/pages/index/IndexPage.tsx +++ b/packages/storyteller.io/src/pages/index/IndexPage.tsx @@ -16,7 +16,10 @@ function IndexPage() { // https://stackoverflow.com/questions/61510160/why-muted-attribute-on-video-tag-is-ignored-in-react // https://stackoverflow.com/questions/61510160/why-muted-attribute-on-video-tag-is-ignored-in-react const videoRefMain: any = useRef(null); - const videoRefBG: any = useRef(null); + const videoRef1: any = useRef(null); + const videoRef2: any = useRef(null); + const videoRef3: any = useRef(null); + const videoRef4: any = useRef(null); // Title Animation useEffect(() => { @@ -60,19 +63,6 @@ function IndexPage() { ); }, []); - useEffect(() => { - if (!!videoRefBG.current) { - videoRefBG.current.setAttribute("muted", "true"); - videoRefBG.current.setAttribute("autoplay", "true"); - videoRefBG.current.setAttribute("loop", "true"); - videoRefBG.current.setAttribute("playsinline", "true"); - videoRefBG.current.setAttribute("disablepictureinpicture", "true"); - videoRefBG.current.setAttribute("preload", "auto"); - videoRefBG.current.muted = true; - videoRefBG.current.play(); - } - }, [videoRefBG]); - useEffect(() => { if (!!videoRefMain.current) { videoRefMain.current.setAttribute("muted", "true"); @@ -86,6 +76,58 @@ function IndexPage() { } }, [videoRefMain]); + useEffect(() => { + if (!!videoRef1.current) { + videoRefMain.current.setAttribute("muted", "true"); + videoRefMain.current.setAttribute("autoplay", "true"); + videoRefMain.current.setAttribute("loop", "true"); + videoRefMain.current.setAttribute("playsinline", "true"); + videoRefMain.current.setAttribute("disablepictureinpicture", "true"); + videoRefMain.current.setAttribute("preload", "auto"); + videoRefMain.current.muted = true; + videoRefMain.current.play(); + } + }, [videoRef1]); + + useEffect(() => { + if (!!videoRef2.current) { + videoRef2.current.setAttribute("muted", "true"); + videoRef2.current.setAttribute("autoplay", "true"); + videoRef2.current.setAttribute("loop", "true"); + videoRef2.current.setAttribute("playsinline", "true"); + videoRef2.current.setAttribute("disablepictureinpicture", "true"); + videoRef2.current.setAttribute("preload", "auto"); + videoRef2.current.muted = true; + videoRef2.current.play(); + } + }, [videoRef2]); + + useEffect(() => { + if (!!videoRef3.current) { + videoRef3.current.setAttribute("muted", "true"); + videoRef3.current.setAttribute("autoplay", "true"); + videoRef3.current.setAttribute("loop", "true"); + videoRef3.current.setAttribute("playsinline", "true"); + videoRef3.current.setAttribute("disablepictureinpicture", "true"); + videoRef3.current.setAttribute("preload", "auto"); + videoRef3.current.muted = true; + videoRef3.current.play(); + } + }, [videoRef3]); + + useEffect(() => { + if (!!videoRef4.current) { + videoRef4.current.setAttribute("muted", "true"); + videoRef4.current.setAttribute("autoplay", "true"); + videoRef4.current.setAttribute("loop", "true"); + videoRef4.current.setAttribute("playsinline", "true"); + videoRef4.current.setAttribute("disablepictureinpicture", "true"); + videoRef4.current.setAttribute("preload", "auto"); + videoRef4.current.muted = true; + videoRef4.current.play(); + } + }, [videoRef4]); + const [thumbsSwiper, setThumbsSwiper] = useState(null); const teamMembers = [ @@ -158,7 +200,7 @@ function IndexPage() {
Explore Storyteller @@ -202,19 +244,17 @@ function IndexPage() {
- +

- We’re building a future where individual creators can make content that - rivals modern Hollywood studios + We’re building a future where individual creators can make content + that rivals modern Hollywood studios

- “A future where more media is generated every single day than - in all of previous human history. - - Where the technical mastery behind creativity - becomes so accessible, that even a child could create a + “A future where more media is generated every single day than in + all of previous human history. Where the technical mastery behind + creativity becomes so accessible, that even a child could create a masterpiece.”

@@ -358,13 +398,13 @@ function IndexPage() {