Fix duplicate img:hover rules in globals.css

src/app/globals.css

@@ -98,15 +98,6 @@
   --width-carousel-padding: calc((100vw - var(--width-content-width)) / 2 + 1px - var(--vw-1_5));
   --width-carousel-padding-controls: calc((100vw - var(--width-content-width)) / 2 + 1px);
   --width-carousel-padding-expanded: calc((var(--width-content-width-expanded) - var(--width-content-width)) / 2 + 1px - var(--vw-1_5));
-img:hover {
-  filter: blur(5px);
-}
-img:hover {
-  filter: blur(5px);
-}
-img:hover {
-  filter: blur(5px);
-}
   --width-carousel-padding-controls-expanded: calc((var(--width-content-width-expanded) - var(--width-content-width)) / 2 + 1px);
   --width-carousel-item-3: calc(var(--width-content-width) / 3 - var(--vw-1_5) / 3 * 2);
   --width-carousel-item-4: calc(var(--width-content-width) / 4 - var(--vw-1_5) / 4 * 3);

src/app/layout.tsx

@@ -1,79 +1,4 @@
 import { Metadata } from 'next';
-'use client';
-import { useState, useEffect } from 'react';
-
-function ImagePopup() {
-  const [isOpen, setIsOpen] = useState(false);
-  const [imageSrc, setImageSrc] = useState('');
-
-  useEffect(() => {
-    const handleClick = (e) => {
-      if (e.target.tagName === 'IMG' && !e.target.closest('[data-no-popup]')) {
-        setImageSrc(e.target.src);
-        setIsOpen(true);
-      }
-    };
-    document.addEventListener('click', handleClick);
-    return () => document.removeEventListener('click', handleClick);
-  }, []);
-
-  if (!isOpen) return null;
-  return (
-    <div className='fixed inset-0 z-[9999] bg-black/80 flex items-center justify-center cursor-pointer' onClick={() => setIsOpen(false)}>
-      <img src={imageSrc} alt='Expanded' className='max-w-[90vw] max-h-[90vh] object-contain' />
-    </div>
-  );
-}
-'use client';
-import { useState, useEffect } from 'react';
-
-function ImagePopup() {
-  const [isOpen, setIsOpen] = useState(false);
-  const [imageSrc, setImageSrc] = useState('');
-
-  useEffect(() => {
-    const handleClick = (e) => {
-      if (e.target.tagName === 'IMG' && !e.target.closest('[data-no-popup]')) {
-        setImageSrc(e.target.src);
-        setIsOpen(true);
-      }
-    };
-    document.addEventListener('click', handleClick);
-    return () => document.removeEventListener('click', handleClick);
-  }, []);
-
-  if (!isOpen) return null;
-  return (
-    <div className='fixed inset-0 z-[9999] bg-black/80 flex items-center justify-center cursor-pointer' onClick={() => setIsOpen(false)}>
-      <img src={imageSrc} alt='Expanded' className='max-w-[90vw] max-h-[90vh] object-contain' />
-    </div>
-  );
-}
-'use client';
-import { useState, useEffect } from 'react';
-
-function ImagePopup() {
-  const [isOpen, setIsOpen] = useState(false);
-  const [imageSrc, setImageSrc] = useState('');
-
-  useEffect(() => {
-    const handleClick = (e) => {
-      if (e.target.tagName === 'IMG' && !e.target.closest('[data-no-popup]')) {
-        setImageSrc(e.target.src);
-        setIsOpen(true);
-      }
-    };
-    document.addEventListener('click', handleClick);
-    return () => document.removeEventListener('click', handleClick);
-  }, []);
-
-  if (!isOpen) return null;
-  return (
-    <div className='fixed inset-0 z-[9999] bg-black/80 flex items-center justify-center cursor-pointer' onClick={() => setIsOpen(false)}>
-      <img src={imageSrc} alt='Expanded' className='max-w-[90vw] max-h-[90vh] object-contain' />
-    </div>
-  );
-}
 import { Manrope } from "next/font/google";
 import "./globals.css";
 import { ServiceWrapper } from "@/components/ServiceWrapper";
@@ -116,7 +41,7 @@ export default function RootLayout({
         >
           <Tag />
           {children}
-        
+
         <script
           dangerouslySetInnerHTML={{
             __html: `
@@ -1338,4 +1263,4 @@ export default function RootLayout({
       </ServiceWrapper>
     </html>
   );
-}
+}

src/providers/themeProvider/ThemeProvider.tsx

@@ -1,4 +1,28 @@
 "use client";
+import { useState, useEffect } from 'react';
+
+function ImagePopup() {
+  const [isOpen, setIsOpen] = useState(false);
+  const [imageSrc, setImageSrc] = useState('');
+
+  useEffect(() => {
+    const handleClick = (e) => {
+      if (e.target.tagName === 'IMG' && !e.target.closest('[data-no-popup]')) {
+        setImageSrc(e.target.src);
+        setIsOpen(true);
+      }
+    };
+    document.addEventListener('click', handleClick);
+    return () => document.removeEventListener('click', handleClick);
+  }, []);
+
+  if (!isOpen) return null;
+  return (
+      <div className='fixed inset-0 z-[9999] bg-black/80 flex items-center justify-center cursor-pointer' onClick={() => setIsOpen(false)}>
+        <img src={imageSrc} alt='Expanded' className='max-w-[90vw] max-h-[90vh] object-contain' />
+      </div>
+  );
+}
 
 import { createContext, useContext } from "react";
 import type { ThemeConfig, ThemeProviderProps } from "./config/types";