mirror of
https://github.com/storytold/artcraft.git
synced 2026-11-09 19:41:32 +00:00
contact, footer, teams
This commit is contained in:
BFlat authored and 
Brandon Thomas committed
1 parent
d0ceef6a62
commit
c8bab1d409
6 files changed
+222
-177
No files matched your search
Binary file not shown.
|
After Width: | Height: | Size: 3.0 KiB |
@@ -39,7 +39,7 @@
|
||||
work correctly both with client-side routing and a non-root public URL.
|
||||
Learn how to configure a non-root public URL by running `npm run build`.
|
||||
-->
|
||||
<title>Storyteller. Stream tech.</title>
|
||||
<title>Storyteller AI — The Future of Storytelling</title>
|
||||
|
||||
<!-- Twitter, Discord, etc. -->
|
||||
<meta
|
||||
|
||||
@@ -380,8 +380,9 @@ p {
|
||||
|
||||
.shape-1-container {
|
||||
position: absolute;
|
||||
bottom: 48%;
|
||||
bottom: 80%;
|
||||
left: 18%;
|
||||
z-index: 5;
|
||||
}
|
||||
.shape-1 {
|
||||
width: 140px;
|
||||
@@ -390,7 +391,6 @@ p {
|
||||
border-radius: 12px;
|
||||
transform: translate3d(0px, 0px, 0px) rotate(45deg);
|
||||
z-index: 5;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.shape-2 {
|
||||
@@ -403,12 +403,11 @@ p {
|
||||
top: -20%;
|
||||
right: 18%;
|
||||
z-index: 1;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.shape-3-container {
|
||||
position: absolute;
|
||||
bottom: 25%;
|
||||
bottom: 60%;
|
||||
right: 25%;
|
||||
}
|
||||
|
||||
@@ -419,12 +418,11 @@ p {
|
||||
border-radius: 12px;
|
||||
transform: translate3d(0px, 0px, 0px) rotate(45deg);
|
||||
z-index: 5;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.shape-4-container {
|
||||
position: absolute;
|
||||
bottom: 16%;
|
||||
bottom: 36%;
|
||||
left: 25%;
|
||||
}
|
||||
|
||||
@@ -435,7 +433,6 @@ p {
|
||||
border-radius: 10px;
|
||||
transform: translate3d(0px, 0px, 0px) rotate(45deg);
|
||||
z-index: 5;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.zi-1 {
|
||||
@@ -532,14 +529,14 @@ p {
|
||||
margin-left: 1.2rem;
|
||||
font-size: 26px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
top: 36%;
|
||||
|
||||
a {
|
||||
color: rgba($white, 0.6);
|
||||
color: rgba($white, 0.5);
|
||||
transition: 0.3s;
|
||||
|
||||
&:hover {
|
||||
color: lighten($white, 10%);
|
||||
color: $primary;
|
||||
transform: translateX(2px);
|
||||
}
|
||||
}
|
||||
@@ -663,15 +660,19 @@ p {
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
.divider-logo-container {
|
||||
margin-top: 220px;
|
||||
}
|
||||
|
||||
.divider-logo {
|
||||
height: 220px;
|
||||
margin-top: 80px;
|
||||
position: absolute;
|
||||
height: 160px;
|
||||
margin-top: -100px;
|
||||
margin-bottom: 40px;
|
||||
transition: 0.4s;
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.2);
|
||||
}
|
||||
// &:hover {
|
||||
// transform: scale(1.2);
|
||||
// }
|
||||
}
|
||||
|
||||
.marquee-title {
|
||||
@@ -693,9 +694,9 @@ p {
|
||||
}
|
||||
|
||||
.footer-bottom {
|
||||
padding-top: 1.2rem;
|
||||
padding-bottom: 1.2rem;
|
||||
font-size: 13px;
|
||||
padding-top: 1.6rem;
|
||||
padding-bottom: 1.6rem;
|
||||
font-size: 14px;
|
||||
background: rgb(47, 47, 75);
|
||||
}
|
||||
|
||||
@@ -719,7 +720,7 @@ p {
|
||||
|
||||
.footer-social-icon {
|
||||
background: rgb(47, 47, 75);
|
||||
border-radius: 10px;
|
||||
border-radius: 8px;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
display: flex;
|
||||
@@ -727,14 +728,13 @@ p {
|
||||
justify-content: center;
|
||||
color: $white;
|
||||
transition: 0.3s;
|
||||
border: 2px solid;
|
||||
border-color: rgba($white, 0);
|
||||
border: 1px solid;
|
||||
border-color: rgba($white, 0.05);
|
||||
font-size: 20px;
|
||||
|
||||
&:hover {
|
||||
color: $white;
|
||||
background: lighten(rgb(47, 47, 75), 10%);
|
||||
transform: rotate(45deg);
|
||||
background: $primary;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -761,6 +761,11 @@ p {
|
||||
background: lighten(#2c2c40, 8%);
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
&.small {
|
||||
width: 160px;
|
||||
height: 160px;
|
||||
}
|
||||
}
|
||||
|
||||
.tts-demo {
|
||||
@@ -1088,8 +1093,46 @@ span.swiper-pagination-bullet.swiper-pagination-bullet-active {
|
||||
--swiper-theme-color: #fa6b68 !important;
|
||||
}
|
||||
|
||||
.contact-container {
|
||||
max-width: 700px;
|
||||
.contact-email {
|
||||
cursor: pointer;
|
||||
transition: all 0.4s;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
font-weight: 700;
|
||||
z-index: 2;
|
||||
color: $white;
|
||||
font-family: "Poppins", sans-serif;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.05);
|
||||
color: $primary;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
transform: scaleX(0);
|
||||
height: 6px;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
background-color: $primary;
|
||||
transform-origin: bottom right;
|
||||
transition: transform 0.25s ease-out;
|
||||
}
|
||||
|
||||
&:hover::after {
|
||||
transform: scaleX(1);
|
||||
transform-origin: bottom left;
|
||||
}
|
||||
}
|
||||
|
||||
.img-team {
|
||||
border-radius: 8px;
|
||||
border: 1px solid;
|
||||
border-color: rgba(#4d4d66, 0.8);
|
||||
}
|
||||
|
||||
@media (max-width: 1199.98px) {
|
||||
@@ -1262,6 +1305,10 @@ span.swiper-pagination-bullet.swiper-pagination-bullet-active {
|
||||
padding: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.contact-email {
|
||||
font-size: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
#sub-title {
|
||||
@@ -1269,17 +1316,22 @@ span.swiper-pagination-bullet.swiper-pagination-bullet-active {
|
||||
transform: translate(8rem, 0);
|
||||
}
|
||||
|
||||
#pascal {
|
||||
#hero-btn {
|
||||
opacity: 0;
|
||||
transform: translate(0, 300px);
|
||||
transform: translate(4rem, 0);
|
||||
}
|
||||
|
||||
#basilisk {
|
||||
opacity: 0;
|
||||
transform: translate(300px, 0);
|
||||
}
|
||||
// #pascal {
|
||||
// opacity: 0;
|
||||
// transform: translate(0, 300px);
|
||||
// }
|
||||
|
||||
#roko {
|
||||
opacity: 0;
|
||||
transform: translate(-300px, 0);
|
||||
}
|
||||
// #basilisk {
|
||||
// opacity: 0;
|
||||
// transform: translate(300px, 0);
|
||||
// }
|
||||
|
||||
// #roko {
|
||||
// opacity: 0;
|
||||
// transform: translate(-300px, 0);
|
||||
// }
|
||||
@@ -16,7 +16,7 @@ function Footer(props: Props) {
|
||||
<footer data-scroll-section>
|
||||
<div className="bg-dark-solid">
|
||||
<div className="container footer-top text-center">
|
||||
<div className="d-flex gap-4 justify-content-center p-4">
|
||||
<div className="d-flex gap-4 justify-content-center p-4 pb-5">
|
||||
<a
|
||||
href="https://discord.gg/fakeyou"
|
||||
className="footer-social-icon"
|
||||
@@ -53,13 +53,14 @@ function Footer(props: Props) {
|
||||
</div>
|
||||
</div>
|
||||
<div className="footer-bottom">
|
||||
<div className="container d-flex flex-column flex-md-row text-center text-md-start gap-3">
|
||||
<div className="flex-grow-1">
|
||||
Copyright © 2020 — 2023 Storyteller AI (makers of
|
||||
FakeYou)
|
||||
<div className="container d-flex flex-column text-center gap-2">
|
||||
<div>
|
||||
Copyright © 2023 Storyteller AI. All Rights Reserved.
|
||||
</div>
|
||||
|
||||
<GitSha />
|
||||
<div className="opacity-50">
|
||||
<GitSha />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
@@ -173,7 +173,7 @@ function TopNav(props: Props) {
|
||||
<li>
|
||||
<a
|
||||
id="nav-btn-5"
|
||||
href="#mentions"
|
||||
href="#team"
|
||||
className="nav-link"
|
||||
data-scroll-to
|
||||
>
|
||||
|
||||
@@ -36,7 +36,6 @@ import { Swiper, SwiperSlide } from "swiper/react";
|
||||
import "swiper/css";
|
||||
import "swiper/css/pagination";
|
||||
import { Autoplay, Pagination } from "swiper";
|
||||
import { useForm, ValidationError } from "@formspree/react";
|
||||
|
||||
function IndexPage() {
|
||||
// Title Animation
|
||||
@@ -54,41 +53,10 @@ function IndexPage() {
|
||||
console.log(splitTitleOutline);
|
||||
|
||||
var tl = gsap.timeline({ delay: 0.2 });
|
||||
tl.to(
|
||||
"#pascal",
|
||||
{
|
||||
delay: 0.2,
|
||||
duration: 1.2,
|
||||
y: 0,
|
||||
opacity: 1,
|
||||
ease: "expo",
|
||||
},
|
||||
"<"
|
||||
);
|
||||
tl.to(
|
||||
"#roko",
|
||||
{
|
||||
duration: 1.2,
|
||||
x: 0,
|
||||
opacity: 1,
|
||||
ease: "expo",
|
||||
},
|
||||
"<"
|
||||
);
|
||||
tl.to(
|
||||
"#basilisk",
|
||||
{
|
||||
duration: 1.2,
|
||||
x: 0,
|
||||
opacity: 1,
|
||||
ease: "expo",
|
||||
},
|
||||
"<"
|
||||
);
|
||||
tl.to(
|
||||
splitTitle.chars,
|
||||
{
|
||||
delay: 0.3,
|
||||
delay: 0,
|
||||
duration: 0.4,
|
||||
y: 0,
|
||||
opacity: 1,
|
||||
@@ -101,7 +69,7 @@ function IndexPage() {
|
||||
splitTitleOutline.words,
|
||||
{
|
||||
delay: 0,
|
||||
duration: 0.8,
|
||||
duration: 0.5,
|
||||
y: 0,
|
||||
scale: 1,
|
||||
opacity: 1,
|
||||
@@ -121,38 +89,20 @@ function IndexPage() {
|
||||
},
|
||||
"<"
|
||||
);
|
||||
|
||||
tl.to(
|
||||
".shape-2, .shape-1, .shape-3, .shape-4",
|
||||
"#hero-btn",
|
||||
{
|
||||
duration: 1,
|
||||
y: 0,
|
||||
delay: 0.2,
|
||||
duration: 0.8,
|
||||
x: 0,
|
||||
scale: 1,
|
||||
opacity: 0.6,
|
||||
opacity: 1,
|
||||
ease: "expo",
|
||||
},
|
||||
0.4
|
||||
"<"
|
||||
);
|
||||
}, []);
|
||||
|
||||
const [state, handleSubmit] = useForm("xnqrvjbo");
|
||||
if (state.succeeded) {
|
||||
const reset = document.getElementById("reset");
|
||||
const success = document.getElementById("success_message");
|
||||
|
||||
if (reset) reset.click();
|
||||
|
||||
setTimeout(function () {
|
||||
if (success)
|
||||
success.innerHTML =
|
||||
'<div class="alert alert-success fw-semibold w-100 mb-4">Thank you for your message!</div>';
|
||||
}, 500);
|
||||
|
||||
setTimeout(function () {
|
||||
if (success) success.innerHTML = "";
|
||||
}, 5000);
|
||||
}
|
||||
|
||||
return (
|
||||
<div data-scroll-section data-scroll-repeat="true">
|
||||
<div
|
||||
@@ -188,7 +138,7 @@ function IndexPage() {
|
||||
The Future of Storytelling
|
||||
</span>
|
||||
</h1>
|
||||
<p className="hero-sub-title">
|
||||
<p id="sub-title" className="hero-sub-title">
|
||||
We’re scientists, engineers, and creatives building the future
|
||||
AI cloud production studio.
|
||||
</p>
|
||||
@@ -343,14 +293,6 @@ function IndexPage() {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* <div className="w-100 d-flex justify-content-center">
|
||||
<img
|
||||
src="/logo/Storyteller-Icon-Logo.png"
|
||||
alt="Storyteller Logo Icon"
|
||||
className="divider-logo"
|
||||
/>
|
||||
</div> */}
|
||||
</div>
|
||||
|
||||
<div className="bg-dark section-2">
|
||||
@@ -526,11 +468,11 @@ function IndexPage() {
|
||||
</div>
|
||||
|
||||
<div className="shape-2"></div>
|
||||
<div className="shape-3-container" data-scroll data-scroll-speed="2">
|
||||
<div className="shape-3-container" data-scroll data-scroll-speed="3">
|
||||
<div className="shape-3"></div>
|
||||
</div>
|
||||
|
||||
<div className="shape-1-container" data-scroll data-scroll-speed="4">
|
||||
<div className="shape-1-container" data-scroll data-scroll-speed="3">
|
||||
<div className="shape-1"></div>
|
||||
</div>
|
||||
|
||||
@@ -1062,6 +1004,99 @@ function IndexPage() {
|
||||
</div>
|
||||
</div> */}
|
||||
|
||||
<div id="team" className="bg-light section-2">
|
||||
<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">Our Team</span>
|
||||
<span className="text-red">\</span>
|
||||
<span>Our Team</span>
|
||||
<span className="text-red">\</span>
|
||||
<span className="text-outline">Our Team</span>
|
||||
<span className="text-red">\</span>
|
||||
<span>Our Team</span>
|
||||
<span className="text-red me-3 me-md-4 me-lg-5">\</span>
|
||||
</h1>
|
||||
</Marquee>
|
||||
</div>
|
||||
<div className="container mt-5 pt-5">
|
||||
<div className="row g-4 g-md-5">
|
||||
<div className="col-6 col-md-3">
|
||||
<img
|
||||
src="/images/team/placeholder-pfp.jpg"
|
||||
className="img-fluid img-team mb-3"
|
||||
alt=""
|
||||
/>
|
||||
<p className="fw-semibold opacity-100 mb-0">Brandon</p>
|
||||
<p>Founder / Backend</p>
|
||||
</div>
|
||||
<div className="col-6 col-md-3">
|
||||
<img
|
||||
src="/images/team/placeholder-pfp.jpg"
|
||||
className="img-fluid img-team mb-3"
|
||||
alt=""
|
||||
/>
|
||||
<p className="fw-semibold opacity-100 mb-0">Scott</p>
|
||||
<p>3D Artist</p>
|
||||
</div>
|
||||
<div className="col-6 col-md-3">
|
||||
<img
|
||||
src="/images/team/placeholder-pfp.jpg"
|
||||
className="img-fluid img-team mb-3"
|
||||
alt=""
|
||||
/>
|
||||
<p className="fw-semibold opacity-100 mb-0">Paul</p>
|
||||
<p>ML / Backend</p>
|
||||
</div>
|
||||
<div className="col-6 col-md-3">
|
||||
<img
|
||||
src="/images/team/placeholder-pfp.jpg"
|
||||
className="img-fluid img-team mb-3"
|
||||
alt=""
|
||||
/>
|
||||
<p className="fw-semibold opacity-100 mb-0">Bombay</p>
|
||||
<p>Web Designer / Frontend </p>
|
||||
</div>
|
||||
<div className="col-6 col-md-3">
|
||||
<img
|
||||
src="/images/team/placeholder-pfp.jpg"
|
||||
className="img-fluid img-team mb-3"
|
||||
alt=""
|
||||
/>
|
||||
<p className="fw-semibold opacity-100 mb-0">Michael</p>
|
||||
<p>ML / Backend</p>
|
||||
</div>
|
||||
<div className="col-6 col-md-3">
|
||||
<img
|
||||
src="/images/team/placeholder-pfp.jpg"
|
||||
className="img-fluid img-team mb-3"
|
||||
alt=""
|
||||
/>
|
||||
<p className="fw-semibold opacity-100 mb-0">Echelon</p>
|
||||
<p>Founder / Backend Engineer</p>
|
||||
</div>
|
||||
<div className="col-6 col-md-3">
|
||||
<img
|
||||
src="/images/team/placeholder-pfp.jpg"
|
||||
className="img-fluid img-team mb-3"
|
||||
alt=""
|
||||
/>
|
||||
<p className="fw-semibold opacity-100 mb-0">Echelon</p>
|
||||
<p>Founder / Backend Engineer</p>
|
||||
</div>
|
||||
<div className="col-6 col-md-3">
|
||||
<img
|
||||
src="/images/team/placeholder-pfp.jpg"
|
||||
className="img-fluid img-team mb-3"
|
||||
alt=""
|
||||
/>
|
||||
<p className="fw-semibold opacity-100 mb-0">Echelon</p>
|
||||
<p>Founder / Backend Engineer</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="mentions" className="bg-light section-2">
|
||||
<div>
|
||||
<Marquee gradient={false} speed={120}>
|
||||
@@ -1243,71 +1278,28 @@ function IndexPage() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="contact" className="bg-light section-2">
|
||||
<div className="container contact-container">
|
||||
<h1 className="text-center fw-bold display-5">Contact Us</h1>
|
||||
<h4 className="text-center opacity-75 mb-5">
|
||||
Send us a message and we'll get back to you!
|
||||
</h4>
|
||||
|
||||
<div id="success_message"></div>
|
||||
<form
|
||||
id="contact_form"
|
||||
onSubmit={handleSubmit}
|
||||
className="col-12 col-md-6 card bg-dark-solid w-100"
|
||||
>
|
||||
<fieldset className="d-flex flex-column gap-3 w-100">
|
||||
<input
|
||||
id="name"
|
||||
type="text"
|
||||
name="name"
|
||||
placeholder="Name*"
|
||||
required
|
||||
className="col-12 form-control"
|
||||
/>
|
||||
<ValidationError
|
||||
prefix="Name"
|
||||
field="name"
|
||||
errors={state.errors}
|
||||
/>
|
||||
<input
|
||||
id="email"
|
||||
type="email"
|
||||
name="email"
|
||||
placeholder="Email*"
|
||||
required
|
||||
className="col-12 mt-2 form-control"
|
||||
/>
|
||||
<ValidationError
|
||||
prefix="Email"
|
||||
field="email"
|
||||
errors={state.errors}
|
||||
/>
|
||||
<textarea
|
||||
id="message"
|
||||
name="message"
|
||||
placeholder='Say "hi" here!'
|
||||
required
|
||||
className="col-12 mt-2 form-control"
|
||||
cols={40}
|
||||
rows={4}
|
||||
style={{ resize: "none" }}
|
||||
/>
|
||||
<ValidationError
|
||||
prefix="Message"
|
||||
field="message"
|
||||
errors={state.errors}
|
||||
/>
|
||||
</fieldset>
|
||||
<button
|
||||
type="submit"
|
||||
className="btn btn-primary mt-4 col-12"
|
||||
disabled={state.submitting}
|
||||
<div id="contact" className="bg-light section-2 pb-0">
|
||||
<div className="container text-center">
|
||||
<h4 className="opacity-75 position-relative zi-2 mb-1">Contact Us</h4>
|
||||
<div className="position-relative">
|
||||
<a
|
||||
href="mailto:hello@storyteller.ai"
|
||||
className="display-1 contact-email"
|
||||
>
|
||||
Submit
|
||||
</button>
|
||||
<input type="reset" id="reset" className="d-none" />
|
||||
</form>
|
||||
hello@storyteller.ai
|
||||
</a>
|
||||
<div className="shape-bg dark small"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-dark-solid divider-logo-container">
|
||||
<div className="w-100 d-flex justify-content-center">
|
||||
<img
|
||||
src="/logo/Storyteller-Icon-Logo.png"
|
||||
alt="Storyteller Logo Icon"
|
||||
className="divider-logo"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in new issue
Block a user