feat(drag-drop-container): replace border highlight with animated glass overlay on drag

src/components/drag-drop-container.tsx

@@ -1,3 +1,7 @@
+"use client";
+
+import { AnimatePresence, motion } from "framer-motion";
+import { FileUp } from "lucide-react";
 import type { ReactNode } from "react";
 import { toast } from "sonner";
 import { IMAGE_EXTENSIONS } from "@/lib/constants";
@@ -46,7 +50,7 @@ export const DragDropContainer = ({
 			} else if (fileType === "image" && onImageDrop) {
 				onImageDrop(file);
 			} else {
-				toast.warning("Please drop an .ics file or an image");
+				toast.warning("Drop an .ics file or an event screenshot");
 			}
 		}
 	};
@@ -57,15 +61,33 @@ export const DragDropContainer = ({
 			onDragOver={handleDragOver}
 			onDragLeave={handleDragLeave}
 			onDrop={handleDrop}
-			className={`p-4 min-h-[80vh] flex flex-col rounded border-2 border-dashed transition ${
-				isDragOver ? "border-blue-500 bg-blue-50" : "border-gray-700"
-			}`}
+			className="relative flex flex-col"
 		>
+			<AnimatePresence>
+				{isDragOver && (
+					<motion.div
+						initial={{ opacity: 0 }}
+						animate={{ opacity: 1 }}
+						exit={{ opacity: 0 }}
+						transition={{ duration: 0.15 }}
+						className="absolute inset-0 z-40 rounded-xl border-2 border-dashed border-primary/50 bg-primary/5 backdrop-blur-sm flex items-center justify-center"
+					>
+						<div className="flex flex-col items-center gap-2 text-primary">
+							<FileUp className="h-8 w-8" />
+							<span className="text-sm font-medium">
+								Drop .ics or image here
+							</span>
+						</div>
+					</motion.div>
+				)}
+			</AnimatePresence>
+
 			{children}
-			<div className="mt-auto w-full pb-4 text-gray-400">
-				<div className="max-w-fit m-auto">
-					Drag & Drop *.ics or an event screenshot here
-				</div>
+
+			<div className="pt-6 pb-2">
+				<p className="text-center text-xs text-muted-foreground/40">
+					Drag & drop .ics files or event screenshots
+				</p>
 			</div>
 		</section>
 	);