From 296fa368d6e77ebbff242adc24b5ea8f0f7281fb Mon Sep 17 00:00:00 2001
From: Oksana Goncharova <omgoncharova@gmail.com>
Date: Tue, 1 Oct 2024 18:48:25 +0300
Subject: [PATCH] popup & js

---
 src/components/Footer.jsx        |   6 +-
 src/components/Header.jsx        |   4 +-
 src/js/app.js                    | 104 +++++++++++++++++++++++++++++++
 src/js/app/Popup.js              |  99 +++++++++++++++++++++++++++++
 src/js/app/utils/createDOM.js    |  33 ++++++++++
 src/js/app/utils/declination.js  |  12 ++++
 src/js/app/utils/getQuery.js     |  19 ++++++
 src/js/app/utils/interpolate.js  |  30 +++++++++
 src/js/app/utils/overflow.js     |  29 +++++++++
 src/js/app/utils/wait.js         |   3 +
 src/layouts/Layout.jsx           |   5 +-
 src/pages/index.jsx              |  22 +++----
 src/styles/blocks/button.scss    |  18 +++---
 src/styles/blocks/form.scss      |   2 +-
 src/styles/blocks/header.scss    |  22 ++++++-
 src/styles/blocks/intro.scss     |   4 +-
 src/styles/blocks/popup.scss     |  69 +++++++++++++++++++-
 src/styles/blocks/states.scss    |   7 +++
 src/styles/blocks/video.scss     |  13 ++++
 src/styles/partials/default.scss |  14 +++++
 src/styles/styles.scss           |   3 +-
 21 files changed, 481 insertions(+), 37 deletions(-)
 create mode 100644 src/js/app/Popup.js
 create mode 100644 src/js/app/utils/createDOM.js
 create mode 100644 src/js/app/utils/declination.js
 create mode 100644 src/js/app/utils/getQuery.js
 create mode 100644 src/js/app/utils/interpolate.js
 create mode 100644 src/js/app/utils/overflow.js
 create mode 100644 src/js/app/utils/wait.js
 create mode 100644 src/styles/blocks/states.scss
 create mode 100644 src/styles/blocks/video.scss

diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx
index 88408d7..efec1b0 100644
--- a/src/components/Footer.jsx
+++ b/src/components/Footer.jsx
@@ -19,8 +19,8 @@ const Footer = ({}) => {
 					<div class="footer__col">
 						<nav class="footer__menu">
                             <ul class="footer__list">
-                                <li class="footer__item"><a href="" class="footer__link"><span>How it Works</span></a></li>
-                                <li class="footer__item"><a href="" class="footer__link"><span>About Us</span></a></li>
+                                <li class="footer__item"><a href="#process" class="footer__link" data-elts="scrollLink"><span>How it Works</span></a></li>
+                                <li class="footer__item"><a href="#about" class="footer__link" data-elts="scrollLink"><span>About Us</span></a></li>
                                 <li class="footer__item"><a href="" class="footer__link"><span>Terms of Use</span></a></li>
                                 <li class="footer__item"><a href="" class="footer__link"><span>Privacy Policy</span></a></li>
                             </ul>
@@ -29,7 +29,7 @@ const Footer = ({}) => {
 
 					<div class="footer__col">
 						<div class="footer__form">
-                            <form action="" class="form form--footer">
+                            <form action="" class="form form--footer" id="subscribe-footer">
                                 <div class="form__box">
                                     <div class="form__field">
                                         <div class="form__title">Don’t miss our news and announcements</div>
diff --git a/src/components/Header.jsx b/src/components/Header.jsx
index 0d57703..b7adf40 100644
--- a/src/components/Header.jsx
+++ b/src/components/Header.jsx
@@ -1,5 +1,5 @@
 const Header = ({children, data}) => {
-	return <header class="header">
+	return <header class="header" data-elt="header">
 		<div class="header__container">
 			<div class="header__wrap">
 				<a href="" class="header__logo">
@@ -8,7 +8,7 @@ const Header = ({children, data}) => {
 
                 <div class="header__socials">
                     <div class="socials">
-                        <a href="" class="socials__link" target="_blank">
+                        <a href="https://doka.guide/css/grid-guide/" class="socials__link" target="_blank">
                             <svg class="svg-icon" viewBox="0 0 40 40" width="40" height="40"><use xlink:href="#svg-x"></use></svg>
                         </a>
 
diff --git a/src/js/app.js b/src/js/app.js
index 156e124..c2b8d68 100644
--- a/src/js/app.js
+++ b/src/js/app.js
@@ -1,3 +1,107 @@
+import createDOM from './app/utils/createDOM';
+import Popup from './app/Popup';
+/* import FormFactory, { formDataToObject } from './app/Form.js'; */
+
+class App {
+    constructor() {
+        this.DOM = createDOM();
+        this.body = this.DOM.body;
+        this.scroll = window.scrollY;
+        this.vh = 0;
+
+        this.popup = new Popup(this.DOM);
+
+        /* this.forms = FormFactory([{
+			form: '#subscribe-into',
+			constraints: {
+				email: {
+					presence: true,
+					email: true
+				}
+			}
+		}, {
+            form: '#subscribe-footer',
+			constraints: {
+				email: {
+					presence: true,
+					email: true
+				}
+			}
+		}]); */
+
+        this.init();
+		this.addEvents();
+    }
+
+    init = () => {
+        this.setVh();
+		this.setBaseFontSize();
+    }
+
+    addEvents = () => {
+		document.addEventListener('click', this.handleDocumentClick);
+		window.addEventListener('resize', this.handleResizeEvent);
+		window.addEventListener('load', this.handleLoadEvent);
+		window.addEventListener('scroll', this.handleScrollEvent, { passive: true });
+
+        this.DOM.scrollLink?.forEach((el, i) => {
+			el.addEventListener('click', (e) => {
+				let link = el.getAttribute('href');
+
+				if (link.includes('/') && link.includes('#')) {}
+
+				if (link.includes('#')) {
+					e.preventDefault();
+					this.smoothScroll(el);
+					return false;
+				}
+			});
+		});
+    }
+
+    handleScrollEvent = (e) => {
+        this.scroll = window.scrollY;
+
+        setTimeout(() => {
+            this.setHeaderScrollClass(this.scroll);
+        }, 100);
+    }
+
+    handleResizeEvent = (e) => {
+		this.setVh();
+		this.setBaseFontSize();
+    }
+
+    handleLoadEvent = (e) => {
+		this.body.classList.add('is-init');
+    }
+
+    setVh() {
+		let vh = window.innerHeight * 0.01;
+		document.documentElement.style.setProperty('--vh', `${vh}px`);
+	}
+
+	smoothScroll = (link) => {
+		let targetId = link.getAttribute('href');
+
+		const elt = document.querySelector(targetId.replace(/\//g, ''));
+
+		elt?.scrollIntoView({ block: "start", behavior: "smooth" });
+	}
+
+	setBaseFontSize = () => {
+		let baseFontSize = Math.max(window.innerWidth / 1920, 1);
+		document.documentElement.style.setProperty('--scale', `${baseFontSize}px`);
+	}
+
+    setHeaderScrollClass = (scroll) => {
+        let offset = 0;
+        this.DOM.header.classList.toggle('is-scroll', scroll > offset);
+    }
+}
+
 window.addEventListener('DOMContentLoaded', () => {
     console.log('app inited');
+
+    new App();
 })
\ No newline at end of file
diff --git a/src/js/app/Popup.js b/src/js/app/Popup.js
new file mode 100644
index 0000000..1ab4cce
--- /dev/null
+++ b/src/js/app/Popup.js
@@ -0,0 +1,99 @@
+import getQuery from './utils/getQuery.js';
+import { overflow } from './utils/overflow.js';
+
+export default class Popup {
+	constructor(DOM, options = {}) {
+		this.DOM = DOM;
+		this.query = getQuery();
+		this.onClose = options.onClose || (() => {});
+
+		this.popupOpenControls  = [...document.querySelectorAll('[data-elts~="popupBtn"]')];
+		this.popupCloseControls = [...document.querySelectorAll('[data-elts~="closePopup"]')];
+		this.popups = [...document.querySelectorAll('[data-elts~="popup"][data-popup]')];
+
+		this.openedPopups = [];
+
+		document.body.addEventListener('click', (event) => {
+			const open = event.target.closest('[data-elts~="popupBtn"]');
+
+			if (open) {
+				event.preventDefault();
+			    this.open(open.dataset.popup);
+			}
+
+			const close = event.target.closest('[data-elts~="closePopup"]');
+
+			if (close) {
+				event.preventDefault();
+				this.closeAll();
+			}
+		})
+
+		if (this.query.popup) {
+			this.open(this.query.popup);
+		}
+	}
+
+	removeListener = (elt) => {
+		elt.removeAttribute('data-popup');
+		elt.removeAttribute('data-elts');
+		console.log('removeListener', elt);
+	}
+
+	open = (id) => {
+		const currentOpenedPopups = this.popups.filter(p => {
+			const opened = p.classList.contains('is-open');
+			opened && p.style.setProperty('z-index', 90);
+			return opened;
+		});
+
+		setTimeout(() => {
+			currentOpenedPopups.map(p => {
+				this.close(p.dataset.popup);
+			})
+		}, 300);
+
+		this.popups.forEach((popupElt) => {
+			const open = popupElt.dataset.popup === id;
+			if (open) {
+				popupElt.classList.add('is-open');
+				this.openedPopups.push(id);
+				overflow.on();
+
+				if(id === 'certificates') {
+					this.DOM.body.classList.add('is-certificates-open');
+					overflow.off();
+				}
+			}
+		});
+	}
+
+	close = (id) => {
+		this.popups.forEach((popupElt) => {
+			if (popupElt.dataset.popup === id) {
+				popupElt.classList.remove('is-open');
+				this.onClose(popupElt);
+				setTimeout(() => {
+					popupElt.style.removeProperty('z-index');
+				}, 200);
+				this.DOM.body?.classList.remove('is-settings-open');
+				this.DOM.body?.classList.remove('is-inventory-open');
+				this.DOM.body?.classList.remove('is-certificates-open');
+				overflow.off();
+			}
+		});
+	}
+
+	closeAll = () => {
+		this.popups.forEach((popupElt) => {
+			popupElt.classList.remove('is-open');
+			this.DOM.body?.classList.remove('is-settings-open');
+			this.DOM.body?.classList.remove('is-inventory-open');
+			this.DOM.body?.classList.remove('is-certificates-open');
+			popupElt.style.removeProperty('z-index');
+			overflow.off();
+		})
+
+		this.onClose();
+	}
+}
\ No newline at end of file
diff --git a/src/js/app/utils/createDOM.js b/src/js/app/utils/createDOM.js
new file mode 100644
index 0000000..08f89eb
--- /dev/null
+++ b/src/js/app/utils/createDOM.js
@@ -0,0 +1,33 @@
+export default function createDOM(selector = '[data-elt]', multiple = '[data-elts]') {
+	/*
+	// hash map version
+	const DOM = new Map();
+	[...document.querySelectorAll(selector)].forEach((elt, i) => {
+		DOM.set(elt.dataset.dom, elt);
+	});
+	*/
+
+	const DOM = {};
+
+	[...document.querySelectorAll(multiple)].forEach((elt, i) => {
+		let arr = elt.dataset.elts.split(' ');
+
+		arr.forEach(function(item, index, array) {
+			if (DOM[item]) {
+				DOM[item].push(elt);
+			} else {
+				DOM[item] = [elt];
+			}
+		});
+	});
+
+	[...document.querySelectorAll(selector)].forEach((elt, i) => {
+		let arr = elt.dataset.elt.split(' ');
+
+		arr.forEach(function(item, index, array) {
+			DOM[item] = elt;
+		});
+	});
+	
+	return DOM;
+}
diff --git a/src/js/app/utils/declination.js b/src/js/app/utils/declination.js
new file mode 100644
index 0000000..557a924
--- /dev/null
+++ b/src/js/app/utils/declination.js
@@ -0,0 +1,12 @@
+export default function declination(number, words) {
+    // words: 0 фильмов, 1 фильма, 2 фильма
+    const w = words, //.split('|'),
+        n = Math.abs(number * 1);
+
+    return n % 10 === 1 && n % 100 !== 11
+        ? w[0]
+        : (n % 10 >= 2 && n % 10 <= 4 && (n % 100 < 10 || n % 100 >= 20)
+                ? w[1]
+                : w[2]
+        );
+};
\ No newline at end of file
diff --git a/src/js/app/utils/getQuery.js b/src/js/app/utils/getQuery.js
new file mode 100644
index 0000000..f6a5713
--- /dev/null
+++ b/src/js/app/utils/getQuery.js
@@ -0,0 +1,19 @@
+export default function getQuery() {
+	const 
+		params = window.location.search.slice(1);
+	
+	if (!params) {
+		return {};
+	}
+	
+	const 
+		result = params.split('&').map(function(i) { return i.split('=');}).reduce(function(m,o){ m[o[0]] = o[1]; return m;},{});
+	
+	return result;
+}
+
+/*export default function getQuery(name) {
+	let params = new URLSearchParams(location.search.slice(1));
+	
+	return params.get(name);
+}*/
\ No newline at end of file
diff --git a/src/js/app/utils/interpolate.js b/src/js/app/utils/interpolate.js
new file mode 100644
index 0000000..3db3dc9
--- /dev/null
+++ b/src/js/app/utils/interpolate.js
@@ -0,0 +1,30 @@
+export function interpolate(value, min, max, targetRangeMin, targetRangeMax) {
+	const 
+		result = targetRangeMin + (targetRangeMax - targetRangeMin) * (value - min) / (max - min);
+		
+	return result;
+};
+
+export function interpolateClamp(value, min, max, targetRangeMin, targetRangeMax) {
+	const 
+		result = targetRangeMin + (targetRangeMax - targetRangeMin) * (value - min) / (max - min);
+		
+	return Math.max(targetRangeMin, Math.min(result, targetRangeMax));
+};
+
+export function norm(value, min, max) {
+	return (value - min) / (max - min);
+}
+
+export function normClamp(val, min, max) {
+    const result = Math.max(0, Math.min((val - min) / (max - min), 1));
+    return result;
+}
+
+export function lerp(norm, min, max) {
+	return (max - min) * norm + min;
+}
+
+export function clamp(value, min, max) {
+	return Math.min(Math.max(value, min), max);
+}
diff --git a/src/js/app/utils/overflow.js b/src/js/app/utils/overflow.js
new file mode 100644
index 0000000..a0bede6
--- /dev/null
+++ b/src/js/app/utils/overflow.js
@@ -0,0 +1,29 @@
+export let overflow = {
+	elements : document.querySelectorAll('body'),
+
+	on: () => {
+		const scrollWidth = window.innerWidth - document.documentElement.clientWidth;
+
+		if(scrollWidth > 0){
+
+			document.querySelector('[data-elt ~= "body"]').classList.add('is-fake-scroll');
+			overflow.elements.forEach((el) => {
+				el.style.setProperty('padding-right', `${scrollWidth}px`);
+			});
+
+			
+		}
+
+		document.querySelector('[data-elt ~= "body"]').classList.add('is-overflow');
+	},
+	off: () => {
+		if(document.querySelector('[data-elt ~= "body"]').classList.contains('is-fake-scroll')){
+			document.querySelector('[data-elt ~= "body"]').classList.remove('is-fake-scroll');
+
+			overflow.elements.forEach((el) => {
+				el.style.removeProperty('padding-right');
+			});
+		}
+		document.querySelector('[data-elt ~= "body"]').classList.remove('is-overflow');
+	}
+}
diff --git a/src/js/app/utils/wait.js b/src/js/app/utils/wait.js
new file mode 100644
index 0000000..84601ff
--- /dev/null
+++ b/src/js/app/utils/wait.js
@@ -0,0 +1,3 @@
+export default async (ms) => {
+    return new Promise(resolve => setTimeout(resolve, ms))
+}
\ No newline at end of file
diff --git a/src/layouts/Layout.jsx b/src/layouts/Layout.jsx
index 7992b04..f28f8e8 100644
--- a/src/layouts/Layout.jsx
+++ b/src/layouts/Layout.jsx
@@ -48,12 +48,13 @@ const Layout = ({ children, title, bodyClass }) => {
                     }
                 `}>
             </style> */}
+
         </head>
-        <body class={bodyClass}>
+        <body data-elt="body" class={bodyClass}>
             <SvgIcons />
             {children}
 
-            {/* <script src="/assets/js/app.js"></script> */}
+            <script src="/assets/js/app.js"></script>
         </body>
     </html>
 };
diff --git a/src/pages/index.jsx b/src/pages/index.jsx
index fda579a..da2a7bf 100644
--- a/src/pages/index.jsx
+++ b/src/pages/index.jsx
@@ -31,21 +31,17 @@ export default async ({ data }) => {
                                 </div>
 
                                 <div class="intro__button">
-                                    <button class="button-play">
+                                    <button class="button-play" data-elts="popupBtn" data-popup="video">
                                         <i></i>
-                                        <svg class="svg-icon" viewBox="0 0 105 43" width="105" height="43" style="width: 105rem; height: 43rem;"><use xlink:href="#svg-play-icon"></use></svg>
-                                        <svg class="svg-icon" viewBox="0 0 101 38" width="101" height="38" style="width: 101rem; height: 38rem;"><use xlink:href="#svg-play-text"></use></svg>
-{/* 
                                         <svg class="svg-icon svg-icon--icon" viewBox="0 0 105 43" width="105" height="43"><use xlink:href="#svg-play-icon"></use></svg>
                                         <svg class="svg-icon svg-icon--text" viewBox="0 0 101 38" width="101" height="38"><use xlink:href="#svg-play-text"></use></svg>
-*/}
                                     </button>
                                 </div>
                             </div>
 
                             <div class="intro__bottom">
                                 <div class="intro__form">
-                                    <form action="" class="form form--intro">
+                                    <form action="" class="form form--intro" id="subscribe-intro">
                                         <div class="form__box">
                                             <div class="form__field form__field--input">
                                                 <input type="mail" class="form__input" placeholder='YOUR E-MAIL'/>
@@ -118,7 +114,7 @@ export default async ({ data }) => {
                     </div>
                 </section>
 
-                <section class="process">
+                <section class="process" id="process">
                     <div class="process__container">
                         <div class="process__wrap">
                             <h2 class="process__title">how it works</h2>
@@ -223,7 +219,7 @@ export default async ({ data }) => {
                     </div>
                 </section>
 
-                <section class="about">
+                <section class="about" id="about">
                     <div class="about__container">
                         <div class="about__wrap">
                             <div class="about__block">
@@ -305,22 +301,22 @@ export default async ({ data }) => {
             <Footer />
         </div>
 
-        {/* <div class="popup">
+        <div class="popup" data-elts="popup" data-popup="video">
             <div class="popup__box">
-                <button class="popup__close">
-                    <svg class="svg-icon" viewBox="0 0 40 40" width="40" height="40" style="width: 40rem; height: 40rem;"><use xlink:href="#svg-close"></use></svg>
+                <button class="popup__close" data-elts="closePopup">
+                    <svg class="svg-icon" viewBox="0 0 40 40" width="40" height="40"><use xlink:href="#svg-close"></use></svg>
                 </button>
 
                 <div class="popup__main">
                     <div class="popup__video">
                         <div class="video">
-                            <video src=""></video>
+                            <video muted loop playsinline controls src="/assets/images/intro-video.mp4" type="video/mp4"></video>
                             <button class="video__button"></button>
                         </div>
                     </div>
                 </div>
             </div>
-        </div> */}
+        </div>
 
     </Layout>
 }
diff --git a/src/styles/blocks/button.scss b/src/styles/blocks/button.scss
index 3b672b9..521092f 100644
--- a/src/styles/blocks/button.scss
+++ b/src/styles/blocks/button.scss
@@ -61,27 +61,27 @@
 		position: absolute;
 		z-index: 2;
 		top: 60%;
-		right: -40px;
-		width: 80px;
-		height: 80px;
+		right: -40rem;
+		width: 80rem;
+		height: 80rem;
 		border-radius: 50%;
 
 		// GRADIENT WITH BLUR
 		// background: radial-gradient(circle, #8A87FF -30%, #2C2B5D 65%);
-		// filter: blur(10px);
+		// filter: blur(10rem);
 
 		// BLUR ONLY
 		background-color: #8A87FF;
-		filter: blur(20px);
+		filter: blur(20rem);
 	}
 
 	&::after {
 		content: '';
 		position: absolute;
-		top: 3px;
-		right: 3px;
-		bottom: 3px;
-		left: 3px;
+		top: 3rem;
+		right: 3rem;
+		bottom: 3rem;
+		left: 3rem;
 		z-index: 1;
 		background-color: #2C2B5D;
 		border-radius: 50%;
diff --git a/src/styles/blocks/form.scss b/src/styles/blocks/form.scss
index 830f5b8..00fe186 100644
--- a/src/styles/blocks/form.scss
+++ b/src/styles/blocks/form.scss
@@ -54,6 +54,7 @@
 
 			&__input {
 				box-shadow: 0rem 0rem 32rem 0rem #000000A3 inset;
+				text-transform: uppercase;
 			}
 
 			&__button {
@@ -86,7 +87,6 @@
 		padding: 36rem 30rem;
 		border-radius: 30rem;
 		background-color: #262631;
-		text-transform: uppercase;
 		@include body-m();
 		@include placeholder($white64);
 	}
diff --git a/src/styles/blocks/header.scss b/src/styles/blocks/header.scss
index 2cdbb69..5b5c73c 100644
--- a/src/styles/blocks/header.scss
+++ b/src/styles/blocks/header.scss
@@ -7,10 +7,26 @@
 	right: 0;
 	z-index: 99;
 
-	&.is-scroll {
+	&::before {
+		content: '';
+		display: block;
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
 		background-color: #161618E5;
-		backdrop-filter: blur(7px);
-		-webkit-backdrop-filter: blur(7px);
+		backdrop-filter: blur(7rem);
+		-webkit-backdrop-filter: blur(7rem);
+		opacity: 0;
+		z-index: -1;
+		transition: opacity .3s
+	}
+
+	&.is-scroll {
+		&::before {
+			opacity: 1;
+		}
 	}
 
 	&__container {
diff --git a/src/styles/blocks/intro.scss b/src/styles/blocks/intro.scss
index 382ad30..8b986e4 100644
--- a/src/styles/blocks/intro.scss
+++ b/src/styles/blocks/intro.scss
@@ -22,14 +22,14 @@
 		height: 100%;
 		object-fit: cover;
 	}
-	
+
 	&__bg {
 		position: absolute;
 		top: 0;
 		right: 0;
 		bottom: 0;
 		left: 0;
-	
+
 		&::before {
 			content: '';
 			pointer-events: none;
diff --git a/src/styles/blocks/popup.scss b/src/styles/blocks/popup.scss
index 8945a8c..5964a37 100644
--- a/src/styles/blocks/popup.scss
+++ b/src/styles/blocks/popup.scss
@@ -1,11 +1,78 @@
 // @include webfont('FF', 'filename');
 
 .popup {
+	display: flex;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+	padding: 80rem;
+    overflow: hidden;
+    overflow-y: auto;
+    background-color: rgba(0, 0, 0, 0.8);
+    visibility: hidden;
+    opacity: 0;
+    z-index: 99;
+    transition: visibility 0s .1s, opacity .1s;
 
+	&.is-open {
+		opacity: 1;
+		visibility: visible;
+	}
+
+	&__box {
+		position: relative;
+		width: 100%;
+		max-width: 1470rem;
+		margin: auto;
+		height: 100%;
+	}
+
+	&__close {
+		position: absolute;
+		top: 0;
+		right: -60rem;
+		width: 40rem;
+		height: 40rem;
+		display: flex;
+		color: $violet;
+		transition: color 0.3s;
+	}
+
+	&__main {
+		height: 100%;
+	}
+
+	&__video {
+		height: 100%;
+	}
+}
+
+@media only screen and (hover: hover) {
+	.popup {
+		&__close {
+			&:hover {
+				color: $white100;
+			}
+		}
+	}
 }
 
 @media only screen and (max-width: $small) {
 	.popup {
-		
+		padding: 40rem 16rem;
+
+		&__close {
+			right: 0;
+			top: -30rem;
+			width: 24rem;
+			height: 24rem;
+
+			.svg-icon {
+				width: 24rem;
+				height: auto;
+			}
+		}
 	}
 }
diff --git a/src/styles/blocks/states.scss b/src/styles/blocks/states.scss
new file mode 100644
index 0000000..3ee87d4
--- /dev/null
+++ b/src/styles/blocks/states.scss
@@ -0,0 +1,7 @@
+body {
+	&.is-init {
+		.popup {
+			display: flex;
+		}
+	}
+}
\ No newline at end of file
diff --git a/src/styles/blocks/video.scss b/src/styles/blocks/video.scss
new file mode 100644
index 0000000..01def91
--- /dev/null
+++ b/src/styles/blocks/video.scss
@@ -0,0 +1,13 @@
+.video {
+	overflow: hidden;
+	border-radius: 8rem;
+	line-height: 0;
+	height: 100%;
+
+	video {
+		aspect-ratio: 16/9;
+		width: 100%;
+		height: 100%;
+		object-fit: contain;
+	}
+}
\ No newline at end of file
diff --git a/src/styles/partials/default.scss b/src/styles/partials/default.scss
index 17506a4..d206d67 100644
--- a/src/styles/partials/default.scss
+++ b/src/styles/partials/default.scss
@@ -23,6 +23,20 @@ body {
     color: $white100;
     @include body-l();
     @include scrollbar();
+
+    &.is-fake-scroll {
+        &::after {
+            content: '';
+            display: block;
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            overflow-y: scroll;
+            z-index: 8;
+        }
+    }
 }
 
 body, input, button {
diff --git a/src/styles/styles.scss b/src/styles/styles.scss
index ea7d437..4a1ae23 100644
--- a/src/styles/styles.scss
+++ b/src/styles/styles.scss
@@ -15,4 +15,5 @@
 @import './blocks/intro.scss';
 @import './blocks/popup.scss';
 @import './blocks/process.scss';
-@import './blocks/socials.scss';
\ No newline at end of file
+@import './blocks/socials.scss';
+@import './blocks/video.scss';
\ No newline at end of file