replace useEffects. Fix animation

Author: DavidK4leido5

apps/codebility/app/(marketing)/_components/MarketingCalendly.tsx

@@ -1,27 +1,62 @@
 "use client";
 
-import React from "react";
 import { Clock, Lightbulb, Rocket } from "lucide-react";
+import { motion } from "framer-motion";
 import { InlineWidget } from "react-calendly";
 
 import Container from "./MarketingContainer";
 import Section from "./MarketingSection";
 
+const VIEWPORT = { once: true, amount: 0.2 } as const;
+
+const containerVariants = {
+  hidden: { opacity: 0 },
+  visible: {
+    opacity: 1,
+    transition: {
+      staggerChildren: 0.12,
+      delayChildren: 0.05,
+    },
+  },
+};
+
+const itemVariants = {
+  hidden: { opacity: 0, y: 24 },
+  visible: {
+    opacity: 1,
+    y: 0,
+    transition: {
+      duration: 0.55,
+      ease: [0.25, 0.46, 0.45, 0.94],
+    },
+  },
+};
+
 const Calendly = () => {
   return (
-    <Section id="book" className="relative w-full pt-10 2xl:pt-24 text-white overflow-hidden">
+    <Section
+      id="book"
+      className="relative w-full overflow-hidden pt-10 text-white 2xl:pt-24"
+    >
       <Container className="relative z-10 flex flex-col gap-6 text-white lg:flex-row lg:gap-10">
-        <div className="flex w-full flex-1 flex-col justify-start gap-2 text-center lg:text-left">
-          <h2 className="text-3xl font-bold md:text-5xl bg-gradient-to-r from-white via-purple-200 to-cyan-200 bg-clip-text text-transparent">
+        <motion.div
+          className="flex w-full flex-1 flex-col justify-start gap-2 text-center lg:text-left"
+          initial="hidden"
+          whileInView="visible"
+          viewport={VIEWPORT}
+          variants={containerVariants}
+        >
+          <motion.h2
+            variants={itemVariants}
+            className="bg-gradient-to-r from-white via-purple-200 to-cyan-200 bg-clip-text text-3xl font-bold text-transparent md:text-5xl"
+          >
             Let&apos;s Connect
-          </h2>
-          <p className="text-md lg:text-lg text-gray-300">
-            Schedule a meeting with us to discuss your needs and have solutions. 
-          </p>
-
-          {/* Enhanced CTA elements */}
-          <div className="flex flex-col gap-4 mt-6">
-            {/* Feature highlights */}
+          </motion.h2>
+          <motion.p variants={itemVariants} className="text-md text-gray-300 lg:text-lg">
+            Schedule a meeting with us to discuss your needs and have solutions.
+          </motion.p>
+
+          <motion.div variants={itemVariants} className="mt-6 flex flex-col gap-4">
             <div className="flex flex-col gap-3 text-sm lg:text-base">
               {[
                 { icon: Clock, text: "Free 30-minute consultation" },
@@ -34,25 +69,29 @@ const Calendly = () => {
                 </div>
               ))}
             </div>
-          </div>
-        </div>
+          </motion.div>
+        </motion.div>
 
-        <div className="calendly-widget-container w-full flex-1 justify-center lg:w-1/2 relative overflow-hidden">
-          {/* Widget wrapper with enhanced styling */}
-          <div className="relative rounded-xl overflow-hidden">
-            {/* Calendar widget */}
+        <motion.div
+          className="calendly-widget-container relative w-full flex-1 justify-center overflow-hidden lg:w-1/2"
+          initial={{ opacity: 0, y: 32 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={VIEWPORT}
+          transition={{ duration: 0.6, delay: 0.15 }}
+        >
+          <div className="relative overflow-hidden rounded-xl">
             <div className="relative z-10">
-              <InlineWidget 
-                styles={{ 
-                  borderRadius: '0.75rem',
-                  border: 'none',
-                  height: '600px',
-                }} 
-                url="https://calendly.com/codebility-dev/30min" 
+              <InlineWidget
+                styles={{
+                  borderRadius: "0.75rem",
+                  border: "none",
+                  height: "600px",
+                }}
+                url="https://calendly.com/codebility-dev/30min"
               />
             </div>
           </div>
-        </div>
+        </motion.div>
       </Container>
     </Section>
   );

apps/codebility/app/(marketing)/_components/MarketingSidenavMenu.tsx

@@ -1,9 +1,7 @@
 "use client";
 
-import { useEffect, useState } from "react";
 import Link from "next/link";
-import ScrollToHash from "@/app/(marketing)/_components/landing/LandingScrollToHash";
-
+import { useSyncExternalStore } from "react";
 import { Briefcase, Info, Phone, CodeXml, Search, Rocket } from "lucide-react";
 
 const links = [
@@ -13,27 +11,34 @@ const links = [
   { href: "/codevs", label: "Be a Codev", icon: CodeXml },
   { href: "/hire-a-codev", label: "Hire Codevs", icon: Search },
   { href: "/careers", label: "Careers", icon: Rocket },
-]
+];
 
-const SideNavMenu = () => {
-  const [isScrolling, setIsScrolling] = useState(false);
+const SCROLL_SHRINK_Y = 200;
 
-  // Handle scroll animation - shrink links when scrolling
-  const handleNav = () => {
-    if (window.scrollY >= 200) {
-      setIsScrolling(true);
-    } else {
-      setIsScrolling(false);
-    }
+function subscribeScrollShrink(onStoreChange: () => void) {
+  window.addEventListener("scroll", onStoreChange, { passive: true });
+  return () => {
+    window.removeEventListener("scroll", onStoreChange);
   };
+}
+
+function getScrollShrinkSnapshot() {
+  return window.scrollY >= SCROLL_SHRINK_Y;
+}
 
-  useEffect(() => {
-    window.addEventListener("scroll", handleNav);
-  }, []);
+function getServerScrollShrinkSnapshot() {
+  return false;
+}
+
+const SideNavMenu = () => {
+  const isScrolling = useSyncExternalStore(
+    subscribeScrollShrink,
+    getScrollShrinkSnapshot,
+    getServerScrollShrinkSnapshot,
+  );
 
   return (
     <div className="fixed left-0 top-20 z-50 hidden w-60 flex-col gap-4 ps-5 pt-24 text-sm lg:flex xl:text-base">
-      {/* <ScrollToHash /> */}
       {links.map((link, index) => (
         <Link
           key={index}
@@ -44,9 +49,9 @@ const SideNavMenu = () => {
           <div
             className={`relative flex h-8 ${
               isScrolling ? "w-[52px] text-xs" : "w-36 text-base"
-            } border-light-900/5 bg-light-700/10 group items-center gap-2 rounded-md border-2 ps-4 text-white backdrop-blur-lg duration-300 hover:ml-4 hover:w-36  hover:bg-customViolet-100 hover:text-base hover:text-opacity-100 hover:opacity-100 xl:h-10`}
+            } border-light-900/5 bg-light-700/10 group items-center gap-2 rounded-md border-2 ps-4 text-white backdrop-blur-lg duration-300 hover:ml-4 hover:w-36 hover:bg-customViolet-100 hover:text-base hover:text-opacity-100 hover:opacity-100 xl:h-10`}
           >
-            <link.icon className="size-4 shrink-0"/>
+            <link.icon className="size-4 shrink-0" />
             <p
               className={`text-nowrap transition-opacity duration-300 ${
                 isScrolling ? "opacity-0" : "opacity-100"
@@ -61,4 +66,4 @@ const SideNavMenu = () => {
   );
 };
 
-export default SideNavMenu;
+export default SideNavMenu;

apps/codebility/app/(marketing)/_components/landing/AnimatedAdminsSection.tsx

@@ -13,6 +13,8 @@ interface AnimatedAdminsSectionProps {
   sectionId: string;
 }
 
+const VIEWPORT = { once: true, amount: 0.15 } as const;
+
 const containerVariants = {
   hidden: { opacity: 0 },
   visible: {
@@ -47,11 +49,12 @@ const AnimatedAdminsSection = ({
       className="w-full"
       variants={containerVariants}
       initial="hidden"
-      animate="visible"
+      whileInView="visible"
+      viewport={VIEWPORT}
       data-section={sectionId}
     >
       <motion.h1
-        className="text-center text-3xl font-bold bg-gradient-to-r from-white via-purple-200 to-cyan-200 bg-clip-text text-transparent"
+        className="bg-gradient-to-r from-white via-purple-200 to-cyan-200 bg-clip-text text-center text-3xl font-bold text-transparent"
         variants={itemVariants}
       >
         {title}
@@ -60,7 +63,7 @@ const AnimatedAdminsSection = ({
       <div className="flex flex-col items-center justify-center">
         <div className="max-w-[1100px] px-4">
           <motion.p
-            className="pt-8 text-center md:px-44 text-gray-300"
+            className="pt-8 text-center text-gray-300 md:px-44"
             variants={itemVariants}
           >
             {description}
@@ -74,7 +77,7 @@ const AnimatedAdminsSection = ({
             {members.map((member: Codev) => (
               <motion.div
                 key={member.id}
-                className="h-full relative"
+                className="relative h-full"
                 variants={itemVariants}
               >
                 <AdminCard admin={member} />
@@ -87,4 +90,4 @@ const AnimatedAdminsSection = ({
   );
 };
 
-export default AnimatedAdminsSection;
+export default AnimatedAdminsSection;

apps/codebility/app/(marketing)/_components/landing/AnimatedMetrics.tsx

@@ -12,7 +12,7 @@ type AnimatedMetricsProps = {
   variant?: "hero" | "stat";
 };
 
-const VIEWPORT = { once: true, amount: 0.5 } as const;
+const VIEWPORT = { once: true, amount: 0.2 } as const;
 
 const VARIANT_CONFIG = {
   hero: {