refactor: clean up dependencies and enhance component functionality

- Removed unused dependencies related to @dnd-kit from pnpm-lock.yaml.
- Updated Vite configuration to set the base path.
- Added input styles to the main CSS file.
- Enhanced BackgroundImage component to include an overflowHidden prop for better layout control.
- Deleted the DraggableItem component as it was no longer needed.
- Updated routing to include new Publicity and Content pages, and modified navigation in Menu and NotFound components.

src/components/BackgroundImage.tsx

@@ -19,6 +19,7 @@ interface BackgroundImageProps {
   overlay?: boolean;
   overlayColor?: string;
   overlayOpacity?: number;
+  overflowHidden?: boolean;
 }
 
 export default function BackgroundImage({
@@ -39,6 +40,7 @@ export default function BackgroundImage({
   overlay = false,
   overlayColor = "rgba(0, 0, 0, 0.5)",
   overlayOpacity = 0.5,
+  overflowHidden = true,
 }: BackgroundImageProps) {
   const [imageSrc, setImageSrc] = useState(src);
   const [isLoading, setIsLoading] = useState(true);
@@ -133,7 +135,11 @@ export default function BackgroundImage({
   return (
     <div
       ref={containerRef}
-      className={clsx("relative overflow-hidden", className)}
+      className={clsx(
+        "relative",
+        overflowHidden && "overflow-hidden",
+        className
+      )}
       style={backgroundStyle}
       onClick={onClick}
     >

src/components/DraggableItem.tsx

@@ -1,45 +0,0 @@
-import { ReactNode } from "react";
-import { useSortable } from "@dnd-kit/sortable";
-import { CSS } from "@dnd-kit/utilities";
-import { GripVertical } from "lucide-react";
-
-interface DraggableItemProps {
-  id: string;
-  children: ReactNode;
-}
-
-export default function DraggableItem({ id, children }: DraggableItemProps) {
-  const {
-    attributes,
-    listeners,
-    setNodeRef,
-    transform,
-    transition,
-    isDragging,
-  } = useSortable({ id });
-
-  const style = {
-    transform: CSS.Transform.toString(transform),
-    transition,
-    opacity: isDragging ? 0.5 : 1,
-  };
-
-  return (
-    <div
-      ref={setNodeRef}
-      style={style}
-      className={`bg-white border border-gray-200 rounded-lg p-4 mb-3 flex items-center gap-3 shadow-sm hover:shadow-md transition-shadow ${
-        isDragging ? "cursor-grabbing" : "cursor-grab"
-      }`}
-    >
-      <div
-        {...attributes}
-        {...listeners}
-        className="text-gray-400 hover:text-gray-600 transition-colors"
-      >
-        <GripVertical size={20} />
-      </div>
-      <div className="flex-1">{children}</div>
-    </div>
-  );
-}

src/components/index.ts

@@ -1,3 +1,2 @@
 export { default as Image } from "./Image";
 export { default as BackgroundImage } from "./BackgroundImage";
-export { default as DraggableItem } from "./DraggableItem";