Sync-up PR

package.json

@@ -14,6 +14,7 @@
     "@emotion/react": "^11.14.0",
     "@reduxjs/toolkit": "^2.8.2",
     "axios": "^1.9.0",
+    "framer-motion": "^12.23.0",
     "next-themes": "^0.4.6",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",

src/GalleryLayout.jsx

@@ -0,0 +1,24 @@
+import React, { useEffect } from 'react'
+import { useDispatch } from 'react-redux'
+import { Outlet, useNavigate } from 'react-router';
+import Navbar from './components/Navbar';
+
+function GalleryLayout() {
+    const dispatch = useDispatch();
+    const navigate = useNavigate();
+
+    useEffect(() => {
+        console.log("Gallery layout mounted.");
+    }, [])
+
+    return (
+        <div>
+            <div className='defaultLayout'>
+                <Navbar />
+            </div>
+            <Outlet />
+        </div>
+    )
+}
+
+export default GalleryLayout

src/components/Catalogue/arrowOverlay.jsx

@@ -0,0 +1,41 @@
+import { Box, Icon } from "@chakra-ui/react";
+import { FaChevronLeft, FaChevronRight } from "react-icons/fa";
+
+const ArrowOverlay = ({ direction, isDisabled, onClick }) => {
+    const isLeft = direction === "left";
+
+    return (
+        <Box
+            position="absolute"
+            top={0}
+            bottom={0}
+            left={isLeft ? 0 : "auto"}
+            right={isLeft ? "auto" : 0}
+            width="100px"
+            display="flex"
+            alignItems="center"
+            justifyContent={isLeft ? "flex-start" : "flex-end"}
+            zIndex={1}
+            px={3}
+            bgGradient={isLeft ? "to-r" : "to-l"}
+            gradientFrom="rgb(255, 255, 255)"
+            gradientTo="rgba(255, 255, 255, 0)"
+            cursor={isDisabled ? "not-allowed" : "pointer"}
+            pointerEvents={isDisabled ? "none" : "auto"}
+            opacity={isDisabled ? 0.3 : 1}
+            transition="opacity 0.3s ease, background 0.3s ease"
+            onClick={onClick}
+        >
+            <Icon
+                as={isLeft ? FaChevronLeft : FaChevronRight}
+                color="black"
+                boxSize={8}
+                mx={1}
+                transition="transform 0.2s ease"
+                _hover={!isDisabled ? { transform: "scale(1.2)" } : {}}
+            />
+        </Box>
+    );
+};
+
+export default ArrowOverlay;

src/components/Catalogue/cardItem.jsx

