Merge pull request #189 from storytold/bflat-storyteller-social-screens

title hover screenshots

packages/storyteller.io/package.json

@@ -29,6 +29,7 @@
     "react-dom": "^16.13.1",
     "react-fast-marquee": "^1.3.5",
     "react-locomotive-scroll": "^0.2.2",
+    "react-parallax-tilt": "^1.7.110",
     "react-router-dom": "^5.2.0",
     "react-scripts": "5.0.0",
     "react-toastify": "^9.0.8",

packages/storyteller.io/src/App.scss

@@ -35,7 +35,7 @@ h3 {
 
 p {
   font-size: 16px;
-  line-height: 28px;
+  line-height: 155%;
   opacity: 0.8;
   font-weight: 400;
 }
@@ -1145,6 +1145,35 @@ span.swiper-pagination-bullet.swiper-pagination-bullet-active {
   line-height: 1.4;
 }
 
+.img-layers {
+  display: flex;
+  position: relative;
+
+  .img-front-right {
+    position: absolute;
+    max-width: 380px;
+    right: -14%;
+    bottom: 12%;
+  }
+
+  .img-front-left {
+    position: absolute;
+    max-width: 380px;
+    left: -14%;
+    bottom: 12%;
+  }
+
+  .img-back {
+    border-radius: 8px;
+    border: 2px solid;
+    border-color: rgba(#4d4d66, 0.25);
+  }
+
+  .img-mascot {
+    filter: drop-shadow(0px 0px 50px rgba(0, 0, 0, 0.95));
+  }
+}
+
 @media (max-width: 1199.98px) {
   .hero-img {
     transform: scale(0.85) !important;
@@ -1229,6 +1258,22 @@ span.swiper-pagination-bullet.swiper-pagination-bullet-active {
     padding-top: 5rem;
     padding-bottom: 5rem;
   }
+
+  .img-layers {
+    transform: scale(0.8);
+
+    .img-front-right {
+      transform: scale(1.4);
+      bottom: 15%;
+      right: 0;
+    }
+
+    .img-front-left {
+      transform: scale(1.4);
+      bottom: 15%;
+      left: 0;
+    }
+  }
 }
 
 @media (max-width: 767.98px) {
@@ -1323,6 +1368,22 @@ span.swiper-pagination-bullet.swiper-pagination-bullet-active {
   .about-card {
     min-height: 120px;
   }
+
+  .img-layers {
+    transform: scale(1);
+
+    .img-front-right {
+      transform: scale(0.8);
+      bottom: 0;
+      right: -15%;
+    }
+
+    .img-front-left {
+      transform: scale(0.8);
+      bottom: 0;
+      left: -15%;
+    }
+  }
 }
 
 #sub-title {

packages/storyteller.io/src/pages/index/IndexPage.tsx

@@ -34,6 +34,7 @@ import { Swiper, SwiperSlide } from "swiper/react";
 import "swiper/css";
 import "swiper/css/pagination";
 import { Autoplay, Pagination } from "swiper";
+import Tilt from "react-parallax-tilt";
 
 function IndexPage() {
   // Title Animation
@@ -219,7 +220,8 @@ function IndexPage() {
             Be Your Own Hollywood
           </h1>
           <h4 className="fw-normal opacity-75 mt-3">
-            Storyteller&apos;s generative AI engine empowers anyone to be a film director or movie star.
+            Storyteller&apos;s generative AI engine empowers anyone to be a film
+            director or movie star.
           </h4>
         </div>
 
@@ -229,13 +231,15 @@ function IndexPage() {
               <div className="col-12 col-md-6 col-lg-3">
                 <p className="fw-normal card bg-dark-solid pt-5 about-card">
                   <FontAwesomeIcon icon={faCube} className="about-icon" />
-                  Blended 3D upscaling and style transfer to achieve any look &mdash; real or animated
+                  Blended 3D upscaling and style transfer to achieve any look
+                  &mdash; real or animated
                 </p>
               </div>
               <div className="col-12 col-md-6 col-lg-3">
                 <p className="fw-normal card bg-dark-solid pt-5 about-card">
                   <FontAwesomeIcon icon={faUserCowboy} className="about-icon" />
-                  Cooperative AI actors that can interact with humans and each other
+                  Cooperative AI actors that can interact with humans and each
+                  other
                 </p>
               </div>
               <div className="col-12 col-md-6 col-lg-3">
@@ -672,15 +676,22 @@ function IndexPage() {
           </Marquee>
         </div>
         <div className="container mt-5 pt-5">
-          <div className="row gx-5 flex-row-reverse">
-            <div className="col-lg-5 text-center text-lg-start">
+          <div className="row gx-5 flex-row-reverse gy-4">
+            <div className="col-lg-6 img-layers">
+              <Tilt trackOnWindow={true}>
+                <img
+                  src="/images/screenshots/fakeyou-screen.webp"
+                  alt="FakeYou"
+                  className="img-fluid img-back"
+                />
+              </Tilt>
               <img
-                src="/images/FakeYou-img.webp"
+                src="/images/fakeyou-mascot.webp"
                 alt="FakeYou"
-                className="img-fluid"
+                className="img-front-right img-mascot"
               />
             </div>
-            <div className="col-lg-7 d-flex flex-column justify-content-center">
+            <div className="col-lg-6 d-flex flex-column justify-content-center">
               <h1 className="fw-bold display-5">FakeYou</h1>
               <h4 className="fw-normal opacity-75 mb-4">
                 Used by millions of people every month
@@ -752,20 +763,26 @@ function IndexPage() {
           <div className="shape-bg dark"></div>
         </div>
         */}
-
       </div>
       <div className="bg-dark section-2">
         <div className="container">
-          <div className="row gx-5">
-            <div className="col-lg-5 text-center text-lg-start">
+          <div className="row gx-5 gy-5">
+            <div className="col-lg-6 img-layers">
+              <Tilt trackOnWindow={true}>
+                <img
+                  src="/images/screenshots/powerstream-screen.webp"
+                  alt="FakeYou"
+                  className="img-fluid img-back"
+                />
+              </Tilt>
               <img
-                src="/images/Stream-img.webp"
-                alt="Power Stream"
-                className="img-fluid"
+                src="/images/powerstream-mascot.webp"
+                alt="FakeYou"
+                className="img-front-left img-mascot"
               />
             </div>
-            <div className="col-lg-7 d-flex flex-column justify-content-center">
-              <h1 className="fw-bold display-5">Power Stream</h1>
+            <div className="col-lg-6 d-flex flex-column justify-content-center">
+              <h1 className="fw-bold display-5">PowerStream</h1>
               <h4 className="fw-normal opacity-75 mb-4">
                 Twitch Streamers and Creators can engage and monetize
               </h4>
@@ -1054,7 +1071,7 @@ function IndexPage() {
             </div>
             <div className="col-6 col-md-3">
               <img
-                src="/images/team/paul.png"
+                src="/images/team/paul.webp"
                 className="img-fluid img-team mb-3"
                 alt=""
               />
@@ -1063,7 +1080,7 @@ function IndexPage() {
             </div>
             <div className="col-6 col-md-3">
               <img
-                src="/images/team/bombay.png"
+                src="/images/team/bombay.webp"
                 className="img-fluid img-team mb-3"
                 alt=""
               />

yarn.lock

@@ -3901,6 +3901,7 @@ __metadata:
   dependencies:
     craco: ^0.0.3
     lerna: ^4.0.0
+    react-parallax-tilt: ^1.7.110
     yarn: ^1.22.19
   languageName: unknown
   linkType: soft
@@ -16179,6 +16180,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-parallax-tilt@npm:^1.7.110":
+  version: 1.7.110
+  resolution: "react-parallax-tilt@npm:1.7.110"
+  peerDependencies:
+    react: ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0
+    react-dom: ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0
+  checksum: 74c28dfa77abb9bedde0f83b919e4f3f8694e66f5c90228bd5f72c05b128dedf06cbc3bd30461aa29c5a2139539977cc7628fa7b31ebdbfb536d8a666e8fd494
+  languageName: node
+  linkType: hard
+
 "react-refresh@npm:^0.11.0":
   version: 0.11.0
   resolution: "react-refresh@npm:0.11.0"