From 9ea31b3490e9bf08e47babe9d5e8fab38593972b Mon Sep 17 00:00:00 2001
From: ZWang0987 <zwang577@ucr.edu>
Date: Wed, 27 Nov 2024 23:03:19 -0800
Subject: [PATCH 1/3] Added animation for culture title

---
 src/components/culture/text.tsx | 88 ++++++++++++++++++---------------
 1 file changed, 48 insertions(+), 40 deletions(-)

diff --git a/src/components/culture/text.tsx b/src/components/culture/text.tsx
index d332dd1..11337fa 100644
--- a/src/components/culture/text.tsx
+++ b/src/components/culture/text.tsx
@@ -14,25 +14,36 @@ 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 */}
-        <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>
+      {/* Animated Title */}
+      <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-isa-dark-red sm:text-lg md:text-2xl lg:mb-12 lg:text-4xl lg:leading-[65px]"
+      >
+        <h1>
+          <b>Persian Cultural Celebrations</b>
+        </h1>
+      </motion.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>
   );
 };

From 457471100da0fbddaf9476c58fa5972aca347d9e Mon Sep 17 00:00:00 2001
From: Kavin Phabiani <kavinphab@gmail.com>
Date: Sun, 1 Dec 2024 18:45:02 -0800
Subject: [PATCH 2/3] fixed title animation

---
 src/app/culture/page.tsx              |  6 +-----
 src/components/culture/background.tsx |  4 ++--
 src/components/culture/text.tsx       | 10 ++++++----
 3 files changed, 9 insertions(+), 11 deletions(-)

diff --git a/src/app/culture/page.tsx b/src/app/culture/page.tsx
index 2b2ecc5..9df9984 100644
--- a/src/app/culture/page.tsx
+++ b/src/app/culture/page.tsx
@@ -1,14 +1,10 @@
 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>
   );
diff --git a/src/components/culture/background.tsx b/src/components/culture/background.tsx
index c02833d..c44c99d 100644
--- a/src/components/culture/background.tsx
+++ b/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"
         />
diff --git a/src/components/culture/text.tsx b/src/components/culture/text.tsx
index 11337fa..cf1975b 100644
--- a/src/components/culture/text.tsx
+++ b/src/components/culture/text.tsx
@@ -5,6 +5,8 @@ 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 },
@@ -15,6 +17,7 @@ const CultureText = () => {
   return (
     <div>
       {/* 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"
@@ -22,11 +25,10 @@ const CultureText = () => {
         transition={{ duration: 0.8 }}
         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]"
       >
-        <h1>
-          <b>Persian Cultural Celebrations</b>
-        </h1>
+         <Image src={CultureTitle} alt="Our Culture Page Title" />
       </motion.div>
-
+       
+      </div>
       {/* Animated Nowruz Description */}
       <motion.div
         variants={animation}

From b81d4e7a4a1747706e1fd8c366051d970c6de96c Mon Sep 17 00:00:00 2001
From: Kavin Phabiani <kavinphab@gmail.com>
Date: Sun, 1 Dec 2024 18:45:54 -0800
Subject: [PATCH 3/3] formatting

---
 src/app/culture/page.tsx        |  1 -
 src/components/culture/text.tsx | 20 +++++++++-----------
 2 files changed, 9 insertions(+), 12 deletions(-)

diff --git a/src/app/culture/page.tsx b/src/app/culture/page.tsx
index 9df9984..89236fb 100644
--- a/src/app/culture/page.tsx
+++ b/src/app/culture/page.tsx
@@ -4,7 +4,6 @@ import Background from "@/components/culture/background";
 const page = () => {
   return (
     <div>
-     
       <Background />
     </div>
   );
diff --git a/src/components/culture/text.tsx b/src/components/culture/text.tsx
index cf1975b..0ed704e 100644
--- a/src/components/culture/text.tsx
+++ b/src/components/culture/text.tsx
@@ -7,7 +7,6 @@ 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 },
   show: { opacity: 1, y: 0 },
@@ -18,16 +17,15 @@ const CultureText = () => {
     <div>
       {/* 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-isa-dark-red sm:text-lg md:text-2xl lg:mb-12 lg:text-4xl lg:leading-[65px]"
-      >
-         <Image src={CultureTitle} alt="Our Culture Page Title" />
-      </motion.div>
-       
+        <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-isa-dark-red sm:text-lg md:text-2xl lg:mb-12 lg:text-4xl lg:leading-[65px]"
+        >
+          <Image src={CultureTitle} alt="Our Culture Page Title" />
+        </motion.div>
       </div>
       {/* Animated Nowruz Description */}
       <motion.div