@@ -0,0 +1,170 @@
+// CardItem.jsx
+import { Box, Card, Image, Text } from "@chakra-ui/react";
+import React, { useState, useRef, useEffect } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+
+const MotionBox = motion.create(Box);
+
+const images = [
+    "https://images.unsplash.com/photo-1555041469-a586c61ea9bc?auto=format&fit=crop&w=1770&q=80",
+    "https://images.unsplash.com/photo-1519389950473-47ba0277781c?auto=format&fit=crop&w=1770&q=80",
+    "https://images.unsplash.com/photo-1506744038136-46273834b3fb?auto=format&fit=crop&w=1770&q=80",
+    "https://images.unsplash.com/photo-1600585154340-be6161a56a0c?auto=format&fit=crop&w=1770&q=80",
+];
+
+const CardItem = ({ itemTitle, itemDescription, selectedTitle, index }) => {
+    const [isHovered, setIsHovered] = useState(false);
+    const [isSelected, setIsSelected] = useState(selectedTitle === itemTitle);
+    const cardRef = useRef(null);
+    const [hoverPos, setHoverPos] = useState({ top: 0, left: 0 });
+    const scrollContainerRef = useRef(null);
+    const hoverTimeoutRef = useRef(null);
+
+    useEffect(() => {
+        setIsSelected(selectedTitle === itemTitle);
+    }, [selectedTitle, itemTitle]);
+
+    const updateHoverPosition = () => {
+        const rect = cardRef.current?.getBoundingClientRect();
+        if (rect) {
+            const scaleFactor = 1.1;
+            const scaledWidth = 280 * scaleFactor;
+            const cardCenterX = rect.left + rect.width / 2;
+            let left = cardCenterX - scaledWidth / 2;
+            const top = rect.top - 20;
+
+            const viewportWidth = window.innerWidth;
+            const rightEdge = left + scaledWidth;
+            const leftBoundary = 10;
+            const rightBoundary = viewportWidth - scaledWidth - 10;
+
+            if (left < leftBoundary) left = leftBoundary;
+            else if (rightEdge > viewportWidth - leftBoundary)
+                left = rightBoundary;
+
+            setHoverPos({ top, left });
+        }
+    };
+
+    const handleMouseEnter = () => {
+        hoverTimeoutRef.current = setTimeout(() => {
+            updateHoverPosition();
+            setIsHovered(true);
+        }, 1000);
+    };
+
+    const handleMouseLeave = () => {
+        clearTimeout(hoverTimeoutRef.current);
+        setIsHovered(false);
+    };
+
+    useEffect(() => {
+        if (isHovered) {
+            let node = cardRef.current;
+            while (node) {
+                const style = window.getComputedStyle(node);
+                if (
+                    style.overflow === "auto" ||
+                    style.overflowX === "auto" ||
+                    style.overflow === "scroll" ||
+                    style.overflowX === "scroll"
+                ) {
+                    scrollContainerRef.current = node;
+                    break;
+                }
+                node = node.parentNode;
+            }
+
+            window.addEventListener("scroll", updateHoverPosition, true);
+            window.addEventListener("resize", updateHoverPosition);
+            if (scrollContainerRef.current) {
+                scrollContainerRef.current.addEventListener(
+                    "scroll",
+                    updateHoverPosition
+                );
+            }
+
+            return () => {
+                window.removeEventListener("scroll", updateHoverPosition, true);
+                window.removeEventListener("resize", updateHoverPosition);
+                if (scrollContainerRef.current) {
+                    scrollContainerRef.current.removeEventListener(
+                        "scroll",
+                        updateHoverPosition
+                    );
+                }
+            };
+        }
+    }, [isHovered]);
+
+    const imageSrc = images[index % images.length];
+
+    return (
+        <>
+            <Box
+                ref={cardRef}
+                onMouseEnter={handleMouseEnter}
+                onMouseLeave={handleMouseLeave}
+                transition="all 0.1s ease-in-out"
+                cursor="pointer"
+                w="280px"
+                border={isSelected ? "1px solid" : "none"}
+                borderColor={isSelected ? "blue.600" : "transparent"}
+                bg={isSelected ? "gray.100" : "white"}
+                borderRadius="md"
+                boxShadow={isSelected ? "lg" : "md"}
+            >
+                <Card.Root
+                    overflow="hidden"
+                    boxShadow={isSelected ? "lg" : "md"}
+                    transition="all 0.3s ease-in-out"
+                >
+                    <Image src={imageSrc} alt={itemTitle} />
+                    <Card.Body>
+                        <Card.Title>{itemTitle}</Card.Title>
+                    </Card.Body>
+                </Card.Root>
+            </Box>
+
+            <AnimatePresence>
+                {isHovered && (
+                    <MotionBox
+                        initial={{ opacity: 0, scale: 0.95 }}
+                        animate={{ opacity: 1, scale: 1.1 }}
+                        exit={{ opacity: 0, scale: 0.95 }}
+                        transition={{ duration: 0.25, ease: "easeInOut" }}
+                        style={{
+                            transformOrigin: "top center",
+                            position: "fixed",
+                            top: hoverPos.top,
+                            left: hoverPos.left + 15,
+                            zIndex: 10,
+                            pointerEvents: "auto",
+                            width: "280px",
+                        }}
+                        onMouseLeave={handleMouseLeave}
+                        onMouseEnter={() => setIsHovered(true)}
+                        borderRadius="md"
+                        border={isSelected ? "1px solid" : "none"}
+                        borderColor={isSelected ? "blue.600" : "transparent"}
+                        boxShadow={
+                            isSelected
+                                ? "0 0 15px 2px rgba(66,153,225,0.6)"
+                                : "2xl"
+                        }
+                    >
+                        <Card.Root overflow="hidden">
+                            <Image src={imageSrc} alt={itemTitle} />
+                            <Card.Body>
+                                <Card.Title>{itemTitle}</Card.Title>
+                                <Text mt={2}>{itemDescription}</Text>
+                            </Card.Body>
+                        </Card.Root>
+                    </MotionBox>
+                )}
+            </AnimatePresence>
+        </>
+    );
+};
+
+export default CardItem;