remove carousel for larger screens

JumboCode · Apr 14, 2024 · e0e242e · e0e242e
1 parent 0319ce5
commit e0e242e
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 24 deletions.
diff --git a/src/app/public/about/page.tsx b/src/app/public/about/page.tsx
@@ -3,6 +3,9 @@ import Link from "next/link";
 import Image from "next/legacy/image";
 import LivesReflected from "@public/landing/about/their_lives_reflected.png";
 import SundaesSundays from "@public/landing/about/sundaes_sundays.png";
+import PS1 from "@public/landing/about/parallel_stories1.png";
+import PS2 from "@public/landing/about/parallel_stories2.png";
+import PS3 from "@public/landing/about/parallel_stories3.png";
 import PhotoCarousel from "@components/PhotoCarousel";
 import { useEffect, useState } from "react";
 
@@ -102,14 +105,14 @@ const AboutLayout = () => {
           </div>
         </div>
       ) : (
-        <div className="mt-4 flex flex-col sm:mt-6 sm:h-80 sm:flex-row sm:justify-between sm:gap-x-20">
-          <div className="aspect-w-16 aspect-h-9 flex flex-col sm:w-1/2">
+        <div className="mt-4 h-96 sm:mt-6 sm:flex sm:justify-between sm:gap-x-20">
+          <div className="flex flex-col">
             <Image
               src={LivesReflected}
               alt="Their Lives Reflected"
-              className="flex aspect-auto object-contain p-12"
-            />{" "}
-            <p className="mt-5 h-20 text-center text-sm">
+              className="flex aspect-auto object-contain p-12 sm:max-w-none"
+            />
+            <p className="mt-5 text-center text-sm">
               <span>
                 <Link
                   href="https://www.amazon.com/Their-Lives-Reflected-Treasury-Captured/dp/B08SYTBDGC"
@@ -119,17 +122,17 @@ const AboutLayout = () => {
                   Through The Legacy Project
                 </Link>
               </span>{" "}
-              was published 2021 to showcase and celebrate their life accounts,
-              both for the seniors and their families.
+              was published in 2021 to showcase and celebrate their life
+              accounts, both for the seniors and their families.
             </p>
           </div>
-          <div className="flex w-1/2 flex-col">
+          <div className="flex flex-col">
             <Image
               src={SundaesSundays}
               alt="Sundaes & Sundays"
-              className="flex aspect-auto object-contain p-12"
+              className="flex aspect-auto object-contain p-12 sm:max-w-none"
             />
-            <p className="mt-5 h-20 text-center text-sm">
+            <p className="mt-5 text-center text-sm">
               <span>
                 <Link
                   href="https://www.amazon.com/Sundaes-Sundays-Collection-Histories-captured/dp/B0CPKP2TX2/ref=sr_1_1?crid=1FVJFMUPSDRQC&keywords=sundaes+and+sundays&qid=1707221197&sprefix=sundaes+and+sundays%2Caps%2C187&sr=8-1"
@@ -170,13 +173,22 @@ const AboutLayout = () => {
         life stories, which she is working on compiling as a series of
         vignettes.
       </p>
-      <PhotoCarousel
-        imagePaths={[
-          "/landing/about/parallel_stories1.png",
-          "/landing/about/parallel_stories2.png",
-          "/landing/about/parallel_stories3.png",
-        ]}
-      />
+      {isSmallScreen ? (
+        <PhotoCarousel
+          imagePaths={[
+            "/landing/about/parallel_stories1.png",
+            "/landing/about/parallel_stories2.png",
+            "/landing/about/parallel_stories3.png",
+          ]}
+        />
+      ) : (
+        <div className="mt-6 flex justify-between sm:gap-x-12">
+          <Image src={PS1} alt="parallel stories 1" className="flex" />
+          <Image src={PS2} alt="parallel stories 2" className="flex" />
+          <Image src={PS3} alt="parallel stories 3" className="flex" />
+        </div>
+      )}
+
       <p className="mt-8 font-bold leading-7">Collaboration and Expansion</p>
       <p className="leading-7">
         Arielle and Katie met in 2020, quickly connecting over their aligned

diff --git a/src/app/public/team/page.tsx b/src/app/public/team/page.tsx
@@ -3,6 +3,9 @@
 import Link from "next/link";
 import Image from "next/legacy/image";
 import OUR_TEAM from "@public/landing/team/our_team.png";
+import MEET_TLP_1 from "@public/landing/team/meet_tlp1.png";
+import MEET_TLP_2 from "@public/landing/team/meet_tlp2.png";
+import MEET_TLP_3 from "@public/landing/team/meet_tlp3.png";
 import PRESS_1 from "@public/landing/team/press1.png";
 import PRESS_2 from "@public/landing/team/press2.png";
 import PhotoCarousel from "@components/PhotoCarousel";
@@ -38,13 +41,21 @@ const PublicLayout = () => {
         passionate about telling stories, and form a Legacy Project chapter at
         your school today.
       </p>
-      <PhotoCarousel
-        imagePaths={[
-          "/landing/team/meet_tlp1.png",
-          "/landing/team/meet_tlp2.png",
-          "/landing/team/meet_tlp3.png",
-        ]}
-      />
+      {isSmallScreen ? (
+        <PhotoCarousel
+          imagePaths={[
+            "/landing/team/meet_tlp1.png",
+            "/landing/team/meet_tlp2.png",
+            "/landing/team/meet_tlp3.png",
+          ]}
+        />
+      ) : (
+        <div className="mt-6 flex sm:gap-x-4 md:gap-x-8 lg:gap-x-12">
+          <Image src={MEET_TLP_1} alt="meet_tlp_1" className="flex" />
+          <Image src={MEET_TLP_2} alt="meet_tlp_2" className="flex" />
+          <Image src={MEET_TLP_3} alt="meet_tlp_3" className="flex" />
+        </div>
+      )}
       <span className="mb-6 mt-8 pt-6 text-center text-3xl font-semibold sm:text-left sm:text-4xl">
         Our Team
       </span>