diff --git a/README.md b/README.md index 595889480..edf2b49d7 100644 --- a/README.md +++ b/README.md @@ -63,3 +63,6 @@ Handles file system operations and provides a secure bridge between the frontend --- Our Code of Conduct: [CODE_OF_CONDUCT.md](./CODE_OF_CONDUCT.md) + +Gallery feature cards expand only after an intentional hover on desktop to prevent accidental interactions. Hover effects are disabled on touch devices. + diff --git a/frontend/src/components/Media/ImageCard.tsx b/frontend/src/components/Media/ImageCard.tsx index 0cc6a715a..a6ce358be 100644 --- a/frontend/src/components/Media/ImageCard.tsx +++ b/frontend/src/components/Media/ImageCard.tsx @@ -102,4 +102,4 @@ export function ImageCard({ ); -} +} \ No newline at end of file diff --git a/frontend/src/components/Navigation/Navbar/Navbar.tsx b/frontend/src/components/Navigation/Navbar/Navbar.tsx index c565b7f6d..ef28b7898 100644 --- a/frontend/src/components/Navigation/Navbar/Navbar.tsx +++ b/frontend/src/components/Navigation/Navbar/Navbar.tsx @@ -1,3 +1,10 @@ +import { + Tooltip, + TooltipContent, + TooltipProvider, + TooltipTrigger, +} from '@/components/ui/tooltip'; + import { Input } from '@/components/ui/input'; import { ThemeSelector } from '@/components/ThemeToggle'; import { Search } from 'lucide-react'; @@ -63,7 +70,19 @@ export function Navbar() { {/* FaceSearch Dialog */} - + + + +
+ +
+
+ + Face Scanner + +
+
+ + diff --git a/landing-page/src/components/ui/Features.tsx b/landing-page/src/components/ui/Features.tsx index eb4f33004..b4aed3585 100644 --- a/landing-page/src/components/ui/Features.tsx +++ b/landing-page/src/components/ui/Features.tsx @@ -53,35 +53,112 @@ const features: Feature[] = [ ]; // FeatureCard component +<<<<<<< HEAD +import { useRef, useState, useEffect } from "react"; +import { motion } from "framer-motion"; + +// Assuming Feature type is defined elsewhere or imported +// interface Feature { ... } + +======= +import { useRef, useState } from "react"; +import { motion } from "framer-motion"; + +>>>>>>> 2a16307 (Gallery feature cards expand only after an intentional hover on desktop to prevent accidental interactions. Hover effects are disabled on touch devices.) const FeatureCard = ({ feature }: { feature: Feature }) => { - // Define size classes with a default value for undefined sizes const sizeClasses = { large: "md:col-span-2", medium: "md:col-span-2", small: "md:col-span-1", }; - // Use the feature's size or default to "small" if undefined const sizeClass = sizeClasses[feature.size || "small"]; + const hoverTimer = useRef(null); + const [isHovered, setIsHovered] = useState(false); + +<<<<<<< HEAD + // Clean Up: Detect touch capability safely for SSR/Hybrid devices + // Ideally, rely on the delay logic, but this prevents touch-emulation triggers + const isTouchDevice = () => { + if (typeof window === "undefined") return false; + return window.matchMedia("(hover: none)").matches; + }; + + const handleMouseEnter = () => { + if (isTouchDevice()) return; + + // Logic: Only trigger state after 1 second of "intent" + hoverTimer.current = window.setTimeout(() => { + setIsHovered(true); + }, 1000); +======= + const isTouchDevice = + typeof window !== "undefined" && + ("ontouchstart" in window || navigator.maxTouchPoints > 0); + + const handleMouseEnter = () => { + if (isTouchDevice) return; + + hoverTimer.current = window.setTimeout(() => { + setIsHovered(true); + }, 1000); // 1s intentional hover +>>>>>>> 2a16307 (Gallery feature cards expand only after an intentional hover on desktop to prevent accidental interactions. Hover effects are disabled on touch devices.) + }; + + const handleMouseLeave = () => { + if (hoverTimer.current) { + clearTimeout(hoverTimer.current); + hoverTimer.current = null; + } + setIsHovered(false); + }; + return ( >>>>>> 2a16307 (Gallery feature cards expand only after an intentional hover on desktop to prevent accidental interactions. Hover effects are disabled on touch devices.) + animate={isHovered ? { scale: 1.02 } : { scale: 1 }} + transition={{ duration: 0.3 }} + onMouseEnter={handleMouseEnter} + onMouseLeave={handleMouseLeave} >
>>>>>> 2a16307 (Gallery feature cards expand only after an intentional hover on desktop to prevent accidental interactions. Hover effects are disabled on touch devices.) > -
{feature.icon}
-

{feature.title}

-

{feature.description}

-

{feature.details}

+
+ {feature.icon} +
+

+ {feature.title} +

+

+ {feature.description} +

+

+ {feature.details} +

);