add trailer and cleaned up code

readyplayerme · Oct 4, 2024 · ef69116 · ef69116
1 parent aa4f764
commit ef69116
Show file tree

Hide file tree

Showing 15 changed files with 12 additions and 548 deletions.
diff --git a/public/assets/images/trailer.mp4 b/public/assets/images/trailer.mp4
diff --git a/src/components/Header.jsx b/src/components/Header.jsx
@@ -4,7 +4,6 @@ const Header = ({children, data}) => {
 			<div class="header__wrap">
 				<a href="" class="header__logo">
                     <video muted loop playsinline autoplay src="/assets/images/logo-dynamic.mp4" type="video/mp4"></video>
-					{/* <svg class="svg-icon" viewBox="0 0 200 72" width="200" height="72"><use xlink:href="#svg-logo"></use></svg> */}
 				</a>
 
 				<div class="header__nav">

diff --git a/src/pages/index.jsx b/src/pages/index.jsx
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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;
 		}