fix(front): change delays & package

package.json

@@ -21,10 +21,10 @@
     "@radix-ui/react-avatar": "^1.1.0",
     "@radix-ui/react-checkbox": "^1.1.1",
     "@radix-ui/react-dialog": "^1.1.1",
+    "@radix-ui/react-dropdown-menu": "2.1.6",
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-popover": "^1.1.1",
     "@radix-ui/react-scroll-area": "^1.2.0",
-    "@radix-ui/react-dropdown-menu": "2.1.6",
     "@radix-ui/react-select": "^2.1.1",
     "@radix-ui/react-slider": "^1.2.0",
     "@radix-ui/react-tooltip": "^1.1.4",
@@ -43,11 +43,11 @@
     "colorjs.io": "^0.5.2",
     "colorthief": "^2.4.0",
     "commander": "^12.1.0",
-    "framer-motion": "^11.11.17",
     "isbot": "^4.1.0",
     "lucide-react": "^0.439.0",
     "match-sorter": "^6.3.4",
     "moment": "^2.30.1",
+    "motion": "^12.4.12",
     "numerable": "^0.3.15",
     "qs": "^6.13.0",
     "react": "^18.3.1",

src/components/primitives/Accordion.tsx

@@ -1,6 +1,6 @@
 import * as RadixAccordion from "@radix-ui/react-accordion";
 
-import { motion } from "framer-motion";
+import { motion } from "motion/react";
 import { tv } from "tailwind-variants";
 import { mergeClass } from "../../utils/css";
 import type { Component, Styled } from "../../utils/types";
@@ -48,10 +48,10 @@ export default function Accordion({ look, size, items, className }: AccordionPro
               className="border-b-2 py-lg*2 border-accent-11"
               initial={{ y: "100%" }}
               whileInView={{ y: 0 }}
-              transition={{ delay: 0.1 * index }}
+              transition={{ delay: 0.075 * index }}
               viewport={{ once: true }}>
               <RadixAccordion.Item value={`item-${index}`} className="faq-item">
-                <RadixAccordion.Trigger className="faq-item__trigger text-left overflow-hidden [&>*]:text-accent-11 [&>svg]:data-[state=closed]:rotate-180 [&>svg]:data-[state=open]:rotate-0 w-full flex items-center justify-between">
+                <RadixAccordion.Trigger className="text-left overflow-hidden [&>*]:text-accent-11 [&>h3]:data-[state=open]:text-accent-12  [&>svg]:data-[state=closed]:rotate-180 [&>svg]:data-[state=open]:rotate-0 w-full flex items-center justify-between">
                   <Title h={3} className="ease">
                     {item.trigger}
                   </Title>

src/components/primitives/Tabs.tsx

@@ -41,6 +41,7 @@ import type { Component, Styled, Themable } from "../../utils/types";
 import Group from "../extenders/Group";
 import Container from "../layout/Container";
 import EventBlocker from "./EventBlocker";
+import React from "react";
 
 export const tabsStyles = tv(
   {
@@ -150,7 +151,7 @@ export default function Tabs({ look, size, to, theme, className, tabs = [], ...p
             const relativeUrl = tab.link.split("?")[0];
 
             return (
-              <>
+              <React.Fragment key={`${tab.link}-${tab.label}`}>
                 {tab.link ? (
                   <EventBlocker key={tab.key}>
                     <Link
@@ -175,7 +176,7 @@ export default function Tabs({ look, size, to, theme, className, tabs = [], ...p
                     {tab.label}
                   </button>
                 )}
-              </>
+              </React.Fragment>
             );
           })}
         </Group>

src/context/Theme.context.tsx

@@ -75,7 +75,7 @@ export default function ThemeProvider({ themes, sizing, modes, children }: Theme
         data-theme={value?.theme}
         data-mode={value?.mode}
         style={value?.vars}
-        className="bg-background overflow-auto">
+        className="bg-background overflow-auto ease">
         <Notifications />
         {children}
       </div>