feat: clusters carousel page (#9)

* feat: clusters carousel page * feat: animations for clusters carousel * fix: aboutPage * fix: clunster carousel bottom bar * fix: minor fix
delta · Dec 8, 2023 · 8382caa · 8382caa
1 parent 3e5bf2e
commit 8382caa
Show file tree

Hide file tree

Showing 18 changed files with 272 additions and 63 deletions.
diff --git a/src/app/eventcluster/eventcluster.module.css b/src/app/eventcluster/eventcluster.module.css
@@ -0,0 +1,31 @@
+.event {
+    background: url('../../assets/images/EventBG.png');
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+    background-color: #070b12;
+  }
+
+.Back{
+  cursor: pointer;
+  transition: 0.2s;
+}
+
+.Back:active{
+  transform: scale(0.9); 
+}
+
+.slide{
+  height: 60vh;
+  margin-top: -1%;
+}
+
+@media screen and (max-width : 1024px){
+  .eventClusterName{
+    margin-top: 2%;
+  }
+  .slide{
+    margin-top: -2%;
+    height: 75vh;
+  }
+}    
diff --git a/src/app/eventcluster/page.tsx b/src/app/eventcluster/page.tsx
@@ -0,0 +1,24 @@
+import { ClusterCarousel, NavBar } from '@/components';
+import Back from '@/assets/images/Back.png';
+import BackEnlarge from '@/assets/images/BackEnlarge.png';
+import ImageChanger from '@/components/BackButton/back';
+import styles from './eventcluster.module.css';
+
+const events = () => {
+    return (
+        <div className={`min-h-screen w-full text-center lg:p-7 p-5 event + ${styles.event}`}>
+            <NavBar />
+            <ImageChanger defaultImage={Back} hoverImage={BackEnlarge} />
+            <p
+                className={`${styles.eventClusterName} font-ROG 2xl:text-6xl xl:text-5xl lg:text-4xl sm:text-3xl text-2xl mt-12 transition-all`}
+            >
+                CLUSTER NAME
+            </p>
+            <div className="flex w-full h-[60vh] justify-center items-center">
+                <ClusterCarousel />
+            </div>
+        </div>
+    );
+};
+
+export default events;
diff --git a/src/app/gallery/page.tsx b/src/app/gallery/page.tsx
@@ -77,7 +77,8 @@ const History = () => {
                 styles.historyBG +
                 ' ' +
                 'h-screen w-screen p-0 flex justify-center items-center overflow-y-hidden' +
-                (isScrolled ? 'scrolled' : '')
+                ' ' +
+                (isScrolled ? ' scrolled' : ' transitioned')
             }
             onWheel={simulateScroll}
             onTouchStart={handleTouchStart}

diff --git a/src/app/globals.css b/src/app/globals.css
@@ -53,7 +53,7 @@ body {
 
 .footer-bg {
     border-radius: 10px;
-    background: rgba(0, 0, 0, 0.5);
+    background: rgba(0, 0, 0, 0.45);
 }
 
 .home {
@@ -79,6 +79,11 @@ body {
     background-position: center;
 }
 
+.AboutCardContent {
+    background: rgba(255, 255, 255, 0.05);
+    backdrop-filter: blur(20px);
+}
+
 .scrolled {
     animation: fadeout 1.5s;
     -moz-animation: fadeout 1.5s;
@@ -99,7 +104,7 @@ body {
         background-color: initial;
     }
     to {
-        background-color: #7efbfe;
+        background-color: #000;
     }
 }
 
@@ -257,4 +262,16 @@ body {
 
 .greenbutton{
     filter: hue-rotate(137deg) drop-shadow(0 0 20px #23A347) brightness(120%);
+}
+
+@media screen and (min-width: 1240px) {
+    .about {
+        min-height: max(100vh, 742px);
+    }
+}
+
+@media screen and (min-width: 1540px) {
+    .about {
+        min-height: max(100vh, 860px);
+    }
 }
diff --git a/src/app/home/page.tsx b/src/app/home/page.tsx
@@ -57,7 +57,7 @@ export default function Home() {
                 }
             ></div>
             <div
-                className={'h-screen w-full text-center lg:p-7 p-5 home'}
+                className={'h-screen w-full text-center lg:p-7 p-5 home transitioned'}
                 onWheel={simulateScroll}
                 onTouchStart={handleTouchStart}
                 onTouchMove={handleTouchMove}

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -21,31 +21,7 @@ const generateRandomNumber = (length: number) => {
     return result;
 };
 
-function useWindowSize() {
-    const [windowSize, setWindowSize] = useState<{
-        width: number | undefined;
-        height: number | undefined;
-    }>({
-        width: undefined,
-        height: undefined,
-    });
-
-    useEffect(() => {
-        function handleResize() {
-            setWindowSize({
-                width: window.innerWidth,
-                height: window.innerHeight,
-            });
-        }
-        window.addEventListener('resize', handleResize);
-        handleResize();
-        return () => window.removeEventListener('resize', handleResize);
-    }, []);
-    return windowSize;
-}
-
 export default function Loading() {
-    const size = useWindowSize();
     const currDate = new Date();
     const [animationStarted, setAnimationStarted] = useState<boolean>(false);
     const [year, setYear] = useState(String(currDate.getFullYear()).padStart(4, '0'));
@@ -87,8 +63,8 @@ export default function Loading() {
                 clearInterval(lightTimer);
                 setTimeout(() => {
                     router.push('/home');
-                }, 1000);
-            }, 5000);
+                }, 500);
+            }, 2000);
             const lightTimer = setInterval(() => {
                 setIsLeftLightOn(prev => !prev);
             }, 100);
@@ -100,27 +76,28 @@ export default function Loading() {
         }
     }, [animationStarted, router]);
 
