Landing Page

app/components/landing-page/GetToKnowUs/GetToKnowUsContainer.tsx

@@ -1,13 +1,7 @@
 import styled from 'styled-components'
 
 const StoryContainer = styled.div`
-	margin-right: -8.9%;
-	margin-left: -7.6%;
-	padding: 0 7.6%;
-	@media (max-width: 880px) {
-		margin-right: -5.5%;
-		margin-left: -5.5%;
-	}
+	padding: 0 5.5%;
 	&::-webkit-scrollbar {
 		-webkit-appearance: none;
 	}

app/components/landing-page/GetToKnowUs/index.tsx

@@ -9,14 +9,16 @@ import GetToKnowUsContainer from './GetToKnowUsContainer'
 const GetToKnowUs = () => {
 	const scrollRef = useHorizontalScroll()
 	return (
-		<section className='h-full mx-auto text-white max-w-9/10'>
-			<h2 className='my-24 text-center 2md:text-left' data-aos='fade-right'>
+		<section className='h-full text-white'>
+			<h2
+				className='my-24 text-center 2md:text-left w-full max-w-9/10 mx-auto'
+				data-aos='fade-right'>
 				Get to
 				<br />
 				Know Us
 			</h2>
 			<GetToKnowUsContainer
-				className='flex w-full gap-5 overflow-x-auto p-7'
+				className='flex w-full gap-5 overflow-x-auto xl:justify-center'
 				ref={scrollRef}>
 				{getToKnowUsItems.map(({ url, ...props }) => {
 					return url.includes('http') ? (

app/components/landing-page/Hero/index.tsx

@@ -1,11 +1,28 @@
-import React, { useEffect } from 'react'
+import React, { useEffect, useState } from 'react'
 import AOS from 'aos'
 import 'aos/dist/aos.css'
 
 const Hero = () => {
+	const [angkatanName, setAngkatanName] = useState('CSUI')
+	const [opacity, setOpacity] = useState(100)
+
+	// sleep function to delay
+	const sleep = (ms: number) => {
+		return new Promise(resolve => setTimeout(resolve, ms))
+	}
+
 	useEffect(() => {
 		AOS.init()
+		const interval = setInterval(() => {
+			setOpacity(0)
+			sleep(2000).then(() => {
+				setAngkatanName('BAKUNG')
+				setOpacity(100)
+			})
+		}, 2000)
+		return () => clearInterval(interval)
 	}, [])
+
 	return (
 		<section className='w-full bg-no-repeat bg-contain cursor-default lg:bg-cover h-gigantic bg-shade-pattern-sm lg:bg-shade-pattern'>
 			<div className='flex flex-col items-center justify-center w-full h-screen text-center text-white'>
@@ -23,7 +40,9 @@ const Hero = () => {
 					data-aos-anchor='#example-anchor'
 					data-aos-offset='500'
 					data-aos-duration='500'>
-					<span>CSUI</span>
+					<span className={`opacity-${opacity}  transition-all`}>
+						{angkatanName}
+					</span>
 					<span>2021</span>
 				</h1>
 			</div>