Merge pull request #20 from Vizzuality/dev

main <- dev
Vizzuality · Sep 12, 2024 · a29c783 · a29c783
2 parents a28484d + 9ebe081
commit a29c783
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 6 deletions.
diff --git a/public/images/m4n-goals.avif b/public/images/m4n-goals.avif
diff --git a/public/images/m4n-goals.webp b/public/images/m4n-goals.webp
diff --git a/src/containers/header/index.tsx b/src/containers/header/index.tsx
@@ -1,4 +1,9 @@
-import { PropsWithChildren } from 'react';
+'use client';
+
+import { PropsWithChildren, useRef, useState } from 'react';
+
+import { motion, useMotionValueEvent, useScroll } from 'framer-motion';
+import { useInView } from 'framer-motion';
 
 import { cn } from '@/lib/utils';
 
@@ -18,10 +23,42 @@ export default function Header({
 }: PropsWithChildren<{
   className?: HTMLDivElement['className'];
 }>) {
-  return (
+  const menuRef = useRef<HTMLDivElement>(null);
+  const inView = useInView(menuRef);
+  const [latestScrollYPosition, setLatestScrollYPosition] = useState(0);
+  const [isScrollingUp, setIsScrollingUp] = useState(false);
+
+  const Content = (
     <header className={cn('flex items-center justify-between', className)}>
       <AppLogo />
       {children}
     </header>
   );
+  const { scrollY } = useScroll();
+
+  useMotionValueEvent(scrollY, 'change', (latest) => {
+    setIsScrollingUp(latest < latestScrollYPosition);
+    setLatestScrollYPosition(latest);
+  });
+
+  return (
+    <>
+      <div ref={menuRef}>{Content}</div>
+      <motion.div
+        className="fixed left-0 right-0 top-0 z-40 w-full border-b border-b-white/20 bg-grey-800 py-4"
+        variants={{
+          initial: { opacity: 0, y: -100 },
+          show: { opacity: 1, y: 0 },
+        }}
+        initial="initial"
+        animate={!inView && isScrollingUp ? 'show' : 'initial'}
+        transition={{
+          ease: 'linear',
+          duration: 0.25,
+        }}
+      >
+        <div className="container">{Content}</div>
+      </motion.div>
+    </>
+  );
 }
diff --git a/src/containers/home/goals/index.tsx b/src/containers/home/goals/index.tsx
@@ -11,6 +11,8 @@ import {
 } from '@/components/ui/dialog';
 import Wrapper from '@/components/ui/wrapper';
 
+import M4NGoals from '../../../../public/images/m4n-goals.avif';
+
 export default function Goals() {
   return (
     <div className="bg-grey-800">
@@ -64,8 +66,8 @@ export default function Goals() {
             />
           </div>
         </div>
-        <div className="mt-8">
-          <Image src="/images/m4n-goals.webp" alt="m4n-goals" width={1974} height={1347} />
+        <div className="mt-8 flex justify-center">
+          <Image src={M4NGoals} alt="m4n-goals" width={987} height={625} />
         </div>
       </Wrapper>
     </div>

diff --git a/src/containers/home/intro/index.tsx b/src/containers/home/intro/index.tsx
@@ -40,8 +40,11 @@ export default function Intro() {
               nature
             </h1>
             <p className="text-lg">
-              Reversing the trend in environmental degradation through collaboration{' '}
-              <span className="font-bold">of citizen science initiatives with authorities</span>.
+              Reversing the trend in environmental degradation through{' '}
+              <span className="font-bold">collaboration</span> of{' '}
+              <span className="text-nowrap font-bold">
+                citizen science initiatives with authorities.
+              </span>
             </p>
           </div>
           <SocialMenu className="col-span-4 justify-center md:hidden" />