Add fade-ins (#54)

nuansacp2025 · Nov 11, 2024 · 2832c94 · 2832c94
1 parent b7ed476
commit 2832c94
Show file tree

Hide file tree

Showing 8 changed files with 187 additions and 113 deletions.
diff --git a/app/about-us/page.tsx b/app/about-us/page.tsx
@@ -6,6 +6,7 @@ import Carousel from '../components/about-us/carousel';
 import FunFact from '../components/about-us/funfact';
 import ModalOverlay from '../components/modal-overlay';
 import { useState } from 'react';
+import { FadeInDiv } from '../components/animations';
 export default function AboutUs() {
   //To Test the modal Overlay Uncomment below
   const [isModalOpen, setIsModalOpen] = useState(true);
@@ -42,94 +43,105 @@ export default function AboutUs() {
       }
       {/* What is Nuansa section */}
       <section className="text-center py-12 px-4 md:px-10">
-        <h1 className="text-4xl font-bold mb-4">What is &quot;Nuansa&quot;</h1>
-        <p className="text-lg mb-8">
-          An annual arts and cultural event by a group of Indonesian students in NUS.
-          It aims to promote the rich and diverse cultures of Indonesia.
-        </p>
+        <FadeInDiv>
+          <h1 className="text-4xl font-bold mb-4">What is &quot;Nuansa&quot;</h1>
+          <p className="text-lg mb-8">
+            An annual arts and cultural event by a group of Indonesian students in NUS.
+            It aims to promote the rich and diverse cultures of Indonesia.
+          </p>
+        </FadeInDiv>
       </section>
 
       {/* Fun Fact Section */}
-      <section className="text-center py-12 px-4 md:px-20 bg-orange-a flex flex-col md:flex-row items-center justify-center">
-        <h2 className="text-3xl mb-8 text-green-a">Fun Fact</h2>
-        <div className="flex-grow px-4 md:px-20">
+      <section className="text-center py-12 px-4 md:px-20 bg-orange-a w-full flex flex-col md:flex-row items-center justify-center">
+        <FadeInDiv>
+          <h2 className="text-3xl mb-8 text-green-a">Fun Fact</h2>
+        </FadeInDiv>
+        <FadeInDiv className="flex-grow px-4 md:px-20">
           <FunFact>
             <h2 className="text-3xl mb-8 text-green-a">Fun Fact</h2>
             <h2 className="text-3xl mb-8 text-green-a">Fun Fict</h2>
           </FunFact>
-        </div>
+        </FadeInDiv>
       </section>
 
       {/* Vision and Mission Section */}
       <section className="grid grid-cols-1 md:grid-cols-2 bg-orange-a gap-8 py-12 px-4 md:px-10 text-green-a">
-        <div className="text-left">
+        <FadeInDiv className="text-left">
           <h2 className="text-2xl font-semibold mb-4">Our Vision</h2>
           <p className="text-lg">
             To enrich society by creating and sharing diverse cultural expressions that inspire, challenge, and connect people across different backgrounds.
           </p>
-        </div>
-        <div className="text-left md:text-right">
+        </FadeInDiv>
+        <FadeInDiv className="text-left md:text-right">
           <h2 className="text-2xl font-semibold mb-4">Our Mission</h2>
           <p className="text-lg">
             To produce and promote cultural works that reflect, preserve, and innovate cultural heritage, fostering greater understanding.
           </p>
-        </div>
+        </FadeInDiv>
       </section>
 
        {/* Memorable Clips Section */}
        <section className="flex flex-col items-center justify-center py-12 text-center bg-green-a text-white pb-10">
-        <h2 className="text-3xl font-bold mb-5">Memorable Clips</h2>
-        <div className="flex flex-col md:flex-row items-center justify-center gap-y-8 md:gap-x-20">
-          <Carousel>
-            <img 
-              src="https://media.licdn.com/dms/image/v2/D5622AQEyPzD7WAMiyA/feedshare-shrink_800/feedshare-shrink_800/0/1726034259793?e=2147483647&v=beta&t=yYGRAZoKbJV0xHLg8XkpiB2QF7J_g1hs02U5lFw_ziU" 
-              alt="Some Memorable Clips"
-              className="max-h-[200px] object-contain"
-            />
-            <img 
-              src="https://media.licdn.com/dms/image/v2/D5622AQEyPzD7WAMiyA/feedshare-shrink_800/feedshare-shrink_800/0/1726034259793?e=2147483647&v=beta&t=yYGRAZoKbJV0xHLg8XkpiB2QF7J_g1hs02U5lFw_ziU" 
-              alt="Some Memorable Clips" 
-              className="max-h-[200px] object-contain"
-            />
-            <img 
-              src="https://media.licdn.com/dms/image/v2/D5622AQEyPzD7WAMiyA/feedshare-shrink_800/feedshare-shrink_800/0/1726034259793?e=2147483647&v=beta&t=yYGRAZoKbJV0xHLg8XkpiB2QF7J_g1hs02U5lFw_ziU" 
-              alt="Some Memorable Clips" 
-              className="max-h-[200px] object-contain"
-            />
-          </Carousel>
-        </div>
+        <FadeInDiv>
+          <h2 className="text-3xl font-bold mb-5">Memorable Clips</h2>
+          <div className="flex flex-col md:flex-row items-center justify-center gap-y-8 md:gap-x-20">
+            <Carousel>
+              <img 
+                src="https://media.licdn.com/dms/image/v2/D5622AQEyPzD7WAMiyA/feedshare-shrink_800/feedshare-shrink_800/0/1726034259793?e=2147483647&v=beta&t=yYGRAZoKbJV0xHLg8XkpiB2QF7J_g1hs02U5lFw_ziU" 
+                alt="Some Memorable Clips"
+                className="max-h-[200px] object-contain"
+              />
+              <img 
+                src="https://media.licdn.com/dms/image/v2/D5622AQEyPzD7WAMiyA/feedshare-shrink_800/feedshare-shrink_800/0/1726034259793?e=2147483647&v=beta&t=yYGRAZoKbJV0xHLg8XkpiB2QF7J_g1hs02U5lFw_ziU" 
+                alt="Some Memorable Clips" 
+                className="max-h-[200px] object-contain"
+              />
+              <img 
+                src="https://media.licdn.com/dms/image/v2/D5622AQEyPzD7WAMiyA/feedshare-shrink_800/feedshare-shrink_800/0/1726034259793?e=2147483647&v=beta&t=yYGRAZoKbJV0xHLg8XkpiB2QF7J_g1hs02U5lFw_ziU" 
+                alt="Some Memorable Clips" 
+                className="max-h-[200px] object-contain"
+              />
+            </Carousel>
+          </div>
+        </FadeInDiv>
       </section>
       <section className="text-center py-12 bg-orange-a">
         {/* Flex container for Why Join Us section */}
-        <div className="flex flex-col-reverse md:flex-row items-center justify-center pb-10 gap-8 md:gap-20">
-          {/* Grid of Features (Networking, Collaboration, Creativity) */}
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
-            <div className="bg-red-900 text-white p-10 rounded-md w-48 h-44 flex justify-center items-center mx-2 my-2">
-              Networking
-            </div>
-            <div className="bg-yellow-500 text-white p-10 rounded-md w-48 h-44 flex justify-center items-center mx-2 my-2">
-              Networking
+        <FadeInDiv>
+          <div className="flex flex-col-reverse md:flex-row items-center justify-center pb-10 gap-8 md:gap-20">
+            {/* Grid of Features (Networking, Collaboration, Creativity) */}
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+              <div className="bg-red-900 text-white p-10 rounded-md w-48 h-44 flex justify-center items-center mx-2 my-2">
+                Networking
+              </div>
+              <div className="bg-yellow-500 text-white p-10 rounded-md w-48 h-44 flex justify-center items-center mx-2 my-2">
+                Networking
+              </div>
+              <div className="bg-purple-900 text-white p-10 rounded-md w-48 h-44 flex justify-center items-center mx-2 my-2">
+                Networking
+              </div>
             </div>
-            <div className="bg-purple-900 text-white p-10 rounded-md w-48 h-44 flex justify-center items-center mx-2 my-2">
-              Networking
-            </div>
-          </div>
+
 
-          {/* Why Join Us heading */}
-          <div className="mb-8 md:mb-0">
-            <h1 className="text-4xl mb-4 text-center text-green-a">Why Join Us</h1>
+            {/* Why Join Us heading */}
+            <div className="mb-8 md:mb-0">
+              <h1 className="text-4xl mb-4 text-center text-green-a">Why Join Us</h1>
+            </div>
           </div>
-        </div>
+        </FadeInDiv>
 
         {/* Video section */}
-        <div className="flex flex-col md:flex-row items-center justify-center pb-10 gap-8 md:gap-20">
-          <h1 className="text-4xl mb-4 text-green-a">View Our Latest Show<span className="hidden md:inline">{">>"}</span>
-          </h1>
-          <VideoFrame
-            videoTitle="RickRoll"
-            videoSrc="https://www.youtube.com/embed/dQw4w9WgXcQ?si=tSGI-Y2bIM5CKrxI"
-          />
-        </div>
+        <FadeInDiv>
+          <div className="flex flex-col md:flex-row items-center justify-center pb-10 gap-8 md:gap-20">
+            <h1 className="text-4xl mb-4 text-green-a">View Our Latest Show<span className="hidden md:inline">{">>"}</span>
+            </h1>
+            <VideoFrame
+              videoTitle="RickRoll"
+              videoSrc="https://www.youtube.com/embed/dQw4w9WgXcQ?si=tSGI-Y2bIM5CKrxI"
+            />
+          </div>
+        </FadeInDiv>
       </section>
     </div>
   );

diff --git a/app/components/animations.tsx b/app/components/animations.tsx
@@ -0,0 +1,28 @@
+/**
+ * Contains React components to wrap other components in framer-motion animations.
+ */
+
+import React from "react";
+import { motion } from "framer-motion";
+
+// TODO: add type checking
+// @ts-ignore
+export function FadeInDiv({ children, ...props }) {
+  const variants = {
+    hidden: { y: 10, opacity: 0 },
+    visible: { y: 0, opacity: 1 },
+  };
+
+  return (
+    <motion.div
+      initial="hidden"
+      whileInView="visible"
+      viewport={{ once: true }}
+      transition={{ duration: 0.5, ease: "easeIn" }}
+      variants={variants}
+      {...props}
+    >
+      {children}
+    </motion.div>
+  );
+}
diff --git a/app/contact-us/page.tsx b/app/contact-us/page.tsx
@@ -1,28 +1,31 @@
+"use client"
+
 import Image from "next/image";
 import BusinessForm from "@/app/components/contact-us/business-form";
 import GeneralForm from "@/app/components/contact-us/general-form";
+import { FadeInDiv } from "../components/animations";
 
 export default function ContactPage() {
     return (
         <div className="items-center bg-green-a space-y-20 px-4 md:px-12 lg:px-16 pb-12">
-            <div className="sm:grid sm:grid-cols-2 text-white py-10">
+            <FadeInDiv className="sm:grid sm:grid-cols-2 text-white py-10">
                 <div className="sm:place-self-center mx-auto my-auto">
                     <GeneralForm/>
                 </div>
                 <div className="sm:place-self-center hidden sm:block">
                     <Image src={'/images/logo/nuansa_logo.png'} alt={'logo'} width={0} height={0} sizes="100vw"
                            style={{ width: '12rem', height: 'auto' }}/>
                 </div>
-            </div>
-            <div className="sm:grid sm:grid-cols-2 bg-orange-a rounded-md text-black bottom-8 p-10">
+            </FadeInDiv>
+            <FadeInDiv className="sm:grid sm:grid-cols-2 bg-orange-a rounded-md text-black bottom-8 p-10">
                 <div className="sm:place-self-center hidden sm:block">
                     <Image src={'/images/logo/nuansa_logo.png'} alt={'logo'} width={0} height={0} sizes="100vw"
                            style={{width: '12rem', height: 'auto'}}/>
                 </div>
                 <div className="sm:place-self-center">
                     <BusinessForm/>
                 </div>
-            </div>
+            </FadeInDiv>
         </div>
     )
             }
diff --git a/app/our-team/arts/page.tsx b/app/our-team/arts/page.tsx
@@ -1,12 +1,15 @@
+"use client"
+
 import MemberCard from "@/app/components/our-team/member-card";
 import Image from "next/image";
+import { FadeInDiv } from "@/app/components/animations";
 
 export default function Page() {
   return (
     <main className="min-h-screen">
       <section className="relative w-full py-12 px-16 overflow-hidden md:py-20 md:px-0">
         <Image src={"/images/our-team/what-we-do.png"} alt="What We Do" fill={true} objectFit="cover" />
-        <div className="relative w-full flex flex-col items-center md:flex-row">
+        <FadeInDiv className="relative w-full flex flex-col items-center md:flex-row">
           <div className="flex flex-1 items-center justify-center mb-12 md:mb-0">
             <h2 className="text-4xl md:text-5xl font-bold text-white text-center">
               ARTS
@@ -20,23 +23,27 @@ export default function Page() {
             Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
             </p>
           </div>
-        </div>
+        </FadeInDiv>
       </section>
 
       <section className="w-full flex flex-col items-center py-12 px-16 md:py-20 md:px-32">
-        <h2 className="text-3xl md:text-4xl pb-8 md:pb-12 font-bold text-green-a">
-          Divisions and Tasks
-        </h2>
-        <h3 className="text-2xl md:text-3xl pb-6 md:pb-8 font-semibold text-green-a">
-          Members
-        </h3>
-        <div className="grid gap-8 place-content-center place-items-stretch grid-cols-[minmax(0,_350px)] md:grid-cols-[repeat(2,_minmax(0,_350px))] lg:grid-cols-[repeat(3,_minmax(0,_350px))] md:gap-16">
+        <FadeInDiv>
+          <h2 className="text-3xl md:text-4xl pb-8 md:pb-12 font-bold text-green-a">
+            Divisions and Tasks
+          </h2>
+        </FadeInDiv>
+        <FadeInDiv>
+          <h3 className="text-2xl md:text-3xl pb-6 md:pb-8 font-semibold text-green-a">
+            Members
+          </h3>
+        </FadeInDiv>
+        <FadeInDiv className="grid gap-8 place-content-center place-items-stretch grid-cols-[minmax(0,_350px)] md:grid-cols-[repeat(2,_minmax(0,_350px))] lg:grid-cols-[repeat(3,_minmax(0,_350px))] md:gap-16">
           <MemberCard imageSrc="/images/our-team/member-placeholder.png" name="Member Name 1" role="Role 1" />
           <MemberCard imageSrc="/images/our-team/member-placeholder.png" name="Member Name 2" role="Role 2" />
           <MemberCard imageSrc="/images/our-team/member-placeholder.png" name="Member Name 3" role="Role 3" />
           <MemberCard imageSrc="/images/our-team/member-placeholder.png" name="Member Name 4" role="Role 4" />
           <MemberCard imageSrc="/images/our-team/member-placeholder.png" name="Member Name 5" role="Role 5" />
-        </div>
+        </FadeInDiv>
       </section>
     </main>
   )

diff --git a/app/our-team/external-affairs/page.tsx b/app/our-team/external-affairs/page.tsx
@@ -1,12 +1,15 @@
+"use client"
+
 import MemberCard from "@/app/components/our-team/member-card";
 import Image from "next/image";
+import { FadeInDiv } from "@/app/components/animations";
 
 export default function Page() {
   return (
     <main className="min-h-screen">
       <section className="relative w-full py-12 px-16 overflow-hidden md:py-20 md:px-0">
         <Image src={"/images/our-team/what-we-do.png"} alt="What We Do" fill={true} objectFit="cover" />
-        <div className="relative w-full flex flex-col items-center md:flex-row">
+        <FadeInDiv className="relative w-full flex flex-col items-center md:flex-row">
           <div className="flex flex-1 items-center justify-center mb-12 md:mb-0">
             <h2 className="text-4xl md:text-5xl font-bold text-white text-center">
               EXTERNAL AFFAIRS
@@ -20,23 +23,27 @@ export default function Page() {
             Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
             </p>
           </div>
-        </div>
+        </FadeInDiv>
       </section>
 
       <section className="w-full flex flex-col items-center py-12 px-16 md:py-20 md:px-32">
-        <h2 className="text-3xl md:text-4xl pb-8 md:pb-12 font-bold text-green-a">
-          Divisions and Tasks
-        </h2>
-        <h3 className="text-2xl md:text-3xl pb-6 md:pb-8 font-semibold text-green-a">
-          Members
-        </h3>
-        <div className="grid gap-8 place-content-center place-items-stretch grid-cols-[minmax(0,_350px)] md:grid-cols-[repeat(2,_minmax(0,_350px))] lg:grid-cols-[repeat(3,_minmax(0,_350px))] md:gap-16">
+        <FadeInDiv>
+          <h2 className="text-3xl md:text-4xl pb-8 md:pb-12 font-bold text-green-a">
+            Divisions and Tasks
+          </h2>
+        </FadeInDiv>
+        <FadeInDiv>
+          <h3 className="text-2xl md:text-3xl pb-6 md:pb-8 font-semibold text-green-a">
+            Members
+          </h3>
+        </FadeInDiv>
+        <FadeInDiv className="grid gap-8 place-content-center place-items-stretch grid-cols-[minmax(0,_350px)] md:grid-cols-[repeat(2,_minmax(0,_350px))] lg:grid-cols-[repeat(3,_minmax(0,_350px))] md:gap-16">
           <MemberCard imageSrc="/images/our-team/member-placeholder.png" name="Member Name 1" role="Role 1" />
           <MemberCard imageSrc="/images/our-team/member-placeholder.png" name="Member Name 2" role="Role 2" />
           <MemberCard imageSrc="/images/our-team/member-placeholder.png" name="Member Name 3" role="Role 3" />
           <MemberCard imageSrc="/images/our-team/member-placeholder.png" name="Member Name 4" role="Role 4" />
           <MemberCard imageSrc="/images/our-team/member-placeholder.png" name="Member Name 5" role="Role 5" />
-        </div>
+        </FadeInDiv>
       </section>
     </main>
   )