fix(story): restore single-card AnimatedFeatureGrid story

.github/workflows/deploy-v3.yml

@@ -9,17 +9,19 @@ jobs:
   deploy-v3:
     runs-on: ubuntu-latest
     environment: v3-deployment
+    env:
+      FORCE_JAVASCRIPT_ACTIONS_TO_NODE24: true
     steps:
       - name: Checkout
-        uses: actions/checkout@v4
+        uses: actions/checkout@v6
       - name: Setup Node
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@v6
         with:
           node-version: "20"
       - name: Install yarn
         run: npm install -g yarn
       - name: Restore cache
-        uses: actions/cache@v4
+        uses: actions/cache@v5
         with:
           path: |
             .next/cache

.github/workflows/deploy.yml

@@ -11,19 +11,21 @@ jobs:
     if: github.event.pull_request.head.repo.full_name != github.repository
     runs-on: ubuntu-latest
     environment: preview-deployment
+    env:
+      FORCE_JAVASCRIPT_ACTIONS_TO_NODE24: true
     steps:
       - name: Checkout
-        uses: actions/checkout@v4
+        uses: actions/checkout@v6
         with:
           ref: ${{ github.event.pull_request.head.sha }}
       - name: Setup Node
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@v6
         with:
           node-version: "22"
       - name: Install yarn
         run: npm install -g yarn
       - name: Restore cache
-        uses: actions/cache@v4
+        uses: actions/cache@v5
         with:
           path: |
             .next/cache

animata/card/card-spread.tsx

@@ -29,60 +29,56 @@ function RemodelNotes() {
 }
 
 const cards = [
-  {
-    component: Notes,
-    rotationClass: "",
-    revealClass: "-rotate-[2deg]",
-  },
-  {
-    component: ShoppingList,
-    rotationClass: "group-hover/spread:rotate-[15deg]",
-    revealClass: "rotate-[3deg] translate-y-2",
-  },
-
-  {
-    component: RemodelNotes,
-    rotationClass: "group-hover/spread:rotate-[30deg]",
-    revealClass: "-rotate-[2deg] translate-x-1",
-  },
-
-  {
-    component: Reminders,
-    rotationClass: "group-hover/spread:rotate-[45deg]",
-    revealClass: "rotate-[2deg]",
-  },
+  { component: Notes },
+  { component: ShoppingList },
+  { component: RemodelNotes },
 ];
 
 export default function CardSpread() {
   const [isExpanded, setExpanded] = useState(false);
 
   return (
     <div
+      role="group"
+      aria-expanded={isExpanded}
       className={cn(
-        "group/spread relative flex min-h-80 min-w-52 items-center transition duration-500 ease-in-out",
+        "group/spread relative flex flex-row items-end justify-center gap-8 py-6 min-h-80",
         {
-          "origin-bottom transition duration-500 ease-in-out hover:-rotate-[15deg]": !isExpanded,
-          "gap-3": isExpanded,
+          "origin-bottom hover:-rotate-[5deg]": !isExpanded,
         },
       )}
     >
       {cards.map((item, index) => {
+        const mid = (cards.length - 1) / 2;
+        const offset = (index - mid) * 120; // px to spread when expanded
+        const rotate = (index - mid) * 5; // small rotation per card
+        const delay = Math.abs(index - mid) * 140; // stronger stagger delay in ms
         return (
           <div
             key={index}
             onClick={(e) => {
               setExpanded(!isExpanded);
               e.preventDefault();
             }}
-            className={cn(
-              "transition duration-500 ease-in-out",
-              {
-                absolute: !isExpanded,
-                "origin-bottom": !isExpanded,
-              },
-              !isExpanded && item.rotationClass,
-              isExpanded && item.revealClass,
-            )}
+            tabIndex={0}
+            onKeyDown={(e) => {
+              if (e.key === "Enter" || e.key === " ") {
+                setExpanded(!isExpanded);
+                e.preventDefault();
+              }
+            }}
+            className={cn("relative min-w-52 cursor-pointer", {
+              "origin-bottom": !isExpanded,
+            })}
+            style={{
+              transform: isExpanded
+                ? `translateX(${offset}px) translateY(-22px) rotate(${rotate}deg)`
+                : `rotate(${rotate / 2}deg)`,
+              boxShadow: isExpanded
+                ? "0 22px 56px rgba(2,6,23,0.16)"
+                : "0 8px 22px rgba(2,6,23,0.07)",
+              transition: `transform 520ms cubic-bezier(0.22,1,0.36,1) ${delay}ms, box-shadow 520ms ease ${delay}ms`,
+            }}
           >
             <item.component />
           </div>

animata/card/state-action-card.stories.tsx

@@ -0,0 +1,33 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import StateActionCard from "@/animata/card/state-action-card";
+
+const meta = {
+  title: "Card/State Action Card",
+  component: StateActionCard,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof StateActionCard>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Taskmanager: Story = {
+  args: {
+    useCase: "task",
+  },
+};
+
+export const Socialcard: Story = {
+  args: {
+    useCase: "social",
+  },
+};
+
+export const Ordercard: Story = {
+  args: {
+    useCase: "order",
+  },
+};