Skip to content

Added hover interaction to FAQ items #27

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Akash22-cyber wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Added hover interaction to FAQ items #27

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
42 changes: 21 additions & 21 deletions dist/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,22 +1,22 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link
rel="icon"
type="image/png"
href="https://aossie-org.github.io/PictoPy/assets/favicon.png"
/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta
name="description"
content="PictoPy - Advanced desktop gallery application powered by Tauri, React, and Rust"
/>
<title>PictoPy</title>
<script type="module" crossorigin src="/assets/index-C5vtocBI.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link
rel="icon"
type="image/png"
href="https://aossie-org.github.io/PictoPy/assets/favicon.png"
/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta
name="description"
content="PictoPy - Advanced desktop gallery application powered by Tauri, React, and Rust"
/>
<title>PictoPy</title>
<script type="module" crossorigin src="/assets/index-OQI8_xVT.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-B2IaS9E7.css">
</head>
<body class="light">
<div id="root"></div>
</body>
</html>
</head>
<body class="light">
<div id="root"></div>
</body>
</html>
Expand Down
4 changes: 2 additions & 2 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

31 changes: 19 additions & 12 deletions src/Pages/FaqPage/FAQ.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -96,17 +96,24 @@ function FAQItem({ question, answer, isOpen, onClick, index, icon }: FAQItemProp

return (
<motion.div
className={`rounded-xl overflow-hidden transition-all duration-300
bg-white dark:bg-black
border
${isOpen
? 'border- 6 border-pink-500 dark:border-grey-500'
: 'border- 6 - dark:border-grey-500'}
`}
initial={{ opacity: 0, y: 30 }}
whileInView={{ opacity: 1, y: 0 }}
transition={{ duration: 0.5, delay: index * 0.1 }}
viewport={{ once: true }}
className={`rounded-xl overflow-hidden
bg-white dark:bg-black
border-2
transition-colors duration-200
${isOpen
? 'border-green-400 dark:border-green-500 shadow-md'
: 'border-gray-200 dark:border-gray-700 hover:border-green-300 dark:hover:border-green-600'}
`}
whileHover={{
y: -6,
scale: 1.02,
boxShadow: "0 12px 24px rgba(0,0,0,0.15)"
}}
transition={{
type: "spring",
stiffness: 300,
damping: 20
}}
Comment thread
Akash22-cyber marked this conversation as resolved.
>
<button
className="flex justify-between items-center w-full text-left p-6 group"
Expand Down Expand Up @@ -149,7 +156,7 @@ function FAQItem({ question, answer, isOpen, onClick, index, icon }: FAQItemProp

function BackgroundAnimation({ darkMode }: { darkMode: boolean }) {
return (
<div className="absolute inset-0 overflow-hidden">
<div className="absolute inset-0 -z-10 pointer-events-none overflow-hidden">
Copy link
Copy Markdown

@coderabbitai coderabbitai bot Mar 24, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

Drop the negative z-index from the background layer.

pointer-events-none already prevents the background from blocking hover. Keeping -z-10 here is risky because the parent section does not create its own stacking context, so this layer can end up behind the section itself or adjacent sections.

Suggested patch 
-    <div className="absolute inset-0 -z-10 pointer-events-none overflow-hidden">
+    <div className="absolute inset-0 z-0 pointer-events-none overflow-hidden">
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<div className="absolute inset-0 -z-10 pointer-events-none overflow-hidden">
<div className="absolute inset-0 z-0 pointer-events-none overflow-hidden">
🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@src/Pages/FaqPage/FAQ.tsx` at line 159, Summary: Remove the negative z-index
from the background layer to avoid stacking issues. Locate the div whose
className contains "absolute inset-0 -z-10 pointer-events-none overflow-hidden"
in FAQ.tsx and remove the "-z-10" token (leave "absolute inset-0
pointer-events-none overflow-hidden"); if you need an explicit stacking order,
replace "-z-10" with "z-0" instead of a negative z value so the background stays
behind content without risking being pushed behind sibling sections.

{/* Fixed dots pattern */}
<div className="absolute inset-0" style={{
backgroundImage: `radial-gradient(${darkMode ? '#4B5563' : '#e5e7eb'} 1px, transparent 0)`,
Expand Down
Loading