Repository: acm-ucr/ptso-website
Pull request #84: Join Us Button
Author: login: n0mn0m1
Created: 2025-05-07T21:43:29Z | Merged: 2025-05-25T09:13:16Z

<img width="452" alt="Screenshot 2025-05-07 at 2 42 35 PM" src="https://github.com/user-attachments/assets/83089a4a-7a32-4bf3-86a7-f173b292f949" />



Diff:
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index 01b6884..e605150 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -7,76 +7,144 @@ import { navigations } from "@/data/NavbarLinks";
 import ptsoLogo from "@/public/ptsoLogoSmall.webp";
 import Divider from "@/components/Divider";
 import { usePathname } from "next/navigation";
+import { motion } from "framer-motion";
+
+const hoverScale = {
+  whileHover: { scale: 1.05 },
+  transition: { duration: 0.2, type: "tween" },
+};
+
+const navItemAnimation = {
+  initial: { opacity: 0, y: -10 },
+  animate: { opacity: 1, y: 0 },
+  transition: { duration: 0.3 },
+};
 
 const Navbar = () => {
   const [isOpen, setIsOpen] = useState(false);
   const pathname = usePathname();
 
-  const handleClick = () => {
-    setIsOpen(!isOpen);
-  };
-
-  const closeMenu = () => {
-    setIsOpen(false);
-  };
+  const handleClick = () => setIsOpen(!isOpen);
+  const closeMenu = () => setIsOpen(false);
 
   return (
-    <div className="text-ptso-purple-accent bg-ptso-blue-primary">
+    <motion.div
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      transition={{ duration: 0.5 }}
+      className="text-ptso-purple-accent bg-ptso-blue-primary"
+    >
       <div className="hidden items-center p-4 md:flex">
-        <Link href="/" className="mr-8 flex items-center">
-          <Image src={ptsoLogo} alt="PTSO Logo" height={70} width={49} />
-          <div className="px-4 text-3xl">PTSO</div>
-        </Link>
+        <motion.div {...navItemAnimation}>
+          <Link href="/" className="mr-8 flex items-center">
+            <Image src={ptsoLogo} alt="PTSO Logo" height={70} width={49} />
+            <div className="px-4 text-3xl">PTSO</div>
+          </Link>
+        </motion.div>
+
         <div className="font-beVietnamPro flex w-1/2 gap-11 text-xl">
           {navigations.map(({ link, name }, index) => (
-            <Link
-              href={link}
+            <motion.div
               key={index}
-              className={`hover:underline ${pathname === link ? "text-ptso-pink-secondary font-semibold" : ""}`}
+              {...navItemAnimation}
+              transition={{
+                ...navItemAnimation.transition,
+                delay: index * 0.1,
+              }}
             >
-              {name}
-            </Link>
+              <Link
+                href={link}
+                className={`hover:underline ${pathname === link ? "text-ptso-pink-secondary font-semibold" : ""}`}
+              >
+                {name}
+              </Link>
+            </motion.div>
           ))}
         </div>
-        <div className="w-1/3 text-right">JOIN US</div>
+
+        <motion.div className="ml-auto" {...hoverScale}>
+          <Link
+            href="https://www.instagram.com/ucr_ptso/"
+            className="bg-ptso-pink-secondary hover:bg-ptso-pink-secondary/90 inline-block rounded-full px-6 py-2 text-white"
+          >
+            JOIN US
+          </Link>
+        </motion.div>
       </div>
+
       <div className="md:hidden">
         <div className="flex items-center justify-between px-4 pt-4">
-          <Link href="\" onClick={closeMenu}>
-            {" "}
-            <Image
-              src={ptsoLogo}
-              alt="PTSO Logo"
-              width={49}
-              height={70}
-              className="hover:cursor-pointer"
-            />{" "}
-          </Link>
-          <div onClick={handleClick} className="hover:cursor-pointer">
-            {" "}
-            <MenuIcon size={32} />{" "}
-          </div>
+          <motion.div {...navItemAnimation}>
+            <Link href="/" onClick={closeMenu}>
+              <Image
+                src={ptsoLogo}
+                alt="PTSO Logo"
+                width={49}
+                height={70}
+                className="hover:cursor-pointer"
+              />
+            </Link>
+          </motion.div>
+
+          <motion.div
+            onClick={handleClick}
+            className="hover:cursor-pointer"
+            {...hoverScale}
+          >
+            <MenuIcon size={32} />
+          </motion.div>
         </div>
-        <div
-          className={`items-center gap-3 ${!isOpen ? "hidden" : "flex flex-col"}`}
+
+        <motion.div
+          initial={{ height: 0 }}
+          animate={{ height: isOpen ? "auto" : 0 }}
+          className="overflow-hidden"
         >
-          {navigations.map(({ link, name }, index) => (
-            <Link
-              href={link}
-              key={index}
-              onClick={closeMenu}
-              className={`border-b ${pathname === link ? "text-ptso-pink-secondary" : ""}`}
+          <div className="flex flex-col items-center gap-4 py-3">
+            {navigations.map(({ link, name }, index) => (
+              <motion.div
+                key={index}
+                initial={{ opacity: 0 }}
+                animate={{ opacity: isOpen ? 1 : 0 }}
+                transition={{ delay: index * 0.1 }}
+              >
+                <Link
+                  href={link}
+                  onClick={closeMenu}
+                  className={`border-b pb-1 ${
+                    pathname === link
+                      ? "border-ptso-pink-secondary text-ptso-pink-secondary font-semibold"
+                      : "border-ptso-purple-accent text-ptso-purple-accent"
+                  }`}
+                >
+                  {name}
+                </Link>
+              </motion.div>
+            ))}
+
+            <motion.div
+              initial={{ opacity: 0 }}
+              animate={{ opacity: isOpen ? 1 : 0 }}
+              className="mt-2"
+              {...hoverScale}
             >
-              {name}
-            </Link>
-          ))}
-          <div className="border-b">JOIN US</div>
-        </div>
+              <Link
+                href="https://www.instagram.com/ucr_ptso/"
+                className="bg-ptso-pink-secondary hover:bg-ptso-pink-secondary/90 rounded-full px-6 py-2 text-white"
+                onClick={closeMenu}
+              >
+                JOIN US
+              </Link>
+            </motion.div>
+          </div>
+        </motion.div>
       </div>
-      <div className="mx-4 pt-4 md:pt-0">
+
+      <div className="pt-4 md:pt-0">
         <Divider />
       </div>
-    </div>
+    </motion.div>
   );
 };
