feat: add CSS Cubic-Bezier easing curve generator utility

src/App.jsx

@@ -44,6 +44,7 @@ import CssAnimationGenerator from "./pages/DevUtilities/devutilities/CssAnimatio
 import CssGlassmorphismPlayground from "./pages/DevUtilities/devutilities/CssGlassmorphismPlayground";
 import CssGradientGenerator from "./pages/DevUtilities/devutilities/CssGradientGenerator";
 import CssUnitConverter from "./pages/DevUtilities/devutilities/CssUnitConverter";
+import CubicBezierGenerator from "./pages/DevUtilities/devutilities/CubicBezierGenerator";
 import DevUtilities from "./pages/DevUtilities/DevUtilities";
 import DiffChecker from "./pages/DevUtilities/devutilities/DiffChecker";
 import FlexboxGridGenerator from "./pages/DevUtilities/devutilities/FlexboxGridGenerator";
@@ -397,6 +398,10 @@ function AppInner({ toggleHUD, hudVisible }) {
                 path="/devutilities/css-animation"
                 element={<CssAnimationGenerator />}
               />
+              <Route
+                path="/devutilities/cubic-bezier"
+                element={<CubicBezierGenerator />}
+              />
               <Route path="/devutilities/regex" element={<RegexTester />} />
               <Route
                 path="/devutilities/css-unit-converter"

src/config/sidebarSections.js

@@ -303,6 +303,12 @@ const SIDEBAR_SECTIONS = [
           "Create custom keyframe animations, customize duration and timing functions, and copy generated CSS.",
         path: "/devutilities/css-animation",
       },
+      {
+        label: "CSS Cubic-Bezier Generator",
+        description:
+          "Design custom transition easing curves visually and preview animations in real time.",
+        path: "/devutilities/cubic-bezier",
+      },
       {
         label: "CSS Gradient Generator",
         description: "Create beautiful CSS gradients with live preview",

src/pages/DevUtilities/DevUtilities.jsx

@@ -1046,6 +1046,30 @@ const DevUtilities = () => {
         </svg>
       ),
     },
+    {
+      title: "CSS Cubic-Bezier Generator",
+      description:
+        "Design custom transition easing curves visually and preview animations in real time.",
+      keywords: "cubic bezier easing curve timing function transition animation",
+      path: "/devutilities/cubic-bezier",
+      icon: (
+        <svg
+          className="w-6 h-6"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={2}
+            d="M4 20C4 20 5 4 20 4"
+          />
+          <circle cx="4" cy="20" r="1.5" fill="currentColor" stroke="none" />
+          <circle cx="20" cy="4" r="1.5" fill="currentColor" stroke="none" />
+        </svg>
+      ),
+    },
     {
       title: "CSS Gradient Generator",
       description: "Create beautiful CSS gradients with live preview",