fix: enhance TopicsList hover effects and tooltip positioning

prokopsimek · prokopsimek · commit 4d050617c55a · 2025-01-30T09:27:15.000+01:00
diff --git a/.nvmrc b/.nvmrc
@@ -0,0 +1 @@
+v22
diff --git a/package.json b/package.json
@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "@headlessui/react": "^2.2.0",
+    "@next/third-parties": "^15.1.6",
     "next": "15.1.4",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
@@ -25,5 +26,6 @@
     "postcss": "^8",
     "tailwindcss": "^3.4.1",
     "typescript": "^5"
-  }
+  },
+  "packageManager": "pnpm@9.9.0+sha512.60c18acd138bff695d339be6ad13f7e936eea6745660d4cc4a776d5247c540d0edee1a563695c183a66eb917ef88f2b4feb1fc25f32a7adcadc7aaf3438e99c1"
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/app/components/TopicsList.tsx b/src/app/components/TopicsList.tsx
@@ -13,14 +13,14 @@ export default function TopicsList() {
         <div key={id} className="relative group">
           <Link
             href={`/topics/${id}`}
-            className="w-full bg-purple text-white p-6 sm:p-8 rounded-2xl shadow-lg hover:shadow-xl transition-all duration-200 text-left flex flex-col justify-between min-h-[150px] border-2 border-transparent hover:border-white/20 group"
+            className="w-full bg-purple text-white p-6 sm:p-8 rounded-2xl shadow-lg hover:shadow-xl transition-all duration-200 text-left flex flex-col justify-between min-h-[150px] border-2 border-transparent hover:border-white/20 group hover:scale-[1.02] hover:-translate-y-1"
           >
-            <div>
+            <div className="relative">
               <h2 className="text-2xl font-staatliches text-white mb-2 pr-10">
                 {topic.title}
               </h2>
               <div
-                className="absolute top-6 sm:top-8 right-6 sm:right-8 w-8 h-8 rounded-full bg-white/20 hover:bg-white/30 flex items-center justify-center transition-colors border border-white/40"
+                className="absolute top-0 right-0 w-8 h-8 rounded-full bg-white/20 hover:bg-white/30 flex items-center justify-center transition-all duration-200 border border-white/40"
                 onMouseEnter={() => setHoveredTopic(id)}
                 onMouseLeave={() => setHoveredTopic(null)}
               >
@@ -30,11 +30,12 @@ export default function TopicsList() {
           </Link>
 
           <div 
-            className={`absolute z-10 w-80 p-5 bg-white rounded-xl shadow-xl top-full mt-2 right-0 text-left border-2 border-purple transition-all duration-200 origin-top-right ${
+            className={`absolute z-10 w-80 p-5 bg-white rounded-xl shadow-xl right-6 sm:right-8 text-left border-2 border-purple transition-all duration-200 origin-top-right ${
               hoveredTopic === id 
                 ? 'opacity-100 scale-100 translate-y-0' 
                 : 'opacity-0 scale-95 translate-y-2 pointer-events-none'
             }`}
+            style={{ top: '4rem' }}
           >
             <div className="space-y-3">
               {topic.description.map((paragraph) => (
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -2,6 +2,7 @@ import type { Metadata } from "next";
 import { Inter, Staatliches } from "next/font/google";
 import "./globals.css";
 import Navigation from "./components/Navigation";
+import { GoogleAnalytics } from '@next/third-parties/google'
 
 const inter = Inter({ subsets: ['latin'] });
 const staatliches = Staatliches({ weight: '400', subsets: ['latin'] });
@@ -21,6 +22,7 @@ export default function RootLayout({
       <body className={`${inter.className} ${staatliches.className} font-inter bg-athens-gray text-purple pt-12 pb-24`}>
         <Navigation />
         {children}
+        <GoogleAnalytics gaId={process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS_ID || ''} />
       </body>
     </html>
   );
