Merge pull request #219 from acm-ucr/dev

main

src/app/about/page.js

@@ -18,18 +18,19 @@ const Page = () => {
  <div ref={ref} className="w-full">
  {ABOUT.map((section, index) => {
  return (
- <div key={index} className="mb-8 text-center">
+ <div
+ key={index}
+ className={`mb-8 text-center ${
+ inView
+ ? `animate-fade-up animate-duration-300 animate-ease-linear animate-delay-500`
+ : ""
+ }`}
+ >
  <Subtitle
  color="text-biscuits-green-200"
  text={section.subtitle}
  />
- <div
- className={`mt-4 md:mt-6 text-lg md:text-xl font-inika md:w-2/3 w-10/12 mx-auto ${
- inView
- ? `animate-fade-up animate-once animate-duration-[1500ms] animate-ease-linear animate-delay-500`
- : ""
- }`}
- >
+ <div className="mt-4 md:mt-6 text-lg md:text-xl font-inika md:w-2/3 w-10/12 mx-auto">
  {section.paragraph}
  </div>
  </div>

src/components/Button.jsx

@@ -4,18 +4,15 @@ import useView from "./useView";
 const Button = ({ text, link }) => {
  const [inView, ref] = useView();
  return (
- <div
- className={`${
- inView
- ? `animate-fade-up animate-once animate-duration-[1500ms] animate-ease-linear`
- : ""
- }`}
- >
+ <div ref={ref}>
  <Link
  href={link}
  target="_blank"
- className="w-fit bg-biscuits-pinkish text-biscuits-textColor font-inika py-1.5 px-8 md:py-2 md:px-12 rounded-full font-bold text-xl md:text-3xl hover:opacity-75 duration-100"
- ref={ref}
+ className={`${
+ inView
+ ? `animate-fade-up animate-once animate-duration-300 animate-ease-linear`
+ : ""
+ } w-fit bg-biscuits-pinkish text-biscuits-textColor font-inika py-1.5 px-8 md:py-2 md:px-12 rounded-full font-bold text-xl md:text-3xl hover:opacity-75 duration-100`}
  >
  {text}
  </Link>

src/components/Subtitle.jsx

@@ -1,17 +1,8 @@
 "use client";
-import React from "react";
-import useView from "./useView";
-
 const Subtitle = ({ color, text }) => {
- const [inView, ref] = useView();
  return (
  <div
- ref={ref}
- className={`font-bold font-shrikhand text-center text-4xl lg:text-6xl ${color} ${
- inView
- ? `animate-fade-up animate-once animate-duration-[1500ms] animate-ease-linear`
- : ""
- }`}
+ className={`font-bold font-shrikhand text-center text-4xl lg:text-6xl ${color}`}
  >
  {text}
  </div>

src/components/gallery/ExtraPhotos.jsx

@@ -8,9 +8,8 @@ import useView from "@/components/useView";
 const ExtraPhotos = () => {
  const [inView, ref] = useView();
  return (
- <div className="flex flex-col gap-y-8">
+ <div ref={ref} className="flex flex-col gap-y-8">
  <div
- ref={ref}
  className={`${
  inView && "animate-flip-up animate-once"
  } flex justify-center`}

src/components/gallery/GalleryImage.jsx

@@ -11,7 +11,7 @@ const GalleryImage = ({ src, alt }) => {
  ref={ref}
  className={`${
  inView && "animate-fade-down animate-once"
- } transition-transform duration-100 ease-in-out`}
+ } transition-transform duration-300 ease-in-out`}
  >
  <Image src={src} alt={alt} />
  </div>