Update styling

JumboCode · Apr 14, 2024 · 390ffad · 390ffad
1 parent e0e242e
commit 390ffad
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 35 deletions.
diff --git a/src/app/public/about/page.tsx b/src/app/public/about/page.tsx
@@ -23,21 +23,19 @@ const AboutLayout = () => {
     };
   }, []);
   return (
-    <div className="sm: flex flex-col justify-center gap-y-4 py-6 sm:w-full sm:px-0">
-      <span className="pt-6 text-center text-3xl font-semibold sm:text-left sm:text-lg">
+    <div className="flex-col justify-center gap-y-4 py-6 sm:flex sm:w-full sm:px-0">
+      <span className="pt-6 text-center text-3xl font-semibold sm:text-left">
         Our Story
       </span>
-      <p className="mt-8 font-bold leading-7">
-        The Legacy Project&apos;s Origin
-      </p>
+      <p className="font-bold leading-7">The Legacy Project&apos;s Origin</p>
       <p className="leading-7">
         The concept of{" "}
         <strong>
-          <span style={{ color: "#742B1A" }}>The Legacy Project (TLP)</span>
+          <span className="text-[#742B1A]">The Legacy Project (TLP)</span>
         </strong>{" "}
         began in 2018, when{" "}
         <strong>
-          <span style={{ color: "#742B1A" }}>Arielle Galinsky</span>
+          <span className="text-[#742B1A]">Arielle Galinsky</span>
         </strong>
         , a high school junior at the time, spent her time working at a local
         senior community in her Massachusetts hometown. Her role allowed her to
@@ -47,7 +45,7 @@ const AboutLayout = () => {
         sense of regret she felt having lost her own grandfathers at a young
         age, Arielle decided to spearhead{" "}
         <strong>
-          <span style={{ color: "#742B1A" }}>TLP</span>
+          <span className="text-[#742B1A]">TLP</span>
         </strong>{" "}
         as a personal project. <br />
         <br />
@@ -148,7 +146,9 @@ const AboutLayout = () => {
           </div>
         </div>
       )}
-      <p className="mt-8 font-bold leading-7">Parallel Stories Unite</p>
+      <p className="mt-8 text-3xl font-bold leading-7">
+        Parallel Stories Unite
+      </p>
       <p className="leading-7">
         Little did she know that, in the state over from her,{" "}
         <strong>Katie Furey</strong>- a sophomore in college who was home for

diff --git a/src/app/public/layout.tsx b/src/app/public/layout.tsx
@@ -11,7 +11,7 @@ const PublicLayout = ({ children }: IPublicLayout) => {
     <div className="flex h-full flex-col justify-between">
       <div>
         <Navbar />
-        <div className="pb-[105px] pt-[88px] sm:px-[50px] md:px-[93px] xs:px-[30px]">
+        <div className="px-[30px] pb-[105px] pt-[88px] sm:px-[50px] md:px-[93px]">
           {children} <LandingFooter />
         </div>
       </div>

diff --git a/src/app/public/team/page.tsx b/src/app/public/team/page.tsx
@@ -29,7 +29,7 @@ const PublicLayout = () => {
   }, []);
   return (
     <div className="flex w-full flex-col">
-      <span className="pt-6 text-center text-3xl font-semibold sm:text-left sm:text-4xl">
+      <span className="pt-6 text-center text-3xl font-semibold sm:text-left">
         Meet TLP
       </span>
       <p className="mt-7 leading-7">
@@ -56,11 +56,11 @@ const PublicLayout = () => {
           <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">
+      <span className="mb-6 mt-8 pt-6 text-center text-3xl font-semibold sm:text-left">
         Our Team
       </span>
       <Image src={OUR_TEAM} alt="our_team" />
-      <span className="pt-6 text-center text-3xl font-semibold sm:text-left sm:text-4xl">
+      <span className="mt-8 pt-6 text-center text-3xl font-semibold sm:text-left">
         Press
       </span>
       {isSmallScreen ? (

diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
@@ -7,6 +7,21 @@ import { useAuth } from "@hooks";
 import logoicon from "../../public/landing/newlegacy-logo.svg";
 import Image from "next/image";
 
+const NAV_ITEMS = [
+  {
+    name: "About Us",
+    href: "/public/about",
+  },
+  {
+    name: "Meet TLP",
+    href: "/public/team",
+  },
+  {
+    name: "Start a Chapter",
+    href: "/public/start-chapter",
+  },
+];
+
 const Navbar = () => {
   const [dropdownVisible, setDropdownVisible] = useState(false);
   const handleMenuClick: React.MouseEventHandler = () => {
@@ -29,7 +44,7 @@ const Navbar = () => {
   }, []);
 
   return (
-    <nav className="top-0 z-10 flex h-[60px] w-full flex-row items-center justify-between border border-dark-tan bg-med-tan px-24 py-3">
+    <nav className="top-0 z-10 flex h-[60px] w-full flex-row items-center justify-between border border-dark-tan bg-med-tan px-[30px]  py-3 sm:px-[50px] md:px-[93px]">
       <Link href="/public" onClick={() => setDropdownVisible(false)}>
         <Image src={logoicon} alt="Legacy Logo" className="w-[200px]" />
       </Link>
@@ -70,26 +85,17 @@ const Navbar = () => {
             : "align-center hidden flex-row gap-[30px] pr-[40px] md2:flex"
         }
       >
-        <Link href="/public/team" onClick={() => setDropdownVisible(false)}>
-          <div className=" m-auto font-bold text-dark-teal duration-150 hover:-translate-y-0.5">
-            Meet TLP
-          </div>
-        </Link>
-
-        <Link href="/public/about" onClick={() => setDropdownVisible(false)}>
-          <div className=" m-auto font-bold text-dark-teal duration-150 hover:-translate-y-0.5">
-            Our Story
-          </div>
-        </Link>
-
-        <Link
-          href="/public/start-chapter"
-          onClick={() => setDropdownVisible(false)}
-        >
-          <div className=" m-auto font-bold text-dark-teal duration-150 hover:-translate-y-0.5">
-            Start a Chapter
-          </div>
-        </Link>
+        {NAV_ITEMS.map(({ name, href }) => (
+          <Link
+            key={href}
+            href={href}
+            onClick={() => setDropdownVisible(false)}
+          >
+            <div className="m-auto font-bold text-dark-teal duration-150 hover:-translate-y-0.5">
+              {name}
+            </div>
+          </Link>
+        ))}
 
         <button onClick={onSignIn}>
           <div className=" m-auto font-bold text-dark-teal duration-150 hover:-translate-y-0.5">

diff --git a/src/components/PhotoCarousel.tsx b/src/components/PhotoCarousel.tsx
@@ -78,7 +78,7 @@ const PhotoCarousel = ({ imagePaths }: PhotoCarouselParams) => {
         >
           {photos.map((photo, index) => (
             <div
-              key={index}
+              key={photo.filePath}
               className={
                 "absolute aspect-square h-full select-none object-cover transition-all"
               }