Merge pull request #82 from acm-ucr/zwang0987/CultureAnimation2

Added animation for culture title(NEW BRANCH, after pull)

src/app/culture/page.tsx

@@ -1,14 +1,9 @@
 import React from "react";
-import Image from "next/image";
 import Background from "@/components/culture/background";
-import CultureTitle from "@/public/culture/Culture.svg";
 
 const page = () => {
   return (
     <div>
-      <div className="m-10 mb-10 mt-2 justify-self-center sm:m-20 sm:mt-5">
-        <Image src={CultureTitle} alt="Our Culture Page Title" />
-      </div>
       <Background />
     </div>
   );

src/components/culture/background.tsx

@@ -8,13 +8,13 @@ const background = () => {
   return (
     <div className="max-w-screen relative mb-11 mt-11 h-auto min-h-screen">
       <div className="absolute right-0">
-        <Image src={TopPaisley} height={300} alt={"Top Background Paisley"} />
+        <Image src={TopPaisley} height={500} alt={"Top Background Paisley"} />
       </div>
       <CultureText />
       <div className="absolute bottom-0 left-0 -z-10">
         <Image
           src={BottomPaisley}
-          height={300}
+          height={500}
           alt={"Bottom Background Paisley"}
           className="z-0"
         />

src/components/culture/text.tsx

@@ -5,6 +5,7 @@ import { motion } from "framer-motion";
 import Image from "next/image";
 import Nowruz from "/src/public/culture/Nowruz.png";
 import ShabeYalda from "/src/public/culture/ShabeYalda.png";
+import CultureTitle from "@/public/culture/Culture.svg";
 
 const animation = {
   hidden: { opacity: 0, y: 30 },
@@ -14,25 +15,35 @@ const animation = {
 const CultureText = () => {
   return (
     <div>
-      <div className="mb-11 w-full text-balance px-11 pt-24 text-center text-isa-dark-red sm:text-lg md:text-2xl lg:mb-12 lg:text-4xl lg:leading-[65px]">
-        {/* Animated Nowruz Description */}
+      {/* Animated Title */}
+      <div className="m-10 mb-10 mt-2 justify-self-center sm:m-20 sm:mt-5">
         <motion.div
           variants={animation}
           initial="hidden"
           whileInView="show"
           transition={{ duration: 0.8 }}
-          className="mb-11 w-full text-balance px-11 pt-24 text-center text-4xl text-isa-dark-red"
+          className="mb-11 w-full text-balance px-11 pt-24 text-center text-isa-dark-red sm:text-lg md:text-2xl lg:mb-12 lg:text-4xl lg:leading-[65px]"
         >
-          <p>
-            <b>Nowruz Significance:</b> Nowruz, the Persian New Year, is a
-            significant cultural celebration that marks the beginning of the new
-            year in the Iranian calendar. It typically falls on the vernal
-            equinox, around March 20th or 21st, and is celebrated by millions of
-            people not only in Iran but also in many other countries with
-            Persian cultural influence.
-          </p>
+          <Image src={CultureTitle} alt="Our Culture Page Title" />
         </motion.div>
       </div>
+      {/* Animated Nowruz Description */}
+      <motion.div
+        variants={animation}
+        initial="hidden"
+        whileInView="show"
+        transition={{ duration: 0.8 }}
+        className="mb-11 w-full text-balance px-11 pt-24 text-center text-4xl text-isa-dark-red"
+      >
+        <p>
+          <b>Nowruz Significance:</b> Nowruz, the Persian New Year, is a
+          significant cultural celebration that marks the beginning of the new
+          year in the Iranian calendar. It typically falls on the vernal
+          equinox, around March 20th or 21st, and is celebrated by millions of
+          people not only in Iran but also in many other countries with Persian
+          cultural influence.
+        </p>
+      </motion.div>
 
       <div className="z-40 mb-11 flex flex-row flex-wrap">
         {/* Animated Images */}
@@ -60,27 +71,24 @@ const CultureText = () => {
         </motion.div>
       </div>
       <br></br>
-      <div className="px-11 text-center text-isa-dark-red sm:text-lg md:text-2xl lg:mb-12 lg:text-4xl lg:leading-[65px]">
-        {/* Animated Shabe Yalda Description */}
-        <motion.div
-          variants={animation}
-          initial="hidden"
-          whileInView="show"
-          transition={{ duration: 0.8, delay: 0.6 }}
-          className="px-52 text-center text-4xl text-isa-dark-red"
-        >
-          <p>
-            <b>Shabe Yalda Significance:</b> Shabe Yalda, also known as Yalda
-            Night or the Winter Solstice celebration, is a significant and
-            ancient Persian festival observed on the longest night of the year,
-            which typically falls on December 20th or 21st. This celebration
-            marks the victory of light over darkness as the days begin to grow
-            longer after the solstice. It is an event rich in symbolism and
-            cultural importance for Iranians and others with Persian cultural
-            ties.
-          </p>
-        </motion.div>
-      </div>
+      {/* Animated Shabe Yalda Description */}
+      <motion.div
+        variants={animation}
+        initial="hidden"
+        whileInView="show"
+        transition={{ duration: 0.8, delay: 0.6 }}
+        className="px-52 text-center text-4xl text-isa-dark-red"
+      >
+        <p>
+          <b>Shabe Yalda Significance:</b> Shabe Yalda, also known as Yalda
+          Night or the Winter Solstice celebration, is a significant and ancient
+          Persian festival observed on the longest night of the year, which
+          typically falls on December 20th or 21st. This celebration marks the
+          victory of light over darkness as the days begin to grow longer after
+          the solstice. It is an event rich in symbolism and cultural importance
+          for Iranians and others with Persian cultural ties.
+        </p>
+      </motion.div>
     </div>
   );
 };