added meet the app section (#62)

sws2apps · Mar 26, 2024 · 5528a6c · 5528a6c
1 parent cd20b79
commit 5528a6c
Show file tree

Hide file tree

Showing 3 changed files with 232 additions and 0 deletions.
diff --git a/docs/index.html b/docs/index.html
@@ -80,6 +80,24 @@ <h1 class="h1-xxl white" data-trID="tr_organizedPageTitle">Organized</h1>
         </div>
       </div>
     </div>
+	<div class="container">
+		<div class="section-meet-the-app">
+			<div class="title-container meet-the-app-title">
+				<h1 class="h1-xl"><span data-trID="tr_meetTheApp">Meet the Organized app</span><span class="sub-heading text-grey-400" data-trID="tr_reliableaAsistant">Your reliable theocratic assistant</span></h1>
+			</div>
+			<div class="video-and-heading-box">
+				<iframe class="video-meet-the-app" width="533" height="300" src="https://www.youtube.com/embed/2czQB-LEfqg" frameborder="0" allowfullscreen></iframe>
+				<div class="animated-heading">
+					<p class="animated-p-opacity30">ORGANIZED APP</p>
+					<p class="animated-p-opacity80">ORGANIZED APP</p>
+					<p class="animated-p-opacity100">ORGANIZED APP</p>
+					<p class="animated-p-opacity80">ORGANIZED APP</p>
+					<p class="animated-p-opacity30">ORGANIZED APP</p>
+				</div>
+			</div>
+		</div>
+	</div>
+
     <div class="container">
       <div class="section-advantages">
         <div class="title-container">

diff --git a/docs/main.css b/docs/main.css
@@ -5895,3 +5895,173 @@ html {
   .noto-sans {
     font-family: 'Noto Sans', sans-serif !important;
   }
+
+   /* SECTION MEET THE APP */
+   .section-meet-the-app {
+	margin-bottom: 100px;
+	padding: 0 0 50px 0;
+	width: 100%;
+}
+.video-and-heading-box {
+	padding-top: 45px;
+	display: flex;
+	justify-content: space-between;
+}
+.video-meet-the-app {
+	border-radius: 22.77px;
+}
+.animated-heading {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	transition: 3s;
+}
+.animated-heading p {
+	margin: 5px 0 0 0;
+    font-weight: 800;
+    line-height: 54.46px;
+    font-size: 45px;
+    font-family: Inter;
+    color: var(--accent-100);
+    text-shadow: 
+        -1px -1px 0 #8391BD,  
+        1px -1px 0 #8391BD,
+        -1px 1px 0 #8391BD,
+        1px 1px 0 #8391BD;
+}
+.animated-heading p.animated-p-opacity100 {
+	color: var(--accent-350);
+	text-shadow: none;
+}
+.animated-heading p.animated-p-opacity30{
+	opacity: 0;
+}
+.animated-heading p.animated-p-opacity80 {
+	opacity: 0;
+}
+.animated-heading p.animated-p-opacity30:first-of-type.animate {
+	animation: slide1 2s ease forwards .3s;
+}
+.animated-heading p.animated-p-opacity80:nth-of-type(2).animate {
+	animation: slide3 2s ease forwards .3s;
+}
+.animated-heading p.animated-p-opacity80:nth-of-type(4).animate {
+	animation: slide4 2s ease forwards .3s
+}
+.animated-heading p.animated-p-opacity30:last-of-type.animate {
+	animation: slide2 2s ease forwards .3s;
+}
+.not-animate {
+	opacity: 0;
+}
+@keyframes slide1 {
+	0% {
+		color: var(--accent-350);
+		text-shadow: none;
+		opacity: 0;
+		transform: translateY(119px);
+	}
+	100% {
+		opacity: 0.3;
+		transform: translateY(0);
+		color: var(--accent-100);
+		text-shadow: 
+			-1px -1px 0 #8391BD,  
+			1px -1px 0 #8391BD,
+			-1px 1px 0 #8391BD,
+			1px 1px 0 #8391BD;
+	}
+}
+@keyframes slide2 {
+	0% {
+		opacity: 0;
+		transform: translateY(-119px);
+	}
+	100% {
+		opacity: 0.3;
+		transform: translateY(0);
+	}
+}
+@keyframes slide3 {
+	0% {
+		opacity: 0;
+		transform: translateY(59px);
+	}
+	100% {
+		opacity: 0.8;
+		transform: translateY(0);
+	}
+}
+@keyframes slide4 {
+	0% {
+		opacity: 0;
+		transform: translateY(-59px);
+	}
+	100% {
+		opacity: 0.8;
+		transform: translateY(0);
+	}
+}
+@media screen and (max-width: 991px) {
+	.section-meet-the-app {
+		margin-bottom: 50px;
+		padding: 0 0 25px 0;
+	}
+	.video-and-heading-box {
+		padding-top: 25px;
+		display: flex;
+		align-items: center;
+	}
+	.video-meet-the-app {
+		width: 50%;
+		height: 250px;
+		margin-bottom: 15px;
+	}
+	.animated-heading p {
+		line-height: 45px;
+		font-size: 36px;
+	}
+}
+@media screen and (max-width: 676px) {
+	.section-meet-the-app {
+		margin-bottom: 50px;
+		padding: 0 0 25px 0;
+	}
+	.video-and-heading-box {
+		padding-top: 25px;
+		display: flex;
+		align-items: center;
+	}
+	.video-meet-the-app {
+		width: 50%;
+		height: 250px;
+		margin-bottom: 15px;
+	}
+	.animated-heading p {
+		line-height: 45px;
+		font-size: 28px;
+	}
+}
+
+@media screen and (max-width: 544px) {
+	.section-meet-the-app {
+		margin-bottom: 30px;
+		padding: 0 0 15px 0;
+	}
+	.video-and-heading-box {
+		padding-top: 30px;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+	}
+	.video-meet-the-app {
+		width: 100%;
+		height: 200px;
+		margin-bottom: 15px;
+	}
+	.animated-heading p {
+		line-height: 30px;
+		font-size: 28px;
+	}
+}
diff --git a/docs/main.js b/docs/main.js
@@ -37818,3 +37818,47 @@ function getYear() {
 	return currentYear;
 }
 year.innerText = getYear();
+
+// SECTION MEET THE APP
+document.addEventListener("DOMContentLoaded", function() {
+	const animatedHeading = document.querySelector('.animated-p-opacity100');
+	const windowHeight = window.innerHeight;
+
+	let isAnimated = false;
+
+	function checkAnimation() {
+		const rect = animatedHeading.getBoundingClientRect();
+		const distanceFromTop = rect.top - windowHeight;
+		const distanceFromBottom = windowHeight - rect.bottom;
+		if (distanceFromTop <= windowHeight && distanceFromBottom <= windowHeight && distanceFromTop <= 0 ) {
+			startAnimation();
+		}
+		else {
+			resetAnimation();
+		}
+	}
+
+	function startAnimation() {
+		const paragraphs = document.querySelectorAll('.animated-heading p');
+		if (!isAnimated) {
+			paragraphs.forEach((p) => {
+				p.classList.add('animate');
+				p.classList.remove('not-animate');
+			});
+			isAnimated = true;
+		}
+	}
+
+	function resetAnimation() {
+		const paragraphs = document.querySelectorAll('.animated-heading p');
+		if (isAnimated) {
+			paragraphs.forEach((p) => {
+				p.classList.remove('animate');
+				p.classList.add('not-animate');
+			});
+			isAnimated = false;
+		}
+	}
+
+	window.addEventListener('scroll', checkAnimation);
+});