-    return size.width !== undefined && size.width < 700 ? (
-        <LoadingMobileView
-            month={month}
-            year={year}
-            date={date}
-            hours={hours}
-            minutes={minutes}
-            isButtonClicked={animationStarted}
-            setClicked={setAnimationStarted}
-            isLeftLightOn={isLeftLightOn}
-        />
-    ) : (
-        <LoadingWebView
-            month={month}
-            year={year}
-            date={date}
-            hours={hours}
-            minutes={minutes}
-            isButtonClicked={animationStarted}
-            setClicked={setAnimationStarted}
-            isLeftLightOn={isLeftLightOn}
-        />
+    return (
+        <>
+            <LoadingMobileView
+                month={month}
+                year={year}
+                date={date}
+                hours={hours}
+                minutes={minutes}
+                isButtonClicked={animationStarted}
+                setClicked={setAnimationStarted}
+                isLeftLightOn={isLeftLightOn}
+            />
+            <LoadingWebView
+                month={month}
+                year={year}
+                date={date}
+                hours={hours}
+                minutes={minutes}
+                isButtonClicked={animationStarted}
+                setClicked={setAnimationStarted}
+                isLeftLightOn={isLeftLightOn}
+            />
+        </>
     );
 }
diff --git a/src/assets/images/aboutWedge.png b/src/assets/images/aboutWedge.png
diff --git a/src/assets/images/leftPortal.png b/src/assets/images/leftPortal.png
diff --git a/src/assets/images/rightPortal.png b/src/assets/images/rightPortal.png
diff --git a/src/assets/images/temp.png b/src/assets/images/temp.png
diff --git a/src/components/AboutCard/AboutCard.module.css b/src/components/AboutCard/AboutCard.module.css
@@ -7,7 +7,7 @@
     box-sizing: border-box;
 }
 
-.parent div {
+.edge {
     position: absolute;
     width: 55px;
     height: 55px;
@@ -46,3 +46,26 @@
     border: 1px solid #ddd;
     border-radius: 2px;
 }
+
+/* .topWedge {
+    width: 70px;
+    height: 6.9px;
+    left: 50%;
+    transform: translate(-40%,-10%);
+    background: url('../../assets/images/aboutWedge.png');
+    background-size: contain;
+    background-repeat: no-repeat;
+    transform: scale(1.2);
+}
+
+.bottomWedge {
+    width: 70px;
+    height: 8px;
+    left: 50%;
+    transform: translate(-40%,-50%);
+    transform: rotate(90deg);
+    background: url('../../assets/images/aboutWedge.png');
+    background-size: contain;
+    background-repeat: no-repeat;
+    transform: scale(1.2);
+} */
diff --git a/src/components/AboutCard/AboutCard.tsx b/src/components/AboutCard/AboutCard.tsx
@@ -4,7 +4,7 @@ const AboutCard = () => {
     const content = AboutContent.content;
     return (
         <div className="AboutCard max-md:hidden h-fit sm:w-[85%] sm:h-[70%] md:w-[70%] md:h-[60%] lg:w-[60%] lg:h-[70%] xl:w-[45%] xl:h-[55%] flex justify-center items-center p-10 ">
-            <p className="pt-3 max-lg:text-base">{content}</p>
+            <p className="pt-3 max-lg:text-base text-lg font-Nunito">{content}</p>
         </div>
     );
 };

diff --git a/src/components/AboutCard/AboutCardMob.tsx b/src/components/AboutCard/AboutCardMob.tsx
@@ -10,16 +10,16 @@ const AboutCardMob = () => {
             className={
                 styles.parent +
                 ' ' +
-                'md:hidden flex justify-center items-center p-4 py-10 text-center'
+                'md:hidden flex justify-center items-center p-4 py-10 text-center AboutCardContent z-0'
             }
         >
-            <div className={styles.topLeft}></div>
-            <div className={styles.topRight}></div>
-            <div className={styles.bottomLeft}></div>
-            <div className={styles.bottomRight}></div>
-            <p className={styles.content + ' ' + 'w-full h-full p-3 overflow-y-scroll'}>
+            <div className={styles.topLeft + ' ' + styles.edge}></div>
+            <div className={styles.topRight + ' ' + styles.edge}></div>
+            <div className={styles.bottomLeft + ' ' + styles.edge}></div>
+            <div className={styles.bottomRight + ' ' + styles.edge}></div>
+            <div className={styles.content + ' ' + 'w-full h-full p-3 overflow-y-scroll relative'}>
                 {content} + {content2}
-            </p>
+            </div>
         </div>
     );
 };