+
 export default Navbar;
diff --git a/src/components/home/ContactUs.tsx b/src/components/home/ContactUs.tsx
index 530a68c..d7f9aef 100644
--- a/src/components/home/ContactUs.tsx
+++ b/src/components/home/ContactUs.tsx
@@ -99,7 +99,7 @@ const ContactUs = () => {
                 ></textarea>
                 <motion.div whileHover={{ scale: 1.05 }}>
                   <div className="flex justify-center p-3">
-                    <button className="bg-ptso-blue-dark w-1/3 cursor-pointer rounded-2xl p-3 text-white">
+                    <button className="bg-ptso-blue-dark hover:bg-ptso-blue-dark/90 w-1/3 cursor-pointer rounded-2xl p-3 text-white">
                       Submit
                     </button>
                   </div>


Reviews:
user: login: Kevinloritsch
state: DISMISSED
author_association: CONTRIBUTOR
submitted_at: 2025-05-09T00:42:47Z
user: login: wesleylwu
state: APPROVED
author_association: CONTRIBUTOR
submitted_at: 2025-05-25T09:13:09Z

Review comments:
diff_hunk: @@ -3,74 +3,153 @@ import Image from "next/image";
 import Link from "next/link";
 import { MenuIcon } from "lucide-react";
 import { useState } from "react";
+import { motion } from "motion/react";
 import { navigations } from "@/data/NavbarLinks";
 import ptsoLogo from "@/public/ptsoLogoSmall.webp";
 import Divider from "@/components/Divider";
 
+const navItemAnimation = {
+  initial: { opacity: 0, y: -20 },
+  animate: { opacity: 1, y: 0 },
+  transition: { duration: 0.3 }
+};
+
 const Navbar = () => {
   const [isOpen, setIsOpen] = useState(false);
 
-  const handleClick = () => {
-    setIsOpen(!isOpen);
-  };
-
-  const closeMenu = () => {
-    setIsOpen(false);
-  };
+  const handleClick = () => setIsOpen(!isOpen);
+  const closeMenu = () => setIsOpen(false);
 
   return (
-    <div className="text-ptso-purple-accent bg-ptso-blue-primary">
+    <motion.div 
+      initial={{ opacity: 0, y: -50 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.5 }}
+      className="text-ptso-purple-accent bg-ptso-blue-primary"
+    >
       <div className="hidden items-center p-4 md:flex">
-        <Link href="/" className="mr-8 flex items-center">
-          <Image src={ptsoLogo} alt="PTSO Logo" height={70} width={49} />
-          <div className="px-4 text-3xl">PTSO</div>
-        </Link>
+        <motion.div
+          initial={{ scale: 0 }}
+          whileInView={{ scale: 1 }}
+          viewport={{ once: true }}
+        >
+          <Link href="/" className="mr-8 flex items-center">
+            <Image src={ptsoLogo} alt="PTSO Logo" height={70} width={49} />
+            <div className="px-4 text-3xl">PTSO</div>
+          </Link>
+        </motion.div>
+
         <div className="font-beVietnamPro flex w-1/2 gap-11 text-xl">
           {navigations.map(({ link, name }, index) => (
-            <Link href={link} key={index}>
-              {name}
-            </Link>
+            <motion.div
+              key={index}
+              initial="initial"
+              animate="animate"
+              transition={{ ...navItemAnimation.transition, delay: index * 0.1 }}
+              variants={navItemAnimation}
+            >
+              <Link href={link} className="hover:text-ptso-pink-accent">
+                {name}
+              </Link>
+            </motion.div>
           ))}
         </div>
-        <div className="w-1/3 text-right">JOIN US</div>
+
+        <motion.div 
+          className="w-1/3 text-right"
+          whileHover={{ scale: 1.05 }}
+          whileTap={{ scale: 0.95 }}
+          transition={{ duration: 0.2 }}
+        >
+          <Link
+            href="https://www.instagram.com/ucr_ptso/"
+            target="_blank"
+            className="bg-ptso-pink-secondary rounded-full px-6 py-2 text-white"
+          >
+            JOIN US
+          </Link>
+        </motion.div>
       </div>
+
       <div className="md:hidden">
         <div className="flex items-center justify-between px-4 pt-4">
-          <Link href="\" onClick={closeMenu}>
-            {" "}
-            <Image
-              src={ptsoLogo}
-              alt="PTSO Logo"
-              width={49}
-              height={70}
-              className="hover:cursor-pointer"
-            />{" "}
-          </Link>
-          <div onClick={handleClick} className="hover:cursor-pointer">
-            {" "}
-            <MenuIcon size={32} />{" "}
-          </div>
+          <motion.div
+            initial={{ x: -50 }}
+            animate={{ x: 0 }}
+            transition={{ duration: 0.4 }}
+          >
+            <Link href="\" onClick={closeMenu}>
+              <Image
+                src={ptsoLogo}
+                alt="PTSO Logo"
+                width={49}
+                height={70}
+                className="hover:cursor-pointer"
+              />
+            </Link>
+          </motion.div>
+
+          <motion.div 
+            onClick={handleClick} 
+            className="hover:cursor-pointer"
+            whileHover={{ rotate: 90 }}
+            transition={{ duration: 0.3 }}
+          >
+            <MenuIcon size={32} />
+          </motion.div>
         </div>
-        <div
-          className={`items-center gap-3 ${!isOpen ? "hidden" : "flex flex-col"}`}
+
+        <motion.div
+          initial={{ opacity: 0, height: 0 }}
+          animate={{ 
+            opacity: isOpen ? 1 : 0,
+            height: isOpen ? "auto" : 0 
+          }}
+          transition={{ duration: 0.3 }}
+          className={`items-center gap-3 overflow-hidden`}
         >
           {navigations.map(({ link, name }, index) => (
-            <Link
-              href={link}
+            <motion.div
               key={index}
+              initial={{ x: -50 }}
+              animate={{ x: 0 }}
+              transition={{ delay: index * 0.1 }}
+            >
+              <Link
+                href={link}
+                onClick={closeMenu}
+                className="border-b block p-2 hover:bg-ptso-blue-secondary"
+              >
+                {name}
+              </Link>
+            </motion.div>
+          ))}
+          
+          <motion.div
+            whileHover={{ scale: 1.05 }}
+            transition={{ duration: 0.2 }}
+          >
+            <Link
+              href="https://www.instagram.com/ucr_ptso/"
+              target="_blank"
+              className="bg-ptso-pink-secondary rounded-full px-6 py-2 text-white block m-2"
               onClick={closeMenu}
-              className="border-b"
             >
-              {name}
+              JOIN US
             </Link>
-          ))}
-          <div className="border-b">JOIN US</div>
-        </div>
+          </motion.div>
+        </motion.div>
       </div>
