feat: improved ui of document dropzone for max quota state

Signed-off-by: Adithya Krishna <adithya@documenso.com>

packages/ui/lib/document-dropzone-constants.ts

@@ -0,0 +1,118 @@
+import type { Variants } from 'framer-motion';
+
+export const DocumentDropzoneContainerVariants: Variants = {
+  initial: {
+    scale: 1,
+  },
+  animate: {
+    scale: 1,
+  },
+  hover: {
+    transition: {
+      staggerChildren: 0.05,
+    },
+  },
+};
+
+export const DocumentDropzoneCardLeftVariants: Variants = {
+  initial: {
+    x: 40,
+    y: -10,
+    rotate: -14,
+  },
+  animate: {
+    x: 40,
+    y: -10,
+    rotate: -14,
+  },
+  hover: {
+    x: -25,
+    y: -25,
+    rotate: -22,
+  },
+};
+
+export const DocumentDropzoneCardRightVariants: Variants = {
+  initial: {
+    x: -40,
+    y: -10,
+    rotate: 14,
+  },
+  animate: {
+    x: -40,
+    y: -10,
+    rotate: 14,
+  },
+  hover: {
+    x: 25,
+    y: -25,
+    rotate: 22,
+  },
+};
+
+export const DocumentDropzoneCardCenterVariants: Variants = {
+  initial: {
+    x: 0,
+    y: 0,
+  },
+  animate: {
+    x: 0,
+    y: 0,
+  },
+  hover: {
+    x: 0,
+    y: -25,
+  },
+};
+
+export const DocumentDropzoneDisabledCardLeftVariants: Variants = {
+  initial: {
+    x: 40,
+    y: 30,
+    rotate: -14,
+  },
+  animate: {
+    x: 40,
+    y: 0,
+    rotate: -14,
+  },
+  hover: {
+    x: 30,
+    y: 0,
+    transition: { type: 'spring', duration: 0.25, bounce: 0.5 },
+  },
+};
+
+export const DocumentDropzoneDisabledCardRightVariants: Variants = {
+  initial: {
+    x: -40,
+    y: 30,
+    rotate: 14,
+  },
+  animate: {
+    x: -50,
+    y: 5,
+    rotate: 14,
+  },
+  hover: {
+    x: -40,
+    y: 5,
+    transition: { type: 'spring', duration: 0.25, bounce: 0.5 },
+  },
+};
+
+export const DocumentDropzoneDisabledCardCenterVariants: Variants = {
+  initial: {
+    x: 20,
+    y: 0,
+  },
+  animate: {
+    x: -10,
+    y: 0,
+  },
+  hover: {
+    x: -20,
+    y: 0,
+    rotate: -5,
+  },
+};