mirror of
https://github.com/storytold/artcraft.git
synced 2026-11-14 05:42:32 +00:00
storyteller landing update
This commit is contained in:
BFlat committed
1 parent
e69ae072ab
commit
fcea07a64a
10 files changed
+475
-205
No files matched your search
@@ -17,4 +17,5 @@ yarn-error.log
|
||||
templates/storyteller-stream-green
|
||||
|
||||
packages/fakeyou.com/.env
|
||||
packages/storyteller.io/.env
|
||||
packages/power.stream/.env
|
||||
Binary file not shown.
@@ -73,8 +73,10 @@
|
||||
</script>
|
||||
|
||||
<!-- Font -->
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Fira+Sans:wght@300;400;500;600;700;800;900&display=swap"
|
||||
href="https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 384 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 31 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 47 KiB |
@@ -6,7 +6,8 @@ $button-text-color: #666;
|
||||
$primary: #fa6b68;
|
||||
$white: #ffffff;
|
||||
|
||||
$body-font-family: "Fira Sans", serif;
|
||||
$heading-font-family: "Poppins", sans-serif;
|
||||
$body-font-family: "Fira Sans", sans-serif;
|
||||
|
||||
html {
|
||||
// cursor: none;
|
||||
@@ -19,15 +20,24 @@ html {
|
||||
|
||||
body {
|
||||
font-family: $body-font-family;
|
||||
font-weight: 300; // For Fira Sans
|
||||
font-weight: 400;
|
||||
color: $white;
|
||||
background: rgb(47, 47, 75);
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3 {
|
||||
font-family: $heading-font-family;
|
||||
letter-spacing: -0.5px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
p {
|
||||
line-height: 1.6;
|
||||
font-size: 16px;
|
||||
line-height: 1.7;
|
||||
opacity: 0.8;
|
||||
font-weight: 300;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
::-moz-selection {
|
||||
@@ -74,11 +84,40 @@ p {
|
||||
rgba(34, 34, 56, 1) 0%,
|
||||
rgba(23, 23, 37, 1) 100%
|
||||
);
|
||||
height: 1200px;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.bg-hero-2 {
|
||||
background: rgb(34, 34, 56);
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba(34, 34, 56, 1) 0%,
|
||||
rgba(23, 23, 37, 1) 100%
|
||||
);
|
||||
height: 925px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.bg-overlay {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(11, 12, 20, 0.6);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.bg-video {
|
||||
object-fit: cover;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#logo {
|
||||
transition: 0.3s all;
|
||||
|
||||
@@ -251,53 +290,87 @@ p {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.hero-title-container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
font-size: 7.5rem;
|
||||
font-weight: 900;
|
||||
text-transform: uppercase;
|
||||
font-size: 5.6rem;
|
||||
font-weight: 700;
|
||||
width: 100%;
|
||||
padding-top: 130px;
|
||||
letter-spacing: 3px;
|
||||
// text-shadow: 0px 10px 100px #171725;
|
||||
// letter-spacing: 3px;
|
||||
text-shadow: 0px 5px 12px rgba(#0d0d14, 0.2);
|
||||
z-index: 1;
|
||||
white-space: nowrap;
|
||||
position: relative;
|
||||
// white-space: nowrap;
|
||||
margin: 0;
|
||||
line-height: 1.1;
|
||||
|
||||
.hero-title-one {
|
||||
text-align: left;
|
||||
overflow: hidden;
|
||||
margin: 0;
|
||||
line-height: 1;
|
||||
padding-bottom: 12px;
|
||||
|
||||
span {
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.hero-title-two {
|
||||
margin-top: -35px;
|
||||
text-align: right;
|
||||
overflow: hidden;
|
||||
}
|
||||
.hero-title-container {
|
||||
position: absolute;
|
||||
bottom: 100px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.hero-sub-title {
|
||||
max-width: 320px;
|
||||
margin-top: -10px;
|
||||
text-align: end;
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
font-size: 24px;
|
||||
margin-top: -18px;
|
||||
color: #e7e7e7;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.hero-title-outline {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
transform: scale(1.72);
|
||||
top: -44px;
|
||||
overflow: hidden;
|
||||
-webkit-text-stroke: 1px rgba($white, 0.06);
|
||||
}
|
||||
// .hero-title {
|
||||
// font-size: 7.5rem;
|
||||
// font-weight: 900;
|
||||
// text-transform: uppercase;
|
||||
// width: 100%;
|
||||
// padding-top: 130px;
|
||||
// // letter-spacing: 3px;
|
||||
// // text-shadow: 0px 10px 100px #171725;
|
||||
// z-index: 1;
|
||||
// white-space: nowrap;
|
||||
// position: relative;
|
||||
|
||||
// .hero-title-one {
|
||||
// text-align: left;
|
||||
// overflow: hidden;
|
||||
|
||||
// span {
|
||||
// color: $primary;
|
||||
// }
|
||||
// }
|
||||
|
||||
// .hero-title-two {
|
||||
// margin-top: -35px;
|
||||
// text-align: right;
|
||||
// overflow: hidden;
|
||||
// }
|
||||
// }
|
||||
|
||||
// .hero-sub-title {
|
||||
// max-width: 320px;
|
||||
// margin-top: -10px;
|
||||
// text-align: end;
|
||||
// font-size: 18px;
|
||||
// }
|
||||
|
||||
// .hero-title-outline {
|
||||
// position: absolute;
|
||||
// width: 100%;
|
||||
// transform: scale(1.72);
|
||||
// top: -44px;
|
||||
// overflow: hidden;
|
||||
// -webkit-text-stroke: 1px rgba($white, 0.06);
|
||||
// }
|
||||
|
||||
.text-outline {
|
||||
color: transparent;
|
||||
@@ -326,7 +399,7 @@ p {
|
||||
border-radius: 16px;
|
||||
transform: translate3d(0px, 0px, 0px) rotate(45deg);
|
||||
position: absolute;
|
||||
top: -10%;
|
||||
top: -20%;
|
||||
right: 18%;
|
||||
z-index: 1;
|
||||
opacity: 0;
|
||||
@@ -334,13 +407,13 @@ p {
|
||||
|
||||
.shape-3-container {
|
||||
position: absolute;
|
||||
bottom: 40%;
|
||||
right: 26%;
|
||||
bottom: 25%;
|
||||
right: 25%;
|
||||
}
|
||||
|
||||
.shape-3 {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
background: #2c2c40;
|
||||
border-radius: 12px;
|
||||
transform: translate3d(0px, 0px, 0px) rotate(45deg);
|
||||
@@ -350,8 +423,8 @@ p {
|
||||
|
||||
.shape-4-container {
|
||||
position: absolute;
|
||||
bottom: 30%;
|
||||
left: 32%;
|
||||
bottom: 16%;
|
||||
left: 25%;
|
||||
}
|
||||
|
||||
.shape-4 {
|
||||
@@ -413,7 +486,6 @@ p {
|
||||
background-color: #2f2f4a;
|
||||
width: 100%;
|
||||
height: 25%;
|
||||
border-radius: 80px 80px 0 0;
|
||||
}
|
||||
|
||||
.bg-light {
|
||||
@@ -426,7 +498,7 @@ p {
|
||||
}
|
||||
|
||||
.bg-dark {
|
||||
background: rgb(23, 23, 37);
|
||||
background: rgb(25, 25, 41);
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba(23, 23, 37, 1) 0%,
|
||||
@@ -462,11 +534,11 @@ p {
|
||||
top: 50%;
|
||||
|
||||
a {
|
||||
color: #7676a0;
|
||||
color: rgba($white, 0.6);
|
||||
transition: 0.3s;
|
||||
|
||||
&:hover {
|
||||
color: lighten(#7676a0, 10%);
|
||||
color: lighten($white, 10%);
|
||||
transform: translateX(2px);
|
||||
}
|
||||
}
|
||||
@@ -602,13 +674,12 @@ p {
|
||||
}
|
||||
|
||||
.marquee-title {
|
||||
font-size: 7.5rem;
|
||||
font-weight: 900;
|
||||
text-transform: uppercase;
|
||||
margin-top: 7.5rem;
|
||||
font-size: 5.5rem;
|
||||
font-weight: 800;
|
||||
margin-top: 5.5rem;
|
||||
|
||||
.text-outline {
|
||||
-webkit-text-stroke: 2px rgba(#4d4d66, 1);
|
||||
-webkit-text-stroke: 2px rgba(#5f5f7a, 1);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -631,7 +702,7 @@ p {
|
||||
font-size: 10rem;
|
||||
color: rgba($white, 0);
|
||||
-webkit-text-stroke: 2px rgba(#4d4d66, 0.3);
|
||||
letter-spacing: 3px;
|
||||
// letter-spacing: 3px;
|
||||
font-weight: 900;
|
||||
margin: 0;
|
||||
}
|
||||
@@ -1046,27 +1117,28 @@ span.swiper-pagination-bullet.swiper-pagination-bullet-active {
|
||||
border-radius: 0 0 0 0;
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
font-size: 8vw;
|
||||
white-space: nowrap;
|
||||
line-height: 1;
|
||||
letter-spacing: normal;
|
||||
// .hero-title {
|
||||
// font-size: 8vw;
|
||||
// white-space: nowrap;
|
||||
// line-height: 1;
|
||||
// // letter-spacing: normal;
|
||||
|
||||
.hero-title-one {
|
||||
text-align: center;
|
||||
}
|
||||
// .hero-title-one {
|
||||
// text-align: center;
|
||||
// }
|
||||
|
||||
.hero-title-two {
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
}
|
||||
// .hero-title-two {
|
||||
// text-align: center;
|
||||
// margin: 0;
|
||||
// }
|
||||
// }
|
||||
|
||||
.hero-sub-title {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.hero-sub-title {
|
||||
max-width: 50%;
|
||||
width: 100%;
|
||||
margin-top: 10px;
|
||||
text-align: center;
|
||||
margin-top: 18px;
|
||||
}
|
||||
|
||||
.lead {
|
||||
@@ -1127,18 +1199,18 @@ span.swiper-pagination-bullet.swiper-pagination-bullet-active {
|
||||
height: 180px;
|
||||
}
|
||||
|
||||
.bg-hero {
|
||||
min-height: 1020px;
|
||||
max-height: 1020px;
|
||||
}
|
||||
// .bg-hero {
|
||||
// min-height: 1020px;
|
||||
// max-height: 1020px;
|
||||
// }
|
||||
|
||||
.hero-title {
|
||||
font-size: 11.5vw;
|
||||
}
|
||||
|
||||
.hero-sub-title {
|
||||
max-width: 90%;
|
||||
}
|
||||
// .hero-sub-title {
|
||||
// max-width: 90%;
|
||||
// }
|
||||
|
||||
.shape-1-container {
|
||||
left: 12%;
|
||||
|
||||
@@ -75,9 +75,9 @@ function TopNav(props: Props) {
|
||||
>
|
||||
<img
|
||||
id="logo"
|
||||
src="/logo/Storyteller-Logo.png"
|
||||
src="/logo/storytellerai-logo.png"
|
||||
alt="Storyteller Logo"
|
||||
height="36"
|
||||
height="34"
|
||||
className="mb-2"
|
||||
/>
|
||||
</a>
|
||||
@@ -119,10 +119,10 @@ function TopNav(props: Props) {
|
||||
>
|
||||
<img
|
||||
id="logo"
|
||||
src="/logo/Storyteller-Logo.png"
|
||||
src="/logo/storytellerai-logo.png"
|
||||
alt="Storyteller Logo"
|
||||
height="36"
|
||||
className="mb-2"
|
||||
height="30"
|
||||
className="mt-2"
|
||||
/>
|
||||
</a>
|
||||
<button
|
||||
|
||||
@@ -153,88 +153,96 @@ function IndexPage() {
|
||||
<>
|
||||
<div id="home" data-scroll-section>
|
||||
<div className="bg-hero">
|
||||
<div className="container">
|
||||
<div className="hero-title-container">
|
||||
<h1
|
||||
id="hero-title"
|
||||
className="hero-title d-flex flex-column text-center"
|
||||
>
|
||||
<span
|
||||
className="hero-title-one align-items-center zi-2"
|
||||
data-scroll
|
||||
data-scroll-speed="3"
|
||||
data-scroll-direction="horizontal"
|
||||
data-scroll-position="top"
|
||||
>
|
||||
The <span>Future</span>
|
||||
</span>
|
||||
<span
|
||||
className="hero-title-two zi-2"
|
||||
data-scroll
|
||||
data-scroll-speed="-3"
|
||||
data-scroll-direction="horizontal"
|
||||
data-scroll-position="top"
|
||||
>
|
||||
of Production
|
||||
</span>
|
||||
</h1>
|
||||
|
||||
<div
|
||||
className="d-flex flex-column align-items-center align-items-xl-end"
|
||||
id="sub-title"
|
||||
>
|
||||
<p
|
||||
className="lead hero-sub-title fw-normal opacity-75"
|
||||
data-scroll
|
||||
data-scroll-speed="-4"
|
||||
data-scroll-direction="horizontal"
|
||||
data-scroll-position="top"
|
||||
<video
|
||||
className="bg-video"
|
||||
src="/hero/brandon-hyperjail.webm"
|
||||
autoPlay
|
||||
loop
|
||||
playsInline
|
||||
muted
|
||||
></video>
|
||||
<div className="bg-overlay">
|
||||
<div className="container">
|
||||
<div className="hero-title-container">
|
||||
{/* Desktop Title */}
|
||||
<h1
|
||||
id="hero-title"
|
||||
className="hero-title mb-0 d-none d-lg-block"
|
||||
>
|
||||
<span className="hero-title-one align-items-center zi-2">
|
||||
The Future of Storytelling
|
||||
</span>
|
||||
</h1>
|
||||
{/* Mobile Title */}
|
||||
<h1 className="hero-title d-lg-none">
|
||||
<span className="hero-title-one align-items-center zi-2">
|
||||
The Future of Storytelling
|
||||
</span>
|
||||
</h1>
|
||||
<p className="hero-sub-title">
|
||||
We’re scientists, engineers, and creatives building the future
|
||||
AI cloud production studio.
|
||||
</p>
|
||||
<div
|
||||
id="hero-btn"
|
||||
data-scroll
|
||||
data-scroll-speed="-5"
|
||||
data-scroll-direction="horizontal"
|
||||
data-scroll-position="top"
|
||||
className="zi-10 mt-2"
|
||||
>
|
||||
<a className="btn btn-primary" href="#about" data-scroll-to>
|
||||
<span>Explore</span>
|
||||
<div id="hero-btn" className="pt-4 mt-3">
|
||||
<a
|
||||
className="btn btn-primary d-inline-flex"
|
||||
href="#about"
|
||||
data-scroll-to
|
||||
>
|
||||
<span>Explore Storyteller</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="hero-title-outline noselect">
|
||||
<h1
|
||||
id="hero-title-outline"
|
||||
className="hero-title d-flex flex-column text-center"
|
||||
>
|
||||
<span
|
||||
className="hero-title-one align-items-center text-outline"
|
||||
data-scroll
|
||||
data-scroll-speed="-4"
|
||||
data-scroll-direction="horizontal"
|
||||
data-scroll-position="top"
|
||||
>
|
||||
The Future
|
||||
</span>
|
||||
<span
|
||||
className="hero-title-two text-outline"
|
||||
data-scroll
|
||||
data-scroll-speed="4"
|
||||
data-scroll-direction="horizontal"
|
||||
data-scroll-position="top"
|
||||
>
|
||||
of Production
|
||||
</span>
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className="d-none d-xl-flex social-icons flex-column gap-4 align-items-center"
|
||||
data-scroll
|
||||
data-scroll-speed="8"
|
||||
data-scroll-direction="horizontal"
|
||||
data-scroll-position="top"
|
||||
>
|
||||
<Tippy content="Discord" placement="right">
|
||||
<a
|
||||
href={ThirdPartyLinks.FAKEYOU_DISCORD}
|
||||
rel="noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<FontAwesomeIcon icon={faDiscord} />
|
||||
</a>
|
||||
</Tippy>
|
||||
<Tippy content="Twitch" placement="right">
|
||||
<a
|
||||
href="https://twitch.tv/FakeYouLabs"
|
||||
rel="noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<FontAwesomeIcon icon={faTwitch} />
|
||||
</a>
|
||||
</Tippy>
|
||||
<Tippy content="Facebook" placement="right">
|
||||
<a
|
||||
href="https://facebook.com/vocodes"
|
||||
rel="noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<FontAwesomeIcon icon={faFacebook} />
|
||||
</a>
|
||||
</Tippy>
|
||||
<Tippy content="Twitter" placement="right">
|
||||
<a
|
||||
href="https://twitter.com/intent/follow?screen_name=FakeYouApp"
|
||||
rel="noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<FontAwesomeIcon icon={faTwitter} />
|
||||
</a>
|
||||
</Tippy>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-hero-2 d-none d-lg-block">
|
||||
<div className="d-flex justify-content-center">
|
||||
{/* <img
|
||||
id="hero-img"
|
||||
@@ -337,7 +345,7 @@ function IndexPage() {
|
||||
<div
|
||||
className="shape-3-container"
|
||||
data-scroll
|
||||
data-scroll-speed="3"
|
||||
data-scroll-speed="2"
|
||||
data-scroll-position="top"
|
||||
>
|
||||
<div className="shape-3"></div>
|
||||
@@ -360,20 +368,21 @@ function IndexPage() {
|
||||
<div className="shape-4"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
id="about"
|
||||
className="bg-light section section-pb-extra about-section"
|
||||
>
|
||||
<Marquee gradient={false} speed={100}>
|
||||
<h1 className="marquee-title d-flex gap-3 gap-md-4 gap-lg-5">
|
||||
<h1 className="marquee-title d-flex gap-3 gap-md-4 gap-lg-5 mt-4 mb-5">
|
||||
<span className="text-outline">Storyteller</span>
|
||||
<span className="text-red">\\</span>
|
||||
<span className="text-red">\</span>
|
||||
<span>Storyteller</span>
|
||||
<span className="text-red">\\</span>
|
||||
<span className="text-red">\</span>
|
||||
<span className="text-outline">Storyteller</span>
|
||||
<span className="text-red">\\</span>
|
||||
<span className="text-red">\</span>
|
||||
<span>Storyteller</span>
|
||||
<span className="text-red me-3 me-md-4 me-lg-5">\\</span>
|
||||
<span className="text-red me-3 me-md-4 me-lg-5">\</span>
|
||||
</h1>
|
||||
</Marquee>
|
||||
|
||||
@@ -381,7 +390,7 @@ function IndexPage() {
|
||||
<h1 className="fw-bold display-4 about-title mt-5">
|
||||
You can run the new Hollywood and top the Billboard Hot 100
|
||||
</h1>
|
||||
<h4 className="fw-semibold opacity-75 mt-4">
|
||||
<h4 className="fw-normal opacity-75 mt-4">
|
||||
Our technology can turn anyone into a director, musician, or movie
|
||||
star.
|
||||
</h4>
|
||||
@@ -390,30 +399,6 @@ function IndexPage() {
|
||||
<div className="about-cards-container mt-4 mb-5">
|
||||
<div className="container text-center d-flex flex-column align-items-center">
|
||||
<div className="row gx-4 gy-5 pt-4 position-relative">
|
||||
<div
|
||||
className="shape-5-container"
|
||||
data-scroll
|
||||
data-scroll-speed="4"
|
||||
data-scroll-position="top"
|
||||
>
|
||||
<div className="shape-5"></div>
|
||||
</div>
|
||||
<div
|
||||
className="shape-6-container"
|
||||
data-scroll
|
||||
data-scroll-speed="4"
|
||||
data-scroll-position="top"
|
||||
>
|
||||
<div className="shape-6"></div>
|
||||
</div>
|
||||
<div
|
||||
className="shape-7-container"
|
||||
data-scroll
|
||||
data-scroll-speed="3"
|
||||
data-scroll-position="top"
|
||||
>
|
||||
<div className="shape-7"></div>
|
||||
</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={faMusic} className="about-icon" />
|
||||
@@ -491,14 +476,14 @@ function IndexPage() {
|
||||
<div id="products">
|
||||
<Marquee gradient={false} speed={100}>
|
||||
<h1 className="marquee-title d-flex gap-3 gap-md-4 gap-lg-5">
|
||||
<span>What we do</span>
|
||||
<span className="text-red">\\</span>
|
||||
<span className="text-outline">What we do</span>
|
||||
<span className="text-red">\\</span>
|
||||
<span>What we do</span>
|
||||
<span className="text-red">\\</span>
|
||||
<span className="text-outline">What we do</span>
|
||||
<span className="text-red me-3 me-md-4 me-lg-5">\\</span>
|
||||
<span>What We Do</span>
|
||||
<span className="text-red">\</span>
|
||||
<span className="text-outline">What We Do</span>
|
||||
<span className="text-red">\</span>
|
||||
<span>What We Do</span>
|
||||
<span className="text-red">\</span>
|
||||
<span className="text-outline">What We Do</span>
|
||||
<span className="text-red me-3 me-md-4 me-lg-5">\</span>
|
||||
</h1>
|
||||
</Marquee>
|
||||
</div>
|
||||
@@ -513,7 +498,7 @@ function IndexPage() {
|
||||
</div>
|
||||
<div className="col-lg-7 d-flex flex-column justify-content-center">
|
||||
<h1 className="fw-bold display-5">Voice Changing</h1>
|
||||
<h4 className="fw-semibold opacity-75 mb-4">
|
||||
<h4 className="fw-normal opacity-75 mb-4">
|
||||
Now you can sound like someone else
|
||||
</h4>
|
||||
<p className="mt-3">
|
||||
@@ -541,11 +526,13 @@ function IndexPage() {
|
||||
This is still an early beta. Voice quality will change and
|
||||
improve substantially over time.
|
||||
</p>
|
||||
<p className="text-center my-4 pt-5">
|
||||
<p className="pt-5 opacity-100 mb-0">
|
||||
<strong className="fw-semibold fs-5">Brandon</strong>
|
||||
<FontAwesomeIcon icon={faArrowRight} className="mx-2" />
|
||||
<strong className="fw-semibold fs-5">Donald Trump</strong>
|
||||
<br />
|
||||
</p>
|
||||
<p className="text-center pb-3">
|
||||
Real time voice to voice conversion.
|
||||
</p>
|
||||
<div className="row gx-4 gy-4 text-center pb-5">
|
||||
@@ -613,7 +600,7 @@ function IndexPage() {
|
||||
</div>
|
||||
<div className="col-lg-7 d-flex flex-column justify-content-center">
|
||||
<h1 className="fw-bold display-5">FakeYou</h1>
|
||||
<h4 className="fw-semibold opacity-75 mb-4">
|
||||
<h4 className="fw-normal opacity-75 mb-4">
|
||||
Used by millions of people every month
|
||||
</h4>
|
||||
<p className="mt-3">
|
||||
@@ -693,7 +680,7 @@ function IndexPage() {
|
||||
</div>
|
||||
<div className="col-lg-7 d-flex flex-column justify-content-center">
|
||||
<h1 className="fw-bold display-5">Power Stream</h1>
|
||||
<h4 className="fw-semibold opacity-75 mb-4">
|
||||
<h4 className="fw-normal opacity-75 mb-4">
|
||||
Twitch Streamers and Creators can engage and monetize
|
||||
</h4>
|
||||
<p className="mt-3">
|
||||
@@ -733,7 +720,7 @@ function IndexPage() {
|
||||
</div>
|
||||
<div className="col-lg-7 d-flex flex-column justify-content-center">
|
||||
<h1 className="fw-bold display-5">Storyteller Engine</h1>
|
||||
<h4 className="fw-semibold opacity-75 mb-4">
|
||||
<h4 className="fw-normal opacity-75 mb-4">
|
||||
A fully 3D virtual set for your stream or film
|
||||
</h4>
|
||||
<p className="mt-3">
|
||||
@@ -866,7 +853,7 @@ function IndexPage() {
|
||||
</div>
|
||||
<div className="col-lg-7 d-flex flex-column justify-content-center">
|
||||
<h1 className="fw-bold display-5">Storyteller VoxelCam</h1>
|
||||
<h4 className="fw-semibold opacity-75 mb-4">
|
||||
<h4 className="fw-normal opacity-75 mb-4">
|
||||
Volumetric capture for your stream, and for your film set.
|
||||
</h4>
|
||||
<p className="mt-3">
|
||||
@@ -933,14 +920,14 @@ function IndexPage() {
|
||||
<div>
|
||||
<Marquee gradient={false} speed={120}>
|
||||
<h1 className="marquee-title d-flex gap-3 gap-md-4 gap-lg-5 mt-0">
|
||||
<span className="text-outline">Press and mentions</span>
|
||||
<span className="text-red">\\</span>
|
||||
<span>Press and mentions</span>
|
||||
<span className="text-red">\\</span>
|
||||
<span className="text-outline">Press and mentions</span>
|
||||
<span className="text-red">\\</span>
|
||||
<span>Press and mentions</span>
|
||||
<span className="text-red me-3 me-md-4 me-lg-5">\\</span>
|
||||
<span className="text-outline">Press & Mentions</span>
|
||||
<span className="text-red">\</span>
|
||||
<span>Press & Mentions</span>
|
||||
<span className="text-red">\</span>
|
||||
<span className="text-outline">Press & Mentions</span>
|
||||
<span className="text-red">\</span>
|
||||
<span>Press & Mentions</span>
|
||||
<span className="text-red me-3 me-md-4 me-lg-5">\</span>
|
||||
</h1>
|
||||
</Marquee>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,208 @@
|
||||
<div className="bg-hero">
|
||||
<div className="container">
|
||||
<div className="hero-title-container">
|
||||
<h1
|
||||
id="hero-title"
|
||||
className="hero-title d-flex flex-column text-center"
|
||||
>
|
||||
<span
|
||||
className="hero-title-one align-items-center zi-2"
|
||||
data-scroll
|
||||
data-scroll-speed="3"
|
||||
data-scroll-direction="horizontal"
|
||||
data-scroll-position="top"
|
||||
>
|
||||
The <span>Future</span>
|
||||
</span>
|
||||
<span
|
||||
className="hero-title-two zi-2"
|
||||
data-scroll
|
||||
data-scroll-speed="-3"
|
||||
data-scroll-direction="horizontal"
|
||||
data-scroll-position="top"
|
||||
>
|
||||
of Production
|
||||
</span>
|
||||
</h1>
|
||||
|
||||
<div
|
||||
className="d-flex flex-column align-items-center align-items-xl-end"
|
||||
id="sub-title"
|
||||
>
|
||||
<p
|
||||
className="lead hero-sub-title fw-normal opacity-75"
|
||||
data-scroll
|
||||
data-scroll-speed="-4"
|
||||
data-scroll-direction="horizontal"
|
||||
data-scroll-position="top"
|
||||
>
|
||||
We’re scientists, engineers, and creatives building the future
|
||||
AI cloud production studio.
|
||||
</p>
|
||||
<div
|
||||
id="hero-btn"
|
||||
data-scroll
|
||||
data-scroll-speed="-5"
|
||||
data-scroll-direction="horizontal"
|
||||
data-scroll-position="top"
|
||||
className="zi-10 mt-2"
|
||||
>
|
||||
<a className="btn btn-primary" href="#about" data-scroll-to>
|
||||
<span>Explore</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="hero-title-outline noselect">
|
||||
<h1
|
||||
id="hero-title-outline"
|
||||
className="hero-title d-flex flex-column text-center"
|
||||
>
|
||||
<span
|
||||
className="hero-title-one align-items-center text-outline"
|
||||
data-scroll
|
||||
data-scroll-speed="-4"
|
||||
data-scroll-direction="horizontal"
|
||||
data-scroll-position="top"
|
||||
>
|
||||
The Future
|
||||
</span>
|
||||
<span
|
||||
className="hero-title-two text-outline"
|
||||
data-scroll
|
||||
data-scroll-speed="4"
|
||||
data-scroll-direction="horizontal"
|
||||
data-scroll-position="top"
|
||||
>
|
||||
of Production
|
||||
</span>
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="d-flex justify-content-center">
|
||||
{/* <img
|
||||
id="hero-img"
|
||||
className="hero-img"
|
||||
src="/hero/hero-img.webp"
|
||||
alt="Storyteller HyperJail"
|
||||
/> */}
|
||||
|
||||
<div
|
||||
className="hero-img roko"
|
||||
data-scroll
|
||||
data-scroll-speed="1"
|
||||
data-scroll-direction="horizontal"
|
||||
data-scroll-position="top"
|
||||
>
|
||||
<img
|
||||
id="roko"
|
||||
src="/hero/hyperjail_IsolatedRoko_RimWEB.png"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className="hero-img basilisk"
|
||||
data-scroll
|
||||
data-scroll-speed="-1"
|
||||
data-scroll-direction="horizontal"
|
||||
data-scroll-position="top"
|
||||
>
|
||||
<img
|
||||
id="basilisk"
|
||||
src="/hero/hyperjail_IsolatedBasilisk_RimWEB.png"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className="hero-img pascal"
|
||||
data-scroll
|
||||
data-scroll-speed="1"
|
||||
data-scroll-direction="vertical"
|
||||
data-scroll-position="top"
|
||||
>
|
||||
<img
|
||||
id="pascal"
|
||||
src="/hero/hyperjail_IsolatedPascal_RimWEB.png"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="bg-floor"></div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className="d-none d-lg-flex social-icons flex-column gap-4 align-items-center"
|
||||
data-scroll
|
||||
data-scroll-speed="8"
|
||||
data-scroll-direction="horizontal"
|
||||
data-scroll-position="top"
|
||||
>
|
||||
<Tippy content="Discord" placement="right">
|
||||
<a
|
||||
href={ThirdPartyLinks.FAKEYOU_DISCORD}
|
||||
rel="noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<FontAwesomeIcon icon={faDiscord} />
|
||||
</a>
|
||||
</Tippy>
|
||||
<Tippy content="Twitch" placement="right">
|
||||
<a
|
||||
href="https://twitch.tv/FakeYouLabs"
|
||||
rel="noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<FontAwesomeIcon icon={faTwitch} />
|
||||
</a>
|
||||
</Tippy>
|
||||
<Tippy content="Facebook" placement="right">
|
||||
<a
|
||||
href="https://facebook.com/vocodes"
|
||||
rel="noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<FontAwesomeIcon icon={faFacebook} />
|
||||
</a>
|
||||
</Tippy>
|
||||
<Tippy content="Twitter" placement="right">
|
||||
<a
|
||||
href="https://twitter.com/intent/follow?screen_name=FakeYouApp"
|
||||
rel="noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<FontAwesomeIcon icon={faTwitter} />
|
||||
</a>
|
||||
</Tippy>
|
||||
</div>
|
||||
|
||||
<div className="shape-2"></div>
|
||||
<div
|
||||
className="shape-3-container"
|
||||
data-scroll
|
||||
data-scroll-speed="3"
|
||||
data-scroll-position="top"
|
||||
>
|
||||
<div className="shape-3"></div>
|
||||
</div>
|
||||
<div
|
||||
className="shape-1-container"
|
||||
data-scroll
|
||||
data-scroll-speed="4"
|
||||
data-scroll-position="top"
|
||||
>
|
||||
<div className="shape-1"></div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className="shape-4-container"
|
||||
data-scroll
|
||||
data-scroll-speed="2"
|
||||
data-scroll-position="top"
|
||||
>
|
||||
<div className="shape-4"></div>
|
||||
</div>
|
||||
</div>
|
||||
Reference in new issue
Block a user