Merge pull request #75 from acm-ucr/mmart570/CultureResponsiveness

Culture Page Responsiveness
acm-ucr · Nov 26, 2024 · 650f51a · 650f51a
2 parents 74c66ca + 1105c1c
commit 650f51a
Show file tree

Hide file tree

Showing 3 changed files with 70 additions and 63 deletions.
diff --git a/src/app/culture/page.tsx b/src/app/culture/page.tsx
@@ -6,7 +6,7 @@ import CultureTitle from "@/public/culture/Culture.svg";
 const page = () => {
   return (
     <div>
-      <div className="mb-20 flex justify-center">
+      <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 />

diff --git a/src/components/culture/background.tsx b/src/components/culture/background.tsx
@@ -7,14 +7,14 @@ import CultureText from "./text";
 const background = () => {
   return (
     <div className="max-w-screen relative mb-11 mt-11 h-auto min-h-screen">
-      <div className="absolute right-0 top-0 z-0">
-        <Image src={TopPaisley} height={530} alt={"Top Background Paisley"} />
+      <div className="absolute right-0">
+        <Image src={TopPaisley} height={300} alt={"Top Background Paisley"} />
       </div>
       <CultureText />
       <div className="absolute bottom-0 left-0 -z-10">
         <Image
           src={BottomPaisley}
-          height={650}
+          height={300}
           alt={"Bottom Background Paisley"}
           className="z-0"
         />

diff --git a/src/components/culture/text.tsx b/src/components/culture/text.tsx
@@ -14,66 +14,73 @@ const animation = {
 const CultureText = () => {
   return (
     <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="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 Images */}
-      <motion.div
-        variants={animation}
-        initial="hidden"
-        whileInView="show"
-        transition={{ duration: 0.8, delay: 0.3 }}
-        className="z-40 mb-11 flex flex-row"
-      >
-        <Image
-          className="w-1/2 scale-90 pl-9"
-          src={ShabeYalda}
-          alt="ShabeYaldaPhoto"
-          width={711}
-          height={433}
-        ></Image>
-        <Image
-          className="w-1/2 scale-90 pr-32"
-          src={Nowruz}
-          alt="NowruzPhoto"
-          width={556}
-          height={431}
-        ></Image>
-      </motion.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 className="z-40 mb-11 flex flex-row flex-wrap">
+        {/* Animated Images */}
+        <motion.div
+          variants={animation}
+          initial="hidden"
+          whileInView="show"
+          transition={{ duration: 0.8, delay: 0.3 }}
+          className="z-40 mb-11 flex flex-row"
+        >
+          <Image
+            className="w-full scale-90 pl-9 pr-2 sm:w-1/2 sm:scale-100"
+            src={ShabeYalda}
+            alt="ShabeYaldaPhoto"
+            width={711}
+            height={433}
+          ></Image>
+          <Image
+            className="w-full scale-90 pl-9 pr-2 sm:w-1/2 sm:scale-100"
+            src={Nowruz}
+            alt="NowruzPhoto"
+            width={556}
+            height={431}
+          ></Image>
+        </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>
     </div>
   );
 };