diff --git a/public/assets/images/trailer.mp4 b/public/assets/images/trailer.mp4 new file mode 100644 index 0000000..d8bf56b Binary files /dev/null and b/public/assets/images/trailer.mp4 differ diff --git a/src/components/Header.jsx b/src/components/Header.jsx index cffa593..4769ec6 100644 --- a/src/components/Header.jsx +++ b/src/components/Header.jsx @@ -4,7 +4,6 @@ const Header = ({children, data}) => {
diff --git a/src/pages/index.jsx b/src/pages/index.jsx index b1ea542..7d11919 100644 --- a/src/pages/index.jsx +++ b/src/pages/index.jsx @@ -3,9 +3,6 @@ import Header from '../components/Header.jsx'; import Footer from '../components/Footer.jsx'; export default async ({ data }) => { - // inline request example - // const apiResponse = await fetch(process.env.URL + '/api/200.json').then(r => r.json()).catch(e => e.message); - // console.log('In JSX fetch inside component happens on component request', apiResponse); return
@@ -29,66 +26,9 @@ export default async ({ data }) => {
- {/*
-
-
*/} -
- {/*
-
- -
- -
-
-
-
-

AVATAR COLLECTIBLE
PLATFORM

-

Bringing Your Identity
- to Every World

-
- -
- -
-
- -
-
-
-
-
- -
-
- -
- -
-
- -
-
-
-
- -
- SCROLL - -
-
-
-
-
*/} -
@@ -169,18 +109,6 @@ export default async ({ data }) => {
- {/* - -
-

PlayerZero is the avatar collectible platform of the future, empowering users to create, customize, and evolve their digital identities across virtual worlds and games.

-

Built by Ready Player Me — a platform trusted by over 4,000 developers and millions of users globally — PlayerZero breaks the barriers of closed ecosystems, offering avatars that are seamlessly interoperable between platforms, true ownership of your online identity, and utility from day one.

-
- -
- -
*/}
@@ -222,103 +150,6 @@ export default async ({ data }) => {

how it works

- {/*
-
-
-
- -
- -
-
- -
- -

Collect Packs

-
-

Take part in regular pack drops from artists and brands. Each pack contains digital wearables for your avatar

-

Follow us on X and join our Discord to stay in the loop

-
-
-
-
- -
-
-
- -
- -
-
- -
- -

Reveal Digital Collectibles

-
-

The packs reveal collectibles with different styles and rarities. If you're lucky, you might get something rare.

-
-
-
-
- -
-
-
- -
- -
-
- -
- -

Customize Your Avatar

-
-

Create your avatar from a selfie and customize it with free assets or digital collectibles from packs.

-
-
-
-
- -
-
-
- -
- -
-
- -
- -

Play and Explore

-
-

Use your avatar to play in a multitude of games built by many developers. We're on a mission to bring your avatar to every virtual world .

-
-
-
-
- -
-
-
- -
-
-
- -
- -

Own Your Identity, Everywhere

-
-

Generate a profile picture of your avatar and use it across social platforms. Avatar stickers for chat coming soon!

-
-
-
-
-
*/} -
@@ -476,59 +307,6 @@ export default async ({ data }) => {
- - {/*
-
- -
- -
- - -
-

Ready Player Me is an avatar tech leader delivering 10M+ avatars to games and apps every month. Our tech is currently used by 4,000 developers across the world. We offer avatar SDKs and APIs that developers can integrate effortlessly into their apps and games to build avatar systems and save time, boost engagement, and unlock new revenue streams with avatars. Our mission is to build bridges between virtual worlds to create a more open and unified digital experience for users.

-

We’ve raised $72M from a16z, alongside a roster of tech, web3 and gaming leaders, including Punk 6529, gmoney, Snowfro, Sebastian Knutsson and Riccardo Zacconi (Co-founders of King), Justin Kan (Co-founder of Twitch) and Tom Preston-Werner (Co-founder of Github).

-
- -
-
-
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
-
-
-
-
*/}
@@ -700,8 +478,7 @@ export default async ({ data }) => {
- - +
@@ -718,7 +495,6 @@ export default async ({ data }) => {
-
diff --git a/src/styles/blocks/about.scss b/src/styles/blocks/about.scss index 99006ce..df2260f 100644 --- a/src/styles/blocks/about.scss +++ b/src/styles/blocks/about.scss @@ -1,5 +1,3 @@ -// @include webfont('FF', 'filename'); - .about { overflow: hidden; background-color: $yellow; @@ -54,8 +52,6 @@ } &__main { - /* text-align: right; - align-items: flex-end; */ margin-left: auto; } @@ -78,8 +74,6 @@ width: calc(50% - var(--grid-gap)); position: absolute; top: 0; - /* top: 50%; - transform: translateY(-50%); */ img { width: 100%; @@ -172,11 +166,6 @@ a.about__logo { &__logo { align-self: flex-start; } - - &__main { - /* text-align: left; - align-items: flex-start; */ - } } } } diff --git a/src/styles/blocks/button.scss b/src/styles/blocks/button.scss index c23e831..00d67ca 100644 --- a/src/styles/blocks/button.scss +++ b/src/styles/blocks/button.scss @@ -1,5 +1,3 @@ -// @include webfont('FF', 'filename'); - @keyframes rotatePlayBtn { from { transform: rotate(360deg); diff --git a/src/styles/blocks/countdown.scss b/src/styles/blocks/countdown.scss index 177a560..8bf4f47 100644 --- a/src/styles/blocks/countdown.scss +++ b/src/styles/blocks/countdown.scss @@ -30,7 +30,7 @@ .countdown { &__value { font-size: 30rem; - + &:not(:first-child) { width: 65rem; } @@ -44,7 +44,7 @@ &__value { // font-size: 20rem; - + &:not(:first-child) { // width: 40rem; } diff --git a/src/styles/blocks/faq.scss b/src/styles/blocks/faq.scss index 08936d1..1bf5208 100644 --- a/src/styles/blocks/faq.scss +++ b/src/styles/blocks/faq.scss @@ -1,6 +1,5 @@ .faq { background-color: #D2D2DA; - ; color: $black; &__container { diff --git a/src/styles/blocks/footer.scss b/src/styles/blocks/footer.scss index 10c201f..5c61dc0 100644 --- a/src/styles/blocks/footer.scss +++ b/src/styles/blocks/footer.scss @@ -1,5 +1,3 @@ -// @include webfont('FF', 'filename'); - .footer { border-top: 2rem solid $white100; @@ -40,60 +38,9 @@ } } - &__logos { - display: inline-flex; - flex-direction: column; - gap: 12rem; - align-items: flex-end; - } - &__logo { - position: relative; display: inline-flex; - flex-direction: column; - align-items: flex-end; - color: $pink; - gap: 12rem; transition: opacity .3s; - - .svg-icon { - width: 150rem; - height: 54rem; - } - - &--pz { - &::after { - content: ''; - position: absolute; - top: 0rem; - right: 0; - bottom: 10rem; - left: 0; - z-index: -1; - border-radius: 50%; - filter: blur(30rem); - opacity: 0.7; - transform: rotate(15deg) scaleY(0.9); - background-color: #8F00B3; - } - } - - &--rpm { - gap: 12rem; - color: $white100; - - } - - span { - font-size: 9rem; - font-weight: 400; - color: $white100; - } - } - - &__logo-text { - font-size: 12rem; - font-weight: 400; } &__item { @@ -110,14 +57,6 @@ transition: opacity .3s; @include body-m(); } - - &__socials { - /* text-align: right; - - .socials { - flex-wrap: wrap; - } */ - } } @media only screen and (hover: hover) { @@ -159,26 +98,10 @@ } } - &__logos { - flex-direction: row; - justify-content: space-between; - } - &__logo { - width: 220rem; + max-width: 220rem; } - /* &__logo { - .svg-icon { - width: 120rem; - height: auto; - } - - span { - font-size: 7rem; - } - } */ - &__item { margin-top: 32rem; } diff --git a/src/styles/blocks/header.scss b/src/styles/blocks/header.scss index 8afe7eb..4bf6586 100644 --- a/src/styles/blocks/header.scss +++ b/src/styles/blocks/header.scss @@ -6,35 +6,8 @@ top: 0; right: 0; z-index: 99; - //transform: translateY(-100%); transition: transform .3s; - /* &::before { - content: ''; - display: block; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - background-color: #161618E5; - backdrop-filter: blur(7rem); - -webkit-backdrop-filter: blur(7rem); - opacity: 0; - z-index: -1; - transition: opacity .3s - } - - &.is-scroll { - &::before { - opacity: 1; - } - } - - &.is-active { - transform: translateY(0); - } */ - &__container { @include grid-container(); @@ -50,36 +23,6 @@ justify-content: space-between; } - /* &__logo { - display: inline-block; - line-height: 0; - position: relative; - color: $pink; - margin-right: 24rem; - transition: opacity .3s; - z-index: 2; - - .svg-icon { - width: 200rem; - height: 72rem; - } - - &::after { - content: ''; - position: absolute; - top: 0; - right: 0; - bottom: 10rem; - left: 0; - z-index: -1; - border-radius: 50%; - filter: blur(30px); - opacity: 0.7; - transform: rotate(15deg) scaleY(0.9); - background-color: #8F00B3; - } - } */ - &__logo { width: 200rem; flex-shrink: 0; @@ -149,25 +92,10 @@ .header { &__logo { width: 140rem; - /* .svg-icon { - width: 140rem; - height: auto; - } */ } } } -@media only screen and (max-width: $medium) { - /* .header { - &__logo { - .svg-icon { - width: 80rem; - height: 29rem; - } - } - } */ -} - @media only screen and (max-width: $small) { .header { &__wrap { @@ -176,10 +104,6 @@ &__logo { width: 90rem; - /* .svg-icon { - width: 80rem; - height: 29rem; - } */ } &__socials { diff --git a/src/styles/blocks/homepage.scss b/src/styles/blocks/homepage.scss index 6117a63..c59e95a 100644 --- a/src/styles/blocks/homepage.scss +++ b/src/styles/blocks/homepage.scss @@ -5,8 +5,6 @@ @include grid-container(); } - &__wrap {} - &__top { margin-bottom: 140rem; } @@ -21,11 +19,6 @@ } &__image { - /* position: absolute; - left: 0; - bottom: 0; - width: 75%; - transform: translate(-5%, 0); */ width: 75%; margin-top: -50rem; @@ -35,43 +28,12 @@ } &__message { - /* margin-left: auto; - position: relative; - z-index: 1; - @include grid-col(6,12); */ position: absolute; right: 0; top: 5%; width: 45%; max-width: 532rem; } - - /* &__logo { - color: $pink; - line-height: 0; - text-align: center; - margin-bottom: 100rem; - - .svg-icon { - width: 400rem; - height: 144rem; - } - } - - &__text { - max-width: 50%; - margin: 0 auto; - text-align: center; - @include body-l(); - } - - &__image { - position: absolute; - bottom: 0; - left: 0; - right: 0; - z-index: -1; - } */ } .homepage-message { @@ -116,25 +78,6 @@ @media only screen and (max-width: $small) { .homepage { - /* &__wrap { - padding: 64rem 0 140rem; - } - - &__logo { - margin-bottom: 32rem; - - .svg-icon { - width: 160rem; - height: auto; - } - } - - - &__image { - left: -16rem; - right: -16rem; - } */ - &__top { margin-bottom: 32rem; } diff --git a/src/styles/blocks/intro.scss b/src/styles/blocks/intro.scss index 0979eae..9ba719a 100644 --- a/src/styles/blocks/intro.scss +++ b/src/styles/blocks/intro.scss @@ -119,14 +119,6 @@ height: 200rem; } } - - /* &__scroll { - display: flex; - align-items: center; - gap: 10rem; - margin-left: 40rem; - @include body-m(); - } */ } @media only screen and (max-width: $small) { @@ -188,9 +180,5 @@ height: 100rem; } } - - &__scroll { - display: none; - } } } diff --git a/src/styles/blocks/mission.scss b/src/styles/blocks/mission.scss index add79dc..381a780 100644 --- a/src/styles/blocks/mission.scss +++ b/src/styles/blocks/mission.scss @@ -1,6 +1,5 @@ .mission { position: relative; - overflow: hidden; &::before { content: ''; diff --git a/src/styles/blocks/nav.scss b/src/styles/blocks/nav.scss index 2712cc2..7bd4d7e 100644 --- a/src/styles/blocks/nav.scss +++ b/src/styles/blocks/nav.scss @@ -33,7 +33,7 @@ justify-content: center; gap: 14rem; position: relative; - padding: 20rem 4rem 14rem; + padding: 17rem 4rem; text-transform: uppercase; transform-origin: center; white-space: nowrap; @@ -169,4 +169,3 @@ } } } - diff --git a/src/styles/blocks/popup.scss b/src/styles/blocks/popup.scss index 87b70dc..55b05d3 100644 --- a/src/styles/blocks/popup.scss +++ b/src/styles/blocks/popup.scss @@ -7,7 +7,7 @@ left: 0; width: 100%; height: 100%; - padding: 80rem; + padding: 20rem 80rem; overflow: hidden; overflow-y: auto; background-color: rgba(0, 0, 0, 0.8); @@ -46,6 +46,10 @@ &__video { height: 100%; + + .video { + border: 1px solid red; + } } } @@ -61,7 +65,7 @@ @media only screen and (max-width: $small) { .popup { - padding: 40rem 16rem; + padding: 10rem 16rem; &__close { right: 0; @@ -74,9 +78,5 @@ height: auto; } } - - &__box { - height: auto; - } } } diff --git a/src/styles/blocks/process.scss b/src/styles/blocks/process.scss index 51b40f1..f06250c 100644 --- a/src/styles/blocks/process.scss +++ b/src/styles/blocks/process.scss @@ -47,17 +47,6 @@ left: 50%; transform: translateX(-50%); } - /* margin-top: 64rem; - - &:first-child { - margin-top: 0; - } - - &:nth-of-type(2n) { - .process-card { - flex-flow: row-reverse wrap; - } - } */ } &__button { @@ -109,60 +98,6 @@ } } -/* .process-card { - display: flex; - flex-flow: row wrap; - //align-items: center; - gap: calc(2 * var(--grid-gap)); - - &__img { - width: calc(50% - var(--grid-gap)); - border-radius: 20rem; - overflow: hidden; - background-color: #1A1A1A; - position: relative; - - &::before { - content: ''; - display: block; - width: 100%; - height: 0; - padding-bottom: 57.6%; - } - - img, video { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - object-fit: cover; - } - - img:not([src]) { - display: none; - } - } - - &__content { - width: calc(50% - var(--grid-gap)); - padding: 16rem 3.84%; - display: flex; - flex-direction: column; - justify-content: center; - gap: 32rem; - } - - &__icon { - line-height: 0; - flex-shrink: 0 - } - - &__title { - @include h4(); - } -} */ - @media only screen and (max-width: $small) { .process { &__wrap { @@ -178,13 +113,6 @@ &__item { padding: 0 8rem 140rem; - /* margin-top: 64rem; - - &:nth-of-type(2n) { - .process-card { - flex-flow: row wrap; - } - } */ } &__button {