-      <div className="mx-4 pt-4 md:pt-0">
+
+      <motion.div
+        initial={{ width: 0 }}
+        animate={{ width: "100%" }}
+        transition={{ duration: 0.5 }}
+        className="mx-4 pt-4 md:pt-0"
path: src/components/Navbar.tsx
user: login: Kevinloritsch
body: just so you know, the mx-4 here causes the divider line to go wider than the screen, so if the line takes up 100% of the width, and then a mx-4 would go wider than the page
created_at: 2025-05-09T00:27:18Z
author_association: CONTRIBUTOR
diff_hunk: @@ -3,74 +3,153 @@ import Image from "next/image";
 import Link from "next/link";
 import { MenuIcon } from "lucide-react";
 import { useState } from "react";
+import { motion } from "motion/react";
 import { navigations } from "@/data/NavbarLinks";
 import ptsoLogo from "@/public/ptsoLogoSmall.webp";
 import Divider from "@/components/Divider";
 
+const navItemAnimation = {
+  initial: { opacity: 0, y: -20 },
+  animate: { opacity: 1, y: 0 },
+  transition: { duration: 0.3 }
+};
+
 const Navbar = () => {
   const [isOpen, setIsOpen] = useState(false);
 
-  const handleClick = () => {
-    setIsOpen(!isOpen);
-  };
-
-  const closeMenu = () => {
-    setIsOpen(false);
-  };
+  const handleClick = () => setIsOpen(!isOpen);
+  const closeMenu = () => setIsOpen(false);
 
   return (
-    <div className="text-ptso-purple-accent bg-ptso-blue-primary">
+    <motion.div 
+      initial={{ opacity: 0, y: -50 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.5 }}
+      className="text-ptso-purple-accent bg-ptso-blue-primary"
+    >
       <div className="hidden items-center p-4 md:flex">
-        <Link href="/" className="mr-8 flex items-center">
-          <Image src={ptsoLogo} alt="PTSO Logo" height={70} width={49} />
-          <div className="px-4 text-3xl">PTSO</div>
-        </Link>
+        <motion.div
+          initial={{ scale: 0 }}
+          whileInView={{ scale: 1 }}
+          viewport={{ once: true }}
+        >
+          <Link href="/" className="mr-8 flex items-center">
+            <Image src={ptsoLogo} alt="PTSO Logo" height={70} width={49} />
+            <div className="px-4 text-3xl">PTSO</div>
+          </Link>
+        </motion.div>
+
         <div className="font-beVietnamPro flex w-1/2 gap-11 text-xl">
           {navigations.map(({ link, name }, index) => (
-            <Link href={link} key={index}>
-              {name}
-            </Link>
+            <motion.div
+              key={index}
+              initial="initial"
+              animate="animate"
+              transition={{ ...navItemAnimation.transition, delay: index * 0.1 }}
+              variants={navItemAnimation}
+            >
+              <Link href={link} className="hover:text-ptso-pink-accent">
+                {name}
+              </Link>
+            </motion.div>
           ))}
         </div>
-        <div className="w-1/3 text-right">JOIN US</div>
+
+        <motion.div 
+          className="w-1/3 text-right"
path: src/components/Navbar.tsx
user: login: Kevinloritsch
body: add a origin-right here so that when you hover over the icon it doesnt shift left
created_at: 2025-05-09T00:35:09Z
author_association: CONTRIBUTOR

PR comments:
user: login: Kevinloritsch
created_at: 2025-05-09T00:39:48Z
body: ![image](https://github.com/user-attachments/assets/659d430e-e980-4af6-9f20-57acfb3b8cb5)
Please keep this visually the same as it was before and don't change the styling with how the mobile pages are displayed

join us should change to be the button, but should still be centered
author_association: CONTRIBUTOR
user: login: Kevinloritsch
created_at: 2025-05-09T00:42:35Z
body: The animations are coded well, but are actually a bit too much. In general, navbar animations should be VERY VERY subtle because it draws a lot of attention otherwise. the whole navbar "sliding down" makes a big empty white space, and doesn't look great. i also wouldnt animate the logo in the top left or that line (and the line is actually causing some issues as well). i think the about/board/gallery sliding down is okay, but could you remove the others?
author_association: CONTRIBUTOR
user: login: wesleylwu
created_at: 2025-05-13T01:51:38Z
body: fix merge conflicts but other than that it lgtm!
author_association: CONTRIBUTOR